@nuxt/ui 3.1.2 → 3.2.0

package/dist/shared/{ui.BvUP-pSb.mjs → ui.BPVxSPGY.mjs}

@@ -21,7 +21,7 @@ const icons = {
   external: "i-lucide-arrow-up-right",
   folder: "i-lucide-folder",
   folderOpen: "i-lucide-folder-open",
-  loading: "i-lucide-refresh-cw",
+  loading: "i-lucide-loader-circle",
   minus: "i-lucide-minus",
   plus: "i-lucide-plus",
   search: "i-lucide-search"
@@ -169,7 +169,7 @@ const alert = (options) => ({
 
 const avatar = {
   slots: {
-    root: "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-elevated",
+    root: "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated",
     image: "h-full w-full rounded-[inherit] object-cover",
     fallback: "font-medium leading-none text-muted truncate",
     icon: "text-muted shrink-0"
@@ -680,7 +680,7 @@ const calendar = (options) => ({
 
 const card = {
   slots: {
-    root: "rounded-lg",
+    root: "rounded-lg overflow-hidden",
     header: "p-4 sm:px-6",
     body: "p-4 sm:p-6",
     footer: "p-4 sm:px-6"
@@ -736,7 +736,7 @@ const carousel = (options) => ({
     },
     active: {
       true: {
-        dot: "bg-inverted"
+        dot: "data-[state=active]:bg-inverted"
       }
     }
   }
@@ -930,7 +930,7 @@ const checkboxGroup = (options) => ({
       orientation: "horizontal",
       variant: "table",
       class: {
-        item: "first-of-type:rounded-l-lg last-of-type:rounded-r-lg",
+        item: "first-of-type:rounded-s-lg last-of-type:rounded-e-lg",
         fieldset: "gap-0 -space-x-px"
       }
     },
@@ -1081,6 +1081,7 @@ const commandPalette = (options) => ({
     root: "flex flex-col min-h-0 min-w-0 divide-y divide-default",
     input: "[&>input]:h-12",
     close: "",
+    back: "p-0",
     content: "relative overflow-hidden flex flex-col",
     viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1 focus:outline-none",
     group: "p-1 isolate",
@@ -1127,7 +1128,8 @@ const container = {
 
 const contextMenu = (options) => ({
   slots: {
-    content: "min-w-32 bg-default shadow-lg rounded-md ring ring-default divide-y divide-default overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin)",
+    content: "min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col",
+    viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
     group: "p-1 isolate",
     label: "w-full flex items-center font-semibold text-highlighted",
     separator: "-mx-1 my-1 h-px bg-border",
@@ -1263,7 +1265,7 @@ const drawer = (options) => ({
     },
     inset: {
       true: {
-        content: "rounded-lg after:hidden"
+        content: "rounded-lg after:hidden overflow-hidden"
       }
     }
   },
@@ -1332,7 +1334,8 @@ const drawer = (options) => ({
 
 const dropdownMenu = (options) => ({
   slots: {
-    content: "min-w-32 bg-default shadow-lg rounded-md ring ring-default divide-y divide-default overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin)",
+    content: "min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col",
+    viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
     arrow: "fill-default",
     group: "p-1 isolate",
     label: "w-full flex items-center font-semibold text-highlighted",
@@ -1636,10 +1639,10 @@ const inputMenu = (options) => {
       base: () => ["rounded-md", 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-default",
-      content: "max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto",
-      viewport: "divide-y divide-default scroll-py-1",
+      content: "max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col",
+      viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
       group: "p-1 isolate",
-      empty: "py-2 text-center text-sm text-muted",
+      empty: "text-center text-muted",
       label: "font-semibold text-highlighted",
       separator: "-mx-1 my-1 h-px bg-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-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"],
@@ -1654,14 +1657,13 @@ const inputMenu = (options) => {
       tagsItem: "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",
       tagsItemText: "truncate",
       tagsItemDelete: ["inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none", options.theme.transitions && "transition-colors"],
-      tagsItemDeleteIcon: "",
-      tagsInput: ""
+      tagsItemDeleteIcon: "shrink-0",
+      tagsInput: "flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
     },
     variants: {
       multiple: {
         true: {
-          root: "flex-wrap",
-          tagsInput: "border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+          root: "flex-wrap"
         },
         false: {
           base: "w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
@@ -1677,7 +1679,8 @@ const inputMenu = (options) => {
           itemLeadingChipSize: "sm",
           itemTrailingIcon: "size-4",
           tagsItem: "text-[10px]/3",
-          tagsItemDeleteIcon: "size-3"
+          tagsItemDeleteIcon: "size-3",
+          empty: "p-1 text-xs"
         },
         sm: {
           label: "p-1.5 text-[10px]/3 gap-1.5",
@@ -1688,7 +1691,8 @@ const inputMenu = (options) => {
           itemLeadingChipSize: "sm",
           itemTrailingIcon: "size-4",
           tagsItem: "text-[10px]/3",
-          tagsItemDeleteIcon: "size-3"
+          tagsItemDeleteIcon: "size-3",
+          empty: "p-1.5 text-xs"
         },
         md: {
           label: "p-1.5 text-xs gap-1.5",
@@ -1699,7 +1703,8 @@ const inputMenu = (options) => {
           itemLeadingChipSize: "md",
           itemTrailingIcon: "size-5",
           tagsItem: "text-xs",
-          tagsItemDeleteIcon: "size-3.5"
+          tagsItemDeleteIcon: "size-3.5",
+          empty: "p-1.5 text-sm"
         },
         lg: {
           label: "p-2 text-xs gap-2",
@@ -1710,7 +1715,8 @@ const inputMenu = (options) => {
           itemLeadingChipSize: "md",
           itemTrailingIcon: "size-5",
           tagsItem: "text-xs",
-          tagsItemDeleteIcon: "size-3.5"
+          tagsItemDeleteIcon: "size-3.5",
+          empty: "p-2 text-sm"
         },
         xl: {
           label: "p-2 text-sm gap-2",
@@ -1721,11 +1727,20 @@ const inputMenu = (options) => {
           itemLeadingChipSize: "lg",
           itemTrailingIcon: "size-6",
           tagsItem: "text-sm",
-          tagsItemDeleteIcon: "size-4"
+          tagsItemDeleteIcon: "size-4",
+          empty: "p-2 text-base"
         }
       }
     },
-    compoundVariants: [...(options.theme.colors || []).map((color) => ({
+    compoundVariants: [{
+      variant: "soft",
+      multiple: true,
+      class: "has-focus:bg-elevated"
+    }, {
+      variant: "ghost",
+      multiple: true,
+      class: "has-focus:bg-elevated"
+    }, ...(options.theme.colors || []).map((color) => ({
       color,
       multiple: true,
       variant: ["outline", "subtle"],
@@ -1850,6 +1865,54 @@ const inputNumber = (options) => {
   };
 };
 
+const inputTags = (options) => {
+  return defuFn({
+    slots: {
+      root: (prev) => [prev, "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: {
+      size: {
+        xs: {
+          item: "text-[10px]/3",
+          itemDeleteIcon: "size-3"
+        },
+        sm: {
+          item: "text-[10px]/3",
+          itemDeleteIcon: "size-3"
+        },
+        md: {
+          item: "text-xs",
+          itemDeleteIcon: "size-3.5"
+        },
+        lg: {
+          item: "text-xs",
+          itemDeleteIcon: "size-3.5"
+        },
+        xl: {
+          item: "text-sm",
+          itemDeleteIcon: "size-4"
+        }
+      },
+      variant: (prev) => Object.fromEntries(
+        Object.entries(prev).map(([key, value]) => [key, replaceFocus(value)])
+      )
+    },
+    compoundVariants: (prev) => prev.map((item) => ({
+      ...item,
+      class: typeof item.class === "string" ? replaceFocus(item.class) : item.class
+    }))
+  }, input(options));
+};
+function replaceFocus(str) {
+  return str.replace(/focus:/g, "has-focus:").replace(/focus-visible:/g, "has-focus-visible:");
+}
+
 const kbd = {
   base: "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans",
   variants: {
@@ -1912,7 +1975,7 @@ const modal = {
         content: "inset-0"
       },
       false: {
-        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-lg shadow-lg ring ring-default"
+        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-lg shadow-lg ring ring-default overflow-hidden"
       }
     }
   }
@@ -1928,24 +1991,25 @@ const navigationMenu = (options) => ({
     linkLeadingIcon: "shrink-0 size-5",
     linkLeadingAvatar: "shrink-0",
     linkLeadingAvatarSize: "2xs",
-    linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
+    linkTrailing: "group 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-dimmed",
-    childList: "",
+    childList: "isolate",
+    childLabel: "text-xs text-highlighted",
     childItem: "",
-    childLink: "group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start",
-    childLinkWrapper: "flex flex-col items-start",
+    childLink: "group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    childLinkWrapper: "min-w-0",
     childLinkIcon: "size-5 shrink-0",
-    childLinkLabel: "font-semibold text-sm relative inline-flex",
+    childLinkLabel: "truncate",
     childLinkLabelExternalIcon: "inline-block size-3 align-top text-dimmed",
-    childLinkDescription: "text-sm text-muted",
+    childLinkDescription: "text-muted",
     separator: "px-2 h-px bg-border",
     viewportWrapper: "absolute top-full left-0 flex w-full",
     viewport: "relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default 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] z-[1]",
-    content: "absolute top-0 left-0 w-full",
+    content: "",
     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-[2] 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-default bg-default z-[1] rounded-xs"
   },
@@ -1953,11 +2017,11 @@ const navigationMenu = (options) => ({
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
         link: `focus-visible:before:ring-${color}`,
-        childLink: `focus-visible:outline-${color}`
+        childLink: `focus-visible:before:ring-${color}`
       }])),
       neutral: {
         link: "focus-visible:before:ring-inverted",
-        childLink: "focus-visible:outline-inverted"
+        childLink: "focus-visible:before:ring-inverted"
       }
     },
     highlightColor: {
@@ -1974,11 +2038,16 @@ const navigationMenu = (options) => ({
         list: "flex items-center",
         item: "py-2",
         link: "px-2.5 py-1.5 before:inset-x-px before:inset-y-0",
-        childList: "grid p-2"
+        childList: "grid p-2",
+        childLink: "px-3 py-2 gap-2 before:inset-x-px before:inset-y-0",
+        childLinkLabel: "font-medium",
+        content: "absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto"
       },
       vertical: {
         root: "flex-col",
-        link: "flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0"
+        link: "flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0",
+        childLabel: "px-1.5 py-0.5",
+        childLink: "p-1.5 gap-1.5 before:inset-y-px before:inset-x-0"
       }
     },
     contentOrientation: {
@@ -1992,13 +2061,13 @@ const navigationMenu = (options) => ({
     },
     active: {
       true: {
-        childLink: "bg-elevated text-highlighted",
+        childLink: "before:bg-elevated text-highlighted",
         childLinkIcon: "text-default"
       },
       false: {
         link: "text-muted",
         linkLeadingIcon: "text-dimmed",
-        childLink: ["hover:bg-elevated/50 text-default hover:text-highlighted", options.theme.transitions && "transition-colors"],
+        childLink: ["hover:before:bg-elevated/50 text-default hover:text-highlighted", options.theme.transitions && "transition-colors before:transition-colors"],
         childLinkIcon: ["text-dimmed group-hover:text-default", options.theme.transitions && "transition-colors"]
       }
     },
@@ -2030,6 +2099,21 @@ const navigationMenu = (options) => ({
       childList: "gap-1",
       content: "w-60"
     }
+  }, {
+    orientation: "vertical",
+    collapsed: false,
+    class: {
+      childList: "ms-5 border-s border-default",
+      childItem: "ps-1.5 -ms-px",
+      content: "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden"
+    }
+  }, {
+    orientation: "vertical",
+    collapsed: true,
+    class: {
+      link: "px-1.5",
+      content: "shadow-sm rounded-sm min-h-6 p-1"
+    }
   }, {
     orientation: "horizontal",
     highlight: true,
@@ -2104,6 +2188,7 @@ const navigationMenu = (options) => ({
     variant: "pill",
     active: true,
     highlight: true,
+    disabled: false,
     class: {
       link: ["hover:before:bg-elevated/50", options.theme.transitions && "before:transition-colors"]
     }
@@ -2156,19 +2241,6 @@ const navigationMenu = (options) => ({
     class: {
       link: "after:bg-inverted"
     }
-  }, {
-    orientation: "vertical",
-    collapsed: false,
-    class: {
-      childList: "ms-5 border-s border-default",
-      childItem: "ps-1.5 -ms-px"
-    }
-  }, {
-    orientation: "vertical",
-    collapsed: true,
-    class: {
-      link: "px-1.5"
-    }
   }],
   defaultVariants: {
     color: "primary",
@@ -2595,7 +2667,7 @@ const radioGroup = (options) => ({
       orientation: "horizontal",
       variant: "table",
       class: {
-        item: "first-of-type:rounded-l-lg last-of-type:rounded-r-lg",
+        item: "first-of-type:rounded-s-lg last-of-type:rounded-e-lg",
         fieldset: "gap-0 -space-x-px"
       }
     },
@@ -2660,10 +2732,10 @@ const select = (options) => {
       value: "truncate pointer-events-none",
       placeholder: "truncate text-dimmed",
       arrow: "fill-default",
-      content: "max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto",
-      viewport: "divide-y divide-default scroll-py-1",
+      content: "max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col",
+      viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
       group: "p-1 isolate",
-      empty: "py-2 text-center text-sm text-muted",
+      empty: "text-center text-muted",
       label: "font-semibold text-highlighted",
       separator: "-mx-1 my-1 h-px bg-border",
       item: ["group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50", options.theme.transitions && "transition-colors before:transition-colors"],
@@ -2686,7 +2758,8 @@ const select = (options) => {
           itemLeadingAvatarSize: "3xs",
           itemLeadingChip: "size-4",
           itemLeadingChipSize: "sm",
-          itemTrailingIcon: "size-4"
+          itemTrailingIcon: "size-4",
+          empty: "p-1 text-xs"
         },
         sm: {
           label: "p-1.5 text-[10px]/3 gap-1.5",
@@ -2695,7 +2768,8 @@ const select = (options) => {
           itemLeadingAvatarSize: "3xs",
           itemLeadingChip: "size-4",
           itemLeadingChipSize: "sm",
-          itemTrailingIcon: "size-4"
+          itemTrailingIcon: "size-4",
+          empty: "p-1.5 text-xs"
         },
         md: {
           label: "p-1.5 text-xs gap-1.5",
@@ -2704,7 +2778,8 @@ const select = (options) => {
           itemLeadingAvatarSize: "2xs",
           itemLeadingChip: "size-5",
           itemLeadingChipSize: "md",
-          itemTrailingIcon: "size-5"
+          itemTrailingIcon: "size-5",
+          empty: "p-1.5 text-sm"
         },
         lg: {
           label: "p-2 text-xs gap-2",
@@ -2713,7 +2788,8 @@ const select = (options) => {
           itemLeadingAvatarSize: "2xs",
           itemLeadingChip: "size-5",
           itemLeadingChipSize: "md",
-          itemTrailingIcon: "size-5"
+          itemTrailingIcon: "size-5",
+          empty: "p-2 text-sm"
         },
         xl: {
           label: "p-2 text-sm gap-2",
@@ -2722,7 +2798,8 @@ const select = (options) => {
           itemLeadingAvatarSize: "xs",
           itemLeadingChip: "size-6",
           itemLeadingChipSize: "lg",
-          itemTrailingIcon: "size-6"
+          itemTrailingIcon: "size-6",
+          empty: "p-2 text-base"
         }
       }
     }
@@ -3232,11 +3309,12 @@ 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-(--ui-border-accented)",
+    thead: "relative",
     tbody: "divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary",
     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)",
     empty: "py-6 text-center text-sm text-muted",
     loading: "py-6 text-center"
   },
@@ -3254,7 +3332,7 @@ const table = (options) => ({
     },
     loading: {
       true: {
-        thead: "after:absolute after:bottom-0 after:inset-x-0 after:h-px"
+        thead: "after:absolute after:z-[1] after:h-px"
       }
     },
     loadingAnimation: {
@@ -3481,6 +3559,193 @@ const textarea = (options) => {
   }, input(options));
 };
 
+const timeline = (options) => ({
+  slots: {
+    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",
+    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}`
+    }
+  })), ...(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: false,
+    class: {
+      separator: "group-data-[state=completed]:bg-inverted"
+    }
+  }, {
+    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) => ({
   slots: {
     root: "relative group overflow-hidden bg-default shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none",
@@ -3531,7 +3796,7 @@ const toast = (options) => ({
 const toaster = {
   slots: {
     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"
+    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]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 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: {
@@ -3587,7 +3852,7 @@ const toaster = {
 
 const tooltip = {
   slots: {
-    content: "flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default 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] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto",
+    content: "flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 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] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto",
     arrow: "fill-default",
     text: "truncate",
     kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['\xB7'] before:me-0.5`,
@@ -3704,6 +3969,7 @@ const theme = {
   input: input,
   inputMenu: inputMenu,
   inputNumber: inputNumber,
+  inputTags: inputTags,
   kbd: kbd,
   link: link,
   modal: modal,
@@ -3724,6 +3990,7 @@ const theme = {
   table: table,
   tabs: tabs,
   textarea: textarea,
+  timeline: timeline,
   toast: toast,
   toaster: toaster,
   tooltip: tooltip,
@@ -3769,7 +4036,7 @@ function getTemplates(options, uiConfig) {
     write: true,
     getContents: () => `@source "./ui";
 
-@theme default inline {
+@theme static {
   --color-old-neutral-50: ${colors.neutral[50]};
   --color-old-neutral-100: ${colors.neutral[100]};
   --color-old-neutral-200: ${colors.neutral[200]};
@@ -3781,6 +4048,9 @@ function getTemplates(options, uiConfig) {
   --color-old-neutral-800: ${colors.neutral[800]};
   --color-old-neutral-900: ${colors.neutral[900]};
   --color-old-neutral-950: ${colors.neutral[950]};
+}
+
+@theme default inline {
   ${[...(options.theme?.colors || []).filter((color) => !colors[color]), "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	")}
   ${options.theme?.colors?.map((color) => `--color-${color}: var(--ui-${color});`).join("\n	")}
   --radius-xs: calc(var(--ui-radius) * 0.5);