@umami/react-zen 0.237.0 → 0.238.0

package/dist/index.mjs

@@ -3903,11 +3903,18 @@ function useDebounce(value, delay) {
   }, [value, delay]);
   return debouncedValue;
 }
-var STORAGE_KEY = "theme";
+var PALETTES = ["neutral", "slate", "gray", "zinc", "stone"];
+var THEME_STORAGE_KEY = "theme";
+var PALETTE_STORAGE_KEY = "zen.palette";
 function getThemeFromDOM() {
   if (typeof window === "undefined") return "light";
   return document.documentElement.classList.contains("dark") ? "dark" : "light";
 }
+function getPaletteFromDOM() {
+  if (typeof window === "undefined") return "neutral";
+  const palette = document.documentElement.getAttribute("data-palette");
+  return palette && PALETTES.includes(palette) ? palette : "neutral";
+}
 function resolveTheme(preferred, colorScheme) {
   if (preferred) {
     return preferred;
@@ -3929,41 +3936,67 @@ function applyTheme(theme) {
     document.documentElement.classList.remove("dark");
   }
 }
+function applyPalette(palette) {
+  if (typeof window === "undefined") return;
+  document.documentElement.setAttribute("data-palette", palette);
+}
 var useTheme = create((set, get) => ({
   theme: "light",
+  palette: "neutral",
   setTheme: (theme) => {
     set({ theme });
     if (typeof window !== "undefined") {
-      localStorage.setItem(STORAGE_KEY, theme);
+      localStorage.setItem(THEME_STORAGE_KEY, theme);
       applyTheme(theme);
     }
   },
+  setPalette: (palette) => {
+    set({ palette });
+    if (typeof window !== "undefined") {
+      localStorage.setItem(PALETTE_STORAGE_KEY, palette);
+      applyPalette(palette);
+    }
+  },
   syncTheme: () => {
     const theme = getThemeFromDOM();
-    if (theme !== get().theme) {
+    const palette = getPaletteFromDOM();
+    const state = get();
+    if (theme !== state.theme) {
       set({ theme });
       document.documentElement.setAttribute("data-theme", theme);
     }
+    if (palette !== state.palette) {
+      set({ palette });
+    }
   },
   initTheme: (preferred, colorScheme) => {
     if (typeof window === "undefined") return;
-    const stored = localStorage.getItem(STORAGE_KEY);
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
     const initial = resolveTheme(preferred || stored || void 0, colorScheme);
     set({ theme: initial });
     applyTheme(initial);
+  },
+  initPalette: (preferred) => {
+    if (typeof window === "undefined") return;
+    const stored = localStorage.getItem(PALETTE_STORAGE_KEY);
+    const initial = preferred || (stored && PALETTES.includes(stored) ? stored : null) || "neutral";
+    set({ palette: initial });
+    applyPalette(initial);
   }
 }));
-function useInitTheme(preferred, colorScheme) {
+function useInitTheme(preferred, colorScheme, preferredPalette) {
   const initTheme = useTheme((s) => s.initTheme);
+  const initPalette = useTheme((s) => s.initPalette);
   const syncTheme = useTheme((s) => s.syncTheme);
   useLayoutEffect(() => {
     initTheme(preferred, colorScheme);
-  }, [preferred, colorScheme, initTheme]);
+    initPalette(preferredPalette);
+  }, [preferred, colorScheme, preferredPalette, initTheme, initPalette]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     const observer = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
-        if (mutation.attributeName === "class") {
+        if (mutation.attributeName === "class" || mutation.attributeName === "data-palette") {
           syncTheme();
         }
       }
@@ -4403,6 +4436,43 @@ function NavMenuItem({ isSelected, className, children, ...props }) {
     }
   );
 }
+var PALETTE_LABELS = {
+  neutral: "Neutral",
+  slate: "Slate",
+  gray: "Gray",
+  zinc: "Zinc",
+  stone: "Stone"
+};
+function PaletteSwitcher({ className }) {
+  const { palette, setPalette } = useTheme();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center bg-surface-base border border-edge rounded-md overflow-hidden",
+        className
+      ),
+      children: PALETTES.map((p) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setPalette(p),
+          "aria-label": PALETTE_LABELS[p],
+          "aria-pressed": palette === p,
+          className: cn(
+            "px-3 h-9 flex items-center justify-center cursor-pointer outline-none transition-colors text-sm",
+            "[&:not(:first-child)]:border-l [&:not(:first-child)]:border-edge",
+            "hover:bg-interactive",
+            "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset",
+            palette === p ? "bg-interactive text-foreground-primary" : "text-foreground-muted"
+          ),
+          children: PALETTE_LABELS[p]
+        },
+        p
+      ))
+    }
+  );
+}
 var SvgEyeSlash = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", ...props, children: [
   /* @__PURE__ */ jsx("path", { fill: "none", d: "M0 0h256v256H0z" }),
   /* @__PURE__ */ jsx(
@@ -4997,7 +5067,7 @@ function ThemeButton({
     }
   );
 }
-var STORAGE_KEY2 = "theme-mode";
+var STORAGE_KEY = "theme-mode";
 function getSystemTheme() {
   if (typeof window === "undefined") return "light";
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -5006,7 +5076,7 @@ function ThemeSwitcher({ className }) {
   const { setTheme } = useTheme();
   const [mode, setMode] = useState("system");
   useEffect(() => {
-    const stored = localStorage.getItem(STORAGE_KEY2);
+    const stored = localStorage.getItem(STORAGE_KEY);
     if (stored && ["light", "dark", "system"].includes(stored)) {
       setMode(stored);
     }
@@ -5017,7 +5087,7 @@ function ThemeSwitcher({ className }) {
     } else {
       setTheme(mode);
     }
-    localStorage.setItem(STORAGE_KEY2, mode);
+    localStorage.setItem(STORAGE_KEY, mode);
   }, [mode, setTheme]);
   useEffect(() => {
     if (mode !== "system") return;
@@ -5143,12 +5213,13 @@ function ZenProvider({
   children,
   theme,
   colorScheme,
+  palette,
   toast: toast2 = defaultToastConfig
 }) {
-  useInitTheme(theme, colorScheme);
+  useInitTheme(theme, colorScheme, palette);
   return /* @__PURE__ */ jsx(ToastProvider, { ...toast2, children });
 }
 
-export { Accordion, AccordionItem, AlertBanner, AlertDialog, Blockquote, Box, Breadcrumb, Breadcrumbs, Button, Calendar, Checkbox, Code, Column, ComboBox, ConfirmationDialog, Container, CopyButton, DataCard, DataColumn, DataTable, Dialog, Dots, Flexbox, FloatingTooltip, Form, FormButtons, FormController, FormField, FormFieldArray, FormResetButton, FormSubmitButton, Grid, Heading, HoverTrigger, Icon, IconLabel, Image, Label, List, ListItem, ListSection, ListSeparator, Loading, LoadingButton, Menu, MenuItem, MenuSection, MenuSeparator, Modal, NavMenu, NavMenuGroup, NavMenuItem, Navbar, NavbarContext, NavbarItem, PasswordField, Popover, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, SearchField, Select, Sidebar, SidebarHeader, SidebarItem, SidebarSection, Slider, Spinner, StatusLight, SubMenuTrigger, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tabs, Text, TextField, ThemeButton, ThemeSwitcher, Toast, ToastContext, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipBubble, ZenProvider, cn, getCssColorValue, isHeightPreset, isMaxHeightPreset, isMaxWidthPreset, isMinHeightPreset, isMinWidthPreset, isWidthPreset, mapAlignContent, mapAlignItems, mapAlignSelf, mapBackgroundColor, mapBorder, mapBorderColor, mapBorderRadius, mapBorderWidth, mapCursor, mapDisplay, mapFlexDirection, mapFlexWrap, mapFontSize, mapFontWeight, mapGap, mapGridAutoFlow, mapGridColumns, mapGridRows, mapHeadingSize, mapHeight, mapJustifyContent, mapJustifyItems, mapLetterSpacing, mapLineHeight, mapMargin, mapMaxHeight, mapMaxWidth, mapMinHeight, mapMinWidth, mapOpacity, mapOverflow, mapPadding, mapPointerEvents, mapPosition, mapShadow, mapStateStyles, mapTextAlign, mapTextColor, mapTextDecorationStyle, mapTextIndent, mapTextTransform, mapTextWrap, mapVerticalAlign, mapWhitespace, mapWidth, mapWordBreak, removeToast, resolveRender, useBreakpoint, useDebounce, useInitTheme, useNavigationContext, useTheme, useToast };
+export { Accordion, AccordionItem, AlertBanner, AlertDialog, Blockquote, Box, Breadcrumb, Breadcrumbs, Button, Calendar, Checkbox, Code, Column, ComboBox, ConfirmationDialog, Container, CopyButton, DataCard, DataColumn, DataTable, Dialog, Dots, Flexbox, FloatingTooltip, Form, FormButtons, FormController, FormField, FormFieldArray, FormResetButton, FormSubmitButton, Grid, Heading, HoverTrigger, Icon, IconLabel, Image, Label, List, ListItem, ListSection, ListSeparator, Loading, LoadingButton, Menu, MenuItem, MenuSection, MenuSeparator, Modal, NavMenu, NavMenuGroup, NavMenuItem, Navbar, NavbarContext, NavbarItem, PALETTES, PaletteSwitcher, PasswordField, Popover, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, SearchField, Select, Sidebar, SidebarHeader, SidebarItem, SidebarSection, Slider, Spinner, StatusLight, SubMenuTrigger, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tabs, Text, TextField, ThemeButton, ThemeSwitcher, Toast, ToastContext, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipBubble, ZenProvider, cn, getCssColorValue, isHeightPreset, isMaxHeightPreset, isMaxWidthPreset, isMinHeightPreset, isMinWidthPreset, isWidthPreset, mapAlignContent, mapAlignItems, mapAlignSelf, mapBackgroundColor, mapBorder, mapBorderColor, mapBorderRadius, mapBorderWidth, mapCursor, mapDisplay, mapFlexDirection, mapFlexWrap, mapFontSize, mapFontWeight, mapGap, mapGridAutoFlow, mapGridColumns, mapGridRows, mapHeadingSize, mapHeight, mapJustifyContent, mapJustifyItems, mapLetterSpacing, mapLineHeight, mapMargin, mapMaxHeight, mapMaxWidth, mapMinHeight, mapMinWidth, mapOpacity, mapOverflow, mapPadding, mapPointerEvents, mapPosition, mapShadow, mapStateStyles, mapTextAlign, mapTextColor, mapTextDecorationStyle, mapTextIndent, mapTextTransform, mapTextWrap, mapVerticalAlign, mapWhitespace, mapWidth, mapWordBreak, removeToast, resolveRender, useBreakpoint, useDebounce, useInitTheme, useNavigationContext, useTheme, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map