@una-ui/preset 0.33.0-beta.1 → 0.35.0-beta.1

package/dist/shared/preset.C2lUQXA3.mjs

@@ -0,0 +1,1058 @@
+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.625em 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 staticAvatar = {
+  // base
+  "avatar": "relative flex shrink-0 overflow-hidden leading-1.5em",
+  "avatar-image": "aspect-square h-full w-full",
+  "avatar-fallback": "flex h-full w-full items-center justify-center",
+  "avatar-label": "",
+  "avatar-icon": "text-1em",
+  // variants
+  "avatar-solid-white": "bg-base text-base ring-1 ring-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 ring-1 ring-${c}-500 dark:ring-${c}-400`]
+];
+const avatar = [
+  ...dynamicAvatar,
+  staticAvatar
+];
+
+const staticAvatarGroup = {
+  "avatar-group": "flex flex-row-reverse justify-end",
+  "avatar-group-child": "ring-2 ring-$c-background",
+  "avatar-group-margin": "-me-1.5 first:me-0",
+  "avatar-group-label": "text-.9em"
+};
+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",
+  "btn-default-radius": "rounded-md",
+  // base
+  "btn": "btn-rectangle px-1em py-0.5em bg-transparent transition-colors text-0.875em leading-5 gap-x-0.5em rounded-md whitespace-nowrap inline-flex justify-center items-center btn-disabled font-medium cursor-pointer",
+  "btn-disabled": "disabled:n-disabled",
+  "btn-label": "",
+  "btn-icon-label": "text-1em",
+  "btn-leading": "-ml-0.14285714285714285em text-1em",
+  "btn-trailing": "-mr-0.14285714285714285em text-1em",
+  "btn-loading": "animate-spin text-1em",
+  "btn-rectangle": "h-2.5em",
+  "btn-square": "w-2.5em h-2.5em",
+  // 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-${c}-600 dark:focus-visible:outline-${c}-500 focus-visible:outline-2 focus-visible:outline-offset-2`],
+  // 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": "relative flex flex-col rounded-lg overflow-hidden shadow-sm",
+  "card-default-variant": "card-outline-gray",
+  // components
+  "card-header": "",
+  "card-title": "text-2xl font-semibold leading-none tracking-tight",
+  "card-description": "text-sm text-muted",
+  "card-content": "px-4 py-5 pt-0 sm:p-6 sm:pt-0",
+  "card-footer": "flex items-center p-6 pt-0",
+  "card-about": "flex flex-col gap-y-1.5 px-4 py-5 sm:p-6",
+  // static variants
+  "card-soft-gray": "bg-muted border border-base",
+  "card-outline-gray": "bg-base border border-base"
+};
+const dynamicCard = [
+  // dynamic variants
+  [/^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 data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
+};
+const dynamicCollapsible = [
+  // dynamic preset
+];
+const collapsible = [
+  ...dynamicCollapsible,
+  staticCollapsible
+];
+
+const staticDialog = {
+  // base
+  "dialog": "",
+  // sub-components
+  "dialog-overlay": "fixed inset-0 z-50 bg-black/80",
+  "dialog-content": "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-base bg-base p-6 shadow-lg duration-200 sm:rounded-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 sm:gap-x-2"
+};
+const dynamicDialog = [
+  // dynamic preset
+];
+const dialog = [
+  ...dynamicDialog,
+  staticDialog
+];
+
+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",
+  // dropdown-menu-item
+  "dropdown-menu-item-base": "text-left transition-color focus-visible:outline-0",
+  "dropdown-menu-item-leading": "text-1em",
+  "dropdown-menu-item-trailing": "ml-auto opacity-75 text-1em",
+  // dropdown-menu-label
+  "dropdown-menu-label": "px-2 py-1.5 text-1em 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",
+  "dropdown-menu-sub-trigger-leading": "text-1em",
+  "dropdown-menu-sub-trigger-trailing": "ml-auto opacity-75 text-1em",
+  "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"
+};
+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.5 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-error": "text-error-600 dark:text-error-500",
+  "text-success": "text-success-600 dark:text-success-500",
+  "text-warning": "text-warning-600 dark:text-warning-500",
+  // 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-accent": "bg-$c-accent",
+  "bg-accent-foreground": "bg-$c-accent-foreground",
+  "bg-popover": "bg-$c-popover",
+  "bg-popover-foreground": "bg-$c-popover-foreground",
+  // 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`],
+  /**
+   * Since we override the default `size` utility, we need to provide an alternative for it.
+   * @refer https://tailwindcss.com/docs/size
+   * @example area-100 -> w-100 h-100
+   */
+  [/^square-([^-]+)$/, ([, size]) => `w-${size} h-${size}`]
+];
+const general = [
+  ...dynamicGeneral,
+  staticGeneral,
+  staticIcons
+];
+
+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",
+  "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.9em",
+  "input-trailing-padding": "pr-2.9em",
+  // base
+  "input": "text-0.875em leading-6 px-0.8571428571428571em py-0.5em w-full input-disabled ring-base ring-inset placeholder:text-$c-gray-400 block outline-none rounded-md border-0 shadow-sm bg-transparent",
+  "input-input": "h-9",
+  // role='input'
+  "input-textarea": "",
+  // role='textarea'
+  "input-disabled": "disabled:(n-disabled)",
+  "input-status-ring": "ring-opacity-50 dark:ring-opacity-40",
+  "input-status-icon-base": "text-1.042em",
+  "input-leading": "text-1.042em",
+  "input-trailing": "text-1.042em",
+  "input-loading": "animate-spin text-1.042em",
+  // wrappers
+  "input-wrapper": "relative flex items-center",
+  "input-leading-wrapper": "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-0.75em text-$c-gray-400",
+  "input-trailing-wrapper": "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-0.75em text-$c-gray-400",
+  // variants
+  "input-outline-gray": "focus:ring-2 ring-1",
+  "input-outline-black": "ring-1 focus:ring-$c-foreground"
+};
+const dynamicInput = [
+  // config
+  [/^input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus:ring-2 focus:ring-${c}-500 dark:focus:ring-${c}-400`],
+  [/^input-status(-(\S+))?$/, ([, , c = "info"]) => `text-${c}-700 dark:text-${c}-200 placeholder-${c}-400/70 dark:placeholder-${c}-300/70`],
+  // variants
+  [/^input-outline(-(\S+))?$/, ([, , c = "primary"]) => `ring-1 input-focus-${c}`],
+  [/^input-solid(-(\S+))?$/, ([, , c = "primary"]) => ` ring-1 input-focus-${c} ring-${c}-500 dark:ring-${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": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:n-disabled"
+};
+const dynamicLabel = [
+  // dynamic preset
+];
+const label = [
+  ...dynamicLabel,
+  staticLabel
+];
+
+const staticLink = {
+  // base
+  link: ""
+};
+const dynamicLink = [
+  // dynamic preset
+];
+const link = [
+  ...dynamicLink,
+  staticLink
+];
+
+const staticNavLink = {
+  // config
+  "nav-link-default-variant": "nav-link-text-primary",
+  // base
+  "nav-link": "transition-base leading-6 justify-start gap-x-3 rounded-md",
+  // badge
+  "nav-link-badge": "min-w-max whitespace-nowrap rounded-full px-2.5 py-.5 leading-5",
+  // text-variant
+  "nav-link-text-gray": "hover:bg-$c-gray-100 hover:text-$c-gray-950",
+  "nav-link-active-text-gray": "bg-$c-gray-100 text-$c-gray-950",
+  "nav-link-inactive-text-gray": "text-$c-gray-950"
+};
+const dynamicNavLink = [
+  // text-variant
+  [/^nav-link-active-text(-(\S+))?$/, ([, , c = "primary"]) => `bg-$c-gray-100 text-${c}-600 dark:text-${c}-500`],
+  [/^nav-link-inactive-text(-(\S+))?$/, ([, , c = "gray"]) => `text-${c}-800 dark:text-${c}-100`],
+  [/^nav-link-text(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} hover:nav-link-active-text-${c}`],
+  // solid-variant
+  [/^nav-link-active-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-${c}-700 dark:bg-${c}-400 text-white dark:text-${c}-950`],
+  [/^nav-link-inactive-solid(-(\S+))?$/, ([, , c = "primary"]) => `text-white dark:text-${c}-950`],
+  [/^nav-link-solid(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} hover:nav-link-active-solid-${c}`]
+];
+const navLink = [
+  ...dynamicNavLink,
+  staticNavLink
+];
+
+const staticNavLinkGroup = {
+  // base
+  "nav-link-group": "w-60 flex flex-col border-2 border-base rounded-md border-dashed p-2 space-y-1",
+  // panel
+  "nav-link-group-panel": "mt-1 px-2 space-y-1"
+};
+const dynamicNavLinkGroup = [];
+const navLinkGroup = [
+  ...dynamicNavLinkGroup,
+  staticNavLinkGroup
+];
+
+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 flex items-center justify-center",
+  "pagination-ellipsis-icon-base": "w-1em h-1em",
+  "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 staticPopover = {
+  "popover-content": "z-50 w-72 rounded-md border border-base bg-popover p-4 text-popover shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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"
+};
+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 staticRadio = {
+  // base
+  "radio": "radio-primary flex items-center transition-base border border-$c-ring rounded-full p-0.12em h-1em w-1em n-checked:border-brand n-checked:bg-brand",
+  "radio-disabled": "n-disabled",
+  "radio-label": "block text-sm font-medium leading-6",
+  "radio-input": "absolute w-full opacity-0",
+  "radio-reverse": "flex-row-reverse",
+  "radio-peer-focus": "peer-focus-(ring-2 ring-brand ring-offset-2 ring-offset-base)",
+  // wrappers
+  "radio-wrapper": "gap-x-3 relative inline-flex items-center hover:cursor-pointer",
+  // icon
+  "radio-icon-base": "m-auto opacity-0 text-inverted w-full h-full transition-base n-checked:opacity-100",
+  "radio-icon": "i-dot"
+  // refer to general.ts
+};
+const dynamicRadio = [
+  [/^radio-(.*)$/, ([, 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 radio = [
+  ...dynamicRadio,
+  staticRadio
+];
+
+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-wrapper": "flex items-center space-x-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-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-item-label": ""
+};
+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 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-root": "",
+  "select-trigger": "w-full [&>span]:truncate",
+  "select-trigger-trailing-icon": "i-lucide-chevrons-up-down !text-1.042em",
+  "select-trigger-trailing": "ml-auto",
+  "select-trigger-leading": "",
+  "select-value": "h-1.5em",
+  "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-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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",
+  "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": "p-1 w-full",
+  "select-separator": "-mx-1 my-1 h-px bg-muted",
+  "select-item": "select-item-gray relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-1em outline-none data-[disabled]:pointer-events-none data-[disabled]:n-disabled",
+  "select-item-indicator": "absolute left-2 h-0.75em w-0.75em flex items-center justify-center",
+  "select-item-indicator-icon": "i-check",
+  "select-viewport": "p-1",
+  "select-viewport-popper": "h-[--radix-select-trigger-height] w-full min-w-[--radix-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-8 pr-2 text-1em font-semibold",
+  // ⚠️ for overriding purposes only
+  "select-item-selectItem": ""
+};
+const dynamicSelect = [
+  [/^select-([^-]+)-([^-]+)$/, ([, v = "solid", c = "gray"]) => `btn-${v}-${c}`],
+  [/^select-item(-(\S+))?$/, ([, , c = "gray"]) => `focus:bg-${c}-100 focus:text-${c}-800 dark:focus:bg-${c}-800 dark:focus:text-${c}-100`]
+];
+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 staticSkeleton = {
+  // base
+  skeleton: "skeleton-gray text-md animate-pulse rounded-md w-full h-0.5em bg-brand"
+};
+const dynamicSkeleton = [
+  [/^skeleton-(.*)$/, ([, body], { theme }) => {
+    const color = parseColor(body, theme);
+    if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
+      return `n-${body}-100 dark:n-${body}-800`;
+  }]
+];
+const skeleton = [
+  ...dynamicSkeleton,
+  staticSkeleton
+];
+
+const staticSlider = {
+  // configurations
+  "slider-disabled": "n-disabled",
+  "slider-root-vertical": "flex-col w-1em h-full",
+  "slider-track-vertical": "w-0.5em h-full",
+  "slider-range-vertical": "w-full",
+  "slider-thumb-vertical": "w-1.25em h-1.25em",
+  // components
+  "slider-root": "relative flex w-full touch-none select-none items-center",
+  "slider-track": "h-0.5em relative w-full grow overflow-hidden rounded-full bg-muted",
+  "slider-range": "absolute h-full bg-brand",
+  "slider-thumb": "w-1.25em h-1.25em block border-2 border-brand rounded-full bg-base focus-visible:ring-base ring-offset-base transition-colors disabled:slider-disabled focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+  "slider-accent": "n-gray-300 dark:n-gray-800"
+};
+const dynamicSlider = [
+  [/^slider-(.*)$/, ([, 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 slider = [
+  ...dynamicSlider,
+  staticSlider
+];
+
+const staticSwitch = {
+  // base
+  "switch": "bg-brand switch-focus h-1.25em w-2.25em switch-disabled inline-flex shrink-0 cursor-pointer items-center border-2 border-transparent rounded-full shadow-sm",
+  "switch-disabled": "data-[disabled]:n-disabled",
+  "switch-focus": "focus-visible:ring-brand focus-visible:ring-offset-base transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+  // thumb
+  "switch-thumb": "square-1em flex items-center justify-center absolute pointer-events-none block border border-base rounded-full bg-base shadow-lg ring-0 transition-transform",
+  "switch-thumb-checked": "translate-x-1.01em",
+  "switch-thumb-unchecked": "translate-x-0.03em",
+  // icon
+  "switch-icon": "text-0.7em",
+  "switch-icon-unchecked": "text-muted",
+  "switch-icon-checked": "text-muted",
+  // loading
+  "switch-loading-icon": "text-gray animate-spin text-0.8em",
+  "switch-loading-icon-name": "i-loading"
+};
+const dynamicSwitch = [
+  [
+    /^switch-checked(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, color = "primary"], { theme }) => {
+      const parsedColor = parseColor$1(color, theme);
+      if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
+        return `data-[state=checked]:n-${color}-600 dark:data-[state=checked]:n-${color}-500`;
+    }
+  ],
+  [
+    /^switch-unchecked(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, color = "gray"], { theme }) => {
+      const parsedColor = parseColor$1(color, theme);
+      if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
+        return `data-[state=unchecked]:n-${color}-200 dark:data-[state=unchecked]:n-${color}-700/58`;
+    }
+  ]
+];
+const _switch = [
+  ...dynamicSwitch,
+  staticSwitch
+];
+
+const staticTable = {
+  // config
+  "table-default-variant": "table-solid-gray",
+  "table": "",
+  // table-root
+  "table-root-wrapper": "relative w-full overflow-x-auto overflow-y-hidden border border-base rounded-md",
+  "table-root": "w-full caption-bottom text-sm",
+  "table-body": "[&_tr:last-child]:border-0",
+  "table-caption": "mt-4 text-sm text-muted",
+  // table-head
+  "table-head": "h-12 px-4 text-left align-middle font-medium text-muted [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5",
+  "table-head-pinned": "sticky bg-base",
+  "table-head-pinned-left": "left-0",
+  "table-head-pinned-right": "right-0",
+  // table-header
+  "table-header": "[&_tr]:border-b [&_tr]:border-base",
+  // table-row
+  "table-row": "border-b border-base transition-colors hover:bg-muted data-[filter=true]:hover:bg-base data-[state=selected]:bg-muted",
+  // table-cell
+  "table-cell": "p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5",
+  "table-cell-pinned": "sticky bg-base",
+  "table-cell-pinned-left": "left-0",
+  "table-cell-pinned-right": "right-0",
+  // table-empty
+  "table-empty-row": "",
+  "table-empty-cell": "p-4 whitespace-nowrap align-middle text-sm text-muted bg-base",
+  "table-empty": "flex items-center justify-center py-10",
+  // table-loading
+  "table-loading-icon": "animate-spin text-lg",
+  // TODO: to add
+  "table-loading-icon-name": "i-lucide-refresh-ccw",
+  // TODO: to add
+  "table-loading-row": "data-[loading=true]:border-0 absolute inset-x-0 -mt-1.5px",
+  "table-loading-cell": "",
+  "table-loading": "absolute inset-x-0 overflow-hidden p-0",
+  // table-footer
+  "table-footer": "border-t border-base bg-muted font-medium [&>tr]:last:border-b-0"
+};
+const dynamicTable = [];
+const table = [
+  ...dynamicTable,
+  staticTable
+];
+
+const staticTabs = {
+  // configurations
+  "tabs": "transition-colors duration-200 ease-out",
+  "tabs-default-variant": "tabs-soft-black",
+  "tabs-disabled": "n-disabled",
+  // components
+  "tabs-root": "flex flex-col w-full",
+  "tabs-trigger": "w-full focus-visible:z-10",
+  "tabs-list": "flex bg-muted items-center justify-center rounded-md p-1 w-full",
+  "tabs-content": "mt-4 text-base"
+};
+const dynamicTabs = [
+  [/^tabs-([^-]+)-([^-]+)$/, ([, v = "solid", c = "primary"]) => `data-[state=active]:btn-${v}-${c}`]
+];
+const tabs = [
+  ...dynamicTabs,
+  staticTabs
+];
+
+const staticToast = {
+  // config
+  "toast": "pointer-events-auto relative flex w-full space-x-2 justify-end overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all ",
+  "toast-viewport": "fixed top-0 z-100 flex max-h-screen gap-y-4 w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-420px",
+  "toast-wrapper": "w-0 flex flex-1 flex-col gap-2",
+  "toast-title": "text-sm font-semibold [&+div]:text-xs",
+  "toast-description": "text-sm opacity-90",
+  "toast-leading": "square-5",
+  "toast-close": "bg-transparent flex items-center justify-center absolute right-1 top-1 rounded-md p-1 text-brand/80 opacity-0 transition-opacity hover:text-brand focus:opacity-100 focus:ring-1 focus:ring-brand/80 focus:outline-none group-hover:opacity-100",
+  "toast-close-icon": "i-close",
+  "toast-close-icon-base": "h-1em w-1em",
+  "toast-info": "grid gap-1",
+  "toast-actions": "flex shrink-0 gap-1.5",
+  "toast-progress": "h-1 rounded-none"
+};
+const dynamicToast = [
+  // dynamic variants
+  [/^toast-solid(-(\S+))?$/, ([, , c = "primary"]) => `alert-solid-${c}`],
+  [/^toast-soft(-(\S+))?$/, ([, , c = "primary"]) => `alert-soft-${c}`],
+  [/^toast-outline(-(\S+))?$/, ([, , c = "primary"]) => `alert-outline-${c}`],
+  [/^toast-border(-(\S+))?$/, ([, , c = "primary"]) => `alert-border-${c}`]
+];
+const toast = [
+  ...dynamicToast,
+  staticToast
+];
+
+const staticToggle = {
+  // configurations
+  toggle: ""
+};
+const dynamicToggle = [
+  [
+    /^toggle-on(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, variant = "soft", color = "accent"]) => `data-[state=on]:btn-${variant}-${color}`
+  ],
+  [
+    /^toggle-off(?:-([^-]+))?(?:-([^-]+))?$/,
+    ([, variant = "ghost", color = "muted"]) => `data-[state=off]:btn-${variant}-${color}`
+  ]
+];
+const toggle = [
+  ...dynamicToggle,
+  staticToggle
+];
+
+const staticTooltip = {
+  "tooltip-content": "z-50 overflow-hidden rounded-md px-0.75em py-0.375em text-xs shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+  "tooltip-white": "border border-base bg-popover text-popover",
+  "tooltip-black": "border border-foreground bg-popover-foreground text-popover-foreground"
+};
+const dynamicTooltip = [
+  [/^tooltip-(.*)$/, ([, c], { theme }) => {
+    const color = parseColor(c, theme);
+    if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
+      return `bg-${c}-100 border-${c}-50 text-${c}-800 dark:bg-${c}-800 dark:border-${c}-800 dark:text-${c}-100`;
+  }]
+];
+const tooltip = [
+  ...dynamicTooltip,
+  staticTooltip
+];
+
+const shortcuts = [
+  ...general,
+  ...breadcrumb,
+  ...accordion,
+  ...btn,
+  ...dialog,
+  ...formGroup,
+  ...input,
+  ...icon,
+  ..._switch,
+  ...alert,
+  ...badge,
+  ...avatarGroup,
+  ...avatar,
+  ...indicator,
+  ...kbd,
+  ...navLink,
+  ...navLinkGroup,
+  ...link,
+  ...radio,
+  ...checkbox,
+  ...slider,
+  ...progress,
+  ...skeleton,
+  ...tabs,
+  ...select,
+  ...separator,
+  ...card,
+  ...table,
+  ...dropdowMenu,
+  ...label,
+  ...popover,
+  ...tooltip,
+  ...pagination,
+  ...toast,
+  ...toggle,
+  ...collapsible,
+  ...radioGroup,
+  ...form
+];
+
+export { shortcuts as s };