@gspa/ui 0.1.3 → 0.2.0

package/dist/components/Calendar.js

@@ -0,0 +1,341 @@
+import { ref as y, computed as p, watch as j, onMounted as Z, onBeforeUnmount as _, createElementBlock as l, openBlock as s, createElementVNode as r, createVNode as ee, createCommentVNode as x, withModifiers as E, Transition as te, withCtx as ne, normalizeClass as S, toDisplayString as g, Fragment as k, renderList as D } from "vue";
+const ae = { class: "relative w-full" }, re = { class: "relative" }, oe = ["id", "value", "disabled", "placeholder", "required", "aria-describedby"], le = { class: "flex items-center justify-between mb-3" }, se = { class: "text-sm font-medium" }, ie = { class: "grid grid-cols-7 gap-1 mb-2" }, ue = { class: "grid grid-cols-7 gap-1" }, de = ["disabled", "onClick"], ce = {
+  key: 0,
+  class: "mt-4 pt-3 border-t ui-border-strong"
+}, fe = {
+  key: 0,
+  class: "border-l pl-3 ui-border-strong"
+}, me = { class: "max-h-[260px] overflow-y-auto pr-1 space-y-1" }, ve = ["onClick"], ge = {
+  __name: "Calendar",
+  props: {
+    id: String,
+    modelValue: [String, Date],
+    disabled: Boolean,
+    required: Boolean,
+    min: [String, Date],
+    max: [String, Date],
+    placeholder: {
+      type: String,
+      default: "Select date"
+    },
+    format: {
+      type: String,
+      default: "MM/DD/YYYY"
+    },
+    clearable: {
+      type: Boolean,
+      default: !0
+    },
+    showToday: {
+      type: Boolean,
+      default: !0
+    },
+    calendarPosition: {
+      type: String,
+      default: "left-0"
+    },
+    ariaDescribedby: String,
+    enableTime: {
+      type: Boolean,
+      default: !1
+    },
+    minuteInterval: {
+      type: Number,
+      default: 1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(i, { emit: H }) {
+    const u = i, M = H, v = y(!1), h = /* @__PURE__ */ new Date(), o = y(h.getMonth()), d = y(h.getFullYear()), c = y(null), b = y("00:00"), L = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], P = p(
+      () => new Date(d.value, o.value).toLocaleString("default", {
+        month: "long"
+      })
+    ), T = p(() => new Date(d.value, o.value + 1, 0).getDate()), q = p(() => new Date(d.value, o.value, 1).getDay()), $ = p(() => {
+      const n = new Date(d.value, o.value, 0).getDate(), e = q.value;
+      return Array.from({ length: e }, (t, a) => n - e + a + 1);
+    }), z = p(() => {
+      const n = $.value.length + T.value, e = n % 7 === 0 ? 0 : 7 - n % 7;
+      return Array.from({ length: e }, (t, a) => a + 1);
+    }), Y = p(() => c.value ? u.enableTime ? A(c.value) : V(c.value) : ""), O = p(() => {
+      const n = Math.min(60, Math.max(1, Number(u.minuteInterval) || 1)), e = [];
+      for (let t = 0; t < 24; t++)
+        for (let a = 0; a < 60; a += n) {
+          const f = String(t).padStart(2, "0"), m = String(a).padStart(2, "0");
+          e.push(`${f}:${m}`);
+        }
+      return e;
+    });
+    function V(n) {
+      if (!n) return "";
+      const e = new Date(n), t = String(e.getMonth() + 1).padStart(2, "0"), a = String(e.getDate()).padStart(2, "0"), f = e.getFullYear();
+      return u.format.replace("MM", t).replace("DD", a).replace("YYYY", f);
+    }
+    function A(n) {
+      const e = V(n), t = String(n.getHours()).padStart(2, "0"), a = String(n.getMinutes()).padStart(2, "0");
+      return `${e} ${t}:${a}`;
+    }
+    function w(n) {
+      if (!n) return null;
+      if (n instanceof Date) return n;
+      if (typeof n == "string") {
+        if (n.includes("T")) {
+          const [a, f] = n.split("T"), m = w(a);
+          if (!m) return null;
+          const [R = "00", X = "00"] = (f || "").slice(0, 5).split(":");
+          return m.setHours(parseInt(R, 10) || 0, parseInt(X, 10) || 0, 0, 0), m;
+        }
+        const t = n.split("-");
+        if (t.length === 3) {
+          const a = parseInt(t[0], 10), f = parseInt(t[1], 10) - 1, m = parseInt(t[2], 10);
+          return new Date(a, f, m);
+        }
+      }
+      const e = new Date(n);
+      return isNaN(e.getTime()) ? null : e;
+    }
+    function U(n) {
+      if (!c.value) return !1;
+      const e = new Date(c.value);
+      return e.getDate() === n && e.getMonth() === o.value && e.getFullYear() === d.value;
+    }
+    function C(n) {
+      const e = new Date(d.value, o.value, n);
+      if (u.min) {
+        const t = w(u.min);
+        if (t && e < t) return !0;
+      }
+      if (u.max) {
+        const t = w(u.max);
+        if (t && e > t) return !0;
+      }
+      return !1;
+    }
+    function W() {
+      u.disabled || (v.value = !v.value);
+    }
+    function B() {
+      v.value = !1;
+    }
+    function G() {
+      o.value === 0 ? (o.value = 11, d.value--) : o.value--;
+    }
+    function J() {
+      o.value === 11 ? (o.value = 0, d.value++) : o.value++;
+    }
+    function I(n) {
+      if (C(n)) return;
+      const e = new Date(d.value, o.value, n);
+      c.value = e, N(e), u.enableTime || (v.value = !1);
+    }
+    function N(n) {
+      const e = n.getFullYear(), t = String(n.getMonth() + 1).padStart(2, "0"), a = String(n.getDate()).padStart(2, "0");
+      if (!u.enableTime) {
+        M("update:modelValue", `${e}-${t}-${a}`);
+        return;
+      }
+      const [f = "00", m = "00"] = b.value.split(":");
+      M("update:modelValue", `${e}-${t}-${a}T${f}:${m}`);
+    }
+    function K() {
+      o.value = h.getMonth(), d.value = h.getFullYear(), I(h.getDate());
+    }
+    function Q() {
+      c.value = null, b.value = "00:00", M("update:modelValue", "");
+    }
+    j(() => u.modelValue, (n) => {
+      if (n) {
+        const e = w(n);
+        if (e) {
+          c.value = e;
+          const t = String(e.getHours()).padStart(2, "0"), a = String(e.getMinutes()).padStart(2, "0");
+          b.value = `${t}:${a}`, o.value = e.getMonth(), d.value = e.getFullYear();
+        }
+      } else
+        c.value = null;
+    }, { immediate: !0 }), j(b, (n) => {
+      if (!u.enableTime || !c.value) return;
+      const [e = "00", t = "00"] = (n || "00:00").split(":");
+      c.value.setHours(parseInt(e, 10) || 0, parseInt(t, 10) || 0, 0, 0), N(c.value);
+    });
+    function F(n) {
+      n.key === "Escape" && v.value && B();
+    }
+    return Z(() => {
+      document.addEventListener("keydown", F);
+    }), _(() => {
+      document.removeEventListener("keydown", F);
+    }), (n, e) => (s(), l("div", ae, [
+      r("div", re, [
+        r("input", {
+          id: i.id,
+          type: "text",
+          value: Y.value,
+          readonly: "",
+          disabled: i.disabled,
+          placeholder: i.placeholder,
+          required: i.required,
+          "aria-describedby": i.ariaDescribedby,
+          class: "w-full px-3 py-2 pr-10 border ui-border-strong rounded-md bg-(--ui-bg) ui-text placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:border-(--ui-primary) cursor-pointer disabled:bg-(--ui-surface) disabled:text-(--ui-text) disabled:cursor-not-allowed",
+          onClick: W
+        }, null, 8, oe),
+        e[2] || (e[2] = r("div", { class: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" }, [
+          r("svg", {
+            class: "w-5 h-5 ui-text",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24"
+          }, [
+            r("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "2",
+              d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+            })
+          ])
+        ], -1)),
+        i.clearable && Y.value && !i.disabled ? (s(), l("button", {
+          key: 0,
+          type: "button",
+          class: "absolute right-9 top-1/2 -translate-y-1/2 p-1 hover:bg-(--ui-surface) rounded",
+          "aria-label": "Clear date",
+          onClick: E(Q, ["stop"])
+        }, [...e[1] || (e[1] = [
+          r("svg", {
+            class: "w-4 h-4 ui-text",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24"
+          }, [
+            r("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "2",
+              d: "M6 18L18 6M6 6l12 12"
+            })
+          ], -1)
+        ])])) : x("", !0)
+      ]),
+      ee(te, {
+        "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: ne(() => [
+          v.value ? (s(), l("div", {
+            key: 0,
+            class: S(["absolute z-99999 mt-2 rounded-lg shadow-lg p-4 ui-surface", i.calendarPosition, i.enableTime ? "w-[420px]" : "w-auto"]),
+            onClick: e[0] || (e[0] = E(() => {
+            }, ["stop"]))
+          }, [
+            r("div", {
+              class: S(i.enableTime ? "grid grid-cols-[1fr_124px] gap-3" : "block")
+            }, [
+              r("div", null, [
+                r("div", le, [
+                  r("button", {
+                    type: "button",
+                    class: "p-1 hover:bg-(--ui-surface) rounded",
+                    "aria-label": "Previous Month",
+                    onClick: G
+                  }, [...e[3] || (e[3] = [
+                    r("svg", {
+                      class: "w-4 h-4",
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24"
+                    }, [
+                      r("path", {
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round",
+                        "stroke-width": "2",
+                        d: "M15 18l-6-6 6-6"
+                      })
+                    ], -1)
+                  ])]),
+                  r("div", se, g(P.value) + " " + g(d.value), 1),
+                  r("button", {
+                    type: "button",
+                    class: "p-1 hover:bg-(--ui-surface) rounded",
+                    "aria-label": "Next Month",
+                    onClick: J
+                  }, [...e[4] || (e[4] = [
+                    r("svg", {
+                      class: "w-4 h-4",
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24"
+                    }, [
+                      r("path", {
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round",
+                        "stroke-width": "2",
+                        d: "M9 18l6-6-6-6"
+                      })
+                    ], -1)
+                  ])])
+                ]),
+                r("div", ie, [
+                  (s(), l(k, null, D(L, (t) => r("div", {
+                    key: t,
+                    class: "text-center text-xs font-medium ui-text py-1"
+                  }, g(t), 1)), 64))
+                ]),
+                r("div", ue, [
+                  (s(!0), l(k, null, D($.value, (t, a) => (s(), l("div", {
+                    key: "prev-" + a,
+                    class: "text-center text-sm ui-text py-2"
+                  }, g(t), 1))), 128)),
+                  (s(!0), l(k, null, D(T.value, (t) => (s(), l("button", {
+                    key: t,
+                    type: "button",
+                    disabled: C(t),
+                    class: S([
+                      "w-8 h-8 text-sm rounded flex items-center justify-center",
+                      U(t) ? "ui-primary-bg ui-text" : "hover:bg-(--ui-surface)",
+                      C(t) ? "ui-text cursor-not-allowed" : ""
+                    ]),
+                    onClick: (a) => I(t)
+                  }, g(t), 11, de))), 128)),
+                  (s(!0), l(k, null, D(z.value, (t, a) => (s(), l("div", {
+                    key: "next-" + a,
+                    class: "text-center text-sm ui-text py-2"
+                  }, g(t), 1))), 128))
+                ]),
+                i.showToday ? (s(), l("div", ce, [
+                  r("button", {
+                    type: "button",
+                    class: "w-full px-3 py-2 text-sm font-medium ui-primary hover:bg-(--ui-primary-soft) rounded-lg transition-colors",
+                    onClick: K
+                  }, " Today ")
+                ])) : x("", !0)
+              ]),
+              i.enableTime ? (s(), l("div", fe, [
+                e[5] || (e[5] = r("div", { class: "text-xs font-semibold ui-text mb-2" }, "Time", -1)),
+                r("div", me, [
+                  (s(!0), l(k, null, D(O.value, (t) => (s(), l("button", {
+                    key: t,
+                    type: "button",
+                    class: S(["w-full px-2 py-1.5 text-left text-sm rounded transition-colors", t === b.value ? "ui-primary-bg ui-text" : "ui-text hover:bg-(--ui-surface)"]),
+                    onClick: (a) => b.value = t
+                  }, g(t), 11, ve))), 128))
+                ])
+              ])) : x("", !0)
+            ], 2)
+          ], 2)) : x("", !0)
+        ]),
+        _: 1
+      }),
+      v.value ? (s(), l("div", {
+        key: 0,
+        class: "fixed inset-0 z-99998",
+        onClick: B
+      })) : x("", !0)
+    ]));
+  }
+};
+export {
+  ge as default
+};

package/dist/components/Card.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"),n=require("../utils/cn.cjs"),y={key:0,class:"absolute inset-0 bg-[color:color-mix(in oklab, var(--ui-surface), transparent 40%)] backdrop-blur-sm flex items-center justify-center z-10","aria-hidden":"true"},x={class:"flex items-start justify-between gap-4"},B={class:"flex-1 min-w-0"},C={key:0,class:"shrink-0"},S=["src","alt","loading"],V={key:5,class:"absolute top-3 right-3"},z={class:"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ui-bg ui-text"},E="w-full h-full object-cover",N="font-semibold ui-text line-clamp-2",$="text-sm ui-text mt-1 line-clamp-2",w={__name:"Card",props:{as:{type:String,default:"div"},variant:{type:String,default:"default",validator:t=>["default","outlined","elevated","filled","ghost"].includes(t)},padding:{type:String,default:"none",validator:t=>["none","sm","md","lg","xl"].includes(t)},bordered:{type:Boolean,default:!0},title:String,titleTag:{type:String,default:"h3"},titleSize:{type:String,default:"default",validator:t=>["sm","default","lg","xl"].includes(t)},subtitle:String,badge:String,contentClass:{type:[String,Array,Object],default:""},contentWrapper:{type:Boolean,default:!0},image:String,imageAlt:{type:String,default:"Card image"},imageAspect:{type:String,default:"auto",validator:t=>["auto","video","square","portrait"].includes(t)},imageLazy:{type:Boolean,default:!0},hoverable:Boolean,clickable:Boolean,disabled:Boolean,loading:Boolean},emits:["click"],setup(t,{emit:s}){const l=t,d=s,c=new Set(["textbox","searchbox","combobox","spinbutton"]),u=a=>{if(!(a instanceof Element))return!1;if(a.closest('input, textarea, select, button, a, [contenteditable], [contenteditable="true"]'))return!0;const r=a.getAttribute("role");return r?c.has(r):!1},i=a=>{l.clickable&&!l.disabled&&!l.loading&&d("click",a)},m=a=>{!l.clickable||l.disabled||l.loading||a.key!=="Enter"&&a.key!==" "&&a.key!=="Spacebar"||u(a.target)||a.currentTarget===a.target&&(a.preventDefault(),i(a))},g=e.computed(()=>({sm:"text-base",default:"text-lg",lg:"text-xl",xl:"text-2xl"})[l.titleSize]),b=e.computed(()=>({auto:"",video:"aspect-video",square:"aspect-square",portrait:"aspect-[3/4]"})[l.imageAspect]),f=o.cva("rounded-lg overflow-hidden transition-all duration-200 relative ui-text",{variants:{variant:{default:"ui-surface",outlined:"ui-surface",elevated:"ui-surface shadow-md",filled:"ui-surface-soft",ghost:"bg-transparent"},padding:{none:"",sm:"p-3",md:"p-4",lg:"p-6",xl:"p-8"},bordered:{true:"",false:""},hoverable:{true:"hover:shadow-lg hover:scale-[1.02]"},clickable:{true:"cursor-pointer focus:outline-none focus:ring-2 focus:ring-(--ui-ring) focus:ring-offset-2"},loading:{true:""}},compoundVariants:[{variant:"default",bordered:!0,class:"border ui-border-strong"},{variant:"outlined",bordered:!0,class:"border-2 ui-border-strong"},{variant:"elevated",bordered:!0,class:"border ui-border-strong"},{variant:"filled",bordered:!0,class:"border ui-border-strong"},{clickable:!0,hoverable:!1,class:"hover:bg-(--ui-surface)"}],defaultVariants:{variant:"default",padding:"md",bordered:!0}}),k=o.cva("",{variants:{padding:{none:"p-4 pb-3",sm:"px-3 pt-3 pb-2",md:"px-4 pt-4 pb-3",lg:"px-6 pt-6 pb-4",xl:"px-8 pt-8 pb-6"},hasBorder:{true:"border-b ui-border-strong mb-0",false:""}}}),p=o.cva("",{variants:{padding:{none:"p-4",sm:"p-3",md:"p-4",lg:"p-6",xl:"p-8"}}}),v=o.cva("border-t ui-border-strong bg-[color:color-mix(in oklab, var(--ui-surface), transparent 50%)]",{variants:{padding:{none:"p-4 pt-3",sm:"px-3 pb-3 pt-2",md:"px-4 pb-4 pt-3",lg:"px-6 pb-6 pt-4",xl:"px-8 pb-8 pt-6"}}}),h=o.cva("overflow-hidden",{variants:{padding:{none:"",sm:"-mx-3 mb-3",md:"-mx-4 mb-4",lg:"-mx-6 mb-6",xl:"-mx-8 mb-8"},hasHeader:{true:"",false:""}},compoundVariants:[{hasHeader:!0,padding:"sm",class:"-mt-3"},{hasHeader:!0,padding:"md",class:"-mt-4"},{hasHeader:!0,padding:"lg",class:"-mt-6"},{hasHeader:!0,padding:"xl",class:"-mt-8"}]});return(a,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.as),{class:e.normalizeClass(e.unref(n.cn)(e.unref(f)({variant:t.variant,padding:t.padding,hoverable:t.hoverable,clickable:t.clickable,loading:t.loading,bordered:t.bordered}))),disabled:t.disabled||t.loading,"aria-busy":t.loading,"aria-disabled":t.disabled,role:t.clickable?"button":void 0,tabindex:t.clickable&&!t.disabled?0:void 0,onClick:i,onKeydown:m},{default:e.withCtx(()=>[t.loading?(e.openBlock(),e.createElementBlock("div",y,[...r[0]||(r[0]=[e.createElementVNode("div",{class:"animate-spin rounded-full h-8 w-8 border-b-2 ui-border-strong"},null,-1)])])):e.createCommentVNode("",!0),a.$slots.header||t.title||t.subtitle||a.$slots.actions?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(n.cn)(e.unref(k)({padding:t.padding,hasBorder:!!(a.$slots.default||a.$slots.footer)})))},[e.renderSlot(a.$slots,"header",{},()=>[e.createElementVNode("div",x,[e.createElementVNode("div",B,[t.title?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.titleTag),{key:0,class:e.normalizeClass(e.unref(n.cn)(N,g.value))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:1},8,["class"])):e.createCommentVNode("",!0),t.subtitle?(e.openBlock(),e.createElementBlock("p",{key:1,class:e.normalizeClass($)},e.toDisplayString(t.subtitle),1)):e.createCommentVNode("",!0)]),a.$slots.actions?(e.openBlock(),e.createElementBlock("div",C,[e.renderSlot(a.$slots,"actions")])):e.createCommentVNode("",!0)])])],2)):e.createCommentVNode("",!0),a.$slots.image||t.image?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(e.unref(n.cn)(e.unref(h)({padding:t.padding,hasHeader:!!(a.$slots.header||t.title)})))},[e.renderSlot(a.$slots,"image",{},()=>[t.image?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.image,alt:t.imageAlt,class:e.normalizeClass(e.unref(n.cn)(E,b.value)),loading:t.imageLazy?"lazy":"eager"},null,10,S)):e.createCommentVNode("",!0)])],2)):e.createCommentVNode("",!0),a.$slots.default?(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},[t.contentWrapper?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(n.cn)(e.unref(p)({padding:t.padding}),t.contentClass))},[e.renderSlot(a.$slots,"default")],2)):e.renderSlot(a.$slots,"default",{key:1})],64)):e.createCommentVNode("",!0),a.$slots.footer?(e.openBlock(),e.createElementBlock("div",{key:4,class:e.normalizeClass(e.unref(n.cn)(e.unref(v)({padding:t.padding})))},[e.renderSlot(a.$slots,"footer")],2)):e.createCommentVNode("",!0),t.badge?(e.openBlock(),e.createElementBlock("div",V,[e.createElementVNode("span",z,e.toDisplayString(t.badge),1)])):e.createCommentVNode("",!0)]),_:3},40,["class","disabled","aria-busy","aria-disabled","role","tabindex"]))}};exports.default=w;

package/dist/components/Card.js

@@ -0,0 +1,316 @@
+import { computed as f, createBlock as v, openBlock as a, resolveDynamicComponent as p, normalizeClass as n, unref as l, withCtx as h, createElementBlock as i, createCommentVNode as r, createElementVNode as g, renderSlot as o, createTextVNode as T, toDisplayString as b, Fragment as j } from "vue";
+import { cva as c } from "class-variance-authority";
+import { cn as d } from "../utils/cn.js";
+const E = {
+  key: 0,
+  class: "absolute inset-0 bg-[color:color-mix(in oklab, var(--ui-surface), transparent 40%)] backdrop-blur-sm flex items-center justify-center z-10",
+  "aria-hidden": "true"
+}, q = { class: "flex items-start justify-between gap-4" }, D = { class: "flex-1 min-w-0" }, N = {
+  key: 0,
+  class: "shrink-0"
+}, K = ["src", "alt", "loading"], L = {
+  key: 5,
+  class: "absolute top-3 right-3"
+}, W = { class: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ui-bg ui-text" }, F = "w-full h-full object-cover", I = "font-semibold ui-text line-clamp-2", O = "text-sm ui-text mt-1 line-clamp-2", M = {
+  __name: "Card",
+  props: {
+    // Component type
+    as: {
+      type: String,
+      default: "div"
+    },
+    // Styling variants
+    variant: {
+      type: String,
+      default: "default",
+      validator: (e) => ["default", "outlined", "elevated", "filled", "ghost"].includes(e)
+    },
+    padding: {
+      type: String,
+      default: "none",
+      validator: (e) => ["none", "sm", "md", "lg", "xl"].includes(e)
+    },
+    bordered: {
+      type: Boolean,
+      default: !0
+    },
+    // Content props
+    title: String,
+    titleTag: {
+      type: String,
+      default: "h3"
+    },
+    titleSize: {
+      type: String,
+      default: "default",
+      validator: (e) => ["sm", "default", "lg", "xl"].includes(e)
+    },
+    subtitle: String,
+    badge: String,
+    contentClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    contentWrapper: {
+      type: Boolean,
+      default: !0
+    },
+    // Image props
+    image: String,
+    imageAlt: {
+      type: String,
+      default: "Card image"
+    },
+    imageAspect: {
+      type: String,
+      default: "auto",
+      validator: (e) => ["auto", "video", "square", "portrait"].includes(e)
+    },
+    imageLazy: {
+      type: Boolean,
+      default: !0
+    },
+    // Interaction states
+    hoverable: Boolean,
+    clickable: Boolean,
+    disabled: Boolean,
+    loading: Boolean
+  },
+  emits: ["click"],
+  setup(e, { emit: y }) {
+    const s = e, x = y, k = /* @__PURE__ */ new Set(["textbox", "searchbox", "combobox", "spinbutton"]), S = (t) => {
+      if (!(t instanceof Element)) return !1;
+      if (t.closest('input, textarea, select, button, a, [contenteditable], [contenteditable="true"]'))
+        return !0;
+      const u = t.getAttribute("role");
+      return u ? k.has(u) : !1;
+    }, m = (t) => {
+      s.clickable && !s.disabled && !s.loading && x("click", t);
+    }, C = (t) => {
+      !s.clickable || s.disabled || s.loading || t.key !== "Enter" && t.key !== " " && t.key !== "Spacebar" || S(t.target) || t.currentTarget === t.target && (t.preventDefault(), m(t));
+    }, $ = f(() => ({
+      sm: "text-base",
+      default: "text-lg",
+      lg: "text-xl",
+      xl: "text-2xl"
+    })[s.titleSize]), w = f(() => ({
+      auto: "",
+      video: "aspect-video",
+      square: "aspect-square",
+      portrait: "aspect-[3/4]"
+    })[s.imageAspect]), B = c(
+      "rounded-lg overflow-hidden transition-all duration-200 relative ui-text",
+      {
+        variants: {
+          variant: {
+            default: "ui-surface",
+            outlined: "ui-surface",
+            elevated: "ui-surface shadow-md",
+            filled: "ui-surface-soft",
+            ghost: "bg-transparent"
+          },
+          padding: {
+            none: "",
+            sm: "p-3",
+            md: "p-4",
+            lg: "p-6",
+            xl: "p-8"
+          },
+          bordered: {
+            true: "",
+            false: ""
+          },
+          hoverable: {
+            true: "hover:shadow-lg hover:scale-[1.02]"
+          },
+          clickable: {
+            true: "cursor-pointer focus:outline-none focus:ring-2 focus:ring-(--ui-ring) focus:ring-offset-2"
+          },
+          loading: {
+            true: ""
+          }
+        },
+        compoundVariants: [
+          {
+            variant: "default",
+            bordered: !0,
+            class: "border ui-border-strong"
+          },
+          {
+            variant: "outlined",
+            bordered: !0,
+            class: "border-2 ui-border-strong"
+          },
+          {
+            variant: "elevated",
+            bordered: !0,
+            class: "border ui-border-strong"
+          },
+          {
+            variant: "filled",
+            bordered: !0,
+            class: "border ui-border-strong"
+          },
+          {
+            clickable: !0,
+            hoverable: !1,
+            class: "hover:bg-(--ui-surface)"
+          }
+        ],
+        defaultVariants: {
+          variant: "default",
+          padding: "md",
+          bordered: !0
+        }
+      }
+    ), V = c("", {
+      variants: {
+        padding: {
+          none: "p-4 pb-3",
+          sm: "px-3 pt-3 pb-2",
+          md: "px-4 pt-4 pb-3",
+          lg: "px-6 pt-6 pb-4",
+          xl: "px-8 pt-8 pb-6"
+        },
+        hasBorder: {
+          true: "border-b ui-border-strong mb-0",
+          false: ""
+        }
+      }
+    }), z = c("", {
+      variants: {
+        padding: {
+          none: "p-4",
+          sm: "p-3",
+          md: "p-4",
+          lg: "p-6",
+          xl: "p-8"
+        }
+      }
+    }), A = c("border-t ui-border-strong bg-[color:color-mix(in oklab, var(--ui-surface), transparent 50%)]", {
+      variants: {
+        padding: {
+          none: "p-4 pt-3",
+          sm: "px-3 pb-3 pt-2",
+          md: "px-4 pb-4 pt-3",
+          lg: "px-6 pb-6 pt-4",
+          xl: "px-8 pb-8 pt-6"
+        }
+      }
+    }), H = c("overflow-hidden", {
+      variants: {
+        padding: {
+          none: "",
+          sm: "-mx-3 mb-3",
+          md: "-mx-4 mb-4",
+          lg: "-mx-6 mb-6",
+          xl: "-mx-8 mb-8"
+        },
+        hasHeader: {
+          true: "",
+          false: ""
+        }
+      },
+      compoundVariants: [
+        {
+          hasHeader: !0,
+          padding: "sm",
+          class: "-mt-3"
+        },
+        {
+          hasHeader: !0,
+          padding: "md",
+          class: "-mt-4"
+        },
+        {
+          hasHeader: !0,
+          padding: "lg",
+          class: "-mt-6"
+        },
+        {
+          hasHeader: !0,
+          padding: "xl",
+          class: "-mt-8"
+        }
+      ]
+    });
+    return (t, u) => (a(), v(p(e.as), {
+      class: n(l(d)(l(B)({ variant: e.variant, padding: e.padding, hoverable: e.hoverable, clickable: e.clickable, loading: e.loading, bordered: e.bordered }))),
+      disabled: e.disabled || e.loading,
+      "aria-busy": e.loading,
+      "aria-disabled": e.disabled,
+      role: e.clickable ? "button" : void 0,
+      tabindex: e.clickable && !e.disabled ? 0 : void 0,
+      onClick: m,
+      onKeydown: C
+    }, {
+      default: h(() => [
+        e.loading ? (a(), i("div", E, [...u[0] || (u[0] = [
+          g("div", { class: "animate-spin rounded-full h-8 w-8 border-b-2 ui-border-strong" }, null, -1)
+        ])])) : r("", !0),
+        t.$slots.header || e.title || e.subtitle || t.$slots.actions ? (a(), i("div", {
+          key: 1,
+          class: n(l(d)(l(V)({ padding: e.padding, hasBorder: !!(t.$slots.default || t.$slots.footer) })))
+        }, [
+          o(t.$slots, "header", {}, () => [
+            g("div", q, [
+              g("div", D, [
+                e.title ? (a(), v(p(e.titleTag), {
+                  key: 0,
+                  class: n(l(d)(I, $.value))
+                }, {
+                  default: h(() => [
+                    T(b(e.title), 1)
+                  ]),
+                  _: 1
+                }, 8, ["class"])) : r("", !0),
+                e.subtitle ? (a(), i("p", {
+                  key: 1,
+                  class: n(O)
+                }, b(e.subtitle), 1)) : r("", !0)
+              ]),
+              t.$slots.actions ? (a(), i("div", N, [
+                o(t.$slots, "actions")
+              ])) : r("", !0)
+            ])
+          ])
+        ], 2)) : r("", !0),
+        t.$slots.image || e.image ? (a(), i("div", {
+          key: 2,
+          class: n(l(d)(l(H)({ padding: e.padding, hasHeader: !!(t.$slots.header || e.title) })))
+        }, [
+          o(t.$slots, "image", {}, () => [
+            e.image ? (a(), i("img", {
+              key: 0,
+              src: e.image,
+              alt: e.imageAlt,
+              class: n(l(d)(F, w.value)),
+              loading: e.imageLazy ? "lazy" : "eager"
+            }, null, 10, K)) : r("", !0)
+          ])
+        ], 2)) : r("", !0),
+        t.$slots.default ? (a(), i(j, { key: 3 }, [
+          e.contentWrapper ? (a(), i("div", {
+            key: 0,
+            class: n(l(d)(l(z)({ padding: e.padding }), e.contentClass))
+          }, [
+            o(t.$slots, "default")
+          ], 2)) : o(t.$slots, "default", { key: 1 })
+        ], 64)) : r("", !0),
+        t.$slots.footer ? (a(), i("div", {
+          key: 4,
+          class: n(l(d)(l(A)({ padding: e.padding })))
+        }, [
+          o(t.$slots, "footer")
+        ], 2)) : r("", !0),
+        e.badge ? (a(), i("div", L, [
+          g("span", W, b(e.badge), 1)
+        ])) : r("", !0)
+      ]),
+      _: 3
+    }, 40, ["class", "disabled", "aria-busy", "aria-disabled", "role", "tabindex"]));
+  }
+};
+export {
+  M as default
+};

package/dist/components/CardBody.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"),n=require("../utils/cn.cjs"),u={__name:"CardBody",props:{variant:{type:String,default:"default",validator:t=>["default","compact","spacious"].includes(t)}},setup(t){const a=t,s=c.cva("p-6 ui-text",{variants:{variant:{default:"p-6",compact:"p-4",spacious:"p-8"}}}),r=e.computed(()=>n.cn(s({variant:a.variant})));return(o,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(r.value)},[e.renderSlot(o.$slots,"default")],2))}};exports.default=u;