@opencxh/ui-kit 1.0.0

package/dist/index.js

@@ -0,0 +1,3076 @@
+import { clsx as ve } from "clsx";
+import { jsxs as c, jsx as e, Fragment as ke } from "react/jsx-runtime";
+import ce, { forwardRef as de, useState as q, useRef as re, useEffect as K, useCallback as ee, useMemo as ie, createContext as Ne } from "react";
+import { ArrowLeft as we, ChevronDownIcon as Ce, ChevronRight as Se } from "lucide-react";
+function p(...r) {
+  return ve(r);
+}
+function fr(r) {
+  return (n, a) => {
+    var t;
+    return ((t = r[n]) == null ? void 0 : t[a]) || "";
+  };
+}
+function pr(r) {
+  return (n) => r[n] || "";
+}
+const Me = {
+  primary: "btn o__primary",
+  secondary: "btn o__secondary",
+  outline: "btn o__secondary",
+  ghost: "btn text-gray-700",
+  destructive: "btn o__destructive"
+}, Le = {
+  xs: "px-2 py-1 text-xs",
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-sm",
+  lg: "px-6 py-3 text-base",
+  xl: "px-8 py-4 text-lg",
+  full: "px-4 py-3 text-base"
+}, De = {
+  xs: "p-1",
+  sm: "p-1.5",
+  md: "p-2",
+  lg: "p-3",
+  xl: "p-4",
+  full: "p-4"
+}, te = de(
+  ({
+    variant: r = "primary",
+    size: n = "md",
+    fullWidth: a = !1,
+    loading: t = !1,
+    leftIcon: s,
+    rightIcon: o,
+    iconOnly: g = !1,
+    className: x,
+    children: f,
+    disabled: i,
+    ...w
+  }, d) => {
+    const u = i || t;
+    return /* @__PURE__ */ c(
+      "button",
+      {
+        ref: d,
+        className: p(
+          // Base styles
+          "inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-200",
+          "focus:outline-none focus:ring-1 focus:ring-offset-1",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          // Variant styles
+          Me[r],
+          // Size styles
+          g ? De[n] : Le[n],
+          // Full width
+          a && "w-full",
+          // Loading state
+          t && "cursor-wait",
+          x
+        ),
+        disabled: u,
+        ...w,
+        children: [
+          t && /* @__PURE__ */ c(
+            "svg",
+            {
+              className: p(
+                "animate-spin",
+                g ? "h-4 w-4" : "h-4 w-4 mr-2"
+              ),
+              fill: "none",
+              viewBox: "0 0 24 24",
+              children: [
+                /* @__PURE__ */ e(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "path",
+                  {
+                    className: "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"
+                  }
+                )
+              ]
+            }
+          ),
+          !t && s && /* @__PURE__ */ e("span", { className: p("flex-shrink-0", !g && "mr-2"), children: s }),
+          !g && f,
+          !t && o && /* @__PURE__ */ e("span", { className: p("flex-shrink-0", !g && "ml-2"), children: o }),
+          g && !t && !s && !o && f
+        ]
+      }
+    );
+  }
+);
+te.displayName = "Button";
+const gr = ({
+  children: r,
+  size: n = "md",
+  orientation: a = "horizontal",
+  attached: t = !0,
+  className: s
+}) => {
+  const o = p(
+    "inline-flex",
+    {
+      // Orientation
+      "flex-row": a === "horizontal",
+      "flex-col": a === "vertical",
+      // Attached styling
+      "[&>*:not(:first-child):not(:last-child)]:rounded-none": t,
+      "[&>*:first-child]:rounded-r-none": t && a === "horizontal",
+      "[&>*:last-child]:rounded-l-none": t && a === "horizontal",
+      "[&>*:first-child]:rounded-b-none": t && a === "vertical",
+      "[&>*:last-child]:rounded-t-none": t && a === "vertical",
+      // Borders for attached buttons
+      "[&>*:not(:first-child)]:-ml-px": t && a === "horizontal",
+      "[&>*:not(:first-child)]:-mt-px": t && a === "vertical",
+      // Spacing for non-attached buttons
+      "gap-1": !t && n === "xs",
+      "gap-2": !t && (n === "sm" || n === "md"),
+      "gap-3": !t && (n === "lg" || n === "xl")
+    },
+    s
+  );
+  return /* @__PURE__ */ e("div", { className: o, role: "group", children: r });
+}, br = ({
+  variant: r = "default",
+  size: n = "md",
+  color: a = "primary",
+  disabled: t = !1,
+  external: s = !1,
+  className: o,
+  children: g,
+  href: x,
+  target: f,
+  rel: i,
+  ...w
+}) => {
+  const d = s || x && (x.startsWith("http") || x.startsWith("mailto:")), u = p(
+    // Base styles
+    "inline-flex items-center gap-1 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2",
+    // Size variants
+    {
+      "text-xs": n === "xs",
+      "text-sm": n === "sm",
+      "text-base": n === "md",
+      "text-lg": n === "lg",
+      "text-xl": n === "xl"
+    },
+    // Color variants
+    {
+      // Primary
+      "text-primary hover:text-primary/80 focus:ring-primary/20": a === "primary" && !t,
+      // Secondary
+      "text-secondary hover:text-secondary/80 focus:ring-secondary/20": a === "secondary" && !t,
+      // Accent
+      "text-accent hover:text-accent/80 focus:ring-accent/20": a === "accent" && !t,
+      // Success
+      "text-success hover:text-success/80 focus:ring-success/20": a === "success" && !t,
+      // Warning
+      "text-warning hover:text-warning/80 focus:ring-warning/20": a === "warning" && !t,
+      // Error
+      "text-error hover:text-error/80 focus:ring-error/20": a === "error" && !t,
+      // Info
+      "text-info hover:text-info/80 focus:ring-info/20": a === "info" && !t,
+      // Neutral
+      "text-neutral hover:text-neutral/80 focus:ring-neutral/20": a === "neutral" && !t
+    },
+    // Variant styles
+    {
+      // Default - just colored text
+      "": r === "default",
+      // Subtle - muted colors
+      "text-opacity-70 hover:text-opacity-100": r === "subtle",
+      // Underline - always underlined
+      "underline underline-offset-2 decoration-1 hover:decoration-2": r === "underline",
+      // Button - looks like a button
+      "px-3 py-1.5 rounded-md bg-opacity-10 hover:bg-opacity-20": r === "button",
+      "bg-primary": r === "button" && a === "primary",
+      "bg-secondary": r === "button" && a === "secondary",
+      "bg-accent": r === "button" && a === "accent",
+      "bg-success": r === "button" && a === "success",
+      "bg-warning": r === "button" && a === "warning",
+      "bg-error": r === "button" && a === "error",
+      "bg-info": r === "button" && a === "info",
+      "bg-neutral": r === "button" && a === "neutral"
+    },
+    // Disabled state
+    {
+      "opacity-50 cursor-not-allowed pointer-events-none": t
+    },
+    o
+  ), k = {
+    ...w,
+    href: t ? void 0 : x,
+    target: d ? "_blank" : f,
+    rel: d ? "noopener noreferrer" : i
+  };
+  return /* @__PURE__ */ c("a", { className: u, ...k, children: [
+    g,
+    d && /* @__PURE__ */ e(
+      "svg",
+      {
+        className: "w-3 h-3 ml-1",
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ e(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+          }
+        )
+      }
+    )
+  ] });
+}, Ee = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6",
+  full: "h-6 w-6"
+}, Ae = {
+  sm: "text-sm",
+  md: "text-sm",
+  lg: "text-base",
+  full: "text-base"
+}, me = de(
+  ({
+    label: r,
+    helperText: n,
+    error: a,
+    size: t = "md",
+    indeterminate: s = !1,
+    containerClassName: o,
+    labelClassName: g,
+    className: x,
+    id: f,
+    ...i
+  }, w) => {
+    const d = f || `checkbox-${Math.random().toString(36).substr(2, 9)}`, u = !!a;
+    return ce.useEffect(() => {
+      w && typeof w == "object" && w.current && (w.current.indeterminate = s);
+    }, [s, w]), /* @__PURE__ */ c("div", { className: p("flex flex-col", o), children: [
+      /* @__PURE__ */ c("div", { className: "flex items-start", children: [
+        /* @__PURE__ */ e("div", { className: "flex items-center h-5", children: /* @__PURE__ */ e(
+          "input",
+          {
+            ref: w,
+            id: d,
+            type: "checkbox",
+            className: p(
+              // Base styles
+              "rounded border transition-colors duration-200",
+              "focus:ring-2 focus:ring-offset-2 focus:outline-none",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              // Size styles
+              Ee[t],
+              // State styles
+              u ? "border-error text-error focus:border-error focus:ring-error" : "border-gray-100 text-primary focus:border-primary focus:ring-primary dark:border-gray-600 dark:bg-secondary-800",
+              x
+            ),
+            ...i
+          }
+        ) }),
+        r && /* @__PURE__ */ c("div", { className: "ml-3 flex-1", children: [
+          /* @__PURE__ */ e(
+            "label",
+            {
+              htmlFor: d,
+              className: p(
+                "font-medium cursor-pointer",
+                u ? "text-error" : "text-secondary-900 dark:text-secondary-100",
+                Ae[t],
+                g
+              ),
+              children: r
+            }
+          ),
+          n && !a && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-secondary-500 dark:text-secondary-400", children: n })
+        ] })
+      ] }),
+      a && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-error", children: a })
+    ] });
+  }
+);
+me.displayName = "Checkbox";
+const $e = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m15 18-6-6 6-6" }) }), Te = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m9 18 6-6-6-6" }) }), he = de(({
+  value: r,
+  onChange: n,
+  placeholder: a = "Select date",
+  disabled: t = !1,
+  required: s = !1,
+  size: o = "md",
+  className: g,
+  minDate: x,
+  maxDate: f,
+  format: i = "MM/dd/yyyy"
+}, w) => {
+  const [d, u] = q(!1), [k, b] = q(() => r || /* @__PURE__ */ new Date()), C = re(null);
+  K(() => {
+    const S = (y) => {
+      C.current && !C.current.contains(y.target) && u(!1);
+    };
+    return d && document.addEventListener("mousedown", S), () => {
+      document.removeEventListener("mousedown", S);
+    };
+  }, [d]);
+  const M = (S) => {
+    if (!S) return "";
+    const y = S.getDate().toString().padStart(2, "0"), l = (S.getMonth() + 1).toString().padStart(2, "0"), v = S.getFullYear();
+    switch (i) {
+      case "dd/MM/yyyy":
+        return `${y}/${l}/${v}`;
+      case "yyyy-MM-dd":
+        return `${v}-${l}-${y}`;
+      case "MM/dd/yyyy":
+      default:
+        return `${l}/${y}/${v}`;
+    }
+  }, V = () => {
+    const S = k.getFullYear(), y = k.getMonth(), l = new Date(S, y, 1), v = new Date(l);
+    v.setDate(v.getDate() - l.getDay());
+    const N = [], h = new Date(v);
+    for (let A = 0; A < 42; A++)
+      N.push(new Date(h)), h.setDate(h.getDate() + 1);
+    return N;
+  }, $ = (S) => {
+    S.getMonth() === k.getMonth() && (x && S < x || f && S > f || (n == null || n(S), u(!1)));
+  }, J = () => {
+    b(new Date(k.getFullYear(), k.getMonth() - 1, 1));
+  }, H = () => {
+    b(new Date(k.getFullYear(), k.getMonth() + 1, 1));
+  }, z = () => {
+    n == null || n(null), u(!1);
+  }, I = p(
+    "w-full border border-neutral-100 dark:border-neutral-600 rounded-md transition-colors duration-200",
+    "bg-white dark:bg-neutral-800 text-gray-700 dark:text-gray-300",
+    "placeholder:text-gray-800 dark:placeholder:text-gray-500",
+    "focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary",
+    "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-neutral-50 dark:disabled:bg-neutral-900",
+    {
+      "px-3 py-2 text-sm": o === "sm",
+      "px-3 py-2 text-base": o === "md",
+      "px-4 py-3 text-lg": o === "lg",
+      "px-4 py-3 text-base": o === "full"
+    },
+    g
+  ), P = V(), G = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ];
+  return /* @__PURE__ */ c("div", { ref: C, className: "relative", children: [
+    /* @__PURE__ */ c("div", { className: "relative", children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          ref: w,
+          type: "text",
+          value: M(r ?? null),
+          placeholder: a,
+          disabled: t,
+          required: s,
+          readOnly: !0,
+          onClick: () => !t && u(!d),
+          className: p(I, "pr-10 cursor-pointer")
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: () => !t && u(!d),
+          disabled: t,
+          className: "absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300",
+          children: /* @__PURE__ */ e($e, {})
+        }
+      )
+    ] }),
+    d && /* @__PURE__ */ c("div", { className: "absolute z-50 mt-1 bg-white dark:bg-neutral-800 border border-neutral-100 dark:border-neutral-600 rounded-md shadow-lg p-4 min-w-[280px]", children: [
+      /* @__PURE__ */ c("div", { className: "flex items-center justify-between mb-4", children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: J,
+            className: "p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded",
+            children: /* @__PURE__ */ e(je, {})
+          }
+        ),
+        /* @__PURE__ */ c("h3", { className: "text-sm font-medium text-neutral-900 dark:text-neutral-100", children: [
+          G[k.getMonth()],
+          " ",
+          k.getFullYear()
+        ] }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: H,
+            className: "p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded",
+            children: /* @__PURE__ */ e(Te, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((S) => /* @__PURE__ */ e("div", { className: "text-xs font-medium text-neutral-500 dark:text-neutral-400 text-center py-1", children: S }, S)) }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: P.map((S, y) => {
+        const l = S.getMonth() === k.getMonth(), v = r && S.toDateString() === r.toDateString(), N = S.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), h = !l || x && S < x || f && S > f;
+        return /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => !h && $(S),
+            disabled: h,
+            className: p(
+              "w-8 h-8 text-sm rounded transition-colors duration-200",
+              {
+                "text-neutral-900 dark:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-700": l && !v && !h,
+                "bg-primary text-white": v,
+                "bg-neutral-100 dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100": N && !v,
+                "text-neutral-300 dark:text-neutral-600 cursor-not-allowed": h
+              }
+            ),
+            children: S.getDate()
+          },
+          y
+        );
+      }) }),
+      /* @__PURE__ */ c("div", { className: "flex justify-between items-center mt-4 pt-3 border-t border-neutral-200 dark:border-neutral-700", children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: z,
+            className: "text-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300",
+            children: "Clear"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => u(!1),
+            className: "text-sm text-primary hover:text-primary/80",
+            children: "Close"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}), Ie = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-3 py-2 text-sm",
+  lg: "px-3 py-2 text-sm",
+  full: "px-3 py-2 text-sm"
+}, xe = de(
+  ({
+    label: r,
+    helperText: n,
+    error: a,
+    size: t = "md",
+    fullWidth: s = !1,
+    options: o,
+    placeholder: g,
+    containerClassName: x,
+    labelClassName: f,
+    className: i,
+    id: w,
+    searchable: d,
+    multiple: u,
+    value: k,
+    onChange: b,
+    ...C
+  }, M) => {
+    const V = w || `select-${Math.random().toString(36).substr(2, 9)}`, $ = !!a, [J, H] = ce.useState(!1), [z, I] = ce.useState(""), P = ce.useRef(null);
+    ce.useImperativeHandle(M, () => P.current), ce.useEffect(() => {
+      const N = (h) => {
+        P.current && !P.current.contains(h.target) && H(!1);
+      };
+      return document.addEventListener("mousedown", N), () => {
+        document.removeEventListener("mousedown", N);
+      };
+    }, []);
+    const G = (N) => {
+      if (u) {
+        const h = Array.isArray(k) ? k : [], A = h.includes(N) ? h.filter((_) => _ !== N) : [...h, N];
+        b == null || b(A);
+      } else
+        b == null || b(N), H(!1), I("");
+    }, S = u ? null : o.find((N) => N.value === k), y = u ? o.filter((N) => Array.isArray(k) && k.includes(N.value)) : [], l = d && z ? o.filter(
+      (N) => N.label.toLowerCase().includes(z.toLowerCase())
+    ) : o, v = () => u ? y.length > 0 ? y.map((N) => N.label).join(", ") : g || "Select options" : (S == null ? void 0 : S.label) || g || "Select an option";
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        ref: P,
+        className: p(
+          "relative flex flex-col",
+          s && "w-full",
+          x
+        ),
+        ...C,
+        children: [
+          r && /* @__PURE__ */ e(
+            "label",
+            {
+              htmlFor: V,
+              onClick: () => H(!J),
+              className: p(
+                "block text-sm font-medium mb-1",
+                $ ? "text-error" : "text-secondary-700 dark:text-secondary-300",
+                f
+              ),
+              children: r
+            }
+          ),
+          /* @__PURE__ */ c("div", { className: "relative", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                id: V,
+                onClick: () => H(!J),
+                className: p(
+                  // Base styles
+                  "block w-full rounded-lg border transition-colors duration-200 text-left",
+                  "focus:outline-none focus:ring-0 focus:ring-offset-0",
+                  "disabled:opacity-50 disabled:cursor-not-allowed",
+                  "bg-white dark:bg-secondary-800",
+                  // Size styles
+                  Ie[t],
+                  // State styles
+                  $ ? "border-error text-error focus:border-error focus:ring-error" : "border-gray-100 text-secondary-900 focus:border-primary focus:ring-primary dark:border-gray-600 dark:bg-secondary-800 dark:text-secondary-100",
+                  i
+                ),
+                children: /* @__PURE__ */ e("span", { className: "block truncate", children: v() })
+              }
+            ),
+            J && /* @__PURE__ */ c("div", { className: "absolute z-10 mt-1 w-full rounded-md bg-white dark:bg-secondary-800 shadow-lg border dark:border-gray-600", children: [
+              d && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Search...",
+                  value: z,
+                  onChange: (N) => I(N.target.value),
+                  className: p(
+                    "w-full px-3 py-2 text-sm rounded-md border",
+                    "text-secondary-900 border-gray-100 dark:border-gray-600 focus:outline-none focus:ring-0"
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ c("ul", { className: "max-h-60 overflow-auto py-1", children: [
+                g && !u && /* @__PURE__ */ e(
+                  "li",
+                  {
+                    className: "px-4 py-2 text-sm text-secondary-500",
+                    onClick: () => {
+                      b == null || b(""), H(!1);
+                    },
+                    children: g
+                  }
+                ),
+                l.map((N) => {
+                  const h = u ? Array.isArray(k) && k.includes(N.value) : k === N.value;
+                  return /* @__PURE__ */ e(
+                    "li",
+                    {
+                      onClick: () => !N.disabled && G(N.value),
+                      className: p(
+                        "px-4 py-2 text-sm cursor-pointer",
+                        "text-secondary-900 dark:text-secondary-100",
+                        N.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-100 dark:hover:bg-secondary-700",
+                        h && "font-semibold"
+                      ),
+                      children: /* @__PURE__ */ c("div", { className: "flex items-center", children: [
+                        u && /* @__PURE__ */ e(
+                          "input",
+                          {
+                            type: "checkbox",
+                            checked: h,
+                            readOnly: !0,
+                            className: "mr-3 h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
+                          }
+                        ),
+                        /* @__PURE__ */ e("span", { children: N.label })
+                      ] })
+                    },
+                    N.value
+                  );
+                })
+              ] })
+            ] })
+          ] }),
+          (a || n) && /* @__PURE__ */ e(
+            "p",
+            {
+              className: p(
+                "mt-1 text-xs",
+                $ ? "text-error" : "text-secondary-500"
+              ),
+              children: a || n
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+xe.displayName = "Select";
+const Pe = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-3 py-2 text-sm",
+  lg: "px-4 py-3 text-base",
+  full: "px-4 py-3 text-base"
+}, fe = de(
+  ({
+    label: r,
+    helperText: n,
+    error: a,
+    size: t = "md",
+    fullWidth: s = !1,
+    loading: o = !1,
+    containerClassName: g,
+    labelClassName: x,
+    className: f,
+    id: i,
+    rows: w = 4,
+    ...d
+  }, u) => {
+    const k = i || `textarea-${Math.random().toString(36).substr(2, 9)}`, b = !!a;
+    return /* @__PURE__ */ c("div", { className: p("flex flex-col", s && "w-full", g), children: [
+      r && /* @__PURE__ */ e(
+        "label",
+        {
+          htmlFor: k,
+          className: p(
+            "block text-sm font-medium mb-1",
+            b ? "text-error" : "text-secondary-700 dark:text-secondary-300",
+            x
+          ),
+          children: r
+        }
+      ),
+      /* @__PURE__ */ c("div", { className: "relative", children: [
+        /* @__PURE__ */ e(
+          "textarea",
+          {
+            ref: u,
+            id: k,
+            rows: w,
+            className: p(
+              // Base styles
+              "block w-full rounded-lg border transition-colors duration-200 resize-vertical",
+              "placeholder-secondary-400 focus:outline-none focus:ring-0",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              // Size styles
+              Pe[t],
+              // State styles
+              b ? "border-error text-error focus:border-error focus:ring-error" : "border-gray-100 text-secondary-900 dark:border-gray-600 dark:bg-secondary-800 dark:text-secondary-100",
+              f
+            ),
+            ...d
+          }
+        ),
+        o && /* @__PURE__ */ e("div", { className: "absolute top-3 right-3", children: /* @__PURE__ */ c(
+          "svg",
+          {
+            className: "animate-spin h-4 w-4 text-secondary-400",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            children: [
+              /* @__PURE__ */ e(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "path",
+                {
+                  className: "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 || n) && /* @__PURE__ */ e(
+        "p",
+        {
+          className: p(
+            "mt-1 text-xs",
+            b ? "text-error" : "text-secondary-500"
+          ),
+          children: a || n
+        }
+      )
+    ] });
+  }
+);
+fe.displayName = "TextArea";
+const _e = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-3 py-2 text-sm",
+  lg: "px-3 py-2 text-sm",
+  full: "px-3 py-2 text-sm"
+}, ue = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6",
+  full: "h-6 w-6"
+}, oe = de(
+  ({
+    label: r,
+    helperText: n,
+    error: a,
+    size: t = "md",
+    fullWidth: s = !1,
+    startIcon: o,
+    endIcon: g,
+    loading: x = !1,
+    containerClassName: f,
+    labelClassName: i,
+    className: w,
+    id: d,
+    ...u
+  }, k) => {
+    const b = d || `textfield-${Math.random().toString(36).substr(2, 9)}`, C = !!a;
+    return /* @__PURE__ */ c("div", { className: p("flex flex-col", s && "w-full", f), children: [
+      r && /* @__PURE__ */ e(
+        "label",
+        {
+          htmlFor: b,
+          className: p(
+            "block text-sm font-medium mb-1",
+            C ? "text-error" : "text-secondary-700 dark:text-secondary-300",
+            i
+          ),
+          children: r
+        }
+      ),
+      /* @__PURE__ */ c("div", { className: "relative", children: [
+        o && // Todo fix inset not showing correctly on different sizes
+        /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: p("text-secondary-400", ue[t]), children: o }) }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: k,
+            id: b,
+            className: p(
+              // Base styles
+              "block w-full rounded-lg border dark:border-gray-600 transition-colors duration-200",
+              "placeholder-gray-500 dark:placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-offset-0",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              // Size styles
+              _e[t],
+              // Icon padding
+              o && "pl-10",
+              g && "pr-10",
+              // State styles
+              C ? "border-error text-error focus:border-error focus:ring-error" : "border-gray-100 text-secondary-900 focus:border-primary focus:ring-primary dark:border-gray-600 dark:bg-secondary-800 dark:text-secondary-100",
+              w
+            ),
+            ...u
+          }
+        ),
+        (g || x) && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: x ? /* @__PURE__ */ c(
+          "svg",
+          {
+            className: p("animate-spin text-secondary-400", ue[t]),
+            fill: "none",
+            viewBox: "0 0 24 24",
+            children: [
+              /* @__PURE__ */ e(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "path",
+                {
+                  className: "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"
+                }
+              )
+            ]
+          }
+        ) : g && /* @__PURE__ */ e("span", { className: p("text-secondary-400", ue[t]), children: g }) })
+      ] }),
+      (a || n) && /* @__PURE__ */ e(
+        "p",
+        {
+          className: p(
+            "mt-1 text-xs",
+            C ? "text-error" : "text-secondary-500"
+          ),
+          children: a || n
+        }
+      )
+    ] });
+  }
+);
+oe.displayName = "TextField";
+const le = ({
+  variant: r = "body",
+  size: n = "md",
+  weight: a = "normal",
+  color: t = "current",
+  align: s = "left",
+  truncate: o = !1,
+  italic: g = !1,
+  underline: x = !1,
+  lineHeight: f = "normal",
+  as: i,
+  className: w,
+  children: d,
+  ...u
+}) => {
+  const k = i || Be(r), b = p(
+    // Base styles
+    "font-primary",
+    // Variant styles
+    {
+      "leading-relaxed": r === "body",
+      "text-sm leading-tight": r === "caption",
+      "text-sm font-medium leading-none": r === "label",
+      "font-mono text-sm bg-neutral-100 dark:bg-neutral-800 px-1 py-0.5 rounded": r === "code"
+    },
+    // Size variants (override variant sizes)
+    r !== "code" && {
+      "text-xs": n === "xs",
+      "text-sm": n === "sm",
+      "text-base": n === "md",
+      "text-lg": n === "lg",
+      "text-xl": n === "xl"
+    },
+    // Weight variants
+    r !== "label" && {
+      "font-light": a === "light",
+      "font-normal": a === "normal",
+      "font-medium": a === "medium",
+      "font-semibold": a === "semibold",
+      "font-bold": a === "bold"
+    },
+    // Color variants
+    {
+      "text-primary": t === "primary",
+      "text-secondary": t === "secondary",
+      "text-accent": t === "accent",
+      "text-success": t === "success",
+      "text-warning": t === "warning",
+      "text-error": t === "error",
+      "text-info": t === "info",
+      "text-neutral": t === "neutral",
+      "text-current": t === "current",
+      "text-neutral-400 dark:text-neutral-500": t === "muted"
+    },
+    // Alignment
+    {
+      "text-left": s === "left",
+      "text-center": s === "center",
+      "text-right": s === "right",
+      "text-justify": s === "justify"
+    },
+    // Line height (override variant line heights)
+    r === "body" && {
+      "leading-tight": f === "tight",
+      "leading-normal": f === "normal",
+      "leading-relaxed": f === "relaxed"
+    },
+    // Text decorations
+    {
+      italic: g,
+      underline: x,
+      truncate: o
+    },
+    w
+  );
+  return /* @__PURE__ */ e(k, { className: b, ...u, children: d });
+};
+function Be(r) {
+  return {
+    body: "p",
+    caption: "span",
+    label: "span",
+    code: "code"
+  }[r] || "p";
+}
+const yr = ({
+  groups: r,
+  data: n,
+  onSubmit: a,
+  onCancel: t,
+  onChange: s,
+  transform: o,
+  validate: g,
+  submitButton: x = { label: "Submit", variant: "primary" },
+  cancelButton: f = { label: "Cancel", variant: "outline" },
+  showButtons: i = !0,
+  layout: w = "vertical",
+  size: d = "md",
+  loading: u = !1,
+  className: k,
+  ref: b
+}) => {
+  const [C, M] = q(n || {}), [V, $] = q({}), [J, H] = q({});
+  K(() => {
+    n && M(n);
+  }, [n]);
+  const z = ee(
+    (l, v, N) => {
+      const h = r.flatMap((A) => A.items).find((A) => A.name === l);
+      if (!h) return null;
+      if (h.required && (v == null || v === ""))
+        return `${h.label} is required`;
+      if (h.type === "array") {
+        if (h.required && (!v || v.length === 0))
+          return `${h.label} cannot be empty.`;
+        if (v && !Array.isArray(v))
+          return `${h.label} must be an array.`;
+        if (Array.isArray(v) && h.arrayFields) {
+          const A = [];
+          let _ = !1;
+          if (v.forEach((Q, T) => {
+            const Z = {};
+            for (const U of h.arrayFields) {
+              const X = Q == null ? void 0 : Q[U.name];
+              if (U.required && (X == null || X === ""))
+                Z[U.name] = `${U.label} is required`, _ = !0;
+              else if (U.validator) {
+                const R = U.validator(X, Q);
+                R && (Z[U.name] = R, _ = !0);
+              }
+            }
+            A[T] = Z;
+          }), _)
+            return JSON.stringify(A);
+        }
+      }
+      return h.validator ? h.validator(v, N) : null;
+    },
+    [r]
+  ), I = ee(
+    (l, v) => {
+      const N = { ...C, [l]: v }, h = r.flatMap((_) => _.items).find((_) => _.name === l);
+      h != null && h.removeIfEmpty && (v == null || v === "") && delete N[l], M(N), H((_) => ({ ..._, [l]: !0 }));
+      const A = z(l, v, N);
+      $((_) => ({
+        ..._,
+        [l]: A || ""
+      })), s == null || s(N, l);
+    },
+    [C, r, z, s]
+  ), P = ee(
+    async (l) => {
+      if (l.preventDefault(), u) return;
+      const v = {}, N = r.flatMap((A) => A.items);
+      for (const A of N) {
+        if (A.hidden || A.conditional && !A.conditional(C))
+          continue;
+        const _ = z(A.name, C[A.name], C);
+        _ && (v[A.name] = _);
+      }
+      if (g) {
+        const A = g(C);
+        A && Object.assign(v, A);
+      }
+      if ($(v), Object.keys(v).some((A) => v[A]))
+        return;
+      const h = o ? o(C) : C;
+      await (a == null ? void 0 : a(C, h));
+    },
+    [C, r, z, g, o, a, u]
+  ), G = ee(
+    (l) => {
+      var _, Q;
+      const v = C[l.name], N = J[l.name] ? V[l.name] : void 0, h = l.disabled || u, A = {
+        value: v || "",
+        disabled: h,
+        required: l.required,
+        placeholder: l.placeholder,
+        ...l.fieldProps
+      };
+      switch (l.type) {
+        case "text":
+        case "email":
+        case "password":
+        case "number":
+        case "tel":
+        case "url":
+          return /* @__PURE__ */ e(
+            oe,
+            {
+              ...A,
+              onChange: (T) => I(l.name, T.target.value),
+              type: l.textType || l.type,
+              autoComplete: l.autocomplete,
+              error: N,
+              size: d
+            }
+          );
+        case "textarea":
+          return /* @__PURE__ */ e(
+            fe,
+            {
+              ...A,
+              onChange: (T) => I(l.name, T.target.value),
+              rows: 4,
+              error: N,
+              size: d
+            }
+          );
+        case "select":
+          return /* @__PURE__ */ e(
+            xe,
+            {
+              ...A,
+              onChange: (T) => I(l.name, T),
+              options: (l.options || []).map((T) => ({
+                ...T,
+                value: String(T.value)
+              })),
+              searchable: l.searchable,
+              multiple: l.multiple,
+              error: N,
+              size: d
+            }
+          );
+        case "checkbox":
+          return /* @__PURE__ */ e(
+            me,
+            {
+              ...A,
+              checked: !!v,
+              onChange: (T) => I(l.name, T.target.checked),
+              size: d
+            }
+          );
+        case "radio":
+          return /* @__PURE__ */ e("div", { className: "space-y-1", children: (_ = l.options) == null ? void 0 : _.map((T) => /* @__PURE__ */ c("label", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "radio",
+                name: l.name,
+                value: T.value,
+                checked: v === T.value,
+                onChange: () => I(l.name, T.value),
+                disabled: h || T.disabled,
+                className: "rounded-full border-neutral-100 dark:border-neutral-600"
+              }
+            ),
+            /* @__PURE__ */ e(le, { variant: "label", size: "sm", children: T.label })
+          ] }, T.value)) });
+        case "date":
+          return /* @__PURE__ */ e(
+            he,
+            {
+              ...A,
+              value: v ? new Date(v) : null,
+              onChange: (T) => I(l.name, T),
+              size: d
+            }
+          );
+        case "custom":
+          return (Q = l.customComponent) == null ? void 0 : Q.call(l, {
+            value: v,
+            onChange: (T) => I(l.name, T),
+            error: N,
+            disabled: h
+          });
+        case "array": {
+          const T = v || [];
+          let Z = [];
+          if (typeof N == "string" && N.startsWith("["))
+            try {
+              Z = JSON.parse(N);
+            } catch {
+            }
+          const U = () => {
+            I(l.name, [...T, {}]);
+          }, X = (W) => {
+            I(
+              l.name,
+              T.filter((Y, ae) => ae !== W)
+            );
+          }, R = (W, Y, ae) => {
+            const E = [...T];
+            E[W] = {
+              ...E[W],
+              [Y]: ae
+            }, I(l.name, E);
+          };
+          return /* @__PURE__ */ c("div", { className: "space-y-2", children: [
+            T.map((W, Y) => {
+              var ae;
+              return /* @__PURE__ */ c(
+                "div",
+                {
+                  className: "p-4 border rounded-md dark:border-neutral-700 space-y-2 relative",
+                  children: [
+                    /* @__PURE__ */ e("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ e(
+                      te,
+                      {
+                        type: "button",
+                        variant: "ghost",
+                        size: "sm",
+                        onClick: () => X(Y),
+                        disabled: h,
+                        children: "Remove"
+                      }
+                    ) }),
+                    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: (ae = l.arrayFields) == null ? void 0 : ae.map((E) => {
+                      var F;
+                      const ne = (F = Z == null ? void 0 : Z[Y]) == null ? void 0 : F[E.name];
+                      return /* @__PURE__ */ c(
+                        "div",
+                        {
+                          className: "space-y-1",
+                          children: [
+                            /* @__PURE__ */ e("label", { className: "block", children: /* @__PURE__ */ c(
+                              le,
+                              {
+                                variant: "label",
+                                size: "sm",
+                                className: "font-semibold text-neutral-700 dark:text-neutral-300",
+                                children: [
+                                  E.label,
+                                  E.required && /* @__PURE__ */ e("span", { className: "text-red-500 ml-1", children: "*" })
+                                ]
+                              }
+                            ) }),
+                            (() => {
+                              var m, j;
+                              const se = {
+                                value: (W == null ? void 0 : W[E.name]) || "",
+                                disabled: h,
+                                required: E.required,
+                                placeholder: E.placeholder,
+                                ...E.fieldProps
+                              };
+                              switch (E.type) {
+                                case "text":
+                                case "email":
+                                case "password":
+                                case "number":
+                                case "tel":
+                                case "url":
+                                  return /* @__PURE__ */ e(
+                                    oe,
+                                    {
+                                      ...se,
+                                      onChange: (L) => R(
+                                        Y,
+                                        E.name,
+                                        L.target.value
+                                      ),
+                                      type: E.textType || E.type,
+                                      autoComplete: E.autocomplete,
+                                      error: ne,
+                                      size: d
+                                    }
+                                  );
+                                case "textarea":
+                                  return /* @__PURE__ */ e(
+                                    fe,
+                                    {
+                                      ...se,
+                                      onChange: (L) => R(
+                                        Y,
+                                        E.name,
+                                        L.target.value
+                                      ),
+                                      rows: 4,
+                                      error: ne,
+                                      size: d
+                                    }
+                                  );
+                                case "select":
+                                  return /* @__PURE__ */ e(
+                                    xe,
+                                    {
+                                      ...se,
+                                      onChange: (L) => R(
+                                        Y,
+                                        E.name,
+                                        L
+                                      ),
+                                      options: (E.options || []).map(
+                                        (L) => ({
+                                          ...L,
+                                          value: String(L.value)
+                                        })
+                                      ),
+                                      searchable: E.searchable,
+                                      multiple: E.multiple,
+                                      error: ne,
+                                      size: d
+                                    }
+                                  );
+                                case "checkbox":
+                                  return /* @__PURE__ */ e(
+                                    me,
+                                    {
+                                      ...se,
+                                      checked: !!(W != null && W[E.name]),
+                                      onChange: (L) => R(
+                                        Y,
+                                        E.name,
+                                        L.target.checked
+                                      ),
+                                      size: d
+                                    }
+                                  );
+                                case "radio":
+                                  return /* @__PURE__ */ e("div", { className: "space-y-1", children: (m = E.options) == null ? void 0 : m.map((L) => /* @__PURE__ */ c(
+                                    "label",
+                                    {
+                                      className: "flex items-center gap-2",
+                                      children: [
+                                        /* @__PURE__ */ e(
+                                          "input",
+                                          {
+                                            type: "radio",
+                                            name: `${l.name}.${Y}.${E.name}`,
+                                            value: L.value,
+                                            checked: (W == null ? void 0 : W[E.name]) === L.value,
+                                            onChange: () => R(
+                                              Y,
+                                              E.name,
+                                              L.value
+                                            ),
+                                            disabled: h || L.disabled,
+                                            className: "rounded-full border-neutral-100 dark:border-neutral-600"
+                                          }
+                                        ),
+                                        /* @__PURE__ */ e(le, { variant: "label", size: "sm", children: L.label })
+                                      ]
+                                    },
+                                    L.value
+                                  )) });
+                                case "date": {
+                                  const L = W == null ? void 0 : W[E.name];
+                                  return /* @__PURE__ */ e(
+                                    he,
+                                    {
+                                      ...se,
+                                      value: L ? new Date(L) : null,
+                                      onChange: (B) => R(
+                                        Y,
+                                        E.name,
+                                        B
+                                      ),
+                                      size: d
+                                    }
+                                  );
+                                }
+                                case "custom":
+                                  return (j = E.customComponent) == null ? void 0 : j.call(E, {
+                                    value: W == null ? void 0 : W[E.name],
+                                    onChange: (L) => R(
+                                      Y,
+                                      E.name,
+                                      L
+                                    ),
+                                    error: ne,
+                                    disabled: h
+                                  });
+                                // Add other field types here as needed
+                                default:
+                                  return /* @__PURE__ */ c("p", { children: [
+                                    "Unsupported field type in array:",
+                                    " ",
+                                    E.type
+                                  ] });
+                              }
+                            })(),
+                            ne && /* @__PURE__ */ e(
+                              le,
+                              {
+                                variant: "body",
+                                size: "sm",
+                                className: "text-red-600 dark:text-red-400",
+                                children: ne
+                              }
+                            )
+                          ]
+                        },
+                        E.name
+                      );
+                    }) })
+                  ]
+                },
+                Y
+              );
+            }),
+            /* @__PURE__ */ c(
+              te,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                onClick: U,
+                disabled: h,
+                children: [
+                  "Add ",
+                  l.label
+                ]
+              }
+            )
+          ] });
+        }
+        default:
+          return null;
+      }
+    },
+    [C, J, V, u, d, I]
+  ), S = ee(
+    (l) => {
+      if (l.conditional && !l.conditional(C))
+        return null;
+      const v = l.items.filter((h) => !(h.hidden || h.conditional && !h.conditional(C)));
+      if (v.length === 0) return null;
+      const N = p(
+        "space-y-2",
+        {
+          "grid gap-2": l.layout === "grid",
+          "flex flex-wrap gap-2": l.layout === "flex"
+        },
+        l.layout === "grid" && {
+          "grid-cols-1": !l.columns || l.columns === 1,
+          "grid-cols-2": l.columns === 2,
+          "grid-cols-3": l.columns === 3,
+          "grid-cols-4": l.columns === 4
+        },
+        l.className
+      );
+      return /* @__PURE__ */ c(
+        "div",
+        {
+          className: "grid grid-cols-1 md:grid-cols-3 gap-8 p-6 border border-neutral dark:border-neutral-700 rounded-xl",
+          children: [
+            /* @__PURE__ */ c("div", { className: "md:col-span-1", children: [
+              /* @__PURE__ */ e(
+                le,
+                {
+                  variant: "label",
+                  size: "lg",
+                  weight: "semibold",
+                  className: "text-neutral-900 dark:text-neutral-100",
+                  children: l.title
+                }
+              ),
+              l.description && /* @__PURE__ */ e(
+                le,
+                {
+                  variant: "body",
+                  size: "sm",
+                  className: "text-neutral-600 dark:text-neutral-400 mt-1",
+                  children: l.description
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: N, children: v.map((h) => (J[h.name] && V[h.name], /* @__PURE__ */ c(
+              "div",
+              {
+                className: p(
+                  "space-y-1",
+                  h.width && typeof h.width == "string" && `w-[${h.width}]`,
+                  h.width && typeof h.width == "number" && `col-span-${h.width}`
+                ),
+                children: [
+                  h.type !== "custom" && /* @__PURE__ */ e("label", { className: "block", children: /* @__PURE__ */ c(
+                    le,
+                    {
+                      variant: "label",
+                      size: "sm",
+                      className: "font-medium text-neutral-700 dark:text-neutral-300",
+                      children: [
+                        h.label,
+                        h.required && /* @__PURE__ */ e("span", { className: "text-red-500 ml-1", children: "*" })
+                      ]
+                    }
+                  ) }),
+                  G(h)
+                ]
+              },
+              h.name
+            ))) }) })
+          ]
+        },
+        l.id
+      );
+    },
+    [C, J, V, G]
+  ), y = p(
+    "space-y-6",
+    {
+      "max-w-md": d === "sm",
+      "max-w-2xl": d === "md",
+      "max-w-4xl": d === "lg",
+      "max-w-full": d === "full"
+    },
+    k
+  );
+  return /* @__PURE__ */ c("form", { ref: b, onSubmit: P, className: y, children: [
+    /* @__PURE__ */ e("div", { className: "space-y-8", children: r.map(S) }),
+    i && /* @__PURE__ */ c("div", { className: p("flex gap-3 justify-end pt-8"), children: [
+      t && /* @__PURE__ */ e(
+        te,
+        {
+          type: "button",
+          variant: f.variant,
+          size: f.size || d,
+          disabled: f.disabled || u,
+          onClick: t,
+          className: f.className,
+          children: f.label
+        }
+      ),
+      /* @__PURE__ */ e(
+        te,
+        {
+          type: "submit",
+          variant: x.variant,
+          size: x.size || d,
+          disabled: x.disabled || u,
+          loading: u,
+          className: x.className,
+          children: x.label
+        }
+      )
+    ] })
+  ] });
+}, ze = ({
+  trigger: r,
+  options: n,
+  value: a,
+  onSelect: t,
+  placement: s = "bottom-start",
+  disabled: o = !1,
+  className: g,
+  showCheck: x = !0,
+  header: f
+}) => {
+  const [i, w] = q(!1), [d, u] = q(null), [k, b] = q({ top: 0, left: 0 }), C = re(null), M = re(null), V = re(null), $ = re(null);
+  K(() => {
+    const y = (l) => {
+      C.current && !C.current.contains(l.target) && V.current && !V.current.contains(l.target) && (w(!1), u(null), $.current && (clearTimeout($.current), $.current = null));
+    };
+    return i && document.addEventListener("mousedown", y), () => {
+      document.removeEventListener("mousedown", y);
+    };
+  }, [i]), K(() => {
+    const y = (l) => {
+      l.key === "Escape" && (w(!1), u(null), $.current && (clearTimeout($.current), $.current = null));
+    };
+    return i && document.addEventListener("keydown", y), () => {
+      document.removeEventListener("keydown", y);
+    };
+  }, [i]), K(() => {
+    if (d && C.current) {
+      const y = C.current.querySelector(
+        `[data-option-value="${d}"]`
+      );
+      if (y) {
+        const l = y.getBoundingClientRect();
+        b({
+          top: l.top,
+          left: l.right + 8
+        });
+      }
+    }
+  }, [d]), K(() => () => {
+    $.current && clearTimeout($.current);
+  }, []);
+  const J = (y) => {
+    y.stopPropagation(), o || (w(!i), u(null), $.current && (clearTimeout($.current), $.current = null));
+  }, H = (y, l, v) => {
+    y.stopPropagation(), !l.disabled && !l.divider && (!l.children || l.children.length === 0) && (t == null || t(l.value, v), w(!1), u(null));
+  }, z = (y) => {
+    $.current && (clearTimeout($.current), $.current = null), y.children && y.children.length > 0 ? u(y.value) : u(null);
+  }, I = (y) => {
+    y.children && y.children.length > 0 ? $.current = setTimeout(() => {
+      u(null);
+    }, 150) : u(null);
+  }, P = (y, l, v) => {
+    y.stopPropagation(), !l.disabled && !l.divider && (t == null || t(l.value, v), w(!1), u(null));
+  }, G = p(
+    "absolute z-50 min-w-[200px] bg-white dark:bg-gray-800 rounded-md shadow-xs border border-gray-100 dark:border-gray-600",
+    "max-h-60 overflow-auto",
+    {
+      "top-full left-0 mt-2": s === "bottom-start",
+      "top-full right-0 mt-2": s === "bottom-end",
+      "bottom-full left-0 mb-2": s === "top-start",
+      "bottom-full right-0 mb-2": s === "top-end"
+    }
+  ), S = p(
+    "fixed z-[60] min-w-[200px] bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-100 dark:border-gray-600",
+    "max-h-60 overflow-auto"
+  );
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      ref: C,
+      className: p(
+        "relative flex flex-row items-center justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700",
+        g
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            ref: M,
+            onClick: J,
+            disabled: o,
+            className: p("inline-flex items-center justify-center", {
+              "opacity-50 cursor-not-allowed": o
+            }),
+            children: r
+          }
+        ),
+        i && /* @__PURE__ */ e("div", { className: G, children: /* @__PURE__ */ c("div", { className: "p-2", children: [
+          f && /* @__PURE__ */ e("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 py-2", children: f }),
+          n.map((y, l) => {
+            if (y.divider)
+              return /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "border-t border-gray-200 dark:border-gray-700 my-2"
+                },
+                `divider-${l}`
+              );
+            const v = y.children && y.children.length > 0, N = d === y.value;
+            return /* @__PURE__ */ c("div", { className: "relative group", children: [
+              /* @__PURE__ */ c(
+                "button",
+                {
+                  "data-option-value": y.value,
+                  onClick: (h) => H(h, y),
+                  onMouseEnter: () => z(y),
+                  onMouseLeave: () => I(y),
+                  disabled: y.disabled,
+                  className: p(
+                    "w-full flex items-center justify-between px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors",
+                    {
+                      "opacity-50 cursor-not-allowed": y.disabled,
+                      "bg-gray-100 dark:bg-gray-700": N && v
+                    }
+                  ),
+                  children: [
+                    /* @__PURE__ */ c("div", { className: "flex items-center space-x-2 min-w-0", children: [
+                      y.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: y.icon }),
+                      /* @__PURE__ */ c("div", { className: "flex flex-col items-start min-w-0", children: [
+                        /* @__PURE__ */ e("span", { className: "font-base truncate", children: y.label }),
+                        y.description && /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: y.description })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ c("div", { className: "flex items-center space-x-2", children: [
+                      x && a === y.value && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-green-600 flex-shrink-0 text-sm font-bold", children: "✓" }),
+                      v && /* @__PURE__ */ e("span", { className: "text-gray-400 dark:text-gray-500 text-xs", children: "▶" })
+                    ] })
+                  ]
+                }
+              ),
+              v && N && /* @__PURE__ */ e(
+                "div",
+                {
+                  ref: V,
+                  className: S,
+                  style: {
+                    top: `${k.top}px`,
+                    left: `${k.left}px`
+                  },
+                  onMouseEnter: () => {
+                    $.current && (clearTimeout($.current), $.current = null), u(y.value);
+                  },
+                  onMouseLeave: () => {
+                    $.current = setTimeout(() => {
+                      u(null);
+                    }, 150);
+                  },
+                  children: /* @__PURE__ */ e("div", { className: "p-2", children: y.children.map((h, A) => {
+                    if (h.divider)
+                      return /* @__PURE__ */ e(
+                        "div",
+                        {
+                          className: "border-t border-gray-200 dark:border-gray-700 my-2"
+                        },
+                        `divider-${A}`
+                      );
+                    const _ = typeof a == "object" && a[y.value] && a[y.value].includes(
+                      h.value
+                    ) || a === h.value;
+                    return /* @__PURE__ */ c(
+                      "button",
+                      {
+                        onClick: (Q) => P(
+                          Q,
+                          h,
+                          y.value
+                        ),
+                        disabled: h.disabled,
+                        className: p(
+                          "w-full flex items-center justify-between px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors",
+                          {
+                            "opacity-50 cursor-not-allowed": h.disabled
+                          }
+                        ),
+                        children: [
+                          /* @__PURE__ */ c("div", { className: "flex items-center space-x-2 min-w-0", children: [
+                            h.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: h.icon }),
+                            /* @__PURE__ */ c("div", { className: "flex flex-col items-start min-w-0", children: [
+                              /* @__PURE__ */ e("span", { className: "font-base truncate", children: h.label }),
+                              h.description && /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: h.description })
+                            ] })
+                          ] }),
+                          x && _ && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-green-600 flex-shrink-0 text-sm font-bold", children: "✓" })
+                        ]
+                      },
+                      h.value
+                    );
+                  }) })
+                }
+              )
+            ] }, y.value);
+          }),
+          (() => {
+            const y = n.reduce((l, v) => {
+              if (v.divider) return l;
+              const N = v.children ? v.children.filter((h) => !h.divider).length : 0;
+              return l + 1 + N;
+            }, 0);
+            return y > 1 && /* @__PURE__ */ e("div", { className: "border-t border-gray-200 dark:border-gray-600 mt-2 pt-2", children: /* @__PURE__ */ c("div", { className: "text-xs text-gray-500 dark:text-gray-400 px-3 py-1", children: [
+              y,
+              " options available"
+            ] }) });
+          })()
+        ] }) })
+      ]
+    }
+  );
+}, We = {
+  sm: "max-w-md",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  full: "max-w-full mx-4"
+};
+function vr({
+  open: r,
+  onClose: n,
+  title: a,
+  size: t = "md",
+  closeOnBackdropClick: s = !0,
+  closeOnEscape: o = !0,
+  className: g,
+  backdropClassName: x,
+  children: f,
+  footer: i,
+  showCloseButton: w = !0
+}) {
+  const d = re(null), u = re(null);
+  K(() => {
+    if (!r || !o) return;
+    const b = (C) => {
+      C.key === "Escape" && n();
+    };
+    return document.addEventListener("keydown", b), () => document.removeEventListener("keydown", b);
+  }, [r, o, n]), K(() => (r ? (u.current = document.activeElement, d.current && d.current.focus(), document.body.style.overflow = "hidden") : (u.current && u.current.focus(), document.body.style.overflow = ""), () => {
+    document.body.style.overflow = "";
+  }), [r]);
+  const k = (b) => {
+    s && b.target === b.currentTarget && n();
+  };
+  return r ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: p(
+        "fixed inset-0 z-50 flex items-center justify-center p-4",
+        "bg-black/20",
+        // 'animate-fade-in',
+        x
+      ),
+      onClick: k,
+      children: /* @__PURE__ */ c(
+        "div",
+        {
+          ref: d,
+          className: p(
+            "relative w-full bg-white dark:bg-secondary-800 rounded-modal shadow-modal rounded-md",
+            // 'animate-scale-in',
+            "focus:outline-none",
+            We[t],
+            g
+          ),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": a ? "modal-title" : void 0,
+          tabIndex: -1,
+          children: [
+            (a || w) && /* @__PURE__ */ c("div", { className: "flex items-center justify-between p-6 pb-0", children: [
+              a && /* @__PURE__ */ e(
+                "span",
+                {
+                  id: "modal-title",
+                  className: "text-lg font-semibold text-secondary-800 dark:text-secondary-200",
+                  children: a
+                }
+              ),
+              w && /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: n,
+                  className: "p-1 text-secondary-400 hover:text-secondary-600 dark:hover:text-secondary-300 transition-colors",
+                  "aria-label": "Close modal",
+                  children: /* @__PURE__ */ e("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e("div", { className: "p-6", children: f }),
+            i && /* @__PURE__ */ e("div", { className: "px-6 py-4", children: i })
+          ]
+        }
+      )
+    }
+  ) : null;
+}
+const Ve = {
+  default: "bg-secondary-100 text-secondary-800 dark:bg-secondary-800 dark:text-secondary-200",
+  primary: "bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200",
+  secondary: "bg-secondary-100 text-secondary-800 dark:bg-secondary-800 dark:text-secondary-200",
+  success: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
+  warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
+  error: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
+  info: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
+}, qe = {
+  sm: "px-2 py-0.5 text-xs",
+  md: "px-2.5 py-1 text-sm",
+  lg: "px-3 py-1.5 text-base"
+}, He = {
+  default: "bg-secondary-400",
+  primary: "bg-primary-500",
+  secondary: "bg-secondary-400",
+  success: "bg-green-500",
+  warning: "bg-yellow-500",
+  error: "bg-red-500",
+  info: "bg-blue-500"
+};
+function kr({
+  variant: r = "default",
+  size: n = "md",
+  dot: a = !1,
+  icon: t,
+  dismissible: s = !1,
+  onDismiss: o,
+  className: g,
+  children: x,
+  ...f
+}) {
+  return /* @__PURE__ */ c(
+    "span",
+    {
+      className: p(
+        // Base styles
+        "inline-flex items-center font-medium rounded-full",
+        // Variant styles
+        Ve[r],
+        // Size styles
+        qe[n],
+        g
+      ),
+      ...f,
+      children: [
+        a && /* @__PURE__ */ e(
+          "span",
+          {
+            className: p(
+              "w-2 h-2 rounded-full mr-1.5",
+              He[r]
+            )
+          }
+        ),
+        t && /* @__PURE__ */ e("span", { className: p("flex-shrink-0", x && "mr-1"), children: t }),
+        x,
+        s && o && /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: o,
+            className: "ml-1.5 flex-shrink-0 hover:opacity-70 transition-opacity",
+            "aria-label": "Remove badge",
+            children: /* @__PURE__ */ e("svg", { className: "h-3 w-3", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
+              "path",
+              {
+                fillRule: "evenodd",
+                d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                clipRule: "evenodd"
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}
+function Oe({
+  children: r,
+  showTableSkeleton: n = !1,
+  tableColumns: a = 6,
+  tableRows: t = 8
+}) {
+  return r ? /* @__PURE__ */ e("main", { className: "flex-1 bg-gray-50 dark:bg-gray-950 p-6", children: /* @__PURE__ */ e("div", { className: "w-full max-w-6xl mx-auto animate-pulse", children: r }) }) : /* @__PURE__ */ e("main", { className: "flex-1 bg-gray-50 dark:bg-gray-950 p-6", children: /* @__PURE__ */ c("div", { className: "w-full mx-auto space-y-6 animate-pulse", children: [
+    !n && /* @__PURE__ */ c(ke, { children: [
+      /* @__PURE__ */ e("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/4" }),
+      /* @__PURE__ */ c("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" }),
+        /* @__PURE__ */ e("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2" })
+      ] })
+    ] }),
+    n && /* @__PURE__ */ c("div", { className: "rounded-lg overflow-hidden", children: [
+      /* @__PURE__ */ e("div", { className: `grid grid-cols-${a} gap-2 bg-gray-100 dark:bg-gray-800 p-3`, children: Array.from({ length: a }).map((s, o) => /* @__PURE__ */ e(
+        "div",
+        {
+          className: "h-4 bg-gray-300 dark:bg-gray-600 rounded w-2/3"
+        },
+        `header-${o}`
+      )) }),
+      Array.from({ length: t }).map((s, o) => /* @__PURE__ */ e(
+        "div",
+        {
+          className: `grid grid-cols-${a} gap-2 p-3 border-t border-gray-100 dark:border-gray-800`,
+          children: Array.from({ length: a }).map((g, x) => /* @__PURE__ */ e(
+            "div",
+            {
+              className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-full"
+            },
+            `cell-${o}-${x}`
+          ))
+        },
+        `row-${o}`
+      ))
+    ] })
+  ] }) });
+}
+const Je = {
+  xs: "h-3 w-3",
+  sm: "h-4 w-4",
+  md: "h-6 w-6",
+  lg: "h-8 w-8",
+  xl: "h-12 w-12"
+}, Ye = {
+  primary: "text-primary",
+  secondary: "text-secondary-600",
+  white: "text-white",
+  current: "text-current"
+}, Ue = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-sm",
+  lg: "text-base",
+  xl: "text-lg"
+};
+function Nr({
+  size: r = "md",
+  variant: n = "primary",
+  label: a = "Loading...",
+  showLabel: t = !1,
+  className: s,
+  ...o
+}) {
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: p(
+        "inline-flex items-center",
+        t ? "flex-col space-y-2" : "",
+        s
+      ),
+      ...o,
+      children: [
+        /* @__PURE__ */ c(
+          "svg",
+          {
+            className: p(
+              "animate-spin",
+              Je[r],
+              Ye[n]
+            ),
+            fill: "none",
+            viewBox: "0 0 24 24",
+            "aria-hidden": !t,
+            role: t ? "status" : void 0,
+            children: [
+              /* @__PURE__ */ e(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "path",
+                {
+                  className: "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"
+                }
+              )
+            ]
+          }
+        ),
+        t && /* @__PURE__ */ e(
+          "span",
+          {
+            className: p(
+              "text-secondary-600 dark:text-secondary-400",
+              Ue[r]
+            ),
+            children: a
+          }
+        ),
+        !t && /* @__PURE__ */ e("span", { className: "sr-only", children: a })
+      ]
+    }
+  );
+}
+const wr = ({
+  icon: r,
+  size: n = "md",
+  color: a = "current",
+  clickable: t = !1,
+  onClick: s,
+  className: o,
+  "aria-label": g,
+  ...x
+}) => {
+  const f = typeof n == "number" ? n : Ge(n), i = p(
+    "inline-block",
+    // Color variants
+    {
+      "text-primary": a === "primary",
+      "text-secondary": a === "secondary",
+      "text-accent": a === "accent",
+      "text-success": a === "success",
+      "text-warning": a === "warning",
+      "text-error": a === "error",
+      "text-info": a === "info",
+      "text-neutral": a === "neutral",
+      "text-current": a === "current"
+    },
+    // Clickable styles
+    {
+      "cursor-pointer hover:opacity-80 transition-opacity duration-200": t,
+      "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/20 rounded": t
+    },
+    o
+  ), w = {
+    size: f,
+    className: i,
+    onClick: t ? s : void 0,
+    "aria-label": g,
+    role: t ? "button" : void 0,
+    tabIndex: t ? 0 : void 0,
+    onKeyDown: t ? (d) => {
+      (d.key === "Enter" || d.key === " ") && (d.preventDefault(), s == null || s());
+    } : void 0,
+    ...x
+  };
+  return /* @__PURE__ */ e(r, { ...w });
+};
+function Ge(r) {
+  return {
+    xs: 12,
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32
+  }[r];
+}
+const Cr = ({
+  src: r,
+  alt: n,
+  size: a = "md",
+  aspectRatio: t = "auto",
+  radius: s = "md",
+  showLoading: o = !0,
+  showError: g = !0,
+  fallback: x,
+  loadingContent: f,
+  errorContent: i,
+  className: w,
+  onLoad: d,
+  onError: u,
+  ...k
+}) => {
+  const [b, C] = q(!0), [M, V] = q(!1), [$, J] = q(r), H = (l) => {
+    C(!1), V(!1), d == null || d(l);
+  }, z = (l) => {
+    if (C(!1), V(!0), x && $ !== x) {
+      J(x), V(!1), C(!0);
+      return;
+    }
+    u == null || u(l);
+  }, I = p(
+    "relative overflow-hidden bg-neutral-100 dark:bg-neutral-800",
+    // Size variants
+    {
+      "w-8 h-8": a === "xs",
+      "w-12 h-12": a === "sm",
+      "w-16 h-16": a === "md",
+      "w-24 h-24": a === "lg",
+      "w-32 h-32": a === "xl",
+      "w-full h-full": a === "full"
+    },
+    // Aspect ratio variants
+    {
+      "aspect-square": t === "square",
+      "aspect-video": t === "video",
+      "aspect-[3/4]": t === "portrait",
+      "aspect-[4/3]": t === "landscape"
+    },
+    // Border radius variants
+    {
+      "rounded-none": s === "none",
+      "rounded-sm": s === "sm",
+      "rounded-md": s === "md",
+      "rounded-lg": s === "lg",
+      "rounded-xl": s === "xl",
+      "rounded-full": s === "full"
+    },
+    w
+  ), P = p(
+    "w-full h-full object-cover transition-opacity duration-200",
+    {
+      "opacity-0": b || M,
+      "opacity-100": !b && !M
+    }
+  ), G = p(
+    "absolute inset-0 flex items-center justify-center",
+    "text-neutral-400 dark:text-neutral-500"
+  ), S = /* @__PURE__ */ e("div", { className: "animate-pulse", children: /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-neutral-300 dark:bg-neutral-600 rounded" }) }), y = /* @__PURE__ */ c("div", { className: "text-center", children: [
+    /* @__PURE__ */ e(
+      "svg",
+      {
+        className: "w-6 h-6 mx-auto mb-1",
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ e(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e("span", { className: "text-xs", children: "Failed to load" })
+  ] });
+  return /* @__PURE__ */ c("div", { className: I, children: [
+    /* @__PURE__ */ e(
+      "img",
+      {
+        ...k,
+        src: $,
+        alt: n,
+        className: P,
+        onLoad: H,
+        onError: z
+      }
+    ),
+    b && o && /* @__PURE__ */ e("div", { className: G, children: f || S }),
+    M && g && /* @__PURE__ */ e("div", { className: G, children: i || y })
+  ] });
+}, Sr = ({
+  title: r,
+  subtitle: n,
+  actions: a = [],
+  children: t,
+  className: s,
+  backLabel: o = "Back",
+  backClassName: g,
+  onBack: x
+}) => /* @__PURE__ */ c(
+  "div",
+  {
+    className: p(
+      "p-5 pb-3 border-b border-gray-100 dark:border-gray-700",
+      s
+    ),
+    children: [
+      /* @__PURE__ */ c("div", { className: "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4", children: [
+        /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ c("div", { className: "flex items-center gap-2 text-neutral-900 dark:text-neutral-100 pb-2", children: [
+          x && /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: x,
+              className: p(
+                "flex items-center text-sm dark:hover:text-neutral-300 cursor-pointer transition",
+                g
+              ),
+              children: /* @__PURE__ */ e(we, { size: 16, color: "currentColor" })
+            }
+          ),
+          /* @__PURE__ */ e("h2", { className: "text-2xl font-semibold truncate", children: r })
+        ] }) }),
+        a.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap sm:flex-nowrap gap-2 sm:gap-3", children: a.map((f) => /* @__PURE__ */ c(
+          "button",
+          {
+            onClick: (i) => {
+              i.stopPropagation(), i.target.blur(), f.onClick();
+            },
+            disabled: f.disabled,
+            className: p("btn", {
+              o__primary: f.variant === "primary",
+              o__secondary: f.variant === "secondary" || f.variant === "outline",
+              o__ghost: f.variant === "ghost",
+              o__destructive: f.variant === "destructive"
+            }),
+            children: [
+              f.icon && /* @__PURE__ */ e("span", { className: "mr-2", children: f.icon }),
+              f.label
+            ]
+          },
+          f.id
+        )) })
+      ] }),
+      t && /* @__PURE__ */ e("div", { className: "mt-4", children: t })
+    ]
+  }
+), Re = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m21 21-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), Ke = ({ active: r }) => /* @__PURE__ */ e("svg", { className: p("h-3 w-3", r ? "text-neutral-900 dark:text-neutral-100" : "text-neutral-400"), fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m18 15-6-6-6 6" }) }), Qe = ({ active: r }) => /* @__PURE__ */ e("svg", { className: p("h-3 w-3", r ? "text-neutral-900 dark:text-neutral-100" : "text-neutral-400"), fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m6 9 6 6 6-6" }) }), Xe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m15 18-6-6 6-6" }) }), Ze = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m9 18 6-6-6-6" }) }), Fe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m11 17-5-5 5-5m6 10-5-5 5-5" }) }), er = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m7 17 5-5-5-5m6 10 5-5-5-5" }) }), pe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m6 9 6 6 6-6" }) }), rr = (r) => {
+  var t, s, o, g;
+  const n = (x) => {
+    var f;
+    return r.multiSelect && Array.isArray(r.value) ? (f = r.value) == null ? void 0 : f.includes(x) : r.value === x;
+  }, a = (x) => {
+    r.multiSelect && Array.isArray(r.value) ? r.onChange(r.value.filter((f) => f !== x)) : r.onChange(x);
+  };
+  return r.type === "date" ? /* @__PURE__ */ e("div", { className: "flex items-center space-x-1 max-w-[140px]", children: /* @__PURE__ */ e(
+    he,
+    {
+      size: "sm",
+      value: r.value,
+      onChange: (x) => r.onChange(x),
+      placeholder: r.placeholder || `Select ${r.label.toLowerCase()}`,
+      className: "min-w-[160px] btn btn o__secondary"
+    }
+  ) }) : /* @__PURE__ */ e("div", { className: "flex items-center space-x-1 max-w-[240px]", children: /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ c("details", { className: "group", children: [
+    /* @__PURE__ */ c("summary", { className: "flex items-center space-x-2 cursor-pointer hover:bg-white rounded-full px-3 py-2 text-sm btn btn o__secondary", children: [
+      /* @__PURE__ */ e("span", { children: r.label }),
+      /* @__PURE__ */ e("span", { className: "text-gray-800", children: r.multiSelect && Array.isArray(r.value) ? (t = r.value) == null ? void 0 : t.map((x) => {
+        var f, i;
+        return (i = (f = r.options) == null ? void 0 : f.find((w) => w.value === x)) == null ? void 0 : i.label;
+      }).join(", ") : (o = (s = r.options) == null ? void 0 : s.find((x) => x.value === r.value)) == null ? void 0 : o.label }),
+      /* @__PURE__ */ e("span", { className: "text-gray-500 text-sm group-open:rotate-180 transition-transform", children: /* @__PURE__ */ e(pe, {}) })
+    ] }),
+    /* @__PURE__ */ c("div", { className: "absolute z-10 left-0 mt-1 bg-white border border-gray-100 rounded-lg shadow-sm p-2 w-48", children: [
+      (g = r.options) == null ? void 0 : g.map((x) => /* @__PURE__ */ e("button", { className: "w-full text-left px-3 py-2 rounded-md hover:bg-gray-50 text-sm text-gray-700 flex items-center space-x-2", onClick: () => a(x.value), children: /* @__PURE__ */ e("span", { className: p(n(x.value) && "text-primary-500"), children: x.label }) }, x.value)),
+      r.value && /* @__PURE__ */ e("button", { className: "w-full text-left px-3 py-2 rounded-md hover:bg-gray-50 text-sm text-gray-700 flex items-center space-x-2 mt-2", onClick: () => a(null), children: /* @__PURE__ */ e("span", { className: "text-gray-400 dark:text-gray-600", children: "Clear filter" }) })
+    ] })
+  ] }) }) });
+}, Mr = ({
+  data: r,
+  columns: n,
+  loading: a = !1,
+  searchable: t = !1,
+  searchPlaceholder: s = "Search...",
+  filters: o = [],
+  paginated: g = !1,
+  pageSizeOptions: x = [10, 25, 50, 100],
+  defaultPageSize: f = 10,
+  actions: i = [],
+  onRowClick: w,
+  selectable: d = !1,
+  selectedRows: u = [],
+  onSelectionChange: k,
+  getRowKey: b = (z, I) => I,
+  emptyContent: C,
+  hoverable: M = !0,
+  bordered: V = !1,
+  striped: $ = !1,
+  className: J,
+  rowClassName: H
+}) => {
+  const [z, I] = q(""), [P, G] = q({ column: null, direction: null }), [S, y] = q({
+    page: 0,
+    pageSize: f
+  }), l = re(null), v = ie(() => {
+    let m = r;
+    if (t && z.trim()) {
+      const j = n.filter((B) => B.searchable !== !1), L = z.toLowerCase();
+      m = m.filter((B) => j.some((D) => {
+        const O = typeof D.accessor == "function" ? D.accessor(B) : B[D.accessor];
+        return String(O || "").toLowerCase().includes(L);
+      }));
+    }
+    return o.forEach((j) => {
+      j.value && j.value !== "all" && (m = m.filter((L) => {
+        const B = n.find((O) => O.id === j.id);
+        if (!B) return !0;
+        const D = typeof B.accessor == "function" ? B.accessor(L) : L[B.accessor];
+        return String(D || "") === j.value;
+      }));
+    }), m;
+  }, [r, z, n, t, o]), N = ie(() => {
+    if (!P.column || !P.direction) return v;
+    const m = n.find((j) => j.id === P.column);
+    return m ? [...v].sort((j, L) => {
+      const B = typeof m.accessor == "function" ? m.accessor(j) : j[m.accessor], D = typeof m.accessor == "function" ? m.accessor(L) : L[m.accessor];
+      let O = 0;
+      return B < D ? O = -1 : B > D && (O = 1), P.direction === "desc" ? -O : O;
+    }) : v;
+  }, [v, P, n]), h = ie(() => {
+    if (!g) return N;
+    const m = S.page * S.pageSize, j = m + S.pageSize;
+    return N.slice(m, j);
+  }, [N, S, g]), A = ee((m) => {
+    const j = n.find((L) => L.id === m);
+    j != null && j.sortable && G((L) => L.column !== m ? { column: m, direction: "asc" } : L.direction === "asc" ? { column: m, direction: "desc" } : { column: null, direction: null });
+  }, [n]), _ = ee((m) => {
+    y((j) => ({ ...j, page: m }));
+  }, []), Q = ee((m) => {
+    y({ page: 0, pageSize: m });
+  }, []), T = ee((m, j) => {
+    if (!k) return;
+    const L = b(m, 0);
+    u.map((B, D) => b(B, D)), k(j ? [...u, m] : u.filter((B, D) => b(u[D], D) !== L));
+  }, [u, k, b]), Z = ee((m) => {
+    k && k(m ? [...h] : []);
+  }, [h, k]);
+  K(() => {
+    y((m) => ({ ...m, page: 0 }));
+  }, [z, P]), K(() => {
+    y((m) => ({ ...m, page: 0 }));
+  }, [o.map((m) => m.value).join(",")]);
+  const U = N.length, X = Math.ceil(U / S.pageSize), R = S.page * S.pageSize + 1, W = Math.min(R + S.pageSize - 1, U), Y = h.length > 0 && h.every((m) => {
+    const j = b(m, 0);
+    return u.some((L, B) => b(L, B) === j);
+  }), ae = h.some((m) => {
+    const j = b(m, 0);
+    return u.some((L, B) => b(L, B) === j);
+  }), E = p(
+    "w-full text-sm leading-5 text-[var(--text-default)] border-collapse",
+    J
+  ), ne = p(
+    "bg-[var(--base-module)]"
+  ), F = p(
+    "text-[var(--text-default)] dark:text-[var(--text-on-neutral)] truncate p-3 border-b border-[var(--neutral-border)]"
+  ), se = p(
+    "h-12",
+    {
+      "hover:bg-[var(--neutral-container)] dark:hover:bg-[var(--neutral-container-emphasis)]": M,
+      "cursor-pointer": w
+    }
+  );
+  return /* @__PURE__ */ c("div", { className: "space-y-4", children: [
+    (t || o.length > 0) && /* @__PURE__ */ e("div", { className: "pt-4 pb-2", children: /* @__PURE__ */ c("div", { className: "flex flex-wrap gap-4 items-start", children: [
+      o.map((m) => /* @__PURE__ */ e(rr, { ...m }, m.id)),
+      /* @__PURE__ */ e("div", { className: "w-full sm:w-auto sm:ml-auto min-w-[200px]", children: /* @__PURE__ */ e(
+        oe,
+        {
+          placeholder: s,
+          value: z,
+          onChange: (m) => I(m.target.value),
+          startIcon: /* @__PURE__ */ e(Re, {}),
+          className: "max-w-sm"
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ c("div", { className: "relative w-full overflow-x-auto min-h-[400px]", children: [
+      a && /* @__PURE__ */ e("div", { className: "flex items-center justify-center z-10", children: /* @__PURE__ */ e(Oe, { showTableSkeleton: !0, tableRows: 10, tableColumns: n.length }) }),
+      /* @__PURE__ */ c("table", { ref: l, className: p(E, "min-w-full"), children: [
+        /* @__PURE__ */ e("thead", { className: ne, children: /* @__PURE__ */ c("tr", { children: [
+          d && /* @__PURE__ */ e("th", { className: p(F, "w-12"), children: /* @__PURE__ */ e(
+            "input",
+            {
+              type: "checkbox",
+              checked: Y,
+              ref: (m) => {
+                m && (m.indeterminate = ae && !Y);
+              },
+              onChange: (m) => Z(m.target.checked),
+              className: "rounded border-neutral-300 dark:border-neutral-600"
+            }
+          ) }),
+          !a && n.map((m) => /* @__PURE__ */ e(
+            "th",
+            {
+              className: p(
+                F,
+                "font-semibold text-xs text-[var(--text-muted)] dark:text-[var(--text-muted)] uppercase tracking-wider",
+                "group",
+                {
+                  "text-left": m.align === "left" || !m.align,
+                  "text-center": m.align === "center",
+                  "text-right": m.align === "right",
+                  "cursor-pointer select-none": m.sortable,
+                  "sticky left-0 bg-white dark:bg-neutral-900": m.sticky === "left",
+                  "sticky right-0 bg-white dark:bg-neutral-900": m.sticky === "right"
+                }
+              ),
+              style: { width: m.width },
+              onClick: () => m.sortable && A(m.id),
+              children: /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+                m.headerCell ? m.headerCell() : m.header,
+                m.sortable && /* @__PURE__ */ c("div", { className: p(
+                  "flex flex-col opacity-0 group-hover:opacity-100 transition-opacity",
+                  P.column === m.id && "opacity-100"
+                ), children: [
+                  /* @__PURE__ */ e(Ke, { active: P.column === m.id && P.direction === "asc" }),
+                  /* @__PURE__ */ e(Qe, { active: P.column === m.id && P.direction === "desc" })
+                ] })
+              ] })
+            },
+            m.id
+          )),
+          i.length > 0 && /* @__PURE__ */ e("th", { className: p(F, "w-20"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
+        ] }) }),
+        /* @__PURE__ */ e("tbody", { children: h.length === 0 || a ? !a && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
+          "td",
+          {
+            colSpan: n.length + (d ? 1 : 0) + (i.length > 0 ? 1 : 0),
+            className: p(F, "text-center py-8 text-neutral-500 dark:text-neutral-400"),
+            children: C || "No data available"
+          }
+        ) }) : h.map((m, j) => {
+          const L = b(m, j), B = u.some(
+            (D, O) => b(D, O) === L
+          );
+          return /* @__PURE__ */ c(
+            "tr",
+            {
+              className: p(
+                se,
+                { "bg-blue-50 dark:bg-blue-900/20": B },
+                H == null ? void 0 : H(m, j)
+              ),
+              onClick: (D) => {
+                D.stopPropagation(), w == null || w(m, j);
+              },
+              children: [
+                d && /* @__PURE__ */ e("td", { className: F, children: /* @__PURE__ */ e(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: B,
+                    onChange: (D) => {
+                      D.stopPropagation(), T(m, D.target.checked);
+                    },
+                    className: "rounded border-neutral-300 dark:border-neutral-600"
+                  }
+                ) }),
+                n.map((D) => {
+                  const O = typeof D.accessor == "function" ? D.accessor(m) : m[D.accessor];
+                  return /* @__PURE__ */ e(
+                    "td",
+                    {
+                      className: p(
+                        F,
+                        {
+                          "text-left": D.align === "left" || !D.align,
+                          "text-center": D.align === "center",
+                          "text-right": D.align === "right",
+                          "sticky left-0 bg-white dark:bg-neutral-900": D.sticky === "left",
+                          "sticky right-0 bg-white dark:bg-neutral-900": D.sticky === "right"
+                        }
+                      ),
+                      children: D.cell ? D.cell(O, m, j) : String(O || "")
+                    },
+                    D.id
+                  );
+                }),
+                i.length > 0 && /* @__PURE__ */ e("td", { className: F, children: /* @__PURE__ */ e(
+                  ze,
+                  {
+                    trigger: /* @__PURE__ */ c("div", { className: "inline-flex items-center gap-1 px-2 py-1 text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100", children: [
+                      /* @__PURE__ */ e("span", { children: "Options" }),
+                      /* @__PURE__ */ e(pe, {})
+                    ] }),
+                    options: i.map((D) => {
+                      var O;
+                      return {
+                        value: D.id,
+                        label: D.label,
+                        icon: D.icon,
+                        disabled: (O = D.disabled) == null ? void 0 : O.call(D, m)
+                      };
+                    }),
+                    onSelect: (D) => {
+                      const O = i.find((ye) => ye.id === D);
+                      O && O.onClick(m, j);
+                    },
+                    placement: "bottom-end"
+                  }
+                ) })
+              ]
+            },
+            L
+          );
+        }) })
+      ] })
+    ] }),
+    g && U > 0 && /* @__PURE__ */ c("div", { className: "flex items-center justify-between px-6", children: [
+      /* @__PURE__ */ c("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ c("span", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: [
+          "Showing ",
+          R,
+          " to ",
+          W,
+          " of ",
+          U,
+          " results"
+        ] }),
+        /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e("span", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: "Rows per page:" }),
+          /* @__PURE__ */ e(
+            "select",
+            {
+              value: S.pageSize,
+              onChange: (m) => Q(Number(m.target.value)),
+              className: "border border-[var(--neutral-border)] text-[var(--text-default)] dark:text-[var(--text-on-neutral)] rounded-md px-2 py-1 text-sm bg-[var(--base-input)] dark:bg-[var(--base-input)] w-16",
+              children: x.map((m) => /* @__PURE__ */ e("option", { value: m, children: m }, m))
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ c("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ e(
+          te,
+          {
+            size: "sm",
+            variant: "ghost",
+            onClick: () => _(0),
+            disabled: S.page === 0,
+            iconOnly: !0,
+            children: /* @__PURE__ */ e(Fe, {})
+          }
+        ),
+        /* @__PURE__ */ e(
+          te,
+          {
+            size: "sm",
+            variant: "ghost",
+            onClick: () => _(S.page - 1),
+            disabled: S.page === 0,
+            iconOnly: !0,
+            children: /* @__PURE__ */ e(Xe, {})
+          }
+        ),
+        /* @__PURE__ */ c("span", { className: "px-3 py-1 text-sm text-gray-500 dark:text-gray-400", children: [
+          "Page ",
+          S.page + 1,
+          " of ",
+          X
+        ] }),
+        /* @__PURE__ */ e(
+          te,
+          {
+            size: "sm",
+            variant: "ghost",
+            onClick: () => _(S.page + 1),
+            disabled: S.page >= X - 1,
+            iconOnly: !0,
+            children: /* @__PURE__ */ e(Ze, {})
+          }
+        ),
+        /* @__PURE__ */ e(
+          te,
+          {
+            size: "sm",
+            variant: "ghost",
+            onClick: () => _(X - 1),
+            disabled: S.page >= X - 1,
+            iconOnly: !0,
+            children: /* @__PURE__ */ e(er, {})
+          }
+        )
+      ] })
+    ] })
+  ] });
+}, ge = ({ item: r, isSelectedHandler: n, onClick: a }) => {
+  var f;
+  const [t, s] = q(!1), o = r.children && r.children.length > 0, g = () => {
+    o && s(!t);
+  }, x = n ? n(r.path) : !1;
+  return /* @__PURE__ */ c("li", { children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: p(
+          "flex flex-row w-full py-1 rounded-lg items-center h-8 transition-colors cursor-pointer px-3 pr-1 no-underline text-sm",
+          {
+            "active-nav-item": x,
+            "shadow-lvl-0": x,
+            "font-semibold": x || o || r.children !== void 0
+          }
+        ),
+        onClick: () => {
+          o ? g() : r.path && (a == null || a(r.path));
+        },
+        children: [
+          r.icon && /* @__PURE__ */ e("span", { className: "mr-2", children: r.icon }),
+          /* @__PURE__ */ e("span", { className: "flex-1", children: r.label }),
+          r.count !== void 0 && r.count > 0 && /* @__PURE__ */ e("span", { className: "ml-2 mr-1.5", children: r.count }),
+          o && /* @__PURE__ */ e("span", { className: `${t ? "collapsed" : ""}`, children: /* @__PURE__ */ e(Ce, { className: "w-4 h-4 text-gray-300" }) })
+        ]
+      }
+    ),
+    o && !t && /* @__PURE__ */ e("ul", { className: "sidebar-menu-nested-items", children: (f = r.children) == null ? void 0 : f.map((i, w) => /* @__PURE__ */ e(
+      ge,
+      {
+        item: i,
+        isSelectedHandler: n,
+        onClick: a
+      },
+      w
+    )) })
+  ] });
+}, Lr = ({
+  title: r,
+  actionIcons: n,
+  items: a,
+  isSelectedHandler: t,
+  onClick: s
+}) => /* @__PURE__ */ c("div", { className: "flex flex-col h-screen mb-6", children: [
+  /* @__PURE__ */ c("div", { className: "sidebar-menu-header", children: [
+    /* @__PURE__ */ e("span", { className: "text-xl font-semibold text-gray-800 mb-2", children: r }),
+    /* @__PURE__ */ e("div", { className: "sidebar-menu-actions", children: n == null ? void 0 : n.map((o, g) => /* @__PURE__ */ e("span", { className: "sidebar-menu-action-icon", children: o }, g)) })
+  ] }),
+  /* @__PURE__ */ e("ul", { children: a.map(
+    (o, g) => !o.path && !o.label && !o.children ? /* @__PURE__ */ e("span", { className: "flex w-full h-4" }, g) : /* @__PURE__ */ e(
+      ge,
+      {
+        item: o,
+        isSelectedHandler: t,
+        onClick: s
+      },
+      g
+    )
+  ) })
+] }), tr = Ne(null), Dr = ({
+  items: r,
+  activeTab: n,
+  onTabChange: a,
+  className: t
+}) => {
+  var f;
+  const [s, o] = q(((f = r[0]) == null ? void 0 : f.id) || ""), g = n || s, x = (i) => {
+    a ? a(i) : o(i);
+  };
+  return /* @__PURE__ */ e("div", { className: p("border-b border-neutral-200 dark:border-neutral-700", t), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: r.map((i) => /* @__PURE__ */ e(
+    "button",
+    {
+      onClick: () => !i.disabled && x(i.id),
+      disabled: i.disabled,
+      className: p(
+        "border-b-2 py-2 px-1 text-sm font-medium transition-colors duration-200",
+        {
+          "border-primary text-primary": g === i.id,
+          "border-transparent text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300": g !== i.id && !i.disabled,
+          "border-transparent text-neutral-300 cursor-not-allowed dark:text-neutral-600": i.disabled
+        }
+      ),
+      children: /* @__PURE__ */ c("span", { className: "flex items-center gap-2", children: [
+        i.label,
+        i.badge && /* @__PURE__ */ e("span", { className: p(
+          "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium",
+          g === i.id ? "bg-primary/10 text-primary" : "bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400"
+        ), children: i.badge })
+      ] })
+    },
+    i.id
+  )) }) });
+}, Er = ({
+  items: r,
+  defaultTab: n,
+  activeTab: a,
+  onTabChange: t,
+  variant: s = "default",
+  size: o = "md",
+  className: g
+}) => {
+  var C;
+  const [x, f] = q(
+    n || a || ((C = r[0]) == null ? void 0 : C.id) || ""
+  ), i = a || x, w = (M) => {
+    t ? t(M) : f(M);
+  }, d = {
+    activeTab: i,
+    setActiveTab: w
+  }, u = r.find((M) => M.id === i), k = p(
+    "flex",
+    {
+      "border-b border-neutral-200 dark:border-neutral-700": s === "default" || s === "underline",
+      "bg-neutral-100 dark:bg-neutral-800 p-1 rounded-lg": s === "pills",
+      "space-x-1": s === "pills",
+      "space-x-8": s === "default" || s === "underline"
+    },
+    g
+  ), b = (M, V) => {
+    const $ = "transition-colors duration-200 font-medium", J = {
+      "text-xs px-2 py-1": o === "sm",
+      "text-sm px-3 py-2": o === "md",
+      "text-base px-4 py-3": o === "lg"
+    }, H = {
+      // Default variant
+      "border-b-2 -mb-px": s === "default",
+      // Pills variant
+      "rounded-md": s === "pills",
+      // Underline variant
+      "border-b-2 pb-2": s === "underline"
+    }, z = {
+      "opacity-50 cursor-not-allowed": M.disabled,
+      "cursor-pointer": !M.disabled
+    }, I = V ? {
+      "border-primary text-primary": s === "default" || s === "underline",
+      "bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 shadow-sm": s === "pills"
+    } : {}, P = !V && !M.disabled ? {
+      "border-transparent text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100": s === "default",
+      "text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100": s === "pills",
+      "border-transparent text-neutral-600 hover:text-neutral-900 hover:border-neutral-300 dark:text-neutral-400 dark:hover:text-neutral-100": s === "underline"
+    } : {};
+    return p($, J, H, z, I, P);
+  };
+  return /* @__PURE__ */ e(tr.Provider, { value: d, children: /* @__PURE__ */ c("div", { children: [
+    /* @__PURE__ */ e("div", { className: k, role: "tablist", children: r.map((M) => /* @__PURE__ */ e(
+      "button",
+      {
+        role: "tab",
+        "aria-selected": i === M.id,
+        "aria-controls": `tabpanel-${M.id}`,
+        disabled: M.disabled,
+        onClick: () => !M.disabled && w(M.id),
+        className: b(M, i === M.id),
+        children: /* @__PURE__ */ c("span", { className: "flex items-center gap-2", children: [
+          M.label,
+          M.badge && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300", children: M.badge })
+        ] })
+      },
+      M.id
+    )) }),
+    (u == null ? void 0 : u.content) && /* @__PURE__ */ e(
+      "div",
+      {
+        role: "tabpanel",
+        id: `tabpanel-${i}`,
+        "aria-labelledby": `tab-${i}`,
+        className: "mt-4",
+        children: u.content
+      }
+    )
+  ] }) });
+}, Ar = ({
+  level: r = 1,
+  size: n,
+  weight: a = "bold",
+  color: t = "current",
+  align: s = "left",
+  truncate: o = !1,
+  className: g,
+  children: x,
+  ...f
+}) => {
+  const i = n || ar(r), w = p(
+    "font-primary",
+    // Size variants
+    {
+      "text-xs": i === "xs",
+      "text-sm": i === "sm",
+      "text-base": i === "md",
+      "text-lg": i === "lg",
+      "text-xl": i === "xl",
+      "text-2xl": i === "2xl",
+      "text-3xl": i === "3xl",
+      "text-4xl": i === "4xl"
+    },
+    // Weight variants
+    {
+      "font-light": a === "light",
+      "font-normal": a === "normal",
+      "font-medium": a === "medium",
+      "font-semibold": a === "semibold",
+      "font-bold": a === "bold"
+    },
+    // Color variants
+    {
+      "text-primary": t === "primary",
+      "text-secondary": t === "secondary",
+      "text-accent": t === "accent",
+      "text-success": t === "success",
+      "text-warning": t === "warning",
+      "text-error": t === "error",
+      "text-info": t === "info",
+      "text-neutral": t === "neutral",
+      "text-current": t === "current"
+    },
+    // Alignment
+    {
+      "text-left": s === "left",
+      "text-center": s === "center",
+      "text-right": s === "right"
+    },
+    // Truncation
+    {
+      truncate: o
+    },
+    g
+  ), d = `h${r}`;
+  return /* @__PURE__ */ e(d, { className: w, ...f, children: x });
+};
+function ar(r) {
+  return {
+    1: "4xl",
+    2: "3xl",
+    3: "2xl",
+    4: "xl",
+    5: "lg",
+    6: "md"
+  }[r] || "md";
+}
+const $r = ({
+  items: r,
+  type: n = "unordered",
+  variant: a = "default",
+  size: t = "md",
+  interactive: s = !1,
+  className: o,
+  itemClassName: g
+}) => {
+  const x = p(
+    // Base styles
+    "space-y-1",
+    // Variant styles
+    {
+      // Default - basic spacing
+      "": a === "default",
+      // Flush - no padding
+      "space-y-0": a === "flush",
+      // Bordered - border around entire list
+      "border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden": a === "bordered",
+      // Divided - borders between items
+      "divide-y divide-neutral-200 dark:divide-neutral-700": a === "divided"
+    },
+    // Size variants
+    {
+      "text-sm": t === "sm",
+      "text-base": t === "md",
+      "text-lg": t === "lg"
+    },
+    o
+  ), f = (d, u) => p(
+    // Base item styles
+    "transition-colors duration-200",
+    // Size-based padding
+    {
+      "py-1 px-2": t === "sm" && (a === "bordered" || a === "divided"),
+      "py-2 px-3": t === "md" && (a === "bordered" || a === "divided"),
+      "py-3 px-4": t === "lg" && (a === "bordered" || a === "divided")
+    },
+    // Interactive styles
+    s && !d.disabled && {
+      "cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-800": !0,
+      "focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-700": !0
+    },
+    // Disabled styles
+    d.disabled && {
+      "opacity-50 cursor-not-allowed": !0
+    },
+    g
+  ), i = (d) => {
+    s && !d.disabled && d.onClick && d.onClick();
+  }, w = (d, u) => {
+    var k;
+    s && !u.disabled && (d.key === "Enter" || d.key === " ") && (d.preventDefault(), (k = u.onClick) == null || k.call(u));
+  };
+  return n === "ordered" ? /* @__PURE__ */ e("ol", { className: x, children: r.map((d, u) => /* @__PURE__ */ e(
+    "li",
+    {
+      className: f(d),
+      onClick: () => i(d),
+      onKeyDown: (k) => w(k, d),
+      tabIndex: s && !d.disabled ? 0 : void 0,
+      role: s ? "button" : void 0,
+      children: d.content
+    },
+    d.id || u
+  )) }) : n === "description" ? /* @__PURE__ */ e("dl", { className: x, children: r.map((d, u) => /* @__PURE__ */ e(
+    "div",
+    {
+      className: f(d),
+      onClick: () => i(d),
+      onKeyDown: (k) => w(k, d),
+      tabIndex: s && !d.disabled ? 0 : void 0,
+      role: s ? "button" : void 0,
+      children: d.content
+    },
+    d.id || u
+  )) }) : /* @__PURE__ */ e("ul", { className: x, children: r.map((d, u) => /* @__PURE__ */ e(
+    "li",
+    {
+      className: f(d),
+      onClick: () => i(d),
+      onKeyDown: (k) => w(k, d),
+      tabIndex: s && !d.disabled ? 0 : void 0,
+      role: s ? "button" : void 0,
+      children: d.content
+    },
+    d.id || u
+  )) });
+}, jr = ({
+  commands: r,
+  isOpen: n,
+  onClose: a,
+  labels: t
+}) => {
+  var k;
+  const [s, o] = q(""), [g, x] = q([]), [f, i] = q(0), w = re(null), u = (g.length ? ((k = r.find((b) => b.id === g[0])) == null ? void 0 : k.subCommands) || [] : r).filter(
+    (b) => b.label.toLowerCase().includes(s.toLowerCase())
+  );
+  return K(() => {
+    n || (o(""), x([]), i(0));
+  }, [n]), K(() => {
+    const b = (C) => {
+      if (n) {
+        if (C.key === "Escape")
+          a();
+        else if (C.key === "ArrowUp")
+          i(
+            (M) => M > 0 ? M - 1 : u.length - 1
+          );
+        else if (C.key === "ArrowDown")
+          i(
+            (M) => M < u.length - 1 ? M + 1 : 0
+          );
+        else if (C.key === "Enter") {
+          const M = u[f];
+          M && (M.subCommands ? (x([...g, M.id]), i(0)) : M.action && (M.action(), a()));
+        }
+      }
+    };
+    return document.addEventListener("keydown", b), () => document.removeEventListener("keydown", b);
+  }, [n, a, u, f, g]), K(() => {
+    const b = (C) => {
+      w.current && !w.current.contains(C.target) && a();
+    };
+    return n && document.addEventListener("mousedown", b), () => document.removeEventListener("mousedown", b);
+  }, [n, a]), n ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-50 flex items-center justify-center shadow-lvl-0", children: /* @__PURE__ */ c(
+    "div",
+    {
+      className: "flex flex-col w-full max-w-lg p-2 mx-auto rounded-lg shadow-lg bg-white",
+      ref: w,
+      children: [
+        /* @__PURE__ */ e(
+          "input",
+          {
+            type: "text",
+            placeholder: (t == null ? void 0 : t.searchPlaceholder) || "Search commands...",
+            value: s,
+            onChange: (b) => o(b.target.value),
+            className: "w-full px-4 py-2 text-gray-800 border-none border-b border-gray-200 focus:outline-none focus:ring-0 rounded-lg bg-transparent"
+          }
+        ),
+        /* @__PURE__ */ c("div", { className: "mt-2 pt-2 text-sm border-t border-gray-200", children: [
+          u.length === 0 && /* @__PURE__ */ e("div", { className: "text-gray-500 text-center text-sm", children: (t == null ? void 0 : t.noCommandsFound) || "No commands found" }),
+          u.map((b, C) => /* @__PURE__ */ c(
+            "div",
+            {
+              className: `flex items-center p-2 cursor-pointer rounded-md text-secondary-800 ${C === f ? "bg-gray-100" : ""}`,
+              onClick: () => {
+                b.subCommands ? (x([...g, b.id]), i(0)) : b.action && (b.action(), a());
+              },
+              onMouseEnter: () => i(C),
+              children: [
+                b.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: b.icon }),
+                /* @__PURE__ */ e("span", { className: "flex-grow", children: b.label }),
+                b.subCommands && /* @__PURE__ */ e("span", { className: "text-gray-400", children: /* @__PURE__ */ e(Se, { className: "w-4 h-4" }) })
+              ]
+            },
+            b.id
+          ))
+        ] }),
+        /* @__PURE__ */ c("div", { className: "flex items-center justify-between pt-2 mt-2 text-xs text-gray-500 border-t border-gray-200", children: [
+          /* @__PURE__ */ c("span", { children: [
+            /* @__PURE__ */ e("span", { className: "font-bold", children: "↑↓" }),
+            " ",
+            (t == null ? void 0 : t.navigate) || "to navigate"
+          ] }),
+          /* @__PURE__ */ c("span", { children: [
+            /* @__PURE__ */ e("span", { className: "font-bold", children: "↵" }),
+            " ",
+            (t == null ? void 0 : t.select) || "to select"
+          ] }),
+          /* @__PURE__ */ c("span", { children: [
+            /* @__PURE__ */ e("span", { className: "font-bold", children: "Esc" }),
+            " ",
+            (t == null ? void 0 : t.close) || "to close"
+          ] })
+        ] })
+      ]
+    }
+  ) }) : null;
+}, nr = {
+  none: "p-0",
+  xs: "p-1",
+  sm: "p-2",
+  md: "p-4",
+  lg: "p-6",
+  xl: "p-8",
+  "2xl": "p-12"
+}, sr = {
+  none: "m-0",
+  xs: "m-1",
+  sm: "m-2",
+  md: "m-4",
+  lg: "m-6",
+  xl: "m-8",
+  "2xl": "m-12"
+}, lr = {
+  none: "",
+  primary: "bg-primary",
+  secondary: "bg-secondary",
+  accent: "bg-accent",
+  success: "bg-success",
+  warning: "bg-warning",
+  error: "bg-error",
+  info: "bg-info",
+  neutral: "bg-neutral",
+  white: "bg-white",
+  module: "bg-module"
+}, dr = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  full: "rounded-full"
+}, cr = {
+  none: "shadow-none",
+  sm: "shadow-sm shadow-lvl-0",
+  md: "shadow-md shadow-lvl-0",
+  lg: "shadow-lg shadow-lvl-0",
+  xl: "shadow-xl shadow-lvl-0",
+  "2xl": "shadow-2xl shadow-lvl-0"
+}, or = {
+  none: "border-0",
+  sm: "border",
+  md: "border-2",
+  lg: "border-4"
+}, ir = {
+  primary: "border-primary",
+  secondary: "border-secondary",
+  accent: "border-accent",
+  success: "border-success",
+  warning: "border-warning",
+  error: "border-error",
+  info: "border-info",
+  neutral: "border-neutral",
+  white: "border-white"
+}, be = de(
+  ({
+    padding: r,
+    margin: n,
+    background: a,
+    radius: t,
+    shadow: s,
+    border: o,
+    borderColor: g,
+    className: x,
+    children: f,
+    ...i
+  }, w) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: w,
+      className: p(
+        r && nr[r],
+        n && sr[n],
+        a && lr[a],
+        t && dr[t],
+        s && cr[s],
+        o && or[o],
+        g && ir[g],
+        x
+      ),
+      ...i,
+      children: f
+    }
+  )
+);
+be.displayName = "Box";
+const Tr = ({ children: r, title: n, ...a }) => /* @__PURE__ */ c(be, { background: "module", radius: "xl", shadow: "sm", ...a, children: [
+  n && /* @__PURE__ */ e("span", { className: "text-base font-medium text-gray-800 mb-2", children: n }),
+  r
+] });
+export {
+  kr as Badge,
+  be as Box,
+  te as Button,
+  gr as ButtonGroup,
+  Tr as Card,
+  me as Checkbox,
+  jr as CommandPalette,
+  Oe as ContentLoading,
+  he as DatePicker,
+  ze as Dropdown,
+  yr as Form,
+  Ar as Heading,
+  wr as Icon,
+  Cr as Image,
+  br as Link,
+  $r as List,
+  vr as Modal,
+  Sr as PageHeader,
+  xe as Select,
+  Lr as SidebarMenu,
+  Nr as Spinner,
+  Dr as TabBar,
+  Mr as Table,
+  Er as Tabs,
+  le as Text,
+  fe as TextArea,
+  oe as TextField,
+  p as cn,
+  pr as createSizes,
+  fr as createVariants
+};
+//# sourceMappingURL=index.js.map