@nuxt/ui 3.0.0-alpha.9 → 3.0.0-beta.1

package/dist/shared/{ui.d52SSCwA.mjs → ui.DSPu6Y8j.mjs}

@@ -3,6 +3,7 @@ import 'node:url';
 import { kebabCase } from 'scule';
 import { addTypeTemplate, addTemplate } from '@nuxt/kit';
 import { defuFn, defu } from 'defu';
+import colors from 'tailwindcss/colors';
 
 const icons = {
   arrowLeft: "i-lucide-arrow-left",
@@ -13,14 +14,16 @@ const icons = {
   chevronDown: "i-lucide-chevron-down",
   chevronLeft: "i-lucide-chevron-left",
   chevronRight: "i-lucide-chevron-right",
+  chevronUp: "i-lucide-chevron-up",
   close: "i-lucide-x",
   ellipsis: "i-lucide-ellipsis",
   external: "i-lucide-arrow-up-right",
-  loading: "i-lucide-refresh-ccw",
+  folder: "i-lucide-folder",
+  folderOpen: "i-lucide-folder-open",
+  loading: "i-lucide-refresh-cw",
   minus: "i-lucide-minus",
   plus: "i-lucide-plus",
-  search: "i-lucide-search",
-  chevronUp: "i-lucide-chevron-up"
+  search: "i-lucide-search"
 };
 
 const getDefaultUiConfig = (colors) => ({
@@ -40,11 +43,8 @@ const defaultOptions = {
   fonts: true,
   colorMode: true,
   theme: {
-    colors: void 0,
+    colors: undefined,
     transitions: true
-  },
-  devtools: {
-    enabled: true
   }
 };
 const resolveColors = (colors) => {
@@ -54,9 +54,9 @@ const resolveColors = (colors) => {
 const accordion = {
   slots: {
     root: "w-full",
-    item: "border-b border-[var(--ui-border)] last:border-b-0",
+    item: "border-b border-(--ui-border) last:border-b-0",
     header: "flex",
-    trigger: "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-[var(--ui-primary)] min-w-0",
+    trigger: "group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-(--ui-primary) min-w-0",
     content: "data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none",
     body: "text-sm pb-3.5",
     leadingIcon: "shrink-0 size-5",
@@ -75,14 +75,14 @@ const accordion = {
 const alert = (options) => ({
   slots: {
     root: "relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5",
-    wrapper: "min-w-0 flex-1 flex flex-col gap-1",
+    wrapper: "min-w-0 flex-1 flex flex-col",
     title: "text-sm font-medium",
     description: "text-sm opacity-90",
     icon: "shrink-0 size-5",
     avatar: "shrink-0",
     avatarSize: "2xl",
-    actions: "flex gap-1.5 shrink-0",
-    close: "p-0.5"
+    actions: "flex flex-wrap gap-1.5 shrink-0",
+    close: "p-0"
   },
   variants: {
     color: {
@@ -95,14 +95,19 @@ const alert = (options) => ({
       soft: "",
       subtle: ""
     },
-    multiline: {
-      true: {
-        root: "items-start",
-        actions: "items-start mt-1"
-      },
-      false: {
+    orientation: {
+      horizontal: {
         root: "items-center",
         actions: "items-center"
+      },
+      vertical: {
+        root: "items-start",
+        actions: "items-start mt-2.5"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-1"
       }
     }
   },
@@ -110,49 +115,49 @@ const alert = (options) => ({
     color,
     variant: "solid",
     class: {
-      root: `bg-[var(--ui-${color})] text-[var(--ui-bg)]`
+      root: `bg-(--ui-${color}) text-(--ui-bg)`
     }
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "outline",
     class: {
-      root: `text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/25`
+      root: `text-(--ui-${color}) ring ring-inset ring-(--ui-${color})/25`
     }
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "soft",
     class: {
-      root: `bg-[var(--ui-${color})]/10 text-[var(--ui-${color})]`
+      root: `bg-(--ui-${color})/10 text-(--ui-${color})`
     }
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "subtle",
     class: {
-      root: `bg-[var(--ui-${color})]/10 text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/25`
+      root: `bg-(--ui-${color})/10 text-(--ui-${color}) ring ring-inset ring-(--ui-${color})/25`
     }
   })), {
     color: "neutral",
     variant: "solid",
     class: {
-      root: "text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]"
+      root: "text-(--ui-bg) bg-(--ui-bg-inverted)"
     }
   }, {
     color: "neutral",
     variant: "outline",
     class: {
-      root: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border)]"
+      root: "text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border)"
     }
   }, {
     color: "neutral",
     variant: "soft",
     class: {
-      root: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50"
+      root: "text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50"
     }
   }, {
     color: "neutral",
     variant: "subtle",
     class: {
-      root: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 ring ring-inset ring-[var(--ui-border-accented)]"
+      root: "text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-accented)"
     }
   }],
   defaultVariants: {
@@ -163,10 +168,10 @@ const alert = (options) => ({
 
 const avatar = {
   slots: {
-    root: "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)]",
+    root: "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated)",
     image: "h-full w-full rounded-[inherit] object-cover",
-    fallback: "font-medium leading-none text-[var(--ui-text-muted)] truncate",
-    icon: "text-[var(--ui-text-muted)] shrink-0"
+    fallback: "font-medium leading-none text-(--ui-text-muted) truncate",
+    icon: "text-(--ui-text-muted) shrink-0"
   },
   variants: {
     size: {
@@ -207,7 +212,7 @@ const avatar = {
 const avatarGroup = {
   slots: {
     root: "inline-flex flex-row-reverse justify-end",
-    base: "relative rounded-full ring-[var(--ui-bg)] first:me-0"
+    base: "relative rounded-full ring-(--ui-bg) first:me-0"
   },
   variants: {
     size: {
@@ -245,9 +250,44 @@ const avatarGroup = {
   }
 };
 
+const buttonGroupVariant = {
+  buttonGroup: {
+    horizontal: "not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none",
+    vertical: "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none"
+  }
+};
+const buttonGroupVariantWithRoot = {
+  buttonGroup: {
+    horizontal: {
+      root: "group",
+      base: "group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none"
+    },
+    vertical: {
+      root: "group",
+      base: "group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none"
+    }
+  }
+};
+const buttonGroup = {
+  base: "relative",
+  variants: {
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      xl: ""
+    },
+    orientation: {
+      horizontal: "inline-flex -space-x-px",
+      vertical: "flex flex-col -space-y-px"
+    }
+  }
+};
+
 const badge = (options) => ({
   slots: {
-    base: "rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center",
+    base: "font-medium inline-flex items-center",
     label: "truncate",
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
@@ -255,6 +295,7 @@ const badge = (options) => ({
     trailingIcon: "shrink-0"
   },
   variants: {
+    ...buttonGroupVariant,
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
       neutral: ""
@@ -266,58 +307,70 @@ const badge = (options) => ({
       subtle: ""
     },
     size: {
+      xs: {
+        base: "text-[8px]/3 px-1 py-0.5 gap-1 rounded-[calc(var(--ui-radius))]",
+        leadingIcon: "size-3",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-3"
+      },
       sm: {
-        base: "text-xs px-1.5 py-0.5 gap-1",
-        leadingIcon: "size-4",
+        base: "text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))]",
+        leadingIcon: "size-3",
         leadingAvatarSize: "3xs",
-        trailingIcon: "size-4"
+        trailingIcon: "size-3"
       },
       md: {
-        base: "text-xs px-2 py-1 gap-1",
+        base: "text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)]",
         leadingIcon: "size-4",
         leadingAvatarSize: "3xs",
         trailingIcon: "size-4"
       },
       lg: {
-        base: "text-sm px-2 py-1 gap-1.5",
+        base: "text-sm px-2 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)]",
         leadingIcon: "size-5",
         leadingAvatarSize: "2xs",
         trailingIcon: "size-5"
+      },
+      xl: {
+        base: "text-base px-2.5 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)]",
+        leadingIcon: "size-6",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-6"
       }
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: "solid",
-    class: `bg-[var(--ui-${color})] text-[var(--ui-bg)]`
+    class: `bg-(--ui-${color}) text-(--ui-bg)`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "outline",
-    class: `text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/50`
+    class: `text-(--ui-${color}) ring ring-inset ring-(--ui-${color})/50`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "soft",
-    class: `bg-[var(--ui-${color})]/10 text-[var(--ui-${color})]`
+    class: `bg-(--ui-${color})/10 text-(--ui-${color})`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "subtle",
-    class: `bg-[var(--ui-${color})]/10 text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/25`
+    class: `bg-(--ui-${color})/10 text-(--ui-${color}) ring ring-inset ring-(--ui-${color})/25`
   })), {
     color: "neutral",
     variant: "solid",
-    class: "text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]"
+    class: "text-(--ui-bg) bg-(--ui-bg-inverted)"
   }, {
     color: "neutral",
     variant: "outline",
-    class: "ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)]"
+    class: "ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg)"
   }, {
     color: "neutral",
     variant: "soft",
-    class: "text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]"
+    class: "text-(--ui-text) bg-(--ui-bg-elevated)"
   }, {
     color: "neutral",
     variant: "subtle",
-    class: "ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]"
+    class: "ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg-elevated)"
   }],
   defaultVariants: {
     color: "primary",
@@ -331,21 +384,21 @@ const breadcrumb = (options) => ({
     root: "relative min-w-0",
     list: "flex items-center gap-1.5",
     item: "flex min-w-0",
-    link: "group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-[var(--ui-primary)]",
+    link: "group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-(--ui-primary)",
     linkLeadingIcon: "shrink-0 size-5",
     linkLeadingAvatar: "shrink-0",
     linkLeadingAvatarSize: "2xs",
     linkLabel: "truncate",
     separator: "flex",
-    separatorIcon: "shrink-0 size-5 text-[var(--ui-text-muted)]"
+    separatorIcon: "shrink-0 size-5 text-(--ui-text-muted)"
   },
   variants: {
     active: {
       true: {
-        link: "text-[var(--ui-primary)] font-semibold"
+        link: "text-(--ui-primary) font-semibold"
       },
       false: {
-        link: "text-[var(--ui-text-muted)] font-medium"
+        link: "text-(--ui-text-muted) font-medium"
       }
     },
     disabled: {
@@ -362,49 +415,14 @@ const breadcrumb = (options) => ({
     active: false,
     to: true,
     class: {
-      link: ["hover:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
+      link: ["hover:text-(--ui-text)", options.theme.transitions && "transition-colors"]
     }
   }]
 });
 
-const buttonGroupVariant = {
-  buttonGroup: {
-    horizontal: "not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none",
-    vertical: "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none"
-  }
-};
-const buttonGroupVariantWithRoot = {
-  buttonGroup: {
-    horizontal: {
-      root: "group",
-      base: "group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none"
-    },
-    vertical: {
-      root: "group",
-      base: "group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none"
-    }
-  }
-};
-const buttonGroup = {
-  base: "relative",
-  variants: {
-    size: {
-      xs: "",
-      sm: "",
-      md: "",
-      lg: "",
-      xl: ""
-    },
-    orientation: {
-      horizontal: "inline-flex -space-x-px",
-      vertical: "flex flex-col -space-y-px"
-    }
-  }
-};
-
 const button = (options) => ({
   slots: {
-    base: ["rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75", options.theme.transitions && "transition-colors"],
+    base: ["rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75", options.theme.transitions && "transition-colors"],
     label: "truncate",
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
@@ -460,7 +478,6 @@ const button = (options) => ({
     block: {
       true: {
         base: "w-full justify-center",
-        leadingAvatarSize: "xs",
         trailingIcon: "ms-auto"
       }
     },
@@ -480,51 +497,51 @@ const button = (options) => ({
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: "solid",
-    class: `text-[var(--ui-bg)] bg-[var(--ui-${color})] hover:bg-[var(--ui-${color})]/75 disabled:bg-[var(--ui-${color})] aria-disabled:bg-[var(--ui-${color})] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-${color})]`
+    class: `text-(--ui-bg) bg-(--ui-${color}) hover:bg-(--ui-${color})/75 disabled:bg-(--ui-${color}) aria-disabled:bg-(--ui-${color}) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-${color})`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "outline",
-    class: `ring ring-inset ring-[var(--ui-${color})]/50 text-[var(--ui-${color})] hover:bg-[var(--ui-${color})]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-[var(--ui-${color})]`
+    class: `ring ring-inset ring-(--ui-${color})/50 text-(--ui-${color}) hover:bg-(--ui-${color})/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-(--ui-${color})`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "soft",
-    class: `text-[var(--ui-${color})] bg-[var(--ui-${color})]/10 hover:bg-[var(--ui-${color})]/15 focus-visible:bg-[var(--ui-${color})]/15 disabled:bg-[var(--ui-${color})]/10 aria-disabled:bg-[var(--ui-${color})]/10`
+    class: `text-(--ui-${color}) bg-(--ui-${color})/10 hover:bg-(--ui-${color})/15 focus-visible:bg-(--ui-${color})/15 disabled:bg-(--ui-${color})/10 aria-disabled:bg-(--ui-${color})/10`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "subtle",
-    class: `text-[var(--ui-${color})] ring ring-inset ring-[var(--ui-${color})]/25 bg-[var(--ui-${color})]/10 hover:bg-[var(--ui-${color})]/15 disabled:bg-[var(--ui-${color})]/10 aria-disabled:bg-[var(--ui-${color})]/10 focus-visible:ring-2 focus-visible:ring-[var(--ui-${color})]`
+    class: `text-(--ui-${color}) ring ring-inset ring-(--ui-${color})/25 bg-(--ui-${color})/10 hover:bg-(--ui-${color})/15 disabled:bg-(--ui-${color})/10 aria-disabled:bg-(--ui-${color})/10 focus-visible:ring-2 focus-visible:ring-(--ui-${color})`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "ghost",
-    class: `text-[var(--ui-${color})] hover:bg-[var(--ui-${color})]/10 focus-visible:bg-[var(--ui-${color})]/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
+    class: `text-(--ui-${color}) hover:bg-(--ui-${color})/10 focus-visible:bg-(--ui-${color})/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
-    class: `text-[var(--ui-${color})] hover:text-[var(--ui-${color})]/75 disabled:text-[var(--ui-${color})] aria-disabled:text-[var(--ui-${color})] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
+    class: `text-(--ui-${color}) hover:text-(--ui-${color})/75 disabled:text-(--ui-${color}) aria-disabled:text-(--ui-${color}) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-${color})`
   })), {
     color: "neutral",
     variant: "solid",
-    class: "text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)] hover:bg-[var(--ui-bg-inverted)]/90 disabled:bg-[var(--ui-bg-inverted)] aria-disabled:bg-[var(--ui-bg-inverted)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]"
+    class: "text-(--ui-bg) bg-(--ui-bg-inverted) hover:bg-(--ui-bg-inverted)/90 disabled:bg-(--ui-bg-inverted) aria-disabled:bg-(--ui-bg-inverted) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)"
   }, {
     color: "neutral",
     variant: "outline",
-    class: "ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]"
+    class: "ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)"
   }, {
     color: "neutral",
     variant: "soft",
-    class: "text-[var(--ui-text)] bg-[var(--ui-bg-elevated)] hover:bg-[var(--ui-bg-accented)]/75 focus-visible:bg-[var(--ui-bg-accented)]/75 disabled:bg-[var(--ui-bg-elevated)] aria-disabled:bg-[var(--ui-bg-elevated)]"
+    class: "text-(--ui-text) bg-(--ui-bg-elevated) hover:bg-(--ui-bg-accented)/75 focus-visible:bg-(--ui-bg-accented)/75 disabled:bg-(--ui-bg-elevated) aria-disabled:bg-(--ui-bg-elevated)"
   }, {
     color: "neutral",
     variant: "subtle",
-    class: "ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)] hover:bg-[var(--ui-bg-accented)]/75 disabled:bg-[var(--ui-bg-elevated)] aria-disabled:bg-[var(--ui-bg-elevated)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]"
+    class: "ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg-elevated) hover:bg-(--ui-bg-accented)/75 disabled:bg-(--ui-bg-elevated) aria-disabled:bg-(--ui-bg-elevated) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)"
   }, {
     color: "neutral",
     variant: "ghost",
-    class: "text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"
+    class: "text-(--ui-text) hover:bg-(--ui-bg-elevated) focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"
   }, {
     color: "neutral",
     variant: "link",
-    class: "text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]"
+    class: "text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)"
   }, {
     size: "xs",
     square: true,
@@ -566,12 +583,94 @@ const button = (options) => ({
   }
 });
 
+const calendar = (options) => ({
+  slots: {
+    root: "",
+    header: "flex items-center justify-between",
+    body: "flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0",
+    heading: "text-center font-medium truncate mx-auto",
+    grid: "w-full border-collapse select-none space-y-1 focus:outline-none",
+    gridRow: "grid grid-cols-7",
+    gridWeekDaysRow: "mb-1 grid w-full grid-cols-7",
+    gridBody: "grid",
+    headCell: "rounded-[calc(var(--ui-radius)*1.5)]",
+    cell: "relative text-center",
+    cellTrigger: ["m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold", options.theme.transitions && "transition"]
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        headCell: `text-(--ui-${color})`,
+        cellTrigger: `focus-visible:ring-(--ui-${color}) data-[selected]:bg-(--ui-${color}) data-today:not-data-[selected]:text-(--ui-${color}) data-[highlighted]:bg-(--ui-${color})/20 hover:not-data-[selected]:bg-(--ui-${color})/20`
+      }])),
+      neutral: {
+        headCell: "text-(--ui-bg-inverted)",
+        cellTrigger: "focus-visible:ring-(--ui-border-inverted) data-[selected]:bg-(--ui-bg-inverted) data-today:not-data-[selected]:text-(--ui-bg-inverted) data-[highlighted]:bg-(--ui-bg-inverted)/20 hover:not-data-[selected]:bg-(--ui-bg-inverted)/10"
+      }
+    },
+    size: {
+      xs: {
+        heading: "text-xs",
+        cell: "text-xs",
+        headCell: "text-[10px]",
+        cellTrigger: "size-7",
+        body: "space-y-2 pt-2"
+      },
+      sm: {
+        heading: "text-xs",
+        headCell: "text-xs",
+        cell: "text-xs",
+        cellTrigger: "size-7"
+      },
+      md: {
+        heading: "text-sm",
+        headCell: "text-xs",
+        cell: "text-sm",
+        cellTrigger: "size-8"
+      },
+      lg: {
+        heading: "text-md",
+        headCell: "text-md",
+        cellTrigger: "size-9 text-md"
+      },
+      xl: {
+        heading: "text-lg",
+        headCell: "text-lg",
+        cellTrigger: "size-10 text-lg"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});
+
 const card = {
   slots: {
-    root: "bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow-sm",
+    root: "rounded-[calc(var(--ui-radius)*2)]",
     header: "p-4 sm:px-6",
     body: "p-4 sm:p-6",
     footer: "p-4 sm:px-6"
+  },
+  variants: {
+    variant: {
+      solid: {
+        root: "bg-(--ui-bg-inverted) text-(--ui-bg)"
+      },
+      outline: {
+        root: "bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)"
+      },
+      soft: {
+        root: "bg-(--ui-bg-elevated)/50 divide-y divide-(--ui-border)"
+      },
+      subtle: {
+        root: "bg-(--ui-bg-elevated)/50 ring ring-(--ui-border) divide-y divide-(--ui-border)"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "outline"
   }
 };
 
@@ -586,7 +685,7 @@ const carousel = (options) => ({
     prev: "absolute rounded-full",
     next: "absolute rounded-full",
     dots: "absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3",
-    dot: ["cursor-pointer size-3 bg-[var(--ui-border-accented)] rounded-full", options.theme.transitions && "transition"]
+    dot: ["cursor-pointer size-3 bg-(--ui-border-accented) rounded-full", options.theme.transitions && "transition"]
   },
   variants: {
     orientation: {
@@ -605,29 +704,26 @@ const carousel = (options) => ({
     },
     active: {
       true: {
-        dot: "bg-[var(--ui-border-inverted)]"
+        dot: "bg-(--ui-border-inverted)"
       }
     }
-  },
-  defaultVariants: {
-    orientation: "horizontal"
   }
 });
 
 const checkbox = (options) => ({
   slots: {
     root: "relative flex items-start",
-    base: "shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2",
+    base: "shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2",
     container: "flex items-center",
     wrapper: "ms-2",
     icon: "shrink-0 size-full",
-    label: "block font-medium text-[var(--ui-text)]",
-    description: "text-[var(--ui-text-muted)]"
+    label: "block font-medium text-(--ui-text)",
+    description: "text-(--ui-text-muted)"
   },
   variants: {
     color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `focus-visible:outline-[var(--ui-${color})]`])),
-      neutral: "focus-visible:outline-[var(--ui-border-inverted)]"
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `focus-visible:outline-(--ui-${color})`])),
+      neutral: "focus-visible:outline-(--ui-border-inverted)"
     },
     size: {
       xs: {
@@ -658,7 +754,7 @@ const checkbox = (options) => ({
     },
     required: {
       true: {
-        label: "after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]"
+        label: "after:content-['*'] after:ms-0.5 after:text-(--ui-error)"
       }
     },
     disabled: {
@@ -675,11 +771,11 @@ const checkbox = (options) => ({
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     checked: true,
-    class: `ring-2 ring-[var(--ui-${color})] bg-[var(--ui-${color})]`
+    class: `ring-2 ring-(--ui-${color}) bg-(--ui-${color})`
   })), {
     color: "neutral",
     checked: true,
-    class: "ring-2 ring-[var(--ui-border-inverted)] bg-[var(--ui-bg-inverted)]"
+    class: "ring-2 ring-(--ui-border-inverted) bg-(--ui-bg-inverted)"
   }],
   defaultVariants: {
     size: "md",
@@ -690,12 +786,12 @@ const checkbox = (options) => ({
 const chip = (options) => ({
   slots: {
     root: "relative inline-flex items-center justify-center shrink-0",
-    base: "rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap"
+    base: "rounded-full ring ring-(--ui-bg) flex items-center justify-center text-(--ui-bg) font-medium whitespace-nowrap"
   },
   variants: {
     color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `bg-[var(--ui-${color})]`])),
-      neutral: "bg-[var(--ui-text-muted)]"
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, `bg-(--ui-${color})`])),
+      neutral: "bg-(--ui-text-muted)"
     },
     size: {
       "3xs": "h-[4px] min-w-[4px] text-[4px]",
@@ -752,33 +848,83 @@ const collapsible = {
   }
 };
 
+const colorPicker = {
+  slots: {
+    root: "data-[disabled]:opacity-75",
+    picker: "flex gap-4",
+    selector: "rounded-[calc(var(--ui-radius)*1.5)]",
+    selectorBackground: "w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]",
+    selectorThumb: "-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed",
+    track: "w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)]",
+    trackThumb: "absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed"
+  },
+  variants: {
+    size: {
+      xs: {
+        selector: "w-38 h-38",
+        track: "h-38"
+      },
+      sm: {
+        selector: "w-40 h-40",
+        track: "h-40"
+      },
+      md: {
+        selector: "w-42 h-42",
+        track: "h-42"
+      },
+      lg: {
+        selector: "w-44 h-44",
+        track: "h-44"
+      },
+      xl: {
+        selector: "w-46 h-46",
+        track: "h-46"
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    size: "md"
+  }
+};
+
 const commandPalette = (options) => ({
   slots: {
-    root: "flex flex-col min-h-0 min-w-0 divide-y divide-[var(--ui-border)]",
+    root: "flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-border)",
     input: "[&>input]:h-12",
     close: "",
-    content: "relative overflow-hidden",
-    viewport: "divide-y divide-[var(--ui-border)] scroll-py-1",
+    content: "relative overflow-hidden flex flex-col",
+    viewport: "relative divide-y divide-(--ui-border) scroll-py-1 overflow-y-auto flex-1 focus:outline-none",
     group: "p-1 isolate",
-    empty: "py-6 text-center text-sm text-[var(--ui-text-muted)]",
-    label: "px-2 py-1.5 text-xs font-semibold text-[var(--ui-text-highlighted)]",
-    item: ["group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "transition-colors before:transition-colors"],
-    itemLeadingIcon: ["shrink-0 size-5 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"],
+    empty: "py-6 text-center text-sm text-(--ui-text-muted)",
+    label: "px-2 py-1.5 text-xs font-semibold text-(--ui-text-highlighted)",
+    item: "group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75",
+    itemLeadingIcon: "shrink-0 size-5",
     itemLeadingAvatar: "shrink-0",
     itemLeadingAvatarSize: "2xs",
     itemLeadingChip: "shrink-0 size-5",
     itemLeadingChipSize: "md",
     itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
     itemTrailingIcon: "shrink-0 size-5",
-    itemTrailingHighlightedIcon: "shrink-0 size-5 text-[var(--ui-text-dimmed)] hidden group-data-highlighted:inline-flex",
+    itemTrailingHighlightedIcon: "shrink-0 size-5 text-(--ui-text-dimmed) hidden group-data-highlighted:inline-flex",
     itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5",
     itemTrailingKbdsSize: "md",
-    itemLabel: "truncate space-x-1 rtl:space-x-reverse",
-    itemLabelBase: "text-[var(--ui-text-highlighted)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]",
-    itemLabelPrefix: "text-[var(--ui-text)]",
-    itemLabelSuffix: "text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]"
+    itemLabel: "truncate space-x-1 rtl:space-x-reverse text-(--ui-text-dimmed)",
+    itemLabelBase: "text-(--ui-text-highlighted) [&>mark]:text-(--ui-bg) [&>mark]:bg-(--ui-primary)",
+    itemLabelPrefix: "text-(--ui-text)",
+    itemLabelSuffix: "text-(--ui-text-dimmed) [&>mark]:text-(--ui-bg) [&>mark]:bg-(--ui-primary)"
   },
   variants: {
+    active: {
+      true: {
+        item: "text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)",
+        itemLeadingIcon: "text-(--ui-text)"
+      },
+      false: {
+        item: ["text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text)", options.theme.transitions && "transition-colors"]
+      }
+    },
     loading: {
       true: {
         itemLeadingIcon: "animate-spin"
@@ -788,25 +934,25 @@ const commandPalette = (options) => ({
 });
 
 const container = {
-  base: "max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8"
+  base: "max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8"
 };
 
 const contextMenu = (options) => ({
   slots: {
-    content: "min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    content: "min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
     group: "p-1 isolate",
-    label: "w-full flex items-center font-semibold text-[var(--ui-text-highlighted)]",
-    separator: "-mx-1 my-1 h-px bg-[var(--ui-border)]",
+    label: "w-full flex items-center font-semibold text-(--ui-text-highlighted)",
+    separator: "-mx-1 my-1 h-px bg-(--ui-border)",
     item: "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75",
     itemLeadingIcon: "shrink-0",
     itemLeadingAvatar: "shrink-0",
     itemLeadingAvatarSize: "",
-    itemTrailing: "ms-auto inline-flex",
+    itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
     itemTrailingIcon: "shrink-0",
     itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
     itemTrailingKbdsSize: "",
     itemLabel: "truncate",
-    itemLabelExternalIcon: "inline-block size-3 align-top text-[var(--ui-text-dimmed)]"
+    itemLabelExternalIcon: "inline-block size-3 align-top text-(--ui-text-dimmed)"
   },
   variants: {
     color: {
@@ -815,12 +961,12 @@ const contextMenu = (options) => ({
     },
     active: {
       true: {
-        item: "text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]",
-        itemLeadingIcon: "text-[var(--ui-text)]"
+        item: "text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)",
+        itemLeadingIcon: "text-(--ui-text)"
       },
       false: {
-        item: ["text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "transition-colors before:transition-colors"],
-        itemLeadingIcon: ["text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
+        item: ["text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text)", options.theme.transitions && "transition-colors"]
       }
     },
     loading: {
@@ -880,15 +1026,15 @@ const contextMenu = (options) => ({
     color,
     active: false,
     class: {
-      item: `text-[var(--ui-${color})] data-highlighted:text-[var(--ui-${color})] data-highlighted:before:bg-[var(--ui-${color})]/10 data-[state=open]:before:bg-[var(--ui-${color})]/10`,
-      itemLeadingIcon: `text-[var(--ui-${color})]/75 group-data-highlighted:text-[var(--ui-${color})] group-data-[state=open]:text-[var(--ui-${color})]`
+      item: `text-(--ui-${color}) data-highlighted:text-(--ui-${color}) data-highlighted:before:bg-(--ui-${color})/10 data-[state=open]:before:bg-(--ui-${color})/10`,
+      itemLeadingIcon: `text-(--ui-${color})/75 group-data-highlighted:text-(--ui-${color}) group-data-[state=open]:text-(--ui-${color})`
     }
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     active: true,
     class: {
-      item: `text-[var(--ui-${color})] before:bg-[var(--ui-${color})]/10`,
-      itemLeadingIcon: `text-[var(--ui-${color})]`
+      item: `text-(--ui-${color}) before:bg-(--ui-${color})/10`,
+      itemLeadingIcon: `text-(--ui-${color})`
     }
   }))],
   defaultVariants: {
@@ -898,68 +1044,121 @@ const contextMenu = (options) => ({
 
 const drawer = {
   slots: {
-    overlay: "fixed inset-0 bg-[var(--ui-bg-elevated)]/75",
-    content: "fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none",
-    handle: "shrink-0 rounded-full bg-[var(--ui-bg-accented)]",
+    overlay: "fixed inset-0 bg-(--ui-bg-elevated)/75",
+    content: "fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none",
+    handle: "shrink-0 rounded-full bg-(--ui-bg-accented)",
     container: "w-full flex flex-col gap-4 p-4 overflow-y-auto",
     header: "",
-    title: "text-[var(--ui-text-highlighted)] font-semibold",
-    description: "mt-1 text-[var(--ui-text-muted)] text-sm",
+    title: "text-(--ui-text-highlighted) font-semibold",
+    description: "mt-1 text-(--ui-text-muted) text-sm",
     body: "flex-1",
     footer: "flex flex-col gap-1.5"
   },
   variants: {
     direction: {
       top: {
-        content: "top-0 mb-24 flex-col-reverse rounded-b-[calc(var(--ui-radius)*2)]",
+        content: "mb-24 flex-col-reverse",
         handle: "mb-4"
       },
       right: {
-        content: "right-4 flex-row",
+        content: "flex-row",
         handle: "ml-4"
       },
       bottom: {
-        content: "bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)]",
+        content: "mt-24 flex-col",
         handle: "mt-4"
       },
       left: {
-        content: "left-4 flex-row-reverse",
+        content: "flex-row-reverse",
         handle: "mr-4"
       }
+    },
+    inset: {
+      true: {
+        content: "rounded-[calc(var(--ui-radius)*2)] after:hidden"
+      }
     }
   },
   compoundVariants: [{
     direction: ["top", "bottom"],
     class: {
-      content: "inset-x-0 h-auto max-h-[96%]",
+      content: "h-auto max-h-[96%]",
       handle: "w-12 h-1.5 mx-auto"
     }
   }, {
     direction: ["right", "left"],
     class: {
-      content: "inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden",
+      content: "w-auto max-w-[calc(100%-2rem)]",
       handle: "h-12 w-1.5 mt-auto mb-auto"
     }
+  }, {
+    direction: "top",
+    inset: true,
+    class: {
+      content: "inset-x-4 top-4"
+    }
+  }, {
+    direction: "top",
+    inset: false,
+    class: {
+      content: "inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]"
+    }
+  }, {
+    direction: "bottom",
+    inset: true,
+    class: {
+      content: "inset-x-4 bottom-4"
+    }
+  }, {
+    direction: "bottom",
+    inset: false,
+    class: {
+      content: "inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]"
+    }
+  }, {
+    direction: "left",
+    inset: true,
+    class: {
+      content: "inset-y-4 left-4"
+    }
+  }, {
+    direction: "left",
+    inset: false,
+    class: {
+      content: "inset-y-0 left-0 rounded-r-[calc(var(--ui-radius)*2)]"
+    }
+  }, {
+    direction: "right",
+    inset: true,
+    class: {
+      content: "inset-y-4 right-4"
+    }
+  }, {
+    direction: "right",
+    inset: false,
+    class: {
+      content: "inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]"
+    }
   }]
 };
 
 const dropdownMenu = (options) => ({
   slots: {
-    content: "min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-    arrow: "fill-[var(--ui-border)]",
+    content: "min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    arrow: "fill-(--ui-border)",
     group: "p-1 isolate",
-    label: "w-full flex items-center font-semibold text-[var(--ui-text-highlighted)]",
-    separator: "-mx-1 my-1 h-px bg-[var(--ui-border)]",
+    label: "w-full flex items-center font-semibold text-(--ui-text-highlighted)",
+    separator: "-mx-1 my-1 h-px bg-(--ui-border)",
     item: "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75",
     itemLeadingIcon: "shrink-0",
     itemLeadingAvatar: "shrink-0",
     itemLeadingAvatarSize: "",
-    itemTrailing: "ms-auto inline-flex",
+    itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
     itemTrailingIcon: "shrink-0",
     itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
     itemTrailingKbdsSize: "",
     itemLabel: "truncate",
-    itemLabelExternalIcon: "inline-block size-3 align-top text-[var(--ui-text-dimmed)]"
+    itemLabelExternalIcon: "inline-block size-3 align-top text-(--ui-text-dimmed)"
   },
   variants: {
     color: {
@@ -968,12 +1167,12 @@ const dropdownMenu = (options) => ({
     },
     active: {
       true: {
-        item: "text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]",
-        itemLeadingIcon: "text-[var(--ui-text)]"
+        item: "text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)",
+        itemLeadingIcon: "text-(--ui-text)"
       },
       false: {
-        item: ["text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "transition-colors before:transition-colors"],
-        itemLeadingIcon: ["text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
+        item: ["text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "transition-colors before:transition-colors"],
+        itemLeadingIcon: ["text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text)", options.theme.transitions && "transition-colors"]
       }
     },
     loading: {
@@ -1033,15 +1232,15 @@ const dropdownMenu = (options) => ({
     color,
     active: false,
     class: {
-      item: `text-[var(--ui-${color})] data-highlighted:text-[var(--ui-${color})] data-highlighted:before:bg-[var(--ui-${color})]/10 data-[state=open]:before:bg-[var(--ui-${color})]/10`,
-      itemLeadingIcon: `text-[var(--ui-${color})]/75 group-data-highlighted:text-[var(--ui-${color})] group-data-[state=open]:text-[var(--ui-${color})]`
+      item: `text-(--ui-${color}) data-highlighted:text-(--ui-${color}) data-highlighted:before:bg-(--ui-${color})/10 data-[state=open]:before:bg-(--ui-${color})/10`,
+      itemLeadingIcon: `text-(--ui-${color})/75 group-data-highlighted:text-(--ui-${color}) group-data-[state=open]:text-(--ui-${color})`
     }
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     active: true,
     class: {
-      item: `text-[var(--ui-${color})] before:bg-[var(--ui-${color})]/10`,
-      itemLeadingIcon: `text-[var(--ui-${color})]`
+      item: `text-(--ui-${color}) before:bg-(--ui-${color})/10`,
+      itemLeadingIcon: `text-(--ui-${color})`
     }
   }))],
   defaultVariants: {
@@ -1058,12 +1257,12 @@ const formField = {
     root: "",
     wrapper: "",
     labelWrapper: "flex content-center items-center justify-between",
-    label: "block font-medium text-[var(--ui-text)]",
+    label: "block font-medium text-(--ui-text)",
     container: "mt-1 relative",
-    description: "text-[var(--ui-text-muted)]",
-    error: "mt-2 text-[var(--ui-error)]",
-    hint: "text-[var(--ui-text-muted)]",
-    help: "mt-2 text-[var(--ui-text-muted)]"
+    description: "text-(--ui-text-muted)",
+    error: "mt-2 text-(--ui-error)",
+    hint: "text-(--ui-text-muted)",
+    help: "mt-2 text-(--ui-text-muted)"
   },
   variants: {
     size: {
@@ -1075,7 +1274,7 @@ const formField = {
     },
     required: {
       true: {
-        label: `after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]`
+        label: `after:content-['*'] after:ms-0.5 after:text-(--ui-error)`
       }
     }
   },
@@ -1087,13 +1286,13 @@ const formField = {
 const input = (options) => ({
   slots: {
     root: "relative inline-flex items-center",
-    base: ["w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
+    base: ["w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
     leading: "absolute inset-y-0 start-0 flex items-center",
-    leadingIcon: "shrink-0 text-[var(--ui-text-dimmed)]",
+    leadingIcon: "shrink-0 text-(--ui-text-dimmed)",
     leadingAvatar: "shrink-0",
     leadingAvatarSize: "",
     trailing: "absolute inset-y-0 end-0 flex items-center",
-    trailingIcon: "shrink-0 text-[var(--ui-text-dimmed)]"
+    trailingIcon: "shrink-0 text-(--ui-text-dimmed)"
   },
   variants: {
     ...buttonGroupVariantWithRoot,
@@ -1140,11 +1339,11 @@ const input = (options) => ({
       }
     },
     variant: {
-      outline: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)]",
-      soft: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/50",
-      subtle: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)]",
-      ghost: "text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent",
-      none: "text-[var(--ui-text-highlighted)] bg-transparent"
+      outline: "text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented)",
+      soft: "text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50",
+      subtle: "text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented)",
+      ghost: "text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent",
+      none: "text-(--ui-text-highlighted) bg-transparent"
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
@@ -1163,25 +1362,25 @@ const input = (options) => ({
       true: ""
     },
     type: {
-      file: "file:me-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none"
+      file: "file:me-1.5 file:font-medium file:text-(--ui-text-muted) file:outline-none"
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: ["outline", "subtle"],
-    class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
+    class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-${color})`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     highlight: true,
-    class: `ring ring-inset ring-[var(--ui-${color})]`
+    class: `ring ring-inset ring-(--ui-${color})`
   })), {
     color: "neutral",
     variant: ["outline", "subtle"],
-    class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]"
+    class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)"
   }, {
     color: "neutral",
     highlight: true,
-    class: "ring ring-inset ring-[var(--ui-border-inverted)]"
+    class: "ring ring-inset ring-(--ui-border-inverted)"
   }, {
     leading: true,
     size: "xs",
@@ -1248,15 +1447,15 @@ const inputMenu = (options) => {
     slots: {
       base: () => ["rounded-[calc(var(--ui-radius)*1.5)]", options.theme.transitions && "transition-colors"],
       trailing: "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
-      arrow: "fill-[var(--ui-border)]",
-      content: "max-h-60 w-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-      viewport: "divide-y divide-[var(--ui-border)] scroll-py-1",
+      arrow: "fill-(--ui-border)",
+      content: "max-h-60 w-(--reka-popper-anchor-width) bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto",
+      viewport: "divide-y divide-(--ui-border) scroll-py-1",
       group: "p-1 isolate",
-      empty: "py-2 text-center text-sm text-[var(--ui-text-muted)]",
-      label: "font-semibold text-[var(--ui-text-highlighted)]",
-      separator: "-mx-1 my-1 h-px bg-[var(--ui-border)]",
-      item: ["group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "transition-colors before:transition-colors"],
-      itemLeadingIcon: ["shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"],
+      empty: "py-2 text-center text-sm text-(--ui-text-muted)",
+      label: "font-semibold text-(--ui-text-highlighted)",
+      separator: "-mx-1 my-1 h-px bg-(--ui-border)",
+      item: ["group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      itemLeadingIcon: ["shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text)", options.theme.transitions && "transition-colors"],
       itemLeadingAvatar: "shrink-0",
       itemLeadingAvatarSize: "",
       itemLeadingChip: "shrink-0",
@@ -1264,9 +1463,9 @@ const inputMenu = (options) => {
       itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
       itemTrailingIcon: "shrink-0",
       itemLabel: "truncate",
-      tagsItem: "px-1.5 py-0.5 rounded-[var(--ui-radius)] font-medium inline-flex items-center gap-0.5 ring ring-inset ring-[var(--ui-border-accented)] bg-[var(--ui-bg-elevated)] text-[var(--ui-text)] data-disabled:cursor-not-allowed data-disabled:opacity-75",
+      tagsItem: "px-1.5 py-0.5 rounded-(--ui-radius) font-medium inline-flex items-center gap-0.5 ring ring-inset ring-(--ui-border-accented) bg-(--ui-bg-elevated) text-(--ui-text) data-disabled:cursor-not-allowed data-disabled:opacity-75",
       tagsItemText: "truncate",
-      tagsItemDelete: ["inline-flex items-center rounded-[calc(var(--ui-radius)/2)] text-[var(--ui-text-dimmed)] hover:text-[var(--ui-text)] hover:bg-[var(--ui-bg-accented)]/75 disabled:pointer-events-none", options.theme.transitions && "transition-colors"],
+      tagsItemDelete: ["inline-flex items-center rounded-[calc(var(--ui-radius)/2)] text-(--ui-text-dimmed) hover:text-(--ui-text) hover:bg-(--ui-bg-accented)/75 disabled:pointer-events-none", options.theme.transitions && "transition-colors"],
       tagsItemDeleteIcon: "",
       tagsInput: ""
     },
@@ -1274,11 +1473,10 @@ const inputMenu = (options) => {
       multiple: {
         true: {
           root: "flex-wrap",
-          base: "",
-          tagsInput: "border-0 bg-transparent placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+          tagsInput: "border-0 bg-transparent placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
         },
         false: {
-          base: "w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+          base: "w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
         }
       },
       size: {
@@ -1343,12 +1541,12 @@ const inputMenu = (options) => {
       color,
       multiple: true,
       variant: ["outline", "subtle"],
-      class: `has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--${color})]`
+      class: `has-focus-visible:ring-2 has-focus-visible:ring-(--ui-${color})`
     })), {
       color: "neutral",
       multiple: true,
       variant: ["outline", "subtle"],
-      class: "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ui-border-inverted)]"
+      class: "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-border-inverted)"
     }]
   }, input(options));
 };
@@ -1358,7 +1556,7 @@ const inputNumber = (options) => {
   return {
     slots: {
       root: "relative inline-flex items-center",
-      base: ["w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
+      base: ["w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
       increment: "absolute flex items-center",
       decrement: "absolute flex items-center"
     },
@@ -1401,19 +1599,19 @@ const inputNumber = (options) => {
     compoundVariants: [...(options.theme.colors || []).map((color) => ({
       color,
       variant: ["outline", "subtle"],
-      class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
+      class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-${color})`
     })), ...(options.theme.colors || []).map((color) => ({
       color,
       highlight: true,
-      class: `ring ring-inset ring-[var(--ui-${color})]`
+      class: `ring ring-inset ring-(--ui-${color})`
     })), {
       color: "neutral",
       variant: ["outline", "subtle"],
-      class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]"
+      class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)"
     }, {
       color: "neutral",
       highlight: true,
-      class: "ring ring-inset ring-[var(--ui-border-inverted)]"
+      class: "ring ring-inset ring-(--ui-border-inverted)"
     }, {
       orientation: "horizontal",
       size: "xs",
@@ -1464,12 +1662,12 @@ const inputNumber = (options) => {
 };
 
 const kbd = {
-  base: "inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans",
+  base: "inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans",
   variants: {
     variant: {
-      solid: "bg-[var(--ui-bg-inverted)] text-[var(--ui-bg)]",
-      outline: "bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] ring ring-inset ring-[var(--ui-border-accented)]",
-      subtle: "bg-[var(--ui-bg-elevated)] text-[var(--ui-text)] ring ring-inset ring-[var(--ui-border-accented)]"
+      solid: "bg-(--ui-bg-inverted) text-(--ui-bg)",
+      outline: "bg-(--ui-bg) text-(--ui-text-highlighted) ring ring-inset ring-(--ui-border-accented)",
+      subtle: "bg-(--ui-bg-elevated) text-(--ui-text) ring ring-inset ring-(--ui-border-accented)"
     },
     size: {
       sm: "h-4 min-w-[16px] text-[10px]",
@@ -1484,11 +1682,11 @@ const kbd = {
 };
 
 const link = (options) => ({
-  base: "focus-visible:outline-[var(--ui-primary)]",
+  base: "focus-visible:outline-(--ui-primary)",
   variants: {
     active: {
-      true: "text-[var(--ui-primary)]",
-      false: ["text-[var(--ui-text-muted)] hover:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
+      true: "text-(--ui-primary)",
+      false: ["text-(--ui-text-muted) hover:text-(--ui-text)", options.theme.transitions && "transition-colors"]
     },
     disabled: {
       true: "cursor-not-allowed opacity-75"
@@ -1498,13 +1696,14 @@ const link = (options) => ({
 
 const modal = {
   slots: {
-    overlay: "fixed inset-0 bg-[var(--ui-bg-elevated)]/75",
-    content: "fixed w-full h-dvh bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] flex flex-col focus:outline-none",
-    header: "px-4 py-5 sm:px-6",
-    body: "flex-1 p-4 sm:p-6",
+    overlay: "fixed inset-0 bg-(--ui-bg-elevated)/75",
+    content: "fixed bg-(--ui-bg) divide-y divide-(--ui-border) flex flex-col focus:outline-none",
+    header: "flex items-center gap-1.5 p-4 sm:px-6 min-h-16",
+    wrapper: "",
+    body: "flex-1 overflow-y-auto p-4 sm:p-6",
     footer: "flex items-center gap-1.5 p-4 sm:px-6",
-    title: "text-[var(--ui-text-highlighted)] font-semibold",
-    description: "mt-1 text-[var(--ui-text-muted)] text-sm",
+    title: "text-(--ui-text-highlighted) font-semibold",
+    description: "mt-1 text-(--ui-text-muted) text-sm",
     close: "absolute top-4 end-4"
   },
   variants: {
@@ -1519,7 +1718,7 @@ const modal = {
         content: "inset-0"
       },
       false: {
-        content: "top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg sm:h-auto sm:my-8 sm:rounded-[calc(var(--ui-radius)*2)] sm:shadow-lg sm:ring ring-[var(--ui-border)]"
+        content: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-(--ui-border)"
       }
     }
   }
@@ -1529,41 +1728,42 @@ const navigationMenu = (options) => ({
   slots: {
     root: "relative flex gap-1.5 [&>div]:min-w-0",
     list: "isolate min-w-0",
+    label: "w-full flex items-center gap-1.5 font-semibold text-xs/5 text-(--ui-text-highlighted) px-2.5 py-1.5",
     item: "min-w-0",
     link: "group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
     linkLeadingIcon: "shrink-0 size-5",
     linkLeadingAvatar: "shrink-0",
     linkLeadingAvatarSize: "2xs",
-    linkTrailing: "ms-auto inline-flex",
-    linkTrailingBadge: "shrink-0 rounded-[calc(var(--ui-radius)]",
+    linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
+    linkTrailingBadge: "shrink-0",
     linkTrailingBadgeSize: "sm",
     linkTrailingIcon: "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
     linkLabel: "truncate",
-    linkLabelExternalIcon: "inline-block size-3 align-top text-[var(--ui-text-dimmed)]",
+    linkLabelExternalIcon: "inline-block size-3 align-top text-(--ui-text-dimmed)",
     childList: "",
     childItem: "",
     childLink: "group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start",
     childLinkWrapper: "flex flex-col items-start",
     childLinkIcon: "size-5 shrink-0",
     childLinkLabel: "font-semibold text-sm relative inline-flex",
-    childLinkLabelExternalIcon: "inline-block size-3 align-top text-[var(--ui-text-dimmed)]",
-    childLinkDescription: "text-sm text-[var(--ui-text-muted)]",
-    separator: "px-2 h-px bg-[var(--ui-border)]",
-    viewportWrapper: "absolute top-full left-0 flex w-full justify-center",
-    viewport: "relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--radix-navigation-menu-viewport-height)] w-full transition-[width,height] origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-    content: "absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]",
-    indicator: "data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] bottom-0 z-[1] flex h-2.5 items-end justify-center overflow-hidden transition-transform duration-200 ease-out",
-    arrow: "relative top-[50%] size-2.5 rotate-45 border border-[var(--ui-border)] bg-[var(--ui-bg)] z-[1] rounded-[calc(var(--ui-radius)/2)]"
+    childLinkLabelExternalIcon: "inline-block size-3 align-top text-(--ui-text-dimmed)",
+    childLinkDescription: "text-sm text-(--ui-text-muted)",
+    separator: "px-2 h-px bg-(--ui-border)",
+    viewportWrapper: "absolute top-full left-0 flex w-full",
+    viewport: "relative overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    content: "absolute top-0 left-0 w-full",
+    indicator: "absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[1] w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200",
+    arrow: "relative top-[50%] size-2.5 rotate-45 border border-(--ui-border) bg-(--ui-bg) z-[1] rounded-[calc(var(--ui-radius)/2)]"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        link: `focus-visible:before:ring-[var(--ui-${color})]`,
-        childLink: `focus-visible:outline-[var(--ui-${color})]`
+        link: `focus-visible:before:ring-(--ui-${color})`,
+        childLink: `focus-visible:outline-(--ui-${color})`
       }])),
       neutral: {
-        link: "focus-visible:before:ring-[var(--ui-border-inverted)]",
-        childLink: "focus-visible:outline-[var(--ui-border-inverted)]"
+        link: "focus-visible:before:ring-(--ui-border-inverted)",
+        childLink: "focus-visible:outline-(--ui-border-inverted)"
       }
     },
     highlightColor: {
@@ -1576,29 +1776,38 @@ const navigationMenu = (options) => ({
     },
     orientation: {
       horizontal: {
-        root: "w-full items-center justify-between",
+        root: "items-center justify-between",
         list: "flex items-center",
         item: "py-2",
         link: "px-2.5 py-1.5 before:inset-x-px before:inset-y-0",
-        childList: "grid grid-cols-2 gap-2 p-2"
+        childList: "grid p-2"
       },
       vertical: {
         root: "flex-col",
-        link: "flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0",
-        childList: "ms-5 border-s border-[var(--ui-border)]",
-        childItem: "ps-1.5 -ms-px"
+        link: "flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0"
+      }
+    },
+    contentOrientation: {
+      horizontal: {
+        viewport: "",
+        viewportWrapper: "justify-center",
+        content: "data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]"
+      },
+      vertical: {
+        viewport: "sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)",
+        content: ""
       }
     },
     active: {
       true: {
-        childLink: "bg-[var(--ui-bg-elevated)] text-[var(--ui-text-highlighted)]",
-        childLinkIcon: "text-[var(--ui-text)]"
+        childLink: "bg-(--ui-bg-elevated) text-(--ui-text-highlighted)",
+        childLinkIcon: "text-(--ui-text)"
       },
       false: {
-        link: "text-[var(--ui-text-muted)]",
-        linkLeadingIcon: "text-[var(--ui-text-dimmed)]",
-        childLink: ["hover:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text)] hover:text-[var(--ui-text-highlighted)]", options.theme.transitions && "transition-colors"],
-        childLinkIcon: ["text-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
+        link: "text-(--ui-text-muted)",
+        linkLeadingIcon: "text-(--ui-text-dimmed)",
+        childLink: ["hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted)", options.theme.transitions && "transition-colors"],
+        childLinkIcon: ["text-(--ui-text-dimmed) group-hover:text-(--ui-text)", options.theme.transitions && "transition-colors"]
       }
     },
     disabled: {
@@ -1608,29 +1817,56 @@ const navigationMenu = (options) => ({
     },
     highlight: {
       true: ""
+    },
+    level: {
+      true: ""
+    },
+    collapsed: {
+      true: ""
     }
   },
   compoundVariants: [{
-    highlight: true,
     orientation: "horizontal",
+    contentOrientation: "horizontal",
+    class: {
+      childList: "grid-cols-2 gap-2"
+    }
+  }, {
+    orientation: "horizontal",
+    contentOrientation: "vertical",
     class: {
-      item: "-mb-px",
-      link: "after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full"
+      childList: "gap-1",
+      content: "w-60"
     }
   }, {
+    orientation: "horizontal",
     highlight: true,
+    class: {
+      link: ["after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full", options.theme.transitions && "after:transition-colors"]
+    }
+  }, {
     orientation: "vertical",
+    highlight: true,
+    level: true,
+    class: {
+      link: ["after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full", options.theme.transitions && "after:transition-colors"]
+    }
+  }, {
+    disabled: false,
+    active: false,
+    variant: "pill",
     class: {
-      item: "px-1.5 -ms-px",
-      link: "after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full"
+      link: ["hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      linkLeadingIcon: ["group-hover:text-(--ui-text)", options.theme.transitions && "transition-colors"]
     }
   }, {
     disabled: false,
     active: false,
     variant: "pill",
+    orientation: "horizontal",
     class: {
-      link: ["hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)]", options.theme.transitions && "transition-colors before:transition-colors"],
-      linkLeadingIcon: ["group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
+      link: "data-[state=open]:text-(--ui-text-highlighted)",
+      linkLeadingIcon: "group-data-[state=open]:text-(--ui-text)"
     }
   }, {
     disabled: false,
@@ -1638,7 +1874,7 @@ const navigationMenu = (options) => ({
     highlight: true,
     orientation: "horizontal",
     class: {
-      link: "data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50"
+      link: "data-[state=open]:before:bg-(--ui-bg-elevated)/50"
     }
   }, {
     disabled: false,
@@ -1647,75 +1883,99 @@ const navigationMenu = (options) => ({
     active: false,
     orientation: "horizontal",
     class: {
-      link: "data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50"
+      link: "data-[state=open]:before:bg-(--ui-bg-elevated)/50"
     }
   }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "pill",
     active: true,
     class: {
-      link: `text-[var(--ui-${color})]`,
-      linkLeadingIcon: `text-[var(--ui-${color})]`
+      link: `text-(--ui-${color})`,
+      linkLeadingIcon: `text-(--ui-${color}) group-data-[state=open]:text-(--ui-${color})`
     }
   })), {
     color: "neutral",
     variant: "pill",
     active: true,
     class: {
-      link: "text-[var(--ui-text-highlighted)]",
-      linkLeadingIcon: "text-[var(--ui-text-highlighted)]"
+      link: "text-(--ui-text-highlighted)",
+      linkLeadingIcon: "text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)"
     }
   }, {
     variant: "pill",
     active: true,
     highlight: false,
     class: {
-      link: "before:bg-[var(--ui-bg-elevated)]"
+      link: "before:bg-(--ui-bg-elevated)"
     }
   }, {
     variant: "pill",
     active: true,
     highlight: true,
     class: {
-      link: ["hover:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "before:transition-colors"]
+      link: ["hover:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "before:transition-colors"]
+    }
+  }, {
+    disabled: false,
+    active: false,
+    variant: "link",
+    class: {
+      link: ["hover:text-(--ui-text-highlighted)", options.theme.transitions && "transition-colors"],
+      linkLeadingIcon: ["group-hover:text-(--ui-text)", options.theme.transitions && "transition-colors"]
     }
   }, {
     disabled: false,
     active: false,
     variant: "link",
+    orientation: "horizontal",
     class: {
-      link: ["hover:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)]", options.theme.transitions && "transition-colors"],
-      linkLeadingIcon: ["group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"]
+      link: "data-[state=open]:text-(--ui-text-highlighted)",
+      linkLeadingIcon: "group-data-[state=open]:text-(--ui-text)"
     }
   }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
     active: true,
     class: {
-      link: `text-[var(--ui-${color})]`,
-      linkLeadingIcon: `text-[var(--ui-${color})]`
+      link: `text-(--ui-${color})`,
+      linkLeadingIcon: `text-(--ui-${color}) group-data-[state=open]:text-(--ui-${color})`
     }
   })), {
     color: "neutral",
     variant: "link",
     active: true,
     class: {
-      link: "text-[var(--ui-text-highlighted)]",
-      linkLeadingIcon: "text-[var(--ui-text-highlighted)]"
+      link: "text-(--ui-text-highlighted)",
+      linkLeadingIcon: "text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)"
     }
   }, ...(options.theme.colors || []).map((highlightColor) => ({
     highlightColor,
     highlight: true,
+    level: true,
     active: true,
     class: {
-      link: `after:bg-[var(--ui-${highlightColor})]`
+      link: `after:bg-(--ui-${highlightColor})`
     }
   })), {
     highlightColor: "neutral",
     highlight: true,
+    level: true,
     active: true,
     class: {
-      link: "after:bg-[var(--ui-bg-inverted)]"
+      link: "after:bg-(--ui-bg-inverted)"
+    }
+  }, {
+    orientation: "vertical",
+    collapsed: false,
+    class: {
+      childList: "ms-5 border-s border-(--ui-border)",
+      childItem: "ps-1.5 -ms-px"
+    }
+  }, {
+    orientation: "vertical",
+    collapsed: true,
+    class: {
+      link: "px-1.5"
     }
   }],
   defaultVariants: {
@@ -1737,7 +1997,7 @@ const pagination = {
 const pinInput = (options) => ({
   slots: {
     root: "relative inline-flex items-center gap-1.5",
-    base: ["rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"]
+    base: ["rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"]
   },
   variants: {
     size: {
@@ -1758,11 +2018,11 @@ const pinInput = (options) => ({
       }
     },
     variant: {
-      outline: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)]",
-      soft: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/50",
-      subtle: "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)]",
-      ghost: "text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent",
-      none: "text-[var(--ui-text-highlighted)] bg-transparent"
+      outline: "text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented)",
+      soft: "text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50",
+      subtle: "text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented)",
+      ghost: "text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent",
+      none: "text-(--ui-text-highlighted) bg-transparent"
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
@@ -1775,19 +2035,19 @@ const pinInput = (options) => ({
   compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: ["outline", "subtle"],
-    class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
+    class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-${color})`
   })), ...(options.theme.colors || []).map((color) => ({
     color,
     highlight: true,
-    class: `ring ring-inset ring-[var(--ui-${color})]`
+    class: `ring ring-inset ring-(--ui-${color})`
   })), {
     color: "neutral",
     variant: ["outline", "subtle"],
-    class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]"
+    class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)"
   }, {
     color: "neutral",
     highlight: true,
-    class: "ring ring-inset ring-[var(--ui-border-inverted)]"
+    class: "ring ring-inset ring-(--ui-border-inverted)"
   }],
   defaultVariants: {
     size: "md",
@@ -1798,17 +2058,17 @@ const pinInput = (options) => ({
 
 const popover = {
   slots: {
-    content: "bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none",
-    arrow: "fill-[var(--ui-border)]"
+    content: "bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto",
+    arrow: "fill-(--ui-border)"
   }
 };
 
 const progress = (options) => ({
   slots: {
     root: "gap-2",
-    base: "relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)]",
+    base: "relative overflow-hidden rounded-full bg-(--ui-bg-accented)",
     indicator: "rounded-full size-full transition-transform duration-200 ease-out",
-    status: "flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200",
+    status: "flex justify-end text-(--ui-text-dimmed) transition-[width] duration-200",
     steps: "grid items-end",
     step: "truncate text-end row-start-1 col-start-1 transition-opacity"
   },
@@ -1821,12 +2081,12 @@ const progress = (options) => ({
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        indicator: `bg-[var(--ui-${color})]`,
-        steps: `text-[var(--ui-${color})]`
+        indicator: `bg-(--ui-${color})`,
+        steps: `text-(--ui-${color})`
       }])),
       neutral: {
-        indicator: "bg-[var(--ui-bg-inverted)]",
-        steps: "text-[var(--ui-bg)]"
+        indicator: "bg-(--ui-bg-inverted)",
+        steps: "text-(--ui-bg)"
       }
     },
     size: {
@@ -1864,7 +2124,7 @@ const progress = (options) => ({
         step: "opacity-100"
       },
       first: {
-        step: "opacity-100 text-[var(--ui-text-muted)]"
+        step: "opacity-100 text-(--ui-text-muted)"
       },
       other: {
         step: "opacity-0"
@@ -1965,7 +2225,7 @@ const progress = (options) => ({
     orientation: "horizontal",
     animation: "carousel",
     class: {
-      indicator: "data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"
+      indicator: "data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"
     }
   }, {
     orientation: "vertical",
@@ -1977,7 +2237,7 @@ const progress = (options) => ({
     orientation: "horizontal",
     animation: "carousel-inverse",
     class: {
-      indicator: "data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite]"
+      indicator: "data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"
     }
   }, {
     orientation: "vertical",
@@ -2021,24 +2281,24 @@ const radioGroup = (options) => ({
   slots: {
     root: "relative",
     fieldset: "flex",
-    legend: "mb-1 block font-medium text-[var(--ui-text)]",
+    legend: "mb-1 block font-medium text-(--ui-text)",
     item: "flex items-start",
-    base: "rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-[var(--ui-bg)]",
-    indicator: "flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full",
+    base: "rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2",
+    indicator: "flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full",
     container: "flex items-center",
     wrapper: "ms-2",
-    label: "block font-medium text-[var(--ui-text)]",
-    description: "text-[var(--ui-text-muted)]"
+    label: "block font-medium text-(--ui-text)",
+    description: "text-(--ui-text-muted)"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        base: `focus-visible:outline-[var(--ui-${color})]`,
-        indicator: `bg-[var(--ui-${color})]`
+        base: `focus-visible:outline-(--ui-${color})`,
+        indicator: `bg-(--ui-${color})`
       }])),
       neutral: {
-        base: "focus-visible:outline-[var(--ui-border-inverted)]",
-        indicator: "bg-[var(--ui-bg-inverted)]"
+        base: "focus-visible:outline-(--ui-border-inverted)",
+        indicator: "bg-(--ui-bg-inverted)"
       }
     },
     orientation: {
@@ -2100,7 +2360,7 @@ const radioGroup = (options) => ({
     },
     required: {
       true: {
-        legend: "after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]"
+        legend: "after:content-['*'] after:ms-0.5 after:text-(--ui-error)"
       }
     }
   },
@@ -2113,18 +2373,19 @@ const radioGroup = (options) => ({
 const select = (options) => {
   return defuFn({
     slots: {
-      root: () => void 0,
+      root: () => undefined,
       base: () => ["relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"],
-      value: "truncate group-data-placeholder:text-[var(--ui-text-dimmed)]",
-      arrow: "fill-[var(--ui-border)]",
-      content: "max-h-60 w-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-      viewport: "divide-y divide-[var(--ui-border)] scroll-py-1",
+      value: "truncate pointer-events-none",
+      placeholder: "truncate text-(--ui-text-dimmed)",
+      arrow: "fill-(--ui-border)",
+      content: "max-h-60 w-(--reka-popper-anchor-width) bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto",
+      viewport: "divide-y divide-(--ui-border) scroll-py-1",
       group: "p-1 isolate",
-      empty: "py-2 text-center text-sm text-[var(--ui-text-muted)]",
-      label: "font-semibold text-[var(--ui-text-highlighted)]",
-      separator: "-mx-1 my-1 h-px bg-[var(--ui-border)]",
-      item: ["group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50", options.theme.transitions && "transition-colors before:transition-colors"],
-      itemLeadingIcon: ["shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]", options.theme.transitions && "transition-colors"],
+      empty: "py-2 text-center text-sm text-(--ui-text-muted)",
+      label: "font-semibold text-(--ui-text-highlighted)",
+      separator: "-mx-1 my-1 h-px bg-(--ui-border)",
+      item: ["group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "transition-colors before:transition-colors"],
+      itemLeadingIcon: ["shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text)", options.theme.transitions && "transition-colors"],
       itemLeadingAvatar: "shrink-0",
       itemLeadingAvatarSize: "",
       itemLeadingChip: "shrink-0",
@@ -2189,9 +2450,8 @@ const select = (options) => {
 const selectMenu = (options) => {
   return defu({
     slots: {
-      value: "truncate",
-      placeholder: "truncate text-[var(--ui-text-dimmed)]",
-      input: "border-b border-[var(--ui-border)]"
+      input: "border-b border-(--ui-border)",
+      focusScope: "flex flex-col min-h-0"
     }
   }, select(options));
 };
@@ -2200,7 +2460,7 @@ const separator = (options) => ({
   slots: {
     root: "flex items-center align-center text-center",
     border: "",
-    container: "font-medium text-[var(--ui-text)] flex",
+    container: "font-medium text-(--ui-text) flex",
     icon: "shrink-0 size-5",
     avatar: "shrink-0",
     avatarSize: "2xs",
@@ -2208,8 +2468,8 @@ const separator = (options) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, { border: `border-[var(--ui-${color})]` }])),
-      neutral: { border: "border-[var(--ui-border)]" }
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, { border: `border-(--ui-${color})` }])),
+      neutral: { border: "border-(--ui-border)" }
     },
     orientation: {
       horizontal: {
@@ -2291,18 +2551,19 @@ const separator = (options) => ({
 });
 
 const skeleton = {
-  base: "animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-bg-elevated)]"
+  base: "animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-bg-elevated)"
 };
 
 const slideover = {
   slots: {
-    overlay: "fixed inset-0 bg-[var(--ui-bg-elevated)]/75",
-    content: "fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] sm:ring ring-[var(--ui-border)] sm:shadow-lg flex flex-col focus:outline-none",
-    header: "px-4 py-5 sm:px-6",
+    overlay: "fixed inset-0 bg-(--ui-bg-elevated)/75",
+    content: "fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--ui-border) sm:shadow-lg flex flex-col focus:outline-none",
+    header: "flex items-center gap-1.5 p-4 sm:px-6 min-h-16",
+    wrapper: "",
     body: "flex-1 overflow-y-auto p-4 sm:p-6",
     footer: "flex items-center gap-1.5 p-4 sm:px-6",
-    title: "text-[var(--ui-text-highlighted)] font-semibold",
-    description: "mt-1 text-[var(--ui-text-muted)] text-sm",
+    title: "text-(--ui-text-highlighted) font-semibold",
+    description: "mt-1 text-(--ui-text-muted) text-sm",
     close: "absolute top-4 end-4"
   },
   variants: {
@@ -2356,19 +2617,19 @@ const slideover = {
 const slider = (options) => ({
   slots: {
     root: "relative flex items-center select-none touch-none",
-    track: "relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow",
+    track: "relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow",
     range: "absolute rounded-full",
-    thumb: "rounded-full bg-[var(--ui-bg)] ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
+    thumb: "rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        range: `bg-[var(--ui-${color})]`,
-        thumb: `ring-[var(--ui-${color})] focus-visible:outline-[var(--ui-${color})]`
+        range: `bg-(--ui-${color})`,
+        thumb: `ring-(--ui-${color}) focus-visible:outline-(--ui-${color})/50`
       }])),
       neutral: {
-        range: "bg-[var(--ui-bg-inverted)]",
-        thumb: "ring-[var(--ui-border-inverted)] focus-visible:outline-[var(--ui-border-inverted)]/50"
+        range: "bg-(--ui-bg-inverted)",
+        thumb: "ring-(--ui-border-inverted) focus-visible:outline-(--ui-border-inverted)/50"
       }
     },
     size: {
@@ -2471,26 +2732,150 @@ const slider = (options) => ({
   }
 });
 
+const stepper = (options) => ({
+  slots: {
+    root: "flex gap-4",
+    header: "flex",
+    item: "group text-center relative w-full",
+    container: "relative",
+    trigger: "rounded-full font-medium text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-(--ui-bg) group-data-[state=active]:text-(--ui-bg) text-(--ui-text-muted) bg-(--ui-bg-elevated) focus-visible:outline-2 focus-visible:outline-offset-2",
+    indicator: "flex items-center justify-center size-full",
+    icon: "shrink-0",
+    separator: "absolute rounded-full group-data-[disabled]:opacity-75 bg-(--ui-border-accented)",
+    wrapper: "",
+    title: "font-medium text-(--ui-text)",
+    description: "text-(--ui-text-muted) text-wrap",
+    content: "size-full"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "flex-col",
+        container: "flex justify-center",
+        separator: "top-[calc(50%-2px)] h-0.5",
+        wrapper: "mt-1"
+      },
+      vertical: {
+        header: "flex-col gap-4",
+        item: "flex text-start",
+        separator: "start-[calc(50%-1px)] -bottom-[10px] w-0.5"
+      }
+    },
+    size: {
+      xs: {
+        trigger: "size-6 text-xs",
+        icon: "size-3",
+        title: "text-xs",
+        description: "text-xs",
+        wrapper: "mt-1.5"
+      },
+      sm: {
+        trigger: "size-8 text-sm",
+        icon: "size-4",
+        title: "text-xs",
+        description: "text-xs",
+        wrapper: "mt-2"
+      },
+      md: {
+        trigger: "size-10 text-base",
+        icon: "size-5",
+        title: "text-sm",
+        description: "text-sm",
+        wrapper: "mt-2.5"
+      },
+      lg: {
+        trigger: "size-12 text-lg",
+        icon: "size-6",
+        title: "text-base",
+        description: "text-base",
+        wrapper: "mt-3"
+      },
+      xl: {
+        trigger: "size-14 text-xl",
+        icon: "size-7",
+        title: "text-lg",
+        description: "text-lg",
+        wrapper: "mt-3.5"
+      }
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        trigger: `group-data-[state=completed]:bg-(--ui-${color}) group-data-[state=active]:bg-(--ui-${color}) focus-visible:outline-(--ui-${color})`,
+        separator: `group-data-[state=completed]:bg-(--ui-${color})`
+      }])),
+      neutral: {
+        trigger: `group-data-[state=completed]:bg-(--ui-bg-inverted) group-data-[state=active]:bg-(--ui-bg-inverted) focus-visible:outline-(--ui-border-inverted)`,
+        separator: `group-data-[state=completed]:bg-(--ui-bg-inverted)`
+      }
+    }
+  },
+  compoundVariants: [{
+    orientation: "horizontal",
+    size: "xs",
+    class: { separator: "start-[calc(50%+16px)] end-[calc(-50%+16px)]" }
+  }, {
+    orientation: "horizontal",
+    size: "sm",
+    class: { separator: "start-[calc(50%+20px)] end-[calc(-50%+20px)]" }
+  }, {
+    orientation: "horizontal",
+    size: "md",
+    class: { separator: "start-[calc(50%+28px)] end-[calc(-50%+28px)]" }
+  }, {
+    orientation: "horizontal",
+    size: "lg",
+    class: { separator: "start-[calc(50%+32px)] end-[calc(-50%+32px)]" }
+  }, {
+    orientation: "horizontal",
+    size: "xl",
+    class: { separator: "start-[calc(50%+36px)] end-[calc(-50%+36px)]" }
+  }, {
+    orientation: "vertical",
+    size: "xs",
+    class: { separator: "top-[30px]", item: "gap-1.5" }
+  }, {
+    orientation: "vertical",
+    size: "sm",
+    class: { separator: "top-[38px]", item: "gap-2" }
+  }, {
+    orientation: "vertical",
+    size: "md",
+    class: { separator: "top-[46px]", item: "gap-2.5" }
+  }, {
+    orientation: "vertical",
+    size: "lg",
+    class: { separator: "top-[54px]", item: "gap-3" }
+  }, {
+    orientation: "vertical",
+    size: "xl",
+    class: { separator: "top-[62px]", item: "gap-3.5" }
+  }],
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});
+
 const _switch = (options) => ({
   slots: {
     root: "relative flex items-start",
-    base: ["inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-bg)] data-[state=unchecked]:bg-[var(--ui-bg-accented)]", options.theme.transitions && "transition-colors duration-200"],
+    base: ["inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented)", options.theme.transitions && "transition-colors duration-200"],
     container: "flex items-center",
-    thumb: "group pointer-events-none block rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center",
-    icon: ["absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12", options.theme.transitions && "transition-[color,opacity] duration-200"],
+    thumb: "group pointer-events-none rounded-full bg-(--ui-bg) shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center",
+    icon: ["absolute shrink-0 group-data-[state=unchecked]:text-(--ui-text-dimmed) opacity-0 size-10/12", options.theme.transitions && "transition-[color,opacity] duration-200"],
     wrapper: "ms-2",
-    label: "block font-medium text-[var(--ui-text)]",
-    description: "text-[var(--ui-text-muted)]"
+    label: "block font-medium text-(--ui-text)",
+    description: "text-(--ui-text-muted)"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        base: `data-[state=checked]:bg-[var(--ui-${color})] focus-visible:ring-[var(--ui-${color})]`,
-        icon: `group-data-[state=checked]:text-[var(--ui-${color})]`
+        base: `data-[state=checked]:bg-(--ui-${color}) focus-visible:outline-(--ui-${color})`,
+        icon: `group-data-[state=checked]:text-(--ui-${color})`
       }])),
       neutral: {
-        base: "data-[state=checked]:bg-[var(--ui-bg-inverted)] focus-visible:ring-[var(--ui-border-inverted)]",
-        icon: "group-data-[state=checked]:text-[var(--ui-text-highlighted)]"
+        base: "data-[state=checked]:bg-(--ui-bg-inverted) focus-visible:outline-(--ui-border-inverted)",
+        icon: "group-data-[state=checked]:text-(--ui-text-highlighted)"
       }
     },
     size: {
@@ -2542,7 +2927,7 @@ const _switch = (options) => ({
     },
     required: {
       true: {
-        label: "after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]"
+        label: "after:content-['*'] after:ms-0.5 after:text-(--ui-error)"
       }
     },
     disabled: {
@@ -2564,23 +2949,23 @@ const table = (options) => ({
     root: "relative overflow-auto",
     base: "min-w-full overflow-clip",
     caption: "sr-only",
-    thead: "relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]",
-    tbody: "divide-y divide-[var(--ui-border)]",
-    tr: "data-[selected=true]:bg-[var(--ui-bg-elevated)]/50",
-    th: "px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
-    td: "p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0",
-    empty: "py-6 text-center text-sm text-[var(--ui-text-muted)]"
+    thead: "relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)",
+    tbody: "divide-y divide-(--ui-border) [&>tr]:data-[selectable=true]:hover:bg-(--ui-bg-elevated)/50 [&>tr]:data-[selectable=true]:focus-visible:outline-(--ui-primary)",
+    tr: "data-[selected=true]:bg-(--ui-bg-elevated)/50",
+    th: "px-4 py-3.5 text-sm text-(--ui-text-highlighted) text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
+    td: "p-4 text-sm text-(--ui-text-muted) whitespace-nowrap [&:has([role=checkbox])]:pe-0",
+    empty: "py-6 text-center text-sm text-(--ui-text-muted)"
   },
   variants: {
     pinned: {
       true: {
-        th: "sticky bg-[var(--ui-bg)]/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0",
-        td: "sticky bg-[var(--ui-bg)]/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0"
+        th: "sticky bg-(--ui-bg)/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0",
+        td: "sticky bg-(--ui-bg)/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0"
       }
     },
     sticky: {
       true: {
-        thead: "sticky top-0 inset-x-0 bg-[var(--ui-bg)]/75 z-[1] backdrop-blur"
+        thead: "sticky top-0 inset-x-0 bg-(--ui-bg)/75 z-[1] backdrop-blur"
       }
     },
     loading: {
@@ -2603,25 +2988,25 @@ const table = (options) => ({
     loading: true,
     loadingColor,
     class: {
-      thead: `after:bg-[var(--ui-${loadingColor})]`
+      thead: `after:bg-(--ui-${loadingColor})`
     }
   })), {
     loading: true,
     loadingColor: "neutral",
     class: {
-      thead: "after:bg-[var(--ui-bg-inverted)]"
+      thead: "after:bg-(--ui-bg-inverted)"
     }
   }, {
     loading: true,
     loadingAnimation: "carousel",
     class: {
-      thead: "after:animate-[carousel_2s_ease-in-out_infinite]"
+      thead: "after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]"
     }
   }, {
     loading: true,
     loadingAnimation: "carousel-inverse",
     class: {
-      thead: "after:animate-[carousel-inverse_2s_ease-in-out_infinite]"
+      thead: "after:animate-[carousel-inverse_2s_ease-in-out_infinite] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"
     }
   }, {
     loading: true,
@@ -2647,7 +3032,7 @@ const tabs = (options) => ({
     root: "flex items-center gap-2",
     list: "relative flex p-1 group",
     indicator: "absolute transition-[translate,width] duration-200",
-    trigger: ["relative inline-flex items-center shrink-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none", options.theme.transitions && "transition-colors"],
+    trigger: ["group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden", options.theme.transitions && "transition-colors"],
     content: "focus:outline-none w-full",
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
@@ -2661,12 +3046,12 @@ const tabs = (options) => ({
     },
     variant: {
       pill: {
-        list: "bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)]",
+        list: "bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)]",
         trigger: "flex-1 w-full",
         indicator: "rounded-[calc(var(--ui-radius)*1.5)] shadow-xs"
       },
       link: {
-        list: "border-[var(--ui-border)]",
+        list: "border-(--ui-border)",
         indicator: "rounded-full"
       }
     },
@@ -2674,12 +3059,12 @@ const tabs = (options) => ({
       horizontal: {
         root: "flex-col",
         list: "w-full",
-        indicator: "left-0 w-[var(--radix-tabs-indicator-size)] translate-x-[var(--radix-tabs-indicator-position)]",
+        indicator: "left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position)",
         trigger: "justify-center"
       },
       vertical: {
         list: "flex-col",
-        indicator: "top-0 h-[var(--radix-tabs-indicator-size)] translate-y-[var(--radix-tabs-indicator-position)]"
+        indicator: "top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position)"
       }
     },
     size: {
@@ -2741,29 +3126,29 @@ const tabs = (options) => ({
     color,
     variant: "pill",
     class: {
-      indicator: `bg-[var(--ui-${color})]`,
-      trigger: `data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-${color})]`
+      indicator: `bg-(--ui-${color})`,
+      trigger: `data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-${color})`
     }
   })), {
     color: "neutral",
     variant: "pill",
     class: {
-      indicator: "bg-[var(--ui-bg-inverted)]",
-      trigger: "data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-inverted)]"
+      indicator: "bg-(--ui-bg-inverted)",
+      trigger: "data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)"
     }
   }, ...(options.theme.colors || []).map((color) => ({
     color,
     variant: "link",
     class: {
-      indicator: `bg-[var(--ui-${color})]`,
-      trigger: `data-[state=active]:text-[var(--ui-${color})] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`
+      indicator: `bg-(--ui-${color})`,
+      trigger: `data-[state=active]:text-(--ui-${color}) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-${color})`
     }
   })), {
     color: "neutral",
     variant: "link",
     class: {
-      indicator: "bg-[var(--ui-bg-inverted)]",
-      trigger: "data-[state=active]:text-[var(--ui-text-highlighted)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]"
+      indicator: "bg-(--ui-bg-inverted)",
+      trigger: "data-[state=active]:text-(--ui-text-highlighted) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)"
     }
   }],
   defaultVariants: {
@@ -2779,38 +3164,43 @@ const textarea = (options) => {
 
 const toast = (options) => ({
   slots: {
-    root: "relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none",
-    wrapper: "w-0 flex-1 flex flex-col gap-1",
-    title: "text-sm font-medium text-[var(--ui-text-highlighted)]",
-    description: "text-sm text-[var(--ui-text-muted)]",
+    root: "relative group overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-(--ui-border) p-4 flex gap-2.5 focus:outline-none",
+    wrapper: "w-0 flex-1 flex flex-col",
+    title: "text-sm font-medium text-(--ui-text-highlighted)",
+    description: "text-sm text-(--ui-text-muted)",
     icon: "shrink-0 size-5",
     avatar: "shrink-0",
     avatarSize: "2xl",
     actions: "flex gap-1.5 shrink-0",
     progress: "absolute inset-x-0 bottom-0 h-1 z-[-1]",
-    close: "p-0.5"
+    close: "p-0"
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
-        root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${color})]`,
-        icon: `text-[var(--ui-${color})]`,
-        progress: `bg-[var(--ui-${color})]`
+        root: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-${color})`,
+        icon: `text-(--ui-${color})`,
+        progress: `bg-(--ui-${color})`
       }])),
       neutral: {
-        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]",
-        icon: "text-[var(--ui-text-highlighted)]",
-        progress: "bg-[var(--ui-bg-inverted)]"
+        root: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)",
+        icon: "text-(--ui-text-highlighted)",
+        progress: "bg-(--ui-bg-inverted)"
       }
     },
-    multiline: {
-      true: {
-        root: "items-start",
-        actions: "items-start mt-1"
-      },
-      false: {
+    orientation: {
+      horizontal: {
         root: "items-center",
         actions: "items-center"
+      },
+      vertical: {
+        root: "items-start",
+        actions: "items-start mt-2.5"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-1"
       }
     }
   },
@@ -2821,8 +3211,8 @@ const toast = (options) => ({
 
 const toaster = {
   slots: {
-    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none",
-    base: "pointer-events-auto absolute inset-x-0 z-[var(--index)] transform-[var(--transform)] data-[expanded=false]:data-[front=false]:h-[var(--front-height)] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
+    viewport: "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none",
+    base: "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
   },
   variants: {
     position: {
@@ -2866,10 +3256,10 @@ const toaster = {
     }
   }, {
     swipeDirection: ["left", "right"],
-    class: "data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=cancel]:translate-x-0"
+    class: "data-[swipe=move]:translate-x-(--reka-toast-swipe-move-x) data-[swipe=end]:translate-x-(--reka-toast-swipe-end-x) data-[swipe=cancel]:translate-x-0"
   }, {
     swipeDirection: ["up", "down"],
-    class: "data-[swipe=move]:translate-y-[var(--radix-toast-swipe-move-y)] data-[swipe=end]:translate-y-[var(--radix-toast-swipe-end-y)] data-[swipe=cancel]:translate-y-0"
+    class: "data-[swipe=move]:translate-y-(--reka-toast-swipe-move-y) data-[swipe=end]:translate-y-(--reka-toast-swipe-end-y) data-[swipe=cancel]:translate-y-0"
   }],
   defaultVariants: {
     position: "bottom-right"
@@ -2878,14 +3268,95 @@ const toaster = {
 
 const tooltip = {
   slots: {
-    content: "flex items-center gap-1 bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] shadow-sm rounded-[var(--ui-radius)] ring ring-[var(--ui-border)] h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-    arrow: "fill-[var(--ui-border)]",
+    content: "flex items-center gap-1 bg-(--ui-bg) text-(--ui-text-highlighted) shadow-sm rounded-(--ui-radius) ring ring-(--ui-border) h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto",
+    arrow: "fill-(--ui-border)",
     text: "truncate",
     kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['\xB7'] before:me-0.5`,
     kbdsSize: "sm"
   }
 };
 
+const tree = (options) => ({
+  slots: {
+    root: "relative isolate",
+    item: "",
+    listWithChildren: "ms-4.5 border-s border-(--ui-border)",
+    itemWithChildren: "ps-1.5 -ms-px",
+    link: "relative group w-full flex items-center text-sm before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    linkLeadingIcon: "shrink-0",
+    linkLabel: "truncate",
+    linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
+    linkTrailingIcon: "shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        link: `focus-visible:before:ring-(--ui-${color})`
+      }])),
+      neutral: {
+        link: "focus-visible:before:ring-(--ui-border-inverted)"
+      }
+    },
+    size: {
+      xs: {
+        link: "px-2 py-1 text-xs gap-1",
+        linkLeadingIcon: "size-4",
+        linkTrailingIcon: "size-4"
+      },
+      sm: {
+        link: "px-2.5 py-1.5 text-xs gap-1.5",
+        linkLeadingIcon: "size-4",
+        linkTrailingIcon: "size-4"
+      },
+      md: {
+        link: "px-2.5 py-1.5 text-sm gap-1.5",
+        linkLeadingIcon: "size-5",
+        linkTrailingIcon: "size-5"
+      },
+      lg: {
+        link: "px-3 py-2 text-sm gap-2",
+        linkLeadingIcon: "size-5",
+        linkTrailingIcon: "size-5"
+      },
+      xl: {
+        link: "px-3 py-2 text-base gap-2",
+        linkLeadingIcon: "size-6",
+        linkTrailingIcon: "size-6"
+      }
+    },
+    selected: {
+      true: {
+        link: "before:bg-(--ui-bg-elevated)"
+      },
+      false: {
+        link: ["hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50", options.theme.transitions && "transition-colors before:transition-colors"]
+      }
+    },
+    disabled: {
+      true: {
+        link: "cursor-not-allowed opacity-75"
+      }
+    }
+  },
+  compoundVariants: [...(options.theme.colors || []).map((color) => ({
+    color,
+    selected: true,
+    class: {
+      link: `text-(--ui-${color})`
+    }
+  })), {
+    color: "neutral",
+    selected: true,
+    class: {
+      link: "text-(--ui-text-highlighted)"
+    }
+  }],
+  defaultVariants: {
+    color: "primary",
+    size: "md"
+  }
+});
+
 const theme = {
   __proto__: null,
   accordion: accordion,
@@ -2896,11 +3367,13 @@ const theme = {
   breadcrumb: breadcrumb,
   button: button,
   buttonGroup: buttonGroup,
+  calendar: calendar,
   card: card,
   carousel: carousel,
   checkbox: checkbox,
   chip: chip,
   collapsible: collapsible,
+  colorPicker: colorPicker,
   commandPalette: commandPalette,
   container: container,
   contextMenu: contextMenu,
@@ -2926,21 +3399,17 @@ const theme = {
   skeleton: skeleton,
   slideover: slideover,
   slider: slider,
+  stepper: stepper,
   switch: _switch,
   table: table,
   tabs: tabs,
   textarea: textarea,
   toast: toast,
   toaster: toaster,
-  tooltip: tooltip
+  tooltip: tooltip,
+  tree: tree
 };
 
-function buildTemplates(options) {
-  return Object.entries(theme).reduce((acc, [key, component]) => {
-    acc[key] = typeof component === "function" ? component(options) : component;
-    return acc;
-  }, {});
-}
 function getTemplates(options, uiConfig) {
   const templates = [];
   for (const component in theme) {
@@ -2950,19 +3419,52 @@ function getTemplates(options, uiConfig) {
       getContents: async () => {
         const template = theme[component];
         const result = typeof template === "function" ? template(options) : template;
-        const variants = Object.keys(result.variants || {});
+        const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
+          const keys = Object.keys(values);
+          return keys.some((key) => key !== "true" && key !== "false");
+        }).map(([key]) => key);
         let json = JSON.stringify(result, null, 2);
         for (const variant of variants) {
-          json = json.replace(new RegExp(`("${variant}": "[^"]+")`, "g"), "$1 as const");
+          json = json.replace(new RegExp(`("${variant}": "[^"]+")`, "g"), `$1 as typeof ${variant}[number]`);
           json = json.replace(new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, "g"), (_, before, match, after) => {
-            const replaced = match.replace(/("[^"]+")/g, "$1 as const");
+            const replaced = match.replace(/("[^"]+")/g, `$1 as typeof ${variant}[number]`);
             return `${before}${replaced}${after}`;
           });
         }
-        return `export default ${json}`;
+        function generateVariantDeclarations(variants2) {
+          return variants2.map((variant) => {
+            const keys = Object.keys(result.variants[variant]);
+            return `const ${variant} = ${JSON.stringify(keys, null, 2)} as const`;
+          });
+        }
+        return [
+          ...generateVariantDeclarations(variants),
+          `export default ${json}`
+        ].join("\n\n");
       }
     });
   }
+  templates.push({
+    filename: "ui.css",
+    write: true,
+    getContents: () => `@source "./ui";
+
+@theme default static {
+  --color-old-neutral-50: ${colors.neutral[50]};
+  --color-old-neutral-100: ${colors.neutral[100]};
+  --color-old-neutral-200: ${colors.neutral[200]};
+  --color-old-neutral-300: ${colors.neutral[300]};
+  --color-old-neutral-400: ${colors.neutral[400]};
+  --color-old-neutral-500: ${colors.neutral[500]};
+  --color-old-neutral-600: ${colors.neutral[600]};
+  --color-old-neutral-700: ${colors.neutral[700]};
+  --color-old-neutral-800: ${colors.neutral[800]};
+  --color-old-neutral-900: ${colors.neutral[900]};
+  --color-old-neutral-950: ${colors.neutral[950]};
+  ${[...options.theme?.colors || [], "neutral"].map((color) => [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`).join("\n	")).join("\n	")}
+}
+`
+  });
   templates.push({
     filename: "ui/index.ts",
     write: true,
@@ -2971,13 +3473,14 @@ function getTemplates(options, uiConfig) {
   templates.push({
     filename: "types/ui.d.ts",
     getContents: () => `import * as ui from '#build/ui'
-import type { DeepPartial } from '#ui/types/utils'
+import type { DeepPartial } from '@nuxt/ui'
+import type { defaultConfig } from 'tailwind-variants'
 import colors from 'tailwindcss/colors'
 
 const icons = ${JSON.stringify(uiConfig.icons)};
 
-type NeutralColor = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone'
-type Color = Exclude<keyof typeof colors, 'inherit' | 'current' | 'transparent' | 'black' | 'white' | NeutralColor>
+type NeutralColor = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | (string & {})
+type Color = Exclude<keyof typeof colors, 'inherit' | 'current' | 'transparent' | 'black' | 'white' | NeutralColor> | (string & {})
 
 type AppConfigUI = {
   colors?: {
@@ -2985,6 +3488,7 @@ type AppConfigUI = {
     neutral?: NeutralColor
   }
   icons?: Partial<typeof icons>
+  tv?: typeof defaultConfig
 } & DeepPartial<typeof ui>
 
 declare module '@nuxt/schema' {
@@ -3020,4 +3524,4 @@ function addTemplates(options, nuxt, resolve) {
   });
 }
 
-export { getDefaultUiConfig as a, addTemplates as b, buildTemplates as c, defaultOptions as d, getTemplates as g, resolveColors as r };
+export { getDefaultUiConfig as a, addTemplates as b, defaultOptions as d, getTemplates as g, resolveColors as r };