@nuxt/ui 3.0.0-alpha.8 → 3.0.0-alpha.9

package/dist/shared/{ui.BU7wzH0D.cjs → ui.BPnAe4QS.cjs}

@@ -7,20 +7,22 @@ const kit = require('@nuxt/kit');
 const defu = require('defu');
 
 const icons = {
+  arrowLeft: "i-lucide-arrow-left",
+  arrowRight: "i-lucide-arrow-right",
+  check: "i-lucide-check",
   chevronDoubleLeft: "i-lucide-chevrons-left",
   chevronDoubleRight: "i-lucide-chevrons-right",
   chevronDown: "i-lucide-chevron-down",
   chevronLeft: "i-lucide-chevron-left",
   chevronRight: "i-lucide-chevron-right",
-  arrowLeft: "i-lucide-arrow-left",
-  arrowRight: "i-lucide-arrow-right",
-  check: "i-lucide-check",
   close: "i-lucide-x",
   ellipsis: "i-lucide-ellipsis",
   external: "i-lucide-arrow-up-right",
   loading: "i-lucide-refresh-ccw",
   minus: "i-lucide-minus",
-  search: "i-lucide-search"
+  plus: "i-lucide-plus",
+  search: "i-lucide-search",
+  chevronUp: "i-lucide-chevron-up"
 };
 
 const getDefaultUiConfig = (colors) => ({
@@ -504,7 +506,7 @@ const button = (options) => ({
   })), {
     color: "neutral",
     variant: "solid",
-    class: "text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)] hover:bg-[var(--ui-bg-inverted)]/80 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-[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)]"
   }, {
     color: "neutral",
     variant: "outline",
@@ -568,7 +570,7 @@ const button = (options) => ({
 
 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",
+    root: "bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow-sm",
     header: "p-4 sm:px-6",
     body: "p-4 sm:p-6",
     footer: "p-4 sm:px-6"
@@ -593,8 +595,8 @@ const carousel = (options) => ({
       vertical: {
         container: "flex-col -mt-4",
         item: "pt-4",
-        prev: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        next: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90"
+        prev: "-top-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90",
+        next: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90"
       },
       horizontal: {
         container: "flex-row -ms-4",
@@ -788,7 +790,7 @@ const commandPalette = (options) => ({
 });
 
 const container = {
-  base: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+  base: "max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8"
 };
 
 const contextMenu = (options) => ({
@@ -1143,8 +1145,8 @@ const input = (options) => ({
       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)] 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)]"
+      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"
     },
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
@@ -1275,7 +1277,7 @@ const inputMenu = (options) => {
         true: {
           root: "flex-wrap",
           base: "",
-          tagsInput: "border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+          tagsInput: "border-0 bg-transparent placeholder:text-[var(--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"
@@ -1353,6 +1355,116 @@ const inputMenu = (options) => {
   }, input(options));
 };
 
+const inputNumber = (options) => {
+  const input$1 = input(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"],
+      increment: "absolute flex items-center",
+      decrement: "absolute flex items-center"
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+        neutral: ""
+      },
+      size: {
+        xs: "px-2 py-1 text-xs gap-1",
+        sm: "px-2.5 py-1.5 text-xs gap-1.5",
+        md: "px-2.5 py-1.5 text-sm gap-1.5",
+        lg: "px-3 py-2 text-sm gap-2",
+        xl: "px-3 py-2 text-base gap-2"
+      },
+      variant: {
+        ...input$1.variants.variant
+      },
+      disabled: {
+        true: {
+          increment: "opacity-75 cursor-not-allowed",
+          decrement: "opacity-75 cursor-not-allowed"
+        }
+      },
+      orientation: {
+        horizontal: {
+          base: "text-center",
+          increment: "inset-y-0 end-0 pe-1",
+          decrement: "inset-y-0 start-0 ps-1"
+        },
+        vertical: {
+          increment: "top-0 end-0 pe-1 [&>button]:py-0 scale-80",
+          decrement: "bottom-0 end-0 pe-1 [&>button]:py-0 scale-80"
+        }
+      },
+      highlight: {
+        true: ""
+      }
+    },
+    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})]`
+    })), ...(options.theme.colors || []).map((color) => ({
+      color,
+      highlight: true,
+      class: `ring ring-inset ring-[var(--ui-${color})]`
+    })), {
+      color: "neutral",
+      variant: ["outline", "subtle"],
+      class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]"
+    }, {
+      color: "neutral",
+      highlight: true,
+      class: "ring ring-inset ring-[var(--ui-border-inverted)]"
+    }, {
+      orientation: "horizontal",
+      size: "xs",
+      class: "px-7"
+    }, {
+      orientation: "horizontal",
+      size: "sm",
+      class: "px-8"
+    }, {
+      orientation: "horizontal",
+      size: "md",
+      class: "px-9"
+    }, {
+      orientation: "horizontal",
+      size: "lg",
+      class: "px-10"
+    }, {
+      orientation: "horizontal",
+      size: "xl",
+      class: "px-11"
+    }, {
+      orientation: "vertical",
+      size: "xs",
+      class: "pe-7"
+    }, {
+      orientation: "vertical",
+      size: "sm",
+      class: "pe-8"
+    }, {
+      orientation: "vertical",
+      size: "md",
+      class: "pe-9"
+    }, {
+      orientation: "vertical",
+      size: "lg",
+      class: "pe-10"
+    }, {
+      orientation: "vertical",
+      size: "xl",
+      class: "pe-11"
+    }],
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+      variant: "outline"
+    }
+  };
+};
+
 const kbd = {
   base: "inline-flex items-center justify-center px-1 rounded-[var(--ui-radius)] font-medium font-sans",
   variants: {
@@ -1425,7 +1537,7 @@ const navigationMenu = (options) => ({
     linkLeadingAvatar: "shrink-0",
     linkLeadingAvatarSize: "2xs",
     linkTrailing: "ms-auto inline-flex",
-    linkTrailingBadge: "shrink-0 rounded",
+    linkTrailingBadge: "shrink-0 rounded-[calc(var(--ui-radius)]",
     linkTrailingBadgeSize: "sm",
     linkTrailingIcon: "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
     linkLabel: "truncate",
@@ -1624,6 +1736,68 @@ 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"]
+  },
+  variants: {
+    size: {
+      xs: {
+        base: "size-6 text-xs"
+      },
+      sm: {
+        base: "size-7 text-xs"
+      },
+      md: {
+        base: "size-8 text-sm"
+      },
+      lg: {
+        base: "size-9 text-sm"
+      },
+      xl: {
+        base: "size-10 text-base"
+      }
+    },
+    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"
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    highlight: {
+      true: ""
+    }
+  },
+  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})]`
+  })), ...(options.theme.colors || []).map((color) => ({
+    color,
+    highlight: true,
+    class: `ring ring-inset ring-[var(--ui-${color})]`
+  })), {
+    color: "neutral",
+    variant: ["outline", "subtle"],
+    class: "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]"
+  }, {
+    color: "neutral",
+    highlight: true,
+    class: "ring ring-inset ring-[var(--ui-border-inverted)]"
+  }],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    variant: "outline"
+  }
+});
+
 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",
@@ -2019,26 +2193,7 @@ const selectMenu = (options) => {
     slots: {
       value: "truncate",
       placeholder: "truncate text-[var(--ui-text-dimmed)]",
-      input: "placeholder:text-[var(--ui-text-dimmed)] border-0 border-b border-[var(--ui-border)] focus:outline-none"
-    },
-    variants: {
-      size: {
-        xs: {
-          input: "text-xs px-2 py-1"
-        },
-        sm: {
-          input: "text-xs px-2.5 py-1.5"
-        },
-        md: {
-          input: "text-sm px-2.5 py-1.5"
-        },
-        lg: {
-          input: "text-sm px-3 py-2"
-        },
-        xl: {
-          input: "text-base px-3 py-2"
-        }
-      }
+      input: "border-b border-[var(--ui-border)]"
     }
   }, select(options));
 };
@@ -2410,6 +2565,7 @@ const table = (options) => ({
   slots: {
     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",
@@ -2509,7 +2665,7 @@ const tabs = (options) => ({
       pill: {
         list: "bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)]",
         trigger: "flex-1 w-full",
-        indicator: "rounded-[calc(var(--ui-radius)*1.5)] shadow-sm"
+        indicator: "rounded-[calc(var(--ui-radius)*1.5)] shadow-xs"
       },
       link: {
         list: "border-[var(--ui-border)]",
@@ -2668,7 +2824,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-[var(--height)] focus:outline-none",
-    base: "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"
+    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"
   },
   variants: {
     position: {
@@ -2724,7 +2880,7 @@ const toaster = {
 
 const tooltip = {
   slots: {
-    content: "flex items-center gap-1 bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] shadow 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]",
+    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)]",
     text: "truncate",
     kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['\xB7'] before:me-0.5`,
@@ -2756,11 +2912,13 @@ const theme = {
   formField: formField,
   input: input,
   inputMenu: inputMenu,
+  inputNumber: inputNumber,
   kbd: kbd,
   link: link,
   modal: modal,
   navigationMenu: navigationMenu,
   pagination: pagination,
+  pinInput: pinInput,
   popover: popover,
   progress: progress,
   radioGroup: radioGroup,