@gspa/ui 0.1.3 → 0.2.0

package/dist/components/Select.js

@@ -0,0 +1,243 @@
+import { ref as c, computed as C, onMounted as X, onUnmounted as _, watch as L, createElementBlock as i, openBlock as s, mergeProps as F, renderSlot as Q, createElementVNode as d, createBlock as Z, normalizeClass as N, toDisplayString as w, Teleport as j, createCommentVNode as H, normalizeStyle as J, withDirectives as Y, withKeys as ee, withModifiers as b, vModelText as te, Fragment as oe, renderList as le, nextTick as ne } from "vue";
+import { cva as ae } from "class-variance-authority";
+import { cn as P } from "../utils/cn.js";
+const se = ["id", "name", "value", "disabled", "required"], ie = {
+  key: 1,
+  class: "relative"
+}, re = ["id", "disabled"], ue = {
+  key: 0,
+  class: "ui-text-muted"
+}, de = {
+  key: 1,
+  class: "ui-text"
+}, ce = { class: "px-3 py-2 border-b ui-border" }, pe = ["onKeydown"], fe = ["onClick"], ve = { class: "block font-normal truncate" }, me = {
+  key: 0,
+  class: "absolute inset-y-0 right-0 flex items-center pr-4 ui-primary"
+}, ye = {
+  key: 1,
+  class: "px-4 py-3 text-sm ui-text text-center"
+}, be = {
+  key: 2,
+  class: "px-4 py-3"
+}, p = 12, h = 4, R = 320, we = 180, he = 10050, De = {
+  __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(n, { emit: W }) {
+    const o = n, D = W, r = c(!1), a = c(""), E = c(null), v = c(null), g = c(null), u = c([...o.options]), O = c({}), M = C(() => o.options.find((e) => e.value === o.modelValue)), $ = ae(
+      "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)"
+          }
+        }
+      }
+    ), z = C(
+      () => P(
+        $({ disabled: o.disabled }),
+        "px-3 py-2",
+        o.class
+      )
+    ), A = C(
+      () => P(
+        "w-full px-3 py-2 text-left border rounded-md focus:outline-none focus:ring-2 focus:ring-(--ui-primary) ui-surface  ",
+        o.hasError ? "border-(--ui-danger)" : "ui-border",
+        o.disabled ? "ui-surface-muted cursor-not-allowed opacity-50" : "hover:border-(--ui-border-strong)",
+        o.class
+      )
+    ), f = () => {
+      if (!v.value || !r.value) return;
+      const e = v.value.getBoundingClientRect(), t = window.innerWidth, l = window.innerHeight, m = Math.max(0, l - e.bottom - h - p), I = Math.max(0, e.top - h - p), S = I > m, G = Math.max(
+        Math.min(R, S ? I : m),
+        Math.min(we, R)
+      ), U = Math.max(0, t - p * 2), k = Math.min(e.width, U);
+      let y = e.left;
+      y + k > t - p && (y = t - p - k), y < p && (y = p), O.value = {
+        position: "fixed",
+        left: `${y}px`,
+        width: `${k}px`,
+        maxHeight: `${G}px`,
+        zIndex: he,
+        ...S ? { bottom: `${l - e.top + h}px` } : { top: `${e.bottom + h}px` }
+      };
+    }, T = () => {
+      o.disabled || (r.value = !r.value, r.value && (f(), ne(() => {
+        E.value?.focus();
+      })));
+    }, q = (e) => {
+      D("update:modelValue", e), r.value = !1, a.value = "", u.value = [...o.options];
+    }, V = (e) => {
+      if (e && (e.stopPropagation(), e.preventDefault()), o.allowCreate && a.value.trim()) {
+        const t = a.value.trim();
+        D("update:modelValue", t), r.value = !1, a.value = "", u.value = [...o.options];
+      }
+    }, K = () => {
+      if (!a.value.trim())
+        u.value = [...o.options];
+      else {
+        const e = a.value.toLowerCase();
+        u.value = o.options.filter(
+          (t) => t.label.toLowerCase().includes(e)
+        );
+      }
+    }, x = (e) => {
+      e.key === "Escape" ? (r.value = !1, a.value = "", u.value = [...o.options]) : e.key === "Enter" && o.allowCreate && a.value.trim() && u.value.length === 0 && (e.preventDefault(), V(e));
+    }, B = (e) => {
+      if (!v.value) return;
+      const t = e.target, l = g.value && g.value.contains(t), m = v.value.contains(t);
+      !l && !m && (r.value = !1, a.value = "", u.value = [...o.options]);
+    };
+    return X(() => {
+      document.addEventListener("click", B), window.addEventListener("scroll", f, !0), window.addEventListener("resize", f);
+    }), _(() => {
+      document.removeEventListener("click", B), window.removeEventListener("scroll", f, !0), window.removeEventListener("resize", f);
+    }), L(() => o.options, (e) => {
+      u.value = [...e];
+    }, { immediate: !0 }), L(r, (e) => {
+      e && f();
+    }), (e, t) => !n.options || n.options.length === 0 ? (s(), i("select", F({
+      key: 0,
+      id: n.id,
+      name: n.name,
+      value: n.modelValue,
+      disabled: n.disabled,
+      required: n.required,
+      class: z.value
+    }, e.$attrs, {
+      onChange: t[0] || (t[0] = (l) => e.$emit("update:modelValue", l.target.value))
+    }), [
+      Q(e.$slots, "default")
+    ], 16, se)) : (s(), i("div", ie, [
+      d("button", {
+        id: n.id,
+        ref_key: "buttonRef",
+        ref: v,
+        type: "button",
+        disabled: n.disabled,
+        class: N(A.value),
+        onClick: T,
+        onKeydown: x
+      }, [
+        M.value ? (s(), i("div", de, w(M.value.label), 1)) : (s(), i("div", ue, w(n.placeholder || "Select an option"), 1)),
+        t[4] || (t[4] = d("svg", {
+          class: "absolute right-2 top-2.5 h-5 w-5 ui-text",
+          fill: "currentColor",
+          viewBox: "0 0 20 20"
+        }, [
+          d("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, re),
+      (s(), Z(j, { to: "body" }, [
+        r.value ? (s(), i("div", {
+          key: 0,
+          ref_key: "dropdownRef",
+          ref: g,
+          style: J(O.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"
+        }, [
+          d("div", ce, [
+            Y(d("input", {
+              ref_key: "searchInput",
+              ref: E,
+              "onUpdate:modelValue": t[1] || (t[1] = (l) => a.value = l),
+              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: K,
+              onKeydown: [
+                x,
+                ee(b(x, ["prevent"]), ["enter"])
+              ]
+            }, null, 40, pe), [
+              [te, a.value]
+            ])
+          ]),
+          u.value.length > 0 ? (s(), i("div", {
+            key: 0,
+            class: "overflow-y-auto flex-1 overscroll-contain",
+            onWheel: t[2] || (t[2] = b(() => {
+            }, ["stop"]))
+          }, [
+            (s(!0), i(oe, null, le(u.value, (l) => (s(), i("button", {
+              key: l.value,
+              type: "button",
+              class: N(["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": n.modelValue === l.value }]),
+              onClick: b((m) => q(l.value), ["stop"])
+            }, [
+              d("span", ve, w(l.label), 1),
+              n.modelValue === l.value ? (s(), i("span", me, [...t[5] || (t[5] = [
+                d("svg", {
+                  class: "h-5 w-5",
+                  fill: "currentColor",
+                  viewBox: "0 0 20 20"
+                }, [
+                  d("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)
+              ])])) : H("", !0)
+            ], 10, fe))), 128))
+          ], 32)) : o.allowCreate ? (s(), i("div", be, [
+            d("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: b(V, ["stop"]),
+              onMousedown: t[3] || (t[3] = b(() => {
+              }, ["prevent"]))
+            }, ' Create "' + w(a.value) + '" ', 33)
+          ])) : (s(), i("div", ye, " No options found "))
+        ], 4)) : H("", !0)
+      ]))
+    ]));
+  }
+};
+export {
+  De as default
+};

package/dist/components/Sidebar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),i=require("../utils/cn.cjs"),v=require("./Icon.cjs"),U=require("../_plugin-vue_export-helper-BHFhmbuH.cjs"),H={key:0,class:"flex ui-surface items-center justify-between p-4 border-b ui-border-strong shrink-0 lg:hidden"},Q={class:"text-base font-semibold ui-text"},R={class:"flex-1 overflow-y-auto overflow-x-hidden p-3 sm:p-4"},G={class:"space-y-2"},J={key:0},K={key:0,class:"absolute top-1.5 right-1.5 inline-flex items-center justify-center min-w-5 h-5 px-1 text-[10px] font-bold rounded-full ui-danger-bg ui-text-inverse"},X={key:1,class:"relative","data-submenu-dropdown":""},Y=["onClick"],Z={key:0,class:"absolute top-1.5 right-1.5 inline-flex items-center justify-center min-w-5 h-5 px-1 text-[10px] font-bold rounded-full ui-danger-bg ui-text-inverse"},ee={key:1,class:"absolute top-1.5 right-1.5 w-2 h-2 ui-primary-bg rounded-full"},te={class:"px-4 py-3 border-b ui-border-strong ui-surface-muted"},oe={class:"text-sm font-semibold ui-text"},re={key:0,class:"px-4 pt-3 pb-2"},ne={class:"relative"},le=["placeholder"],ae={class:"absolute left-3 top-1/2 transform -translate-y-1/2 ui-text-soft"},se={class:"py-2 pb-16 flex-1 min-h-0 overflow-y-auto overscroll-contain"},ue={key:0,class:"px-4 py-6 text-center"},ce={class:"truncate text-xl"},ie={key:0,class:"ml-auto inline-flex items-center justify-center min-w-5 h-5 px-1 text-[10px] font-bold rounded-full ui-danger-bg ui-text-inverse"},j=320,de={__name:"Sidebar",props:{sidebarWidth:{type:Number,default:130},header:{type:Object,default:null},navigationItems:{type:Array,required:!0},mobileOpen:{type:Boolean,default:!1},currentPath:{type:String,default:""},showSearch:{type:Boolean,default:!1},searchPlaceholder:{type:String,default:"Search..."},searchableMenus:{type:Array,default:()=>[]},themeScope:{type:String,default:"default",validator:m=>["default","module"].includes(m)}},emits:["navigate","update:mobileOpen","search"],setup(m,{expose:I,emit:O}){const n=m,b=O,a=e.ref(!1),d=e.ref(!1),s=e.ref(null),u=e.ref(""),f=e.computed(()=>n.mobileOpen),k=e.computed(()=>{if(!n.showSearch||!s.value)return!1;const t=s.value.name?.toLowerCase()||"";return n.searchableMenus.some(r=>t.includes(r.toLowerCase()))}),w=e.computed(()=>{if(!s.value?.subItems)return[];if(!u.value.trim())return s.value.subItems;const t=u.value.toLowerCase().trim();return s.value.subItems.filter(r=>{const c=r.label?.toLowerCase()||"",o=r.name?.toLowerCase()||"";return c.includes(t)||o.includes(t)})}),A=e.computed(()=>a.value?0:n.sidebarWidth+(d.value?j:0)),D=e.computed(()=>({left:`${n.sidebarWidth}px`,width:`${j}px`,maxWidth:`calc(100vw - ${n.sidebarWidth}px)`,top:"0px",height:"100vh",...n.themeScope==="module"?{background:"color-mix(in oklab, var(--module-soft-alt, var(--ui-accent-soft)) 50%, var(--ui-surface) 50%)"}:{}})),W=e.computed(()=>({width:`${n.sidebarWidth}px`,top:a.value?"0px":"4rem",...n.themeScope==="module"?{background:"color-mix(in oklab, var(--module-soft, var(--ui-primary-soft)) 45%, var(--ui-background) 55%)"}:{}})),h=t=>{b("navigate",t),a.value&&p();const r=d.value&&s.value&&s.value.subItems.some(c=>c.route===t.route);(a.value||!r)&&y()},p=()=>{b("update:mobileOpen",!1)},S=t=>t.subItems&&t.subItems.length>0,$=t=>typeof t?.route=="string"&&t.route.length>0,q=t=>{if(d.value&&s.value?.name===t.name){x();return}$(t)&&h(t),s.value=t,d.value=!0,u.value=""},x=()=>{d.value=!1,u.value="",s.value=null},y=()=>{x()},P=t=>{h(t)},T=t=>{u.value=t,b("search",{query:t,menu:s.value?.name})},F=()=>{u.value=""},C=t=>{t.target.closest("[data-submenu-dropdown]")||x()},l=t=>{const r=n.currentPath;return t.route?!!(r===t.route||r.startsWith(t.route+"/")):t.subItems&&t.subItems.length>0?t.subItems.some(c=>c.route?r===c.route||r.startsWith(c.route+"/"):!1):!1},_=t=>t?n.themeScope==="module"?"border shadow-sm":"bg-[color:color-mix(in oklab, var(--ui-primary-soft), transparent 18%)] border border-(--ui-primary-soft) shadow-sm":"ui-text hover:bg-(--ui-surface-muted) border border-transparent",E=t=>!t||n.themeScope!=="module"?null:{backgroundColor:"var(--module-soft, var(--ui-primary-soft))",borderColor:"var(--module-border, var(--ui-border-strong))"},N=t=>t?n.themeScope==="module"?"shadow-sm text-white":"ui-primary-bg shadow-sm":"ui-surface-muted ui-text-soft group-hover:text-(--ui-text) group-hover:bg-(--ui-primary-soft)",B=t=>t?n.themeScope!=="module"?{color:"#ffffff"}:{backgroundColor:"var(--module-primary, var(--ui-primary))",color:"#ffffff",border:"1px solid var(--module-border, var(--ui-border-strong))"}:null,V=t=>t?n.themeScope==="module"?"ui-text font-semibold":"ui-primary font-semibold":"ui-text group-hover:text-(--ui-text)",z=()=>null,g=()=>{const t=a.value;a.value=window.innerWidth<1024,t&&!a.value&&f.value&&p()},M=t=>{t.key==="Escape"&&(d.value?y():a.value&&f.value&&p())};return e.onMounted(()=>{g(),window.addEventListener("resize",g),document.addEventListener("keydown",M),document.addEventListener("click",C)}),e.onUnmounted(()=>{window.removeEventListener("resize",g),document.removeEventListener("keydown",M),document.removeEventListener("click",C)}),I({isMobile:a,isMobileOpen:f,submenuOpen:d,contentMarginLeft:A,closeAllMenus:y}),(t,r)=>{const c=e.resolveComponent("router-link");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(e.Transition,{"enter-active-class":"transition-opacity duration-300","leave-active-class":"transition-opacity duration-300","enter-from-class":"opacity-0","enter-to-class":"opacity-100","leave-from-class":"opacity-100","leave-to-class":"opacity-0"},{default:e.withCtx(()=>[f.value&&a.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"fixed inset-0 z-30 lg:hidden bg-black/30 backdrop-blur-2xs",onClick:p})):e.createCommentVNode("",!0)]),_:1}),e.createElementVNode("aside",{class:e.normalizeClass(e.unref(i.cn)("fixed left-0 z-40 ui-surface border-r ui-border-strong overflow-visible flex flex-col shadow-xl shadow-black/5","transition-transform duration-300 ease-out",n.themeScope==="module"&&"kv-module-sidebar",a.value?e.unref(i.cn)("transform h-screen",f.value?"translate-x-0":"-translate-x-full"):"translate-x-0 h-[calc(100vh-4rem)]")),style:e.normalizeStyle(W.value)},[a.value?(e.openBlock(),e.createElementBlock("div",H,[e.createElementVNode("h2",Q,e.toDisplayString(m.header?.title),1),e.createElementVNode("button",{class:"p-2 rounded-lg ui-text hover:bg-(--ui-surface-muted) transition-colors","aria-label":"Close sidebar",onClick:p},[...r[2]||(r[2]=[e.createElementVNode("svg",{class:"w-5 h-5",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.createElementVNode("nav",R,[e.createElementVNode("div",G,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.navigationItems,o=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:o.name||o.label},[o.type==="link"?(e.openBlock(),e.createElementBlock("div",J,[S(o)?(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("div",{class:e.normalizeClass(e.unref(i.cn)("flex flex-col items-center justify-center rounded-xl transition-all duration-200 cursor-pointer group relative py-3 px-2.5",_(l(o)))),style:e.normalizeStyle(E(l(o))),onClick:L=>q(o)},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(i.cn)("flex items-center justify-center rounded-lg transition-colors mb-2","w-10 h-10",N(l(o)))),style:e.normalizeStyle(B(l(o)))},[e.createVNode(v.default,{icon:o.icon,class:"w-5 h-5",style:e.normalizeStyle(l(o)?{color:"#ffffff"}:null)},null,8,["icon","style"])],6),e.createElementVNode("span",{class:e.normalizeClass(e.unref(i.cn)("text-[11px] leading-tight font-medium text-center",V(l(o)))),style:e.normalizeStyle(z(l(o)))},e.toDisplayString(o.label),7),o.badge?(e.openBlock(),e.createElementBlock("span",Z,e.toDisplayString(o.badge),1)):e.createCommentVNode("",!0),l(o)&&S(o)?(e.openBlock(),e.createElementBlock("div",ee)):e.createCommentVNode("",!0)],14,Y)])):(e.openBlock(),e.createBlock(c,{key:0,to:o.route,class:e.normalizeClass(e.unref(i.cn)("flex flex-col items-center justify-center rounded-xl transition-all duration-200 group relative py-3 px-2.5",_(l(o)))),style:e.normalizeStyle(E(l(o))),onClick:L=>h(o)},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(i.cn)("flex items-center justify-center rounded-lg transition-colors mb-2","w-10 h-10",N(l(o)))),style:e.normalizeStyle(B(l(o)))},[e.createVNode(v.default,{icon:o.icon,class:"w-5 h-5",style:e.normalizeStyle(l(o)?{color:"#ffffff"}:null)},null,8,["icon","style"])],6),e.createElementVNode("span",{class:e.normalizeClass(e.unref(i.cn)("text-[11px] leading-tight font-medium text-center",V(l(o)))),style:e.normalizeStyle(z(l(o)))},e.toDisplayString(o.label),7),o.badge?(e.openBlock(),e.createElementBlock("span",K,e.toDisplayString(o.badge),1)):e.createCommentVNode("",!0)]),_:2},1032,["to","class","style","onClick"]))])):e.createCommentVNode("",!0)],64))),128))])]),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","enter-to-class":"translate-x-0","leave-from-class":"translate-x-0","leave-to-class":"-translate-x-full"},{default:e.withCtx(()=>[d.value&&s.value&&(!a.value||f.value)?(e.openBlock(),e.createElementBlock("div",{key:0,"data-submenu-dropdown":"",class:e.normalizeClass(e.unref(i.cn)("ui-surface border ui-border-strong shadow-2xl overflow-hidden z-50 fixed border-l rounded-none flex flex-col min-h-0")),style:e.normalizeStyle(D.value)},[e.createElementVNode("div",te,[e.createElementVNode("p",oe,e.toDisplayString(s.value.label),1)]),k.value?(e.openBlock(),e.createElementBlock("div",re,[e.createElementVNode("div",ne,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":r[0]||(r[0]=o=>u.value=o),type:"text",placeholder:m.searchPlaceholder,class:"w-full px-3 py-2 pl-9 pr-9 text-sm border ui-border-strong rounded-xl focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:border-transparent transition-all ui-bg",onInput:r[1]||(r[1]=o=>T(u.value))},null,40,le),[[e.vModelText,u.value]]),e.createElementVNode("div",ae,[e.createVNode(v.default,{icon:"search",class:"w-4 h-4"})]),u.value?(e.openBlock(),e.createElementBlock("button",{key:0,class:"absolute right-2 top-1/2 transform -translate-y-1/2 ui-text-soft hover:text-(--ui-text) transition-colors p-1",onClick:F},[e.createVNode(v.default,{icon:"times",class:"w-4 h-4"})])):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0),e.createElementVNode("nav",se,[k.value&&u.value&&w.value.length===0?(e.openBlock(),e.createElementBlock("div",ue,[...r[3]||(r[3]=[e.createElementVNode("p",{class:"text-sm ui-text"}," No results found ",-1)])])):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(w.value,o=>(e.openBlock(),e.createBlock(c,{key:o.name,to:o.route,class:e.normalizeClass(e.unref(i.cn)("mx-2 flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",l(o)?"bg-[color:color-mix(in oklab, var(--ui-primary-soft), transparent 22%)] ui-primary":"ui-text hover:bg-(--ui-surface-muted)")),onClick:L=>P(o)},{default:e.withCtx(()=>[e.createVNode(v.default,{icon:o.icon||"circle",size:"xl"},null,8,["icon"]),e.createElementVNode("span",ce,e.toDisplayString(o.label),1),o.badge?(e.openBlock(),e.createElementBlock("span",ie,e.toDisplayString(o.badge),1)):e.createCommentVNode("",!0)]),_:2},1032,["to","class","onClick"]))),128))])],6)):e.createCommentVNode("",!0)]),_:1})],6)])}}},me=U._export_sfc(de,[["__scopeId","data-v-82c80c9a"]]);exports.default=me;

package/dist/components/Sidebar.js

@@ -0,0 +1,372 @@
+import { ref as C, computed as w, onMounted as ne, onUnmounted as le, resolveComponent as ae, createElementBlock as a, openBlock as s, createVNode as y, createElementVNode as o, Transition as Q, withCtx as M, createCommentVNode as f, normalizeStyle as v, normalizeClass as b, unref as p, toDisplayString as x, Fragment as O, renderList as R, createBlock as G, withDirectives as ue, vModelText as ie } from "vue";
+import { cn as m } from "../utils/cn.js";
+import S from "./Icon.js";
+import { _ as ce } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const de = {
+  key: 0,
+  class: "flex ui-surface items-center justify-between p-4 border-b ui-border-strong shrink-0 lg:hidden"
+}, fe = { class: "text-base font-semibold ui-text" }, ve = { class: "flex-1 overflow-y-auto overflow-x-hidden p-3 sm:p-4" }, pe = { class: "space-y-2" }, me = { key: 0 }, be = {
+  key: 0,
+  class: "absolute top-1.5 right-1.5 inline-flex items-center justify-center min-w-5 h-5 px-1 text-[10px] font-bold rounded-full ui-danger-bg ui-text-inverse"
+}, he = {
+  key: 1,
+  class: "relative",
+  "data-submenu-dropdown": ""
+}, xe = ["onClick"], ye = {
+  key: 0,
+  class: "absolute top-1.5 right-1.5 inline-flex items-center justify-center min-w-5 h-5 px-1 text-[10px] font-bold rounded-full ui-danger-bg ui-text-inverse"
+}, ge = {
+  key: 1,
+  class: "absolute top-1.5 right-1.5 w-2 h-2 ui-primary-bg rounded-full"
+}, ke = { class: "px-4 py-3 border-b ui-border-strong ui-surface-muted" }, we = { class: "text-sm font-semibold ui-text" }, _e = {
+  key: 0,
+  class: "px-4 pt-3 pb-2"
+}, Se = { class: "relative" }, Ce = ["placeholder"], Me = { class: "absolute left-3 top-1/2 transform -translate-y-1/2 ui-text-soft" }, Le = { class: "py-2 pb-16 flex-1 min-h-0 overflow-y-auto overscroll-contain" }, je = {
+  key: 0,
+  class: "px-4 py-6 text-center"
+}, Ae = { class: "truncate text-xl" }, Ee = {
+  key: 0,
+  class: "ml-auto inline-flex items-center justify-center min-w-5 h-5 px-1 text-[10px] font-bold rounded-full ui-danger-bg ui-text-inverse"
+}, H = 320, Ie = {
+  __name: "Sidebar",
+  props: {
+    sidebarWidth: {
+      type: Number,
+      default: 130
+    },
+    header: {
+      type: Object,
+      default: null
+    },
+    navigationItems: {
+      type: Array,
+      required: !0
+    },
+    mobileOpen: {
+      type: Boolean,
+      default: !1
+    },
+    currentPath: {
+      type: String,
+      default: ""
+    },
+    // Search props
+    showSearch: {
+      type: Boolean,
+      default: !1
+    },
+    searchPlaceholder: {
+      type: String,
+      default: "Search..."
+    },
+    searchableMenus: {
+      type: Array,
+      default: () => []
+      // Array of menu names that should have search (e.g., ['compliance', 'risks'])
+    },
+    themeScope: {
+      type: String,
+      default: "default",
+      validator: (g) => ["default", "module"].includes(g)
+    }
+  },
+  emits: [
+    "navigate",
+    "update:mobileOpen",
+    "search"
+  ],
+  setup(g, { expose: J, emit: K }) {
+    const n = g, L = K, u = C(!1), h = C(!1), i = C(null), c = C(""), k = w(() => n.mobileOpen), W = w(() => {
+      if (!n.showSearch || !i.value) return !1;
+      const e = i.value.name?.toLowerCase() || "";
+      return n.searchableMenus.some(
+        (r) => e.includes(r.toLowerCase())
+      );
+    }), N = w(() => {
+      if (!i.value?.subItems) return [];
+      if (!c.value.trim())
+        return i.value.subItems;
+      const e = c.value.toLowerCase().trim();
+      return i.value.subItems.filter((r) => {
+        const d = r.label?.toLowerCase() || "", t = r.name?.toLowerCase() || "";
+        return d.includes(e) || t.includes(e);
+      });
+    }), X = w(() => u.value ? 0 : n.sidebarWidth + (h.value ? H : 0)), Y = w(() => ({
+      left: `${n.sidebarWidth}px`,
+      width: `${H}px`,
+      maxWidth: `calc(100vw - ${n.sidebarWidth}px)`,
+      top: "0px",
+      height: "100vh",
+      ...n.themeScope === "module" ? {
+        background: "color-mix(in oklab, var(--module-soft-alt, var(--ui-accent-soft)) 50%, var(--ui-surface) 50%)"
+      } : {}
+    })), Z = w(() => ({
+      width: `${n.sidebarWidth}px`,
+      top: u.value ? "0px" : "4rem",
+      ...n.themeScope === "module" ? {
+        background: "color-mix(in oklab, var(--module-soft, var(--ui-primary-soft)) 45%, var(--ui-background) 55%)"
+      } : {}
+    })), j = (e) => {
+      L("navigate", e), u.value && _();
+      const r = h.value && i.value && i.value.subItems.some((d) => d.route === e.route);
+      (u.value || !r) && E();
+    }, _ = () => {
+      L("update:mobileOpen", !1);
+    }, $ = (e) => e.subItems && e.subItems.length > 0, ee = (e) => typeof e?.route == "string" && e.route.length > 0, te = (e) => {
+      if (h.value && i.value?.name === e.name) {
+        A();
+        return;
+      }
+      ee(e) && j(e), i.value = e, h.value = !0, c.value = "";
+    }, A = () => {
+      h.value = !1, c.value = "", i.value = null;
+    }, E = () => {
+      A();
+    }, re = (e) => {
+      j(e);
+    }, oe = (e) => {
+      c.value = e, L("search", { query: e, menu: i.value?.name });
+    }, se = () => {
+      c.value = "";
+    }, z = (e) => {
+      e.target.closest("[data-submenu-dropdown]") || A();
+    }, l = (e) => {
+      const r = n.currentPath;
+      return e.route ? !!(r === e.route || r.startsWith(e.route + "/")) : e.subItems && e.subItems.length > 0 ? e.subItems.some((d) => d.route ? r === d.route || r.startsWith(d.route + "/") : !1) : !1;
+    }, B = (e) => e ? n.themeScope === "module" ? "border shadow-sm" : "bg-[color:color-mix(in oklab, var(--ui-primary-soft), transparent 18%)] border border-(--ui-primary-soft) shadow-sm" : "ui-text hover:bg-(--ui-surface-muted) border border-transparent", P = (e) => !e || n.themeScope !== "module" ? null : {
+      backgroundColor: "var(--module-soft, var(--ui-primary-soft))",
+      borderColor: "var(--module-border, var(--ui-border-strong))"
+    }, T = (e) => e ? n.themeScope === "module" ? "shadow-sm text-white" : "ui-primary-bg shadow-sm" : "ui-surface-muted ui-text-soft group-hover:text-(--ui-text) group-hover:bg-(--ui-primary-soft)", V = (e) => e ? n.themeScope !== "module" ? {
+      color: "#ffffff"
+    } : {
+      backgroundColor: "var(--module-primary, var(--ui-primary))",
+      color: "#ffffff",
+      border: "1px solid var(--module-border, var(--ui-border-strong))"
+    } : null, q = (e) => e ? n.themeScope === "module" ? "ui-text font-semibold" : "ui-primary font-semibold" : "ui-text group-hover:text-(--ui-text)", D = () => null, I = () => {
+      const e = u.value;
+      u.value = window.innerWidth < 1024, e && !u.value && k.value && _();
+    }, U = (e) => {
+      e.key === "Escape" && (h.value ? E() : u.value && k.value && _());
+    };
+    return ne(() => {
+      I(), window.addEventListener("resize", I), document.addEventListener("keydown", U), document.addEventListener("click", z);
+    }), le(() => {
+      window.removeEventListener("resize", I), document.removeEventListener("keydown", U), document.removeEventListener("click", z);
+    }), J({
+      isMobile: u,
+      isMobileOpen: k,
+      submenuOpen: h,
+      contentMarginLeft: X,
+      closeAllMenus: E
+    }), (e, r) => {
+      const d = ae("router-link");
+      return s(), a("div", null, [
+        y(Q, {
+          "enter-active-class": "transition-opacity duration-300",
+          "leave-active-class": "transition-opacity duration-300",
+          "enter-from-class": "opacity-0",
+          "enter-to-class": "opacity-100",
+          "leave-from-class": "opacity-100",
+          "leave-to-class": "opacity-0"
+        }, {
+          default: M(() => [
+            k.value && u.value ? (s(), a("div", {
+              key: 0,
+              class: "fixed inset-0 z-30 lg:hidden bg-black/30 backdrop-blur-2xs",
+              onClick: _
+            })) : f("", !0)
+          ]),
+          _: 1
+        }),
+        o("aside", {
+          class: b(p(m)(
+            "fixed left-0 z-40 ui-surface border-r ui-border-strong overflow-visible flex flex-col shadow-xl shadow-black/5",
+            "transition-transform duration-300 ease-out",
+            n.themeScope === "module" && "kv-module-sidebar",
+            u.value ? p(m)("transform h-screen", k.value ? "translate-x-0" : "-translate-x-full") : "translate-x-0 h-[calc(100vh-4rem)]"
+          )),
+          style: v(Z.value)
+        }, [
+          u.value ? (s(), a("div", de, [
+            o("h2", fe, x(g.header?.title), 1),
+            o("button", {
+              class: "p-2 rounded-lg ui-text hover:bg-(--ui-surface-muted) transition-colors",
+              "aria-label": "Close sidebar",
+              onClick: _
+            }, [...r[2] || (r[2] = [
+              o("svg", {
+                class: "w-5 h-5",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24"
+              }, [
+                o("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "stroke-width": "2",
+                  d: "M6 18L18 6M6 6l12 12"
+                })
+              ], -1)
+            ])])
+          ])) : f("", !0),
+          o("nav", ve, [
+            o("div", pe, [
+              (s(!0), a(O, null, R(g.navigationItems, (t) => (s(), a(O, {
+                key: t.name || t.label
+              }, [
+                t.type === "link" ? (s(), a("div", me, [
+                  $(t) ? (s(), a("div", he, [
+                    o("div", {
+                      class: b(p(m)(
+                        "flex flex-col items-center justify-center rounded-xl transition-all duration-200 cursor-pointer group relative py-3 px-2.5",
+                        B(l(t))
+                      )),
+                      style: v(P(l(t))),
+                      onClick: (F) => te(t)
+                    }, [
+                      o("div", {
+                        class: b(p(m)(
+                          "flex items-center justify-center rounded-lg transition-colors mb-2",
+                          "w-10 h-10",
+                          T(l(t))
+                        )),
+                        style: v(V(l(t)))
+                      }, [
+                        y(S, {
+                          icon: t.icon,
+                          class: "w-5 h-5",
+                          style: v(l(t) ? { color: "#ffffff" } : null)
+                        }, null, 8, ["icon", "style"])
+                      ], 6),
+                      o("span", {
+                        class: b(p(m)(
+                          "text-[11px] leading-tight font-medium text-center",
+                          q(l(t))
+                        )),
+                        style: v(D(l(t)))
+                      }, x(t.label), 7),
+                      t.badge ? (s(), a("span", ye, x(t.badge), 1)) : f("", !0),
+                      l(t) && $(t) ? (s(), a("div", ge)) : f("", !0)
+                    ], 14, xe)
+                  ])) : (s(), G(d, {
+                    key: 0,
+                    to: t.route,
+                    class: b(p(m)(
+                      "flex flex-col items-center justify-center rounded-xl transition-all duration-200 group relative py-3 px-2.5",
+                      B(l(t))
+                    )),
+                    style: v(P(l(t))),
+                    onClick: (F) => j(t)
+                  }, {
+                    default: M(() => [
+                      o("div", {
+                        class: b(p(m)(
+                          "flex items-center justify-center rounded-lg transition-colors mb-2",
+                          "w-10 h-10",
+                          T(l(t))
+                        )),
+                        style: v(V(l(t)))
+                      }, [
+                        y(S, {
+                          icon: t.icon,
+                          class: "w-5 h-5",
+                          style: v(l(t) ? { color: "#ffffff" } : null)
+                        }, null, 8, ["icon", "style"])
+                      ], 6),
+                      o("span", {
+                        class: b(p(m)(
+                          "text-[11px] leading-tight font-medium text-center",
+                          q(l(t))
+                        )),
+                        style: v(D(l(t)))
+                      }, x(t.label), 7),
+                      t.badge ? (s(), a("span", be, x(t.badge), 1)) : f("", !0)
+                    ]),
+                    _: 2
+                  }, 1032, ["to", "class", "style", "onClick"]))
+                ])) : f("", !0)
+              ], 64))), 128))
+            ])
+          ]),
+          y(Q, {
+            "enter-active-class": "transition-transform duration-250 ease-out",
+            "leave-active-class": "transition-transform duration-200 ease-in",
+            "enter-from-class": "-translate-x-full",
+            "enter-to-class": "translate-x-0",
+            "leave-from-class": "translate-x-0",
+            "leave-to-class": "-translate-x-full"
+          }, {
+            default: M(() => [
+              h.value && i.value && (!u.value || k.value) ? (s(), a("div", {
+                key: 0,
+                "data-submenu-dropdown": "",
+                class: b(p(m)("ui-surface border ui-border-strong shadow-2xl overflow-hidden z-50 fixed border-l rounded-none flex flex-col min-h-0")),
+                style: v(Y.value)
+              }, [
+                o("div", ke, [
+                  o("p", we, x(i.value.label), 1)
+                ]),
+                W.value ? (s(), a("div", _e, [
+                  o("div", Se, [
+                    ue(o("input", {
+                      "onUpdate:modelValue": r[0] || (r[0] = (t) => c.value = t),
+                      type: "text",
+                      placeholder: g.searchPlaceholder,
+                      class: "w-full px-3 py-2 pl-9 pr-9 text-sm border ui-border-strong rounded-xl focus:outline-none focus:ring-2 focus:ring-(--ui-primary) focus:border-transparent transition-all ui-bg",
+                      onInput: r[1] || (r[1] = (t) => oe(c.value))
+                    }, null, 40, Ce), [
+                      [ie, c.value]
+                    ]),
+                    o("div", Me, [
+                      y(S, {
+                        icon: "search",
+                        class: "w-4 h-4"
+                      })
+                    ]),
+                    c.value ? (s(), a("button", {
+                      key: 0,
+                      class: "absolute right-2 top-1/2 transform -translate-y-1/2 ui-text-soft hover:text-(--ui-text) transition-colors p-1",
+                      onClick: se
+                    }, [
+                      y(S, {
+                        icon: "times",
+                        class: "w-4 h-4"
+                      })
+                    ])) : f("", !0)
+                  ])
+                ])) : f("", !0),
+                o("nav", Le, [
+                  W.value && c.value && N.value.length === 0 ? (s(), a("div", je, [...r[3] || (r[3] = [
+                    o("p", { class: "text-sm ui-text" }, " No results found ", -1)
+                  ])])) : (s(!0), a(O, { key: 1 }, R(N.value, (t) => (s(), G(d, {
+                    key: t.name,
+                    to: t.route,
+                    class: b(p(m)(
+                      "mx-2 flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
+                      l(t) ? "bg-[color:color-mix(in oklab, var(--ui-primary-soft), transparent 22%)] ui-primary" : "ui-text hover:bg-(--ui-surface-muted)"
+                    )),
+                    onClick: (F) => re(t)
+                  }, {
+                    default: M(() => [
+                      y(S, {
+                        icon: t.icon || "circle",
+                        size: "xl"
+                      }, null, 8, ["icon"]),
+                      o("span", Ae, x(t.label), 1),
+                      t.badge ? (s(), a("span", Ee, x(t.badge), 1)) : f("", !0)
+                    ]),
+                    _: 2
+                  }, 1032, ["to", "class", "onClick"]))), 128))
+                ])
+              ], 6)) : f("", !0)
+            ]),
+            _: 1
+          })
+        ], 6)
+      ]);
+    };
+  }
+}, ze = /* @__PURE__ */ ce(Ie, [["__scopeId", "data-v-82c80c9a"]]);
+export {
+  ze as default
+};

package/dist/components/Slider.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c={class:"w-full"},d=["min","max","step","value"],N={class:"flex justify-between text-xs ui-text mt-1"},p={__name:"Slider",props:{modelValue:{type:[Number,String],default:0},min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1}},emits:["update:modelValue"],setup(t,{emit:m}){const r=t,i=m,o=e.computed(()=>{const l=Number(r.modelValue),a=Number(r.min),n=Number(r.max);if(Number.isNaN(l)||Number.isNaN(a)||Number.isNaN(n)||n<=a)return"var(--ui-primary)";const u=(Math.min(Math.max(l,a),n)-a)/(n-a);return u<=.2?"#16a34a":u<=.4?"#65a30d":u<=.6?"#eab308":u<=.8?"#f97316":"#dc2626"}),s=l=>{i("update:modelValue",Number(l.target.value))};return(l,a)=>(e.openBlock(),e.createElementBlock("div",c,[e.createElementVNode("input",{type:"range",min:t.min,max:t.max,step:t.step,value:t.modelValue,class:"w-full cursor-pointer",style:e.normalizeStyle({accentColor:o.value}),onInput:s},null,44,d),e.createElementVNode("div",N,[e.createElementVNode("span",null,e.toDisplayString(t.min),1),e.createElementVNode("span",null,e.toDisplayString(t.modelValue),1),e.createElementVNode("span",null,e.toDisplayString(t.max),1)])]))}};exports.default=p;