@gspa/ui 0.1.1 → 0.1.4

package/README.md

@@ -190,6 +190,24 @@ describe('Component', () => {
 
 This document provides comprehensive usage examples and API reference for all Vue components and directives in GSPA UI.
 
+## Importing components
+
+Import individual components when the application does not need the global plugin. Granular exports keep unrelated components out of the application bundle:
+
+```js
+import Button from '@gspa/ui/components/Button'
+import AuthLayout from '@gspa/ui/layouts/AuthLayout'
+import '@gspa/ui/css'
+```
+
+Nested components use the same convention:
+
+```js
+import BarChart from '@gspa/ui/components/charts/BarChart'
+```
+
+Named imports from `@gspa/ui` remain tree-shakeable. The default `VueUI` plugin intentionally registers every component and should only be used when an application needs the complete library.
+
 ## Button Authorization Access Control
 
 `Button` supports access-control props directly:

package/dist/_plugin-vue_export-helper-BHFhmbuH.cjs

@@ -0,0 +1 @@
+"use strict";const e=(t,o)=>{const c=t.__vccOpts||t;for(const[r,s]of o)c[r]=s;return c};exports._export_sfc=e;

package/dist/_plugin-vue_export-helper-CHgC5LLL.js

@@ -0,0 +1,9 @@
+const s = (t, r) => {
+  const o = t.__vccOpts || t;
+  for (const [c, e] of r)
+    o[c] = e;
+  return o;
+};
+export {
+  s as _
+};

package/dist/components/Accordion.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("class-variance-authority"),c=require("../utils/cn.cjs"),B=["id","aria-expanded","aria-controls","onClick"],_={class:"flex items-center flex-1 min-w-0"},z={key:0},E=["id","aria-labelledby"],$={key:0},N={__name:"Accordion",props:{items:{type:Array,required:!0},modelValue:{type:[Number,Array],default:null},multiple:Boolean,variant:{type:String,default:"default",validator:i=>["default","bordered","filled","flush"].includes(i)},size:{type:String,default:"md",validator:i=>["sm","md","lg"].includes(i)},disabled:Boolean},emits:["update:modelValue","change"],setup(i,{emit:m}){const v={render(){return e.h("svg",{fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor"},[e.h("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"m19.5 8.25-7.5 7.5-7.5-7.5"})])}},t=i,u=m,l=e.ref(t.multiple?Array.isArray(t.modelValue)?[...t.modelValue]:[]:typeof t.modelValue=="number"?[t.modelValue]:[]),p=a=>{if(!(t.disabled||t.items[a]?.disabled)){if(t.multiple){const n=l.value.indexOf(a);n>-1?l.value.splice(n,1):l.value.push(a),u("update:modelValue",[...l.value])}else{const n=l.value.includes(a)?null:a;l.value=n!==null?[n]:[],u("update:modelValue",n)}u("change",{index:a,expanded:l.value.includes(a)})}},s=a=>l.value.includes(a),f=d.cva("w-full",{variants:{variant:{default:"space-y-1",bordered:"space-y-3",filled:"space-y-3",flush:"divide-y divide-slate-200"}}}),h=d.cva("transition-all duration-200",{variants:{variant:{default:" border ui-border-strong rounded-lg overflow-hidden shadow-sm hover:shadow-md",bordered:" border-2  ui-border-strong rounded-xl overflow-hidden hover:border-(--ui-border)",filled:" border ui-border-strong rounded-xl overflow-hidden shadow-sm",flush:""}}}),b=d.cva("flex items-center justify-between w-full text-left transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",{variants:{variant:{default:"hover:bg-(--ui-surface-strong)",bordered:"hover:bg-[color:color-mix(in oklab, var(--ui-primary-soft), transparent 50%)]",filled:"hover:bg-[color:color-mix(in oklab, var(--ui-surface), transparent 30%)]",flush:"hover:bg-(--ui-surface)"},size:{sm:"px-4 py-3",md:"px-5 py-4",lg:"px-6 py-5"}}}),y=d.cva("ml-4 shrink-0 ui-text transition-all duration-200",{variants:{expanded:{true:"rotate-180 ui-primary",false:""}}}),g=d.cva("overflow-hidden ui-text ui-surface",{variants:{size:{sm:"px-4 py-3 text-sm",md:"px-5 py-4 text-sm",lg:"px-6 py-5 text-base"}}}),k=e.computed(()=>c.cn(f({variant:t.variant}))),V=e.computed(()=>c.cn(h({variant:t.variant}))),C=a=>c.cn(b({variant:t.variant,size:t.size}),s(a)&&t.variant==="bordered"&&"bg-[color:color-mix(in oklab, var(--ui-primary-soft), transparent 70%)] border-(--ui-border-strong)",s(a)&&t.variant==="filled"&&"ui-surface",s(a)&&t.variant==="default"&&"ui-bg",(t.disabled||t.items[a]?.disabled)&&"cursor-not-allowed opacity-50"),w=a=>c.cn(y({expanded:s(a)})),x=e.computed(()=>c.cn(g({size:t.size})));return e.watch(()=>t.modelValue,a=>{t.multiple?l.value=Array.isArray(a)?[...a]:[]:l.value=typeof a=="number"?[a]:[]}),(a,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(k.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.items,(o,r)=>(e.openBlock(),e.createElementBlock("div",{key:o.id||r,class:e.normalizeClass(V.value)},[e.createElementVNode("button",{id:`header-${o.id||r}`,class:e.normalizeClass(C(r)),"aria-expanded":s(r),"aria-controls":`panel-${o.id||r}`,onClick:S=>p(r)},[e.createElementVNode("div",_,[e.renderSlot(a.$slots,`header-${r}`,{item:o,index:r,isExpanded:s(r)},()=>[o.title?(e.openBlock(),e.createElementBlock("div",z,e.toDisplayString(o.title),1)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",{class:e.normalizeClass(w(r))},[e.createVNode(v,{class:"w-5 h-5 transition-transform duration-200"})],2)],10,B),e.createVNode(e.Transition,{"enter-active-class":"transition-all duration-300 ease-out","enter-from-class":"opacity-0 max-h-0","enter-to-class":"opacity-100 max-h-[600px]","leave-active-class":"transition-all duration-200 ease-in","leave-from-class":"opacity-100 max-h-[600px]","leave-to-class":"opacity-0 max-h-0"},{default:e.withCtx(()=>[s(r)?(e.openBlock(),e.createElementBlock("div",{key:0,id:`panel-${o.id||r}`,class:e.normalizeClass(x.value),"aria-labelledby":`header-${o.id||r}`,role:"region"},[e.renderSlot(a.$slots,`content-${r}`,{item:o,index:r},()=>[e.renderSlot(a.$slots,"content",{item:o,index:r},()=>[o.content?(e.openBlock(),e.createElementBlock("div",$,e.toDisplayString(o.content),1)):e.createCommentVNode("",!0)])])],10,E)):e.createCommentVNode("",!0)]),_:2},1024)],2))),128))],2))}};exports.default=N;

package/dist/components/Accordion.js

@@ -0,0 +1,192 @@
+import { ref as j, computed as m, watch as D, createElementBlock as n, openBlock as d, normalizeClass as u, Fragment as q, renderList as F, createElementVNode as f, createVNode as y, renderSlot as h, createCommentVNode as b, toDisplayString as g, Transition as L, withCtx as O, h as w } from "vue";
+import { cva as c } from "class-variance-authority";
+import { cn as p } from "../utils/cn.js";
+const T = ["id", "aria-expanded", "aria-controls", "onClick"], G = { class: "flex items-center flex-1 min-w-0" }, H = { key: 0 }, J = ["id", "aria-labelledby"], K = { key: 0 }, U = {
+  __name: "Accordion",
+  props: {
+    items: {
+      type: Array,
+      required: !0
+    },
+    modelValue: {
+      type: [Number, Array],
+      default: null
+    },
+    multiple: Boolean,
+    variant: {
+      type: String,
+      default: "default",
+      validator: (i) => ["default", "bordered", "filled", "flush"].includes(i)
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator: (i) => ["sm", "md", "lg"].includes(i)
+    },
+    disabled: Boolean
+  },
+  emits: ["update:modelValue", "change"],
+  setup(i, { emit: k }) {
+    const x = {
+      render() {
+        return w("svg", {
+          fill: "none",
+          viewBox: "0 0 24 24",
+          "stroke-width": "1.5",
+          stroke: "currentColor"
+        }, [
+          w("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+          })
+        ]);
+      }
+    }, a = i, v = k, o = j(
+      a.multiple ? Array.isArray(a.modelValue) ? [...a.modelValue] : [] : typeof a.modelValue == "number" ? [a.modelValue] : []
+    ), V = (e) => {
+      if (!(a.disabled || a.items[e]?.disabled)) {
+        if (a.multiple) {
+          const l = o.value.indexOf(e);
+          l > -1 ? o.value.splice(l, 1) : o.value.push(e), v("update:modelValue", [...o.value]);
+        } else {
+          const l = o.value.includes(e) ? null : e;
+          o.value = l !== null ? [l] : [], v("update:modelValue", l);
+        }
+        v("change", { index: e, expanded: o.value.includes(e) });
+      }
+    }, s = (e) => o.value.includes(e), C = c("w-full", {
+      variants: {
+        variant: {
+          default: "space-y-1",
+          bordered: "space-y-3",
+          filled: "space-y-3",
+          flush: "divide-y divide-slate-200"
+        }
+      }
+    }), _ = c("transition-all duration-200", {
+      variants: {
+        variant: {
+          default: " border ui-border-strong rounded-lg overflow-hidden shadow-sm hover:shadow-md",
+          bordered: " border-2  ui-border-strong rounded-xl overflow-hidden hover:border-(--ui-border)",
+          filled: " border ui-border-strong rounded-xl overflow-hidden shadow-sm",
+          flush: ""
+        }
+      }
+    }), $ = c(
+      "flex items-center justify-between w-full text-left transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      {
+        variants: {
+          variant: {
+            default: "hover:bg-(--ui-surface-strong)",
+            bordered: "hover:bg-[color:color-mix(in oklab, var(--ui-primary-soft), transparent 50%)]",
+            filled: "hover:bg-[color:color-mix(in oklab, var(--ui-surface), transparent 30%)]",
+            flush: "hover:bg-(--ui-surface)"
+          },
+          size: {
+            sm: "px-4 py-3",
+            md: "px-5 py-4",
+            lg: "px-6 py-5"
+          }
+        }
+      }
+    ), z = c("ml-4 shrink-0 ui-text transition-all duration-200", {
+      variants: {
+        expanded: {
+          true: "rotate-180 ui-primary",
+          false: ""
+        }
+      }
+    }), A = c("overflow-hidden ui-text ui-surface", {
+      variants: {
+        size: {
+          sm: "px-4 py-3 text-sm",
+          md: "px-5 py-4 text-sm",
+          lg: "px-6 py-5 text-base"
+        }
+      }
+    }), B = m(
+      () => p(C({ variant: a.variant }))
+    ), E = m(
+      () => p(_({ variant: a.variant }))
+    ), N = (e) => p(
+      $({ variant: a.variant, size: a.size }),
+      s(e) && a.variant === "bordered" && "bg-[color:color-mix(in oklab, var(--ui-primary-soft), transparent 70%)] border-(--ui-border-strong)",
+      s(e) && a.variant === "filled" && "ui-surface",
+      s(e) && a.variant === "default" && "ui-bg",
+      (a.disabled || a.items[e]?.disabled) && "cursor-not-allowed opacity-50"
+    ), S = (e) => p(z({ expanded: s(e) })), I = m(
+      () => p(A({ size: a.size }))
+    );
+    return D(
+      () => a.modelValue,
+      (e) => {
+        a.multiple ? o.value = Array.isArray(e) ? [...e] : [] : o.value = typeof e == "number" ? [e] : [];
+      }
+    ), (e, l) => (d(), n("div", {
+      class: u(B.value)
+    }, [
+      (d(!0), n(q, null, F(i.items, (t, r) => (d(), n("div", {
+        key: t.id || r,
+        class: u(E.value)
+      }, [
+        f("button", {
+          id: `header-${t.id || r}`,
+          class: u(N(r)),
+          "aria-expanded": s(r),
+          "aria-controls": `panel-${t.id || r}`,
+          onClick: (M) => V(r)
+        }, [
+          f("div", G, [
+            h(e.$slots, `header-${r}`, {
+              item: t,
+              index: r,
+              isExpanded: s(r)
+            }, () => [
+              t.title ? (d(), n("div", H, g(t.title), 1)) : b("", !0)
+            ])
+          ]),
+          f("div", {
+            class: u(S(r))
+          }, [
+            y(x, { class: "w-5 h-5 transition-transform duration-200" })
+          ], 2)
+        ], 10, T),
+        y(L, {
+          "enter-active-class": "transition-all duration-300 ease-out",
+          "enter-from-class": "opacity-0 max-h-0",
+          "enter-to-class": "opacity-100 max-h-[600px]",
+          "leave-active-class": "transition-all duration-200 ease-in",
+          "leave-from-class": "opacity-100 max-h-[600px]",
+          "leave-to-class": "opacity-0 max-h-0"
+        }, {
+          default: O(() => [
+            s(r) ? (d(), n("div", {
+              key: 0,
+              id: `panel-${t.id || r}`,
+              class: u(I.value),
+              "aria-labelledby": `header-${t.id || r}`,
+              role: "region"
+            }, [
+              h(e.$slots, `content-${r}`, {
+                item: t,
+                index: r
+              }, () => [
+                h(e.$slots, "content", {
+                  item: t,
+                  index: r
+                }, () => [
+                  t.content ? (d(), n("div", K, g(t.content), 1)) : b("", !0)
+                ])
+              ])
+            ], 10, J)) : b("", !0)
+          ]),
+          _: 2
+        }, 1024)
+      ], 2))), 128))
+    ], 2));
+  }
+};
+export {
+  U as default
+};

package/dist/components/AccordionItem.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"),s=require("../utils/cn.cjs"),p=require("./Button.cjs"),h={__name:"AccordionItem",props:{variant:{type:String,default:"default",validator:a=>["default","bordered","filled","flush"].includes(a)},size:{type:String,default:"md",validator:a=>["sm","md","lg"].includes(a)}},setup(a){const l={render(){return e.h("svg",{fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor"},[e.h("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"m19.5 8.25-7.5 7.5-7.5-7.5"})])}},r=a,t=e.ref(!1),i=()=>t.value=!t.value,c=n.cva("",{variants:{variant:{default:"",bordered:"border ui-border-strong  rounded-lg overflow-hidden",filled:"ui-surface-strong border ui-border-strong  rounded-lg overflow-hidden",flush:""}}}),u=n.cva("flex items-center justify-between w-full text-left transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:ring-offset-2",{variants:{size:{sm:"p-3 text-sm",md:"p-4 text-base",lg:"p-6 text-lg"}}}),d=n.cva("overflow-hidden ui-text border-t ui-border-strong ",{variants:{size:{sm:"p-3 text-sm",md:"p-4 text-base",lg:"p-6 text-lg"}}}),m=e.computed(()=>s.cn(c({variant:r.variant}))),v=e.computed(()=>s.cn(u({size:r.size}))),f=e.computed(()=>s.cn(d({size:r.size})));return(o,g)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(m.value)},[e.createVNode(p.default,{class:e.normalizeClass(v.value),"aria-expanded":t.value,onClick:i},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"header",{isOpen:t.value}),e.createVNode(l,{class:e.normalizeClass(e.unref(s.cn)("w-5 h-5 transition-transform ml-2",{"rotate-180":t.value}))},null,8,["class"])]),_:3},8,["class","aria-expanded"]),e.createVNode(e.Transition,{"enter-active-class":"transition-all duration-300 ease-out","enter-from-class":"opacity-0 max-h-0","enter-to-class":"opacity-100 max-h-96","leave-active-class":"transition-all duration-200 ease-in","leave-from-class":"opacity-100 max-h-96","leave-to-class":"opacity-0 max-h-0"},{default:e.withCtx(()=>[t.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(f.value)},[e.renderSlot(o.$slots,"content",{isOpen:t.value})],2)):e.createCommentVNode("",!0)]),_:3})],2))}};exports.default=h;

package/dist/components/AccordionItem.js

@@ -0,0 +1,109 @@
+import { ref as C, computed as o, createElementBlock as d, openBlock as c, normalizeClass as a, createVNode as n, withCtx as u, renderSlot as f, unref as k, Transition as z, createCommentVNode as _, h as m } from "vue";
+import { cva as i } from "class-variance-authority";
+import { cn as s } from "../utils/cn.js";
+import V from "./Button.js";
+const I = {
+  __name: "AccordionItem",
+  props: {
+    variant: {
+      type: String,
+      default: "default",
+      validator: (t) => ["default", "bordered", "filled", "flush"].includes(t)
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator: (t) => ["sm", "md", "lg"].includes(t)
+    }
+  },
+  setup(t) {
+    const v = {
+      render() {
+        return m("svg", {
+          fill: "none",
+          viewBox: "0 0 24 24",
+          "stroke-width": "1.5",
+          stroke: "currentColor"
+        }, [
+          m("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+          })
+        ]);
+      }
+    }, r = t, e = C(!1), p = () => e.value = !e.value, g = i("", {
+      variants: {
+        variant: {
+          default: "",
+          bordered: "border ui-border-strong  rounded-lg overflow-hidden",
+          filled: "ui-surface-strong border ui-border-strong  rounded-lg overflow-hidden",
+          flush: ""
+        }
+      }
+    }), h = i(
+      "flex items-center justify-between w-full text-left transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:ring-offset-2",
+      {
+        variants: {
+          size: {
+            sm: "p-3 text-sm",
+            md: "p-4 text-base",
+            lg: "p-6 text-lg"
+          }
+        }
+      }
+    ), x = i("overflow-hidden ui-text border-t ui-border-strong ", {
+      variants: {
+        size: {
+          sm: "p-3 text-sm",
+          md: "p-4 text-base",
+          lg: "p-6 text-lg"
+        }
+      }
+    }), b = o(
+      () => s(g({ variant: r.variant }))
+    ), w = o(
+      () => s(h({ size: r.size }))
+    ), y = o(
+      () => s(x({ size: r.size }))
+    );
+    return (l, B) => (c(), d("div", {
+      class: a(b.value)
+    }, [
+      n(V, {
+        class: a(w.value),
+        "aria-expanded": e.value,
+        onClick: p
+      }, {
+        default: u(() => [
+          f(l.$slots, "header", { isOpen: e.value }),
+          n(v, {
+            class: a(k(s)("w-5 h-5 transition-transform ml-2", { "rotate-180": e.value }))
+          }, null, 8, ["class"])
+        ]),
+        _: 3
+      }, 8, ["class", "aria-expanded"]),
+      n(z, {
+        "enter-active-class": "transition-all duration-300 ease-out",
+        "enter-from-class": "opacity-0 max-h-0",
+        "enter-to-class": "opacity-100 max-h-96",
+        "leave-active-class": "transition-all duration-200 ease-in",
+        "leave-from-class": "opacity-100 max-h-96",
+        "leave-to-class": "opacity-0 max-h-0"
+      }, {
+        default: u(() => [
+          e.value ? (c(), d("div", {
+            key: 0,
+            class: a(y.value)
+          }, [
+            f(l.$slots, "content", { isOpen: e.value })
+          ], 2)) : _("", !0)
+        ]),
+        _: 3
+      })
+    ], 2));
+  }
+};
+export {
+  I as default
+};

package/dist/components/AddReminderModal.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),y=require("./Modal.cjs"),V=require("./MultiSelect.cjs"),x={class:"p-6 space-y-6"},b={class:"text-sm ui-text"},N={class:"font-medium"},E={class:"space-y-1.5"},g={class:"space-y-2"},k={class:"flex flex-wrap gap-2"},C=["onClick"],B={class:"space-y-2"},S={__name:"AddReminderModal",props:{modelValue:Boolean,availableRecipients:{type:Array,default:()=>[]},sendTypeOptions:{type:Array,default:()=>[]},modelName:{type:String,default:""}},emits:["update:modelValue","save"],setup(u,{emit:c}){const i=c,r=u,s=e.computed({get:()=>r.modelValue,set:o=>i("update:modelValue",o)}),a=e.ref(0),n=e.ref("Email"),d=e.ref([]),p=e.computed(()=>r.availableRecipients.map(o=>({value:o,label:o}))),m=()=>{a.value=0,n.value="Email",d.value=[]},v=()=>{i("save",{days:Number(a.value)||0,sendType:n.value,recipients:[...d.value]}),s.value=!1,m()},f=()=>{s.value=!1,m()};return(o,t)=>(e.openBlock(),e.createBlock(y.default,{modelValue:s.value,"onUpdate:modelValue":t[2]||(t[2]=l=>s.value=l),size:"xl"},{default:e.withCtx(()=>[e.createElementVNode("div",x,[e.createElementVNode("div",null,[t[4]||(t[4]=e.createElementVNode("h3",{class:"text-xl font-semibold ui-text"}," Add Reminder ",-1)),e.createElementVNode("p",b,[t[3]||(t[3]=e.createTextVNode(" Configure reminder rules for ",-1)),e.createElementVNode("span",N,e.toDisplayString(u.modelName),1)])]),e.createElementVNode("div",E,[t[5]||(t[5]=e.createElementVNode("label",{class:"text-sm font-medium ui-text"}," Days Before Due Date ",-1)),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":t[0]||(t[0]=l=>a.value=l),type:"number",min:"0",class:"w-full px-3 py-2.5 border rounded-md focus:ring-2 focus:ring-(--ui-primary) focus:outline-none ui-surface"},null,512),[[e.vModelText,a.value]])]),e.createElementVNode("div",g,[t[6]||(t[6]=e.createElementVNode("label",{class:"text-sm font-medium ui-text"}," Notification Channel ",-1)),e.createElementVNode("div",k,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.sendTypeOptions,l=>(e.openBlock(),e.createElementBlock("button",{key:l.value,type:"button",class:e.normalizeClass(["px-4 py-2 rounded-md text-sm font-medium transition",n.value===l.value?"ui-primary-bg ui-text shadow":"  border ui-surface ui-text hover:brightness-105"]),onClick:T=>n.value=l.value},e.toDisplayString(l.label),11,C))),128))])]),e.createElementVNode("div",B,[t[7]||(t[7]=e.createElementVNode("label",{class:"text-sm font-medium ui-text"}," Recipients ",-1)),e.createVNode(V.default,{modelValue:d.value,"onUpdate:modelValue":t[1]||(t[1]=l=>d.value=l),options:p.value,placeholder:"Select recipients..."},null,8,["modelValue","options"])]),e.createElementVNode("div",{class:"flex justify-end gap-3 pt-4 border-t"},[e.createElementVNode("button",{type:"button",class:"px-4 py-2 rounded-md border ui-surface ui-text hover:brightness-105",onClick:f}," Cancel "),e.createElementVNode("button",{type:"button",class:"px-5 py-2 rounded-md ui-primary-bg ui-text hover:bg-(--ui-primary-strong) shadow",onClick:v}," Add Reminder ")])])]),_:1},8,["modelValue"]))}};exports.default=S;

package/dist/components/AddReminderModal.js

@@ -0,0 +1,107 @@
+import { computed as v, ref as d, createBlock as C, openBlock as r, withCtx as k, createElementVNode as t, createTextVNode as N, toDisplayString as f, withDirectives as _, vModelText as w, createElementBlock as y, Fragment as R, renderList as T, normalizeClass as h, createVNode as A } from "vue";
+import B from "./Modal.js";
+import D from "./MultiSelect.js";
+const E = { class: "p-6 space-y-6" }, O = { class: "text-sm ui-text" }, S = { class: "font-medium" }, U = { class: "space-y-1.5" }, $ = { class: "space-y-2" }, z = { class: "flex flex-wrap gap-2" }, M = ["onClick"], j = { class: "space-y-2" }, H = {
+  __name: "AddReminderModal",
+  props: {
+    modelValue: Boolean,
+    availableRecipients: {
+      type: Array,
+      default: () => []
+    },
+    sendTypeOptions: {
+      type: Array,
+      default: () => []
+    },
+    modelName: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "save"],
+  setup(u, { emit: x }) {
+    const m = x, p = u, a = v({
+      get: () => p.modelValue,
+      set: (l) => m("update:modelValue", l)
+    }), o = d(0), i = d("Email"), n = d([]), b = v(
+      () => p.availableRecipients.map((l) => ({
+        value: l,
+        label: l
+      }))
+    ), c = () => {
+      o.value = 0, i.value = "Email", n.value = [];
+    }, g = () => {
+      m("save", {
+        days: Number(o.value) || 0,
+        sendType: i.value,
+        recipients: [...n.value]
+      }), a.value = !1, c();
+    }, V = () => {
+      a.value = !1, c();
+    };
+    return (l, e) => (r(), C(B, {
+      modelValue: a.value,
+      "onUpdate:modelValue": e[2] || (e[2] = (s) => a.value = s),
+      size: "xl"
+    }, {
+      default: k(() => [
+        t("div", E, [
+          t("div", null, [
+            e[4] || (e[4] = t("h3", { class: "text-xl font-semibold ui-text" }, " Add Reminder ", -1)),
+            t("p", O, [
+              e[3] || (e[3] = N(" Configure reminder rules for ", -1)),
+              t("span", S, f(u.modelName), 1)
+            ])
+          ]),
+          t("div", U, [
+            e[5] || (e[5] = t("label", { class: "text-sm font-medium ui-text" }, " Days Before Due Date ", -1)),
+            _(t("input", {
+              "onUpdate:modelValue": e[0] || (e[0] = (s) => o.value = s),
+              type: "number",
+              min: "0",
+              class: "w-full px-3 py-2.5 border rounded-md focus:ring-2 focus:ring-(--ui-primary) focus:outline-none ui-surface"
+            }, null, 512), [
+              [w, o.value]
+            ])
+          ]),
+          t("div", $, [
+            e[6] || (e[6] = t("label", { class: "text-sm font-medium ui-text" }, " Notification Channel ", -1)),
+            t("div", z, [
+              (r(!0), y(R, null, T(u.sendTypeOptions, (s) => (r(), y("button", {
+                key: s.value,
+                type: "button",
+                class: h(["px-4 py-2 rounded-md text-sm font-medium transition", i.value === s.value ? "ui-primary-bg ui-text shadow" : "  border ui-surface ui-text hover:brightness-105"]),
+                onClick: (F) => i.value = s.value
+              }, f(s.label), 11, M))), 128))
+            ])
+          ]),
+          t("div", j, [
+            e[7] || (e[7] = t("label", { class: "text-sm font-medium ui-text" }, " Recipients ", -1)),
+            A(D, {
+              modelValue: n.value,
+              "onUpdate:modelValue": e[1] || (e[1] = (s) => n.value = s),
+              options: b.value,
+              placeholder: "Select recipients..."
+            }, null, 8, ["modelValue", "options"])
+          ]),
+          t("div", { class: "flex justify-end gap-3 pt-4 border-t" }, [
+            t("button", {
+              type: "button",
+              class: "px-4 py-2 rounded-md border ui-surface ui-text hover:brightness-105",
+              onClick: V
+            }, " Cancel "),
+            t("button", {
+              type: "button",
+              class: "px-5 py-2 rounded-md ui-primary-bg ui-text hover:bg-(--ui-primary-strong) shadow",
+              onClick: g
+            }, " Add Reminder ")
+          ])
+        ])
+      ]),
+      _: 1
+    }, 8, ["modelValue"]));
+  }
+};
+export {
+  H as default
+};

package/dist/components/Alert.cjs

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