@timeax/form-palette 0.1.33 → 0.1.34

package/README.md

@@ -1118,16 +1118,28 @@ export function SelectExample() {
         clearable
 />
 
-<InputField
-        name="emails"
-        label="Allowed emails"
-        variant="chips"
-        textareaMode
-        placement="below"
-        addOnEnter
-        addOnBlur
-/>
-```
+<InputField
+        name="emails"
+        label="Allowed emails"
+        variant="chips"
+        textareaMode
+        placement="below"
+        addOnEnter
+        addOnBlur
+/>
+
+// Controlled usage: read/write chips from `e.value` (not e.target.value)
+const [tags, setTags] = React.useState<string[] | undefined>(["alpha"]);
+<InputField
+        name="tags_controlled"
+        label="Controlled tags"
+        variant="chips"
+        value={tags}
+        onChange={(e) => {
+          setTags(e.value);
+        }}
+/>
+```
 
 ## color
 

package/dist/extra.js

@@ -11271,6 +11271,9 @@ function clampToLimits(n3, min2, max2) {
 function isFiniteNumber(n3) {
   return typeof n3 === "number" && Number.isFinite(n3);
 }
+function sanitizeNumberish(value) {
+  return isFiniteNumber(value) ? value : null;
+}
 function resolveLocale(explicit) {
   if (explicit) return explicit;
   if (typeof navigator !== "undefined" && navigator.language)
@@ -11305,6 +11308,7 @@ function parseEditable(editable, locale, decimalSep) {
   return Number.isFinite(n3) ? n3 : null;
 }
 function formatDisplayNumber(n3, locale, opts, prefix, suffix) {
+  if (!isFiniteNumber(n3)) return "";
   const f2 = new Intl.NumberFormat(locale, opts).format(n3);
   return `${prefix != null ? prefix : ""}${f2}${suffix != null ? suffix : ""}`;
 }
@@ -11418,9 +11422,10 @@ var InputNumber = React74__namespace.memo(
     const emit = React74__namespace.useCallback(
       (event, value2) => {
         var _a2, _b, _c;
+        const safeValue = sanitizeNumberish(value2);
         (_c = props.onValueChange) == null ? void 0 : _c.call(props, {
           originalEvent: event,
-          value: value2,
+          value: safeValue,
           stopPropagation() {
             event == null ? void 0 : event.stopPropagation();
           },
@@ -11430,11 +11435,11 @@ var InputNumber = React74__namespace.memo(
           target: {
             name: (_a2 = props.name) != null ? _a2 : null,
             id: (_b = props.id) != null ? _b : null,
-            value: value2
+            value: safeValue
           }
         });
         if (props.onChange && event) {
-          props.onChange({ originalEvent: event, value: value2 });
+          props.onChange({ originalEvent: event, value: safeValue });
         }
       },
       [props]
@@ -11451,10 +11456,11 @@ var InputNumber = React74__namespace.memo(
     };
     const formatFromModel = React74__namespace.useCallback(
       (n3) => {
-        if (n3 == null) return "";
-        if (!props.format) return toEditableFromNumber(n3);
+        const safeNumber = sanitizeNumberish(n3);
+        if (safeNumber == null) return "";
+        if (!props.format) return toEditableFromNumber(safeNumber);
         const formatted = formatDisplayNumber(
-          n3,
+          safeNumber,
           locale,
           fmtOptions,
           props.prefix,
@@ -11485,11 +11491,12 @@ var InputNumber = React74__namespace.memo(
     );
     const syncFromPropsValue = React74__namespace.useCallback(
       (v2) => {
-        if (v2 == null) {
+        const safeValue = sanitizeNumberish(v2);
+        if (safeValue == null) {
           setDisplay("");
           return;
         }
-        const clamped = clampModel(v2);
+        const clamped = clampModel(safeValue);
         setDisplay(
           focused ? toEditableFromNumber(clamped) : formatFromModel(clamped)
         );
@@ -12052,6 +12059,9 @@ var __iconNode37 = [
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
 var X = createLucideIcon("x", __iconNode37);
+function sanitizeNumberish2(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
 var ShadcnNumberVariant = React74__namespace.default.forwardRef(function ShadcnNumberVariant2(props, forwardedRef) {
   const {
     showButtons,
@@ -12072,11 +12082,12 @@ var ShadcnNumberVariant = React74__namespace.default.forwardRef(function ShadcnN
   } = rest;
   const handleChange = React74__namespace.default.useCallback(
     (e4) => {
+      const safeValue = sanitizeNumberish2(e4.value);
       if (onValueChange) {
-        onValueChange(e4.value, {
+        onValueChange(safeValue != null ? safeValue : void 0, {
           source: "user",
           nativeEvent: e4.originalEvent,
-          raw: e4.value
+          raw: safeValue
         });
       }
     },
@@ -12084,21 +12095,21 @@ var ShadcnNumberVariant = React74__namespace.default.forwardRef(function ShadcnN
   );
   const handleStep = React74__namespace.default.useCallback(
     (direction, originalEvent) => {
-      var _a;
+      var _a, _b;
       if (disabled) return;
-      const current = value != null ? value : 0;
+      const current = (_a = sanitizeNumberish2(value)) != null ? _a : 0;
       let next = current + direction * step;
       if (typeof min2 === "number") next = Math.max(next, min2);
       if (typeof max2 === "number") next = Math.min(next, max2);
       const e4 = {
         originalEvent,
-        value: next,
+        value: sanitizeNumberish2(next),
         stopPropagation: () => originalEvent.stopPropagation(),
         preventDefault: () => originalEvent.preventDefault(),
         target: {
           name,
-          id: (_a = id != null ? id : inputId) != null ? _a : null,
-          value: next
+          id: (_b = id != null ? id : inputId) != null ? _b : null,
+          value: sanitizeNumberish2(next)
         }
       };
       handleChange(e4);
@@ -19134,7 +19145,18 @@ var ShadcnChipsVariant = React74__namespace.forwardRef(function ShadcnChipsVaria
     // rest of text UI bits (size, density, icons, etc.)
     ...restTextProps
   } = props;
-  const chips = React74__namespace.useMemo(() => value != null ? value : [], [value]);
+  const hasInvalidIncomingValue = value !== void 0 && !Array.isArray(value);
+  React74__namespace.useEffect(() => {
+    if (!hasInvalidIncomingValue) return;
+    console.warn(
+      "[form-palette] ShadcnChipsVariant expected `value` to be `string[] | undefined`; received:",
+      value
+    );
+  }, [hasInvalidIncomingValue, value]);
+  const chips = React74__namespace.useMemo(
+    () => Array.isArray(value) ? value : [],
+    [value]
+  );
   const hasChips = chips.length > 0;
   const [inputText, setInputText] = React74__namespace.useState("");
   const emitChange = React74__namespace.useCallback(