@gspa/ui 0.1.1 → 0.1.4

package/dist/components/Icon.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("@fortawesome/vue-fontawesome"),c={__name:"Icon",props:{icon:{type:String,default:null},name:{type:String,default:null},prefix:{type:String,default:"fa"},size:{type:String,default:"md"},color:String,ariaLabel:String},setup(l){const t=l,a=e.computed(()=>t.icon||t.name),n=e.computed(()=>({xs:"xs",sm:"sm",md:"lg",lg:"xl",xl:"2x",xxl:"3x"})[t.size]||"lg"),o=e.computed(()=>t.color?t.color.startsWith("text-")?t.color:`text-${t.color}`:"text-current"),r=e.computed(()=>[o.value,"inline-block"]);return(i,u)=>a.value?(e.openBlock(),e.createBlock(e.unref(s.FontAwesomeIcon),{key:0,icon:[l.prefix,a.value],size:n.value,class:e.normalizeClass(r.value),"aria-hidden":!l.ariaLabel,"aria-label":l.ariaLabel,role:l.ariaLabel?"img":void 0},null,8,["icon","size","class","aria-hidden","aria-label","role"])):e.createCommentVNode("",!0)}};exports.default=c;

package/dist/components/Icon.js

@@ -0,0 +1,51 @@
+import { computed as l, createBlock as s, createCommentVNode as c, openBlock as u, unref as m, normalizeClass as d } from "vue";
+import { FontAwesomeIcon as f } from "@fortawesome/vue-fontawesome";
+const z = {
+  __name: "Icon",
+  props: {
+    icon: {
+      type: String,
+      default: null
+    },
+    name: {
+      type: String,
+      default: null
+    },
+    prefix: {
+      type: String,
+      default: "fa"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    color: String,
+    ariaLabel: String
+  },
+  setup(a) {
+    const e = a, t = l(() => e.icon || e.name), r = l(() => ({
+      xs: "xs",
+      sm: "sm",
+      md: "lg",
+      // FontAwesome sizes: xs, sm, lg, xl, 2x, 3x, etc.
+      lg: "xl",
+      xl: "2x",
+      xxl: "3x"
+    })[e.size] || "lg"), n = l(() => e.color ? e.color.startsWith("text-") ? e.color : `text-${e.color}` : "text-current"), o = l(() => [
+      n.value,
+      "inline-block"
+    ]);
+    return (i, x) => t.value ? (u(), s(m(f), {
+      key: 0,
+      icon: [a.prefix, t.value],
+      size: r.value,
+      class: d(o.value),
+      "aria-hidden": !a.ariaLabel,
+      "aria-label": a.ariaLabel,
+      role: a.ariaLabel ? "img" : void 0
+    }, null, 8, ["icon", "size", "class", "aria-hidden", "aria-label", "role"])) : c("", !0);
+  }
+};
+export {
+  z as default
+};

package/dist/components/Image.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),y=require("class-variance-authority"),r=require("../utils/cn.cjs"),b=require("./Icon.cjs"),j=require("./Spinner.cjs"),h=["src","alt","loading"],k={__name:"Image",props:{src:{type:String,required:!0},alt:{type:String,default:""},aspectRatio:{type:String,default:"auto",validator:t=>["auto","square","16/9","4/3","3/2"].includes(t)},objectFit:{type:String,default:"cover",validator:t=>["cover","contain","fill","none","scale-down"].includes(t)},loading:{type:String,default:"lazy",validator:t=>["lazy","eager"].includes(t)},showSpinner:{type:Boolean,default:!0},class:String},emits:["load","error"],setup(t,{emit:i}){const a=t,n=i,o=e.ref(!0),l=e.ref(!1),u=y.cva("relative overflow-hidden ui-surface-muted",{variants:{aspectRatio:{auto:"",square:"aspect-square","16/9":"aspect-video","4/3":"aspect-[4/3]","3/2":"aspect-[3/2]"}}}),d=e.computed(()=>r.cn(u({aspectRatio:a.aspectRatio}),a.class)),m=e.computed(()=>r.cn("h-full w-full transition-opacity duration-300",{"object-cover":a.objectFit==="cover","object-contain":a.objectFit==="contain","object-fill":a.objectFit==="fill","object-none":a.objectFit==="none","object-scale-down":a.objectFit==="scale-down"},o.value&&"opacity-0",l.value&&"hidden")),f=e.computed(()=>"absolute inset-0 flex items-center justify-center ui-surface-muted"),p=e.computed(()=>"absolute inset-0 flex flex-col items-center justify-center gap-2 ui-surface-muted"),v=s=>{o.value=!1,l.value=!1,n("load",s)},g=s=>{o.value=!1,l.value=!0,n("error",s)};return(s,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(d.value)},[e.createElementVNode("img",{src:t.src,alt:t.alt,class:e.normalizeClass(m.value),loading:t.loading,onLoad:v,onError:g},null,42,h),o.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(f.value)},[t.showSpinner?(e.openBlock(),e.createBlock(j.default,{key:0,size:"sm"})):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0),l.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(p.value)},[e.createVNode(b.default,{name:"ImageOff",class:"h-8 w-8 ui-text"}),c[0]||(c[0]=e.createElementVNode("span",{class:"text-sm ui-text"},"Failed to load image",-1))],2)):e.createCommentVNode("",!0)],2))}};exports.default=k;

package/dist/components/Image.js

@@ -0,0 +1,112 @@
+import { ref as m, computed as l, createElementBlock as n, openBlock as r, normalizeClass as c, createElementVNode as f, createCommentVNode as i, createBlock as S, createVNode as F } from "vue";
+import { cva as k } from "class-variance-authority";
+import { cn as v } from "../utils/cn.js";
+import C from "./Icon.js";
+import E from "./Spinner.js";
+const q = ["src", "alt", "loading"], N = {
+  __name: "Image",
+  props: {
+    src: {
+      type: String,
+      required: !0
+    },
+    alt: {
+      type: String,
+      default: ""
+    },
+    aspectRatio: {
+      type: String,
+      default: "auto",
+      validator: (e) => ["auto", "square", "16/9", "4/3", "3/2"].includes(e)
+    },
+    objectFit: {
+      type: String,
+      default: "cover",
+      validator: (e) => ["cover", "contain", "fill", "none", "scale-down"].includes(e)
+    },
+    loading: {
+      type: String,
+      default: "lazy",
+      validator: (e) => ["lazy", "eager"].includes(e)
+    },
+    showSpinner: {
+      type: Boolean,
+      default: !0
+    },
+    class: String
+  },
+  emits: ["load", "error"],
+  setup(e, { emit: p }) {
+    const t = e, u = p, a = m(!0), o = m(!1), g = k(
+      "relative overflow-hidden ui-surface-muted",
+      {
+        variants: {
+          aspectRatio: {
+            auto: "",
+            square: "aspect-square",
+            "16/9": "aspect-video",
+            "4/3": "aspect-[4/3]",
+            "3/2": "aspect-[3/2]"
+          }
+        }
+      }
+    ), y = l(
+      () => v(g({ aspectRatio: t.aspectRatio }), t.class)
+    ), b = l(
+      () => v(
+        "h-full w-full transition-opacity duration-300",
+        {
+          "object-cover": t.objectFit === "cover",
+          "object-contain": t.objectFit === "contain",
+          "object-fill": t.objectFit === "fill",
+          "object-none": t.objectFit === "none",
+          "object-scale-down": t.objectFit === "scale-down"
+        },
+        a.value && "opacity-0",
+        o.value && "hidden"
+      )
+    ), j = l(
+      () => "absolute inset-0 flex items-center justify-center ui-surface-muted"
+    ), h = l(
+      () => "absolute inset-0 flex flex-col items-center justify-center gap-2 ui-surface-muted"
+    ), w = (s) => {
+      a.value = !1, o.value = !1, u("load", s);
+    }, x = (s) => {
+      a.value = !1, o.value = !0, u("error", s);
+    };
+    return (s, d) => (r(), n("div", {
+      class: c(y.value)
+    }, [
+      f("img", {
+        src: e.src,
+        alt: e.alt,
+        class: c(b.value),
+        loading: e.loading,
+        onLoad: w,
+        onError: x
+      }, null, 42, q),
+      a.value ? (r(), n("div", {
+        key: 0,
+        class: c(j.value)
+      }, [
+        e.showSpinner ? (r(), S(E, {
+          key: 0,
+          size: "sm"
+        })) : i("", !0)
+      ], 2)) : i("", !0),
+      o.value ? (r(), n("div", {
+        key: 1,
+        class: c(h.value)
+      }, [
+        F(C, {
+          name: "ImageOff",
+          class: "h-8 w-8 ui-text"
+        }),
+        d[0] || (d[0] = f("span", { class: "text-sm ui-text" }, "Failed to load image", -1))
+      ], 2)) : i("", !0)
+    ], 2));
+  }
+};
+export {
+  N as default
+};

package/dist/components/Input.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),k=require("./Icon.cjs"),x={class:"relative"},B={key:0,class:"absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none"},C=["id","type","value","placeholder","disabled","readonly","required","autocomplete","aria-describedby","aria-invalid"],S={key:1,class:"absolute right-3 top-1/2 transform -translate-y-1/2"},w=["aria-label"],z={__name:"Input",props:{modelValue:{type:[String,Number],default:""},type:{type:String,default:"text",validator:t=>["text","email","password","number","tel","url","search","date","time","color","file"].includes(t)},placeholder:{type:String,default:""},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},size:{type:String,default:"md",validator:t=>["sm","md","lg"].includes(t)},variant:{type:String,default:"default",validator:t=>["default","error","success"].includes(t)},iconLeft:{type:[String,Object],default:null},iconRight:{type:[String,Object],default:null},clearable:{type:Boolean,default:!1},clearLabel:{type:String,default:"Clear input"},autocomplete:{type:String,default:null},error:{type:String,default:null},id:{type:String,default:null}},emits:["update:modelValue","blur","focus","clear","keydown"],setup(t,{expose:s,emit:c}){const l=t,o=c,r=e.ref(null),n=e.computed(()=>l.id||e.useId()),i=a=>{o("update:modelValue",a.target.value)},d=a=>{o("blur",a)},f=a=>{o("focus",a)},m=a=>{o("keydown",a)},y=()=>{o("update:modelValue",""),o("clear"),r.value?.focus()},p=e.computed(()=>!!l.error||l.variant==="error"),b=e.computed(()=>{if(l.error)return`${n.value}-error`}),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"})[l.size]),g=e.computed(()=>({default:"ui-border-strong focus:border-(--ui-primary) focus:ring-(--ui-primary)",error:"border-(--ui-danger-soft) focus:border-(--ui-danger) focus:ring-(--ui-danger)",success:"border-(--ui-success-soft) focus:border-(--ui-success) focus:ring-(--ui-success)"})[l.variant]),u=e.computed(()=>["ui-text",{sm:"w-4 h-4",md:"w-4 h-4",lg:"w-5 h-5"}[l.size]]),h=e.computed(()=>["block rounded-lg border ui-surface   transition-colors duration-200","focus:outline-none focus:ring-2 focus:ring-offset-0","disabled:bg-(--ui-surface) disabled:text-(--ui-text) disabled:cursor-not-allowed","placeholder:text-(--ui-text-muted)",l.type==="color"?"w-20 h-12 cursor-pointer":"w-full",v.value,g.value,{"pl-10":l.iconLeft,"pr-10":l.iconRight||l.clearable}]);return s({focus:()=>r.value?.focus(),blur:()=>r.value?.blur(),select:()=>r.value?.select()}),(a,V)=>(e.openBlock(),e.createElementBlock("div",x,[t.iconLeft?(e.openBlock(),e.createElementBlock("div",B,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.iconLeft),{class:e.normalizeClass(u.value)},null,8,["class"]))])):e.createCommentVNode("",!0),e.createElementVNode("input",{id:n.value,ref_key:"inputRef",ref:r,type:t.type,value:t.modelValue,placeholder:t.placeholder,disabled:t.disabled,readonly:t.readonly,required:t.required,autocomplete:t.autocomplete,class:e.normalizeClass(h.value),"aria-describedby":b.value,"aria-invalid":p.value,onInput:i,onBlur:d,onFocus:f,onKeydown:m},null,42,C),t.iconRight||t.clearable?(e.openBlock(),e.createElementBlock("div",S,[t.clearable&&t.modelValue&&!t.disabled?(e.openBlock(),e.createElementBlock("button",{key:0,class:"ui-text hover:text-(--ui-text) transition-colors",type:"button","aria-label":t.clearLabel,onClick:y},[e.createVNode(k.default,{name:"x",class:"w-5 h-5"})],8,w)):t.iconRight?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.iconRight),{key:1,class:e.normalizeClass(u.value)},null,8,["class"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]))}};exports.default=z;

package/dist/components/Input.js

@@ -0,0 +1,166 @@
+import { ref as z, computed as a, useId as V, createElementBlock as s, openBlock as o, createCommentVNode as u, createElementVNode as R, createBlock as f, resolveDynamicComponent as m, normalizeClass as i, createVNode as L } from "vue";
+import I from "./Icon.js";
+const q = { class: "relative" }, N = {
+  key: 0,
+  class: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none"
+}, E = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "autocomplete", "aria-describedby", "aria-invalid"], j = {
+  key: 1,
+  class: "absolute right-3 top-1/2 transform -translate-y-1/2"
+}, D = ["aria-label"], $ = {
+  __name: "Input",
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: ""
+    },
+    type: {
+      type: String,
+      default: "text",
+      validator: (e) => ["text", "email", "password", "number", "tel", "url", "search", "date", "time", "color", "file"].includes(e)
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["sm", "md", "lg"].includes(e)
+    },
+    variant: {
+      type: String,
+      default: "default",
+      validator: (e) => ["default", "error", "success"].includes(e)
+    },
+    iconLeft: {
+      type: [String, Object],
+      default: null
+    },
+    iconRight: {
+      type: [String, Object],
+      default: null
+    },
+    clearable: {
+      type: Boolean,
+      default: !1
+    },
+    clearLabel: {
+      type: String,
+      default: "Clear input"
+    },
+    autocomplete: {
+      type: String,
+      default: null
+    },
+    error: {
+      type: String,
+      default: null
+    },
+    id: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ["update:modelValue", "blur", "focus", "clear", "keydown"],
+  setup(e, { expose: y, emit: b }) {
+    const t = e, r = b, n = z(null), c = a(() => t.id || V()), p = (l) => {
+      r("update:modelValue", l.target.value);
+    }, v = (l) => {
+      r("blur", l);
+    }, g = (l) => {
+      r("focus", l);
+    }, h = (l) => {
+      r("keydown", l);
+    }, x = () => {
+      r("update:modelValue", ""), r("clear"), n.value?.focus();
+    }, S = a(() => !!t.error || t.variant === "error"), k = a(() => {
+      if (t.error) return `${c.value}-error`;
+    }), w = a(() => ({
+      sm: "px-3 py-1.5 text-sm",
+      md: "px-3 py-2 text-sm",
+      lg: "px-4 py-3 text-base"
+    })[t.size]), B = a(() => ({
+      default: "ui-border-strong focus:border-(--ui-primary) focus:ring-(--ui-primary)",
+      error: "border-(--ui-danger-soft) focus:border-(--ui-danger) focus:ring-(--ui-danger)",
+      success: "border-(--ui-success-soft) focus:border-(--ui-success) focus:ring-(--ui-success)"
+    })[t.variant]), d = a(() => ["ui-text", {
+      sm: "w-4 h-4",
+      md: "w-4 h-4",
+      lg: "w-5 h-5"
+    }[t.size]]), C = a(() => [
+      "block rounded-lg border ui-surface   transition-colors duration-200",
+      "focus:outline-none focus:ring-2 focus:ring-offset-0",
+      "disabled:bg-(--ui-surface) disabled:text-(--ui-text) disabled:cursor-not-allowed",
+      "placeholder:text-(--ui-text-muted)",
+      t.type === "color" ? "w-20 h-12 cursor-pointer" : "w-full",
+      w.value,
+      B.value,
+      {
+        "pl-10": t.iconLeft,
+        "pr-10": t.iconRight || t.clearable
+      }
+    ]);
+    return y({
+      focus: () => n.value?.focus(),
+      blur: () => n.value?.blur(),
+      select: () => n.value?.select()
+    }), (l, F) => (o(), s("div", q, [
+      e.iconLeft ? (o(), s("div", N, [
+        (o(), f(m(e.iconLeft), {
+          class: i(d.value)
+        }, null, 8, ["class"]))
+      ])) : u("", !0),
+      R("input", {
+        id: c.value,
+        ref_key: "inputRef",
+        ref: n,
+        type: e.type,
+        value: e.modelValue,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        readonly: e.readonly,
+        required: e.required,
+        autocomplete: e.autocomplete,
+        class: i(C.value),
+        "aria-describedby": k.value,
+        "aria-invalid": S.value,
+        onInput: p,
+        onBlur: v,
+        onFocus: g,
+        onKeydown: h
+      }, null, 42, E),
+      e.iconRight || e.clearable ? (o(), s("div", j, [
+        e.clearable && e.modelValue && !e.disabled ? (o(), s("button", {
+          key: 0,
+          class: "ui-text hover:text-(--ui-text) transition-colors",
+          type: "button",
+          "aria-label": e.clearLabel,
+          onClick: x
+        }, [
+          L(I, {
+            name: "x",
+            class: "w-5 h-5"
+          })
+        ], 8, D)) : e.iconRight ? (o(), f(m(e.iconRight), {
+          key: 1,
+          class: i(d.value)
+        }, null, 8, ["class"])) : u("", !0)
+      ])) : u("", !0)
+    ]));
+  }
+};
+export {
+  $ as default
+};

package/dist/components/InputGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("class-variance-authority"),l=require("../utils/cn.cjs"),u={key:0,class:"flex items-center px-3 bg-muted border border-r-0 rounded-l-md"},a={key:1,class:"flex items-center px-3 bg-muted border border-l-0 rounded-r-md"},i={__name:"InputGroup",props:{variant:{type:String,default:"default",validator:t=>["default","outline"].includes(t)}},setup(t){const o=t,n=d.cva("flex w-full",{variants:{variant:{default:"[&>input]:rounded-none [&>input:first-child]:rounded-l-md [&>input:last-child]:rounded-r-md",outline:"border ui-border-strong  rounded-md [&>input]:border-0 [&>input]:rounded-none"}}}),s=e.computed(()=>l.cn(n({variant:o.variant})));return(r,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(s.value)},[r.$slots.prefix?(e.openBlock(),e.createElementBlock("div",u,[e.renderSlot(r.$slots,"prefix")])):e.createCommentVNode("",!0),e.renderSlot(r.$slots,"default"),r.$slots.suffix?(e.openBlock(),e.createElementBlock("div",a,[e.renderSlot(r.$slots,"suffix")])):e.createCommentVNode("",!0)],2))}};exports.default=i;

package/dist/components/InputGroup.js

@@ -0,0 +1,45 @@
+import { computed as i, createElementBlock as t, openBlock as o, normalizeClass as a, createCommentVNode as n, renderSlot as d } from "vue";
+import { cva as p } from "class-variance-authority";
+import { cn as m } from "../utils/cn.js";
+const f = {
+  key: 0,
+  class: "flex items-center px-3 bg-muted border border-r-0 rounded-l-md"
+}, c = {
+  key: 1,
+  class: "flex items-center px-3 bg-muted border border-l-0 rounded-r-md"
+}, h = {
+  __name: "InputGroup",
+  props: {
+    variant: {
+      type: String,
+      default: "default",
+      validator: (r) => ["default", "outline"].includes(r)
+    }
+  },
+  setup(r) {
+    const s = r, u = p("flex w-full", {
+      variants: {
+        variant: {
+          default: "[&>input]:rounded-none [&>input:first-child]:rounded-l-md [&>input:last-child]:rounded-r-md",
+          outline: "border ui-border-strong  rounded-md [&>input]:border-0 [&>input]:rounded-none"
+        }
+      }
+    }), l = i(
+      () => m(u({ variant: s.variant }))
+    );
+    return (e, v) => (o(), t("div", {
+      class: a(l.value)
+    }, [
+      e.$slots.prefix ? (o(), t("div", f, [
+        d(e.$slots, "prefix")
+      ])) : n("", !0),
+      d(e.$slots, "default"),
+      e.$slots.suffix ? (o(), t("div", c, [
+        d(e.$slots, "suffix")
+      ])) : n("", !0)
+    ], 2));
+  }
+};
+export {
+  h as default
+};

package/dist/components/Label.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("class-variance-authority"),n=require("../utils/cn.cjs"),i=["for"],c={__name:"Label",props:{htmlFor:String,size:{type:String,default:"md",validator:t=>["sm","md","lg"].includes(t)},required:Boolean,disabled:Boolean,class:String},setup(t){const s=t,l=r.cva("font-medium leading-none ui-text peer-disabled:cursor-not-allowed peer-disabled:opacity-70",{variants:{size:{sm:"text-sm",md:"text-sm",lg:"text-base"}}}),a=e.computed(()=>n.cn(l({size:s.size}),s.disabled&&"cursor-not-allowed opacity-70",s.class));return(o,d)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(a.value),for:t.htmlFor},[e.renderSlot(o.$slots,"default")],10,i))}};exports.default=c;

package/dist/components/Label.js

@@ -0,0 +1,46 @@
+import { computed as a, createElementBlock as r, openBlock as n, normalizeClass as i, renderSlot as d } from "vue";
+import { cva as c } from "class-variance-authority";
+import { cn as m } from "../utils/cn.js";
+const p = ["for"], x = {
+  __name: "Label",
+  props: {
+    htmlFor: String,
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["sm", "md", "lg"].includes(e)
+    },
+    required: Boolean,
+    disabled: Boolean,
+    class: String
+  },
+  setup(e) {
+    const t = e, s = c(
+      "font-medium leading-none ui-text peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      {
+        variants: {
+          size: {
+            sm: "text-sm",
+            md: "text-sm",
+            lg: "text-base"
+          }
+        }
+      }
+    ), o = a(
+      () => m(
+        s({ size: t.size }),
+        t.disabled && "cursor-not-allowed opacity-70",
+        t.class
+      )
+    );
+    return (l, u) => (n(), r("label", {
+      class: i(o.value),
+      for: e.htmlFor
+    }, [
+      d(l.$slots, "default")
+    ], 10, p));
+  }
+};
+export {
+  x as default
+};

package/dist/components/Link.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),d=require("class-variance-authority"),f=require("../utils/cn.cjs"),r=require("./Icon.cjs"),m={__name:"Link",props:{href:{type:String,default:null},to:{type:[String,Object],default:null},external:{type:Boolean,default:!1},target:{type:String,default:null},rel:{type:String,default:null},variant:{type:String,default:"primary",validator:e=>["primary","secondary","muted","danger","success"].includes(e)},size:{type:String,default:"md",validator:e=>["xs","sm","md","lg","xl"].includes(e)},underline:{type:String,default:"hover",validator:e=>["always","hover","never"].includes(e)},disabled:{type:Boolean,default:!1},icon:{type:String,default:null},iconPosition:{type:String,default:"left",validator:e=>["left","right"].includes(e)},showExternalIcon:{type:Boolean,default:!0},block:{type:Boolean,default:!1}},emits:["click"],setup(e,{emit:o}){const n=e,a=t.computed(()=>n.to&&!n.href?"router-link":n.href||n.external?"a":"button"),i=t.computed(()=>`w-4 h-4 ${n.iconPosition==="left"?"mr-2":"ml-2"}`),u=d.cva("transition-colors duration-200 inline-flex items-center",{variants:{variant:{primary:"ui-primary hover:text-(--ui-primary-strong)",secondary:"ui-text hover:text-(--ui-primary)",muted:"text-(--ui-text-muted) hover:text-(--ui-text)",danger:"ui-danger hover:text-(--ui-danger-strong)",success:"ui-success hover:text-(--ui-success-strong)"},size:{xs:"text-xs",sm:"text-sm",md:"text-base",lg:"text-lg",xl:"text-xl"},underline:{always:"underline",hover:"hover:underline",never:"no-underline"},block:{true:"block w-full",false:"inline-flex items-center"},disabled:{true:"opacity-50 cursor-not-allowed pointer-events-none",false:"cursor-pointer"}},defaultVariants:{variant:"primary",size:"md",underline:"hover",block:!1,disabled:!1}}),s=l=>{if(n.disabled){l.preventDefault();return}c("click",l)},c=o;return(l,v)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(a.value),{href:a.value==="a"?e.href:void 0,to:a.value==="router-link"?e.to:void 0,target:e.external?"_blank":e.target,rel:e.external?"noopener noreferrer":e.rel,class:t.normalizeClass(t.unref(f.cn)(t.unref(u)({variant:e.variant,size:e.size,underline:e.underline,block:e.block,disabled:e.disabled}),l.$attrs.class)),onClick:s},{default:t.withCtx(()=>[e.icon&&e.iconPosition==="left"?(t.openBlock(),t.createBlock(r.default,{key:0,name:e.icon,class:t.normalizeClass(i.value)},null,8,["name","class"])):t.createCommentVNode("",!0),t.renderSlot(l.$slots,"default"),e.icon&&e.iconPosition==="right"?(t.openBlock(),t.createBlock(r.default,{key:1,name:e.icon,class:t.normalizeClass(i.value)},null,8,["name","class"])):t.createCommentVNode("",!0),e.external&&e.showExternalIcon?(t.openBlock(),t.createBlock(r.default,{key:2,name:"external-link",class:"w-3 h-3 ml-1 inline-block"})):t.createCommentVNode("",!0)]),_:3},8,["href","to","target","rel","class"]))}};exports.default=m;

package/dist/components/Link.js

@@ -0,0 +1,119 @@
+import { computed as c, createBlock as l, openBlock as a, resolveDynamicComponent as y, normalizeClass as i, unref as d, withCtx as g, createCommentVNode as o, renderSlot as h } from "vue";
+import { cva as k } from "class-variance-authority";
+import { cn as b } from "../utils/cn.js";
+import s from "./Icon.js";
+const P = {
+  __name: "Link",
+  props: {
+    href: { type: String, default: null },
+    to: { type: [String, Object], default: null },
+    external: { type: Boolean, default: !1 },
+    target: { type: String, default: null },
+    rel: { type: String, default: null },
+    variant: {
+      type: String,
+      default: "primary",
+      validator: (e) => ["primary", "secondary", "muted", "danger", "success"].includes(e)
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["xs", "sm", "md", "lg", "xl"].includes(e)
+    },
+    underline: {
+      type: String,
+      default: "hover",
+      validator: (e) => ["always", "hover", "never"].includes(e)
+    },
+    disabled: { type: Boolean, default: !1 },
+    icon: { type: String, default: null },
+    iconPosition: {
+      type: String,
+      default: "left",
+      validator: (e) => ["left", "right"].includes(e)
+    },
+    showExternalIcon: { type: Boolean, default: !0 },
+    block: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(e, { emit: f }) {
+    const t = e, r = c(() => t.to && !t.href ? "router-link" : t.href || t.external ? "a" : "button"), u = c(() => `w-4 h-4 ${t.iconPosition === "left" ? "mr-2" : "ml-2"}`), m = k(
+      "transition-colors duration-200 inline-flex items-center",
+      {
+        variants: {
+          variant: {
+            primary: "ui-primary hover:text-(--ui-primary-strong)",
+            secondary: "ui-text hover:text-(--ui-primary)",
+            muted: "text-(--ui-text-muted) hover:text-(--ui-text)",
+            danger: "ui-danger hover:text-(--ui-danger-strong)",
+            success: "ui-success hover:text-(--ui-success-strong)"
+          },
+          size: {
+            xs: "text-xs",
+            sm: "text-sm",
+            md: "text-base",
+            lg: "text-lg",
+            xl: "text-xl"
+          },
+          underline: {
+            always: "underline",
+            hover: "hover:underline",
+            never: "no-underline"
+          },
+          block: {
+            true: "block w-full",
+            false: "inline-flex items-center"
+          },
+          disabled: {
+            true: "opacity-50 cursor-not-allowed pointer-events-none",
+            false: "cursor-pointer"
+          }
+        },
+        defaultVariants: {
+          variant: "primary",
+          size: "md",
+          underline: "hover",
+          block: !1,
+          disabled: !1
+        }
+      }
+    ), x = (n) => {
+      if (t.disabled) {
+        n.preventDefault();
+        return;
+      }
+      v("click", n);
+    }, v = f;
+    return (n, S) => (a(), l(y(r.value), {
+      href: r.value === "a" ? e.href : void 0,
+      to: r.value === "router-link" ? e.to : void 0,
+      target: e.external ? "_blank" : e.target,
+      rel: e.external ? "noopener noreferrer" : e.rel,
+      class: i(d(b)(d(m)({ variant: e.variant, size: e.size, underline: e.underline, block: e.block, disabled: e.disabled }), n.$attrs.class)),
+      onClick: x
+    }, {
+      default: g(() => [
+        e.icon && e.iconPosition === "left" ? (a(), l(s, {
+          key: 0,
+          name: e.icon,
+          class: i(u.value)
+        }, null, 8, ["name", "class"])) : o("", !0),
+        h(n.$slots, "default"),
+        e.icon && e.iconPosition === "right" ? (a(), l(s, {
+          key: 1,
+          name: e.icon,
+          class: i(u.value)
+        }, null, 8, ["name", "class"])) : o("", !0),
+        e.external && e.showExternalIcon ? (a(), l(s, {
+          key: 2,
+          name: "external-link",
+          class: "w-3 h-3 ml-1 inline-block"
+        })) : o("", !0)
+      ]),
+      _: 3
+    }, 8, ["href", "to", "target", "rel", "class"]));
+  }
+};
+export {
+  P as default
+};

package/dist/components/ListItem.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=require("class-variance-authority"),i=require("../utils/cn.cjs"),v=require("./Icon.cjs"),k=["role"],f={key:0,class:"shrink-0"},h={class:"flex-1 min-w-0"},B={key:0,class:"text-sm font-medium ui-text"},C={key:1,class:"text-sm text-muted-foreground"},S={key:1,class:"shrink-0"},g={__name:"ListItem",props:{title:String,description:String,icon:String,href:String,role:String,variant:{type:String,default:"default",validator:t=>["default","interactive"].includes(t)}},emits:["click"],setup(t,{emit:a}){const o=t,s=a,r=c.cva("",{variants:{variant:{default:"",interactive:"hover:bg-(--ui-surface) cursor-pointer"}}}),l=c.cva("flex items-center space-x-3 p-3",{variants:{variant:{default:"",interactive:"transition-colors rounded-md"}}}),d=e.computed(()=>i.cn(r({variant:o.variant}))),u=e.computed(()=>i.cn(l({variant:o.variant}))),m=n=>{s("click",n)};return(n,y)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(d.value),role:t.role},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.href?"a":"div"),{href:t.href,class:e.normalizeClass(u.value),onClick:m},{default:e.withCtx(()=>[n.$slots.icon||t.icon?(e.openBlock(),e.createElementBlock("div",f,[e.renderSlot(n.$slots,"icon",{},()=>[t.icon?(e.openBlock(),e.createBlock(v.default,{key:0,name:t.icon,class:"h-5 w-5"},null,8,["name"])):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0),e.createElementVNode("div",h,[t.title?(e.openBlock(),e.createElementBlock("div",B,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),t.description?(e.openBlock(),e.createElementBlock("div",C,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default")]),n.$slots.action?(e.openBlock(),e.createElementBlock("div",S,[e.renderSlot(n.$slots,"action")])):e.createCommentVNode("",!0)]),_:3},8,["href","class"]))],10,k))}};exports.default=g;