@nuxt/ui 2.10.0 → 2.11.1

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

@@ -0,0 +1,64 @@
+declare const _default: {
+    wrapper: string;
+    base: string;
+    rounded: string;
+    background: string;
+    ring: string;
+    progress: {
+        base: string;
+        rounded: string;
+        background: string;
+        size: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
+    };
+    thumb: {
+        base: string;
+        color: string;
+        background: string;
+        ring: string;
+        size: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
+    };
+    track: {
+        base: string;
+        background: string;
+        rounded: string;
+        size: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
+    };
+    size: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    default: {
+        size: string;
+        color: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,63 @@
+export default {
+  wrapper: "relative w-full flex items-center",
+  base: "w-full absolute appearance-none cursor-pointer disabled:cursor-not-allowed disabled:bg-opacity-50 focus:outline-none peer group",
+  rounded: "rounded-lg",
+  background: "bg-transparent",
+  ring: "focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
+  progress: {
+    base: "absolute pointer-events-none peer-disabled:bg-opacity-50",
+    rounded: "rounded-s-lg",
+    background: "bg-{color}-500 dark:bg-{color}-400",
+    size: {
+      "2xs": "h-px",
+      xs: "h-0.5",
+      sm: "h-1",
+      md: "h-2",
+      lg: "h-3",
+      xl: "h-4",
+      "2xl": "h-5"
+    }
+  },
+  thumb: {
+    base: "[&::-webkit-slider-thumb]:relative [&::-moz-range-thumb]:relative [&::-webkit-slider-thumb]:z-[1] [&::-moz-range-thumb]:z-[1] [&::-webkit-slider-thumb]:appearance-none [&::-moz-range-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0",
+    color: "text-{color}-500 dark:text-{color}-400",
+    background: "[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:dark:bg-gray-900 [&::-moz-range-thumb]:bg-current",
+    ring: "[&::-webkit-slider-thumb]:ring-2 [&::-webkit-slider-thumb]:ring-current",
+    size: {
+      "2xs": "[&::-webkit-slider-thumb]:h-1.5 [&::-moz-range-thumb]:h-1.5 [&::-webkit-slider-thumb]:w-1.5 [&::-moz-range-thumb]:w-1.5 [&::-webkit-slider-thumb]:mt-[-2.5px] [&::-moz-range-thumb]:mt-[-2.5px]",
+      xs: "[&::-webkit-slider-thumb]:h-2 [&::-moz-range-thumb]:h-2 [&::-webkit-slider-thumb]:w-2 [&::-moz-range-thumb]:w-2 [&::-webkit-slider-thumb]:mt-[-3px] [&::-moz-range-thumb]:mt-[-3px]",
+      sm: "[&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-moz-range-thumb]:w-3 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
+      md: "[&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
+      lg: "[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
+      xl: "[&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:w-6 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1",
+      "2xl": "[&::-webkit-slider-thumb]:h-7 [&::-moz-range-thumb]:h-7 [&::-webkit-slider-thumb]:w-7 [&::-moz-range-thumb]:w-7 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1"
+    }
+  },
+  track: {
+    base: "[&::-webkit-slider-runnable-track]:group-disabled:bg-opacity-50 [&::-moz-range-track]:group-disabled:bg-opacity-50",
+    background: "[&::-webkit-slider-runnable-track]:bg-gray-200 [&::-moz-range-track]:bg-gray-200 [&::-webkit-slider-runnable-track]:dark:bg-gray-700 [&::-moz-range-track]:dark:bg-gray-700",
+    rounded: "[&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-range-track]:rounded-lg",
+    size: {
+      "2xs": "[&::-webkit-slider-runnable-track]:h-px [&::-moz-range-track]:h-px",
+      xs: "[&::-webkit-slider-runnable-track]:h-0.5 [&::-moz-range-track]:h-0.5",
+      sm: "[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1",
+      md: "[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2",
+      lg: "[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3",
+      xl: "[&::-webkit-slider-runnable-track]:h-4 [&::-moz-range-track]:h-4",
+      "2xl": "[&::-webkit-slider-runnable-track]:h-5 [&::-moz-range-track]:h-5"
+    }
+  },
+  size: {
+    "2xs": "h-1.5",
+    xs: "h-2",
+    sm: "h-3",
+    md: "h-4",
+    lg: "h-5",
+    xl: "h-6",
+    "2xl": "h-7"
+  },
+  default: {
+    size: "md",
+    color: "primary"
+  }
+};

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

@@ -0,0 +1,108 @@
+declare const _default: {
+    form: string;
+    placeholder: string;
+    default: {
+        size: string;
+        color: string;
+        variant: string;
+        loadingIcon: string;
+        trailingIcon: string;
+    };
+    wrapper: string;
+    base: string;
+    rounded: string;
+    size: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    gap: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    padding: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    leading: {
+        padding: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
+    trailing: {
+        padding: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
+    color: {
+        white: {
+            outline: string;
+        };
+        gray: {
+            outline: string;
+        };
+    };
+    variant: {
+        outline: string;
+        none: string;
+    };
+    icon: {
+        base: string;
+        color: string;
+        loading: string;
+        size: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        leading: {
+            wrapper: string;
+            pointer: string;
+            padding: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+        };
+        trailing: {
+            wrapper: string;
+            pointer: string;
+            padding: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,13 @@
+import input from "./input.mjs";
+export default {
+  ...input,
+  form: "form-select",
+  placeholder: "text-gray-900 dark:text-white",
+  default: {
+    size: "sm",
+    color: "white",
+    variant: "outline",
+    loadingIcon: "i-heroicons-arrow-path-20-solid",
+    trailingIcon: "i-heroicons-chevron-down-20-solid"
+  }
+};

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

@@ -0,0 +1,68 @@
+declare const _default: {
+    container: string;
+    trigger: string;
+    select: string;
+    width: string;
+    height: string;
+    base: string;
+    background: string;
+    shadow: string;
+    rounded: string;
+    padding: string;
+    ring: string;
+    input: string;
+    required: string;
+    label: string;
+    option: {
+        base: string;
+        rounded: string;
+        padding: string;
+        size: string;
+        color: string;
+        container: string;
+        active: string;
+        inactive: string;
+        selected: string;
+        disabled: string;
+        empty: string;
+        create: string;
+        icon: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        selectedIcon: {
+            wrapper: string;
+            padding: string;
+            base: string;
+        };
+        avatar: {
+            base: string;
+            size: "3xs";
+        };
+        chip: {
+            base: string;
+        };
+    };
+    transition: {
+        leaveActiveClass: string;
+        leaveFromClass: string;
+        leaveToClass: string;
+    };
+    popper: {
+        placement: string;
+    };
+    default: {
+        selectedIcon: string;
+        clearOnClose: boolean;
+    };
+    arrow: {
+        ring: string;
+        background: string;
+        base: string;
+        rounded: string;
+        shadow: string;
+        placement: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,66 @@
+import { arrow } from "../popper.mjs";
+export default {
+  container: "z-20 group",
+  trigger: "inline-flex w-full",
+  select: "inline-flex items-center text-left cursor-default",
+  width: "w-full",
+  height: "max-h-60",
+  base: "relative focus:outline-none overflow-y-auto scroll-py-1",
+  background: "bg-white dark:bg-gray-800",
+  shadow: "shadow-lg",
+  rounded: "rounded-md",
+  padding: "p-1",
+  ring: "ring-1 ring-gray-200 dark:ring-gray-700",
+  input: "block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 focus:border-inherit sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none",
+  required: "absolute inset-0 w-px opacity-0 cursor-default",
+  label: "block truncate",
+  option: {
+    base: "cursor-default select-none relative flex items-center justify-between gap-1",
+    rounded: "rounded-md",
+    padding: "px-2 py-1.5",
+    size: "text-sm",
+    color: "text-gray-900 dark:text-white",
+    container: "flex items-center gap-2 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",
+    create: "block truncate",
+    icon: {
+      base: "flex-shrink-0 h-4 w-4",
+      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"
+    },
+    avatar: {
+      base: "flex-shrink-0",
+      size: "3xs"
+    },
+    chip: {
+      base: "flex-shrink-0 w-2 h-2 mx-1 rounded-full"
+    }
+  },
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    leaveActiveClass: "transition ease-in duration-100",
+    leaveFromClass: "opacity-100",
+    leaveToClass: "opacity-0"
+  },
+  popper: {
+    placement: "bottom-end"
+  },
+  default: {
+    selectedIcon: "i-heroicons-check-20-solid",
+    clearOnClose: false
+  },
+  arrow: {
+    ...arrow,
+    ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-700",
+    background: "before:bg-white dark:before:bg-gray-700"
+  }
+};

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

@@ -0,0 +1,106 @@
+declare const _default: {
+    form: string;
+    default: {
+        size: string;
+        color: string;
+        variant: string;
+    };
+    wrapper: string;
+    base: string;
+    rounded: string;
+    placeholder: string;
+    size: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    gap: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    padding: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    leading: {
+        padding: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
+    trailing: {
+        padding: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
+    color: {
+        white: {
+            outline: string;
+        };
+        gray: {
+            outline: string;
+        };
+    };
+    variant: {
+        outline: string;
+        none: string;
+    };
+    icon: {
+        base: string;
+        color: string;
+        loading: string;
+        size: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        leading: {
+            wrapper: string;
+            pointer: string;
+            padding: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+        };
+        trailing: {
+            wrapper: string;
+            pointer: string;
+            padding: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,10 @@
+import input from "./input.mjs";
+export default {
+  ...input,
+  form: "form-textarea",
+  default: {
+    size: "sm",
+    color: "white",
+    variant: "outline"
+  }
+};

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

@@ -0,0 +1,61 @@
+declare const _default: {
+    base: string;
+    rounded: string;
+    ring: string;
+    active: string;
+    inactive: string;
+    size: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    container: {
+        base: string;
+        active: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
+        inactive: string;
+        size: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
+    };
+    icon: {
+        base: string;
+        active: string;
+        inactive: string;
+        size: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
+        on: string;
+        off: string;
+    };
+    default: {
+        onIcon: null;
+        offIcon: null;
+        color: string;
+        size: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,60 @@
+export default {
+  base: "relative inline-flex flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none",
+  rounded: "rounded-full",
+  ring: "focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
+  active: "bg-{color}-500 dark:bg-{color}-400",
+  inactive: "bg-gray-200 dark:bg-gray-700",
+  size: {
+    "2xs": "h-3 w-5",
+    xs: "h-3.5 w-6",
+    sm: "h-4 w-7",
+    md: "h-5 w-9",
+    lg: "h-6 w-11",
+    xl: "h-7 w-[3.25rem]",
+    "2xl": "h-8 w-[3.75rem]"
+  },
+  container: {
+    base: "pointer-events-none relative inline-block rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200",
+    active: {
+      "2xs": "translate-x-2 rtl:-translate-x-2",
+      xs: "translate-x-2.5 rtl:-translate-x-2.5",
+      sm: "translate-x-3 rtl:-translate-x-3",
+      md: "translate-x-4 rtl:-translate-x-4",
+      lg: "translate-x-5 rtl:-translate-x-5",
+      xl: "translate-x-6 rtl:-translate-x-6",
+      "2xl": "translate-x-7 rtl:-translate-x-7"
+    },
+    inactive: "translate-x-0 rtl:-translate-x-0",
+    size: {
+      "2xs": "h-2 w-2",
+      xs: "h-2.5 w-2.5",
+      sm: "h-3 w-3",
+      md: "h-4 w-4",
+      lg: "h-5 w-5",
+      xl: "h-6 w-6",
+      "2xl": "h-7 w-7"
+    }
+  },
+  icon: {
+    base: "absolute inset-0 h-full w-full flex items-center justify-center transition-opacity",
+    active: "opacity-100 ease-in duration-200",
+    inactive: "opacity-0 ease-out duration-100",
+    size: {
+      "2xs": "h-2 w-2",
+      xs: "h-2 w-2",
+      sm: "h-2 w-2",
+      md: "h-3 w-3",
+      lg: "h-4 w-4",
+      xl: "h-5 w-5",
+      "2xl": "h-6 w-6"
+    },
+    on: "text-{color}-500 dark:text-{color}-400",
+    off: "text-gray-400 dark:text-gray-500"
+  },
+  default: {
+    onIcon: null,
+    offIcon: null,
+    color: "primary",
+    size: "md"
+  }
+};

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

@@ -0,0 +1,40 @@
+export { default as table } from './data/table';
+export { default as avatar } from './elements/avatar';
+export { default as avatarGroup } from './elements/avatarGroup';
+export { default as badge } from './elements/badge';
+export { default as button } from './elements/button';
+export { default as buttonGroup } from './elements/buttonGroup';
+export { default as chip } from './elements/chip';
+export { default as dropdown } from './elements/dropdown';
+export { default as accordion } from './elements/accordion';
+export { default as alert } from './elements/alert';
+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 input } from './forms/input';
+export { default as formGroup } from './forms/formGroup';
+export { default as textarea } from './forms/textarea';
+export { default as select } from './forms/select';
+export { default as selectMenu } from './forms/selectMenu';
+export { default as radioGroup } from './forms/radioGroup';
+export { default as radio } from './forms/radio';
+export { default as checkbox } from './forms/checkbox';
+export { default as toggle } from './forms/toggle';
+export { default as range } from './forms/range';
+export { default as card } from './layout/card';
+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 commandPalette } from './navigation/commandPalette';
+export { default as pagination } from './navigation/pagination';
+export { default as tabs } from './navigation/tabs';
+export { default as breadcrumb } from './navigation/breadcrumb';
+export { default as modal } from './overlays/modal';
+export { default as slideover } from './overlays/slideover';
+export { default as tooltip } from './overlays/tooltip';
+export { default as popover } from './overlays/popover';
+export { default as contextMenu } from './overlays/contextMenu';
+export { default as notification } from './overlays/notification';
+export { default as notifications } from './overlays/notifications';