@umami/react-zen 0.237.0 → 0.239.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { Button as Button$1, DisclosureGroup, Disclosure, DisclosurePanel, Dialog as Dialog$1, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1, Calendar as Calendar$1, Heading as Heading$1, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, Checkbox as Checkbox$1, Label as Label$1, ListBox, ListBoxItem, Separator, ListBoxSection, Header, Popover as Popover$1, ComboBox as ComboBox$1, Group, Input, TextField as TextField$1, TextArea, Table as Table$1, TableHeader as TableHeader$1, TableBody as TableBody$1, Row as Row$1, Column as Column$1, Cell, Tooltip as Tooltip$1, OverlayArrow, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, SubmenuTrigger, ModalOverlay, Modal as Modal$1, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, SearchField as SearchField$1, Select as Select$1, SelectValue, TooltipTrigger, Focusable, Slider as Slider$1, SliderOutput, SliderTrack, Switch as Switch$1, Tabs as Tabs$1, TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$1, ToggleButton, TagGroup, TagList, Tag, SliderThumb } from 'react-aria-components';
+import { Button as Button$1, DisclosureGroup, Disclosure, DisclosurePanel, Dialog as Dialog$1, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1, Calendar as Calendar$1, Heading as Heading$1, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, Checkbox as Checkbox$1, Label as Label$1, ListBox, ListBoxItem, Separator, ListBoxSection, Header, Popover as Popover$1, ComboBox as ComboBox$1, Group, Input, TextField as TextField$1, TextArea, Table as Table$1, TableHeader as TableHeader$1, TableBody as TableBody$1, Row as Row$1, Column as Column$1, Cell, Tooltip as Tooltip$1, OverlayArrow, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, SubmenuTrigger, ModalOverlay, Modal as Modal$1, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, SearchField as SearchField$1, Select as Select$1, SelectValue, Slider as Slider$1, SliderOutput, SliderTrack, Switch as Switch$1, Tabs as Tabs$1, TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$1, ToggleButton, TagGroup, TagList, Tag, SliderThumb } from 'react-aria-components';
 export { DialogTrigger, FileTrigger, Focusable, MenuTrigger, Pressable, RouterProvider, SubmenuTrigger, TooltipTrigger } from 'react-aria-components';
 import * as lucide_react_star from 'lucide-react';
 import { forwardRef, createContext, isValidElement, cloneElement, createElement, Fragment as Fragment$1, useState, useRef, useEffect, useId, Children, useCallback, useLayoutEffect, useContext } from 'react';
@@ -3107,8 +3107,9 @@ function CopyButton({ value, timeout = TIMEOUT, className, children, ...props })
   const [copied, setCopied] = useState(false);
   const ref = useRef(timeout);
   const handleCopy = async () => {
-    if (value) {
-      await navigator.clipboard.writeText(value);
+    const text2 = typeof value === "function" ? value() : value;
+    if (text2) {
+      await navigator.clipboard.writeText(text2);
       setCopied(true);
       clearTimeout(ref.current);
       ref.current = +setTimeout(() => setCopied(false), timeout);
@@ -3903,11 +3904,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 +3937,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();
         }
       }
@@ -4101,21 +4135,6 @@ function useToast() {
   };
   return { toast: toast2, toasts };
 }
-function IconLabel({
-  icon,
-  label,
-  iconProps,
-  labelProps,
-  showLabel = true,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(Row, { alignItems: "center", gap: true, ...props, children: [
-    icon && /* @__PURE__ */ jsx(Icon, { ...iconProps, children: icon }),
-    showLabel && label && /* @__PURE__ */ jsx(Text, { ...labelProps, children: label }),
-    showLabel && children
-  ] });
-}
 var objectFitMap = {
   fill: "object-fill",
   contain: "object-contain",
@@ -4207,7 +4226,11 @@ function MenuItem({
         className
       ),
       children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(IconLabel, { icon, label, children }),
+        /* @__PURE__ */ jsxs(Row, { alignItems: "center", gap: true, children: [
+          icon && /* @__PURE__ */ jsx(Icon, { children: icon }),
+          label && /* @__PURE__ */ jsx(Text, { children: label }),
+          children
+        ] }),
         showChecked && isSelected && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(icons_exports.Check, {}) }),
         showSubMenuIcon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(icons_exports.ChevronRight, {}) })
       ] })
@@ -4336,70 +4359,40 @@ function NavbarItem({
     }
   );
 }
-var NavMenuContext = createContext(null);
-function NavMenu({ muteItems, onItemClick, className, children, ...props }) {
-  return /* @__PURE__ */ jsx(NavMenuContext.Provider, { value: { onItemClick }, children: /* @__PURE__ */ jsx(Column, { ...props, color: muteItems ? "muted" : void 0, className, children }) });
-}
-function NavMenuGroup({
-  title,
-  allowMinimize = true,
-  isMinimized,
-  className,
-  children,
-  ...props
-}) {
-  const [minimized, setMinimized] = useState(!!isMinimized);
-  const handleClick = () => {
-    if (allowMinimize) {
-      setMinimized((state) => !state);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    Column,
-    {
-      ...props,
-      className: cn(
-        className,
-        allowMinimize && "cursor-pointer",
-        allowMinimize && minimized && "[&_.navmenu-children]:hidden"
-      ),
-      children: [
-        /* @__PURE__ */ jsxs(
-          Row,
-          {
-            paddingY: "2",
-            paddingX: "3",
-            alignItems: "center",
-            justifyContent: "space-between",
-            onClick: handleClick,
-            children: [
-              /* @__PURE__ */ jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: title }),
-              allowMinimize && /* @__PURE__ */ jsx(Icon, { rotate: minimized ? 0 : 90, color: "muted", children: /* @__PURE__ */ jsx(icons_exports.ChevronRight, {}) })
-            ]
-          }
-        ),
-        !minimized && /* @__PURE__ */ jsx(Column, { className: "navmenu-children", children })
-      ]
-    }
-  );
-}
-function NavMenuItem({ isSelected, className, children, ...props }) {
-  const { onItemClick } = useContext(NavMenuContext);
+var PALETTE_LABELS = {
+  neutral: "Neutral",
+  slate: "Slate",
+  gray: "Gray",
+  zinc: "Zinc",
+  stone: "Stone"
+};
+function PaletteSwitcher({ className }) {
+  const { palette, setPalette } = useTheme();
   return /* @__PURE__ */ jsx(
-    Row,
+    "div",
     {
-      ...props,
-      paddingY: "2",
-      paddingX: "3",
-      borderRadius: "md",
-      onClick: onItemClick,
       className: cn(
-        "cursor-pointer",
-        "hover:bg-interactive",
-        isSelected && "bg-interactive font-medium",
+        "inline-flex items-center bg-surface-base border border-edge rounded-md overflow-hidden",
         className
       ),
-      children
+      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
+      ))
     }
   );
 }
@@ -4738,83 +4731,6 @@ function Select({
     }
   );
 }
-var SidebarContext = createContext(null);
-function Sidebar({ isCollapsed, muteItems, className, children, ...props }) {
-  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { isCollapsed }, children: /* @__PURE__ */ jsx(
-    Column,
-    {
-      border: "right",
-      ...props,
-      className: cn(
-        "text-base",
-        isCollapsed && "w-16",
-        muteItems && "text-foreground-muted",
-        className
-      ),
-      children
-    }
-  ) });
-}
-function SidebarSection({
-  title,
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(Column, { ...props, paddingY: "2", className, children: [
-    title && /* @__PURE__ */ jsx(Box, { paddingX: "4", paddingY: "2", children: /* @__PURE__ */ jsx(Text, { size: "xs", weight: "semibold", transform: "uppercase", color: "muted", children: title }) }),
-    /* @__PURE__ */ jsx(Column, { children })
-  ] });
-}
-function SidebarHeader({
-  label,
-  icon,
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(Row, { ...props, paddingX: "4", paddingY: "3", gap: "3", alignItems: "center", className, children: [
-    icon && /* @__PURE__ */ jsx(Icon, { size: "sm", children: icon }),
-    label && /* @__PURE__ */ jsx(Text, { weight: "semibold", children: label }),
-    children
-  ] });
-}
-function SidebarItem({
-  label,
-  icon,
-  isSelected,
-  className,
-  children,
-  ...props
-}) {
-  const { isCollapsed } = useContext(SidebarContext);
-  return /* @__PURE__ */ jsxs(TooltipTrigger, { delay: 0, closeDelay: 0, isDisabled: !isCollapsed, children: [
-    /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsxs(
-      Row,
-      {
-        ...props,
-        paddingX: isCollapsed ? "0" : "4",
-        paddingY: "2",
-        gap: "3",
-        alignItems: "center",
-        justifyContent: isCollapsed ? "center" : void 0,
-        borderRadius: "md",
-        className: cn(
-          "cursor-pointer",
-          "hover:bg-interactive",
-          isSelected && "bg-interactive font-medium",
-          className
-        ),
-        children: [
-          icon && /* @__PURE__ */ jsx(Icon, { size: "sm", children: icon }),
-          label && !isCollapsed && /* @__PURE__ */ jsx(Text, { children: label }),
-          children
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Tooltip, { placement: "right", children: label })
-  ] });
-}
 function Fill2({ percentage }) {
   const width = `calc(10px + ${percentage}% - ${percentage * 0.2}px)`;
   return /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 rounded-full bg-primary", style: { width } });
@@ -4997,7 +4913,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 +4922,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 +4933,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 +5059,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, Image, Label, List, ListItem, ListSection, ListSeparator, Loading, LoadingButton, Menu, MenuItem, MenuSection, MenuSeparator, Modal, Navbar, NavbarContext, NavbarItem, PALETTES, PaletteSwitcher, PasswordField, Popover, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, SearchField, Select, 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