@una-ui/preset/dist/shared/preset.21f-DOMW.mjs

The default preset for @una-ui

import { parseColor } from '@unocss/preset-mini/utils';
import { parseColor as parseColor$1 } from '@unocss/preset-mini';

const staticAccordion = {
  // config
  "accordion-trailing-icon": "i-lucide-chevron-up",
  "accordion-button-padding": "p-(x-3 y-4)",
  "accordion-button-default-variant": "btn-text",
  "accordion-divider": "divide-(y border)",
  "accordion-border": "border-(~ border) rounded-md",
  // base
  "accordion": "flex-(~ col) relative w-full",
  "accordion-item": "w-full",
  "accordion-button": "justify-start",
  "accordion-panel": "text-(muted-foreground 0.875em) border-(t border) accordion-button-padding",
  "accordion-leading": "text-1.2em",
  "accordion-trailing": "flex transition items-center text-1em duration-300",
  "accordion-label": "flex w-full text-1em",
  // trailing transition
  "accordion-trailing-open": "-rotate-180",
  "accordion-trailing-close": "rotate-0",
  // panel transition
  "accordion-enter-active": "overflow-hidden transition-height duration-300",
  "accordion-leave-active": "overflow-hidden transition-height duration-300"
};
const dynamicAccordion = [];
const accordion = [
  ...dynamicAccordion,
  staticAccordion
];

const staticAlert = {
  // config
  "alert-info-icon": "i-lucide-info",
  "alert-error-icon": "i-lucide-circle-alert",
  "alert-success-icon": "i-lucide-circle-check",
  "alert-warning-icon": "i-lucide-triangle-alert",
  "alert-close-icon": "i-lucide-x",
  // base
  "alert": "rounded-lg relative grid grid-cols-[0_1fr] w-full items-start gap-y-0.14285714285714285em px-4 py-3 text-0.875em leading-1.4285714285714286em has-[>span[icon-base]]:grid-cols-[calc(var(--spacing)*4)_1fr] [&>span[icon-base]]:translate-y-0.5 has-[>span[icon-base]]:gap-x-0.8571428571428571em [&>span[icon-base]]:text-current [&>span[icon-base]]:square-1.1428571428571428em",
  "alert-title": "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
  "alert-description": "text-muted-foreground col-start-2 grid justify-items-start gap-0.017857142857142856em text-0.875em leading-1.4285714285714286em [&_p]:leading-relaxed",
  "alert-close-wrapper": "absolute right-3 top-3",
  // static variants
  "alert-solid-primary": ' bg-primary text-primary-foreground [&_[data-slot="alert-description"]]:text-primary-foreground/90',
  "alert-solid-gray": ' bg-secondary border text-secondary-foreground [&_[data-slot="alert-description"]]:text-secondary-foreground/90',
  "alert-solid-white": ' border text-foreground bg-background [&_[data-slot="alert-description"]]:text-foreground',
  "alert-solid-black": ' text-background bg-foreground [&_[data-slot="alert-description"]]:text-background',
  "alert-soft-gray": ' border bg-card text-card-foreground [&_[data-slot="alert-description"]]:text-card-foreground/90',
  "alert-soft-primary": ' bg-primary/10 text-primary [&_[data-slot="alert-description"]]:text-primary/90',
  "alert-outline-gray": ' bg-background border text-card-foreground [&_[data-slot="alert-description"]]:text-card-foreground/90',
  "alert-outline-primary": 'bg-background border border-primary/90 text-primary [&_[data-slot="alert-description"]]:text-primary/90',
  "alert-text-gray": " border bg-card text-card-foreground",
  "alert-text-primary": 'border border-border bg-card text-primary [&_[data-slot="alert-description"]]:text-primary/90',
  "alert-border-gray": 'border-l-4 rounded-none bg-card text-card-foreground [&_[data-slot="alert-description"]]:text-card-foreground/90',
  "alert-border-primary": 'border-l-4 rounded-0 border-primary/90 bg-primary/10 text-primary [&_[data-slot="alert-description"]]:text-primary/90'
};
const dynamicAlert = [
  // dynamic variants
  [/^alert-border(-(\S+))?$/, ([, , c = "primary"]) => `rounded-none border-l-4 border-${c}-600 dark:border-${c}-500 bg-${c}-50 dark:bg-${c}-950 text-${c}-900 dark:text-${c}-100 [&_[data-slot="alert-description"]]:text-${c}-900/90 dark:[&_[data-slot="alert-description"]]:text-${c}-100/90`],
  [/^alert-solid(-(\S+))?$/, ([, , c = "primary"]) => ` bg-${c}-600 dark:bg-${c}-500 text-background [&_[data-slot="alert-description"]]:text-background/90`],
  [/^alert-outline(-(\S+))?$/, ([, , c = "primary"]) => ` bg-background border border-${c}-600 dark:border-${c}-500 text-${c}-600 dark:text-${c}-500 [&_[data-slot="alert-description"]]:text-${c}-600/90 dark:[&_[data-slot="alert-description"]]:text-${c}-500/90`],
  [/^alert-soft(-(\S+))?$/, ([, , c = "primary"]) => ` border-${c}-50 bg-${c}-50 text-${c}-900 dark:border-${c}-950 dark:bg-${c}-950 dark:text-${c}-100 [&_[data-slot="alert-description"]]:text-${c}-900/90 dark:[&_[data-slot="alert-description"]]:text-${c}-100/90`],
  [/^alert-text(-(\S+))?$/, ([, , c = "primary"]) => ` border bg-card text-${c}-600 dark:text-${c}-500 [&_[data-slot="alert-description"]]:text-${c}-600/90 dark:[&_[data-slot="alert-description"]]:text-${c}-500/90`]
];
const alert = [
  ...dynamicAlert,
  staticAlert
];

const staticAlertDialog = {
  // base
  "alert-dialog": "",
  // sub-components
  "alert-dialog-cancel": "mt-2 sm:mt-0",
  "alert-dialog-overlay": "fixed inset-0 z-50 bg-black/80",
  "alert-dialog-content": "bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
  "alert-dialog-title": "text-lg font-semibold",
  "alert-dialog-description": "text-muted-foreground text-sm",
  "alert-dialog-header": "flex flex-col gap-2 text-center sm:text-left",
  "alert-dialog-footer": "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
};
const dynamicAlertDialog = [
  // dynamic preset
];
const alertDialog = [
  ...dynamicAlertDialog,
  staticAlertDialog
];

const staticAspectRatio = {
  // base
  "aspect-ratio": "overflow-hidden",
  // static variants
  "aspect-ratio-soft-gray": "bg-muted border border-border",
  "aspect-ratio-outline-gray": "bg-background border border-border"
};
const dynamicAspectRatio = [
  [/^aspect-ratio-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 dark:bg-${c}-900 border-${c}-200 dark:border-${c}-800`],
  [/^aspect-ratio-outline(-(\S+))?$/, ([, , c = "gray"]) => `border border-${c}-200 dark:border-${c}-800`]
];
const aspectRatio = [
  ...dynamicAspectRatio,
  staticAspectRatio
];

const staticAvatar = {
  // base
  "avatar": "relative inline-flex items-center font-normal select-none shrink-0 overflow-hidden",
  "avatar-image": "h-full w-full object-cover",
  "avatar-fallback": "flex h-full w-full items-center justify-center",
  "avatar-label": "uppercase",
  "avatar-icon": "text-1em",
  // variants
  "avatar-solid-white": "bg-background text-foreground border border-border",
  "avatar-solid-black": "bg-foreground text-background"
};
const dynamicAvatar = [
  // variants
  [/^avatar-solid(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-600 dark:bg-${c}-500 text-background`],
  [/^avatar-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 text-${c}-700 dark:text-${c}-400 dark:bg-${c}-900`],
  [/^avatar-outline(-(\S+))?$/, ([, , c = "gray"]) => `bg-transparent text-${c}-500 dark:text-${c}-400 border border-${c}-500 dark:border-${c}-400`]
];
const avatar = [
  ...dynamicAvatar,
  staticAvatar
];

const staticAvatarGroup = {
  "avatar-group": "flex flex-row-reverse justify-end",
  "avatar-group-item": "ring-0.125em ring-background -me-0.375em first:me-0",
  "avatar-group-count": "text-0.875em"
};
const dynamicAvatarGroup = [];
const avatarGroup = [
  ...dynamicAvatarGroup,
  staticAvatarGroup
];

const staticBadge = {
  // config
  "badge-default-variant": "badge-soft",
  "badge-close-icon": "i-close",
  // base
  "badge": "text-xs leading-tight py-0.3333333333333333em px-0.6666666666666666em gap-x-0.25em inline-flex items-center rounded-md font-medium text-brand",
  "badge-icon-base": "text-1em",
  "badge-close": "relative rounded-sm h-1.16em w-1.16em grid place-items-center -mr-0.375em hover:bg-brand/20 bg-transparent",
  "badge-close-icon-base": "text-brand/75 group-hover:text-brand/90",
  // variants
  "badge-soft-gray": "bg-muted text-muted-foreground n-gray-900 dark:n-gray-50 ring-1 ring-gray-700/10 dark:ring-gray-400/30",
  "badge-solid-black": "bg-foreground text-background n-gray-300 dark:n-gray-600",
  "badge-outline-white": "bg-background text-foreground ring-1 ring-ring n-gray-600 dark:n-gray-300"
};
const dynamicBadge = [
  // variants
  [/^badge-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-${c}-100 dark:bg-${c}-800 n-${c}-700 dark:n-${c}-200`],
  [/^badge-soft(-(\S+))?$/, ([, , c = "primary"]) => `bg-${c}-50 n-${c}-700 dark:n-${c}-400 ring-1 ring-${c}-700/10 dark:bg-${c}-400/10 dark:ring-${c}-400/30`],
  [/^badge-outline(-(\S+))?$/, ([, , c = "primary"]) => `bg-transparent n-${c}-700 dark:n-${c}-400 ring-1 ring-${c}-700/10 dark:ring-${c}-400/30`]
];
const badge = [
  ...dynamicBadge,
  staticBadge
];

const staticBreadcrumb = {
  // config
  "breadcrumb": "",
  "breadcrumb-active": "breadcrumb-active-text-primary",
  "breadcrumb-inactive": "breadcrumb-inactive-text-muted",
  "breadcrumb-separator-icon": "i-radix-icons-chevron-right",
  "breadcrumb-ellipsis-icon": "i-radix-icons-dots-horizontal",
  // components
  "breadcrumb-root": "",
  "breadcrumb-list": "flex flex-wrap items-center break-words text-muted-foreground",
  "breadcrumb-link": "transition-colors font-normal px-1.5 sm:px-2.5",
  "breadcrumb-item": "inline-flex items-center gap-1.5",
  "breadcrumb-separator": "flex",
  // TODO
  "breadcrumb-ellipsis": "flex items-center justify-center px-1.5 sm:px-2.5 cursor-pointer"
};
const dynamicBreadcrumb = [
  // states
  [
    /^breadcrumb-active-([^-]+)-([^-]+)$/,
    ([, variant = "text", color = "primary"]) => `data-[state=active]:btn-${variant}-${color}`
  ],
  [
    /^breadcrumb-inactive-([^-]+)-([^-]+)$/,
    ([, variant = "text", color = "muted"]) => `data-[state=inactive]:btn-${variant}-${color}`
  ]
];
const breadcrumb = [
  ...dynamicBreadcrumb,
  staticBreadcrumb
];

const staticBtn = {
  // config
  "btn-default-variant": "btn-solid",
  "btn-loading-icon": "i-loading",
  // base
  "btn": "text-foreground btn-rectangle bg-transparent transition-colors leading-1.4285714285714286em shrink-0 gap-x-0.5714285714285714em rounded-md whitespace-nowrap inline-flex justify-center items-center btn-disabled font-medium outline-none",
  "btn-disabled": "disabled:n-disabled",
  "btn-label": "",
  "btn-icon-label": "size-1.1428571428571428em",
  "btn-leading": "size-1.1428571428571428em",
  "btn-trailing": "size-1.1428571428571428em",
  "btn-loading": "animate-spin size-1.1428571428571428em",
  "btn-rectangle": "h-2.5714285714285716em px-1.1428571428571428em py-0.5714285714285714em",
  "btn-square": "square-2.5714285714285716em p-0",
  // options
  "btn-block": "w-full",
  "btn-reverse": "flex-row-reverse",
  // variants
  "btn-solid-primary": "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 btn-focus",
  "btn-solid": "btn-solid-primary",
  "btn-solid-gray": "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/90 btn-focus",
  "btn-solid-secondary": "btn-solid-gray",
  "btn-solid-white": "bg-background text-foreground shadow-xs btn-focus",
  "btn-solid-black": "bg-foreground text-background shadow-xs btn-focus",
  "btn-outline-primary": "shadow-xs text-primary bg-background border border-primary hover:bg-primary/10 btn-focus",
  "btn-outline": "btn-outline-primary",
  "btn-outline-gray": "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 btn-focus",
  "btn-outline-white": "text-foreground border shadow-xs hover:bg-input/50 btn-focus",
  "btn-link-primary": "text-primary hover:underline underline-offset-4 btn-focus",
  "btn-link": "btn-link-primary",
  "btn-link-gray": "text-secondary-foreground hover:underline underline-offset-4 btn-focus",
  "btn-link-black": "text-foreground hover:underline underline-offset-4 btn-focus",
  "btn-link-muted": "text-muted-foreground hover:underline underline-offset-4 btn-focus",
  "btn-link-accent": "text-accent-foreground hover:underline underline-offset-4 btn-focus",
  "btn-text-primary": "hover:text-primary text-primary/90 btn-focus",
  "btn-text": "btn-text-primary",
  "btn-text-gray": "hover:text-secondary-foreground text-secondary-foreground/90 btn-focus",
  "btn-text-black": "hover:text-foreground text-foreground/90 btn-focus",
  "btn-text-muted": "hover:text-muted-foreground text-muted-foreground/90 btn-focus",
  "btn-text-accent": "hover:text-accent-foreground text-accent-foreground/90 btn-focus",
  "btn-soft-primary": "bg-primary/10 text-primary shadow-xs hover:bg-primary/15 btn-focus",
  "btn-soft": "btn-soft-primary",
  "btn-soft-gray": "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 btn-focus",
  "btn-soft-secondary": "btn-soft-gray",
  "btn-soft-black": "text-foreground bg-background shadow-xs btn-focus",
  "btn-soft-accent": "text-accent-foreground bg-accent/80 hover:bg-accent btn-focus",
  "btn-ghost-primary": "hover:bg-primary/10 text-primary dark:hover:bg-primary/15 btn-focus",
  "btn-ghost": "btn-ghost-primary",
  "btn-ghost-gray": "hover:text-secondary-foreground hover:bg-secondary/80 btn-focus",
  "btn-ghost-muted": "text-muted-foreground hover:bg-secondary/80 btn-focus",
  "btn-ghost-white": "text-foreground hover:bg-secondary/80 btn-focus",
  "btn-focus-primary": "focus-visible:ring-3px focus-visible:border focus-visible:border-ring focus-visible:ring-ring/50",
  "btn-focus": "btn-focus-primary"
};
const dynamicBtn = [
  // base
  [/^btn-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-3px focus-visible:border focus-visible:border-${c}-400 dark:focus-visible:border-${c}-800 focus-visible:ring-${c}-400/50 dark:focus-visible:ring-${c}-800/50`],
  // variants
  [/^btn-solid(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-background shadow-xs bg-${c}-600 dark:bg-${c}-500 hover:bg-${c}-600/90 dark:hover:bg-${c}-500/90`],
  [/^btn-text(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} hover:text-${c}-600 hover:dark:text-${c}-500 text-${c}-600/90 dark:text-${c}-500/90`],
  [/^btn-outline(-(\S+))?$/, ([, , c = "primary"]) => `shadow-xs btn-focus-${c} text-${c}-600 dark:text-${c}-500 bg-background dark:bg-input/30 border border-${c}-600/90 dark:border-${c}-500/90 hover:bg-${c}-600/10 dark:hover:bg-${c}-500/15`],
  [/^btn-soft(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-500 bg-${c}-600/10 dark:bg-${c}-500/10 hover:bg-${c}-600/15 dark:hover:bg-${c}-500/15`],
  [/^btn-ghost(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-500 hover:bg-${c}-600/10 dark:hover:bg-${c}-500/10`],
  [/^btn-link(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-500 hover:underline underline-offset-4`]
];
const btn = [
  ...dynamicBtn,
  staticBtn
];

const staticCard = {
  // base
  "card": "text-card-foreground flex flex-col gap-6 rounded-xl py-6 shadow-sm",
  // components
  "card-header": "[@container/card-header]:grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[[data-slot=card-action]]:grid-cols-[1fr_auto] [&.border-b]:pb-6",
  "card-title": "leading-none font-semibold",
  "card-description": "text-muted-foreground text-sm",
  "card-content": "px-6",
  "card-footer": "flex items-center px-6 [&.border-t]:pt-6",
  "card-action": "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
  // static variants
  "card-solid-gray": "bg-card border",
  "card-solid": "card-solid-gray",
  "card-soft-gray": "bg-card",
  "card-soft": "card-soft-gray",
  "card-outline-gray": "bg-background border",
  "card-outline": "card-outline-gray"
};
const dynamicCard = [
  [/^card-solid(-(\S+))?$/, ([, , c = "gray"]) => `border bg-background dark:bg-${c}-900 border-${c}-200 dark:border-${c}-800`],
  [/^card-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 dark:bg-${c}-900`],
  [/^card-outline(-(\S+))?$/, ([, , c = "gray"]) => `border bg-background dark:bg-${c}-900 border-${c}-200 dark:border-${c}-800`]
];
const card = [
  ...dynamicCard,
  staticCard
];

const staticCheckbox = {
  // base
  "checkbox": "dark:bg-input/30 square-1em shrink-0 rounded-4px shadow-xs transition-shadow outline-none disabled:n-disabled border border-input dark:border-input",
  "checkbox-label": "block",
  "checkbox-reverse": "flex-row-reverse",
  // wrappers
  "checkbox-wrapper": "gap-x-3 relative inline-flex items-center hover:cursor-pointer",
  // icon
  "checkbox-indicator": "flex items-center justify-center text-primary-foreground transition-none",
  "checkbox-icon-base": "square-0.875rem",
  "checkbox-checked-icon": "i-check",
  "checkbox-unchecked-icon": "",
  "checkbox-indeterminate-icon": "i-lucide-minus",
  "checkbox-focus-primary": "focus-visible:ring-3px focus-visible:border-ring focus-visible:ring-ring/50",
  "checkbox-checked-primary": "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
  "checkbox-checked": "checkbox-checked-primary",
  "checkbox-indeterminate-primary": "data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary",
  "checkbox-indeterminate": "checkbox-indeterminate-primary"
};
const dynamicCheckbox = [
  [/^checkbox(-(\S+))?$/, ([, , c = "primary"]) => `checkbox-focus-${c} checkbox-checked-${c} checkbox-indeterminate-${c}`],
  [/^checkbox-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-3px focus-visible:border-${c}-200 dark:focus-visible:border-${c}-800 focus-visible:ring-${c}-200/50 dark:focus-visible:ring-${c}-800/50`],
  [/^checkbox-indeterminate(-(\S+))?$/, ([, , c = "primary"]) => `data-[state=indeterminate]:(bg-${c}-600 text-${c}-50) dark:data-[state=indeterminate]:(bg-${c}-500 text-${c}-900)`],
  [/^checkbox-checked(-(\S+))?$/, ([, , c = "primary"]) => `data-[state=checked]:(bg-${c}-600 text-${c}-50) dark:data-[state=checked]:(bg-${c}-500 text-${c}-900)`]
];
const checkbox = [
  ...dynamicCheckbox,
  staticCheckbox
];

const staticCollapsible = {
  "collapsible-content": "overflow-hidden transition-all"
};
const dynamicCollapsible = [
  // dynamic preset
];
const collapsible = [
  ...dynamicCollapsible,
  staticCollapsible
];

const staticCombobox = {
  // base
  "combobox": "flex",
  "combobox-trigger-info-icon": "i-info",
  "combobox-trigger-error-icon": "i-error",
  "combobox-trigger-success-icon": "i-success",
  "combobox-trigger-warning-icon": "i-warning",
  "combobox-trigger-trailing-icon": "i-lucide-chevrons-up-down",
  "combobox-input-leading-icon": "i-lucide-search",
  "combobox-trigger": "px-0.8571428571428571em min-w-200px w-full justify-between font-normal [&>span]:truncate",
  "combobox-trigger-trailing": "size-1.1428571428571428em data-[status=error]:text-error data-[status=success]:text-success data-[status=warning]:text-warning data-[status=info]:text-info data-[status=default]:(n-disabled) rtl:mr-auto ltr:ml-auto",
  "combobox-trigger-leading": "size-1.1428571428571428em",
  "combobox-item": "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-0.5em py-0.375em text-1em outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
  "combobox-item-indicator": "ml-auto",
  "combobox-item-indicator-icon": "",
  "combobox-item-indicator-icon-name": "i-check",
  "combobox-anchor": "w-full",
  "combobox-empty": "py-1.7142857142857142em text-center text-1em leading-1.4285714285714286em",
  "combobox-group": "overflow-hidden p-0.2857142857142857em text-foreground",
  "combobox-label": "px-0.6666666666666666em py-0.5em text-0.8571428571428571em leading-1.1428571428571428em text-muted-foreground font-medium",
  "combobox-list": "z-50 w-[--reka-popper-anchor-width] rounded-md border bg-popover text-popover-foreground overflow-hidden shadow-md outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
  "combobox-separator": "bg-border -mx-1 h-px",
  "combobox-viewport": "max-h-300px scroll-py-1 overflow-x-hidden overflow-y-auto"
};
const dynamicCombobox = [
  // dynamic preset
];
const combobox = [
  ...dynamicCombobox,
  staticCombobox
];

const staticDialog = {
  // base
  "dialog": "",
  // sub-components
  "dialog-overlay": "fixed inset-0 z-50 bg-black/80",
  "dialog-content": "bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
  "dialog-scroll-overlay": "fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80",
  "dialog-scroll-content": "relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
  "dialog-header": "flex flex-col gap-y-1.5 text-center sm:text-left",
  "dialog-title": "text-lg font-semibold leading-none tracking-tight",
  "dialog-description": "text-sm text-muted-foreground",
  "dialog-close": "absolute right-4 top-4",
  "dialog-footer": "flex flex-col-reverse sm:flex-row sm:justify-end gap-2"
};
const dynamicDialog = [
  // dynamic preset
];
const dialog = [
  ...dynamicDialog,
  staticDialog
];

const staticDrawer = {
  // base
  "drawer": "",
  "drawer-overlay": "fixed inset-0 z-50 bg-black/80",
  "drawer-content": "bg-background fixed z-50 flex h-auto flex-col",
  "drawer-content-top": "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg",
  "drawer-content-bottom": "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg",
  "drawer-content-right": "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm",
  "drawer-content-left": "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm",
  "drawer-handle": "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]:block",
  "drawer-header": "flex flex-col gap-1.5 p-4",
  "drawer-title": "text-foreground font-semibold",
  "drawer-description": "text-muted-foreground text-sm",
  "drawer-footer": "mt-auto flex flex-col gap-2 p-4"
};
const dynamicDrawer = [
  // dynamic preset
];
const drawer = [
  ...dynamicDrawer,
  staticDrawer
];

const staticDropdownMenu = {
  // configurations
  "dropdown-menu": "",
  "dropdown-menu-default-variant": "btn-outline-gray",
  // dropdown-menu-trigger
  "dropdown-menu-trigger": "",
  "dropdown-menu-trigger-leading": "",
  "dropdown-menu-trigger-trailing": "ml-auto",
  // dropdown-menu-content
  "dropdown-menu-content": "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
  // dropdown-menu-item
  "dropdown-menu-item-base": "text-left transition-color focus-visible:outline-0 select-none",
  "dropdown-menu-item-leading": "",
  "dropdown-menu-item-trailing": "ml-auto opacity-75",
  // dropdown-menu-label
  "dropdown-menu-label": "px-2 py-1.5 text-0.875em font-semibold",
  // dropdown-menu-separator
  "dropdown-menu-separator-root": "relative -mx-1",
  "dropdown-menu-separator": "",
  // dropdown-menu-shortcut
  "dropdown-menu-shortcut": "pl-10 ml-auto text-0.875em tracking-widest n-disabled space-x-0.5",
  // dropdown-menu-group
  "dropdown-menu-group": "",
  // dropdown-menu-sub
  "dropdown-menu-sub-trigger": "transition-color focus-visible:outline-0 select-none",
  "dropdown-menu-sub-trigger-leading": "",
  "dropdown-menu-sub-trigger-trailing": "ml-auto opacity-75",
  "dropdown-menu-sub-trigger-trailing-icon": "i-lucide-chevron-right",
  "dropdown-menu-sub-content": "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg"
};
const dynamicDropdownMenu = [
  [/^dropdown-menu-([^-]+)-([^-]+)$/, ([, v = "solid", c = "white"]) => `btn-${v}-${c}`],
  [/^dropdown-menu-item(?:-(\S+))?$/, ([, c = "gray"]) => `focus:bg-${c}-100 focus:text-${c}-800 dark:focus:bg-${c}-800 dark:focus:text-${c}-100 data-[state=open]:bg-${c}-100 dark:data-[state=open]:bg-${c}-800`]
];
const dropdowMenu = [
  ...dynamicDropdownMenu,
  staticDropdownMenu
];

const staticForm = {
  // base
  "form": "",
  "form-field": "",
  "form-field-description": "text-muted-foreground",
  "form-field-hint": "text-sm leading-none text-muted-foreground",
  "form-field-message": "",
  // wrappers
  "form-field-top-wrapper": "flex flex-col space-y-1.5 pb-0.5",
  "form-field-top-wrapper-inner": "flex justify-between items-end space-x-1.5",
  "form-field-bottom-wrapper": "flex space-x-1.5 justify-between items-start",
  "form-field-message-wrapper": "",
  // label
  "form-field-label-wrapper": "flex",
  "form-field-label": "block",
  "form-field-label-required": "after:content-['*'] after:-ms-0.9 after:text-error",
  "form-message": "text-0.8rem font-medium transition-all duration-1000 ease-in-out text-error",
  "form-label": "",
  "form-description": "text-sm text-muted-foreground",
  "form-item": "space-y-2"
};
const form = [
  staticForm
];

const staticFormGroup = {
  // base
  "form-group": "space-y-2",
  "form-group-description": "text-0.8rem text-muted-foreground",
  "form-group-hint": "text-sm leading-none text-muted-foreground",
  "form-group-message": "text-0.8em transition-all duration-1000 ease-in-out",
  // wrappers
  "form-group-top-wrapper": "flex flex-col space-y-1.5",
  "form-group-top-wrapper-inner": "flex justify-between items-end space-x-1.5",
  "form-group-bottom-wrapper": "flex space-x-1.5 justify-between items-start",
  "form-group-message-wrapper": "",
  // label
  "form-group-label-wrapper": "flex",
  "form-group-label": "block label-base",
  "form-group-label-required": "after:content-['*'] after:ms-0.5 after:text-error",
  // counter
  "form-group-counter-wrapper": "text-0.8em",
  "form-group-counter-error": "text-error",
  "form-group-counter-current": "text-accent-foreground",
  "form-group-counter-separator": "text-muted",
  "form-group-counter-max": "text-muted"
};
const formGroup = [
  staticFormGroup
];

const staticIcons = {
  "i-warning": "i-lucide-triangle-alert",
  "i-error": "i-lucide-circle-alert",
  "i-success": "i-lucide-circle-check-big",
  "i-info": "i-lucide-info",
  "i-loading": "i-lucide-loader",
  "i-close": "i-lucide-x",
  "i-check": "i-lucide-check",
  "i-dot": "i-tabler-circle-filled"
};

const staticGeneral = {
  // text-size
  "text-md": "text-1rem leading-1.5rem",
  "size-md": "text-md",
  "text-info": "text-info-600 dark:text-info-500",
  "text-info-active": "text-info-500 dark:text-info-400",
  "text-error": "text-error-600 dark:text-error-500",
  "text-error-active": "text-error-500 dark:text-error-400",
  "text-success": "text-success-600 dark:text-success-500",
  "text-success-active": "text-success-500 dark:text-success-400",
  "text-warning": "text-warning-600 dark:text-warning-500",
  "text-warning-active": "text-warning-500 dark:text-warning-400",
  // transition
  "transition-base": "transition-all duration-100 ease-out",
  // overrides
  "square-false": ""
};
const dynamicGeneral = [
  // TODO: una-text-<color><-number><-number>
  // [/^una-text(-(\S+))?$/, ([, , c = 'primary']) => `text-${c}-700 dark:text-${c}-400`],
];
const general = [
  ...dynamicGeneral,
  staticGeneral,
  staticIcons
];

const staticHoverCard = {
  // configurations
  "hover-card": "",
  "hover-card-default-variant": "outline-gray",
  // components
  "hover-card-trigger": "",
  "hover-card-content": "bg-background text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-none",
  "hover-card-arrow": "!bg-transparent !border-none -mt-1px fill-background stroke-border",
  // static variants
  "hover-card-soft-gray": "bg-muted border border-border",
  "hover-card-outline-gray": "bg-background border border-border"
};
const dynamicHoverCard = [
  [/^hover-card-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 fill-${c}-50 stroke-${c}-200 border-${c}-200 dark:(bg-${c}-900 border-${c}-800 fill-${c}-900 stroke-${c}-800)`],
  [/^hover-card-outline(-(\S+))?$/, ([, , c = "gray"]) => `border stroke-${c}-200 border-${c}-200 dark:(border-${c}-800 stroke-${c}-800)`]
];
const hoverCard = [
  ...dynamicHoverCard,
  staticHoverCard
];

const staticIcon = {
  // base
  "icon-base": "flex-none"
};
const dynamicIcon = [];
const icon = [
  ...dynamicIcon,
  staticIcon
];

const staticIndicator = {
  // config
  "indicator-default-variant": "indicator-solid",
  "indicator-default-placement": "indicator-top-right",
  // base
  "indicator": "absolute min-h-1.5em min-w-1.5em flex items-center justify-center rounded-full font-medium py-none px-0.3em ring-2 ring-background",
  // indicator type sizes
  "indicator-dot": "size-0.45em",
  "indicator-label": "size-0.75em",
  // wrapper
  "indicator-wrapper": "relative inline-flex",
  // placements
  "indicator-top-right": "top-0 -ml-1.3em -mt-0.1em",
  "indicator-bottom-right": "bottom-0 -ml-1.3em -mb-0.1em",
  "indicator-top-left": "top-0 left-0 -mr-1.3em -mt-0.1em",
  "indicator-bottom-left": "bottom-0 left-0 -mr-1.3em -mb-0.1em",
  "indicator-solid-primary": "bg-primary text-primary-foreground",
  "indicator-solid": "indicator-solid-primary"
};
const dynamicIndicator = [
  [/^indicator-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-${c}-600 dark:bg-${c}-500 text-background`]
];
const indicator = [
  ...dynamicIndicator,
  staticIndicator
];

const staticInput = {
  // config
  "input-default-variant": "input-outline-primary",
  "input-loading-icon": "i-loading",
  "input-info-icon": "i-info",
  "input-error-icon": "i-error",
  "input-success-icon": "i-success",
  "input-warning-icon": "i-warning",
  "input-leading-padding": "pl-2.5714285714285716em",
  "input-trailing-padding": "pr-2.5714285714285716em",
  // base
  "input": "text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground text-0.875em leading-1.4285714285714286em px-0.8571428571428571em bg-transparent w-full focus-visible:outline-none input-disabled block rounded-md transition-colors file:text-foreground file:border-0 file:bg-transparent file:text-0.875em file:font-medium",
  "input-input": "h-2.5714285714285716em py-0.2857142857142857em",
  // role='input'
  "input-textarea": "min-h-4.285714285714286em py-0.5714285714em",
  // role='textarea'
  "input-disabled": "disabled:(n-disabled)",
  "input-status-ring": "ring-opacity-50 dark:ring-opacity-40",
  "input-status-icon-base": "square-1em",
  "input-leading": "square-1em",
  "input-trailing": "square-1em",
  "input-loading": "animate-spin square-1em",
  // wrappers
  "input-wrapper": "relative flex items-center",
  "input-leading-wrapper": "pointer-events-none absolute inset-y-0 start-0 flex items-center px-0.8571428571428571em text-muted-foreground",
  "input-trailing-wrapper": "pointer-events-none absolute inset-y-0 end-0 flex items-center px-0.8571428571428571em text-muted-foreground",
  // variants
  "input-outline-gray": "shadow-xs border bg-transparent dark:bg-input/30 border-input focus-visible:ring-input/50 focus-visible:ring-3px",
  "input-outline-black": "shadow-xs border bg-transparent dark:bg-input/30 border-foreground focus-visible:ring-foreground/50 focus-visible:ring-3px",
  "input-solid-primary": "shadow-xs bg-transparent dark:bg-input/30 border border-ring input-focus",
  "input-solid": "input-solid-primary",
  "input-focus-primary": "focus-visible:ring-3px focus-visible:border-ring focus-visible:ring-ring/50",
  "input-focus": "input-focus-primary"
};
const dynamicInput = [
  // config
  [/^input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-3px focus-visible:border-${c}-400 dark:focus-visible:border-${c}-500 focus-visible:ring-${c}-400/50 dark:focus-visible:ring-${c}-500/50`],
  [/^input-status(-(\S+))?$/, ([, , c = "info"]) => `text-${c}-700 dark:text-${c}-200 placeholder:text-${c}-500 dark:placeholder:text-${c}-400`],
  // variants
  [/^input-outline(-(\S+))?$/, ([, , c = "primary"]) => `shadow-xs border bg-transparent dark:bg-input/30 border-input input-focus-${c}`],
  [/^input-solid(-(\S+))?$/, ([, , c = "primary"]) => `shadow-xs bg-transparent dark:bg-input/30 input-focus-${c} border border-${c}-500 dark:border-${c}-400`]
];
const input = [
  ...dynamicInput,
  staticInput
];

const staticKbd = {
  // config
  "kbd-default-variant": "kbd-solid-gray",
  // base
  "kbd": "inline-flex text-nowrap items-center h-1.8181818181818181em min-w-1.8181818181818181em font-sans justify-center rounded px-0.5454545454545454em py-0.18181818181818182em text-0.6875em font-normal"
};
const dynamicKbd = [
  // modifiers
  [/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-inset ring-${c}-200 dark:ring-${c}-800`],
  // variants
  [/^kbd-solid(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-${c}-50 text-${c}-500 dark:bg-${c}-900 dark:text-${c}-400`],
  [/^kbd-outline(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-transparent text-${c}-500 dark:text-${c}-400`]
];
const kbd = [
  ...dynamicKbd,
  staticKbd
];

const staticLabel = {
  // base
  "label-base": "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
};
const dynamicLabel = [
  // dynamic preset
];
const label = [
  ...dynamicLabel,
  staticLabel
];

const staticLink = {
  // base
  "_link-disabled": "n-disabled"
};
const dynamicLink = [
  // dynamic preset
];
const link = [
  ...dynamicLink,
  staticLink
];

const staticNavigationMenu = {
  // configurations
  "navigation-menu": "relative z-10 flex max-w-max flex-1 items-center justify-center",
  "navigation-menu-disabled": "n-disabled",
  // components
  "navigation-menu-indicator": "absolute duration-200 top-full w-[--reka-navigation-menu-indicator-size] translate-x-[--reka-navigation-menu-indicator-position] mt--3px z-100 flex h-10px items-end justify-center overflow-hidden transition-all",
  "navigation-menu-indicator-arrow": "relative top-70% h-12px w-12px rotate-45deg border bg-background",
  "navigation-menu-content": "left-0 top-0 w-full md:absolute md:w-auto",
  "navigation-menu-viewport": "origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow md:w-[--reka-navigation-menu-viewport-width]",
  "navigation-menu-link": "",
  "navigation-menu-trigger": "",
  "navigation-menu-trigger-trailing": "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
  "navigation-menu-trigger-trailing-icon": "i-lucide-chevron-down",
  "navigation-menu-content-item": "flex items-start select-none rounded-md p-3 h-unset leading-none no-underline outline-none transition-colors whitespace-normal justify-start",
  "navigation-menu-content-list": "grid w-400px gap-3 p-4 md:grid-cols-2 lg:w-600px md:w-500px",
  "navigation-menu-content-item-wrapper": "flex flex-col items-start gap-1",
  "navigation-menu-content-item-label": "font-semibold leading-none",
  "navigation-menu-content-item-description": "line-clamp-2 text-left text-muted-foreground leading-5",
  "navigation-menu-list-horizontal": "flex flex-1 list-none items-center justify-center gap-x-1",
  "navigation-menu-list-vertical": "max-w-none list-none flex-col items-start gap-1 space-x-0",
  "navigation-menu-viewport-wrapper": "",
  "navigation-menu-viewport-wrapper-horizontal": "absolute left-0 top-full flex justify-center",
  "navigation-menu-viewport-wrapper-vertical": "absolute top-0 left-full ml-1.5"
};
const dynamicNavigationMenu = [
  [/^navigation-menu-([^-]+)-([^-]+)$/, ([, v = "ghost", c = "white"]) => `btn-${v}-${c}`],
  [/^navigation-menu-link-([^-]+)-([^-]+)$/, ([, v = "ghost", c = "white"]) => `btn-${v}-${c}`]
];
const navigationMenu = [
  ...dynamicNavigationMenu,
  staticNavigationMenu
];

const staticNumberField = {
  // base
  "number-field": "grid gap-1.5",
  "number-field-content": "relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-1.25em [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-1.25em",
  "number-field-decrement": "grid place-items-center absolute top-1/2 -translate-y-1/2 left-0 p-0.75em disabled:cursor-not-allowed disabled:opacity-20",
  "number-field-input": "flex w-full rounded-md bg-transparent h-2.5714285714285716em py-0.2857142857142857em text-0.875em text-center shadow-sm transition-colors placeholder:text-muted disabled:n-disabled focus-visible:outline-none",
  "number-field-increment": "grid place-items-center absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-0.75em"
};
const dynamicNumberField = [
  // dynamic preset
  [/^number-field-([^-]+)-([^-]+)$/, ([, v = "outline", c = "primary"]) => `input-${v}-${c}`]
];
const numberField = [
  ...dynamicNumberField,
  staticNumberField
];

const staticPagination = {
  // configurations
  "pagination": "overflow-hidden",
  "pagination-list": "flex items-center gap-1 overflow-hidden",
  // components
  "pagination-root": "",
  "pagination-list-item": "pagination",
  "pagination-ellipsis-base": "btn-(~ square) flex items-center justify-center",
  "pagination-ellipsis-icon-base": "square-1.25em",
  "pagination-ellipsis-icon": "i-lucide-ellipsis",
  "pagination-first": "pagination",
  "pagination-first-icon": "i-lucide-chevrons-left",
  "pagination-prev": "pagination",
  "pagination-prev-icon": "i-lucide-chevron-left",
  "pagination-next": "pagination",
  "pagination-next-icon": "i-lucide-chevron-right",
  "pagination-last": "pagination",
  "pagination-last-icon": "i-lucide-chevrons-right"
};
const dynamicPagination = [
  [
    /^pagination-ellipsis(?:-([^-]+))?(?:-([^-]+))?$/,
    ([, variant = "text", color = "black"]) => `btn-${variant}-${color}`
  ],
  [
    /^pagination-selected(?:-([^-]+))?(?:-([^-]+))?$/,
    ([, variant = "solid", color = "primary"]) => `data-[selected=true]:btn-${variant}-${color}`
  ],
  [
    /^pagination-unselected(?:-([^-]+))?(?:-([^-]+))?$/,
    ([, variant = "outline", color = "gray"]) => `data-[selected=false]:btn-${variant}-${color}`
  ]
];
const pagination = [
  ...dynamicPagination,
  staticPagination
];

const staticPinInput = {
  // configurations
  "pin-input": "flex items-center gap-2 has-disabled:opacity-50 disabled:cursor-not-allowed",
  "pin-input-separator-icon": "i-lucide-minus",
  // components
  "pin-input-slot": "relative flex square-2.5714285714285716em items-center justify-center shadow-xs border-y border-r first:rounded-l-md first:border-l last:rounded-r-md text-0.875em leading-1.4285714285714286em transition-all outline-none text-center",
  "pin-input-group": "flex items-center",
  "pin-input-separator": "grid",
  "pin-input-solid-primary": "shadow-xs bg-transparent dark:bg-input/30 border border-ring pin-input-focus",
  "pin-input-solid": "pin-input-solid-primary",
  "pin-input-focus-primary": "focus:ring-3px focus:border focus:border-ring focus:ring-ring/50",
  "pin-input-focus": "pin-input-focus-primary"
};
const dynamicPinInput = [
  [/^pin-input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus:ring-3px focus:border focus:border-${c}-400 dark:focus:border-${c}-500 focus:ring-${c}-400/50 dark:focus:ring-${c}-500/50 focus:z-10`],
  // dynamic preset
  [/^pin-input-outline(-(\S+))?$/, ([, , c = "primary"]) => `bg-transparent dark:bg-input/30 border-input pin-input-focus-${c}`],
  [/^pin-input-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-transparent dark:bg-input/30 border-${c}-500 dark:border-${c}-400 pin-input-focus-${c}`]
];
const pinInput = [
  ...dynamicPinInput,
  staticPinInput
];

const staticPopover = {
  "popover-content": "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
};
const dynamicPopover = [
  // dynamic preset
];
const popover = [
  ...dynamicPopover,
  staticPopover
];

const staticProgress = {
  // base
  "progress-indeterminate": "absolute bg-brand h-full",
  // components
  "progress-root": "relative h-0.5em w-full overflow-hidden bg-brand/20",
  "progress-indicator": "h-full w-full flex-1 bg-brand transition-all",
  // static
  "progress-foreground": "n-foreground",
  "progress-background": "n-background",
  "progress-white": "progress-background",
  "progress-black": "progress-foreground",
  "progress-primary": "n-primary",
  "progress-secondary": "n-secondary",
  "progress-accent": "n-accent",
  "progress-destructive": "n-destructive",
  "progress-muted": "n-muted"
};
const dynamicProgress = [
  [/^progress-(.*)$/, ([, body], { theme }) => {
    const color = parseColor(body, theme);
    if (color?.color)
      return `n-${body}-600 dark:n-${body}-500`;
  }]
];
const progress = [
  ...dynamicProgress,
  staticProgress
];

const staticRadioGroup = {
  // configurations
  "radio-group": "gap-2 flex flex-wrap",
  "radio-group-orientation-vertical": "flex-col",
  "radio-group-orientation-horizontal": "flex-row",
  // components
  "radio-group-item-root": "flex flex-col",
  "radio-group-item-wrapper": "flex items-center gap-2",
  "radio-group-item": "aspect-square rounded-full border border-brand text-brand shadow-xs focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:n-disabled",
  "radio-group-item-label": "text-0.875em font-medium",
  "radio-group-item-description": "text-0.875em text-muted-foreground ml-[calc(1.1em+0.5rem)]",
  "radio-group-indicator": "flex items-center justify-center",
  "radio-group-indicator-icon-base": "h-0.875em w-0.875em fill-brand",
  "radio-group-indicator-icon": "i-dot",
  "radio-group-primary": "n-primary",
  "radio-group-secondary": "n-secondary",
  "radio-group-accent": "n-accent",
  "radio-group-muted": "n-muted"
};
const dynamicRadioGroup = [
  [/^radio-group-(.*)$/, ([, body], { theme }) => {
    const color = parseColor(body, theme);
    if (color?.color)
      return `n-${body}-600 dark:n-${body}-500`;
  }]
];
const radioGroup = [
  ...dynamicRadioGroup,
  staticRadioGroup
];

const staticResizable = {
  // config
  "resizable-handle-icon-name": "i-lucide-grip-vertical",
  // base
  "resizable-panel-group": "flex h-full w-full data-[orientation=vertical]:flex-col",
  "resizable-panel": "",
  "resizable-handle": "relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:outline-none data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90",
  "resizable-handle-icon-wrapper": "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border",
  "resizable-handle-icon": "square-2.5",
  // static variants
  "resizable-handle-solid-gray": "bg-border focus-visible:ring-foreground/58",
  "resizable-handle-solid-black": "bg-foreground focus-visible:ring-foreground/58",
  "resizable-handle-outline-gray": "ring-1 ring-ring focus-visible:ring-foreground/58"
};
const dynamicResizable = [
  [/^resizable-handle-solid(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-200 dark:bg-${c}-800 focus-visible:ring-${c}-200 dark:focus-visible:ring-${c}-800`],
  [/^resizable-handle-outline(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-${c}-200 dark:ring-${c}-800 focus-visible:ring-${c}-200 dark:focus-visible:ring-${c}-800`]
];
const resizable = [
  ...dynamicResizable,
  staticResizable
];

const staticScrollArea = {
  // configurations
  "scroll-area": "",
  "scroll-area-scrollbar-vertical": "h-full w-0.625em border-l border-l-transparent p-0.0625em",
  "scroll-area-scrollbar-horizontal": "h-0.625em flex-col border-t border-t-transparent p-0.0625em",
  // components
  "scroll-area-root": "relative overflow-hidden",
  "scroll-area-scrollbar": "flex touch-none select-none transition-colors",
  "scroll-area-viewport": "h-full w-full rounded-inherit",
  "scroll-area-scrollbar-thumb": "relative flex-1",
  "scroll-area-gray": "bg-border"
};
const dynamicScrollArea = [
  // dynamic preset
  [/^scroll-area(-(\S+))?$/, ([, , c], { theme }) => {
    const parsedColor = parseColor$1(c, theme);
    if (parsedColor?.color)
      return `bg-${c}-200 dark:bg-${c}-800`;
    return void 0;
  }]
];
const scrollArea = [
  ...dynamicScrollArea,
  staticScrollArea
];

const staticSelect = {
  // configurations
  "select": "",
  "select-default-variant": "btn-solid-white",
  "select-disabled": "n-disabled",
  "select-scroll": "flex cursor-default items-center justify-center py-1",
  "select-trigger-info-icon": "i-info",
  "select-trigger-error-icon": "i-error",
  "select-trigger-success-icon": "i-success",
  "select-trigger-warning-icon": "i-warning",
  // components
  "select-trigger": "px-0.8571428571428571em w-full shrink [&>span]:truncate",
  "select-trigger-trailing-icon": "i-lucide-chevron-down",
  "select-trigger-trailing": "size-1.1428571428571428em data-[status=error]:text-error data-[status=success]:text-success data-[status=warning]:text-warning data-[status=info]:text-info data-[status=default]:(n-disabled) rtl:mr-auto ltr:ml-auto",
  "select-trigger-leading": "size-1.1428571428571428em",
  "select-value": "text-1em data-[status=error]:text-error-active data-[status=success]:text-success-active data-[status=warning]:text-warning-active data-[status=info]:text-info-active data-[placeholder]:n-disabled",
  "select-content": "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
  "select-content-popper": "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
  "select-group": "w-full",
  "select-separator": "-mx-1 my-1 h-px bg-muted",
  "select-item": "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-1em outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:n-disabled",
  "select-item-indicator": "absolute right-2 size-1.1428571428571428em flex items-center justify-center",
  "select-item-indicator-icon": "i-check",
  "select-viewport": "p-1",
  "select-viewport-popper": "h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]",
  "select-scroll-up-button": "select-scroll",
  "select-scroll-down-button": "select-scroll",
  "select-scroll-up-button-icon": "i-lucide-chevron-up",
  "select-scroll-down-button-icon": "i-lucide-chevron-down",
  "select-label": "py-1.5 pl-2 text-1em font-semibold",
  // ⚠️ for overriding purposes only
  "select-item-selectItem": ""
};
const dynamicSelect = [
  [/^select-([^-]+)-([^-]+)$/, ([, v = "solid", c = "gray"], { theme }) => {
    const parsedColor = parseColor$1(c, theme);
    if (parsedColor?.color)
      return `btn-${v}-${c}`;
    return void 0;
  }],
  [/^select-item(-(\S+))?$/, ([, , c = "gray"], { theme }) => {
    const parsedColor = parseColor$1(c || "gray", theme);
    if (parsedColor?.color)
      return `focus:bg-${c || "gray"}-100 focus:text-${c || "gray"}-800 dark:focus:bg-${c || "gray"}-800 dark:focus:text-${c || "gray"}-100`;
    return void 0;
  }]
];
const select = [
  ...dynamicSelect,
  staticSelect
];

const staticSeparator = {
  // base
  "separator": "text-md shrink-0 relative",
  "separator-default-variant": "separator-solid-gray",
  "separator-content": "text-0.75em text-muted-foreground bg-background absolute flex justify-center items-center",
  // orientation states
  "separator-horizontal": "h-px my-4 w-full border-t-0.0625em",
  "separator-vertical": "w-px mx-4 h-full border-l-0.0625em",
  "separator-content-horizontal": "h-1px py-1 px-2",
  "separator-content-vertical": "w-1px px-1 py-2",
  // horizontal positions
  "separator-position-left": "left-6 top-1/2 -translate-y-1/2",
  "separator-position-right": "right-6 top-1/2 -translate-y-1/2",
  "separator-position-center": "left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2",
  // vertical positions
  "separator-position-bottom": "bottom-4 left-1/2 -translate-x-1/2",
  "separator-position-top": "top-4 left-1/2 -translate-x-1/2",
  // static variants
  "separator-solid-gray": "border-border"
};
const dynamicSeparator = [
  // dynamic variants
  [/^separator-solid(-(\S+))?$/, ([, , c = "gray"]) => `border-solid border-${c}-200 dark:border-${c}-800`],
  [/^separator-dashed(-(\S+))?$/, ([, , c = "gray"]) => `border-dashed border-${c}-200 dark:border-${c}-800`],
  [/^separator-dotted(-(\S+))?$/, ([, , c = "gray"]) => `border-dotted border-${c}-200 dark:border-${c}-800`]
];
const separa