@una-ui/preset-edge 1.0.0-alpha.0-29172721.c5fd9aa → 1.0.0-alpha.0-29173950.b6a8c03

package/dist/shared/{preset-edge.BbwyXb2y.mjs → preset-edge.BfS0VXMj.mjs}

@@ -6,13 +6,13 @@ const staticAccordion = {
   "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",
+  "accordion-divider": "divide-(y border)",
+  "accordion-border": "border-(~ border) rounded-md",
   // base
   "accordion": "flex-(~ col) relative w-full",
   "accordion-item": "w-full",
   "accordion-button": "justify-start",
-  "accordion-panel": "text-(muted 0.875em) border-(t $c-divider) accordion-button-padding",
+  "accordion-panel": "text-(muted-foreground 0.875em) border-(t border) accordion-button-padding",
   "accordion-leading": "text-1.2em",
   "accordion-trailing": "flex transition items-center text-1em duration-300",
   "accordion-label": "flex w-full text-1em",
@@ -51,8 +51,8 @@ const staticAlert = {
   "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"
+  "alert-solid-white": "rounded-md text-brand bg-background n-foreground border",
+  "alert-solid-black": "rounded-md text-brand bg-foreground n-background dark:n-gray-950 border border-foreground"
 };
 const dynamicAlert = [
   // variants
@@ -74,7 +74,7 @@ const staticAlertDialog = {
   "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-description": "text-muted-foreground text-sm",
   "alert-dialog-header": "flex flex-col gap-2 text-center sm:text-left",
   "alert-dialog-footer": "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
 };
@@ -90,12 +90,12 @@ 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"
+  "aspect-ratio-soft-gray": "bg-muted border border-border",
+  "aspect-ratio-outline-gray": "bg-background border border-border"
 };
 const dynamicAspectRatio = [
-  [/^aspect-ratio-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 dark:bg-${c}-900 border-${c}-200 dark:border-${c}-700/58`],
-  [/^aspect-ratio-outline(-(\S+))?$/, ([, , c = "gray"]) => `border border-${c}-200 dark:border-${c}-700/58`]
+  [/^aspect-ratio-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 dark:bg-${c}-900 border-${c}-200 dark:border-${c}-800`],
+  [/^aspect-ratio-outline(-(\S+))?$/, ([, , c = "gray"]) => `border border-${c}-200 dark:border-${c}-800`]
 ];
 const aspectRatio = [
   ...dynamicAspectRatio,
@@ -110,12 +110,12 @@ const staticAvatar = {
   "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"
+  "avatar-solid-white": "bg-background text-foreground border border-border",
+  "avatar-solid-black": "bg-foreground text-background"
 };
 const dynamicAvatar = [
   // variants
-  [/^avatar-solid(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-600 dark:bg-${c}-500 text-inverted`],
+  [/^avatar-solid(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-600 dark:bg-${c}-500 text-background`],
   [/^avatar-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 text-${c}-700 dark:text-${c}-400 dark:bg-${c}-900`],
   [/^avatar-outline(-(\S+))?$/, ([, , c = "gray"]) => `bg-transparent text-${c}-500 dark:text-${c}-400 border border-${c}-500 dark:border-${c}-400`]
 ];
@@ -145,9 +145,9 @@ const staticBadge = {
   "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"
+  "badge-soft-gray": "bg-muted text-muted-foreground n-gray-900 dark:n-gray-50 ring-1 ring-gray-700/10 dark:ring-gray-400/30",
+  "badge-solid-black": "bg-foreground text-background n-gray-300 dark:n-gray-600",
+  "badge-outline-white": "bg-background text-foreground ring-1 ring-ring n-gray-600 dark:n-gray-300"
 };
 const dynamicBadge = [
   // variants
@@ -169,7 +169,7 @@ const staticBreadcrumb = {
   "breadcrumb-ellipsis-icon": "i-radix-icons-dots-horizontal",
   // components
   "breadcrumb-root": "",
-  "breadcrumb-list": "flex flex-wrap items-center break-words text-muted",
+  "breadcrumb-list": "flex flex-wrap items-center break-words text-muted-foreground",
   "breadcrumb-link": "transition-colors font-normal px-1.5 sm:px-2.5",
   "breadcrumb-item": "inline-flex items-center gap-1.5",
   "breadcrumb-separator": "flex",
@@ -197,7 +197,7 @@ const staticBtn = {
   "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": "text-foreground btn-rectangle bg-transparent transition-colors leading-1.4285714285714286em shrink-0 gap-x-0.5714285714285714em rounded-md whitespace-nowrap inline-flex justify-center items-center btn-disabled font-medium outline-none",
   "btn-disabled": "disabled:n-disabled",
   "btn-label": "",
   "btn-icon-label": "size-1.1428571428571428em",
@@ -210,33 +210,49 @@ const staticBtn = {
   "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"
+  "btn-solid-primary": "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 btn-focus",
+  "btn-solid": "btn-solid-primary",
+  "btn-solid-gray": "border bg-background dark:bg-input/50 shadow-xs bg-accent dark:hover:bg-input btn-focus",
+  "btn-solid-secondary": "btn-solid-gray",
+  "btn-solid-white": "border bg-background shadow-xs hover:bg-accent dark:border-input dark:hover:bg-input btn-focus",
+  "btn-solid-black": "bg-foreground text-background shadow-xs btn-focus",
+  "btn-outline-primary": "shadow-xs text-primary bg-background dark:bg-input/30 border border-primary hover:bg-primary/10 btn-focus",
+  "btn-outline": "btn-outline-primary",
+  "btn-outline-gray": "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 btn-focus",
+  "btn-outline-white": "text-foreground border shadow-xs hover:bg-input/50 btn-focus",
+  "btn-link-primary": "text-primary hover:underline underline-offset-4 btn-focus",
+  "btn-link": "btn-link-primary",
+  "btn-link-gray": "text-muted-foreground hover:text-foreground hover:underline underline-offset-4 btn-focus",
+  "btn-link-black": "text-foreground hover:underline underline-offset-4 btn-focus",
+  "btn-link-muted": "text-muted-foreground hover:underline underline-offset-4 btn-focus",
+  "btn-link-accent": "text-accent-foreground hover:underline underline-offset-4 btn-focus",
+  "btn-text-primary": "text-primary btn-focus",
+  "btn-text": "btn-text-primary",
+  "btn-text-gray": "text-muted-foreground hover:text-foreground btn-focus",
+  "btn-text-black": "text-foreground btn-focus",
+  "btn-text-muted": "text-muted-foreground btn-focus",
+  "btn-text-accent": "text-accent-foreground hover:text-accent-foreground/80 btn-focus",
+  "btn-soft-primary": "bg-primary/10 text-primary shadow-xs hover:bg-primary/15 btn-focus",
+  "btn-soft": "btn-soft-primary",
+  "btn-soft-gray": "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 btn-focus",
+  "btn-soft-secondary": "btn-soft-gray",
+  "btn-soft-black": "text-foreground bg-background shadow-xs btn-focus",
+  "btn-soft-accent": "text-accent-foreground bg-accent btn-focus",
+  "btn-ghost-primary": "hover:bg-primary/10 text-primary dark:hover:bg-primary/15 btn-focus",
+  "btn-ghost": "btn-ghost-primary",
+  "btn-ghost-gray": "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 btn-focus",
+  "btn-ghost-muted": "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50 btn-focus",
+  "btn-ghost-white": "text-foreground hover:bg-secondary/50 btn-focus",
+  "btn-focus-primary": "focus-visible:ring-3px focus-visible:border focus-visible:border-ring focus-visible:ring-ring/50",
+  "btn-focus": "btn-focus-primary"
 };
 const dynamicBtn = [
   // base
-  [/^btn-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-${c}-600 dark:focus-visible:ring-${c}-500`],
+  [/^btn-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-3px focus-visible:border focus-visible:border-${c}-400 dark:focus-visible:border-${c}-800 focus-visible:ring-${c}-400/50 dark:focus-visible:ring-${c}-800/50`],
   // variants
-  [/^btn-solid(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-inverted shadow-sm bg-${c}-600 hover:bg-${c}-500 dark:bg-${c}-500 dark:hover:bg-${c}-400`],
+  [/^btn-solid(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-background shadow-xs 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-outline(-(\S+))?$/, ([, , c = "primary"]) => `shadow-xs btn-focus-${c} text-${c}-500 dark:text-${c}-400 bg-background dark:bg-input/30 border border-${c}-500 dark:border-${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`]
@@ -248,20 +264,20 @@ const btn = [
 
 const staticCard = {
   // base
-  "card": "rounded-xl shadow text-base",
+  "card": "rounded-xl shadow text-foreground",
   // 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-description": "text-sm text-muted-foreground",
   "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"
+  "card-soft-gray": "bg-card",
+  "card-outline-gray": "bg-card border"
 };
 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`]
+  [/^card-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 dark:bg-${c}-900 border-${c}-200 dark:border-${c}-800`],
+  [/^card-outline(-(\S+))?$/, ([, , c = "gray"]) => `border border-${c}-200 dark:border-${c}-800`]
 ];
 const card = [
   ...dynamicCard,
@@ -270,24 +286,28 @@ const card = [
 
 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": "square-1em shrink-0 rounded-4px shadow-xs transition-shadow outline-none disabled:n-disabled border border-input dark:border-input",
   "checkbox-label": "block",
   "checkbox-reverse": "flex-row-reverse",
   // wrappers
   "checkbox-wrapper": "gap-x-3 relative inline-flex items-center hover:cursor-pointer",
   // icon
-  "checkbox-indicator": "flex items-center justify-center h-full w-full data-[state=unchecked]:opacity-0 transition-base opacity-100 text-inverted",
-  "checkbox-icon-base": "w-1em h-1em",
+  "checkbox-indicator": "flex items-center justify-center text-primary-foreground transition-none",
+  "checkbox-icon-base": "square-0.875rem",
   "checkbox-checked-icon": "i-check",
   "checkbox-unchecked-icon": "",
-  "checkbox-indeterminate-icon": "i-lucide-minus"
+  "checkbox-indeterminate-icon": "i-lucide-minus",
+  "checkbox-focus-primary": "focus-visible:ring-3px focus-visible:border-ring focus-visible:ring-ring/50",
+  "checkbox-checked-primary": "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
+  "checkbox-checked": "checkbox-checked-primary",
+  "checkbox-indeterminate-primary": "data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary",
+  "checkbox-indeterminate": "checkbox-indeterminate-primary"
 };
 const dynamicCheckbox = [
-  [/^checkbox-(.*)$/, ([, 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`;
-  }]
+  [/^checkbox(-(\S+))?$/, ([, , c = "primary"]) => `checkbox-focus-${c} checkbox-checked-${c} checkbox-indeterminate-${c}`],
+  [/^checkbox-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-3px focus-visible:border-${c}-200 dark:focus-visible:border-${c}-800 focus-visible:ring-${c}-200/50 dark:focus-visible:ring-${c}-800/50`],
+  [/^checkbox-indeterminate(-(\S+))?$/, ([, , c = "primary"]) => `data-[state=indeterminate]:(bg-${c}-600 text-${c}-50) dark:data-[state=indeterminate]:(bg-${c}-500 text-${c}-900)`],
+  [/^checkbox-checked(-(\S+))?$/, ([, , c = "primary"]) => `data-[state=checked]:(bg-${c}-600 text-${c}-50) dark:data-[state=checked]:(bg-${c}-500 text-${c}-900)`]
 ];
 const checkbox = [
   ...dynamicCheckbox,
@@ -317,15 +337,15 @@ const staticCombobox = {
   "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": "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-0.5em py-0.375em text-1em outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
   "combobox-item-indicator": "ml-auto",
   "combobox-item-indicator-icon": "",
   "combobox-item-indicator-icon-name": "i-check",
   "combobox-anchor": "w-full",
   "combobox-empty": "py-1.7142857142857142em text-center text-1em leading-1.4285714285714286em",
   "combobox-group": "overflow-hidden p-0.2857142857142857em text-foreground",
-  "combobox-label": "px-0.6666666666666666em py-0.5em text-0.8571428571428571em leading-1.1428571428571428em text-muted 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-[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",
+  "combobox-label": "px-0.6666666666666666em py-0.5em text-0.8571428571428571em leading-1.1428571428571428em text-muted-foreground font-medium",
+  "combobox-list": "z-50 w-[--reka-popper-anchor-width] rounded-md border bg-popover text-popover-foreground overflow-hidden shadow-md outline-none data-[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",
   "combobox-separator": "bg-border -mx-1 h-px",
   "combobox-viewport": "max-h-300px scroll-py-1 overflow-x-hidden overflow-y-auto"
 };
@@ -344,10 +364,10 @@ const staticDialog = {
   "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-scroll-content": "relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
   "dialog-header": "flex flex-col gap-y-1.5 text-center sm:text-left",
   "dialog-title": "text-lg font-semibold leading-none tracking-tight",
-  "dialog-description": "text-sm text-muted",
+  "dialog-description": "text-sm text-muted-foreground",
   "dialog-close": "absolute right-4 top-4",
   "dialog-footer": "flex flex-col-reverse sm:flex-row sm:justify-end gap-2"
 };
@@ -371,7 +391,7 @@ const staticDrawer = {
   "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-description": "text-muted-foreground text-sm",
   "drawer-footer": "mt-auto flex flex-col gap-2 p-4"
 };
 const dynamicDrawer = [
@@ -385,13 +405,13 @@ const drawer = [
 const staticDropdownMenu = {
   // configurations
   "dropdown-menu": "",
-  "dropdown-menu-default-variant": "btn-solid-white",
+  "dropdown-menu-default-variant": "btn-outline-gray",
   // dropdown-menu-trigger
   "dropdown-menu-trigger": "",
   "dropdown-menu-trigger-leading": "",
   "dropdown-menu-trigger-trailing": "ml-auto",
   // dropdown-menu-content
-  "dropdown-menu-content": "z-50 min-w-32 overflow-hidden rounded-md border border-base bg-popover p-1 text-popover shadow-md",
+  "dropdown-menu-content": "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
   // dropdown-menu-item
   "dropdown-menu-item-base": "text-left transition-color focus-visible:outline-0 select-none",
   "dropdown-menu-item-leading": "",
@@ -410,7 +430,7 @@ const staticDropdownMenu = {
   "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"
+  "dropdown-menu-sub-content": "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg"
 };
 const dynamicDropdownMenu = [
   [/^dropdown-menu-([^-]+)-([^-]+)$/, ([, v = "solid", c = "white"]) => `btn-${v}-${c}`],
@@ -425,8 +445,8 @@ const staticForm = {
   // base
   "form": "",
   "form-field": "",
-  "form-field-description": "text-muted",
-  "form-field-hint": "text-sm leading-none text-muted",
+  "form-field-description": "text-muted-foreground",
+  "form-field-hint": "text-sm leading-none text-muted-foreground",
   "form-field-message": "",
   // wrappers
   "form-field-top-wrapper": "flex flex-col space-y-1.5 pb-0.5",
@@ -439,7 +459,7 @@ const staticForm = {
   "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-description": "text-sm text-muted-foreground",
   "form-item": "space-y-2"
 };
 const form = [
@@ -449,8 +469,8 @@ const form = [
 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-description": "text-0.8rem text-muted-foreground",
+  "form-group-hint": "text-sm leading-none text-muted-foreground",
   "form-group-message": "text-0.8em transition-all duration-1000 ease-in-out",
   // wrappers
   "form-group-top-wrapper": "flex flex-col space-y-1.5",
@@ -464,7 +484,7 @@ const staticFormGroup = {
   // counter
   "form-group-counter-wrapper": "text-0.8em",
   "form-group-counter-error": "text-error",
-  "form-group-counter-current": "text-accent",
+  "form-group-counter-current": "text-accent-foreground",
   "form-group-counter-separator": "text-muted",
   "form-group-counter-max": "text-muted"
 };
@@ -487,14 +507,6 @@ 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",
@@ -503,25 +515,6 @@ const staticGeneral = {
   "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
@@ -543,15 +536,15 @@ const staticHoverCard = {
   "hover-card-default-variant": "outline-gray",
   // components
   "hover-card-trigger": "",
-  "hover-card-content": "bg-base text-popover animate-in fade-in-0 zoom-in-95 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 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden",
-  "hover-card-arrow": "!bg-transparent !border-none -mt-1px fill-base stroke-base",
+  "hover-card-content": "bg-background text-popover-foreground animate-in fade-in-0 zoom-in-95 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 z-50 w-64 rounded-md border p-4 shadow-md outline-none",
+  "hover-card-arrow": "!bg-transparent !border-none -mt-1px fill-background stroke-border",
   // static variants
-  "hover-card-soft-gray": "bg-muted border border-base",
-  "hover-card-outline-gray": "bg-base border border-base"
+  "hover-card-soft-gray": "bg-muted border border-border",
+  "hover-card-outline-gray": "bg-background border border-border"
 };
 const dynamicHoverCard = [
-  [/^hover-card-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 fill-${c}-50 stroke-${c}-200 border-${c}-200 dark:(bg-${c}-900 border-${c}-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)`]
+  [/^hover-card-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 fill-${c}-50 stroke-${c}-200 border-${c}-200 dark:(bg-${c}-900 border-${c}-800 fill-${c}-900 stroke-${c}-800)`],
+  [/^hover-card-outline(-(\S+))?$/, ([, , c = "gray"]) => `border stroke-${c}-200 border-${c}-200 dark:(border-${c}-800 stroke-${c}-800)`]
 ];
 const hoverCard = [
   ...dynamicHoverCard,
@@ -573,7 +566,7 @@ const staticIndicator = {
   "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": "absolute min-h-1.5em min-w-1.5em flex items-center justify-center rounded-full font-medium py-none px-0.3em ring-2 ring-background",
   // indicator type sizes
   "indicator-dot": "size-0.45em",
   "indicator-label": "size-0.75em",
@@ -583,10 +576,12 @@ const staticIndicator = {
   "indicator-top-right": "top-0 -ml-1.3em -mt-0.1em",
   "indicator-bottom-right": "bottom-0 -ml-1.3em -mb-0.1em",
   "indicator-top-left": "top-0 left-0 -mr-1.3em -mt-0.1em",
-  "indicator-bottom-left": "bottom-0 left-0 -mr-1.3em -mb-0.1em"
+  "indicator-bottom-left": "bottom-0 left-0 -mr-1.3em -mb-0.1em",
+  "indicator-solid-primary": "bg-primary text-primary-foreground",
+  "indicator-solid": "indicator-solid-primary"
 };
 const dynamicIndicator = [
-  [/^indicator-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-${c}-600 dark:bg-${c}-500 text-inverted`]
+  [/^indicator-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-${c}-600 dark:bg-${c}-500 text-background`]
 ];
 const indicator = [
   ...dynamicIndicator,
@@ -604,7 +599,7 @@ const staticInput = {
   "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": "text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground text-0.875em leading-1.4285714285714286em px-0.8571428571428571em bg-transparent w-full focus-visible:outline-none input-disabled placeholder:text-muted-foreground block rounded-md shadow-xs 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",
@@ -617,19 +612,20 @@ const staticInput = {
   "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",
+  "input-leading-wrapper": "pointer-events-none absolute inset-y-0 start-0 flex items-center px-0.8571428571428571em text-muted-foreground",
+  "input-trailing-wrapper": "pointer-events-none absolute inset-y-0 end-0 flex items-center px-0.8571428571428571em text-muted-foreground",
   // variants
-  "input-outline-gray": "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"
+  "input-outline-gray": "border border-input focus-visible:ring-input/50 focus-visible:ring-3px",
+  "input-outline-black": "border border-ring focus-visible:ring-ring/50 focus-visible:ring-3px",
+  "input-focus-primary": "focus-visible:ring-3px focus-visible:border-ring focus-visible:ring-ring/50"
 };
 const dynamicInput = [
   // config
-  [/^input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-${c}-500 dark:focus-visible:ring-${c}-400 focus-visible:ring-1`],
+  [/^input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-3px focus-visible:border-${c}-400 dark:focus-visible:border-${c}-800 focus-visible:ring-${c}-400/50 dark:focus-visible:ring-${c}-800/50`],
   [/^input-status(-(\S+))?$/, ([, , c = "info"]) => `text-${c}-700 dark:text-${c}-200 placeholder:text-${c}-500 dark:placeholder:text-${c}-400`],
   // variants
-  [/^input-outline(-(\S+))?$/, ([, , c = "primary"]) => `border border-input input-focus-${c}`],
-  [/^input-solid(-(\S+))?$/, ([, , c = "primary"]) => `input-focus-${c} border border-${c}-500 dark:border-${c}-400`]
+  [/^input-outline(-(\S+))?$/, ([, , c = "primary"]) => `border bg-transparent dark:bg-input/30 border-input input-focus-${c}`],
+  [/^input-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-transparent dark:bg-input/30 input-focus-${c} border border-${c}-500 dark:border-${c}-400`]
 ];
 const input = [
   ...dynamicInput,
@@ -644,7 +640,7 @@ const staticKbd = {
 };
 const dynamicKbd = [
   // modifiers
-  [/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-inset ring-${c}-200 dark:ring-${c}-700/58`],
+  [/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-inset ring-${c}-200 dark:ring-${c}-800`],
   // variants
   [/^kbd-solid(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-${c}-50 text-${c}-500 dark:bg-${c}-900 dark:text-${c}-400`],
   [/^kbd-outline(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-transparent text-${c}-500 dark:text-${c}-400`]
@@ -684,9 +680,9 @@ const staticNavigationMenu = {
   "navigation-menu-disabled": "n-disabled",
   // components
   "navigation-menu-indicator": "absolute data-[state=hidden]:opacity-0 duration-200 top-full data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut 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-indicator-arrow": "relative top-70% h-12px w-12px rotate-45deg border bg-background",
   "navigation-menu-content": "left-0 top-0 w-full md:absolute md:w-auto",
-  "navigation-menu-viewport": "origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover shadow md:w-[--reka-navigation-menu-viewport-width]",
+  "navigation-menu-viewport": "origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow md:w-[--reka-navigation-menu-viewport-width]",
   "navigation-menu-link": "",
   "navigation-menu-trigger": "",
   "navigation-menu-trigger-trailing": "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
@@ -695,7 +691,7 @@ const staticNavigationMenu = {
   "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-content-item-description": "line-clamp-2 text-left text-muted-foreground leading-5",
   "navigation-menu-list-horizontal": "flex flex-1 list-none items-center justify-center gap-x-1",
   "navigation-menu-list-vertical": "max-w-none list-none flex-col items-start gap-1 space-x-0",
   "navigation-menu-viewport-wrapper": "",
@@ -741,7 +737,7 @@ const dynamicPagination = [
   ],
   [
     /^pagination-unselected(?:-([^-]+))?(?:-([^-]+))?$/,
-    ([, variant = "solid", color = "white"]) => `data-[selected=false]:btn-${variant}-${color}`
+    ([, variant = "solid", color = "gray"]) => `data-[selected=false]:btn-${variant}-${color}`
   ]
 ];
 const pagination = [
@@ -750,7 +746,7 @@ const pagination = [
 ];
 
 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"
+  "popover-content": "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground 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
@@ -767,13 +763,18 @@ const staticProgress = {
   "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"
+  "progress-foreground": "n-foreground",
+  "progress-background": "n-background",
+  "progress-primary": "n-primary",
+  "progress-secondary": "n-secondary",
+  "progress-accent": "n-accent",
+  "progress-destructive": "n-destructive",
+  "progress-muted": "n-muted"
 };
 const dynamicProgress = [
   [/^progress-(.*)$/, ([, body], { theme }) => {
     const color = parseColor(body, theme);
-    if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
+    if (color?.color)
       return `n-${body}-600 dark:n-${body}-500`;
   }]
 ];
@@ -790,17 +791,21 @@ const staticRadioGroup = {
   // 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": "aspect-square rounded-full border border-brand text-brand shadow-xs focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:n-disabled",
   "radio-group-item-label": "text-0.875em font-medium",
-  "radio-group-item-description": "text-0.875em text-muted ml-[calc(1.1em+0.5rem)]",
+  "radio-group-item-description": "text-0.875em text-muted-foreground ml-[calc(1.1em+0.5rem)]",
   "radio-group-indicator": "flex items-center justify-center",
   "radio-group-indicator-icon-base": "h-0.875em w-0.875em fill-brand",
-  "radio-group-indicator-icon": "i-dot"
+  "radio-group-indicator-icon": "i-dot",
+  "radio-group-primary": "n-primary",
+  "radio-group-secondary": "n-secondary",
+  "radio-group-accent": "n-accent",
+  "radio-group-muted": "n-muted"
 };
 const dynamicRadioGroup = [
   [/^radio-group-(.*)$/, ([, body], { theme }) => {
     const color = parseColor(body, theme);
-    if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
+    if (color?.color)
       return `n-${body}-600 dark:n-${body}-500`;
   }]
 ];
@@ -815,17 +820,17 @@ const staticResizable = {
   // 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": "relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:outline-none data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90",
   "resizable-handle-icon-wrapper": "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border",
   "resizable-handle-icon": "square-2.5",
   // static variants
   "resizable-handle-solid-gray": "bg-border focus-visible:ring-foreground/58",
-  "resizable-handle-solid-black": "bg-inverted focus-visible:ring-foreground/58",
-  "resizable-handle-outline-gray": "ring-1 ring-base focus-visible:ring-foreground/58"
+  "resizable-handle-solid-black": "bg-foreground focus-visible:ring-foreground/58",
+  "resizable-handle-outline-gray": "ring-1 ring-ring focus-visible:ring-foreground/58"
 };
 const dynamicResizable = [
-  [/^resizable-handle-solid(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-200 dark:bg-${c}-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`]
+  [/^resizable-handle-solid(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-200 dark:bg-${c}-800 focus-visible:ring-${c}-200 dark:focus-visible:ring-${c}-800`],
+  [/^resizable-handle-outline(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-${c}-200 dark:ring-${c}-800 focus-visible:ring-${c}-200 dark:focus-visible:ring-${c}-800`]
 ];
 const resizable = [
   ...dynamicResizable,
@@ -848,8 +853,8 @@ 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`;
+    if (parsedColor?.color)
+      return `bg-${c}-200 dark:bg-${c}-800`;
     return void 0;
   }]
 ];
@@ -874,11 +879,11 @@ const staticSelect = {
   "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-[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": "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground 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": "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": "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-1em outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:n-disabled",
   "select-item-indicator": "absolute right-2 size-1.1428571428571428em flex items-center justify-center",
   "select-item-indicator-icon": "i-check",
   "select-viewport": "p-1",
@@ -894,13 +899,13 @@ const staticSelect = {
 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)
+    if (parsedColor?.color)
       return `btn-${v}-${c}`;
     return void 0;
   }],
   [/^select-item(-(\S+))?$/, ([, , c = "gray"], { theme }) => {
     const parsedColor = parseColor$1(c || "gray", theme);
-    if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
+    if (parsedColor?.color)
       return `focus:bg-${c || "gray"}-100 focus:text-${c || "gray"}-800 dark:focus:bg-${c || "gray"}-800 dark:focus:text-${c || "gray"}-100`;
     return void 0;
   }]
@@ -914,7 +919,7 @@ 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",
+  "separator-content": "text-0.75em text-muted-foreground bg-background absolute flex justify-center items-center",
   // orientation states
   "separator-horizontal": "h-px my-4 w-full border-t-0.0625em",
   "separator-vertical": "w-px mx-4 h-full border-l-0.0625em",
@@ -928,13 +933,13 @@ const staticSeparator = {
   "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"
+  "separator-solid-gray": "border-border"
 };
 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`]
+  [/^separator-solid(-(\S+))?$/, ([, , c = "gray"]) => `border-solid border-${c}-200 dark:border-${c}-800`],
+  [/^separator-dashed(-(\S+))?$/, ([, , c = "gray"]) => `border-dashed border-${c}-200 dark:border-${c}-800`],
+  [/^separator-dotted(-(\S+))?$/, ([, , c = "gray"]) => `border-dotted border-${c}-200 dark:border-${c}-800`]
 ];
 const separator = [
   ...dynamicSeparator,
@@ -945,14 +950,14 @@ const staticSheet = {
   // base
   "sheet": "",
   // sub components
-  "sheet-content": "fixed z-50 gap-4 bg-base p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "sheet-content": "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   "sheet-portal": "",
   "sheet-overlay": "fixed inset-0 z-50 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/80 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
   "sheet-close": "absolute right-4 top-4",
-  "sheet-description": "text-sm text-muted",
+  "sheet-description": "text-sm text-muted-foreground",
   "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",
+  "sheet-title": "text-lg font-semibold text-foreground",
   // 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",
@@ -1025,12 +1030,12 @@ const sidebar = [
 
 const staticSkeleton = {
   // base
-  skeleton: "skeleton-gray text-md animate-pulse rounded-md w-full h-0.5em bg-brand"
+  skeleton: "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)
+    if (color?.color)
       return `n-${body}-100 dark:n-${body}-800`;
   }]
 ];
@@ -1040,23 +1045,20 @@ const skeleton = [
 ];
 
 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"
+  "slider-root": "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+  "slider-track": "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+  "slider-range": "bg-brand absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+  "slider-thumb": "square-1em border-brand bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-none disabled:n-disabled",
+  "slider-primary": "n-primary",
+  "slider-secondary": "n-secondary",
+  "slider-accent": "n-accent",
+  "slider-muted": "n-muted"
 };
 const dynamicSlider = [
   [/^slider-(.*)$/, ([, body], { theme }) => {
     const color = parseColor(body, theme);
-    if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
+    if (color?.color)
       return `n-${body}-600 dark:n-${body}-500`;
   }]
 ];
@@ -1067,27 +1069,30 @@ const slider = [
 
 const staticSwitch = {
   // base
-  "switch": "h-1.25em w-2.25em switch-disabled inline-flex shrink-0 cursor-pointer items-center border-2 border-transparent rounded-full shadow-sm transition-colors",
+  "switch": "h-1.25em w-2.25em switch-disabled inline-flex shrink-0 cursor-pointer items-center border-2 border-transparent rounded-full shadow-xs transition-colors",
   "switch-disabled": "data-[disabled]:n-disabled",
   // thumb
-  "switch-thumb": "square-1em flex items-center justify-center pointer-events-none block rounded-full bg-base shadow-lg ring-0 transition-transform",
+  "switch-thumb": "square-1em flex items-center justify-center pointer-events-none block rounded-full bg-background ring-0 transition-transform",
   "switch-thumb-checked": "translate-x-1.01em",
   "switch-thumb-unchecked": "translate-x-0.03em",
   // icons
   "switch-icon": "text-0.7em",
-  "switch-icon-unchecked": "text-muted",
-  "switch-icon-checked": "text-muted",
+  "switch-icon-unchecked": "text-muted-foreground",
+  "switch-icon-checked": "text-muted-foreground",
   // loading
-  "switch-loading-icon": "text-gray animate-spin text-0.8em",
+  "switch-loading-icon": "text-muted-foreground animate-spin text-0.8em",
   "switch-loading-icon-name": "i-loading",
-  "switch-focus-gray": "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-base focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+  "switch-checked-primary": "data-[state=checked]:bg-primary",
+  "switch-checked": "switch-checked-primary",
+  "switch-unchecked-gray": "data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+  "switch-unchecked": "switch-unchecked-gray"
 };
 const dynamicSwitch = [
   // base
-  [/^switch-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-${c}-600 dark:focus-visible:ring-${c}-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background`],
+  [/^switch-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-3px focus-visible:outline-none focus-visible:border focus-visible:border-${c}-200 dark:focus-visible:border-${c}-800 focus-visible:ring-${c}-200/50 dark:focus-visible:ring-${c}-800/50`],
   // variants
   [/^switch-checked(-(\S+))?$/, ([, , c = "primary"]) => `data-[state=checked]:switch-focus-${c} data-[state=checked]:bg-${c}-600 dark:data-[state=checked]:bg-${c}-500`],
-  [/^switch-unchecked(-(\S+))?$/, ([, , c = "gray"]) => `data-[state=unchecked]:switch-focus-${c} data-[state=unchecked]:bg-${c}-200 dark:data-[state=unchecked]:bg-${c}-700/58`]
+  [/^switch-unchecked(-(\S+))?$/, ([, , c = "gray"]) => `data-[state=unchecked]:switch-focus-${c} data-[state=unchecked]:bg-${c}-200 dark:data-[state=unchecked]:bg-${c}-800/80`]
 ];
 const _switch = [
   ...dynamicSwitch,
@@ -1098,27 +1103,27 @@ const staticTable = {
   // config
   "table-default-variant": "table-solid-gray",
   // table-root
-  "table-root": "relative w-full overflow-x-auto overflow-y-hidden border border-base rounded-md",
+  "table-root": "relative w-full overflow-x-auto overflow-y-hidden border border-border rounded-md",
   "table": "w-full caption-bottom text-sm",
   "table-body": "[&_tr:last-child]:border-0",
-  "table-caption": "mt-4 text-sm text-muted",
+  "table-caption": "mt-4 text-sm text-muted-foreground",
   // 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": "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5",
+  "table-head-pinned": "sticky bg-background",
   "table-head-pinned-left": "left-0",
   "table-head-pinned-right": "right-0",
   // table-header
-  "table-header": "[&_tr]:border-b [&_tr]:border-base",
+  "table-header": "[&_tr]:border-b [&_tr]:border-border",
   // 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-row": "border-b border-border transition-colors hover:bg-muted/50 data-[filter=true]:hover:bg-background 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": "sticky bg-background",
   "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-cell": "p-4 whitespace-nowrap align-middle text-sm text-muted-foreground bg-background",
   "table-empty": "flex items-center justify-center py-10",
   // table-loading
   "table-loading-icon": "animate-spin text-lg",
@@ -1129,7 +1134,7 @@ const staticTable = {
   "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"
+  "table-footer": "border-t border-border bg-muted font-medium [&>tr]:last:border-b-0"
 };
 const dynamicTable = [];
 const table = [
@@ -1143,12 +1148,12 @@ const staticTabs = {
   "tabs-disabled": "n-disabled",
   // components
   "tabs-trigger": "py-0.25em h-[calc(100%-1px)]",
-  "tabs-list": "bg-muted text-muted inline-flex h-2.5714285714285716em w-fit items-center justify-center rounded-lg p-[3px]",
+  "tabs-list": "bg-muted text-muted-foreground inline-flex h-2.5714285714285716em w-fit items-center justify-center rounded-lg p-[3px]",
   "tabs-content": "flex-1 outline-none"
 };
 const dynamicTabs = [
-  [/^tabs-active-([^-]+)-([^-]+)$/, ([, v = "solid", c = "primary"]) => `data-[state=active]:btn-${v}-${c}`],
-  [/^tabs-inactive-([^-]+)-([^-]+)$/, ([, v = "solid", c = "primary"]) => `data-[state=inactive]:btn-${v}-${c}`]
+  [/^tabs-active-([^-]+)-([^-]+)$/, ([, v = "outline", c = "gray"]) => `data-[state=active]:btn-${v}-${c}`],
+  [/^tabs-inactive-([^-]+)-([^-]+)$/, ([, v = "outline", c = "gray"]) => `data-[state=inactive]:btn-${v}-${c}`]
 ];
 const tabs = [
   ...dynamicTabs,
@@ -1174,7 +1179,7 @@ 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} bg-base`],
+  [/^toast-outline(-(\S+))?$/, ([, , c = "primary"]) => `alert-outline-${c} bg-background`],
   [/^toast-border(-(\S+))?$/, ([, , c = "primary"]) => `alert-border-${c}`]
 ];
 const toast = [
@@ -1203,8 +1208,8 @@ const toggle = [
 
 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"
+  "tooltip-white": "border border-border bg-popover text-popover-foreground",
+  "tooltip-black": "border border-foreground bg-popover-foreground text-popover"
 };
 const dynamicTooltip = [
   [/^tooltip-(.*)$/, ([, c], { theme }) => {