@fuf-stack/uniform 0.20.4 → 0.21.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
3
 
4
- var _chunkHLANS2OUcjs = require('../chunk-HLANS2OU.cjs');
4
+ var _chunkIIWHSNQGcjs = require('../chunk-IIWHSNQG.cjs');
5
5
  require('../chunk-GNYQC5IJ.cjs');
6
6
  require('../chunk-PA2DQCBY.cjs');
7
7
  require('../chunk-ZZ4Q3FLC.cjs');
@@ -10,5 +10,5 @@ require('../chunk-555JRYCS.cjs');
10
10
 
11
11
 
12
12
 
13
- exports.Input = _chunkHLANS2OUcjs.Input_default; exports.default = _chunkHLANS2OUcjs.Input_default2;
13
+ exports.Input = _chunkIIWHSNQGcjs.Input_default; exports.default = _chunkIIWHSNQGcjs.Input_default2;
14
14
  //# sourceMappingURL=index.cjs.map
@@ -1,5 +1,5 @@
1
- import { I as Input } from '../Input-B_wjhY9e.cjs';
2
- export { a as InputProps } from '../Input-B_wjhY9e.cjs';
1
+ import { I as Input } from '../Input-oubBKJSg.cjs';
2
+ export { a as InputProps } from '../Input-oubBKJSg.cjs';
3
3
  import 'react/jsx-runtime';
4
4
  import 'react';
5
5
 
@@ -1,5 +1,5 @@
1
- import { I as Input } from '../Input-B_wjhY9e.js';
2
- export { a as InputProps } from '../Input-B_wjhY9e.js';
1
+ import { I as Input } from '../Input-oubBKJSg.js';
2
+ export { a as InputProps } from '../Input-oubBKJSg.js';
3
3
  import 'react/jsx-runtime';
4
4
  import 'react';
5
5
 
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  Input_default,
3
3
  Input_default2
4
- } from "../chunk-SJFZLD2I.js";
4
+ } from "../chunk-33BKBYR2.js";
5
5
  import "../chunk-UTFZRBBS.js";
6
6
  import "../chunk-BQGN3JTU.js";
7
7
  import "../chunk-4AWDOV7M.js";
@@ -14,6 +14,8 @@ interface InputProps {
14
14
  name: string;
15
15
  /** form field placeholder */
16
16
  placeholder?: string;
17
+ /** size of the input */
18
+ size?: 'sm' | 'md' | 'lg';
17
19
  /** content added to the start of the input field */
18
20
  startContent?: ReactNode;
19
21
  /** HTML data-testid attribute used in e2e tests */
@@ -31,6 +33,6 @@ interface InputProps {
31
33
  /**
32
34
  * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)
33
35
  */
34
- declare const Input: ({ className, disabled, endContent, label, name, placeholder, startContent, testId: _testId, transformValue, type, }: InputProps) => react_jsx_runtime.JSX.Element;
36
+ declare const Input: ({ className, disabled, endContent, label, name, placeholder, size, startContent, testId: _testId, transformValue, type, }: InputProps) => react_jsx_runtime.JSX.Element;
35
37
 
36
38
  export { Input as I, type InputProps as a };
@@ -14,6 +14,8 @@ interface InputProps {
14
14
  name: string;
15
15
  /** form field placeholder */
16
16
  placeholder?: string;
17
+ /** size of the input */
18
+ size?: 'sm' | 'md' | 'lg';
17
19
  /** content added to the start of the input field */
18
20
  startContent?: ReactNode;
19
21
  /** HTML data-testid attribute used in e2e tests */
@@ -31,6 +33,6 @@ interface InputProps {
31
33
  /**
32
34
  * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)
33
35
  */
34
- declare const Input: ({ className, disabled, endContent, label, name, placeholder, startContent, testId: _testId, transformValue, type, }: InputProps) => react_jsx_runtime.JSX.Element;
36
+ declare const Input: ({ className, disabled, endContent, label, name, placeholder, size, startContent, testId: _testId, transformValue, type, }: InputProps) => react_jsx_runtime.JSX.Element;
35
37
 
36
38
  export { Input as I, type InputProps as a };
@@ -1,7 +1,7 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
3
 
4
- var _chunkTEDFGOE4cjs = require('../chunk-TEDFGOE4.cjs');
4
+ var _chunkEQXSFBZWcjs = require('../chunk-EQXSFBZW.cjs');
5
5
  require('../chunk-GNYQC5IJ.cjs');
6
6
  require('../chunk-PA2DQCBY.cjs');
7
7
  require('../chunk-ZZ4Q3FLC.cjs');
@@ -10,5 +10,5 @@ require('../chunk-555JRYCS.cjs');
10
10
 
11
11
 
12
12
 
13
- exports.Select = _chunkTEDFGOE4cjs.Select_default; exports.default = _chunkTEDFGOE4cjs.Select_default2;
13
+ exports.Select = _chunkEQXSFBZWcjs.Select_default; exports.default = _chunkEQXSFBZWcjs.Select_default2;
14
14
  //# sourceMappingURL=index.cjs.map
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  Select_default,
3
3
  Select_default2
4
- } from "../chunk-SIUB4YCG.js";
4
+ } from "../chunk-DUXD4EBJ.js";
5
5
  import "../chunk-UTFZRBBS.js";
6
6
  import "../chunk-BQGN3JTU.js";
7
7
  import "../chunk-4AWDOV7M.js";
@@ -1,7 +1,7 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
3
 
4
- var _chunkWU7AHUO6cjs = require('../chunk-WU7AHUO6.cjs');
4
+ var _chunkYLAMHHJBcjs = require('../chunk-YLAMHHJB.cjs');
5
5
  require('../chunk-GNYQC5IJ.cjs');
6
6
  require('../chunk-PA2DQCBY.cjs');
7
7
  require('../chunk-ZZ4Q3FLC.cjs');
@@ -10,5 +10,5 @@ require('../chunk-555JRYCS.cjs');
10
10
 
11
11
 
12
12
 
13
- exports.TextArea = _chunkWU7AHUO6cjs.TextArea_default; exports.default = _chunkWU7AHUO6cjs.TextArea_default2;
13
+ exports.TextArea = _chunkYLAMHHJBcjs.TextArea_default; exports.default = _chunkYLAMHHJBcjs.TextArea_default2;
14
14
  //# sourceMappingURL=index.cjs.map
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  TextArea_default,
3
3
  TextArea_default2
4
- } from "../chunk-GQ7PNPVN.js";
4
+ } from "../chunk-H7X5Q6SW.js";
5
5
  import "../chunk-UTFZRBBS.js";
6
6
  import "../chunk-BQGN3JTU.js";
7
7
  import "../chunk-4AWDOV7M.js";
@@ -20,6 +20,7 @@ var Input = ({
20
20
  label = void 0,
21
21
  name,
22
22
  placeholder = " ",
23
+ size = void 0,
23
24
  startContent = void 0,
24
25
  testId: _testId = void 0,
25
26
  transformValue = void 0,
@@ -51,7 +52,7 @@ var Input = ({
51
52
  {
52
53
  className: cn(className),
53
54
  classNames: {
54
- inputWrapper: "group-data-[focus=true]:border-focus"
55
+ inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
55
56
  },
56
57
  "data-testid": testId,
57
58
  endContent,
@@ -70,6 +71,7 @@ var Input = ({
70
71
  placeholder,
71
72
  radius: "sm",
72
73
  ref,
74
+ size,
73
75
  startContent,
74
76
  type,
75
77
  value: displayValue,
@@ -86,4 +88,4 @@ export {
86
88
  Input_default,
87
89
  Input_default2
88
90
  };
89
- //# sourceMappingURL=chunk-SJFZLD2I.js.map
91
+ //# sourceMappingURL=chunk-33BKBYR2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Input as HeroInput } 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 InputProps {\n /** CSS class name */\n className?: string;\n /** input field is disabled */\n disabled?: boolean;\n /** added content to the end of the input Field. */\n endContent?: ReactNode;\n /** form field label (set to false to disable label) */\n label?: string | false;\n /** form field name */\n name: string;\n /** form field placeholder */\n placeholder?: string;\n /** size of the input */\n size?: 'sm' | 'md' | 'lg';\n /** content added to the start of the input field */\n startContent?: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** allows disentangled display and form values for a field */\n transformValue?: {\n /** transforms the formValue of the field to the display value of the field */\n displayValue: (value: string | number) => string | number;\n /** transforms the displayValue of the field to the form value of the field */\n formValue: (value: string) => string | number;\n };\n /** input type */\n type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n className = undefined,\n disabled = false,\n endContent = undefined,\n label = undefined,\n name,\n placeholder = ' ',\n size = undefined,\n startContent = undefined,\n testId: _testId = undefined,\n transformValue = undefined,\n type = undefined,\n}: InputProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({\n control,\n disabled,\n name,\n });\n\n const { disabled: isDisabled, onChange, onBlur, value, ref } = field;\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n /**\n * Determines the display value for the input field:\n * 1. If transformValue.displayValue is provided, applies the transform to the current value\n * (useful for formatting like adding currency symbols, date formatting, etc.)\n * 2. Falls back to the raw value if no transform is provided\n * 3. Ensures a defined value by using empty string as fallback (prevents uncontrolled input warnings)\n *\n * Examples:\n * - With transform: value \"1000\" → displayValue \"$1,000\"\n * - Without transform: value \"1000\" → displayValue \"1000\"\n * - Undefined value: value undefined → displayValue \"\"\n */\n const displayValue = transformValue?.displayValue\n ? transformValue.displayValue(value ?? '')\n : (value ?? '');\n\n /**\n * Handles input value changes with special processing:\n * 1. For number inputs:\n * - Preserves empty string (prevents NaN in the form state)\n * - Converts non-empty values to numbers\n * Example: \"\" → \"\" (empty stays empty)\n * \"42\" → 42 (converts to number)\n *\n * 2. For text inputs with transformValue.formValue:\n * - Applies custom transform before updating form state\n * - Useful for converting display format to storage format\n * Example: \"$1,000\" → \"1000\" (strips formatting)\n *\n * 3. For regular text inputs:\n * - Passes through the raw input value\n * Example: \"hello\" → \"hello\" (no transformation)\n *\n * @param e The input change event\n */\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n if (type === 'number') {\n onChange(inputValue === '' ? '' : Number(inputValue));\n } else {\n onChange(\n transformValue?.formValue\n ? transformValue.formValue(inputValue)\n : inputValue,\n );\n }\n };\n\n return (\n <HeroInput\n className={cn(className)}\n classNames={{\n inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n }}\n data-testid={testId}\n endContent={endContent}\n errorMessage={\n error && <FieldValidationError error={error} testId={testId} />\n }\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n <>\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </>\n )\n }\n labelPlacement=\"outside\"\n name={name}\n onBlur={onBlur}\n onChange={handleChange}\n placeholder={placeholder}\n radius=\"sm\"\n ref={ref}\n size={size}\n startContent={startContent}\n type={type}\n // @ts-expect-error number is ok here\n value={displayValue}\n variant=\"bordered\"\n />\n );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;;;;;;AAEA,SAAS,SAAS,iBAAiB;AAEnC,SAAS,UAAU;AA2HF,SAOP,UAPO,KAOP,YAPO;AApFjB,IAAM,QAAQ,CAAC;AAAA,EACb,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,aAAa;AAAA,EACb,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,QAAQ,UAAU;AAAA,EAClB,iBAAiB;AAAA,EACjB,OAAO;AACT,MAAkB;AAChB,QAAM,EAAE,SAAS,WAAW,cAAc,IAAI,eAAe;AAC7D,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,EAAE,MAAM,IAAI,cAAc;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,UAAU,YAAY,UAAU,QAAQ,OAAO,IAAI,IAAI;AAE/D,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAc3B,QAAM,gBAAe,iDAAgB,gBACjC,eAAe,aAAa,wBAAS,EAAE,IACtC,wBAAS;AAqBd,QAAM,eAAe,CAAC,MAA2C;AAC/D,UAAM,aAAa,EAAE,OAAO;AAC5B,QAAI,SAAS,UAAU;AACrB,eAAS,eAAe,KAAK,KAAK,OAAO,UAAU,CAAC;AAAA,IACtD,OAAO;AACL;AAAA,SACE,iDAAgB,aACZ,eAAe,UAAU,UAAU,IACnC;AAAA,MACN;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS;AAAA,MACvB,YAAY;AAAA,QACV,cAAc;AAAA,MAChB;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA,cACE,SAAS,oBAAC,gCAAqB,OAAc,QAAgB;AAAA,MAE/D;AAAA,MACA,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,OACE,aACE,iCACG;AAAA;AAAA,QACA,wBAAwB,oBAAC,iCAAsB,QAAgB;AAAA,SAClE;AAAA,MAGJ,gBAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,OAAO;AAAA,MACP,SAAQ;AAAA;AAAA,EACV;AAEJ;AAEA,IAAO,gBAAQ;;;ACvJf,IAAOA,iBAAQ;","names":["Input_default"]}
@@ -23,7 +23,7 @@ var selectVariants = tv({
23
23
  slots: {
24
24
  base: "group leading-normal",
25
25
  clearIndicator: "rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800",
26
- control: "rounded-lg border-2 border-default-200 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none",
26
+ control: "rounded-lg border-2 border-default-200 bg-content1 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none",
27
27
  control_focused: "border-focus",
28
28
  crossIcon: "",
29
29
  downChevron: "",
@@ -233,4 +233,4 @@ export {
233
233
  Select_default,
234
234
  Select_default2
235
235
  };
236
- //# sourceMappingURL=chunk-SIUB4YCG.js.map
236
+ //# sourceMappingURL=chunk-DUXD4EBJ.js.map
@@ -0,0 +1 @@
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 { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const selectVariants = tv({\n slots: {\n base: 'group leading-normal',\n clearIndicator:\n 'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n control:\n 'rounded-lg border-2 border-default-200 bg-content1 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n control_focused: 'border-focus',\n crossIcon: '',\n downChevron: '',\n dropdownIndicator:\n 'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n group: '',\n groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\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 'pointer-events-auto relative bottom-1.5 ml-1 text-small subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n loadingIndicator: '',\n loadingMessage: 'rounded-sm p-2 text-foreground-500',\n menu: 'mt-2 rounded-xl border border-default-200 bg-content1 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: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n multiValueContainer: '',\n multiValueLabel: 'py-0.5 leading-6',\n multiValueRemove:\n 'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\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: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n selectContainer: '',\n singleValue: '!ml-1 !leading-7',\n valueContainer: 'gap-1 p-1',\n },\n});\n\ntype 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/prop-types, react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}`;\n // eslint-disable-next-line react/jsx-props-no-spreading\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/prop-types, react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}_select`;\n return (\n <div data-testid={testId}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\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/prop-types, 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 {/* eslint-disable-next-line react/jsx-props-no-spreading */}\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 // eslint-disable-next-line react/prop-types\n const testId = props?.selectProps['data-testid'] as string;\n return (\n <div data-testid={`${testId}_select_dropdown`}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\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 disabled = false,\n filterOption = undefined,\n renderOptionLabel = undefined,\n inputValue = undefined,\n label: _label = undefined,\n loading = false,\n multiSelect = false,\n name,\n onInputChange = undefined,\n options,\n placeholder = undefined,\n testId: _testId = undefined,\n}: SelectProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({ control, disabled, name });\n const { onChange, value, ref, onBlur } = field;\n\n const [isFocused, setIsFocused] = useState(false);\n\n const variants = selectVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const {\n getBaseProps,\n getErrorMessageProps,\n getHelperWrapperProps,\n getLabelProps,\n getTriggerProps,\n getValueProps,\n label,\n } = useSelect({\n children: [],\n classNames,\n errorMessage: JSON.stringify(error),\n isDisabled: disabled,\n isInvalid: invalid,\n isLoading: loading,\n isRequired: required,\n label: _label,\n labelPlacement: 'outside',\n placeholder: ' ',\n });\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <div\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getBaseProps()}\n className={cn(classNames.base)}\n data-testid={`${testId}_wrapper`}\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 >\n {showLabel && (\n <label\n className={classNames.label}\n data-slot=\"label\"\n htmlFor={`react-select-${name}-input`}\n id={getLabelProps().id}\n >\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </label>\n )}\n <ReactSelect\n aria-errormessage=\"\"\n aria-labelledby={getTriggerProps()['aria-labelledby']?.split(' ')[1]}\n aria-invalid={invalid}\n classNames={{\n control: () =>\n cn(classNames.control, {\n [classNames.control_focused]: isFocused && !invalid,\n }),\n clearIndicator: () => classNames.clearIndicator,\n dropdownIndicator: () => classNames.dropdownIndicator,\n groupHeading: () => classNames.groupHeading,\n indicatorsContainer: () => classNames.indicatorsContainer,\n indicatorSeparator: () => classNames.indicatorSeparator,\n loadingIndicator: () => classNames.loadingIndicator,\n loadingMessage: () => classNames.loadingMessage,\n input: () => classNames.input,\n menu: () => classNames.menu,\n menuList: () => classNames.menuList,\n menuPortal: () => classNames.menuPortal,\n multiValue: () => classNames.multiValue,\n multiValueLabel: () =>\n cn(classNames.multiValueLabel, `${getValueProps().className}`),\n multiValueRemove: () => classNames.multiValueRemove,\n noOptionsMessage: () => classNames.noOptionsMessage,\n option: ({\n isFocused: optionIsFocused,\n isSelected: optionIsSelected,\n }) =>\n cn(classNames.option, {\n [classNames.option_focused]: optionIsFocused,\n [classNames.option_selected]: optionIsSelected,\n }),\n placeholder: () => classNames.placeholder,\n singleValue: () =>\n cn(classNames.singleValue, `${getValueProps().className}`),\n valueContainer: () => classNames.valueContainer,\n }}\n components={{\n Input: InputComponent,\n Option: OptionComponent,\n DropdownIndicator: DropdownIndicatorComponent,\n Control: ControlComponent,\n }}\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 name={name}\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 menuShouldBlockScroll\n options={options}\n placeholder={placeholder}\n onBlur={(_e) => {\n setIsFocused(false);\n return onBlur();\n }}\n onChange={(option) => {\n if (multiSelect) {\n onChange(\n (option as SelectOption[])?.map((_option) => _option.value),\n );\n } else {\n onChange((option as SelectOption)?.value);\n }\n }}\n onFocus={(_e) => {\n setIsFocused(true);\n }}\n onInputChange={onInputChange}\n ref={ref}\n // set complete option as value by current field value\n value={options.find((option) => option.value === value)}\n unstyled\n />\n {error && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <div {...getHelperWrapperProps()}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <div {...getErrorMessageProps()}>\n <FieldValidationError error={error} testId={testId} />\n </div>\n </div>\n )}\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":["Select_default"]}
@@ -23,7 +23,7 @@ var selectVariants = _pixelutils.tv.call(void 0, {
23
23
  slots: {
24
24
  base: "group leading-normal",
25
25
  clearIndicator: "rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800",
26
- control: "rounded-lg border-2 border-default-200 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none",
26
+ control: "rounded-lg border-2 border-default-200 bg-content1 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none",
27
27
  control_focused: "border-focus",
28
28
  crossIcon: "",
29
29
  downChevron: "",
@@ -233,4 +233,4 @@ var Select_default2 = Select_default;
233
233
 
234
234
 
235
235
  exports.Select_default = Select_default; exports.Select_default2 = Select_default2;
236
- //# sourceMappingURL=chunk-TEDFGOE4.cjs.map
236
+ //# sourceMappingURL=chunk-EQXSFBZW.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-EQXSFBZW.cjs","../src/Select/Select.tsx","../src/Select/index.ts"],"names":["Select_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-EQXSFBZW.cjs","sourcesContent":[null,"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 { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const selectVariants = tv({\n slots: {\n base: 'group leading-normal',\n clearIndicator:\n 'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n control:\n 'rounded-lg border-2 border-default-200 bg-content1 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n control_focused: 'border-focus',\n crossIcon: '',\n downChevron: '',\n dropdownIndicator:\n 'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n group: '',\n groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\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 'pointer-events-auto relative bottom-1.5 ml-1 text-small subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n loadingIndicator: '',\n loadingMessage: 'rounded-sm p-2 text-foreground-500',\n menu: 'mt-2 rounded-xl border border-default-200 bg-content1 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: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n multiValueContainer: '',\n multiValueLabel: 'py-0.5 leading-6',\n multiValueRemove:\n 'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\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: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n selectContainer: '',\n singleValue: '!ml-1 !leading-7',\n valueContainer: 'gap-1 p-1',\n },\n});\n\ntype 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/prop-types, react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}`;\n // eslint-disable-next-line react/jsx-props-no-spreading\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/prop-types, react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}_select`;\n return (\n <div data-testid={testId}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\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/prop-types, 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 {/* eslint-disable-next-line react/jsx-props-no-spreading */}\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 // eslint-disable-next-line react/prop-types\n const testId = props?.selectProps['data-testid'] as string;\n return (\n <div data-testid={`${testId}_select_dropdown`}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\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 disabled = false,\n filterOption = undefined,\n renderOptionLabel = undefined,\n inputValue = undefined,\n label: _label = undefined,\n loading = false,\n multiSelect = false,\n name,\n onInputChange = undefined,\n options,\n placeholder = undefined,\n testId: _testId = undefined,\n}: SelectProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({ control, disabled, name });\n const { onChange, value, ref, onBlur } = field;\n\n const [isFocused, setIsFocused] = useState(false);\n\n const variants = selectVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const {\n getBaseProps,\n getErrorMessageProps,\n getHelperWrapperProps,\n getLabelProps,\n getTriggerProps,\n getValueProps,\n label,\n } = useSelect({\n children: [],\n classNames,\n errorMessage: JSON.stringify(error),\n isDisabled: disabled,\n isInvalid: invalid,\n isLoading: loading,\n isRequired: required,\n label: _label,\n labelPlacement: 'outside',\n placeholder: ' ',\n });\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <div\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getBaseProps()}\n className={cn(classNames.base)}\n data-testid={`${testId}_wrapper`}\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 >\n {showLabel && (\n <label\n className={classNames.label}\n data-slot=\"label\"\n htmlFor={`react-select-${name}-input`}\n id={getLabelProps().id}\n >\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </label>\n )}\n <ReactSelect\n aria-errormessage=\"\"\n aria-labelledby={getTriggerProps()['aria-labelledby']?.split(' ')[1]}\n aria-invalid={invalid}\n classNames={{\n control: () =>\n cn(classNames.control, {\n [classNames.control_focused]: isFocused && !invalid,\n }),\n clearIndicator: () => classNames.clearIndicator,\n dropdownIndicator: () => classNames.dropdownIndicator,\n groupHeading: () => classNames.groupHeading,\n indicatorsContainer: () => classNames.indicatorsContainer,\n indicatorSeparator: () => classNames.indicatorSeparator,\n loadingIndicator: () => classNames.loadingIndicator,\n loadingMessage: () => classNames.loadingMessage,\n input: () => classNames.input,\n menu: () => classNames.menu,\n menuList: () => classNames.menuList,\n menuPortal: () => classNames.menuPortal,\n multiValue: () => classNames.multiValue,\n multiValueLabel: () =>\n cn(classNames.multiValueLabel, `${getValueProps().className}`),\n multiValueRemove: () => classNames.multiValueRemove,\n noOptionsMessage: () => classNames.noOptionsMessage,\n option: ({\n isFocused: optionIsFocused,\n isSelected: optionIsSelected,\n }) =>\n cn(classNames.option, {\n [classNames.option_focused]: optionIsFocused,\n [classNames.option_selected]: optionIsSelected,\n }),\n placeholder: () => classNames.placeholder,\n singleValue: () =>\n cn(classNames.singleValue, `${getValueProps().className}`),\n valueContainer: () => classNames.valueContainer,\n }}\n components={{\n Input: InputComponent,\n Option: OptionComponent,\n DropdownIndicator: DropdownIndicatorComponent,\n Control: ControlComponent,\n }}\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 name={name}\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 menuShouldBlockScroll\n options={options}\n placeholder={placeholder}\n onBlur={(_e) => {\n setIsFocused(false);\n return onBlur();\n }}\n onChange={(option) => {\n if (multiSelect) {\n onChange(\n (option as SelectOption[])?.map((_option) => _option.value),\n );\n } else {\n onChange((option as SelectOption)?.value);\n }\n }}\n onFocus={(_e) => {\n setIsFocused(true);\n }}\n onInputChange={onInputChange}\n ref={ref}\n // set complete option as value by current field value\n value={options.find((option) => option.value === value)}\n unstyled\n />\n {error && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <div {...getHelperWrapperProps()}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <div {...getErrorMessageProps()}>\n <FieldValidationError error={error} testId={testId} />\n </div>\n </div>\n )}\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"]}
@@ -35,7 +35,7 @@ var TextArea = ({
35
35
  {
36
36
  className: cn(className),
37
37
  classNames: {
38
- inputWrapper: "group-data-[focus=true]:border-focus"
38
+ inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
39
39
  },
40
40
  "data-testid": testId,
41
41
  errorMessage: error && /* @__PURE__ */ jsx(FieldValidationError_default, { error, testId }),
@@ -67,4 +67,4 @@ export {
67
67
  TextArea_default,
68
68
  TextArea_default2
69
69
  };
70
- //# sourceMappingURL=chunk-GQ7PNPVN.js.map
70
+ //# sourceMappingURL=chunk-H7X5Q6SW.js.map
@@ -1 +1 @@
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"]}
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: 'bg-content1 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"]}
@@ -20,6 +20,7 @@ var Input = ({
20
20
  label = void 0,
21
21
  name,
22
22
  placeholder = " ",
23
+ size = void 0,
23
24
  startContent = void 0,
24
25
  testId: _testId = void 0,
25
26
  transformValue = void 0,
@@ -51,7 +52,7 @@ var Input = ({
51
52
  {
52
53
  className: _pixelutils.cn.call(void 0, className),
53
54
  classNames: {
54
- inputWrapper: "group-data-[focus=true]:border-focus"
55
+ inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
55
56
  },
56
57
  "data-testid": testId,
57
58
  endContent,
@@ -70,6 +71,7 @@ var Input = ({
70
71
  placeholder,
71
72
  radius: "sm",
72
73
  ref,
74
+ size,
73
75
  startContent,
74
76
  type,
75
77
  value: displayValue,
@@ -86,4 +88,4 @@ var Input_default2 = Input_default;
86
88
 
87
89
 
88
90
  exports.Input_default = Input_default; exports.Input_default2 = Input_default2;
89
- //# sourceMappingURL=chunk-HLANS2OU.cjs.map
91
+ //# sourceMappingURL=chunk-IIWHSNQG.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-IIWHSNQG.cjs","../src/Input/Input.tsx","../src/Input/index.ts"],"names":["Input_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-IIWHSNQG.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\n\nimport { Input as HeroInput } 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 InputProps {\n /** CSS class name */\n className?: string;\n /** input field is disabled */\n disabled?: boolean;\n /** added content to the end of the input Field. */\n endContent?: ReactNode;\n /** form field label (set to false to disable label) */\n label?: string | false;\n /** form field name */\n name: string;\n /** form field placeholder */\n placeholder?: string;\n /** size of the input */\n size?: 'sm' | 'md' | 'lg';\n /** content added to the start of the input field */\n startContent?: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** allows disentangled display and form values for a field */\n transformValue?: {\n /** transforms the formValue of the field to the display value of the field */\n displayValue: (value: string | number) => string | number;\n /** transforms the displayValue of the field to the form value of the field */\n formValue: (value: string) => string | number;\n };\n /** input type */\n type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n className = undefined,\n disabled = false,\n endContent = undefined,\n label = undefined,\n name,\n placeholder = ' ',\n size = undefined,\n startContent = undefined,\n testId: _testId = undefined,\n transformValue = undefined,\n type = undefined,\n}: InputProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({\n control,\n disabled,\n name,\n });\n\n const { disabled: isDisabled, onChange, onBlur, value, ref } = field;\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n /**\n * Determines the display value for the input field:\n * 1. If transformValue.displayValue is provided, applies the transform to the current value\n * (useful for formatting like adding currency symbols, date formatting, etc.)\n * 2. Falls back to the raw value if no transform is provided\n * 3. Ensures a defined value by using empty string as fallback (prevents uncontrolled input warnings)\n *\n * Examples:\n * - With transform: value \"1000\" → displayValue \"$1,000\"\n * - Without transform: value \"1000\" → displayValue \"1000\"\n * - Undefined value: value undefined → displayValue \"\"\n */\n const displayValue = transformValue?.displayValue\n ? transformValue.displayValue(value ?? '')\n : (value ?? '');\n\n /**\n * Handles input value changes with special processing:\n * 1. For number inputs:\n * - Preserves empty string (prevents NaN in the form state)\n * - Converts non-empty values to numbers\n * Example: \"\" → \"\" (empty stays empty)\n * \"42\" → 42 (converts to number)\n *\n * 2. For text inputs with transformValue.formValue:\n * - Applies custom transform before updating form state\n * - Useful for converting display format to storage format\n * Example: \"$1,000\" → \"1000\" (strips formatting)\n *\n * 3. For regular text inputs:\n * - Passes through the raw input value\n * Example: \"hello\" → \"hello\" (no transformation)\n *\n * @param e The input change event\n */\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n if (type === 'number') {\n onChange(inputValue === '' ? '' : Number(inputValue));\n } else {\n onChange(\n transformValue?.formValue\n ? transformValue.formValue(inputValue)\n : inputValue,\n );\n }\n };\n\n return (\n <HeroInput\n className={cn(className)}\n classNames={{\n inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n }}\n data-testid={testId}\n endContent={endContent}\n errorMessage={\n error && <FieldValidationError error={error} testId={testId} />\n }\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n <>\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </>\n )\n }\n labelPlacement=\"outside\"\n name={name}\n onBlur={onBlur}\n onChange={handleChange}\n placeholder={placeholder}\n radius=\"sm\"\n ref={ref}\n size={size}\n startContent={startContent}\n type={type}\n // @ts-expect-error number is ok here\n value={displayValue}\n variant=\"bordered\"\n />\n );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"]}
@@ -35,7 +35,7 @@ var TextArea = ({
35
35
  {
36
36
  className: _pixelutils.cn.call(void 0, className),
37
37
  classNames: {
38
- inputWrapper: "group-data-[focus=true]:border-focus"
38
+ inputWrapper: "bg-content1 group-data-[focus=true]:border-focus"
39
39
  },
40
40
  "data-testid": testId,
41
41
  errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGNYQC5IJcjs.FieldValidationError_default, { error, testId }),
@@ -67,4 +67,4 @@ var TextArea_default2 = TextArea_default;
67
67
 
68
68
 
69
69
  exports.TextArea_default = TextArea_default; exports.TextArea_default2 = TextArea_default2;
70
- //# sourceMappingURL=chunk-WU7AHUO6.cjs.map
70
+ //# sourceMappingURL=chunk-YLAMHHJB.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-WU7AHUO6.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-WU7AHUO6.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"]}
1
+ {"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-YLAMHHJB.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-YLAMHHJB.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: 'bg-content1 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/index.cjs CHANGED
@@ -3,7 +3,7 @@
3
3
  var _chunkK2B7NTWKcjs = require('./chunk-K2B7NTWK.cjs');
4
4
 
5
5
 
6
- var _chunkTEDFGOE4cjs = require('./chunk-TEDFGOE4.cjs');
6
+ var _chunkEQXSFBZWcjs = require('./chunk-EQXSFBZW.cjs');
7
7
 
8
8
 
9
9
  var _chunk5PNXBS5Kcjs = require('./chunk-5PNXBS5K.cjs');
@@ -12,7 +12,7 @@ var _chunk5PNXBS5Kcjs = require('./chunk-5PNXBS5K.cjs');
12
12
  var _chunkJ7NVQTEWcjs = require('./chunk-J7NVQTEW.cjs');
13
13
 
14
14
 
15
- var _chunkWU7AHUO6cjs = require('./chunk-WU7AHUO6.cjs');
15
+ var _chunkYLAMHHJBcjs = require('./chunk-YLAMHHJB.cjs');
16
16
 
17
17
 
18
18
  var _chunkDOU4QUFPcjs = require('./chunk-DOU4QUFP.cjs');
@@ -27,7 +27,7 @@ var _chunkBUNJMA4Ocjs = require('./chunk-BUNJMA4O.cjs');
27
27
  var _chunkTTD3KL6Ecjs = require('./chunk-TTD3KL6E.cjs');
28
28
 
29
29
 
30
- var _chunkHLANS2OUcjs = require('./chunk-HLANS2OU.cjs');
30
+ var _chunkIIWHSNQGcjs = require('./chunk-IIWHSNQG.cjs');
31
31
 
32
32
 
33
33
  var _chunkCK5D6TE5cjs = require('./chunk-CK5D6TE5.cjs');
@@ -80,5 +80,5 @@ require('./chunk-555JRYCS.cjs');
80
80
 
81
81
 
82
82
 
83
- exports.CheckboxGroup = _chunkDOU4QUFPcjs.CheckboxGroup_default; exports.FieldArray = _chunkWGUKDO53cjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkGNYQC5IJcjs.FieldValidationError_default; exports.Form = _chunkBUNJMA4Ocjs.Form_default; exports.Grid = _chunkTTD3KL6Ecjs.Grid_default; exports.Input = _chunkHLANS2OUcjs.Input_default; exports.RadioBoxes = _chunkCK5D6TE5cjs.RadioBoxes_default; exports.RadioGroup = _chunkSXYWWUMKcjs.RadioGroup_default; exports.RadioTabs = _chunkK2B7NTWKcjs.RadioTabs_default; exports.Select = _chunkTEDFGOE4cjs.Select_default; exports.SubmitButton = _chunk5PNXBS5Kcjs.SubmitButton_default; exports.Switch = _chunkJ7NVQTEWcjs.Switch_default; exports.TextArea = _chunkWU7AHUO6cjs.TextArea_default; exports.checkFieldIsRequired = _chunkZZ4Q3FLCcjs.checkFieldIsRequired; exports.fromNullishString = _chunkCESGUF6Fcjs.fromNullishString; exports.toFormFormat = _chunkCESGUF6Fcjs.toFormFormat; exports.toNullishString = _chunkCESGUF6Fcjs.toNullishString; exports.toValidationFormat = _chunkCESGUF6Fcjs.toValidationFormat; exports.useClientValidation = _chunkZZ4Q3FLCcjs.useClientValidation; exports.useController = _chunkZZ4Q3FLCcjs.useController; exports.useFieldArray = _chunkZZ4Q3FLCcjs.useFieldArray; exports.useFormContext = _chunkZZ4Q3FLCcjs.useFormContext; exports.useInput = _chunkZZ4Q3FLCcjs.useInput;
83
+ exports.CheckboxGroup = _chunkDOU4QUFPcjs.CheckboxGroup_default; exports.FieldArray = _chunkWGUKDO53cjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkGNYQC5IJcjs.FieldValidationError_default; exports.Form = _chunkBUNJMA4Ocjs.Form_default; exports.Grid = _chunkTTD3KL6Ecjs.Grid_default; exports.Input = _chunkIIWHSNQGcjs.Input_default; exports.RadioBoxes = _chunkCK5D6TE5cjs.RadioBoxes_default; exports.RadioGroup = _chunkSXYWWUMKcjs.RadioGroup_default; exports.RadioTabs = _chunkK2B7NTWKcjs.RadioTabs_default; exports.Select = _chunkEQXSFBZWcjs.Select_default; exports.SubmitButton = _chunk5PNXBS5Kcjs.SubmitButton_default; exports.Switch = _chunkJ7NVQTEWcjs.Switch_default; exports.TextArea = _chunkYLAMHHJBcjs.TextArea_default; exports.checkFieldIsRequired = _chunkZZ4Q3FLCcjs.checkFieldIsRequired; exports.fromNullishString = _chunkCESGUF6Fcjs.fromNullishString; exports.toFormFormat = _chunkCESGUF6Fcjs.toFormFormat; exports.toNullishString = _chunkCESGUF6Fcjs.toNullishString; exports.toValidationFormat = _chunkCESGUF6Fcjs.toValidationFormat; exports.useClientValidation = _chunkZZ4Q3FLCcjs.useClientValidation; exports.useController = _chunkZZ4Q3FLCcjs.useController; exports.useFieldArray = _chunkZZ4Q3FLCcjs.useFieldArray; exports.useFormContext = _chunkZZ4Q3FLCcjs.useFormContext; exports.useInput = _chunkZZ4Q3FLCcjs.useInput;
84
84
  //# sourceMappingURL=index.cjs.map
package/dist/index.d.cts CHANGED
@@ -6,7 +6,7 @@ export { fromNullishString, toFormFormat, toNullishString, toValidationFormat }
6
6
  export { UseControllerProps, UseControllerReturn, checkFieldIsRequired, useClientValidation, useController, useFormContext } from './hooks/index.cjs';
7
7
  export { useFieldArray } from 'react-hook-form';
8
8
  export { useInput } from '@heroui/input';
9
- export { I as Input, a as InputProps } from './Input-B_wjhY9e.cjs';
9
+ export { I as Input, a as InputProps } from './Input-oubBKJSg.cjs';
10
10
  export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton-_TDlmw0L.cjs';
11
11
  export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-CU_xw0BL.cjs';
12
12
  export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-BmJBBZVd.cjs';
package/dist/index.d.ts CHANGED
@@ -6,7 +6,7 @@ export { fromNullishString, toFormFormat, toNullishString, toValidationFormat }
6
6
  export { UseControllerProps, UseControllerReturn, checkFieldIsRequired, useClientValidation, useController, useFormContext } from './hooks/index.js';
7
7
  export { useFieldArray } from 'react-hook-form';
8
8
  export { useInput } from '@heroui/input';
9
- export { I as Input, a as InputProps } from './Input-B_wjhY9e.js';
9
+ export { I as Input, a as InputProps } from './Input-oubBKJSg.js';
10
10
  export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton-_TDlmw0L.js';
11
11
  export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-CU_xw0BL.js';
12
12
  export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-BmJBBZVd.js';
package/dist/index.js CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-UTKY3KL2.js";
4
4
  import {
5
5
  Select_default
6
- } from "./chunk-SIUB4YCG.js";
6
+ } from "./chunk-DUXD4EBJ.js";
7
7
  import {
8
8
  SubmitButton_default
9
9
  } from "./chunk-P44L3XR4.js";
@@ -12,7 +12,7 @@ import {
12
12
  } from "./chunk-C5LVVYXY.js";
13
13
  import {
14
14
  TextArea_default
15
- } from "./chunk-GQ7PNPVN.js";
15
+ } from "./chunk-H7X5Q6SW.js";
16
16
  import {
17
17
  CheckboxGroup_default
18
18
  } from "./chunk-JQGCMXUB.js";
@@ -27,7 +27,7 @@ import {
27
27
  } from "./chunk-B62HKKMS.js";
28
28
  import {
29
29
  Input_default
30
- } from "./chunk-SJFZLD2I.js";
30
+ } from "./chunk-33BKBYR2.js";
31
31
  import {
32
32
  RadioBoxes_default
33
33
  } from "./chunk-KF57IEIV.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fuf-stack/uniform",
3
- "version": "0.20.4",
3
+ "version": "0.21.1",
4
4
  "description": "fuf react form library",
5
5
  "author": "Hannes Tiede",
6
6
  "homepage": "https://github.com/fuf-stack/pixels#readme",
@@ -133,9 +133,9 @@
133
133
  "react-icons": "5.5.0",
134
134
  "react-hook-form": "7.55.0",
135
135
  "react-select": "5.10.1",
136
- "@fuf-stack/pixel-utils": "0.5.5",
137
- "@fuf-stack/pixels": "0.43.9",
138
- "@fuf-stack/veto": "0.12.1"
136
+ "@fuf-stack/veto": "0.12.1",
137
+ "@fuf-stack/pixels": "0.43.10",
138
+ "@fuf-stack/pixel-utils": "0.5.5"
139
139
  },
140
140
  "devDependencies": {
141
141
  "@types/debug": "4.1.12",
@@ -143,10 +143,10 @@
143
143
  "@types/react-dom": "19.0.4",
144
144
  "react": "19.0.0",
145
145
  "react-dom": "19.0.0",
146
- "@repo/storybook-config": "0.0.1",
147
146
  "@repo/tailwind-config": "0.0.1",
148
- "@repo/tsup-config": "0.0.1",
149
- "@repo/vite-config": "0.0.1"
147
+ "@repo/vite-config": "0.0.1",
148
+ "@repo/storybook-config": "0.0.1",
149
+ "@repo/tsup-config": "0.0.1"
150
150
  },
151
151
  "scripts": {
152
152
  "build": "tsup --config node_modules/@repo/tsup-config/config.ts",
@@ -1 +0,0 @@
1
- {"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-HLANS2OU.cjs","../src/Input/Input.tsx","../src/Input/index.ts"],"names":["Input_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-HLANS2OU.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\n\nimport { Input as HeroInput } 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 InputProps {\n /** CSS class name */\n className?: string;\n /** input field is disabled */\n disabled?: boolean;\n /** added content to the end of the input Field. */\n endContent?: ReactNode;\n /** form field label (set to false to disable label) */\n label?: string | false;\n /** form field name */\n name: string;\n /** form field placeholder */\n placeholder?: string;\n /** content added to the start of the input field */\n startContent?: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** allows disentangled display and form values for a field */\n transformValue?: {\n /** transforms the formValue of the field to the display value of the field */\n displayValue: (value: string | number) => string | number;\n /** transforms the displayValue of the field to the form value of the field */\n formValue: (value: string) => string | number;\n };\n /** input type */\n type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n className = undefined,\n disabled = false,\n endContent = undefined,\n label = undefined,\n name,\n placeholder = ' ',\n startContent = undefined,\n testId: _testId = undefined,\n transformValue = undefined,\n type = undefined,\n}: InputProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({\n control,\n disabled,\n name,\n });\n\n const { disabled: isDisabled, onChange, onBlur, value, ref } = field;\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n /**\n * Determines the display value for the input field:\n * 1. If transformValue.displayValue is provided, applies the transform to the current value\n * (useful for formatting like adding currency symbols, date formatting, etc.)\n * 2. Falls back to the raw value if no transform is provided\n * 3. Ensures a defined value by using empty string as fallback (prevents uncontrolled input warnings)\n *\n * Examples:\n * - With transform: value \"1000\" → displayValue \"$1,000\"\n * - Without transform: value \"1000\" → displayValue \"1000\"\n * - Undefined value: value undefined → displayValue \"\"\n */\n const displayValue = transformValue?.displayValue\n ? transformValue.displayValue(value ?? '')\n : (value ?? '');\n\n /**\n * Handles input value changes with special processing:\n * 1. For number inputs:\n * - Preserves empty string (prevents NaN in the form state)\n * - Converts non-empty values to numbers\n * Example: \"\" → \"\" (empty stays empty)\n * \"42\" → 42 (converts to number)\n *\n * 2. For text inputs with transformValue.formValue:\n * - Applies custom transform before updating form state\n * - Useful for converting display format to storage format\n * Example: \"$1,000\" → \"1000\" (strips formatting)\n *\n * 3. For regular text inputs:\n * - Passes through the raw input value\n * Example: \"hello\" → \"hello\" (no transformation)\n *\n * @param e The input change event\n */\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n if (type === 'number') {\n onChange(inputValue === '' ? '' : Number(inputValue));\n } else {\n onChange(\n transformValue?.formValue\n ? transformValue.formValue(inputValue)\n : inputValue,\n );\n }\n };\n\n return (\n <HeroInput\n className={cn(className)}\n classNames={{\n inputWrapper: 'group-data-[focus=true]:border-focus',\n }}\n data-testid={testId}\n endContent={endContent}\n errorMessage={\n error && <FieldValidationError error={error} testId={testId} />\n }\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n <>\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </>\n )\n }\n labelPlacement=\"outside\"\n name={name}\n onBlur={onBlur}\n onChange={handleChange}\n placeholder={placeholder}\n radius=\"sm\"\n ref={ref}\n startContent={startContent}\n type={type}\n // @ts-expect-error number is ok here\n value={displayValue}\n variant=\"bordered\"\n />\n );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"]}
@@ -1 +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 { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const selectVariants = tv({\n slots: {\n base: 'group leading-normal',\n clearIndicator:\n 'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n control:\n 'rounded-lg border-2 border-default-200 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n control_focused: 'border-focus',\n crossIcon: '',\n downChevron: '',\n dropdownIndicator:\n 'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n group: '',\n groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\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 'pointer-events-auto relative bottom-1.5 ml-1 text-small subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n loadingIndicator: '',\n loadingMessage: 'rounded-sm p-2 text-foreground-500',\n menu: 'mt-2 rounded-xl border border-default-200 bg-content1 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: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n multiValueContainer: '',\n multiValueLabel: 'py-0.5 leading-6',\n multiValueRemove:\n 'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\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: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n selectContainer: '',\n singleValue: '!ml-1 !leading-7',\n valueContainer: 'gap-1 p-1',\n },\n});\n\ntype 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/prop-types, react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}`;\n // eslint-disable-next-line react/jsx-props-no-spreading\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/prop-types, react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}_select`;\n return (\n <div data-testid={testId}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\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/prop-types, 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 {/* eslint-disable-next-line react/jsx-props-no-spreading */}\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 // eslint-disable-next-line react/prop-types\n const testId = props?.selectProps['data-testid'] as string;\n return (\n <div data-testid={`${testId}_select_dropdown`}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\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 disabled = false,\n filterOption = undefined,\n renderOptionLabel = undefined,\n inputValue = undefined,\n label: _label = undefined,\n loading = false,\n multiSelect = false,\n name,\n onInputChange = undefined,\n options,\n placeholder = undefined,\n testId: _testId = undefined,\n}: SelectProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({ control, disabled, name });\n const { onChange, value, ref, onBlur } = field;\n\n const [isFocused, setIsFocused] = useState(false);\n\n const variants = selectVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const {\n getBaseProps,\n getErrorMessageProps,\n getHelperWrapperProps,\n getLabelProps,\n getTriggerProps,\n getValueProps,\n label,\n } = useSelect({\n children: [],\n classNames,\n errorMessage: JSON.stringify(error),\n isDisabled: disabled,\n isInvalid: invalid,\n isLoading: loading,\n isRequired: required,\n label: _label,\n labelPlacement: 'outside',\n placeholder: ' ',\n });\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <div\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getBaseProps()}\n className={cn(classNames.base)}\n data-testid={`${testId}_wrapper`}\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 >\n {showLabel && (\n <label\n className={classNames.label}\n data-slot=\"label\"\n htmlFor={`react-select-${name}-input`}\n id={getLabelProps().id}\n >\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </label>\n )}\n <ReactSelect\n aria-errormessage=\"\"\n aria-labelledby={getTriggerProps()['aria-labelledby']?.split(' ')[1]}\n aria-invalid={invalid}\n classNames={{\n control: () =>\n cn(classNames.control, {\n [classNames.control_focused]: isFocused && !invalid,\n }),\n clearIndicator: () => classNames.clearIndicator,\n dropdownIndicator: () => classNames.dropdownIndicator,\n groupHeading: () => classNames.groupHeading,\n indicatorsContainer: () => classNames.indicatorsContainer,\n indicatorSeparator: () => classNames.indicatorSeparator,\n loadingIndicator: () => classNames.loadingIndicator,\n loadingMessage: () => classNames.loadingMessage,\n input: () => classNames.input,\n menu: () => classNames.menu,\n menuList: () => classNames.menuList,\n menuPortal: () => classNames.menuPortal,\n multiValue: () => classNames.multiValue,\n multiValueLabel: () =>\n cn(classNames.multiValueLabel, `${getValueProps().className}`),\n multiValueRemove: () => classNames.multiValueRemove,\n noOptionsMessage: () => classNames.noOptionsMessage,\n option: ({\n isFocused: optionIsFocused,\n isSelected: optionIsSelected,\n }) =>\n cn(classNames.option, {\n [classNames.option_focused]: optionIsFocused,\n [classNames.option_selected]: optionIsSelected,\n }),\n placeholder: () => classNames.placeholder,\n singleValue: () =>\n cn(classNames.singleValue, `${getValueProps().className}`),\n valueContainer: () => classNames.valueContainer,\n }}\n components={{\n Input: InputComponent,\n Option: OptionComponent,\n DropdownIndicator: DropdownIndicatorComponent,\n Control: ControlComponent,\n }}\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 name={name}\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 menuShouldBlockScroll\n options={options}\n placeholder={placeholder}\n onBlur={(_e) => {\n setIsFocused(false);\n return onBlur();\n }}\n onChange={(option) => {\n if (multiSelect) {\n onChange(\n (option as SelectOption[])?.map((_option) => _option.value),\n );\n } else {\n onChange((option as SelectOption)?.value);\n }\n }}\n onFocus={(_e) => {\n setIsFocused(true);\n }}\n onInputChange={onInputChange}\n ref={ref}\n // set complete option as value by current field value\n value={options.find((option) => option.value === value)}\n unstyled\n />\n {error && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <div {...getHelperWrapperProps()}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <div {...getErrorMessageProps()}>\n <FieldValidationError error={error} testId={testId} />\n </div>\n </div>\n )}\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":["Select_default"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Input as HeroInput } 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 InputProps {\n /** CSS class name */\n className?: string;\n /** input field is disabled */\n disabled?: boolean;\n /** added content to the end of the input Field. */\n endContent?: ReactNode;\n /** form field label (set to false to disable label) */\n label?: string | false;\n /** form field name */\n name: string;\n /** form field placeholder */\n placeholder?: string;\n /** content added to the start of the input field */\n startContent?: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** allows disentangled display and form values for a field */\n transformValue?: {\n /** transforms the formValue of the field to the display value of the field */\n displayValue: (value: string | number) => string | number;\n /** transforms the displayValue of the field to the form value of the field */\n formValue: (value: string) => string | number;\n };\n /** input type */\n type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n className = undefined,\n disabled = false,\n endContent = undefined,\n label = undefined,\n name,\n placeholder = ' ',\n startContent = undefined,\n testId: _testId = undefined,\n transformValue = undefined,\n type = undefined,\n}: InputProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({\n control,\n disabled,\n name,\n });\n\n const { disabled: isDisabled, onChange, onBlur, value, ref } = field;\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n /**\n * Determines the display value for the input field:\n * 1. If transformValue.displayValue is provided, applies the transform to the current value\n * (useful for formatting like adding currency symbols, date formatting, etc.)\n * 2. Falls back to the raw value if no transform is provided\n * 3. Ensures a defined value by using empty string as fallback (prevents uncontrolled input warnings)\n *\n * Examples:\n * - With transform: value \"1000\" → displayValue \"$1,000\"\n * - Without transform: value \"1000\" → displayValue \"1000\"\n * - Undefined value: value undefined → displayValue \"\"\n */\n const displayValue = transformValue?.displayValue\n ? transformValue.displayValue(value ?? '')\n : (value ?? '');\n\n /**\n * Handles input value changes with special processing:\n * 1. For number inputs:\n * - Preserves empty string (prevents NaN in the form state)\n * - Converts non-empty values to numbers\n * Example: \"\" → \"\" (empty stays empty)\n * \"42\" → 42 (converts to number)\n *\n * 2. For text inputs with transformValue.formValue:\n * - Applies custom transform before updating form state\n * - Useful for converting display format to storage format\n * Example: \"$1,000\" → \"1000\" (strips formatting)\n *\n * 3. For regular text inputs:\n * - Passes through the raw input value\n * Example: \"hello\" → \"hello\" (no transformation)\n *\n * @param e The input change event\n */\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n if (type === 'number') {\n onChange(inputValue === '' ? '' : Number(inputValue));\n } else {\n onChange(\n transformValue?.formValue\n ? transformValue.formValue(inputValue)\n : inputValue,\n );\n }\n };\n\n return (\n <HeroInput\n className={cn(className)}\n classNames={{\n inputWrapper: 'group-data-[focus=true]:border-focus',\n }}\n data-testid={testId}\n endContent={endContent}\n errorMessage={\n error && <FieldValidationError error={error} testId={testId} />\n }\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n <>\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </>\n )\n }\n labelPlacement=\"outside\"\n name={name}\n onBlur={onBlur}\n onChange={handleChange}\n placeholder={placeholder}\n radius=\"sm\"\n ref={ref}\n startContent={startContent}\n type={type}\n // @ts-expect-error number is ok here\n value={displayValue}\n variant=\"bordered\"\n />\n );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"],"mappings":";;;;;;;;;;;;AAEA,SAAS,SAAS,iBAAiB;AAEnC,SAAS,UAAU;AAwHF,SAOP,UAPO,KAOP,YAPO;AAnFjB,IAAM,QAAQ,CAAC;AAAA,EACb,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,aAAa;AAAA,EACb,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,eAAe;AAAA,EACf,QAAQ,UAAU;AAAA,EAClB,iBAAiB;AAAA,EACjB,OAAO;AACT,MAAkB;AAChB,QAAM,EAAE,SAAS,WAAW,cAAc,IAAI,eAAe;AAC7D,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,EAAE,MAAM,IAAI,cAAc;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,UAAU,YAAY,UAAU,QAAQ,OAAO,IAAI,IAAI;AAE/D,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAc3B,QAAM,gBAAe,iDAAgB,gBACjC,eAAe,aAAa,wBAAS,EAAE,IACtC,wBAAS;AAqBd,QAAM,eAAe,CAAC,MAA2C;AAC/D,UAAM,aAAa,EAAE,OAAO;AAC5B,QAAI,SAAS,UAAU;AACrB,eAAS,eAAe,KAAK,KAAK,OAAO,UAAU,CAAC;AAAA,IACtD,OAAO;AACL;AAAA,SACE,iDAAgB,aACZ,eAAe,UAAU,UAAU,IACnC;AAAA,MACN;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS;AAAA,MACvB,YAAY;AAAA,QACV,cAAc;AAAA,MAChB;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA,cACE,SAAS,oBAAC,gCAAqB,OAAc,QAAgB;AAAA,MAE/D;AAAA,MACA,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,OACE,aACE,iCACG;AAAA;AAAA,QACA,wBAAwB,oBAAC,iCAAsB,QAAgB;AAAA,SAClE;AAAA,MAGJ,gBAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MAEA,OAAO;AAAA,MACP,SAAQ;AAAA;AAAA,EACV;AAEJ;AAEA,IAAO,gBAAQ;;;ACnJf,IAAOA,iBAAQ;","names":["Input_default"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-TEDFGOE4.cjs","../src/Select/Select.tsx","../src/Select/index.ts"],"names":["Select_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-TEDFGOE4.cjs","sourcesContent":[null,"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 { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const selectVariants = tv({\n slots: {\n base: 'group leading-normal',\n clearIndicator:\n 'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n control:\n 'rounded-lg border-2 border-default-200 !duration-150 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n control_focused: 'border-focus',\n crossIcon: '',\n downChevron: '',\n dropdownIndicator:\n 'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n group: '',\n groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\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 'pointer-events-auto relative bottom-1.5 ml-1 text-small subpixel-antialiased group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n loadingIndicator: '',\n loadingMessage: 'rounded-sm p-2 text-foreground-500',\n menu: 'mt-2 rounded-xl border border-default-200 bg-content1 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: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n multiValueContainer: '',\n multiValueLabel: 'py-0.5 leading-6',\n multiValueRemove:\n 'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\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: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n selectContainer: '',\n singleValue: '!ml-1 !leading-7',\n valueContainer: 'gap-1 p-1',\n },\n});\n\ntype 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/prop-types, react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}`;\n // eslint-disable-next-line react/jsx-props-no-spreading\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/prop-types, react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}_select`;\n return (\n <div data-testid={testId}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\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/prop-types, 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 {/* eslint-disable-next-line react/jsx-props-no-spreading */}\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 // eslint-disable-next-line react/prop-types\n const testId = props?.selectProps['data-testid'] as string;\n return (\n <div data-testid={`${testId}_select_dropdown`}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\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 disabled = false,\n filterOption = undefined,\n renderOptionLabel = undefined,\n inputValue = undefined,\n label: _label = undefined,\n loading = false,\n multiSelect = false,\n name,\n onInputChange = undefined,\n options,\n placeholder = undefined,\n testId: _testId = undefined,\n}: SelectProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({ control, disabled, name });\n const { onChange, value, ref, onBlur } = field;\n\n const [isFocused, setIsFocused] = useState(false);\n\n const variants = selectVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const {\n getBaseProps,\n getErrorMessageProps,\n getHelperWrapperProps,\n getLabelProps,\n getTriggerProps,\n getValueProps,\n label,\n } = useSelect({\n children: [],\n classNames,\n errorMessage: JSON.stringify(error),\n isDisabled: disabled,\n isInvalid: invalid,\n isLoading: loading,\n isRequired: required,\n label: _label,\n labelPlacement: 'outside',\n placeholder: ' ',\n });\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n return (\n <div\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getBaseProps()}\n className={cn(classNames.base)}\n data-testid={`${testId}_wrapper`}\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 >\n {showLabel && (\n <label\n className={classNames.label}\n data-slot=\"label\"\n htmlFor={`react-select-${name}-input`}\n id={getLabelProps().id}\n >\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </label>\n )}\n <ReactSelect\n aria-errormessage=\"\"\n aria-labelledby={getTriggerProps()['aria-labelledby']?.split(' ')[1]}\n aria-invalid={invalid}\n classNames={{\n control: () =>\n cn(classNames.control, {\n [classNames.control_focused]: isFocused && !invalid,\n }),\n clearIndicator: () => classNames.clearIndicator,\n dropdownIndicator: () => classNames.dropdownIndicator,\n groupHeading: () => classNames.groupHeading,\n indicatorsContainer: () => classNames.indicatorsContainer,\n indicatorSeparator: () => classNames.indicatorSeparator,\n loadingIndicator: () => classNames.loadingIndicator,\n loadingMessage: () => classNames.loadingMessage,\n input: () => classNames.input,\n menu: () => classNames.menu,\n menuList: () => classNames.menuList,\n menuPortal: () => classNames.menuPortal,\n multiValue: () => classNames.multiValue,\n multiValueLabel: () =>\n cn(classNames.multiValueLabel, `${getValueProps().className}`),\n multiValueRemove: () => classNames.multiValueRemove,\n noOptionsMessage: () => classNames.noOptionsMessage,\n option: ({\n isFocused: optionIsFocused,\n isSelected: optionIsSelected,\n }) =>\n cn(classNames.option, {\n [classNames.option_focused]: optionIsFocused,\n [classNames.option_selected]: optionIsSelected,\n }),\n placeholder: () => classNames.placeholder,\n singleValue: () =>\n cn(classNames.singleValue, `${getValueProps().className}`),\n valueContainer: () => classNames.valueContainer,\n }}\n components={{\n Input: InputComponent,\n Option: OptionComponent,\n DropdownIndicator: DropdownIndicatorComponent,\n Control: ControlComponent,\n }}\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 name={name}\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 menuShouldBlockScroll\n options={options}\n placeholder={placeholder}\n onBlur={(_e) => {\n setIsFocused(false);\n return onBlur();\n }}\n onChange={(option) => {\n if (multiSelect) {\n onChange(\n (option as SelectOption[])?.map((_option) => _option.value),\n );\n } else {\n onChange((option as SelectOption)?.value);\n }\n }}\n onFocus={(_e) => {\n setIsFocused(true);\n }}\n onInputChange={onInputChange}\n ref={ref}\n // set complete option as value by current field value\n value={options.find((option) => option.value === value)}\n unstyled\n />\n {error && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <div {...getHelperWrapperProps()}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <div {...getErrorMessageProps()}>\n <FieldValidationError error={error} testId={testId} />\n </div>\n </div>\n )}\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"]}