@gspa/ui 0.1.3 → 0.1.4

package/dist/components/ReusableFormModal.js

@@ -0,0 +1,112 @@
+import { useSlots as V, computed as i, createBlock as z, openBlock as B, normalizeClass as x, withCtx as s, createVNode as N, createSlots as F, renderList as T, unref as y, renderSlot as r, normalizeProps as m, guardReactiveProps as c } from "vue";
+import A from "./Modal.js";
+import L from "./ReusableForm.js";
+const H = {
+  __name: "ReusableFormModal",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    modalType: {
+      type: String,
+      required: !0,
+      validator: (e) => ["create", "edit"].includes(e)
+    },
+    entityName: { type: String, default: "Item" },
+    fields: { type: Array, required: !0 },
+    sections: { type: Array, default: () => [] },
+    initialData: { type: Object, default: null },
+    loading: { type: Boolean, default: !1 },
+    customValidation: { type: Function, default: null },
+    crossValidate: { type: Function, default: null },
+    showSubmit: { type: Boolean, default: !0 },
+    submitLabel: { type: String, default: "" },
+    showReset: { type: Boolean, default: !1 },
+    showCancel: { type: Boolean, default: !0 },
+    modalSize: {
+      type: String,
+      default: "4xl",
+      validator: (e) => ["sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "full"].includes(e)
+    },
+    modalHeight: { type: String, default: "auto" },
+    modalResizable: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "submit", "close", "form-change"],
+  setup(e, { emit: b }) {
+    const t = e, n = b, d = V(), u = i({
+      get: () => t.modelValue,
+      set: (a) => n("update:modelValue", a)
+    }), h = i(() => t.submitLabel ? t.submitLabel : t.modalType === "create" ? `Create ${t.entityName}` : `Update ${t.entityName}`), g = i(() => t.modalType === "create" ? `Add New ${t.entityName}` : `Edit ${t.entityName}`), p = i(() => t.modalType === "create" ? `Fill in the details to create a new ${t.entityName.toLowerCase()}.` : `Update the ${t.entityName.toLowerCase()} information below.`), w = i(() => {
+      if (Array.isArray(t.sections) && t.sections.length > 0) {
+        const a = t.sections.flatMap((o) => Array.isArray(o?.fields) ? o.fields : []);
+        if (a.length > 0) return a;
+      }
+      return t.fields || [];
+    }), S = i(() => w.value.map((a) => a?.name).filter((a) => typeof a == "string" && !!a && !!d[`field-${a}`])), f = () => {
+      u.value = !1, n("close");
+    }, v = () => {
+      f();
+    }, $ = (a) => {
+      n("submit", {
+        ...a,
+        modalType: t.modalType,
+        originalData: t.initialData
+      });
+    };
+    return (a, o) => (B(), z(A, {
+      modelValue: u.value,
+      "onUpdate:modelValue": o[1] || (o[1] = (l) => u.value = l),
+      "show-close": !0,
+      "close-on-backdrop": !0,
+      size: e.modalSize,
+      class: x(e.modalHeight === "auto" ? "" : e.modalHeight),
+      resizable: e.modalResizable,
+      onClose: f
+    }, {
+      default: s(() => [
+        N(L, {
+          title: g.value,
+          description: p.value,
+          "entity-name": e.entityName,
+          fields: e.fields,
+          sections: e.sections,
+          "initial-data": e.initialData,
+          loading: e.loading,
+          "custom-validation": e.customValidation,
+          "cross-validate": e.crossValidate,
+          "submit-label": h.value,
+          "show-reset": e.showReset,
+          "show-cancel": e.showCancel,
+          "show-submit": e.showSubmit,
+          "form-type": e.modalType,
+          onSubmit: $,
+          onCancel: v,
+          onFormChange: o[0] || (o[0] = (l) => n("form-change", l))
+        }, F({ _: 2 }, [
+          y(d)["section-header"] ? {
+            name: "section-header",
+            fn: s((l) => [
+              r(a.$slots, "section-header", m(c(l)))
+            ]),
+            key: "0"
+          } : void 0,
+          T(S.value, (l) => ({
+            name: `field-${l}`,
+            fn: s((C) => [
+              r(a.$slots, `field-${l}`, m(c(C)))
+            ])
+          })),
+          y(d).actions ? {
+            name: "actions",
+            fn: s((l) => [
+              r(a.$slots, "actions", m(c(l)))
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1032, ["title", "description", "entity-name", "fields", "sections", "initial-data", "loading", "custom-validation", "cross-validate", "submit-label", "show-reset", "show-cancel", "show-submit", "form-type"])
+      ]),
+      _: 3
+    }, 8, ["modelValue", "size", "class", "resizable"]));
+  }
+};
+export {
+  H as default
+};

package/dist/components/RightDrawer.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),u={key:0,class:"fixed inset-0 z-[1200]"},m=["aria-label"],f={class:"flex items-center justify-between px-4 py-3 border-b ui-border shrink-0"},w={class:"text-sm font-semibold ui-text"},y={class:"flex-1 overflow-y-auto"},v={key:0,class:"border-t ui-border px-4 py-3 shrink-0"},k={__name:"RightDrawer",props:{modelValue:{type:Boolean,default:!1},title:{type:String,default:"Details"},size:{type:String,default:"md",validator:o=>["sm","md","lg","xl","full"].includes(o)},closeOnOverlay:{type:Boolean,default:!0},closeOnEsc:{type:Boolean,default:!0},showOverlay:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0}},emits:["update:modelValue","close"],setup(o,{emit:i}){const l=o,s=i,d=e.computed(()=>{const t={sm:"w-full max-w-sm",md:"w-full max-w-md",lg:"w-full max-w-lg",xl:"w-full max-w-xl",full:"w-full max-w-full"};return t[l.size]||t.md}),a=()=>{s("update:modelValue",!1),s("close")},c=()=>{l.closeOnOverlay&&a()},n=t=>{t.key==="Escape"&&l.modelValue&&l.closeOnEsc&&a()};return e.watch(()=>l.modelValue,t=>{typeof document>"u"||(document.body.style.overflow=t?"hidden":"")}),e.watch(()=>l.modelValue,t=>{typeof window>"u"||(t?window.addEventListener("keydown",n):window.removeEventListener("keydown",n))},{immediate:!0}),e.onUnmounted(()=>{typeof document<"u"&&(document.body.style.overflow=""),typeof window<"u"&&window.removeEventListener("keydown",n)}),(t,r)=>(e.openBlock(),e.createBlock(e.Transition,{"enter-active-class":"transition-opacity duration-200 ease-out","leave-active-class":"transition-opacity duration-200 ease-in","enter-from-class":"opacity-0","leave-to-class":"opacity-0"},{default:e.withCtx(()=>[o.modelValue?(e.openBlock(),e.createElementBlock("div",u,[o.showOverlay?(e.openBlock(),e.createElementBlock("div",{key:0,class:"absolute inset-0 bg-black/30 backdrop-blur-[1px]",onClick:c})):e.createCommentVNode("",!0),e.createVNode(e.Transition,{"enter-active-class":"transition-transform duration-250 ease-out","leave-active-class":"transition-transform duration-200 ease-in","enter-from-class":"translate-x-full","leave-to-class":"translate-x-full"},{default:e.withCtx(()=>[o.modelValue?(e.openBlock(),e.createElementBlock("aside",{key:0,class:e.normalizeClass(["absolute right-0 top-0 h-full ui-surface border-l ui-border shadow-2xl flex flex-col",d.value]),role:"dialog","aria-modal":"true","aria-label":o.title},[e.createElementVNode("div",f,[e.createElementVNode("h3",w,e.toDisplayString(o.title),1),o.showCloseButton?(e.openBlock(),e.createElementBlock("button",{key:0,class:"w-8 h-8 rounded-md ui-text-muted hover:bg-(--ui-surface-muted) hover:text-(--ui-text) transition-colors flex items-center justify-center",onClick:a},[...r[0]||(r[0]=[e.createElementVNode("span",{class:"sr-only"},"Close drawer",-1),e.createElementVNode("svg",{class:"w-4 h-4",fill:"none",stroke:"currentColor","stroke-width":"2",viewBox:"0 0 24 24"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18L18 6M6 6l12 12"})],-1)])])):e.createCommentVNode("",!0)]),e.createElementVNode("div",y,[e.renderSlot(t.$slots,"default")]),t.$slots.footer?(e.openBlock(),e.createElementBlock("div",v,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)],10,m)):e.createCommentVNode("",!0)]),_:3})])):e.createCommentVNode("",!0)]),_:3}))}};exports.default=k;

package/dist/components/RightDrawer.js

@@ -0,0 +1,143 @@
+import { computed as x, watch as c, onUnmounted as h, createBlock as k, openBlock as l, Transition as f, withCtx as m, createElementBlock as a, createCommentVNode as n, createVNode as b, normalizeClass as g, createElementVNode as s, toDisplayString as B, renderSlot as w } from "vue";
+const C = {
+  key: 0,
+  class: "fixed inset-0 z-[1200]"
+}, V = ["aria-label"], E = { class: "flex items-center justify-between px-4 py-3 border-b ui-border shrink-0" }, O = { class: "text-sm font-semibold ui-text" }, z = { class: "flex-1 overflow-y-auto" }, L = {
+  key: 0,
+  class: "border-t ui-border px-4 py-3 shrink-0"
+}, j = {
+  __name: "RightDrawer",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    title: {
+      type: String,
+      default: "Details"
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator: (t) => ["sm", "md", "lg", "xl", "full"].includes(t)
+    },
+    closeOnOverlay: {
+      type: Boolean,
+      default: !0
+    },
+    closeOnEsc: {
+      type: Boolean,
+      default: !0
+    },
+    showOverlay: {
+      type: Boolean,
+      default: !0
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["update:modelValue", "close"],
+  setup(t, { emit: y }) {
+    const o = t, d = y, v = x(() => {
+      const e = {
+        sm: "w-full max-w-sm",
+        md: "w-full max-w-md",
+        lg: "w-full max-w-lg",
+        xl: "w-full max-w-xl",
+        full: "w-full max-w-full"
+      };
+      return e[o.size] || e.md;
+    }), i = () => {
+      d("update:modelValue", !1), d("close");
+    }, p = () => {
+      o.closeOnOverlay && i();
+    }, r = (e) => {
+      e.key === "Escape" && o.modelValue && o.closeOnEsc && i();
+    };
+    return c(
+      () => o.modelValue,
+      (e) => {
+        typeof document > "u" || (document.body.style.overflow = e ? "hidden" : "");
+      }
+    ), c(
+      () => o.modelValue,
+      (e) => {
+        typeof window > "u" || (e ? window.addEventListener("keydown", r) : window.removeEventListener("keydown", r));
+      },
+      { immediate: !0 }
+    ), h(() => {
+      typeof document < "u" && (document.body.style.overflow = ""), typeof window < "u" && window.removeEventListener("keydown", r);
+    }), (e, u) => (l(), k(f, {
+      "enter-active-class": "transition-opacity duration-200 ease-out",
+      "leave-active-class": "transition-opacity duration-200 ease-in",
+      "enter-from-class": "opacity-0",
+      "leave-to-class": "opacity-0"
+    }, {
+      default: m(() => [
+        t.modelValue ? (l(), a("div", C, [
+          t.showOverlay ? (l(), a("div", {
+            key: 0,
+            class: "absolute inset-0 bg-black/30 backdrop-blur-[1px]",
+            onClick: p
+          })) : n("", !0),
+          b(f, {
+            "enter-active-class": "transition-transform duration-250 ease-out",
+            "leave-active-class": "transition-transform duration-200 ease-in",
+            "enter-from-class": "translate-x-full",
+            "leave-to-class": "translate-x-full"
+          }, {
+            default: m(() => [
+              t.modelValue ? (l(), a("aside", {
+                key: 0,
+                class: g([
+                  "absolute right-0 top-0 h-full ui-surface border-l ui-border shadow-2xl flex flex-col",
+                  v.value
+                ]),
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-label": t.title
+              }, [
+                s("div", E, [
+                  s("h3", O, B(t.title), 1),
+                  t.showCloseButton ? (l(), a("button", {
+                    key: 0,
+                    class: "w-8 h-8 rounded-md ui-text-muted hover:bg-(--ui-surface-muted) hover:text-(--ui-text) transition-colors flex items-center justify-center",
+                    onClick: i
+                  }, [...u[0] || (u[0] = [
+                    s("span", { class: "sr-only" }, "Close drawer", -1),
+                    s("svg", {
+                      class: "w-4 h-4",
+                      fill: "none",
+                      stroke: "currentColor",
+                      "stroke-width": "2",
+                      viewBox: "0 0 24 24"
+                    }, [
+                      s("path", {
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round",
+                        d: "M6 18L18 6M6 6l12 12"
+                      })
+                    ], -1)
+                  ])])) : n("", !0)
+                ]),
+                s("div", z, [
+                  w(e.$slots, "default")
+                ]),
+                e.$slots.footer ? (l(), a("div", L, [
+                  w(e.$slots, "footer")
+                ])) : n("", !0)
+              ], 10, V)) : n("", !0)
+            ]),
+            _: 3
+          })
+        ])) : n("", !0)
+      ]),
+      _: 3
+    }));
+  }
+};
+export {
+  j as default
+};

package/dist/components/Search.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),k=require("class-variance-authority"),i=require("../utils/cn.cjs"),T={class:"relative"},_={class:"absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none"},A=["value","placeholder","disabled"],I={key:0,class:"absolute right-3 top-1/2 transform -translate-y-1/2"},$=["aria-label"],j={key:1,class:"animate-spin"},q={key:0,class:"max-h-64 overflow-y-auto"},F=["onClick","onMouseenter"],K={class:"flex-1 text-left"},O={class:"font-medium ui-text"},U={key:0,class:"text-sm ui-text truncate"},H={key:1,class:"text-xs ui-text ml-3"},P={key:1,class:"px-4 py-3 text-sm ui-text text-center"},X={key:2,class:"border-t ui-border-strong p-2"},Z={__name:"Search",props:{modelValue:{type:String,default:""},results:{type:Array,default:()=>[]},placeholder:{type:String,default:"Search..."},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},clearable:{type:Boolean,default:!0},clearLabel:{type:String,default:"Clear search"},size:{type:String,default:"md",validator:l=>["sm","md","lg"].includes(l)},debounce:{type:Number,default:300},minLength:{type:Number,default:1},showNoResults:{type:Boolean,default:!0},noResultsText:{type:String,default:"No results found"},highlightMatches:{type:Boolean,default:!0}},emits:["update:modelValue","search","select","clear","focus","blur"],setup(l,{emit:y}){const g={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:"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"})])}},b={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:"M6 18 18 6M6 6l12 12"})])}},x={render(){return e.h("svg",{fill:"none",viewBox:"0 0 24 24",class:"animate-spin"},[e.h("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"}),e.h("path",{class:"opacity-75",fill:"currentColor",d:"m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})])}},a=l,r=y,d=e.ref(null),h=e.ref(null),s=e.ref(!1),o=e.ref(-1),u=e.ref(null),B=t=>{const c=t.target.value;r("update:modelValue",c),u.value&&clearTimeout(u.value),u.value=setTimeout(()=>{c.length>=a.minLength?(r("search",c),s.value=!0):s.value=!1},a.debounce)},w=t=>{r("focus",t),a.modelValue.length>=a.minLength&&(s.value=!0)},V=t=>{r("blur",t),setTimeout(()=>{s.value=!1,o.value=-1},150)},C=()=>{r("update:modelValue",""),r("clear"),s.value=!1,h.value?.focus()},f=t=>{r("select",t),s.value=!1,o.value=-1},N=t=>{if(!(!s.value||a.results.length===0))switch(t.key){case"ArrowDown":t.preventDefault(),o.value=Math.min(o.value+1,a.results.length-1);break;case"ArrowUp":t.preventDefault(),o.value=Math.max(o.value-1,-1);break;case"Enter":t.preventDefault(),o.value>=0&&f(a.results[o.value]);break;case"Escape":t.preventDefault(),s.value=!1,o.value=-1;break}},v=t=>{if(!a.highlightMatches||!a.modelValue||!t)return t;const c=new RegExp(`(${a.modelValue})`,"gi");return t.replace(c,"$1")},E=k.cva("block w-full rounded-lg border ui-surface  transition-colors duration-200 placeholder:text-(--ui-text) disabled:bg-(--ui-surface) disabled:text-(--ui-text) disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:border-(--ui-primary)",{variants:{size:{sm:"px-9 py-1.5 text-sm",md:"px-10 py-2 text-sm",lg:"px-12 py-3 text-base"}},defaultVariants:{size:"md"}}),z=k.cva("ui-text",{variants:{size:{sm:"w-4 h-4",md:"w-4 h-4",lg:"w-5 h-5"}},defaultVariants:{size:"md"}}),S=e.computed(()=>i.cn(E({size:a.size}))),M=e.computed(()=>i.cn(z({size:a.size}))),R=e.computed(()=>i.cn("absolute z-50 w-full mt-1 ui-surface  rounded-lg shadow-lg border ui-border-strong  max-h-96 overflow-hidden")),D=t=>i.cn("flex items-center w-full px-4 py-3 text-left transition-colors duration-150 hover:bg-(--ui-surface) focus:bg-(--ui-surface) focus:outline-none",{"ui-surface-muted":o.value===t}),p=t=>{d.value&&!d.value.contains(t.target)&&(s.value=!1,o.value=-1)};return e.onMounted(()=>document.addEventListener("click",p)),e.onUnmounted(()=>{document.removeEventListener("click",p),u.value&&clearTimeout(u.value)}),e.watch(()=>a.results,()=>o.value=-1),(t,c)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"searchRef",ref:d,class:"relative"},[e.createElementVNode("div",T,[e.createElementVNode("div",_,[e.createVNode(g,{class:e.normalizeClass(M.value)},null,8,["class"])]),e.createElementVNode("input",{ref_key:"inputRef",ref:h,value:l.modelValue,placeholder:l.placeholder,disabled:l.disabled,class:e.normalizeClass(S.value),onInput:B,onFocus:w,onBlur:V,onKeydown:N},null,42,A),l.modelValue||l.loading?(e.openBlock(),e.createElementBlock("div",I,[!l.loading&&l.clearable?(e.openBlock(),e.createElementBlock("button",{key:0,class:"ui-text hover:text-(--ui-text) transition-colors p-1 rounded-full hover:bg-(--ui-surface)","aria-label":l.clearLabel,onClick:C},[e.createVNode(b,{class:"w-4 h-4"})],8,$)):l.loading?(e.openBlock(),e.createElementBlock("div",j,[e.createVNode(x,{class:"w-4 h-4 ui-text"})])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]),e.createVNode(e.Transition,{"enter-active-class":"transition-all duration-200","enter-from-class":"opacity-0 scale-95 translate-y-1","enter-to-class":"opacity-100 scale-100 translate-y-0","leave-active-class":"transition-all duration-150","leave-from-class":"opacity-100 scale-100 translate-y-0","leave-to-class":"opacity-0 scale-95 translate-y-1"},{default:e.withCtx(()=>[s.value&&(l.results.length>0||l.showNoResults)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(R.value)},[l.results.length>0?(e.openBlock(),e.createElementBlock("div",q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.results,(n,m)=>(e.openBlock(),e.createElementBlock("button",{key:n.id||m,class:e.normalizeClass(D(m)),onClick:L=>f(n),onMouseenter:L=>o.value=m},[n.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.icon),{key:0,class:"w-4 h-4 mr-3 shrink-0"})):e.createCommentVNode("",!0),e.createElementVNode("div",K,[e.createElementVNode("div",O,e.toDisplayString(v(n.title)),1),n.description?(e.openBlock(),e.createElementBlock("div",U,e.toDisplayString(v(n.description)),1)):e.createCommentVNode("",!0)]),n.category?(e.openBlock(),e.createElementBlock("div",H,e.toDisplayString(n.category),1)):e.createCommentVNode("",!0)],42,F))),128))])):l.showNoResults?(e.openBlock(),e.createElementBlock("div",P,e.toDisplayString(l.noResultsText),1)):e.createCommentVNode("",!0),t.$slots.footer?(e.openBlock(),e.createElementBlock("div",X,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0)]),_:3})],512))}};exports.default=Z;

package/dist/components/Search.js

@@ -0,0 +1,252 @@
+import { ref as h, computed as x, onMounted as H, onUnmounted as O, watch as X, createElementBlock as o, openBlock as s, createElementVNode as v, createVNode as m, createCommentVNode as u, normalizeClass as y, Transition as Z, withCtx as q, Fragment as G, renderList as J, createBlock as P, resolveDynamicComponent as Q, toDisplayString as g, renderSlot as W, h as c } from "vue";
+import { cva as B } from "class-variance-authority";
+import { cn as p } from "../utils/cn.js";
+const Y = { class: "relative" }, ee = { class: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none" }, te = ["value", "placeholder", "disabled"], le = {
+  key: 0,
+  class: "absolute right-3 top-1/2 transform -translate-y-1/2"
+}, ae = ["aria-label"], se = {
+  key: 1,
+  class: "animate-spin"
+}, oe = {
+  key: 0,
+  class: "max-h-64 overflow-y-auto"
+}, ne = ["onClick", "onMouseenter"], re = { class: "flex-1 text-left" }, ue = { class: "font-medium ui-text" }, ie = {
+  key: 0,
+  class: "text-sm ui-text truncate"
+}, ce = {
+  key: 1,
+  class: "text-xs ui-text ml-3"
+}, de = {
+  key: 1,
+  class: "px-4 py-3 text-sm ui-text text-center"
+}, fe = {
+  key: 2,
+  class: "border-t ui-border-strong p-2"
+}, ye = {
+  __name: "Search",
+  props: {
+    modelValue: { type: String, default: "" },
+    results: { type: Array, default: () => [] },
+    placeholder: { type: String, default: "Search..." },
+    disabled: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    clearable: { type: Boolean, default: !0 },
+    clearLabel: { type: String, default: "Clear search" },
+    size: {
+      type: String,
+      default: "md",
+      validator: (t) => ["sm", "md", "lg"].includes(t)
+    },
+    debounce: { type: Number, default: 300 },
+    minLength: { type: Number, default: 1 },
+    showNoResults: { type: Boolean, default: !0 },
+    noResultsText: { type: String, default: "No results found" },
+    highlightMatches: { type: Boolean, default: !0 }
+  },
+  emits: [
+    "update:modelValue",
+    "search",
+    "select",
+    "clear",
+    "focus",
+    "blur"
+  ],
+  setup(t, { emit: R }) {
+    const M = {
+      render() {
+        return c("svg", {
+          fill: "none",
+          viewBox: "0 0 24 24",
+          "stroke-width": "1.5",
+          stroke: "currentColor"
+        }, [
+          c("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+          })
+        ]);
+      }
+    }, S = {
+      render() {
+        return c("svg", {
+          fill: "none",
+          viewBox: "0 0 24 24",
+          "stroke-width": "1.5",
+          stroke: "currentColor"
+        }, [
+          c("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M6 18 18 6M6 6l12 12"
+          })
+        ]);
+      }
+    }, L = {
+      render() {
+        return c("svg", {
+          fill: "none",
+          viewBox: "0 0 24 24",
+          class: "animate-spin"
+        }, [
+          c("circle", {
+            class: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            "stroke-width": "4"
+          }),
+          c("path", {
+            class: "opacity-75",
+            fill: "currentColor",
+            d: "m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          })
+        ]);
+      }
+    }, l = t, i = R, b = h(null), w = h(null), n = h(!1), a = h(-1), f = h(null), N = (e) => {
+      const d = e.target.value;
+      i("update:modelValue", d), f.value && clearTimeout(f.value), f.value = setTimeout(() => {
+        d.length >= l.minLength ? (i("search", d), n.value = !0) : n.value = !1;
+      }, l.debounce);
+    }, T = (e) => {
+      i("focus", e), l.modelValue.length >= l.minLength && (n.value = !0);
+    }, D = (e) => {
+      i("blur", e), setTimeout(() => {
+        n.value = !1, a.value = -1;
+      }, 150);
+    }, E = () => {
+      i("update:modelValue", ""), i("clear"), n.value = !1, w.value?.focus();
+    }, C = (e) => {
+      i("select", e), n.value = !1, a.value = -1;
+    }, I = (e) => {
+      if (!(!n.value || l.results.length === 0))
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault(), a.value = Math.min(a.value + 1, l.results.length - 1);
+            break;
+          case "ArrowUp":
+            e.preventDefault(), a.value = Math.max(a.value - 1, -1);
+            break;
+          case "Enter":
+            e.preventDefault(), a.value >= 0 && C(l.results[a.value]);
+            break;
+          case "Escape":
+            e.preventDefault(), n.value = !1, a.value = -1;
+            break;
+        }
+    }, V = (e) => {
+      if (!l.highlightMatches || !l.modelValue || !e) return e;
+      const d = new RegExp(`(${l.modelValue})`, "gi");
+      return e.replace(d, "$1");
+    }, $ = B(
+      "block w-full rounded-lg border ui-surface  transition-colors duration-200 placeholder:text-(--ui-text) disabled:bg-(--ui-surface) disabled:text-(--ui-text) disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:border-(--ui-primary)",
+      {
+        variants: {
+          size: {
+            sm: "px-9 py-1.5 text-sm",
+            md: "px-10 py-2 text-sm",
+            lg: "px-12 py-3 text-base"
+          }
+        },
+        defaultVariants: { size: "md" }
+      }
+    ), A = B("ui-text", {
+      variants: {
+        size: {
+          sm: "w-4 h-4",
+          md: "w-4 h-4",
+          lg: "w-5 h-5"
+        }
+      },
+      defaultVariants: { size: "md" }
+    }), _ = x(() => p($({ size: l.size }))), F = x(() => p(A({ size: l.size }))), j = x(
+      () => p("absolute z-50 w-full mt-1 ui-surface  rounded-lg shadow-lg border ui-border-strong  max-h-96 overflow-hidden")
+    ), K = (e) => p(
+      "flex items-center w-full px-4 py-3 text-left transition-colors duration-150 hover:bg-(--ui-surface) focus:bg-(--ui-surface) focus:outline-none",
+      { "ui-surface-muted": a.value === e }
+    ), z = (e) => {
+      b.value && !b.value.contains(e.target) && (n.value = !1, a.value = -1);
+    };
+    return H(() => document.addEventListener("click", z)), O(() => {
+      document.removeEventListener("click", z), f.value && clearTimeout(f.value);
+    }), X(() => l.results, () => a.value = -1), (e, d) => (s(), o("div", {
+      ref_key: "searchRef",
+      ref: b,
+      class: "relative"
+    }, [
+      v("div", Y, [
+        v("div", ee, [
+          m(M, {
+            class: y(F.value)
+          }, null, 8, ["class"])
+        ]),
+        v("input", {
+          ref_key: "inputRef",
+          ref: w,
+          value: t.modelValue,
+          placeholder: t.placeholder,
+          disabled: t.disabled,
+          class: y(_.value),
+          onInput: N,
+          onFocus: T,
+          onBlur: D,
+          onKeydown: I
+        }, null, 42, te),
+        t.modelValue || t.loading ? (s(), o("div", le, [
+          !t.loading && t.clearable ? (s(), o("button", {
+            key: 0,
+            class: "ui-text hover:text-(--ui-text) transition-colors p-1 rounded-full hover:bg-(--ui-surface)",
+            "aria-label": t.clearLabel,
+            onClick: E
+          }, [
+            m(S, { class: "w-4 h-4" })
+          ], 8, ae)) : t.loading ? (s(), o("div", se, [
+            m(L, { class: "w-4 h-4 ui-text" })
+          ])) : u("", !0)
+        ])) : u("", !0)
+      ]),
+      m(Z, {
+        "enter-active-class": "transition-all duration-200",
+        "enter-from-class": "opacity-0 scale-95 translate-y-1",
+        "enter-to-class": "opacity-100 scale-100 translate-y-0",
+        "leave-active-class": "transition-all duration-150",
+        "leave-from-class": "opacity-100 scale-100 translate-y-0",
+        "leave-to-class": "opacity-0 scale-95 translate-y-1"
+      }, {
+        default: q(() => [
+          n.value && (t.results.length > 0 || t.showNoResults) ? (s(), o("div", {
+            key: 0,
+            class: y(j.value)
+          }, [
+            t.results.length > 0 ? (s(), o("div", oe, [
+              (s(!0), o(G, null, J(t.results, (r, k) => (s(), o("button", {
+                key: r.id || k,
+                class: y(K(k)),
+                onClick: (U) => C(r),
+                onMouseenter: (U) => a.value = k
+              }, [
+                r.icon ? (s(), P(Q(r.icon), {
+                  key: 0,
+                  class: "w-4 h-4 mr-3 shrink-0"
+                })) : u("", !0),
+                v("div", re, [
+                  v("div", ue, g(V(r.title)), 1),
+                  r.description ? (s(), o("div", ie, g(V(r.description)), 1)) : u("", !0)
+                ]),
+                r.category ? (s(), o("div", ce, g(r.category), 1)) : u("", !0)
+              ], 42, ne))), 128))
+            ])) : t.showNoResults ? (s(), o("div", de, g(t.noResultsText), 1)) : u("", !0),
+            e.$slots.footer ? (s(), o("div", fe, [
+              W(e.$slots, "footer")
+            ])) : u("", !0)
+          ], 2)) : u("", !0)
+        ]),
+        _: 3
+      })
+    ], 512));
+  }
+};
+export {
+  ye as default
+};

package/dist/components/Select.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),W=require("class-variance-authority"),C=require("../utils/cn.cjs"),$=["id","name","value","disabled","required"],q={key:1,class:"relative"},z=["id","disabled"],A={key:0,class:"ui-text-muted"},T={key:1,class:"ui-text"},K={class:"px-3 py-2 border-b ui-border"},_=["onKeydown"],G=["onClick"],U={class:"block font-normal truncate"},X={key:0,class:"absolute inset-y-0 right-0 flex items-center pr-4 ui-primary"},j={key:1,class:"px-4 py-3 text-sm ui-text text-center"},F={key:2,class:"px-4 py-3"},u=12,m=4,D=320,Q=180,Z=10050,J={__name:"Select",props:{modelValue:{type:[String,Number,Boolean],default:""},options:{type:Array,default:()=>[]},placeholder:{type:String,default:null},hasError:{type:Boolean,default:!1},id:{type:String,default:null},name:{type:String,default:null},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},allowCreate:{type:Boolean,default:!1},class:String},emits:["update:modelValue"],setup(a,{emit:M}){const l=a,w=M,i=e.ref(!1),r=e.ref(""),h=e.ref(null),c=e.ref(null),v=e.ref(null),s=e.ref([...l.options]),g=e.ref({}),k=e.computed(()=>l.options.find(t=>t.value===l.modelValue)),N=W.cva("border ui-border-strong  rounded-md focus:outline-none focus:ring-2 focus:ring-(--ui-primary) text-sm min-w-[60px] focus:border-transparent ",{variants:{disabled:{true:"ui-surface-muted cursor-not-allowed opacity-50",false:"ui-surface hover:border-(--ui-border-strong)"}}}),O=e.computed(()=>C.cn(N({disabled:l.disabled}),"px-3 py-2",l.class)),S=e.computed(()=>C.cn("w-full px-3 py-2 text-left border rounded-md focus:outline-none focus:ring-2 focus:ring-(--ui-primary) ui-surface  ",l.hasError?"border-(--ui-danger)":"ui-border",l.disabled?"ui-surface-muted cursor-not-allowed opacity-50":"hover:border-(--ui-border-strong)",l.class)),d=()=>{if(!c.value||!i.value)return;const t=c.value.getBoundingClientRect(),o=window.innerWidth,n=window.innerHeight,p=Math.max(0,n-t.bottom-m-u),E=Math.max(0,t.top-m-u),V=E>p,H=Math.max(Math.min(D,V?E:p),Math.min(Q,D)),R=Math.max(0,o-u*2),b=Math.min(t.width,R);let f=t.left;f+b>o-u&&(f=o-u-b),f<u&&(f=u),g.value={position:"fixed",left:`${f}px`,width:`${b}px`,maxHeight:`${H}px`,zIndex:Z,...V?{bottom:`${n-t.top+m}px`}:{top:`${t.bottom+m}px`}}},I=()=>{l.disabled||(i.value=!i.value,i.value&&(d(),e.nextTick(()=>{h.value?.focus()})))},L=t=>{w("update:modelValue",t),i.value=!1,r.value="",s.value=[...l.options]},x=t=>{if(t&&(t.stopPropagation(),t.preventDefault()),l.allowCreate&&r.value.trim()){const o=r.value.trim();w("update:modelValue",o),i.value=!1,r.value="",s.value=[...l.options]}},P=()=>{if(!r.value.trim())s.value=[...l.options];else{const t=r.value.toLowerCase();s.value=l.options.filter(o=>o.label.toLowerCase().includes(t))}},y=t=>{t.key==="Escape"?(i.value=!1,r.value="",s.value=[...l.options]):t.key==="Enter"&&l.allowCreate&&r.value.trim()&&s.value.length===0&&(t.preventDefault(),x(t))},B=t=>{if(!c.value)return;const o=t.target,n=v.value&&v.value.contains(o),p=c.value.contains(o);!n&&!p&&(i.value=!1,r.value="",s.value=[...l.options])};return e.onMounted(()=>{document.addEventListener("click",B),window.addEventListener("scroll",d,!0),window.addEventListener("resize",d)}),e.onUnmounted(()=>{document.removeEventListener("click",B),window.removeEventListener("scroll",d,!0),window.removeEventListener("resize",d)}),e.watch(()=>l.options,t=>{s.value=[...t]},{immediate:!0}),e.watch(i,t=>{t&&d()}),(t,o)=>!a.options||a.options.length===0?(e.openBlock(),e.createElementBlock("select",e.mergeProps({key:0,id:a.id,name:a.name,value:a.modelValue,disabled:a.disabled,required:a.required,class:O.value},t.$attrs,{onChange:o[0]||(o[0]=n=>t.$emit("update:modelValue",n.target.value))}),[e.renderSlot(t.$slots,"default")],16,$)):(e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("button",{id:a.id,ref_key:"buttonRef",ref:c,type:"button",disabled:a.disabled,class:e.normalizeClass(S.value),onClick:I,onKeydown:y},[k.value?(e.openBlock(),e.createElementBlock("div",T,e.toDisplayString(k.value.label),1)):(e.openBlock(),e.createElementBlock("div",A,e.toDisplayString(a.placeholder||"Select an option"),1)),o[4]||(o[4]=e.createElementVNode("svg",{class:"absolute right-2 top-2.5 h-5 w-5 ui-text",fill:"currentColor",viewBox:"0 0 20 20"},[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z","clip-rule":"evenodd"})],-1))],42,z),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[i.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"dropdownRef",ref:v,style:e.normalizeStyle(g.value),"data-select-dropdown":"",class:"ui-surface border ui-border-strong shadow-lg rounded-md py-1 text-base overflow-hidden focus:outline-none flex flex-col overscroll-contain"},[e.createElementVNode("div",K,[e.withDirectives(e.createElementVNode("input",{ref_key:"searchInput",ref:h,"onUpdate:modelValue":o[1]||(o[1]=n=>r.value=n),type:"text",placeholder:"Search options...",class:"w-full px-2 py-1 text-sm border ui-border-strong rounded focus:outline-none focus:ring-1 focus:ring-(--ui-primary) ui-surface placeholder:text-(--ui-text-muted)",onInput:P,onKeydown:[y,e.withKeys(e.withModifiers(y,["prevent"]),["enter"])]},null,40,_),[[e.vModelText,r.value]])]),s.value.length>0?(e.openBlock(),e.createElementBlock("div",{key:0,class:"overflow-y-auto flex-1 overscroll-contain",onWheel:o[2]||(o[2]=e.withModifiers(()=>{},["stop"]))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,n=>(e.openBlock(),e.createElementBlock("button",{key:n.value,type:"button",class:e.normalizeClass(["cursor-pointer select-none relative py-2 pl-3 pr-9 w-full text-left hover:bg-(--ui-primary-soft) focus:bg-(--ui-primary-soft) focus:outline-none transition-colors duration-150",{"ui-primary-soft ui-primary":a.modelValue===n.value}]),onClick:e.withModifiers(p=>L(n.value),["stop"])},[e.createElementVNode("span",U,e.toDisplayString(n.label),1),a.modelValue===n.value?(e.openBlock(),e.createElementBlock("span",X,[...o[5]||(o[5]=[e.createElementVNode("svg",{class:"h-5 w-5",fill:"currentColor",viewBox:"0 0 20 20"},[e.createElementVNode("path",{"fill-rule":"evenodd",d:"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z","clip-rule":"evenodd"})],-1)])])):e.createCommentVNode("",!0)],10,G))),128))],32)):l.allowCreate?(e.openBlock(),e.createElementBlock("div",F,[e.createElementVNode("button",{type:"button",class:"w-full text-left px-2 py-1 text-sm ui-primary hover:bg-(--ui-primary-soft) rounded cursor-pointer transition-colors",onClick:e.withModifiers(x,["stop"]),onMousedown:o[3]||(o[3]=e.withModifiers(()=>{},["prevent"]))},' Create "'+e.toDisplayString(r.value)+'" ',33)])):(e.openBlock(),e.createElementBlock("div",j," No options found "))],4)):e.createCommentVNode("",!0)]))]))}};exports.default=J;