@umami/react-zen 0.180.0 → 0.182.0

package/dist/index.d.mts

@@ -261,7 +261,7 @@ interface AlertBannerProps {
     title?: ReactNode;
     description?: ReactNode;
     icon?: ReactNode;
-    variant?: 'error';
+    variant?: 'error' | 'info';
     align?: 'start' | 'center' | 'end';
     allowClose?: boolean;
     onClose?: () => void;
@@ -323,7 +323,7 @@ interface ListProps extends ListBoxProps<any> {
     value?: string[];
     onChange?: (value: string[]) => void;
 }
-declare function List({ items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, label, value, onChange, className, selectedKeys, defaultSelectedKeys, onSelectionChange, style, children, ...props }: ListProps): react.JSX.Element;
+declare function List({ id, items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, label, value, onChange, className, selectedKeys, defaultSelectedKeys, onSelectionChange, style, children, ...props }: ListProps): react.JSX.Element;
 interface ListItemProps extends ListBoxItemProps<any> {
     showCheckmark?: boolean;
 }

package/dist/index.d.ts

@@ -261,7 +261,7 @@ interface AlertBannerProps {
     title?: ReactNode;
     description?: ReactNode;
     icon?: ReactNode;
-    variant?: 'error';
+    variant?: 'error' | 'info';
     align?: 'start' | 'center' | 'end';
     allowClose?: boolean;
     onClose?: () => void;
@@ -323,7 +323,7 @@ interface ListProps extends ListBoxProps<any> {
     value?: string[];
     onChange?: (value: string[]) => void;
 }
-declare function List({ items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, label, value, onChange, className, selectedKeys, defaultSelectedKeys, onSelectionChange, style, children, ...props }: ListProps): react.JSX.Element;
+declare function List({ id, items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, label, value, onChange, className, selectedKeys, defaultSelectedKeys, onSelectionChange, style, children, ...props }: ListProps): react.JSX.Element;
 interface ListItemProps extends ListBoxItemProps<any> {
     showCheckmark?: boolean;
 }

package/dist/index.js

@@ -34,8 +34,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.1/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
 var require_use_sync_external_store_shim_production = __commonJS({
   "node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.1/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js"(exports) {
-    var import_react197 = __toESM(require("react"));
-    var React5 = import_react197.default;
+    var import_react198 = __toESM(require("react"));
+    var React5 = import_react198.default;
     function is2(x, y) {
       return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
     }
@@ -87,7 +87,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
 // node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.1/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
 var require_use_sync_external_store_shim_development = __commonJS({
   "node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.1/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
-    var import_react197 = __toESM(require("react"));
+    var import_react198 = __toESM(require("react"));
     (function() {
       function is2(x, y) {
         return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
@@ -141,7 +141,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_react197.default, 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_react198.default, 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;
       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());
     })();
@@ -28526,9 +28526,16 @@ function FormController({ children, ...props }) {
 }
 
 // src/components/forms/FormField.tsx
-var import_react160 = require("react");
+var import_react161 = require("react");
 var import_classnames7 = __toESM(require_classnames());
 
+// src/components/hooks/useFieldId.ts
+var import_react160 = require("react");
+function useFieldId(id) {
+  const generatedId = (0, import_react160.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" };
 
@@ -28556,21 +28563,20 @@ function FormField({
   children,
   ...props
 }) {
-  const generatedId = (0, import_react160.useId)();
+  const fieldId = useFieldId(id);
   const context = useFormContext();
   const { control } = context;
   const { invalid, error } = context.getFieldState(name);
-  const fieldId = id ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ...props, id, className: (0, import_classnames7.default)(FormField_default.input, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ...props, className: (0, import_classnames7.default)(FormField_default.input, className), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Label2, { htmlFor: fieldId, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FormController, { name, control, rules, children: ({ field }) => {
-      return import_react160.Children.map(
+      return import_react161.Children.map(
         typeof children === "function" ? children({ context, field }) : children,
         (child) => {
           if (!child) {
             return null;
           }
-          return (0, import_react160.cloneElement)(child, { ...field, id: fieldId });
+          return (0, import_react161.cloneElement)(child, { ...field, id: fieldId });
         }
       );
     } }),
@@ -28704,7 +28710,7 @@ function FormSubmitButton({
   ...props
 }) {
   const {
-    formState: { isDirty, isValid, isSubmitting, isSubmitted, isSubmitSuccessful }
+    formState: { isDirty, isValid, isSubmitting, isLoading: formLoading }
   } = useFormContext();
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     LoadingButton,
@@ -28712,8 +28718,8 @@ function FormSubmitButton({
       ...props,
       type: "submit",
       variant,
-      isDisabled: isDisabled !== void 0 ? isDisabled : !isDirty || !isValid || isSubmitting,
-      isLoading: isLoading !== void 0 ? isLoading : isSubmitting,
+      isDisabled: isDisabled ?? (!isDirty || !isValid || isSubmitting),
+      isLoading: isLoading ?? (formLoading || isSubmitting),
       children
     }
   );
@@ -28929,7 +28935,6 @@ function eachSafely(values, each2) {
 }
 
 // node_modules/.pnpm/@react-spring+shared@9.7.5_react@19.1.1/node_modules/@react-spring/shared/dist/react-spring_shared.modern.mjs
-var import_react161 = require("react");
 var import_react162 = require("react");
 var import_react163 = require("react");
 var import_react164 = require("react");
@@ -28937,6 +28942,7 @@ var import_react165 = require("react");
 var import_react166 = require("react");
 var import_react167 = require("react");
 var import_react168 = require("react");
+var import_react169 = require("react");
 var __defProp2 = Object.defineProperty;
 var __export2 = (target, all) => {
   for (var name in all)
@@ -29696,9 +29702,9 @@ function isAnimatedString(value) {
   return is.str(value) && (value[0] == "#" || /\d/.test(value) || // Do not identify a CSS variable as an AnimatedString if its SSR
   !isSSR() && cssVariableRegex.test(value) || value in (colors || {}));
 }
-var useIsomorphicLayoutEffect2 = isSSR() ? import_react164.useEffect : import_react164.useLayoutEffect;
+var useIsomorphicLayoutEffect2 = isSSR() ? import_react165.useEffect : import_react165.useLayoutEffect;
 var useIsMounted = () => {
-  const isMounted = (0, import_react163.useRef)(false);
+  const isMounted = (0, import_react164.useRef)(false);
   useIsomorphicLayoutEffect2(() => {
     isMounted.current = true;
     return () => {
@@ -29708,7 +29714,7 @@ var useIsMounted = () => {
   return isMounted;
 };
 function useForceUpdate() {
-  const update3 = (0, import_react162.useState)()[1];
+  const update3 = (0, import_react163.useState)()[1];
   const isMounted = useIsMounted();
   return () => {
     if (isMounted.current) {
@@ -29717,13 +29723,13 @@ function useForceUpdate() {
   };
 }
 function useMemoOne(getResult, inputs) {
-  const [initial] = (0, import_react165.useState)(
+  const [initial] = (0, import_react166.useState)(
     () => ({
       inputs,
       result: getResult()
     })
   );
-  const committed = (0, import_react165.useRef)();
+  const committed = (0, import_react166.useRef)();
   const prevCache = committed.current;
   let cache = prevCache;
   if (cache) {
@@ -29739,7 +29745,7 @@ function useMemoOne(getResult, inputs) {
   } else {
     cache = initial;
   }
-  (0, import_react165.useEffect)(() => {
+  (0, import_react166.useEffect)(() => {
     committed.current = cache;
     if (prevCache == initial) {
       initial.inputs = initial.result = void 0;
@@ -29758,22 +29764,22 @@ function areInputsEqual(next, prev) {
   }
   return true;
 }
-var useOnce = (effect) => (0, import_react166.useEffect)(effect, emptyDeps);
+var useOnce = (effect) => (0, import_react167.useEffect)(effect, emptyDeps);
 var emptyDeps = [];
 function usePrev(value) {
-  const prevRef = (0, import_react167.useRef)();
-  (0, import_react167.useEffect)(() => {
+  const prevRef = (0, import_react168.useRef)();
+  (0, import_react168.useEffect)(() => {
     prevRef.current = value;
   });
   return prevRef.current;
 }
 
 // node_modules/.pnpm/@react-spring+core@9.7.5_react@19.1.1/node_modules/@react-spring/core/dist/react-spring_core.modern.mjs
-var import_react170 = require("react");
+var import_react171 = require("react");
 
 // node_modules/.pnpm/@react-spring+animated@9.7.5_react@19.1.1/node_modules/@react-spring/animated/dist/react-spring_animated.modern.mjs
 var React2 = __toESM(require("react"), 1);
-var import_react169 = require("react");
+var import_react170 = require("react");
 var $node = Symbol.for("Animated:node");
 var isAnimated = (value) => !!value && value[$node] === value;
 var getAnimated = (owner) => owner && owner[$node];
@@ -29960,10 +29966,10 @@ var withAnimated = (Component, host2) => {
     // re-rendered on every animation frame.
     !is.fun(Component) || Component.prototype && Component.prototype.isReactComponent
   );
-  return (0, import_react169.forwardRef)((givenProps, givenRef) => {
-    const instanceRef = (0, import_react169.useRef)(null);
+  return (0, import_react170.forwardRef)((givenProps, givenRef) => {
+    const instanceRef = (0, import_react170.useRef)(null);
     const ref = hasInstance && // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, import_react169.useCallback)(
+    (0, import_react170.useCallback)(
       (value) => {
         instanceRef.current = updateRef(givenRef, value);
       },
@@ -29982,7 +29988,7 @@ var withAnimated = (Component, host2) => {
       }
     };
     const observer = new PropsObserver(callback, deps);
-    const observerRef = (0, import_react169.useRef)();
+    const observerRef = (0, import_react170.useRef)();
     useIsomorphicLayoutEffect2(() => {
       observerRef.current = observer;
       each(deps, (dep) => addFluidObserver(dep, observer));
@@ -29996,7 +30002,7 @@ var withAnimated = (Component, host2) => {
         }
       };
     });
-    (0, import_react169.useEffect)(callback, []);
+    (0, import_react170.useEffect)(callback, []);
     useOnce(() => () => {
       const observer2 = observerRef.current;
       each(observer2.deps, (dep) => removeFluidObserver(dep, observer2));
@@ -30072,11 +30078,11 @@ var getDisplayName = (arg) => is.str(arg) ? arg : arg && is.str(arg.displayName)
 
 // node_modules/.pnpm/@react-spring+core@9.7.5_react@19.1.1/node_modules/@react-spring/core/dist/react-spring_core.modern.mjs
 var React3 = __toESM(require("react"), 1);
-var import_react171 = require("react");
 var import_react172 = require("react");
-var React22 = __toESM(require("react"), 1);
 var import_react173 = require("react");
+var React22 = __toESM(require("react"), 1);
 var import_react174 = require("react");
+var import_react175 = require("react");
 function callProp(value, ...args) {
   return is.fun(value) ? value(...args) : value;
 }
@@ -31535,7 +31541,7 @@ var SpringContext = ({
   children,
   ...props
 }) => {
-  const inherited = (0, import_react171.useContext)(ctx);
+  const inherited = (0, import_react172.useContext)(ctx);
   const pause = props.pause || !!inherited.pause, immediate = props.immediate || !!inherited.immediate;
   props = useMemoOne(() => ({ pause, immediate }), [pause, immediate]);
   const { Provider } = ctx;
@@ -31634,13 +31640,13 @@ function useTransition(data, props, deps) {
     ref: propsRef,
     config: propsConfig
   } = propsFn ? propsFn() : props;
-  const ref = (0, import_react173.useMemo)(
+  const ref = (0, import_react174.useMemo)(
     () => propsFn || arguments.length == 3 ? SpringRef() : void 0,
     []
   );
   const items = toArray(data);
   const transitions = [];
-  const usedTransitions = (0, import_react173.useRef)(null);
+  const usedTransitions = (0, import_react174.useRef)(null);
   const prevTransitions = reset ? null : usedTransitions.current;
   useIsomorphicLayoutEffect2(() => {
     usedTransitions.current = transitions;
@@ -31711,8 +31717,8 @@ function useTransition(data, props, deps) {
   const forceUpdate = useForceUpdate();
   const defaultProps = getDefaultProps(props);
   const changes = /* @__PURE__ */ new Map();
-  const exitingTransitions = (0, import_react173.useRef)(/* @__PURE__ */ new Map());
-  const forceChange = (0, import_react173.useRef)(false);
+  const exitingTransitions = (0, import_react174.useRef)(/* @__PURE__ */ new Map());
+  const forceChange = (0, import_react174.useRef)(false);
   each(transitions, (t, i) => {
     const key = t.key;
     const prevPhase = t.phase;
@@ -31802,7 +31808,7 @@ function useTransition(data, props, deps) {
       changes.set(t, { phase, springs, payload });
     }
   });
-  const context = (0, import_react173.useContext)(SpringContext);
+  const context = (0, import_react174.useContext)(SpringContext);
   const prevContext = usePrev(context);
   const hasContext = context !== prevContext && hasProps(context);
   useIsomorphicLayoutEffect2(() => {
@@ -32345,7 +32351,7 @@ var animated = host.animated;
 
 // src/components/toast/Toaster.tsx
 var import_classnames12 = __toESM(require_classnames());
-var import_react178 = require("react");
+var import_react179 = require("react");
 
 // node_modules/.pnpm/zustand@5.0.8_@types+react@_2ab3c21ca4e7c2d11079300200c15eca/node_modules/zustand/esm/vanilla.mjs
 var createStoreImpl = (createState) => {
@@ -32372,15 +32378,15 @@ var createStoreImpl = (createState) => {
 var createStore = ((createState) => createState ? createStoreImpl(createState) : createStoreImpl);
 
 // node_modules/.pnpm/zustand@5.0.8_@types+react@_2ab3c21ca4e7c2d11079300200c15eca/node_modules/zustand/esm/react.mjs
-var import_react175 = __toESM(require("react"), 1);
+var import_react176 = __toESM(require("react"), 1);
 var identity = (arg) => arg;
 function useStore(api, selector = identity) {
-  const slice = import_react175.default.useSyncExternalStore(
+  const slice = import_react176.default.useSyncExternalStore(
     api.subscribe,
-    import_react175.default.useCallback(() => selector(api.getState()), [api, selector]),
-    import_react175.default.useCallback(() => selector(api.getInitialState()), [api, selector])
+    import_react176.default.useCallback(() => selector(api.getState()), [api, selector]),
+    import_react176.default.useCallback(() => selector(api.getInitialState()), [api, selector])
   );
-  import_react175.default.useDebugValue(slice);
+  import_react176.default.useDebugValue(slice);
   return slice;
 }
 var createImpl = (createState) => {
@@ -32392,12 +32398,12 @@ var createImpl = (createState) => {
 var create = ((createState) => createState ? createImpl(createState) : createImpl);
 
 // src/components/hooks/useToast.ts
-var import_react177 = require("react");
+var import_react178 = require("react");
 
 // src/components/toast/ToastProvider.tsx
-var import_react176 = require("react");
+var import_react177 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var ToastContext = (0, import_react176.createContext)({});
+var ToastContext = (0, import_react177.createContext)({});
 function ToastProvider({ children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ToastContext.Provider, { value: props, children: [
     children,
@@ -32428,7 +32434,7 @@ function displayToast(message, { duration = TOAST_DURATION, ...options } = {}) {
 }
 function useToast() {
   const { toasts } = store();
-  const config2 = (0, import_react177.useContext)(ToastContext);
+  const config2 = (0, import_react178.useContext)(ToastContext);
   const toast = (message, options) => {
     displayToast(message, { ...options, ...config2 });
   };
@@ -32442,7 +32448,7 @@ var Toaster_default = { "toaster": "Toaster_toaster__OGJjM", "position-top": "To
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function Toaster({ duration = 0, position = "bottom-right" }) {
   const { toasts } = useToast();
-  const [hovered, setHovered] = (0, import_react178.useState)(false);
+  const [hovered, setHovered] = (0, import_react179.useState)(false);
   const transitions = useTransition(toasts, {
     from: {
       opacity: 0,
@@ -32455,7 +32461,7 @@ function Toaster({ duration = 0, position = "bottom-right" }) {
     },
     config: { duration: 100 }
   });
-  (0, import_react178.useEffect)(() => {
+  (0, import_react179.useEffect)(() => {
     if (duration) {
       const timeout = setInterval(() => {
         if (hovered || !toasts.length) return;
@@ -32489,10 +32495,10 @@ function Toaster({ duration = 0, position = "bottom-right" }) {
 }
 
 // src/components/hooks/useDebounce.ts
-var import_react179 = require("react");
+var import_react180 = require("react");
 function useDebounce(value, delay) {
-  const [debouncedValue, setValue] = (0, import_react179.useState)(value);
-  (0, import_react179.useEffect)(() => {
+  const [debouncedValue, setValue] = (0, import_react180.useState)(value);
+  (0, import_react180.useEffect)(() => {
     const timer = setTimeout(() => {
       setValue(value);
     }, delay);
@@ -32504,7 +32510,7 @@ function useDebounce(value, delay) {
 }
 
 // src/components/hooks/useTheme.ts
-var import_react180 = require("react");
+var import_react181 = require("react");
 function getDefaultTheme() {
   return typeof window !== "undefined" ? window?.matchMedia("(prefers-color-scheme: dark)")?.matches ? "dark" : "light" : "light";
 }
@@ -32518,7 +32524,7 @@ function setTheme(theme) {
 }
 function useTheme(defaultTheme) {
   const { theme } = store2();
-  (0, import_react180.useEffect)(() => {
+  (0, import_react181.useEffect)(() => {
     if (defaultTheme) {
       setTheme(defaultTheme);
     }
@@ -32527,7 +32533,7 @@ function useTheme(defaultTheme) {
 }
 
 // src/components/Accordion.tsx
-var import_react181 = require("react");
+var import_react182 = require("react");
 var import_classnames14 = __toESM(require_classnames());
 
 // src/components/Text.tsx
@@ -32601,7 +32607,7 @@ function AccordionItem({
   ...props
 }) {
   const [trigger, panel] = children;
-  const [expanded, setExpanded] = (0, import_react181.useState)(defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react182.useState)(defaultExpanded);
   const handleExpandedChange = (isExpanded) => {
     requestAnimationFrame(() => setExpanded(isExpanded));
   };
@@ -32812,7 +32818,7 @@ function Checkbox2({ label, className, children, ...props }) {
 var import_classnames22 = __toESM(require_classnames());
 
 // src/components/List.tsx
-var import_react182 = require("react");
+var import_react183 = require("react");
 var import_classnames20 = __toESM(require_classnames());
 
 // src/lib/constants.ts
@@ -32862,7 +32868,8 @@ var List_default = { "list": "List_list__ZTRlN", "separator": "List_separator__O
 // src/components/List.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function List({
-  items,
+  id,
+  items = [],
   idProperty = "id",
   labelProperty = "label",
   separatorProperty = "separatpr",
@@ -32885,11 +32892,13 @@ function List({
       onChange?.([...keys].map(String));
     }
   };
+  const fieldId = useFieldId(id);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Label2, { children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Label2, { htmlFor: fieldId, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       $eed445e0843c11d0$export$41f133550aa26f48,
       {
+        id: fieldId,
         "aria-label": "list",
         ...props,
         selectedKeys: value || selectedKeys,
@@ -32899,12 +32908,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__ */ (0, import_jsx_runtime33.jsxs)(import_react182.Fragment, { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react183.Fragment, { children: [
             item[separatorProperty] && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { className: List_default.separator }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ListItem, { id, className: List_default.item, children: label2 })
-          ] }, id);
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ListItem, { id: id2, className: List_default.item, children: label2 })
+          ] }, id2);
         })
       }
     )
@@ -33021,15 +33030,15 @@ function Code({ asChild, children }) {
 }
 
 // src/components/ConfirmationDialog.tsx
-var import_react185 = require("react");
+var import_react186 = require("react");
 var import_classnames25 = __toESM(require_classnames());
 
 // src/components/TextField.tsx
-var import_react184 = require("react");
+var import_react185 = require("react");
 var import_classnames24 = __toESM(require_classnames());
 
 // src/components/CopyButton.tsx
-var import_react183 = require("react");
+var import_react184 = require("react");
 var import_classnames23 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\CopyButton.module.css
@@ -33039,8 +33048,8 @@ var CopyButton_default = { "icon": "CopyButton_icon__YTM2Y", "copy-button": "Cop
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var TIMEOUT = 2e3;
 function CopyButton({ value, timeout = TIMEOUT, className, children, ...props }) {
-  const [copied, setCopied] = (0, import_react183.useState)(false);
-  const ref = (0, import_react183.useRef)(timeout);
+  const [copied, setCopied] = (0, import_react184.useState)(false);
+  const ref = (0, import_react184.useRef)(timeout);
   const handleCopy = async () => {
     if (value) {
       await navigator.clipboard.writeText(value);
@@ -33072,13 +33081,13 @@ function TextField2({
   children,
   ...props
 }) {
-  const [inputValue, setInputValue] = (0, import_react184.useState)(defaultValue || value);
+  const [inputValue, setInputValue] = (0, import_react185.useState)(defaultValue || value);
   const Component = asTextArea ? $216918bed6669f72$export$f5c9f3c2c4054eec : $3985021b0ad6602f$export$f5b8910cec6cf069;
   const handleChange = (value2) => {
     setInputValue(value2);
     return onChange?.(value2);
   };
-  (0, import_react184.useEffect)(() => {
+  (0, import_react185.useEffect)(() => {
     setInputValue(value);
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
@@ -33121,7 +33130,7 @@ function ConfirmationDialog({
   children,
   ...props
 }) {
-  const [canSave, setCanSave] = (0, import_react185.useState)(false);
+  const [canSave, setCanSave] = (0, import_react186.useState)(false);
   const handleChange = (e) => {
     setCanSave(e.target.value === value);
   };
@@ -33178,7 +33187,7 @@ function Container({
 
 // src/components/DataTable.tsx
 var import_classnames28 = __toESM(require_classnames());
-var import_react186 = require("react");
+var import_react187 = require("react");
 
 // src/components/Table.tsx
 var import_classnames27 = __toESM(require_classnames());
@@ -33237,11 +33246,11 @@ var DataTable_default = { "datatable": "DataTable_datatable__MWRkN", "cell": "Da
 
 // src/components/DataTable.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var import_react187 = require("react");
+var import_react188 = require("react");
 function DataTable({ data = [], className, children, ...props }) {
   const items = data.length && data?.[0]?.id === void 0 ? data.map((row, id) => ({ ...row, id })) : data;
   const widths = [];
-  const columns = import_react186.Children.map(children, (child) => {
+  const columns = import_react187.Children.map(children, (child) => {
     if (child) {
       widths.push(child?.props?.width || "1fr");
       return { ...child?.props };
@@ -33254,7 +33263,7 @@ function DataTable({ data = [], className, children, ...props }) {
       if (hidden) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_react187.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
+      return /* @__PURE__ */ (0, import_react188.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
     }) }),
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TableBody, { children: items.map((row, index) => {
       return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TableRow, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
@@ -33262,14 +33271,14 @@ function DataTable({ data = [], className, children, ...props }) {
           return null;
         }
         const value = typeof children2 === "function" ? children2(row, index) : children2 || row[id];
-        return /* @__PURE__ */ (0, import_react187.createElement)(
+        return /* @__PURE__ */ (0, import_react188.createElement)(
           TableCell,
           {
             ...cellProps,
             key: id,
             className: (0, import_classnames28.default)(DataTable_default.cell, className2)
           },
-          as ? (0, import_react186.createElement)(as, {}, value) : value
+          as ? (0, import_react187.createElement)(as, {}, value) : value
         );
       }) }, index);
     }) })
@@ -33296,7 +33305,7 @@ function Dots({ size = "md", className, ...props }) {
 }
 
 // src/components/FloatingTooltip.tsx
-var import_react188 = require("react");
+var import_react189 = require("react");
 var import_classnames31 = __toESM(require_classnames());
 
 // src/components/Tooltip.tsx
@@ -33323,8 +33332,8 @@ var FloatingTooltip_default = { "floating": "FloatingTooltip_floating__ZjM4N" };
 // src/components/FloatingTooltip.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function FloatingTooltip({ className, style, children, ...props }) {
-  const [position, setPosition] = (0, import_react188.useState)({ x: -1e3, y: -1e3 });
-  (0, import_react188.useEffect)(() => {
+  const [position, setPosition] = (0, import_react189.useState)({ x: -1e3, y: -1e3 });
+  (0, import_react189.useEffect)(() => {
     const handler = (e) => {
       setPosition({ x: e.clientX, y: e.clientY });
     };
@@ -33380,7 +33389,7 @@ function Heading2({
 }
 
 // src/components/HoverTrigger.tsx
-var import_react189 = require("react");
+var import_react190 = require("react");
 
 // css-modules:E:\dev\umami-react-zen\src\components\HoverTrigger.module.css
 var HoverTrigger_default = { "wrapper": "HoverTrigger_wrapper__NGFlN" };
@@ -33396,12 +33405,12 @@ function HoverTrigger({
   children
 }) {
   const [triggerElement, popupElement] = children;
-  const triggerRef = (0, import_react189.useRef)(null);
-  const [open, setOpen] = (0, import_react189.useState)(isOpen);
-  const isOverMenu = (0, import_react189.useRef)(false);
-  const isOverButton = (0, import_react189.useRef)(false);
-  const timeout = (0, import_react189.useRef)(null);
-  (0, import_react189.useEffect)(() => {
+  const triggerRef = (0, import_react190.useRef)(null);
+  const [open, setOpen] = (0, import_react190.useState)(isOpen);
+  const isOverMenu = (0, import_react190.useRef)(false);
+  const isOverButton = (0, import_react190.useRef)(false);
+  const timeout = (0, import_react190.useRef)(null);
+  (0, import_react190.useEffect)(() => {
     if (isOpen !== open) {
       setOpen(isOpen);
     }
@@ -33491,7 +33500,7 @@ function Image({
 }
 
 // src/components/InlineEditField.tsx
-var import_react190 = require("react");
+var import_react191 = require("react");
 var import_classnames34 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\InlineEditField.module.css
@@ -33510,8 +33519,8 @@ function InlineEditField({
   onCancel,
   ...props
 }) {
-  const [value, setValue] = (0, import_react190.useState)(defaultValue);
-  const [edit, setEdit] = (0, import_react190.useState)(defaultEdit);
+  const [value, setValue] = (0, import_react191.useState)(defaultValue);
+  const [edit, setEdit] = (0, import_react191.useState)(defaultEdit);
   const handleEdit = () => setEdit(true);
   const handleChange = (e) => {
     const val = e.target.value;
@@ -33522,7 +33531,7 @@ function InlineEditField({
     setEdit(false);
     onCommit?.(value);
   };
-  const handleCancel = (0, import_react190.useCallback)(() => {
+  const handleCancel = (0, import_react191.useCallback)(() => {
     setEdit(false);
     setValue(defaultValue);
     onCancel?.();
@@ -33647,7 +33656,7 @@ function Modal2({
 }
 
 // src/components/Navbar.tsx
-var import_react191 = require("react");
+var import_react192 = require("react");
 var import_classnames38 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Navbar.module.css
@@ -33655,16 +33664,16 @@ var Navbar_default = { "nav": "Navbar_nav__ZjEwM", "item": "Navbar_item__MWVhZ",
 
 // src/components/Navbar.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var NavbarContext = (0, import_react191.createContext)(void 0);
+var NavbarContext = (0, import_react192.createContext)(void 0);
 var useNavigationContext = () => {
-  const context = (0, import_react191.useContext)(NavbarContext);
+  const context = (0, import_react192.useContext)(NavbarContext);
   if (!context) {
     throw new Error("useNavigationContext must be used within a Navbar");
   }
   return context;
 };
 function Navbar({ showArrow = true, className, children, ...props }) {
-  const [activeMenu, setActiveMenu] = (0, import_react191.useState)("");
+  const [activeMenu, setActiveMenu] = (0, import_react192.useState)("");
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(NavbarContext.Provider, { value: { activeMenu, setActiveMenu }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { ...props, className: (0, import_classnames38.default)(Navbar_default.nav, className), children }) });
 }
 function NavbarItem({ label, children, className, ...props }) {
@@ -33682,7 +33691,7 @@ function NavbarItem({ label, children, className, ...props }) {
 }
 
 // src/components/NavMenu.tsx
-var import_react192 = require("react");
+var import_react193 = require("react");
 var import_classnames39 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\NavMenu.module.css
@@ -33690,7 +33699,7 @@ var NavMenu_default = { "navmenu": "NavMenu_navmenu__MzRmN", "item": "NavMenu_it
 
 // src/components/NavMenu.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var NavMenuContext = (0, import_react192.createContext)(null);
+var NavMenuContext = (0, import_react193.createContext)(null);
 function NavMenu({
   itemBackgroundColor = "2",
   muteItems = true,
@@ -33716,7 +33725,7 @@ function NavMenuGroup({
   children,
   ...props
 }) {
-  const [minimized, setMinimized] = (0, import_react192.useState)(!!isMinimized);
+  const [minimized, setMinimized] = (0, import_react193.useState)(!!isMinimized);
   const handleClick = () => {
     if (allowMinimize) {
       setMinimized((state) => !state);
@@ -33752,7 +33761,7 @@ function NavMenuGroup({
   );
 }
 function NavMenuItem({ isSelected, className, children, ...props }) {
-  const { itemBackgroundColor } = (0, import_react192.useContext)(NavMenuContext);
+  const { itemBackgroundColor } = (0, import_react193.useContext)(NavMenuContext);
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     Row,
     {
@@ -33766,11 +33775,11 @@ function NavMenuItem({ isSelected, className, children, ...props }) {
 }
 
 // src/components/PasswordField.tsx
-var import_react193 = require("react");
+var import_react194 = require("react");
 var import_classnames40 = __toESM(require_classnames());
 var import_jsx_runtime55 = require("react/jsx-runtime");
 function PasswordField({ label, className, ...props }) {
-  const [show, setShow] = (0, import_react193.useState)(false);
+  const [show, setShow] = (0, import_react194.useState)(false);
   const type = show ? "text" : "password";
   const handleShowPassword = () => setShow((state) => !state);
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
@@ -33877,7 +33886,7 @@ function Radio2({ children, className, ...props }) {
 }
 
 // src/components/SearchField.tsx
-var import_react194 = require("react");
+var import_react195 = require("react");
 var import_classnames45 = __toESM(require_classnames());
 var import_jsx_runtime60 = require("react/jsx-runtime");
 function SearchField2({
@@ -33891,7 +33900,7 @@ function SearchField2({
   className,
   ...props
 }) {
-  const [search, setSearch] = (0, import_react194.useState)(defaultValue);
+  const [search, setSearch] = (0, import_react195.useState)(defaultValue);
   const searchValue = useDebounce(search, delay);
   const handleChange = (value2) => {
     setSearch(value2);
@@ -33905,7 +33914,7 @@ function SearchField2({
     onSearch?.("");
     onChange?.("");
   };
-  (0, import_react194.useEffect)(() => {
+  (0, import_react195.useEffect)(() => {
     if (delay > 0) {
       onSearch?.(searchValue);
     }
@@ -33930,7 +33939,7 @@ function SearchField2({
 }
 
 // src/components/Select.tsx
-var import_react195 = require("react");
+var import_react196 = require("react");
 var import_classnames46 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Select.module.css
@@ -33958,7 +33967,7 @@ function Select2({
   children,
   ...props
 }) {
-  const [search, setSearch] = (0, import_react195.useState)("");
+  const [search, setSearch] = (0, import_react196.useState)("");
   const handleChange = (e) => {
     onSelectionChange?.(e);
     onChange?.(e);
@@ -34023,7 +34032,7 @@ function Select2({
 }
 
 // src/components/Sidebar.tsx
-var import_react196 = require("react");
+var import_react197 = require("react");
 var import_classnames47 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Sidebar.module.css
@@ -34031,7 +34040,7 @@ var Sidebar_default = { "sidebar": "Sidebar_sidebar__MDdkM", "header": "Sidebar_
 
 // src/components/Sidebar.tsx
 var import_jsx_runtime62 = require("react/jsx-runtime");
-var SidebarContext = (0, import_react196.createContext)(null);
+var SidebarContext = (0, import_react197.createContext)(null);
 function Sidebar({
   itemBackgroundColor = "2",
   isCollapsed,
@@ -34088,7 +34097,7 @@ function SidebarItem({
   children,
   ...props
 }) {
-  const { isCollapsed, itemBackgroundColor } = (0, import_react196.useContext)(SidebarContext);
+  const { isCollapsed, itemBackgroundColor } = (0, import_react197.useContext)(SidebarContext);
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, closeDelay: 0, isDisabled: !isCollapsed, children: [
     /* @__PURE__ */ (0, import_jsx_runtime62.jsx)($f645667febf57a63$export$35a3bebf7ef2d934, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
       Row,

package/dist/index.mjs

@@ -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(
@@ -28585,7 +28591,7 @@ function FormSubmitButton({
   ...props
 }) {
   const {
-    formState: { isDirty, isValid, isSubmitting, isSubmitted, isSubmitSuccessful }
+    formState: { isDirty, isValid, isSubmitting, isLoading: formLoading }
   } = useFormContext();
   return /* @__PURE__ */ jsx20(
     LoadingButton,
@@ -28593,8 +28599,8 @@ function FormSubmitButton({
       ...props,
       type: "submit",
       variant,
-      isDisabled: isDisabled !== void 0 ? isDisabled : !isDirty || !isValid || isSubmitting,
-      isLoading: isLoading !== void 0 ? isLoading : isSubmitting,
+      isDisabled: isDisabled ?? (!isDirty || !isValid || isSubmitting),
+      isLoading: isLoading ?? (formLoading || isSubmitting),
       children
     }
   );
@@ -32743,7 +32749,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 +32773,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 +32789,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);
         })
       }
     )

package/package.json

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