@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/libs/framer-motion/fade-in-bottom.mjs

@@ -0,0 +1,17 @@
+function o(t = "spring", n = 0.5, i = 60) {
+  return {
+    enter: {
+      y: 0,
+      opacity: 1,
+      transition: { type: t, duration: n }
+    },
+    exit: {
+      y: i,
+      opacity: 0,
+      transition: { type: t, duration: n }
+    }
+  };
+}
+export {
+  o as fadeInBottom
+};

package/libs/local-storage/index.mjs

@@ -0,0 +1,36 @@
+const t = () => typeof window < "u", l = {
+  get: (e) => {
+    if (t())
+      try {
+        const r = localStorage.getItem(e);
+        if (r !== null)
+          return r !== void 0 ? JSON?.parse(r || "") : void 0;
+      } catch {
+        console.error("localStorage get item cannot be retrieved");
+      }
+  },
+  set: (e, r) => {
+    if (t()) {
+      const o = JSON.stringify(r);
+      try {
+        localStorage.setItem(e, o);
+      } catch (a) {
+        console.error(
+          `localStorage set item cannot be added
+          item: ${e} 
+          value: ${o}`
+        ), console.error(a);
+      }
+    }
+  },
+  remove: (e) => {
+    t() && localStorage.removeItem(e);
+  },
+  clear: () => {
+    t() && localStorage.clear();
+  }
+};
+export {
+  t as isClient,
+  l as storage
+};

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@e-burgos/tucu-ui",
   "description": "Tucu UI Library",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "main": "./index.js",
   "module": "./index.mjs",
   "types": "./index.d.ts",
-  "style": "./index.css",
+  "publishConfig": {
+    "types": "../../dist/ui/tucu-ui/index.d.ts"
+  },
   "author": "Esteban Burgos",
   "license": "MIT",
   "repository": {
@@ -27,7 +29,6 @@
   "exports": {
     ".": {
       "types": "./index.d.ts",
-      "style": "./index.css",
       "import": "./index.mjs",
       "require": "./index.js"
     },
@@ -36,7 +37,9 @@
   "files": [
     "**/*"
   ],
-  "sideEffects": true,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "scripts": {
     "generate-props": "tsx ../../scripts/generate-props.ts",
     "publish:lib": "cd ../../dist/ui/tucu-ui && pnpm npm publish --access public --no-git-checks",
@@ -44,24 +47,29 @@
     "pack:lib": "cd ../../ui/tucu-ui && pnpm npm pack"
   },
   "dependencies": {
-    "@e-burgos/tucu-ui-mcp": "^0.5.1",
-    "@tailwindcss/typography": "0.0.0-insiders.0339c42",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tanstack/react-table": "^8.21.3",
     "classnames": "^2.5.1",
-    "framer-motion": "12.23.3",
-    "lucide-react": "^0.460.0",
-    "react-hook-form": "7.60.0",
-    "react-router-dom": "7.9.1",
-    "react-router": "7.9.1",
+    "framer-motion": "^12.40.0",
+    "lodash-es": "^4.17.21",
+    "lucide-react": "^1.17.0",
+    "react-hook-form": "^7.77.0",
+    "react-router-dom": "^7.16.0",
+    "prismjs": "^1.30.0",
     "react-use": "^17.6.0",
-    "recharts": "3.8.1",
-    "swiper": "11.2.8",
-    "zustand": "^5.0.8"
+    "recharts": "^3.8.1",
+    "swiper": "^12.2.0",
+    "zustand": "^5.0.14"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.1.18",
-    "tailwindcss": "^4.1.18",
-    "prismjs": "^1.30.0",
-    "@types/prismjs": "^1.26.5"
+    "@tailwindcss/vite": "^4.3.0",
+    "tailwindcss": "^4.3.0",
+    "@types/prismjs": "^1.26.6",
+    "@types/lodash-es": "^4.17.12"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/themes/auth/components/auth-provider.mjs

@@ -0,0 +1,12 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Suspense as a } from "react";
+import { AccessDeniedPage as i } from "../../pages/access-denied.mjs";
+import { FallbackPage as n } from "../../pages/fallback-page.mjs";
+const c = ({
+  children: r,
+  isAuthenticated: e,
+  loginUrl: t
+}) => e ? /* @__PURE__ */ o(a, { fallback: /* @__PURE__ */ o(n, { loadingText: "Loading..." }), children: r }) : /* @__PURE__ */ o(i, { basePath: t, buttonText: "Login" });
+export {
+  c as AuthProvider
+};

package/themes/components/settings/background-picker.mjs

@@ -0,0 +1,67 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { useTheme as l } from "../../hooks/use-theme.mjs";
+import o from "classnames";
+import { Ban as d, Circle as c, Square as s, Waves as m, Image as p, Smartphone as b, Monitor as g, Sparkles as u, Layers as h, Palette as k } from "lucide-react";
+import { SettingsSectionHeading as x } from "./settings-section-heading.mjs";
+import { Sun as f } from "../../../components/icons/sun.mjs";
+const w = [
+  { id: "none", label: "None", Icon: d },
+  { id: "base", label: "Base", Icon: c },
+  { id: "sonoma", label: "Sonoma", Icon: s },
+  { id: "radial", label: "Radial", Icon: f },
+  { id: "wave", label: "Wave", Icon: m },
+  { id: "wallpaper", label: "Wallpaper", Icon: p },
+  { id: "mobile", label: "Mobile", Icon: b },
+  { id: "window", label: "Window", Icon: g },
+  { id: "aurora", label: "Aurora", Icon: u },
+  { id: "depth", label: "Depth", Icon: h },
+  { id: "demo", label: "Demo", Icon: k }
+];
+function A() {
+  const { backgroundVariant: n, setBackgroundVariant: i } = l();
+  return /* @__PURE__ */ t("div", { className: "px-6 pt-8", children: [
+    /* @__PURE__ */ a(x, { children: "Background" }),
+    /* @__PURE__ */ a("div", { className: "grid grid-cols-4 gap-3", children: w.map((e) => {
+      const r = n === e.id;
+      return /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          "aria-label": `${e.label} background`,
+          onClick: () => i(e.id),
+          className: o(
+            "group flex flex-col items-center gap-1.5 rounded-xl p-2 transition-all cursor-pointer",
+            r ? "bg-black/8 ring-1 ring-black/15 dark:bg-white/10 dark:ring-white/20" : "text-gray-900 dark:text-white hover:bg-black/5 dark:hover:bg-white/5"
+          ),
+          children: [
+            /* @__PURE__ */ a(
+              "span",
+              {
+                className: o(
+                  "flex h-7 w-7 items-center bg-brand/30 justify-center rounded-full border-2 transition-transform",
+                  r ? "border-gray-900 dark:border-white scale-110 shadow-lg" : "border-transparent group-hover:scale-105"
+                ),
+                children: /* @__PURE__ */ a(e.Icon, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ a(
+              "span",
+              {
+                className: o(
+                  "text-[10px] font-medium transition-colors",
+                  r ? "text-gray-900 dark:text-white" : "text-gray-500 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+                ),
+                children: e.label
+              }
+            )
+          ]
+        },
+        e.id
+      );
+    }) })
+  ] });
+}
+export {
+  A as BackgroundPicker,
+  A as default
+};

package/themes/components/settings/color-dot.mjs

@@ -0,0 +1,41 @@
+import { jsxs as a, Fragment as d, jsx as r } from "react/jsx-runtime";
+import { useState as i } from "react";
+import { useTheme as m } from "../../hooks/use-theme.mjs";
+import { COLOR_CONFIG as u } from "./settings-types.mjs";
+import { ColorSwatchModal as g } from "./color-swatch-modal.mjs";
+function k({ type: e }) {
+  const [l, o] = i(!1), { presetKey: s, label: t } = u[e], n = m((c) => c[s]), p = t.replace(" Color", "").replace("Dark ", "").replace("Light ", "");
+  return /* @__PURE__ */ a(d, { children: [
+    /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        onClick: () => o(!0),
+        className: "group flex flex-col items-center gap-1.5 cursor-pointer",
+        title: t,
+        children: [
+          /* @__PURE__ */ r(
+            "span",
+            {
+              style: { backgroundColor: n?.value },
+              className: "h-9 w-9 rounded-full border border-border/40 dark:border-border/40 transition-all group-hover:scale-110 group-hover:border-gray-400 dark:group-hover:border-gray-400 shadow-sm"
+            }
+          ),
+          /* @__PURE__ */ r("span", { className: "text-[9px] font-medium text-gray-500 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white transition-colors text-center leading-tight max-w-[56px]", children: p })
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(
+      g,
+      {
+        type: e,
+        isOpen: l,
+        onClose: () => o(!1)
+      }
+    )
+  ] });
+}
+export {
+  k as ColorDot,
+  k as default
+};

package/themes/components/settings/color-swatch-modal.mjs

@@ -0,0 +1,178 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { useState as x, useEffect as z } from "react";
+import { useTheme as i } from "../../hooks/use-theme.mjs";
+import { colorPreset as I } from "../../config/index.mjs";
+import { Close as V } from "../../../components/icons/close.mjs";
+import { Input as K } from "../../../components/inputs/input.mjs";
+import { Button as L } from "../../../components/buttons/button/index.mjs";
+import u from "classnames";
+import { COLOR_CONFIG as P } from "./settings-types.mjs";
+import { Moon as R } from "../../../components/icons/moon.mjs";
+import { Sun as $ } from "../../../components/icons/sun.mjs";
+function J({
+  type: y,
+  isOpen: f,
+  onClose: b
+}) {
+  const [s, p] = x(""), [n, c] = x(100), { presetKey: v, setterKey: k, defaultValue: N, label: w } = P[y], o = i((e) => e[v]), l = i((e) => e[k]), g = i((e) => e.mode), h = i((e) => e.setMode);
+  z(() => {
+    const e = o?.value || "";
+    if (e.length === 9 && e.startsWith("#")) {
+      const t = parseInt(e.slice(7, 9), 16);
+      c(Math.round(t / 255 * 100));
+    } else
+      c(100);
+  }, [o?.value]);
+  const m = (e, t) => {
+    const d = e.slice(0, 7);
+    if (t >= 100) return d;
+    const O = Math.round(t / 100 * 255).toString(16).padStart(2, "0");
+    return `${d}${O}`;
+  }, C = (e) => {
+    const t = m(e.value, n);
+    l({ label: e.label, value: t });
+  }, j = (e) => {
+    const t = m(e, n);
+    p(t), l({ label: "Custom", value: t });
+  }, S = (e) => {
+    c(e);
+    const t = (o?.value || "#000000").slice(0, 7), d = m(t, e);
+    l({ label: o?.label || "Custom", value: d });
+  }, M = () => {
+    l(s ? { label: "Custom", value: s } : N);
+  };
+  return f ? /* @__PURE__ */ a("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center p-4", children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/40 backdrop-blur-sm",
+        onClick: b
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: "relative w-full max-w-xs rounded-2xl bg-white dark:bg-gray-800 shadow-2xl border border-border overflow-hidden animate-in fade-in zoom-in-95 duration-200", children: [
+      /* @__PURE__ */ a("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border dark:border-border", children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ r(
+            "span",
+            {
+              style: { backgroundColor: o?.value },
+              className: "h-5 w-5 rounded-full border border-border"
+            }
+          ),
+          /* @__PURE__ */ r("span", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: w })
+        ] }),
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: b,
+            className: "flex h-6 w-6 items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+            children: /* @__PURE__ */ r(V, { className: "h-3 w-3", width: 12, height: 12 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r("div", { className: "px-4 py-2 border-b border-border dark:border-border", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-1 rounded-lg bg-gray-100 dark:bg-gray-700 p-0.5", children: [
+        /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            onClick: () => h("light"),
+            className: u(
+              "flex-1 flex items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all",
+              g === "light" ? "bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm" : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+            ),
+            children: [
+              /* @__PURE__ */ r($, { className: "h-3 w-3" }),
+              "Light"
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            onClick: () => h("dark"),
+            className: u(
+              "flex-1 flex items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all",
+              g === "dark" ? "bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm" : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+            ),
+            children: [
+              /* @__PURE__ */ r(R, { className: "h-3 w-3" }),
+              "Dark"
+            ]
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ a("div", { className: "px-4 py-3", children: [
+        /* @__PURE__ */ r("span", { className: "text-[10px] font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400", children: "Presets" }),
+        /* @__PURE__ */ r("div", { className: "grid grid-cols-7 gap-2 mt-2", children: I.map((e) => {
+          const t = o?.value === e.value;
+          return /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              title: e.label,
+              onClick: () => C(e),
+              className: u(
+                "h-7 w-7 rounded-full border-2 transition-all cursor-pointer hover:scale-110",
+                t ? "border-gray-900 dark:border-white scale-110 shadow-lg" : "border-transparent hover:border-border dark:hover:border-gray-500"
+              ),
+              style: { backgroundColor: e.value }
+            },
+            e.label
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "px-4 py-3 border-t border-border dark:border-border", children: [
+        /* @__PURE__ */ r("span", { className: "text-[10px] font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400", children: "Custom Color" }),
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mt-2", children: [
+          /* @__PURE__ */ r(
+            "input",
+            {
+              type: "color",
+              value: (o?.value || "#000000").slice(0, 7),
+              onChange: (e) => j(e.target.value),
+              className: "h-9 w-9 cursor-pointer rounded-lg border border-border p-0.5 bg-transparent"
+            }
+          ),
+          /* @__PURE__ */ r(
+            K,
+            {
+              placeholder: "#hex",
+              type: "text",
+              value: s,
+              onChange: (e) => p(e.target.value),
+              className: "flex-1"
+            }
+          ),
+          /* @__PURE__ */ r(L, { size: "mini", variant: "ghost", onClick: M, children: s ? "Set" : "Reset" })
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "px-4 py-3 border-t border-border dark:border-border", children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ r("span", { className: "text-[10px] font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400", children: "Opacity" }),
+          /* @__PURE__ */ a("span", { className: "text-[11px] font-medium text-gray-700 dark:text-gray-300", children: [
+            n,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: 100,
+            value: n,
+            onChange: (e) => S(Number(e.target.value)),
+            className: "mt-2 w-full h-1.5 rounded-full appearance-none cursor-pointer bg-gray-200 dark:bg-gray-600 accent-current",
+            style: { accentColor: (o?.value || "#000000").slice(0, 7) }
+          }
+        )
+      ] })
+    ] })
+  ] }) : null;
+}
+export {
+  J as ColorSwatchModal,
+  J as default
+};

package/themes/components/settings/default-color-settings.mjs

@@ -0,0 +1,19 @@
+import { jsx as e, Fragment as m, jsxs as l } from "react/jsx-runtime";
+import { useTheme as n } from "../../hooks/use-theme.mjs";
+import { COLOR_GROUPS as s } from "./settings-types.mjs";
+import { SettingsSectionHeading as d } from "./settings-section-heading.mjs";
+import { ColorDot as a } from "./color-dot.mjs";
+function u() {
+  const i = n((t) => t.mode);
+  return /* @__PURE__ */ e(m, { children: s.map((t) => /* @__PURE__ */ l("div", { className: "px-6 pt-6", children: [
+    /* @__PURE__ */ e(d, { children: t.title }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-4 gap-3", children: t.items.map((r) => {
+      const o = i === "dark" ? r.dark : r.light;
+      return /* @__PURE__ */ e(a, { type: o }, r.light);
+    }) })
+  ] }, t.title)) });
+}
+export {
+  u as DefaultColorSettings,
+  u as default
+};

package/themes/components/settings/direction-switcher.mjs

@@ -0,0 +1,36 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import { useTheme as c } from "../../hooks/use-theme.mjs";
+import { SettingsSectionHeading as n } from "./settings-section-heading.mjs";
+import { SwitcherButton as o } from "./switcher-button.mjs";
+import { LeftAlign as l } from "../../../components/icons/left-align.mjs";
+import { RightAlign as d } from "../../../components/icons/right-align.mjs";
+function g() {
+  const { direction: r, setDirection: t } = c();
+  return /* @__PURE__ */ e("div", { className: "px-6 pt-8", children: [
+    /* @__PURE__ */ i(n, { children: "Direction" }),
+    /* @__PURE__ */ e("div", { role: "radiogroup", className: "grid grid-cols-2 gap-5", children: [
+      /* @__PURE__ */ i(
+        o,
+        {
+          onClick: () => t("ltr"),
+          title: "LTR",
+          checked: r === "ltr",
+          children: /* @__PURE__ */ i(l, {})
+        }
+      ),
+      /* @__PURE__ */ i(
+        o,
+        {
+          onClick: () => t("rtl"),
+          title: "RTL",
+          checked: r === "rtl",
+          children: /* @__PURE__ */ i(d, {})
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  g as DirectionSwitcher,
+  g as default
+};

package/themes/components/settings/lang-selector.mjs

@@ -0,0 +1,43 @@
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import { Select as r } from "../../../components/inputs/select.mjs";
+import { useTheme as u } from "../../hooks/use-theme.mjs";
+import { langOptions as a } from "../../config/index.mjs";
+import i from "classnames";
+const v = ({
+  className: t,
+  children: m
+}) => {
+  const { lang: l, setLang: s } = u();
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: i(
+        "flex items-center justify-between w-full gap-1",
+        t
+      ),
+      children: [
+        /* @__PURE__ */ n("span", { className: "text-sm font-medium", children: "Language" }),
+        /* @__PURE__ */ n(
+          r,
+          {
+            buttonClassName: "h-[32px]! gap-1 rounded-full!",
+            options: a.map((e) => ({
+              name: e.label,
+              value: e.value
+            })),
+            selectedOption: {
+              name: a.find((e) => e.value === l)?.label || "",
+              value: a.find((e) => e.value === l)?.value || ""
+            },
+            onChange: (e) => s(e.value)
+          }
+        ),
+        m
+      ]
+    }
+  );
+};
+export {
+  v as LangSelector,
+  v as default
+};

package/themes/components/settings/layout-switcher.mjs

@@ -0,0 +1,117 @@
+import { jsx as e, jsxs as A } from "react/jsx-runtime";
+import { useTheme as S } from "../../hooks/use-theme.mjs";
+import { LAYOUT_OPTIONS as c, layoutOptions as h } from "../../config/index.mjs";
+import { SettingsSectionHeading as O } from "./settings-section-heading.mjs";
+import { SwitcherButton as o } from "./switcher-button.mjs";
+import { MacOSTahoeThemeIcon as m, MacOSThemeIcon as t } from "./theme-icons.mjs";
+import { MinimalLayoutIcon as a } from "../../../components/icons/minimal-layout-icon.mjs";
+/* empty css                   */
+import * as C from "lucide-react";
+import "react-router-dom";
+import "swiper/react";
+import "swiper/modules";
+import { ClassicLayoutIcon as s } from "../../../components/icons/classic-layout-icon.mjs";
+const d = {
+  [c.HORIZONTAL]: /* @__PURE__ */ e(a, {}),
+  [c.ADMIN]: /* @__PURE__ */ e(s, {}),
+  [c.CLEAN]: /* @__PURE__ */ e(C.Square, { className: "w-[34px] h-[34px]" }),
+  [c.MACOS]: /* @__PURE__ */ e(t, {}),
+  [c.MACOS_CLEAN]: /* @__PURE__ */ e(C.Square, {}),
+  [c.MACOS_NAVBAR]: /* @__PURE__ */ e(a, {}),
+  [c.MACOS_TAHOE]: /* @__PURE__ */ e(t, {}),
+  [c.MACOS_TAHOE_DOCK]: /* @__PURE__ */ e(m, {}),
+  [c.MACOS_TAHOE_CLEAN]: /* @__PURE__ */ e(C.Square, {}),
+  [c.MACOS_TAHOE_NAVBAR]: /* @__PURE__ */ e(a, {})
+};
+function v() {
+  const { layout: i, setLayout: r, colorScheme: n } = S();
+  return n === "macos" ? /* @__PURE__ */ A("div", { className: "px-6 pt-8", children: [
+    /* @__PURE__ */ e(O, { children: "Layout" }),
+    /* @__PURE__ */ A("div", { role: "radiogroup", className: "grid grid-cols-3 gap-5", children: [
+      /* @__PURE__ */ e(
+        o,
+        {
+          onClick: () => r(c.MACOS),
+          title: "Sidebar",
+          checked: i === c.MACOS,
+          children: /* @__PURE__ */ e(t, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        o,
+        {
+          onClick: () => r(c.MACOS_NAVBAR),
+          title: "Navbar",
+          checked: i === c.MACOS_NAVBAR,
+          children: /* @__PURE__ */ e(a, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        o,
+        {
+          onClick: () => r(c.MACOS_CLEAN),
+          title: "Clean",
+          checked: i === c.MACOS_CLEAN,
+          children: d[c.MACOS_CLEAN]
+        }
+      )
+    ] })
+  ] }) : n === "macos-tahoe" ? /* @__PURE__ */ A("div", { className: "px-6 pt-8", children: [
+    /* @__PURE__ */ e(O, { children: "Layout" }),
+    /* @__PURE__ */ A("div", { role: "radiogroup", className: "grid grid-cols-4 gap-5", children: [
+      /* @__PURE__ */ e(
+        o,
+        {
+          onClick: () => r(c.MACOS_TAHOE),
+          title: "Sidebar",
+          checked: i === c.MACOS_TAHOE,
+          children: /* @__PURE__ */ e(t, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        o,
+        {
+          onClick: () => r(c.MACOS_TAHOE_DOCK),
+          title: "Dock",
+          checked: i === c.MACOS_TAHOE_DOCK,
+          children: /* @__PURE__ */ e(m, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        o,
+        {
+          onClick: () => r(c.MACOS_TAHOE_NAVBAR),
+          title: "Navbar",
+          checked: i === c.MACOS_TAHOE_NAVBAR,
+          children: /* @__PURE__ */ e(a, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        o,
+        {
+          onClick: () => r(c.MACOS_TAHOE_CLEAN),
+          title: "Clean",
+          checked: i === c.MACOS_TAHOE_CLEAN,
+          children: d[c.MACOS_TAHOE_CLEAN]
+        }
+      )
+    ] })
+  ] }) : /* @__PURE__ */ A("div", { className: "px-6 pt-8", children: [
+    /* @__PURE__ */ e(O, { children: "Layout" }),
+    /* @__PURE__ */ e("div", { role: "radiogroup", className: "grid grid-cols-2 gap-5", children: h.map((l) => /* @__PURE__ */ e(
+      o,
+      {
+        onClick: () => r(l.value),
+        title: l.label,
+        checked: i === l.value,
+        children: d[l.value]
+      },
+      l.label
+    )) })
+  ] });
+}
+export {
+  d as LayoutIcons,
+  v as LayoutSwitcher,
+  v as default
+};

package/themes/components/settings/restore-defaults.mjs

@@ -0,0 +1,11 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useTheme as t } from "../../hooks/use-theme.mjs";
+import { Button as o } from "../../../components/buttons/button/index.mjs";
+function m() {
+  const { restoreDefaultColors: r } = t();
+  return /* @__PURE__ */ e("div", { className: "flex justify-center items-center p-4 absolute bg-white dark:bg-gray-800 bottom-0 left-0 right-0 border-t border-border", children: /* @__PURE__ */ e(o, { fullWidth: !0, size: "small", onClick: r, children: "Restore Theme" }) });
+}
+export {
+  m as RestoreDefaults,
+  m as default
+};