@fuf-stack/uniform 0.18.4 → 0.19.0

package/dist/{chunk-2DJMYFRZ.cjs → chunk-NEHRI4EM.cjs}

@@ -1,20 +1,18 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkEPYFZXEIcjs = require('./chunk-EPYFZXEI.cjs');
+var _chunkGNYQC5IJcjs = require('./chunk-GNYQC5IJ.cjs');
 
 
-var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
+var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
 
 
-var _chunkOE5IW4ZGcjs = require('./chunk-OE5IW4ZG.cjs');
 
+var _chunk7BLVIVDUcjs = require('./chunk-7BLVIVDU.cjs');
 
-var _chunkQQW2FHSCcjs = require('./chunk-QQW2FHSC.cjs');
 
 
 
-
-var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
+var _chunk555JRYCScjs = require('./chunk-555JRYCS.cjs');
 
 // src/RadioBoxes/RadioBoxes.tsx
 var _radio = require('@heroui/radio');
@@ -26,7 +24,7 @@ var _visuallyhidden = require('@react-aria/visually-hidden');
 
 var _jsxruntime = require('react/jsx-runtime');
 var RadioBox = (_a) => {
-  var _b = _a, { icon = void 0 } = _b, props = _chunk4DAZAO6Ycjs.__objRest.call(void 0, _b, ["icon"]);
+  var _b = _a, { icon = void 0 } = _b, props = _chunk555JRYCScjs.__objRest.call(void 0, _b, ["icon"]);
   const {
     children,
     Component,
@@ -41,7 +39,7 @@ var RadioBox = (_a) => {
   } = _radio.useRadio.call(void 0, props);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     Component,
-    _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getBaseProps()), {
+    _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getBaseProps()), {
       className: _pixelutils.cn.call(void 0, 
         "group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus",
         {
@@ -50,15 +48,15 @@ var RadioBox = (_a) => {
         }
       ),
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _visuallyhidden.VisuallyHidden, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getInputProps())) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getWrapperProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getControlProps())) })),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _visuallyhidden.VisuallyHidden, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getInputProps())) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getWrapperProps()), { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getControlProps())) })),
         icon,
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "div",
-          _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getLabelWrapperProps()), {
+          _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getLabelWrapperProps()), {
             className: _pixelutils.cn.call(void 0, getLabelWrapperProps().className, "grow"),
             children: [
-              children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, getLabelProps()), { children })),
+              children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, getLabelProps()), { children })),
               description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-small text-foreground opacity-70", children: description })
             ]
           })
@@ -96,72 +94,64 @@ var RadioBoxes = ({
   options,
   testId: _testId = void 0
 }) => {
-  const { control, debugMode, getFieldState, getValues } = _chunkQQW2FHSCcjs.useFormContext.call(void 0, );
+  const { control, debugMode, getFieldState, getValues } = _chunk7BLVIVDUcjs.useFormContext.call(void 0, );
   const { error, invalid, required, testId } = getFieldState(name, _testId);
+  const { field } = _chunk7BLVIVDUcjs.useController.call(void 0, { control, disabled, name });
+  const { onChange, disabled: isDisabled, onBlur, ref } = field;
   const showTestIdCopyButton = debugMode === "debug-testids";
   const showLabel = label || showTestIdCopyButton;
   const variants = radioBoxesVariants();
   const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
+  const itemClassNames = {
+    base: classNames.itemBase,
+    control: classNames.itemControl,
+    description: classNames.itemDescription,
+    label: classNames.itemLabel,
+    labelWrapper: classNames.itemLabelWrapper,
+    wrapper: classNames.itemWrapper
+  };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkEPYFZXEIcjs.Controller_default,
+    _radio.RadioGroup,
     {
-      control,
-      disabled,
+      classNames,
+      "data-invalid": invalid,
+      "data-required": required,
+      "data-testid": testId,
+      defaultValue: getValues()[name],
+      errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGNYQC5IJcjs.FieldValidationError_default, { error, testId }),
+      isDisabled,
+      isInvalid: invalid,
+      isRequired: required,
+      label: showLabel && // eslint-disable-next-line jsx-a11y/label-has-associated-control
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { children: [
+        label,
+        showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default, { testId })
+      ] }),
       name,
-      render: ({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {
-        const itemClassNames = {
-          base: classNames.itemBase,
-          control: classNames.itemControl,
-          description: classNames.itemDescription,
-          label: classNames.itemLabel,
-          labelWrapper: classNames.itemLabelWrapper,
-          wrapper: classNames.itemWrapper
-        };
-        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _radio.RadioGroup,
-          {
-            classNames,
-            "data-invalid": invalid,
-            "data-required": required,
-            "data-testid": testId,
-            defaultValue: getValues()[name],
-            errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOE5IW4ZGcjs.FieldValidationError_default, { error }),
-            isDisabled,
-            isInvalid: invalid,
-            isRequired: required,
-            label: showLabel && // eslint-disable-next-line jsx-a11y/label-has-associated-control
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { children: [
-              label,
-              showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJU5RT22Ycjs.FieldCopyTestIdButton_default, { testId })
-            ] }),
-            name,
-            orientation: inline ? "horizontal" : "vertical",
-            onBlur,
-            ref,
-            children: options.map((option) => {
-              if ("value" in option) {
-                return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  RadioBox,
-                  {
-                    classNames: itemClassNames,
-                    "data-testid": _pixelutils.slugify.call(void 0, 
-                      `${testId}_option_${option.testId || option.value}`
-                    ),
-                    description: option.description,
-                    icon: option.icon,
-                    isDisabled: isDisabled || option.disabled,
-                    onChange,
-                    value: option.value,
-                    children: option.label ? option.label : option.value
-                  },
-                  option.value
-                );
-              }
-              return null;
-            })
-          }
-        );
-      }
+      orientation: inline ? "horizontal" : "vertical",
+      onBlur,
+      ref,
+      children: options.map((option) => {
+        if ("value" in option) {
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            RadioBox,
+            {
+              classNames: itemClassNames,
+              "data-testid": _pixelutils.slugify.call(void 0, 
+                `${testId}_option_${option.testId || option.value}`
+              ),
+              description: option.description,
+              icon: option.icon,
+              isDisabled: isDisabled || option.disabled,
+              onChange,
+              value: option.value,
+              children: option.label ? option.label : option.value
+            },
+            option.value
+          );
+        }
+        return null;
+      })
     }
   );
 };
@@ -174,4 +164,4 @@ var RadioBoxes_default2 = RadioBoxes_default;
 
 
 exports.RadioBoxes_default = RadioBoxes_default; exports.RadioBoxes_default2 = RadioBoxes_default2;
-//# sourceMappingURL=chunk-2DJMYFRZ.cjs.map
+//# sourceMappingURL=chunk-NEHRI4EM.cjs.map

package/dist/chunk-NEHRI4EM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-NEHRI4EM.cjs","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/index.ts"],"names":["jsx","jsxs","RadioBoxes_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-NEHRI4EM.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    itemBase: '',\n    itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n    itemDescription: '',\n    itemLabel: 'text-sm',\n    itemLabelWrapper: '',\n    itemWrapper:\n      'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\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-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n  /** Description of the value. Works with variant radioBox. */\n  description?: ReactNode;\n  /** disables the option */\n  disabled?: boolean;\n  /** option label */\n  label?: ReactNode;\n  /** option icon */\n  icon?: ReactNode;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n  /** option value */\n  value: string;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** Determines if the Buttons are disabled or not. */\n  disabled?: boolean;\n  /** determines orientation of the Buttons. */\n  inline?: boolean;\n  /** Label displayed next to the RadioButton. */\n  label?: ReactNode;\n  /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n  name: string;\n  /** Radio button configuration. */\n  options: RadioBoxesOption[];\n  /** Id to grab element in internal tests. */\n  testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n  className = undefined,\n  disabled = false,\n  inline = false,\n  label = undefined,\n  name,\n  options,\n  testId: _testId = undefined,\n}: RadioBoxesProps): ReactElement => {\n  const { control, debugMode, getFieldState, getValues } = useFormContext();\n\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const { field } = useController({ control, disabled, name });\n  const { onChange, disabled: isDisabled, onBlur, ref } = field;\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  const variants = radioBoxesVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const itemClassNames = {\n    base: classNames.itemBase,\n    control: classNames.itemControl,\n    description: classNames.itemDescription,\n    label: classNames.itemLabel,\n    labelWrapper: classNames.itemLabelWrapper,\n    wrapper: classNames.itemWrapper,\n  };\n\n  return (\n    <HeroRadioGroup\n      classNames={classNames}\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-invalid={invalid}\n      data-required={required}\n      data-testid={testId}\n      defaultValue={getValues()[name]}\n      errorMessage={\n        error && <FieldValidationError error={error} testId={testId} />\n      }\n      isDisabled={isDisabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={\n        showLabel && (\n          // eslint-disable-next-line jsx-a11y/label-has-associated-control\n          <label>\n            {label}\n            {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n          </label>\n        )\n      }\n      name={name}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      onBlur={onBlur}\n      ref={ref}\n    >\n      {options.map((option) => {\n        if ('value' in option) {\n          return (\n            <RadioBox\n              classNames={itemClassNames}\n              data-testid={slugify(\n                `${testId}_option_${option.testId || option.value}`,\n              )}\n              description={option.description}\n              icon={option.icon}\n              isDisabled={isDisabled || option.disabled}\n              key={option.value}\n              onChange={onChange}\n              value={option.value}\n            >\n              {option.label ? option.label : option.value}\n            </RadioBox>\n          );\n        }\n        return null;\n      })}\n    </HeroRadioGroup>\n  );\n};\n\nexport default RadioBoxes;\n","import type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends HeroRadioProps {\n  /** icon for the option */\n  icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\n  const {\n    children,\n    Component,\n    description,\n    getBaseProps,\n    getControlProps,\n    getInputProps,\n    getLabelProps,\n    getLabelWrapperProps,\n    getWrapperProps,\n    isDisabled,\n  } = useRadio(props);\n\n  return (\n    <Component\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...getBaseProps()}\n      className={cn(\n        'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n        {\n          // disabled styles\n          'pointer-events-none opacity-disabled': isDisabled,\n        },\n      )}\n    >\n      <VisuallyHidden>\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        <input {...getInputProps()} />\n      </VisuallyHidden>\n      {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n      <span {...getWrapperProps()}>\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        <span {...getControlProps()} />\n      </span>\n      {icon}\n      <div\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...getLabelWrapperProps()}\n        className={cn(getLabelWrapperProps().className, 'grow')}\n      >\n        {/* eslint-disable-next-line react/jsx-props-no-spreading  */}\n        {children && <span {...getLabelProps()}>{children}</span>}\n        {description && (\n          <span className=\"text-small text-foreground opacity-70\">\n            {description}\n          </span>\n        )}\n      </div>\n    </Component>\n  );\n};\n\nexport default RadioBox;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"]}

package/dist/{chunk-JU5RT22Y.cjs → chunk-PA2DQCBY.cjs}

@@ -32,4 +32,4 @@ var FieldCopyTestIdButton_default2 = FieldCopyTestIdButton_default;
 
 
 exports.FieldCopyTestIdButton_default = FieldCopyTestIdButton_default; exports.FieldCopyTestIdButton_default2 = FieldCopyTestIdButton_default2;
-//# sourceMappingURL=chunk-JU5RT22Y.cjs.map
+//# sourceMappingURL=chunk-PA2DQCBY.cjs.map

package/dist/chunk-PA2DQCBY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-PA2DQCBY.cjs","../src/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.tsx","../src/partials/FieldCopyTestIdButton/index.ts"],"names":["FieldCopyTestIdButton_default"],"mappings":"AAAA;ACAA,sCAA2B;AAE3B,oDAAmB;AACnB,2CAAuB;AAwBX,+CAAA;AAfZ,IAAM,sBAAA,EAAwB,CAAC;AAAA,EAC7B,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ;AACF,CAAA,EAAA,GAAkC;AAChC,EAAA,MAAM,gBAAA,EAAkB,CAAA,EAAA,GAAM;AAC5B,IAAA,SAAA,CAAU,SAAA,CAAU,SAAA,CAAU,MAAM,CAAA,CAAE,KAAA,CAAM,CAAC,GAAA,EAAA,GAAQ;AACnD,MAAA,OAAA,CAAQ,KAAA,CAAM,mCAAA,EAAqC,GAAG,CAAA;AAAA,IACxD,CAAC,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,uBACE,6BAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,4BAAA,SAAG,EAAW,qBAAqB,CAAA;AAAA,MAC9C,OAAA,EAAQ,OAAA;AAAA,MACR,OAAA,EAAS,eAAA;AAAA,MACT,IAAA,kBAAM,6BAAA,eAAC,EAAA,CAAA,CAAW,CAAA;AAAA,MAClB,IAAA,EAAK;AAAA,IAAA;AAAA,EACP,CAAA;AAEJ,CAAA;AACA,IAAO,8BAAA,EAAQ,qBAAA;ADNf;AACA;AErBA,IAAOA,+BAAAA,EAAQ,6BAAA;AFuBf;AACA;AACE;AACA;AACF,+IAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-PA2DQCBY.cjs","sourcesContent":[null,"import { FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nexport interface FieldCopyTestIdButtonProps {\n  /** CSS class name */\n  className?: string;\n  /** HTML data-testid attribute used in e2e tests */\n  testId: string;\n}\n\nconst FieldCopyTestIdButton = ({\n  className = undefined,\n  testId,\n}: FieldCopyTestIdButtonProps) => {\n  const copyToClipboard = () => {\n    navigator.clipboard.writeText(testId).catch((err) => {\n      console.error('Error copying TestId to clipboard', err);\n    });\n  };\n\n  return (\n    <Button\n      className={cn(className, 'pointer-events-auto')}\n      variant=\"light\"\n      onClick={copyToClipboard}\n      icon={<FaBullseye />}\n      size=\"sm\"\n    />\n  );\n};\nexport default FieldCopyTestIdButton;\n","import FieldCopyTestIdButton from './FieldCopyTestIdButton';\n\nexport type { FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton';\n\nexport { FieldCopyTestIdButton };\n\nexport default FieldCopyTestIdButton;\n"]}

package/dist/{chunk-ASPOGQPS.js → chunk-UTFZRBBS.js}

@@ -4,30 +4,21 @@ import { jsx } from "react/jsx-runtime";
 var FieldValidationError = ({
   className = void 0,
   error,
-  testId = void 0
+  testId
 }) => {
-  if (!error) {
+  if (!error || Array.isArray(error) && !error.length) {
     return null;
   }
-  let tmpErrors = [];
-  if (typeof error === "object" && !(error instanceof Array)) {
-    const errorObject = error;
-    Object.keys(error).forEach((key) => {
-      tmpErrors = [...tmpErrors, ...errorObject[key]];
-    });
-  }
-  const errorArray = JSON.stringify(tmpErrors) !== "[]" ? tmpErrors : error;
-  const errorStrings = errorArray.map((e) => e.message);
-  const ariaString = `Error: ${errorStrings.join("\n")}`;
+  const errors = Array.isArray(error) ? error : [error];
   return /* @__PURE__ */ jsx(
     "ul",
     {
-      "data-testid": slugify(testId || errorStrings.join()),
-      "aria-label": ariaString,
+      "aria-label": `Validation errors of field ${testId}`,
       className,
-      children: errorStrings.map((errorString, i) => (
+      "data-testid": slugify(`${testId}_error`),
+      children: errors.map(({ message }, i) => (
         // eslint-disable-next-line react/no-array-index-key
-        /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", { children: errorString }) }, `error_${i}`)
+        /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", { children: message }) }, `error_${i}`)
       ))
     }
   );
@@ -41,4 +32,4 @@ export {
   FieldValidationError_default,
   FieldValidationError_default2
 };
-//# sourceMappingURL=chunk-ASPOGQPS.js.map
+//# sourceMappingURL=chunk-UTFZRBBS.js.map

package/dist/chunk-UTFZRBBS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/partials/FieldValidationError/FieldValidationError.tsx","../src/partials/FieldValidationError/index.ts"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport { slugify } from '@fuf-stack/pixel-utils';\n\nexport interface FieldValidationErrorProps {\n  /** CSS class name */\n  className?: string;\n  /** Field errors */\n  error: FieldError | FieldError[];\n  /** HTML data-testid attribute used in e2e tests */\n  testId: string;\n}\n\n/**\n * Renders a validation error of a field\n */\nconst FieldValidationError = ({\n  className = undefined,\n  error,\n  testId,\n}: FieldValidationErrorProps) => {\n  // render nothing when no errors\n  if (!error || (Array.isArray(error) && !error.length)) {\n    return null;\n  }\n\n  // get errors as array\n  const errors: FieldError[] = Array.isArray(error) ? error : [error];\n\n  return (\n    <ul\n      aria-label={`Validation errors of field ${testId}`}\n      className={className}\n      data-testid={slugify(`${testId}_error`)}\n    >\n      {errors.map(({ message }, i) => (\n        // eslint-disable-next-line react/no-array-index-key\n        <li key={`error_${i}`}>\n          <div>{message}</div>\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport default FieldValidationError;\n","import FieldValidationError from './FieldValidationError';\n\nexport type { FieldValidationErrorProps } from './FieldValidationError';\n\nexport { FieldValidationError };\n\nexport default FieldValidationError;\n"],"mappings":";AAEA,SAAS,eAAe;AAoCd;AAtBV,IAAM,uBAAuB,CAAC;AAAA,EAC5B,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAiC;AAE/B,MAAI,CAAC,SAAU,MAAM,QAAQ,KAAK,KAAK,CAAC,MAAM,QAAS;AACrD,WAAO;AAAA,EACT;AAGA,QAAM,SAAuB,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,8BAA8B,MAAM;AAAA,MAChD;AAAA,MACA,eAAa,QAAQ,GAAG,MAAM,QAAQ;AAAA,MAErC,iBAAO,IAAI,CAAC,EAAE,QAAQ,GAAG;AAAA;AAAA,QAExB,oBAAC,QACC,8BAAC,SAAK,mBAAQ,KADP,SAAS,CAAC,EAEnB;AAAA,OACD;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,+BAAQ;;;ACvCf,IAAOA,gCAAQ;","names":["FieldValidationError_default"]}

package/dist/chunk-UU7SXXNI.cjs

@@ -0,0 +1,70 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkGNYQC5IJcjs = require('./chunk-GNYQC5IJ.cjs');
+
+
+var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
+
+
+
+var _chunk7BLVIVDUcjs = require('./chunk-7BLVIVDU.cjs');
+
+// src/TextArea/TextArea.tsx
+var _input = require('@heroui/input');
+var _pixelutils = require('@fuf-stack/pixel-utils');
+var _jsxruntime = require('react/jsx-runtime');
+var TextArea = ({
+  children = null,
+  className = void 0,
+  disabled = false,
+  label = void 0,
+  name,
+  placeholder = " ",
+  testId: _testId = void 0
+}) => {
+  var _a;
+  const { control, debugMode, getFieldState } = _chunk7BLVIVDUcjs.useFormContext.call(void 0, );
+  const { error, invalid, required, testId } = getFieldState(name, _testId);
+  const { field } = _chunk7BLVIVDUcjs.useController.call(void 0, { control, name, disabled });
+  const { disabled: isDisabled, onChange, onBlur, value = "", ref } = field;
+  const showTestIdCopyButton = debugMode === "debug-testids";
+  const showLabel = label || showTestIdCopyButton;
+  const displayValue = (_a = value == null ? void 0 : value.toString()) != null ? _a : "";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _input.Textarea,
+    {
+      className: _pixelutils.cn.call(void 0, className),
+      classNames: {
+        inputWrapper: "group-data-[focus=true]:border-focus"
+      },
+      "data-testid": testId,
+      errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGNYQC5IJcjs.FieldValidationError_default, { error, testId }),
+      isDisabled,
+      isRequired: required,
+      isInvalid: invalid,
+      label: showLabel && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        label,
+        showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default, { testId })
+      ] }),
+      labelPlacement: "outside",
+      placeholder,
+      name,
+      value: displayValue,
+      onChange,
+      onBlur,
+      ref,
+      variant: "bordered",
+      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-UU7SXXNI.cjs.map

package/dist/chunk-UU7SXXNI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-UU7SXXNI.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;ACTA,sCAAyC;AAEzC,oDAAmB;AA8EF,+CAAA;AApDjB,IAAM,SAAA,EAAW,CAAC;AAAA,EAChB,SAAA,EAAW,IAAA;AAAA,EACX,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,SAAA,EAAW,KAAA;AAAA,EACX,MAAA,EAAQ,KAAA,CAAA;AAAA,EACR,IAAA;AAAA,EACA,YAAA,EAAc,GAAA;AAAA,EACd,MAAA,EAAQ,QAAA,EAAU,KAAA;AACpB,CAAA,EAAA,GAAqB;AAtCrB,EAAA,IAAA,EAAA;AAuCE,EAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,cAAc,EAAA,EAAI,8CAAA,CAAe;AAC7D,EAAA,MAAM,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,EAAU,OAAO,EAAA,EAAI,aAAA,CAAc,IAAA,EAAM,OAAO,CAAA;AAExE,EAAA,MAAM,EAAE,MAAM,EAAA,EAAI,6CAAA,EAAgB,OAAA,EAAS,IAAA,EAAM,SAAS,CAAC,CAAA;AAC3D,EAAA,MAAM,EAAE,QAAA,EAAU,UAAA,EAAY,QAAA,EAAU,MAAA,EAAQ,MAAA,EAAQ,EAAA,EAAI,IAAI,EAAA,EAAI,KAAA;AAEpE,EAAA,MAAM,qBAAA,EAAuB,UAAA,IAAc,eAAA;AAC3C,EAAA,MAAM,UAAA,EAAY,MAAA,GAAS,oBAAA;AA0B3B,EAAA,MAAM,aAAA,EAAA,CAAe,GAAA,EAAA,MAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,KAAA,CAAO,QAAA,CAAA,CAAA,EAAA,GAAP,KAAA,EAAA,GAAA,EAAqB,EAAA;AAE1C,EAAA,uBACE,6BAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,4BAAA,SAAY,CAAA;AAAA,MACvB,UAAA,EAAY;AAAA,QACV,YAAA,EAAc;AAAA,MAChB,CAAA;AAAA,MACA,aAAA,EAAa,MAAA;AAAA,MACb,YAAA,EACE,MAAA,mBAAS,6BAAA,8CAAC,EAAA,EAAqB,KAAA,EAAc,OAAA,CAAgB,CAAA;AAAA,MAE/D,UAAA;AAAA,MACA,UAAA,EAAY,QAAA;AAAA,MACZ,SAAA,EAAW,OAAA;AAAA,MACX,KAAA,EACE,UAAA,mBACE,8BAAA,oBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,KAAA;AAAA,QACA,qBAAA,mBAAwB,6BAAA,+CAAC,EAAA,EAAsB,OAAA,CAAgB;AAAA,MAAA,EAAA,CAClE,CAAA;AAAA,MAGJ,cAAA,EAAe,SAAA;AAAA,MACf,WAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA,EAAO,YAAA;AAAA,MACP,QAAA;AAAA,MACA,MAAA;AAAA,MACA,GAAA;AAAA,MACA,OAAA,EAAQ,UAAA;AAAA,MAEP;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ,CAAA;AAEA,IAAO,iBAAA,EAAQ,QAAA;ADhDf;AACA;AExDA,IAAOA,kBAAAA,EAAQ,gBAAA;AF0Df;AACA;AACE;AACA;AACF,2FAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-UU7SXXNI.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\n\nimport { Textarea as HeroTextArea } from '@heroui/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface TextAreaProps {\n  /** Child components. The content of the textarea. */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\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 = undefined,\n  disabled = false,\n  label = undefined,\n  name,\n  placeholder = ' ',\n  testId: _testId = undefined,\n}: TextAreaProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const { field } = useController({ control, name, disabled });\n  const { disabled: isDisabled, onChange, onBlur, value = '', ref } = field;\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  /**\n   * Ensures the textarea always has a defined string value to prevent uncontrolled to\n   * controlled component warnings:\n   *\n   * 1. Warning Prevention:\n   *    - Sets default value to '' in field destructuring\n   *    - Guarantees the value prop is never undefined/null\n   *    - Prevents React warning: \"A component is changing from uncontrolled to controlled\"\n   *\n   * 2. Value Handling:\n   *    - Converts undefined/null to empty string\n   *    - Converts non-string values to strings\n   *    - Maintains existing string values\n   *\n   * Examples:\n   * - undefined → \"\" (prevents uncontrolled warning)\n   * - null → \"\" (prevents uncontrolled warning)\n   * - \"hello\" → \"hello\" (maintains string value)\n   * - 123 → \"123\" (converts to string)\n   *\n   * Without this handling, the textarea could switch between controlled/uncontrolled\n   * states when the form value changes from undefined to defined, causing React warnings\n   * and potential rendering issues.\n   */\n  const displayValue = value?.toString() ?? '';\n\n  return (\n    <HeroTextArea\n      className={cn(className)}\n      classNames={{\n        inputWrapper: 'group-data-[focus=true]:border-focus',\n      }}\n      data-testid={testId}\n      errorMessage={\n        error && <FieldValidationError error={error} testId={testId} />\n      }\n      isDisabled={isDisabled}\n      isRequired={required}\n      isInvalid={invalid}\n      label={\n        showLabel && (\n          <>\n            {label}\n            {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n          </>\n        )\n      }\n      labelPlacement=\"outside\"\n      placeholder={placeholder}\n      name={name}\n      value={displayValue}\n      onChange={onChange}\n      onBlur={onBlur}\n      ref={ref}\n      variant=\"bordered\"\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"]}

package/dist/chunk-W2K5WX3O.js

@@ -0,0 +1,145 @@
+import {
+  FieldValidationError_default
+} from "./chunk-UTFZRBBS.js";
+import {
+  FieldCopyTestIdButton_default
+} from "./chunk-BQGN3JTU.js";
+import {
+  useController,
+  useFormContext
+} from "./chunk-CN5XEGV4.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-K2V4ULA2.js";
+
+// src/CheckboxGroup/CheckboxGroup.tsx
+import { Checkbox, CheckboxGroup as HeroCheckboxGroup } from "@heroui/checkbox";
+import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var checkboxGroupVariants = tv({
+  slots: {
+    base: "group",
+    // Needs group for group-data condition
+    errorMessage: "text-tiny",
+    itemBase: "",
+    itemIcon: "",
+    itemLabel: "text-sm",
+    itemWrapper: "",
+    // see HeroUI styles for group-data condition,
+    // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
+    label: "text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger",
+    wrapper: ""
+  }
+});
+var CheckboxGroup = ({
+  className = void 0,
+  inline = false,
+  label = void 0,
+  options,
+  disabled = false,
+  name,
+  testId: _testId = void 0
+}) => {
+  const { control, debugMode, getFieldState } = useFormContext();
+  const {
+    error: _error,
+    invalid,
+    required,
+    testId
+  } = getFieldState(name, _testId);
+  const { field } = useController({ control, name, disabled });
+  const { onChange, value = [], ref, onBlur } = field;
+  const showTestIdCopyButton = debugMode === "debug-testids";
+  const showLabel = label || showTestIdCopyButton;
+  const variants = checkboxGroupVariants();
+  const classNames = variantsToClassNames(variants, className, "base");
+  const itemClassName = {
+    base: classNames.itemBase,
+    wrapper: classNames.itemWrapper,
+    icon: classNames.itemIcon,
+    label: classNames.itemLabel
+  };
+  const itemGroupClassName = {
+    base: classNames.base,
+    wrapper: classNames.wrapper,
+    label: classNames.label
+  };
+  const errorFlat = _error && Object.values(
+    _error
+  ).flat() || [];
+  const getCheckboxValue = (inputValue) => {
+    if (Array.isArray(inputValue)) {
+      return inputValue;
+    }
+    if (inputValue) {
+      return [inputValue];
+    }
+    return [];
+  };
+  const singleCheckboxProps = {
+    value: getCheckboxValue(value),
+    onChange: (newValue) => onChange(newValue && newValue[0])
+  };
+  const multipleCheckboxProps = {
+    onChange,
+    value: getCheckboxValue(value)
+  };
+  const checkboxGroupProps = options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;
+  return /* @__PURE__ */ jsx(
+    HeroCheckboxGroup,
+    __spreadProps(__spreadValues({
+      name,
+      classNames: itemGroupClassName,
+      "data-testid": testId,
+      "data-invalid": invalid,
+      errorMessage: errorFlat.length && /* @__PURE__ */ jsx(
+        FieldValidationError_default,
+        {
+          className: classNames.errorMessage,
+          error: errorFlat,
+          testId
+        }
+      ),
+      isDisabled: disabled,
+      isInvalid: invalid,
+      isRequired: required,
+      label: showLabel && // eslint-disable-next-line jsx-a11y/label-has-associated-control
+      /* @__PURE__ */ jsxs("label", { children: [
+        label,
+        showTestIdCopyButton && /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
+      ] }),
+      onBlur,
+      orientation: inline ? "horizontal" : "vertical",
+      ref
+    }, checkboxGroupProps), {
+      children: options == null ? void 0 : options.map((option) => {
+        const optionTestId = slugify(
+          `${testId}_option_${(option == null ? void 0 : option.testId) || (option == null ? void 0 : option.value)}`
+        );
+        return /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            "data-invalid": invalid,
+            classNames: itemClassName,
+            isDisabled: disabled || option.disabled,
+            value: option == null ? void 0 : option.value,
+            "data-testid": optionTestId,
+            children: option == null ? void 0 : option.label
+          },
+          `index_${option.value}`
+        );
+      })
+    })
+  );
+};
+var CheckboxGroup_default = CheckboxGroup;
+
+// src/CheckboxGroup/index.ts
+var CheckboxGroup_default2 = CheckboxGroup_default;
+
+export {
+  CheckboxGroup_default,
+  CheckboxGroup_default2
+};
+//# sourceMappingURL=chunk-W2K5WX3O.js.map

package/dist/chunk-W2K5WX3O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CheckboxGroup/CheckboxGroup.tsx","../src/CheckboxGroup/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { FieldError } from 'react-hook-form';\n\nimport { Checkbox, CheckboxGroup as HeroCheckboxGroup } from '@heroui/checkbox';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const checkboxGroupVariants = tv({\n  slots: {\n    base: 'group', // Needs group for group-data condition\n    errorMessage: 'text-tiny',\n    itemBase: '',\n    itemIcon: '',\n    itemLabel: 'text-sm',\n    itemWrapper: '',\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-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger',\n    wrapper: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof checkboxGroupVariants>;\ntype ClassName = TVClassName<typeof checkboxGroupVariants>;\n\nexport type CheckboxGroupOption = {\n  /** option label */\n  label?: React.ReactNode;\n  /** option value */\n  value: string;\n  /** disables the option */\n  disabled?: boolean;\n  /** HTML data-testid attribute of the option */\n  testId?: string;\n};\n\nexport interface CheckboxGroupProps extends VariantProps {\n  /** CSS class name. ClassName: string | { buttons?: string | { base?: string; active?: string }; base?: string;} */\n  className?: ClassName;\n  /** determines orientation of the boxes. */\n  inline?: boolean;\n  /** label displayed above the Checkboxes */\n  label?: React.ReactNode;\n  /** Name the Field is registered on the form. */\n  name: string;\n  /** Checkboxes that should be displayed. */\n  options: CheckboxGroupOption[];\n  /** sets all buttons disabled */\n  disabled?: boolean;\n  /** id for internal testing. */\n  testId?: string;\n}\n\n/**\n * CheckboxGroup component based on [HeroUI CheckboxGroup](https://www.heroui.com//docs/components/checkbox-group)\n */\nconst CheckboxGroup = ({\n  className = undefined,\n  inline = false,\n  label = undefined,\n  options,\n  disabled = false,\n  name,\n  testId: _testId = undefined,\n}: CheckboxGroupProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const {\n    error: _error,\n    invalid,\n    required,\n    testId,\n  } = getFieldState(name, _testId);\n\n  const { field } = useController({ control, name, disabled });\n  const { onChange, value = [], ref, onBlur } = field;\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  const variants = checkboxGroupVariants();\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const itemClassName = {\n    base: classNames.itemBase,\n    wrapper: classNames.itemWrapper,\n    icon: classNames.itemIcon,\n    label: classNames.itemLabel,\n  };\n  const itemGroupClassName = {\n    base: classNames.base,\n    wrapper: classNames.wrapper,\n    label: classNames.label,\n  };\n\n  // Convert React Hook Form's nested error object structure to a flat array\n  // RHF errors can be nested like: checkboxField.0 (individual checkbox errors)\n  // and checkboxField._error (global field errors) - this flattens all\n  // error values into a single array for rendering with FieldValidationError\n  const errorFlat: FieldError[] =\n    (_error &&\n      Object.values(\n        _error as unknown as Record<string, FieldError[]>,\n      ).flat()) ||\n    [];\n\n  /**\n   * Handles the checkbox group value changes based on the number of options:\n   * 1. For single checkbox (options.length === 1):\n   *    - Converts undefined/empty array to [] for consistent controlled behavior\n   *    - Extracts single value from array for onChange\n   *\n   *    Example: undefined → []\n   *            [value] → value\n   *\n   * 2. For multiple checkboxes:\n   *    - Uses raw value array with fallback to empty array\n   *    - Passes through onChange directly\n   *\n   *    Example: undefined → []\n   *            ['value1', 'value2'] → ['value1', 'value2']\n   */\n  const getCheckboxValue = (inputValue: unknown): string[] => {\n    if (Array.isArray(inputValue)) {\n      return inputValue;\n    }\n    if (inputValue) {\n      return [inputValue as string];\n    }\n    return [];\n  };\n\n  const singleCheckboxProps = {\n    value: getCheckboxValue(value),\n    onChange: (newValue: string[]) => onChange(newValue && newValue[0]),\n  };\n\n  const multipleCheckboxProps = {\n    onChange,\n    value: getCheckboxValue(value),\n  };\n\n  const checkboxGroupProps =\n    options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;\n\n  return (\n    <HeroCheckboxGroup\n      name={name}\n      classNames={itemGroupClassName}\n      data-testid={testId}\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-invalid={invalid}\n      errorMessage={\n        errorFlat.length && (\n          <FieldValidationError\n            className={classNames.errorMessage}\n            error={errorFlat}\n            testId={testId}\n          />\n        )\n      }\n      isDisabled={disabled}\n      isInvalid={invalid}\n      isRequired={required}\n      label={\n        showLabel && (\n          // eslint-disable-next-line jsx-a11y/label-has-associated-control\n          <label>\n            {label}\n            {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n          </label>\n        )\n      }\n      onBlur={onBlur}\n      orientation={inline ? 'horizontal' : 'vertical'}\n      ref={ref}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...checkboxGroupProps}\n    >\n      {options?.map((option) => {\n        const optionTestId = slugify(\n          `${testId}_option_${option?.testId || option?.value}`,\n        );\n        return (\n          <Checkbox\n            data-invalid={invalid}\n            classNames={itemClassName}\n            key={`index_${option.value}`}\n            isDisabled={disabled || option.disabled}\n            value={option?.value}\n            data-testid={optionTestId}\n          >\n            {option?.label}\n          </Checkbox>\n        );\n      })}\n    </HeroCheckboxGroup>\n  );\n};\n\nexport default CheckboxGroup;\n","import CheckboxGroup from './CheckboxGroup';\n\nexport type { CheckboxGroupProps, CheckboxGroupOption } from './CheckboxGroup';\n\nexport { CheckboxGroup };\n\nexport default CheckboxGroup;\n"],"mappings":"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","names":["CheckboxGroup_default"]}

package/dist/chunk-Y4YQH2QB.js

@@ -0,0 +1,70 @@
+import {
+  FieldValidationError_default
+} from "./chunk-UTFZRBBS.js";
+import {
+  FieldCopyTestIdButton_default
+} from "./chunk-BQGN3JTU.js";
+import {
+  useController,
+  useFormContext
+} from "./chunk-CN5XEGV4.js";
+
+// src/TextArea/TextArea.tsx
+import { Textarea as HeroTextArea } from "@heroui/input";
+import { cn } from "@fuf-stack/pixel-utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TextArea = ({
+  children = null,
+  className = void 0,
+  disabled = false,
+  label = void 0,
+  name,
+  placeholder = " ",
+  testId: _testId = void 0
+}) => {
+  var _a;
+  const { control, debugMode, getFieldState } = useFormContext();
+  const { error, invalid, required, testId } = getFieldState(name, _testId);
+  const { field } = useController({ control, name, disabled });
+  const { disabled: isDisabled, onChange, onBlur, value = "", ref } = field;
+  const showTestIdCopyButton = debugMode === "debug-testids";
+  const showLabel = label || showTestIdCopyButton;
+  const displayValue = (_a = value == null ? void 0 : value.toString()) != null ? _a : "";
+  return /* @__PURE__ */ jsx(
+    HeroTextArea,
+    {
+      className: cn(className),
+      classNames: {
+        inputWrapper: "group-data-[focus=true]:border-focus"
+      },
+      "data-testid": testId,
+      errorMessage: error && /* @__PURE__ */ jsx(FieldValidationError_default, { error, testId }),
+      isDisabled,
+      isRequired: required,
+      isInvalid: invalid,
+      label: showLabel && /* @__PURE__ */ jsxs(Fragment, { children: [
+        label,
+        showTestIdCopyButton && /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
+      ] }),
+      labelPlacement: "outside",
+      placeholder,
+      name,
+      value: displayValue,
+      onChange,
+      onBlur,
+      ref,
+      variant: "bordered",
+      children
+    }
+  );
+};
+var TextArea_default = TextArea;
+
+// src/TextArea/index.ts
+var TextArea_default2 = TextArea_default;
+
+export {
+  TextArea_default,
+  TextArea_default2
+};
+//# sourceMappingURL=chunk-Y4YQH2QB.js.map

package/dist/chunk-Y4YQH2QB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TextArea/TextArea.tsx","../src/TextArea/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Textarea as HeroTextArea } from '@heroui/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface TextAreaProps {\n  /** Child components. The content of the textarea. */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\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 = undefined,\n  disabled = false,\n  label = undefined,\n  name,\n  placeholder = ' ',\n  testId: _testId = undefined,\n}: TextAreaProps) => {\n  const { control, debugMode, getFieldState } = useFormContext();\n  const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n  const { field } = useController({ control, name, disabled });\n  const { disabled: isDisabled, onChange, onBlur, value = '', ref } = field;\n\n  const showTestIdCopyButton = debugMode === 'debug-testids';\n  const showLabel = label || showTestIdCopyButton;\n\n  /**\n   * Ensures the textarea always has a defined string value to prevent uncontrolled to\n   * controlled component warnings:\n   *\n   * 1. Warning Prevention:\n   *    - Sets default value to '' in field destructuring\n   *    - Guarantees the value prop is never undefined/null\n   *    - Prevents React warning: \"A component is changing from uncontrolled to controlled\"\n   *\n   * 2. Value Handling:\n   *    - Converts undefined/null to empty string\n   *    - Converts non-string values to strings\n   *    - Maintains existing string values\n   *\n   * Examples:\n   * - undefined → \"\" (prevents uncontrolled warning)\n   * - null → \"\" (prevents uncontrolled warning)\n   * - \"hello\" → \"hello\" (maintains string value)\n   * - 123 → \"123\" (converts to string)\n   *\n   * Without this handling, the textarea could switch between controlled/uncontrolled\n   * states when the form value changes from undefined to defined, causing React warnings\n   * and potential rendering issues.\n   */\n  const displayValue = value?.toString() ?? '';\n\n  return (\n    <HeroTextArea\n      className={cn(className)}\n      classNames={{\n        inputWrapper: 'group-data-[focus=true]:border-focus',\n      }}\n      data-testid={testId}\n      errorMessage={\n        error && <FieldValidationError error={error} testId={testId} />\n      }\n      isDisabled={isDisabled}\n      isRequired={required}\n      isInvalid={invalid}\n      label={\n        showLabel && (\n          <>\n            {label}\n            {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n          </>\n        )\n      }\n      labelPlacement=\"outside\"\n      placeholder={placeholder}\n      name={name}\n      value={displayValue}\n      onChange={onChange}\n      onBlur={onBlur}\n      ref={ref}\n      variant=\"bordered\"\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"],"mappings":";;;;;;;;;;;;AAEA,SAAS,YAAY,oBAAoB;AAEzC,SAAS,UAAU;AA8EF,SAOP,UAPO,KAOP,YAPO;AApDjB,IAAM,WAAW,CAAC;AAAA,EAChB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,QAAQ,UAAU;AACpB,MAAqB;AAtCrB;AAuCE,QAAM,EAAE,SAAS,WAAW,cAAc,IAAI,eAAe;AAC7D,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,EAAE,MAAM,IAAI,cAAc,EAAE,SAAS,MAAM,SAAS,CAAC;AAC3D,QAAM,EAAE,UAAU,YAAY,UAAU,QAAQ,QAAQ,IAAI,IAAI,IAAI;AAEpE,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AA0B3B,QAAM,gBAAe,oCAAO,eAAP,YAAqB;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS;AAAA,MACvB,YAAY;AAAA,QACV,cAAc;AAAA,MAChB;AAAA,MACA,eAAa;AAAA,MACb,cACE,SAAS,oBAAC,gCAAqB,OAAc,QAAgB;AAAA,MAE/D;AAAA,MACA,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,OACE,aACE,iCACG;AAAA;AAAA,QACA,wBAAwB,oBAAC,iCAAsB,QAAgB;AAAA,SAClE;AAAA,MAGJ,gBAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MAEP;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,mBAAQ;;;ACvGf,IAAOA,oBAAQ;","names":["TextArea_default"]}