@stachelock/ui 0.1.9 → 0.2.1

package/dist/index.js

@@ -1,6 +1,6 @@
-import { a as dt, g as ut, s as pt } from "./id-DafBB_QF.js";
-import { defineAsyncComponent as E, defineComponent as y, computed as R, ref as H, watch as W, createElementBlock as u, openBlock as p, normalizeClass as G, createCommentVNode as h, createElementVNode as s, toDisplayString as f, reactive as Y, createVNode as d } from "vue";
-import i from "./components/TextInput.js";
+import { a as ut, g as gt, s as bt } from "./id-DafBB_QF.js";
+import { defineAsyncComponent as k, defineComponent as _, computed as R, ref as H, watch as W, createElementBlock as p, openBlock as c, normalizeClass as G, createCommentVNode as h, createElementVNode as n, toDisplayString as u, reactive as Y, createVNode as d } from "vue";
+import m from "./components/TextInput.js";
 import { _ as q } from "./UiAvatar.vue_vue_type_script_setup_true_lang-CDNjUA1L.js";
 import J from "./components/Badge.js";
 import { _ as K } from "./UiBreadcrumb.vue_vue_type_script_setup_true_lang-quGuN9v4.js";
@@ -9,56 +9,56 @@ import { _ as X } from "./UiLoading.vue_vue_type_script_setup_true_lang-DCz52-Me
 import Z from "./components/LoadingDots.js";
 import { _ as ee } from "./UiModal.vue_vue_type_script_setup_true_lang-SAo39zpS.js";
 import { _ as te } from "./UiNavLink.vue_vue_type_script_setup_true_lang-Bz5oiCCk.js";
-import { _ as se } from "./UiProgressBar.vue_vue_type_script_setup_true_lang-0zFKwh43.js";
+import { _ as oe } from "./UiProgressBar.vue_vue_type_script_setup_true_lang-0zFKwh43.js";
 import { _ as ae } from "./UiTable.vue_vue_type_script_setup_true_lang-hI1_xamh.js";
-import { _ as oe } from "./UiTransition.vue_vue_type_script_setup_true_lang-DwBTj18t.js";
-import { _ as C } from "./CalendarHeader.vue_vue_type_script_setup_true_lang-Cirr0hMB.js";
-import { _ as v } from "./DayCalendar.vue_vue_type_script_setup_true_lang-xE5bCa3O.js";
-import { _ as I } from "./EventCard.vue_vue_type_script_setup_true_lang-YV1lfgUY.js";
+import { _ as se } from "./UiTransition.vue_vue_type_script_setup_true_lang-DwBTj18t.js";
+import { _ as $ } from "./CalendarHeader.vue_vue_type_script_setup_true_lang-Cirr0hMB.js";
+import { _ as C } from "./DayCalendar.vue_vue_type_script_setup_true_lang-xE5bCa3O.js";
+import { _ as v } from "./EventCard.vue_vue_type_script_setup_true_lang-YV1lfgUY.js";
 import { _ as S } from "./EventsList.vue_vue_type_script_setup_true_lang-Cn_WOpZi.js";
 import { _ as w } from "./MonthCalendar.vue_vue_type_script_setup_true_lang-B9Bs0z8j.js";
-import { _ as $ } from "./WeekCalendar.vue_vue_type_script_setup_true_lang-DAFQiRI9.js";
+import { _ as I } from "./WeekCalendar.vue_vue_type_script_setup_true_lang-DAFQiRI9.js";
 import { _ as T } from "./YearCalendar.vue_vue_type_script_setup_true_lang-BfJkvmpN.js";
-import { _ as k } from "./DynamicForm.vue_vue_type_script_setup_true_lang-BpfPAZiT.js";
+import { _ as F } from "./DynamicForm.vue_vue_type_script_setup_true_lang-BpfPAZiT.js";
 import { _ as L } from "./DynamicFormField.vue_vue_type_script_setup_true_lang-DvT03FIS.js";
 import { _ as g } from "./CheckboxInput.vue_vue_type_script_setup_true_lang-tYAo46wK.js";
-import { _ } from "./ComboboxInput.vue_vue_type_script_setup_true_lang-2dJNxQUF.js";
-import { _ as b } from "./TextAreaInput.vue_vue_type_script_setup_true_lang-CbR651TU.js";
-import { _ as x } from "./SwitchInput.vue_vue_type_script_setup_true_lang-BFr2SByh.js";
-import { _ as c } from "./SelectInput.vue_vue_type_script_setup_true_lang-BPjHLHdM.js";
-import { _ as M } from "./TagifyInput.vue_vue_type_script_setup_true_lang-DRR6jt_8.js";
-import { _ as F } from "./DashboardLayout.vue_vue_type_script_setup_true_lang-BVQR4s1E.js";
-import { _ as V } from "./DefaultLayout.vue_vue_type_script_setup_true_lang-BZAz6aC-.js";
+import { _ as b } from "./ComboboxInput.vue_vue_type_script_setup_true_lang-2dJNxQUF.js";
+import { _ as x } from "./TextAreaInput.vue_vue_type_script_setup_true_lang-CbR651TU.js";
+import { _ as y } from "./SwitchInput.vue_vue_type_script_setup_true_lang-BFr2SByh.js";
+import { _ as f } from "./SelectInput.vue_vue_type_script_setup_true_lang-BPjHLHdM.js";
+import { _ as E } from "./TagifyInput.vue_vue_type_script_setup_true_lang-DRR6jt_8.js";
+import { _ as j } from "./DashboardLayout.vue_vue_type_script_setup_true_lang-BVQR4s1E.js";
+import { _ as A } from "./DefaultLayout.vue_vue_type_script_setup_true_lang-BZAz6aC-.js";
 import { _ as D } from "./HeaderLayout.vue_vue_type_script_setup_true_lang-BY2G6hCc.js";
-import { _ as B } from "./NavigationGroup.vue_vue_type_script_setup_true_lang-2WURj34G.js";
-import { _ as P } from "./NavigationItem.vue_vue_type_script_setup_true_lang-DiNg3gz2.js";
-import { _ as A } from "./SidebarLayout.vue_vue_type_script_setup_true_lang-J1nfUTdM.js";
-import O from "./calendars/CalendarDashboard.js";
-import N from "./forms/FormFieldWrapper.js";
-const le = {
+import { _ as O } from "./NavigationGroup.vue_vue_type_script_setup_true_lang-2WURj34G.js";
+import { _ as M } from "./NavigationItem.vue_vue_type_script_setup_true_lang-DiNg3gz2.js";
+import { _ as N } from "./SidebarLayout.vue_vue_type_script_setup_true_lang-J1nfUTdM.js";
+import U from "./calendars/CalendarDashboard.js";
+import V from "./forms/FormFieldWrapper.js";
+const re = {
   text: {
     component: "TextInput",
-    loader: () => Promise.resolve(i)
+    loader: () => Promise.resolve(m)
   },
   email: {
     component: "TextInput",
-    loader: () => Promise.resolve(i)
+    loader: () => Promise.resolve(m)
   },
   password: {
     component: "TextInput",
-    loader: () => Promise.resolve(i)
+    loader: () => Promise.resolve(m)
   },
   number: {
     component: "TextInput",
-    loader: () => Promise.resolve(i)
+    loader: () => Promise.resolve(m)
   },
   tel: {
     component: "TextInput",
-    loader: () => Promise.resolve(i)
+    loader: () => Promise.resolve(m)
   },
   url: {
     component: "TextInput",
-    loader: () => Promise.resolve(i)
+    loader: () => Promise.resolve(m)
   },
   textarea: {
     component: "TextAreaInput",
@@ -82,28 +82,28 @@ const le = {
   }
 };
 class ne {
-  componentMap = { ...le };
+  componentMap = { ...re };
   loadedComponents = /* @__PURE__ */ new Map();
   /**
    * Register a new component type
    */
-  register(e, l, n) {
-    this.componentMap[e] = { component: l, loader: n }, this.loadedComponents.delete(e);
+  register(e, a, s) {
+    this.componentMap[e] = { component: a, loader: s }, this.loadedComponents.delete(e);
   }
   /**
    * Get a component for a field type
    */
   getComponent(e) {
-    const l = this.componentMap[e];
-    if (!l)
+    const a = this.componentMap[e];
+    if (!a)
       return console.warn(`Component type "${e}" is not registered`), null;
     if (this.loadedComponents.has(e))
       return this.loadedComponents.get(e);
-    const n = E({
-      loader: l.loader,
+    const s = k({
+      loader: a.loader,
       delay: 0
     });
-    return this.loadedComponents.set(e, n), n;
+    return this.loadedComponents.set(e, s), s;
   }
   /**
    * Check if a component type is registered
@@ -130,23 +130,222 @@ class ne {
     this.loadedComponents.clear();
   }
 }
-const j = new ne();
-function lt(a, e, l) {
-  j.register(a, e, l);
+const P = new ne();
+function nt(o, e, a) {
+  P.register(o, e, a);
 }
-function nt(a) {
-  return j.getComponent(a);
+function lt(o) {
+  return P.getComponent(o);
 }
-const re = {
+const le = {
+  colors: {
+    primary: {
+      50: "#edeff9",
+      100: "#dbdff2",
+      200: "#b8bfe6",
+      300: "#949ed9",
+      400: "#717ecd",
+      500: "#4d5ec0",
+      600: "#3e4b9a",
+      700: "#2e3873",
+      800: "#1f264d",
+      900: "#0f1326"
+    },
+    stachelock: {
+      50: "#edeff9",
+      100: "#dbdff2",
+      200: "#b8bfe6",
+      300: "#949ed9",
+      400: "#717ecd",
+      500: "#4d5ec0",
+      600: "#3e4b9a",
+      700: "#2e3873",
+      800: "#1f264d",
+      900: "#0f1326"
+    }
+  },
+  spacing: {
+    0: "0",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    8: "2rem",
+    10: "2.5rem",
+    12: "3rem",
+    16: "4rem",
+    20: "5rem",
+    24: "6rem",
+    32: "8rem",
+    40: "10rem",
+    48: "12rem",
+    56: "14rem",
+    64: "16rem",
+    72: "18rem",
+    80: "20rem",
+    96: "24rem"
+  },
+  borderRadius: {
+    none: "0",
+    sm: "0.125rem",
+    DEFAULT: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px"
+  },
+  shadows: {
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+    inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+    none: "none"
+  },
+  typography: {
+    fontFamily: {
+      sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"],
+      serif: ["ui-serif", "Georgia", "Cambria", "serif"],
+      mono: ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "monospace"]
+    },
+    fontSize: {
+      xs: "0.75rem",
+      sm: "0.875rem",
+      base: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem",
+      "6xl": "3.75rem",
+      "7xl": "4.5rem",
+      "8xl": "6rem",
+      "9xl": "8rem"
+    }
+  },
+  breakpoints: {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px"
+  }
+};
+function it(o, e = le) {
+  const a = { ...e };
+  function s(r, l) {
+    if (l && typeof l == "object" && !Array.isArray(l))
+      for (const t in l)
+        l.hasOwnProperty(t) && (r[t] && typeof r[t] == "object" && !Array.isArray(r[t]) ? r[t] = s(r[t], l[t]) : r[t] = l[t]);
+    return r;
+  }
+  return s(a, o);
+}
+function mt(o) {
+  let e = `:root {
+`;
+  return o.colors && Object.entries(o.colors).forEach(([a, s]) => {
+    typeof s == "object" && s !== null && Object.entries(s).forEach(([r, l]) => {
+      const t = r === "DEFAULT" ? a : `${a}-${r}`;
+      e += `  --sl-color-${t}: ${l};
+`;
+    });
+  }), o.spacing && Object.entries(o.spacing).forEach(([a, s]) => {
+    e += `  --sl-spacing-${a}: ${s};
+`;
+  }), o.borderRadius && Object.entries(o.borderRadius).forEach(([a, s]) => {
+    const r = a === "DEFAULT" ? "radius" : `radius-${a}`;
+    e += `  --sl-${r}: ${s};
+`;
+  }), o.shadows && Object.entries(o.shadows).forEach(([a, s]) => {
+    const r = a === "DEFAULT" ? "shadow" : `shadow-${a}`;
+    e += `  --sl-${r}: ${s};
+`;
+  }), o.typography && (o.typography.fontFamily && Object.entries(o.typography.fontFamily).forEach(([a, s]) => {
+    e += `  --sl-font-family-${a}: ${s.join(", ")};
+`;
+  }), o.typography.fontSize && Object.entries(o.typography.fontSize).forEach(([a, s]) => {
+    e += `  --sl-font-size-${a}: ${s};
+`;
+  })), o.breakpoints && Object.entries(o.breakpoints).forEach(([a, s]) => {
+    e += `  --sl-breakpoint-${a}: ${s};
+`;
+  }), e += `  --sl-ring-color: var(--sl-color-primary-600, #3e4b9a);
+`, e += `  --sl-ring-offset-color: #ffffff;
+`, e += `  --sl-ring-width: 2px;
+`, e += `  --sl-outline-color: var(--sl-color-primary-600, #3e4b9a);
+`, e += `  --sl-outline-width: 2px;
+`, e += `}
+
+`, e += `@media (prefers-color-scheme: dark) {
+`, e += `  :root {
+`, e += `    --sl-ring-color: var(--sl-color-primary-600, #3e4b9a);
+`, e += `  }
+`, e += `}
+`, e;
+}
+function dt(o) {
+  let e = `export default {
+`;
+  return e += `  prefix: "sl-",
+`, e += `  theme: {
+`, e += `    extend: {
+`, o.colors && (e += `      colors: {
+`, Object.entries(o.colors).forEach(([a, s]) => {
+    typeof s == "object" && s !== null && (e += `        "${a}": {
+`, Object.entries(s).forEach(([r, l]) => {
+      e += `          "${r === "DEFAULT" ? "DEFAULT" : r}": "${l}",
+`;
+    }), e += `        },
+`);
+  }), e += `      },
+`), o.spacing && (e += `      spacing: {
+`, Object.entries(o.spacing).forEach(([a, s]) => {
+    e += `        "${a}": "${s}",
+`;
+  }), e += `      },
+`), o.borderRadius && (e += `      borderRadius: {
+`, Object.entries(o.borderRadius).forEach(([a, s]) => {
+    e += `        "${a === "DEFAULT" ? "DEFAULT" : a}": "${s}",
+`;
+  }), e += `      },
+`), o.shadows && (e += `      boxShadow: {
+`, Object.entries(o.shadows).forEach(([a, s]) => {
+    e += `        "${a === "DEFAULT" ? "DEFAULT" : a}": "${s}",
+`;
+  }), e += `      },
+`), o.typography && (o.typography.fontFamily && (e += `      fontFamily: {
+`, Object.entries(o.typography.fontFamily).forEach(([a, s]) => {
+    e += `        "${a}": [${s.map((r) => `"${r}"`).join(", ")}],
+`;
+  }), e += `      },
+`), o.typography.fontSize && (e += `      fontSize: {
+`, Object.entries(o.typography.fontSize).forEach(([a, s]) => {
+    e += `        "${a}": "${s}",
+`;
+  }), e += `      },
+`)), e += `    },
+`, e += `  },
+`, e += `};
+`, e;
+}
+const ie = {
   viewBox: "0 0 36 36",
   class: "sl-transform -sl-rotate-90 sl-w-full sl-h-full"
-}, me = ["stroke-dasharray"], ie = {
+}, me = ["stroke-dasharray"], de = {
   key: 0,
   class: "sl-absolute sl-top-1/2 sl-left-1/2 sl-transform -sl-translate-x-1/2 -sl-translate-y-1/2 sl-text-center"
-}, de = {
+}, pe = {
   key: 1,
   class: "sl-absolute sl-top-1/2 sl-left-1/2 sl-transform -sl-translate-x-1/2 -sl-translate-y-1/2 sl-text-center sl-text-xs"
-}, ue = /* @__PURE__ */ y({
+}, ce = /* @__PURE__ */ _({
   __name: "UiRadialProgressBar",
   props: {
     progress: {
@@ -166,8 +365,8 @@ const re = {
       default: "md"
     }
   },
-  setup(a) {
-    const e = a, l = R(() => {
+  setup(o) {
+    const e = o, a = R(() => {
       switch (e.size) {
         case "xs":
           return "sl-h-4 sl-w-4";
@@ -180,47 +379,47 @@ const re = {
         default:
           return "sl-h-8 sl-w-8";
       }
-    }), n = H(e.progress);
-    return W(() => e.progress, (m) => {
-      n.value = m;
-    }), (m, r) => (p(), u("div", {
-      class: G(["sl-relative", l.value])
+    }), s = H(e.progress);
+    return W(() => e.progress, (r) => {
+      s.value = r;
+    }), (r, l) => (c(), p("div", {
+      class: G(["sl-relative", a.value])
     }, [
-      (p(), u("svg", re, [
-        r[0] || (r[0] = s("path", {
+      (c(), p("svg", ie, [
+        l[0] || (l[0] = n("path", {
           class: "sl-fill-none sl-stroke-gray-300",
           "stroke-width": "3.8",
           d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
         }, null, -1)),
-        s("path", {
+        n("path", {
           class: "sl-fill-none sl-stroke-stachelock-600 sl-stroke-linecap-round sl-transition-[stroke-dasharray] sl-duration-500 sl-ease-out",
-          "stroke-dasharray": n.value + ", 100",
+          "stroke-dasharray": s.value + ", 100",
           "stroke-width": "3.8",
           d: "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
         }, null, 8, me)
       ])),
-      a.label && a.label.length > 0 ? (p(), u("div", ie, f(a.label), 1)) : h("", !0),
-      a.showProgressLabel ? (p(), u("div", de, f(n.value) + "% ", 1)) : h("", !0)
+      o.label && o.label.length > 0 ? (c(), p("div", de, u(o.label), 1)) : h("", !0),
+      o.showProgressLabel ? (c(), p("div", pe, u(s.value) + "% ", 1)) : h("", !0)
     ], 2));
   }
-}), pe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), fe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  CalendarDashboard: O,
-  CalendarHeader: C,
-  DayCalendar: v,
-  EventCard: I,
+  CalendarDashboard: U,
+  CalendarHeader: $,
+  DayCalendar: C,
+  EventCard: v,
   EventsList: S,
   MonthCalendar: w,
-  WeekCalendar: $,
+  WeekCalendar: I,
   YearCalendar: T
-}, Symbol.toStringTag, { value: "Module" })), ce = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Symbol.toStringTag, { value: "Module" })), ue = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  DynamicForm: k,
+  DynamicForm: F,
   FormField: L,
-  FormFieldWrapper: N
-}, Symbol.toStringTag, { value: "Module" })), fe = { class: "sl-bg-white sl-rounded-lg sl-shadow sl-p-6" }, ge = { class: "sl-space-y-8" }, _e = { class: "sl-grid sl-grid-cols-1 sl-md:grid-cols-2 sl-gap-6" }, be = { class: "sl-bg-gray-50 sl-rounded-md sl-p-4 sl-text-sm sl-text-gray-700" }, xe = { class: "sl-whitespace-pre-wrap" }, U = /* @__PURE__ */ y({
+  FormFieldWrapper: V
+}, Symbol.toStringTag, { value: "Module" })), ge = { class: "sl-bg-white sl-rounded-lg sl-shadow sl-p-6" }, be = { class: "sl-space-y-8" }, xe = { class: "sl-grid sl-grid-cols-1 sl-md:grid-cols-2 sl-gap-6" }, ye = { class: "sl-bg-gray-50 sl-rounded-md sl-p-4 sl-text-sm sl-text-gray-700" }, he = { class: "sl-whitespace-pre-wrap" }, B = /* @__PURE__ */ _({
   __name: "InputsShowcase",
-  setup(a) {
+  setup(o) {
     const e = Y({
       text: "",
       textArea: "",
@@ -229,18 +428,18 @@ const re = {
       selectedFruit: null,
       selectedLanguages: [],
       selectedCity: null
-    }), l = [
+    }), a = [
       { id: 1, name: "Apple" },
       { id: 2, name: "Banana" },
       { id: 3, name: "Cherry" },
       { id: 4, name: "Durian", disabled: !0 }
-    ], n = [
+    ], s = [
       { id: 1, name: "TypeScript" },
       { id: 2, name: "JavaScript" },
       { id: 3, name: "Python" },
       { id: 4, name: "Go" },
       { id: 5, name: "Rust" }
-    ], m = [
+    ], r = [
       { id: 1, name: "New York" },
       { id: 2, name: "San Francisco" },
       { id: 3, name: "Seattle" },
@@ -250,165 +449,165 @@ const re = {
       { id: 7, name: "Miami" },
       { id: 8, name: "Boston" }
     ];
-    return (r, t) => (p(), u("section", fe, [
-      t[15] || (t[15] = s("h2", { class: "sl-text-xl sl-font-semibold sl-mb-4" }, "All Inputs Showcase", -1)),
-      s("div", ge, [
-        s("div", null, [
-          t[7] || (t[7] = s("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Text Input", -1)),
-          d(i, {
+    return (l, t) => (c(), p("section", ge, [
+      t[15] || (t[15] = n("h2", { class: "sl-text-xl sl-font-semibold sl-mb-4" }, "All Inputs Showcase", -1)),
+      n("div", be, [
+        n("div", null, [
+          t[7] || (t[7] = n("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Text Input", -1)),
+          d(m, {
             name: "demoText",
             label: "Text Input",
             placeholder: "Type something...",
             value: e.text,
-            "onUpdate:value": t[0] || (t[0] = (o) => e.text = o)
+            "onUpdate:value": t[0] || (t[0] = (i) => e.text = i)
           }, null, 8, ["value"])
         ]),
-        s("div", null, [
-          t[8] || (t[8] = s("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Text Area", -1)),
-          d(b, {
+        n("div", null, [
+          t[8] || (t[8] = n("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Text Area", -1)),
+          d(x, {
             name: "demoTextArea",
             label: "Text Area",
             placeholder: "Write a longer message...",
             rows: 4,
             maxlength: 200,
             modelValue: e.textArea,
-            "onUpdate:modelValue": t[1] || (t[1] = (o) => e.textArea = o)
+            "onUpdate:modelValue": t[1] || (t[1] = (i) => e.textArea = i)
           }, null, 8, ["modelValue"])
         ]),
-        s("div", null, [
-          t[9] || (t[9] = s("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Switch", -1)),
-          d(x, {
+        n("div", null, [
+          t[9] || (t[9] = n("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Switch", -1)),
+          d(y, {
             name: "demoSwitch",
             label: "Enable feature",
             modelValue: e.switchOn,
-            "onUpdate:modelValue": t[2] || (t[2] = (o) => e.switchOn = o),
+            "onUpdate:modelValue": t[2] || (t[2] = (i) => e.switchOn = i),
             textTrue: "ON",
             textFalse: "OFF"
           }, null, 8, ["modelValue"])
         ]),
-        s("div", null, [
-          t[10] || (t[10] = s("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Checkbox", -1)),
+        n("div", null, [
+          t[10] || (t[10] = n("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Checkbox", -1)),
           d(g, {
             name: "demoCheckbox",
             label: "I agree to the terms",
             modelValue: e.checkbox,
-            "onUpdate:modelValue": t[3] || (t[3] = (o) => e.checkbox = o)
+            "onUpdate:modelValue": t[3] || (t[3] = (i) => e.checkbox = i)
           }, null, 8, ["modelValue"])
         ]),
-        s("div", _e, [
-          s("div", null, [
-            t[11] || (t[11] = s("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Select (Single)", -1)),
-            d(c, {
+        n("div", xe, [
+          n("div", null, [
+            t[11] || (t[11] = n("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Select (Single)", -1)),
+            d(f, {
               name: "demoSelect",
               label: "Favorite Fruit",
               placeholder: "Select a fruit",
-              items: l,
+              items: a,
               modelValue: e.selectedFruit,
-              "onUpdate:modelValue": t[4] || (t[4] = (o) => e.selectedFruit = o)
+              "onUpdate:modelValue": t[4] || (t[4] = (i) => e.selectedFruit = i)
             }, null, 8, ["modelValue"])
           ]),
-          s("div", null, [
-            t[12] || (t[12] = s("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Select (Multiple)", -1)),
-            d(c, {
+          n("div", null, [
+            t[12] || (t[12] = n("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Select (Multiple)", -1)),
+            d(f, {
               name: "demoSelectMulti",
               label: "Favorite Languages",
               placeholder: "Select languages",
-              items: n,
+              items: s,
               multiple: "",
               showAll: "",
               modelValue: e.selectedLanguages,
-              "onUpdate:modelValue": t[5] || (t[5] = (o) => e.selectedLanguages = o)
+              "onUpdate:modelValue": t[5] || (t[5] = (i) => e.selectedLanguages = i)
             }, null, 8, ["modelValue"])
           ])
         ]),
-        s("div", null, [
-          t[13] || (t[13] = s("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Combobox", -1)),
-          d(_, {
+        n("div", null, [
+          t[13] || (t[13] = n("h3", { class: "sl-text-sm sl-font-medium sl-text-gray-700 sl-mb-2" }, "Combobox", -1)),
+          d(b, {
             name: "demoCombobox",
             label: "Search a City",
             placeholder: "Start typing...",
-            items: m,
+            items: r,
             modelValue: e.selectedCity,
-            "onUpdate:modelValue": t[6] || (t[6] = (o) => e.selectedCity = o)
+            "onUpdate:modelValue": t[6] || (t[6] = (i) => e.selectedCity = i)
           }, null, 8, ["modelValue"])
         ]),
-        s("div", be, [
-          t[14] || (t[14] = s("div", { class: "sl-font-semibold sl-mb-1" }, "State", -1)),
-          s("pre", xe, f(e), 1)
+        n("div", ye, [
+          t[14] || (t[14] = n("div", { class: "sl-font-semibold sl-mb-1" }, "State", -1)),
+          n("pre", he, u(e), 1)
         ])
       ])
     ]));
   }
-}), he = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), _e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   CheckboxInput: g,
-  ComboboxInput: _,
-  InputsShowcase: U,
-  SelectInput: c,
-  SwitchInput: x,
-  TagifyInput: M,
-  TextAreaInput: b
-}, Symbol.toStringTag, { value: "Module" })), ye = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  ComboboxInput: b,
+  InputsShowcase: B,
+  SelectInput: f,
+  SwitchInput: y,
+  TagifyInput: E,
+  TextAreaInput: x
+}, Symbol.toStringTag, { value: "Module" })), $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  DashboardLayout: F,
-  DefaultLayout: V,
+  DashboardLayout: j,
+  DefaultLayout: A,
   HeaderLayout: D,
-  NavigationGroup: B,
-  NavigationItem: P,
-  SidebarLayout: A
+  NavigationGroup: O,
+  NavigationItem: M,
+  SidebarLayout: N
 }, Symbol.toStringTag, { value: "Module" })), Ce = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Avatar: q,
   Badge: J,
   Breadcrumb: K,
   Button: Q,
-  CalendarDashboard: O,
-  CalendarHeader: C,
+  CalendarDashboard: U,
+  CalendarHeader: $,
   CheckboxInput: g,
-  ComboboxInput: _,
-  DashboardLayout: F,
-  DayCalendar: v,
-  DefaultLayout: V,
-  DynamicForm: k,
-  EventCard: I,
+  ComboboxInput: b,
+  DashboardLayout: j,
+  DayCalendar: C,
+  DefaultLayout: A,
+  DynamicForm: F,
+  EventCard: v,
   EventsList: S,
   FormField: L,
-  FormFieldWrapper: N,
+  FormFieldWrapper: V,
   HeaderLayout: D,
-  InputsShowcase: U,
+  InputsShowcase: B,
   Loading: X,
   LoadingDots: Z,
   Modal: ee,
   MonthCalendar: w,
   NavLink: te,
-  NavigationGroup: B,
-  NavigationItem: P,
-  ProgressBar: se,
-  RadialProgressBar: ue,
-  SelectInput: c,
-  SidebarLayout: A,
-  SwitchInput: x,
+  NavigationGroup: O,
+  NavigationItem: M,
+  ProgressBar: oe,
+  RadialProgressBar: ce,
+  SelectInput: f,
+  SidebarLayout: N,
+  SwitchInput: y,
   Table: ae,
-  TagifyInput: M,
-  TextAreaInput: b,
-  TextInput: i,
-  Transition: oe,
-  WeekCalendar: $,
+  TagifyInput: E,
+  TextAreaInput: x,
+  TextInput: m,
+  Transition: se,
+  WeekCalendar: I,
   YearCalendar: T
 }, Symbol.toStringTag, { value: "Module" })), ve = {
   ...Ce,
-  ...ye,
-  ...he,
-  ...pe,
-  ...ce
-}, rt = {
-  install(a, e = {}) {
-    const { prefix: l = "Sl", installAll: n = !1, components: m } = e;
-    Object.entries(ve).forEach(([r, t]) => {
-      if (n || m && m.includes(r) || !m && !n) {
-        a.component(r, t);
-        const z = r.startsWith(l) ? r : `${l}${r}`;
-        a.component(z, t);
+  ...$e,
+  ..._e,
+  ...fe,
+  ...ue
+}, pt = {
+  install(o, e = {}) {
+    const { prefix: a = "Sl", installAll: s = !1, components: r } = e;
+    Object.entries(ve).forEach(([l, t]) => {
+      if (s || r && r.includes(l) || !r && !s) {
+        o.component(l, t);
+        const z = l.startsWith(a) ? l : `${a}${l}`;
+        o.component(z, t);
       }
     });
   }
@@ -418,48 +617,52 @@ export {
   J as Badge,
   K as Breadcrumb,
   Q as Button,
-  O as CalendarDashboard,
-  C as CalendarHeader,
+  U as CalendarDashboard,
+  $ as CalendarHeader,
   g as CheckboxInput,
-  _ as ComboboxInput,
+  b as ComboboxInput,
   ne as ComponentRegistry,
-  F as DashboardLayout,
-  v as DayCalendar,
-  V as DefaultLayout,
-  k as DynamicForm,
-  I as EventCard,
+  j as DashboardLayout,
+  C as DayCalendar,
+  A as DefaultLayout,
+  F as DynamicForm,
+  v as EventCard,
   S as EventsList,
   L as FormField,
-  N as FormFieldWrapper,
+  V as FormFieldWrapper,
   D as HeaderLayout,
-  U as InputsShowcase,
+  B as InputsShowcase,
   X as Loading,
   Z as LoadingDots,
   ee as Modal,
   w as MonthCalendar,
   te as NavLink,
-  B as NavigationGroup,
-  P as NavigationItem,
-  se as ProgressBar,
-  ue as RadialProgressBar,
-  c as SelectInput,
-  A as SidebarLayout,
-  rt as StachelockUI,
-  x as SwitchInput,
+  O as NavigationGroup,
+  M as NavigationItem,
+  oe as ProgressBar,
+  ce as RadialProgressBar,
+  f as SelectInput,
+  N as SidebarLayout,
+  pt as StachelockUI,
+  y as SwitchInput,
   ae as Table,
-  M as TagifyInput,
-  b as TextAreaInput,
-  i as TextInput,
-  oe as Transition,
-  $ as WeekCalendar,
+  E as TagifyInput,
+  x as TextAreaInput,
+  m as TextInput,
+  se as Transition,
+  I as WeekCalendar,
   T as YearCalendar,
-  j as componentRegistry,
-  rt as default,
-  le as defaultComponentMap,
-  dt as generateDeterministicId,
-  ut as generateId,
-  nt as getComponent,
-  lt as registerComponent,
-  pt as sanitizeId
+  P as componentRegistry,
+  pt as default,
+  re as defaultComponentMap,
+  le as defaultDesignTokens,
+  mt as generateCSSVariables,
+  ut as generateDeterministicId,
+  gt as generateId,
+  dt as generateTailwindConfig,
+  lt as getComponent,
+  it as mergeDesignTokens,
+  nt as registerComponent,
+  bt as sanitizeId
 };
 //# sourceMappingURL=index.js.map