@helpwave/hightide 0.8.0 → 0.8.1

package/dist/index.d.mts

@@ -2428,12 +2428,24 @@ declare const useFocusOnceVisible: (ref: RefObject<HTMLElement>, disable?: boole
 declare const useIsMounted: () => boolean;
 
 interface ControlledStateProps<T> {
+    /**
+     * The controlled value of the state.
+     *
+     * This is determines whether the state:
+     * 1. (value !== undefined) => controlled
+     * 2. (value === undefined) => uncontrolled
+     *
+     * If you need to include undefined as a valid state, you can set isControlled to true to force the component to be controlled.
+     */
     value?: T;
+    /** The callback whenever a setter changes the value */
     onValueChange?: (value: T) => void;
+    /** The default value to use if the component is uncontrolled */
     defaultValue?: T;
+    /** Forces the component to be controlled even if value is undefined */
     isControlled?: boolean;
 }
-declare const useControlledState: <T>({ value, onValueChange, defaultValue, isControlled: isEnforcingControlled }: ControlledStateProps<T>) => [T, react__default.Dispatch<react__default.SetStateAction<T>>];
+declare const useControlledState: <T>({ value: controlledValue, onValueChange, defaultValue, isControlled: isEnforcingControlled }: ControlledStateProps<T>) => [T, react__default.Dispatch<react__default.SetStateAction<T>>];
 
 declare function useEventCallbackStabilizer<T extends (...args: any[]) => any>(callback?: T): (...args: Parameters<T>) => ReturnType<T>;
 

package/dist/index.d.ts

@@ -2428,12 +2428,24 @@ declare const useFocusOnceVisible: (ref: RefObject<HTMLElement>, disable?: boole
 declare const useIsMounted: () => boolean;
 
 interface ControlledStateProps<T> {
+    /**
+     * The controlled value of the state.
+     *
+     * This is determines whether the state:
+     * 1. (value !== undefined) => controlled
+     * 2. (value === undefined) => uncontrolled
+     *
+     * If you need to include undefined as a valid state, you can set isControlled to true to force the component to be controlled.
+     */
     value?: T;
+    /** The callback whenever a setter changes the value */
     onValueChange?: (value: T) => void;
+    /** The default value to use if the component is uncontrolled */
     defaultValue?: T;
+    /** Forces the component to be controlled even if value is undefined */
     isControlled?: boolean;
 }
-declare const useControlledState: <T>({ value, onValueChange, defaultValue, isControlled: isEnforcingControlled }: ControlledStateProps<T>) => [T, react__default.Dispatch<react__default.SetStateAction<T>>];
+declare const useControlledState: <T>({ value: controlledValue, onValueChange, defaultValue, isControlled: isEnforcingControlled }: ControlledStateProps<T>) => [T, react__default.Dispatch<react__default.SetStateAction<T>>];
 
 declare function useEventCallbackStabilizer<T extends (...args: any[]) => any>(callback?: T): (...args: Parameters<T>) => ReturnType<T>;
 

package/dist/index.js

@@ -10378,28 +10378,34 @@ function resolveSetState(action, prev) {
 
 // src/hooks/useControlledState.ts
 var useControlledState = ({
-  value,
+  value: controlledValue,
   onValueChange,
   defaultValue,
   isControlled: isEnforcingControlled
 }) => {
-  const [internalValue, setInternalValue] = (0, import_react26.useState)(defaultValue);
-  const [isControlled] = (0, import_react26.useState)(isEnforcingControlled || value !== void 0);
+  const [internalValue, setInternalValue] = (0, import_react26.useState)(() => defaultValue);
+  const [isControlled] = (0, import_react26.useState)(isEnforcingControlled || controlledValue !== void 0);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
   useLogOnce(
     "useControlledState: Attempted to change from controlled to uncontrolled or vice versa.For a controlled state: isControlled === true OR value !== undefinedFor an uncontrolled state: isControlled === false OR value === undefined",
-    isControlled !== (isEnforcingControlled || value !== void 0),
+    isControlled !== (isEnforcingControlled || controlledValue !== void 0),
     { type: "error" }
   );
-  if (isControlled) {
-    return [value, onValueChangeStable];
-  }
-  const onChangeWrapper = (action) => {
-    const resolved = resolveSetState(action, internalValue);
-    setInternalValue(resolved);
+  const lastValue = (0, import_react26.useRef)(isControlled ? controlledValue : internalValue);
+  (0, import_react26.useEffect)(() => {
+    lastValue.current = isControlled ? controlledValue : internalValue;
+  }, [isControlled, controlledValue, internalValue]);
+  const setState = (0, import_react26.useCallback)((action) => {
+    const resolved = resolveSetState(action, lastValue.current);
+    if (resolved === lastValue.current) return;
+    if (!isControlled) {
+      lastValue.current = resolved;
+      setInternalValue(resolved);
+    }
     onValueChangeStable(resolved);
-  };
-  return [internalValue, onChangeWrapper];
+  }, [onValueChangeStable, isControlled]);
+  const value = isControlled ? controlledValue : internalValue;
+  return [value, setState];
 };
 
 // src/components/layout/Expandable.tsx
@@ -15613,16 +15619,16 @@ var Checkbox = ({
       onClick: (event) => {
         if (!disabled) {
           setValue((prev) => !prev);
-          props.onClick?.(event);
         }
+        props.onClick?.(event);
       },
       onKeyDown: (event) => {
         if (disabled) return;
         if (event.key === " " || event.key === "Enter") {
           event.preventDefault();
           setValue((prev) => !prev);
-          props.onKeyDown?.(event);
         }
+        props.onKeyDown?.(event);
       },
       "data-checked": !indeterminate ? value : "indeterminate",
       "data-size": size ?? void 0,