@gspa/ui 0.1.3 → 0.2.0

package/dist/components/Slider.js

@@ -0,0 +1,42 @@
+import { computed as d, createElementBlock as N, openBlock as f, createElementVNode as l, normalizeStyle as p, toDisplayString as r } from "vue";
+const x = { class: "w-full" }, b = ["min", "max", "step", "value"], y = { class: "flex justify-between text-xs ui-text mt-1" }, h = {
+  __name: "Slider",
+  props: {
+    modelValue: { type: [Number, String], default: 0 },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: { type: Number, default: 1 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: i }) {
+    const m = e, s = i, o = d(() => {
+      const a = Number(m.modelValue), t = Number(m.min), u = Number(m.max);
+      if (Number.isNaN(a) || Number.isNaN(t) || Number.isNaN(u) || u <= t)
+        return "var(--ui-primary)";
+      const n = (Math.min(Math.max(a, t), u) - t) / (u - t);
+      return n <= 0.2 ? "#16a34a" : n <= 0.4 ? "#65a30d" : n <= 0.6 ? "#eab308" : n <= 0.8 ? "#f97316" : "#dc2626";
+    }), c = (a) => {
+      s("update:modelValue", Number(a.target.value));
+    };
+    return (a, t) => (f(), N("div", x, [
+      l("input", {
+        type: "range",
+        min: e.min,
+        max: e.max,
+        step: e.step,
+        value: e.modelValue,
+        class: "w-full cursor-pointer",
+        style: p({ accentColor: o.value }),
+        onInput: c
+      }, null, 44, b),
+      l("div", y, [
+        l("span", null, r(e.min), 1),
+        l("span", null, r(e.modelValue), 1),
+        l("span", null, r(e.max), 1)
+      ])
+    ]));
+  }
+};
+export {
+  h as default
+};

package/dist/components/Spinner.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),l=require("class-variance-authority"),c=require("../utils/cn.cjs"),u=["aria-label"],d={key:0,class:"sr-only"},m={__name:"Spinner",props:{size:{type:String,default:"md",validator:t=>["xs","sm","md","lg","xl"].includes(t)},variant:{type:String,default:"default",validator:t=>["default","primary","secondary"].includes(t)},label:{type:String,default:"Loading..."},class:String},setup(t){const a=t,n=l.cva("inline-flex items-center justify-center",{variants:{variant:{default:"text-muted-foreground",primary:"ui-primary",secondary:"text-secondary-foreground"}}}),r=l.cva("animate-spin",{variants:{size:{xs:"h-3 w-3",sm:"h-4 w-4",md:"h-6 w-6",lg:"h-8 w-8",xl:"h-12 w-12"}}}),i=e.computed(()=>c.cn(n({variant:a.variant}),a.class)),o=e.computed(()=>r({size:a.size}));return(p,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(i.value),role:"status","aria-label":t.label},[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(o.value),xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},[...s[0]||(s[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:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"},null,-1)])],2)),t.label?(e.openBlock(),e.createElementBlock("span",d,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0)],10,u))}};exports.default=m;

package/dist/components/Spinner.js

@@ -0,0 +1,87 @@
+import { computed as l, createElementBlock as a, openBlock as s, normalizeClass as n, createCommentVNode as p, createElementVNode as i, toDisplayString as f } from "vue";
+import { cva as o } from "class-variance-authority";
+import { cn as v } from "../utils/cn.js";
+const y = ["aria-label"], g = {
+  key: 0,
+  class: "sr-only"
+}, C = {
+  __name: "Spinner",
+  props: {
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["xs", "sm", "md", "lg", "xl"].includes(e)
+    },
+    variant: {
+      type: String,
+      default: "default",
+      validator: (e) => ["default", "primary", "secondary"].includes(e)
+    },
+    label: {
+      type: String,
+      default: "Loading..."
+    },
+    class: String
+  },
+  setup(e) {
+    const t = e, c = o(
+      "inline-flex items-center justify-center",
+      {
+        variants: {
+          variant: {
+            default: "text-muted-foreground",
+            primary: "ui-primary",
+            secondary: "text-secondary-foreground"
+          }
+        }
+      }
+    ), d = o(
+      "animate-spin",
+      {
+        variants: {
+          size: {
+            xs: "h-3 w-3",
+            sm: "h-4 w-4",
+            md: "h-6 w-6",
+            lg: "h-8 w-8",
+            xl: "h-12 w-12"
+          }
+        }
+      }
+    ), m = l(
+      () => v(c({ variant: t.variant }), t.class)
+    ), u = l(
+      () => d({ size: t.size })
+    );
+    return (x, r) => (s(), a("div", {
+      class: n(m.value),
+      role: "status",
+      "aria-label": e.label
+    }, [
+      (s(), a("svg", {
+        class: n(u.value),
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24"
+      }, [...r[0] || (r[0] = [
+        i("circle", {
+          class: "opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          "stroke-width": "4"
+        }, null, -1),
+        i("path", {
+          class: "opacity-75",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        }, null, -1)
+      ])], 2)),
+      e.label ? (s(), a("span", g, f(e.label), 1)) : p("", !0)
+    ], 10, y));
+  }
+};
+export {
+  C as default
+};

package/dist/components/Stepper.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r={class:"flex items-center space-x-4 ui-text"},s={__name:"Stepper",setup(o){return(t,c)=>(e.openBlock(),e.createElementBlock("div",r,[e.renderSlot(t.$slots,"default")]))}};exports.default=s;

package/dist/components/Stepper.js

@@ -0,0 +1,12 @@
+import { createElementBlock as t, openBlock as r, renderSlot as s } from "vue";
+const o = { class: "flex items-center space-x-4 ui-text" }, l = {
+  __name: "Stepper",
+  setup(c) {
+    return (e, n) => (r(), t("div", o, [
+      s(e.$slots, "default")
+    ]));
+  }
+};
+export {
+  l as default
+};

package/dist/components/StepperItem.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),i={class:"flex items-center"},r={class:"ml-2"},s={class:"font-medium"},l={key:0,class:"text-sm ui-text"},o={__name:"StepperItem",props:{step:{type:Number,required:!0},title:{type:String,required:!0},description:{type:String,default:""},active:{type:Boolean,default:!1},completed:{type:Boolean,default:!1}},setup(t){return(c,n)=>(e.openBlock(),e.createElementBlock("div",i,[e.createElementVNode("div",{class:e.normalizeClass(["flex items-center justify-center w-8 h-8 rounded-full border-2",t.active?"ui-primary-bg border-(--ui-primary) ui-text":t.completed?"ui-success-bg border-(--ui-success) ui-text":"ui-border-strong  ui-text"])},[e.createElementVNode("span",null,e.toDisplayString(t.step),1)],2),e.createElementVNode("div",r,[e.createElementVNode("div",s,e.toDisplayString(t.title),1),t.description?(e.openBlock(),e.createElementBlock("div",l,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0)])]))}};exports.default=o;

package/dist/components/StepperItem.js

@@ -0,0 +1,33 @@
+import { createElementBlock as s, openBlock as r, createElementVNode as t, normalizeClass as c, toDisplayString as i, createCommentVNode as o } from "vue";
+const l = { class: "flex items-center" }, n = { class: "ml-2" }, d = { class: "font-medium" }, u = {
+  key: 0,
+  class: "text-sm ui-text"
+}, f = {
+  __name: "StepperItem",
+  props: {
+    step: { type: Number, required: !0 },
+    title: { type: String, required: !0 },
+    description: { type: String, default: "" },
+    active: { type: Boolean, default: !1 },
+    completed: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return (a, m) => (r(), s("div", l, [
+      t("div", {
+        class: c([
+          "flex items-center justify-center w-8 h-8 rounded-full border-2",
+          e.active ? "ui-primary-bg border-(--ui-primary) ui-text" : e.completed ? "ui-success-bg border-(--ui-success) ui-text" : "ui-border-strong  ui-text"
+        ])
+      }, [
+        t("span", null, i(e.step), 1)
+      ], 2),
+      t("div", n, [
+        t("div", d, i(e.title), 1),
+        e.description ? (r(), s("div", u, i(e.description), 1)) : o("", !0)
+      ])
+    ]));
+  }
+};
+export {
+  f as default
+};

package/dist/components/Switch.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("vue"),t=require("class-variance-authority"),u=require("../utils/cn.cjs"),m=["aria-checked","disabled"],h={__name:"Switch",props:{modelValue:Boolean,disabled:Boolean,size:{type:String,default:"md",validator:a=>["sm","md","lg"].includes(a)},class:String},emits:["update:modelValue"],setup(a,{emit:l}){const e=a,i=l,c=t.cva("inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 transition-colors 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",{variants:{size:{sm:"h-5 w-9",md:"h-6 w-11",lg:"h-7 w-12"},checked:{true:"ui-danger-bg border-(--ui-danger)",false:"ui-surface-soft border-(--ui-border-strong)"}}}),r=t.cva("pointer-events-none block rounded-full ui-surface border ui-border-strong shadow-sm ring-0 transition-transform",{variants:{size:{sm:"h-4 w-4",md:"h-5 w-5",lg:"h-6 w-6"},checked:{true:"",false:""}},compoundVariants:[{size:"sm",checked:!0,class:"translate-x-4"},{size:"sm",checked:!1,class:"translate-x-0"},{size:"md",checked:!0,class:"translate-x-5"},{size:"md",checked:!1,class:"translate-x-0"},{size:"lg",checked:!0,class:"translate-x-5"},{size:"lg",checked:!1,class:"translate-x-0"}]}),o=s.computed(()=>u.cn(c({size:e.size,checked:e.modelValue}),e.class)),n=s.computed(()=>r({size:e.size,checked:e.modelValue})),d=()=>{e.disabled||i("update:modelValue",!e.modelValue)};return(b,f)=>(s.openBlock(),s.createElementBlock("button",{type:"button",role:"switch","aria-checked":a.modelValue,disabled:a.disabled,class:s.normalizeClass(o.value),onClick:d},[s.createElementVNode("span",{class:s.normalizeClass(n.value)},null,2)],10,m))}};exports.default=h;

package/dist/components/Switch.js

@@ -0,0 +1,112 @@
+import { computed as a, createElementBlock as m, openBlock as h, normalizeClass as t, createElementVNode as f } from "vue";
+import { cva as l } from "class-variance-authority";
+import { cn as b } from "../utils/cn.js";
+const g = ["aria-checked", "disabled"], V = {
+  __name: "Switch",
+  props: {
+    modelValue: Boolean,
+    disabled: Boolean,
+    size: {
+      type: String,
+      default: "md",
+      validator: (s) => ["sm", "md", "lg"].includes(s)
+    },
+    class: String
+  },
+  emits: ["update:modelValue"],
+  setup(s, { emit: i }) {
+    const e = s, o = i, r = l(
+      "inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 transition-colors 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",
+      {
+        variants: {
+          size: {
+            sm: "h-5 w-9",
+            md: "h-6 w-11",
+            lg: "h-7 w-12"
+          },
+          checked: {
+            true: "ui-danger-bg border-(--ui-danger)",
+            false: "ui-surface-soft border-(--ui-border-strong)"
+          }
+        }
+      }
+    ), c = l(
+      "pointer-events-none block rounded-full ui-surface border ui-border-strong shadow-sm ring-0 transition-transform",
+      {
+        variants: {
+          size: {
+            sm: "h-4 w-4",
+            md: "h-5 w-5",
+            lg: "h-6 w-6"
+          },
+          checked: {
+            true: "",
+            false: ""
+          }
+        },
+        compoundVariants: [
+          {
+            size: "sm",
+            checked: !0,
+            class: "translate-x-4"
+          },
+          {
+            size: "sm",
+            checked: !1,
+            class: "translate-x-0"
+          },
+          {
+            size: "md",
+            checked: !0,
+            class: "translate-x-5"
+          },
+          {
+            size: "md",
+            checked: !1,
+            class: "translate-x-0"
+          },
+          {
+            size: "lg",
+            checked: !0,
+            class: "translate-x-5"
+          },
+          {
+            size: "lg",
+            checked: !1,
+            class: "translate-x-0"
+          }
+        ]
+      }
+    ), n = a(
+      () => b(
+        r({
+          size: e.size,
+          checked: e.modelValue
+        }),
+        e.class
+      )
+    ), d = a(
+      () => c({
+        size: e.size,
+        checked: e.modelValue
+      })
+    ), u = () => {
+      e.disabled || o("update:modelValue", !e.modelValue);
+    };
+    return (k, p) => (h(), m("button", {
+      type: "button",
+      role: "switch",
+      "aria-checked": s.modelValue,
+      disabled: s.disabled,
+      class: t(n.value),
+      onClick: u
+    }, [
+      f("span", {
+        class: t(d.value)
+      }, null, 2)
+    ], 10, g));
+  }
+};
+export {
+  V as default
+};

package/dist/components/Tab.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),w=require("class-variance-authority"),x=require("../utils/cn.cjs"),_={class:"w-full"},k={class:"relative inline-flex w-full gap-2 rounded-xl border ui-border-strong ui-surface-muted p-1.5",role:"tablist"},V=["id","disabled","aria-selected","aria-controls","onKeydown","onClick"],z={class:"mt-4"},E={__name:"Tab",props:{defaultIndex:{type:Number,default:0},modelValue:{type:Number,default:null},size:{type:String,default:"sm"},variant:{type:String,default:"default"},loading:{type:Boolean,default:!1}},emits:["tab-change","update:modelValue"],setup(m,{emit:b}){const o=m,g=w.cva("relative z-10 rounded-lg font-medium transition-all duration-200 border border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary)",{variants:{size:{sm:"px-2.5 py-1 text-[11px]",md:"px-3 py-1.5 text-xs",lg:"px-3.5 py-2 text-sm"},variant:{default:""}},defaultVariants:{size:"md",variant:"default"}}),l=t.ref(o.modelValue??o.defaultIndex),n=t.ref([]),c=t.ref([]),v=t.ref({width:"0px",transform:"translateX(0px)"}),i=e=>{e<0||e>=n.value.length||(l.value=e,d("update:modelValue",e),d("tab-change",e),s())};t.watch(()=>o.modelValue,e=>{typeof e=="number"&&e!==l.value&&(l.value=e,s())});const d=b,y=(e,r)=>{c.value[r]=e||null},f=e=>{const r=c.value[e];r&&typeof r.focus=="function"&&r.focus()},h=(e,r)=>{if(o.loading)return;const u=n.value.length-1;if(!(u<0)){if(e.key==="ArrowRight"){e.preventDefault();const a=r>=u?0:r+1;i(a),f(a);return}if(e.key==="ArrowLeft"){e.preventDefault();const a=r<=0?u:r-1;i(a),f(a);return}if(e.key==="Home"){e.preventDefault(),i(0),f(0);return}e.key==="End"&&(e.preventDefault(),i(u),f(u))}},s=()=>{t.nextTick(()=>{const e=c.value[l.value];if(!e){v.value={width:"0px",transform:"translateX(0px)"};return}v.value={width:`${e.offsetWidth}px`,transform:`translateX(${e.offsetLeft}px)`}})};return t.watch(()=>n.value.length,()=>{s()}),t.watch(l,()=>{s()}),t.onMounted(()=>{s(),window.addEventListener("resize",s)}),t.onUnmounted(()=>{window.removeEventListener("resize",s)}),t.provide("tabsContext",{activeIndex:l,tabs:n,registerTab:e=>{n.value.push({label:e});const r=n.value.length-1;return s(),r},unregisterTab:e=>{n.value.splice(e,1),c.value.splice(e,1),l.value>=n.value.length&&(l.value=Math.max(n.value.length-1,0),d("update:modelValue",l.value),d("tab-change",l.value)),s()}}),(e,r)=>(t.openBlock(),t.createElementBlock("div",_,[t.createElementVNode("div",k,[t.createElementVNode("span",{class:"pointer-events-none absolute top-1.5 bottom-1.5 rounded-lg bg-(--ui-primary) opacity-10 transition-all duration-250 ease-out z-0",style:t.normalizeStyle(v.value)},null,4),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(n.value,(u,a)=>(t.openBlock(),t.createElementBlock("button",{id:`tab-${a}`,key:a,ref_for:!0,ref:p=>y(p,a),disabled:o.loading,class:t.normalizeClass(t.unref(x.cn)(t.unref(g)({size:o.size,variant:o.variant}),l.value===a?"bg-(--ui-primary) text-(--ui-text-inverse) shadow-sm":"border-transparent ui-text-muted hover:ui-text hover:bg-(--ui-surface)",o.loading&&"cursor-not-allowed opacity-50")),"aria-selected":l.value===a,"aria-controls":`panel-${a}`,role:"tab",tabindex:"0",onKeydown:p=>h(p,a),onClick:p=>!o.loading&&i(a)},t.toDisplayString(u.label),43,V))),128))]),t.createElementVNode("div",z,[t.renderSlot(e.$slots,"default")])]))}};exports.default=E;

package/dist/components/Tab.js

@@ -0,0 +1,134 @@
+import { ref as p, watch as m, nextTick as V, onMounted as T, onUnmounted as I, provide as E, createElementBlock as b, openBlock as g, createElementVNode as y, normalizeStyle as S, Fragment as $, renderList as D, normalizeClass as L, unref as h, toDisplayString as C, renderSlot as B } from "vue";
+import { cva as K } from "class-variance-authority";
+import { cn as N } from "../utils/cn.js";
+const R = { class: "w-full" }, X = {
+  class: "relative inline-flex w-full gap-2 rounded-xl border ui-border-strong ui-surface-muted p-1.5",
+  role: "tablist"
+}, A = ["id", "disabled", "aria-selected", "aria-controls", "onKeydown", "onClick"], M = { class: "mt-4" }, W = {
+  __name: "Tab",
+  props: {
+    defaultIndex: { type: Number, default: 0 },
+    modelValue: { type: Number, default: null },
+    size: { type: String, default: "sm" },
+    variant: { type: String, default: "default" },
+    loading: { type: Boolean, default: !1 }
+  },
+  emits: ["tab-change", "update:modelValue"],
+  setup(x, { emit: w }) {
+    const n = x, _ = K(
+      "relative z-10 rounded-lg font-medium transition-all duration-200 border border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary)",
+      {
+        variants: {
+          size: {
+            sm: "px-2.5 py-1 text-[11px]",
+            md: "px-3 py-1.5 text-xs",
+            lg: "px-3.5 py-2 text-sm"
+          },
+          variant: {
+            default: ""
+          }
+        },
+        defaultVariants: {
+          size: "md",
+          variant: "default"
+        }
+      }
+    ), r = p(n.modelValue ?? n.defaultIndex), l = p([]), i = p([]), v = p({ width: "0px", transform: "translateX(0px)" }), u = (e) => {
+      e < 0 || e >= l.value.length || (r.value = e, d("update:modelValue", e), d("tab-change", e), o());
+    };
+    m(() => n.modelValue, (e) => {
+      typeof e == "number" && e !== r.value && (r.value = e, o());
+    });
+    const d = w, z = (e, a) => {
+      i.value[a] = e || null;
+    }, c = (e) => {
+      const a = i.value[e];
+      a && typeof a.focus == "function" && a.focus();
+    }, k = (e, a) => {
+      if (n.loading) return;
+      const s = l.value.length - 1;
+      if (!(s < 0)) {
+        if (e.key === "ArrowRight") {
+          e.preventDefault();
+          const t = a >= s ? 0 : a + 1;
+          u(t), c(t);
+          return;
+        }
+        if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          const t = a <= 0 ? s : a - 1;
+          u(t), c(t);
+          return;
+        }
+        if (e.key === "Home") {
+          e.preventDefault(), u(0), c(0);
+          return;
+        }
+        e.key === "End" && (e.preventDefault(), u(s), c(s));
+      }
+    }, o = () => {
+      V(() => {
+        const e = i.value[r.value];
+        if (!e) {
+          v.value = { width: "0px", transform: "translateX(0px)" };
+          return;
+        }
+        v.value = {
+          width: `${e.offsetWidth}px`,
+          transform: `translateX(${e.offsetLeft}px)`
+        };
+      });
+    };
+    return m(() => l.value.length, () => {
+      o();
+    }), m(r, () => {
+      o();
+    }), T(() => {
+      o(), window.addEventListener("resize", o);
+    }), I(() => {
+      window.removeEventListener("resize", o);
+    }), E("tabsContext", {
+      activeIndex: r,
+      tabs: l,
+      registerTab: (e) => {
+        l.value.push({ label: e });
+        const a = l.value.length - 1;
+        return o(), a;
+      },
+      unregisterTab: (e) => {
+        l.value.splice(e, 1), i.value.splice(e, 1), r.value >= l.value.length && (r.value = Math.max(l.value.length - 1, 0), d("update:modelValue", r.value), d("tab-change", r.value)), o();
+      }
+    }), (e, a) => (g(), b("div", R, [
+      y("div", X, [
+        y("span", {
+          class: "pointer-events-none absolute top-1.5 bottom-1.5 rounded-lg bg-(--ui-primary) opacity-10 transition-all duration-250 ease-out z-0",
+          style: S(v.value)
+        }, null, 4),
+        (g(!0), b($, null, D(l.value, (s, t) => (g(), b("button", {
+          id: `tab-${t}`,
+          key: t,
+          ref_for: !0,
+          ref: (f) => z(f, t),
+          disabled: n.loading,
+          class: L(h(N)(
+            h(_)({ size: n.size, variant: n.variant }),
+            r.value === t ? "bg-(--ui-primary) text-(--ui-text-inverse) shadow-sm" : "border-transparent ui-text-muted hover:ui-text hover:bg-(--ui-surface)",
+            n.loading && "cursor-not-allowed opacity-50"
+          )),
+          "aria-selected": r.value === t,
+          "aria-controls": `panel-${t}`,
+          role: "tab",
+          tabindex: "0",
+          onKeydown: (f) => k(f, t),
+          onClick: (f) => !n.loading && u(t)
+        }, C(s.label), 43, A))), 128))
+      ]),
+      y("div", M, [
+        B(e.$slots, "default")
+      ])
+    ]));
+  }
+};
+export {
+  W as default
+};

package/dist/components/TabPanel.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("./Spinner.cjs"),s=["id","aria-labelledby"],c={class:"rounded-xl border ui-border bg-(--ui-surface) p-2 shadow-xs"},u={key:0,class:"flex items-center justify-center p-8"},d={key:1,class:"transition-opacity duration-200 opacity-100"},b={__name:"TabPanel",props:{label:{type:String,required:!0},loading:{type:Boolean,default:!1}},setup(o){const i=o,l=e.inject("tabsContext");if(!l)throw new Error("TabPanel must be used within a Tab component");const t=e.ref(null),a=e.ref(!1);return e.onMounted(()=>{t.value=l.registerTab(i.label),a.value=l.activeIndex.value===t.value,e.watch(l.activeIndex,n=>{a.value=n===t.value})}),e.onUnmounted(()=>{t.value!==null&&l.unregisterTab(t.value)}),(n,v)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{id:`panel-${t.value}`,role:"tabpanel","aria-labelledby":`tab-${t.value}`,class:"ui-text"},[e.createElementVNode("div",c,[o.loading?(e.openBlock(),e.createElementBlock("div",u,[e.createVNode(r.default,{size:"lg",label:`Loading ${i.label}`},null,8,["label"])])):(e.openBlock(),e.createElementBlock("div",d,[e.renderSlot(n.$slots,"default")]))])],8,s)),[[e.vShow,a.value]])}};exports.default=b;

package/dist/components/TabPanel.js

@@ -0,0 +1,49 @@
+import { inject as c, ref as r, onMounted as d, watch as u, onUnmounted as b, withDirectives as v, createElementBlock as n, openBlock as o, createElementVNode as p, createVNode as f, renderSlot as m, vShow as _ } from "vue";
+import h from "./Spinner.js";
+const x = ["id", "aria-labelledby"], y = { class: "rounded-xl border ui-border bg-(--ui-surface) p-2 shadow-xs" }, g = {
+  key: 0,
+  class: "flex items-center justify-center p-8"
+}, w = {
+  key: 1,
+  class: "transition-opacity duration-200 opacity-100"
+}, B = {
+  __name: "TabPanel",
+  props: {
+    label: { type: String, required: !0 },
+    loading: { type: Boolean, default: !1 }
+  },
+  setup(i) {
+    const s = i, t = c("tabsContext");
+    if (!t)
+      throw new Error("TabPanel must be used within a Tab component");
+    const e = r(null), a = r(!1);
+    return d(() => {
+      e.value = t.registerTab(s.label), a.value = t.activeIndex.value === e.value, u(t.activeIndex, (l) => {
+        a.value = l === e.value;
+      });
+    }), b(() => {
+      e.value !== null && t.unregisterTab(e.value);
+    }), (l, T) => v((o(), n("div", {
+      id: `panel-${e.value}`,
+      role: "tabpanel",
+      "aria-labelledby": `tab-${e.value}`,
+      class: "ui-text"
+    }, [
+      p("div", y, [
+        i.loading ? (o(), n("div", g, [
+          f(h, {
+            size: "lg",
+            label: `Loading ${s.label}`
+          }, null, 8, ["label"])
+        ])) : (o(), n("div", w, [
+          m(l.$slots, "default")
+        ]))
+      ])
+    ], 8, x)), [
+      [_, a.value]
+    ]);
+  }
+};
+export {
+  B as default
+};

package/dist/components/Text.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),n=require("class-variance-authority"),r=require("../utils/cn.cjs"),d={__name:"Text",props:{as:{type:String,default:"p"},size:{type:String,default:"md",validator:t=>["xs","sm","md","lg","xl"].includes(t)},variant:{type:String,default:"default",validator:t=>["default","muted","danger"].includes(t)},weight:{type:String,default:"normal",validator:t=>["normal","medium","semibold","bold"].includes(t)},align:{type:String,default:"left",validator:t=>["left","center","right","justify"].includes(t)},class:String},setup(t){const a=t,l=n.cva("leading-relaxed",{variants:{size:{xs:"text-xs",sm:"text-sm",md:"text-base",lg:"text-lg",xl:"text-xl"},variant:{default:"ui-text",muted:"ui-text",danger:"ui-danger"},weight:{normal:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},align:{left:"text-left",center:"text-center",right:"text-right",justify:"text-justify"}}}),i=e.computed(()=>r.cn(l({size:a.size,variant:a.variant,weight:a.weight,align:a.align}),a.class));return(s,u)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.as),{class:e.normalizeClass(i.value)},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},8,["class"]))}};exports.default=d;

package/dist/components/Text.js

@@ -0,0 +1,84 @@
+import { computed as n, createBlock as s, openBlock as r, resolveDynamicComponent as d, normalizeClass as o, withCtx as m, renderSlot as u } from "vue";
+import { cva as f } from "class-variance-authority";
+import { cn as c } from "../utils/cn.js";
+const h = {
+  __name: "Text",
+  props: {
+    as: {
+      type: String,
+      default: "p"
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator: (t) => ["xs", "sm", "md", "lg", "xl"].includes(t)
+    },
+    variant: {
+      type: String,
+      default: "default",
+      validator: (t) => ["default", "muted", "danger"].includes(t)
+    },
+    weight: {
+      type: String,
+      default: "normal",
+      validator: (t) => ["normal", "medium", "semibold", "bold"].includes(t)
+    },
+    align: {
+      type: String,
+      default: "left",
+      validator: (t) => ["left", "center", "right", "justify"].includes(t)
+    },
+    class: String
+  },
+  setup(t) {
+    const e = t, a = f(
+      "leading-relaxed",
+      {
+        variants: {
+          size: {
+            xs: "text-xs",
+            sm: "text-sm",
+            md: "text-base",
+            lg: "text-lg",
+            xl: "text-xl"
+          },
+          variant: {
+            default: "ui-text",
+            muted: "ui-text",
+            danger: "ui-danger"
+          },
+          weight: {
+            normal: "font-normal",
+            medium: "font-medium",
+            semibold: "font-semibold",
+            bold: "font-bold"
+          },
+          align: {
+            left: "text-left",
+            center: "text-center",
+            right: "text-right",
+            justify: "text-justify"
+          }
+        }
+      }
+    ), l = n(
+      () => c(a({
+        size: e.size,
+        variant: e.variant,
+        weight: e.weight,
+        align: e.align
+      }), e.class)
+    );
+    return (i, g) => (r(), s(d(t.as), {
+      class: o(l.value)
+    }, {
+      default: m(() => [
+        u(i.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+};
+export {
+  h as default
+};

package/dist/components/Textarea.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),p=require("class-variance-authority"),x=require("../utils/cn.cjs"),h=["id","value","placeholder","disabled","readonly","required","rows","maxlength","aria-describedby","aria-invalid"],z={__name:"Textarea",props:{modelValue:{type:String,default:""},placeholder:{type:String,default:""},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},rows:{type:Number,default:3},maxlength:{type:Number,default:null},resize:{type:String,default:"vertical",validator:e=>["none","vertical","horizontal","both"].includes(e)},autoResize:{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)},error:{type:String,default:null},id:{type:String,default:null}},emits:["update:modelValue","blur","focus","keydown"],setup(e,{expose:i,emit:n}){const r=e,u=n,l=a.ref(null),o=a.computed(()=>r.id||a.useId()),d=t=>{u("update:modelValue",t.target.value),r.autoResize&&a.nextTick(()=>s())},c=t=>u("blur",t),f=t=>u("focus",t),m=t=>u("keydown",t),y=a.computed(()=>!!r.error||r.variant==="error"),v=a.computed(()=>r.error?`${o.value}-error`:void 0),b=p.cva("block w-full rounded-lg border ui-surface   transition-colors duration-200 placeholder:text-(--ui-text-muted) focus:outline-none focus:ring-2 focus:ring-offset-0 disabled:bg-(--ui-surface) disabled:text-(--ui-text) disabled:cursor-not-allowed",{variants:{size:{sm:"px-3 py-1.5 text-sm",md:"px-3 py-2 text-sm",lg:"px-4 py-3 text-base"},variant:{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)"},resize:{none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"}},defaultVariants:{size:"md",variant:"default",resize:"vertical"}}),g=a.computed(()=>x.cn(b({size:r.size,variant:r.variant,resize:r.resize}))),s=()=>{if(!l.value||!r.autoResize)return;const t=l.value;t.style.height="auto",t.style.height=`${t.scrollHeight}px`};return a.watch(()=>r.modelValue,()=>{r.autoResize&&a.nextTick(()=>s())},{immediate:!0}),i({focus:()=>l.value?.focus(),blur:()=>l.value?.blur(),select:()=>l.value?.select()}),(t,w)=>(a.openBlock(),a.createElementBlock("textarea",{id:o.value,ref_key:"textareaRef",ref:l,value:e.modelValue,placeholder:e.placeholder,disabled:e.disabled,readonly:e.readonly,required:e.required,rows:e.rows,maxlength:e.maxlength,class:a.normalizeClass(g.value),"aria-describedby":v.value,"aria-invalid":y.value,onInput:d,onBlur:c,onFocus:f,onKeydown:m},null,42,h))}};exports.default=z;