@byyuurin/ui 0.2.0 → 0.4.0

package/dist/shared/{ui.DLOxhmP0.mjs → ui.DcEKQd0n.mjs}

@@ -4,12 +4,12 @@ import { findPath, addTypeTemplate, addTemplate } from '@nuxt/kit';
 import { loadConfig } from '@unocss/config';
 import { genExport } from 'knitwork';
 import { kebabCase } from 'scule';
-import { n as neutralColors } from './ui.CzIlLITK.mjs';
+import { n as neutralColors } from './ui.DYMXCXO6.mjs';
 import { ct } from '@byyuurin/ui-kit';
 import { defu } from 'defu';
 
 const name = "@byyuurin/ui";
-const version = "0.2.0";
+const version = "0.4.0";
 
 const accordion = ct({
   parts: {
@@ -860,7 +860,7 @@ const carousel = (options) => ct({
     next: "absolute rounded-full",
     dots: "absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3",
     dot: [
-      "cursor-pointer size-3 bg-accented rounded-full",
+      "cursor-pointer size-3 bg-accented rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
       options.theme.transitions && "transition"
     ]
   },
@@ -970,9 +970,6 @@ const checkbox = (options) => ct({
         label: "cursor-not-allowed",
         description: "cursor-not-allowed"
       }
-    },
-    checked: {
-      true: ""
     }
   },
   compoundVariants: [
@@ -1458,6 +1455,233 @@ const dropdownMenu = (options) => ct({
   }
 });
 
+const fileUpload = (options) => ct({
+  parts: {
+    root: "relative flex flex-col",
+    base: [
+      "w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg cursor-pointer focus-visible:outline-2",
+      options.theme.transitions && "transition-colors"
+    ],
+    wrapper: "flex flex-col items-center justify-center text-center",
+    icon: "shrink-0",
+    avatar: "shrink-0",
+    label: "font-medium text-default mt-2",
+    description: "text-muted mt-1",
+    actions: "flex flex-wrap gap-1.5 shrink-0 mt-4",
+    files: "",
+    file: "relative",
+    fileLeadingAvatar: "shrink-0",
+    fileWrapper: "flex flex-col min-w-0",
+    fileName: "text-default truncate",
+    fileSize: "text-muted truncate",
+    fileTrailingButton: ""
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    variant: {
+      area: {
+        wrapper: "px-4 py-3",
+        base: "p-4"
+      },
+      button: ""
+    },
+    size: {
+      xs: {
+        base: "text-xs",
+        icon: "size-4",
+        file: "text-xs px-2 py-1 gap-1",
+        fileWrapper: "flex-row gap-1"
+      },
+      sm: {
+        base: "text-xs",
+        icon: "size-4",
+        file: "text-xs px-2.5 py-1.5 gap-1.5",
+        fileWrapper: "flex-row gap-1"
+      },
+      md: {
+        base: "text-sm",
+        icon: "size-5",
+        file: "text-xs px-2.5 py-1.5 gap-1.5"
+      },
+      lg: {
+        base: "text-sm",
+        icon: "size-5",
+        file: "text-sm px-3 py-2 gap-2",
+        fileSize: "text-xs"
+      },
+      xl: {
+        base: "text-base",
+        icon: "size-6",
+        file: "text-sm px-3 py-2 gap-2"
+      }
+    },
+    layout: {
+      list: {
+        root: "gap-2 items-start",
+        files: "flex flex-col w-full gap-2",
+        file: "min-w-0 flex items-center border border-default rounded-md w-full",
+        fileTrailingButton: "ms-auto"
+      },
+      grid: {
+        fileWrapper: "hidden",
+        fileLeadingAvatar: "size-full rounded-lg",
+        fileTrailingButton: "absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg"
+      }
+    },
+    position: {
+      inside: "",
+      outside: ""
+    },
+    dropzone: {
+      true: {
+        base: "border-dashed data-[dragging=true]:bg-elevated/25"
+      }
+    },
+    interactive: {
+      true: ""
+    },
+    highlight: {
+      true: ""
+    },
+    multiple: {
+      true: ""
+    },
+    disabled: {
+      true: {
+        base: "cursor-not-allowed opacity-75"
+      }
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      class: {
+        base: `focus-visible:outline-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      class: {
+        base: "focus-visible:outline-inverted"
+      }
+    },
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      highlight: true,
+      class: {
+        base: `border-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      highlight: true,
+      class: {
+        base: "border-inverted"
+      }
+    },
+    {
+      size: "xs",
+      layout: "list",
+      class: {
+        fileTrailingButton: "-me-1"
+      }
+    },
+    {
+      size: "sm",
+      layout: "list",
+      class: {
+        fileTrailingButton: "-me-1.5"
+      }
+    },
+    {
+      size: "md",
+      layout: "list",
+      class: {
+        fileTrailingButton: "-me-1.5"
+      }
+    },
+    {
+      size: "lg",
+      layout: "list",
+      class: {
+        fileTrailingButton: "-me-2"
+      }
+    },
+    {
+      size: "xl",
+      layout: "list",
+      class: {
+        fileTrailingButton: "-me-2"
+      }
+    },
+    {
+      variant: "button",
+      size: "xs",
+      class: {
+        base: "p-1"
+      }
+    },
+    {
+      variant: "button",
+      size: "sm",
+      class: {
+        base: "p-1.5"
+      }
+    },
+    {
+      variant: "button",
+      size: "md",
+      class: {
+        base: "p-1.5"
+      }
+    },
+    {
+      variant: "button",
+      size: "lg",
+      class: {
+        base: "p-2"
+      }
+    },
+    {
+      variant: "button",
+      size: "xl",
+      class: {
+        base: "p-2"
+      }
+    },
+    {
+      layout: "grid",
+      multiple: true,
+      class: {
+        files: "grid grid-cols-2 md:grid-cols-3 gap-4 w-full",
+        file: "p-0 aspect-square"
+      }
+    },
+    {
+      layout: "grid",
+      multiple: false,
+      class: {
+        file: "absolute inset-0 p-0"
+      }
+    },
+    {
+      interactive: true,
+      disabled: false,
+      class: {
+        base: "hover:bg-elevated/25"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    variant: "area",
+    size: "md"
+  }
+});
+
 const form = ct({
   base: ""
 });
@@ -1466,15 +1690,25 @@ const formField = ct({
   parts: {
     root: "",
     wrapper: "",
-    labelWrapper: "flex content-center items-center justify-between",
+    labelWrapper: "flex content-center items-center justify-between gap-1",
     label: "block font-medium text-default",
-    container: "mt-1 relative",
+    container: "relative",
     description: "text-muted",
     error: "mt-2 text-error",
     hint: "text-muted",
     help: "mt-2 text-muted"
   },
   variants: {
+    orientation: {
+      vertical: {
+        root: "",
+        container: "mt-1"
+      },
+      horizontal: {
+        root: "flex justify-between place-items-baseline gap-2",
+        container: "flex-grow"
+      }
+    },
     size: {
       xs: { root: "text-xs" },
       sm: { root: "text-xs" },
@@ -1489,7 +1723,8 @@ const formField = ct({
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "md",
+    orientation: "vertical"
   }
 });
 
@@ -2921,8 +3156,12 @@ const select = (options) => {
       arrow: "fill-default",
       content: [
         "z-1 max-h-60 w-[--reka-select-trigger-width] bg-default shadow-lg rounded-md ring ring-default overflow-hidden origin-[--reka-select-content-transform-origin] pointer-events-auto flex flex-col",
-        "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]"
+        "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+        "origin-[--reka-combobox-content-transform-origin] w-[--reka-combobox-trigger-width]"
       ],
+      trailingClear: "p-0",
+      input: "border-b border-default",
+      focusScope: "flex flex-col min-h-0",
       viewport: "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
       group: "p-1 isolate",
       empty: "text-center text-muted",
@@ -3005,18 +3244,15 @@ const select = (options) => {
           itemTrailingIcon: "size-6",
           empty: "p-2 text-base"
         }
+      },
+      searchInput: {
+        false: {
+          input: "sr-only"
+        }
       }
     },
     compoundVariants: [
-      ...input.compoundVariants.map((item) => {
-        return {
-          ...item,
-          class: {
-            ...item.class,
-            base: typeof item.class.base === "string" ? item.class.base.replace(/focus-visible:/g, "focus:") : item.class.base
-          }
-        };
-      })
+      ...input.compoundVariants
     ],
     defaultVariants: {
       ...input.defaultVariants
@@ -3284,6 +3520,141 @@ const slider = (options) => ct({
   }
 });
 
+const stepper = (options) => ct({
+  parts: {
+    root: "flex gap-4",
+    header: "flex",
+    item: "group text-center relative w-full",
+    container: "relative",
+    trigger: "rounded-full font-medium text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2",
+    indicator: "flex items-center justify-center size-full",
+    icon: "shrink-0",
+    separator: "absolute rounded-full group-data-[disabled]:opacity-75 bg-accented",
+    wrapper: "",
+    title: "font-medium text-default",
+    description: "text-muted text-wrap",
+    content: "size-full"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "flex-col",
+        container: "flex justify-center",
+        separator: "top-[calc(50%-2px)] h-0.5",
+        wrapper: "mt-1"
+      },
+      vertical: {
+        header: "flex-col gap-4",
+        item: "flex text-start",
+        separator: "start-[calc(50%-1px)] -bottom-[0.625rem] w-0.5"
+      }
+    },
+    size: {
+      xs: {
+        trigger: "size-6 text-xs",
+        icon: "size-3",
+        title: "text-xs",
+        description: "text-xs",
+        wrapper: "mt-1.5"
+      },
+      sm: {
+        trigger: "size-8 text-sm",
+        icon: "size-4",
+        title: "text-xs",
+        description: "text-xs",
+        wrapper: "mt-2"
+      },
+      md: {
+        trigger: "size-10 text-base",
+        icon: "size-5",
+        title: "text-sm",
+        description: "text-sm",
+        wrapper: "mt-2.5"
+      },
+      lg: {
+        trigger: "size-12 text-lg",
+        icon: "size-6",
+        title: "text-base",
+        description: "text-base",
+        wrapper: "mt-3"
+      },
+      xl: {
+        trigger: "size-14 text-xl",
+        icon: "size-7",
+        title: "text-lg",
+        description: "text-lg",
+        wrapper: "mt-3.5"
+      }
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        trigger: `group-data-[state=completed]:bg-${color} group-data-[state=active]:bg-${color} focus-visible:outline-${color}`,
+        separator: `group-data-[state=completed]:bg-${color}`
+      }])),
+      neutral: {
+        trigger: "group-data-[state=completed]:bg-inverted group-data-[state=active]:bg-inverted focus-visible:outline-inverted",
+        separator: "group-data-[state=completed]:bg-inverted"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "horizontal",
+      size: "xs",
+      class: { separator: "start-[calc(50%+1rem)] end-[calc(-50%+1rem)]" }
+    },
+    {
+      orientation: "horizontal",
+      size: "sm",
+      class: { separator: "start-[calc(50%+1.25rem)] end-[calc(-50%+1.25rem)]" }
+    },
+    {
+      orientation: "horizontal",
+      size: "md",
+      class: { separator: "start-[calc(50%+1.75rem)] end-[calc(-50%+1.75rem)]" }
+    },
+    {
+      orientation: "horizontal",
+      size: "lg",
+      class: { separator: "start-[calc(50%+2rem)] end-[calc(-50%+2rem)]" }
+    },
+    {
+      orientation: "horizontal",
+      size: "xl",
+      class: { separator: "start-[calc(50%+2.25rem)] end-[calc(-50%+2.25rem)]" }
+    },
+    {
+      orientation: "vertical",
+      size: "xs",
+      class: { separator: "top-7.5", item: "gap-1.5" }
+    },
+    {
+      orientation: "vertical",
+      size: "sm",
+      class: { separator: "top-9.5", item: "gap-2" }
+    },
+    {
+      orientation: "vertical",
+      size: "md",
+      class: { separator: "top-11.5", item: "gap-2.5" }
+    },
+    {
+      orientation: "vertical",
+      size: "lg",
+      class: { separator: "top-13.5", item: "gap-3" }
+    },
+    {
+      orientation: "vertical",
+      size: "xl",
+      class: { separator: "top-15.5", item: "gap-3.5" }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});
+
 const _switch = (options) => ct({
   parts: {
     root: "relative flex items-start",
@@ -4028,6 +4399,102 @@ const tooltip = ct({
   }
 });
 
+const tree = (options) => ct({
+  parts: {
+    root: "relative isolate",
+    item: "w-full",
+    listWithChildren: "border-s border-default",
+    itemWithChildren: "ps-1.5 -ms-px",
+    link: "relative group w-full flex items-center text-sm select-none before:absolute before:inset-y-px before:inset-x-0 before:-z-1 before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    linkLeadingIcon: "shrink-0 relative",
+    linkLabel: "truncate",
+    linkTrailing: "ms-auto inline-flex gap-1.5 items-center",
+    linkTrailingIcon: "shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, {
+        link: `focus-visible:before:ring-${color}`
+      }])),
+      neutral: {
+        link: "focus-visible:before:ring-inverted"
+      }
+    },
+    size: {
+      xs: {
+        listWithChildren: "ms-4",
+        link: "px-2 py-1 text-xs gap-1",
+        linkLeadingIcon: "size-4",
+        linkTrailingIcon: "size-4"
+      },
+      sm: {
+        listWithChildren: "ms-4.5",
+        link: "px-2.5 py-1.5 text-xs gap-1.5",
+        linkLeadingIcon: "size-4",
+        linkTrailingIcon: "size-4"
+      },
+      md: {
+        listWithChildren: "ms-5",
+        link: "px-2.5 py-1.5 text-sm gap-1.5",
+        linkLeadingIcon: "size-5",
+        linkTrailingIcon: "size-5"
+      },
+      lg: {
+        listWithChildren: "ms-5.5",
+        link: "px-3 py-2 text-sm gap-2",
+        linkLeadingIcon: "size-5",
+        linkTrailingIcon: "size-5"
+      },
+      xl: {
+        listWithChildren: "ms-6",
+        link: "px-3 py-2 text-base gap-2",
+        linkLeadingIcon: "size-6",
+        linkTrailingIcon: "size-6"
+      }
+    },
+    selected: {
+      true: {
+        link: "before:bg-elevated"
+      }
+    },
+    disabled: {
+      true: {
+        link: "cursor-not-allowed opacity-75"
+      }
+    }
+  },
+  compoundVariants: [
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      selected: true,
+      class: {
+        link: `text-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      selected: true,
+      class: {
+        link: "text-highlighted"
+      }
+    },
+    {
+      selected: false,
+      disabled: false,
+      class: {
+        link: [
+          "hover:text-highlighted hover:before:bg-elevated/50",
+          options.theme.transitions && "transition-colors before:transition-colors"
+        ]
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    size: "md"
+  }
+});
+
 const theme = {
   __proto__: null,
   accordion: accordion,
@@ -4047,6 +4514,7 @@ const theme = {
   drawer: drawer,
   dropdownMenu: dropdownMenu,
   fieldGroup: fieldGroup,
+  fileUpload: fileUpload,
   form: form,
   formField: formField,
   input: inputTheme,
@@ -4067,6 +4535,7 @@ const theme = {
   separator: separator,
   skeleton: skeleton,
   slider: slider,
+  stepper: stepper,
   switch: _switch,
   table: table,
   tabs: tabs,
@@ -4074,7 +4543,8 @@ const theme = {
   timeline: timeline,
   toast: toast,
   toastProvider: toastProvider,
-  tooltip: tooltip
+  tooltip: tooltip,
+  tree: tree
 };
 
 function getTemplates(options, uiConfig, nuxt) {

package/dist/unocss.mjs

@@ -1,6 +1,6 @@
 import { colors } from '@unocss/preset-wind4/colors';
 import { parseColor } from '@unocss/preset-wind4/utils';
-import { r as resolveColors } from './shared/ui.CzIlLITK.mjs';
+import { r as resolveColors } from './shared/ui.DYMXCXO6.mjs';
 import '../dist/runtime/utils/index.js';
 
 function createUnoPreset(options = {}) {

package/dist/unplugin.d.mts

@@ -2,7 +2,7 @@ import 'unplugin';
 import 'unplugin-auto-import/types';
 import 'unplugin-vue-components/types';
 import './shared/ui.IulR-OYx.mjs';
-export { U as UIOptions, r as runtimeDir, u as unplugin } from './shared/ui.DpbffTXs.mjs';
+export { U as UIOptions, r as runtimeDir, u as unplugin } from './shared/ui.CGCKYv7g.mjs';
 import '@nuxt/schema';
 import '@unocss/preset-wind4/colors';
 import '../dist/runtime/types/index.js';

package/dist/unplugin.mjs

@@ -2,8 +2,8 @@ import { fileURLToPath } from 'node:url';
 import { defu } from 'defu';
 import { join, normalize } from 'pathe';
 import { createUnplugin } from 'unplugin';
-import { g as getTemplates, n as name } from './shared/ui.DLOxhmP0.mjs';
-import { d as defaultOptions, r as resolveColors, g as getDefaultUIConfig } from './shared/ui.CzIlLITK.mjs';
+import { g as getTemplates, n as name } from './shared/ui.DcEKQd0n.mjs';
+import { d as defaultOptions, r as resolveColors, g as getDefaultUIConfig } from './shared/ui.DYMXCXO6.mjs';
 import AutoImport from 'unplugin-auto-import';
 import { globSync } from 'tinyglobby';
 import AutoImportComponents from 'unplugin-vue-components';

package/dist/vite.d.mts

@@ -1,5 +1,5 @@
 import * as vite from 'vite';
-import { U as UIOptions } from './shared/ui.DpbffTXs.mjs';
+import { U as UIOptions } from './shared/ui.CGCKYv7g.mjs';
 import 'unplugin';
 import 'unplugin-auto-import/types';
 import 'unplugin-vue-components/types';

package/dist/vite.mjs

@@ -3,13 +3,13 @@ import 'node:url';
 import 'defu';
 import 'pathe';
 import 'unplugin';
-import './shared/ui.DLOxhmP0.mjs';
+import './shared/ui.DcEKQd0n.mjs';
 import 'node:process';
 import '@nuxt/kit';
 import '@unocss/config';
 import 'knitwork';
 import 'scule';
-import './shared/ui.CzIlLITK.mjs';
+import './shared/ui.DYMXCXO6.mjs';
 import '../dist/runtime/utils/index.js';
 import '@byyuurin/ui-kit';
 import 'unplugin-auto-import';