@bitrix24/b24ui-nuxt
Version:
Bitrix24 UI-Kit for developing web applications REST API for NUXT & VUE
7,896 lines • 237 kB
JavaScript
import 'node:url';
import { kebabCase } from 'scule';
import { addTypeTemplate, addTemplate } from '@nuxt/kit';
import { defuFn } from 'defu';
import { genExport } from 'knitwork';
const getDefaultUiConfig = () => ({});
const defaultOptions = {
colorMode: true
};
const accordion = {
slots: {
root: "w-full",
item: "border-b border-default last:border-b-0",
header: "flex",
trigger: "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3 focus-visible:outline-primary min-w-0 cursor-pointer",
content: "motion-safe:data-[state=open]:animate-[accordion-down_200ms_ease-out] motion-safe:data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none",
body: "text-sm pb-3",
leadingIcon: "shrink-0 size-5",
trailingIcon: "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200",
label: "text-start break-words"
},
variants: {
disabled: {
true: {
trigger: "cursor-not-allowed opacity-75"
}
}
}
};
const advice = {
slots: {
root: "flex items-end",
descriptionWrapper: [
"relative"
].join(" "),
descriptionBorder: [
"fill-blue-500 dark:fill-blue-300"
].join(" "),
descriptionBg: [
"fill-white dark:fill-base-900"
].join(" "),
descriptionAngle: [
"absolute",
"w-[14px] h-[12px]"
].join(" "),
description: [
"grow",
"w-11/12 py-3 px-md2 ms-2",
// -9/12
"rounded-[23px]",
"font-b24-secondary text-md leading-md font-normal",
"border-1",
"border-blue-500 bg-white text-base-950",
"dark:border-blue-300 dark:bg-base-900 dark:text-base-200"
].join(" "),
leading: "me-1.5 ms-2",
leadingIcon: "shrink-0 size-[42px]",
leadingAvatar: "shrink-0",
leadingAvatarSize: "lg"
},
variants: {
angle: {
top: {
root: "items-start",
leading: "mt-0.5",
descriptionAngle: [
"start-[0.8px] top-[9px]",
"scale-x-100 -scale-y-100",
"rtl:-scale-x-100"
].join(" ")
},
bottom: {
root: "items-end",
descriptionAngle: [
"start-[0.8px] bottom-[9px]",
"rtl:-scale-x-100"
].join(" ")
}
}
},
defaultVariants: {
angle: "bottom"
}
};
const alert = {
slots: {
root: "relative overflow-hidden w-full rounded-3xs flex",
wrapper: "min-w-0 flex-1 flex flex-col font-b24-primary font-normal",
title: "font-bold",
description: "",
icon: "shrink-0 size-6",
avatar: "shrink-0",
avatarSize: "",
actions: "flex flex-wrap gap-1.5 shrink-0",
close: "p-0"
},
variants: {
color: {
default: {
root: [
"text-base-950 bg-base-200",
"dark:text-base-950 dark:bg-base-200"
],
close: "text-base-800 dark:text-base-800 hover:text-base-950 dark:hover:text-base-950"
},
danger: {
root: [
"text-red-700 bg-red-200",
"dark:text-red-700 dark:bg-red-300"
],
close: "text-red-700 dark:text-red-700 hover:text-red-800 dark:hover:text-red-800"
},
success: {
root: [
"text-green-780 bg-green-200",
"dark:text-green-780 dark:bg-green-300"
],
close: "text-green-780 dark:text-green-780 hover:text-green-800 dark:hover:text-green-800"
},
warning: {
root: [
"text-orange-700 bg-orange-200",
"dark:text-orange-750 dark:bg-orange-300"
],
close: "text-orange-700 dark:text-orange-750 hover:text-orange-800 dark:hover:text-orange-800"
},
primary: {
root: [
"text-blue-700 bg-blue-200",
"dark:text-blue-700 dark:bg-blue-300"
],
close: "text-blue-700 dark:text-blue-700 hover:text-blue-800 dark:hover:text-blue-800"
},
secondary: {
root: [
"text-cyan-700 bg-cyan-150",
"dark:text-cyan-750 dark:bg-cyan-300"
],
close: "text-cyan-700 dark:text-cyan-750 hover:text-cyan-800 dark:hover:text-cyan-800"
},
collab: {
root: [
"text-collab-700 bg-collab-200",
"dark:text-collab-700 dark:bg-collab-300"
],
close: "text-collab-700 dark:text-collab-700 hover:text-collab-800 dark:hover:text-collab-800"
},
ai: {
root: [
"text-ai-700 bg-ai-200",
"dark:text-ai-700 dark:bg-ai-300"
],
close: "text-ai-700 dark:text-ai-700 hover:text-ai-800 dark:hover:text-ai-800"
}
},
size: {
sm: {
root: "py-xs ps-sm pe-xs gap-2",
title: "text-sm leading-normal",
description: "text-sm leading-normal",
avatarSize: "md"
},
md: {
root: "py-md ps-md pe-xs gap-2.5",
title: "text-md leading-none",
description: "text-md leading-[17px]",
avatarSize: "xl"
}
},
orientation: {
horizontal: {
root: "items-center",
actions: "items-center"
},
vertical: {
root: "items-start",
actions: "items-start mt-2"
}
},
title: {
true: {
description: "mt-1"
}
}
},
compoundVariants: [],
defaultVariants: {
color: "default",
size: "md"
}
};
const avatar = {
slots: {
root: "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-base-100 dark:bg-base-900",
image: "h-full w-full rounded-[inherit] object-cover",
fallback: "font-medium text-base-500 dark:text-base-600 truncate",
icon: "text-base-500 shrink-0 dark:text-base-600"
},
variants: {
size: {
"3xs": {
root: "size-xs2 text-4xs font-regular",
icon: "size-xs2"
},
"2xs": {
root: "size-5 text-4xs font-regular",
icon: "size-5"
},
"xs": {
root: "size-6 text-3xs font-regular",
icon: "size-6"
},
"sm": {
root: "size-7 text-xs",
icon: "size-7"
},
"md": {
root: "size-8 text-sm",
icon: "size-8"
},
"lg": {
root: "size-[42px] text-2xl",
icon: "size-[42px]"
},
"xl": {
root: "size-12 text-2xl",
icon: "size-12"
},
"2xl": {
root: "size-[60px] text-5xl",
icon: "size-[60px]"
},
"3xl": {
root: "size-[94px] text-[34px]",
icon: "size-[94px]"
}
}
},
defaultVariants: {
size: "md"
}
};
const avatarGroup = {
slots: {
root: "inline-flex justify-end",
base: "relative rounded-full ring-white dark:ring-base-700 last:me-0"
},
variants: {
size: {
"3xs": {
base: "ring -me-0.5"
},
"2xs": {
base: "ring -me-0.5"
},
"xs": {
base: "ring -me-0.5"
},
"sm": {
base: "ring -me-1.5"
},
"md": {
base: "ring-2 -me-1.5"
},
"lg": {
base: "ring-2 -me-1.5"
},
"xl": {
base: "ring-3 -me-2"
},
"2xl": {
base: "ring-3 -me-2"
},
"3xl": {
base: "ring-3 -me-2"
}
}
},
defaultVariants: {
size: "md"
}
};
const buttonGroupVariant = {
buttonGroup: {
horizontal: [
"focus-visible:outline-none",
"ring ring-inset ring-0 focus-visible:ring-2",
"group-[.is-button-group]/items:not-only:first:rounded-e-none group-[.is-button-group]/items:not-only:last:rounded-s-none group-[.is-button-group]/items:not-last:not-first:rounded-none",
"group-[.is-button-group]/items:not-only:first:border-e-0 group-[.is-button-group]/items:not-only:not-first:border-s-0",
"focus-visible:z-[1]"
].join(" "),
vertical: [
"focus-visible:outline-none",
"ring ring-inset ring-0 focus-visible:ring-2",
"not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none",
"focus-visible:z-[1]"
].join(" ")
},
noSplit: {
false: [
"group-[.is-button-group]/items:not-only:not-first:after:content-[''] group-[.is-button-group]/items:not-only:not-first:after:absolute",
"group-[.is-button-group]/items:not-only:not-first:after:top-[7px] group-[.is-button-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-button-group]/items:not-only:not-first:after:left-0 group-[.is-button-group]/items:not-only:not-first:after:w-px",
"group-[.is-button-group]/items:not-only:not-first:after:bg-current/30"
].join(" ")
}
};
const buttonGroupVariantWithRoot = {
buttonGroup: {
horizontal: {
root: "group leading-none has-focus-visible:z-[1]",
base: [
"focus-visible:outline-none",
"ring ring-inset ring-1 focus-visible:ring-2",
"group-not-only:group-first:rounded-e-3xl group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none",
"group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none",
"group-not-only:group-first:border-e-0 group-not-only:group-not-first:border-s-0"
].join(" ")
},
vertical: {
root: "group has-focus-visible:z-[1]",
base: [
"focus-visible:outline-none",
"ring ring-inset ring-1 focus-visible:ring-2",
"group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none"
].join(" ")
}
},
noSplit: {
false: [
"group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute",
"group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px",
"group-not-only:not-first:after:bg-current/30"
].join(" ")
}
};
const buttonGroup = {
base: "relative",
variants: {
size: {
xs: "",
sm: "",
md: "",
lg: ""
},
orientation: {
horizontal: "flex flex-row -space-x-px",
vertical: "flex flex-col -space-y-px"
}
}
};
const badge = {
slots: {
base: [
"select-none font-b24-secondary font-normal",
"inline-flex items-center",
"transition-all duration-200 ease-linear",
"px-2 leading-normal rounded-md"
].join(" "),
wrapper: "inline-flex items-center",
label: "max-w-full whitespace-nowrap text-ellipsis decoration-from-font",
leadingIcon: "shrink-0",
leadingAvatar: "shrink-0",
leadingAvatarSize: "",
trailingIcon: "shrink-0 cursor-pointer hover:rounded-full hover:bg-current/20 dark:hover:bg-current/35"
},
variants: {
...buttonGroupVariant,
useLink: {
true: {
base: "cursor-pointer",
wrapper: "group",
label: "group-hover:underline group-hover:decoration-dashed"
}
},
useClose: {
true: "pe-2xs"
},
useFill: {
true: "",
false: "bg-transparent"
},
leading: {
true: "ps-1"
},
color: {
default: "",
danger: "",
success: "",
warning: "",
primary: "",
secondary: "",
collab: "",
ai: ""
},
depth: {
light: "font-normal",
normal: "font-bold",
dark: "font-bold"
},
size: {
xs: {
base: "text-5xs gap-0.5",
wrapper: "h-[14px] gap-0.5",
label: "underline-offset-1",
leadingIcon: "size-sm",
leadingAvatarSize: "3xs",
trailingIcon: "size-sm "
},
sm: {
base: "text-4xs gap-1",
wrapper: "h-[16px] gap-1",
label: "underline-offset-1",
leadingIcon: "size-sm2",
leadingAvatarSize: "3xs",
trailingIcon: "size-sm2"
},
md: {
base: "text-3xs gap-1",
wrapper: "h-[17px] gap-1",
label: "underline-offset-1",
leadingIcon: "size-[15px]",
leadingAvatarSize: "3xs",
trailingIcon: "size-[15px]"
},
lg: {
base: "text-xs gap-1 rounded-lg",
wrapper: "h-[24px] gap-1",
leadingIcon: "size-[22px]",
leadingAvatarSize: "2xs",
trailingIcon: "size-[22px]"
},
xl: {
base: "text-md gap-1 rounded-xl",
wrapper: "h-[31px] gap-1",
leadingIcon: "size-[26px]",
leadingAvatarSize: "xs",
trailingIcon: "size-[26px]"
}
},
square: {
true: ""
}
},
compoundVariants: [
// region default ////
// TAG_LIGHT ////
{
color: "default",
depth: "light",
class: [
"ring ring-inset",
"text-base-900 bg-base-100 ring-base-100",
"dark:text-base-900 dark:bg-base-150 dark:ring-base-150"
].join(" ")
},
// DEFAULT ////
{
color: "default",
depth: "normal",
class: [
"ring ring-inset",
"text-base-800 bg-base-150 ring-base-300",
"dark:text-base-950 dark:bg-base-200 dark:ring-base-800"
].join(" ")
},
// LIGHT ////
// @memo it should be LIGHT but that's equivalent to DEFAULT -> so we make it really dark ////
{
color: "default",
depth: "dark",
class: [
"ring ring-inset",
"text-white bg-base-500 ring-base-500",
"dark:text-base-50 dark:bg-base-600 dark:ring-base-600"
].join(" ")
},
// endregion ////
// region danger ////
// LIGHT_RED ////
{
color: "danger",
depth: "light",
class: [
"ring ring-inset",
"text-red-800 bg-red-500/17 ring-red-500/17",
"dark:text-red-900 dark:bg-red-300 dark:ring-red-300"
].join(" ")
},
// DANGER ////
{
color: "danger",
depth: "normal",
class: [
"ring ring-inset",
"text-red-800 bg-red-250 ring-red-250",
"dark:text-red-800 dark:bg-red-350 dark:ring-red-350"
].join(" ")
},
// danger_dark ////
{
color: "danger",
depth: "dark",
class: [
"ring ring-inset",
"text-white bg-red-500 ring-red-500",
"dark:text-red-250 dark:bg-red-600 dark:ring-red-600"
].join(" ")
},
// endregion ////
// region success ////
// LIGHT_GREEN ////
// @memo it should be LIGHT_GREEN but that's equivalent to SUCCESS -> so we make it really light ////
{
color: "success",
depth: "light",
class: [
"ring ring-inset",
"text-green-800 bg-green-500/17 ring-green-500/17",
"dark:text-green-900 dark:bg-green-300 dark:ring-green-300"
].join(" ")
},
// SUCCESS ////
{
color: "success",
depth: "normal",
class: [
"ring ring-inset",
"text-green-800 bg-green-300 ring-green-300",
"dark:text-green-800 dark:bg-green-330 dark:ring-green-330"
].join(" ")
},
// success_dark ////
{
color: "success",
depth: "dark",
class: [
"ring ring-inset",
"text-white bg-green-500 ring-green-500",
"dark:text-green-250 dark:bg-green-600 dark:ring-green-600"
].join(" ")
},
// endregion ////
// region warning ////
// ORANGE ////
{
color: "warning",
depth: "light",
class: [
"ring ring-inset",
"text-orange-800 bg-orange-250 ring-orange-300",
"dark:text-orange-900 dark:bg-orange-300 dark:ring-orange-300"
].join(" ")
},
// LIGHT_ORANGE ////
{
color: "warning",
depth: "normal",
class: [
"ring ring-inset",
"text-orange-800 bg-orange-300 ring-orange-300",
"dark:text-orange-800 dark:bg-orange-400 dark:ring-orange-400"
].join(" ")
},
// WARNING ////
{
color: "warning",
depth: "dark",
class: [
"ring ring-inset",
"text-white bg-orange-500 ring-orange-500",
"dark:text-orange-250 dark:bg-orange-600 dark:ring-orange-600"
].join(" ")
},
// endregion ////
// region primary ////
// LIGHT_BLUE ////
// @memo it should be LIGHT_BLUE but that's equivalent to PRIMARY -> so we make it really light ////
{
color: "primary",
depth: "light",
class: [
"ring ring-inset",
"text-blue-800 bg-blue-500/17 ring-blue-500/17",
"dark:text-blue-900 dark:bg-blue-300 dark:ring-blue-300"
].join(" ")
},
// PRIMARY ////
{
color: "primary",
depth: "normal",
class: [
"ring ring-inset",
"text-blue-700 bg-blue-250 ring-blue-250",
"dark:text-blue-700 dark:bg-blue-300 dark:ring-blue-300"
].join(" ")
},
// primary_dark ////
{
color: "primary",
depth: "dark",
class: [
"ring ring-inset",
"text-white bg-blue-500 ring-blue-500",
"dark:text-blue-250 dark:bg-blue-600 dark:ring-blue-600"
].join(" ")
},
// endregion ////
// region secondary ////
// TAG_SECONDARY ////
{
color: "secondary",
depth: "light",
class: [
"ring ring-inset",
"text-base-master bg-blue-320 ring-blue-320",
"dark:text-base-master dark:bg-blue-400 dark:ring-blue-400"
].join(" ")
},
// SECONDARY ////
{
color: "secondary",
depth: "normal",
class: [
"ring ring-inset",
"text-white bg-cyan-350 ring-cyan-350",
"dark:text-cyan-100 dark:bg-cyan-400 dark:ring-cyan-400"
].join(" ")
},
// secondary_dark ////
{
color: "secondary",
depth: "dark",
class: [
"ring ring-inset",
"text-white bg-cyan-500 ring-cyan-500",
"dark:text-cyan-250 dark:bg-cyan-600 dark:ring-cyan-600"
].join(" ")
},
// endregion ////
// region collab ////
{
color: "collab",
depth: "light",
class: [
"ring ring-inset",
"text-collab-800 bg-collab-500/17 ring-collab-500/17",
"dark:text-collab-900 dark:bg-collab-300 dark:ring-collab-300"
].join(" ")
},
{
color: "collab",
depth: "normal",
class: [
"ring ring-inset",
"text-collab-800 bg-collab-300 ring-collab-300",
"dark:text-collab-800 dark:bg-collab-300 dark:ring-collab-300"
].join(" ")
},
{
color: "collab",
depth: "dark",
class: [
"ring ring-inset",
"text-white bg-collab-500 ring-collab-500",
"dark:text-collab-250 dark:bg-collab-600 dark:ring-collab-600"
].join(" ")
},
// endregion ////
// region ai ////
// COPILOT_LIGHT_REVERSE ////
{
color: "ai",
depth: "light",
class: [
"ring ring-inset",
"text-ai-500 bg-white ring-ai-10",
"dark:text-ai-500 dark:bg-ai-50 dark:ring-ai-50"
].join(" ")
},
// LAVENDER ////
{
color: "ai",
depth: "normal",
class: [
"ring ring-inset",
"text-ai-500 bg-ai-150 ring-ai-150",
"dark:text-ai-600 dark:bg-ai-200 dark:ring-ai-200"
].join(" ")
},
// COPILOT_LIGHT ////
{
color: "ai",
depth: "dark",
class: [
"ring ring-inset",
"text-white bg-ai-330 ring-ai-330",
"dark:text-ai-100 dark:bg-ai-400 dark:ring-ai-400"
].join(" ")
},
// endregion ////
// region square ////
{
size: "xs",
square: true,
class: {
base: "p-0 ps-0 pe-0",
wrapper: "p-0.5 gap-0"
}
},
{
size: "sm",
square: true,
class: {
base: "p-0 ps-0 pe-0",
wrapper: "p-1 gap-0"
}
},
{
size: "md",
square: true,
class: {
base: "p-0 ps-0 pe-0",
wrapper: "p-1 gap-0"
}
},
{
size: "lg",
square: true,
class: {
base: "p-0 ps-0 pe-0",
wrapper: "p-1 gap-0"
}
},
{
size: "xl",
square: true,
class: {
base: "p-0 ps-0 pe-0",
wrapper: "p-1 gap-0"
}
},
// endregion ////
// region useLink & useFill ////
{
useLink: true,
useFill: false,
class: [
// 'hover:bg-base-100 dark:hover:bg-base-900'
].join(" ")
},
{
useFill: false,
class: "text-base-800 dark:text-base-250 bg-transparent dark:bg-transparent"
},
// endregion ////
// region useClose ////
{
useClose: true,
class: ""
},
// endregion ////
// region buttonGroup ////
{
buttonGroup: ["horizontal", "vertical"],
class: "rounded-2xs"
}
// endregion ////
],
defaultVariants: {
color: "default",
depth: "normal",
size: "md",
useFill: false
}
};
const safeList$1 = [
"h-full w-full absolute inset-0 flex flex-row flex-nowrap items-center justify-center",
"w-[28px] h-[28px]",
"size-lg animate-spin stroke-2",
"invisible"
].join(" ");
const button = {
slots: {
base: [
"select-none cursor-pointer inline-flex items-center",
"relative",
"outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2",
"disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:opacity-50",
"transition duration-150 ease-linear"
// transition-colors
],
baseLine: [
"inline-flex items-center"
// justify-center
].join(" "),
label: "truncate",
leadingIcon: "shrink-0",
leadingAvatar: "shrink-0",
leadingAvatarSize: "",
trailingIcon: "shrink-0",
safeList: safeList$1
},
variants: {
...buttonGroupVariant,
color: {
default: [
"text-white dark:text-base-100 bg-base-650 border border-base-650",
"hover:bg-base-850 hover:border-base-850 hover:focus-visible:ring-0",
"active:bg-slate-850 active:border-slate-850 active:focus-visible:ring-0",
"disabled:bg-base-650 aria-disabled:bg-base-650 disabled:border-base-650 aria-disabled:border-base-650",
"focus-visible:outline-base-650",
"ring-base-850 focus:outline-none focus-visible:ring-base-850"
].join(" "),
danger: [
"text-white dark:text-red-100 bg-red-720 border border-red-720",
"hover:bg-red-790 hover:border-red-790 hover:focus-visible:ring-0",
"active:bg-red-730 active:border-red-730 active:focus-visible:ring-0",
"disabled:bg-red-720 aria-disabled:bg-red-720 disabled:border-red-720 aria-disabled:border-red-720",
"focus-visible:outline-red-720",
"ring-red-800 focus:outline-none focus-visible:ring-red-800"
].join(" "),
success: [
"text-base-900 bg-green-450 border border-green-450",
"hover:bg-green-370 hover:border-green-370 hover:focus-visible:ring-0",
"active:bg-green-430 active:border-green-430 active:focus-visible:ring-0",
"disabled:bg-green-450 aria-disabled:bg-green-450 disabled:border-green-450 aria-disabled:border-green-450",
"focus-visible:outline-green-450",
"ring-green-500 focus:outline-none focus-visible:ring-green-500"
].join(" "),
warning: [
"text-white dark:text-orange-100 bg-orange-500 border border-orange-500",
"hover:bg-orange-500/75 hover:border-orange-500/75 hover:focus-visible:ring-0",
"active:bg-orange-500/85 active:border-orange-500/85 active:focus-visible:ring-0",
"disabled:bg-orange-500 aria-disabled:bg-orange-500 disabled:border-bg-orange-500 aria-disabled:border-bg-orange-500",
"focus-visible:outline-orange-500",
"ring-orange-800 focus:outline-none focus-visible:ring-orange-800"
].join(" "),
primary: [
"text-white dark:text-blue-100 bg-blue-530 border border-blue-530",
"hover:bg-blue-450 hover:border-blue-450 hover:focus-visible:ring-0",
"active:bg-blue-550 active:border-blue-550 active:focus-visible:ring-0",
"disabled:bg-blue-530 aria-disabled:bg-blue-530 disabled:border-blue-530 aria-disabled:border-blue-530",
"focus-visible:outline-blue-530",
"ring-blue-800 focus:outline-none focus-visible:ring-blue-800"
].join(" "),
secondary: [
"text-base-900 bg-cyan-160 border border-cyan-230",
"hover:bg-cyan-150 hover:border-cyan-230 hover:focus-visible:ring-0",
"active:bg-cyan-230 active:border-cyan-230 active:focus-visible:ring-0",
"disabled:bg-cyan-160 aria-disabled:bg-cyan-160 disabled:border-cyan-230 aria-disabled:border-cyan-230",
"focus-visible:outline-cyan-160",
"ring-cyan-500 focus:outline-none focus-visible:ring-cyan-500"
].join(" "),
collab: [
"text-white dark:text-collab-100 bg-collab-600 border border-collab-600",
"hover:bg-collab-500 hover:border-collab-500 hover:focus-visible:ring-0",
"active:bg-collab-700 active:border-collab-700 active:focus-visible:ring-0",
"disabled:bg-collab-600 aria-disabled:bg-collab-600 disabled:border-collab-600 aria-disabled:border-collab-600",
"focus-visible:outline-collab-600",
"ring-collab-900 focus:outline-none focus-visible:ring-collab-900"
].join(" "),
ai: [
"text-white dark:text-ai-100 bg-ai-450 border border-ai-450",
"hover:bg-ai-370 hover:border-ai-370 hover:focus-visible:ring-0",
"active:bg-ai-550 active:border-ai-550 active:focus-visible:ring-0",
"disabled:bg-ai-450 aria-disabled:bg-ai-450 disabled:border-ai-450 aria-disabled:border-ai-450",
"focus-visible:outline-ai-450",
"ring-ai-900 focus:outline-none focus-visible:ring-ai-900"
].join(" "),
link: [
"no-underline decoration-solid decoration-auto",
"text-base-900 decoration-gray-900 bg-transparent border border-transparent dark:text-base-300",
"hover:text-base-750 dark:hover:text-base-400 hover:focus-visible:ring-0",
"active:text-base-900 dark:active:text-base-700 active:focus-visible:ring-0",
"disabled:text-base-900 aria-disabled:text-base-900 dark:disabled:text-base-300 dark:aria-disabled:disabled:text-base-300",
"focus-visible:outline-base-400",
"ring-base-850 focus:outline-none focus-visible:ring-base-850"
].join(" ")
},
depth: {
light: "",
normal: "",
dark: ""
},
size: {
xs: {
base: "h-xl2 ps-4 pe-4 text-3xs leading-none",
// 26px
baseLine: "gap-1",
leadingIcon: "size-5",
leadingAvatarSize: "2xs",
trailingIcon: "size-md2"
},
sm: {
base: "h-3xl ps-[18px] pe-[18px] text-xs leading-none",
// 32px
baseLine: "gap-1.5",
leadingIcon: "size-6",
leadingAvatarSize: "xs",
trailingIcon: "size-lg"
},
md: {
base: "h-5xl ps-5 pe-5 text-xs leading-none",
// 40px
baseLine: "gap-1.5",
leadingIcon: "size-xl2",
leadingAvatarSize: "sm",
trailingIcon: "size-lg"
},
lg: {
base: "h-6xl ps-[28px] pe-[28px] text-xs leading-none",
// ? 48px
baseLine: "gap-2",
leadingIcon: "size-xl2",
leadingAvatarSize: "md",
trailingIcon: "size-lg"
}
},
block: {
true: {
base: "w-full",
baseLine: "w-full justify-center",
trailingIcon: "ms-auto"
}
},
rounded: {
true: "rounded-full",
false: "rounded-2xs"
},
leading: {
true: ""
},
useLabel: {
true: "",
false: "ps-1.5 pe-1.5 justify-center"
},
useDropdown: {
true: "ps-2 pe-2"
},
useWait: {
true: ""
},
useClock: {
true: ""
},
loading: {
true: ""
},
normalCase: {
true: "font-semibold normal-case",
false: "font-bold uppercase"
},
active: {
true: {
base: ""
},
false: {
base: ""
}
}
},
compoundVariants: [
// region default ////
{
color: "default",
depth: "light",
class: [
"text-base-800 dark:text-base-800 bg-base-200 border border-base-300",
"hover:bg-base-320 hover:border-base-320 hover:focus-visible:ring-0",
"active:bg-base-250 active:border-base-250 active:focus-visible:ring-0",
"disabled:bg-base-200 aria-disabled:bg-base-200 disabled:border-base-300 aria-disabled:border-base-300",
"focus-visible:outline-base-200",
"ring-base-320 focus-visible:ring-base-320"
].join(" ")
},
{
// new BASE_DARK ////
color: "default",
depth: "dark",
class: [
"text-white dark:text-base-100 bg-base-900 border border-base-900",
"hover:bg-base-900/75 hover:border-base-900/75 hover:focus-visible:ring-0",
"active:bg-base-900/85 active:border-base-900/85 active:focus-visible:ring-0",
"disabled:bg-base-900 aria-disabled:bg-base-900 disabled:border-base-900 aria-disabled:border-base-900",
"focus-visible:outline-base-900",
"ring-base-700 focus-visible:ring-base-700"
].join(" ")
},
// endregion ////
// region danger ////
{
// DANGER_LIGHT ////
color: "danger",
depth: "light",
class: [
"text-red-750 dark:text-red-760 bg-red-270 border border-red-270",
"hover:bg-red-250 hover:border-red-250 dark:hover:bg-red-200 dark:hover:border-red-200 hover:focus-visible:ring-0",
"active:bg-red-350 active:border-red-350 dark:active:bg-red-350 dark:active:border-red-350 active:focus-visible:ring-0",
"disabled:bg-red-270 aria-disabled:bg-red-270 disabled:border-red-270 aria-disabled:border-red-270",
"dark:disabled:bg-red-270 dark:aria-disabled:bg-red-270 dark:disabled:border-red-270 dark:aria-disabled:border-red-270",
"focus-visible:outline-red-270"
].join(" ")
},
{
// DANGER_DARK ////
color: "danger",
depth: "dark",
class: [
"text-white dark:text-red-100 bg-red-850 border border-red-850",
"hover:bg-red-760 hover:border-red-760 hover:focus-visible:ring-0",
"active:bg-red-930 active:border-red-930 active:focus-visible:ring-0",
"disabled:bg-red-850 aria-disabled:bg-red-850 disabled:border-red-850 aria-disabled:border-red-850",
"focus-visible:outline-red-850",
"ring-red-950 focus-visible:ring-red-950"
].join(" ")
},
// endregion ////
// region success ////
{
// SUCCESS_LIGHT ////
color: "success",
depth: "light",
class: [
"text-green-780 bg-green-280 border border-green-280",
"hover:bg-green-270 hover:border-green-270 hover:focus-visible:ring-0",
"dark:hover:bg-green-200 dark:hover:border-green-200",
"active:bg-green-330 active:border-green-270 active:focus-visible:ring-0",
"dark:active:bg-green-330 dark:active:border-green-270",
"disabled:bg-green-280 aria-disabled:bg-green-280 disabled:border-green-280 aria-disabled:border-green-280",
"dark:disabled:bg-green-280 dark:aria-disabled:bg-green-280 dark:disabled:border-green-280 dark:aria-disabled:border-green-280",
"focus-visible:outline-green-280"
].join(" ")
},
{
// SUCCESS_DARK ////
color: "success",
depth: "dark",
class: [
"text-white dark:text-green-100 bg-green-730 border border-green-730",
"hover:bg-green-570 hover:border-green-570 hover:focus-visible:ring-0",
"active:bg-green-570 active:border-green-570 active:focus-visible:ring-0",
"disabled:bg-green-730 aria-disabled:bg-green-730 disabled:border-green-730 aria-disabled:border-green-730",
"focus-visible:outline-green-730",
"ring-green-900 focus-visible:ring-green-900"
].join(" ")
},
// endregion ////
// region warning ////
{
// WARNING_LIGHT ////
color: "warning",
depth: "light",
class: [
"text-orange-750 dark:text-orange-750 bg-orange-350/80 border border-orange-350/80 dark:bg-orange-230 dark:border-orange-230",
"hover:bg-orange-500/65 hover:border-orange-500/65 dark:hover:bg-orange-400 dark:hover:border-orange-400 hover:focus-visible:ring-0",
"active:bg-orange-550 active:border-orange-550 dark:active:bg-orange-600 dark:active:border-orange-600 active:focus-visible:ring-0",
"disabled:bg-orange-230 aria-disabled:bg-orange-230 disabled:border-orange-230 aria-disabled:border-orange-230 dark:disabled:bg-orange-230 dark:aria-disabled:bg-orange-230 dark:disabled:border-orange-230 dark:aria-disabled:border-orange-230",
"focus-visible:outline-orange-230"
].join(" ")
},
{
// new WARNING_DARK ////
color: "warning",
depth: "dark",
class: [
"text-white dark:text-orange-100 bg-orange-700 border border-orange-700",
"hover:bg-orange-700/75 hover:border-orange-700/75 hover:focus-visible:ring-0",
"active:bg-orange-700/85 active:border-orange-700/85 active:focus-visible:ring-0",
"disabled:bg-orange-700 aria-disabled:bg-orange-700 disabled:border-orange-700 aria-disabled:border-orange-700",
"focus-visible:outline-orange-700"
].join(" ")
},
// endregion ////
// region primary ////
{
// new PRIMARY_LIGHT ////
color: "primary",
depth: "light",
class: [
"text-blue-800 dark:text-blue-800 bg-blue-300 border border-blue-400",
"hover:bg-blue-300/75 hover:border-blue-300/75 hover:focus-visible:ring-0",
"active:bg-blue-300/85 active:border-blue-300/85 active:focus-visible:ring-0",
"disabled:bg-blue-300 aria-disabled:bg-blue-300 disabled:border-blue-300 aria-disabled:border-blue-300",
"focus-visible:outline-blue-300"
].join(" ")
},
{
// PRIMARY_DARK ////
color: "primary",
depth: "dark",
class: [
"text-white dark:text-blue-100 bg-blue-650 border border-blue-650",
"hover:bg-blue-630 hover:border-blue-630 hover:focus-visible:ring-0",
"active:bg-blue-750 active:border-blue-750 active:focus-visible:ring-0",
"disabled:bg-blue-650 aria-disabled:bg-blue-650 disabled:border-blue-650 aria-disabled:border-blue-650",
"focus-visible:outline-blue-650"
].join(" ")
},
// endregion ////
// region secondary ////
{
// SECONDARY_LIGHT ////
color: "secondary",
depth: "light",
class: [
"text-blue-620 dark:text-blue-850 bg-blue-310 border border-blue-310",
"hover:bg-cyan-150 hover:border-cyan-150 hover:focus-visible:ring-0",
"active:bg-cyan-230 active:border-cyan-230 active:focus-visible:ring-0",
"disabled:bg-blue-310 aria-disabled:bg-blue-310 disabled:border-blue-310 aria-disabled:border-blue-310",
"focus-visible:outline-blue-310"
].join(" ")
},
{
// new SECONDARY_DARK ////
color: "secondary",
depth: "dark",
class: [
"text-base-900 bg-cyan-350 border-cyan-500",
"hover:bg-cyan-350/75 hover:focus-visible:ring-0",
"active:bg-cyan-350/85 active:focus-visible:ring-0",
"disabled:bg-cyan-350 aria-disabled:bg-cyan-350",
"focus-visible:outline-cyan-350",
"ring-cyan-900 focus-visible:ring-cyan-900"
].join(" ")
},
// endregion ////
// region collab ////
{
// new collab_LIGHT ////
color: "collab",
depth: "light",
class: [
"text-collab-900 dark:text-collab-900 bg-collab-300 border border-collab-400",
"hover:bg-collab-300/75 hover:border-collab-300/75 hover:focus-visible:ring-0",
"active:bg-collab-300/85 active:border-collab-300/85 active:focus-visible:ring-0",
"disabled:bg-collab-300 aria-disabled:bg-collab-300 disabled:border-collab-300 aria-disabled:border-collab-300",
"focus-visible:outline-collab-300"
].join(" ")
},
{
// new collab_DARK ////
color: "collab",
depth: "dark",
class: [
"text-white dark:text-collab-100 bg-collab-700 border border-collab-700",
"hover:bg-collab-700/75 hover:border-collab-700/75 hover:focus-visible:ring-0",
"active:bg-collab-700/85 active:border-collab-700/85 active:focus-visible:ring-0",
"disabled:bg-collab-700 aria-disabled:bg-collab-700 disabled:border-collab-700 aria-disabled:border-collab-700",
"focus-visible:outline-collab-700"
].join(" ")
},
// endregion ////
// region ai ////
{
// new AI_LIGHT ////
color: "ai",
depth: "light",
class: [
"text-ai-900 dark:text-ai-900 bg-ai-300 border border-ai-400",
"hover:bg-ai-300/75 hover:border-ai-300/75 hover:focus-visible:ring-0",
"active:bg-ai-300/85 active:border-ai-300/85 active:focus-visible:ring-0",
"disabled:bg-ai-300 aria-disabled:bg-ai-300 disabled:border-ai-300 aria-disabled:border-ai-300",
"focus-visible:outline-ai-300"
].join(" ")
},
{
// new AI_DARK ////
color: "ai",
depth: "dark",
class: [
"text-white dark:text-ai-100 bg-ai-550 border border-ai-550",
"hover:bg-ai-550/75 hover:border-ai-550/75 hover:focus-visible:ring-0",
"active:bg-ai-550/85 active:border-ai-550/85 active:focus-visible:ring-0",
"disabled:bg-ai-550 aria-disabled:bg-ai-550 disabled:border-ai-550 aria-disabled:border-ai-550",
"focus-visible:outline-ai-550",
"ring-ai-900 focus-visible:ring-ai-900"
].join(" ")
},
// endregion ////
// region link ////
{
// LIGHT ////
color: "link",
depth: "light",
class: [
"text-base-900 dark:text-base-300 bg-transparent border border-transparent",
"hover:text-base-master dark:hover:text-base-100 hover:bg-base-30 dark:hover:bg-base-850 hover:focus-visible:ring-0",
"active:text-base-ebony active:bg-blue-270 dark:active:text-base-100 dark:active:bg-slate-850 active:focus-visible:ring-0",
"disabled:text-base-master disabled:bg-base-30 aria-disabled:bg-base-30 dark:disabled:text-base-100 dark:aria-disabled:text-base-100 dark:disabled:bg-base-850 dark:aria-disabled:bg-base-850",
"focus-visible:outline-base-30 dark:focus-visible:outline-base-850"
].join(" ")
},
{
// LINK ////
color: "link",
depth: "light",
useLabel: true,
class: "ps-1.5 pe-1.5"
},
{
color: "link",
depth: "normal",
useLabel: true,
class: "ps-0 pe-0"
},
{
// LIGHT_BORDER ////
color: "link",
depth: "dark",
class: [
"",
"border",
"text-base-900 bg-transparent border-base-330 dark:text-base-300 dark:border-base-800",
"hover:text-base-900 dark:hover:text-base-900 hover:bg-base-320 hover:border-base-330 hover:focus-visible:ring-0",
"active:text-base-900 dark:active:text-base-900 active:bg-base-250 active:border-base-550 active:focus-visible:ring-0",
"disabled:bg-transparent disabled:border-base-330 aria-disabled:bg-transparent aria-disabled:border-base-330",
"dark:disabled:text-base-900 dark:aria-disabled:text-base-900",
"dark:disabled:border-base-900 dark:aria-disabled:border-base-900",
"focus-visible:outline-base-330"
].join(" ")
},
// endregion ////
// region size && leading ////
{
size: "xs",
leading: true,
useLabel: true,
useDropdown: false,
class: "ps-1.5 pe-4"
},
{
size: "sm",
leading: true,
useLabel: true,
useDropdown: false,
class: "ps-2.5 pe-[18px]"
},
{
size: "md",
leading: true,
useLabel: true,
useDropdown: false,
class: "ps-3.5 pe-5"
},
{
size: "lg",
leading: true,
useLabel: true,
useDropdown: false,
class: "ps-4 pe-[28px]"
},
// endregion ////
// region size && useDropdown ////
{
size: "xs",
leading: false,
useLabel: true,
useDropdown: true,
class: "ps-4 pe-1.5"
},
{
size: "sm",
leading: false,
useLabel: true,
useDropdown: true,
class: "ps-[18px] pe-1.5"
},
{
size: "md",
leading: false,
useLabel: true,
useDropdown: true,
class: "ps-5 pe-2.5"
},
{
size: "lg",
leading: false,
useLabel: true,
useDropdown: true,
class: "ps-[28px] pe-3.5"
},
// endregion ////
// region size && leading && useDropdown ////
{
size: "xs",
leading: true,
useLabel: true,
useDropdown: true,
class: "ps-1.5 pe-1.5"
},
{
size: "sm",
leading: true,
useLabel: true,
useDropdown: true,
class: "ps-2.5 pe-1.5"
},
{
size: "md",
leading: true,
useLabel: true,
useDropdown: true,
class: "ps-3.5 pe-2.5"
},
{
size: "lg",
leading: true,
useLabel: true,
useDropdown: true,
class: "ps-4 pe-3.5"
},
// endregion ////
// region noCaps ////
{
normalCase: true,
size: "xs",
class: "text-xs"
},
{
normalCase: true,
size: "sm",
class: "text-sm"
},
{
normalCase: true,
size: "md",
class: "text-md"
},
{
normalCase: true,
size: "lg",
class: "text-md"
}
// endregion ////
],
defaultVariants: {
size: "md",
color: "default",
depth: "normal"
}
};
const calendar = {
slots: {
root: "font-b24-system w-full",
header: "flex items-center justify-between",
body: "flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0",
heading: "text-center font-semibold truncate mx-auto",
grid: "w-full border-collapse select-none space-y-1 focus:outline-none",
gridRow: "grid grid-cols-7 place-items-center",
gridWeekDaysRow: "mb-1 grid w-full grid-cols-7",
gridBody: "grid",
headCell: "font-normal text-base-500 dark:text-base-500",
cell: "relative text-center cursor-pointer aria-disabled:cursor-not-allowed",
cellTrigger: [
"m-0.5 relative",
"flex items-center justify-center",
"rounded-full whitespace-nowrap",
"focus-visible:ring-2 focus:outline-none",
"data-disabled:text-base-500 dark:data-disabled:text-base-600",
"data-unavailable:text-base-500 dark:data-unavailable:text-base-600",
"data-outside-view:text-base-500 dark:data-outside-view:text-base-600",
"data-[selected]:text-white dark:data-[selected]:text-base-100",
"data-unavailable:line-through",
"data-unavailable:pointer-events-none",
"data-today:font-semibold",
"transition"
].join(" ")
},
variants: {
color: {
default: {
cellTrigger: [
"focus-visible:ring-base-300 data-[selected]:bg-base-500 data-today:not-data-[selected]:text-blue-500 data-[highlighted]:bg-base-500/20 hover:not-data-[disabled]:not-data-[selected]:bg-base-500/20",
"dark:focus-visible:ring-base-800 dark:data-[selected]:bg-base-800 dark:data-today:not-data-[selected]:text-blue-600 dark:data-[highlighted]:bg-base-800/20 dark:hover:not-data-[disabled]:not-data-[selected]:bg-base-800/20"
].join(" ")
},
danger: {
cellTrigger: [
"focus-visible:ring-red-300 data-[selected]:bg-red-500 data-today:not-data-[selected]:text-red-500 data-[highlighted]:bg-red-500/20 hover:not-data-[disabled]:not-data-[selected]:bg-red-500/20",
"dark:focus-visible:ring-red-800 dark:data-[selected]:bg-red-500 dark:data-today:not-data-[selected]:text-red-600 dark:data-[highlighted]:bg-red-500/20 dark:hover:not-data-[disabled]:not-data-[selected]:bg-red-500/20"
].join(" ")
},
success: {
cellTrigger: [
"focus-visible:ring-green-300 data-[selected]:bg-green-500 data-today:not-data-[selected]:text-green-500 data-[highlighted]:bg-green-500/20 hover:not-data-[disabled]:not-data-[selected]:bg-green-500/20",
"dark:focus-visible:ring-green-800 dark:data-[selected]:bg-green-500 dark:data-today:not-data-[selected]:text-green-600 dark:data-[highlighted]:bg-green-500/20 dark:hover:not-data-[disabled]:not-data-[selected]:bg-green-500/20"
].join(" ")
},
warning: {
cellTrigger: [
"focus-visible:ring-orange-300 data-[selected]:bg-orange-500 data-today:not-data-[selected]:text-orange-500 data-[highlighted]:bg-orange-500/20 hover:not-data-[disabled]:not-data-[selected]:bg-orange-500/20",
"dark:focus-visible:ring-orange-800 dark:data-[selected]:bg-orange-500 dark:data-today:not-data-[selected]:text-orange-600 dark:data-[highlighted]:bg-orange-500/20 dark:hover:not-data-[disabled]:not-data-[selected]:bg-orange-500/20"
].join(" ")
},
primary: {
cellTrigger: [
"focus-visible:ring-blue-300 data-[selected]:bg-blue-500 data-today:not-data-[selected]:text-blue-500 data-[highlighted]:bg-blue-500/20 hover:not-data-[disabled]:not-data-[selected]:bg-blue-500/20",
"dark:focus-visible:ring-blue-800 dark:data-[selected]:bg-blue-500 dark:data-today:not-data-[selected]:text-blue-600 dark:data-[highlighted]:bg-blue-500/20 dark:hover:not-data-[disabled]:not-data-[selected]:bg-blue-500/20"
].join(" ")
},
secondary: {
cellTrigger: [
"focus-visible:ring-cyan-300 data-[selected]:bg-cyan-500 data-today:not-data-[selected]:text-cyan-500 data-[highlighted]:bg-cyan-500/20 hover:not-data-[disabled]:not-data-[selected]:bg-cyan-500/20",
"dark:focus-visible:ring-cyan-800 dark:data-[selected]:bg-cyan-500 dark:data-today:not-data-[selected]:text-cyan-600 dark:data-[highlighted]:bg-cyan-500/20 dark:hover:not-data-[disabled]:not-data-[selected]:bg-cyan-500/20"
].join(" ")
},
collab: {
cellTrigger: [
"focus-visible:ring-collab-300 data-[selected]:bg-collab-500 data-today:not-data-[selected]:text-collab-500 data-[highlighted]:bg-collab-500/20 hover:not-data-[disabled]:not-data-[selected]:bg-collab-500/20",
"dark:focus-visible:ring-collab-800 dark:data-[selected]:bg-collab-500 dark:data-today:not-data-[selected]:text-collab-600 dark:data-[highlighted]:bg-collab-500/20 dark:hover:not-data-[disabled]:not-data-[selected]:bg-collab-500/20"
].join(" ")
},
ai: {
cellTrigger: [
"focus-visible:ring-ai-300 data-[selected]:bg-ai-500 data-today:not-data-[selected]:text-ai-500 data-[highlighted]:bg-ai-500/20 hover:not-data-[disabled]:not-data-[selected]:bg-ai-500/20",
"dark:focus-visible:ring-ai-800 dark:data-[selected]:bg-ai-500 dark:data-today:not-data-[selected]:text-ai-600 dark:data-[highlighted]:bg-ai-500/20 dark:hover:not-data-[disabled]:not-data-[selected]:bg-ai-500/20"
].join(" ")
}
},
size: {
xs: {
heading: "text-md",
cell: "text-sm",
headCell: "text-[10px]",
cellTrigger: "size-7",
body: "space-y-2 pt-2"
},
sm: {
heading: "text-md",
headCell: "text-sm",
cell: "text-sm",
cellTrigger: "size-7"
},
md: {
heading: "text-lg",
headCell: "text-md",
cell: "text-md",
cellTrigger: "size-8"
},
lg: {
heading: "text-2xl",
headCell: "text-lg",
cell: "text-lg",
cellTrigger: "size-9 text-lg"
}
}
},
defaultVariants: {
size: "md",
color: "primary"
}
};
const checkbox = {
slots: {
root: "relative flex items-start",
base: [
"cursor-pointer shrink-0 flex items-center justify-center rounded-2xs text-white dark:text-base-150",
"ring ring-inset ring-base-300 dark:ring-base-700",
"outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2"
].join(" "),
indicator: "flex items-center justify-center size-full text-base-master dark:text-base-400",
container: "flex items-center",
wrapper: "font-b24-primary ms-2",
icon: "shrink-0 size-full",
label: "cursor-pointer block font-regular text-base-master dark:text-base-400",
description: "text-base-500 dark:text-base-600"
},
variants: {
color: {
default: "focus-visible:outline-base-900 dark:focus-visible:outline-base-350",
danger: "focus-visible:outline-red-500 dark:focus-visible:outline-red-600",
success: "focus-visible:outline-green-500 dark:focus-visible:outline-green-600",
warning: "focus-visible:outline-orange-500 dark:focus-visible:outline-orange-600",
primary: "focus-visible:outline-blue-500 dark:focus-visible:outline-blue-600",
secondary: "focus-visible:outline-cyan-350 dark:focus-visible:outline-cyan-500",
collab: "focus-visible:outline-collab-500 dark:focus-visible:outline-collab-600",
ai: "focus-visible:outline-ai-500 dark:focus-visible:outline-ai-600"
},
variant: {
list: {
root: ""
},
card: {
root: "border border-muted rounded-lg"
}
},
indicator: {
start: {
root: "flex-row",
wrapper: "ms-2"
},
end: {
root: "flex-row-reverse",
wrapper: "me-2"
},
hidden: {
base: "sr-only",
wrapper: "text-center"
}
},
size: {
xs: {
base: "size-3",
container: "h-4",
wrapper: "text-xs",
label: "leading-4"
},
sm: {
base: "size-3.5",
container: "h-4",
wrapper: "text-sm",
label: "leading-4"
},
md: {
base: "size-4",
container: "h-5",
wrapper: "text-md",
label: "leading-5"
},
lg: {
base: "size-5",
container: "h-5",
wrapper: "text-xl",
label: "leading-5"
}
},
required: {
true: {
label: "after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-600"
}
},
disabled: {
true: {
base: "cursor-not-allowed opacity-75",
label: "cursor-not-allowed opacity-75",
description: "cursor-not-allowed opacity-75"
}
},
checked: {
true: ""
}
},
compoundVariants: [
// region card ////
{ size: "xs", variant: "card", class: { root: "p-2.5" } },
{ size: "sm", variant: "card", class: { root: "p-3" } },
{ size: "md", variant: "card", class: { root: "p-3.5" } },
{ size: "lg", variant: "card", class: { root: "p-4" } },
// endregion ////
// region list ////
{
color: "default",
variant: "list",
checked: true,
class: "ring-2 ring-base-900 bg-base-900 dark:ring-base-350 dark:bg-base-350 dark:text-base-800"
},
{
color: "danger",
variant: "list",
checked: true,
class: "ring-2 ring-red-500 bg-red-500 dark:ring-red-600 dark:bg-red-600 dark:text-red-250"
},
{
color: "success",
variant: "list",
checked: true,
class: "ring-2 ring-green-500 bg-green-500 dark:ring-green-600 dark:bg-green-600 dark:text-green-250"
},
{
color: "warning",
variant: "list",
checked: true,
class: "ring-2 ring-orange-500 bg-orange-500 dark:ring-orange-600 dark:bg-orange-600 dark:text-orange-250"
},
{
color: "primary",
variant: "list",
checked: true,
class: "ring-2 ring-blue-500 bg-blue-500 dark:ring-blue-600 dark:bg-blue-600 dark:text-blue-250"
},
{
color: "secondary",
variant: "list",
checked: true,
class: "ring-2 ring-cyan-350 bg-cyan-350 dark:ring-cyan-500 dark:bg-cyan-500"
},
{
color: "collab",
variant: "list",
checked: true,
class: "ring-2 ring-collab-500 bg-collab-500 dark:ring-collab-600 dark:bg-collab-600 dark:text-collab-250"
},
{
color: "ai",
variant: "list",
checked: true,
class: "ring-2 ring-ai-500 bg-ai-500 dark:ring-ai-600 dark:bg-ai-600 dark:text-ai-250"
}
// endregion ////
],
defaultVariants: {
size: "md",
color: "primary",
variant: "list",
indicator: "start"
}
};
const chip = {
slots: {
root: "relative inline-flex items-center justify-center shrink-0",
base: "select-none rounded-sm flex items-center justify-center p-1 text-white leading-none font-semibold font-b24-secondary whitespace-nowrap"
},
variants: {
color: {
default: "bg-base-500 dark:bg-base-900 dark:text-base-150",
danger: "bg-red-500 dark:bg-red-600 dark:text-red-250",
success: "bg-green-500 dark:bg-green-600 dark:text-green-250",
warning: "bg-orange-500 dark:bg-orange-600 dark:text-orange-250",
primary: "bg-blue-500 dark:bg-blue-600 dark:text-blue-250",
secondary: "bg-cyan-350 dark:bg-cyan-500",
collab: "bg-collab-500 dark:bg-collab-800 dark:text-collab-250",
ai: "bg-ai-500 dark:bg-ai-800 dark:text-ai-250",
link: "bg-base-900/85 text-white dark:bg-white/85 dark:text-base-900"
},
size: {
"3xs": "h-1 min-w-1 text-[0px] text-transparent p-0",
"2xs": "h-1.5 min-w-1.5 text-[0px] text-transparent p-0",
"xs": "h-xs2 min-w-xs2 text-[0px] text-transparent p-0",
"sm": "h-sm min-w-sm text-4xs font-regular",
"md": "h-md min-w-md text-3xs",
"lg": "h-lg min-w-lg rounded-md text-xs",
"xl": "h-lg min-w-lg rounded-md text-xs",
"2xl": "h-lg min-w-lg rounded-md text-xs",
"3xl": "h-lg min-w-lg rounded-md text-xs"
},
position: {
"top-right": "top-0 right-0",
"bottom-right": "bottom-0 right-0",
"top-left": "top-0 left-0",
"bottom-left": "bottom-0 left-0"
},
inset: {
false: ""
},
standalone: {
true: "",
false: "ring ring-white dark:ring-base-700 absolute"
}
},
compoundVariants: [
// not inset ////
{
position: "top-right",
inset: false,
standalone: false,
class: "-translate-y-1/2 translate-x-1/2 transform"
},
{
position: "bottom-right",
inset: false,
standalone: false,
class: "translate-y-1/2 translate-x-1/2 transform"
},
{
position: "top-left",
inset: false,
standalone: false,
class: "-translate-y-1/2 -translate-x-1/2 transform"
},
{
position: "bottom-left",
inset: false,
standalone: false,
class: "translate-y-1/2 -translate-x-1/2 transform"
},
// inset ////
{
position: "top-right",
size: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
inset: true,
standalone: false,
class: "-translate-y-1/3 translate-x-1/3 transform"
},
{
position: "top-right",
size: ["2xs", "3xl"],
inset: true,
standalone: false,
class: "translate-y-0 translate-x-0 transform"
},
{
position: "bottom-right",
size: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
inset: true,
standalone: false,
class: "translate-y-1/3 translate-x-1/3 transform"
},
{
position: "bottom-right",
size: ["2xs", "3xl"],
inset: true,
standalone: false,
class: "translate-y-0 translate-x-0 transform"
},
{
position: "top-left",
size: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
inset: true,
standalone: false,
class: "-translate-y-1/3 -translate-x-1/3 transform"
},
{
position: "top-left",
size: ["2xs", "3xl"],
inset: true,
standalone: false,
class: "-translate-y-0 -translate-x-0 transform"
},
{
position: "bottom-left",
size: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
inset: true,
standalone: false,
class: "translate-y-1/3 -translate-x-1/3 transform"
},
{
position: "bottom-left",
size: ["2xs", "3xl"],
inset: true,
standalone: false,
class: "translate-y-0 -translate-x-0 transform"
}
],
defaultVariants: {
size: "sm",
color: "danger",
position: "top-right"
}
};
const collapsible = {
slots: {
root: "",
content: [
"motion-safe:data-[state=open]:animate-[collapsible-down_200ms_ease-out] motion-safe:data-[state=closed]:animate-[collapsible-up_200ms_ease-out]",
"overflow-hidden"
].join(" ")
}
};
const container = {
base: "w-full max-w-[80rem] mx-auto px-5"
// max-w-7xl w-full
};
const countdown = {
slots: {
base: [
"relative flex flex-row flex-nowrap items-center justify-between",
"text-base-500 dark:text-base-600"
].join(" "),
label: "",
leadingIcon: "shrink-0",
leadingAvatar: "shrink-0",
leadingAvatarSize: "",
circleBase: "-scale-x-100 absolute inset-x-0 inset-y-0",
circleGroup: "fill-none stroke-none",
circleElement: "stroke-transparent stroke-1",
circlePath: [
"stroke-[7px] rotate-90 origin-center stroke-current transition-all duration-1000 ease-linear"
].join(" ")
},
variants: {
size: {
xs: {
base: "gap-0.5 text-5xs leading-none",
leadingIcon: "size-sm",
leadingAvatarSize: "3xs"
},
sm: {
base: "gap-1 text-4xs leading-none",
leadingIcon: "size-sm2",
leadingAvatarSize: "3xs"
},
md: {
base: "gap-1 text-md leading-none",
leadingIcon: "size-[16px]",
leadingAvatarSize: "3xs"
},
lg: {
base: "gap-1 text-lg leading-none",
leadingIcon: "size-[22px]",
leadingAvatarSize: "2xs"
},
xl: {
base: "gap-1 text-xl leading-none",
leadingIcon: "size-[26px]",
leadingAvatarSize: "xs"
}
},
leading: {
true: ""
},
useCircle: {
true: {
base: "justify-center",
circleBase: "size-full"
}
}
},
compoundVariants: [
{
size: "xs",
useCircle: true,
class: "text-7xs leading-normal p-0.5"
},
{
size: "sm",
useCircle: true,
class: "text-6xs leading-normal p-1.5"
},
{
size: "md",
useCircle: true,
class: "text-3xs leading-normal p-1.5"
},
{
size: "lg",
useCircle: true,
class: "text-xs leading-normal p-1.5 pb-2"
},
{
size: "xl",
useCircle: true,
class: "text-sm leading-normal p-2 pb-2.5"
}
],
defaultVariants: {
size: "md"
}
};
const descriptionList = {
slots: {
root: "w-full shrink-0",
legend: "font-semibold text-black dark:text-base-150",
text: "text-base-500 dark:text-base-400",
container: "grid grid-cols-1 sm:grid-cols-[min(50%,theme(spacing.80))_auto]",
labelWrapper: [
"col-start-1 border-t first:border-none sm:border-t",
"flex flex-nowrap flex-row items-center justify-start gap-1.5",
"border-base-950/5 text-base-500 sm:border-base-950/5",
"dark:border-white/5 dark:text-base-400 sm:dark:border-white/5"
].join(" "),
icon: "shrink-0 size-6 text-base-500 dark:text-base-400",
avatar: "shrink-0",
avatarSize: "",
label: "",
descriptionWrapper: [
"sm:border-t sm:[&:nth-child(2)]:border-none",
"text-base-900 sm:border-base-950/5",
"dark:text-base-150 dark:sm:border-white/5"
].join(" "),
description: "",
actions: "flex flex-wrap gap-1.5 shrink-0",
footer: "border-t border-base-950/5 dark:border-white/5"
},
variants: {
size: {
sm: {
legend: "text-md",
text: "mt-1 max-w-2/3 text-sm",
container: "mt-2.5 text-md",
labelWrapper: "pt-3 sm:py-3",
avatarSize: "xs",
label: "",
descriptionWrapper: "pb-3 pt-1 sm:py-3",
description: "",
footer: "mt-2 p-2"
},
md: {
legend: "text-xl",
text: "mt-2 max-w-2/3 text-lg leading-5",
container: "mt-3 text-lg",
labelWrapper: "pt-3 sm:py-3",
avatarSize: "xs",
label: "",
descriptionWrapper: "pb-3 pt-1 sm:py-3",
description: "",
footer: "mt-4 p-4"
}
},
orientation: {
horizontal: {
descriptionWrapper: "w-full flex flex-row items-center justify-between gap-4",
actions: "items-center"
},
vertical: {
descriptionWrapper: "",
actions: "items-start mt-2.5"
}
},
title: {
true: {
description: "mt-1"
}
}
},
compoundVariants: [],
defaultVariants: {
size: "md"
}
};
const dropdownMenu = {
slots: {
content: [
"min-w-32",
"bg-white dark:bg-base-dark",
"shadow-lg rounded-2xs ring ring-base-300 dark:ring-base-800",
"overflow-hidden",
"motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in]",
"origin-(--reka-dropdown-menu-content-transform-origin)",
"flex flex-col",
"pointer-events-auto"
].join(" "),
viewport: [
"relative",
"divide-y divide-base-master/10 dark:divide-base-100/20",
"scroll-py-1",
"overflow-y-auto",
"flex-1"
].join(" "),
arrow: "fill-base-master/10 dark:fill-base-100/20",
group: "p-1 isolate",
label: [
"w-full flex items-center",
"font-semibold text-base-900 dark:text-base-200"
].join(" "),
separator: "-mx-1 my-1 h-px bg-base-master/10 dark:bg-base-100/20",
item: [
"group relative w-full flex items-center select-none outline-none",
"before:absolute before:z-[-1] before:inset-px before:rounded-2xs",
"cursor-pointer",
"data-disabled:cursor-not-allowed data-disabled:opacity-75",
"text-base-master dark:text-base-150",
"data-highlighted:text-base-900 dark:data-highlighted:text-base-200 data-highlighted:before:bg-base-100/50 dark:data-highlighted:before:bg-base-900",
// 'data-[state=checked]:text-base-900 dark:data-[state=checked]:text-base-200 data-[state=checked]:before:bg-base-100/50 dark:data-[state=checked]:before:bg-base-900',
"transition-colors before:transition-colors"
].join(" "),
itemLeadingIcon: [
"shrink-0 text-base-500 dark:text-base-700",
"group-data-highlighted:text-base-master dark:group-data-highlighted:text-base-150",
"group-data-[state=checked]:text-base-master dark:group-data-[state=checked]:text-base-150",
"transition-colors"
].join(" "),
itemLeadingAvatar: "shrink-0",
itemLeadingAvatarSize: "",
itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
itemTrailingIcon: "shrink-0",
itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
itemTrailingKbdsSize: "",
itemLabel: "truncate",
itemLabelExternalIcon: "inline-block size-3 align-top text-base-500 dark:text-base-700"
},
variants: {
color: {
default: "",
danger: "",
success: "",
warning: "",
primary: "",
secondary: "",
collab: "",
ai: ""
},
active: {
false: {
item: [
"text-base-master data-highlighted:text-base-900 data-highlighted:before:bg-base-100/50 data-[state=open]:text-base-900 data-[state=open]:before:bg-base-100/50",
"dark:text-base-150 dark:data-highlighted:text-base-200 dark:data-highlighted:before:bg-base-900 dark:data-[state=open]:text-base-200 dark:data-[state=open]:before:bg-base-900",
"transition-colors before:transition-colors"
].join(" "),
itemLeadingIcon: [
"text-base-500 group-data-highlighted:text-base-master group-data-[state=open]:text-base-master",
"dark:text-base-700 dark:group-data-highlighted:text-base-150 dark:group-data-[state=open]:text-base-150",
"transition-colors"
].join(" ")
},
true: {
item: [
"text-base-900 before:bg-base-100/50",
"dark:text-base-200 dark:before:bg-base-900"
].join(" "),
itemLeadingIcon: [
"text-base-master group-data-[state=open]:text-base-master",
"dark:text-base-700"
].join(" ")
}
},
loading: {
true: {
itemLeadingIcon: "animate-spin"
}
},
size: {
xs: {
label: "p-1 text-xs gap-1",
item: "p-1 text-xs gap-1",
itemLeadingIcon: "size-4",
itemLeadingAvatarSize: "3xs",
itemTrailingIcon: "size-4",
itemTrailingKbds: "gap-0.5",
itemTrailingKbdsSize: "sm"
},
sm: {
label: "p-1.5 text-xs gap-1.5",
item: "p-1.5 text-xs gap-1.5",
itemLeadingIcon: "size-4",
itemLeadingAvatarSize: "3xs",
itemTrailingIcon: "size-4",
itemTrailingKbds: "gap-0.5",
itemTrailingKbdsSize: "sm"
},
md: {
label: "h-9 ps-2 pe-3 text-sm gap-2",
item: "h-9 ps-3 pe-3 text-sm gap-2",
itemLeadingIcon: "size-5",
itemLeadingAvatarSize: "2xs",
itemTrailingIcon: "size-3",
itemTrailingKbds: "gap-0.5",
itemTrailingKbdsSize: "md"
},
lg: {
label: "p-2 text-sm gap-2",
item: "p-2 text-sm gap-2",
itemLeadingIcon: "size-5",
itemLeadingAvatarSize: "2xs",
itemTrailingIcon: "size-5",
itemTrailingKbds: "gap-1",
itemTrailingKbdsSize: "md"
}
}
},
compoundVariants: [
{
color: "default",
active: false,
class: {
item: [
"text-base-master data-highlighted:text-base-900 data-highlighted:before:bg-base-100/50 data-[state=open]:text-base-900 data-[state=open]:before:bg-base-100/50",
"dark:text-base-150 dark:data-highlighted:text-base-200 dark:data-highlighted:before:bg-base-900 dark:data-[state=open]:text-base-200 dark:data-[state=open]:before:bg-base-900"
].join(" "),
itemLeadingIcon: [
"text-base-500 group-data-highlighted:text-base-master group-data-[state=open]:text-base-master",
"dark:text-base-700 dark:group-data-highlighted:text-base-150 dark:group-data-[state=open]:text-base-150"
].join(" ")
}
},
{
color: "default",
active: true,
class: {
item: [
"text-base-900 before:bg-base-100/50",
"dark:text-base-200 dark:before:bg-base-900"
].join(" "),
itemLeadingIcon: [
"text-base-master group-data-[state=open]:text-base-master",
"dark:text-base-700"
].join(" ")
}
},
{
color: "danger",
active: false,
class: {
item: [
"text-red-950 data-highlighted:text-red-900 data-highlighted:before:bg-red-100 data-[state=open]:text-red-900 data-[state=open]:before:bg-red-100",
"dark:text-red-150 dark:data-highlighted:text-red-200 dark:data-highlighted:before:bg-red-900 dark:data-[state=open]:text-red-200 dark:data-[state=open]:before:bg-red-900"
].join(" "),
itemLeadingIcon: [
"text-red-500 group-data-highlighted:text-red-900 group-data-[state=open]:text-red-900",
"dark:text-red-700 dark:group-data-highlighted:text-red-150 dark:group-data-[state=open]:text-red-150"
].join(" ")
}
},
{
color: "danger",
active: true,
class: {
item: [
"text-red-900 before:bg-red-100",
"dark:text-red-200 dark:before:bg-red-900"
].join(" "),
itemLeadingIcon: [
"text-red-900 group-data-[state=open]:text-red-900",
"dark:text-red-700"
].join(" ")
}
},
{
color: "success",
active: false,
class: {
item: [
"text-green-950 data-highlighted:text-green-900 data-highlighted:before:bg-green-100 data-[state=open]:text-green-900 data-[state=open]:before:bg-green-100",
"dark:text-green-150 dark:data-highlighted:text-green-200 dark:data-highlighted:before:bg-green-900 dark:data-[state=open]:text-green-200 dark:data-[state=open]:before:bg-green-900"
].join(" "),
itemLeadingIcon: [
"text-green-500 group-data-highlighted:text-green-900 group-data-[state=open]:text-green-900",
"dark:text-green-700 dark:group-data-highlighted:text-green-150 dark:group-data-[state=open]:text-green-150"
].join(" ")
}
},
{
color: "success",
active: true,
class: {
item: [
"text-green-900 before:bg-green-100",
"dark:text-green-200 dark:before:bg-green-900"
].join(" "),
itemLeadingIcon: [
"text-green-900 group-data-[state=open]:text-green-900",
"dark:text-green-700"
].join(" ")
}
},
{
color: "warning",
active: false,
class: {
item: [
"text-orange-950 data-highlighted:text-orange-900 data-highlighted:before:bg-orange-100 data-[state=open]:text-orange-900 data-[state=open]:before:bg-orange-100",
"dark:text-orange-150 dark:data-highlighted:text-orange-200 dark:data-highlighted:before:bg-orange-900 dark:data-[state=open]:text-orange-200 dark:data-[state=open]:before:bg-orange-900"
].join(" "),
itemLeadingIcon: [
"text-orange-500 group-data-highlighted:text-orange-900 group-data-[state=open]:text-orange-900",
"dark:text-orange-700 dark:group-data-highlighted:text-orange-150 dark:group-data-[state=open]:text-orange-150"
].join(" ")
}
},
{
color: "warning",
active: true,
class: {
item: [
"text-orange-900 before:bg-orange-100",
"dark:text-orange-200 dark:before:bg-orange-900"
].join(" "),
itemLeadingIcon: [
"text-orange-900 group-data-[state=open]:text-orange-900",
"dark:text-orange-700"
].join(" ")
}
},
{
color: "primary",
active: false,
class: {
item: [
"text-blue-950 data-highlighted:text-blue-900 data-highlighted:before:bg-blue-100 data-[state=open]:text-blue-900 data-[state=open]:before:bg-blue-100",
"dark:text-blue-150 dark:data-highlighted:text-blue-200 dark:data-highlighted:before:bg-blue-900 dark:data-[state=open]:text-blue-200 dark:data-[state=open]:before:bg-blue-900"
].join(" "),
itemLeadingIcon: [
"text-blue-500 group-data-highlighted:text-blue-900 group-data-[state=open]:text-blue-900",
"dark:text-blue-700 dark:group-data-highlighted:text-blue-150 dark:group-data-[state=open]:text-blue-150"
].join(" ")
}
},
{
color: "primary",
active: true,
class: {
item: [
"text-blue-900 before:bg-blue-100",
"dark:text-blue-200 dark:before:bg-blue-900"
].join(" "),
itemLeadingIcon: [
"text-blue-900 group-data-[state=open]:text-blue-900",
"dark:text-blue-700"
].join(" ")
}
},
{
color: "secondary",
active: false,
class: {
item: [
"text-cyan-950 data-highlighted:text-cyan-900 data-highlighted:before:bg-cyan-100/50 data-[state=open]:text-cyan-900 data-[state=open]:before:bg-cyan-100/50",
"dark:text-cyan-150 dark:data-highlighted:text-cyan-200 dark:data-highlighted:before:bg-cyan-900 dark:data-[state=open]:text-cyan-200 dark:data-[state=open]:before:bg-cyan-900"
].join(" "),
itemLeadingIcon: [
"text-cyan-500 group-data-highlighted:text-cyan-900 group-data-[state=open]:text-cyan-900",
"dark:text-cyan-700 dark:group-data-highlighted:text-cyan-150 dark:group-data-[state=open]:text-cyan-150"
].join(" ")
}
},
{
color: "secondary",
active: true,
class: {
item: [
"text-cyan-900 before:bg-cyan-100/50",
"dark:text-cyan-200 dark:before:bg-cyan-900"
].join(" "),
itemLeadingIcon: [
"text-cyan-900 group-data-[state=open]:text-cyan-900",
"dark:text-cyan-700"
].join(" ")
}
},
{
color: "collab",
active: false,
class: {
item: [
"text-collab-900 data-highlighted:text-collab-900 data-highlighted:before:bg-collab-100 data-[state=open]:text-collab-900 data-[state=open]:before:bg-collab-100",
"dark:text-collab-150 dark:data-highlighted:text-collab-200 dark:data-highlighted:before:bg-collab-900 dark:data-[state=open]:text-collab-200 dark:data-[state=open]:before:bg-collab-900"
].join(" "),
itemLeadingIcon: [
"text-collab-600 group-data-highlighted:text-collab-900 group-data-[state=open]:text-collab-900",
"dark:text-collab-700 dark:group-data-highlighted:text-collab-150 dark:group-data-[state=open]:text-collab-150"
].join(" ")
}
},
{
color: "collab",
active: true,
class: {
item: [
"text-collab-900 before:bg-collab-100",
"dark:text-collab-200 dark:before:bg-collab-900"
].join(" "),
itemLeadingIcon: [
"text-collab-900 group-data-[state=open]:text-collab-900",
"dark:text-collab-700"
].join(" ")
}
},
{
color: "ai",
active: false,
class: {
item: [
"text-ai-950 data-highlighted:text-ai-900 data-highlighted:before:bg-ai-100/50 data-[state=open]:text-ai-900 data-[state=open]:before:bg-ai-100/50",
"dark:text-ai-150 dark:data-highlighted:text-ai-200 dark:data-highlighted:before:bg-ai-900 dark:data-[state=open]:text-ai-200 dark:data-[state=open]:before:bg-ai-900"
].join(" "),
itemLeadingIcon: [
"text-ai-500 group-data-highlighted:text-ai-900 group-data-[state=open]:text-ai-900",
"dark:text-ai-700 dark:group-data-highlighted:text-ai-150 dark:group-data-[state=open]:text-ai-150"
].join(" ")
}
},
{
color: "ai",
active: true,
class: {
item: [
"text-ai-900 before:bg-ai-100/50",
"dark:text-ai-200 dark:before:bg-ai-900"
].join(" "),
itemLeadingIcon: [
"text-ai-900 group-data-[state=open]:text-ai-900",
"dark:text-ai-700"
].join(" ")
}
}
],
defaultVariants: {
size: "md"
}
};
const form = {
base: ""
};
const formField = {
slots: {
root: "font-b24-system font-regular",
wrapper: "leading-none",
labelWrapper: "flex content-center items-center justify-between",
label: "block text-base-900 dark:text-base-400",
hint: "text-base-500 dark:text-base-600",
container: "relative",
description: "mt-0.5 leading-tight text-base-500 dark:text-base-600",
error: "mt-1 text-red-500 dark:text-red-600",
errorWrapper: "flex flex-row flex-nowrap gap-0.5",
errorIcon: "size-lg",
help: "mt-1.5 leading-tight italic text-base-500 dark:text-base-600"
},
variants: {
useDescription: {
true: { wrapper: "mb-1.5" },
false: { wrapper: "mb-2.5" }
},
size: {
xs: { root: "text-xs", errorIcon: "size-md" },
sm: { root: "text-xs", errorIcon: "size-md" },
md: { root: "text-sm", errorIcon: "size-md2" },
lg: { root: "text-md" }
},
required: {
true: {
label: "after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-600"
}
}
},
compoundVariants: [],
defaultVariants: {
size: "md"
}
};
const input = {
slots: {
root: "isolate relative inline-flex items-center w-full",
base: [
"px-3",
"w-full py-0 border-0 focus:outline-none",
"disabled:cursor-not-allowed disabled:bg-base-30/37 disabled:resize-none disabled:text-base-500",
"dark:disabled:bg-base-900/37 dark:disabled:text-base-800",
"appearance-none transition duration-300 ease-linear",
// transition-colors
"ring ring-inset ring-base-300",
"dark:ring-base-800",
"text-base-master bg-white placeholder:text-base-400 hover:text-base-900 focus:text-base-900 active:text-base-900",
"dark:text-base-150 dark:bg-transparent dark:placeholder:text-base-300 dark:hover:text-base-350 dark:focus:text-base-350 dark:active:text-base-350",
"font-b24-primary font-regular text-md leading-none",
"align-middle",
"text-ellipsis whitespace-nowrap"
].join(" "),
leading: "absolute inset-y-0 start-0 flex items-center",
leadingIcon: "shrink-0 text-base-400",
leadingAvatar: "shrink-0",
leadingAvatarSize: "",
trailing: "absolute inset-y-0 end-0 flex items-center",
trailingIcon: "shrink-0 text-base-400",
tag: [
"pointer-events-none select-none",
"absolute z-10 -top-1.5 right-3 h-sm px-1.5 flex flex-col justify-center items-center",
"font-b24-primary font-bold text-6xs leading-none uppercase rounded-full"
].join(" ")
},
variants: {
...buttonGroupVariantWithRoot,
size: {
xs: {
base: "h-xl2 gap-1",
// 26px
leading: "px-1",
trailing: "px-1",
leadingIcon: "size-lg2",
leadingAvatarSize: "2xs",
trailingIcon: "size-lg2"
},
sm: {
base: "h-8 gap-1.5",
// 32px
leading: "px-1.5",
trailing: "px-1.5",
leadingIcon: "size-lg2",
leadingAvatarSize: "xs",
trailingIcon: "size-lg2"
},
md: {
base: "h-10 gap-1.5",
// 40px
leading: "px-2",
trailing: "px-2",
leadingIcon: "size-[24px]",
leadingAvatarSize: "sm",
trailingIcon: "size-[24px]"
},
lg: {
base: "h-12 gap-2",
// 48px
leading: "px-2",
trailing: "px-2",
leadingIcon: "size-[24px]",
leadingAvatarSize: "md",
trailingIcon: "size-[24px]"
}
},
color: {
default: "",
danger: "",
success: "",
warning: "",
primary: "",
secondary: "",
collab: "",
ai: ""
},
tagColor: {
default: {
tag: "text-white bg-base-900 dark:text-base-150 dark:bg-base-900"
},
danger: {
tag: "text-white bg-red-500 dark:text-red-250 dark:bg-red-600"
},
success: {
tag: "text-white bg-green-500 dark:text-green-250 dark:bg-green-600"
},
warning: {
tag: "text-white bg-orange-500 dark:text-orange-250 dark:bg-orange-600"
},
primary: {
tag: "text-white bg-blue-500 dark:text-blue-250 dark:bg-blue-600"
},
secondary: {
tag: "text-white bg-cyan-350 dark:text-base-150 dark:bg-cyan-500"
},
collab: {
tag: "text-white bg-collab-500 dark:text-collab-200 dark:bg-collab-800"
},
ai: {
tag: "text-white bg-ai-500 dark:text-ai-200 dark:bg-ai-800"
}
},
rounded: {
true: "rounded-3xl",
false: "rounded-2xs"
},
noPadding: {
true: {
base: "px-0"
}
},
noBorder: {
true: "ring-0 focus-visible:ring-0"
},
underline: {
true: "ring-0 focus-visible:ring-0 border-b border-b-base-300 rounded-none"
},
leading: {
true: ""
},
trailing: {
true: ""
},
loading: {
true: ""
},
highlight: {
true: ""
},
type: {
file: "file:me-1.5 file:text-base-500 file:outline-none"
}
},
compoundVariants: [
// region ring for focus and highlight ////
// region default ////
{
color: "default",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-base-900 dark:focus-visible:ring-base-350"
},
{
color: "default",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-base-900 dark:ring-base-350"
},
{
color: "default",
noBorder: false,
underline: true,
class: "focus-visible:border-base-900 dark:focus-visible:border-b-base-350"
},
{
color: "default",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-base-900 dark:border-b-base-350"
},
// endregion ////
// region danger ////
{
color: "danger",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-red-500 dark:focus-visible:ring-red-600"
},
{
color: "danger",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-red-500 dark:ring-red-600"
},
{
color: "danger",
noBorder: false,
underline: true,
class: "focus-visible:border-b-red-500 dark:focus-visible:border-b-red-600"
},
{
color: "danger",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-red-500 dark:border-b-red-600"
},
// endregion ////
// region success ////
{
color: "success",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-green-500 dark:focus-visible:ring-green-600"
},
{
color: "success",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-green-500 dark:ring-green-600"
},
{
color: "success",
noBorder: false,
underline: true,
class: "focus-visible:border-b-green-500 dark:focus-visible:border-b-green-600"
},
{
color: "success",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-green-500 dark:border-b-green-600"
},
// endregion ////
// region warning ////
{
color: "warning",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-orange-500 dark:focus-visible:ring-orange-600"
},
{
color: "warning",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-orange-500 dark:ring-orange-600"
},
{
color: "warning",
noBorder: false,
underline: true,
class: "focus-visible:border-b-orange-500 dark:focus-visible:border-b-orange-600"
},
{
color: "warning",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-orange-500 dark:border-b-orange-600"
},
// endregion ////
// region primary ////
{
color: "primary",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-blue-500 dark:focus-visible:ring-blue-600"
},
{
color: "primary",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-blue-500 dark:ring-blue-600"
},
{
color: "primary",
noBorder: false,
underline: true,
class: "focus-visible:border-b-blue-500 dark:focus-visible:border-b-blue-600"
},
{
color: "primary",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-blue-500 dark:border-b-blue-600"
},
// endregion ////
// region secondary ////
{
color: "secondary",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-cyan-350 dark:focus-visible:ring-cyan-500"
},
{
color: "secondary",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-cyan-350 dark:ring-cyan-500"
},
{
color: "secondary",
noBorder: false,
underline: true,
class: "focus-visible:border-b-cyan-350 dark:focus-visible:border-b-cyan-500"
},
{
color: "secondary",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-cyan-350 dark:border-b-cyan-500"
},
// endregion ////
// region collab ////
{
color: "collab",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-collab-500 dark:focus-visible:ring-collab-600"
},
{
color: "collab",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-collab-500 dark:ring-collab-600"
},
{
color: "collab",
noBorder: false,
underline: true,
class: "focus-visible:border-b-collab-500 dark:focus-visible:border-b-collab-600"
},
{
color: "collab",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-collab-500 dark:border-b-collab-600"
},
// endregion ////
// region ai ////
{
color: "ai",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ai-500 dark:focus-visible:ring-ai-600"
},
{
color: "ai",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-ai-500 dark:ring-ai-600"
},
{
color: "ai",
noBorder: false,
underline: true,
class: "focus-visible:border-b-ai-500 dark:focus-visible:border-b-ai-600"
},
{
color: "ai",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-ai-500 dark:border-b-ai-600"
},
// endregion ////
// endregion ////
// region type file ////
{
type: "file",
size: "xs",
class: "py-1.5"
},
{
type: "file",
size: "sm",
class: "py-2.5"
},
{
type: "file",
size: "md",
class: "py-3"
},
{
type: "file",
size: "lg",
class: "py-4"
},
// endregion ////
// region leading ////
{
leading: true,
size: "xs",
class: "ps-7"
},
{
leading: true,
size: "sm",
class: "ps-8"
},
{
leading: true,
size: "md",
class: "ps-[39px]"
},
{
leading: true,
size: "lg",
class: "ps-[42px]"
},
// endregion ////
// region trailing ////
{
trailing: true,
size: "xs",
class: "pe-7"
},
{
trailing: true,
size: "sm",
class: "pe-8"
},
{
trailing: true,
size: "md",
class: "pe-[39px]"
},
{
trailing: true,
size: "lg",
class: "pe-[39px]"
},
// endregion ////
// region loading ////
{
loading: true,
leading: true,
class: {
leadingIcon: "size-[21px]"
}
},
{
loading: true,
leading: false,
trailing: true,
class: {
trailingIcon: "size-[21px]"
}
}
// endregion ////
],
defaultVariants: {
size: "md",
color: "primary",
tagColor: "primary"
}
};
const colorDropDownItem = {
colorItem: {
/**
* @memo not fill - use default data
*/
default: "",
danger: {
item: [
"text-red-900 dark:text-red-150",
"data-highlighted:text-red-900 dark:data-highlighted:text-red-200 data-highlighted:before:bg-red-100 dark:data-highlighted:before:bg-red-900",
"data-[state=checked]:text-red-900 dark:data-[state=checked]:text-red-200 data-[state=checked]:before:bg-red-100 dark:data-[state=checked]:before:bg-red-900"
].join(" "),
itemLeadingIcon: [
"text-red-600 dark:text-red-700",
"group-data-highlighted:text-red-900 dark:group-data-highlighted:text-red-150",
"group-data-[state=checked]:text-red-900 dark:group-data-[state=checked]:text-red-700"
].join(" ")
},
success: {
item: [
"text-green-900 dark:text-green-150",
"data-highlighted:text-green-900 dark:data-highlighted:text-green-200 data-highlighted:before:bg-green-100 dark:data-highlighted:before:bg-green-900",
"data-[state=checked]:text-green-900 dark:data-[state=checked]:text-green-200 data-[state=checked]:before:bg-green-100 dark:data-[state=checked]:before:bg-green-900"
].join(" "),
itemLeadingIcon: [
"text-green-600 dark:text-green-700",
"group-data-highlighted:text-green-900 dark:group-data-highlighted:text-green-150",
"group-data-[state=checked]:text-green-900 dark:group-data-[state=checked]:text-green-700"
].join(" ")
},
warning: {
item: [
"text-orange-900 dark:text-orange-150",
"data-highlighted:text-orange-900 dark:data-highlighted:text-orange-200 data-highlighted:before:bg-orange-100 dark:data-highlighted:before:bg-orange-900",
"data-[state=checked]:text-orange-900 dark:data-[state=checked]:text-orange-200 data-[state=checked]:before:bg-orange-100 dark:data-[state=checked]:before:bg-orange-900"
].join(" "),
itemLeadingIcon: [
"text-orange-600 dark:text-orange-700",
"group-data-highlighted:text-orange-900 dark:group-data-highlighted:text-orange-150",
"group-data-[state=checked]:text-orange-900 dark:group-data-[state=checked]:text-orange-700"
].join(" ")
},
primary: {
item: [
"text-blue-900 dark:text-blue-150",
"data-highlighted:text-blue-900 dark:data-highlighted:text-blue-200 data-highlighted:before:bg-blue-100 dark:data-highlighted:before:bg-blue-900",
"data-[state=checked]:text-blue-900 dark:data-[state=checked]:text-blue-200 data-[state=checked]:before:bg-blue-100 dark:data-[state=checked]:before:bg-blue-900"
].join(" "),
itemLeadingIcon: [
"text-blue-600 dark:text-blue-700",
"group-data-highlighted:text-blue-900 dark:group-data-highlighted:text-blue-150",
"group-data-[state=checked]:text-blue-900 dark:group-data-[state=checked]:text-blue-700"
].join(" ")
},
secondary: {
item: [
"text-cyan-900 dark:text-cyan-150",
"data-highlighted:text-cyan-900 dark:data-highlighted:text-cyan-200 data-highlighted:before:bg-cyan-100 dark:data-highlighted:before:bg-cyan-900",
"data-[state=checked]:text-cyan-900 dark:data-[state=checked]:text-cyan-200 data-[state=checked]:before:bg-cyan-100 dark:data-[state=checked]:before:bg-cyan-900"
].join(" "),
itemLeadingIcon: [
"text-cyan-600 dark:text-cyan-700",
"group-data-highlighted:text-cyan-900 dark:group-data-highlighted:text-cyan-150",
"group-data-[state=checked]:text-cyan-900 dark:group-data-[state=checked]:text-cyan-700"
].join(" ")
},
collab: {
item: [
"text-collab-900 dark:text-collab-150",
"data-highlighted:text-collab-900 dark:data-highlighted:text-collab-200 data-highlighted:before:bg-collab-100 dark:data-highlighted:before:bg-collab-900",
"data-[state=checked]:text-collab-900 dark:data-[state=checked]:text-collab-200 data-[state=checked]:before:bg-collab-100 dark:data-[state=checked]:before:bg-collab-900"
].join(" "),
itemLeadingIcon: [
"text-collab-600 dark:text-collab-700",
"group-data-highlighted:text-collab-900 dark:group-data-highlighted:text-collab-150",
"group-data-[state=checked]:text-collab-900 dark:group-data-[state=checked]:text-collab-700"
].join(" ")
},
ai: {
item: [
"text-ai-900 dark:text-ai-150",
"data-highlighted:text-ai-900 dark:data-highlighted:text-ai-200 data-highlighted:before:bg-ai-100 dark:data-highlighted:before:bg-ai-900",
"data-[state=checked]:text-ai-900 dark:data-[state=checked]:text-ai-200 data-[state=checked]:before:bg-ai-100 dark:data-[state=checked]:before:bg-ai-900"
].join(" "),
itemLeadingIcon: [
"text-ai-600 dark:text-ai-700",
"group-data-highlighted:text-ai-900 dark:group-data-highlighted:text-ai-150",
"group-data-[state=checked]:text-ai-900 dark:group-data-[state=checked]:text-ai-700"
].join(" ")
}
}
};
const defSize$1 = {
label: "h-9 ps-2 pe-3 text-sm gap-2",
item: "h-9 ps-3 pe-3 text-sm gap-2",
itemLeadingIcon: "size-5",
itemLeadingAvatarSize: "2xs",
itemLeadingChip: "size-3 not-group-data-reka-collection-item:ps-2.5",
itemLeadingChipSize: "sm",
itemTrailingIcon: "size-3",
trailingIcon: "size-lg2"
};
const inputMenu = () => {
return defuFn({
slots: {
base: [
"py-0 w-full border-0 focus:outline-none",
"disabled:cursor-not-allowed disabled:bg-base-30/37 disabled:resize-none disabled:text-base-500",
"dark:disabled:bg-base-900/37 dark:disabled:text-base-800",
"appearance-none transition duration-300 ease-linear",
"ring ring-inset ring-base-300",
"dark:ring-base-800",
"text-base-master bg-white placeholder:text-base-400 hover:text-base-900 focus:text-base-900 active:text-base-900",
"dark:text-base-150 dark:bg-transparent dark:placeholder:text-base-300 dark:hover:text-base-350 dark:focus:text-base-350 dark:active:text-base-350",
"font-b24-primary font-regular text-md leading-none",
"align-middle",
// 'text-ellipsis whitespace-nowrap',
"transition-colors"
].join(" "),
trailing: "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
arrow: "fill-base-master/10 dark:fill-base-100/20",
content: [
"w-(--reka-combobox-trigger-width)",
// 'max-h-60',
"min-w-fit",
// 'h-(--reka-popper-available-height)',
"bg-white dark:bg-base-dark",
"shadow-md rounded-2xs ring ring-base-300 dark:ring-base-800",
"overflow-hidden",
"data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
"origin-(--reka-combobox-content-transform-origin)",
"flex flex-col",
"pointer-events-auto"
].join(" "),
viewport: [
"relative",
"divide-y divide-base-master/10 dark:divide-base-100/20",
"scroll-py-1",
"overflow-y-auto",
"flex-1"
].join(" "),
group: "p-1 isolate",
empty: "py-2 text-center text-sm text-base-500 dark:text-base-600",
label: [
"flex items-center",
"font-semibold text-base-900 dark:text-base-200"
].join(" "),
separator: "-mx-1 my-1 h-px bg-base-master/10 dark:bg-base-100/20",
item: [
"group relative w-full flex items-center select-none outline-none",
"before:absolute before:z-[-1] before:inset-px before:rounded-2xs",
"cursor-pointer",
"data-disabled:cursor-not-allowed data-disabled:opacity-75",
"text-base-master dark:text-base-150",
"data-highlighted:not-data-disabled:text-base-900 dark:data-highlighted:not-data-disabled:text-base-200 data-highlighted:not-data-disabled:before:bg-base-100/50 dark:data-highlighted:not-data-disabled:before:bg-base-900",
"data-[state=checked]:text-base-900 dark:data-[state=checked]:text-base-200 data-[state=checked]:before:bg-base-100/50 dark:data-[state=checked]:before:bg-base-900",
"transition-colors before:transition-colors"
].join(" "),
itemLeadingIcon: [
"shrink-0 text-base-500 dark:text-base-700",
"group-data-highlighted:not-data-disabled:text-base-master dark:group-data-highlighted:not-data-disabled:text-base-150",
"group-data-[state=checked]:text-base-master dark:group-data-[state=checked]:text-base-150",
"transition-colors"
].join(" "),
itemLeadingAvatar: "shrink-0",
itemLeadingAvatarSize: "",
itemLeadingChip: "shrink-0",
itemLeadingChipSize: "",
itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
itemTrailingIcon: "shrink-0",
itemLabel: "truncate",
tagsItem: [
"px-2 rounded-2xs font-b24-secondary font-normal leading-normal",
"inline-flex items-center gap-1",
"ring ring-inset data-disabled:cursor-not-allowed data-disabled:opacity-75",
"text-blue-700 bg-blue-250 ring-blue-250",
"dark:text-blue-700 dark:bg-blue-300 dark:ring-blue-300"
// 'ring-base-200 bg-red-100 text-base-master',
// 'dark:ring-base-800 dark:bg-base-900 dark:text-base-150'
].join(" "),
tagsItemText: "truncate",
tagsItemDelete: [
"cursor-pointer hover:rounded-full",
"inline-flex items-center rounded-md disabled:pointer-events-none",
"text-base-500 hover:text-base-master hover:bg-blue-300",
"dark:text-base-500 dark:text-base-700 dark:hover:text-base-master dark:hover:bg-blue-400",
"transition-colors"
].join(" "),
tagsItemDeleteIcon: "",
tagsInput: ""
},
variants: {
addNew: {
true: {
group: "p-0 isolate -m-px",
item: [
"before:rounded-none",
"text-base-master dark:text-base-150 before:bg-blue-200 dark:before:bg-blue-800",
"data-highlighted:text-base-900 dark:data-highlighted:text-base-200 data-highlighted:before:bg-blue-200 dark:data-highlighted:before:bg-blue-800",
"data-[state=checked]:text-base-900 dark:data-[state=checked]:text-base-200 data-[state=checked]:before:bg-blue-200 dark:data-[state=checked]:before:bg-blue-800"
].join(" "),
itemLabel: "flex flex-row flex-nowrap items-center justify-start gap-2",
itemLeadingIcon: [
"size-5 rounded-full",
"text-white dark:text-base-150 bg-blue-500 dark:bg-blue-600",
"group-data-highlighted:text-white dark:group-data-highlighted:text-base-150 group-data-highlighted:bg-blue-500 dark:group-data-highlighted:bg-blue-600",
"group-data-[state=checked]:text-white dark:group-data-[state=checked]:text-base-150 group-data-[state=checked]:bg-blue-500 dark:group-data-[state=checked]:bg-blue-600"
].join(" ")
}
},
multiple: {
true: {
root: "flex-wrap",
base: [
"py-1.5 ps-1.5 pe-[39px]"
].join(" "),
tagsInput: [
"w-2/5 border-0 bg-transparent ps-1.5 pe-3 py-0",
"placeholder:text-base-400 dark:placeholder:text-base-300",
"focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
"focus:ring-0 focus-visible:ring-0"
].join(" ")
},
false: {
base: [
"px-3",
"placeholder:text-base-400 dark:placeholder:text-base-300",
"focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
].join(" ")
}
},
size: {
xs: defuFn(
defSize$1,
{
tagsItem: [
"text-5xs",
"h-[14px] gap-0.5"
].join(" "),
tagsItemDeleteIcon: "size-sm"
}
),
sm: defuFn(
defSize$1,
{
tagsItem: [
"text-5xs",
"h-[14px] gap-0.5"
].join(" "),
tagsItemDeleteIcon: "size-3"
}
),
md: defuFn(
defSize$1,
{
tagsItem: [
"text-md",
"h-[31px] gap-1"
].join(" "),
tagsItemDeleteIcon: "size-3.5"
}
),
lg: defuFn(
defSize$1,
{
tagsItem: [
"text-md",
"h-[31px] gap-1"
].join(" "),
tagsItemDeleteIcon: "size-3.5"
}
)
},
...colorDropDownItem
},
compoundVariants: [
// region Color ////
{
color: "default",
multiple: true,
class: "has-focus-visible:ring-1 has-focus-visible:ring-base-900 dark:has-focus-visible:ring-base-700"
},
{
color: "danger",
multiple: true,
class: "has-focus-visible:ring-1 has-focus-visible:ring-red-500 dark:has-focus-visible:ring-red-600"
},
{
color: "success",
multiple: true,
class: "has-focus-visible:ring-1 has-focus-visible:ring-green-500 dark:has-focus-visible:ring-green-600"
},
{
color: "warning",
multiple: true,
class: "has-focus-visible:ring-1 has-focus-visible:ring-orange-500 dark:has-focus-visible:ring-orange-600"
},
{
color: "primary",
multiple: true,
class: "has-focus-visible:ring-1 has-focus-visible:ring-blue-500 dark:has-focus-visible:ring-blue-600"
},
{
color: "secondary",
multiple: true,
class: "has-focus-visible:ring-1 has-focus-visible:ring-cyan-500 dark:has-focus-visible:ring-cyan-600"
},
{
color: "collab",
multiple: true,
class: "has-focus-visible:ring-1 has-focus-visible:ring-collab-500 dark:has-focus-visible:ring-collab-600"
},
{
color: "ai",
multiple: true,
class: "has-focus-visible:ring-1 has-focus-visible:ring-ai-500 dark:has-focus-visible:ring-ai-600"
},
// endregion ////
// region Size ////
{
size: "xs",
multiple: true,
class: "min-h-xl2 h-auto"
},
{
size: "sm",
multiple: true,
class: "min-h-8 h-auto"
},
{
size: "md",
multiple: true,
class: "min-h-10 h-auto"
},
{
size: "lg",
multiple: true,
class: "min-h-12 h-auto"
}
// endregion ////
]
}, input);
};
const inputNumber = () => {
const input$1 = input;
return {
slots: {
root: "isolate relative inline-flex items-center",
base: [
"w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
"placeholder:text-base-400",
"dark:placeholder:text-base-300",
"appearance-none transition duration-300 ease-linear",
// transition-colors
"ring ring-inset ring-base-300",
"dark:ring-base-800",
"text-base-master bg-white placeholder:text-base-400 hover:text-base-900 focus:text-base-900 active:text-base-900",
"dark:text-base-150 dark:bg-transparent dark:placeholder:text-base-300 dark:hover:text-base-350 dark:focus:text-base-350 dark:active:text-base-350",
"font-b24-primary font-regular text-md leading-none",
"align-middle",
"text-ellipsis whitespace-nowrap"
].join(" "),
increment: "absolute flex items-center",
decrement: "absolute flex items-center",
tag: input$1.slots.tag
},
variants: {
...buttonGroupVariantWithRoot,
size: {
xs: "px-2 h-xl2 gap-1",
sm: "px-2.5 h-8 gap-1.5",
md: "px-2.5 h-10 gap-1.5",
lg: "px-3 h-12 gap-2"
},
color: {
default: "",
danger: "",
success: "",
warning: "",
primary: "",
secondary: "",
collab: "",
ai: ""
},
tagColor: {
...input$1.variants.tagColor
},
rounded: {
...input$1.variants.rounded
},
noPadding: {
...input$1.variants.noPadding
},
noBorder: {
...input$1.variants.noBorder
},
underline: {
...input$1.variants.underline
},
disabled: {
true: {
increment: "opacity-75 cursor-not-allowed",
decrement: "opacity-75 cursor-not-allowed"
}
},
orientation: {
horizontal: {
base: "text-center",
increment: "inset-y-0 end-0 py-0 pe-0 [&>button]:p-1",
decrement: "inset-y-0 start-0 py-0 ps-0 [&>button]:p-1"
},
vertical: {
increment: "top-1 end-0 pe-1 [&>button]:p-0",
decrement: "bottom-1 end-0 pe-1 [&>button]:p-0"
}
},
highlight: {
true: ""
}
},
compoundVariants: [
// region ring for focus and highlight ////
// region default ////
{
color: "default",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-base-900 dark:focus-visible:ring-base-350"
},
{
color: "default",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-base-900 dark:ring-base-350"
},
{
color: "default",
noBorder: false,
underline: true,
class: "focus-visible:border-base-900 dark:focus-visible:border-b-base-350"
},
{
color: "default",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-base-900 dark:border-b-base-350"
},
// endregion ////
// region danger ////
{
color: "danger",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-red-500 dark:focus-visible:ring-red-600"
},
{
color: "danger",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-red-500 dark:ring-red-600"
},
{
color: "danger",
noBorder: false,
underline: true,
class: "focus-visible:border-b-red-500 dark:focus-visible:border-b-red-600"
},
{
color: "danger",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-red-500 dark:border-b-red-600"
},
// endregion ////
// region success ////
{
color: "success",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-green-500 dark:focus-visible:ring-green-600"
},
{
color: "success",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-green-500 dark:ring-green-600"
},
{
color: "success",
noBorder: false,
underline: true,
class: "focus-visible:border-b-green-500 dark:focus-visible:border-b-green-600"
},
{
color: "success",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-green-500 dark:border-b-green-600"
},
// endregion ////
// region warning ////
{
color: "warning",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-orange-500 dark:focus-visible:ring-orange-600"
},
{
color: "warning",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-orange-500 dark:ring-orange-600"
},
{
color: "warning",
noBorder: false,
underline: true,
class: "focus-visible:border-b-orange-500 dark:focus-visible:border-b-orange-600"
},
{
color: "warning",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-orange-500 dark:border-b-orange-600"
},
// endregion ////
// region primary ////
{
color: "primary",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-blue-500 dark:focus-visible:ring-blue-600"
},
{
color: "primary",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-blue-500 dark:ring-blue-600"
},
{
color: "primary",
noBorder: false,
underline: true,
class: "focus-visible:border-b-blue-500 dark:focus-visible:border-b-blue-600"
},
{
color: "primary",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-blue-500 dark:border-b-blue-600"
},
// endregion ////
// region secondary ////
{
color: "secondary",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-cyan-500 dark:focus-visible:ring-cyan-600"
},
{
color: "secondary",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-cyan-500 dark:ring-cyan-600"
},
{
color: "secondary",
noBorder: false,
underline: true,
class: "focus-visible:border-b-cyan-500 dark:focus-visible:border-b-cyan-600"
},
{
color: "secondary",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-cyan-500 dark:border-b-cyan-600"
},
// endregion ////
// region collab ////
{
color: "collab",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-collab-500 dark:focus-visible:ring-collab-600"
},
{
color: "collab",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-collab-500 dark:ring-collab-600"
},
{
color: "collab",
noBorder: false,
underline: true,
class: "focus-visible:border-b-collab-500 dark:focus-visible:border-b-collab-600"
},
{
color: "collab",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-collab-500 dark:border-b-collab-600"
},
// endregion ////
// region ai ////
{
color: "ai",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ai-500 dark:focus-visible:ring-ai-600"
},
{
color: "ai",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-ai-500 dark:ring-ai-600"
},
{
color: "ai",
noBorder: false,
underline: true,
class: "focus-visible:border-b-ai-500 dark:focus-visible:border-b-ai-600"
},
{
color: "ai",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-ai-500 dark:border-b-ai-600"
},
// endregion ////
// endregion ////
// region orientation && size ////
// region horizontal ////
{
orientation: "horizontal",
rounded: true,
class: {
increment: "[&>button]:rounded-3xl",
decrement: "[&>button]:rounded-3xl"
}
},
{
orientation: "horizontal",
size: "xs",
class: {
base: "px-[1.3rem]",
increment: "[&>button]:h-[24px] scale-80",
decrement: "[&>button]:h-[24px] scale-80"
}
},
{
orientation: "horizontal",
size: "sm",
class: {
base: "px-[2.1rem]",
increment: "scale-80",
decrement: "scale-80"
}
},
{
orientation: "horizontal",
size: "md",
class: {
base: "px-[2.45rem]",
increment: "[&>button]:p-1.5 scale-80",
decrement: "[&>button]:p-1.5 scale-80"
}
},
{
orientation: "horizontal",
size: "lg",
class: {
base: "px-[2.95rem]",
increment: "pe-1 [&>button]:p-1.5 [&>button]:h-[42px] scale-95",
decrement: "ps-1 [&>button]:p-1.5 [&>button]:h-[42px] scale-95"
}
},
// endregion ////
// region vertical ////
{
orientation: "vertical",
size: "xs",
class: {
base: "pe-7",
increment: "top-0 pe-0 [&>button]:h-[13px]",
decrement: "bottom-0 pe-0 [&>button]:h-[13px]"
}
},
{
orientation: "vertical",
size: "sm",
class: {
base: "pe-8",
increment: "[&>button]:h-[13px] scale-80",
decrement: "[&>button]:h-[13px] scale-80"
}
},
{
orientation: "vertical",
size: "md",
class: {
base: "pe-9",
increment: "[&>button]:h-[19px] scale-80",
decrement: "[&>button]:h-[19px] scale-80"
}
},
{
orientation: "vertical",
size: "lg",
class: {
base: "pe-9",
increment: "[&>button]:h-[22px] scale-80",
decrement: "[&>button]:h-[22px] scale-80"
}
}
// endregion ////
// endregion ////
],
defaultVariants: {
size: "md",
color: "primary",
tagColor: "primary"
}
};
};
const kbd = {
base: "inline-flex items-center justify-center px-1 rounded-2xs font-normal font-b24-system-mono",
variants: {
depth: {
light: [
"ring ring-inset",
"text-base-900 bg-base-800/5 ring-base-800/20",
"dark:text-base-150 dark:bg-base-200/5 dark:ring-base-200/20"
].join(" "),
normal: [
"ring ring-inset",
"text-base-800 bg-base-150 ring-base-150",
"dark:text-base-950 dark:bg-base-200 dark:ring-base-200"
].join(" "),
dark: [
"ring ring-inset",
"text-white bg-base-500 ring-base-500",
"dark:text-base-50 dark:bg-base-600 dark:ring-base-600"
].join(" ")
},
size: {
sm: "h-[20px] min-w-[20px] text-[10px] leading-none",
md: "h-[24px] min-w-[24px] text-[14px] leading-none",
lg: "h-[28px] min-w-[28px] text-[18px] leading-none"
}
},
defaultVariants: {
depth: "light",
size: "md"
}
};
const link = (options) => ({
base: "cursor-pointer focus-visible:outline-info-text",
variants: {
active: {
true: "text-blue-700 dark:text-blue-300 hover:not-disabled:not-aria-disabled:underline underline-offset-2",
false: [
"text-base-900",
"dark:text-base-300",
"underline-offset-2"
].join(" ")
},
disabled: {
true: "cursor-not-allowed opacity-75"
},
isAction: {
true: [
"text-nowrap",
"text-sm h-auto py-0 font-normal rounded-none",
"border border-x-0 border-t-0 border-dashed border-b-base-900",
"text-base-900 dark:text-base-300 ",
"dark:border-b-base-300",
"hover:not-disabled:not-aria-disabled:no-underline",
"hover:text-blue-700 hover:not-disabled:not-aria-disabled:text-blue-700 hover:border-b-blue-700",
"dark:hover:text-blue-300 dark:hover:not-disabled:not-aria-disabled:text-blue-300 dark:hover:border-b-blue-300",
"focus-visible:outline-base-700"
].join(" ")
}
},
compoundVariants: [
{
active: false,
disabled: false,
class: [
"hover:text-blue-700",
"dark:hover:text-blue-300",
"hover:underline",
"transition-colors"
].join(" ")
}
]
});
const modal = {
slots: {
overlay: "fixed inset-0 bg-base-950/20 dark:bg-base-950/30",
content: [
"py-md2 px-5",
"fixed bg-white dark:bg-base-950",
"flex flex-col focus:outline-none"
].join(" "),
header: "flex items-center gap-1.5 pe-5 pt-0",
wrapper: "min-h-lg2",
body: "flex-1 overflow-y-auto my-2.5 text-md leading-normal",
footer: "flex items-center justify-center gap-3 mt-2.5 pt-4 border-t border-t-1 border-t-base-900/10 dark:border-t-white/20",
title: "font-bold text-md leading-normal text-base-900 dark:text-base-150",
description: "mt-0.5 mb-1 text-base-500 dark:text-base-400 text-sm",
close: "absolute top-2 end-1.5 p-0.5"
},
variants: {
overlayBlur: {
auto: {
overlay: "motion-safe:backdrop-blur-sm"
},
on: {
overlay: "backdrop-blur-sm"
},
off: {
overlay: ""
}
},
transition: {
true: {
overlay: "motion-safe:data-[state=open]:animate-[fade-in_200ms_ease-out] motion-safe:data-[state=closed]:animate-[fade-out_200ms_ease-in]",
content: "motion-safe:data-[state=open]:animate-[scale-in_200ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_200ms_ease-in]"
}
},
fullscreen: {
true: {
content: "inset-0"
},
false: {
content: [
"top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
"w-[calc(100vw-2rem)] max-w-[32rem] max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]",
"rounded-md shadow-lg",
"ring ring-base-300 dark:ring-base-800",
"overflow-hidden"
].join(" ")
}
},
scrollbarThin: {
true: {
body: "scrollbar-thin"
}
}
},
defaultVariants: {
scrollbarThin: true,
overlayBlur: "auto"
}
};
const navigationMenu = {
slots: {
root: "relative flex [&>div]:min-w-0 font-b24-secondary",
list: "isolate min-w-0",
label: [
"w-full min-h-6",
"flex items-center rtl:flex-row-reverse gap-1.5",
"font-medium text-xs/6",
"text-base-500 dark:text-base-400",
"ps-2xl pe-xs rtl:ps-xs rtl:pe-2xl"
].join(" "),
item: "min-w-0",
link: [
"group relative",
"cursor-pointer",
"w-full",
"flex items-center gap-1.5",
"font-normal text-lg leading-9 min-h-9",
"before:absolute before:z-[-1]",
"focus:outline-none focus-visible:before:rounded-md focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2"
].join(" "),
linkLeadingIcon: "shrink-0 size-4 -ms-1 rtl:-ms-0 rtl:-me-1",
linkLeadingAvatar: "shrink-0 -ms-1 rtl:-ms-0 rtl:-me-1",
linkLeadingAvatarSize: "2xs",
linkTrailing: "group inline-flex gap-1.5 items-center",
linkTrailingBadge: "shrink-0",
linkTrailingBadgeSize: "sm",
linkTrailingIcon: "text-base-600 size-4 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
linkLabel: "truncate",
linkLabelWrapper: "flex items-center items-center justify-between rtl:flex-row-reverse gap-1.5",
linkLabelExternalIcon: "inline-block h-6 w-3 align-top text-base-500 dark:text-base-700",
childList: "isolate",
childLabel: [
"text-xs text-highlighted",
"text-base-500 dark:text-base-400"
].join(" "),
childItem: "",
childLink: [
"group relative",
"size-full",
// 'rounded-2xs',
"flex items-start",
"text-start",
"text-sm",
"before:absolute before:z-[-1] before:rounded-2xs",
"focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2"
].join(" "),
childLinkWrapper: "min-w-0",
childLinkIcon: "size-5 shrink-0",
childLinkLabel: "truncate",
childLinkLabelExternalIcon: "inline-block h-6 w-3 align-top text-base-500 dark:text-base-700",
childLinkDescription: "text-base-500 dark:text-base-700",
separator: "px-2 h-px bg-base-950/10 dark:bg-base-100/20",
viewportWrapper: "absolute top-full left-0 flex w-full",
viewport: [
"relative overflow-hidden",
"w-full",
"bg-white dark:bg-base-dark",
"shadow-[0_15px_21px_rgba(83,92,105,.15)]",
"h-(--reka-navigation-menu-viewport-height)",
"transition-[width,height] duration-200 origin-[top_center]",
// left
// 'motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in]'
"z-[1]"
].join(" "),
content: "",
indicator: [
"absolute",
"motion-safe:data-[state=visible]:animate-[fade-in_100ms_ease-out] motion-safe:data-[state=hidden]:animate-[fade-out_100ms_ease-in]",
"data-[state=hidden]:opacity-0",
"bottom-0",
"z-[2]",
"w-(--reka-navigation-menu-indicator-size)",
"h-2.5",
"translate-x-(--reka-navigation-menu-indicator-position)",
"flex items-end justify-center",
"overflow-hidden",
"transition-[translate,width] duration-200"
].join(" "),
arrow: [
"relative top-[50%] size-2.5 rotate-45",
"border border-base-300 dark:border-base-800",
"bg-white dark:bg-base-dark",
"z-[1] rounded-3xs"
].join(" ")
},
variants: {
color: {
default: {
link: "focus-visible:before:ring-base-300 dark:focus-visible:before:ring-base-800",
childLink: "focus-visible:before:ring-base-300 dark:focus-visible:before:ring-base-800"
},
danger: {
link: "focus-visible:before:ring-red-300 dark:focus-visible:before:ring-red-800",
childLink: "focus-visible:before:ring-red-300 dark:focus-visible:before:ring-red-800"
},
success: {
link: "focus-visible:before:ring-green-300 dark:focus-visible:before:ring-green-800",
childLink: "focus-visible:before:ring-green-300 dark:focus-visible:before:ring-green-800"
},
warning: {
link: "focus-visible:before:ring-orange-300 dark:focus-visible:before:ring-orange-800",
childLink: "focus-visible:before:ring-orange-300 dark:focus-visible:before:ring-orange-800"
},
primary: {
link: "focus-visible:before:ring-blue-300 dark:focus-visible:before:ring-blue-800",
childLink: "focus-visible:before:ring-blue-300 dark:focus-visible:before:ring-blue-800"
},
secondary: {
link: "focus-visible:before:ring-cyan-300 dark:focus-visible:before:ring-cyan-800",
childLink: "focus-visible:before:ring-cyan-300 dark:focus-visible:before:ring-cyan-800"
},
collab: {
link: "focus-visible:before:ring-collab-300 dark:focus-visible:before:ring-collab-800",
childLink: "focus-visible:before:ring-collab-300 dark:focus-visible:before:ring-collab-800"
},
ai: {
link: "focus-visible:before:ring-ai-300 dark:focus-visible:before:ring-ai-800",
childLink: "focus-visible:before:ring-ai-300 dark:focus-visible:before:ring-ai-800"
}
},
highlightColor: {
default: "",
danger: "",
success: "",
warning: "",
primary: "",
secondary: "",
collab: "",
ai: ""
},
variant: {
pill: {
link: [
"hover:before:bg-base-250/80 dark:hover:before:bg-white/10"
].join(" "),
viewport: [
"rounded-md",
"ring ring-base-300 dark:ring-base-800"
].join(" ")
},
link: ""
},
orientation: {
horizontal: {
root: "items-center justify-between",
list: "flex items-center gap-x-1",
item: "py-2 empty:hidden",
link: "px-2.5 py-1.5 before:inset-x-px before:inset-y-0",
childList: "grid p-2",
childLink: "px-3 py-2 gap-2 before:inset-x-px before:inset-y-0",
childLinkLabel: "font-medium",
content: "absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto"
},
vertical: {
root: "flex-col w-full",
link: [
"ps-2xl pe-xs rtl:ps-xs rtl:pe-2xl",
"flex-row rtl:flex-row-reverse",
"before:inset-y-px before:inset-x-0"
].join(" "),
childLabel: "px-1.5 py-0.5",
childLink: "p-1.5 gap-1.5 before:inset-y-px before:inset-x-0"
}
},
contentOrientation: {
horizontal: {
// viewport: '',
viewportWrapper: "justify-center",
content: "motion-safe:data-[motion=from-start]:animate-[enter-from-left_200ms_ease] motion-safe:data-[motion=from-end]:animate-[enter-from-right_200ms_ease] motion-safe:data-[motion=to-start]:animate-[exit-to-left_200ms_ease] motion-safe:data-[motion=to-end]:animate-[exit-to-right_200ms_ease]",
childLinkLabelExternalIcon: [
"h-4"
].join(" ")
},
vertical: {
viewport: [
"w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)",
"[&:has(>[data-viewport=rtl])]:left-auto [&:has(>[data-viewport=rtl])]:-right-[calc(100%-var(--reka-navigation-menu-viewport-width))]"
].join(" "),
// content: '',
childLinkLabel: [
"text-md",
"text-base-950 dark:text-base-50"
].join(" "),
childLinkLabelExternalIcon: [
"h-4"
].join(" ")
}
},
active: {
true: {
childLink: [
"before:bg-base-20 dark:before:bg-base-900",
"text-base-950 dark:text-base-50",
"font-semibold"
].join(" "),
childLinkIcon: "text-base-950 dark:text-base-200"
},
false: {
link: "text-base-900 dark:text-base-200",
linkLeadingIcon: "text-base-500 dark:text-base-700",
childLink: [
"hover:before:bg-base-20 dark:hover:before:bg-base-900",
"text-base-500 dark:text-base-700",
"hover:text-base-950 dark:hover:text-base-200",
"transition-colors before:transition-colors"
].join(" "),
childLinkIcon: [
"text-base-500 dark:text-base-700",
"group-hover:text-base-950 dark:group-hover:text-base-50",
"transition-colors"
].join(" ")
}
},
disabled: {
true: {
link: "cursor-not-allowed opacity-75"
}
},
highlight: {
true: ""
},
level: {
true: ""
},
collapsed: {
true: ""
}
},
compoundVariants: [
// region horizontal ////
{
orientation: "horizontal",
contentOrientation: "horizontal",
class: {
childList: "grid-cols-2 gap-2"
}
},
{
orientation: "horizontal",
contentOrientation: "vertical",
class: {
childList: "gap-1",
content: "w-60"
}
},
{
orientation: "vertical",
collapsed: false,
class: {
childList: "",
childItem: "[&>*]:ps-[44px] rtl:[&>*]:pe-[44px]",
content: "motion-safe:data-[state=open]:animate-[collapsible-down_200ms_ease-out] motion-safe:data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden"
}
},
{
orientation: "vertical",
collapsed: true,
class: {
link: "px-1.5",
content: "rounded-sm min-h-6 p-1"
}
},
{
orientation: "horizontal",
highlight: true,
class: {
link: ["after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full", "after:transition-colors"]
}
},
// endregion ////
// region vertical ////
{
orientation: "vertical",
highlight: true,
level: true,
class: {
link: ["after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-[7px] after:rounded-full", "after:transition-colors"]
}
},
// endregion ////
// region pill ////
{
disabled: true,
orientation: "horizontal",
variant: "pill",
class: {
link: [
"hover:before:rounded-md"
].join(" ")
}
},
{
disabled: false,
active: false,
variant: "pill",
class: {
link: [
"transition-colors before:transition-colors"
].join(" "),
linkLeadingIcon: [
"group-hover:text-base-900 dark:group-hover:text-base-200",
"transition-colors"
].join(" ")
}
},
{
disabled: false,
active: false,
variant: "pill",
orientation: "horizontal",
class: {
link: "before:rounded-md data-[state=open]:text-base-950 dark:data-[state=open]:text-base-50",
linkLeadingIcon: "group-data-[state=open]:text-base-950 dark:group-data-[state=open]:text-base-50"
}
},
{
disabled: false,
variant: "pill",
highlight: true,
orientation: "horizontal",
class: {
link: "data-[state=open]:before:rounded-md data-[state=open]:before:bg-base-250/80 dark:data-[state=open]:before:bg-white/10"
}
},
{
disabled: false,
variant: "pill",
highlight: false,
active: false,
orientation: "horizontal",
class: {
link: "data-[state=open]:before:bg-base-250/80 dark:data-[state=open]:before:bg-white/10"
}
},
{
color: "default",
variant: "pill",
active: true,
class: {
linkLeadingIcon: "text-white dark:text-white group-data-[state=open]:text-white dark:group-data-[state=open]:text-white",
linkLabel: [
"font-semibold",
"text-white dark:text-white"
].join(" "),
linkLabelWrapper: [
"px-3",
"-ms-3 rtl:-me-3 rtl:ms-0",
"leading-[1.563rem]",
"bg-base-800 dark:bg-white/35",
"rounded-2xl"
].join(" ")
}
},
{
color: "default",
orientation: "horizontal",
variant: "pill",
active: true,
class: {
link: [
"min-h-9",
"before:rounded-md",
"before:bg-base-800 dark:before:bg-white/35",
"hover:before:bg-base-800 dark:hover:before:bg-white/35",
"data-[state=open]:before:bg-base-800 dark:data-[state=open]:before:bg-white/35"
].join(" "),
linkLabelWrapper: [
"min-h-9",
"bg-inherit dark:bg-inherit",
"rounded-none"
].join(" ")
}
},
{
color: "danger",
variant: "pill",
active: true,
class: {
linkLeadingIcon: "text-white dark:text-white group-data-[state=open]:text-white dark:group-data-[state=open]:text-white",
linkLabel: [
"font-semibold",
"text-white dark:text-white"
].join(" "),
linkLabelWrapper: [
"px-3",
"-ms-3 rtl:-me-3 rtl:ms-0",
"leading-[1.563rem]",
"bg-red-800 dark:bg-red-800",
"rounded-2xl"
].join(" ")
}
},
{
color: "danger",
orientation: "horizontal",
variant: "pill",
active: true,
class: {
link: [
"min-h-9",
"before:rounded-md",
"before:bg-red-800 dark:before:bg-red-800",
"hover:before:bg-red-800 dark:hover:before:bg-red-800",
"data-[state=open]:before:bg-red-800 dark:data-[state=open]:before:bg-red-800"
].join(" "),
linkLabelWrapper: [
"min-h-9",
"bg-inherit dark:bg-inherit",
"rounded-none"
].join(" ")
}
},
{
color: "success",
variant: "pill",
active: true,
class: {
linkLeadingIcon: "text-white dark:text-white group-data-[state=open]:text-white dark:group-data-[state=open]:text-white",
linkLabel: [
"font-semibold",
"text-white dark:text-white"
].join(" "),
linkLabelWrapper: [
"px-3",
"-ms-3 rtl:-me-3 rtl:ms-0",
"leading-[1.563rem]",
"bg-green-800 dark:bg-green-800",
"rounded-2xl"
].join(" ")
}
},
{
color: "success",
orientation: "horizontal",
variant: "pill",
active: true,
class: {
link: [
"min-h-9",
"before:rounded-md",
"before:bg-green-800 dark:before:bg-green-800",
"hover:before:bg-green-800 dark:hover:before:bg-green-800",
"data-[state=open]:before:bg-green-800 dark:data-[state=open]:before:bg-green-800"
].join(" "),
linkLabelWrapper: [
"min-h-9",
"bg-inherit dark:bg-inherit",
"rounded-none"
].join(" ")
}
},
{
color: "warning",
variant: "pill",
active: true,
class: {
linkLeadingIcon: "text-white dark:text-white group-data-[state=open]:text-white dark:group-data-[state=open]:text-white",
linkLabel: [
"font-semibold",
"text-white dark:text-white"
].join(" "),
linkLabelWrapper: [
"px-3",
"-ms-3 rtl:-me-3 rtl:ms-0",
"leading-[1.563rem]",
"bg-orange-800 dark:bg-orange-800",
"rounded-2xl"
].join(" ")
}
},
{
color: "warning",
orientation: "horizontal",
variant: "pill",
active: true,
class: {
link: [
"min-h-9",
"before:rounded-md",
"before:bg-orange-800 dark:before:bg-orange-800",
"hover:before:bg-orange-800 dark:hover:before:bg-orange-800",
"data-[state=open]:before:bg-orange-800 dark:data-[state=open]:before:bg-orange-800"
].join(" "),
linkLabelWrapper: [
"min-h-9",
"bg-inherit dark:bg-inherit",
"rounded-none"
].join(" ")
}
},
{
color: "primary",
variant: "pill",
active: true,
class: {
linkLeadingIcon: "text-white dark:text-white group-data-[state=open]:text-white dark:group-data-[state=open]:text-white",
linkLabel: [
"font-semibold",
"text-white dark:text-white"
].join(" "),
linkLabelWrapper: [
"px-3",
"-ms-3 rtl:-me-3 rtl:ms-0",
"leading-[1.563rem]",
"bg-blue-800 dark:bg-blue-800",
"rounded-2xl"
].join(" ")
}
},
{
color: "primary",
orientation: "horizontal",
variant: "pill",
active: true,
class: {
link: [
"min-h-9",
"before:rounded-md",
"before:bg-blue-800 dark:before:bg-blue-800",
"hover:before:bg-blue-800 dark:hover:before:bg-blue-800",
"data-[state=open]:before:bg-blue-800 dark:data-[state=open]:before:bg-blue-800"
].join(" "),
linkLabelWrapper: [
"min-h-9",
"bg-inherit dark:bg-inherit",
"rounded-none"
].join(" ")
}
},
{
color: "secondary",
variant: "pill",
active: true,
class: {
linkLeadingIcon: "text-white dark:text-white group-data-[state=open]:text-white dark:group-data-[state=open]:text-white",
linkLabel: [
"font-semibold",
"text-white dark:text-white"
].join(" "),
linkLabelWrapper: [
"px-3",
"-ms-3 rtl:-me-3 rtl:ms-0",
"leading-[1.563rem]",
"bg-cyan-800 dark:bg-cyan-800",
"rounded-2xl"
].join(" ")
}
},
{
color: "secondary",
orientation: "horizontal",
variant: "pill",
active: true,
class: {
link: [
"min-h-9",
"before:rounded-md",
"before:bg-cyan-800 dark:before:bg-cyan-800",
"hover:before:bg-cyan-800 dark:hover:before:bg-cyan-800",
"data-[state=open]:before:bg-cyan-800 dark:data-[state=open]:before:bg-cyan-800"
].join(" "),
linkLabelWrapper: [
"min-h-9",
"bg-inherit dark:bg-inherit",
"rounded-none"
].join(" ")
}
},
{
color: "collab",
variant: "pill",
active: true,
class: {
linkLeadingIcon: "text-white dark:text-white group-data-[state=open]:text-white dark:group-data-[state=open]:text-white",
linkLabel: [
"font-semibold",
"text-white dark:text-white"
].join(" "),
linkLabelWrapper: [
"px-3",
"-ms-3 rtl:-me-3 rtl:ms-0",
"leading-[1.563rem]",
"bg-collab-800 dark:bg-collab-800",
"rounded-2xl"
].join(" ")
}
},
{
color: "collab",
orientation: "horizontal",
variant: "pill",
active: true,
class: {
link: [
"min-h-9",
"before:rounded-md",
"before:bg-collab-800 dark:before:bg-collab-800",
"hover:before:bg-collab-800 dark:hover:before:bg-collab-800",
"data-[state=open]:before:bg-collab-800 dark:data-[state=open]:before:bg-collab-800"
].join(" "),
linkLabelWrapper: [
"min-h-9",
"bg-inherit dark:bg-inherit",
"rounded-none"
].join(" ")
}
},
{
color: "ai",
variant: "pill",
active: true,
class: {
linkLeadingIcon: "text-white dark:text-white group-data-[state=open]:text-white dark:group-data-[state=open]:text-white",
linkLabel: [
"font-semibold",
"text-white dark:text-white"
].join(" "),
linkLabelWrapper: [
"px-3",
"-ms-3 rtl:-me-3 rtl:ms-0",
"leading-[1.563rem]",
"bg-ai-800 dark:bg-ai-800",
"rounded-2xl"
].join(" ")
}
},
{
color: "ai",
orientation: "horizontal",
variant: "pill",
active: true,
class: {
link: [
"min-h-9",
"before:rounded-md",
"before:bg-ai-800 dark:before:bg-ai-800",
"hover:before:bg-ai-800 dark:hover:before:bg-ai-800",
"data-[state=open]:before:bg-ai-800 dark:data-[state=open]:before:bg-ai-800"
].join(" "),
linkLabelWrapper: [
"min-h-9",
"bg-inherit dark:bg-inherit",
"rounded-none"
].join(" ")
}
},
{
variant: "pill",
active: true,
highlight: false,
class: {
link: [
"leading-9"
].join(" "),
linkLabel: [
"font-semibold",
"text-white dark:text-white"
].join(" "),
linkLabelWrapper: [
"px-3",
"-ms-3 rtl:-me-3 rtl:ms-0",
"leading-[1.563rem]",
"bg-base-800 dark:bg-white/35",
"rounded-2xl"
].join(" ")
}
},
{
variant: "pill",
orientation: "horizontal",
active: true,
highlight: false,
class: {
linkLabelWrapper: [
"bg-inherit dark:bg-inherit"
].join(" ")
}
},
{
variant: "pill",
active: true,
highlight: true,
disabled: false,
class: {
link: [
"hover:before:bg-base-250/80 dark:hover:before:bg-white/10",
"before:transition-colors"
].join(" ")
}
},
{
color: "default",
orientation: "horizontal",
variant: "pill",
active: true,
highlight: true,
disabled: false,
class: {
link: [
"hover:before:bg-base-800 dark:hover:before:bg-white/35",
"before:transition-colors"
].join(" ")
}
},
{
color: "danger",
orientation: "horizontal",
variant: "pill",
active: true,
highlight: true,
disabled: false,
class: {
link: [
"hover:before:bg-red-800 dark:hover:before:bg-red-800",
"before:transition-colors"
].join(" ")
}
},
{
color: "success",
orientation: "horizontal",
variant: "pill",
active: true,
highlight: true,
disabled: false,
class: {
link: [
"hover:before:bg-green-800 dark:hover:before:bg-green-800",
"before:transition-colors"
].join(" ")
}
},
{
color: "warning",
orientation: "horizontal",
variant: "pill",
active: true,
highlight: true,
disabled: false,
class: {
link: [
"hover:before:bg-orange-800 dark:hover:before:bg-orange-800",
"before:transition-colors"
].join(" ")
}
},
{
color: "primary",
orientation: "horizontal",
variant: "pill",
active: true,
highlight: true,
disabled: false,
class: {
link: [
"hover:before:bg-blue-800 dark:hover:before:bg-blue-800",
"before:transition-colors"
].join(" ")
}
},
{
color: "secondary",
orientation: "horizontal",
variant: "pill",
active: true,
highlight: true,
disabled: false,
class: {
link: [
"hover:before:bg-cyan-800 dark:hover:before:bg-cyan-800",
"before:transition-colors"
].join(" ")
}
},
{
color: "collab",
orientation: "horizontal",
variant: "pill",
active: true,
highlight: true,
disabled: false,
class: {
link: [
"hover:before:bg-collab-800 dark:hover:before:bg-collab-800",
"before:transition-colors"
].join(" ")
}
},
{
color: "ai",
orientation: "horizontal",
variant: "pill",
active: true,
highlight: true,
disabled: false,
class: {
link: [
"hover:before:bg-ai-800 dark:hover:before:bg-ai-800",
"before:transition-colors"
].join(" ")
}
},
// endregion ////
// region link ////
{
orientation: "horizontal",
variant: "link",
class: {
viewportWrapper: [
"top-[calc(100%+0.4rem)]"
// perspective-[2000px]
].join(" "),
viewport: [
"rounded-b-md",
"[&:has(>[data-viewport=ltr])]:rounded-tr-md [&:has(>[data-viewport=rtl])]:rounded-tl-md",
"clip-path-viewport-wrapper"
].join(" "),
link: [
"before:inset-x-[0px] before:-inset-y-[6px] before:h-[70px]",
"before:rounded-t-md"
].join(" ")
}
},
{
disabled: false,
active: false,
variant: "link",
class: {
link: [
"hover:text-base-950 dark:hover:text-base-50",
"transition-colors"
].join(" "),
linkLeadingIcon: [
"group-hover:text-base-950 dark:group-hover:text-base-50",
"transition-colors"
].join(" ")
}
},
{
disabled: false,
variant: "link",
orientation: "horizontal",
class: {
link: [
"data-[state=open]:before:shadow-[0_6px_21px_rgba(83,92,105,.15)]",
"data-[state=open]:before:bg-white dark:data-[state=open]:before:bg-base-dark"
].join(" ")
}
},
{
disabled: false,
active: false,
variant: "link",
orientation: "horizontal",
class: {
link: [
"data-[state=open]:text-base-950 dark:data-[state=open]:text-base-50"
].join(" "),
linkLeadingIcon: "group-data-[state=open]:text-base-950 dark:group-data-[state=open]:text-base-50"
}
},
{
color: "default",
variant: "link",
active: true,
class: {
link: "font-semibold text-base-950 dark:text-base-50",
linkLeadingIcon: "text-base-950 group-data-[state=open]:text-base-950 dark:text-base-50 dark:group-data-[state=open]:text-base-50"
}
},
{
color: "danger",
variant: "link",
active: true,
class: {
link: "font-semibold text-red-800 dark:text-red-600",
linkLeadingIcon: "text-red-800 group-data-[state=open]:text-red-600 dark:text-red-600 dark:group-data-[state=open]:text-red-600"
}
},
{
color: "success",
variant: "link",
active: true,
class: {
link: "font-semibold text-green-800 dark:text-green-600",
linkLeadingIcon: "text-green-800 group-data-[state=open]:text-green-600 dark:text-green-600 dark:group-data-[state=open]:text-green-600"
}
},
{
color: "warning",
variant: "link",
active: true,
class: {
link: "font-semibold text-orange-800 dark:text-orange-600",
linkLeadingIcon: "text-orange-800 group-data-[state=open]:text-orange-600 dark:text-orange-600 dark:group-data-[state=open]:text-orange-600"
}
},
{
color: "primary",
variant: "link",
active: true,
class: {
link: "font-semibold text-blue-850 dark:text-blue-600",
linkLeadingIcon: "text-blue-850 group-data-[state=open]:text-blue-600 dark:text-blue-600 dark:group-data-[state=open]:text-blue-600"
}
},
{
color: "secondary",
variant: "link",
active: true,
class: {
link: "font-semibold text-cyan-800 dark:text-cyan-600",
linkLeadingIcon: "text-cyan-800 group-data-[state=open]:text-cyan-600 dark:text-cyan-600 dark:group-data-[state=open]:text-cyan-600"
}
},
{
color: "collab",
variant: "link",
active: true,
class: {
link: "font-semibold text-collab-800 dark:text-collab-600",
linkLeadingIcon: "text-collab-800 group-data-[state=open]:text-collab-600 dark:text-collab-600 dark:group-data-[state=open]:text-collab-600"
}
},
{
color: "ai",
variant: "link",
active: true,
class: {
link: "font-semibold text-ai-800 dark:text-ai-600",
linkLeadingIcon: "text-ai-800 group-data-[state=open]:text-ai-600 dark:text-ai-600 dark:group-data-[state=open]:text-ai-600"
}
},
// endregion ////
// region highlight.Color ////
{
orientation: "vertical",
highlightColor: "default",
highlight: true,
level: true,
active: true,
class: {
link: "after:bg-base-500"
}
},
{
orientation: "horizontal",
variant: "link",
highlightColor: "default",
highlight: true,
level: true,
active: true,
class: {
link: "after:bg-base-500"
}
},
{
orientation: "vertical",
highlightColor: "danger",
highlight: true,
level: true,
active: true,
class: {
link: "after:bg-red-500 dark:after:bg-red-600"
}
},
{
orientation: "horizontal",
variant: "link",
highlightColor: "danger",
highlight: true,
level: true,
active: true,
class: {
link: "after:bg-red-500 dark:after:bg-red-600"
}
},
{
orientation: "vertical",
highlightColor: "success",
highlight: true,
level: true,
active: true,
class: { link: "after:bg-green-500 dark:after:bg-green-600" }
},
{
orientation: "horizontal",
variant: "link",
highlightColor: "success",
highlight: true,
level: true,
active: true,
class: { link: "after:bg-green-500 dark:after:bg-green-600" }
},
{
orientation: "vertical",
highlightColor: "warning",
highlight: true,
level: true,
active: true,
class: {
link: "after:bg-orange-500 dark:after:bg-orange-600"
}
},
{
orientation: "horizontal",
variant: "link",
highlightColor: "warning",
highlight: true,
level: true,
active: true,
class: {
link: "after:bg-orange-500 dark:after:bg-orange-600"
}
},
{
orientation: "vertical",
highlightColor: "primary",
highlight: true,
level: true,
active: true,
class: {
link: "after:bg-blue-500 dark:after:bg-blue-600"
}
},
{
orientation: "horizontal",
variant: "link",
highlightColor: "primary",
highlight: true,
level: true,
active: true,
class: {
link: "after:bg-blue-850 dark:after:bg-blue-600"
}
},
{
orientation: "vertical",
highlightColor: "secondary",
highlight: true,
level: true,
active: true,
class: {
link: "after:bg-cyan-500 dark:after:bg-cyan-600"
}
},
{
orientation: "horizontal",
variant: "link",
highlightColor: "secondary",
highlight: true,
level: true,
active: true,
class: {
link: "after:bg-cyan-500 dark:after:bg-cyan-600"
}
},
{
orientation: "vertical",
highlightColor: "collab",
highlight: true,
level: true,
active: true,
class: {
link: "after:bg-collab-500 dark:after:bg-collab-600"
}
},
{
orientation: "horizontal",
variant: "link",
highlightColor: "collab",
highlight: true,
level: true,
active: true,
class: {
link: "after:bg-collab-500 dark:after:bg-collab-600"
}
},
{
orientation: "vertical",
highlightColor: "ai",
highlight: true,
level: true,
active: true,
class: {
link: "after:bg-ai-500 dark:after:bg-ai-600"
}
},
{
orientation: "horizontal",
variant: "link",
highlightColor: "ai",
highlight: true,
level: true,
active: true,
class: {
link: "after:bg-ai-500 dark:after:bg-ai-600"
}
}
// endregion ////
],
defaultVariants: {
color: "default",
highlightColor: "default",
contentOrientation: "vertical",
variant: "link"
}
};
const popover = {
slots: {
content: [
"bg-white dark:bg-base-dark",
"shadow-lg rounded-2xs ring ring-base-300 dark:ring-base-800",
"motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in]",
"origin-(--reka-popover-content-transform-origin)",
"focus:outline-none pointer-events-auto"
].join(" "),
arrow: "fill-white dark:fill-base-dark stroke-base-300 dark:stroke-base-800"
}
};
const progress = {
slots: {
root: "gap-2",
base: "relative overflow-hidden rounded-full bg-base-200 dark:bg-base-800",
indicator: "rounded-full size-full transition-transform duration-200 ease-out",
status: "flex justify-end text-base-500 dark:text-base-600 transition-[width] duration-200",
steps: "grid items-end",
step: "truncate text-end row-start-1 col-start-1 transition-opacity"
},
variants: {
animation: {
"loading": "",
"carousel": "",
"carousel-inverse": "",
"swing": "",
"elastic": ""
},
color: {
default: {
indicator: "bg-base-900 dark:bg-base-100",
steps: "text-base-500"
},
danger: {
indicator: "bg-red-500 dark:bg-red-600",
steps: "text-base-500"
},
success: {
indicator: "bg-green-500 dark:bg-green-600",
steps: "text-base-500"
},
warning: {
indicator: "bg-orange-500 dark:bg-orange-600",
steps: "text-base-500"
},
primary: {
indicator: "bg-blue-500 dark:bg-blue-600",
steps: "text-base-500"
},
secondary: {
indicator: "bg-cyan-350 dark:bg-cyan-500",
steps: "text-base-500"
},
collab: {
indicator: "bg-collab-500 dark:bg-collab-600",
steps: "text-base-500"
},
ai: {
indicator: "bg-ai-500 dark:bg-ai-900/85",
steps: "text-base-500"
}
},
size: {
xs: {
status: "text-xs",
steps: "text-xs"
},
sm: {
status: "text-sm",
steps: "text-sm"
},
md: {
status: "text-sm",
steps: "text-sm"
},
lg: {
status: "text-sm",
steps: "text-sm"
}
},
step: {
active: {
step: "opacity-100"
},
first: {
step: "opacity-100 text-base-500 dark:text-base-600"
},
other: {
step: "opacity-0"
},
last: {
step: ""
}
},
orientation: {
horizontal: {
root: "w-full flex flex-col",
base: "w-full",
status: "flex-row"
},
vertical: {
root: "h-full flex flex-row-reverse",
base: "h-full",
status: "flex-col min-w-[32px]"
}
},
inverted: {
true: {
status: "self-end"
}
}
},
compoundVariants: [
// region base ////
{
inverted: true,
orientation: "horizontal",
class: {
step: "text-start",
status: "flex-row-reverse"
}
},
{
inverted: true,
orientation: "vertical",
class: {
steps: "items-start",
status: "flex-col-reverse"
}
},
// endregion ////
// region horizontal ////
{
orientation: "horizontal",
size: "2xs",
class: "h-px"
},
{
orientation: "horizontal",
size: "xs",
class: "h-0.5"
},
{
orientation: "horizontal",
size: "sm",
class: "h-1"
},
{
orientation: "horizontal",
size: "md",
class: "h-2"
},
{
orientation: "horizontal",
size: "lg",
class: "h-3"
},
{
orientation: "horizontal",
size: "xl",
class: "h-4"
},
{
orientation: "horizontal",
size: "2xl",
class: "h-5"
},
// endregion ////
// region vertical ////
{
orientation: "vertical",
size: "2xs",
class: "w-px"
},
{
orientation: "vertical",
size: "xs",
class: "w-0.5"
},
{
orientation: "vertical",
size: "sm",
class: "w-1"
},
{
orientation: "vertical",
size: "md",
class: "w-2"
},
{
orientation: "vertical",
size: "lg",
class: "w-3"
},
{
orientation: "vertical",
size: "xl",
class: "w-4"
},
{
orientation: "vertical",
size: "2xl",
class: "w-5"
},
// endregion ////
// region animation ////
{
orientation: "horizontal",
animation: "carousel",
class: {
indicator: "data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"
}
},
{
orientation: "vertical",
animation: "carousel",
class: {
indicator: "data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"
}
},
{
orientation: "horizontal",
animation: "carousel-inverse",
class: {
indicator: "data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"
}
},
{
orientation: "vertical",
animation: "carousel-inverse",
class: {
indicator: "data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]"
}
},
{
orientation: "horizontal",
animation: "swing",
class: {
indicator: "data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"
}
},
{
orientation: "vertical",
animation: "swing",
class: {
indicator: "data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]"
}
},
{
orientation: "horizontal",
animation: "elastic",
class: {
indicator: "data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"
}
},
{
orientation: "vertical",
animation: "elastic",
class: {
indicator: "data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]"
}
},
{
orientation: "horizontal",
animation: "loading",
class: {
indicator: "data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]"
}
},
{
orientation: "vertical",
animation: "loading",
class: {
indicator: "data-[state=indeterminate]:animate-[progressbar-loading-vertical_2s_infinite]"
}
}
// endregion ////
],
defaultVariants: {
animation: "loading",
color: "primary",
size: "md"
}
};
const radioGroup = {
slots: {
root: "relative",
fieldset: "flex",
legend: "mb-1.5 block text-base-900 dark:text-base-400",
item: "flex items-start",
base: [
"cursor-pointer rounded-full",
"ring ring-inset ring-base-300 dark:ring-base-700",
"outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2"
].join(" "),
indicator: " flex items-center justify-center size-full rounded-full after:bg-white dark:after:bg-base-dark after:rounded-full",
container: "flex items-center",
wrapper: "font-b24-primary font-regular w-full",
label: "cursor-pointer block text-base-master dark:text-base-400",
description: "text-base-500 dark:text-base-600"
},
variants: {
color: {
default: {
base: "focus-visible:outline-base-900 dark:focus-visible:outline-base-900",
indicator: "bg-base-900 dark:bg-base-350"
},
danger: {
base: "focus-visible:outline-red-500 dark:focus-visible:outline-red-600",
indicator: "bg-red-500 dark:bg-red-600"
},
success: {
base: "focus-visible:outline-green-500 dark:focus-visible:outline-green-600",
indicator: "bg-green-500 dark:bg-green-600"
},
warning: {
base: "focus-visible:outline-orange-500 dark:focus-visible:outline-orange-600",
indicator: "bg-orange-500 dark:bg-orange-600"
},
primary: {
base: "focus-visible:outline-blue-500 dark:focus-visible:outline-blue-600",
indicator: "bg-blue-500 dark:bg-blue-600"
},
secondary: {
base: "focus-visible:outline-cyan-350 dark:focus-visible:outline-cyan-500",
indicator: "bg-cyan-350 dark:bg-cyan-500"
},
collab: {
base: "focus-visible:outline-collab-500 dark:focus-visible:outline-collab-600",
indicator: "bg-collab-500 dark:bg-collab-600"
},
ai: {
base: "focus-visible:outline-ai-500 dark:focus-visible:outline-ai-600",
indicator: "bg-ai-500 dark:bg-ai-600"
}
},
variant: {
list: {},
card: {
item: "items-center border border-base-200 dark:border-base-700 rounded-lg"
},
table: {
item: "border border-base-200 dark:border-base-900"
}
},
orientation: {
horizontal: {
fieldset: "flex-row",
wrapper: "me-2"
},
vertical: {
fieldset: "flex-col"
}
},
indicator: {
start: {
item: "flex-row",
base: "me-2"
},
end: {
item: "flex-row-reverse",
base: "ms-2"
},
hidden: {
base: "sr-only",
wrapper: "text-center"
}
},
size: {
xs: {
fieldset: "gap-1",
legend: "text-xs",
base: "size-3",
item: "text-xs",
label: "leading-4",
container: "h-4",
indicator: "after:size-1"
},
sm: {
fieldset: "gap-1.5",
legend: "text-xs",
base: "size-3.5",
item: "text-sm",
label: "leading-4",
container: "h-4",
indicator: "after:size-1"
},
md: {
fieldset: "gap-1",
legend: "text-sm",
base: "size-4",
item: "text-md",
label: "leading-5",
container: "h-5",
indicator: "after:size-1.5"
},
lg: {
fieldset: "gap-1.5",
legend: "text-sm",
base: "size-5",
item: "text-xl",
label: "leading-5",
container: "h-5",
indicator: "after:size-2"
}
},
disabled: {
true: {
base: "cursor-not-allowed opacity-75",
label: "cursor-not-allowed opacity-75"
}
},
required: {
true: {
label: "after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-600"
}
}
},
compoundVariants: [
// region size ////
{ size: "xs", variant: ["card", "table"], class: { item: "p-2.5" } },
{ size: "sm", variant: ["card", "table"], class: { item: "p-3" } },
{ size: "md", variant: ["card", "table"], class: { item: "p-3.5" } },
{ size: "lg", variant: ["card", "table"], class: { item: "p-4" } },
// endregion ////
// region orientation/table ////
{
orientation: "horizontal",
variant: "table",
class: {
item: "first-of-type:rounded-s-lg last-of-type:rounded-e-lg",
fieldset: "gap-0 -space-x-px"
}
},
{
orientation: "vertical",
variant: "table",
class: {
item: "first-of-type:rounded-t-lg last-of-type:rounded-b-lg",
fieldset: "gap-0 -space-y-px"
}
},
// endregion ////
// region card ////
{
color: "default",
variant: "card",
class: {
item: "has-data-[state=checked]:border-base-900 dark:has-data-[state=checked]:border-base-350"
}
},
{
color: "danger",
variant: "card",
class: {
item: "has-data-[state=checked]:border-red-500 dark:has-data-[state=checked]:border-red-600"
}
},
{
color: "success",
variant: "card",
class: {
item: "has-data-[state=checked]:border-green-500 dark:has-data-[state=checked]:border-green-600"
}
},
{
color: "warning",
variant: "card",
class: {
item: "has-data-[state=checked]:border-orange-500 dark:has-data-[state=checked]:border-orange-600"
}
},
{
color: "primary",
variant: "card",
class: {
item: "has-data-[state=checked]:border-blue-500 dark:has-data-[state=checked]:border-blue-600"
}
},
{
color: "secondary",
variant: "card",
class: {
item: "has-data-[state=checked]:border-cyan-500 dark:has-data-[state=checked]:border-cyan-600"
}
},
{
color: "collab",
variant: "card",
class: {
item: "has-data-[state=checked]:border-collab-500 dark:has-data-[state=checked]:border-collab-600"
}
},
{
color: "ai",
variant: "card",
class: {
item: "has-data-[state=checked]:border-ai-500 dark:has-data-[state=checked]:border-ai-600"
}
},
// endregion ////
// region table ////
{
color: "default",
variant: "table",
class: {
item: [
"has-data-[state=checked]:bg-base-100 dark:has-data-[state=checked]:bg-base-900",
"has-data-[state=checked]:border-base-900/25 dark:has-data-[state=checked]:border-base-700/25",
"has-data-[state=checked]:z-[1]"
].join(" ")
}
},
{
color: "danger",
variant: "table",
class: {
item: [
"has-data-[state=checked]:bg-red-500/24 dark:has-data-[state=checked]:bg-red-600/24",
"has-data-[state=checked]:border-red-500 dark:has-data-[state=checked]:border-red-600",
"has-data-[state=checked]:z-[1]"
].join(" ")
}
},
{
color: "success",
variant: "table",
class: {
item: [
"has-data-[state=checked]:bg-green-500/24 dark:has-data-[state=checked]:bg-green-600/24",
"has-data-[state=checked]:border-green-500 dark:has-data-[state=checked]:border-green-600",
"has-data-[state=checked]:z-[1]"
].join(" ")
}
},
{
color: "warning",
variant: "table",
class: {
item: [
"has-data-[state=checked]:bg-orange-500/24 dark:has-data-[state=checked]:bg-orange-600/24",
"has-data-[state=checked]:border-orange-500 dark:has-data-[state=checked]:border-orange-600",
"has-data-[state=checked]:z-[1]"
].join(" ")
}
},
{
color: "primary",
variant: "table",
class: {
item: [
"has-data-[state=checked]:bg-blue-500/24 dark:has-data-[state=checked]:bg-blue-600/24",
"has-data-[state=checked]:border-blue-500 dark:has-data-[state=checked]:border-blue-600",
"has-data-[state=checked]:z-[1]"
].join(" ")
}
},
{
color: "secondary",
variant: "table",
class: {
item: [
"has-data-[state=checked]:bg-cyan-500/24 dark:has-data-[state=checked]:bg-cyan-600/24",
"has-data-[state=checked]:border-cyan-500 dark:has-data-[state=checked]:border-cyan-600",
"has-data-[state=checked]:z-[1]"
].join(" ")
}
},
{
color: "collab",
variant: "table",
class: {
item: [
"has-data-[state=checked]:bg-collab-500/24 dark:has-data-[state=checked]:bg-collab-600/24",
"has-data-[state=checked]:border-collab-500 dark:has-data-[state=checked]:border-collab-600",
"has-data-[state=checked]:z-[1]"
].join(" ")
}
},
{
color: "ai",
variant: "table",
class: {
item: [
"has-data-[state=checked]:bg-ai-500/24 dark:has-data-[state=checked]:bg-ai-600/24",
"has-data-[state=checked]:border-ai-500 dark:has-data-[state=checked]:border-ai-600",
"has-data-[state=checked]:z-[1]"
].join(" ")
}
}
// endregion ////
],
defaultVariants: {
size: "md",
color: "primary",
variant: "list",
orientation: "vertical",
indicator: "start"
}
};
const range = {
slots: {
root: "relative flex items-center select-none touch-none",
track: "relative bg-base-200 dark:bg-base-800 overflow-hidden rounded-full grow",
range: "absolute rounded-full",
thumb: [
"rounded-full bg-white dark:bg-base-100",
"ring-2",
"outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2"
].join(" ")
},
variants: {
color: {
default: {
range: "bg-base-900 dark:bg-base-350",
thumb: "ring-base-900 dark:ring-base-400 focus-visible:outline-base-900/50 dark:focus-visible:outline-base-700/50"
},
danger: {
range: "bg-red-500 dark:bg-red-600",
thumb: "ring-red-500 dark:ring-red-600 focus-visible:outline-red-500/50 dark:focus-visible:outline-red-600/50"
},
success: {
range: "bg-green-500 dark:bg-green-600",
thumb: "ring-green-500 dark:ring-green-600 focus-visible:outline-green-500/50 dark:focus-visible:outline-green-600/50"
},
warning: {
range: "bg-orange-500 dark:bg-orange-600",
thumb: "ring-orange-500 dark:ring-orange-600 focus-visible:outline-orange-500/50 dark:focus-visible:outline-orange-600/50"
},
primary: {
range: "bg-blue-500 dark:bg-blue-600",
thumb: "ring-blue-500 dark:ring-blue-600 focus-visible:outline-blue-500/50 dark:focus-visible:outline-blue-600/50"
},
secondary: {
range: "bg-cyan-350 dark:bg-cyan-500",
thumb: "ring-cyan-350 dark:ring-cyan-500 focus-visible:outline-cyan-350/50 dark:focus-visible:outline-cyan-500/50"
},
collab: {
range: "bg-collab-500 dark:bg-collab-600",
thumb: "ring-collab-500 dark:ring-collab-600 focus-visible:outline-collab-500/50 dark:focus-visible:outline-collab-600/50"
},
ai: {
range: "bg-ai-500 dark:bg-ai-600",
thumb: "ring-ai-500 dark:ring-ai-600 focus-visible:outline-ai-500/50 dark:focus-visible:outline-ai-600/50"
}
},
size: {
xs: {
thumb: "size-3"
},
sm: {
thumb: "size-3.5"
},
md: {
thumb: "size-4"
},
lg: {
thumb: "size-5"
}
},
orientation: {
horizontal: {
root: "w-full",
range: "h-full"
},
vertical: {
root: "flex-col h-full",
range: "w-full"
}
},
disabled: {
true: {
root: "opacity-75 cursor-not-allowed"
}
}
},
compoundVariants: [
// region horizontal ////
{
orientation: "horizontal",
size: "xs",
class: {
track: "h-[6px]"
}
},
{
orientation: "horizontal",
size: "sm",
class: {
track: "h-[7px]"
}
},
{
orientation: "horizontal",
size: "md",
class: {
track: "h-[8px]"
}
},
{
orientation: "horizontal",
size: "lg",
class: {
track: "h-[9px]"
}
},
{
orientation: "horizontal",
size: "xl",
class: {
track: "h-[10px]"
}
},
// endregion ////
// region vertical ////
{
orientation: "vertical",
size: "xs",
class: {
track: "w-[6px]"
}
},
{
orientation: "vertical",
size: "sm",
class: {
track: "w-[7px]"
}
},
{
orientation: "vertical",
size: "md",
class: {
track: "w-[8px]"
}
},
{
orientation: "vertical",
size: "lg",
class: {
track: "w-[9px]"
}
},
{
orientation: "vertical",
size: "xl",
class: {
track: "w-[10px]"
}
}
// endregion ////
],
defaultVariants: {
size: "md",
color: "primary"
}
};
const defSize = {
label: "h-9 ps-2 pe-3 text-sm gap-2",
item: "h-9 ps-3 pe-3 text-sm gap-2",
itemLeadingIcon: "size-5",
itemLeadingAvatarSize: "2xs",
itemLeadingChip: "size-3 not-group-data-reka-collection-item:ps-2.5",
itemLeadingChipSize: "sm",
itemTrailingIcon: "size-3",
// scrollUpDownButtonIcon: 'size-4',
trailingIcon: "size-lg2"
};
const select = () => {
return defuFn(
{
slots: {
root: () => "isolate relative inline-flex items-center w-full",
base: () => [
"px-3",
"relative inline-flex items-center group",
"py-0 border-0 focus:outline-none",
"cursor-pointer disabled:cursor-not-allowed",
"disabled:bg-base-30/37 disabled:text-base-500",
"dark:disabled:bg-base-900/37 dark:disabled:text-base-800",
"appearance-none transition duration-300 ease-linear",
// transition-colors
"ring ring-inset ring-base-300",
"dark:ring-base-800",
"text-base-master bg-white hover:text-base-900 focus:text-base-900 active:text-base-900",
"dark:text-base-150 dark:bg-transparent dark:hover:text-base-350 dark:focus:text-base-350 dark:active:text-base-350",
"font-b24-primary font-regular text-sm leading-tight",
"align-middle",
"text-ellipsis whitespace-nowrap"
].join(" "),
value: "truncate pointer-events-none",
placeholder: "truncate text-base-400 dark:text-base-300",
arrow: "fill-base-master/10 dark:fill-base-100/20",
content: [
"w-(--reka-select-trigger-width)",
// 'max-h-60',
"min-w-fit",
// 'h-(--reka-popper-available-height)',
"bg-white dark:bg-base-dark",
"shadow-md rounded-2xs ring ring-base-300 dark:ring-base-800",
"overflow-hidden",
"data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
"origin-(--reka-select-content-transform-origin)",
"flex flex-col",
"pointer-events-auto"
].join(" "),
// scrollUpDownButton: [
// 'flex items-center justify-center h-[25px] cursor-default backdrop-blur',
// 'text-base-800 bg-white',
// 'dark:text-base-100 dark:bg-base-dark'
// ].join(' '),
// scrollUpDownButtonIcon: '',
viewport: [
"relative",
"divide-y divide-base-master/10 dark:divide-base-100/20",
"scroll-py-1",
"overflow-y-auto",
"flex-1"
].join(" "),
group: "p-1 isolate",
empty: "py-2 text-center text-sm text-base-500 dark:text-base-600",
label: [
"flex items-center",
"font-semibold text-base-900 dark:text-base-200"
].join(" "),
separator: "-mx-1 my-1 h-px bg-base-master/10 dark:bg-base-100/20",
item: [
"group relative w-full flex items-center select-none outline-none",
"before:absolute before:z-[-1] before:inset-px before:rounded-2xs",
"cursor-pointer",
"data-disabled:cursor-not-allowed data-disabled:opacity-75",
"text-base-master dark:text-base-150",
"data-highlighted:not-data-disabled:text-base-900 dark:data-highlighted:not-data-disabled:text-base-200 data-highlighted:not-data-disabled:before:bg-base-100/50 dark:data-highlighted:not-data-disabled:before:bg-base-900",
"data-[state=checked]:text-base-900 dark:data-[state=checked]:text-base-200 data-[state=checked]:before:bg-base-100/50 dark:data-[state=checked]:before:bg-base-900",
"transition-colors before:transition-colors"
].join(" "),
itemLeadingIcon: [
"shrink-0 transition-colors",
"text-base-500 dark:text-base-700",
"group-data-highlighted:not-data-disabled:text-base-master dark:group-data-highlighted:not-data-disabled:text-base-150",
"group-data-[state=checked]:text-base-master dark:group-data-[state=checked]:text-base-150"
].join(" "),
itemLeadingAvatar: "shrink-0",
itemLeadingAvatarSize: "",
itemLeadingChip: "shrink-0",
itemLeadingChipSize: "",
itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
itemTrailingIcon: "shrink-0",
itemLabel: "truncate"
},
variants: {
...buttonGroupVariantWithRoot,
size: {
xs: defSize,
sm: defSize,
md: defSize,
lg: defSize
},
...colorDropDownItem
}
},
input
);
};
const selectMenu = () => {
return defuFn({
slots: {
input: "border-b border-base-300 dark:dark:border-base-800",
focusScope: "flex flex-col min-h-0",
content: (content) => [content, "origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)"]
},
variants: {
addNew: {
true: {
group: "p-0 isolate -m-px",
item: [
"before:rounded-none",
"text-base-master dark:text-base-150 before:bg-blue-200 dark:before:bg-blue-800",
"data-highlighted:not-data-disabled:text-base-900 dark:data-highlighted:not-data-disabled:text-base-200 data-highlighted:not-data-disabled:before:bg-blue-200 dark:data-highlighted:not-data-disabled:before:bg-blue-800",
"data-[state=checked]:text-base-900 dark:data-[state=checked]:text-base-200 data-[state=checked]:before:bg-blue-200 dark:data-[state=checked]:before:bg-blue-800"
].join(" "),
itemLabel: "flex flex-row flex-nowrap items-center justify-start gap-2",
itemLeadingIcon: [
"size-5 rounded-full",
"text-white dark:text-base-150 bg-blue-500 dark:bg-blue-600",
"group-data-highlighted:not-data-disabled:text-white dark:group-data-highlighted:not-data-disabled:text-base-150 group-data-highlighted:not-data-disabled:bg-blue-500 dark:group-data-highlighted:not-data-disabled:bg-blue-600",
"group-data-[state=checked]:text-white dark:group-data-[state=checked]:text-base-150 group-data-[state=checked]:bg-blue-500 dark:group-data-[state=checked]:bg-blue-600"
].join(" ")
}
}
}
}, select());
};
const separator = {
slots: {
root: "flex items-center align-center text-center",
border: "",
container: "font-b24-primary font-normal text-base-500 flex",
icon: "shrink-0 size-7",
avatar: "shrink-0",
avatarSize: "sm",
label: "text-sm"
},
variants: {
color: {
default: { border: "border-base-master/10 dark:border-base-100/20" },
danger: { border: "border-red-500 dark:border-red-600" },
success: { border: "border-green-500 dark:border-green-600" },
warning: { border: "border-orange-500 dark:border-orange-600" },
primary: { border: "border-blue-500 dark:border-blue-600" },
secondary: { border: "border-cyan-350 dark:border-cyan-500" },
collab: { border: "border-collab-500 dark:border-collab-600" },
ai: { border: "border-ai-500 dark:border-ai-600" }
},
orientation: {
horizontal: {
root: "w-full flex-row",
border: "w-full",
container: "mx-3 whitespace-nowrap"
},
vertical: {
root: "h-full flex-col",
border: "h-full",
container: "my-2"
}
},
size: {
xs: "",
sm: "",
md: "",
lg: "",
xl: ""
},
type: {
solid: {
border: "border-solid"
},
dashed: {
border: "border-dashed"
},
dotted: {
border: "border-dotted"
}
}
},
compoundVariants: [
// region horizontal ////
{
orientation: "horizontal",
size: "xs",
class: { border: "border-t" }
},
{
orientation: "horizontal",
size: "sm",
class: { border: "border-t-[2px]" }
},
{
orientation: "horizontal",
size: "md",
class: { border: "border-t-[3px]" }
},
{
orientation: "horizontal",
size: "lg",
class: { border: "border-t-[4px]" }
},
{
orientation: "horizontal",
size: "xl",
class: { border: "border-t-[5px]" }
},
// endregion ////
// region vertical ////
{
orientation: "vertical",
size: "xs",
class: { border: "border-s" }
},
{
orientation: "vertical",
size: "sm",
class: { border: "border-s-[2px]" }
},
{
orientation: "vertical",
size: "md",
class: { border: "border-s-[3px]" }
},
{
orientation: "vertical",
size: "lg",
class: { border: "border-s-[4px]" }
},
{
orientation: "vertical",
size: "xl",
class: { border: "border-s-[5px]" }
}
// endregion ////
],
defaultVariants: {
color: "default",
size: "xs",
type: "solid"
}
};
const skeleton = {
base: "animate-pulse rounded-md bg-gray-200 dark:bg-gray-800"
};
const safeList = [
"group-hover:rounded-full group-hover:border-1 group-hover:border-current"
].join(" ");
const slideover = {
slots: {
overlay: "fixed inset-0 bg-base-950/20 dark:bg-base-950/30",
content: [
"fixed",
"bg-base-50 dark:bg-base-950",
// 'divide-y divide-(--ui-border)',
"sm:shadow-lg",
"flex flex-col focus:outline-none"
].join(" "),
header: [
"mt-4 px-5",
"flex items-center gap-1.5"
].join(" "),
wrapper: "min-h-2xl",
body: [
"mx-0 mt-2",
"flex-1 overflow-y-auto"
].join(" "),
footer: "bg-white dark:bg-base-950 flex items-center justify-center gap-3 py-4 border-t border-t-1 border-t-base-900/10 dark:border-t-white/20 shadow-top-md p-2 pr-(--scrollbar-width)",
title: "font-b24-system font-light text-4.5xl leading-none text-base-900 dark:text-base-150",
description: "mt-2 mb-1 text-base-500 dark:text-base-400 text-sm",
close: "absolute",
safeList
},
variants: {
overlayBlur: {
auto: {
overlay: "motion-safe:backdrop-blur-sm"
},
on: {
overlay: "backdrop-blur-sm"
},
off: {
overlay: ""
}
},
side: {
top: {
content: "inset-x-0 top-0 max-h-full"
},
right: {
content: "right-0 inset-y-0 w-full max-w-[28rem]"
},
bottom: {
content: "inset-x-0 bottom-0 max-h-full"
},
left: {
content: "left-0 inset-y-0 w-full max-w-[28rem]"
}
},
transition: {
true: {
overlay: "motion-safe:data-[state=open]:animate-[fade-in_200ms_ease-out] motion-safe:data-[state=closed]:animate-[fade-out_200ms_ease-in]"
}
},
scrollbarThin: {
true: {
body: "scrollbar-thin"
}
}
},
compoundVariants: [
// region close ////
// close: 'absolute ' ////
{
side: "right",
class: {
close: [
"pl-1.5 pr-2.5",
"top-3 -translate-x-full left-0",
"rounded-l-full"
].join(" ")
}
},
{
side: "left",
class: {
close: [
"pr-1.5 pl-2.5",
"top-3 translate-x-full right-0",
"rounded-r-full"
].join(" ")
}
},
{
side: ["top", "bottom"],
class: {
close: [
"top-4 end-4"
].join(" ")
}
},
// endregion ////
// region transition ////
{
transition: true,
side: "top",
class: {
content: "motion-safe:data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] motion-safe:data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]"
}
},
{
transition: true,
side: "right",
class: {
content: "motion-safe:data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] motion-safe:data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]"
}
},
{
transition: true,
side: "bottom",
class: {
content: "motion-safe:data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] motion-safe:data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]"
}
},
{
transition: true,
side: "left",
class: {
content: "motion-safe:data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] motion-safe:data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]"
}
}
],
defaultVariants: {
side: "right",
scrollbarThin: true,
overlayBlur: "auto"
}
};
const _switch = {
slots: {
root: "relative flex items-start",
base: [
"cursor-pointer inline-flex items-center shrink-0 rounded-full border-2 border-transparent data-[state=unchecked]:bg-base-200 dark:data-[state=unchecked]:bg-base-800",
"outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2",
"transition-[background] duration-200"
].join(" "),
container: "flex items-center",
thumb: "group pointer-events-none rounded-full bg-white dark:bg-base-100 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center",
icon: [
"absolute shrink-0 group-data-[state=unchecked]:text-base-400 dark:group-data-[state=unchecked]:text-base-700 opacity-0 p-0.5 size-10/10",
"transition-[color,opacity] duration-200"
].join(" "),
wrapper: "font-b24-primary font-regular ms-2",
label: "cursor-pointer block text-base-master dark:text-base-400",
description: "text-base-500 dark:text-base-600"
},
variants: {
color: {
default: {
base: "data-[state=checked]:bg-base-900 focus-visible:outline-base-900 dark:data-[state=checked]:bg-base-100 dark:focus-visible:outline-base-100",
icon: "group-data-[state=checked]:text-base-900 dark:group-data-[state=checked]:text-base-900",
thumb: "dark:data-[state=checked]:bg-base-master"
},
danger: {
base: "data-[state=checked]:bg-red-500 focus-visible:outline-red-500 dark:data-[state=checked]:bg-red-600 dark:focus-visible:outline-red-600",
icon: "group-data-[state=checked]:text-red-500 dark:group-data-[state=checked]:text-red-600"
},
success: {
base: "data-[state=checked]:bg-green-500 focus-visible:outline-green-500 dark:data-[state=checked]:bg-green-600 dark:focus-visible:outline-green-600",
icon: "group-data-[state=checked]:text-green-500 dark:group-data-[state=checked]:text-green-600"
},
warning: {
base: "data-[state=checked]:bg-orange-500 focus-visible:outline-orange-500 dark:data-[state=checked]:bg-orange-600 dark:focus-visible:outline-orange-600",
icon: "group-data-[state=checked]:text-orange-500 dark:group-data-[state=checked]:text-orange-600"
},
primary: {
base: "data-[state=checked]:bg-blue-500 focus-visible:outline-blue-500 dark:data-[state=checked]:bg-blue-600 dark:focus-visible:outline-blue-600",
icon: "group-data-[state=checked]:text-blue-500 dark:group-data-[state=checked]:text-blue-600"
},
secondary: {
base: "data-[state=checked]:bg-cyan-350 focus-visible:outline-cyan-350 dark:data-[state=checked]:bg-cyan-500 dark:focus-visible:outline-cyan-500",
icon: "group-data-[state=checked]:text-cyan-350 dark:group-data-[state=checked]:text-cyan-500"
},
collab: {
base: "data-[state=checked]:bg-collab-500 focus-visible:outline-collab-500 dark:data-[state=checked]:bg-collab-600 dark:focus-visible:outline-collab-600",
icon: "group-data-[state=checked]:text-collab-500 dark:group-data-[state=checked]:text-collab-600"
},
ai: {
base: "data-[state=checked]:bg-ai-500 focus-visible:outline-ai-500 dark:data-[state=checked]:bg-ai-600 dark:focus-visible:outline-ai-600",
icon: "group-data-[state=checked]:text-ai-500 dark:group-data-[state=checked]:text-ai-600"
}
},
size: {
xs: {
base: "w-7",
container: "h-4",
thumb: "size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3",
wrapper: "text-xs",
label: "leading-4"
},
sm: {
base: "w-8",
container: "h-4",
thumb: "size-3.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5",
wrapper: "text-sm",
label: "leading-4"
},
md: {
base: "w-9",
container: "h-5",
thumb: "size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4",
wrapper: "text-md",
label: "leading-5"
},
lg: {
base: "w-10",
container: "h-5",
thumb: "size-5 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4",
wrapper: "text-xl",
label: "leading-5"
}
},
checked: {
true: {
icon: "group-data-[state=checked]:opacity-100"
}
},
unchecked: {
true: {
icon: "group-data-[state=unchecked]:opacity-100"
}
},
loading: {
true: {
icon: "animate-spin"
}
},
required: {
true: {
label: "after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-600"
}
},
disabled: {
true: {
base: "cursor-not-allowed opacity-75",
label: "cursor-not-allowed opacity-75",
description: "cursor-not-allowed opacity-75"
}
}
},
defaultVariants: {
color: "primary",
size: "md"
}
};
const tabs = {
slots: {
root: "flex items-center gap-2",
list: "relative flex p-1 group",
indicator: "absolute transition-[translate,width] duration-200",
trigger: [
"group relative inline-flex items-center min-w-0",
"data-[state=inactive]:text-base-600 dark:data-[state=inactive]:text-base-600",
"hover:data-[state=inactive]:not-disabled:text-base-master dark:hover:data-[state=inactive]:not-disabled:text-base-150",
"font-medium rounded-xl",
"cursor-pointer disabled:cursor-not-allowed disabled:opacity-75",
"transition-colors"
].join(" "),
content: "focus:outline-none w-full",
leadingIcon: "shrink-0",
leadingAvatar: "shrink-0",
leadingAvatarSize: "",
label: ""
},
variants: {
color: {
default: "",
danger: "",
success: "",
warning: "",
primary: "",
secondary: "",
collab: "",
ai: ""
},
variant: {
pill: {
list: "bg-base-100 dark:bg-transparent rounded-md",
trigger: "grow",
indicator: "rounded-xl shadow-xs"
},
link: {
list: "border-base-300 dark:border-base-800",
indicator: "rounded-full",
trigger: "focus:outline-none"
}
},
orientation: {
horizontal: {
root: "flex-col",
list: "w-full",
indicator: "left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position)",
trigger: "justify-center"
},
vertical: {
list: "flex-col",
indicator: "top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position)"
}
},
size: {
xs: {
trigger: "px-2 py-1 text-xs gap-1",
leadingIcon: "size-4",
leadingAvatarSize: "3xs"
},
sm: {
trigger: "px-2.5 py-1.5 text-xs gap-1.5",
leadingIcon: "size-4",
leadingAvatarSize: "3xs"
},
md: {
trigger: "px-3 py-1.5 text-sm gap-1.5",
leadingIcon: "size-5",
leadingAvatarSize: "2xs"
},
lg: {
trigger: "px-3 py-2 text-sm gap-2",
leadingIcon: "size-5",
leadingAvatarSize: "2xs"
},
xl: {
trigger: "px-3 py-2 text-base gap-2",
leadingIcon: "size-6",
leadingAvatarSize: "xs"
}
}
},
compoundVariants: [
// region orientation ////
// region orientation horizontal.pill ////
{
orientation: "horizontal",
variant: "pill",
class: {
indicator: "inset-y-1"
}
},
// endregion ////
// region orientation horizontal.link ////
{
orientation: "horizontal",
variant: "link",
class: {
list: "border-b -mb-px",
indicator: "-bottom-px h-px"
}
},
// endregion ////
// region orientation vertical.pill ////
{
orientation: "vertical",
variant: "pill",
class: {
indicator: "inset-x-1",
list: "items-center"
}
},
// endregion ////
// region orientation vertical.link ////
{
orientation: "vertical",
variant: "link",
class: {
list: "border-s -ms-px",
indicator: "-start-px w-px"
}
},
// endregion ////
// endregion ////
// region color ////
// region color.default ////
{
color: "default",
variant: "pill",
class: {
indicator: "bg-base-900 dark:bg-base-900",
trigger: [
"data-[state=active]:text-white focus-visible:outline-base-900",
"dark:data-[state=active]:text-base-200 dark:focus-visible:outline-base-900",
"focus-visible:outline-2 focus-visible:outline-offset-2]"
]
}
},
{
color: "default",
variant: "link",
class: {
indicator: "bg-base-900 dark:dark:bg-base-350",
trigger: [
"focus-visible:ring-2 focus-visible:ring-inset",
"data-[state=active]:text-base-900 focus-visible:ring-base-900",
"dark:data-[state=active]:text-base-350 dark:focus-visible:ring-base-350"
]
}
},
// endregion ////
// region color.danger ////
{
color: "danger",
variant: "pill",
class: {
indicator: "bg-red-900 dark:bg-red-900",
trigger: [
"data-[state=active]:text-white focus-visible:outline-red-900",
"dark:data-[state=active]:text-red-200 dark:focus-visible:outline-red-900",
"focus-visible:outline-2 focus-visible:outline-offset-2]"
]
}
},
{
color: "danger",
variant: "link",
class: {
indicator: "bg-red-900 dark:dark:bg-red-300",
trigger: [
"focus-visible:ring-2 focus-visible:ring-inset",
"data-[state=active]:text-red-900 focus-visible:ring-red-900",
"dark:data-[state=active]:text-red-300 dark:focus-visible:ring-red-300"
]
}
},
// endregion ////
// region color.success ////
{
color: "success",
variant: "pill",
class: {
indicator: "bg-green-900 dark:bg-green-900",
trigger: [
"data-[state=active]:text-white focus-visible:outline-green-900",
"dark:data-[state=active]:text-green-200 dark:focus-visible:outline-green-900",
"focus-visible:outline-2 focus-visible:outline-offset-2]"
]
}
},
{
color: "success",
variant: "link",
class: {
indicator: "bg-green-900 dark:dark:bg-green-300",
trigger: [
"focus-visible:ring-2 focus-visible:ring-inset",
"data-[state=active]:text-green-900 focus-visible:ring-green-900",
"dark:data-[state=active]:text-green-300 dark:focus-visible:ring-green-300"
]
}
},
// endregion ////
// region color.warning ////
{
color: "warning",
variant: "pill",
class: {
indicator: "bg-orange-900 dark:bg-orange-900",
trigger: [
"data-[state=active]:text-white focus-visible:outline-orange-900",
"dark:data-[state=active]:text-orange-200 dark:focus-visible:outline-orange-900",
"focus-visible:outline-2 focus-visible:outline-offset-2]"
]
}
},
{
color: "warning",
variant: "link",
class: {
indicator: "bg-orange-900 dark:dark:bg-orange-300",
trigger: [
"focus-visible:ring-2 focus-visible:ring-inset",
"data-[state=active]:text-orange-900 focus-visible:ring-orange-900",
"dark:data-[state=active]:text-orange-300 dark:focus-visible:ring-orange-300"
]
}
},
// endregion ////
// region color.primary ////
{
color: "primary",
variant: "pill",
class: {
indicator: "bg-blue-900 dark:bg-blue-900",
trigger: [
"data-[state=active]:text-white focus-visible:outline-blue-900",
"dark:data-[state=active]:text-blue-200 dark:focus-visible:outline-blue-900",
"focus-visible:outline-2 focus-visible:outline-offset-2]"
]
}
},
{
color: "primary",
variant: "link",
class: {
indicator: "bg-blue-900 dark:dark:bg-blue-300",
trigger: [
"focus-visible:ring-2 focus-visible:ring-inset",
"data-[state=active]:text-blue-900 focus-visible:ring-blue-900",
"dark:data-[state=active]:text-blue-300 dark:focus-visible:ring-blue-300"
]
}
},
// endregion ////
// region color.secondary ////
{
color: "secondary",
variant: "pill",
class: {
indicator: "bg-cyan-900 dark:bg-cyan-900",
trigger: [
"data-[state=active]:text-white focus-visible:outline-cyan-900",
"dark:data-[state=active]:text-cyan-200 dark:focus-visible:outline-cyan-900",
"focus-visible:outline-2 focus-visible:outline-offset-2]"
]
}
},
{
color: "secondary",
variant: "link",
class: {
indicator: "bg-cyan-900 dark:dark:bg-cyan-300",
trigger: [
"focus-visible:ring-2 focus-visible:ring-inset",
"data-[state=active]:text-cyan-900 focus-visible:ring-cyan-900",
"dark:data-[state=active]:text-cyan-300 dark:focus-visible:ring-cyan-300"
]
}
},
// endregion ////
// region color.collab ////
{
color: "collab",
variant: "pill",
class: {
indicator: "bg-collab-900 dark:bg-collab-900",
trigger: [
"data-[state=active]:text-white focus-visible:outline-collab-900",
"dark:data-[state=active]:text-collab-200 dark:focus-visible:outline-collab-900",
"focus-visible:outline-2 focus-visible:outline-offset-2]"
]
}
},
{
color: "collab",
variant: "link",
class: {
indicator: "bg-collab-900 dark:dark:bg-collab-300",
trigger: [
"focus-visible:ring-2 focus-visible:ring-inset",
"data-[state=active]:text-collab-900 focus-visible:ring-collab-900",
"dark:data-[state=active]:text-collab-300 dark:focus-visible:ring-collab-300"
]
}
},
// endregion ////
// region color.ai ////
{
color: "ai",
variant: "pill",
class: {
indicator: "bg-ai-900 dark:bg-ai-900",
trigger: [
"data-[state=active]:text-white focus-visible:outline-ai-900",
"dark:data-[state=active]:text-ai-200 dark:focus-visible:outline-ai-900",
"focus-visible:outline-2 focus-visible:outline-offset-2]"
]
}
},
{
color: "ai",
variant: "link",
class: {
indicator: "bg-ai-900 dark:dark:bg-ai-300",
trigger: [
"focus-visible:ring-2 focus-visible:ring-inset",
"data-[state=active]:text-ai-900 focus-visible:ring-ai-900",
"dark:data-[state=active]:text-ai-300 dark:focus-visible:ring-ai-300"
]
}
}
// endregion ////
// endregion ////
],
defaultVariants: {
color: "default",
variant: "link",
size: "md"
}
};
const textarea = {
slots: {
root: "isolate relative inline-flex items-center w-full",
base: [
"w-full px-3 py-1.5 border-0 focus:outline-none",
"disabled:cursor-not-allowed disabled:bg-base-30/37 disabled:resize-none disabled:text-base-500",
"dark:disabled:bg-base-900/37 dark:disabled:text-base-800",
"appearance-none transition duration-300 ease-linear",
// transition-colors
"ring ring-inset ring-base-300",
"dark:ring-base-800",
"text-base-master bg-white placeholder:text-base-400 hover:text-base-900 focus:text-base-900 active:text-base-900",
"dark:text-base-150 dark:bg-transparent dark:placeholder:text-base-300 dark:hover:text-base-350 dark:focus:text-base-350 dark:active:text-base-350",
"font-b24-primary font-regular text-md leading-normal",
"align-middle"
].join(" "),
leading: "absolute start-0 flex items-start inset-y-1.5 px-1.5",
leadingIcon: "shrink-0 text-base-400 inset-y-1.5 size-lg2",
leadingAvatar: "shrink-0",
leadingAvatarSize: "xs",
trailing: "absolute end-0 flex items-start inset-y-1.5 px-1.5",
trailingIcon: "shrink-0 text-base-400 size-lg2",
tag: [
"pointer-events-none select-none",
"absolute z-10 -top-1.5 right-3 h-sm px-1.5 flex flex-col justify-center items-center",
"font-b24-primary font-bold text-6xs leading-none uppercase rounded-full"
].join(" ")
},
variants: {
...buttonGroupVariantWithRoot,
autoresize: {
true: {
base: "resize-none"
}
},
color: {
default: "",
danger: "",
success: "",
warning: "",
primary: "",
secondary: "",
collab: "",
ai: ""
},
tagColor: {
default: {
tag: "text-white bg-base-900 dark:text-base-150 dark:bg-base-900"
},
danger: {
tag: "text-white bg-red-500 dark:text-red-250 dark:bg-red-600"
},
success: {
tag: "text-white bg-green-500 dark:text-green-250 dark:bg-green-600"
},
warning: {
tag: "text-white bg-orange-500 dark:text-orange-250 dark:bg-orange-600"
},
primary: {
tag: "text-white bg-blue-500 dark:text-blue-250 dark:bg-blue-600"
},
secondary: {
tag: "text-white bg-cyan-350 dark:text-base-150 dark:bg-cyan-500"
},
collab: {
tag: "text-white bg-collab-500 dark:text-collab-200 dark:bg-collab-800"
},
ai: {
tag: "text-white bg-ai-500 dark:text-ai-200 dark:bg-ai-800"
}
},
rounded: {
true: "rounded-3xl",
false: "rounded-2xs"
},
noPadding: {
true: {
base: "px-0"
}
},
noBorder: {
true: "ring-0 focus-visible:ring-0"
},
underline: {
true: "ring-0 focus-visible:ring-0 border-b border-b-base-300 rounded-none"
},
leading: {
true: ""
},
trailing: {
true: ""
},
loading: {
true: ""
},
highlight: {
true: ""
}
},
compoundVariants: [
// region ring for focus and highlight ////
// region default ////
{
color: "default",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-base-900 dark:focus-visible:ring-base-350"
},
{
color: "default",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-base-900 dark:ring-base-350"
},
{
color: "default",
noBorder: false,
underline: true,
class: "focus-visible:border-base-900 dark:focus-visible:border-b-base-350"
},
{
color: "default",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-base-900 dark:border-b-base-350"
},
// endregion ////
// region danger ////
{
color: "danger",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-red-500 dark:focus-visible:ring-red-600"
},
{
color: "danger",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-red-500 dark:ring-red-600"
},
{
color: "danger",
noBorder: false,
underline: true,
class: "focus-visible:border-b-red-500 dark:focus-visible:border-b-red-600"
},
{
color: "danger",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-red-500 dark:border-b-red-600"
},
// endregion ////
// region success ////
{
color: "success",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-green-500 dark:focus-visible:ring-green-600"
},
{
color: "success",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-green-500 dark:ring-green-600"
},
{
color: "success",
noBorder: false,
underline: true,
class: "focus-visible:border-b-green-500 dark:focus-visible:border-b-green-600"
},
{
color: "success",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-green-500 dark:border-b-green-600"
},
// endregion ////
// region warning ////
{
color: "warning",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-orange-500 dark:focus-visible:ring-orange-600"
},
{
color: "warning",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-orange-500 dark:ring-orange-600"
},
{
color: "warning",
noBorder: false,
underline: true,
class: "focus-visible:border-b-orange-500 dark:focus-visible:border-b-orange-600"
},
{
color: "warning",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-orange-500 dark:border-b-orange-600"
},
// endregion ////
// region primary ////
{
color: "primary",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-blue-500 dark:focus-visible:ring-blue-600"
},
{
color: "primary",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-blue-500 dark:ring-blue-600"
},
{
color: "primary",
noBorder: false,
underline: true,
class: "focus-visible:border-b-blue-500 dark:focus-visible:border-b-blue-600"
},
{
color: "primary",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-blue-500 dark:border-b-blue-600"
},
// endregion ////
// region secondary ////
{
color: "secondary",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-cyan-350 dark:focus-visible:ring-cyan-500"
},
{
color: "secondary",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-cyan-350 dark:ring-cyan-500"
},
{
color: "secondary",
noBorder: false,
underline: true,
class: "focus-visible:border-b-cyan-350 dark:focus-visible:border-b-cyan-500"
},
{
color: "secondary",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-cyan-350 dark:border-b-cyan-500"
},
// endregion ////
// region collab ////
{
color: "collab",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-collab-500 dark:focus-visible:ring-collab-600"
},
{
color: "collab",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-collab-500 dark:ring-collab-600"
},
{
color: "collab",
noBorder: false,
underline: true,
class: "focus-visible:border-b-collab-500 dark:focus-visible:border-b-collab-600"
},
{
color: "collab",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-collab-500 dark:border-b-collab-600"
},
// endregion ////
// region ai ////
{
color: "ai",
noBorder: false,
underline: false,
class: "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ai-500 dark:focus-visible:ring-ai-600"
},
{
color: "ai",
highlight: true,
noBorder: false,
underline: false,
class: "ring ring-inset ring-ai-500 dark:ring-ai-600"
},
{
color: "ai",
noBorder: false,
underline: true,
class: "focus-visible:border-b-ai-500 dark:focus-visible:border-b-ai-600"
},
{
color: "ai",
highlight: true,
noBorder: false,
underline: true,
class: "border-b-ai-500 dark:border-b-ai-600"
},
// endregion ////
// endregion ////
// region leading ////
{
leading: true,
class: "ps-8"
},
// endregion ////
// region trailing ////
{
trailing: true,
class: "pe-8"
},
// endregion ////
// region loading ////
{
loading: true,
leading: true,
class: {
leadingIcon: "size-[21px]"
}
},
{
loading: true,
leading: false,
trailing: true,
class: {
trailingIcon: "size-[21px]"
}
}
// endregion ////
],
defaultVariants: {
color: "primary",
tagColor: "primary"
}
};
const toast = {
slots: {
root: [
"relative group overflow-hidden rounded-[26px] py-3.5 ps-6 pe-4 flex items-center gap-2.5 focus:outline-none",
"font-b24-primary",
"dark:ring-2 dark:ring-base-900",
"bg-base-ebony/80 dark:bg-base-dark",
"text-sm font-normal",
"text-white dark:text-base-150"
].join(" "),
wrapper: "w-0 flex-1 flex flex-col",
title: "font-medium",
description: "",
icon: "shrink-0 size-6",
avatar: "shrink-0",
avatarSize: "xl",
actions: "flex gap-1.5 shrink-0",
progress: "absolute inset-x-0 bottom-0 h-1 z-[-1]",
close: "p-0 text-base-350 dark:text-base-350 hover:text-base-400 dark:hover:text-base-400"
},
variants: {
color: {
default: {
root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-base-400 dark:focus-visible:ring-base-400",
icon: "text-white",
progress: "bg-base-350 dark:bg-base-350"
},
danger: {
root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-400 dark:focus-visible:ring-red-400",
icon: "text-red-500",
progress: "bg-red-500 dark:bg-red-500"
},
success: {
root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-green-400 dark:focus-visible:ring-green-400",
icon: "text-green-500",
progress: "bg-green-500 dark:bg-green-500"
},
warning: {
root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-orange-400 dark:focus-visible:ring-orange-400",
icon: "text-orange-500",
progress: "bg-orange-500 dark:bg-orange-500"
},
primary: {
root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-400 dark:focus-visible:ring-blue-400",
icon: "text-blue-500",
progress: "bg-blue-500 dark:bg-blue-500"
},
secondary: {
root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-cyan-400 dark:focus-visible:ring-cyan-400",
icon: "text-cyan-500",
progress: "bg-cyan-500 dark:bg-cyan-500"
},
collab: {
root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-collab-400 dark:focus-visible:ring-collab-400",
icon: "text-collab-500",
progress: "bg-collab-500 dark:bg-collab-500"
},
ai: {
root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ai-400 dark:focus-visible:ring-ai-400",
icon: "text-ai-500",
progress: "bg-ai-500 dark:bg-ai-500"
}
},
orientation: {
horizontal: {
root: "items-center",
actions: "items-center"
},
vertical: {
root: "items-center",
actions: "items-start mt-1"
}
},
title: {
true: {
description: "mt-1"
}
}
},
defaultVariants: {
color: "default"
}
};
const toaster = {
slots: {
viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none mr-(--scrollbar-width)",
base: "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
},
variants: {
position: {
"top-left": {
viewport: "left-4"
},
"top-center": {
viewport: "left-1/2 transform -translate-x-1/2"
},
"top-right": {
viewport: "right-4"
},
"bottom-left": {
viewport: "left-4"
},
"bottom-center": {
viewport: "left-1/2 transform -translate-x-1/2"
},
"bottom-right": {
viewport: "right-4"
}
},
swipeDirection: {
up: "data-[swipe=end]:animate-[toast-slide-up_200ms_ease-out]",
right: "data-[swipe=end]:animate-[toast-slide-right_200ms_ease-out]",
down: "data-[swipe=end]:animate-[toast-slide-down_200ms_ease-out]",
left: "data-[swipe=end]:animate-[toast-slide-left_200ms_ease-out]"
}
},
compoundVariants: [
{
position: [
"top-left",
"top-center",
"top-right"
],
class: {
viewport: "top-4",
base: "top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out]"
}
},
{
position: [
"bottom-left",
"bottom-center",
"bottom-right"
],
class: {
viewport: "bottom-4",
base: "bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out]"
}
},
{
swipeDirection: [
"left",
"right"
],
class: "data-[swipe=move]:translate-x-(--reka-toast-swipe-move-x) data-[swipe=end]:translate-x-(--reka-toast-swipe-end-x) data-[swipe=cancel]:translate-x-0"
},
{
swipeDirection: [
"up",
"down"
],
class: "data-[swipe=move]:translate-y-(--reka-toast-swipe-move-y) data-[swipe=end]:translate-y-(--reka-toast-swipe-end-y) data-[swipe=cancel]:translate-y-0"
}
],
defaultVariants: {
position: "top-right"
}
};
const tooltip = {
slots: {
content: [
"flex items-center gap-1 shadow-sm rounded-2xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
"min-h-6 px-2.5 py-1 text-xs",
"bg-base-dark text-white",
"dark:bg-base-dark dark:text-base-150 dark:ring dark:ring-base-100/20",
"origin-(--reka-tooltip-content-transform-origin)",
"pointer-events-auto"
].join(" "),
arrow: "fill-base-dark dark:fill-base-100/20",
text: "text-pretty max-w-[200px]",
// truncate
kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-[''] before:me-0.5`,
kbdsSize: "sm",
kbdsDepth: "normal"
}
};
const sidebarLayout = {
slots: {
root: [
"min-h-svh w-full",
"flex max-lg:flex-col",
"relative isolate"
].join(" "),
sidebar: [
"w-[240px]",
"pr-[3px]",
"fixed inset-y-0 left-0",
"max-lg:hidden"
].join(" "),
sidebarSlideoverContainer: [
"max-w-80",
"p-2",
"bg-transparent dark:bg-transparent sm:shadow-none"
].join(" "),
sidebarSlideover: [
"h-full",
"overflow-hidden",
"flex flex-col",
"bg-white dark:bg-base-dark",
"ring-1 ring-base-950/5 dark:ring-white/10",
"shadow-xs",
"rounded-lg"
].join(" "),
sidebarSlideoverBtnClose: [
"-mb-3",
"px-4 pt-3"
].join(" "),
header: [
"px-4",
"flex items-center",
"lg:hidden"
].join(" "),
headerMenuIcon: "",
headerPaddings: [
"py-2.5"
].join(" "),
headerWrapper: [
"min-w-0",
"flex-1"
].join(" "),
container: [
"flex-1 flex flex-col",
"lg:min-w-0"
].join(" "),
containerWrapper: [
"grow"
].join(" "),
containerWrapperInner: ""
},
variants: {
useSidebar: {
true: {
container: "lg:pl-[240px]"
},
false: {
container: "pb-2 lg:pt-2 lg:px-2"
}
},
useLightContent: {
true: {
root: [
"bg-white dark:bg-white/10",
"lg:bg-base-50 dark:lg:bg-base-dark edge-dark:lg:bg-transparent"
].join(" "),
container: [
"pb-2 lg:pt-2 lg:pr-2"
].join(" "),
containerWrapper: [
"p-6 lg:p-10",
"lg:bg-white dark:lg:bg-white/10",
"lg:ring-1 lg:ring-base-950/5 dark:lg:ring-white/10",
"lg:shadow-xs",
"lg:rounded-lg"
].join(" ")
},
false: {
container: [
"px-4"
].join(" ")
}
}
},
compoundVariants: [],
defaultVariants: {
useLightContent: true
}
};
const stackedLayout = {
slots: {
root: [
"min-h-svh w-full",
"flex flex-col",
"lg:px-2",
"relative isolate"
].join(" "),
sidebarSlideoverContainer: [
"max-w-80",
"p-2",
"bg-transparent dark:bg-transparent sm:shadow-none"
].join(" "),
sidebarSlideover: [
"h-full",
"overflow-hidden",
"flex flex-col",
"bg-white dark:bg-base-dark",
"ring-1 ring-base-950/5 dark:ring-white/10",
"shadow-xs",
"rounded-lg"
].join(" "),
sidebarSlideoverBtnClose: [
"-mb-3",
"px-4 pt-3"
].join(" "),
header: [
"px-4",
"flex items-center",
/**
* @memo this sync with NavigationMenu
*/
"h-[84px]"
].join(" "),
headerMenuIcon: [
"lg:hidden"
].join(" "),
headerPaddings: [
"py-2.5"
].join(" "),
headerWrapper: [
"min-w-0",
"flex-1"
].join(" "),
container: [
"flex-1 flex flex-col",
"lg:min-w-0",
"pb-2"
].join(" "),
containerWrapper: [
"grow"
].join(" "),
containerWrapperInner: ""
},
variants: {
useSidebar: {
true: "",
false: ""
},
useLightContent: {
true: {
root: [
"bg-white dark:bg-white/10",
"lg:bg-base-50 dark:lg:bg-base-dark"
].join(" "),
containerWrapper: [
"p-6 lg:p-10",
"lg:bg-white dark:lg:bg-white/10",
"lg:ring-1 lg:ring-base-950/5 dark:lg:ring-white/10",
"lg:shadow-xs",
"lg:rounded-lg"
].join(" ")
},
false: {
container: [
"px-4"
].join(" ")
}
}
},
compoundVariants: [],
defaultVariants: {
useLightContent: true
}
};
const sidebar = {
slots: {
root: [
"h-full min-h-0",
"flex flex-col"
].join(" ")
}
};
const sidebarHeader = {
slots: {
root: [
"py-4",
"flex flex-col",
// 'border-b border-base-950/5 dark:border-white/5',
"[&>[data-slot=section]+[data-slot=section]]:mt-2.5"
].join(" ")
}
};
const sidebarBody = {
slots: {
root: [
"py-4",
"flex flex-1 flex-col",
"overflow-y-auto",
"[&>[data-slot=section]+[data-slot=section]]:mt-8"
].join(" ")
},
variants: {
scrollbarThin: {
true: {
root: "scrollbar-thin scrollbar-transparent"
}
}
},
defaultVariants: {
scrollbarThin: true
}
};
const sidebarFooter = {
slots: {
root: [
"py-4",
"flex flex-col",
"max-lg:hidden",
// 'border-t border-base-950/5 dark:border-white/5',
"[&>[data-slot=section]+[data-slot=section]]:mt-2.5"
].join(" ")
}
};
const sidebarSection = {
slots: {
root: [
"ps-2xl pe-xs",
"flex flex-col gap-0.5"
].join(" ")
}
};
const sidebarHeading = {
slots: {
root: [
"mb-1",
"text-xs/6 font-medium ",
"text-base-500 dark:text-base-400"
].join(" ")
}
};
const sidebarSpacer = {
slots: {
root: [
"mt-8",
"flex-1"
].join(" ")
}
};
const navbar = {
slots: {
root: [
"py-2.5",
"flex-1",
"flex items-center gap-4"
].join(" ")
}
};
const navbarSection = {
slots: {
root: [
"flex items-center gap-3"
].join(" ")
}
};
const navbarDivider = {
slots: {
root: [
"h-6 w-px",
"bg-base-950/10 dark:bg-base-100/20"
].join(" ")
}
};
const navbarSpacer = {
slots: {
root: [
"-ml-4",
"flex-1"
].join(" ")
}
};
const theme = {
__proto__: null,
accordion: accordion,
advice: advice,
alert: alert,
avatar: avatar,
avatarGroup: avatarGroup,
badge: badge,
button: button,
buttonGroup: buttonGroup,
calendar: calendar,
checkbox: checkbox,
chip: chip,
collapsible: collapsible,
container: container,
countdown: countdown,
descriptionList: descriptionList,
dropdownMenu: dropdownMenu,
form: form,
formField: formField,
input: input,
inputMenu: inputMenu,
inputNumber: inputNumber,
kbd: kbd,
link: link,
modal: modal,
navbar: navbar,
navbarDivider: navbarDivider,
navbarSection: navbarSection,
navbarSpacer: navbarSpacer,
navigationMenu: navigationMenu,
popover: popover,
progress: progress,
radioGroup: radioGroup,
range: range,
select: select,
selectMenu: selectMenu,
separator: separator,
sidebar: sidebar,
sidebarBody: sidebarBody,
sidebarFooter: sidebarFooter,
sidebarHeader: sidebarHeader,
sidebarHeading: sidebarHeading,
sidebarLayout: sidebarLayout,
sidebarSection: sidebarSection,
sidebarSpacer: sidebarSpacer,
skeleton: skeleton,
slideover: slideover,
stackedLayout: stackedLayout,
switch: _switch,
tabs: tabs,
textarea: textarea,
toast: toast,
toaster: toaster,
tooltip: tooltip
};
const h1 = {
slots: {
base: [
"mb-2",
"text-base-master dark:text-base-150",
"scroll-mt-[calc(45px+var(--b24ui-header-height))] lg:scroll-mt-(--b24ui-header-height)",
"text-h1"
].join(" "),
link: "inline-flex items-center gap-2"
}
};
const h2 = {
slots: {
base: [
"relative mb-2",
"[&>a>code]:text-xl/7 [&>a>code]:font-bold",
"text-base-master dark:text-base-150",
"scroll-mt-[calc(48px+45px+var(--b24ui-header-height))] lg:scroll-mt-[calc(48px+var(--b24ui-header-height))]",
"[&>a]:focus-visible:outline-info-text hover:[&>a>code]:border-info-text",
"hover:[&>a>code]:text-info-text",
"[&>a>code]:border-dashed [&>a>code]:transition-colors",
"text-h2"
].join(" "),
leading: [
"absolute -ms-8 top-1 p-1",
"rounded-md hidden lg:flex",
"opacity-0 group-hover:opacity-100 group-focus:opacity-100",
"bg-base-100 dark:bg-base-900",
"text-base-500 dark:text-base-600",
"hover:text-outline-info-text",
"transition"
],
leadingIcon: "size-4 shrink-0",
link: "group lg:ps-2 lg:-ms-2"
}
};
const h3 = {
slots: {
base: [
"relative mb-2",
"[&>a>code]:text-lg/7 [&>a>code]:font-bold",
"text-base-master dark:text-base-150",
"scroll-mt-[calc(32px+45px+var(--b24ui-header-height))] lg:scroll-mt-[calc(32px+var(--b24ui-header-height))]",
"[&>a]:focus-visible:outline-info-text hover:[&>a>code]:border-info-text",
"hover:[&>a>code]:text-info-text",
"[&>a>code]:border-dashed [&>a>code]:transition-colors",
"text-h3"
].join(" "),
leading: [
"absolute -ms-8 top-0.5 p-1",
"rounded-md hidden lg:flex",
"opacity-0 group-hover:opacity-100 group-focus:opacity-100",
"bg-base-100 dark:bg-base-900",
"text-base-500 dark:text-base-600",
"hover:text-outline-info-text",
"transition"
],
leadingIcon: "size-4 shrink-0",
link: "group lg:ps-2 lg:-ms-2"
}
};
const h4 = {
slots: {
base: [
"relative mb-2",
"[&>a>code]:text-lg/7 [&>a>code]:font-bold",
"text-base-master dark:text-base-150",
"scroll-mt-[calc(32px+45px+var(--b24ui-header-height))] lg:scroll-mt-[calc(32px+var(--b24ui-header-height))]",
"[&>a]:focus-visible:outline-info-text hover:[&>a>code]:border-info-text",
"hover:[&>a>code]:text-info-text",
"[&>a>code]:border-dashed [&>a>code]:transition-colors",
"text-h4"
].join(" "),
leading: [
"absolute -ms-8 top-0.5 p-1",
"rounded-md hidden lg:flex",
"opacity-0 group-hover:opacity-100 group-focus:opacity-100",
"bg-base-100 dark:bg-base-900",
"text-base-500 dark:text-base-600",
"hover:text-outline-info-text",
"transition"
],
leadingIcon: "size-4 shrink-0",
link: "group lg:ps-2 lg:-ms-2"
}
};
const h5 = {
slots: {
base: [
"relative mb-2",
"[&>a>code]:text-lg/7 [&>a>code]:font-bold",
"text-base-master dark:text-base-150",
"scroll-mt-[calc(32px+45px+var(--b24ui-header-height))] lg:scroll-mt-[calc(32px+var(--b24ui-header-height))]",
"[&>a]:focus-visible:outline-info-text hover:[&>a>code]:border-info-text",
"hover:[&>a>code]:text-info-text",
"[&>a>code]:border-dashed [&>a>code]:transition-colors",
"text-h5"
].join(" "),
leading: [
"absolute -ms-8 top-0.5 p-1",
"rounded-md hidden lg:flex",
"opacity-0 group-hover:opacity-100 group-focus:opacity-100",
"bg-base-100 dark:bg-base-900",
"text-base-500 dark:text-base-600",
"hover:text-outline-info-text",
"transition"
],
leadingIcon: "size-4 shrink-0",
link: "group lg:ps-2 lg:-ms-2"
}
};
const h6 = {
slots: {
base: [
"relative mb-2",
"[&>a>code]:text-lg/7 [&>a>code]:font-bold",
"text-base-master dark:text-base-150",
"scroll-mt-[calc(32px+45px+var(--b24ui-header-height))] lg:scroll-mt-[calc(32px+var(--b24ui-header-height))]",
"[&>a]:focus-visible:outline-info-text hover:[&>a>code]:border-info-text",
"hover:[&>a>code]:text-info-text",
"[&>a>code]:border-dashed [&>a>code]:transition-colors",
"text-h6"
].join(" "),
leading: [
"absolute -ms-8 top-0.5 p-1",
"rounded-md hidden lg:flex",
"opacity-0 group-hover:opacity-100 group-focus:opacity-100",
"bg-base-100 dark:bg-base-900",
"text-base-500 dark:text-base-600",
"hover:text-outline-info-text",
"transition"
],
leadingIcon: "size-4 shrink-0",
link: "group lg:ps-2 lg:-ms-2"
}
};
const p = {
slots: {
base: [
"mb-2",
"leading-relaxed",
"text-pretty"
].join(" ")
}
};
const a = {
slots: {
base: [
"cursor-pointer",
"text-blue-700 dark:text-blue-300",
"hover:underline underline-offset-2",
"focus-visible:outline-info-text",
"transition-colors [&>code]:transition-colors",
"[&>code]:ring-dashed",
"hover:[&>code]:text-blue-700 hover:[&>code]:bg-blue-250 hover:[&>code]:ring-blue-250",
"dark:hover:[&>code]:text-blue-700 dark:hover:[&>code]:bg-blue-250 dark:hover:[&>code]:ring-blue-250"
].join(" ")
}
};
const blockquote = {
slots: {
base: "mb-2 border-s-4 border-blue-500 dark:border-blue-600 ps-4 italic"
}
};
const strong = {
slots: {
base: ""
}
};
const em = {
slots: {
base: ""
}
};
const ol = {
slots: {
base: [
"list-decimal",
"ps-2 mb-2 ms-3",
"marker:text-base-master dark:marker:text-base-150"
].join(" ")
}
};
const ul = {
slots: {
base: [
"list-disc",
"ps-2 mb-2 ms-3",
"marker:text-base-master dark:marker:text-base-150"
].join(" ")
}
};
const li = {
slots: {
base: [
"my-1.5 ps-1.5",
"leading-relaxed",
"[&>ul]:my-0 [&>ol]:my-0"
].join(" ")
}
};
const hr = {
slots: {
base: [
"my-4",
"border-t border-base-master/10 dark:border-base-100/20"
].join(" ")
}
};
const table = {
slots: {
root: [
"my-4",
"overflow-x-auto"
].join(" "),
base: ""
}
};
const thead = {
slots: {
base: [
"bg-base-50",
"dark:bg-base-600"
].join(" ")
}
};
const tbody = {
slots: {
base: ""
}
};
const tr = {
slots: {
base: ""
}
};
const th = {
slots: {
base: ""
}
};
const td = {
slots: {
base: [
"[&_code]:text-xs/5",
"[&_p]:my-0 [&_p]:leading-6",
"[&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5",
"[&_li]:leading-6 [&_li]:my-0.5"
].join(" ")
}
};
const img = {
slots: {
base: ""
}
};
const code = {
slots: {
base: [
"px-1.5 py-0.5",
"font-b24-system-mono font-medium text-sm leading-normal",
"rounded-md",
"inline-block"
].join(" ")
},
variants: {
color: {
default: [
"ring ring-inset",
"text-base-800 bg-base-150 ring-base-300",
"dark:text-base-950 dark:bg-base-200 dark:ring-base-800"
].join(" "),
danger: [
"ring ring-inset",
"text-red-800 bg-red-250 ring-red-250",
"dark:text-red-800 dark:bg-red-350 dark:ring-red-350"
].join(" "),
success: [
"ring ring-inset",
"text-green-800 bg-green-300 ring-green-300",
"dark:text-green-800 dark:bg-green-330 dark:ring-green-330"
].join(" "),
warning: [
"ring ring-inset",
"text-orange-800 bg-orange-300 ring-orange-300",
"dark:text-orange-800 dark:bg-orange-400 dark:ring-orange-400"
].join(" "),
primary: [
"ring ring-inset",
"text-blue-700 bg-blue-250 ring-blue-250",
"dark:text-blue-700 dark:bg-blue-300 dark:ring-blue-300"
].join(" "),
secondary: [
"ring ring-inset",
"text-white bg-cyan-350 ring-cyan-350",
"dark:text-cyan-100 dark:bg-cyan-400 dark:ring-cyan-400"
].join(" "),
collab: [
"ring ring-inset",
"text-collab-800 bg-collab-300 ring-collab-300",
"dark:text-collab-800 dark:bg-collab-300 dark:ring-collab-300"
].join(" "),
ai: [
"ring ring-inset",
"text-ai-500 bg-ai-150 ring-ai-150",
"dark:text-ai-600 dark:bg-ai-200 dark:ring-ai-200"
].join(" ")
}
},
defaultVariants: {
color: "default"
}
};
const pre = {
slots: {
root: [
"my-4 p-4",
"font-b24-system-mono font-semibold text-sm leading-4",
"bg-black",
"overflow-auto rounded w-full",
"text-pretty"
].join(" "),
base: [
"text-green-350"
].join(" ")
}
};
const themeProse = {
__proto__: null,
a: a,
blockquote: blockquote,
code: code,
em: em,
h1: h1,
h2: h2,
h3: h3,
h4: h4,
h5: h5,
h6: h6,
hr: hr,
img: img,
li: li,
ol: ol,
p: p,
pre: pre,
strong: strong,
table: table,
tbody: tbody,
td: td,
th: th,
thead: thead,
tr: tr,
ul: ul
};
const variantTable = "[&>table]";
const variantHeadTr = "[&>table>thead>tr]";
const variantBodyTr = "[&>table>tbody>tr]";
const variantFoot = "[&>table>tfoot]";
const variantFootTr = "[&>table>tfoot>tr]";
const variantsTr = [
variantHeadTr,
variantBodyTr,
variantFootTr
];
const variantsTdTh = [
"[&>table>thead>tr>td]",
"[&>table>thead>tr>th]",
"[&>table>tbody>tr>td]",
"[&>table>tbody>tr>th]",
"[&>table>tfoot>tr>td]",
"[&>table>tfoot>tr>th]"
];
const tableWrapper = {
slots: {
base: [
`font-b24-primary ${variantTable}:text-md ${variantTable}:relative ${variantTable}:w-full ${variantTable}:text-left ${variantTable}:rtl:text-right`,
`${variantTable}:text-base-900 dark:${variantTable}:text-base-200`,
...variantsTdTh.map((variant) => `${variant}:align-middle`),
...variantsTdTh.filter((variant) => !variant.includes("tbody>tr>td")).map((variant) => `${variant}:whitespace-nowrap ${variant}:text-md ${variant}:font-normal`),
`${variantHeadTr}:border-base-300 dark:${variantHeadTr}:border-base-800`,
`${variantBodyTr}:border-base-master/10 dark:${variantBodyTr}:border-base-100/20`,
`${variantFoot}:border-base-300 dark:${variantFoot}:border-base-800`,
`${variantHeadTr}:border-b ${variantBodyTr.replace(">tr]", ">tr:not(:last-child)]")}:border-b`,
`${variantFoot}:border-t`
].join(" ")
},
variants: {
size: {
xs: [
...variantsTdTh.map((variant) => `${variant}:text-xs ${variant}:px-2 ${variant}:py-1`)
].join(" "),
sm: [
...variantsTdTh.map((variant) => `${variant}:text-sm ${variant}:px-3 ${variant}:py-2`)
].join(" "),
md: [
...variantsTdTh.map((variant) => `${variant}:text-md ${variant}:px-4 ${variant}:py-3.5`)
].join(" "),
lg: [
...variantsTdTh.map((variant) => `${variant}:text-lg ${variant}:px-5 ${variant}:py-4`)
].join(" ")
},
rounded: {
true: "rounded-md",
false: ""
},
zebra: {
true: [
...variantsTr.filter((variant) => variant === variantBodyTr).map((variant) => `${variant}:even:bg-base-30 ${variant}:even:[&>td]:bg-base-30 ${variant}:even:[&>th]:bg-base-30 dark:${variant}:even:bg-base-dark dark:${variant}:even:[&>td]:bg-base-dark dark:${variant}:even:[&>th]:bg-base-dark`)
].join(" ")
},
pinRows: {
true: [
...variantsTr.filter((variant) => variant !== variantBodyTr).map((variant) => `${variant}:sticky ${variant}:${variant === variantHeadTr ? "top-0" : "bottom-0"} ${variant}:z-1 ${variant}:bg-white dark:${variant}:bg-base-dark ${variant}:${variant === variantHeadTr ? "shadow-bottom-sm" : "shadow-top-sm"}`)
].join(" ")
},
pinCols: {
true: [
...variantsTr.map((row) => {
const variant = row.replace(">tr]", ">tr>th]");
return `${variant}:sticky ${variant}:right-0 ${variant}:left-0 ${variant}:bg-base-20 dark:${variant}:bg-base-dark`;
})
].join(" ")
},
rowHover: {
true: `${variantBodyTr}:hover:bg-base-40 ${variantBodyTr}:hover:[&>td]:bg-base-40 ${variantBodyTr}:hover:[&>th]:bg-base-40 dark:${variantBodyTr}:hover:bg-base-900 dark:${variantBodyTr}:hover:[&>td]:bg-base-900 dark:${variantBodyTr}:hover:[&>th]:bg-base-900`
},
bordered: {
true: "border border-base-master/10 dark:border-base-800"
},
scrollbarThin: {
true: "scrollbar-thin"
}
},
defaultVariants: {
size: "md",
scrollbarThin: true
}
};
const themeContent = {
__proto__: null,
tableWrapper: tableWrapper
};
function replaceBrackets(value) {
return value.replace(/\[\[/g, "<").replace(/\]\]/g, ">");
}
function getTemplates(options) {
const templates = [];
function generateVariantDeclarations(variants, result, json) {
return variants.filter((variant) => json.includes(`as typeof ${variant}`)).map((variant) => {
const keys = Object.keys(result.variants[variant]);
return `const ${variant} = ${JSON.stringify(keys, null, 2)} as const`;
});
}
for (const component in theme) {
templates.push({
filename: `b24ui/${kebabCase(component)}.ts`,
write: true,
getContents: async () => {
const template = theme[component];
const result = typeof template === "function" ? template(options) : template;
const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
const keys = Object.keys(values);
return keys.some((key) => key !== "true" && key !== "false");
}).map(([key]) => key);
let json = JSON.stringify(result, null, 2);
for (const variant of variants) {
json = json.replace(new RegExp(`("${variant}": "[^"]+")`, "g"), `$1 as typeof ${variant}[number]`);
json = json.replace(new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, "g"), (_, before, match, after) => {
const replaced = match.replace(/("[^"]+")/g, `$1 as typeof ${variant}[number]`);
return `${before}${replaced}${after}`;
});
}
return [
...generateVariantDeclarations(variants, result, json),
`export default ${json}`
].join("\n\n");
}
});
}
for (const component in themeProse) {
templates.push({
filename: `b24ui/prose/${kebabCase(component)}.ts`,
write: true,
getContents: async () => {
const template = themeProse[component];
const result = typeof template === "function" ? template(options) : template;
const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
const keys = Object.keys(values);
return keys.some((key) => key !== "true" && key !== "false");
}).map(([key]) => key);
let json = JSON.stringify(result, null, 2);
for (const variant of variants) {
json = json.replace(new RegExp(`("${variant}": "[^"]+")`, "g"), `$1 as typeof ${variant}[number]`);
json = json.replace(new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, "g"), (_, before, match, after) => {
const replaced = match.replace(/("[^"]+")/g, `$1 as typeof ${variant}[number]`);
return `${before}${replaced}${after}`;
});
}
return [
...generateVariantDeclarations(variants, result, json),
`export default ${json}`
].join("\n\n");
}
});
}
for (const component in themeContent) {
templates.push({
filename: `b24ui/content/${kebabCase(component)}.ts`,
write: true,
getContents: async () => {
const template = themeContent[component];
const result = typeof template === "function" ? template(options) : template;
const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
const keys = Object.keys(values);
return keys.some((key) => key !== "true" && key !== "false");
}).map(([key]) => key);
let json = JSON.stringify(result, null, 2);
for (const variant of variants) {
json = json.replace(new RegExp(`("${variant}": "[^"]+")`, "g"), `$1 as typeof ${variant}[number]`);
json = json.replace(new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, "g"), (_, before, match, after) => {
const replaced = match.replace(/("[^"]+")/g, `$1 as typeof ${variant}[number]`);
return `${before}${replaced}${after}`;
});
}
return [
...generateVariantDeclarations(variants, result, json),
`export default ${json}`
].join("\n\n");
}
});
}
templates.push({
filename: "b24ui.css",
write: true,
getContents: () => `@source "./b24ui";
@theme default inline {}
`
});
templates.push({
filename: "b24ui/index.ts",
write: true,
getContents: () => Object.keys(theme).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n")
});
templates.push({
filename: "types/b24ui.d.ts",
getContents: () => replaceBrackets(`import * as b24ui from '#build/b24ui'
import type { TVConfig } from '@bitrix24/b24ui-nuxt'
import type { defaultConfig } from 'tailwind-variants'
type AppConfigUI = {
tv?: typeof defaultConfig
} & TVConfig<typeof b24ui>
declare module '@nuxt/schema' {
interface AppConfigInput {
/**
* Bitrix24 UI theme configuration
*/
b24ui?: AppConfigUI
}
}
export {}
`)
});
templates.push({
filename: "b24ui-image-component.ts",
write: true,
getContents: ({ app }) => {
const image = app?.components?.find((c) => c.pascalName === "NuxtImg" && !/nuxt(?:-nightly)?\/dist\/app/.test(c.filePath));
return image ? genExport(image.filePath, [{ name: image.export, as: "default" }]) : 'export default "img"';
}
});
return templates;
}
function addTemplates(options, nuxt, resolve) {
const templates = getTemplates(options);
for (const template of templates) {
if (template.filename.endsWith(".d.ts")) {
addTypeTemplate(template);
} else {
addTemplate(template);
}
}
nuxt.hook("prepare:types", ({ references }) => {
references.push({ path: resolve("./runtime/types/app.config.d.ts") });
});
}
export { getDefaultUiConfig as a, addTemplates as b, defaultOptions as d, getTemplates as g };