@umami/react-zen 0.231.0 → 0.233.0

package/dist/index.mjs

@@ -194,7 +194,7 @@ tv({
 });
 var tooltip = tv({
   base: [
-    "bg-surface-inverted text-foreground-inverted text-xs px-2 py-1 rounded",
+    "bg-surface-inverted text-foreground-inverted text-base px-2 py-1 rounded",
     "entering:animate-popover-in",
     "exiting:animate-popover-out"
   ]
@@ -2263,6 +2263,37 @@ function isMinHeightPreset(value) {
 function isMaxHeightPreset(value) {
   return value in maxHeightMap;
 }
+function addStatePrefix(prefix, className) {
+  if (!className) return "";
+  return className.split(" ").filter(Boolean).map((cls) => `${prefix}:${cls}`).join(" ");
+}
+function mapStateStyles(prefix, styles) {
+  if (!styles) return "";
+  const classes = [];
+  if (styles.color !== void 0) {
+    const colorClass = mapTextColor(
+      typeof styles.color === "boolean" ? "true" : String(styles.color)
+    );
+    if (colorClass) classes.push(addStatePrefix(prefix, colorClass));
+  }
+  if (styles.backgroundColor !== void 0) {
+    const bgClass = mapBackgroundColor(
+      typeof styles.backgroundColor === "boolean" ? "true" : String(styles.backgroundColor)
+    );
+    if (bgClass) classes.push(addStatePrefix(prefix, bgClass));
+  }
+  if (styles.borderColor !== void 0) {
+    const borderClass = mapBorderColor(
+      typeof styles.borderColor === "boolean" ? "true" : String(styles.borderColor)
+    );
+    if (borderClass) classes.push(addStatePrefix(prefix, borderClass));
+  }
+  if (styles.opacity !== void 0) {
+    const opacityClass = mapOpacity(styles.opacity);
+    if (opacityClass) classes.push(addStatePrefix(prefix, opacityClass));
+  }
+  return classes.join(" ");
+}
 var sizeMap = {
   xs: "w-3 h-3",
   sm: "w-4 h-4",
@@ -2478,6 +2509,9 @@ var Box = forwardRef(function Box2({
   order,
   zIndex,
   theme,
+  hover,
+  focus,
+  active,
   as = "div",
   render,
   className,
@@ -2532,6 +2566,9 @@ var Box = forwardRef(function Box2({
     mapPointerEvents(pointerEvents),
     mapAlignSelf(alignSelf),
     theme && `${theme}-theme`,
+    mapStateStyles("hover", hover),
+    mapStateStyles("focus", focus),
+    mapStateStyles("active", active),
     className
   );
   const widthStyle = getSizingStyle(width, isWidthPreset);
@@ -2859,13 +2896,14 @@ function useFieldId(id) {
   const generatedId = useId();
   return id ?? generatedId;
 }
-function Label({ size = "sm", weight = "medium", ...props }) {
+function Label({ size = "base", weight = "semibold", lineHeight = "loose", ...props }) {
   return /* @__PURE__ */ jsx(
     Text,
     {
       ...props,
       size,
       weight,
+      lineHeight,
       render: (renderProps) => /* @__PURE__ */ jsx(Label$1, { ...renderProps })
     }
   );
@@ -4622,6 +4660,7 @@ function Select({
   searchValue,
   searchDelay,
   isFullscreen,
+  maxHeight,
   onSearch,
   onChange,
   buttonProps,
@@ -4692,8 +4731,8 @@ function Select({
                     shouldFocusOnHover: false,
                     autoFocus: "first"
                   },
-                  className: cn("max-h-60 overflow-auto", listProps?.className),
-                  style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
+                  className: cn("overflow-auto", listProps?.className),
+                  style: { ...listProps?.style, maxHeight, display: isLoading ? "none" : void 0 },
                   children
                 }
               )
@@ -4963,6 +5002,70 @@ function ThemeButton({
     }
   );
 }
+var STORAGE_KEY2 = "theme-mode";
+function getSystemTheme() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function ThemeSwitcher({ className }) {
+  const { setTheme } = useTheme();
+  const [mode, setMode] = useState("system");
+  useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY2);
+    if (stored && ["light", "dark", "system"].includes(stored)) {
+      setMode(stored);
+    }
+  }, []);
+  useEffect(() => {
+    if (mode === "system") {
+      setTheme(getSystemTheme());
+    } else {
+      setTheme(mode);
+    }
+    localStorage.setItem(STORAGE_KEY2, mode);
+  }, [mode, setTheme]);
+  useEffect(() => {
+    if (mode !== "system") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      setTheme(getSystemTheme());
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [mode, setTheme]);
+  const options = [
+    { value: "light", icon: /* @__PURE__ */ jsx(icons_exports.Sun, {}), label: "Light" },
+    { value: "dark", icon: /* @__PURE__ */ jsx(icons_exports.Moon, {}), label: "Dark" },
+    { value: "system", icon: /* @__PURE__ */ jsx(icons_exports.Monitor, {}), label: "System" }
+  ];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center bg-surface-base border border-edge rounded-md overflow-hidden",
+        className
+      ),
+      children: options.map((option) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setMode(option.value),
+          "aria-label": option.label,
+          "aria-pressed": mode === option.value,
+          className: cn(
+            "size-9 flex items-center justify-center cursor-pointer outline-none transition-colors",
+            "[&: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",
+            mode === option.value ? "bg-interactive text-foreground-primary" : "text-foreground-muted"
+          ),
+          children: /* @__PURE__ */ jsx(Icon, { size: "sm", children: option.icon })
+        },
+        option.value
+      ))
+    }
+  );
+}
 function Toggle({ label, children, className, ...props }) {
   const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -5051,6 +5154,6 @@ function ZenProvider({
   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, Toast, ToastContext, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipBubble, ZenProvider, 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, 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, removeToast, resolveRender, useBreakpoint, useDebounce, useInitTheme, useNavigationContext, useTheme, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map