@nuxt/ui 2.12.3 → 2.14.0

package/dist/runtime/ui.config/elements/carousel.d.ts

@@ -0,0 +1,27 @@
+declare const _default: {
+    wrapper: string;
+    container: string;
+    item: string;
+    arrows: {
+        wrapper: string;
+    };
+    indicators: {
+        wrapper: string;
+        base: string;
+        active: string;
+        inactive: string;
+    };
+    default: {
+        prevButton: {
+            color: "black";
+            class: string;
+            icon: string;
+        };
+        nextButton: {
+            color: "black";
+            class: string;
+            icon: string;
+        };
+    };
+};
+export default _default;

package/dist/runtime/ui.config/elements/carousel.mjs

@@ -0,0 +1,26 @@
+export default {
+  wrapper: "relative",
+  container: "relative w-full flex overflow-x-auto snap-x snap-mandatory scroll-smooth",
+  item: "flex flex-none snap-center",
+  arrows: {
+    wrapper: "flex items-center justify-between"
+  },
+  indicators: {
+    wrapper: "absolute flex items-center justify-center gap-3 bottom-4 inset-x-0",
+    base: "rounded-full h-3 w-3",
+    active: "bg-primary-500 dark:bg-primary-400",
+    inactive: "bg-gray-100 dark:bg-gray-800 mix-blend-overlay"
+  },
+  default: {
+    prevButton: {
+      color: "black",
+      class: "rtl:[&_span:first-child]:rotate-180 absolute left-4 top-1/2 transform -translate-y-1/2 rounded-full",
+      icon: "i-heroicons-chevron-left-20-solid"
+    },
+    nextButton: {
+      color: "black",
+      class: "rtl:[&_span:last-child]:rotate-180 absolute right-4 top-1/2 transform -translate-y-1/2 rounded-full",
+      icon: "i-heroicons-chevron-right-20-solid "
+    }
+  }
+};

package/dist/runtime/ui.config/elements/dropdown.d.ts

@@ -26,7 +26,7 @@ declare const _default: {
         };
         avatar: {
             base: string;
-            size: "3xs";
+            size: "2xs";
         };
         label: string;
         shortcuts: string;
@@ -43,6 +43,10 @@ declare const _default: {
         placement: string;
         strategy: string;
     };
+    default: {
+        openDelay: number;
+        closeDelay: number;
+    };
     arrow: {
         ring: string;
         background: string;

package/dist/runtime/ui.config/elements/dropdown.mjs

@@ -13,21 +13,21 @@ export default {
   divide: "divide-y divide-gray-200 dark:divide-gray-700",
   padding: "p-1",
   item: {
-    base: "group flex items-center gap-2 w-full",
+    base: "group flex items-center gap-1.5 w-full",
     rounded: "rounded-md",
-    padding: "px-2 py-1.5",
+    padding: "px-1.5 py-1.5",
     size: "text-sm",
     active: "bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white",
     inactive: "text-gray-700 dark:text-gray-200",
     disabled: "cursor-not-allowed opacity-50",
     icon: {
-      base: "flex-shrink-0 h-4 w-4",
+      base: "flex-shrink-0 w-5 h-5",
       active: "text-gray-500 dark:text-gray-400",
       inactive: "text-gray-400 dark:text-gray-500"
     },
     avatar: {
       base: "flex-shrink-0",
-      size: "3xs"
+      size: "2xs"
     },
     label: "truncate",
     shortcuts: "hidden md:inline-flex flex-shrink-0 gap-0.5 ms-auto"
@@ -45,6 +45,10 @@ export default {
     placement: "bottom-end",
     strategy: "fixed"
   },
+  default: {
+    openDelay: 0,
+    closeDelay: 0
+  },
   arrow: {
     ...arrow,
     ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-700",

package/dist/runtime/ui.config/forms/formGroup.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
     wrapper: string;
+    inner: string;
     label: {
         wrapper: string;
         base: string;

package/dist/runtime/ui.config/forms/formGroup.mjs

@@ -1,5 +1,6 @@
 export default {
   wrapper: "",
+  inner: "",
   label: {
     wrapper: "flex content-center items-center justify-between",
     base: "block font-medium text-gray-700 dark:text-gray-200",

package/dist/runtime/ui.config/forms/input.d.ts

@@ -4,6 +4,17 @@ declare const _default: {
     form: string;
     rounded: string;
     placeholder: string;
+    file: {
+        base: string;
+        padding: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
     size: {
         '2xs': string;
         xs: string;

package/dist/runtime/ui.config/forms/input.mjs

@@ -4,6 +4,17 @@ export default {
   form: "form-input",
   rounded: "rounded-md",
   placeholder: "placeholder-gray-400 dark:placeholder-gray-500",
+  file: {
+    base: "file:cursor-pointer file:rounded-l-md file:absolute file:left-0 file:inset-y-0 file:font-medium file:m-0 file:border-0 file:ring-1 file:ring-gray-300 dark:file:ring-gray-700 file:text-gray-900 dark:file:text-white file:bg-gray-50 hover:file:bg-gray-100 dark:file:bg-gray-800 dark:hover:file:bg-gray-700/50",
+    padding: {
+      "2xs": "ps-[85px]",
+      xs: "ps-[87px]",
+      sm: "ps-[96px]",
+      md: "ps-[98px]",
+      lg: "ps-[100px]",
+      xl: "ps-[109px]"
+    }
+  },
   size: {
     "2xs": "text-xs",
     xs: "text-xs",

package/dist/runtime/ui.config/forms/inputMenu.d.ts

@@ -34,7 +34,7 @@ declare const _default: {
         };
         avatar: {
             base: string;
-            size: "3xs";
+            size: "2xs";
         };
         chip: {
             base: string;

package/dist/runtime/ui.config/forms/inputMenu.mjs

@@ -14,28 +14,28 @@ export default {
   option: {
     base: "cursor-default select-none relative flex items-center justify-between gap-1",
     rounded: "rounded-md",
-    padding: "px-2 py-1.5",
+    padding: "px-1.5 py-1.5",
     size: "text-sm",
     color: "text-gray-900 dark:text-white",
-    container: "flex items-center gap-2 min-w-0",
+    container: "flex items-center gap-1.5 min-w-0",
     active: "bg-gray-100 dark:bg-gray-900",
     inactive: "",
     selected: "pe-7",
     disabled: "cursor-not-allowed opacity-50",
     empty: "text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5",
     icon: {
-      base: "flex-shrink-0 h-4 w-4",
+      base: "flex-shrink-0 h-5 w-5",
       active: "text-gray-900 dark:text-white",
       inactive: "text-gray-400 dark:text-gray-500"
     },
     selectedIcon: {
       wrapper: "absolute inset-y-0 end-0 flex items-center",
       padding: "pe-2",
-      base: "h-4 w-4 text-gray-900 dark:text-white flex-shrink-0"
+      base: "h-5 w-5 text-gray-900 dark:text-white flex-shrink-0"
     },
     avatar: {
       base: "flex-shrink-0",
-      size: "3xs"
+      size: "2xs"
     },
     chip: {
       base: "flex-shrink-0 w-2 h-2 mx-1 rounded-full"

package/dist/runtime/ui.config/forms/select.d.ts

@@ -11,6 +11,17 @@ declare const _default: {
     wrapper: string;
     base: string;
     rounded: string;
+    file: {
+        base: string;
+        padding: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
     size: {
         '2xs': string;
         xs: string;

package/dist/runtime/ui.config/forms/select.mjs

@@ -2,7 +2,7 @@ import input from "./input.mjs";
 export default {
   ...input,
   form: "form-select",
-  placeholder: "text-gray-900 dark:text-white",
+  placeholder: "text-gray-400 dark:text-gray-500",
   default: {
     size: "sm",
     color: "white",

package/dist/runtime/ui.config/forms/selectMenu.d.ts

@@ -28,7 +28,7 @@ declare const _default: {
         };
         avatar: {
             base: string;
-            size: "3xs";
+            size: "2xs";
         };
         chip: {
             base: string;

package/dist/runtime/ui.config/forms/textarea.d.ts

@@ -9,6 +9,17 @@ declare const _default: {
     base: string;
     rounded: string;
     placeholder: string;
+    file: {
+        base: string;
+        padding: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
     size: {
         '2xs': string;
         xs: string;

package/dist/runtime/ui.config/index.d.ts

@@ -12,6 +12,7 @@ export { default as kbd } from './elements/kbd';
 export { default as progress } from './elements/progress';
 export { default as meter } from './elements/meter';
 export { default as meterGroup } from './elements/meterGroup';
+export { default as carousel } from './elements/carousel';
 export { default as input } from './forms/input';
 export { default as inputMenu } from './forms/inputMenu';
 export { default as formGroup } from './forms/formGroup';
@@ -28,6 +29,7 @@ export { default as container } from './layout/container';
 export { default as skeleton } from './layout/skeleton';
 export { default as divider } from './layout/divider';
 export { default as verticalNavigation } from './navigation/verticalNavigation';
+export { default as horizontalNavigation } from './navigation/horizontalNavigation';
 export { default as commandPalette } from './navigation/commandPalette';
 export { default as pagination } from './navigation/pagination';
 export { default as tabs } from './navigation/tabs';

package/dist/runtime/ui.config/index.mjs

@@ -12,6 +12,7 @@ export { default as kbd } from "./elements/kbd.mjs";
 export { default as progress } from "./elements/progress.mjs";
 export { default as meter } from "./elements/meter.mjs";
 export { default as meterGroup } from "./elements/meterGroup.mjs";
+export { default as carousel } from "./elements/carousel.mjs";
 export { default as input } from "./forms/input.mjs";
 export { default as inputMenu } from "./forms/inputMenu.mjs";
 export { default as formGroup } from "./forms/formGroup.mjs";
@@ -28,6 +29,7 @@ export { default as container } from "./layout/container.mjs";
 export { default as skeleton } from "./layout/skeleton.mjs";
 export { default as divider } from "./layout/divider.mjs";
 export { default as verticalNavigation } from "./navigation/verticalNavigation.mjs";
+export { default as horizontalNavigation } from "./navigation/horizontalNavigation.mjs";
 export { default as commandPalette } from "./navigation/commandPalette.mjs";
 export { default as pagination } from "./navigation/pagination.mjs";
 export { default as tabs } from "./navigation/tabs.mjs";

package/dist/runtime/ui.config/layout/divider.d.ts

@@ -14,8 +14,22 @@ declare const _default: {
         horizontal: string;
         vertical: string;
         size: {
-            horizontal: string;
-            vertical: string;
+            horizontal: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+            vertical: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
         };
         type: {
             solid: string;
@@ -31,5 +45,8 @@ declare const _default: {
         size: "2xs";
     };
     label: string;
+    default: {
+        size: "2xs";
+    };
 };
 export default _default;

package/dist/runtime/ui.config/layout/divider.mjs

@@ -14,8 +14,22 @@ export default {
     horizontal: "w-full",
     vertical: "h-full",
     size: {
-      horizontal: "border-t",
-      vertical: "border-s"
+      horizontal: {
+        "2xs": "border-t",
+        xs: "border-t-[2px]",
+        sm: "border-t-[3px]",
+        md: "border-t-[4px]",
+        lg: "border-t-[5px]",
+        xl: "border-t-[6px]"
+      },
+      vertical: {
+        "2xs": "border-s",
+        xs: "border-s-[2px]",
+        sm: "border-s-[3px]",
+        md: "border-s-[4px]",
+        lg: "border-s-[5px]",
+        xl: "border-s-[6px]"
+      }
     },
     type: {
       solid: "border-solid",
@@ -30,5 +44,8 @@ export default {
     base: "flex-shrink-0",
     size: "2xs"
   },
-  label: "text-sm"
+  label: "text-sm",
+  default: {
+    size: "2xs"
+  }
 };

package/dist/runtime/ui.config/navigation/breadcrumb.mjs

@@ -1,11 +1,11 @@
 export default {
   wrapper: "relative",
   ol: "flex items-center gap-x-1.5",
-  li: "flex items-center gap-x-1.5 text-gray-500 dark:text-gray-400 text-sm",
-  base: "flex items-center gap-x-1.5 group font-semibold",
-  label: "",
+  li: "flex items-center gap-x-1.5 text-gray-500 dark:text-gray-400 text-sm leading-6 min-w-0",
+  base: "flex items-center gap-x-1.5 group font-semibold min-w-0",
+  label: "block truncate",
   icon: {
-    base: "flex-shrink-0 w-4 h-4",
+    base: "flex-shrink-0 w-5 h-5",
     active: "",
     inactive: ""
   },

package/dist/runtime/ui.config/navigation/commandPalette.d.ts

@@ -46,7 +46,7 @@ declare const _default: {
             };
             avatar: {
                 base: string;
-                size: "3xs";
+                size: "2xs";
             };
             chip: {
                 base: string;

package/dist/runtime/ui.config/navigation/commandPalette.mjs

@@ -10,8 +10,8 @@ export default {
     icon: {
       base: "pointer-events-none absolute start-4 text-gray-400 dark:text-gray-500",
       loading: "animate-spin",
-      size: "h-4 w-4",
-      padding: "ps-10"
+      size: "h-5 w-5",
+      padding: "ps-11"
     },
     closeButton: {
       base: "absolute end-4",
@@ -26,27 +26,27 @@ export default {
   },
   group: {
     wrapper: "p-2",
-    label: "px-2 my-2 text-xs font-semibold text-gray-900 dark:text-white",
+    label: "px-2.5 my-2 text-xs font-semibold text-gray-900 dark:text-white",
     container: "text-sm text-gray-700 dark:text-gray-200",
     command: {
-      base: "flex justify-between select-none items-center rounded-md px-2 py-1.5 gap-2 relative",
+      base: "flex justify-between select-none items-center rounded-md px-2.5 py-1.5 gap-2 relative",
       active: "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white",
       inactive: "",
       label: "flex items-center gap-1.5 min-w-0",
       prefix: "text-gray-400 dark:text-gray-500",
       suffix: "text-gray-400 dark:text-gray-500",
-      container: "flex items-center gap-2 min-w-0",
+      container: "flex items-center gap-1.5 min-w-0",
       icon: {
-        base: "flex-shrink-0 w-4 h-4",
+        base: "flex-shrink-0 w-5 h-5",
         active: "text-gray-900 dark:text-white",
         inactive: "text-gray-400 dark:text-gray-500"
       },
       selectedIcon: {
-        base: "h-4 w-4 text-gray-900 dark:text-white flex-shrink-0"
+        base: "h-5 w-5 text-gray-900 dark:text-white flex-shrink-0"
       },
       avatar: {
         base: "flex-shrink-0",
-        size: "3xs"
+        size: "2xs"
       },
       chip: {
         base: "flex-shrink-0 w-2 h-2 mx-1 rounded-full"

package/dist/runtime/ui.config/navigation/horizontalNavigation.d.ts

@@ -0,0 +1,27 @@
+declare const _default: {
+    wrapper: string;
+    container: string;
+    inner: string;
+    base: string;
+    before: string;
+    after: string;
+    active: string;
+    inactive: string;
+    label: string;
+    icon: {
+        base: string;
+        active: string;
+        inactive: string;
+    };
+    avatar: {
+        base: string;
+        size: "2xs";
+    };
+    badge: {
+        base: string;
+        color: "gray";
+        variant: "solid";
+        size: "xs";
+    };
+};
+export default _default;

package/dist/runtime/ui.config/navigation/horizontalNavigation.mjs

@@ -0,0 +1,26 @@
+export default {
+  wrapper: "relative w-full flex items-center justify-between",
+  container: "flex items-center min-w-0",
+  inner: "min-w-0",
+  base: "group relative w-full flex items-center gap-1.5 px-2.5 py-3.5 rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75",
+  before: "before:absolute before:inset-x-0 before:inset-y-2 before:inset-px before:rounded-md hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50",
+  after: "after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2",
+  active: "text-gray-900 dark:text-white after:bg-primary-500 dark:after:bg-primary-400 after:rounded-full",
+  inactive: "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white",
+  label: "truncate relative",
+  icon: {
+    base: "flex-shrink-0 w-5 h-5",
+    active: "text-gray-700 dark:text-gray-200",
+    inactive: "text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"
+  },
+  avatar: {
+    base: "flex-shrink-0",
+    size: "2xs"
+  },
+  badge: {
+    base: "flex-shrink-0 ml-auto relative rounded",
+    color: "gray",
+    variant: "solid",
+    size: "xs"
+  }
+};

package/dist/runtime/ui.config/navigation/verticalNavigation.d.ts

@@ -17,12 +17,13 @@ declare const _default: {
     };
     avatar: {
         base: string;
-        size: "3xs";
+        size: "2xs";
     };
     badge: {
         base: string;
-        active: string;
-        inactive: string;
+        color: "gray";
+        variant: "solid";
+        size: "xs";
     };
     divider: {
         wrapper: {

package/dist/runtime/ui.config/navigation/verticalNavigation.mjs

@@ -1,8 +1,8 @@
 export default {
   wrapper: "relative",
-  base: "group relative flex items-center gap-2 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75",
+  base: "group relative flex items-center gap-1.5 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75",
   ring: "focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400",
-  padding: "px-3 py-1.5",
+  padding: "px-2.5 py-1.5",
   width: "w-full",
   rounded: "rounded-md",
   font: "font-medium",
@@ -11,18 +11,19 @@ export default {
   inactive: "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50",
   label: "truncate relative",
   icon: {
-    base: "flex-shrink-0 w-4 h-4",
+    base: "flex-shrink-0 w-5 h-5",
     active: "text-gray-700 dark:text-gray-200",
     inactive: "text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"
   },
   avatar: {
     base: "flex-shrink-0",
-    size: "3xs"
+    size: "2xs"
   },
   badge: {
-    base: "relative ms-auto inline-block py-0.5 px-2 text-xs rounded-md -me-1 -my-0.5",
-    active: "bg-white dark:bg-gray-900",
-    inactive: "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white group-hover:bg-white dark:group-hover:bg-gray-900"
+    base: "flex-shrink-0 ml-auto relative rounded",
+    color: "gray",
+    variant: "solid",
+    size: "xs"
   },
   divider: {
     wrapper: {

package/dist/runtime/ui.config/overlays/popover.d.ts

@@ -31,6 +31,10 @@ declare const _default: {
     popper: {
         strategy: string;
     };
+    default: {
+        openDelay: number;
+        closeDelay: number;
+    };
     arrow: {
         base: string;
         ring: string;

package/dist/runtime/ui.config/overlays/popover.mjs

@@ -33,5 +33,9 @@ export default {
   popper: {
     strategy: "fixed"
   },
+  default: {
+    openDelay: 0,
+    closeDelay: 0
+  },
   arrow
 };

package/dist/runtime/ui.config/overlays/slideover.mjs

@@ -22,8 +22,8 @@ export default {
   width: "w-screen max-w-md",
   translate: {
     base: "translate-x-0",
-    left: "-translate-x-full",
-    right: "translate-x-full"
+    left: "-translate-x-full rtl:translate-x-full",
+    right: "translate-x-full rtl:-translate-x-full"
   },
   // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
   transition: {

package/dist/runtime/ui.config/overlays/tooltip.d.ts

@@ -21,6 +21,10 @@ declare const _default: {
     popper: {
         strategy: string;
     };
+    default: {
+        openDelay: number;
+        closeDelay: number;
+    };
     arrow: {
         base: string;
         ring: string;

package/dist/runtime/ui.config/overlays/tooltip.mjs

@@ -23,5 +23,9 @@ export default {
   popper: {
     strategy: "fixed"
   },
+  default: {
+    openDelay: 0,
+    closeDelay: 0
+  },
   arrow
 };

package/dist/runtime/ui.css

@@ -1 +1 @@
-.dark{color-scheme:dark}a:focus-visible{@apply outline-primary}::-moz-selection{@apply bg-primary/40}::selection{@apply bg-primary/40}select{background-image:none}
+.dark{color-scheme:dark}a:focus-visible{@apply outline-primary}::-moz-selection{@apply bg-primary/40}::selection{@apply bg-primary/40}

package/dist/runtime/utils/colors.d.ts

@@ -0,0 +1,3 @@
+export declare const excludeColors: (colors: object) => string[];
+export declare const generateSafelist: (colors: string[], globalColors: any) => any[];
+export declare const customSafelistExtractor: (prefix: any, content: string, colors: string[], safelistColors: string[]) => string[];