@fuf-stack/uniform 1.4.2 → 1.5.0

package/dist/chunk-76KOVUDN.js

@@ -0,0 +1,138 @@
+// src/helpers/nullishFields/nullishFields.ts
+var flatArrayKey = "__FLAT__";
+var nullString = "__NULL__";
+var falseString = "__FALSE__";
+var zeroString = "__ZERO__";
+var fromNullishString = (value) => {
+  if (Array.isArray(value)) {
+    return value.map((entry) => {
+      if (entry && typeof entry === "object") {
+        const record = entry;
+        if (flatArrayKey in record) {
+          const inner = record[flatArrayKey];
+          if (inner === "") {
+            return null;
+          }
+          return fromNullishString(inner);
+        }
+      }
+      return fromNullishString(entry);
+    });
+  }
+  if (typeof value !== "string") {
+    return value;
+  }
+  switch (value) {
+    case nullString:
+      return null;
+    case falseString:
+      return false;
+    case zeroString:
+      return 0;
+    default:
+      return value;
+  }
+};
+var toNullishString = (value) => {
+  if (Array.isArray(value)) {
+    const isPrimitive = (v) => {
+      return v === null || ["string", "number", "boolean"].includes(typeof v);
+    };
+    const isPrimitiveArray = value.every(isPrimitive);
+    if (isPrimitiveArray) {
+      return value.map((v) => {
+        return { [flatArrayKey]: v };
+      });
+    }
+    return value;
+  }
+  if (value === null || value === "") {
+    return nullString;
+  }
+  if (value === false) {
+    return falseString;
+  }
+  if (value === 0) {
+    return zeroString;
+  }
+  return value;
+};
+var toFormFormat = (fields) => {
+  const formFormatJson = JSON.stringify(fields, (_, value) => {
+    if (Array.isArray(value)) {
+      return toNullishString(value);
+    }
+    if (value && typeof value === "object") {
+      const record = value;
+      if (flatArrayKey in record) {
+        return value;
+      }
+      return Object.fromEntries(
+        Object.entries(value).filter(([_key, v]) => {
+          return v !== "" && v !== null;
+        })
+      );
+    }
+    return value;
+  });
+  return JSON.parse(formFormatJson);
+};
+var toValidationFormat = (formState) => {
+  if (formState === void 0 || formState === null) {
+    return formState;
+  }
+  const validationFormatJson = JSON.stringify(formState, (_, value) => {
+    if (Array.isArray(value)) {
+      return value.map((v) => {
+        if (v && typeof v === "object") {
+          const record = v;
+          if (flatArrayKey in record) {
+            const inner = record[flatArrayKey];
+            if (inner === "") {
+              return null;
+            }
+            return fromNullishString(inner);
+          }
+        }
+        return fromNullishString(v);
+      });
+    }
+    if (value && typeof value === "object") {
+      return Object.fromEntries(
+        Object.entries(value).filter(([_key, v]) => {
+          if (v && typeof v === "object") {
+            const record = v;
+            if (flatArrayKey in record) {
+              const convertedInner = fromNullishString(record[flatArrayKey]);
+              return convertedInner !== "" && convertedInner !== null;
+            }
+          }
+          if (Array.isArray(v) && v.length === 0) {
+            return false;
+          }
+          const converted = fromNullishString(v);
+          return converted !== "" && converted !== null;
+        }).map(([k, v]) => {
+          if (v && typeof v === "object") {
+            const record = v;
+            if (flatArrayKey in record) {
+              return [k, fromNullishString(record[flatArrayKey])];
+            }
+          }
+          return [k, fromNullishString(v)];
+        })
+      );
+    }
+    return value;
+  });
+  return JSON.parse(validationFormatJson);
+};
+
+export {
+  flatArrayKey,
+  fromNullishString,
+  toNullishString,
+  toFormFormat,
+  toValidationFormat
+};
+//# sourceMappingURL=chunk-76KOVUDN.js.map

package/dist/chunk-76KOVUDN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/helpers/nullishFields/nullishFields.ts"],"sourcesContent":["/** Key used to wrap flat array elements when converting to form format */\nexport const flatArrayKey = '__FLAT__';\n\n/**\n * String markers used to preserve null, false, and 0 values during JSON processing\n */\nconst nullString = '__NULL__';\nconst falseString = '__FALSE__';\nconst zeroString = '__ZERO__';\n\n/**\n * Converts marker strings back to their original values when processing arrays\n */\nexport const fromNullishString = (value: unknown): unknown => {\n  // Support arrays: unwrap flat wrappers and convert marker strings per entry\n  if (Array.isArray(value)) {\n    return (value as unknown[]).map((entry) => {\n      if (entry && typeof entry === 'object') {\n        const record = entry as Record<string, unknown>;\n        if (flatArrayKey in record) {\n          const inner = record[flatArrayKey];\n          // For arrays, treat empty string as null (placeholder input)\n          if (inner === '') {\n            return null;\n          }\n          return fromNullishString(inner);\n        }\n      }\n      return fromNullishString(entry);\n    });\n  }\n\n  if (typeof value !== 'string') {\n    return value;\n  }\n\n  switch (value) {\n    case nullString:\n      return null;\n    case falseString:\n      return false;\n    case zeroString:\n      return 0;\n    default:\n      return value;\n  }\n};\n\n/**\n * Converts null/falsy values to marker strings for JSON processing\n */\nexport const toNullishString = (value: unknown): unknown => {\n  if (Array.isArray(value)) {\n    // Only wrap arrays of primitives; leave arrays of objects as-is\n    const isPrimitive = (v: unknown) => {\n      return v === null || ['string', 'number', 'boolean'].includes(typeof v);\n    };\n    const isPrimitiveArray = (value as unknown[]).every(isPrimitive);\n    if (isPrimitiveArray) {\n      return (value as unknown[]).map((v) => {\n        // Store raw primitive; do not convert to marker strings inside the wrapper\n        return { [flatArrayKey]: v } as Record<string, unknown>;\n      });\n    }\n    return value;\n  }\n  if (value === null || value === '') {\n    return nullString;\n  }\n  if (value === false) {\n    return falseString;\n  }\n  if (value === 0) {\n    return zeroString;\n  }\n  return value;\n};\n\n/**\n * Converts field values to a format suitable for forms by:\n * - Wrapping arrays of primitives as objects using the flatArrayKey `__FLAT__`\n *   to satisfy RHF's requirement that array fields contain objects\n * - Removing empty strings and null values from objects\n *\n * This conversion is required because React Hook Form does not support arrays with\n * flat values (string, number, boolean, null). Array fields must contain objects.\n * We work around this by wrapping primitive entries: `{ __FLAT__: <value> }`.\n *\n * @example\n * const fields = {\n *   name: 'John',\n *   scores: [0, null, 75, false],\n *   scoresDetailed: [\n *     { score: 1 },\n *     { score: null },\n *     { score: 0 },\n *     { score: false },\n *     { score: '' },\n *   ],\n *   contact: {\n *     email: '',\n *     phone: null,\n *     address: '123 Main St'\n *   }\n * };\n *\n * // Result:\n * {\n *   name: 'John',\n *   scores: [\n *     { __FLAT__: 0 },\n *     { __FLAT__: null },\n *     { __FLAT__: 75 },\n *     { __FLAT__: false }\n *   ],\n *   // Arrays of objects are left as objects; empty/null properties are removed\n *   scoresDetailed: [\n *     { score: 1 },\n *     {}, // null score removed\n *     { score: 0 },\n *     { score: false },\n *     {}, // empty string removed\n *   ],\n *   contact: {\n *     address: '123 Main St'\n *   }\n * }\n */\nexport const toFormFormat = (fields: Record<string, unknown>) => {\n  const formFormatJson = JSON.stringify(fields, (_, value) => {\n    if (Array.isArray(value)) {\n      // Delegate to toNullishString to ensure consistent handling\n      return toNullishString(value);\n    }\n\n    if (value && typeof value === 'object') {\n      // Preserve flat-array wrappers as-is (do not filter their inner values here)\n      const record = value as Record<string, unknown>;\n      if (flatArrayKey in record) {\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n        return value;\n      }\n      return Object.fromEntries(\n        Object.entries(value).filter(([_key, v]) => {\n          return v !== '' && v !== null;\n        }),\n      );\n    }\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n    return value;\n  });\n\n  return JSON.parse(formFormatJson) as Record<string, unknown>;\n};\n\n/**\n * Converts form state to a format suitable for validation by:\n * - Unwrapping flat array wrappers `{ __FLAT__: <value> }` back to primitives\n * - Converting legacy string markers (__NULL__, __FALSE__, __ZERO__) back to their original values\n * - Removing fields whose converted value is empty string or null\n * - Removing empty arrays\n *\n * @example\n * const formState = {\n *   name: 'John',\n *   scores: [\n *     { __FLAT__: 75 },\n *     { __FLAT__: 0 },\n *     { __FLAT__: null },\n *     { __FLAT__: false }\n *   ],\n *   emptyArray: [],\n *   scoresDetailed: [\n *     { score: 1 },\n *     {},\n *     { score: 0 },\n *     { score: false },\n *     {},\n *   ],\n *   contact: {\n *     address: '123 Main St',\n *     fax: null\n *   }\n * };\n *\n * // Result:\n * {\n *   name: 'John',\n *   scores: [75, 0, null, false],\n *   // emptyArray is removed\n *   // Objects inside arrays remain objects; empty entries remain empty objects\n *   scoresDetailed: [\n *     { score: 1 },\n *     {},\n *     { score: 0 },\n *     { score: false },\n *     {},\n *   ],\n *   contact: {\n *     address: '123 Main St'\n *   }\n * }\n */\nexport const toValidationFormat = (\n  formState: Record<string, unknown> | null | undefined,\n): Record<string, unknown> | null | undefined => {\n  // Handle null or undefined input\n  if (formState === undefined || formState === null) {\n    return formState;\n  }\n\n  const validationFormatJson = JSON.stringify(formState, (_, value) => {\n    if (Array.isArray(value)) {\n      return value.map((v) => {\n        // Unwrap new wrapper format { __FLAT__: <value> }\n        if (v && typeof v === 'object') {\n          const record = v as Record<string, unknown>;\n          if (flatArrayKey in record) {\n            const inner = record[flatArrayKey];\n            // Treat empty string from forms as null in validation format\n            if (inner === '') {\n              return null;\n            }\n            return fromNullishString(inner);\n          }\n        }\n        // Backward compatibility for string markers\n        return fromNullishString(v);\n      });\n    }\n\n    if (value && typeof value === 'object') {\n      // Object branch: remove keys that resolve to empty/null after marker conversion\n      // and unwrap flat-array wrappers if present.\n      //\n      // Why this shape?\n      // - Forms may contain objects with placeholder/empty values that should not\n      //   be part of the validation payload (e.g. \"\" or __NULL__ markers).\n      // - Arrays of primitives are stored as wrapper objects { __FLAT__: <value> }\n      //   to satisfy RHF structure constraints. When converting back for\n      //   validation, we need to treat wrappers whose inner value resolves to\n      //   empty/null as removable, and unwrap non-empty wrappers to the primitive.\n      return Object.fromEntries(\n        Object.entries(value)\n          .filter(([_key, v]) => {\n            // If this is a flat-array wrapper, convert the inner value first and\n            // drop the key when the inner resolves to empty string or null.\n            if (v && typeof v === 'object') {\n              const record = v as Record<string, unknown>;\n              if (flatArrayKey in record) {\n                const convertedInner = fromNullishString(record[flatArrayKey]);\n                return convertedInner !== '' && convertedInner !== null;\n              }\n            }\n            // Drop empty arrays\n            if (Array.isArray(v) && v.length === 0) {\n              return false;\n            }\n            // For regular values, convert markers and drop when empty/null.\n            const converted = fromNullishString(v);\n            return converted !== '' && converted !== null;\n          })\n          .map(([k, v]) => {\n            // Unwrap flat-array wrappers to raw primitives after conversion.\n            if (v && typeof v === 'object') {\n              const record = v as Record<string, unknown>;\n              if (flatArrayKey in record) {\n                return [k, fromNullishString(record[flatArrayKey])];\n              }\n            }\n            // For other values, just convert markers.\n            return [k, fromNullishString(v)];\n          }),\n      );\n    }\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-return\n    return value;\n  });\n\n  return JSON.parse(validationFormatJson) as Record<string, unknown>;\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-FHRMVL6B.js → chunk-AYWMAPAX.js}

@@ -1,14 +1,8 @@
 import {
-  FieldCopyTestIdButton_default
-} from "./chunk-NTDKZW4E.js";
-import {
-  FieldValidationError_default
-} from "./chunk-CQWA2DFV.js";
-import {
-  useController,
-  useFormContext
-} from "./chunk-IYDCKENI.js";
+  useUniformField
+} from "./chunk-CJD3DW4J.js";
 import {
+  __objRest,
   __spreadProps,
   __spreadValues
 } from "./chunk-K2V4ULA2.js";
@@ -74,86 +68,85 @@ var DropdownIndicatorComponent = (props) => {
   const testId = props == null ? void 0 : props.selectProps["data-testid"];
   return /* @__PURE__ */ jsx("div", { "data-testid": `${testId}_select_dropdown`, children: /* @__PURE__ */ jsx(components.DropdownIndicator, __spreadValues({}, props)) });
 };
-var Select = ({
-  className = void 0,
-  clearable = true,
-  disabled = false,
-  filterOption = void 0,
-  renderOptionLabel = void 0,
-  inputValue = void 0,
-  label: _label = void 0,
-  loading = false,
-  multiSelect = false,
-  name,
-  onInputChange = void 0,
-  options,
-  placeholder = void 0,
-  testId: _testId = void 0
-}) => {
-  var _a;
-  const { control, debugMode, getFieldState } = useFormContext();
-  const { error, invalid, required, testId } = getFieldState(name, _testId);
-  const { field } = useController({ control, disabled, name });
-  const { onChange, value, ref, onBlur } = field;
-  const [isFocused, setIsFocused] = useState(false);
-  const variants = selectVariants();
-  const classNames = variantsToClassNames(variants, className, "base");
+var Select = (_a) => {
+  var _b = _a, {
+    className = void 0,
+    clearable = true,
+    filterOption = void 0,
+    renderOptionLabel = void 0,
+    inputValue = void 0,
+    loading = false,
+    multiSelect = false,
+    name,
+    onInputChange = void 0,
+    options,
+    placeholder = void 0
+  } = _b, uniformFieldProps = __objRest(_b, [
+    "className",
+    "clearable",
+    "filterOption",
+    "renderOptionLabel",
+    "inputValue",
+    "loading",
+    "multiSelect",
+    "name",
+    "onInputChange",
+    "options",
+    "placeholder"
+  ]);
+  var _a2;
   const {
-    getBaseProps,
+    disabled,
+    errorMessage,
+    field: { onBlur, onChange, ref, value },
     getErrorMessageProps,
     getHelperWrapperProps,
     getLabelProps,
-    getTriggerProps,
-    getValueProps,
-    label
-  } = useSelect({
+    invalid,
+    label,
+    required,
+    testId
+  } = useUniformField(__spreadValues({ name }, uniformFieldProps));
+  const [isFocused, setIsFocused] = useState(false);
+  const variants = selectVariants();
+  const classNames = variantsToClassNames(variants, className, "base");
+  const { getBaseProps, getTriggerProps, getValueProps } = useSelect({
     children: [],
     classNames,
-    errorMessage: JSON.stringify(error),
+    errorMessage,
     isDisabled: disabled,
     isInvalid: invalid,
     isLoading: loading,
     isRequired: required,
-    label: _label,
-    labelPlacement: "outside",
-    placeholder: " "
+    label,
+    labelPlacement: "outside"
   });
-  const showTestIdCopyButton = debugMode === "debug-testids";
-  const showLabel = label || showTestIdCopyButton;
   return /* @__PURE__ */ jsxs(
     "div",
     __spreadProps(__spreadValues({}, getBaseProps()), {
       className: cn(classNames.base),
-      "data-testid": `${testId}_wrapper`,
       "data-required": required,
+      "data-testid": `${testId}_wrapper`,
       children: [
-        showLabel ? /* @__PURE__ */ jsxs(
+        label ? /* @__PURE__ */ jsx(
           "label",
           {
             className: classNames.label,
             "data-slot": "label",
             htmlFor: `react-select-${name}-input`,
             id: getLabelProps().id,
-            children: [
-              label,
-              showTestIdCopyButton ? /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId }) : null
-            ]
+            children: label
           }
         ) : null,
         /* @__PURE__ */ jsx(
           ReactSelect,
           {
+            ref,
             menuShouldBlockScroll: true,
             unstyled: true,
             "aria-errormessage": "",
             "aria-invalid": invalid,
-            components: {
-              Input: InputComponent,
-              Option: OptionComponent,
-              DropdownIndicator: DropdownIndicatorComponent,
-              Control: ControlComponent
-            },
-            "aria-labelledby": (_a = getTriggerProps()["aria-labelledby"]) == null ? void 0 : _a.split(" ")[1],
+            "aria-labelledby": (_a2 = getTriggerProps()["aria-labelledby"]) == null ? void 0 : _a2.split(" ")[1],
             "data-testid": testId,
             filterOption,
             formatOptionLabel: renderOptionLabel,
@@ -162,50 +155,101 @@ var Select = ({
             isClearable: clearable,
             isDisabled: disabled,
             isLoading: loading,
-            name,
             isMulti: multiSelect,
             menuPosition: "fixed",
+            name,
             onInputChange,
             options,
             placeholder,
             classNames: {
-              control: () => cn(classNames.control, {
-                [classNames.control_focused]: isFocused && !invalid
-              }),
-              clearIndicator: () => classNames.clearIndicator,
-              dropdownIndicator: () => classNames.dropdownIndicator,
-              groupHeading: () => classNames.groupHeading,
-              indicatorsContainer: () => classNames.indicatorsContainer,
-              indicatorSeparator: () => classNames.indicatorSeparator,
-              loadingIndicator: () => classNames.loadingIndicator,
-              loadingMessage: () => classNames.loadingMessage,
-              input: () => classNames.input,
-              menu: () => classNames.menu,
-              menuList: () => classNames.menuList,
-              menuPortal: () => classNames.menuPortal,
-              multiValue: () => classNames.multiValue,
-              multiValueLabel: () => cn(classNames.multiValueLabel, `${getValueProps().className}`),
-              multiValueRemove: () => classNames.multiValueRemove,
-              noOptionsMessage: () => classNames.noOptionsMessage,
+              control: () => {
+                return cn(classNames.control, {
+                  [classNames.control_focused]: isFocused && !invalid
+                });
+              },
+              clearIndicator: () => {
+                return classNames.clearIndicator;
+              },
+              dropdownIndicator: () => {
+                return classNames.dropdownIndicator;
+              },
+              groupHeading: () => {
+                return classNames.groupHeading;
+              },
+              indicatorsContainer: () => {
+                return classNames.indicatorsContainer;
+              },
+              indicatorSeparator: () => {
+                return classNames.indicatorSeparator;
+              },
+              loadingIndicator: () => {
+                return classNames.loadingIndicator;
+              },
+              loadingMessage: () => {
+                return classNames.loadingMessage;
+              },
+              input: () => {
+                return classNames.input;
+              },
+              menu: () => {
+                return classNames.menu;
+              },
+              menuList: () => {
+                return classNames.menuList;
+              },
+              menuPortal: () => {
+                return classNames.menuPortal;
+              },
+              multiValue: () => {
+                return classNames.multiValue;
+              },
+              multiValueLabel: () => {
+                return cn(
+                  classNames.multiValueLabel,
+                  `${getValueProps().className}`
+                );
+              },
+              multiValueRemove: () => {
+                return classNames.multiValueRemove;
+              },
+              noOptionsMessage: () => {
+                return classNames.noOptionsMessage;
+              },
               option: ({
                 isFocused: optionIsFocused,
                 isSelected: optionIsSelected
-              }) => cn(classNames.option, {
-                [classNames.option_focused]: optionIsFocused,
-                [classNames.option_selected]: optionIsSelected
-              }),
-              placeholder: () => classNames.placeholder,
-              singleValue: () => cn(classNames.singleValue, `${getValueProps().className}`),
-              valueContainer: () => classNames.valueContainer
+              }) => {
+                return cn(classNames.option, {
+                  [classNames.option_focused]: optionIsFocused,
+                  [classNames.option_selected]: optionIsSelected
+                });
+              },
+              placeholder: () => {
+                return classNames.placeholder;
+              },
+              singleValue: () => {
+                return cn(classNames.singleValue, `${getValueProps().className}`);
+              },
+              valueContainer: () => {
+                return classNames.valueContainer;
+              }
+            },
+            components: {
+              Input: InputComponent,
+              Option: OptionComponent,
+              DropdownIndicator: DropdownIndicatorComponent,
+              Control: ControlComponent
             },
             onBlur: (_e) => {
               setIsFocused(false);
-              return onBlur();
+              onBlur();
             },
             onChange: (option) => {
               if (multiSelect) {
                 onChange(
-                  option == null ? void 0 : option.map((_option) => _option.value)
+                  option == null ? void 0 : option.map((_option) => {
+                    return _option.value;
+                  })
                 );
               } else {
                 onChange(option == null ? void 0 : option.value);
@@ -214,11 +258,12 @@ var Select = ({
             onFocus: (_e) => {
               setIsFocused(true);
             },
-            ref,
-            value: options.find((option) => option.value === value)
+            value: options.find((option) => {
+              return option.value === value;
+            })
           }
         ),
-        error ? /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, getHelperWrapperProps()), { children: /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, getErrorMessageProps()), { children: /* @__PURE__ */ jsx(FieldValidationError_default, { error, testId }) })) })) : null
+        invalid ? /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, getHelperWrapperProps()), { children: /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, getErrorMessageProps()), { children: errorMessage })) })) : null
       ]
     })
   );
@@ -232,4 +277,4 @@ export {
   Select_default,
   Select_default2
 };
-//# sourceMappingURL=chunk-FHRMVL6B.js.map
+//# sourceMappingURL=chunk-AYWMAPAX.js.map

package/dist/chunk-AYWMAPAX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Select/Select.tsx","../src/Select/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { Props } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\n\nexport const selectVariants = tv({\n  slots: {\n    base: 'group leading-normal',\n    clearIndicator:\n      'text-foreground-500 hover:bg-default-200 hover:text-foreground-800 rounded-md p-1 hover:cursor-pointer',\n    control:\n      'border-default-200 bg-content1 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger rounded-lg border-2 duration-150! motion-reduce:transition-none',\n    control_focused: 'border-focus',\n    crossIcon: '',\n    downChevron: '',\n    dropdownIndicator:\n      'text-foreground-500 hover:bg-default-200 rounded-md p-1 hover:cursor-pointer hover:text-black',\n    group: '',\n    groupHeading: 'text-foreground-500 mt-2 mb-1 ml-3 text-sm',\n    indicatorsContainer: 'gap-1 p-1',\n    indicatorSeparator: 'bg-default-300',\n    input: 'py-0.5 pl-1',\n    // see HeroUI styles for group-data condition,\n    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n    label:\n      'text-small group-data-[invalid=true]:!text-danger group-data-[required=true]:after:text-danger pointer-events-auto relative bottom-1.5 ml-1 subpixel-antialiased group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:content-[\"*\"]',\n    loadingIndicator: '',\n    loadingMessage: 'text-foreground-500 rounded-sm p-2',\n    menu: 'border-default-200 bg-content1 mt-2 rounded-xl border p-1 shadow-lg',\n    menuList: '',\n    // ensure menu has same z-index as modal so it is visible when rendered in modal\n    // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n    menuPortal: 'z-50!',\n    multiValue: 'bg-default-100 items-center gap-1.5 rounded py-0.5 pr-1 pl-2',\n    multiValueContainer: '',\n    multiValueLabel: 'py-0.5 leading-6',\n    multiValueRemove:\n      'text-default-500 hover:border-default-300 hover:text-default-800 rounded hover:cursor-pointer',\n    noOptionsMessage: 'text-foreground-500 rounded-sm p-2',\n    option_focused: 'bg-default-100 active:bg-default-200',\n    option_selected: 'bg-default-300',\n    option: 'rounded px-3 py-2 hover:cursor-pointer',\n    placeholder: 'text-foreground-500 ml-1 py-0.5 pl-1 text-sm',\n    selectContainer: '',\n    singleValue: 'ml-1! leading-7!',\n    valueContainer: 'gap-1 p-1',\n  },\n});\n\ninterface SelectOption {\n  /** option label */\n  label?: React.ReactNode;\n  /** option value */\n  value: string;\n}\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName; // string;\n  /** Determine if the  */\n  clearable?: boolean;\n  /** Set the select to disabled state. */\n  disabled?: boolean;\n  /** Filter Select Options */\n  filterOption?:\n    | undefined\n    | ((option?: SelectOption, inputValue?: string) => boolean);\n  /** Format the label of the option */\n  renderOptionLabel?: undefined | Props['formatOptionLabel'];\n  /** The value of the search input */\n  inputValue?: string;\n  /** Label that should be associated with the select. */\n  label?: React.ReactNode;\n  /** Set the select to a loading state. */\n  loading?: boolean;\n  /** switch between single and multi select mode. */\n  multiSelect?: boolean;\n  /** The name for the Select component, used by react-hook-form */\n  name: string;\n  /** Placeholder that is displayed when nothing is selected */\n  placeholder?: string;\n  /** The options for the Select component */\n  options: SelectOption[];\n  /** Handle change events on the input */\n  onInputChange?: Props['onInputChange'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}`;\n\n  return <components.Input data-testid={testId} {...props} />;\n};\n\nconst ControlComponent: typeof components.Control = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select`;\n  return (\n    <div data-testid={testId}>\n      {}\n      <components.Control {...props} />\n    </div>\n  );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n  // @ts-expect-error data-testid is not a default prop\n  // eslint-disable-next-line react/destructuring-assignment\n  const testId = `${props.selectProps['data-testid']}_select_option_${slugify(props?.data?.testId ?? props?.data?.value, { replaceDots: true })}`;\n  return (\n    <div data-testid={testId}>\n      {}\n      <components.Option {...props} />\n    </div>\n  );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n  props,\n) => {\n  // @ts-expect-error data-testid is not a default prop\n\n  const testId = props?.selectProps['data-testid'] as string;\n  return (\n    <div data-testid={`${testId}_select_dropdown`}>\n      {}\n      <components.DropdownIndicator {...props} />\n    </div>\n  );\n};\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n  className = undefined,\n  clearable = true,\n  filterOption = undefined,\n  renderOptionLabel = undefined,\n  inputValue = undefined,\n  loading = false,\n  multiSelect = false,\n  name,\n  onInputChange = undefined,\n  options,\n  placeholder = undefined,\n  ...uniformFieldProps\n}: SelectProps) => {\n  const {\n    disabled,\n    errorMessage,\n    field: { onBlur, onChange, ref, value },\n    getErrorMessageProps,\n    getHelperWrapperProps,\n    getLabelProps,\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({ name, ...uniformFieldProps });\n\n  const [isFocused, setIsFocused] = useState(false);\n\n  // classNames from slots\n  const variants = selectVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const { getBaseProps, getTriggerProps, getValueProps } = useSelect({\n    children: [],\n    classNames,\n    errorMessage,\n    isDisabled: disabled,\n    isInvalid: invalid,\n    isLoading: loading,\n    isRequired: required,\n    label,\n    labelPlacement: 'outside',\n  });\n\n  return (\n    <div\n      {...getBaseProps()}\n      className={cn(classNames.base)}\n      // see HeroUI styles for group-data condition (data-invalid),\n      // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n      data-required={required}\n      data-testid={`${testId}_wrapper`}\n    >\n      {label ? (\n        <label\n          className={classNames.label}\n          data-slot=\"label\"\n          htmlFor={`react-select-${name}-input`}\n          id={getLabelProps().id}\n        >\n          {label}\n        </label>\n      ) : null}\n      <ReactSelect\n        ref={ref}\n        menuShouldBlockScroll\n        unstyled\n        aria-errormessage=\"\"\n        aria-invalid={invalid}\n        aria-labelledby={getTriggerProps()['aria-labelledby']?.split(' ')[1]}\n        // Does not affect the testId of the select, but is needed to pass it to sub-components\n        data-testid={testId}\n        filterOption={filterOption}\n        formatOptionLabel={renderOptionLabel}\n        inputValue={inputValue}\n        instanceId={name}\n        isClearable={clearable}\n        isDisabled={disabled}\n        isLoading={loading}\n        isMulti={multiSelect}\n        // set menuPosition to fixed so that menu can be rendered\n        // inside Card / Modal components, menuShouldBlockScroll\n        // prevents container scroll when menu is open\n        menuPosition=\"fixed\"\n        name={name}\n        onInputChange={onInputChange}\n        options={options}\n        placeholder={placeholder}\n        classNames={{\n          control: () => {\n            return cn(classNames.control, {\n              [classNames.control_focused]: isFocused && !invalid,\n            });\n          },\n          clearIndicator: () => {\n            return classNames.clearIndicator;\n          },\n          dropdownIndicator: () => {\n            return classNames.dropdownIndicator;\n          },\n          groupHeading: () => {\n            return classNames.groupHeading;\n          },\n          indicatorsContainer: () => {\n            return classNames.indicatorsContainer;\n          },\n          indicatorSeparator: () => {\n            return classNames.indicatorSeparator;\n          },\n          loadingIndicator: () => {\n            return classNames.loadingIndicator;\n          },\n          loadingMessage: () => {\n            return classNames.loadingMessage;\n          },\n          input: () => {\n            return classNames.input;\n          },\n          menu: () => {\n            return classNames.menu;\n          },\n          menuList: () => {\n            return classNames.menuList;\n          },\n          menuPortal: () => {\n            return classNames.menuPortal;\n          },\n          multiValue: () => {\n            return classNames.multiValue;\n          },\n          multiValueLabel: () => {\n            return cn(\n              classNames.multiValueLabel,\n              `${getValueProps().className}`,\n            );\n          },\n          multiValueRemove: () => {\n            return classNames.multiValueRemove;\n          },\n          noOptionsMessage: () => {\n            return classNames.noOptionsMessage;\n          },\n          option: ({\n            isFocused: optionIsFocused,\n            isSelected: optionIsSelected,\n          }) => {\n            return cn(classNames.option, {\n              [classNames.option_focused]: optionIsFocused,\n              [classNames.option_selected]: optionIsSelected,\n            });\n          },\n          placeholder: () => {\n            return classNames.placeholder;\n          },\n          singleValue: () => {\n            return cn(classNames.singleValue, `${getValueProps().className}`);\n          },\n          valueContainer: () => {\n            return classNames.valueContainer;\n          },\n        }}\n        components={{\n          Input: InputComponent,\n          Option: OptionComponent,\n          DropdownIndicator: DropdownIndicatorComponent,\n          Control: ControlComponent,\n        }}\n        onBlur={(_e) => {\n          setIsFocused(false);\n          onBlur();\n        }}\n        onChange={(option) => {\n          if (multiSelect) {\n            onChange(\n              (option as SelectOption[])?.map((_option) => {\n                return _option.value;\n              }),\n            );\n          } else {\n            onChange((option as SelectOption)?.value);\n          }\n        }}\n        onFocus={(_e) => {\n          setIsFocused(true);\n        }}\n        // set complete option as value by current field value\n        value={options.find((option) => {\n          return option.value === value;\n        })}\n      />\n      {invalid ? (\n        <div {...getHelperWrapperProps()}>\n          {}\n          <div {...getErrorMessageProps()}>{errorMessage}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps } from './Select';\n\nexport { Select };\n\nexport default Select;\n"],"mappings":"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","names":["_a","Select_default"]}

package/dist/chunk-BWPTCHL7.cjs

@@ -0,0 +1,103 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkC5GIWGQRcjs = require('./chunk-C5GIWGQR.cjs');
+
+
+var _chunkFLK6OPFYcjs = require('./chunk-FLK6OPFY.cjs');
+
+
+
+var _chunk555JRYCScjs = require('./chunk-555JRYCS.cjs');
+
+// src/TextArea/TextArea.tsx
+var _input = require('@heroui/input');
+var _pixelutils = require('@fuf-stack/pixel-utils');
+var _jsxruntime = require('react/jsx-runtime');
+var textAreaVariants = _pixelutils.tv.call(void 0, {
+  slots: {
+    /** wrapper around the whole input */
+    base: "",
+    /** clear button */
+    clearButton: "",
+    /** actual input element */
+    input: "",
+    /** inner wrapper (HeroUI inputWrapper slot) */
+    inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
+  }
+});
+var TextArea = (_a) => {
+  var _b = _a, {
+    children = null,
+    className: _className = void 0,
+    debounceDelay = 300,
+    name,
+    placeholder = " "
+  } = _b, uniformFieldProps = _chunk555JRYCScjs.__objRest.call(void 0, _b, [
+    "children",
+    "className",
+    "debounceDelay",
+    "name",
+    "placeholder"
+  ]);
+  const {
+    disabled,
+    errorMessage,
+    field: {
+      onChange: fieldOnChange,
+      onBlur: fieldOnBlur,
+      value: fieldValue,
+      ref
+    },
+    invalid,
+    label,
+    required,
+    testId
+  } = _chunkC5GIWGQRcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, { name }, uniformFieldProps));
+  const { onChange, onBlur, value } = _chunkFLK6OPFYcjs.useInputValueDebounce.call(void 0, {
+    debounceDelay,
+    onBlur: fieldOnBlur,
+    onChange: fieldOnChange,
+    value: fieldValue
+  });
+  const variants = textAreaVariants();
+  const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, _className, "base");
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _input.Textarea,
+    {
+      ref,
+      "data-testid": testId,
+      errorMessage,
+      id: testId,
+      isDisabled: disabled,
+      isInvalid: invalid,
+      isRequired: required,
+      label,
+      labelPlacement: "outside",
+      name,
+      onBlur,
+      onChange,
+      placeholder,
+      value,
+      variant: "bordered",
+      classNames: {
+        base: classNames.base,
+        clearButton: classNames.clearButton,
+        // set padding to 0 for error message exit animation
+        helperWrapper: "p-0",
+        input: classNames.input,
+        inputWrapper: classNames.inputWrapper
+      },
+      children
+    }
+  );
+};
+var TextArea_default = TextArea;
+
+// src/TextArea/index.ts
+var TextArea_default2 = TextArea_default;
+
+
+
+
+exports.TextArea_default = TextArea_default; exports.TextArea_default2 = TextArea_default2;
+//# sourceMappingURL=chunk-BWPTCHL7.cjs.map

package/dist/chunk-BWPTCHL7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-BWPTCHL7.cjs","../src/TextArea/TextArea.tsx","../src/TextArea/index.ts"],"names":["TextArea_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACA;ACRA,sCAAyC;AAEzC,oDAAyC;AA+ErC,+CAAA;AA1EG,IAAM,iBAAA,EAAmB,4BAAA;AAAG,EACjC,KAAA,EAAO;AAAA;AAAA,IAEL,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,WAAA,EAAa,EAAA;AAAA;AAAA,IAEb,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,YAAA,EAAc;AAAA,EAChB;AACF,CAAC,CAAA;AA2BD,IAAM,SAAA,EAAW,CAAC,EAAA,EAAA,GAOG;AAPH,EAAA,IAAA,GAAA,EAAA,EAAA,EAChB;AAAA,IAAA,SAAA,EAAW,IAAA;AAAA,IACX,SAAA,EAAW,WAAA,EAAa,KAAA,CAAA;AAAA,IACxB,cAAA,EAAgB,GAAA;AAAA,IAChB,IAAA;AAAA,IACA,YAAA,EAAc;AAAA,EArDhB,EAAA,EAgDkB,EAAA,EAMb,kBAAA,EAAA,yCAAA,EANa,EAMb;AAAA,IALH,UAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,EAAA,CAAA,CAAA;AAGA,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA,EAAO;AAAA,MACL,QAAA,EAAU,aAAA;AAAA,MACV,MAAA,EAAQ,WAAA;AAAA,MACR,KAAA,EAAO,UAAA;AAAA,MACP;AAAA,IACF,CAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,EACF,EAAA,EAAI,+CAAA,8CAAgB,EAAE,KAAA,CAAA,EAAS,iBAAA,CAAmB,CAAA;AAGlD,EAAA,MAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,EAAA,EAAI,qDAAA;AAAsB,IACxD,aAAA;AAAA,IACA,MAAA,EAAQ,WAAA;AAAA,IACR,QAAA,EAAU,aAAA;AAAA,IACV,KAAA,EAAO;AAAA,EACT,CAAC,CAAA;AAGD,EAAA,MAAM,SAAA,EAAW,gBAAA,CAAiB,CAAA;AAClC,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,UAAA,EAAY,MAAM,CAAA;AAEpE,EAAA,uBACE,6BAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,aAAA,EAAa,MAAA;AAAA,MACb,YAAA;AAAA,MACA,EAAA,EAAI,MAAA;AAAA,MACJ,UAAA,EAAY,QAAA;AAAA,MACZ,SAAA,EAAW,OAAA;AAAA,MACX,UAAA,EAAY,QAAA;AAAA,MACZ,KAAA;AAAA,MACA,cAAA,EAAe,SAAA;AAAA,MACf,IAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,OAAA,EAAQ,UAAA;AAAA,MACR,UAAA,EAAY;AAAA,QACV,IAAA,EAAM,UAAA,CAAW,IAAA;AAAA,QACjB,WAAA,EAAa,UAAA,CAAW,WAAA;AAAA;AAAA,QAExB,aAAA,EAAe,KAAA;AAAA,QACf,KAAA,EAAO,UAAA,CAAW,KAAA;AAAA,QAClB,YAAA,EAAc,UAAA,CAAW;AAAA,MAC3B,CAAA;AAAA,MAEC;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ,CAAA;AAEA,IAAO,iBAAA,EAAQ,QAAA;ADpBf;AACA;AEzFA,IAAOA,kBAAAA,EAAQ,gBAAA;AF2Ff;AACA;AACE;AACA;AACF,2FAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-BWPTCHL7.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { Textarea as HeroTextArea } from '@heroui/input';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useInputValueDebounce, useUniformField } from '../hooks';\n\n// input variants\nexport const textAreaVariants = tv({\n  slots: {\n    /** wrapper around the whole input */\n    base: '',\n    /** clear button */\n    clearButton: '',\n    /** actual input element */\n    input: '',\n    /** inner wrapper (HeroUI inputWrapper slot) */\n    inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n  },\n});\n\ntype VariantProps = TVProps<typeof textAreaVariants>;\ntype ClassName = TVClassName<typeof textAreaVariants>;\n\nexport interface TextAreaProps extends VariantProps {\n  /** Child components. The content of the textarea. */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** debounce delay in milliseconds for form state updates (default: 300ms) */\n  debounceDelay?: number;\n  /** Determines if the TextArea is disabled or not. */\n  disabled?: boolean;\n  /** Label displayed above the TextArea. */\n  label?: ReactNode;\n  /** Name the TextArea is registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** placeholder for the textArea content. */\n  placeholder?: string;\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * TextArea component based on [HeroUI TextArea](https://www.heroui.com//docs/components/textarea)\n */\nconst TextArea = ({\n  children = null,\n  className: _className = undefined,\n  debounceDelay = 300,\n  name,\n  placeholder = ' ',\n  ...uniformFieldProps\n}: TextAreaProps) => {\n  const {\n    disabled,\n    errorMessage,\n    field: {\n      onChange: fieldOnChange,\n      onBlur: fieldOnBlur,\n      value: fieldValue,\n      ref,\n    },\n    invalid,\n    label,\n    required,\n    testId,\n  } = useUniformField({ name, ...uniformFieldProps });\n\n  // Use debounced handlers for form updates\n  const { onChange, onBlur, value } = useInputValueDebounce({\n    debounceDelay,\n    onBlur: fieldOnBlur,\n    onChange: fieldOnChange,\n    value: fieldValue,\n  });\n\n  // classNames from slots\n  const variants = textAreaVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <HeroTextArea\n      ref={ref}\n      data-testid={testId}\n      errorMessage={errorMessage}\n      id={testId}\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={label}\n      labelPlacement=\"outside\"\n      name={name}\n      onBlur={onBlur}\n      onChange={onChange}\n      placeholder={placeholder}\n      value={value as string}\n      variant=\"bordered\"\n      classNames={{\n        base: classNames.base,\n        clearButton: classNames.clearButton,\n        // set padding to 0 for error message exit animation\n        helperWrapper: 'p-0',\n        input: classNames.input,\n        inputWrapper: classNames.inputWrapper,\n      }}\n    >\n      {children}\n    </HeroTextArea>\n  );\n};\n\nexport default TextArea;\n","import TextArea from './TextArea';\n\nexport type { TextAreaProps } from './TextArea';\n\nexport { TextArea };\n\nexport default TextArea;\n"]}