@byyuurin/ui 0.1.0 → 0.3.0

package/dist/shared/{ui.DSyJHSTk.mjs → ui.DpkP12cX.mjs}

@@ -4,12 +4,12 @@ import { findPath, addTypeTemplate, addTemplate } from '@nuxt/kit';
 import { loadConfig } from '@unocss/config';
 import { genExport } from 'knitwork';
 import { kebabCase } from 'scule';
-import { n as neutralColors } from './ui.CzIlLITK.mjs';
+import { n as neutralColors } from './ui.9kQouwss.mjs';
 import { ct } from '@byyuurin/ui-kit';
 import { defu } from 'defu';
 
 const name = "@byyuurin/ui";
-const version = "0.1.0";
+const version = "0.3.0";
 
 const accordion = ct({
   parts: {
@@ -149,31 +149,31 @@ const avatar = ct({
   variants: {
     size: {
       "3xs": {
-        root: "size-4 text-[0.5rem]"
+        root: "size-4 text-2"
       },
       "2xs": {
-        root: "size-5 text-[0.625rem]"
+        root: "size-5 text-2.5"
       },
       "xs": {
-        root: "size-6 text-xs"
+        root: "size-6 text-3"
       },
       "sm": {
-        root: "size-7 text-sm"
+        root: "size-7 text-3.5"
       },
       "md": {
-        root: "size-8 text-base"
+        root: "size-8 text-4"
       },
       "lg": {
-        root: "size-9 text-lg"
+        root: "size-9 text-4.5"
       },
       "xl": {
-        root: "size-10 text-xl"
+        root: "size-10 text-5"
       },
       "2xl": {
-        root: "size-11 text-[1.375rem]"
+        root: "size-11 text-5.5"
       },
       "3xl": {
-        root: "size-12 text-2xl"
+        root: "size-12 text-6"
       }
     }
   },
@@ -288,31 +288,31 @@ const badge = (options) => ct({
     },
     size: {
       xs: {
-        base: "text-[0.5rem]/3 px-1 py-0.5 gap-1 rounded-sm",
+        base: "text-2/3 px-1 py-0.5 gap-1 rounded-sm",
         leadingIcon: "size-3",
         leadingAvatarSize: "3xs",
         trailingIcon: "size-3"
       },
       sm: {
-        base: "text-[0.625rem]/3 px-1.5 py-1 gap-1 rounded-sm",
+        base: "text-2.5/3 px-1.5 py-1 gap-1 rounded-sm",
         leadingIcon: "size-3",
         leadingAvatarSize: "3xs",
         trailingIcon: "size-3"
       },
       md: {
-        base: "text-xs px-2 py-1 gap-1 rounded-md",
+        base: "text-3/4 px-2 py-1 gap-1 rounded-md",
         leadingIcon: "size-4",
         leadingAvatarSize: "3xs",
         trailingIcon: "size-4"
       },
       lg: {
-        base: "text-sm px-2 py-1 gap-1.5 rounded-md",
+        base: "text-3.5/5 px-2 py-1 gap-1.5 rounded-md",
         leadingIcon: "size-5",
         leadingAvatarSize: "2xs",
         trailingIcon: "size-5"
       },
       xl: {
-        base: "text-base px-2.5 py-1 gap-1.5 rounded-md",
+        base: "text-4/6 px-2.5 py-1 gap-1.5 rounded-md",
         leadingIcon: "size-6",
         leadingAvatarSize: "2xs",
         trailingIcon: "size-6"
@@ -703,30 +703,30 @@ const calendar = (options) => ct({
       xs: {
         heading: "text-xs",
         cell: "text-xs",
-        headCell: "text-[0.625rem]",
+        headCell: "text-2.5",
         cellTrigger: "size-7",
         body: "space-y-2 pt-2"
       },
       sm: {
         heading: "text-xs",
-        headCell: "text-xs",
+        headCell: "text-3",
         cell: "text-xs",
         cellTrigger: "size-7"
       },
       md: {
         heading: "text-sm",
-        headCell: "text-xs",
+        headCell: "text-3",
         cell: "text-sm",
         cellTrigger: "size-8"
       },
       lg: {
         heading: "text-base",
-        headCell: "text-base",
+        headCell: "text-4",
         cellTrigger: "size-9 text-base"
       },
       xl: {
         heading: "text-lg",
-        headCell: "text-lg",
+        headCell: "text-4.5",
         cellTrigger: "size-10 text-lg"
       }
     },
@@ -860,7 +860,7 @@ const carousel = (options) => ct({
     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-accented rounded-full",
+      "cursor-pointer size-3 bg-accented rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
       options.theme.transitions && "transition"
     ]
   },
@@ -914,7 +914,7 @@ const checkbox = (options) => ct({
         root: ""
       },
       card: {
-        root: "border border-muted rounded-lg"
+        root: "border border-muted rounded-lg cursor-pointer"
       }
     },
     indicator: {
@@ -965,9 +965,10 @@ const checkbox = (options) => ct({
     },
     disabled: {
       true: {
-        base: "cursor-not-allowed opacity-75",
-        label: "cursor-not-allowed opacity-75",
-        description: "cursor-not-allowed opacity-75"
+        root: "cursor-not-allowed opacity-75",
+        base: "cursor-not-allowed",
+        label: "cursor-not-allowed",
+        description: "cursor-not-allowed"
       }
     },
     checked: {
@@ -1010,6 +1011,115 @@ const checkbox = (options) => ct({
   }
 });
 
+const checkboxGroup = (options) => ct({
+  parts: {
+    root: "relative",
+    fieldset: "flex gap-x-2",
+    legend: "mb-1 block font-medium text-default",
+    item: ""
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        fieldset: "flex-row"
+      },
+      vertical: {
+        fieldset: "flex-col"
+      }
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    variant: {
+      list: "",
+      card: "",
+      table: {
+        item: "border border-muted"
+      }
+    },
+    size: {
+      xs: {
+        fieldset: "gap-y-0.5",
+        legend: "text-xs"
+      },
+      sm: {
+        fieldset: "gap-y-0.5",
+        legend: "text-xs"
+      },
+      md: {
+        fieldset: "gap-y-1",
+        legend: "text-sm"
+      },
+      lg: {
+        fieldset: "gap-y-1",
+        legend: "text-sm"
+      },
+      xl: {
+        fieldset: "gap-y-1.5",
+        legend: "text-base"
+      }
+    },
+    disabled: {
+      true: ""
+    },
+    required: {
+      true: {
+        legend: `after:content-['*'] after:ms-0.5 after:text-error`
+      }
+    }
+  },
+  compoundVariants: [
+    { size: "xs", variant: "table", class: { item: "p-2.5" } },
+    { size: "sm", variant: "table", class: { item: "p-3" } },
+    { size: "md", variant: "table", class: { item: "p-3.5" } },
+    { size: "lg", variant: "table", class: { item: "p-4" } },
+    { size: "xl", variant: "table", class: { item: "p-4.5" } },
+    {
+      orientation: "horizontal",
+      variant: "table",
+      class: {
+        item: "first-of-type:rounded-s-lg last-of-type:rounded-e-lg",
+        fieldset: "gap-0 -space-x-px"
+      }
+    },
+    {
+      orientation: "vertical",
+      variant: "table",
+      class: {
+        item: "first-of-type:rounded-t-lg last-of-type:rounded-b-lg",
+        fieldset: "gap-0 -space-y-px"
+      }
+    },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "table",
+      class: {
+        item: `has-data-[state=checked]:bg-${color}/10 has-data-[state=checked]:border-${color}/50 has-data-[state=checked]:z-[1]`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "table",
+      class: {
+        item: "has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      variant: "table",
+      disabled: false,
+      class: {
+        item: "cursor-pointer"
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    variant: "list",
+    color: "primary"
+  }
+});
+
 const chip = (options) => ct({
   parts: {
     root: "relative inline-flex items-center justify-center shrink-0",
@@ -1021,15 +1131,15 @@ const chip = (options) => ct({
       neutral: { base: "bg-inverted" }
     },
     size: {
-      "3xs": { base: "h-[4px] min-w-[4px] text-[4px]" },
-      "2xs": { base: "h-[5px] min-w-[5px] text-[5px]" },
-      "xs": { base: "h-[6px] min-w-[6px] text-[6px]" },
-      "sm": { base: "h-[7px] min-w-[7px] text-[7px]" },
-      "md": { base: "h-[8px] min-w-[8px] text-[8px]" },
-      "lg": { base: "h-[9px] min-w-[9px] text-[9px]" },
-      "xl": { base: "h-[10px] min-w-[10px] text-[10px]" },
-      "2xl": { base: "h-[11px] min-w-[11px] text-[11px]" },
-      "3xl": { base: "h-[12px] min-w-[12px] text-[12px]" }
+      "3xs": { base: "h-1 min-w-1 text-1" },
+      "2xs": { base: "h-1.25 min-w-1.25 text-1.25" },
+      "xs": { base: "h-1.5 min-w-1.5 text-1.5" },
+      "sm": { base: "h-1.75 min-w-1.75 text-1.75" },
+      "md": { base: "h-2 min-w-2 text-2" },
+      "lg": { base: "h-2.25 min-w-2.25 text-2.25" },
+      "xl": { base: "h-2.5 min-w-2.5 text-2.5" },
+      "2xl": { base: "h-2.75 min-w-2.75 text-2.75" },
+      "3xl": { base: "h-3 min-w-3 text-3" }
     },
     position: {
       "top-right": { base: "top-0 right-0" },
@@ -1356,15 +1466,25 @@ const formField = ct({
   parts: {
     root: "",
     wrapper: "",
-    labelWrapper: "flex content-center items-center justify-between",
+    labelWrapper: "flex content-center items-center justify-between gap-1",
     label: "block font-medium text-default",
-    container: "mt-1 relative",
+    container: "relative",
     description: "text-muted",
     error: "mt-2 text-error",
     hint: "text-muted",
     help: "mt-2 text-muted"
   },
   variants: {
+    orientation: {
+      vertical: {
+        root: "",
+        container: "mt-1"
+      },
+      horizontal: {
+        root: "flex justify-between place-items-baseline gap-2",
+        container: "flex-grow"
+      }
+    },
     size: {
       xs: { root: "text-xs" },
       sm: { root: "text-xs" },
@@ -1379,7 +1499,8 @@ const formField = ct({
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "md",
+    orientation: "vertical"
   }
 });
 
@@ -1702,6 +1823,71 @@ const inputNumber = (options) => {
   });
 };
 
+const inputTags = (options) => {
+  const input = inputTheme(options);
+  return ct({
+    ...input,
+    parts: {
+      ...input.parts,
+      root: [input.parts.root, "flex-wrap"],
+      base: [
+        "rounded-md",
+        options.theme.transitions && "transition-colors"
+      ],
+      item: "px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-[disabled]:cursor-not-allowed data-[disabled]:opacity-75 wrap-anywhere data-[state=active]:bg-accented",
+      itemText: "",
+      itemDelete: [
+        "inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none",
+        options.theme.transitions && "transition-colors"
+      ],
+      itemDeleteIcon: "shrink-0",
+      input: "flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+    },
+    variants: {
+      ...input.variants,
+      size: {
+        xs: {
+          ...input.variants.size.xs,
+          item: "text-2.5/3",
+          itemDeleteIcon: "size-3"
+        },
+        sm: {
+          ...input.variants.size.sm,
+          item: "text-2.5/3",
+          itemDeleteIcon: "size-3"
+        },
+        md: {
+          ...input.variants.size.md,
+          item: "text-3/4",
+          itemDeleteIcon: "size-3.5"
+        },
+        lg: {
+          ...input.variants.size.lg,
+          item: "text-3/4",
+          itemDeleteIcon: "size-3.5"
+        },
+        xl: {
+          ...input.variants.size.xl,
+          item: "text-3.5/5",
+          itemDeleteIcon: "size-4"
+        }
+      },
+      variant: {
+        ...Object.fromEntries(Object.entries(input.variants.variant).map(([key, value]) => [key, { ...value, base: replaceFocus(value.base) }]))
+      }
+    },
+    compoundVariants: [
+      ...input.compoundVariants.map((item) => ({
+        ...item,
+        class: typeof item.class.base === "string" ? { ...item.class, base: replaceFocus(item.class.base) } : item.class
+      }))
+    ]
+  });
+};
+function replaceFocus(str) {
+  return str.replace(/focus:/g, "has-focus:").replace(/focus-visible:/g, "has-focus-visible:");
+}
+
 const kbd = (options) => ct({
   base: "inline-flex items-center justify-center p-1 rounded-sm font-medium font-sans",
   variants: {
@@ -1716,9 +1902,9 @@ const kbd = (options) => ct({
       subtle: ""
     },
     size: {
-      sm: "h-4 min-w-4 text-[0.5rem]",
-      md: "h-5 min-w-5 text-[0.75rem]",
-      lg: "h-6 min-w-6 text-[1rem]"
+      sm: "h-4 min-w-4 text-2",
+      md: "h-5 min-w-5 text-3",
+      lg: "h-6 min-w-6 text-4"
     }
   },
   compoundVariants: [
@@ -1793,6 +1979,68 @@ const link = (options) => ct({
   ]
 });
 
+const marquee = ct({
+  parts: {
+    root: "group relative flex items-center overflow-hidden gap-[--gap] [--gap:--spacing(16)] [--duration:20s]",
+    content: "flex items-center shrink-0 justify-around gap-[--gap] min-w-max"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        content: "w-full"
+      },
+      vertical: {
+        content: "h-full"
+      }
+    },
+    pauseOnHover: {
+      true: {
+        content: "group-hover:[animation-play-state:paused]"
+      }
+    },
+    reverse: {
+      true: {
+        content: "![animation-direction:reverse]"
+      }
+    },
+    overlay: {
+      true: {
+        root: "before:absolute before:pointer-events-none before:content-empty before:z-2 before:from-[--ui-bg] before:to-transparent after:absolute after:pointer-events-none after:content-empty after:z-2 after:from-[--ui-bg] after:to-transparent"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "horizontal",
+      class: {
+        root: "flex-row",
+        content: "flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"
+      }
+    },
+    {
+      orientation: "horizontal",
+      overlay: true,
+      class: {
+        root: "before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden"
+      }
+    },
+    {
+      orientation: "vertical",
+      class: {
+        root: "flex-col",
+        content: "flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"
+      }
+    },
+    {
+      orientation: "vertical",
+      overlay: true,
+      class: {
+        root: "before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden"
+      }
+    }
+  ]
+});
+
 const modal = ct({
   parts: {
     overlay: "fixed inset-0 bg-elevated/75",
@@ -1963,6 +2211,8 @@ const navigationMenu = (options) => ct({
       collapsed: true,
       class: {
         link: "px-1.5",
+        linkLabel: "hidden",
+        linkTrailing: "hidden",
         content: "shadow-sm rounded-sm min-h-6 p-1"
       }
     },
@@ -2682,8 +2932,12 @@ const select = (options) => {
       arrow: "fill-default",
       content: [
         "z-1 max-h-60 w-[--reka-select-trigger-width] bg-default shadow-lg rounded-md ring ring-default overflow-hidden origin-[--reka-select-content-transform-origin] pointer-events-auto flex flex-col",
-        "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]"
+        "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+        "origin-[--reka-combobox-content-transform-origin] w-[--reka-combobox-trigger-width]"
       ],
+      trailingClear: "p-0",
+      input: "border-b border-default",
+      focusScope: "flex flex-col min-h-0",
       viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
       group: "p-1 isolate",
       empty: "text-center text-muted",
@@ -2713,7 +2967,7 @@ const select = (options) => {
       size: {
         xs: {
           ...input.variants.size.xs,
-          label: "p-1 text-[0.625rem]/3 gap-1",
+          label: "p-1 text-2.5/3 gap-1",
           item: "p-1 text-xs gap-1",
           itemLeadingIcon: "size-4",
           itemLeadingAvatarSize: "3xs",
@@ -2724,7 +2978,7 @@ const select = (options) => {
         },
         sm: {
           ...input.variants.size.sm,
-          label: "p-1.5 text-[0.625rem]/3 gap-1.5",
+          label: "p-1.5 text-2.5/3 gap-1.5",
           item: "p-1.5 text-xs gap-1.5",
           itemLeadingIcon: "size-4",
           itemLeadingAvatarSize: "3xs",
@@ -2735,7 +2989,7 @@ const select = (options) => {
         },
         md: {
           ...input.variants.size.md,
-          label: "p-1.5 text-xs gap-1.5",
+          label: "p-1.5 text-3/4 gap-1.5",
           item: "p-1.5 text-sm gap-1.5",
           itemLeadingIcon: "size-5",
           itemLeadingAvatarSize: "2xs",
@@ -2746,7 +3000,7 @@ const select = (options) => {
         },
         lg: {
           ...input.variants.size.lg,
-          label: "p-2 text-xs gap-2",
+          label: "p-2 text-3/4 gap-2",
           item: "p-2 text-sm gap-2",
           itemLeadingIcon: "size-5",
           itemLeadingAvatarSize: "2xs",
@@ -2757,7 +3011,7 @@ const select = (options) => {
         },
         xl: {
           ...input.variants.size.xl,
-          label: "p-2 text-sm gap-2",
+          label: "p-2 text-3.5/5 gap-2",
           item: "p-2 text-base gap-2",
           itemLeadingIcon: "size-6",
           itemLeadingAvatarSize: "xs",
@@ -2766,18 +3020,15 @@ const select = (options) => {
           itemTrailingIcon: "size-6",
           empty: "p-2 text-base"
         }
+      },
+      searchInput: {
+        false: {
+          input: "sr-only"
+        }
       }
     },
     compoundVariants: [
-      ...input.compoundVariants.map((item) => {
-        return {
-          ...item,
-          class: {
-            ...item.class,
-            base: typeof item.class.base === "string" ? item.class.base.replace(/focus-visible:/g, "focus:") : item.class.base
-          }
-        };
-      })
+      ...input.compoundVariants
     ],
     defaultVariants: {
       ...input.defaultVariants
@@ -2862,22 +3113,22 @@ const separator = (options) => ct({
     {
       orientation: "horizontal",
       size: "sm",
-      class: { border: "border-t-[2px]" }
+      class: { border: "border-t-2" }
     },
     {
       orientation: "horizontal",
       size: "md",
-      class: { border: "border-t-[3px]" }
+      class: { border: "border-t-3" }
     },
     {
       orientation: "horizontal",
       size: "lg",
-      class: { border: "border-t-[4px]" }
+      class: { border: "border-t-4" }
     },
     {
       orientation: "horizontal",
       size: "xl",
-      class: { border: "border-t-[5px]" }
+      class: { border: "border-t-5" }
     },
     {
       orientation: "vertical",
@@ -2887,22 +3138,22 @@ const separator = (options) => ct({
     {
       orientation: "vertical",
       size: "sm",
-      class: { border: "border-s-[2px]" }
+      class: { border: "border-s-2" }
     },
     {
       orientation: "vertical",
       size: "md",
-      class: { border: "border-s-[3px]" }
+      class: { border: "border-s-3" }
     },
     {
       orientation: "vertical",
       size: "lg",
-      class: { border: "border-s-[4px]" }
+      class: { border: "border-s-4" }
     },
     {
       orientation: "vertical",
       size: "xl",
-      class: { border: "border-s-[5px]" }
+      class: { border: "border-s-5" }
     }
   ],
   defaultVariants: {
@@ -2972,72 +3223,207 @@ const slider = (options) => ct({
       orientation: "horizontal",
       size: "xs",
       class: {
-        track: "h-[6px]"
+        track: "h-1.5"
       }
     },
     {
       orientation: "horizontal",
       size: "sm",
       class: {
-        track: "h-[7px]"
+        track: "h-1.75"
       }
     },
     {
       orientation: "horizontal",
       size: "md",
       class: {
-        track: "h-[8px]"
+        track: "h-2"
       }
     },
     {
       orientation: "horizontal",
       size: "lg",
       class: {
-        track: "h-[9px]"
+        track: "h-2.25"
       }
     },
     {
       orientation: "horizontal",
       size: "xl",
       class: {
-        track: "h-[10px]"
+        track: "h-2.5"
       }
     },
     {
       orientation: "vertical",
       size: "xs",
       class: {
-        track: "w-[6px]"
+        track: "w-1.5"
       }
     },
     {
       orientation: "vertical",
       size: "sm",
       class: {
-        track: "w-[7px]"
+        track: "w-1.75"
       }
     },
     {
       orientation: "vertical",
       size: "md",
       class: {
-        track: "w-[8px]"
+        track: "w-2"
       }
     },
     {
       orientation: "vertical",
       size: "lg",
       class: {
-        track: "w-[9px]"
+        track: "w-2.25"
       }
     },
     {
       orientation: "vertical",
       size: "xl",
       class: {
-        track: "w-[10px]"
+        track: "w-2.5"
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});
+
+const stepper = (options) => ct({
+  parts: {
+    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-inverted group-data-[state=active]:text-inverted text-muted 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-accented",
+    wrapper: "",
+    title: "font-medium text-default",
+    description: "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-[0.625rem] 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-${color} group-data-[state=active]:bg-${color} focus-visible:outline-${color}`,
+        separator: `group-data-[state=completed]:bg-${color}`
+      }])),
+      neutral: {
+        trigger: "group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted focus-visible:outline-inverted",
+        separator: "group-data-[state=completed]:bg-inverted"
       }
     }
+  },
+  compoundVariants: [
+    {
+      orientation: "horizontal",
+      size: "xs",
+      class: { separator: "start-[calc(50%+1rem)] end-[calc(-50%+1rem)]" }
+    },
+    {
+      orientation: "horizontal",
+      size: "sm",
+      class: { separator: "start-[calc(50%+1.25rem)] end-[calc(-50%+1.25rem)]" }
+    },
+    {
+      orientation: "horizontal",
+      size: "md",
+      class: { separator: "start-[calc(50%+1.75rem)] end-[calc(-50%+1.75rem)]" }
+    },
+    {
+      orientation: "horizontal",
+      size: "lg",
+      class: { separator: "start-[calc(50%+2rem)] end-[calc(-50%+2rem)]" }
+    },
+    {
+      orientation: "horizontal",
+      size: "xl",
+      class: { separator: "start-[calc(50%+2.25rem)] end-[calc(-50%+2.25rem)]" }
+    },
+    {
+      orientation: "vertical",
+      size: "xs",
+      class: { separator: "top-7.5", item: "gap-1.5" }
+    },
+    {
+      orientation: "vertical",
+      size: "sm",
+      class: { separator: "top-9.5", item: "gap-2" }
+    },
+    {
+      orientation: "vertical",
+      size: "md",
+      class: { separator: "top-11.5", item: "gap-2.5" }
+    },
+    {
+      orientation: "vertical",
+      size: "lg",
+      class: { separator: "top-13.5", item: "gap-3" }
+    },
+    {
+      orientation: "vertical",
+      size: "xl",
+      class: { separator: "top-15.5", item: "gap-3.5" }
+    }
   ],
   defaultVariants: {
     size: "md",
@@ -3145,12 +3531,12 @@ const table = (options) => ct({
     base: "min-w-full",
     caption: "sr-only",
     thead: "relative",
-    tbody: "[&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary",
+    tbody: "isolate [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary",
     tfoot: "relative",
     tr: "data-[selected=true]:bg-elevated/50",
     th: "px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
     td: "p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0",
-    separator: "absolute z-[1] left-0 w-full h-px bg-[--ui-border-accented]",
+    separator: "absolute z-1 left-0 w-full h-px bg-[--ui-border-accented]",
     empty: "py-6 text-center text-sm text-muted",
     loading: "py-6 text-center"
   },
@@ -3163,25 +3549,25 @@ const table = (options) => ct({
     },
     pinned: {
       true: {
-        th: "sticky bg-default/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0",
-        td: "sticky bg-default/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0"
+        th: "sticky bg-default/75 z-1",
+        td: "sticky bg-default/75 z-1"
       }
     },
     sticky: {
       true: {
-        thead: "sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur",
-        tfoot: "sticky bottom-0 inset-x-0 bg-default/75 z-[1] backdrop-blur"
+        thead: "sticky top-0 inset-x-0 bg-default/75 z-1 backdrop-blur",
+        tfoot: "sticky bottom-0 inset-x-0 bg-default/75 z-1 backdrop-blur"
       },
       header: {
-        thead: "sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur"
+        thead: "sticky top-0 inset-x-0 bg-default/75 z-1 backdrop-blur"
       },
       footer: {
-        tfoot: "sticky bottom-0 inset-x-0 bg-default/75 z-[1] backdrop-blur"
+        tfoot: "sticky bottom-0 inset-x-0 bg-default/75 z-1 backdrop-blur"
       }
     },
     loading: {
       true: {
-        thead: "after:content-empty after:absolute after:z-[1] after:h-px"
+        thead: "after:content-empty after:absolute after:z-1 after:h-px"
       }
     },
     loadingAnimation: {
@@ -3431,6 +3817,218 @@ const textarea = (options) => {
   }, input));
 };
 
+const timeline = (options) => ct({
+  parts: {
+    root: "flex gap-1.5",
+    item: "group relative flex flex-1 gap-3",
+    container: "relative flex items-center gap-1.5",
+    indicator: "group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted",
+    indicatorIcon: "text-inherit",
+    indicatorFallback: "text-inherit",
+    separator: "flex-1 rounded-full bg-elevated",
+    wrapper: "w-full",
+    date: "text-dimmed text-xs/5",
+    title: "font-medium text-highlighted text-sm",
+    description: "text-muted text-wrap text-sm"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "flex-row w-full",
+        item: "flex-col",
+        separator: "h-0.5"
+      },
+      vertical: {
+        root: "flex-col",
+        container: "flex-col",
+        separator: "w-0.5"
+      }
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        indicator: `group-data-[state=completed]:bg-${color} group-data-[state=active]:bg-${color}`
+      }])),
+      neutral: {
+        indicator: "group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted"
+      }
+    },
+    size: {
+      "3xs": "",
+      "2xs": "",
+      "xs": "",
+      "sm": "",
+      "md": "",
+      "lg": "",
+      "xl": "",
+      "2xl": "",
+      "3xl": ""
+    },
+    reverse: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      reverse: false,
+      class: {
+        separator: `group-data-[state=completed]:bg-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      reverse: false,
+      class: {
+        separator: "group-data-[state=completed]:bg-inverted"
+      }
+    },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      reverse: true,
+      class: {
+        separator: `group-data-[state=active]:bg-${color} group-data-[state=completed]:bg-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      reverse: true,
+      class: {
+        separator: "group-data-[state=active]:bg-inverted group-data-[state=completed]:bg-inverted"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "3xs",
+      class: {
+        wrapper: "pe-4.5"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "2xs",
+      class: {
+        wrapper: "pe-5"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "xs",
+      class: {
+        wrapper: "pe-5.5"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "sm",
+      class: {
+        wrapper: "pe-6"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "md",
+      class: {
+        wrapper: "pe-6.5"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "lg",
+      class: {
+        wrapper: "pe-7"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "xl",
+      class: {
+        wrapper: "pe-7.5"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "2xl",
+      class: {
+        wrapper: "pe-8"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "3xl",
+      class: {
+        wrapper: "pe-8.5"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "3xs",
+      class: {
+        wrapper: "-mt-0.5 pb-4.5"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "2xs",
+      class: {
+        wrapper: "pb-5"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "xs",
+      class: {
+        wrapper: "mt-0.5 pb-5.5"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "sm",
+      class: {
+        wrapper: "mt-1 pb-6"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "md",
+      class: {
+        wrapper: "mt-1.5 pb-6.5"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "lg",
+      class: {
+        wrapper: "mt-2 pb-7"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "xl",
+      class: {
+        wrapper: "mt-2.5 pb-7.5"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "2xl",
+      class: {
+        wrapper: "mt-3 pb-8"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "3xl",
+      class: {
+        wrapper: "mt-3.5 pb-8.5"
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});
+
 const toast = (options) => ct({
   parts: {
     root: "relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none",
@@ -3577,6 +4175,102 @@ const tooltip = ct({
   }
 });
 
+const tree = (options) => ct({
+  parts: {
+    root: "relative isolate",
+    item: "w-full",
+    listWithChildren: "border-s border-default",
+    itemWithChildren: "ps-1.5 -ms-px",
+    link: "relative group w-full flex items-center text-sm select-none before:absolute before:inset-y-px before:inset-x-0 before:-z-1 before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    linkLeadingIcon: "shrink-0 relative",
+    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-${color}`
+      }])),
+      neutral: {
+        link: "focus-visible:before:ring-inverted"
+      }
+    },
+    size: {
+      xs: {
+        listWithChildren: "ms-4",
+        link: "px-2 py-1 text-xs gap-1",
+        linkLeadingIcon: "size-4",
+        linkTrailingIcon: "size-4"
+      },
+      sm: {
+        listWithChildren: "ms-4.5",
+        link: "px-2.5 py-1.5 text-xs gap-1.5",
+        linkLeadingIcon: "size-4",
+        linkTrailingIcon: "size-4"
+      },
+      md: {
+        listWithChildren: "ms-5",
+        link: "px-2.5 py-1.5 text-sm gap-1.5",
+        linkLeadingIcon: "size-5",
+        linkTrailingIcon: "size-5"
+      },
+      lg: {
+        listWithChildren: "ms-5.5",
+        link: "px-3 py-2 text-sm gap-2",
+        linkLeadingIcon: "size-5",
+        linkTrailingIcon: "size-5"
+      },
+      xl: {
+        listWithChildren: "ms-6",
+        link: "px-3 py-2 text-base gap-2",
+        linkLeadingIcon: "size-6",
+        linkTrailingIcon: "size-6"
+      }
+    },
+    selected: {
+      true: {
+        link: "before:bg-elevated"
+      }
+    },
+    disabled: {
+      true: {
+        link: "cursor-not-allowed opacity-75"
+      }
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      selected: true,
+      class: {
+        link: `text-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      selected: true,
+      class: {
+        link: "text-highlighted"
+      }
+    },
+    {
+      selected: false,
+      disabled: false,
+      class: {
+        link: [
+          "hover:text-highlighted hover:before:bg-elevated/50",
+          options.theme.transitions && "transition-colors before:transition-colors"
+        ]
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    size: "md"
+  }
+});
+
 const theme = {
   __proto__: null,
   accordion: accordion,
@@ -3590,6 +4284,7 @@ const theme = {
   card: card,
   carousel: carousel,
   checkbox: checkbox,
+  checkboxGroup: checkboxGroup,
   chip: chip,
   collapsible: collapsible,
   drawer: drawer,
@@ -3599,8 +4294,10 @@ const theme = {
   formField: formField,
   input: inputTheme,
   inputNumber: inputNumber,
+  inputTags: inputTags,
   kbd: kbd,
   link: link,
+  marquee: marquee,
   modal: modal,
   navigationMenu: navigationMenu,
   pagination: pagination,
@@ -3613,13 +4310,16 @@ const theme = {
   separator: separator,
   skeleton: skeleton,
   slider: slider,
+  stepper: stepper,
   switch: _switch,
   table: table,
   tabs: tabs,
   textarea: textarea,
+  timeline: timeline,
   toast: toast,
   toastProvider: toastProvider,
-  tooltip: tooltip
+  tooltip: tooltip,
+  tree: tree
 };
 
 function getTemplates(options, uiConfig, nuxt) {