@gspa/ui 0.1.3 → 0.2.0

package/dist/components/MultiSelect.js

@@ -0,0 +1,211 @@
+import { ref as d, computed as q, onMounted as U, onUnmounted as X, watch as w, nextTick as b, createElementBlock as a, openBlock as l, createElementVNode as c, createBlock as L, normalizeClass as x, toDisplayString as E, Fragment as H, renderList as R, withCtx as B, createTextVNode as F, Teleport as Q, createVNode as Z, Transition as j, createCommentVNode as J, normalizeStyle as Y, withDirectives as ee, withModifiers as S, vModelText as te } from "vue";
+import oe from "./Badge.js";
+const ne = { class: "relative" }, le = ["id", "disabled"], ie = {
+  key: 0,
+  class: "ui-text-muted"
+}, ae = {
+  key: 1,
+  class: "flex flex-wrap gap-1.5"
+}, re = { class: "px-3 py-2.5 border-b ui-border-strong ui-surface-muted" }, se = ["onClick"], ue = { class: "flex items-center gap-3" }, de = ["checked"], ce = {
+  key: 1,
+  class: "px-4 py-6 text-sm ui-text text-center"
+}, f = 12, g = 4, W = 320, fe = 180, pe = 10050, he = {
+  __name: "MultiSelect",
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    options: {
+      type: Array,
+      required: !0,
+      validator: (i) => i.every((h) => h.value !== void 0 && h.label)
+    },
+    id: {
+      type: String,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    placeholder: {
+      type: String,
+      default: "Select options"
+    },
+    hasError: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(i, { emit: h }) {
+    const n = i, P = h, r = d(!1), p = d(""), _ = d(null), u = d([...n.options]), m = d(null), k = d(null), M = d({}), O = q(() => n.options.filter((e) => n.modelValue.includes(e.value)).map((e) => e.label)), V = () => {
+      r.value = !1, p.value = "", u.value = [...n.options];
+    }, s = () => {
+      if (!m.value || !r.value) return;
+      const e = m.value.getBoundingClientRect(), t = window.innerWidth, o = window.innerHeight, v = Math.max(0, o - e.bottom - g - f), N = Math.max(0, e.top - g - f), C = N > v, G = Math.max(
+        Math.min(W, C ? N : v),
+        Math.min(fe, W)
+      ), K = Math.max(0, t - f * 2), D = Math.min(e.width, K);
+      let y = e.left;
+      y + D > t - f && (y = t - f - D), y < f && (y = f), M.value = {
+        position: "fixed",
+        left: `${y}px`,
+        width: `${D}px`,
+        maxHeight: `${G}px`,
+        zIndex: pe,
+        ...C ? { bottom: `${o - e.top + g}px` } : { top: `${e.bottom + g}px` }
+      };
+    }, T = () => {
+      n.disabled || (r.value ? V() : (r.value = !0, b(() => {
+        s(), _.value?.focus();
+      })));
+    }, z = (e) => {
+      let t;
+      n.modelValue.includes(e) ? t = n.modelValue.filter((o) => o !== e) : t = [...n.modelValue, e], P("update:modelValue", t), b(() => {
+        s();
+      });
+    }, A = () => {
+      if (!p.value.trim())
+        u.value = [...n.options];
+      else {
+        const e = p.value.toLowerCase();
+        u.value = n.options.filter(
+          (t) => t.label.toLowerCase().includes(e)
+        );
+      }
+    }, $ = (e) => {
+      e.key === "Escape" && V();
+    }, I = (e) => {
+      if (!m.value) return;
+      const t = e.target;
+      if (!t) return;
+      const o = k.value && k.value.contains(t), v = m.value.contains(t);
+      !o && !v && V();
+    };
+    return U(() => {
+      document.addEventListener("click", I), window.addEventListener("scroll", s, !0), window.addEventListener("resize", s);
+    }), X(() => {
+      document.removeEventListener("click", I), window.removeEventListener("scroll", s, !0), window.removeEventListener("resize", s);
+    }), w(() => n.options, (e) => {
+      u.value = [...e];
+    }, { immediate: !0 }), w(() => n.modelValue, () => {
+      r.value && b(() => {
+        s();
+      });
+    }), w(u, () => {
+      r.value && b(() => {
+        s();
+      });
+    }), w(r, (e) => {
+      e && s();
+    }), (e, t) => (l(), a("div", ne, [
+      c("button", {
+        id: i.id,
+        ref_key: "buttonRef",
+        ref: m,
+        type: "button",
+        disabled: i.disabled,
+        class: x([
+          "w-full px-3 py-2.5 text-left border rounded-md focus:outline-none focus:ring-2 focus:ring-(--ui-primary) ui-surface  min-h-[42px]",
+          i.hasError ? "border-(--ui-danger)" : "ui-border-strong ",
+          i.disabled ? "ui-surface-muted cursor-not-allowed opacity-50" : "hover:border-(--ui-border-strong)"
+        ]),
+        onClick: T,
+        onKeydown: $
+      }, [
+        O.value.length === 0 ? (l(), a("div", ie, E(i.placeholder || "Select options"), 1)) : (l(), a("div", ae, [
+          (l(!0), a(H, null, R(O.value, (o) => (l(), L(oe, {
+            key: o,
+            variant: "primary",
+            size: "sm"
+          }, {
+            default: B(() => [
+              F(E(o), 1)
+            ]),
+            _: 2
+          }, 1024))), 128))
+        ])),
+        (l(), a("svg", {
+          class: x(["absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 ui-text pointer-events-none transition-transform duration-200", { "rotate-180": r.value }]),
+          fill: "currentColor",
+          viewBox: "0 0 20 20"
+        }, [...t[3] || (t[3] = [
+          c("path", {
+            "fill-rule": "evenodd",
+            d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",
+            "clip-rule": "evenodd"
+          }, null, -1)
+        ])], 2))
+      ], 42, le),
+      (l(), L(Q, { to: "body" }, [
+        Z(j, {
+          "enter-active-class": "transition ease-out duration-100",
+          "enter-from-class": "transform opacity-0 scale-95",
+          "enter-to-class": "transform opacity-100 scale-100",
+          "leave-active-class": "transition ease-in duration-75",
+          "leave-from-class": "transform opacity-100 scale-100",
+          "leave-to-class": "transform opacity-0 scale-95"
+        }, {
+          default: B(() => [
+            r.value ? (l(), a("div", {
+              key: 0,
+              ref_key: "dropdownRef",
+              ref: k,
+              style: Y(M.value),
+              "data-multiselect-dropdown": "",
+              class: "shadow-lg rounded-md text-base ring-1 ring-(--ui-border-strong) ring-opacity-5 overflow-hidden focus:outline-none ui-surface flex flex-col overscroll-contain"
+            }, [
+              c("div", re, [
+                ee(c("input", {
+                  ref_key: "searchInput",
+                  ref: _,
+                  "onUpdate:modelValue": t[0] || (t[0] = (o) => p.value = o),
+                  type: "text",
+                  placeholder: "Search options...",
+                  class: "w-full px-3 py-2 text-sm border ui-border-strong rounded-md focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:border-transparent ui-surface placeholder:text-(--ui-text-muted)",
+                  onInput: A,
+                  onKeydown: t[1] || (t[1] = S(() => {
+                  }, ["stop"]))
+                }, null, 544), [
+                  [te, p.value]
+                ])
+              ]),
+              u.value.length > 0 ? (l(), a("div", {
+                key: 0,
+                class: "overflow-y-auto py-1 flex-1 overscroll-contain",
+                onWheel: t[2] || (t[2] = S(() => {
+                }, ["stop"]))
+              }, [
+                (l(!0), a(H, null, R(u.value, (o) => (l(), a("button", {
+                  key: o.value,
+                  type: "button",
+                  class: x(["cursor-pointer select-none relative py-2.5 pl-3 pr-9 w-full text-left hover:bg-(--ui-primary-soft) focus:bg-(--ui-primary-soft) focus:outline-none transition-colors duration-150", { "ui-primary-soft": i.modelValue.includes(o.value) }]),
+                  onClick: (v) => z(o.value)
+                }, [
+                  c("div", ue, [
+                    c("input", {
+                      type: "checkbox",
+                      checked: i.modelValue.includes(o.value),
+                      class: "h-4 w-4 ui-primary focus:ring-(--ui-primary) ui-border-strong rounded cursor-pointer pointer-events-none",
+                      readonly: "",
+                      tabindex: "-1"
+                    }, null, 8, de),
+                    c("span", {
+                      class: x(["block font-normal truncate", { "ui-primary font-medium": i.modelValue.includes(o.value) }])
+                    }, E(o.label), 3)
+                  ])
+                ], 10, se))), 128))
+              ], 32)) : (l(), a("div", ce, " No options found "))
+            ], 4)) : J("", !0)
+          ]),
+          _: 1
+        })
+      ]))
+    ]));
+  }
+};
+export {
+  he as default
+};

package/dist/components/Notification.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),o=require("class-variance-authority"),k=require("../utils/cn.cjs"),r=require("./Icon.cjs"),y=["aria-live"],b={class:"flex items-start space-x-3"},p={key:0,class:"shrink-0"},h={class:"flex-1 min-w-0"},w={key:0,class:"text-sm font-medium"},C={__name:"Notification",props:{title:String,message:String,variant:{type:String,default:"default",validator:t=>["default","success","warning","danger"].includes(t)},dismissible:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!0},autoClose:{type:Number,default:0}},emits:["dismiss"],setup(t,{emit:i}){const a=t,l=i,s=e.ref(!0),c=o.cva("pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg shadow-lg ring-1 ring-(----ui-bg) ring-opacity-5   ui-surface",{variants:{variant:{default:"border-l-4 border-(--ui-primary)",success:"border-l-4 border-(--ui-success)",warning:"border-l-4 border-(--ui-warning)",danger:"border-l-4 border-(--ui-danger)"}}}),u={default:"info",success:"check-circle",warning:"alert-triangle",danger:"alert-circle"},d=o.cva("h-5 w-5",{variants:{variant:{default:"ui-primary",success:"ui-success",warning:"ui-warning",danger:"ui-danger"}}}),m=e.computed(()=>k.cn(c({variant:a.variant}),"p-4")),f=e.computed(()=>u[a.variant]),v=e.computed(()=>d({variant:a.variant})),n=()=>{s.value=!1,l("dismiss")};return e.onMounted(()=>{a.autoClose>0&&setTimeout(()=>{n()},a.autoClose)}),(g,B)=>(e.openBlock(),e.createBlock(e.Transition,{"enter-active-class":"transition-all duration-300 ease-out","enter-from-class":"transform translate-x-full opacity-0","enter-to-class":"transform translate-x-0 opacity-100","leave-active-class":"transition-all duration-300 ease-in","leave-from-class":"transform translate-x-0 opacity-100","leave-to-class":"transform translate-x-full opacity-0"},{default:e.withCtx(()=>[s.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(m.value),role:"alert","aria-live":t.variant==="danger"?"assertive":"polite"},[e.createElementVNode("div",b,[t.showIcon?(e.openBlock(),e.createElementBlock("div",p,[e.createVNode(r.default,{name:f.value,class:e.normalizeClass(v.value)},null,8,["name","class"])])):e.createCommentVNode("",!0),e.createElementVNode("div",h,[t.title?(e.openBlock(),e.createElementBlock("div",w,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),t.message?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["text-sm",{"mt-1":t.title}])},e.toDisplayString(t.message),3)):e.createCommentVNode("",!0),e.renderSlot(g.$slots,"default")]),t.dismissible?(e.openBlock(),e.createElementBlock("button",{key:1,class:"shrink-0 rounded-md p-1.5 hover:bg-[color:color-mix(in oklab, var(----ui-bg), transparent 95%)] focus:outline-none focus:ring-2 focus:ring-offset-2",onClick:n},[e.createVNode(r.default,{name:"x",class:"h-4 w-4"})])):e.createCommentVNode("",!0)])],10,y)):e.createCommentVNode("",!0)]),_:3}))}};exports.default=C;

package/dist/components/Notification.js

@@ -0,0 +1,121 @@
+import { ref as C, computed as n, onMounted as N, createBlock as V, openBlock as t, Transition as B, withCtx as S, createElementBlock as s, createCommentVNode as i, normalizeClass as r, createElementVNode as c, createVNode as u, renderSlot as E, toDisplayString as d } from "vue";
+import { cva as m } from "class-variance-authority";
+import { cn as I } from "../utils/cn.js";
+import f from "./Icon.js";
+const T = ["aria-live"], _ = { class: "flex items-start space-x-3" }, $ = {
+  key: 0,
+  class: "shrink-0"
+}, z = { class: "flex-1 min-w-0" }, D = {
+  key: 0,
+  class: "text-sm font-medium"
+}, G = {
+  __name: "Notification",
+  props: {
+    title: String,
+    message: String,
+    variant: {
+      type: String,
+      default: "default",
+      validator: (e) => ["default", "success", "warning", "danger"].includes(e)
+    },
+    dismissible: {
+      type: Boolean,
+      default: !0
+    },
+    showIcon: {
+      type: Boolean,
+      default: !0
+    },
+    autoClose: {
+      type: Number,
+      default: 0
+      // 0 means no auto close
+    }
+  },
+  emits: ["dismiss"],
+  setup(e, { emit: v }) {
+    const a = e, g = v, o = C(!0), b = m(
+      "pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg shadow-lg ring-1 ring-(----ui-bg) ring-opacity-5   ui-surface",
+      {
+        variants: {
+          variant: {
+            default: "border-l-4 border-(--ui-primary)",
+            success: "border-l-4 border-(--ui-success)",
+            warning: "border-l-4 border-(--ui-warning)",
+            danger: "border-l-4 border-(--ui-danger)"
+          }
+        }
+      }
+    ), h = {
+      default: "info",
+      success: "check-circle",
+      warning: "alert-triangle",
+      danger: "alert-circle"
+    }, y = m("h-5 w-5", {
+      variants: {
+        variant: {
+          default: "ui-primary",
+          success: "ui-success",
+          warning: "ui-warning",
+          danger: "ui-danger"
+        }
+      }
+    }), w = n(
+      () => I(b({ variant: a.variant }), "p-4")
+    ), p = n(() => h[a.variant]), x = n(() => y({ variant: a.variant })), l = () => {
+      o.value = !1, g("dismiss");
+    };
+    return N(() => {
+      a.autoClose > 0 && setTimeout(() => {
+        l();
+      }, a.autoClose);
+    }), (k, M) => (t(), V(B, {
+      "enter-active-class": "transition-all duration-300 ease-out",
+      "enter-from-class": "transform translate-x-full opacity-0",
+      "enter-to-class": "transform translate-x-0 opacity-100",
+      "leave-active-class": "transition-all duration-300 ease-in",
+      "leave-from-class": "transform translate-x-0 opacity-100",
+      "leave-to-class": "transform translate-x-full opacity-0"
+    }, {
+      default: S(() => [
+        o.value ? (t(), s("div", {
+          key: 0,
+          class: r(w.value),
+          role: "alert",
+          "aria-live": e.variant === "danger" ? "assertive" : "polite"
+        }, [
+          c("div", _, [
+            e.showIcon ? (t(), s("div", $, [
+              u(f, {
+                name: p.value,
+                class: r(x.value)
+              }, null, 8, ["name", "class"])
+            ])) : i("", !0),
+            c("div", z, [
+              e.title ? (t(), s("div", D, d(e.title), 1)) : i("", !0),
+              e.message ? (t(), s("div", {
+                key: 1,
+                class: r(["text-sm", { "mt-1": e.title }])
+              }, d(e.message), 3)) : i("", !0),
+              E(k.$slots, "default")
+            ]),
+            e.dismissible ? (t(), s("button", {
+              key: 1,
+              class: "shrink-0 rounded-md p-1.5 hover:bg-[color:color-mix(in oklab, var(----ui-bg), transparent 95%)] focus:outline-none focus:ring-2 focus:ring-offset-2",
+              onClick: l
+            }, [
+              u(f, {
+                name: "x",
+                class: "h-4 w-4"
+              })
+            ])) : i("", !0)
+          ])
+        ], 10, T)) : i("", !0)
+      ]),
+      _: 3
+    }));
+  }
+};
+export {
+  G as default
+};

package/dist/components/Option.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),o=["value","disabled","selected"],u={__name:"Option",props:{value:{type:[String,Number,Boolean],required:!0},label:{type:String,default:""},disabled:{type:Boolean,default:!1},selected:{type:Boolean,default:!1}},setup(t){const l=t,a=e.computed(()=>["ui-surface-strong","ui-text",l.disabled?"ui-text-soft":"ui-text"]);return(s,d)=>(e.openBlock(),e.createElementBlock("option",{value:t.value,disabled:t.disabled,selected:t.selected,class:e.normalizeClass(a.value)},[e.renderSlot(s.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],10,o))}};exports.default=u;

package/dist/components/Option.js

@@ -0,0 +1,44 @@
+import { computed as s, createElementBlock as o, openBlock as d, normalizeClass as n, renderSlot as u, createTextVNode as i, toDisplayString as r } from "vue";
+const c = ["value", "disabled", "selected"], b = {
+  __name: "Option",
+  props: {
+    value: {
+      type: [String, Number, Boolean],
+      required: !0
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    selected: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    const t = e, l = s(
+      () => [
+        "ui-surface-strong",
+        "ui-text",
+        t.disabled ? "ui-text-soft" : "ui-text"
+      ]
+    );
+    return (a, f) => (d(), o("option", {
+      value: e.value,
+      disabled: e.disabled,
+      selected: e.selected,
+      class: n(l.value)
+    }, [
+      u(a.$slots, "default", {}, () => [
+        i(r(e.label), 1)
+      ])
+    ], 10, c));
+  }
+};
+export {
+  b as default
+};

package/dist/components/Progress.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"),u=require("../utils/cn.cjs"),d=["aria-valuenow"],c={__name:"Progress",props:{value:{type:Number,default:0},max:{type:Number,default:100},size:{type:String,default:"default",validator:a=>["sm","md","lg","default"].includes(a)},variant:{type:String,default:"default",validator:a=>["default","success","warning","danger"].includes(a)}},setup(a){const r=a,l=e.computed(()=>{const t=r.value/r.max*100;return Math.min(Math.max(t,0),100)}),s=n.cva("relative w-full overflow-hidden rounded-full ui-surface-muted  border",{variants:{size:{sm:"h-1.5",default:"h-2",md:"h-3",lg:"h-4"}},defaultVariants:{size:"default"}}),i=n.cva("h-full w-full flex-1 transition-all duration-300 ease-in-out rounded-full",{variants:{variant:{default:"ui-primary-bg",success:"ui-success-bg",warning:"ui-warning-bg",danger:"ui-danger-bg"}},defaultVariants:{variant:"default"}});return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(u.cn)(e.unref(s)({size:a.size}),t.$attrs.class))},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(u.cn)(e.unref(i)({variant:a.variant}))),style:e.normalizeStyle({width:`${l.value}%`}),role:"progressbar","aria-valuenow":l.value,"aria-valuemin":0,"aria-valuemax":100},null,14,d)],2))}};exports.default=c;

package/dist/components/Progress.js

@@ -0,0 +1,77 @@
+import { computed as o, createElementBlock as c, openBlock as f, normalizeClass as n, unref as e, createElementVNode as m, normalizeStyle as v } from "vue";
+import { cva as i } from "class-variance-authority";
+import { cn as s } from "../utils/cn.js";
+const g = ["aria-valuenow"], y = {
+  __name: "Progress",
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    size: {
+      type: String,
+      default: "default",
+      validator: (a) => ["sm", "md", "lg", "default"].includes(a)
+    },
+    variant: {
+      type: String,
+      default: "default",
+      validator: (a) => ["default", "success", "warning", "danger"].includes(a)
+    }
+  },
+  setup(a) {
+    const r = a, l = o(() => {
+      const t = r.value / r.max * 100;
+      return Math.min(Math.max(t, 0), 100);
+    }), u = i(
+      "relative w-full overflow-hidden rounded-full ui-surface-muted  border",
+      {
+        variants: {
+          size: {
+            sm: "h-1.5",
+            default: "h-2",
+            md: "h-3",
+            lg: "h-4"
+          }
+        },
+        defaultVariants: {
+          size: "default"
+        }
+      }
+    ), d = i(
+      "h-full w-full flex-1 transition-all duration-300 ease-in-out rounded-full",
+      {
+        variants: {
+          variant: {
+            default: "ui-primary-bg",
+            success: "ui-success-bg",
+            warning: "ui-warning-bg",
+            danger: "ui-danger-bg"
+          }
+        },
+        defaultVariants: {
+          variant: "default"
+        }
+      }
+    );
+    return (t, p) => (f(), c("div", {
+      class: n(e(s)(e(u)({ size: a.size }), t.$attrs.class))
+    }, [
+      m("div", {
+        class: n(e(s)(e(d)({ variant: a.variant }))),
+        style: v({ width: `${l.value}%` }),
+        role: "progressbar",
+        "aria-valuenow": l.value,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100
+      }, null, 14, g)
+    ], 2));
+  }
+};
+export {
+  y as default
+};

package/dist/components/ProgressBar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),o=require("class-variance-authority"),u=require("../utils/cn.cjs"),h=["aria-valuenow"],y={__name:"ProgressBar",props:{value:{type:Number,default:0},max:{type:Number,default:100},size:{type:String,default:"md",validator:l=>["sm","md","lg"].includes(l)},variant:{type:String,default:"default",validator:l=>["default","success","warning","danger"].includes(l)},showLabel:Boolean,class:String},setup(l){const s=l,t=e.computed(()=>{const a=s.max>0?s.max:100,r=s.value/a*100;return Math.min(Math.max(r,0),100)}),i=o.cva("relative w-full overflow-hidden rounded-full ui-surface-muted border ui-border-strong",{variants:{size:{sm:"h-2",md:"h-3",lg:"h-4"}}}),m=o.cva("h-full w-full flex-1 transition-[width,background-color] duration-300 ease-in-out"),d=e.computed(()=>u.cn(i({size:s.size}),s.class)),n=[{max:20,class:"bg-red-700"},{max:40,class:"bg-orange-600"},{max:60,class:"bg-amber-500"},{max:80,class:"bg-lime-600"},{max:100,class:"bg-emerald-700"}],g={success:[{max:33,class:"bg-emerald-500"},{max:66,class:"bg-emerald-600"},{max:100,class:"bg-emerald-700"}],warning:[{max:33,class:"bg-amber-500"},{max:66,class:"bg-amber-600"},{max:100,class:"bg-orange-700"}],danger:[{max:33,class:"bg-rose-500"},{max:66,class:"bg-red-600"},{max:100,class:"bg-red-700"}]},c=(a,r)=>a.find(f=>r<=f.max)?.class||a[a.length-1].class,v=e.computed(()=>{if(s.variant==="default")return c(n,t.value);const a=g[s.variant]||n;return c(a,t.value)}),b=e.computed(()=>u.cn(m(),v.value)),x=e.computed(()=>"absolute inset-0 flex items-center justify-center text-xs font-medium ui-text"),p=e.computed(()=>({width:`${t.value}%`}));return(a,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(d.value)},[e.createElementVNode("div",{class:e.normalizeClass(b.value),style:e.normalizeStyle(p.value),role:"progressbar","aria-valuenow":t.value,"aria-valuemin":0,"aria-valuemax":100},null,14,h),l.showLabel?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(x.value)},e.toDisplayString(t.value)+"% ",3)):e.createCommentVNode("",!0)],2))}};exports.default=y;

package/dist/components/ProgressBar.js

@@ -0,0 +1,101 @@
+import { computed as l, createElementBlock as i, openBlock as m, normalizeClass as n, createElementVNode as C, createCommentVNode as S, normalizeStyle as z, toDisplayString as _ } from "vue";
+import { cva as u } from "class-variance-authority";
+import { cn as d } from "../utils/cn.js";
+const V = ["aria-valuenow"], M = {
+  __name: "ProgressBar",
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator: (s) => ["sm", "md", "lg"].includes(s)
+    },
+    variant: {
+      type: String,
+      default: "default",
+      validator: (s) => ["default", "success", "warning", "danger"].includes(s)
+    },
+    showLabel: Boolean,
+    class: String
+  },
+  setup(s) {
+    const e = s, t = l(() => {
+      const a = e.max > 0 ? e.max : 100, r = e.value / a * 100;
+      return Math.min(Math.max(r, 0), 100);
+    }), g = u(
+      "relative w-full overflow-hidden rounded-full ui-surface-muted border ui-border-strong",
+      {
+        variants: {
+          size: {
+            sm: "h-2",
+            md: "h-3",
+            lg: "h-4"
+          }
+        }
+      }
+    ), v = u(
+      "h-full w-full flex-1 transition-[width,background-color] duration-300 ease-in-out"
+    ), x = l(
+      () => d(g({ size: e.size }), e.class)
+    ), o = [
+      { max: 20, class: "bg-red-700" },
+      { max: 40, class: "bg-orange-600" },
+      { max: 60, class: "bg-amber-500" },
+      { max: 80, class: "bg-lime-600" },
+      { max: 100, class: "bg-emerald-700" }
+    ], b = {
+      success: [
+        { max: 33, class: "bg-emerald-500" },
+        { max: 66, class: "bg-emerald-600" },
+        { max: 100, class: "bg-emerald-700" }
+      ],
+      warning: [
+        { max: 33, class: "bg-amber-500" },
+        { max: 66, class: "bg-amber-600" },
+        { max: 100, class: "bg-orange-700" }
+      ],
+      danger: [
+        { max: 33, class: "bg-rose-500" },
+        { max: 66, class: "bg-red-600" },
+        { max: 100, class: "bg-red-700" }
+      ]
+    }, c = (a, r) => a.find((y) => r <= y.max)?.class || a[a.length - 1].class, f = l(() => {
+      if (e.variant === "default")
+        return c(o, t.value);
+      const a = b[e.variant] || o;
+      return c(a, t.value);
+    }), p = l(
+      () => d(v(), f.value)
+    ), h = l(
+      () => "absolute inset-0 flex items-center justify-center text-xs font-medium ui-text"
+    ), w = l(() => ({
+      width: `${t.value}%`
+    }));
+    return (a, r) => (m(), i("div", {
+      class: n(x.value)
+    }, [
+      C("div", {
+        class: n(p.value),
+        style: z(w.value),
+        role: "progressbar",
+        "aria-valuenow": t.value,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100
+      }, null, 14, V),
+      s.showLabel ? (m(), i("span", {
+        key: 0,
+        class: n(h.value)
+      }, _(t.value) + "% ", 3)) : S("", !0)
+    ], 2));
+  }
+};
+export {
+  M as default
+};

package/dist/components/Radio.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"),a=require("../utils/cn.cjs"),b={class:"flex items-center space-x-2"},p=["aria-checked","disabled"],f={__name:"Radio",props:{modelValue:null,value:{type:[String,Number,Boolean],required:!0},label:String,disabled:Boolean,size:{type:String,default:"md",validator:s=>["sm","md","lg"].includes(s)},class:String},emits:["update:modelValue"],setup(s,{emit:i}){const l=s,r=i,t=e.computed(()=>l.modelValue===l.value),c=m.cva("aspect-square rounded-full border border-(--ui-primary) ui-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary) focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",{variants:{size:{sm:"h-4 w-4",md:"h-5 w-5",lg:"h-6 w-6"}}}),n=e.computed(()=>a.cn(c({size:l.size}),l.disabled&&"cursor-not-allowed opacity-50",l.class)),d=e.computed(()=>a.cn("flex items-center justify-center rounded-full bg-primary",{"h-2 w-2":l.size==="sm","h-2.5 w-2.5":l.size==="md","h-3 w-3":l.size==="lg"})),u=e.computed(()=>a.cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",!l.disabled&&"cursor-pointer")),o=()=>{l.disabled||r("update:modelValue",l.value)};return(v,g)=>(e.openBlock(),e.createElementBlock("div",b,[e.createElementVNode("button",{type:"button",role:"radio","aria-checked":t.value,disabled:s.disabled,class:e.normalizeClass(n.value),onClick:o},[t.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(d.value)},null,2)):e.createCommentVNode("",!0)],10,p),s.label?(e.openBlock(),e.createElementBlock("label",{key:0,class:e.normalizeClass(u.value),onClick:o},e.toDisplayString(s.label),3)):e.createCommentVNode("",!0)]))}};exports.default=f;

package/dist/components/Radio.js

@@ -0,0 +1,81 @@
+import { computed as s, createElementBlock as a, openBlock as i, createElementVNode as v, createCommentVNode as n, normalizeClass as t, toDisplayString as g } from "vue";
+import { cva as y } from "class-variance-authority";
+import { cn as o } from "../utils/cn.js";
+const h = { class: "flex items-center space-x-2" }, k = ["aria-checked", "disabled"], S = {
+  __name: "Radio",
+  props: {
+    modelValue: null,
+    value: {
+      type: [String, Number, Boolean],
+      required: !0
+    },
+    label: String,
+    disabled: Boolean,
+    size: {
+      type: String,
+      default: "md",
+      validator: (l) => ["sm", "md", "lg"].includes(l)
+    },
+    class: String
+  },
+  emits: ["update:modelValue"],
+  setup(l, { emit: c }) {
+    const e = l, u = c, r = s(() => e.modelValue === e.value), m = y(
+      "aspect-square rounded-full border border-(--ui-primary) ui-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-(--ui-primary) focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      {
+        variants: {
+          size: {
+            sm: "h-4 w-4",
+            md: "h-5 w-5",
+            lg: "h-6 w-6"
+          }
+        }
+      }
+    ), b = s(
+      () => o(
+        m({ size: e.size }),
+        e.disabled && "cursor-not-allowed opacity-50",
+        e.class
+      )
+    ), p = s(
+      () => o(
+        "flex items-center justify-center rounded-full bg-primary",
+        {
+          "h-2 w-2": e.size === "sm",
+          "h-2.5 w-2.5": e.size === "md",
+          "h-3 w-3": e.size === "lg"
+        }
+      )
+    ), f = s(
+      () => o(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        !e.disabled && "cursor-pointer"
+      )
+    ), d = () => {
+      e.disabled || u("update:modelValue", e.value);
+    };
+    return (w, z) => (i(), a("div", h, [
+      v("button", {
+        type: "button",
+        role: "radio",
+        "aria-checked": r.value,
+        disabled: l.disabled,
+        class: t(b.value),
+        onClick: d
+      }, [
+        r.value ? (i(), a("div", {
+          key: 0,
+          class: t(p.value)
+        }, null, 2)) : n("", !0)
+      ], 10, k),
+      l.label ? (i(), a("label", {
+        key: 0,
+        class: t(f.value),
+        onClick: d
+      }, g(l.label), 3)) : n("", !0)
+    ]));
+  }
+};
+export {
+  S as default
+};