@gspa/ui 0.1.1 → 0.1.4

package/dist/components/Alert.js

@@ -0,0 +1,222 @@
+import { ref as V, computed as c, createBlock as u, openBlock as r, Transition as $, withCtx as k, createElementBlock as o, createCommentVNode as a, normalizeClass as l, unref as p, createElementVNode as d, resolveDynamicComponent as A, toDisplayString as m, renderSlot as x, createTextVNode as y, Fragment as N, renderList as D, createVNode as T, h as s } from "vue";
+import { cva as E } from "class-variance-authority";
+import { cn as X } from "../utils/cn.js";
+import F from "./Button.js";
+const O = { class: "flex items-start gap-3" }, q = {
+  key: 0,
+  class: "shrink-0 mt-0.5"
+}, G = { class: "flex-1 min-w-0" }, H = {
+  key: 0,
+  class: "font-medium text-sm mb-1"
+}, J = {
+  key: 1,
+  class: "mt-3 flex gap-2"
+}, K = ["aria-label"], Z = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+  __name: "Alert",
+  props: {
+    variant: {
+      type: String,
+      default: "info",
+      validator: (e) => ["info", "success", "warning", "error", "default", "danger"].includes(
+        e
+      )
+    },
+    title: String,
+    message: String,
+    dismissible: { type: Boolean, default: !1 },
+    dismissLabel: { type: String, default: "Dismiss alert" },
+    showIcon: { type: Boolean, default: !0 },
+    actions: { type: Array, default: () => [] },
+    autoClose: { type: [Boolean, Number], default: !1 }
+  },
+  emits: ["dismiss", "action"],
+  setup(e, { emit: C }) {
+    const n = e, f = C, g = V(!0), v = () => {
+      g.value = !1, f("dismiss");
+    }, b = (t) => {
+      f("action", t), t.onClick && t.onClick();
+    };
+    if (n.autoClose) {
+      const t = typeof n.autoClose == "number" ? n.autoClose : 5e3;
+      setTimeout(v, t);
+    }
+    const h = {
+      render() {
+        return s("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor"
+        }, [
+          s("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "stroke-width": "2",
+            d: "M12 9v2m0 4h.01M21 12A9 9 0 1112 3a9 9 0 019 9z"
+          })
+        ]);
+      }
+    }, B = {
+      render() {
+        return s("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor"
+        }, [
+          s("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "stroke-width": "2",
+            d: "M9 12l2 2l4-4m5 2a9 9 0 11-18 0a9 9 0 0118 0z"
+          })
+        ]);
+      }
+    }, M = {
+      render() {
+        return s("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor"
+        }, [
+          s("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "stroke-width": "2",
+            d: "M12 9v2m0 4h.01M10.29 3.86L1.82 18a1.5 1.5 0 001.29 2.25h18.78a1.5 1.5 0 001.29-2.25L13.71 3.86a1.5 1.5 0 00-2.42 0z"
+          })
+        ]);
+      }
+    }, w = {
+      render() {
+        return s("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor"
+        }, [
+          s("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "stroke-width": "2",
+            d: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0a9 9 0 0118 0z"
+          })
+        ]);
+      }
+    }, z = {
+      render() {
+        return s("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor"
+        }, [
+          s("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "stroke-width": "2",
+            d: "M6 18L18 6M6 6l12 12"
+          })
+        ]);
+      }
+    }, I = c(() => ({
+      info: h,
+      success: B,
+      warning: M,
+      error: w,
+      default: h,
+      danger: w
+    })[n.variant]), j = E(
+      "relative w-full rounded-lg border p-4 flex items-start gap-3  ",
+      {
+        variants: {
+          variant: {
+            default: "ui-surface ui-text ",
+            danger: "ui-danger-soft ui-danger",
+            info: "ui-primary-soft ui-primary",
+            success: "ui-success-soft ui-success",
+            warning: "ui-warning-soft ui-warning",
+            error: "ui-danger-soft ui-danger"
+          }
+        },
+        defaultVariants: { variant: "default" }
+      }
+    ), L = c(() => ["w-5 h-5", {
+      info: "ui-primary",
+      success: "ui-success",
+      warning: "ui-warning",
+      error: "ui-danger",
+      default: "ui-text",
+      danger: "ui-danger"
+    }[n.variant]]), S = c(() => ["shrink-0 p-1 rounded-md transition-colors duration-200", {
+      info: "ui-primary hover:text-(--ui-primary) hover:bg-(--ui-primary-soft)",
+      success: "ui-success hover:text-(--ui-success) hover:bg-(--ui-success-soft)",
+      warning: "ui-warning hover:text-(--ui-warning) hover:bg-(--ui-warning-soft)",
+      error: "ui-danger hover:text-(--ui-danger) hover:bg-(--ui-danger-soft)",
+      default: "ui-text hover:text-(--ui-text) hover:bg-(--ui-surface)",
+      danger: "ui-danger hover:text-(--ui-danger) hover:bg-(--ui-danger-soft)"
+    }[n.variant]]);
+    return (t, P) => (r(), u($, {
+      "enter-active-class": "transition-all duration-300",
+      "enter-from-class": "opacity-0 scale-95",
+      "enter-to-class": "opacity-100 scale-100",
+      "leave-active-class": "transition-all duration-200",
+      "leave-from-class": "opacity-100 scale-100",
+      "leave-to-class": "opacity-0 scale-95"
+    }, {
+      default: k(() => [
+        g.value ? (r(), o("div", {
+          key: 0,
+          class: l(p(X)(p(j)({ variant: e.variant }), t.$attrs.class)),
+          role: "alert"
+        }, [
+          d("div", O, [
+            e.showIcon ? (r(), o("div", q, [
+              (r(), u(A(I.value), {
+                class: l(L.value)
+              }, null, 8, ["class"]))
+            ])) : a("", !0),
+            d("div", G, [
+              e.title ? (r(), o("h4", H, m(e.title), 1)) : a("", !0),
+              d("div", {
+                class: l(["text-sm", { "mt-0": !e.title, "mt-1": e.title }])
+              }, [
+                x(t.$slots, "default", {}, () => [
+                  y(m(e.message), 1)
+                ])
+              ], 2),
+              t.$slots.actions || e.actions.length > 0 ? (r(), o("div", J, [
+                x(t.$slots, "actions", {}, () => [
+                  (r(!0), o(N, null, D(e.actions, (i) => (r(), u(F, {
+                    key: i.label,
+                    variant: i.variant || "outline",
+                    size: i.size || "sm",
+                    onClick: (Q) => b(i)
+                  }, {
+                    default: k(() => [
+                      y(m(i.label), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["variant", "size", "onClick"]))), 128))
+                ])
+              ])) : a("", !0)
+            ]),
+            e.dismissible ? (r(), o("button", {
+              key: 1,
+              class: l(S.value),
+              "aria-label": e.dismissLabel,
+              onClick: v
+            }, [
+              T(z, { class: "w-4 h-4" })
+            ], 10, K)) : a("", !0)
+          ])
+        ], 2)) : a("", !0)
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  Z as default
+};

package/dist/components/Avatar.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"),m=require("./Icon.cjs"),f=["src","alt"],g={__name:"Avatar",props:{src:String,alt:String,initials:String,size:{type:String,default:"md",validator:s=>["xs","sm","md","lg","xl"].includes(s)},variant:{type:String,default:"default",validator:s=>["default","outline"].includes(s)},class:String},setup(s){const t=s,a=e.ref(!1),r=d.cva("relative flex shrink-0 overflow-hidden rounded-full",{variants:{size:{xs:"h-6 w-6",sm:"h-8 w-8",md:"h-10 w-10",lg:"h-12 w-12",xl:"h-16 w-16"},variant:{default:"bg-muted",outline:"border-2 ui-border-strong  ui-surface "}}}),n=e.computed(()=>l.cn(r({size:t.size,variant:t.variant}),t.class)),i=e.computed(()=>"aspect-square h-full w-full object-cover"),c=e.computed(()=>l.cn("flex h-full w-full items-center justify-center rounded-full bg-muted font-medium text-muted-foreground",{"text-xs":t.size==="xs","text-sm":t.size==="sm","text-base":t.size==="md","text-lg":t.size==="lg","text-xl":t.size==="xl"})),o=e.computed(()=>l.cn("h-4 w-4 text-muted-foreground",{"h-3 w-3":t.size==="xs","h-4 w-4":t.size==="sm"||t.size==="md","h-5 w-5":t.size==="lg","h-6 w-6":t.size==="xl"})),u=()=>{a.value=!0};return(v,x)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(n.value)},[s.src?(e.openBlock(),e.createElementBlock("img",{key:0,src:s.src,alt:s.alt,class:e.normalizeClass(i.value),onError:u},null,42,f)):s.initials?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(c.value)},e.toDisplayString(s.initials),3)):(e.openBlock(),e.createBlock(m.default,{key:2,name:"user",class:e.normalizeClass(o.value)},null,8,["class"]))],2))}};exports.default=g;

package/dist/components/Avatar.js

@@ -0,0 +1,86 @@
+import { ref as g, computed as t, createElementBlock as i, openBlock as a, normalizeClass as l, createBlock as x, toDisplayString as v } from "vue";
+import { cva as h } from "class-variance-authority";
+import { cn as r } from "../utils/cn.js";
+import z from "./Icon.js";
+const w = ["src", "alt"], E = {
+  __name: "Avatar",
+  props: {
+    src: String,
+    alt: String,
+    initials: String,
+    size: {
+      type: String,
+      default: "md",
+      validator: (s) => ["xs", "sm", "md", "lg", "xl"].includes(s)
+    },
+    variant: {
+      type: String,
+      default: "default",
+      validator: (s) => ["default", "outline"].includes(s)
+    },
+    class: String
+  },
+  setup(s) {
+    const e = s, n = g(!1), o = h(
+      "relative flex shrink-0 overflow-hidden rounded-full",
+      {
+        variants: {
+          size: {
+            xs: "h-6 w-6",
+            sm: "h-8 w-8",
+            md: "h-10 w-10",
+            lg: "h-12 w-12",
+            xl: "h-16 w-16"
+          },
+          variant: {
+            default: "bg-muted",
+            outline: "border-2 ui-border-strong  ui-surface "
+          }
+        }
+      }
+    ), c = t(
+      () => r(o({ size: e.size, variant: e.variant }), e.class)
+    ), u = t(() => "aspect-square h-full w-full object-cover"), m = t(
+      () => r(
+        "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium text-muted-foreground",
+        {
+          "text-xs": e.size === "xs",
+          "text-sm": e.size === "sm",
+          "text-base": e.size === "md",
+          "text-lg": e.size === "lg",
+          "text-xl": e.size === "xl"
+        }
+      )
+    ), d = t(
+      () => r("h-4 w-4 text-muted-foreground", {
+        "h-3 w-3": e.size === "xs",
+        "h-4 w-4": e.size === "sm" || e.size === "md",
+        "h-5 w-5": e.size === "lg",
+        "h-6 w-6": e.size === "xl"
+      })
+    ), f = () => {
+      n.value = !0;
+    };
+    return (k, p) => (a(), i("div", {
+      class: l(c.value)
+    }, [
+      s.src ? (a(), i("img", {
+        key: 0,
+        src: s.src,
+        alt: s.alt,
+        class: l(u.value),
+        onError: f
+      }, null, 42, w)) : s.initials ? (a(), i("span", {
+        key: 1,
+        class: l(m.value)
+      }, v(s.initials), 3)) : (a(), x(z, {
+        key: 2,
+        name: "user",
+        class: l(d.value)
+      }, null, 8, ["class"]))
+    ], 2));
+  }
+};
+export {
+  E as default
+};

package/dist/components/Badge.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),d=require("class-variance-authority"),l=require("../utils/cn.cjs"),c=require("./Icon.cjs"),m=["aria-label"],b=Object.assign({inheritAttrs:!1},{__name:"Badge",props:{variant:{type:String,default:"default",validator:e=>["default","secondary","danger","primary","outline","success","warning","info","ghost","link","subtle","dark","light","primaryOutline","dangerOutline","successOutline","gradient"].includes(e)},size:{type:String,default:"md",validator:e=>["sm","md","lg"].includes(e)},shape:{type:String,default:"rounded",validator:e=>["rounded","pill","square"].includes(e)},icon:{type:[String,Object],default:null},dismissible:{type:Boolean,default:!1},dismissLabel:{type:String,default:"Dismiss"}},emits:["dismiss"],setup(e,{emit:t}){const a=e,s=t,o=()=>s("dismiss"),u=d.cva("inline-flex items-center font-medium border transition-all duration-200",{variants:{variant:{default:"border border-(--ui-primary-soft) ui-primary-soft ui-primary hover:bg-(--ui-primary-soft) dark:border-(--ui-primary-soft) dark:bg-(--ui-primary-soft) dark:text-(--ui-primary)",secondary:"border ui-border-strong ui-surface-muted ui-text hover:bg-(--ui-surface) dark:border-(--ui-border-strong) dark:bg-(--ui-surface) dark:text-(--ui-text)",danger:"border border-(--ui-danger-soft) ui-danger-soft ui-danger hover:bg-(--ui-danger-soft) dark:border-(--ui-danger-soft) dark:bg-(--ui-danger-soft) dark:text-(--ui-danger)",primary:"border border-(--ui-primary-soft) ui-primary-soft ui-primary hover:bg-(--ui-primary-soft) dark:border-(--ui-primary-soft) dark:bg-(--ui-primary-soft) dark:text-(--ui-primary)",outline:"ui-text border",success:"border border-(--ui-success-soft) ui-success-soft ui-success dark:border-(--ui-success-soft) dark:bg-(--ui-success-soft) dark:text-(--ui-success)",warning:"border border-(--ui-warning-soft) ui-warning-soft ui-warning hover:bg-(--ui-warning-soft) dark:border-(--ui-warning-soft) dark:bg-(--ui-warning-soft) dark:text-(--ui-warning)",info:"border border-(--ui-primary-soft) ui-primary-soft ui-primary hover:bg-(--ui-primary-soft) dark:border-(--ui-primary-soft) dark:bg-(--ui-primary-soft) dark:text-(--ui-primary)",ghost:"bg-transparent ui-text hover:bg-(--ui-surface)",link:"ui-primary hover:underline",subtle:"ui-surface-muted ui-text hover:bg-(--ui-bg)",dark:"ui-bg ui-text hover:bg-(--ui-bg)",light:"ui-surface-muted ui-text border ui-border-strong hover:bg-(--ui-surface)",primaryOutline:"border border-(--ui-primary) ui-primary bg-transparent hover:bg-(--ui-primary-soft)",dangerOutline:"border border-(--ui-danger) ui-danger bg-transparent hover:bg-(--ui-danger-soft)",successOutline:"border border-(--ui-success) ui-success bg-transparent hover:bg-(--ui-success-soft)",gradient:"bg-linear-to-r from-(--ui-primary-soft) to-(--ui-accent) ui-text hover:from-(--ui-primary) hover:to-(--ui-accent)"},size:{sm:"px-2 py-0.5 text-xs",md:"px-2.5 py-1 text-sm",lg:"px-3 py-1.5 text-base"},shape:{rounded:"rounded-md",pill:"rounded-full",square:"rounded-none"}},defaultVariants:{variant:"default",size:"md",shape:"rounded"}}),n=r.computed(()=>["mr-1",{sm:"w-3 h-3",md:"w-4 h-4",lg:"w-5 h-5"}[a.size]]);return(i,g)=>(r.openBlock(),r.createElementBlock("span",{class:r.normalizeClass(r.unref(l.cn)(r.unref(u)({variant:e.variant,size:e.size,shape:e.shape}),i.$attrs.class))},[e.icon?(r.openBlock(),r.createBlock(r.resolveDynamicComponent(e.icon),{key:0,class:r.normalizeClass(n.value)},null,8,["class"])):r.createCommentVNode("",!0),r.renderSlot(i.$slots,"default"),e.dismissible?(r.openBlock(),r.createElementBlock("button",{key:1,class:"ml-1 hover:bg-[color:color-mix(in oklab, var(--ui-bg), transparent 90%)] rounded-full p-0.5 transition-colors","aria-label":e.dismissLabel,onClick:o},[r.createVNode(c.default,{icon:"circle-xmark",class:"w-3 h-3"})],8,m)):r.createCommentVNode("",!0)],2))}});exports.default=b;

package/dist/components/Badge.js

@@ -0,0 +1,109 @@
+import { computed as b, createElementBlock as t, openBlock as i, normalizeClass as a, unref as s, createBlock as g, createCommentVNode as o, renderSlot as f, resolveDynamicComponent as p, createVNode as y } from "vue";
+import { cva as h } from "class-variance-authority";
+import { cn as k } from "../utils/cn.js";
+import v from "./Icon.js";
+const x = ["aria-label"], C = /* @__PURE__ */ Object.assign({
+  inheritAttrs: !1
+}, {
+  __name: "Badge",
+  props: {
+    variant: {
+      type: String,
+      default: "default",
+      validator: (r) => ["default", "secondary", "danger", "primary", "outline", "success", "warning", "info", "ghost", "link", "subtle", "dark", "light", "primaryOutline", "dangerOutline", "successOutline", "gradient"].includes(r)
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator: (r) => ["sm", "md", "lg"].includes(r)
+    },
+    shape: {
+      type: String,
+      default: "rounded",
+      validator: (r) => ["rounded", "pill", "square"].includes(r)
+    },
+    icon: {
+      type: [String, Object],
+      default: null
+    },
+    dismissible: {
+      type: Boolean,
+      default: !1
+    },
+    dismissLabel: {
+      type: String,
+      default: "Dismiss"
+    }
+  },
+  emits: ["dismiss"],
+  setup(r, { emit: u }) {
+    const n = r, d = u, l = () => d("dismiss"), c = h(
+      "inline-flex items-center font-medium border transition-all duration-200",
+      {
+        variants: {
+          variant: {
+            default: "border border-(--ui-primary-soft) ui-primary-soft ui-primary hover:bg-(--ui-primary-soft) dark:border-(--ui-primary-soft) dark:bg-(--ui-primary-soft) dark:text-(--ui-primary)",
+            secondary: "border ui-border-strong ui-surface-muted ui-text hover:bg-(--ui-surface) dark:border-(--ui-border-strong) dark:bg-(--ui-surface) dark:text-(--ui-text)",
+            danger: "border border-(--ui-danger-soft) ui-danger-soft ui-danger hover:bg-(--ui-danger-soft) dark:border-(--ui-danger-soft) dark:bg-(--ui-danger-soft) dark:text-(--ui-danger)",
+            primary: "border border-(--ui-primary-soft) ui-primary-soft ui-primary hover:bg-(--ui-primary-soft) dark:border-(--ui-primary-soft) dark:bg-(--ui-primary-soft) dark:text-(--ui-primary)",
+            outline: "ui-text border",
+            success: "border border-(--ui-success-soft) ui-success-soft ui-success dark:border-(--ui-success-soft) dark:bg-(--ui-success-soft) dark:text-(--ui-success)",
+            warning: "border border-(--ui-warning-soft) ui-warning-soft ui-warning hover:bg-(--ui-warning-soft) dark:border-(--ui-warning-soft) dark:bg-(--ui-warning-soft) dark:text-(--ui-warning)",
+            info: "border border-(--ui-primary-soft) ui-primary-soft ui-primary hover:bg-(--ui-primary-soft) dark:border-(--ui-primary-soft) dark:bg-(--ui-primary-soft) dark:text-(--ui-primary)",
+            ghost: "bg-transparent ui-text hover:bg-(--ui-surface)",
+            link: "ui-primary hover:underline",
+            subtle: "ui-surface-muted ui-text hover:bg-(--ui-bg)",
+            dark: "ui-bg ui-text hover:bg-(--ui-bg)",
+            light: "ui-surface-muted ui-text border ui-border-strong hover:bg-(--ui-surface)",
+            primaryOutline: "border border-(--ui-primary) ui-primary bg-transparent hover:bg-(--ui-primary-soft)",
+            dangerOutline: "border border-(--ui-danger) ui-danger bg-transparent hover:bg-(--ui-danger-soft)",
+            successOutline: "border border-(--ui-success) ui-success bg-transparent hover:bg-(--ui-success-soft)",
+            gradient: "bg-linear-to-r from-(--ui-primary-soft) to-(--ui-accent) ui-text hover:from-(--ui-primary) hover:to-(--ui-accent)"
+          },
+          size: {
+            sm: "px-2 py-0.5 text-xs",
+            md: "px-2.5 py-1 text-sm",
+            lg: "px-3 py-1.5 text-base"
+          },
+          shape: {
+            rounded: "rounded-md",
+            pill: "rounded-full",
+            square: "rounded-none"
+          }
+        },
+        defaultVariants: {
+          variant: "default",
+          size: "md",
+          shape: "rounded"
+        }
+      }
+    ), m = b(() => ["mr-1", {
+      sm: "w-3 h-3",
+      md: "w-4 h-4",
+      lg: "w-5 h-5"
+    }[n.size]]);
+    return (e, w) => (i(), t("span", {
+      class: a(s(k)(s(c)({ variant: r.variant, size: r.size, shape: r.shape }), e.$attrs.class))
+    }, [
+      r.icon ? (i(), g(p(r.icon), {
+        key: 0,
+        class: a(m.value)
+      }, null, 8, ["class"])) : o("", !0),
+      f(e.$slots, "default"),
+      r.dismissible ? (i(), t("button", {
+        key: 1,
+        class: "ml-1 hover:bg-[color:color-mix(in oklab, var(--ui-bg), transparent 90%)] rounded-full p-0.5 transition-colors",
+        "aria-label": r.dismissLabel,
+        onClick: l
+      }, [
+        y(v, {
+          icon: "circle-xmark",
+          class: "w-3 h-3"
+        })
+      ], 8, x)) : o("", !0)
+    ], 2));
+  }
+});
+export {
+  C as default
+};

package/dist/components/Breadcrumb.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"),s=require("../utils/cn.cjs"),i=require("./Icon.cjs"),u=["aria-label"],m={class:"flex items-center space-x-1"},d={__name:"Breadcrumb",props:{items:{type:Array,required:!0,validator:t=>t.every(r=>r.label)},separator:{type:String,default:"chevron-right"},ariaLabel:{type:String,default:"Breadcrumb navigation"},variant:{type:String,default:"default",validator:t=>["default","ghost"].includes(t)}},setup(t){const r=t,l=c.cva("",{variants:{variant:{default:"",ghost:"text-muted-foreground"}}}),o=e.computed(()=>s.cn(l({variant:r.variant})));return(f,h)=>(e.openBlock(),e.createElementBlock("nav",{"aria-label":t.ariaLabel,class:e.normalizeClass(["flex",o.value])},[e.createElementVNode("ol",m,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,(n,a)=>(e.openBlock(),e.createElementBlock("li",{key:a,class:"flex items-center"},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.href?"a":"span"),{href:n.href,class:e.normalizeClass(["text-sm font-medium transition-colors hover:text-(--ui-text)",a===t.items.length-1?"ui-text":"ui-text hover:text-(--ui-text)"]),"aria-current":a===t.items.length-1?"page":void 0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.label),1)]),_:2},1032,["href","class","aria-current"])),a<t.items.length-1?(e.openBlock(),e.createBlock(i.default,{key:0,name:t.separator,class:"mx-2 h-4 w-4 text-muted-foreground"},null,8,["name"])):e.createCommentVNode("",!0)]))),128))])],10,u))}};exports.default=d;

package/dist/components/Breadcrumb.js

@@ -0,0 +1,72 @@
+import { computed as m, createElementBlock as l, openBlock as t, normalizeClass as i, createElementVNode as u, Fragment as d, renderList as f, createBlock as s, createCommentVNode as h, resolveDynamicComponent as v, withCtx as g, createTextVNode as x, toDisplayString as b } from "vue";
+import { cva as p } from "class-variance-authority";
+import { cn as y } from "../utils/cn.js";
+import k from "./Icon.js";
+const B = ["aria-label"], C = { class: "flex items-center space-x-1" }, E = {
+  __name: "Breadcrumb",
+  props: {
+    items: {
+      type: Array,
+      required: !0,
+      validator: (e) => e.every((r) => r.label)
+    },
+    separator: {
+      type: String,
+      default: "chevron-right"
+    },
+    ariaLabel: {
+      type: String,
+      default: "Breadcrumb navigation"
+    },
+    variant: {
+      type: String,
+      default: "default",
+      validator: (e) => ["default", "ghost"].includes(e)
+    }
+  },
+  setup(e) {
+    const r = e, o = p("", {
+      variants: {
+        variant: {
+          default: "",
+          ghost: "text-muted-foreground"
+        }
+      }
+    }), c = m(
+      () => y(o({ variant: r.variant }))
+    );
+    return (S, V) => (t(), l("nav", {
+      "aria-label": e.ariaLabel,
+      class: i(["flex", c.value])
+    }, [
+      u("ol", C, [
+        (t(!0), l(d, null, f(e.items, (n, a) => (t(), l("li", {
+          key: a,
+          class: "flex items-center"
+        }, [
+          (t(), s(v(n.href ? "a" : "span"), {
+            href: n.href,
+            class: i([
+              "text-sm font-medium transition-colors hover:text-(--ui-text)",
+              a === e.items.length - 1 ? "ui-text" : "ui-text hover:text-(--ui-text)"
+            ]),
+            "aria-current": a === e.items.length - 1 ? "page" : void 0
+          }, {
+            default: g(() => [
+              x(b(n.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["href", "class", "aria-current"])),
+          a < e.items.length - 1 ? (t(), s(k, {
+            key: 0,
+            name: e.separator,
+            class: "mx-2 h-4 w-4 text-muted-foreground"
+          }, null, 8, ["name"])) : h("", !0)
+        ]))), 128))
+      ])
+    ], 10, B));
+  }
+};
+export {
+  E as default
+};

package/dist/components/Button.cjs

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