@godxjp/ui 13.11.0 → 13.11.2

package/dist/components/data-entry/date-picker.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { CalendarIcon, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
 import { parseDateInput, toIsoDate } from "../../lib/datetime/parse";
+import { useControlledLatch } from "../../lib/hooks";
 import { cn } from "../../lib/utils";
 import { Button } from "../general/button";
 import { Input } from "./input";
@@ -26,7 +27,7 @@ function DatePicker({
   const { t } = useTranslation();
   const { dayPickerLocale } = usePickerLocales(localeProp);
   const [open, setOpen] = React.useState(false);
-  const isControlled = React.useRef(valueProp !== void 0).current;
+  const isControlled = useControlledLatch(valueProp !== void 0);
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const value = isControlled ? valueProp : internalValue;
   const emit = (next) => {

package/dist/components/data-entry/date-range-picker.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { ArrowRight, CalendarIcon, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
 import { parseDateInput, toIsoDate } from "../../lib/datetime";
+import { useControlledLatch } from "../../lib/hooks";
 import { cn } from "../../lib/utils";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover";
 import { Calendar } from "./calendar";
@@ -27,7 +28,7 @@ function DateRangePicker({
   const autoId = React.useId();
   const fromId = id ?? autoId;
   const toId = `${fromId}-to`;
-  const isControlled = React.useRef(valueProp !== void 0).current;
+  const isControlled = useControlledLatch(valueProp !== void 0);
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const value = isControlled ? valueProp : internalValue;
   const [fromText, setFromText] = React.useState(() => toIsoDate(value?.from));

package/dist/components/data-entry/month-picker.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { CalendarIcon, ChevronLeft, ChevronRight, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
+import { useControlledLatch } from "../../lib/hooks";
 import { cn } from "../../lib/utils";
 import { Button } from "../general/button";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover";
@@ -32,7 +33,7 @@ function MonthPicker({
   const [open, setOpen] = React.useState(false);
   const autoId = React.useId();
   const inputId = id ?? autoId;
-  const isControlled = React.useRef(valueProp !== void 0).current;
+  const isControlled = useControlledLatch(valueProp !== void 0);
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const value = isControlled ? valueProp : internalValue;
   const [text, setText] = React.useState(() => toYmText(value));

package/dist/components/data-entry/month-range-picker.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ArrowRight, CalendarIcon, ChevronLeft, ChevronRight, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
+import { useControlledLatch } from "../../lib/hooks";
 import { cn } from "../../lib/utils";
 import { Button } from "../general/button";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover";
@@ -34,7 +35,7 @@ function MonthRangePicker({
   const autoId = React.useId();
   const fromId = id ?? autoId;
   const toId = `${fromId}-to`;
-  const isControlled = React.useRef(valueProp !== void 0).current;
+  const isControlled = useControlledLatch(valueProp !== void 0);
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const value = isControlled ? valueProp : internalValue;
   const [fromText, setFromText] = React.useState(() => toYmText(value?.from));

package/dist/lib/hooks.d.ts

@@ -11,5 +11,20 @@ export declare function useDebouncedValue<T>(value: T, delay?: number): T;
  * setState is scheduled asynchronously (setTimeout 0 / ms) — Rules of React safe.
  */
 export declare function useTimeoutFlag(signal: unknown, ms?: number): boolean;
+/**
+ * Controlled-ness latch for `value`/`defaultValue`/`onValueChange` controls
+ * whose empty state is `undefined` (pickers carrying `Date`/`DateRange`).
+ *
+ * A control counts as controlled once a DEFINED `value` has EVER been passed:
+ * - mounted with a defined `value` → controlled, and a later `value={undefined}`
+ *   stays controlled-EMPTY (not mistaken for uncontrolled);
+ * - mounted with `value={undefined}` (an empty form that later restores a
+ *   saved value) → uncontrolled until the first defined value arrives, then
+ *   PROMOTES to controlled for good.
+ *
+ * Fixing controlled-ness at mount (the previous behaviour) silently ignored
+ * every later controlled value in the second case.
+ */
+export declare function useControlledLatch(valueIsDefined: boolean): boolean;
 export declare function useMediaQuery(query: string): boolean;
 export declare function useIsMobile(): boolean;

package/dist/lib/hooks.js

@@ -35,6 +35,11 @@ function useTimeoutFlag(signal, ms = 2e3) {
   }, [signal, ms]);
   return Boolean(signal) && active;
 }
+function useControlledLatch(valueIsDefined) {
+  const [latched, setLatched] = useState(valueIsDefined);
+  if (valueIsDefined && !latched) setLatched(true);
+  return valueIsDefined || latched;
+}
 function useMediaQuery(query) {
   const isBrowser = typeof window !== "undefined";
   const getMatch = () => isBrowser ? window.matchMedia(query).matches : false;
@@ -63,6 +68,7 @@ function useIsMobile() {
   return useMediaQuery("(max-width: 767px)");
 }
 export {
+  useControlledLatch,
   useDebouncedValue,
   useIsMobile,
   useMediaQuery,

package/dist/styles/control.css

@@ -217,7 +217,11 @@
   .ui-choice-group[data-orientation="horizontal"] {
     display: flex;
     flex-wrap: wrap;
-    align-items: flex-start;
+    /* Occupy the control height and centre the row so a horizontal radio/checkbox
+     * group lines up with sibling inputs in a horizontal FormField (its options
+     * are only ~icon-height tall, which otherwise sat above the field label). */
+    align-items: center;
+    min-height: var(--control-height);
     column-gap: var(--choice-group-gap-x);
     row-gap: var(--choice-group-gap-y);
   }

package/dist/styles/form-layout.css

@@ -39,6 +39,14 @@
     min-width: 0;
     /* Cap the control width when a controlWidth is set; otherwise fill the column. */
     max-inline-size: var(--form-control-width, none);
+    /* Reserve the control-row height and centre the content so a SHORT control
+     * (switch, slider, rating, a bare checkbox/radio — anything thinner than an
+     * input) lines up with the label in a horizontal field instead of sitting
+     * high. `align-content: center` centres the content row without stretching
+     * the control; full-width inputs still fill via the 1fr column, and taller
+     * controls (textarea) simply grow past the floor. */
+    min-height: var(--control-height);
+    align-content: center;
   }
 
   /* Let controls (and helper/error) shrink within the cell instead of forcing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "13.11.0",
+  "version": "13.11.2",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,