@nuxt/ui 2.9.0 → 2.11.0

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

@@ -0,0 +1,68 @@
+declare const _default: {
+    wrapper: string;
+    container: string;
+    input: {
+        wrapper: string;
+        base: string;
+        padding: string;
+        height: string;
+        size: string;
+        icon: {
+            base: string;
+            size: string;
+            padding: string;
+        };
+        closeButton: string;
+    };
+    emptyState: {
+        wrapper: string;
+        label: string;
+        queryLabel: string;
+        icon: string;
+    };
+    group: {
+        wrapper: string;
+        label: string;
+        container: string;
+        command: {
+            base: string;
+            active: string;
+            inactive: string;
+            label: string;
+            prefix: string;
+            suffix: string;
+            container: string;
+            icon: {
+                base: string;
+                active: string;
+                inactive: string;
+            };
+            selectedIcon: {
+                base: string;
+            };
+            avatar: {
+                base: string;
+                size: "3xs";
+            };
+            chip: {
+                base: string;
+            };
+            disabled: string;
+            shortcuts: string;
+        };
+        active: string;
+        inactive: string;
+    };
+    default: {
+        icon: string;
+        loadingIcon: string;
+        emptyState: {
+            icon: string;
+            label: string;
+            queryLabel: string;
+        };
+        closeButton: null;
+        selectedIcon: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,67 @@
+export default {
+  wrapper: "flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800",
+  container: "relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2",
+  input: {
+    wrapper: "relative flex items-center",
+    base: "w-full placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 text-gray-900 dark:text-white focus:ring-0 focus:outline-none",
+    padding: "px-4",
+    height: "h-12",
+    size: "sm:text-sm",
+    icon: {
+      base: "pointer-events-none absolute start-4 text-gray-400 dark:text-gray-500",
+      size: "h-4 w-4",
+      padding: "ps-10"
+    },
+    closeButton: "absolute end-4"
+  },
+  emptyState: {
+    wrapper: "flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14",
+    label: "text-sm text-center text-gray-900 dark:text-white",
+    queryLabel: "text-sm text-center text-gray-900 dark:text-white",
+    icon: "w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4"
+  },
+  group: {
+    wrapper: "p-2",
+    label: "px-2 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",
+      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",
+      icon: {
+        base: "flex-shrink-0 w-4 h-4",
+        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"
+      },
+      avatar: {
+        base: "flex-shrink-0",
+        size: "3xs"
+      },
+      chip: {
+        base: "flex-shrink-0 w-2 h-2 mx-1 rounded-full"
+      },
+      disabled: "opacity-50",
+      shortcuts: "hidden md:inline-flex flex-shrink-0 gap-0.5"
+    },
+    active: "flex-shrink-0 text-gray-500 dark:text-gray-400",
+    inactive: "flex-shrink-0 text-gray-500 dark:text-gray-400"
+  },
+  default: {
+    icon: "i-heroicons-magnifying-glass-20-solid",
+    loadingIcon: "i-heroicons-arrow-path-20-solid",
+    emptyState: {
+      icon: "i-heroicons-magnifying-glass-20-solid",
+      label: "We couldn't find any items.",
+      queryLabel: "We couldn't find any items with that term. Please try again."
+    },
+    closeButton: null,
+    selectedIcon: "i-heroicons-check-20-solid"
+  }
+};

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

@@ -0,0 +1,35 @@
+declare const _default: {
+    wrapper: string;
+    base: string;
+    rounded: string;
+    default: {
+        size: string;
+        activeButton: {
+            color: string;
+        };
+        inactiveButton: {
+            color: string;
+        };
+        firstButton: {
+            color: string;
+            class: string;
+            icon: string;
+        };
+        lastButton: {
+            color: string;
+            class: string;
+            icon: string;
+        };
+        prevButton: {
+            color: string;
+            class: string;
+            icon: string;
+        };
+        nextButton: {
+            color: string;
+            class: string;
+            icon: string;
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,34 @@
+export default {
+  wrapper: "flex items-center -space-x-px",
+  base: "",
+  rounded: "first:rounded-s-md last:rounded-e-md",
+  default: {
+    size: "sm",
+    activeButton: {
+      color: "primary"
+    },
+    inactiveButton: {
+      color: "white"
+    },
+    firstButton: {
+      color: "white",
+      class: "rtl:[&_span:first-child]:rotate-180",
+      icon: "i-heroicons-chevron-double-left-20-solid"
+    },
+    lastButton: {
+      color: "white",
+      class: "rtl:[&_span:last-child]:rotate-180",
+      icon: "i-heroicons-chevron-double-right-20-solid"
+    },
+    prevButton: {
+      color: "white",
+      class: "rtl:[&_span:first-child]:rotate-180",
+      icon: "i-heroicons-chevron-left-20-solid"
+    },
+    nextButton: {
+      color: "white",
+      class: "rtl:[&_span:last-child]:rotate-180",
+      icon: "i-heroicons-chevron-right-20-solid"
+    }
+  }
+};

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

@@ -0,0 +1,34 @@
+declare const _default: {
+    wrapper: string;
+    container: string;
+    base: string;
+    list: {
+        base: string;
+        background: string;
+        rounded: string;
+        shadow: string;
+        padding: string;
+        height: string;
+        width: string;
+        marker: {
+            wrapper: string;
+            base: string;
+            background: string;
+            rounded: string;
+            shadow: string;
+        };
+        tab: {
+            base: string;
+            background: string;
+            active: string;
+            inactive: string;
+            height: string;
+            padding: string;
+            size: string;
+            font: string;
+            rounded: string;
+            shadow: string;
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,33 @@
+export default {
+  wrapper: "relative space-y-2",
+  container: "relative w-full",
+  base: "focus:outline-none",
+  list: {
+    base: "relative",
+    background: "bg-gray-100 dark:bg-gray-800",
+    rounded: "rounded-lg",
+    shadow: "",
+    padding: "p-1",
+    height: "h-10",
+    width: "w-full",
+    marker: {
+      wrapper: "absolute top-[4px] left-[4px] duration-200 ease-out focus:outline-none",
+      base: "w-full h-full",
+      background: "bg-white dark:bg-gray-900",
+      rounded: "rounded-md",
+      shadow: "shadow-sm"
+    },
+    tab: {
+      base: "relative inline-flex items-center justify-center flex-shrink-0 w-full ui-focus-visible:outline-0 ui-focus-visible:ring-2 ui-focus-visible:ring-primary-500 dark:ui-focus-visible:ring-primary-400 ui-not-focus-visible:outline-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out",
+      background: "",
+      active: "text-gray-900 dark:text-white",
+      inactive: "text-gray-500 dark:text-gray-400",
+      height: "h-8",
+      padding: "px-3",
+      size: "text-sm",
+      font: "font-medium",
+      rounded: "rounded-md",
+      shadow: ""
+    }
+  }
+};

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

@@ -0,0 +1,28 @@
+declare const _default: {
+    wrapper: string;
+    base: string;
+    ring: string;
+    padding: string;
+    width: string;
+    rounded: string;
+    font: string;
+    size: string;
+    active: string;
+    inactive: string;
+    label: string;
+    icon: {
+        base: string;
+        active: string;
+        inactive: string;
+    };
+    avatar: {
+        base: string;
+        size: string;
+    };
+    badge: {
+        base: string;
+        active: string;
+        inactive: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,27 @@
+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",
+  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",
+  width: "w-full",
+  rounded: "rounded-md",
+  font: "font-medium",
+  size: "text-sm",
+  active: "text-gray-900 dark:text-white before:bg-gray-100 dark:before:bg-gray-800",
+  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",
+    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"
+  },
+  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"
+  }
+};

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

@@ -0,0 +1,31 @@
+declare const _default: {
+    wrapper: string;
+    container: string;
+    width: string;
+    background: string;
+    shadow: string;
+    rounded: string;
+    ring: string;
+    base: string;
+    transition: {
+        enterActiveClass: string;
+        enterFromClass: string;
+        enterToClass: string;
+        leaveActiveClass: string;
+        leaveFromClass: string;
+        leaveToClass: string;
+    };
+    popper: {
+        placement: string;
+        scroll: boolean;
+    };
+    arrow: {
+        base: string;
+        ring: string;
+        rounded: string;
+        background: string;
+        shadow: string;
+        placement: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,25 @@
+import arrow from "../_popperArrow.mjs";
+export default {
+  wrapper: "relative",
+  container: "z-20 group",
+  width: "",
+  background: "bg-white dark:bg-gray-900",
+  shadow: "shadow-lg",
+  rounded: "rounded-md",
+  ring: "ring-1 ring-gray-200 dark:ring-gray-800",
+  base: "overflow-hidden focus:outline-none relative",
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    enterActiveClass: "transition ease-out duration-200",
+    enterFromClass: "opacity-0 translate-y-1",
+    enterToClass: "opacity-100 translate-y-0",
+    leaveActiveClass: "transition ease-in duration-150",
+    leaveFromClass: "opacity-100 translate-y-0",
+    leaveToClass: "opacity-0 translate-y-1"
+  },
+  popper: {
+    placement: "bottom-start",
+    scroll: false
+  },
+  arrow
+};

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

@@ -0,0 +1,35 @@
+declare const _default: {
+    wrapper: string;
+    inner: string;
+    container: string;
+    padding: string;
+    margin: string;
+    base: string;
+    overlay: {
+        base: string;
+        background: string;
+        transition: {
+            enter: string;
+            enterFrom: string;
+            enterTo: string;
+            leave: string;
+            leaveFrom: string;
+            leaveTo: string;
+        };
+    };
+    background: string;
+    ring: string;
+    rounded: string;
+    shadow: string;
+    width: string;
+    height: string;
+    transition: {
+        enter: string;
+        enterFrom: string;
+        enterTo: string;
+        leave: string;
+        leaveFrom: string;
+        leaveTo: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,36 @@
+export default {
+  wrapper: "relative z-50",
+  inner: "fixed inset-0 overflow-y-auto",
+  container: "flex min-h-full items-end sm:items-center justify-center text-center",
+  padding: "p-4 sm:p-0",
+  margin: "sm:my-8",
+  base: "relative text-left rtl:text-right overflow-hidden w-full flex flex-col",
+  overlay: {
+    base: "fixed inset-0 transition-opacity",
+    background: "bg-gray-200/75 dark:bg-gray-800/75",
+    // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
+    transition: {
+      enter: "ease-out duration-300",
+      enterFrom: "opacity-0",
+      enterTo: "opacity-100",
+      leave: "ease-in duration-200",
+      leaveFrom: "opacity-100",
+      leaveTo: "opacity-0"
+    }
+  },
+  background: "bg-white dark:bg-gray-900",
+  ring: "",
+  rounded: "rounded-lg",
+  shadow: "shadow-xl",
+  width: "sm:max-w-lg",
+  height: "",
+  // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
+  transition: {
+    enter: "ease-out duration-300",
+    enterFrom: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+    enterTo: "opacity-100 translate-y-0 sm:scale-100",
+    leave: "ease-in duration-200",
+    leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
+    leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+  }
+};

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

@@ -0,0 +1,49 @@
+declare const _default: {
+    wrapper: string;
+    container: string;
+    title: string;
+    description: string;
+    actions: string;
+    background: string;
+    shadow: string;
+    rounded: string;
+    padding: string;
+    gap: string;
+    ring: string;
+    icon: {
+        base: string;
+        color: string;
+    };
+    avatar: {
+        base: string;
+        size: "md";
+    };
+    progress: {
+        base: string;
+        background: string;
+    };
+    transition: {
+        enterActiveClass: string;
+        enterFromClass: string;
+        enterToClass: string;
+        leaveActiveClass: string;
+        leaveFromClass: string;
+        leaveToClass: string;
+    };
+    default: {
+        color: string;
+        icon: null;
+        timeout: number;
+        closeButton: {
+            icon: string;
+            color: string;
+            variant: string;
+            padded: boolean;
+        };
+        actionButton: {
+            size: string;
+            color: string;
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,49 @@
+export default {
+  wrapper: "w-full pointer-events-auto",
+  container: "relative overflow-hidden",
+  title: "text-sm font-medium text-gray-900 dark:text-white",
+  description: "mt-1 text-sm leading-4 text-gray-500 dark:text-gray-400",
+  actions: "flex items-center gap-2 mt-3 flex-shrink-0",
+  background: "bg-white dark:bg-gray-900",
+  shadow: "shadow-lg",
+  rounded: "rounded-lg",
+  padding: "p-4",
+  gap: "gap-3",
+  ring: "ring-1 ring-gray-200 dark:ring-gray-800",
+  icon: {
+    base: "flex-shrink-0 w-5 h-5",
+    color: "text-{color}-500 dark:text-{color}-400"
+  },
+  avatar: {
+    base: "flex-shrink-0 self-center",
+    size: "md"
+  },
+  progress: {
+    base: "absolute bottom-0 end-0 start-0 h-1",
+    background: "bg-{color}-500 dark:bg-{color}-400"
+  },
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    enterActiveClass: "transform ease-out duration-300 transition",
+    enterFromClass: "translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2",
+    enterToClass: "translate-y-0 opacity-100 sm:translate-x-0",
+    leaveActiveClass: "transition ease-in duration-100",
+    leaveFromClass: "opacity-100",
+    leaveToClass: "opacity-0"
+  },
+  default: {
+    color: "primary",
+    icon: null,
+    timeout: 5e3,
+    closeButton: {
+      icon: "i-heroicons-x-mark-20-solid",
+      color: "gray",
+      variant: "link",
+      padded: false
+    },
+    actionButton: {
+      size: "xs",
+      color: "white"
+    }
+  }
+};

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

@@ -0,0 +1,7 @@
+declare const _default: {
+    wrapper: string;
+    position: string;
+    width: string;
+    container: string;
+};
+export default _default;

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

@@ -0,0 +1,6 @@
+export default {
+  wrapper: "fixed flex flex-col justify-end z-[55]",
+  position: "bottom-0 end-0",
+  width: "w-full sm:w-96",
+  container: "px-4 sm:px-6 py-6 space-y-3 overflow-y-auto"
+};

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

@@ -0,0 +1,42 @@
+declare const _default: {
+    wrapper: string;
+    container: string;
+    width: string;
+    background: string;
+    shadow: string;
+    rounded: string;
+    ring: string;
+    base: string;
+    transition: {
+        enterActiveClass: string;
+        enterFromClass: string;
+        enterToClass: string;
+        leaveActiveClass: string;
+        leaveFromClass: string;
+        leaveToClass: string;
+    };
+    overlay: {
+        base: string;
+        background: string;
+        transition: {
+            enterActiveClass: string;
+            enterFromClass: string;
+            enterToClass: string;
+            leaveActiveClass: string;
+            leaveFromClass: string;
+            leaveToClass: string;
+        };
+    };
+    popper: {
+        strategy: string;
+    };
+    arrow: {
+        base: string;
+        ring: string;
+        rounded: string;
+        background: string;
+        shadow: string;
+        placement: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,36 @@
+import arrow from "../_popperArrow.mjs";
+export default {
+  wrapper: "relative",
+  container: "z-50 group",
+  width: "",
+  background: "bg-white dark:bg-gray-900",
+  shadow: "shadow-lg",
+  rounded: "rounded-md",
+  ring: "ring-1 ring-gray-200 dark:ring-gray-800",
+  base: "overflow-hidden focus:outline-none relative",
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    enterActiveClass: "transition ease-out duration-200",
+    enterFromClass: "opacity-0 translate-y-1",
+    enterToClass: "opacity-100 translate-y-0",
+    leaveActiveClass: "transition ease-in duration-150",
+    leaveFromClass: "opacity-100 translate-y-0",
+    leaveToClass: "opacity-0 translate-y-1"
+  },
+  overlay: {
+    base: "fixed inset-0 transition-opacity z-50",
+    background: "bg-gray-200/75 dark:bg-gray-800/75",
+    transition: {
+      enterActiveClass: "ease-out duration-200",
+      enterFromClass: "opacity-0",
+      enterToClass: "opacity-100",
+      leaveActiveClass: "ease-in duration-150",
+      leaveFromClass: "opacity-100",
+      leaveToClass: "opacity-0"
+    }
+  },
+  popper: {
+    strategy: "fixed"
+  },
+  arrow
+};

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

@@ -0,0 +1,27 @@
+declare const _default: {
+    wrapper: string;
+    overlay: {
+        base: string;
+        background: string;
+        transition: {
+            enter: string;
+            enterFrom: string;
+            enterTo: string;
+            leave: string;
+            leaveFrom: string;
+            leaveTo: string;
+        };
+    };
+    base: string;
+    background: string;
+    ring: string;
+    rounded: string;
+    padding: string;
+    shadow: string;
+    width: string;
+    transition: {
+        enter: string;
+        leave: string;
+    };
+};
+export default _default;