@una-ui/preset-edge/dist/shared/preset-edge.P-f9H-jq.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 base)",
  "accordion-border": "border-(~ base) rounded-md",
  // base
  "accordion": "flex-(~ col) relative w-full",
  "accordion-item": "w-full",
  "accordion-button": "justify-start",
  "accordion-panel": "text-(muted 0.875em) border-(t $c-divider) 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-default-variant": "alert-outline",
  "alert-info-icon": "i-info",
  "alert-error-icon": "i-error",
  "alert-success-icon": "i-success",
  "alert-warning-icon": "i-warning",
  "alert-close-icon": "i-close",
  // base
  "alert": "p-1em",
  "alert-title": "text-0.875em font-medium text-brand",
  "alert-description": "text-0.875em leading-1.4285714285714286em text-brand/90",
  "alert-icon-base": "h-1.25em w-1.25em",
  "alert-close": "p-0.5em rounded-md hover:bg-brand/10 active:bg-brand/20 transition-colors duration-200",
  "alert-close-icon-base": "h-1.2em w-1.2em",
  // wrappers
  "alert-inner-wrapper": "gap-0.75em flex",
  "alert-content-wrapper": "flex flex-col w-full space-y-0.5em",
  "alert-icon-wrapper": "-mt-0.2em",
  "alert-close-wrapper": "ml-auto pl-0.2em",
  "alert-close-inner-wrapper": "-mx-1.1 -my-1.1",
  // static variants
  "alert-solid-white": "rounded-md text-brand bg-base n-gray-950 dark:n-white border",
  "alert-solid-black": "rounded-md text-brand bg-inverted n-white dark:n-gray-950 border border-foreground"
};
const dynamicAlert = [
  // variants
  [/^alert-solid(-(\S+))?$/, ([, , c = "primary"]) => `rounded-md text-white bg-${c}-500 dark:bg-${c}-800 n-white dark:n-${c}-400`],
  [/^alert-soft(-(\S+))?$/, ([, , c = "primary"]) => `rounded-md bg-${c}-50 text-${c}-400 dark:text-${c}-300 dark:bg-${c}-950 n-${c}-800 dark:n-${c}-100`],
  [/^alert-outline(-(\S+))?$/, ([, , c = "primary"]) => `rounded-md border border-${c}-600 dark:border-${c}-500 text-brand n-${c}-600 dark:n-${c}-500`],
  [/^alert-border(-(\S+))?$/, ([, , c = "primary"]) => `border-l-4 border-${c}-400 dark:border-${c}-500 bg-${c}-50 dark:bg-${c}-950 text-${c}-400 dark:text-${c}-300 n-${c}-800 dark:n-${c}-100`]
];
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 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-base",
  "aspect-ratio-outline-gray": "bg-base border border-base"
};
const dynamicAspectRatio = [
  [/^aspect-ratio-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 dark:bg-${c}-900 border-${c}-200 dark:border-${c}-700/58`],
  [/^aspect-ratio-outline(-(\S+))?$/, ([, , c = "gray"]) => `border border-${c}-200 dark:border-${c}-700/58`]
];
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-base text-base border border-base",
  "avatar-solid-black": "bg-inverted text-inverted"
};
const dynamicAvatar = [
  // variants
  [/^avatar-solid(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-600 dark:bg-${c}-500 text-inverted`],
  [/^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 n-gray-900 dark:n-gray-50 ring-1 ring-gray-700/10 dark:ring-gray-400/30",
  "badge-solid-black": "bg-inverted text-inverted n-gray-300 dark:n-gray-600",
  "badge-outline-white": "bg-base text-base ring-1 ring-base 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",
  "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": "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",
  "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-white": "bg-base text-base ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-muted",
  "btn-ghost-white": "text-base btn-focus hover:bg-$c-gray-50",
  "btn-outline-white": "text-base ring-1 ring-base ring-inset btn-focus hover:bg-$c-gray-50",
  "btn-solid-gray": "bg-$c-gray-50 text-$c-gray-800 ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-$c-gray-100",
  "btn-ghost-gray": "text-$c-gray-600 btn-focus hover:bg-$c-gray-100",
  "btn-soft-gray": "text-$c-gray-600 bg-$c-gray-50 btn-focus hover:bg-$c-gray-100",
  "btn-outline-gray": "text-muted hover:text-$c-gray-600 ring-1 ring-base ring-inset btn-focus hover:bg-$c-gray-50",
  "btn-link-gray": "text-muted btn-focus hover:text-base hover:underline underline-offset-4",
  "btn-text-gray": "text-$c-gray-600 btn-focus hover:text-$c-gray-900",
  "btn-solid-black": "bg-inverted text-inverted shadow-sm btn-focus",
  "btn-link-black": "text-base btn-focus hover:underline underline-offset-4",
  "btn-text-black": "text-base btn-focus",
  "btn-soft-black": "text-base bg-base btn-focus shadow-sm",
  "btn-text-muted": "text-muted btn-focus hover:text-accent",
  "btn-link-muted": "text-muted btn-focus hover:underline underline-offset-4",
  "btn-ghost-muted": "text-accent hover:text-muted btn-focus hover:bg-muted",
  "btn-soft-accent": "text-accent bg-accent btn-focus",
  "btn-text-accent": "text-accent btn-focus",
  "btn-link-accent": "text-accent btn-focus hover:underline underline-offset-4"
};
const dynamicBtn = [
  // base
  [/^btn-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-${c}-600 dark:focus-visible:ring-${c}-500`],
  // variants
  [/^btn-solid(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-inverted shadow-sm bg-${c}-600 hover:bg-${c}-500 dark:bg-${c}-500 dark:hover:bg-${c}-400`],
  [/^btn-text(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-500 hover:text-${c}-500 dark:hover:text-${c}-400`],
  [/^btn-outline(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-500 dark:text-${c}-400 ring-1 ring-inset ring-${c}-500 dark:ring-${c}-400 hover:bg-${c}-50 dark:hover:bg-${c}-950`],
  [/^btn-soft(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-400 bg-${c}-50 dark:bg-${c}-950 hover:bg-${c}-100 dark:hover:bg-${c}-900`],
  [/^btn-ghost(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-400 hover:bg-${c}-100 dark:hover:bg-${c}-900`],
  [/^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": "rounded-xl shadow text-base",
  // components
  "card-header": "flex flex-col gap-y-1.5 p-6",
  "card-title": "font-semibold leading-none tracking-tight",
  "card-description": "text-sm text-muted",
  "card-content": "p-6 pt-0",
  "card-footer": "flex items-center p-6 pt-0",
  // static variants
  "card-soft-gray": "bg-muted border border-base",
  "card-outline-gray": "bg-base border border-base"
};
const dynamicCard = [
  [/^card-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 dark:bg-${c}-900 border-${c}-200 dark:border-${c}-700/58`],
  [/^card-outline(-(\S+))?$/, ([, , c = "gray"]) => `border border-${c}-200 dark:border-${c}-700/58`]
];
const card = [
  ...dynamicCard,
  staticCard
];

const staticCheckbox = {
  // base
  "checkbox": "checkbox-primary text-md w-1em h-1em shrink-0 rounded-sm ring-offset-base focus-visible:outline-none disabled:n-disabled border border-brand bg-brand text-inverted focus-visible:(ring-2 ring-brand ring-offset-2) data-[state=unchecked]:(bg-base text-base)",
  "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 h-full w-full data-[state=unchecked]:opacity-0 transition-base opacity-100 text-inverted",
  "checkbox-icon-base": "w-1em h-1em",
  "checkbox-checked-icon": "i-check",
  "checkbox-unchecked-icon": "",
  "checkbox-indeterminate-icon": "i-lucide-minus"
};
const dynamicCheckbox = [
  [/^checkbox-(.*)$/, ([, body], { theme }) => {
    const color = parseColor(body, theme);
    if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
      return `n-${body}-600 dark:n-${body}-500`;
  }]
];
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 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 font-medium px-2",
  "combobox-list": "z-50 w-[--reka-popper-anchor-width] rounded-md border bg-popover text-popover 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-base bg-base 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",
  "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 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-solid-white",
  // 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-base bg-popover p-1 text-popover 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",
  // 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-base bg-popover p-1 text-popover shadow-lg 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 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",
  "form-field-hint": "text-sm leading-none text-muted",
  "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",
  "form-item": "space-y-2"
};
const form = [
  staticForm
];

const staticFormGroup = {
  // base
  "form-group": "space-y-2",
  "form-group-description": "text-0.8rem text-muted",
  "form-group-hint": "text-sm leading-none text-muted",
  "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",
  "form-group-counter-separator": "text-muted",
  "form-group-counter-max": "text-muted"
};
const formGroup = [
  staticFormGroup
];

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

const staticGeneral = {
  // text-size
  "text-md": "text-1rem leading-1.5rem",
  "size-md": "text-md",
  // text color
  "text-base": "text-$c-foreground",
  "text-inverted": "text-$c-background",
  "text-muted": "text-$c-muted-foreground",
  "text-accent": "text-$c-accent-foreground",
  "text-accent-foreground": "text-$c-accent",
  "text-popover": "text-$c-popover-foreground",
  "text-popover-foreground": "text-$c-popover",
  "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",
  // ring
  "ring-base": "ring-$c-ring",
  "ring-offset-base": "ring-offset-$c-background",
  // border
  "border-base": "border-$c-border",
  "border-foreground": "border-$c-border-foreground",
  // divide
  "divide-base": "divide-$c-divider",
  // bg
  "bg-base": "bg-$c-background",
  "bg-inverted": "bg-$c-foreground",
  "bg-muted": "bg-$c-muted",
  "bg-border": "bg-$c-border",
  "bg-accent": "bg-$c-accent",
  "bg-accent-foreground": "bg-$c-accent-foreground",
  "bg-popover": "bg-$c-popover",
  "bg-popover-foreground": "bg-$c-popover-foreground",
  "fill-base": "fill-$c-background",
  "stroke-base": "stroke-$c-border",
  // 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-base text-popover zoom-in-95 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden 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",
  "hover-card-arrow": "!bg-transparent !border-none -mt-1px fill-base stroke-base",
  // static variants
  "hover-card-soft-gray": "bg-muted border border-base",
  "hover-card-outline-gray": "bg-base border border-base"
};
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}-700/58 fill-${c}-900 stroke-${c}-700/58)`],
  [/^hover-card-outline(-(\S+))?$/, ([, , c = "gray"]) => `border stroke-${c}-200 border-${c}-200 dark:(border-${c}-700/58 stroke-${c}-700/58)`]
];
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-$c-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"
};
const dynamicIndicator = [
  [/^indicator-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-${c}-600 dark:bg-${c}-500 text-inverted`]
];
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-base text-0.875em leading-1.4285714285714286em px-0.8571428571428571em w-full focus-visible:outline-none input-disabled placeholder:text-muted block rounded-md shadow-sm bg-transparent transition-colors 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",
  "input-trailing-wrapper": "pointer-events-none absolute inset-y-0 end-0 flex items-center px-0.8571428571428571em text-muted",
  // variants
  "input-outline-gray": "border border-input focus-visible:ring-input focus-visible:ring-1",
  "input-outline-black": "border border-input focus:ring-$c-foreground focus-visible:ring-1"
};
const dynamicInput = [
  // config
  [/^input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-${c}-500 dark:focus-visible:ring-${c}-400 focus-visible:ring-1`],
  [/^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"]) => `border border-input input-focus-${c}`],
  [/^input-solid(-(\S+))?$/, ([, , c = "primary"]) => `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}-700/58`],
  // 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 data-[state=hidden]:opacity-0 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-base",
  "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 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 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 = "solid", color = "white"]) => `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 bg-transparent shadow-sm 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"
};
const dynamicPinInput = [
  [/^pin-input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-${c}-500 dark:focus-visible:ring-${c}-400 focus:z-10 focus:ring-1`],
  // dynamic preset
  [/^pin-input-outline(-(\S+))?$/, ([, , c = "primary"]) => `border-input  pin-input-focus-${c}`],
  [/^pin-input-solid(-(\S+))?$/, ([, , c = "primary"]) => `border-${c}-500 focus:border dark:border-${c}-400 pin-input-focus-${c}`]
];
const pinInput = [
  ...dynamicPinInput,
  staticPinInput
];

const staticPopover = {
  "popover-content": "z-50 w-72 rounded-md border border-base bg-popover p-4 text-popover 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-white": "bg-inverted",
  "progress-black": "bg-base"
};
const dynamicProgress = [
  [/^progress-(.*)$/, ([, body], { theme }) => {
    const color = parseColor(body, theme);
    if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
      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 focus:outline-none focus-visible:ring-1 focus-visible:ring-base disabled:n-disabled",
  "radio-group-item-label": "text-0.875em font-medium",
  "radio-group-item-description": "text-0.875em text-muted 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"
};
const dynamicRadioGroup = [
  [/^radio-group-(.*)$/, ([, body], { theme }) => {
    const color = parseColor(body, theme);
    if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
      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-base 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-inverted focus-visible:ring-foreground/58",
  "resizable-handle-outline-gray": "ring-1 ring-base focus-visible:ring-foreground/58"
};
const dynamicResizable = [
  [/^resizable-handle-solid(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-200 dark:bg-${c}-700/58 focus-visible:ring-${c}-200 dark:focus-visible:ring-${c}-700/58`],
  [/^resizable-handle-outline(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-${c}-200 dark:ring-${c}-700/58 focus-visible:ring-${c}-200 dark:focus-visible:ring-${c}-700/58`]
];
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?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
      return `bg-${c}-200 dark:bg-${c}-700/58`;
    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-base bg-popover text-popover 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 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?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
      return `btn-${v}-${c}`;
    return void 0;
  }],
  [/^select-item(-(\S+))?$/, ([, , c = "gray"], { theme }) => {
    const parsedColor = parseColor$1(c || "gray", theme);
    if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
      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 bg-base 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-base"
};
const dynamicSeparator = [
  // dynamic variants
  [/^separator-solid(-(\S+))?$/, ([, , c = "gray"]) => `border-solid border-${c}-200 dark:border-${c}-700/58`],
  [/^separator-dashed(-(\S+))?$/, ([, , c = "gray"]) => `border-dashed border-${c}-200 dark:border-${c}-700/58`],
  [/^separator-dotted(-(\S+))?$/, ([, , c = "gray"]) => `border-dotted border-${c}-200 dark:border-${c}-700/58`]
];
const separator = [
  ...dynamicSeparator,
  staticSeparator
];

const staticSheet = {
  // base
  "sheet": "",
  // sub components
  "sheet-content": "fixed z-50 gap-4 bg-base p-6 shadow-lg transition animate-in fade-in-0 ease-in-out ",
  "sheet-portal": "",
  "sheet-overlay": "fixed inset-0 z-50 bg-black/80",
  "sheet-close": "absolute right-4 top-4",
  "sheet-description": "text-sm text-muted",
  "sheet-footer": "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2",
  "sheet-header": "flex flex-col gap-y-2 text-center sm:text-left",
  "sheet-title": "text-lg font-semibold text-base",
  // static variants
  "sheet-top": "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
  "sheet-right": "inset-y-0 right-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
  "sheet-bottom": "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
  "sheet-left": "inset-y-0 left-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm"
};
const dynamicSheet = [
  // dynamic preset
];
const sheet = [
  ...dynamicSheet,
  staticSheet
];

const staticSidebar = {
  // base
  "sidebar": "",
  // mobile (sheet)
  "sidebar-mobile": "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
  "sidebar-mobile-inner": "h-full w-full flex flex-col",
  // collapsible variants
  "sidebar-collapsible-none": "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
  // desktop container
  "sidebar-desktop": "hidden md:block",
  "sidebar-desktop-inner": "h-full w-full flex flex-col bg-sidebar text-sidebar-foreground group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow",
  // gap handling
  "sidebar-desktop-gap": "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180",
  "sidebar-desktop-gap-floating": "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]",
  "sidebar-desktop-gap-default": "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
  // positioning
  "sidebar-desktop-position": "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
  "sidebar-desktop-position-left": "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]",
  "sidebar-desktop-position-right": "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
  // padding variations
  "sidebar-desktop-padding-floating": "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+_2px)]",
  "sidebar-desktop-padding-default": "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
  // subcomponents
  "sidebar-provider": "flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
  "sidebar-content": "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
  "sidebar-header": "flex flex-col gap-2 p-2",
  "sidebar-group": "relative flex w-full min-w-0 flex-col p-2",
  "sidebar-group-action": "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 after:md:hidden group-data-[collapsible=icon]:hidden",
  "sidebar-group-content": "w-full text-sm",
  "sidebar-group-label": "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] ease-linear focus-visible:ring-2 [&>span[icon-base]]:square-4 [&>svg]:shrink-0",
  "sidebar-input": "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
  "sidebar-inset": "relative flex min-h-svh flex-1 flex-col bg-background data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
  "sidebar-menu": "flex w-full min-w-0 flex-col gap-1",
  "sidebar-menu-action": "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md