@gspa/ui 0.1.3 → 0.2.0

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"),d=require("../lib/icon.cjs"),m={__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 l=a,n=e.computed(()=>l.icon||l.name),t=e.inject(d.ICON_ADAPTER_KEY,null),r=e.computed(()=>typeof t!="function"||!n.value?null:t({name:n.value,prefix:l.prefix})),o=e.computed(()=>({xs:"xs",sm:"sm",md:"lg",lg:"xl",xl:"2x",xxl:"3x"})[l.size]||"lg"),c=e.computed(()=>l.color?l.color.startsWith("text-")?l.color:`text-${l.color}`:"text-current"),i=e.computed(()=>[c.value,"inline-block"]);return(u,f)=>r.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.value),{key:0,class:e.normalizeClass(i.value),"aria-hidden":!a.ariaLabel,"aria-label":a.ariaLabel,role:a.ariaLabel?"img":void 0},null,8,["class","aria-hidden","aria-label","role"])):n.value?(e.openBlock(),e.createBlock(e.unref(s.FontAwesomeIcon),{key:1,icon:[a.prefix,n.value],size:o.value,class:e.normalizeClass(i.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"])):e.createCommentVNode("",!0)}};exports.default=m;

package/dist/components/Icon.js

@@ -0,0 +1,58 @@
+import { computed as l, inject as f, createBlock as o, createCommentVNode as x, openBlock as c, resolveDynamicComponent as b, normalizeClass as s, unref as v } from "vue";
+import { FontAwesomeIcon as g } from "@fortawesome/vue-fontawesome";
+import { ICON_ADAPTER_KEY as p } from "../lib/icon.js";
+const h = {
+  __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(e) {
+    const a = e, n = l(() => a.icon || a.name), r = f(p, null), i = l(() => typeof r != "function" || !n.value ? null : r({ name: n.value, prefix: a.prefix })), u = l(() => ({
+      xs: "xs",
+      sm: "sm",
+      md: "lg",
+      // FontAwesome sizes: xs, sm, lg, xl, 2x, 3x, etc.
+      lg: "xl",
+      xl: "2x",
+      xxl: "3x"
+    })[a.size] || "lg"), d = l(() => a.color ? a.color.startsWith("text-") ? a.color : `text-${a.color}` : "text-current"), t = l(() => [
+      d.value,
+      "inline-block"
+    ]);
+    return (m, y) => i.value ? (c(), o(b(i.value), {
+      key: 0,
+      class: s(t.value),
+      "aria-hidden": !e.ariaLabel,
+      "aria-label": e.ariaLabel,
+      role: e.ariaLabel ? "img" : void 0
+    }, null, 8, ["class", "aria-hidden", "aria-label", "role"])) : n.value ? (c(), o(v(g), {
+      key: 1,
+      icon: [e.prefix, n.value],
+      size: u.value,
+      class: s(t.value),
+      "aria-hidden": !e.ariaLabel,
+      "aria-label": e.ariaLabel,
+      role: e.ariaLabel ? "img" : void 0
+    }, null, 8, ["icon", "size", "class", "aria-hidden", "aria-label", "role"])) : x("", !0);
+  }
+};
+export {
+  h 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("../Input.vue_vue_type_script_setup_true_lang-C1OQn24h.cjs");exports.default=e._sfc_main;

package/dist/components/Input.js

@@ -0,0 +1,4 @@
+import { _ as f } from "../Input.vue_vue_type_script_setup_true_lang-CpBoY97r.js";
+export {
+  f 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;

package/dist/components/ListItem.js

@@ -0,0 +1,89 @@
+import { computed as r, createElementBlock as n, openBlock as i, normalizeClass as c, createBlock as l, resolveDynamicComponent as S, withCtx as $, createCommentVNode as s, createElementVNode as x, renderSlot as a, toDisplayString as d } from "vue";
+import { cva as m } from "class-variance-authority";
+import { cn as u } from "../utils/cn.js";
+import V from "./Icon.js";
+const w = ["role"], B = {
+  key: 0,
+  class: "shrink-0"
+}, D = { class: "flex-1 min-w-0" }, E = {
+  key: 0,
+  class: "text-sm font-medium ui-text"
+}, N = {
+  key: 1,
+  class: "text-sm text-muted-foreground"
+}, b = {
+  key: 1,
+  class: "shrink-0"
+}, q = {
+  __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: f }) {
+    const o = t, v = f, h = m("", {
+      variants: {
+        variant: {
+          default: "",
+          interactive: "hover:bg-(--ui-surface) cursor-pointer"
+        }
+      }
+    }), k = m("flex items-center space-x-3 p-3", {
+      variants: {
+        variant: {
+          default: "",
+          interactive: "transition-colors rounded-md"
+        }
+      }
+    }), g = r(
+      () => u(h({ variant: o.variant }))
+    ), y = r(
+      () => u(k({ variant: o.variant }))
+    ), C = (e) => {
+      v("click", e);
+    };
+    return (e, p) => (i(), n("li", {
+      class: c(g.value),
+      role: t.role
+    }, [
+      (i(), l(S(t.href ? "a" : "div"), {
+        href: t.href,
+        class: c(y.value),
+        onClick: C
+      }, {
+        default: $(() => [
+          e.$slots.icon || t.icon ? (i(), n("div", B, [
+            a(e.$slots, "icon", {}, () => [
+              t.icon ? (i(), l(V, {
+                key: 0,
+                name: t.icon,
+                class: "h-5 w-5"
+              }, null, 8, ["name"])) : s("", !0)
+            ])
+          ])) : s("", !0),
+          x("div", D, [
+            t.title ? (i(), n("div", E, d(t.title), 1)) : s("", !0),
+            t.description ? (i(), n("div", N, d(t.description), 1)) : s("", !0),
+            a(e.$slots, "default")
+          ]),
+          e.$slots.action ? (i(), n("div", b, [
+            a(e.$slots, "action")
+          ])) : s("", !0)
+        ]),
+        _: 3
+      }, 8, ["href", "class"]))
+    ], 10, w));
+  }
+};
+export {
+  q as default
+};

package/dist/components/Loader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=require("../_plugin-vue_export-helper-BHFhmbuH.cjs"),d={key:0,class:"loader__backdrop"},i={class:"loader__container"},s={key:0,class:"loader__text loader__text--top"},u={key:1,class:"loader__spin"},m={key:2,class:"loader__pulse"},y={key:3,class:"loader__bounce"},k={key:4,class:"loader__ripple"},v={key:5,class:"loader__bars"},B={key:6,class:"loader__dots"},p={key:7,class:"loader__ring"},b={key:8,class:"loader__spinner-text"},f={key:9,class:"loader__text loader__text--bottom"},g={__name:"Loader",props:{loading:{type:Boolean,default:!0},type:{type:String,default:"spin",validator:t=>["spin","pulse","bounce","ripple","bars","dots","ring","spinner-text"].includes(t)},size:{type:String,default:"medium",validator:t=>["small","medium","large","xl","2xl","3xl"].includes(t)},color:{type:String,default:"var(--ui-primary)"},backgroundColor:{type:String,default:"color-mix(in oklab, var(--ui-surface), transparent 8%)"},blur:{type:[Number,String],default:0},text:{type:String,default:""},textPosition:{type:String,default:"bottom",validator:t=>["top","bottom"].includes(t)},overlay:{type:Boolean,default:!1},fullscreen:{type:Boolean,default:!1}},setup(t){const o=t,a=e.computed(()=>{if(o.blur===null||o.blur===void 0||o.blur==="")return"0px";if(typeof o.blur=="number")return`${o.blur}px`;const n=o.blur.trim();return n?/^-?\d*\.?\d+$/.test(n)?`${n}px`:n:"0px"});return(n,r)=>t.loading?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["loader",`loader--${t.type}`,`loader--${t.size}`,t.overlay&&!t.fullscreen?"loader--overlay":"",t.fullscreen?"loader--fullscreen":""]),style:e.normalizeStyle({"--loader-color":t.color,"--loader-bg":t.backgroundColor,"--loader-blur":a.value})},[t.overlay||t.fullscreen?(e.openBlock(),e.createElementBlock("div",d)):e.createCommentVNode("",!0),e.createElementVNode("div",i,[t.text&&t.textPosition==="top"?(e.openBlock(),e.createElementBlock("div",s,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0),t.type==="spin"?(e.openBlock(),e.createElementBlock("div",u)):t.type==="pulse"?(e.openBlock(),e.createElementBlock("div",m)):t.type==="bounce"?(e.openBlock(),e.createElementBlock("div",y,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(3,l=>e.createElementVNode("div",{key:l,class:"loader__bounce-dot",style:e.normalizeStyle({animationDelay:`${(l-1)*.1}s`})},null,4)),64))])):t.type==="ripple"?(e.openBlock(),e.createElementBlock("div",k,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(2,l=>e.createElementVNode("div",{key:l,class:"loader__ripple-ring",style:e.normalizeStyle({animationDelay:`${(l-1)*.5}s`})},null,4)),64))])):t.type==="bars"?(e.openBlock(),e.createElementBlock("div",v,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(5,l=>e.createElementVNode("div",{key:l,class:"loader__bar",style:e.normalizeStyle({animationDelay:`${(l-1)*.1}s`})},null,4)),64))])):t.type==="dots"?(e.openBlock(),e.createElementBlock("div",B,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(3,l=>e.createElementVNode("div",{key:l,class:"loader__dot",style:e.normalizeStyle({animationDelay:`${(l-1)*.16}s`})},null,4)),64))])):t.type==="ring"?(e.openBlock(),e.createElementBlock("div",p,[...r[0]||(r[0]=[e.createElementVNode("div",{class:"loader__ring-track"},null,-1),e.createElementVNode("div",{class:"loader__ring-fill"},null,-1)])])):t.type==="spinner-text"?(e.openBlock(),e.createElementBlock("div",b,[...r[1]||(r[1]=[e.createElementVNode("div",{class:"loader__spinner"},null,-1)])])):e.createCommentVNode("",!0),t.text&&t.textPosition==="bottom"?(e.openBlock(),e.createElementBlock("div",f,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0)])],6)):e.createCommentVNode("",!0)}},_=c._export_sfc(g,[["__scopeId","data-v-4cf22c8b"]]);exports.default=_;