@bitrix24/b24ui-nuxt
Version:
Bitrix24 UI-Kit for developing web applications REST API for NUXT & VUE
1,516 lines (1,505 loc) • 232 kB
JavaScript
import 'node:url';
import { kebabCase } from 'scule';
import { addTypeTemplate, addTemplate } from '@nuxt/kit';
import { defuFn, defu } from 'defu';
const getDefaultUiConfig = () => ({});
const defaultOptions = {
colorMode: true
};
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 overflow-hidden 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"
].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"
].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",
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",
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-2xs"
},
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]"
}
}
},
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 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", "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",
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(" "),
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"
},
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: [
{
color: "default",
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",
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",
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",
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",
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",
checked: true,
class: "ring-2 ring-cyan-350 bg-cyan-350 dark:ring-cyan-500 dark:bg-cyan-500"
},
{
color: "collab",
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",
checked: true,
class: "ring-2 ring-ai-500 bg-ai-500 dark:ring-ai-600 dark:bg-ai-600 dark:text-ai-250"
}
],
defaultVariants: {
size: "md",
color: "primary"
}
};
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-