@umami/react-zen 0.181.0 → 0.183.0

package/dist/index.mjs

@@ -35,12 +35,12 @@ var require_use_sync_external_store_shim_production = __commonJS({
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is2;
     var useState19 = React5.useState;
-    var useEffect13 = React5.useEffect;
-    var useLayoutEffect2 = React5.useLayoutEffect;
+    var useEffect12 = React5.useEffect;
+    var useLayoutEffect3 = React5.useLayoutEffect;
     var useDebugValue = React5.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
       var value = getSnapshot(), _useState = useState19({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
-      useLayoutEffect2(
+      useLayoutEffect3(
         function() {
           inst.value = value;
           inst.getSnapshot = getSnapshot;
@@ -48,7 +48,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
         },
         [subscribe, value, getSnapshot]
       );
-      useEffect13(
+      useEffect12(
         function() {
           checkIfSnapshotChanged(inst) && forceUpdate({ inst });
           return subscribe(function() {
@@ -101,7 +101,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
-        useLayoutEffect2(
+        useLayoutEffect3(
           function() {
             inst.value = value;
             inst.getSnapshot = getSnapshot;
@@ -109,7 +109,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe, value, getSnapshot]
         );
-        useEffect13(
+        useEffect12(
           function() {
             checkIfSnapshotChanged(inst) && forceUpdate({ inst });
             return subscribe(function() {
@@ -135,7 +135,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React5 = __import_react2, objectIs = "function" === typeof Object.is ? Object.is : is2, useState19 = React5.useState, useEffect13 = React5.useEffect, useLayoutEffect2 = React5.useLayoutEffect, useDebugValue = React5.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      var React5 = __import_react2, objectIs = "function" === typeof Object.is ? Object.is : is2, useState19 = React5.useState, useEffect12 = React5.useEffect, useLayoutEffect3 = React5.useLayoutEffect, useDebugValue = React5.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
       exports.useSyncExternalStore = void 0 !== React5.useSyncExternalStore ? React5.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     })();
@@ -1814,8 +1814,8 @@ function $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, context) {
     mergedRef
   ];
 }
-function $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(initialState3 = true) {
-  let [hasSlot, setHasSlot] = (0, $iETbY$useState)(initialState3);
+function $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(initialState2 = true) {
+  let [hasSlot, setHasSlot] = (0, $iETbY$useState)(initialState2);
   let hasRun = (0, $iETbY$useRef)(false);
   let ref = (0, $iETbY$useCallback)((el) => {
     hasRun.current = true;
@@ -28407,9 +28407,16 @@ function FormController({ children, ...props }) {
 }
 
 // src/components/forms/FormField.tsx
-import { cloneElement as cloneElement2, Children, useId } from "react";
+import { cloneElement as cloneElement2, Children } from "react";
 var import_classnames7 = __toESM(require_classnames());
 
+// src/components/hooks/useFieldId.ts
+import { useId } from "react";
+function useFieldId(id) {
+  const generatedId = useId();
+  return id ?? generatedId;
+}
+
 // css-modules:E:\dev\umami-react-zen\src\components\forms\FormField.module.css
 var FormField_default = { "field": "FormField_field__YTM1N", "description": "FormField_description__ZjFiM", "error": "FormField_error__NWZhM" };
 
@@ -28437,12 +28444,11 @@ function FormField({
   children,
   ...props
 }) {
-  const generatedId = useId();
+  const fieldId = useFieldId(id);
   const context = useFormContext();
   const { control } = context;
   const { invalid, error } = context.getFieldState(name);
-  const fieldId = id ?? generatedId;
-  return /* @__PURE__ */ jsxs6("div", { ...props, id, className: (0, import_classnames7.default)(FormField_default.input, className), children: [
+  return /* @__PURE__ */ jsxs6("div", { ...props, className: (0, import_classnames7.default)(FormField_default.input, className), children: [
     label && /* @__PURE__ */ jsx14(Label2, { htmlFor: fieldId, children: label }),
     /* @__PURE__ */ jsx14(FormController, { name, control, rules, children: ({ field }) => {
       return Children.map(
@@ -32241,13 +32247,13 @@ var createStoreImpl = (createState) => {
     }
   };
   const getState = () => state;
-  const getInitialState = () => initialState3;
+  const getInitialState = () => initialState2;
   const subscribe = (listener) => {
     listeners.add(listener);
     return () => listeners.delete(listener);
   };
   const api = { setState, getState, getInitialState, subscribe };
-  const initialState3 = state = createState(setState, getState, api);
+  const initialState2 = state = createState(setState, getState, api);
   return api;
 };
 var createStore = ((createState) => createState ? createStoreImpl(createState) : createStoreImpl);
@@ -32385,26 +32391,41 @@ function useDebounce(value, delay) {
 }
 
 // src/components/hooks/useTheme.ts
-import { useEffect as useEffect8 } from "react";
-function getDefaultTheme() {
-  return typeof window !== "undefined" ? window?.matchMedia("(prefers-color-scheme: dark)")?.matches ? "dark" : "light" : "light";
-}
-var initialState2 = {
-  theme: getDefaultTheme()
-};
-var store2 = create(() => ({ ...initialState2 }));
-function setTheme(theme) {
-  store2.setState({ theme });
-  document.documentElement.setAttribute("data-theme", theme);
+import { useLayoutEffect as useLayoutEffect2 } from "react";
+function resolveTheme(preferred, colorScheme) {
+  if (preferred) {
+    return preferred;
+  }
+  if (colorScheme === "light" || colorScheme === "dark") {
+    return colorScheme;
+  }
+  if (typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return "dark";
+  }
+  return "light";
 }
-function useTheme(defaultTheme) {
-  const { theme } = store2();
-  useEffect8(() => {
-    if (defaultTheme) {
-      setTheme(defaultTheme);
+var useTheme = create((set2, get2) => ({
+  theme: "light",
+  setTheme: (theme) => {
+    set2({ theme });
+    if (typeof window !== "undefined") {
+      localStorage.setItem("zen.theme", theme);
+      document.documentElement.setAttribute("data-theme", theme);
     }
-  }, [defaultTheme]);
-  return { theme, setTheme };
+  },
+  initTheme: (preferred, colorScheme) => {
+    if (typeof window === "undefined") return;
+    const stored = localStorage.getItem("zen.theme");
+    const initial = resolveTheme(preferred || stored || void 0, colorScheme);
+    set2({ theme: initial });
+    document.documentElement.setAttribute("data-theme", initial);
+  }
+}));
+function useInitTheme(preferred, colorScheme) {
+  const initTheme = useTheme((s) => s.initTheme);
+  useLayoutEffect2(() => {
+    initTheme(preferred, colorScheme);
+  }, [preferred, colorScheme, initTheme]);
 }
 
 // src/components/Accordion.tsx
@@ -32743,7 +32764,8 @@ var List_default = { "list": "List_list__ZTRlN", "separator": "List_separator__O
 // src/components/List.tsx
 import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
 function List({
-  items,
+  id,
+  items = [],
   idProperty = "id",
   labelProperty = "label",
   separatorProperty = "separatpr",
@@ -32766,11 +32788,13 @@ function List({
       onChange?.([...keys].map(String));
     }
   };
+  const fieldId = useFieldId(id);
   return /* @__PURE__ */ jsxs18(Fragment5, { children: [
-    label && /* @__PURE__ */ jsx33(Label2, { children: label }),
+    label && /* @__PURE__ */ jsx33(Label2, { htmlFor: fieldId, children: label }),
     /* @__PURE__ */ jsx33(
       $eed445e0843c11d0$export$41f133550aa26f48,
       {
+        id: fieldId,
         "aria-label": "list",
         ...props,
         selectedKeys: value || selectedKeys,
@@ -32780,12 +32804,12 @@ function List({
         onSelectionChange: handleSelectionChange,
         style: { ...style, ...getHighlightColor(highlightColor) },
         children: children || items?.map((item) => {
-          const id = item[idProperty] || item.toString();
+          const id2 = item[idProperty] || item.toString();
           const label2 = item[labelProperty] || item.toString();
           return /* @__PURE__ */ jsxs18(Fragment4, { children: [
             item[separatorProperty] && /* @__PURE__ */ jsx33($431f98aba6844401$export$1ff3c3f08ae963c0, { className: List_default.separator }),
-            /* @__PURE__ */ jsx33(ListItem, { id, className: List_default.item, children: label2 })
-          ] }, id);
+            /* @__PURE__ */ jsx33(ListItem, { id: id2, className: List_default.item, children: label2 })
+          ] }, id2);
         })
       }
     )
@@ -32906,7 +32930,7 @@ var import_classnames25 = __toESM(require_classnames());
 import { useState as useState10 } from "react";
 
 // src/components/TextField.tsx
-import { useEffect as useEffect9, useState as useState9 } from "react";
+import { useEffect as useEffect8, useState as useState9 } from "react";
 var import_classnames24 = __toESM(require_classnames());
 
 // src/components/CopyButton.tsx
@@ -32959,7 +32983,7 @@ function TextField2({
     setInputValue(value2);
     return onChange?.(value2);
   };
-  useEffect9(() => {
+  useEffect8(() => {
     setInputValue(value);
   }, [value]);
   return /* @__PURE__ */ jsxs20(Fragment6, { children: [
@@ -33178,7 +33202,7 @@ function Dots({ size = "md", className, ...props }) {
 
 // src/components/FloatingTooltip.tsx
 var import_classnames31 = __toESM(require_classnames());
-import { useEffect as useEffect10, useState as useState11 } from "react";
+import { useEffect as useEffect9, useState as useState11 } from "react";
 
 // src/components/Tooltip.tsx
 var import_classnames30 = __toESM(require_classnames());
@@ -33205,7 +33229,7 @@ var FloatingTooltip_default = { "floating": "FloatingTooltip_floating__ZjM4N" };
 import { jsx as jsx45 } from "react/jsx-runtime";
 function FloatingTooltip({ className, style, children, ...props }) {
   const [position, setPosition] = useState11({ x: -1e3, y: -1e3 });
-  useEffect10(() => {
+  useEffect9(() => {
     const handler = (e) => {
       setPosition({ x: e.clientX, y: e.clientY });
     };
@@ -33261,7 +33285,7 @@ function Heading2({
 }
 
 // src/components/HoverTrigger.tsx
-import { useRef as useRef8, useState as useState12, useEffect as useEffect11 } from "react";
+import { useRef as useRef8, useState as useState12, useEffect as useEffect10 } from "react";
 
 // css-modules:E:\dev\umami-react-zen\src\components\HoverTrigger.module.css
 var HoverTrigger_default = { "wrapper": "HoverTrigger_wrapper__NGFlN" };
@@ -33282,7 +33306,7 @@ function HoverTrigger({
   const isOverMenu = useRef8(false);
   const isOverButton = useRef8(false);
   const timeout = useRef8(null);
-  useEffect11(() => {
+  useEffect10(() => {
     if (isOpen !== open) {
       setOpen(isOpen);
     }
@@ -33762,7 +33786,7 @@ function Radio2({ children, className, ...props }) {
 }
 
 // src/components/SearchField.tsx
-import { useState as useState17, useEffect as useEffect12 } from "react";
+import { useState as useState17, useEffect as useEffect11 } from "react";
 var import_classnames45 = __toESM(require_classnames());
 import { Fragment as Fragment12, jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
 function SearchField2({
@@ -33790,7 +33814,7 @@ function SearchField2({
     onSearch?.("");
     onChange?.("");
   };
-  useEffect12(() => {
+  useEffect11(() => {
     if (delay > 0) {
       onSearch?.(searchValue);
     }
@@ -34091,14 +34115,8 @@ var ThemeButton_default = { "button": "ThemeButton_button__MDUzN" };
 
 // src/components/ThemeButton.tsx
 import { jsx as jsx67, jsxs as jsxs41 } from "react/jsx-runtime";
-function ThemeButton({
-  className,
-  variant = "quiet",
-  defaultTheme,
-  onPress,
-  ...props
-}) {
-  const { theme, setTheme: setTheme2 } = useTheme(defaultTheme);
+function ThemeButton({ className, variant = "quiet", onPress, ...props }) {
+  const { theme, setTheme } = useTheme();
   const transitions = useTransition(theme, {
     initial: { opacity: 1 },
     from: {
@@ -34112,7 +34130,7 @@ function ThemeButton({
     }
   });
   function handleClick(e) {
-    setTheme2(theme === "light" ? "dark" : "light");
+    setTheme(theme === "light" ? "dark" : "light");
     onPress?.(e);
   }
   return /* @__PURE__ */ jsxs41(
@@ -34205,11 +34223,16 @@ function ToggleGroupItem({ className, children, ...props }) {
 
 // src/components/ZenProvider.tsx
 import { jsx as jsx70 } from "react/jsx-runtime";
-var defaultToastCofig = {
+var defaultToastConfig = {
   duration: 3e3
 };
-function ZenProvider({ children, ...props }) {
-  const { toast = defaultToastCofig } = props;
+function ZenProvider({
+  children,
+  theme,
+  colorScheme,
+  toast = defaultToastConfig
+}) {
+  useInitTheme(theme, colorScheme);
   return /* @__PURE__ */ jsx70(ToastProvider, { ...toast, children });
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.181.0",
+  "version": "0.183.0",
   "description": "Modern, minimalist React component library",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",