@gspa/ui 0.1.3 → 0.1.4

package/dist/components/Textarea.js

@@ -0,0 +1,102 @@
+import { ref as x, computed as o, useId as h, watch as z, nextTick as u, createElementBlock as w, openBlock as B, normalizeClass as k } from "vue";
+import { cva as R } from "class-variance-authority";
+import { cn as S } from "../utils/cn.js";
+const V = ["id", "value", "placeholder", "disabled", "readonly", "required", "rows", "maxlength", "aria-describedby", "aria-invalid"], E = {
+  __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: n, emit: d }) {
+    const t = e, l = d, r = x(null), s = o(() => t.id || h()), c = (a) => {
+      l("update:modelValue", a.target.value), t.autoResize && u(() => i());
+    }, f = (a) => l("blur", a), m = (a) => l("focus", a), y = (a) => l("keydown", a), b = o(() => !!t.error || t.variant === "error"), v = o(
+      () => t.error ? `${s.value}-error` : void 0
+    ), p = R(
+      "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 = o(
+      () => S(p({ size: t.size, variant: t.variant, resize: t.resize }))
+    ), i = () => {
+      if (!r.value || !t.autoResize) return;
+      const a = r.value;
+      a.style.height = "auto", a.style.height = `${a.scrollHeight}px`;
+    };
+    return z(() => t.modelValue, () => {
+      t.autoResize && u(() => i());
+    }, { immediate: !0 }), n({
+      focus: () => r.value?.focus(),
+      blur: () => r.value?.blur(),
+      select: () => r.value?.select()
+    }), (a, q) => (B(), w("textarea", {
+      id: s.value,
+      ref_key: "textareaRef",
+      ref: r,
+      value: e.modelValue,
+      placeholder: e.placeholder,
+      disabled: e.disabled,
+      readonly: e.readonly,
+      required: e.required,
+      rows: e.rows,
+      maxlength: e.maxlength,
+      class: k(g.value),
+      "aria-describedby": v.value,
+      "aria-invalid": b.value,
+      onInput: c,
+      onBlur: f,
+      onFocus: m,
+      onKeydown: y
+    }, null, 42, V));
+  }
+};
+export {
+  E as default
+};

package/dist/components/ThemeConfigurator.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),n=require("../lib/theme.cjs"),a=require("./Option.cjs"),d=require("./Select.cjs"),i={class:"ui-surface-strong fixed bottom-5 rounded-2xl right-5 z-50"},c={key:0,class:"mt-3 ui-sur w-72 rounded-2xl border ui-border-strong p-4 shadow-xl"},m={class:"mt-3 space-y-3"},p={class:"block text-xs font-medium ui-text"},f={__name:"ThemeConfigurator",setup(x){const u=["light","dark"],l=e.ref(!1),r=e.ref(n.getMode()||"light");return e.watch(r,s=>{n.setMode(s)}),(s,t)=>(e.openBlock(),e.createElementBlock("div",i,[e.createElementVNode("button",{class:"rounded-full ui-text px-4 py-2 text-sm font-semibold shadow-sm hover:brightness-105",onClick:t[0]||(t[0]=o=>l.value=!l.value)}," Appearance "),l.value?(e.openBlock(),e.createElementBlock("div",c,[t[3]||(t[3]=e.createElementVNode("div",{class:"text-sm font-semibold ui-text"}," Appearance ",-1)),e.createElementVNode("div",m,[e.createElementVNode("label",p,[t[2]||(t[2]=e.createTextVNode(" Mode ",-1)),e.createVNode(d.default,{modelValue:r.value,"onUpdate:modelValue":t[1]||(t[1]=o=>r.value=o),class:"mt-1 w-full"},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(u,o=>e.createVNode(a.default,{key:o,value:o},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o),1)]),_:2},1032,["value"])),64))]),_:1},8,["modelValue"])])])])):e.createCommentVNode("",!0)]))}};exports.default=f;

package/dist/components/ThemeConfigurator.js

@@ -0,0 +1,50 @@
+import { ref as d, watch as f, createElementBlock as l, openBlock as n, createElementVNode as o, createCommentVNode as p, createTextVNode as u, createVNode as i, withCtx as m, Fragment as x, renderList as _, toDisplayString as v } from "vue";
+import { getMode as g, setMode as b } from "../lib/theme.js";
+import h from "./Option.js";
+import k from "./Select.js";
+const V = { class: "ui-surface-strong fixed bottom-5 rounded-2xl right-5 z-50" }, w = {
+  key: 0,
+  class: "mt-3 ui-sur w-72 rounded-2xl border ui-border-strong p-4 shadow-xl"
+}, y = { class: "mt-3 space-y-3" }, C = { class: "block text-xs font-medium ui-text" }, E = {
+  __name: "ThemeConfigurator",
+  setup(M) {
+    const c = ["light", "dark"], s = d(!1), r = d(g() || "light");
+    return f(r, (a) => {
+      b(a);
+    }), (a, e) => (n(), l("div", V, [
+      o("button", {
+        class: "rounded-full ui-text px-4 py-2 text-sm font-semibold shadow-sm hover:brightness-105",
+        onClick: e[0] || (e[0] = (t) => s.value = !s.value)
+      }, " Appearance "),
+      s.value ? (n(), l("div", w, [
+        e[3] || (e[3] = o("div", { class: "text-sm font-semibold ui-text" }, " Appearance ", -1)),
+        o("div", y, [
+          o("label", C, [
+            e[2] || (e[2] = u(" Mode ", -1)),
+            i(k, {
+              modelValue: r.value,
+              "onUpdate:modelValue": e[1] || (e[1] = (t) => r.value = t),
+              class: "mt-1 w-full"
+            }, {
+              default: m(() => [
+                (n(), l(x, null, _(c, (t) => i(h, {
+                  key: t,
+                  value: t
+                }, {
+                  default: m(() => [
+                    u(v(t), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["value"])), 64))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ])
+        ])
+      ])) : p("", !0)
+    ]));
+  }
+};
+export {
+  E as default
+};

package/dist/components/Timeline.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r={__name:"Timeline",props:{orientation:{type:String,default:"vertical",validator:t=>["vertical","horizontal"].includes(t)}},setup(t){return(l,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["relative flex ui-text",t.orientation==="vertical"?"flex-col":"flex-row"])},[e.renderSlot(l.$slots,"default")],2))}};exports.default=r;

package/dist/components/Timeline.js

@@ -0,0 +1,24 @@
+import { createElementBlock as l, openBlock as r, normalizeClass as a, renderSlot as o } from "vue";
+const c = {
+  __name: "Timeline",
+  props: {
+    orientation: {
+      type: String,
+      default: "vertical",
+      validator: (e) => ["vertical", "horizontal"].includes(e)
+    }
+  },
+  setup(e) {
+    return (t, i) => (r(), l("div", {
+      class: a([
+        "relative flex ui-text",
+        e.orientation === "vertical" ? "flex-col" : "flex-row"
+      ])
+    }, [
+      o(t.$slots, "default")
+    ], 2));
+  }
+};
+export {
+  c as default
+};

package/dist/components/TimelineItem.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r={key:0,class:"absolute left-3 top-0 w-0.5 h-full ui-bg"},o={class:"z-10 flex items-center justify-center w-6 h-6 rounded-full border-2 border-(--ui-primary) ui-surface ui-primary"},s={class:"ui-text font-medium"},n={key:0,class:"ui-text text-sm"},a={class:"mt-2 ui-text text-sm"},c={__name:"TimelineItem",props:{title:{type:String,required:!0},subtitle:{type:String,default:""},orientation:{type:String,default:"vertical",validator:t=>["vertical","horizontal"].includes(t)}},setup(t){return(l,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["relative flex",t.orientation==="vertical"?"items-start mb-8 last:mb-0":"flex-col items-center mx-8 last:mx-0"])},[t.orientation==="vertical"?(e.openBlock(),e.createElementBlock("div",r)):e.createCommentVNode("",!0),e.createElementVNode("div",o,[e.renderSlot(l.$slots,"icon",{},()=>[i[0]||(i[0]=e.createElementVNode("div",{class:"w-2 h-2 rounded-full ui-primary-bg"},null,-1))])]),e.createElementVNode("div",{class:e.normalizeClass(["ml-6",t.orientation==="horizontal"?"mt-2 text-center":""])},[e.createElementVNode("h3",s,[e.renderSlot(l.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)])]),t.subtitle?(e.openBlock(),e.createElementBlock("p",n,[e.renderSlot(l.$slots,"subtitle",{},()=>[e.createTextVNode(e.toDisplayString(t.subtitle),1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",a,[e.renderSlot(l.$slots,"default")])],2)],2))}};exports.default=c;

package/dist/components/TimelineItem.js

@@ -0,0 +1,63 @@
+import { createElementBlock as s, openBlock as r, normalizeClass as a, createCommentVNode as n, createElementVNode as e, renderSlot as l, createTextVNode as u, toDisplayString as d } from "vue";
+const c = {
+  key: 0,
+  class: "absolute left-3 top-0 w-0.5 h-full ui-bg"
+}, m = { class: "z-10 flex items-center justify-center w-6 h-6 rounded-full border-2 border-(--ui-primary) ui-surface ui-primary" }, f = { class: "ui-text font-medium" }, v = {
+  key: 0,
+  class: "ui-text text-sm"
+}, b = { class: "mt-2 ui-text text-sm" }, x = {
+  __name: "TimelineItem",
+  props: {
+    title: {
+      type: String,
+      required: !0
+    },
+    subtitle: {
+      type: String,
+      default: ""
+    },
+    orientation: {
+      type: String,
+      default: "vertical",
+      validator: (t) => ["vertical", "horizontal"].includes(t)
+    }
+  },
+  setup(t) {
+    return (i, o) => (r(), s("div", {
+      class: a([
+        "relative flex",
+        t.orientation === "vertical" ? "items-start mb-8 last:mb-0" : "flex-col items-center mx-8 last:mx-0"
+      ])
+    }, [
+      t.orientation === "vertical" ? (r(), s("div", c)) : n("", !0),
+      e("div", m, [
+        l(i.$slots, "icon", {}, () => [
+          o[0] || (o[0] = e("div", { class: "w-2 h-2 rounded-full ui-primary-bg" }, null, -1))
+        ])
+      ]),
+      e("div", {
+        class: a([
+          "ml-6",
+          t.orientation === "horizontal" ? "mt-2 text-center" : ""
+        ])
+      }, [
+        e("h3", f, [
+          l(i.$slots, "title", {}, () => [
+            u(d(t.title), 1)
+          ])
+        ]),
+        t.subtitle ? (r(), s("p", v, [
+          l(i.$slots, "subtitle", {}, () => [
+            u(d(t.subtitle), 1)
+          ])
+        ])) : n("", !0),
+        e("div", b, [
+          l(i.$slots, "default")
+        ])
+      ], 2)
+    ], 2));
+  }
+};
+export {
+  x as default
+};

package/dist/components/Toast.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),S=require("class-variance-authority"),o=require("../utils/cn.cjs"),q=require("../lib/toast.cjs"),s=require("./Icon.cjs"),I=require("../_plugin-vue_export-helper-BHFhmbuH.cjs"),P=["aria-live"],j={class:"flex-1 min-w-0 pt-0.5"},A=["onClick"],$=["onClick"],K={key:2,class:"absolute bottom-0 left-0 right-0 h-0.5 overflow-hidden"},L={__name:"Toast",props:{position:{type:String,default:"top-right",validator:i=>["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"].includes(i)},hotkey:{type:Array,default:()=>["altKey","KeyT"]},richColors:{type:Boolean,default:!0},expand:{type:Boolean,default:!1},visibleToasts:{type:Number,default:3},closeButton:{type:Boolean,default:!0}},setup(i){const n=i,{toasts:p,dismiss:v}=q.useToaster(),x=e.computed(()=>p.value.slice(0,n.visibleToasts)),w={"top-left":"top-0 left-0 flex-col items-start","top-center":"top-0 left-1/2 -translate-x-1/2 flex-col items-center","top-right":"top-0 right-0 flex-col items-end","bottom-left":"bottom-0 left-0 flex-col-reverse items-start","bottom-center":"bottom-0 left-1/2 -translate-x-1/2 flex-col-reverse items-center","bottom-right":"bottom-0 right-0 flex-col-reverse items-end"},b=e.computed(()=>o.cn(w[n.position])),k=S.cva("group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-xl border p-4 transition-all duration-200 hover:-translate-y-0.5",{variants:{variant:{default:"ui-surface ui-border-strong ui-text shadow-lg shadow-black/5 dark:shadow-black/30",info:"border-blue-700 bg-blue-700 ui-text-inverse shadow-lg shadow-blue-900/25",success:"border-green-700 bg-green-700 ui-text-inverse shadow-lg shadow-green-900/25",warning:"border-amber-600 bg-amber-600 ui-text-inverse shadow-lg shadow-amber-900/25",error:"border-red-700 bg-red-700 ui-text-inverse shadow-lg shadow-red-900/25",loading:"ui-surface ui-border-strong ui-text shadow-lg shadow-black/5 dark:shadow-black/30"}},defaultVariants:{variant:"default"}}),y=r=>o.cn(k({variant:r.variant})),l={default:"bell",info:"info",success:"check-circle",warning:"triangle-exclamation",error:"circle-xmark",loading:"loader-circle"},c={default:"ui-primary",info:"text-white",success:"text-white",warning:"text-white",error:"text-white",loading:"ui-primary"},u={default:"ui-surface-muted border ui-border",info:"bg-white/15 ring-1 ring-white/25",success:"bg-white/15 ring-1 ring-white/25",warning:"bg-white/15 ring-1 ring-white/25",error:"bg-white/15 ring-1 ring-white/25",loading:"ui-surface-muted border ui-border"},d={default:"bg-(--ui-primary)",info:"bg-white/70",success:"bg-white/70",warning:"bg-white/70",error:"bg-white/70",loading:"bg-(--ui-primary)"},h={default:"ui-primary hover:text-(--ui-primary-strong) underline-offset-4 hover:underline",info:"text-white/90 hover:text-white underline-offset-4 hover:underline",success:"text-white/90 hover:text-white underline-offset-4 hover:underline",warning:"text-white/90 hover:text-white underline-offset-4 hover:underline",error:"text-white/90 hover:text-white underline-offset-4 hover:underline",loading:"ui-primary hover:text-(--ui-primary-strong) underline-offset-4 hover:underline"},m={default:"ui-text",info:"text-white",success:"text-white",warning:"text-white",error:"text-white",loading:"ui-text"},f={default:"ui-text-muted",info:"text-white/90",success:"text-white/90",warning:"text-white/90",error:"text-white/90",loading:"ui-text-muted"},g={default:"ui-text-soft hover:bg-black/5 dark:hover:bg-white/10 hover:text-(--ui-text)",info:"text-white/80 hover:text-white hover:bg-white/15",success:"text-white/80 hover:text-white hover:bg-white/15",warning:"text-white/80 hover:text-white hover:bg-white/15",error:"text-white/80 hover:text-white hover:bg-white/15",loading:"ui-text hover:bg-black/5 dark:hover:bg-white/5 hover:text-(--ui-text)"},C=r=>r.icon||l[r.variant]||l.default,B=r=>{const a=c[r.variant]||c.default;return r.variant==="loading"?`${a} animate-spin`:a},_=r=>u[r.variant]||u.default,V=r=>d[r.variant]||d.default,N=r=>h[r.variant]||h.default,T=r=>m[r.variant]||m.default,z=r=>f[r.variant]||f.default,E=r=>g[r.variant]||g.default,M=r=>r.icon!==!1,D=r=>r.dismissible!==!1&&(r.closeButton||n.closeButton||r.dismissible);return(r,a)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(o.cn)(b.value,"fixed z-[10000] flex max-h-screen w-full p-4 md:max-w-[420px] pointer-events-none"))},[e.createVNode(e.TransitionGroup,{"enter-active-class":"transition-all duration-400 ease-[cubic-bezier(0.16,1,0.3,1)]","enter-from-class":"transform translate-x-full opacity-0 scale-90","enter-to-class":"transform translate-x-0 opacity-100 scale-100","leave-active-class":"transition-all duration-300 ease-[cubic-bezier(0.4,0,1,1)]","leave-from-class":"transform translate-x-0 opacity-100 scale-100","leave-to-class":"transform translate-x-full opacity-0 scale-90","move-class":"transition-all duration-300 ease-out",tag:"div",class:"w-full space-y-3"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(x.value,t=>(e.openBlock(),e.createElementBlock("div",{key:t.id,class:e.normalizeClass(y(t)),role:"alert","aria-live":t.variant==="error"?"assertive":"polite"},[M(t)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(o.cn)("relative flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-all duration-300",_(t)))},[e.createVNode(s.default,{icon:C(t),class:e.normalizeClass(e.unref(o.cn)("h-5 w-5 transition-transform duration-300 group-hover:scale-110",B(t)))},null,8,["icon","class"])],2)):e.createCommentVNode("",!0),e.createElementVNode("div",j,[t.title?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(o.cn)("text-md font-semibold leading-tight mb-1",T(t)))},e.toDisplayString(t.title),3)):e.createCommentVNode("",!0),t.message||t.description?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(o.cn)("text-md leading-relaxed",z(t)))},e.toDisplayString(t.message||t.description),3)):e.createCommentVNode("",!0),t.component?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.component),e.mergeProps({key:2,ref_for:!0},t.componentProps,{class:"mt-3"}),null,16)):e.createCommentVNode("",!0),t.action?(e.openBlock(),e.createElementBlock("button",{key:3,class:e.normalizeClass(["mt-3 inline-flex items-center gap-1.5 text-sm font-medium transition-colors",N(t)]),onClick:t.action.onClick},[e.createTextVNode(e.toDisplayString(t.action.label)+" ",1),e.createVNode(s.default,{icon:"arrow-right",class:"h-3 w-3 transition-transform duration-200 group-hover:translate-x-0.5"})],10,A)):e.createCommentVNode("",!0)]),D(t)?(e.openBlock(),e.createElementBlock("button",{key:1,class:e.normalizeClass(e.unref(o.cn)("absolute right-2 top-2 flex h-7 w-7 shrink-0 items-center justify-center rounded-md opacity-70 transition-all hover:opacity-100 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-(--ui-ring)",E(t))),"aria-label":"Dismiss",onClick:G=>e.unref(v)(t.id)},[e.createVNode(s.default,{icon:"x",class:"h-4 w-4"})],10,$)):e.createCommentVNode("",!0),t.duration&&t.duration>0?(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("div",{class:e.normalizeClass(e.unref(o.cn)("h-full origin-left animate-toast-progress",V(t))),style:e.normalizeStyle({animationDuration:`${t.duration}ms`})},null,6)])):e.createCommentVNode("",!0)],10,P))),128))]),_:1})],2)]))}},F=I._export_sfc(L,[["__scopeId","data-v-8acde4d1"]]);exports.default=F;

package/dist/components/Toast.js

@@ -0,0 +1,231 @@
+import { computed as _, createBlock as C, openBlock as r, Teleport as G, createElementVNode as h, normalizeClass as i, unref as n, createVNode as l, TransitionGroup as q, withCtx as H, createElementBlock as s, Fragment as J, renderList as O, createCommentVNode as a, toDisplayString as f, resolveDynamicComponent as Q, mergeProps as R, createTextVNode as U, normalizeStyle as W } from "vue";
+import { cva as X } from "class-variance-authority";
+import { cn as o } from "../utils/cn.js";
+import { useToaster as Y } from "../lib/toast.js";
+import g from "./Icon.js";
+import { _ as Z } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const ee = ["aria-live"], te = { class: "flex-1 min-w-0 pt-0.5" }, re = ["onClick"], ie = ["onClick"], oe = {
+  key: 2,
+  class: "absolute bottom-0 left-0 right-0 h-0.5 overflow-hidden"
+}, ne = {
+  __name: "Toast",
+  props: {
+    position: {
+      type: String,
+      default: "top-right",
+      validator: (c) => [
+        "top-left",
+        "top-center",
+        "top-right",
+        "bottom-left",
+        "bottom-center",
+        "bottom-right"
+      ].includes(c)
+    },
+    hotkey: {
+      type: Array,
+      default: () => ["altKey", "KeyT"]
+    },
+    richColors: {
+      type: Boolean,
+      default: !0
+    },
+    expand: {
+      type: Boolean,
+      default: !1
+    },
+    visibleToasts: {
+      type: Number,
+      default: 3
+    },
+    closeButton: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup(c) {
+    const u = c, { toasts: B, dismiss: T } = Y(), M = _(
+      () => B.value.slice(0, u.visibleToasts)
+    ), N = {
+      "top-left": "top-0 left-0 flex-col items-start",
+      "top-center": "top-0 left-1/2 -translate-x-1/2 flex-col items-center",
+      "top-right": "top-0 right-0 flex-col items-end",
+      "bottom-left": "bottom-0 left-0 flex-col-reverse items-start",
+      "bottom-center": "bottom-0 left-1/2 -translate-x-1/2 flex-col-reverse items-center",
+      "bottom-right": "bottom-0 right-0 flex-col-reverse items-end"
+    }, V = _(
+      () => o(N[u.position])
+    ), z = X(
+      "group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-xl border p-4 transition-all duration-200 hover:-translate-y-0.5",
+      {
+        variants: {
+          variant: {
+            default: "ui-surface ui-border-strong ui-text shadow-lg shadow-black/5 dark:shadow-black/30",
+            info: "border-blue-700 bg-blue-700 ui-text-inverse shadow-lg shadow-blue-900/25",
+            success: "border-green-700 bg-green-700 ui-text-inverse shadow-lg shadow-green-900/25",
+            warning: "border-amber-600 bg-amber-600 ui-text-inverse shadow-lg shadow-amber-900/25",
+            error: "border-red-700 bg-red-700 ui-text-inverse shadow-lg shadow-red-900/25",
+            loading: "ui-surface ui-border-strong ui-text shadow-lg shadow-black/5 dark:shadow-black/30"
+          }
+        },
+        defaultVariants: { variant: "default" }
+      }
+    ), D = (t) => o(z({ variant: t.variant })), m = {
+      default: "bell",
+      info: "info",
+      success: "check-circle",
+      warning: "triangle-exclamation",
+      error: "circle-xmark",
+      loading: "loader-circle"
+    }, p = {
+      default: "ui-primary",
+      info: "text-white",
+      success: "text-white",
+      warning: "text-white",
+      error: "text-white",
+      loading: "ui-primary"
+    }, v = {
+      default: "ui-surface-muted border ui-border",
+      info: "bg-white/15 ring-1 ring-white/25",
+      success: "bg-white/15 ring-1 ring-white/25",
+      warning: "bg-white/15 ring-1 ring-white/25",
+      error: "bg-white/15 ring-1 ring-white/25",
+      loading: "ui-surface-muted border ui-border"
+    }, x = {
+      default: "bg-(--ui-primary)",
+      info: "bg-white/70",
+      success: "bg-white/70",
+      warning: "bg-white/70",
+      error: "bg-white/70",
+      loading: "bg-(--ui-primary)"
+    }, w = {
+      default: "ui-primary hover:text-(--ui-primary-strong) underline-offset-4 hover:underline",
+      info: "text-white/90 hover:text-white underline-offset-4 hover:underline",
+      success: "text-white/90 hover:text-white underline-offset-4 hover:underline",
+      warning: "text-white/90 hover:text-white underline-offset-4 hover:underline",
+      error: "text-white/90 hover:text-white underline-offset-4 hover:underline",
+      loading: "ui-primary hover:text-(--ui-primary-strong) underline-offset-4 hover:underline"
+    }, b = {
+      default: "ui-text",
+      info: "text-white",
+      success: "text-white",
+      warning: "text-white",
+      error: "text-white",
+      loading: "ui-text"
+    }, y = {
+      default: "ui-text-muted",
+      info: "text-white/90",
+      success: "text-white/90",
+      warning: "text-white/90",
+      error: "text-white/90",
+      loading: "ui-text-muted"
+    }, k = {
+      default: "ui-text-soft hover:bg-black/5 dark:hover:bg-white/10 hover:text-(--ui-text)",
+      info: "text-white/80 hover:text-white hover:bg-white/15",
+      success: "text-white/80 hover:text-white hover:bg-white/15",
+      warning: "text-white/80 hover:text-white hover:bg-white/15",
+      error: "text-white/80 hover:text-white hover:bg-white/15",
+      loading: "ui-text hover:bg-black/5 dark:hover:bg-white/5 hover:text-(--ui-text)"
+    }, I = (t) => t.icon || m[t.variant] || m.default, $ = (t) => {
+      const d = p[t.variant] || p.default;
+      return t.variant === "loading" ? `${d} animate-spin` : d;
+    }, P = (t) => v[t.variant] || v.default, S = (t) => x[t.variant] || x.default, j = (t) => w[t.variant] || w.default, A = (t) => b[t.variant] || b.default, E = (t) => y[t.variant] || y.default, K = (t) => k[t.variant] || k.default, L = (t) => t.icon !== !1, F = (t) => t.dismissible !== !1 && (t.closeButton || u.closeButton || t.dismissible);
+    return (t, d) => (r(), C(G, { to: "body" }, [
+      h("div", {
+        class: i(n(o)(
+          V.value,
+          "fixed z-[10000] flex max-h-screen w-full p-4 md:max-w-[420px] pointer-events-none"
+        ))
+      }, [
+        l(q, {
+          "enter-active-class": "transition-all duration-400 ease-[cubic-bezier(0.16,1,0.3,1)]",
+          "enter-from-class": "transform translate-x-full opacity-0 scale-90",
+          "enter-to-class": "transform translate-x-0 opacity-100 scale-100",
+          "leave-active-class": "transition-all duration-300 ease-[cubic-bezier(0.4,0,1,1)]",
+          "leave-from-class": "transform translate-x-0 opacity-100 scale-100",
+          "leave-to-class": "transform translate-x-full opacity-0 scale-90",
+          "move-class": "transition-all duration-300 ease-out",
+          tag: "div",
+          class: "w-full space-y-3"
+        }, {
+          default: H(() => [
+            (r(!0), s(J, null, O(M.value, (e) => (r(), s("div", {
+              key: e.id,
+              class: i(D(e)),
+              role: "alert",
+              "aria-live": e.variant === "error" ? "assertive" : "polite"
+            }, [
+              L(e) ? (r(), s("div", {
+                key: 0,
+                class: i(n(o)(
+                  "relative flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-all duration-300",
+                  P(e)
+                ))
+              }, [
+                l(g, {
+                  icon: I(e),
+                  class: i(n(o)(
+                    "h-5 w-5 transition-transform duration-300 group-hover:scale-110",
+                    $(e)
+                  ))
+                }, null, 8, ["icon", "class"])
+              ], 2)) : a("", !0),
+              h("div", te, [
+                e.title ? (r(), s("div", {
+                  key: 0,
+                  class: i(n(o)("text-md font-semibold leading-tight mb-1", A(e)))
+                }, f(e.title), 3)) : a("", !0),
+                e.message || e.description ? (r(), s("div", {
+                  key: 1,
+                  class: i(n(o)("text-md leading-relaxed", E(e)))
+                }, f(e.message || e.description), 3)) : a("", !0),
+                e.component ? (r(), C(Q(e.component), R({
+                  key: 2,
+                  ref_for: !0
+                }, e.componentProps, { class: "mt-3" }), null, 16)) : a("", !0),
+                e.action ? (r(), s("button", {
+                  key: 3,
+                  class: i(["mt-3 inline-flex items-center gap-1.5 text-sm font-medium transition-colors", j(e)]),
+                  onClick: e.action.onClick
+                }, [
+                  U(f(e.action.label) + " ", 1),
+                  l(g, {
+                    icon: "arrow-right",
+                    class: "h-3 w-3 transition-transform duration-200 group-hover:translate-x-0.5"
+                  })
+                ], 10, re)) : a("", !0)
+              ]),
+              F(e) ? (r(), s("button", {
+                key: 1,
+                class: i(n(o)(
+                  "absolute right-2 top-2 flex h-7 w-7 shrink-0 items-center justify-center rounded-md opacity-70 transition-all hover:opacity-100 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-(--ui-ring)",
+                  K(e)
+                )),
+                "aria-label": "Dismiss",
+                onClick: (se) => n(T)(e.id)
+              }, [
+                l(g, {
+                  icon: "x",
+                  class: "h-4 w-4"
+                })
+              ], 10, ie)) : a("", !0),
+              e.duration && e.duration > 0 ? (r(), s("div", oe, [
+                h("div", {
+                  class: i(n(o)(
+                    "h-full origin-left animate-toast-progress",
+                    S(e)
+                  )),
+                  style: W({ animationDuration: `${e.duration}ms` })
+                }, null, 6)
+              ])) : a("", !0)
+            ], 10, ee))), 128))
+          ]),
+          _: 1
+        })
+      ], 2)
+    ]));
+  }
+}, fe = /* @__PURE__ */ Z(ne, [["__scopeId", "data-v-8acde4d1"]]);
+export {
+  fe as default
+};

package/dist/components/Tooltip.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),m=require("class-variance-authority"),x=require("../utils/cn.cjs"),S={__name:"Tooltip",props:{content:{type:String,required:!0},placement:{type:String,default:"top",validator:s=>["top","bottom","left","right"].includes(s)},delay:{type:Number,default:0},class:String},setup(s){const n=s,u=t.ref(!1),p=t.ref(null),f=t.ref(null),d=t.ref({});let r=null;const h=m.cva("fixed z-[9999] px-3 py-1.5 text-sm ui-text ui-surface rounded-md shadow-lg pointer-events-none whitespace-nowrap",{variants:{placement:{top:"",bottom:"",left:"",right:""}}}),g=m.cva("absolute w-2 h-2 bg-primary transform rotate-45",{variants:{placement:{top:"top-full left-1/2 transform -translate-x-1/2 -mt-1",bottom:"bottom-full left-1/2 transform -translate-x-1/2 -mb-1",left:"left-full top-1/2 transform -translate-y-1/2 -ml-1",right:"right-full top-1/2 transform -translate-y-1/2 -mr-1"}}}),v=t.computed(()=>x.cn(h({placement:n.placement}),n.class)),y=t.computed(()=>g({placement:n.placement})),w=()=>{if(!p.value||!f.value)return;const e=p.value.getBoundingClientRect(),o=f.value.getBoundingClientRect();let a=0,l=0;const c=8;switch(n.placement){case"top":a=e.top-o.height-c,l=e.left+e.width/2-o.width/2;break;case"bottom":a=e.bottom+c,l=e.left+e.width/2-o.width/2;break;case"left":a=e.top+e.height/2-o.height/2,l=e.left-o.width-c;break;case"right":a=e.top+e.height/2-o.height/2,l=e.right+c;break}const i=8;l<i&&(l=i),l+o.width>window.innerWidth-i&&(l=window.innerWidth-o.width-i),a<i&&(a=i),a+o.height>window.innerHeight-i&&(a=window.innerHeight-o.height-i),d.value={top:`${a}px`,left:`${l}px`}},b=()=>{r&&clearTimeout(r),r=setTimeout(async()=>{u.value=!0,await t.nextTick(),w()},n.delay)},k=()=>{r&&clearTimeout(r),u.value=!1};return(e,o)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"triggerRef",ref:p,class:"relative inline-block",onMouseenter:b,onMouseleave:k},[t.renderSlot(e.$slots,"default"),(t.openBlock(),t.createBlock(t.Teleport,{to:"body"},[t.createVNode(t.Transition,{"enter-active-class":"transition-opacity duration-200","enter-from-class":"opacity-0","enter-to-class":"opacity-100","leave-active-class":"transition-opacity duration-200","leave-from-class":"opacity-100","leave-to-class":"opacity-0"},{default:t.withCtx(()=>[u.value?(t.openBlock(),t.createElementBlock("div",{key:0,ref_key:"tooltipRef",ref:f,class:t.normalizeClass(v.value),style:t.normalizeStyle(d.value),role:"tooltip"},[t.createTextVNode(t.toDisplayString(s.content)+" ",1),t.createElementVNode("div",{class:t.normalizeClass(y.value)},null,2)],6)):t.createCommentVNode("",!0)]),_:1})]))],544))}};exports.default=S;

package/dist/components/Tooltip.js

@@ -0,0 +1,124 @@
+import { ref as c, computed as h, createElementBlock as g, openBlock as m, renderSlot as S, createBlock as V, Teleport as _, createVNode as B, Transition as N, withCtx as z, createCommentVNode as $, normalizeStyle as E, normalizeClass as v, createTextVNode as H, createElementVNode as M, toDisplayString as W, nextTick as q } from "vue";
+import { cva as w } from "class-variance-authority";
+import { cn as D } from "../utils/cn.js";
+const A = {
+  __name: "Tooltip",
+  props: {
+    content: {
+      type: String,
+      required: !0
+    },
+    placement: {
+      type: String,
+      default: "top",
+      validator: (r) => ["top", "bottom", "left", "right"].includes(r)
+    },
+    delay: {
+      type: Number,
+      default: 0
+    },
+    class: String
+  },
+  setup(r) {
+    const i = r, p = c(!1), f = c(null), u = c(null), d = c({});
+    let n = null;
+    const y = w(
+      "fixed z-[9999] px-3 py-1.5 text-sm ui-text ui-surface rounded-md shadow-lg pointer-events-none whitespace-nowrap",
+      {
+        variants: {
+          placement: {
+            top: "",
+            bottom: "",
+            left: "",
+            right: ""
+          }
+        }
+      }
+    ), b = w(
+      "absolute w-2 h-2 bg-primary transform rotate-45",
+      {
+        variants: {
+          placement: {
+            top: "top-full left-1/2 transform -translate-x-1/2 -mt-1",
+            bottom: "bottom-full left-1/2 transform -translate-x-1/2 -mb-1",
+            left: "left-full top-1/2 transform -translate-y-1/2 -ml-1",
+            right: "right-full top-1/2 transform -translate-y-1/2 -mr-1"
+          }
+        }
+      }
+    ), k = h(
+      () => D(y({ placement: i.placement }), i.class)
+    ), x = h(
+      () => b({ placement: i.placement })
+    ), R = () => {
+      if (!f.value || !u.value) return;
+      const t = f.value.getBoundingClientRect(), e = u.value.getBoundingClientRect();
+      let o = 0, a = 0;
+      const s = 8;
+      switch (i.placement) {
+        case "top":
+          o = t.top - e.height - s, a = t.left + t.width / 2 - e.width / 2;
+          break;
+        case "bottom":
+          o = t.bottom + s, a = t.left + t.width / 2 - e.width / 2;
+          break;
+        case "left":
+          o = t.top + t.height / 2 - e.height / 2, a = t.left - e.width - s;
+          break;
+        case "right":
+          o = t.top + t.height / 2 - e.height / 2, a = t.right + s;
+          break;
+      }
+      const l = 8;
+      a < l && (a = l), a + e.width > window.innerWidth - l && (a = window.innerWidth - e.width - l), o < l && (o = l), o + e.height > window.innerHeight - l && (o = window.innerHeight - e.height - l), d.value = {
+        top: `${o}px`,
+        left: `${a}px`
+      };
+    }, T = () => {
+      n && clearTimeout(n), n = setTimeout(async () => {
+        p.value = !0, await q(), R();
+      }, i.delay);
+    }, C = () => {
+      n && clearTimeout(n), p.value = !1;
+    };
+    return (t, e) => (m(), g("div", {
+      ref_key: "triggerRef",
+      ref: f,
+      class: "relative inline-block",
+      onMouseenter: T,
+      onMouseleave: C
+    }, [
+      S(t.$slots, "default"),
+      (m(), V(_, { to: "body" }, [
+        B(N, {
+          "enter-active-class": "transition-opacity duration-200",
+          "enter-from-class": "opacity-0",
+          "enter-to-class": "opacity-100",
+          "leave-active-class": "transition-opacity duration-200",
+          "leave-from-class": "opacity-100",
+          "leave-to-class": "opacity-0"
+        }, {
+          default: z(() => [
+            p.value ? (m(), g("div", {
+              key: 0,
+              ref_key: "tooltipRef",
+              ref: u,
+              class: v(k.value),
+              style: E(d.value),
+              role: "tooltip"
+            }, [
+              H(W(r.content) + " ", 1),
+              M("div", {
+                class: v(x.value)
+              }, null, 2)
+            ], 6)) : $("", !0)
+          ]),
+          _: 1
+        })
+      ]))
+    ], 544));
+  }
+};
+export {
+  A as default
+};

package/dist/components/Typography.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("vue"),f={key:0,class:"ui-danger ml-1","aria-hidden":"true"},b={__name:"Typography",props:{variant:{type:String,default:"body-md",validator:e=>["body-2xs","body-xs","body-sm","body-md","body-lg","body-xl","body-2xl","text-2xs","text-xs","text-sm","text-md","text-lg","text-xl","text-2xl","display-xs","display-sm","display-md","display-lg","display-xl","display-2xl","caption","overline","label"].includes(e)},color:{type:String,default:"default",validator:e=>["default","primary","secondary","accent","success","warning","danger","info","muted","disabled","white","black"].includes(e)},align:{type:String,default:"left",validator:e=>["left","center","right","justify"].includes(e)},weight:{type:String,default:null,validator:e=>["thin","extralight","light","normal","medium","semibold","bold","extrabold","black"].includes(e)},transform:{type:String,default:null,validator:e=>["uppercase","lowercase","capitalize","normal"].includes(e)},leading:{type:String,default:null,validator:e=>["none","tight","snug","normal","relaxed","loose"].includes(e)},tracking:{type:String,default:null,validator:e=>["tighter","tight","normal","wide","wider","widest"].includes(e)},italic:Boolean,underline:Boolean,lineThrough:Boolean,truncate:Boolean,noWrap:Boolean,required:Boolean,gradient:Boolean,maxLines:{type:Number,default:null},shadow:{type:String,default:null,validator:e=>["sm","md","lg","xl","2xl"].includes(e)},spacing:{type:String,default:null,validator:e=>["tight","normal","relaxed","loose"].includes(e)},responsive:Boolean,opacity:{type:Number,default:null,validator:e=>e>=0&&e<=100}},setup(e){const t=e,n=l.computed(()=>({"body-2xs":"p","body-xs":"p","body-sm":"p","body-md":"p","body-lg":"p","body-xl":"p","body-2xl":"p","text-2xs":"h6","text-xs":"h6","text-sm":"h5","text-md":"h4","text-lg":"h3","text-xl":"h2","text-2xl":"h1","display-xs":"h2","display-sm":"h2","display-md":"h1","display-lg":"h1","display-xl":"h1","display-2xl":"h1",caption:"span",overline:"span",label:"label"})[t.variant]||"p"),i=l.computed(()=>({"body-2xs":"text-[10px] leading-normal","body-xs":"text-xs leading-normal","body-sm":"text-sm leading-relaxed","body-md":"text-base leading-relaxed","body-lg":"text-lg leading-relaxed","body-xl":"text-xl leading-relaxed","body-2xl":"text-2xl leading-relaxed","text-2xs":"text-xs font-semibold leading-snug","text-xs":"text-sm font-semibold leading-snug","text-sm":"text-lg font-semibold leading-snug","text-md":"text-xl font-semibold leading-snug","text-lg":"text-2xl font-bold leading-snug","text-xl":"text-3xl font-bold leading-snug","text-2xl":"text-4xl font-bold leading-snug","display-xs":"text-3xl font-bold leading-tight tracking-tight","display-sm":"text-4xl font-bold leading-tight tracking-tight","display-md":"text-5xl font-bold leading-tight tracking-tight","display-lg":"text-6xl font-bold leading-tight tracking-tight","display-xl":"text-7xl font-bold leading-tight tracking-tighter","display-2xl":"text-8xl font-bold leading-tight tracking-tighter",caption:"text-xs leading-normal ui-text",overline:"text-xs font-medium uppercase tracking-wider leading-normal",label:"text-sm font-medium leading-normal"})[t.variant]),o=l.computed(()=>t.gradient?"bg-linear-to-r from-(--ui-primary) to-(--ui-accent) bg-clip-text text-transparent":{default:"ui-text",primary:"ui-primary",secondary:"ui-text",accent:"ui-accent",success:"ui-success",warning:"ui-warning",danger:"ui-danger",info:"ui-primary",muted:"ui-text",disabled:"ui-text",white:"ui-text",black:"ui-text"}[t.color]),s=l.computed(()=>({left:"text-left",center:"text-center",right:"text-right",justify:"text-justify"})[t.align]),r=l.computed(()=>t.weight?{thin:"font-thin",extralight:"font-extralight",light:"font-light",normal:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extrabold:"font-extrabold",black:"font-black"}[t.weight]:""),d=l.computed(()=>t.transform?{uppercase:"uppercase",lowercase:"lowercase",capitalize:"capitalize",normal:"normal-case"}[t.transform]:""),g=l.computed(()=>t.leading?{none:"leading-none",tight:"leading-tight",snug:"leading-snug",normal:"leading-normal",relaxed:"leading-relaxed",loose:"leading-loose"}[t.leading]:""),u=l.computed(()=>t.tracking?{tighter:"tracking-tighter",tight:"tracking-tight",normal:"tracking-normal",wide:"tracking-wide",wider:"tracking-wider",widest:"tracking-widest"}[t.tracking]:""),c=l.computed(()=>t.shadow?{sm:"drop-shadow-sm",md:"drop-shadow-md",lg:"drop-shadow-lg",xl:"drop-shadow-xl","2xl":"drop-shadow-2xl"}[t.shadow]:""),x=l.computed(()=>t.spacing?{tight:"mb-1",normal:"mb-2",relaxed:"mb-4",loose:"mb-6"}[t.spacing]:""),m=l.computed(()=>t.responsive?"text-sm sm:text-base md:text-lg lg:text-xl":""),p=l.computed(()=>t.maxLines?`line-clamp-${t.maxLines}`:""),h=l.computed(()=>{const a={};return t.opacity!==null&&(a.opacity=t.opacity/100),a}),y=l.computed(()=>[i.value,o.value,s.value,r.value,d.value,g.value,u.value,c.value,x.value,m.value,p.value,{italic:t.italic,underline:t.underline,"line-through":t.lineThrough,truncate:t.truncate&&!t.maxLines,"whitespace-nowrap":t.noWrap,"transition-colors duration-200":!0,"select-none":t.variant==="overline"||t.variant==="label"}]);return(a,v)=>(l.openBlock(),l.createBlock(l.resolveDynamicComponent(n.value),l.mergeProps({class:y.value,style:h.value},a.$attrs),{default:l.withCtx(()=>[l.renderSlot(a.$slots,"default"),e.required?(l.openBlock(),l.createElementBlock("span",f,"*")):l.createCommentVNode("",!0)]),_:3},16,["class","style"]))}};exports.default=b;