@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/themes/components/settings/settings-button.mjs

@@ -0,0 +1,126 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useDirection as I } from "../../hooks/use-direction.mjs";
+import { useThemeColor as L } from "../../hooks/use-theme-color.mjs";
+import { useTheme as B } from "../../hooks/use-theme.mjs";
+import { defaultDarkBorderPreset as N, defaultBorderPreset as j, defaultDarkFgPreset as A, defaultFgPreset as E, defaultDarkInfoPreset as F, defaultInfoPreset as R, defaultDarkErrorPreset as W, defaultErrorPreset as T, defaultDarkWarningPreset as z, defaultWarningPreset as O, defaultDarkSuccessPreset as q, defaultSuccessPreset as G, defaultDarkLightDarkPreset as H, defaultLightDarkPreset as J, defaultLightBgPreset as K, defaultDarkBgPreset as Q, defaultDarkMutedPreset as U, defaultMutedPreset as V, defaultDarkAccentPreset as X, defaultAccentPreset as Y, defaultDarkSecondaryPreset as _, defaultSecondaryPreset as $, defaultDarkPrimaryPreset as ee, defaultPrimaryPreset as re } from "../../config/index.mjs";
+function de() {
+  const { setIsSettingsOpen: M } = B(), {
+    primaryPreset: t,
+    darkPrimaryPreset: a,
+    secondaryPreset: l,
+    darkSecondaryPreset: s,
+    accentPreset: u,
+    darkAccentPreset: d,
+    mutedPreset: n,
+    darkMutedPreset: i,
+    darkBgPreset: P,
+    lightBgPreset: o,
+    lightDarkPreset: c,
+    darkLightDarkPreset: f,
+    successPreset: v,
+    darkSuccessPreset: g,
+    warningPreset: k,
+    darkWarningPreset: C,
+    errorPreset: p,
+    darkErrorPreset: h,
+    infoPreset: m,
+    darkInfoPreset: y,
+    fgPreset: x,
+    darkFgPreset: D,
+    borderPreset: w,
+    darkBorderPreset: S,
+    direction: b,
+    showSettings: Z
+  } = B();
+  return I(b || "ltr"), L({
+    primaryPreset: t ? t.value : re.value,
+    darkPrimaryPreset: a ? a.value : ee.value,
+    secondaryPreset: l ? l.value : $.value,
+    darkSecondaryPreset: s ? s.value : _.value,
+    accentPreset: u ? u.value : Y.value,
+    darkAccentPreset: d ? d.value : X.value,
+    mutedPreset: n ? n.value : V.value,
+    darkMutedPreset: i ? i.value : U.value,
+    darkBgPreset: P ? P.value : Q.value,
+    lightBgPreset: o ? o.value : K.value,
+    lightDarkPreset: c ? c.value : J.value,
+    darkLightDarkPreset: f ? f.value : H.value,
+    successPreset: v ? v.value : G.value,
+    darkSuccessPreset: g ? g.value : q.value,
+    warningPreset: k ? k.value : O.value,
+    darkWarningPreset: C ? C.value : z.value,
+    errorPreset: p ? p.value : T.value,
+    darkErrorPreset: h ? h.value : W.value,
+    infoPreset: m ? m.value : R.value,
+    darkInfoPreset: y ? y.value : F.value,
+    fgPreset: x ? x.value : E.value,
+    darkFgPreset: D ? D.value : A.value,
+    borderPreset: w ? w.value : j.value,
+    darkBorderPreset: S ? S.value : N.value
+  }), Z ? /* @__PURE__ */ e("div", { className: "fixed top-1/2 z-40 -translate-y-1/2 ltr:right-0 rtl:left-0", children: /* @__PURE__ */ r(
+    "button",
+    {
+      className: "flex h-[48px] w-[48px] items-center justify-center text-gray-600 shadow-large backdrop-blur-sm ltr:rounded-l-lg rtl:rounded-r-lg bg-light-dark dark:text-gray-200/70",
+      onClick: () => M(!0),
+      "aria-label": "Settings",
+      "aria-describedby": "Settings",
+      title: "Settings",
+      children: [
+        /* @__PURE__ */ r(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            children: [
+              /* @__PURE__ */ e(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  clipRule: "evenodd",
+                  d: "M6.5565 2.10053C3.94225 2.2122 2 3.88336 2 6.5C2 9.11665 3.94225 10.7878 6.5565 10.8995C7.9246 10.9579 9.7062 11 12 11C14.2938 11 16.0754 10.9579 17.4435 10.8995C20.0578 10.7878 22 9.11665 22 6.5C22 3.88336 20.0578 2.2122 17.4435 2.10053C16.0754 2.04209 14.2938 2 12 2C9.7062 2 7.9246 2.04209 6.5565 2.10053ZM20 6.5C20 7.88071 18.8807 9 17.5 9C16.1193 9 15 7.88071 15 6.5C15 5.11929 16.1193 4 17.5 4C18.8807 4 20 5.11929 20 6.5Z",
+                  fill: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "path",
+                {
+                  opacity: "0.4",
+                  fillRule: "evenodd",
+                  clipRule: "evenodd",
+                  d: "M17.4435 13.1005C20.0578 13.2122 22 14.8833 22 17.5C22 20.1167 20.0578 21.7878 17.4435 21.8995C16.0754 21.9579 14.2938 22 12 22C9.7062 22 7.9246 21.9579 6.5565 21.8995C3.94225 21.7878 2 20.1167 2 17.5C2 14.8833 3.94225 13.2122 6.5565 13.1005C7.9246 13.0421 9.7062 13 12 13C14.2938 13 16.0754 13.0421 17.4435 13.1005ZM4 17.5C4 18.8807 5.11929 20 6.5 20C7.88071 20 9 18.8807 9 17.5C9 16.1193 7.88071 15 6.5 15C5.11929 15 4 16.1193 4 17.5Z",
+                  fill: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "path",
+                {
+                  opacity: "0.4",
+                  d: "M17.5 9C18.8807 9 20 7.88071 20 6.5C20 5.11929 18.8807 4 17.5 4C16.1193 4 15 5.11929 15 6.5C15 7.88071 16.1193 9 17.5 9Z",
+                  fill: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "path",
+                {
+                  d: "M6.5 20C5.11929 20 4 18.8807 4 17.5C4 16.1193 5.11929 15 6.5 15C7.88071 15 9 16.1193 9 17.5C9 18.8807 7.88071 20 6.5 20Z",
+                  fill: "currentColor"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ r("span", { className: "absolute right-[4px] top-[4px] flex h-[12px] w-[12px] items-center justify-center", children: [
+          /* @__PURE__ */ e("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-80" }),
+          /* @__PURE__ */ e("span", { className: "relative inline-flex h-[8px] w-[8px] rounded-full bg-red-500" })
+        ] })
+      ]
+    }
+  ) }) : null;
+}
+export {
+  de as SettingsButton,
+  de as default
+};

package/themes/components/settings/settings-drawer.mjs

@@ -0,0 +1,81 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { LAYOUT_OPTIONS as i } from "../../config/index.mjs";
+import { ThemeSwitcher as p } from "./theme-switcher.mjs";
+import { ThemeVariantSwitcher as h } from "./theme-variant-switcher.mjs";
+import { DirectionSwitcher as d } from "./direction-switcher.mjs";
+import { LayoutSwitcher as f } from "./layout-switcher.mjs";
+import { DefaultColorSettings as b } from "./default-color-settings.mjs";
+import { BackgroundPicker as u } from "./background-picker.mjs";
+import { RestoreDefaults as x } from "./restore-defaults.mjs";
+import g from "classnames";
+import { useTheme as w } from "../../hooks/use-theme.mjs";
+import { DrawerContainer as S } from "../../../components/dialog/drawer-container.mjs";
+import { Drawer as O } from "../../../components/dialog/drawer.mjs";
+import { Close as k } from "../../../components/icons/close.mjs";
+import { Scrollbar as v } from "../../../components/common/scrollbar.mjs";
+function B() {
+  const { isSettingsOpen: s, setIsSettingsOpen: t, layout: r, colorScheme: a } = w(), n = a === "macos-tahoe" || r === i.MACOS_TAHOE || r === i.MACOS_TAHOE_DOCK, c = a === "macos" || r === i.MACOS, m = n || c, l = /* @__PURE__ */ o("div", { className: "h-full pb-18", children: [
+    /* @__PURE__ */ e(p, {}),
+    /* @__PURE__ */ e(h, {}),
+    /* @__PURE__ */ e(d, {}),
+    /* @__PURE__ */ e(f, {}),
+    /* @__PURE__ */ e(b, {}),
+    /* @__PURE__ */ e(u, {}),
+    /* @__PURE__ */ e(x, {})
+  ] });
+  return n ? /* @__PURE__ */ e(
+    S,
+    {
+      isOpen: s,
+      setIsOpen: t,
+      position: "right",
+      backdrop: !1,
+      backdropClassName: "backdrop-blur-[2px] bg-transparent",
+      children: /* @__PURE__ */ e("div", { className: "pointer-events-none relative z-10 flex h-full w-full items-stretch justify-end p-3 min-[500px]:p-4", children: /* @__PURE__ */ o(
+        "aside",
+        {
+          "data-tucu": "macos-tahoe-sidebar",
+          className: "pointer-events-auto flex h-full w-80 max-w-[calc(100vw-24px)] flex-col overflow-hidden rounded-[30px] border border-border bg-(--macos-tahoe-sidebar-bg) backdrop-blur-[30px]",
+          children: [
+            /* @__PURE__ */ o("div", { className: "shrink-0 px-5 pb-3 pt-5 flex items-center justify-between gap-3", children: [
+              /* @__PURE__ */ e("span", { className: "text-[16px] font-semibold text-(--macos-tahoe-text) dark:text-white/90", children: "Settings" }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => t(!1),
+                  "aria-label": "Close settings",
+                  className: "flex h-7 w-7 items-center justify-center rounded-full border border-border bg-black/8 text-(--macos-tahoe-text-muted) transition-colors hover:bg-black/12 hover:text-(--macos-tahoe-text) dark:bg-white/6 dark:hover:bg-white/10",
+                  children: /* @__PURE__ */ e(k, { className: "h-3.5 w-3.5", width: 14, height: 14 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e(
+              v,
+              {
+                style: { height: "calc(100dvh - 80px)" },
+                className: "h-full pb-5",
+                children: l
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  ) : /* @__PURE__ */ e(
+    O,
+    {
+      type: "sidebar",
+      position: "right",
+      isOpen: s,
+      setIsOpen: t,
+      title: "Settings",
+      className: g("relative", m && "min-[500px]:w-[300px]!"),
+      children: l
+    }
+  );
+}
+export {
+  B as SettingsDrawer,
+  B as default
+};

package/themes/components/settings/settings-section-heading.mjs

@@ -0,0 +1,21 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useTheme as s } from "../../hooks/use-theme.mjs";
+import { LAYOUT_OPTIONS as t } from "../../config/index.mjs";
+function n({
+  children: a
+}) {
+  const { colorScheme: o, layout: e } = s();
+  return o === "macos" || o === "macos-tahoe" || e === t.MACOS || e === t.MACOS_NAVBAR || e === t.MACOS_TAHOE || e === t.MACOS_TAHOE_DOCK || e === t.MACOS_TAHOE_NAVBAR ? /* @__PURE__ */ m(
+    "div",
+    {
+      role: "heading",
+      "aria-level": 3,
+      className: "mb-4 text-[11px] font-semibold uppercase tracking-[0.06em] text-(--macos-secondary-label)",
+      children: a
+    }
+  ) : /* @__PURE__ */ m("h4", { className: "mb-4 text-sm font-medium text-gray-900 dark:text-white", children: a });
+}
+export {
+  n as SettingsSectionHeading,
+  n as default
+};

package/themes/components/settings/settings-types.mjs

@@ -0,0 +1,184 @@
+import { defaultDarkBorderPreset as e, defaultBorderPreset as r, defaultDarkFgPreset as t, defaultFgPreset as a, defaultDarkInfoPreset as s, defaultInfoPreset as l, defaultDarkErrorPreset as d, defaultErrorPreset as u, defaultDarkWarningPreset as o, defaultWarningPreset as k, defaultDarkSuccessPreset as P, defaultSuccessPreset as y, defaultDarkLightDarkPreset as i, defaultLightDarkPreset as n, defaultLightBgPreset as c, defaultDarkBgPreset as g, defaultDarkMutedPreset as f, defaultMutedPreset as K, defaultDarkAccentPreset as D, defaultAccentPreset as h, defaultDarkSecondaryPreset as p, defaultSecondaryPreset as B, defaultDarkPrimaryPreset as b, defaultPrimaryPreset as m } from "../../config/index.mjs";
+const V = {
+  primary: {
+    presetKey: "primaryPreset",
+    setterKey: "setPrimaryPreset",
+    defaultValue: m,
+    label: "Primary (Brand) Color"
+  },
+  darkPrimary: {
+    presetKey: "darkPrimaryPreset",
+    setterKey: "setDarkPrimaryPreset",
+    defaultValue: b,
+    label: "Dark Primary (Brand) Color"
+  },
+  secondary: {
+    presetKey: "secondaryPreset",
+    setterKey: "setSecondaryPreset",
+    defaultValue: B,
+    label: "Auxiliary Background Color"
+  },
+  darkSecondary: {
+    presetKey: "darkSecondaryPreset",
+    setterKey: "setDarkSecondaryPreset",
+    defaultValue: p,
+    label: "Dark Auxiliary Background Color"
+  },
+  accent: {
+    presetKey: "accentPreset",
+    setterKey: "setAccentPreset",
+    defaultValue: h,
+    label: "Secondary (Accent) Color"
+  },
+  darkAccent: {
+    presetKey: "darkAccentPreset",
+    setterKey: "setDarkAccentPreset",
+    defaultValue: D,
+    label: "Dark Secondary (Accent) Color"
+  },
+  muted: {
+    presetKey: "mutedPreset",
+    setterKey: "setMutedPreset",
+    defaultValue: K,
+    label: "Muted Color"
+  },
+  darkMuted: {
+    presetKey: "darkMutedPreset",
+    setterKey: "setDarkMutedPreset",
+    defaultValue: f,
+    label: "Dark Muted Color"
+  },
+  darkBg: {
+    presetKey: "darkBgPreset",
+    setterKey: "setDarkBgPreset",
+    defaultValue: g,
+    label: "Dark Primary Background Color"
+  },
+  lightBg: {
+    presetKey: "lightBgPreset",
+    setterKey: "setLightBgPreset",
+    defaultValue: c,
+    label: "Light Primary Background Color"
+  },
+  lightDark: {
+    presetKey: "lightDarkPreset",
+    setterKey: "setLightDarkPreset",
+    defaultValue: n,
+    label: "Light Secondary Background Color"
+  },
+  darkLightDark: {
+    presetKey: "darkLightDarkPreset",
+    setterKey: "setDarkLightDarkPreset",
+    defaultValue: i,
+    label: "Dark Secondary Background Color"
+  },
+  success: {
+    presetKey: "successPreset",
+    setterKey: "setSuccessPreset",
+    defaultValue: y,
+    label: "Success Color"
+  },
+  darkSuccess: {
+    presetKey: "darkSuccessPreset",
+    setterKey: "setDarkSuccessPreset",
+    defaultValue: P,
+    label: "Dark Success Color"
+  },
+  warning: {
+    presetKey: "warningPreset",
+    setterKey: "setWarningPreset",
+    defaultValue: k,
+    label: "Warning Color"
+  },
+  darkWarning: {
+    presetKey: "darkWarningPreset",
+    setterKey: "setDarkWarningPreset",
+    defaultValue: o,
+    label: "Dark Warning Color"
+  },
+  error: {
+    presetKey: "errorPreset",
+    setterKey: "setErrorPreset",
+    defaultValue: u,
+    label: "Error Color"
+  },
+  darkError: {
+    presetKey: "darkErrorPreset",
+    setterKey: "setDarkErrorPreset",
+    defaultValue: d,
+    label: "Dark Error Color"
+  },
+  info: {
+    presetKey: "infoPreset",
+    setterKey: "setInfoPreset",
+    defaultValue: l,
+    label: "Info Color"
+  },
+  darkInfo: {
+    presetKey: "darkInfoPreset",
+    setterKey: "setDarkInfoPreset",
+    defaultValue: s,
+    label: "Dark Info Color"
+  },
+  fg: {
+    presetKey: "fgPreset",
+    setterKey: "setFgPreset",
+    defaultValue: a,
+    label: "Primary"
+  },
+  darkFg: {
+    presetKey: "darkFgPreset",
+    setterKey: "setDarkFgPreset",
+    defaultValue: t,
+    label: "Primary"
+  },
+  border: {
+    presetKey: "borderPreset",
+    setterKey: "setBorderPreset",
+    defaultValue: r,
+    label: "Border Color"
+  },
+  darkBorder: {
+    presetKey: "darkBorderPreset",
+    setterKey: "setDarkBorderPreset",
+    defaultValue: e,
+    label: "Dark Border Color"
+  }
+}, S = [
+  {
+    title: "Brand",
+    items: [
+      { light: "primary", dark: "darkPrimary" },
+      { light: "accent", dark: "darkAccent" }
+    ]
+  },
+  {
+    title: "Surfaces",
+    items: [
+      { light: "secondary", dark: "darkSecondary" },
+      { light: "lightBg", dark: "darkBg" },
+      { light: "lightDark", dark: "darkLightDark" }
+    ]
+  },
+  {
+    title: "Text",
+    items: [
+      { light: "muted", dark: "darkMuted" },
+      { light: "fg", dark: "darkFg" },
+      { light: "border", dark: "darkBorder" }
+    ]
+  },
+  {
+    title: "Status",
+    items: [
+      { light: "success", dark: "darkSuccess" },
+      { light: "warning", dark: "darkWarning" },
+      { light: "error", dark: "darkError" },
+      { light: "info", dark: "darkInfo" }
+    ]
+  }
+];
+export {
+  V as COLOR_CONFIG,
+  S as COLOR_GROUPS
+};

package/themes/components/settings/sonoma-accent-picker.mjs

@@ -0,0 +1,60 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useTheme as c } from "../../hooks/use-theme.mjs";
+import o from "classnames";
+import { SONOMA_ACCENT_BUNDLES as a, buildSonomaPresets as u } from "../../config/index.mjs";
+import { SettingsSectionHeading as f } from "./settings-section-heading.mjs";
+function N() {
+  const { primaryPreset: l, accentPreset: d } = c(), m = (e) => {
+    const t = a.find((g) => g.id === e);
+    if (!t) return;
+    const h = u(t);
+    c.setState(h);
+  }, i = l?.value?.toLowerCase(), s = d?.value?.toLowerCase(), p = a.find(
+    (e) => (e.primaryLight.toLowerCase() === i || e.primaryDark.toLowerCase() === i) && (e.accentLight.toLowerCase() === s || e.accentDark.toLowerCase() === s)
+  )?.id;
+  return /* @__PURE__ */ n("div", { className: "px-6 pt-8", children: [
+    /* @__PURE__ */ r(f, { children: "Accent Color" }),
+    /* @__PURE__ */ r("div", { className: "grid grid-cols-4 gap-3", children: a.map((e) => {
+      const t = p === e.id;
+      return /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          "aria-label": `${e.label} accent`,
+          onClick: () => m(e.id),
+          className: o(
+            "group flex flex-col items-center gap-1.5 rounded-xl p-2 transition-all cursor-pointer",
+            t ? "bg-white/10 ring-1 ring-white/20" : "hover:bg-white/5"
+          ),
+          children: [
+            /* @__PURE__ */ r(
+              "span",
+              {
+                className: o(
+                  "h-7 w-7 rounded-full border-2 transition-transform",
+                  t ? "border-white scale-110 shadow-lg" : "border-transparent group-hover:scale-105"
+                ),
+                style: { background: e.swatch }
+              }
+            ),
+            /* @__PURE__ */ r(
+              "span",
+              {
+                className: o(
+                  "text-[10px] font-medium transition-colors",
+                  t ? "text-white" : "text-gray-400 group-hover:text-gray-200"
+                ),
+                children: e.label
+              }
+            )
+          ]
+        },
+        e.id
+      );
+    }) })
+  ] });
+}
+export {
+  N as SonomaAccentPicker,
+  N as default
+};

package/themes/components/settings/switch-mode.mjs

@@ -0,0 +1,38 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Switch as i } from "../../../components/inputs/switch.mjs";
+import { useTheme as n } from "../../hooks/use-theme.mjs";
+import c from "classnames";
+import { Sun as f } from "../../../components/icons/sun.mjs";
+import { Moon as l } from "../../../components/icons/moon.mjs";
+const M = ({
+  className: o,
+  children: m
+}) => {
+  const { mode: t, setMode: r } = n();
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: c(
+        "flex items-center justify-between w-full gap-1",
+        o
+      ),
+      children: [
+        /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Mode" }),
+        /* @__PURE__ */ e(
+          i,
+          {
+            onLabel: /* @__PURE__ */ e(l, { className: "w-4 h-4" }),
+            offLabel: /* @__PURE__ */ e(f, { className: "w-4 h-4" }),
+            checked: t === "dark",
+            onChange: (s) => r(s ? "dark" : "light")
+          }
+        ),
+        m
+      ]
+    }
+  );
+};
+export {
+  M as SwitchMode,
+  M as default
+};

package/themes/components/settings/switch-variant.mjs

@@ -0,0 +1,38 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import n from "classnames";
+import { useTheme as l } from "../../hooks/use-theme.mjs";
+import { Select as c } from "../../../components/inputs/select.mjs";
+const i = [
+  { value: "default", name: "Default" },
+  { value: "macos", name: "macOS" },
+  { value: "macos-tahoe", name: "Tahoe" }
+], h = ({ className: a }) => {
+  const { colorScheme: t, applyThemeStyle: m } = l();
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: n(
+        "flex items-center justify-between! w-full gap-1",
+        a
+      ),
+      children: [
+        /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Theme" }),
+        /* @__PURE__ */ e(
+          c,
+          {
+            options: i,
+            value: t,
+            variant: "ghost",
+            size: "sm",
+            className: "min-w-[100px]",
+            onSelect: (s) => m(s)
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  h as SwitchVariant,
+  h as default
+};

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

@@ -0,0 +1,45 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import n from "classnames";
+function u({
+  onClick: e,
+  checked: r,
+  title: t,
+  children: o
+}) {
+  return /* @__PURE__ */ i(
+    "button",
+    {
+      onClick: e,
+      onTouchStart: e,
+      "aria-label": t,
+      "aria-describedby": t,
+      className: "group cursor-pointer outline-hidden focus:outline-hidden focus:outline-none w-full",
+      children: [
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: n(
+              "flex h-17.5 items-center justify-center rounded-lg text-center text-sm font-medium uppercase tracking-wide transition-all",
+              r ? "shadow-large bg-brand/50" : "bg-white dark:bg-gray-600 text-gray-500 group-hover:bg-brand/20 dark:text-gray-400"
+            ),
+            children: o
+          }
+        ),
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: n(
+              "mt-3 block text-center text-sm transition-all",
+              r ? "text-brand dark:text-white" : "text-gray-500 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+            ),
+            children: t
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  u as SwitcherButton,
+  u as default
+};

package/themes/components/settings/tahoe-accent-picker.mjs

@@ -0,0 +1,62 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useTheme as l } from "../../hooks/use-theme.mjs";
+import o from "classnames";
+import { TAHOE_ACCENT_BUNDLES as s, buildTahoePresets as u } from "../../config/index.mjs";
+import { SettingsSectionHeading as x } from "./settings-section-heading.mjs";
+function b() {
+  const { primaryPreset: d, accentPreset: m } = l(), g = (e) => {
+    const t = s.find((p) => p.id === e);
+    if (!t) return;
+    const a = u(t);
+    l.setState(a);
+  }, i = d?.value?.toLowerCase(), c = m?.value?.toLowerCase(), h = s.find(
+    (e) => (e.primaryLight.toLowerCase() === i || e.primaryDark.toLowerCase() === i) && (e.accentLight.toLowerCase() === c || e.accentDark.toLowerCase() === c)
+  )?.id;
+  return /* @__PURE__ */ n("div", { className: "px-6 pt-8", children: [
+    /* @__PURE__ */ r(x, { children: "Accent Color" }),
+    /* @__PURE__ */ r("div", { className: "grid grid-cols-4 gap-3", children: s.map((e) => {
+      const t = h === e.id, a = e.id === "glass-neutral";
+      return /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          "aria-label": `${e.label} accent`,
+          onClick: () => g(e.id),
+          className: o(
+            "group flex text-gray-900 dark:text-white flex-col items-center gap-1.5 rounded-xl p-2 transition-all cursor-pointer",
+            t ? "bg-black/8 ring-1 ring-black/15 dark:bg-white/10 dark:ring-white/20" : "hover:bg-black/5 dark:hover:bg-white/5"
+          ),
+          children: [
+            /* @__PURE__ */ r(
+              "span",
+              {
+                className: o(
+                  "h-7 w-7 rounded-full border-2 transition-transform",
+                  t ? "border-gray-900 dark:border-white scale-110 shadow-lg" : "border-transparent group-hover:scale-105"
+                ),
+                style: {
+                  background: a ? "linear-gradient(135deg, #007AFF 0%, #5AC8FA 50%, #FF9500 100%)" : e.swatch
+                }
+              }
+            ),
+            /* @__PURE__ */ r(
+              "span",
+              {
+                className: o(
+                  "text-[10px] font-medium transition-colors",
+                  t ? "text-gray-900 dark:text-white" : "text-(--macos-tahoe-text-muted) group-hover:text-(--macos-tahoe-text)"
+                ),
+                children: e.label
+              }
+            )
+          ]
+        },
+        e.id
+      );
+    }) })
+  ] });
+}
+export {
+  b as TahoeAccentPicker,
+  b as default
+};