@gspa/ui 0.1.3 → 0.2.0

package/README.md

@@ -190,6 +190,41 @@ describe('Component', () => {
 
 This document provides comprehensive usage examples and API reference for all Vue components and directives in GSPA UI.
 
+## Importing components
+
+Import individual components when the application does not need the global plugin. Granular exports keep unrelated components out of the application bundle:
+
+```js
+import Button from '@gspa/ui/components/Button'
+import AuthLayout from '@gspa/ui/layouts/AuthLayout'
+import '@gspa/ui/css'
+```
+
+For a small entry point, import component CSS instead of the complete utility sheet:
+
+```js
+import Button from '@gspa/ui/components/Button'
+import '@gspa/ui/css/button'
+```
+
+Granular styles are available for `button`, `input`, `form-field`, and `auth-layout`. `@gspa/ui/css/tokens` contains only semantic theme tokens and shared accessibility rules. Scoped legacy styles can be loaded through `@gspa/ui/css/scoped/<Component>` when that component needs them.
+
+Form controls include their validation and password icons, so authentication forms do not require global Font Awesome registration. For custom `Icon` names, applications may retain Font Awesome or provide a component adapter once:
+
+```js
+app.use(VueUI, {
+  iconAdapter: ({ name, prefix }) => myIconRegistry[prefix]?.[name]
+})
+```
+
+Nested components use the same convention:
+
+```js
+import BarChart from '@gspa/ui/components/charts/BarChart'
+```
+
+Named imports from `@gspa/ui` remain tree-shakeable. The default `VueUI` plugin intentionally registers every component and should only be used when an application needs the complete library.
+
 ## Button Authorization Access Control
 
 `Button` supports access-control props directly:

package/dist/Button.vue_vue_type_script_setup_true_lang-B3TkBTvG.js

@@ -0,0 +1,205 @@
+import { defineComponent as x, inject as k, computed as i, createElementBlock as a, createCommentVNode as s, openBlock as n, mergeProps as z, unref as h, createBlock as S, renderSlot as B, normalizeClass as g, createElementVNode as m, toDisplayString as b } from "vue";
+import { cva as O } from "class-variance-authority";
+import { cn as A } from "./utils/cn.js";
+import C from "./components/Icon.js";
+import { AUTH_RESOLVER_KEY as E } from "./lib/auth.js";
+const M = ["disabled", "type", "aria-disabled", "aria-busy"], R = { key: 2 }, V = {
+  key: 4,
+  class: "sr-only",
+  role: "status",
+  "aria-live": "polite"
+}, F = /* @__PURE__ */ x({
+  inheritAttrs: !1,
+  __name: "Button",
+  props: {
+    variant: {
+      type: String,
+      default: "default",
+      validator: (e) => [
+        "primary",
+        "default",
+        "danger",
+        "outline",
+        "secondary",
+        "ghost",
+        "link",
+        "success",
+        "warning",
+        "info",
+        "subtle",
+        "dark",
+        "light",
+        "primaryOutline",
+        "dangerOutline",
+        "successOutline",
+        "gradient"
+      ].includes(e)
+    },
+    size: {
+      type: String,
+      default: "default",
+      validator: (e) => ["2xs", "xs", "sm", "default", "md", "lg", "xl", "2xl", "icon-sm", "icon", "icon-lg"].includes(e)
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    loadingText: {
+      type: String,
+      default: null
+    },
+    loadingLabel: {
+      type: String,
+      default: "Loading"
+    },
+    type: {
+      type: String,
+      default: "button"
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    permission: {
+      type: [String, Array, Boolean, Function],
+      default: null
+    },
+    role: {
+      type: [String, Array, Boolean, Function],
+      default: null
+    },
+    requireAll: {
+      type: Boolean,
+      default: !1
+    },
+    unauthorized: {
+      type: String,
+      default: "show",
+      validator: (e) => ["show", "hide", "disable"].includes(e)
+    }
+  },
+  setup(e) {
+    const t = e, d = k(E, null), l = (r) => r == null ? null : typeof r == "boolean" ? r : typeof r == "function" ? !!r() : r, u = i(() => {
+      const r = l(t.permission), o = l(t.role);
+      return r === null && o === null ? !0 : (r === null || typeof r == "boolean") && (o === null || typeof o == "boolean") ? (r ?? !0) && (o ?? !0) : typeof d == "function" ? !!d({
+        permission: r,
+        role: o,
+        requireAll: t.requireAll
+      }) : !0;
+    }), f = i(() => t.unauthorized === "hide" && !u.value), p = i(() => t.unauthorized === "disable" && !u.value), c = i(() => t.disabled || t.loading || p.value), v = O(
+      "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-[color,background-color,border-color,box-shadow,transform] duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary) focus-visible:ring-offset-2 active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50",
+      {
+        variants: {
+          variant: {
+            primary: "ui-primary-bg shadow-sm hover:bg-(--ui-primary-strong) hover:shadow-md",
+            default: "ui-primary-bg shadow-sm hover:bg-(--ui-primary-strong) hover:shadow-md",
+            danger: "ui-danger-bg shadow-sm hover:bg-(--ui-danger-strong) hover:shadow-md",
+            outline: "border ui-border-strong ui-surface ui-text hover:bg-(--ui-surface-soft) hover:border-(--ui-primary) hover:text-(--ui-primary)",
+            secondary: "border ui-border ui-surface-muted ui-text hover:bg-(--ui-surface-soft) hover:shadow-sm",
+            ghost: "bg-transparent ui-text-muted hover:bg-[color:color-mix(in oklab, var(--ui-accent-soft), transparent 40%)] hover:text-(--ui-text)",
+            link: "ui-primary underline-offset-4 hover:underline hover:text-(--ui-primary-strong)",
+            success: "ui-success-bg shadow-sm hover:bg-(--ui-success-strong) hover:shadow-md",
+            warning: "ui-warning-bg shadow-sm hover:bg-(--ui-warning-strong) hover:shadow-md",
+            info: "border border-blue-600 bg-blue-600 text-white shadow-sm hover:bg-blue-700 hover:shadow-md dark:border-blue-500 dark:bg-blue-500 dark:text-white dark:hover:bg-blue-400",
+            subtle: "border ui-border ui-surface ui-text-muted hover:text-(--ui-text) hover:bg-(--ui-surface-soft)",
+            dark: "border border-zinc-900 bg-zinc-900 text-white shadow-sm hover:bg-black hover:shadow-md dark:border-zinc-100 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-white",
+            light: "border border-zinc-200 bg-white text-zinc-900 shadow-sm hover:bg-zinc-50 hover:shadow-md dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800",
+            primaryOutline: "border border-(--ui-primary) ui-primary bg-transparent hover:bg-(--ui-primary-soft) hover:border-(--ui-primary-strong) hover:text-(--ui-primary-strong)",
+            dangerOutline: "border border-(--ui-danger) ui-danger bg-transparent hover:bg-(--ui-danger-soft) hover:border-(--ui-danger-strong) hover:text-(--ui-danger-strong)",
+            successOutline: "border border-(--ui-success) ui-success bg-transparent hover:bg-(--ui-success-soft) hover:border-(--ui-success-strong) hover:text-(--ui-success-strong)",
+            gradient: "bg-linear-to-r from-(--ui-primary) to-(--ui-accent) ui-text-inverse shadow-sm hover:from-(--ui-primary-strong) hover:to-(--ui-accent-strong) hover:shadow-md"
+          },
+          size: {
+            "2xs": "h-4 px-1 py-3 text-md rounded",
+            xs: "h-7 px-2.5 py-1 text-xs rounded-md",
+            sm: "h-8 px-3 py-1.5 text-sm rounded-md",
+            default: "h-9 px-4 py-2 text-sm rounded-md",
+            md: "h-10 px-4 py-2 text-sm rounded-md",
+            lg: "h-11 px-6 py-2.5 text-base rounded-md",
+            xl: "h-12 px-8 py-3 text-base rounded-lg",
+            "2xl": "h-14 px-10 py-3.5 text-lg rounded-lg",
+            "icon-sm": "h-8 w-8 p-0",
+            icon: "h-10 w-10 p-0",
+            "icon-lg": "h-12 w-12 p-0"
+          }
+        },
+        defaultVariants: {
+          variant: "default",
+          size: "default"
+        }
+      }
+    ), y = i(() => ({
+      "2xs": "h-3 w-3",
+      xs: "h-3.5 w-3.5",
+      sm: "h-4 w-4",
+      default: "h-4 w-4",
+      md: "h-4 w-4",
+      lg: "h-5 w-5",
+      xl: "h-5 w-5",
+      "2xl": "h-6 w-6",
+      "icon-sm": "h-4 w-4",
+      icon: "h-5 w-5",
+      "icon-lg": "h-6 w-6"
+    })[t.size] || "h-4 w-4"), w = i(() => ({
+      "2xs": "h-3 w-3",
+      xs: "h-3.5 w-3.5",
+      sm: "h-4 w-4",
+      default: "h-4 w-4",
+      md: "h-4 w-4",
+      lg: "h-5 w-5",
+      xl: "h-5 w-5",
+      "2xl": "h-6 w-6",
+      "icon-sm": "h-4 w-4",
+      icon: "h-5 w-5",
+      "icon-lg": "h-6 w-6"
+    })[t.size] || "h-4 w-4");
+    return (r, o) => f.value ? s("", !0) : (n(), a("button", z({
+      key: 0,
+      class: h(A)(h(v)({ variant: e.variant, size: e.size }), r.$attrs.class),
+      disabled: c.value,
+      type: e.type,
+      "aria-disabled": c.value,
+      "aria-busy": e.loading
+    }, r.$attrs), [
+      e.loading ? (n(), a("svg", {
+        key: 0,
+        class: g([w.value, "animate-spin mr-2 text-current"]),
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true"
+      }, [...o[0] || (o[0] = [
+        m("circle", {
+          class: "opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          "stroke-width": "4"
+        }, null, -1),
+        m("path", {
+          class: "opacity-75",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-linecap": "round",
+          "stroke-width": "4",
+          d: "M4 12a8 8 0 018-8"
+        }, null, -1)
+      ])], 2)) : s("", !0),
+      e.icon && !e.loading ? (n(), S(C, {
+        key: 1,
+        icon: e.icon,
+        class: g(y.value)
+      }, null, 8, ["icon", "class"])) : s("", !0),
+      e.loading && e.loadingText ? (n(), a("span", R, b(e.loadingText), 1)) : B(r.$slots, "default", { key: 3 }),
+      e.loading ? (n(), a("span", V, b(e.loadingLabel), 1)) : s("", !0)
+    ], 16, M));
+  }
+});
+export {
+  F as _
+};

package/dist/Button.vue_vue_type_script_setup_true_lang-DZxttvYH.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),m=require("class-variance-authority"),b=require("./utils/cn.cjs"),p=require("./components/Icon.cjs"),f=require("./lib/auth.cjs"),v=["disabled","type","aria-disabled","aria-busy"],y={key:2},w={key:4,class:"sr-only",role:"status","aria-live":"polite"},x=e.defineComponent({inheritAttrs:!1,__name:"Button",props:{variant:{type:String,default:"default",validator:r=>["primary","default","danger","outline","secondary","ghost","link","success","warning","info","subtle","dark","light","primaryOutline","dangerOutline","successOutline","gradient"].includes(r)},size:{type:String,default:"default",validator:r=>["2xs","xs","sm","default","md","lg","xl","2xl","icon-sm","icon","icon-lg"].includes(r)},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingText:{type:String,default:null},loadingLabel:{type:String,default:"Loading"},type:{type:String,default:"button"},icon:{type:String,default:null},permission:{type:[String,Array,Boolean,Function],default:null},role:{type:[String,Array,Boolean,Function],default:null},requireAll:{type:Boolean,default:!1},unauthorized:{type:String,default:"show",validator:r=>["show","hide","disable"].includes(r)}},setup(r){const o=r,i=e.inject(f.AUTH_RESOLVER_KEY,null),a=t=>t==null?null:typeof t=="boolean"?t:typeof t=="function"?!!t():t,s=e.computed(()=>{const t=a(o.permission),n=a(o.role);return t===null&&n===null?!0:(t===null||typeof t=="boolean")&&(n===null||typeof n=="boolean")?(t??!0)&&(n??!0):typeof i=="function"?!!i({permission:t,role:n,requireAll:o.requireAll}):!0}),u=e.computed(()=>o.unauthorized==="hide"&&!s.value),d=e.computed(()=>o.unauthorized==="disable"&&!s.value),l=e.computed(()=>o.disabled||o.loading||d.value),c=m.cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-[color,background-color,border-color,box-shadow,transform] duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary) focus-visible:ring-offset-2 active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50",{variants:{variant:{primary:"ui-primary-bg shadow-sm hover:bg-(--ui-primary-strong) hover:shadow-md",default:"ui-primary-bg shadow-sm hover:bg-(--ui-primary-strong) hover:shadow-md",danger:"ui-danger-bg shadow-sm hover:bg-(--ui-danger-strong) hover:shadow-md",outline:"border ui-border-strong ui-surface ui-text hover:bg-(--ui-surface-soft) hover:border-(--ui-primary) hover:text-(--ui-primary)",secondary:"border ui-border ui-surface-muted ui-text hover:bg-(--ui-surface-soft) hover:shadow-sm",ghost:"bg-transparent ui-text-muted hover:bg-[color:color-mix(in oklab, var(--ui-accent-soft), transparent 40%)] hover:text-(--ui-text)",link:"ui-primary underline-offset-4 hover:underline hover:text-(--ui-primary-strong)",success:"ui-success-bg shadow-sm hover:bg-(--ui-success-strong) hover:shadow-md",warning:"ui-warning-bg shadow-sm hover:bg-(--ui-warning-strong) hover:shadow-md",info:"border border-blue-600 bg-blue-600 text-white shadow-sm hover:bg-blue-700 hover:shadow-md dark:border-blue-500 dark:bg-blue-500 dark:text-white dark:hover:bg-blue-400",subtle:"border ui-border ui-surface ui-text-muted hover:text-(--ui-text) hover:bg-(--ui-surface-soft)",dark:"border border-zinc-900 bg-zinc-900 text-white shadow-sm hover:bg-black hover:shadow-md dark:border-zinc-100 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-white",light:"border border-zinc-200 bg-white text-zinc-900 shadow-sm hover:bg-zinc-50 hover:shadow-md dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800",primaryOutline:"border border-(--ui-primary) ui-primary bg-transparent hover:bg-(--ui-primary-soft) hover:border-(--ui-primary-strong) hover:text-(--ui-primary-strong)",dangerOutline:"border border-(--ui-danger) ui-danger bg-transparent hover:bg-(--ui-danger-soft) hover:border-(--ui-danger-strong) hover:text-(--ui-danger-strong)",successOutline:"border border-(--ui-success) ui-success bg-transparent hover:bg-(--ui-success-soft) hover:border-(--ui-success-strong) hover:text-(--ui-success-strong)",gradient:"bg-linear-to-r from-(--ui-primary) to-(--ui-accent) ui-text-inverse shadow-sm hover:from-(--ui-primary-strong) hover:to-(--ui-accent-strong) hover:shadow-md"},size:{"2xs":"h-4 px-1 py-3 text-md rounded",xs:"h-7 px-2.5 py-1 text-xs rounded-md",sm:"h-8 px-3 py-1.5 text-sm rounded-md",default:"h-9 px-4 py-2 text-sm rounded-md",md:"h-10 px-4 py-2 text-sm rounded-md",lg:"h-11 px-6 py-2.5 text-base rounded-md",xl:"h-12 px-8 py-3 text-base rounded-lg","2xl":"h-14 px-10 py-3.5 text-lg rounded-lg","icon-sm":"h-8 w-8 p-0",icon:"h-10 w-10 p-0","icon-lg":"h-12 w-12 p-0"}},defaultVariants:{variant:"default",size:"default"}}),h=e.computed(()=>({"2xs":"h-3 w-3",xs:"h-3.5 w-3.5",sm:"h-4 w-4",default:"h-4 w-4",md:"h-4 w-4",lg:"h-5 w-5",xl:"h-5 w-5","2xl":"h-6 w-6","icon-sm":"h-4 w-4",icon:"h-5 w-5","icon-lg":"h-6 w-6"})[o.size]||"h-4 w-4"),g=e.computed(()=>({"2xs":"h-3 w-3",xs:"h-3.5 w-3.5",sm:"h-4 w-4",default:"h-4 w-4",md:"h-4 w-4",lg:"h-5 w-5",xl:"h-5 w-5","2xl":"h-6 w-6","icon-sm":"h-4 w-4",icon:"h-5 w-5","icon-lg":"h-6 w-6"})[o.size]||"h-4 w-4");return(t,n)=>u.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",e.mergeProps({key:0,class:e.unref(b.cn)(e.unref(c)({variant:r.variant,size:r.size}),t.$attrs.class),disabled:l.value,type:r.type,"aria-disabled":l.value,"aria-busy":r.loading},t.$attrs),[r.loading?(e.openBlock(),e.createElementBlock("svg",{key:0,class:e.normalizeClass([g.value,"animate-spin mr-2 text-current"]),xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","aria-hidden":"true"},[...n[0]||(n[0]=[e.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"},null,-1),e.createElementVNode("path",{class:"opacity-75",fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-width":"4",d:"M4 12a8 8 0 018-8"},null,-1)])],2)):e.createCommentVNode("",!0),r.icon&&!r.loading?(e.openBlock(),e.createBlock(p.default,{key:1,icon:r.icon,class:e.normalizeClass(h.value)},null,8,["icon","class"])):e.createCommentVNode("",!0),r.loading&&r.loadingText?(e.openBlock(),e.createElementBlock("span",y,e.toDisplayString(r.loadingText),1)):e.renderSlot(t.$slots,"default",{key:3}),r.loading?(e.openBlock(),e.createElementBlock("span",w,e.toDisplayString(r.loadingLabel),1)):e.createCommentVNode("",!0)],16,v))}});exports._sfc_main=x;

package/dist/DataTable.css

@@ -0,0 +1 @@
+.table-loading-overlay[data-v-dc691687]{border-radius:.5rem;z-index:10}.kv-module-themed-table[data-v-dc691687] thead th{background:var(--module-soft, var(--ui-primary-soft));color:var(--module-text, var(--ui-primary));border-bottom-color:var(--module-border, var(--ui-border-strong))}.kv-module-themed-table[data-v-dc691687] tbody tr:nth-child(odd){background:var(--module-soft-alt, transparent)}.kv-module-themed-table[data-v-dc691687] tbody tr:nth-child(2n){background:color-mix(in oklab,var(--module-soft-alt, transparent) 55%,transparent 45%)}@keyframes pulse-dc691687{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse[data-v-dc691687]{animation:pulse-dc691687 2s cubic-bezier(.4,0,.6,1) infinite}

package/dist/DataTableToolBar.css

@@ -0,0 +1 @@
+.kv-module-themed-toolbar[data-v-b6fc1eb4]{border-color:var(--module-border, var(--ui-border-strong));background:color-mix(in oklab,var(--module-soft, var(--ui-primary-soft)) 50%,var(--ui-bg) 50%)}.kv-module-themed-toolbar[data-v-b6fc1eb4] button{border-color:var(--module-border, var(--ui-border-strong))}

package/dist/FormField.vue_vue_type_script_setup_true_lang-DimMUyA-.js

@@ -0,0 +1,205 @@
+import { defineComponent as D, useId as N, computed as s, ref as F, provide as A, createElementBlock as r, openBlock as i, normalizeClass as m, unref as a, createCommentVNode as c, createElementVNode as d, createVNode as B, createTextVNode as O, toDisplayString as h, createBlock as H, renderSlot as K, Transition as C, withCtx as T } from "vue";
+import { cva as g } from "class-variance-authority";
+import { cn as f } from "./utils/cn.js";
+import { FORM_FIELD_CONTEXT_KEY as R } from "./lib/form-field.js";
+import U from "./components/DatePicker.js";
+const X = ["for"], Y = {
+  key: 0,
+  class: "ui-danger ml-1",
+  "aria-hidden": "true"
+}, G = {
+  key: 1,
+  class: "sr-only"
+}, J = ["id"], Q = { class: "relative" }, W = ["disabled", "aria-controls", "aria-label"], Z = {
+  key: 0,
+  class: "h-4 w-4",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "aria-hidden": "true"
+}, _ = {
+  key: 1,
+  class: "h-4 w-4",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "aria-hidden": "true"
+}, ee = ["id"], te = ["id"], se = ["id"], oe = /* @__PURE__ */ D({
+  inheritAttrs: !1,
+  __name: "FormField",
+  props: {
+    label: String,
+    description: String,
+    error: String,
+    serverError: String,
+    success: String,
+    helpText: String,
+    required: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    autocomplete: String,
+    name: String,
+    type: { type: String, default: "text" },
+    modelValue: { type: [String, Date], default: "" },
+    size: { type: String, default: "md" },
+    id: String,
+    showPasswordLabel: { type: String, default: "Show password" },
+    hidePasswordLabel: { type: String, default: "Hide password" }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: M }) {
+    const t = e, q = M, E = `field-${N()}`, o = s(() => t.id || E), b = s(() => t.serverError || t.error || ""), n = s(() => !!b.value), v = F(!1), p = s(() => t.type === "password" && v.value ? "text" : t.type), x = s(() => `${o.value}-description`), k = s(() => `${o.value}-error`), w = s(() => `${o.value}-help`), z = s(() => `${o.value}-success`), V = () => {
+      t.disabled || (v.value = !v.value);
+    }, y = s(() => {
+      const u = [];
+      return t.description && u.push(x.value), n.value ? u.push(k.value) : t.helpText && u.push(w.value), t.success && !n.value && u.push(z.value), u.length ? u.join(" ") : void 0;
+    });
+    A(R, {
+      id: o,
+      describedBy: y,
+      invalid: n,
+      required: s(() => t.required),
+      disabled: s(() => t.disabled),
+      autocomplete: s(() => t.autocomplete),
+      name: s(() => t.name),
+      inputType: p,
+      originalType: s(() => t.type),
+      hasPasswordToggle: s(() => t.type === "password")
+    });
+    const I = g("ui-text", { variants: { size: { sm: "space-y-1", md: "space-y-2", lg: "space-y-3" } }, defaultVariants: { size: "md" } }), L = g("block ui-text", { variants: { size: { sm: "text-xs font-medium", md: "text-sm font-medium", lg: "text-base font-medium" } }, defaultVariants: { size: "md" } }), P = g("ui-text-muted", { variants: { size: { sm: "text-xs", md: "text-sm", lg: "text-base" } }, defaultVariants: { size: "md" } }), S = g("flex items-start gap-2", { variants: { size: { sm: "text-xs", md: "text-sm", lg: "text-sm" }, intent: { error: "ui-danger", success: "ui-success" } }, defaultVariants: { size: "md", intent: "error" } }), $ = g("ui-text-muted", { variants: { size: { sm: "text-xs", md: "text-sm", lg: "text-sm" } }, defaultVariants: { size: "md" } });
+    return (u, l) => (i(), r("div", {
+      class: m(a(f)(a(I)({ size: e.size }), u.$attrs.class))
+    }, [
+      e.label ? (i(), r("label", {
+        key: 0,
+        for: o.value,
+        class: m(a(f)(a(L)({ size: e.size })))
+      }, [
+        O(h(e.label) + " ", 1),
+        e.required ? (i(), r("span", Y, "*")) : c("", !0),
+        e.required ? (i(), r("span", G, " (required)")) : c("", !0)
+      ], 10, X)) : c("", !0),
+      e.description ? (i(), r("p", {
+        key: 1,
+        id: x.value,
+        class: m(a(f)(a(P)({ size: e.size })))
+      }, h(e.description), 11, J)) : c("", !0),
+      d("div", Q, [
+        e.type === "date" ? (i(), H(U, {
+          key: 0,
+          id: o.value,
+          "model-value": e.modelValue,
+          disabled: e.disabled,
+          required: e.required,
+          "aria-describedby": y.value,
+          "aria-invalid": n.value,
+          class: m(n.value ? "border-(--ui-danger)" : ""),
+          "onUpdate:modelValue": l[0] || (l[0] = (j) => q("update:modelValue", j))
+        }, null, 8, ["id", "model-value", "disabled", "required", "aria-describedby", "aria-invalid", "class"])) : K(u.$slots, "default", {
+          key: 1,
+          fieldId: o.value,
+          hasError: n.value,
+          ariaDescribedBy: y.value,
+          inputType: p.value,
+          showPassword: v.value,
+          togglePasswordVisibility: V
+        }),
+        e.type === "password" ? (i(), r("button", {
+          key: 2,
+          type: "button",
+          class: "absolute inset-y-0 right-0 flex items-center pr-3 ui-text-muted transition-colors hover:text-(--ui-text) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-ring) focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          disabled: e.disabled,
+          "aria-controls": o.value,
+          "aria-label": v.value ? e.hidePasswordLabel : e.showPasswordLabel,
+          onClick: V
+        }, [
+          v.value ? (i(), r("svg", Z, [...l[1] || (l[1] = [
+            d("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "2",
+              d: "M3 3l18 18M10.6 10.7a2 2 0 002.7 2.7M9.9 4.2A10.7 10.7 0 0112 4c5 0 8.7 4.4 9.6 6.5.2.3.2.7 0 1a15 15 0 01-2.2 3.3M6.2 6.2A15.8 15.8 0 002.4 10.5c-.2.3-.2.7 0 1C3.3 13.6 7 18 12 18c1 0 2-.2 2.9-.5"
+            }, null, -1)
+          ])])) : (i(), r("svg", _, [...l[2] || (l[2] = [
+            d("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "2",
+              d: "M2.4 10.5C3.3 8.4 7 4 12 4s8.7 4.4 9.6 6.5c.2.3.2.7 0 1C20.7 13.6 17 18 12 18s-8.7-4.4-9.6-6.5a1.1 1.1 0 010-1z"
+            }, null, -1),
+            d("circle", {
+              cx: "12",
+              cy: "11",
+              r: "3",
+              "stroke-width": "2"
+            }, null, -1)
+          ])]))
+        ], 8, W)) : c("", !0)
+      ]),
+      B(C, { name: "ui-field-message" }, {
+        default: T(() => [
+          n.value ? (i(), r("div", {
+            key: 0,
+            id: k.value,
+            class: m(a(f)(a(S)({ size: e.size, intent: "error" }))),
+            role: "alert",
+            "aria-live": "polite",
+            "aria-atomic": "true"
+          }, [
+            l[3] || (l[3] = d("svg", {
+              class: "mt-0.5 h-4 w-4 shrink-0",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "aria-hidden": "true"
+            }, [
+              d("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "2",
+                d: "M12 9v4m0 4h.01M10.3 4.1L2 18.2a1.2 1.2 0 001 1.8h18a1.2 1.2 0 001-1.8L13.7 4.1a2 2 0 00-3.4 0z"
+              })
+            ], -1)),
+            d("span", null, h(b.value), 1)
+          ], 10, ee)) : c("", !0)
+        ]),
+        _: 1
+      }),
+      e.helpText && !n.value ? (i(), r("p", {
+        key: 2,
+        id: w.value,
+        class: m(a(f)(a($)({ size: e.size })))
+      }, h(e.helpText), 11, te)) : c("", !0),
+      B(C, { name: "ui-field-message" }, {
+        default: T(() => [
+          e.success && !n.value ? (i(), r("div", {
+            key: 0,
+            id: z.value,
+            class: m(a(f)(a(S)({ size: e.size, intent: "success" }))),
+            role: "status",
+            "aria-live": "polite"
+          }, [
+            l[4] || (l[4] = d("svg", {
+              class: "mt-0.5 h-4 w-4 shrink-0",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "aria-hidden": "true"
+            }, [
+              d("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "2",
+                d: "M5 12l4 4L19 6"
+              })
+            ], -1)),
+            d("span", null, h(e.success), 1)
+          ], 10, se)) : c("", !0)
+        ]),
+        _: 1
+      })
+    ], 2));
+  }
+});
+export {
+  oe as _
+};

package/dist/FormField.vue_vue_type_script_setup_true_lang-mEO-VA6R.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),d=require("class-variance-authority"),n=require("./utils/cn.cjs"),C=require("./lib/form-field.cjs"),N=require("./components/DatePicker.cjs"),S=["for"],q={key:0,class:"ui-danger ml-1","aria-hidden":"true"},T={key:1,class:"sr-only"},D=["id"],M={class:"relative"},I=["disabled","aria-controls","aria-label"],P={key:0,class:"h-4 w-4",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","aria-hidden":"true"},L={key:1,class:"h-4 w-4",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","aria-hidden":"true"},$=["id"],j=["id"],F=["id"],A=e.defineComponent({inheritAttrs:!1,__name:"FormField",props:{label:String,description:String,error:String,serverError:String,success:String,helpText:String,required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},autocomplete:String,name:String,type:{type:String,default:"text"},modelValue:{type:[String,Date],default:""},size:{type:String,default:"md"},id:String,showPasswordLabel:{type:String,default:"Show password"},hidePasswordLabel:{type:String,default:"Hide password"}},emits:["update:modelValue"],setup(t,{emit:g}){const s=t,b=g,x=`field-${e.useId()}`,i=e.computed(()=>s.id||x),u=e.computed(()=>s.serverError||s.error||""),l=e.computed(()=>!!u.value),o=e.ref(!1),m=e.computed(()=>s.type==="password"&&o.value?"text":s.type),v=e.computed(()=>`${i.value}-description`),f=e.computed(()=>`${i.value}-error`),p=e.computed(()=>`${i.value}-help`),k=e.computed(()=>`${i.value}-success`),h=()=>{s.disabled||(o.value=!o.value)},c=e.computed(()=>{const r=[];return s.description&&r.push(v.value),l.value?r.push(f.value):s.helpText&&r.push(p.value),s.success&&!l.value&&r.push(k.value),r.length?r.join(" "):void 0});e.provide(C.FORM_FIELD_CONTEXT_KEY,{id:i,describedBy:c,invalid:l,required:e.computed(()=>s.required),disabled:e.computed(()=>s.disabled),autocomplete:e.computed(()=>s.autocomplete),name:e.computed(()=>s.name),inputType:m,originalType:e.computed(()=>s.type),hasPasswordToggle:e.computed(()=>s.type==="password")});const V=d.cva("ui-text",{variants:{size:{sm:"space-y-1",md:"space-y-2",lg:"space-y-3"}},defaultVariants:{size:"md"}}),w=d.cva("block ui-text",{variants:{size:{sm:"text-xs font-medium",md:"text-sm font-medium",lg:"text-base font-medium"}},defaultVariants:{size:"md"}}),B=d.cva("ui-text-muted",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-base"}},defaultVariants:{size:"md"}}),y=d.cva("flex items-start gap-2",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-sm"},intent:{error:"ui-danger",success:"ui-success"}},defaultVariants:{size:"md",intent:"error"}}),z=d.cva("ui-text-muted",{variants:{size:{sm:"text-xs",md:"text-sm",lg:"text-sm"}},defaultVariants:{size:"md"}});return(r,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(n.cn)(e.unref(V)({size:t.size}),r.$attrs.class))},[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:i.value,class:e.normalizeClass(e.unref(n.cn)(e.unref(w)({size:t.size})))},[e.createTextVNode(e.toDisplayString(t.label)+" ",1),t.required?(e.openBlock(),e.createElementBlock("span",q,"*")):e.createCommentVNode("",!0),t.required?(e.openBlock(),e.createElementBlock("span",T," (required)")):e.createCommentVNode("",!0)],10,S)):e.createCommentVNode("",!0),t.description?(e.openBlock(),e.createElementBlock("p",{key:1,id:v.value,class:e.normalizeClass(e.unref(n.cn)(e.unref(B)({size:t.size})))},e.toDisplayString(t.description),11,D)):e.createCommentVNode("",!0),e.createElementVNode("div",M,[t.type==="date"?(e.openBlock(),e.createBlock(N.default,{key:0,id:i.value,"model-value":t.modelValue,disabled:t.disabled,required:t.required,"aria-describedby":c.value,"aria-invalid":l.value,class:e.normalizeClass(l.value?"border-(--ui-danger)":""),"onUpdate:modelValue":a[0]||(a[0]=E=>b("update:modelValue",E))},null,8,["id","model-value","disabled","required","aria-describedby","aria-invalid","class"])):e.renderSlot(r.$slots,"default",{key:1,fieldId:i.value,hasError:l.value,ariaDescribedBy:c.value,inputType:m.value,showPassword:o.value,togglePasswordVisibility:h}),t.type==="password"?(e.openBlock(),e.createElementBlock("button",{key:2,type:"button",class:"absolute inset-y-0 right-0 flex items-center pr-3 ui-text-muted transition-colors hover:text-(--ui-text) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-ring) focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",disabled:t.disabled,"aria-controls":i.value,"aria-label":o.value?t.hidePasswordLabel:t.showPasswordLabel,onClick:h},[o.value?(e.openBlock(),e.createElementBlock("svg",P,[...a[1]||(a[1]=[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M3 3l18 18M10.6 10.7a2 2 0 002.7 2.7M9.9 4.2A10.7 10.7 0 0112 4c5 0 8.7 4.4 9.6 6.5.2.3.2.7 0 1a15 15 0 01-2.2 3.3M6.2 6.2A15.8 15.8 0 002.4 10.5c-.2.3-.2.7 0 1C3.3 13.6 7 18 12 18c1 0 2-.2 2.9-.5"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",L,[...a[2]||(a[2]=[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M2.4 10.5C3.3 8.4 7 4 12 4s8.7 4.4 9.6 6.5c.2.3.2.7 0 1C20.7 13.6 17 18 12 18s-8.7-4.4-9.6-6.5a1.1 1.1 0 010-1z"},null,-1),e.createElementVNode("circle",{cx:"12",cy:"11",r:"3","stroke-width":"2"},null,-1)])]))],8,I)):e.createCommentVNode("",!0)]),e.createVNode(e.Transition,{name:"ui-field-message"},{default:e.withCtx(()=>[l.value?(e.openBlock(),e.createElementBlock("div",{key:0,id:f.value,class:e.normalizeClass(e.unref(n.cn)(e.unref(y)({size:t.size,intent:"error"}))),role:"alert","aria-live":"polite","aria-atomic":"true"},[a[3]||(a[3]=e.createElementVNode("svg",{class:"mt-0.5 h-4 w-4 shrink-0",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M12 9v4m0 4h.01M10.3 4.1L2 18.2a1.2 1.2 0 001 1.8h18a1.2 1.2 0 001-1.8L13.7 4.1a2 2 0 00-3.4 0z"})],-1)),e.createElementVNode("span",null,e.toDisplayString(u.value),1)],10,$)):e.createCommentVNode("",!0)]),_:1}),t.helpText&&!l.value?(e.openBlock(),e.createElementBlock("p",{key:2,id:p.value,class:e.normalizeClass(e.unref(n.cn)(e.unref(z)({size:t.size})))},e.toDisplayString(t.helpText),11,j)):e.createCommentVNode("",!0),e.createVNode(e.Transition,{name:"ui-field-message"},{default:e.withCtx(()=>[t.success&&!l.value?(e.openBlock(),e.createElementBlock("div",{key:0,id:k.value,class:e.normalizeClass(e.unref(n.cn)(e.unref(y)({size:t.size,intent:"success"}))),role:"status","aria-live":"polite"},[a[4]||(a[4]=e.createElementVNode("svg",{class:"mt-0.5 h-4 w-4 shrink-0",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 12l4 4L19 6"})],-1)),e.createElementVNode("span",null,e.toDisplayString(t.success),1)],10,F)):e.createCommentVNode("",!0)]),_:1})],2))}});exports._sfc_main=A;

package/dist/Header.css

@@ -0,0 +1 @@
+.kv-module-header[data-v-3e4b26b8]{background:color-mix(in oklab,var(--module-soft, var(--ui-primary-soft)) 62%,var(--ui-surface) 38%)}

package/dist/Input.vue_vue_type_script_setup_true_lang-C1OQn24h.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),I=require("./lib/form-field.cjs"),R={class:"relative"},q={key:0,class:"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2"},z=["id","name","type","value","placeholder","disabled","readonly","required","autocomplete","aria-describedby","aria-invalid"],L={key:1,class:"absolute right-3 top-1/2 -translate-y-1/2"},F=["aria-label"],j=["id"],M=["id"],O=e.defineComponent({__name:"Input",props:{modelValue:{type:[String,Number],default:""},type:{type:String,default:"text"},placeholder:{type:String,default:""},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},size:{type:String,default:"md"},variant:{type:String,default:"default"},iconLeft:{type:[String,Object],default:null},iconRight:{type:[String,Object],default:null},clearable:{type:Boolean,default:!1},clearLabel:{type:String,default:"Clear input"},autocomplete:String,name:String,error:String,serverError:String,helpText:String,ariaDescribedBy:String,id:String},emits:["update:modelValue","blur","focus","clear","keydown"],setup(o,{expose:g,emit:y}){const t=o,i=y,r=e.inject(I.FORM_FIELD_CONTEXT_KEY,null),u=e.ref(null),b=`input-${e.useId()}`,d=e.computed(()=>t.id||e.unref(r?.id)||b),B=e.computed(()=>{const a=e.unref(r?.inputType),l=e.unref(r?.originalType);return l==="password"||t.type==="text"&&l&&l!=="text"?a:t.type}),c=e.computed(()=>t.disabled||!!e.unref(r?.disabled)),h=e.computed(()=>t.required||!!e.unref(r?.required)),k=e.computed(()=>t.autocomplete??e.unref(r?.autocomplete)??void 0),x=e.computed(()=>t.name??e.unref(r?.name)??void 0),s=e.computed(()=>t.serverError||t.error||""),f=e.computed(()=>!!s.value||t.variant==="error"||!!e.unref(r?.invalid)),m=e.computed(()=>`${d.value}-error`),p=e.computed(()=>`${d.value}-help`),C=e.computed(()=>!!s.value&&!r),E=e.computed(()=>{const a=new Set,l=n=>String(n||"").split(/\s+/).filter(Boolean).forEach(D=>a.add(D));return l(t.ariaDescribedBy),l(e.unref(r?.describedBy)),!r&&s.value?a.add(m.value):!r&&t.helpText&&a.add(p.value),a.size?[...a].join(" "):void 0}),S=a=>i("update:modelValue",a.target.value),w=()=>{i("update:modelValue",""),i("clear"),u.value?.focus()},V=e.computed(()=>({sm:"px-3 py-1.5 text-sm",md:"px-3 py-2 text-sm",lg:"px-4 py-3 text-base"})[t.size]),T=e.computed(()=>f.value?"border-(--ui-danger) focus:border-(--ui-danger) focus:ring-(--ui-danger)":{default:"ui-border-strong focus:border-(--ui-primary) focus:ring-(--ui-ring)",error:"border-(--ui-danger) focus:border-(--ui-danger) focus:ring-(--ui-danger)",success:"border-(--ui-success) focus:border-(--ui-success) focus:ring-(--ui-success)"}[t.variant]),v=e.computed(()=>["ui-text-muted",{sm:"h-4 w-4",md:"h-4 w-4",lg:"h-5 w-5"}[t.size]]),N=e.computed(()=>["block rounded-lg border ui-surface transition-colors duration-200","focus:outline-none focus:ring-2 focus:ring-offset-1","disabled:bg-(--ui-surface-muted) disabled:text-(--ui-text-muted) disabled:cursor-not-allowed disabled:opacity-80","placeholder:text-(--ui-text-muted)",t.type==="color"?"h-12 w-20 cursor-pointer":"w-full",V.value,T.value,{"pl-10":t.iconLeft,"pr-10":t.iconRight||t.clearable||!!e.unref(r?.hasPasswordToggle)}]);return g({focus:()=>u.value?.focus(),blur:()=>u.value?.blur(),select:()=>u.value?.select()}),(a,l)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",R,[o.iconLeft?(e.openBlock(),e.createElementBlock("div",q,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.iconLeft),{class:e.normalizeClass(v.value),"aria-hidden":"true"},null,8,["class"]))])):e.createCommentVNode("",!0),e.createElementVNode("input",{id:d.value,ref_key:"inputRef",ref:u,name:x.value,type:B.value,value:o.modelValue,placeholder:o.placeholder,disabled:c.value,readonly:o.readonly,required:h.value,autocomplete:k.value,class:e.normalizeClass(N.value),"aria-describedby":E.value,"aria-invalid":f.value?"true":void 0,onInput:S,onBlur:l[0]||(l[0]=n=>i("blur",n)),onFocus:l[1]||(l[1]=n=>i("focus",n)),onKeydown:l[2]||(l[2]=n=>i("keydown",n))},null,42,z),o.iconRight||o.clearable?(e.openBlock(),e.createElementBlock("div",L,[o.clearable&&o.modelValue&&!c.value?(e.openBlock(),e.createElementBlock("button",{key:0,class:"rounded-sm ui-text-muted transition-colors hover:text-(--ui-text) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-ring)",type:"button","aria-label":o.clearLabel,onClick:w},[...l[3]||(l[3]=[e.createElementVNode("svg",{class:"h-5 w-5",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","aria-hidden":"true"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M6 6l12 12M18 6L6 18"})],-1)])],8,F)):o.iconRight?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.iconRight),{key:1,class:e.normalizeClass(v.value),"aria-hidden":"true"},null,8,["class"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]),C.value?(e.openBlock(),e.createElementBlock("p",{key:0,id:m.value,class:"mt-1 flex items-center gap-1 text-sm ui-danger",role:"alert","aria-live":"polite","aria-atomic":"true"},e.toDisplayString(s.value),9,j)):o.helpText&&!e.unref(r)?(e.openBlock(),e.createElementBlock("p",{key:1,id:p.value,class:"mt-1 text-sm ui-text-muted"},e.toDisplayString(o.helpText),9,M)):e.createCommentVNode("",!0)]))}});exports._sfc_main=O;

package/dist/Input.vue_vue_type_script_setup_true_lang-CpBoY97r.js

@@ -0,0 +1,137 @@
+import { defineComponent as $, inject as A, ref as K, useId as H, computed as t, unref as i, createElementBlock as d, openBlock as n, createElementVNode as v, createCommentVNode as p, createBlock as k, resolveDynamicComponent as S, normalizeClass as g, toDisplayString as w } from "vue";
+import { FORM_FIELD_CONTEXT_KEY as P } from "./lib/form-field.js";
+const X = { class: "relative" }, Y = {
+  key: 0,
+  class: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2"
+}, G = ["id", "name", "type", "value", "placeholder", "disabled", "readonly", "required", "autocomplete", "aria-describedby", "aria-invalid"], J = {
+  key: 1,
+  class: "absolute right-3 top-1/2 -translate-y-1/2"
+}, Q = ["aria-label"], U = ["id"], W = ["id"], ee = /* @__PURE__ */ $({
+  __name: "Input",
+  props: {
+    modelValue: { type: [String, Number], default: "" },
+    type: { type: String, default: "text" },
+    placeholder: { type: String, default: "" },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    size: { type: String, default: "md" },
+    variant: { type: String, default: "default" },
+    iconLeft: { type: [String, Object], default: null },
+    iconRight: { type: [String, Object], default: null },
+    clearable: { type: Boolean, default: !1 },
+    clearLabel: { type: String, default: "Clear input" },
+    autocomplete: String,
+    name: String,
+    error: String,
+    serverError: String,
+    helpText: String,
+    ariaDescribedBy: String,
+    id: String
+  },
+  emits: ["update:modelValue", "blur", "focus", "clear", "keydown"],
+  setup(l, { expose: C, emit: T }) {
+    const e = l, s = T, r = A(P, null), c = K(null), E = `input-${H()}`, m = t(() => e.id || i(r?.id) || E), I = t(() => {
+      const o = i(r?.inputType), a = i(r?.originalType);
+      return a === "password" || e.type === "text" && a && a !== "text" ? o : e.type;
+    }), y = t(() => e.disabled || !!i(r?.disabled)), R = t(() => e.required || !!i(r?.required)), L = t(() => e.autocomplete ?? i(r?.autocomplete) ?? void 0), V = t(() => e.name ?? i(r?.name) ?? void 0), f = t(() => e.serverError || e.error || ""), b = t(() => !!f.value || e.variant === "error" || !!i(r?.invalid)), h = t(() => `${m.value}-error`), x = t(() => `${m.value}-help`), D = t(() => !!f.value && !r), q = t(() => {
+      const o = /* @__PURE__ */ new Set(), a = (u) => String(u || "").split(/\s+/).filter(Boolean).forEach((O) => o.add(O));
+      return a(e.ariaDescribedBy), a(i(r?.describedBy)), !r && f.value ? o.add(h.value) : !r && e.helpText && o.add(x.value), o.size ? [...o].join(" ") : void 0;
+    }), z = (o) => s("update:modelValue", o.target.value), j = () => {
+      s("update:modelValue", ""), s("clear"), c.value?.focus();
+    }, F = t(() => ({ sm: "px-3 py-1.5 text-sm", md: "px-3 py-2 text-sm", lg: "px-4 py-3 text-base" })[e.size]), N = t(() => b.value ? "border-(--ui-danger) focus:border-(--ui-danger) focus:ring-(--ui-danger)" : {
+      default: "ui-border-strong focus:border-(--ui-primary) focus:ring-(--ui-ring)",
+      error: "border-(--ui-danger) focus:border-(--ui-danger) focus:ring-(--ui-danger)",
+      success: "border-(--ui-success) focus:border-(--ui-success) focus:ring-(--ui-success)"
+    }[e.variant]), B = t(() => ["ui-text-muted", { sm: "h-4 w-4", md: "h-4 w-4", lg: "h-5 w-5" }[e.size]]), M = t(() => [
+      "block rounded-lg border ui-surface transition-colors duration-200",
+      "focus:outline-none focus:ring-2 focus:ring-offset-1",
+      "disabled:bg-(--ui-surface-muted) disabled:text-(--ui-text-muted) disabled:cursor-not-allowed disabled:opacity-80",
+      "placeholder:text-(--ui-text-muted)",
+      e.type === "color" ? "h-12 w-20 cursor-pointer" : "w-full",
+      F.value,
+      N.value,
+      {
+        "pl-10": e.iconLeft,
+        "pr-10": e.iconRight || e.clearable || !!i(r?.hasPasswordToggle)
+      }
+    ]);
+    return C({
+      focus: () => c.value?.focus(),
+      blur: () => c.value?.blur(),
+      select: () => c.value?.select()
+    }), (o, a) => (n(), d("div", null, [
+      v("div", X, [
+        l.iconLeft ? (n(), d("div", Y, [
+          (n(), k(S(l.iconLeft), {
+            class: g(B.value),
+            "aria-hidden": "true"
+          }, null, 8, ["class"]))
+        ])) : p("", !0),
+        v("input", {
+          id: m.value,
+          ref_key: "inputRef",
+          ref: c,
+          name: V.value,
+          type: I.value,
+          value: l.modelValue,
+          placeholder: l.placeholder,
+          disabled: y.value,
+          readonly: l.readonly,
+          required: R.value,
+          autocomplete: L.value,
+          class: g(M.value),
+          "aria-describedby": q.value,
+          "aria-invalid": b.value ? "true" : void 0,
+          onInput: z,
+          onBlur: a[0] || (a[0] = (u) => s("blur", u)),
+          onFocus: a[1] || (a[1] = (u) => s("focus", u)),
+          onKeydown: a[2] || (a[2] = (u) => s("keydown", u))
+        }, null, 42, G),
+        l.iconRight || l.clearable ? (n(), d("div", J, [
+          l.clearable && l.modelValue && !y.value ? (n(), d("button", {
+            key: 0,
+            class: "rounded-sm ui-text-muted transition-colors hover:text-(--ui-text) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-ring)",
+            type: "button",
+            "aria-label": l.clearLabel,
+            onClick: j
+          }, [...a[3] || (a[3] = [
+            v("svg", {
+              class: "h-5 w-5",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "aria-hidden": "true"
+            }, [
+              v("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "2",
+                d: "M6 6l12 12M18 6L6 18"
+              })
+            ], -1)
+          ])], 8, Q)) : l.iconRight ? (n(), k(S(l.iconRight), {
+            key: 1,
+            class: g(B.value),
+            "aria-hidden": "true"
+          }, null, 8, ["class"])) : p("", !0)
+        ])) : p("", !0)
+      ]),
+      D.value ? (n(), d("p", {
+        key: 0,
+        id: h.value,
+        class: "mt-1 flex items-center gap-1 text-sm ui-danger",
+        role: "alert",
+        "aria-live": "polite",
+        "aria-atomic": "true"
+      }, w(f.value), 9, U)) : l.helpText && !i(r) ? (n(), d("p", {
+        key: 1,
+        id: x.value,
+        class: "mt-1 text-sm ui-text-muted"
+      }, w(l.helpText), 9, W)) : p("", !0)
+    ]));
+  }
+});
+export {
+  ee as _
+};