@gspa/ui 0.1.1 → 0.1.4

package/dist/components/Button.js

@@ -0,0 +1,190 @@
+import { inject as x, computed as i, createElementBlock as s, createCommentVNode as a, openBlock as n, mergeProps as y, unref as h, createBlock as z, renderSlot as k, normalizeClass as g, createElementVNode as m, toDisplayString as B } from "vue";
+import { cva as S } from "class-variance-authority";
+import { cn as O } from "../utils/cn.js";
+import A from "./Icon.js";
+import { AUTH_RESOLVER_KEY as C } from "../lib/auth.js";
+const E = ["disabled", "aria-disabled", "aria-busy"], M = { key: 2 }, D = /* @__PURE__ */ Object.assign({
+  inheritAttrs: !1
+}, {
+  __name: "Button",
+  props: {
+    variant: {
+      type: String,
+      default: "default",
+      validator: (r) => [
+        "primary",
+        "default",
+        "danger",
+        "outline",
+        "secondary",
+        "ghost",
+        "link",
+        "success",
+        "warning",
+        "info",
+        "subtle",
+        "dark",
+        "light",
+        "primaryOutline",
+        "dangerOutline",
+        "successOutline",
+        "gradient"
+      ].includes(r)
+    },
+    size: {
+      type: String,
+      default: "default",
+      validator: (r) => ["2xs", "xs", "sm", "default", "md", "lg", "xl", "2xl", "icon-sm", "icon", "icon-lg"].includes(r)
+    },
+    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: (r) => ["show", "hide", "disable"].includes(r)
+    }
+  },
+  setup(r) {
+    const o = r, d = x(C, null), u = (e) => e == null ? null : typeof e == "boolean" ? e : typeof e == "function" ? !!e() : e, l = i(() => {
+      const e = u(o.permission), t = u(o.role);
+      return e === null && t === null ? !0 : (e === null || typeof e == "boolean") && (t === null || typeof t == "boolean") ? (e ?? !0) && (t ?? !0) : typeof d == "function" ? !!d({
+        permission: e,
+        role: t,
+        requireAll: o.requireAll
+      }) : !0;
+    }), b = i(() => o.unauthorized === "hide" && !l.value), f = i(() => o.unauthorized === "disable" && !l.value), c = i(() => o.disabled || o.loading || f.value), p = S(
+      "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"
+        }
+      }
+    ), v = i(() => ({
+      "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"), w = i(() => ({
+      "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 (e, t) => b.value ? a("", !0) : (n(), s("button", y({
+      key: 0,
+      class: h(O)(h(p)({ variant: r.variant, size: r.size }), e.$attrs.class),
+      disabled: c.value,
+      "aria-disabled": c.value,
+      "aria-busy": r.loading
+    }, e.$attrs), [
+      r.loading ? (n(), s("svg", {
+        key: 0,
+        class: g([w.value, "animate-spin mr-2 text-current"]),
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24"
+      }, [...t[0] || (t[0] = [
+        m("circle", {
+          class: "opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          "stroke-width": "4"
+        }, null, -1),
+        m("path", {
+          class: "opacity-75",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-linecap": "round",
+          "stroke-width": "4",
+          d: "M4 12a8 8 0 018-8"
+        }, null, -1)
+      ])], 2)) : a("", !0),
+      r.icon && !r.loading ? (n(), z(A, {
+        key: 1,
+        icon: r.icon,
+        class: g(v.value)
+      }, null, 8, ["icon", "class"])) : a("", !0),
+      r.loading && r.loadingText ? (n(), s("span", M, B(r.loadingText), 1)) : k(e.$slots, "default", { key: 3 })
+    ], 16, E));
+  }
+});
+export {
+  D as default
+};

package/dist/components/ButtonGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("class-variance-authority"),a=require("../utils/cn.cjs"),s=["aria-label"],d={__name:"ButtonGroup",props:{orientation:{type:String,default:"horizontal",validator:t=>["horizontal","vertical"].includes(t)},size:{type:String,default:"default",validator:t=>["sm","default","lg"].includes(t)},variant:{type:String,default:"default",validator:t=>["default","outline","ghost"].includes(t)},ariaLabel:String},setup(t){const n=t,o=r.cva("inline-flex ",{variants:{orientation:{horizontal:"flex-row [&>*:not(:first-child)]:ml-[-1px] [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none",vertical:"flex-col [&>*:not(:first-child)]:mt-[-1px] [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none"}}}),l=e.computed(()=>a.cn(o({orientation:n.orientation})));return(i,u)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(l.value),role:"group","aria-label":t.ariaLabel},[e.renderSlot(i.$slots,"default")],10,s))}};exports.default=d;

package/dist/components/ButtonGroup.js

@@ -0,0 +1,46 @@
+import { computed as r, createElementBlock as a, openBlock as i, normalizeClass as d, renderSlot as s } from "vue";
+import { cva as c } from "class-variance-authority";
+import { cn as u } from "../utils/cn.js";
+const f = ["aria-label"], g = {
+  __name: "ButtonGroup",
+  props: {
+    orientation: {
+      type: String,
+      default: "horizontal",
+      validator: (t) => ["horizontal", "vertical"].includes(t)
+    },
+    size: {
+      type: String,
+      default: "default",
+      validator: (t) => ["sm", "default", "lg"].includes(t)
+    },
+    variant: {
+      type: String,
+      default: "default",
+      validator: (t) => ["default", "outline", "ghost"].includes(t)
+    },
+    ariaLabel: String
+  },
+  setup(t) {
+    const o = t, n = c("inline-flex ", {
+      variants: {
+        orientation: {
+          horizontal: "flex-row [&>*:not(:first-child)]:ml-[-1px] [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none",
+          vertical: "flex-col [&>*:not(:first-child)]:mt-[-1px] [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none"
+        }
+      }
+    }), e = r(
+      () => u(n({ orientation: o.orientation }))
+    );
+    return (l, p) => (i(), a("div", {
+      class: d(e.value),
+      role: "group",
+      "aria-label": t.ariaLabel
+    }, [
+      s(l.$slots, "default")
+    ], 10, f));
+  }
+};
+export {
+  g as default
+};

package/dist/components/Calendar.cjs

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

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;