@fuf-stack/uniform 0.21.5 → 0.22.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.
- package/dist/CheckboxGroup/index.cjs +6 -4
- package/dist/CheckboxGroup/index.cjs.map +1 -1
- package/dist/CheckboxGroup/index.js +5 -3
- package/dist/FieldArray/index.cjs +6 -4
- package/dist/FieldArray/index.cjs.map +1 -1
- package/dist/FieldArray/index.js +5 -3
- package/dist/Form/index.cjs +5 -3
- package/dist/Form/index.cjs.map +1 -1
- package/dist/Form/index.js +4 -2
- package/dist/Input/index.cjs +6 -4
- package/dist/Input/index.cjs.map +1 -1
- package/dist/Input/index.d.cts +3 -2
- package/dist/Input/index.d.ts +3 -2
- package/dist/Input/index.js +5 -3
- package/dist/{Input-oubBKJSg.d.cts → Input-BpsVvxwO.d.ts} +5 -7
- package/dist/{Input-oubBKJSg.d.ts → Input-Com9bFxL.d.cts} +5 -7
- package/dist/RadioBoxes/index.cjs +6 -4
- package/dist/RadioBoxes/index.cjs.map +1 -1
- package/dist/RadioBoxes/index.js +5 -3
- package/dist/RadioGroup/index.cjs +6 -4
- package/dist/RadioGroup/index.cjs.map +1 -1
- package/dist/RadioGroup/index.js +5 -3
- package/dist/RadioTabs/index.cjs +6 -4
- package/dist/RadioTabs/index.cjs.map +1 -1
- package/dist/RadioTabs/index.js +5 -3
- package/dist/Select/index.cjs +6 -4
- package/dist/Select/index.cjs.map +1 -1
- package/dist/Select/index.js +5 -3
- package/dist/SubmitButton/index.cjs +5 -3
- package/dist/SubmitButton/index.cjs.map +1 -1
- package/dist/SubmitButton/index.js +4 -2
- package/dist/Switch/index.cjs +6 -4
- package/dist/Switch/index.cjs.map +1 -1
- package/dist/Switch/index.js +5 -3
- package/dist/TextArea/index.cjs +6 -4
- package/dist/TextArea/index.cjs.map +1 -1
- package/dist/TextArea/index.d.cts +2 -2
- package/dist/TextArea/index.d.ts +2 -2
- package/dist/TextArea/index.js +5 -3
- package/dist/{TextArea-DNpInDsW.d.cts → TextArea-DnFGyl4a.d.cts} +3 -1
- package/dist/{TextArea-DNpInDsW.d.ts → TextArea-DnFGyl4a.d.ts} +3 -1
- package/dist/{chunk-QHBFRUXJ.js → chunk-3BE3GUCZ.js} +2 -2
- package/dist/{chunk-PYYWIAGC.js → chunk-7QWLAPOT.js} +2 -2
- package/dist/{chunk-PYYWIAGC.js.map → chunk-7QWLAPOT.js.map} +1 -1
- package/dist/{chunk-IE7LRIBW.cjs → chunk-AZT3TDWZ.cjs} +29 -11
- package/dist/chunk-AZT3TDWZ.cjs.map +1 -0
- package/dist/{chunk-BLUXOGQ5.js → chunk-DPOGZE5O.js} +2 -2
- package/dist/{chunk-WAP6L4MW.cjs → chunk-GKAVSIH3.cjs} +6 -6
- package/dist/{chunk-WAP6L4MW.cjs.map → chunk-GKAVSIH3.cjs.map} +1 -1
- package/dist/{chunk-NF2XBX5E.cjs → chunk-IAMV2JNU.cjs} +6 -6
- package/dist/{chunk-NF2XBX5E.cjs.map → chunk-IAMV2JNU.cjs.map} +1 -1
- package/dist/{chunk-3HBHQT6M.js → chunk-IZFO7YMQ.js} +5 -5
- package/dist/{chunk-LH6YZ2O5.cjs → chunk-NMYLBRT5.cjs} +9 -9
- package/dist/{chunk-LH6YZ2O5.cjs.map → chunk-NMYLBRT5.cjs.map} +1 -1
- package/dist/{chunk-6ON3SM45.js → chunk-NNKOK5EU.js} +30 -12
- package/dist/chunk-NNKOK5EU.js.map +1 -0
- package/dist/{chunk-HRDUEFZG.js → chunk-NR5MV234.js} +5 -5
- package/dist/{chunk-LSNARJIH.js → chunk-O7DOVGO2.js} +5 -5
- package/dist/chunk-OWWUTKGY.cjs +79 -0
- package/dist/chunk-OWWUTKGY.cjs.map +1 -0
- package/dist/{chunk-NS3JN77D.js → chunk-P3PJSG5J.js} +5 -5
- package/dist/chunk-P6HJOG7D.cjs +41 -0
- package/dist/chunk-P6HJOG7D.cjs.map +1 -0
- package/dist/{chunk-BK4ZFMD3.cjs → chunk-PL44Y7AM.cjs} +3 -3
- package/dist/{chunk-BK4ZFMD3.cjs.map → chunk-PL44Y7AM.cjs.map} +1 -1
- package/dist/chunk-Q2BOMFJ5.js +41 -0
- package/dist/chunk-Q2BOMFJ5.js.map +1 -0
- package/dist/{chunk-EV2JYVMO.js → chunk-QDFIRRB5.js} +27 -20
- package/dist/chunk-QDFIRRB5.js.map +1 -0
- package/dist/{chunk-ZNZ5ZB3A.cjs → chunk-QTROOQ53.cjs} +7 -7
- package/dist/{chunk-ZNZ5ZB3A.cjs.map → chunk-QTROOQ53.cjs.map} +1 -1
- package/dist/{chunk-X4BLYZLW.cjs → chunk-SG6PWCRL.cjs} +27 -20
- package/dist/chunk-SG6PWCRL.cjs.map +1 -0
- package/dist/{chunk-SQWCZMAR.cjs → chunk-SGXLTMB5.cjs} +6 -6
- package/dist/{chunk-SQWCZMAR.cjs.map → chunk-SGXLTMB5.cjs.map} +1 -1
- package/dist/{chunk-Z7AMEDDV.js → chunk-TCYPTU4E.js} +5 -5
- package/dist/{chunk-IH622HTJ.cjs → chunk-U3XAM5F4.cjs} +6 -6
- package/dist/{chunk-IH622HTJ.cjs.map → chunk-U3XAM5F4.cjs.map} +1 -1
- package/dist/chunk-U5WBLGZV.js +79 -0
- package/dist/chunk-U5WBLGZV.js.map +1 -0
- package/dist/{chunk-45LTWIGZ.cjs → chunk-UOTSJ55B.cjs} +6 -6
- package/dist/{chunk-45LTWIGZ.cjs.map → chunk-UOTSJ55B.cjs.map} +1 -1
- package/dist/{chunk-G5UTMDGM.js → chunk-WRNAIS4U.js} +5 -5
- package/dist/{chunk-AQBZLE53.js → chunk-X2PR2IOK.js} +5 -5
- package/dist/{chunk-FJZFJWOX.cjs → chunk-XALYGZ3R.cjs} +4 -4
- package/dist/{chunk-FJZFJWOX.cjs.map → chunk-XALYGZ3R.cjs.map} +1 -1
- package/dist/{chunk-OHEPPLIL.cjs → chunk-Y6EAPURV.cjs} +2 -2
- package/dist/chunk-Y6EAPURV.cjs.map +1 -0
- package/dist/hooks/index.cjs +10 -2
- package/dist/hooks/index.cjs.map +1 -1
- package/dist/hooks/index.d.cts +2 -0
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.js +10 -2
- package/dist/hooks/useInputValueDebounce/index.cjs +9 -0
- package/dist/hooks/useInputValueDebounce/index.cjs.map +1 -0
- package/dist/hooks/useInputValueDebounce/index.d.cts +90 -0
- package/dist/hooks/useInputValueDebounce/index.d.ts +90 -0
- package/dist/hooks/useInputValueDebounce/index.js +9 -0
- package/dist/hooks/useInputValueDebounce/index.js.map +1 -0
- package/dist/hooks/useInputValueTransform/index.cjs +8 -0
- package/dist/hooks/useInputValueTransform/index.cjs.map +1 -0
- package/dist/hooks/useInputValueTransform/index.d.cts +84 -0
- package/dist/hooks/useInputValueTransform/index.d.ts +84 -0
- package/dist/hooks/useInputValueTransform/index.js +8 -0
- package/dist/hooks/useInputValueTransform/index.js.map +1 -0
- package/dist/index.cjs +23 -15
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +24 -16
- package/package.json +12 -2
- package/dist/chunk-6ON3SM45.js.map +0 -1
- package/dist/chunk-EV2JYVMO.js.map +0 -1
- package/dist/chunk-IE7LRIBW.cjs.map +0 -1
- package/dist/chunk-OHEPPLIL.cjs.map +0 -1
- package/dist/chunk-X4BLYZLW.cjs.map +0 -1
- /package/dist/{chunk-QHBFRUXJ.js.map → chunk-3BE3GUCZ.js.map} +0 -0
- /package/dist/{chunk-BLUXOGQ5.js.map → chunk-DPOGZE5O.js.map} +0 -0
- /package/dist/{chunk-3HBHQT6M.js.map → chunk-IZFO7YMQ.js.map} +0 -0
- /package/dist/{chunk-HRDUEFZG.js.map → chunk-NR5MV234.js.map} +0 -0
- /package/dist/{chunk-LSNARJIH.js.map → chunk-O7DOVGO2.js.map} +0 -0
- /package/dist/{chunk-NS3JN77D.js.map → chunk-P3PJSG5J.js.map} +0 -0
- /package/dist/{chunk-Z7AMEDDV.js.map → chunk-TCYPTU4E.js.map} +0 -0
- /package/dist/{chunk-G5UTMDGM.js.map → chunk-WRNAIS4U.js.map} +0 -0
- /package/dist/{chunk-AQBZLE53.js.map → chunk-X2PR2IOK.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks';\n\nimport { Input as HeroInput } from '@heroui/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext, useInputValueDebounce } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface InputProps {\n /** CSS class name */\n className?: string;\n /** debounce delay in milliseconds for form state updates (default: 300ms) */\n debounceDelay?: number;\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 transform?: InputValueTransform;\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 debounceDelay = 300,\n disabled = false,\n endContent = undefined,\n label = undefined,\n name,\n placeholder = ' ',\n size = undefined,\n startContent = undefined,\n testId: _testId = undefined,\n transform = 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 {\n disabled: isDisabled,\n onChange: fieldOnChange,\n onBlur: fieldOnBlur,\n value: fieldValue,\n ref,\n } = field;\n\n // Use hook that provides debounced onChange and enhanced blur handling\n const { onChange, onBlur, value } = useInputValueDebounce({\n debounceDelay,\n onBlur: fieldOnBlur,\n onChange: fieldOnChange,\n transform,\n type,\n value: fieldValue,\n });\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\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={onChange}\n placeholder={placeholder}\n radius=\"sm\"\n ref={ref}\n size={size}\n startContent={startContent}\n type={type}\n // @ts-expect-error can be number for input type number\n value={value}\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":";;;;;;;;;;;;;;;AAGA,SAAS,SAAS,iBAAiB;AAEnC,SAAS,UAAU;AAyFF,SAOP,UAPO,KAOP,YAPO;AArDjB,IAAM,QAAQ,CAAC;AAAA,EACb,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,QAAQ,UAAU;AAAA,EAClB,YAAY;AAAA,EACZ,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;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,EACF,IAAI;AAGJ,QAAM,EAAE,UAAU,QAAQ,MAAM,IAAI,sBAAsB;AAAA,IACxD;AAAA,IACA,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,CAAC;AAED,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAE3B,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;AAAA,MACA;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA,SAAQ;AAAA;AAAA,EACV;AAEJ;AAEA,IAAO,gBAAQ;;;ACtHf,IAAOA,iBAAQ;","names":["Input_default"]}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _chunkGNYQC5IJcjs = require('./chunk-GNYQC5IJ.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
var
|
|
11
|
+
var _chunkY6EAPURVcjs = require('./chunk-Y6EAPURV.cjs');
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
@@ -40,11 +40,11 @@ var Switch = ({
|
|
|
40
40
|
name,
|
|
41
41
|
testId: _testId = void 0
|
|
42
42
|
}) => {
|
|
43
|
-
const { control, debugMode, getFieldState } =
|
|
43
|
+
const { control, debugMode, getFieldState } = _chunkY6EAPURVcjs.useFormContext.call(void 0, );
|
|
44
44
|
const { error, required, testId, invalid } = getFieldState(name, _testId);
|
|
45
|
-
const { field } =
|
|
45
|
+
const { field } = _chunkY6EAPURVcjs.useController.call(void 0, { name, control, disabled });
|
|
46
46
|
const { disabled: isDisabled, value, ref, onBlur, onChange } = field;
|
|
47
|
-
const { label, getInputProps, getErrorMessageProps } =
|
|
47
|
+
const { label, getInputProps, getErrorMessageProps } = _chunkY6EAPURVcjs.useInput.call(void 0, {
|
|
48
48
|
errorMessage: JSON.stringify(error),
|
|
49
49
|
isInvalid: invalid,
|
|
50
50
|
isRequired: required,
|
|
@@ -95,4 +95,4 @@ var Switch_default2 = Switch_default;
|
|
|
95
95
|
|
|
96
96
|
|
|
97
97
|
exports.Switch_default = Switch_default; exports.Switch_default2 = Switch_default2;
|
|
98
|
-
//# sourceMappingURL=chunk-
|
|
98
|
+
//# sourceMappingURL=chunk-QTROOQ53.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-QTROOQ53.cjs","../src/Switch/Switch.tsx","../src/Switch/index.ts"],"names":["Switch_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-QTROOQ53.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\n\nimport { Switch as HeroSwitch } from '@heroui/switch';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext, useInput } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const switchVariants = tv({\n slots: {\n base: '',\n endContent: '',\n errorMessage: 'ml-1 mt-1',\n // see HeroUI styles for group-data condition,\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'text-sm text-foreground 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 outerWrapper: 'place-content-center',\n startContent: '',\n thumb: '',\n thumbIcon: '',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof switchVariants>;\ntype ClassName = TVClassName<typeof switchVariants>;\n\nexport interface SwitchProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** whether the select should be disabled */\n disabled?: boolean;\n /** component displayed next to the switch. */\n label?: React.ReactNode;\n /** name the field is registered under */\n name: string;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Switch component based on [HeroUI Switch](https://www.heroui.com//docs/components/switch)\n */\nconst Switch = ({\n className = undefined,\n disabled = false,\n label: _label = undefined,\n name,\n testId: _testId = undefined,\n}: SwitchProps) => {\n const { control, debugMode, getFieldState } = useFormContext();\n const { error, required, testId, invalid } = getFieldState(name, _testId);\n\n const { field } = useController({ name, control, disabled });\n const { disabled: isDisabled, value, ref, onBlur, onChange } = field;\n\n const { label, getInputProps, getErrorMessageProps } = useInput({\n errorMessage: JSON.stringify(error),\n isInvalid: invalid,\n isRequired: required,\n label: _label,\n labelPlacement: 'outside',\n placeholder: ' ',\n });\n\n const variants = switchVariants();\n const classNames = variantsToClassNames(variants, className, 'outerWrapper');\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n\n return (\n <div className={classNames.outerWrapper}>\n <HeroSwitch\n aria-describedby={getInputProps()['aria-describedby']}\n classNames={classNames}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n isDisabled={isDisabled}\n isSelected={!!value}\n name={name}\n onBlur={onBlur}\n onValueChange={onChange}\n ref={ref}\n required={required}\n value={value}\n >\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </HeroSwitch>\n {error && (\n <div className={classNames.errorMessage}>\n <div\n /* eslint-disable-next-line react/jsx-props-no-spreading */\n {...getErrorMessageProps()}\n >\n <FieldValidationError error={error} testId={testId} />\n </div>\n </div>\n )}\n </div>\n );\n};\n\nexport default Switch;\n","import Switch from './Switch';\n\nexport type { SwitchProps } from './Switch';\n\nexport { Switch };\n\nexport default Switch;\n"]}
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
+
var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
|
|
4
|
+
|
|
5
|
+
|
|
3
6
|
var _chunkGNYQC5IJcjs = require('./chunk-GNYQC5IJ.cjs');
|
|
4
7
|
|
|
5
8
|
|
|
6
|
-
var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
|
|
7
9
|
|
|
10
|
+
var _chunkY6EAPURVcjs = require('./chunk-Y6EAPURV.cjs');
|
|
8
11
|
|
|
9
12
|
|
|
10
|
-
var
|
|
13
|
+
var _chunkOWWUTKGYcjs = require('./chunk-OWWUTKGY.cjs');
|
|
11
14
|
|
|
12
15
|
// src/Input/Input.tsx
|
|
13
16
|
var _input = require('@heroui/input');
|
|
@@ -15,6 +18,7 @@ var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
|
15
18
|
var _jsxruntime = require('react/jsx-runtime');
|
|
16
19
|
var Input = ({
|
|
17
20
|
className = void 0,
|
|
21
|
+
debounceDelay = 300,
|
|
18
22
|
disabled = false,
|
|
19
23
|
endContent = void 0,
|
|
20
24
|
label = void 0,
|
|
@@ -23,30 +27,33 @@ var Input = ({
|
|
|
23
27
|
size = void 0,
|
|
24
28
|
startContent = void 0,
|
|
25
29
|
testId: _testId = void 0,
|
|
26
|
-
|
|
30
|
+
transform = void 0,
|
|
27
31
|
type = void 0
|
|
28
32
|
}) => {
|
|
29
|
-
const { control, debugMode, getFieldState } =
|
|
33
|
+
const { control, debugMode, getFieldState } = _chunkY6EAPURVcjs.useFormContext.call(void 0, );
|
|
30
34
|
const { error, invalid, required, testId } = getFieldState(name, _testId);
|
|
31
|
-
const { field } =
|
|
35
|
+
const { field } = _chunkY6EAPURVcjs.useController.call(void 0, {
|
|
32
36
|
control,
|
|
33
37
|
disabled,
|
|
34
38
|
name
|
|
35
39
|
});
|
|
36
|
-
const {
|
|
40
|
+
const {
|
|
41
|
+
disabled: isDisabled,
|
|
42
|
+
onChange: fieldOnChange,
|
|
43
|
+
onBlur: fieldOnBlur,
|
|
44
|
+
value: fieldValue,
|
|
45
|
+
ref
|
|
46
|
+
} = field;
|
|
47
|
+
const { onChange, onBlur, value } = _chunkOWWUTKGYcjs.useInputValueDebounce.call(void 0, {
|
|
48
|
+
debounceDelay,
|
|
49
|
+
onBlur: fieldOnBlur,
|
|
50
|
+
onChange: fieldOnChange,
|
|
51
|
+
transform,
|
|
52
|
+
type,
|
|
53
|
+
value: fieldValue
|
|
54
|
+
});
|
|
37
55
|
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
38
56
|
const showLabel = label || showTestIdCopyButton;
|
|
39
|
-
const displayValue = (transformValue == null ? void 0 : transformValue.displayValue) ? transformValue.displayValue(value != null ? value : "") : value != null ? value : "";
|
|
40
|
-
const handleChange = (e) => {
|
|
41
|
-
const inputValue = e.target.value;
|
|
42
|
-
if (type === "number") {
|
|
43
|
-
onChange(inputValue === "" ? "" : Number(inputValue));
|
|
44
|
-
} else {
|
|
45
|
-
onChange(
|
|
46
|
-
(transformValue == null ? void 0 : transformValue.formValue) ? transformValue.formValue(inputValue) : inputValue
|
|
47
|
-
);
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
57
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
51
58
|
_input.Input,
|
|
52
59
|
{
|
|
@@ -67,14 +74,14 @@ var Input = ({
|
|
|
67
74
|
labelPlacement: "outside",
|
|
68
75
|
name,
|
|
69
76
|
onBlur,
|
|
70
|
-
onChange
|
|
77
|
+
onChange,
|
|
71
78
|
placeholder,
|
|
72
79
|
radius: "sm",
|
|
73
80
|
ref,
|
|
74
81
|
size,
|
|
75
82
|
startContent,
|
|
76
83
|
type,
|
|
77
|
-
value
|
|
84
|
+
value,
|
|
78
85
|
variant: "bordered"
|
|
79
86
|
}
|
|
80
87
|
);
|
|
@@ -88,4 +95,4 @@ var Input_default2 = Input_default;
|
|
|
88
95
|
|
|
89
96
|
|
|
90
97
|
exports.Input_default = Input_default; exports.Input_default2 = Input_default2;
|
|
91
|
-
//# sourceMappingURL=chunk-
|
|
98
|
+
//# sourceMappingURL=chunk-SG6PWCRL.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-SG6PWCRL.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-SG6PWCRL.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks';\n\nimport { Input as HeroInput } from '@heroui/input';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext, useInputValueDebounce } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport interface InputProps {\n /** CSS class name */\n className?: string;\n /** debounce delay in milliseconds for form state updates (default: 300ms) */\n debounceDelay?: number;\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 transform?: InputValueTransform;\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 debounceDelay = 300,\n disabled = false,\n endContent = undefined,\n label = undefined,\n name,\n placeholder = ' ',\n size = undefined,\n startContent = undefined,\n testId: _testId = undefined,\n transform = 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 {\n disabled: isDisabled,\n onChange: fieldOnChange,\n onBlur: fieldOnBlur,\n value: fieldValue,\n ref,\n } = field;\n\n // Use hook that provides debounced onChange and enhanced blur handling\n const { onChange, onBlur, value } = useInputValueDebounce({\n debounceDelay,\n onBlur: fieldOnBlur,\n onChange: fieldOnChange,\n transform,\n type,\n value: fieldValue,\n });\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\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={onChange}\n placeholder={placeholder}\n radius=\"sm\"\n ref={ref}\n size={size}\n startContent={startContent}\n type={type}\n // @ts-expect-error can be number for input type number\n value={value}\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,13 +1,13 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _chunkGNYQC5IJcjs = require('./chunk-GNYQC5IJ.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _chunkY6EAPURVcjs = require('./chunk-Y6EAPURV.cjs');
|
|
11
11
|
|
|
12
12
|
// src/RadioGroup/RadioGroup.tsx
|
|
13
13
|
var _radio = require('@heroui/radio');
|
|
@@ -39,9 +39,9 @@ var RadioGroup = ({
|
|
|
39
39
|
options,
|
|
40
40
|
testId: _testId = void 0
|
|
41
41
|
}) => {
|
|
42
|
-
const { control, debugMode, getFieldState, getValues } =
|
|
42
|
+
const { control, debugMode, getFieldState, getValues } = _chunkY6EAPURVcjs.useFormContext.call(void 0, );
|
|
43
43
|
const { error, invalid, required, testId } = getFieldState(name, _testId);
|
|
44
|
-
const { field } =
|
|
44
|
+
const { field } = _chunkY6EAPURVcjs.useController.call(void 0, { control, disabled, name });
|
|
45
45
|
const { onChange, disabled: isDisabled, onBlur, ref } = field;
|
|
46
46
|
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
47
47
|
const showLabel = label || showTestIdCopyButton;
|
|
@@ -109,4 +109,4 @@ var RadioGroup_default2 = RadioGroup_default;
|
|
|
109
109
|
|
|
110
110
|
|
|
111
111
|
exports.RadioGroup_default = RadioGroup_default; exports.RadioGroup_default2 = RadioGroup_default2;
|
|
112
|
-
//# sourceMappingURL=chunk-
|
|
112
|
+
//# sourceMappingURL=chunk-SGXLTMB5.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-SGXLTMB5.cjs","../src/RadioGroup/RadioGroup.tsx","../src/RadioGroup/index.ts"],"names":["RadioGroup_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-SGXLTMB5.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup, Radio } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const radioGroupVariants = tv({\n slots: {\n // Needs group for group-data condition\n base: 'group',\n itemBase: '',\n itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n itemDescription: '',\n itemLabel: 'text-sm',\n itemLabelWrapper: '',\n itemWrapper:\n 'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\n // see HeroUI styles for group-data condition,\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radioGroupVariants>;\ntype ClassName = TVClassName<typeof radioGroupVariants>;\n\nexport interface RadioGroupOption {\n /** disables the option */\n disabled?: boolean;\n /** option label */\n label?: React.ReactNode;\n /** option icon */\n icon?: ReactNode;\n /** HTML data-testid attribute of the option */\n testId?: string;\n /** option value */\n value: string;\n}\n\nexport interface RadioGroupProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** determines orientation of the Buttons. */\n inline?: boolean;\n /** Label displayed next to the RadioButton. */\n label?: ReactNode;\n /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n name: string;\n /** Radio button configuration. */\n options: RadioGroupOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * RadioGroup component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioGroup = ({\n className = undefined,\n disabled = false,\n inline = false,\n label = undefined,\n name,\n options,\n testId: _testId = undefined,\n}: RadioGroupProps): ReactElement => {\n const { control, debugMode, getFieldState, getValues } = useFormContext();\n\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({ control, disabled, name });\n const { onChange, disabled: isDisabled, onBlur, ref } = field;\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n const variants = radioGroupVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const itemClassNames = {\n base: classNames.itemBase,\n control: classNames.itemControl,\n description: classNames.itemDescription,\n label: classNames.itemLabel,\n labelWrapper: classNames.itemLabelWrapper,\n wrapper: classNames.itemWrapper,\n };\n\n return (\n <HeroRadioGroup\n classNames={classNames}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n defaultValue={getValues()[name]}\n errorMessage={\n error && <FieldValidationError error={error} testId={testId} />\n }\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label>\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </label>\n )\n }\n name={name}\n orientation={inline ? 'horizontal' : 'vertical'}\n onBlur={onBlur}\n ref={ref}\n >\n {options.map((option) => {\n if ('value' in option) {\n const optionTestId = slugify(\n `${testId}_option_${option.testId || option.value}`,\n { replaceDots: true },\n );\n return (\n <Radio\n classNames={itemClassNames}\n data-testid={optionTestId}\n isDisabled={isDisabled || option.disabled}\n key={option.value}\n onChange={onChange}\n value={option.value}\n >\n {option.label ? option.label : option.value}\n </Radio>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default RadioGroup;\n","import RadioGroup from './RadioGroup';\n\nexport type { RadioGroupProps } from './RadioGroup';\n\nexport { RadioGroup };\n\nexport default RadioGroup;\n"]}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
FieldValidationError_default
|
|
3
|
-
} from "./chunk-UTFZRBBS.js";
|
|
4
1
|
import {
|
|
5
2
|
FieldCopyTestIdButton_default
|
|
6
3
|
} from "./chunk-BQGN3JTU.js";
|
|
4
|
+
import {
|
|
5
|
+
FieldValidationError_default
|
|
6
|
+
} from "./chunk-UTFZRBBS.js";
|
|
7
7
|
import {
|
|
8
8
|
useController,
|
|
9
9
|
useFormContext
|
|
10
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-7QWLAPOT.js";
|
|
11
11
|
import {
|
|
12
12
|
__spreadProps,
|
|
13
13
|
__spreadValues
|
|
@@ -233,4 +233,4 @@ export {
|
|
|
233
233
|
Select_default,
|
|
234
234
|
Select_default2
|
|
235
235
|
};
|
|
236
|
-
//# sourceMappingURL=chunk-
|
|
236
|
+
//# sourceMappingURL=chunk-TCYPTU4E.js.map
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _chunkGNYQC5IJcjs = require('./chunk-GNYQC5IJ.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _chunkY6EAPURVcjs = require('./chunk-Y6EAPURV.cjs');
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
@@ -91,9 +91,9 @@ var Select = ({
|
|
|
91
91
|
testId: _testId = void 0
|
|
92
92
|
}) => {
|
|
93
93
|
var _a;
|
|
94
|
-
const { control, debugMode, getFieldState } =
|
|
94
|
+
const { control, debugMode, getFieldState } = _chunkY6EAPURVcjs.useFormContext.call(void 0, );
|
|
95
95
|
const { error, invalid, required, testId } = getFieldState(name, _testId);
|
|
96
|
-
const { field } =
|
|
96
|
+
const { field } = _chunkY6EAPURVcjs.useController.call(void 0, { control, disabled, name });
|
|
97
97
|
const { onChange, value, ref, onBlur } = field;
|
|
98
98
|
const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
|
|
99
99
|
const variants = selectVariants();
|
|
@@ -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-
|
|
236
|
+
//# sourceMappingURL=chunk-U3XAM5F4.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-IH622HTJ.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-IH622HTJ.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"]}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-U3XAM5F4.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-U3XAM5F4.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"]}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import {
|
|
2
|
+
useInputValueTransform
|
|
3
|
+
} from "./chunk-Q2BOMFJ5.js";
|
|
4
|
+
import {
|
|
5
|
+
__spreadProps,
|
|
6
|
+
__spreadValues
|
|
7
|
+
} from "./chunk-K2V4ULA2.js";
|
|
8
|
+
|
|
9
|
+
// src/hooks/useInputValueDebounce/useInputValueDebounce.ts
|
|
10
|
+
import { useCallback, useEffect, useRef, useState } from "react";
|
|
11
|
+
var useInputValueDebounce = ({
|
|
12
|
+
debounceDelay = 300,
|
|
13
|
+
onBlur,
|
|
14
|
+
onChange,
|
|
15
|
+
transform,
|
|
16
|
+
type,
|
|
17
|
+
value
|
|
18
|
+
}) => {
|
|
19
|
+
const { toDisplayValue, toFormValue } = useInputValueTransform({
|
|
20
|
+
transform,
|
|
21
|
+
type
|
|
22
|
+
});
|
|
23
|
+
const [displayValue, setDisplayValue] = useState(() => toDisplayValue(value));
|
|
24
|
+
const timeoutRef = useRef(null);
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
setDisplayValue(toDisplayValue(value));
|
|
27
|
+
}, [value, toDisplayValue]);
|
|
28
|
+
const handleChange = useCallback(
|
|
29
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
30
|
+
(...event) => {
|
|
31
|
+
var _a, _b, _c;
|
|
32
|
+
const rawValue = (_c = (_b = (_a = event[0]) == null ? void 0 : _a.target) == null ? void 0 : _b.value) != null ? _c : event[0];
|
|
33
|
+
const newDisplayValue = transform ? rawValue : toDisplayValue(rawValue);
|
|
34
|
+
setDisplayValue(newDisplayValue);
|
|
35
|
+
const formValue = toFormValue(newDisplayValue);
|
|
36
|
+
if (timeoutRef.current) {
|
|
37
|
+
clearTimeout(timeoutRef.current);
|
|
38
|
+
}
|
|
39
|
+
const executeOnChange = () => {
|
|
40
|
+
var _a2;
|
|
41
|
+
if ((_a2 = event[0]) == null ? void 0 : _a2.target) {
|
|
42
|
+
const convertedEvent = __spreadProps(__spreadValues({}, event[0]), {
|
|
43
|
+
target: __spreadProps(__spreadValues({}, event[0].target), {
|
|
44
|
+
value: formValue
|
|
45
|
+
})
|
|
46
|
+
});
|
|
47
|
+
onChange(convertedEvent, ...event.slice(1));
|
|
48
|
+
} else {
|
|
49
|
+
onChange(formValue);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
if (debounceDelay <= 0) {
|
|
53
|
+
executeOnChange();
|
|
54
|
+
} else {
|
|
55
|
+
timeoutRef.current = setTimeout(executeOnChange, debounceDelay);
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
[onChange, debounceDelay, toDisplayValue, toFormValue, transform]
|
|
59
|
+
);
|
|
60
|
+
const handleBlur = useCallback(() => {
|
|
61
|
+
if (timeoutRef.current) {
|
|
62
|
+
clearTimeout(timeoutRef.current);
|
|
63
|
+
timeoutRef.current = null;
|
|
64
|
+
const formValue = toFormValue(displayValue);
|
|
65
|
+
onChange(formValue);
|
|
66
|
+
}
|
|
67
|
+
onBlur();
|
|
68
|
+
}, [onChange, onBlur, toFormValue, displayValue]);
|
|
69
|
+
return {
|
|
70
|
+
onChange: handleChange,
|
|
71
|
+
onBlur: handleBlur,
|
|
72
|
+
value: displayValue
|
|
73
|
+
};
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
export {
|
|
77
|
+
useInputValueDebounce
|
|
78
|
+
};
|
|
79
|
+
//# sourceMappingURL=chunk-U5WBLGZV.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useInputValueDebounce/useInputValueDebounce.ts"],"sourcesContent":["import type { InputValueTransform } from '../useInputValueTransform/useInputValueTransform';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useInputValueTransform } from '../useInputValueTransform/useInputValueTransform';\n\nexport interface UseInputValueDebounceOptions {\n /** Debounce delay in milliseconds (default: 300) */\n debounceDelay?: number;\n /** The onBlur function to call after flushing debounced value */\n onBlur: () => void;\n /** The onChange function to call with debounced value */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange: (...event: any[]) => void;\n /** Value transformation functions */\n transform?: InputValueTransform;\n /** Input type to handle number conversion (optional) */\n type?: 'text' | 'number' | 'password';\n /** The initial form value */\n value: string | number;\n}\n\nexport interface UseInputValueDebounceReturn {\n /** Enhanced onChange function with debouncing */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange: (...event: any[]) => void;\n /** Enhanced onBlur function that flushes current value immediately */\n onBlur: () => void;\n /** The field value that is displayed - updates immediately */\n value: string | number;\n}\n\n/**\n * Custom hook for debouncing input value changes with immediate blur support.\n *\n * Provides immediate visual feedback by updating the display value instantly,\n * while debouncing the actual form state changes. When the input loses focus,\n * any pending debounced changes are immediately flushed.\n *\n * **Key Features:**\n * - **Debouncing**: Delays form updates until user stops typing\n * - **Transform support**: Optional value transformation between display and form values\n * - **Number conversion**: Automatic conversion for number inputs\n * - **Immediate display updates**: UI stays responsive during debouncing\n * - **Blur flushing**: Immediately applies pending changes on blur\n *\n * @param options Configuration for debounced value handling\n * @param options.debounceDelay Delay in milliseconds (default: 300)\n * @param options.onBlur Function to call after flushing debounced value\n * @param options.onChange Function to call with debounced value\n * @param options.transform Optional transform functions for display ↔ form value conversion\n * @param options.type Input type for number conversion ('text' | 'number' | 'password')\n * @param options.value The initial form value\n * @returns Object containing enhanced onChange, onBlur, and immediate display value\n *\n * @example\n * Basic usage with debouncing:\n * ```tsx\n * const { onChange, onBlur, value } = useInputValueDebounce({\n * debounceDelay: 300,\n * onBlur: field.onBlur,\n * onChange: field.onChange,\n * value: field.value,\n * });\n * ```\n *\n * @example\n * Number input with automatic conversion:\n * ```tsx\n * const { onChange, onBlur, value } = useInputValueDebounce({\n * debounceDelay: 300,\n * onBlur: field.onBlur,\n * onChange: field.onChange,\n * type: 'number',\n * value: field.value, // Display: 123 (number), Form: 123 (number)\n * });\n * ```\n *\n * @example\n * Currency formatting with transforms:\n * ```tsx\n * const currencyTransform = {\n * displayValue: (val) => val ? `$${Number(val).toFixed(2)}` : '',\n * formValue: (val) => Number(val.replace(/[$,]/g, '')) || 0\n * };\n *\n * const { onChange, onBlur, value } = useInputValueDebounce({\n * debounceDelay: 300,\n * onBlur: field.onBlur,\n * onChange: field.onChange,\n * transform: currencyTransform,\n * value: field.value, // Display: \"$100.00\", Form: 100\n * });\n * ```\n */\nexport const useInputValueDebounce = ({\n debounceDelay = 300,\n onBlur,\n onChange,\n transform,\n type,\n value,\n}: UseInputValueDebounceOptions): UseInputValueDebounceReturn => {\n // Get conversion utilities from transform hook\n const { toDisplayValue, toFormValue } = useInputValueTransform({\n transform,\n type,\n });\n\n // Track display value for synchronous updates\n const [displayValue, setDisplayValue] = useState(() => toDisplayValue(value));\n\n const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n // Sync with external value changes\n useEffect(() => {\n setDisplayValue(toDisplayValue(value));\n }, [value, toDisplayValue]);\n\n // Enhanced onChange handler with debouncing\n const handleChange = useCallback(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (...event: any[]) => {\n // Extract the raw input value\n const rawValue = event[0]?.target?.value ?? event[0];\n\n // For transforms, user input is already in display format\n // For number types, convert strings to numbers for display\n const newDisplayValue = transform ? rawValue : toDisplayValue(rawValue);\n setDisplayValue(newDisplayValue);\n\n // Convert to form value using transform utilities\n const formValue = toFormValue(newDisplayValue);\n\n // Clear existing timeout\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n\n const executeOnChange = () => {\n // Preserve event structure if original was an event\n if (event[0]?.target) {\n const convertedEvent = {\n ...event[0],\n target: {\n ...event[0].target,\n value: formValue,\n },\n };\n onChange(convertedEvent, ...event.slice(1));\n } else {\n onChange(formValue);\n }\n };\n\n // Execute immediately or after delay\n if (debounceDelay <= 0) {\n executeOnChange();\n } else {\n timeoutRef.current = setTimeout(executeOnChange, debounceDelay);\n }\n },\n [onChange, debounceDelay, toDisplayValue, toFormValue, transform],\n );\n\n // Enhanced blur handler\n const handleBlur = useCallback(() => {\n // Flush pending changes\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n\n // Get form value from current display value\n const formValue = toFormValue(displayValue);\n onChange(formValue);\n }\n onBlur();\n }, [onChange, onBlur, toFormValue, displayValue]);\n\n return {\n onChange: handleChange,\n onBlur: handleBlur,\n value: displayValue,\n };\n};\n"],"mappings":";;;;;;;;;AAEA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AA6FlD,IAAM,wBAAwB,CAAC;AAAA,EACpC,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiE;AAE/D,QAAM,EAAE,gBAAgB,YAAY,IAAI,uBAAuB;AAAA,IAC7D;AAAA,IACA;AAAA,EACF,CAAC;AAGD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,MAAM,eAAe,KAAK,CAAC;AAE5E,QAAM,aAAa,OAA8B,IAAI;AAGrD,YAAU,MAAM;AACd,oBAAgB,eAAe,KAAK,CAAC;AAAA,EACvC,GAAG,CAAC,OAAO,cAAc,CAAC;AAG1B,QAAM,eAAe;AAAA;AAAA,IAEnB,IAAI,UAAiB;AA1HzB;AA4HM,YAAM,YAAW,uBAAM,CAAC,MAAP,mBAAU,WAAV,mBAAkB,UAAlB,YAA2B,MAAM,CAAC;AAInD,YAAM,kBAAkB,YAAY,WAAW,eAAe,QAAQ;AACtE,sBAAgB,eAAe;AAG/B,YAAM,YAAY,YAAY,eAAe;AAG7C,UAAI,WAAW,SAAS;AACtB,qBAAa,WAAW,OAAO;AAAA,MACjC;AAEA,YAAM,kBAAkB,MAAM;AA3IpC,YAAAA;AA6IQ,aAAIA,MAAA,MAAM,CAAC,MAAP,gBAAAA,IAAU,QAAQ;AACpB,gBAAM,iBAAiB,iCAClB,MAAM,CAAC,IADW;AAAA,YAErB,QAAQ,iCACH,MAAM,CAAC,EAAE,SADN;AAAA,cAEN,OAAO;AAAA,YACT;AAAA,UACF;AACA,mBAAS,gBAAgB,GAAG,MAAM,MAAM,CAAC,CAAC;AAAA,QAC5C,OAAO;AACL,mBAAS,SAAS;AAAA,QACpB;AAAA,MACF;AAGA,UAAI,iBAAiB,GAAG;AACtB,wBAAgB;AAAA,MAClB,OAAO;AACL,mBAAW,UAAU,WAAW,iBAAiB,aAAa;AAAA,MAChE;AAAA,IACF;AAAA,IACA,CAAC,UAAU,eAAe,gBAAgB,aAAa,SAAS;AAAA,EAClE;AAGA,QAAM,aAAa,YAAY,MAAM;AAEnC,QAAI,WAAW,SAAS;AACtB,mBAAa,WAAW,OAAO;AAC/B,iBAAW,UAAU;AAGrB,YAAM,YAAY,YAAY,YAAY;AAC1C,eAAS,SAAS;AAAA,IACpB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,QAAQ,aAAa,YAAY,CAAC;AAEhD,SAAO;AAAA,IACL,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AACF;","names":["_a"]}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkPA2DQCBYcjs = require('./chunk-PA2DQCBY.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _chunkGNYQC5IJcjs = require('./chunk-GNYQC5IJ.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _chunkY6EAPURVcjs = require('./chunk-Y6EAPURV.cjs');
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
@@ -94,9 +94,9 @@ var RadioBoxes = ({
|
|
|
94
94
|
options,
|
|
95
95
|
testId: _testId = void 0
|
|
96
96
|
}) => {
|
|
97
|
-
const { control, debugMode, getFieldState, getValues } =
|
|
97
|
+
const { control, debugMode, getFieldState, getValues } = _chunkY6EAPURVcjs.useFormContext.call(void 0, );
|
|
98
98
|
const { error, invalid, required, testId } = getFieldState(name, _testId);
|
|
99
|
-
const { field } =
|
|
99
|
+
const { field } = _chunkY6EAPURVcjs.useController.call(void 0, { control, disabled, name });
|
|
100
100
|
const { onChange, disabled: isDisabled, onBlur, ref } = field;
|
|
101
101
|
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
102
102
|
const showLabel = label || showTestIdCopyButton;
|
|
@@ -166,4 +166,4 @@ var RadioBoxes_default2 = RadioBoxes_default;
|
|
|
166
166
|
|
|
167
167
|
|
|
168
168
|
exports.RadioBoxes_default = RadioBoxes_default; exports.RadioBoxes_default2 = RadioBoxes_default2;
|
|
169
|
-
//# sourceMappingURL=chunk-
|
|
169
|
+
//# sourceMappingURL=chunk-UOTSJ55B.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-45LTWIGZ.cjs","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/index.ts"],"names":["jsx","jsxs","RadioBoxes_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-45LTWIGZ.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n slots: {\n base: 'group', // Needs group for group-data condition\n itemBase: '',\n itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n itemDescription: '',\n itemLabel: 'text-sm',\n itemLabelWrapper: '',\n itemWrapper:\n 'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\n // see HeroUI styles for group-data condition,\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n /** Description of the value. Works with variant radioBox. */\n description?: ReactNode;\n /** disables the option */\n disabled?: boolean;\n /** option label */\n label?: ReactNode;\n /** option icon */\n icon?: ReactNode;\n /** HTML data-testid attribute of the option */\n testId?: string;\n /** option value */\n value: string;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** determines orientation of the Buttons. */\n inline?: boolean;\n /** Label displayed next to the RadioButton. */\n label?: ReactNode;\n /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n name: string;\n /** Radio button configuration. */\n options: RadioBoxesOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n className = undefined,\n disabled = false,\n inline = false,\n label = undefined,\n name,\n options,\n testId: _testId = undefined,\n}: RadioBoxesProps): ReactElement => {\n const { control, debugMode, getFieldState, getValues } = useFormContext();\n\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({ control, disabled, name });\n const { onChange, disabled: isDisabled, onBlur, ref } = field;\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n const variants = radioBoxesVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const itemClassNames = {\n base: classNames.itemBase,\n control: classNames.itemControl,\n description: classNames.itemDescription,\n label: classNames.itemLabel,\n labelWrapper: classNames.itemLabelWrapper,\n wrapper: classNames.itemWrapper,\n };\n\n return (\n <HeroRadioGroup\n classNames={classNames}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n defaultValue={getValues()[name]}\n errorMessage={\n error && <FieldValidationError error={error} testId={testId} />\n }\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label>\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </label>\n )\n }\n name={name}\n orientation={inline ? 'horizontal' : 'vertical'}\n onBlur={onBlur}\n ref={ref}\n >\n {options.map((option) => {\n if ('value' in option) {\n const optionTestId = slugify(\n `${testId}_option_${option.testId || option.value}`,\n { replaceDots: true },\n );\n return (\n <RadioBox\n classNames={itemClassNames}\n data-testid={optionTestId}\n description={option.description}\n icon={option.icon}\n isDisabled={isDisabled || option.disabled}\n key={option.value}\n onChange={onChange}\n value={option.value}\n >\n {option.label ? option.label : option.value}\n </RadioBox>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default RadioBoxes;\n","import type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends HeroRadioProps {\n /** icon for the option */\n icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\n const {\n children,\n Component,\n description,\n getBaseProps,\n getControlProps,\n getInputProps,\n getLabelProps,\n getLabelWrapperProps,\n getWrapperProps,\n isDisabled,\n } = useRadio(props);\n\n return (\n <Component\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getBaseProps()}\n className={cn(\n 'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n {\n // disabled styles\n 'pointer-events-none opacity-disabled': isDisabled,\n },\n )}\n >\n <VisuallyHidden>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <input {...getInputProps()} />\n </VisuallyHidden>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <span {...getWrapperProps()}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <span {...getControlProps()} />\n </span>\n {icon}\n <div\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getLabelWrapperProps()}\n className={cn(getLabelWrapperProps().className, 'grow')}\n >\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n {children && <span {...getLabelProps()}>{children}</span>}\n {description && (\n <span className=\"text-small text-foreground opacity-70\">\n {description}\n </span>\n )}\n </div>\n </Component>\n );\n};\n\nexport default RadioBox;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"]}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-UOTSJ55B.cjs","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/index.ts"],"names":["jsx","jsxs","RadioBoxes_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-UOTSJ55B.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useController, useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n slots: {\n base: 'group', // Needs group for group-data condition\n itemBase: '',\n itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n itemDescription: '',\n itemLabel: 'text-sm',\n itemLabelWrapper: '',\n itemWrapper:\n 'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\n // see HeroUI styles for group-data condition,\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n /** Description of the value. Works with variant radioBox. */\n description?: ReactNode;\n /** disables the option */\n disabled?: boolean;\n /** option label */\n label?: ReactNode;\n /** option icon */\n icon?: ReactNode;\n /** HTML data-testid attribute of the option */\n testId?: string;\n /** option value */\n value: string;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** determines orientation of the Buttons. */\n inline?: boolean;\n /** Label displayed next to the RadioButton. */\n label?: ReactNode;\n /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n name: string;\n /** Radio button configuration. */\n options: RadioBoxesOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n className = undefined,\n disabled = false,\n inline = false,\n label = undefined,\n name,\n options,\n testId: _testId = undefined,\n}: RadioBoxesProps): ReactElement => {\n const { control, debugMode, getFieldState, getValues } = useFormContext();\n\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({ control, disabled, name });\n const { onChange, disabled: isDisabled, onBlur, ref } = field;\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n const variants = radioBoxesVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const itemClassNames = {\n base: classNames.itemBase,\n control: classNames.itemControl,\n description: classNames.itemDescription,\n label: classNames.itemLabel,\n labelWrapper: classNames.itemLabelWrapper,\n wrapper: classNames.itemWrapper,\n };\n\n return (\n <HeroRadioGroup\n classNames={classNames}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n defaultValue={getValues()[name]}\n errorMessage={\n error && <FieldValidationError error={error} testId={testId} />\n }\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label>\n {label}\n {showTestIdCopyButton && <FieldCopyTestIdButton testId={testId} />}\n </label>\n )\n }\n name={name}\n orientation={inline ? 'horizontal' : 'vertical'}\n onBlur={onBlur}\n ref={ref}\n >\n {options.map((option) => {\n if ('value' in option) {\n const optionTestId = slugify(\n `${testId}_option_${option.testId || option.value}`,\n { replaceDots: true },\n );\n return (\n <RadioBox\n classNames={itemClassNames}\n data-testid={optionTestId}\n description={option.description}\n icon={option.icon}\n isDisabled={isDisabled || option.disabled}\n key={option.value}\n onChange={onChange}\n value={option.value}\n >\n {option.label ? option.label : option.value}\n </RadioBox>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default RadioBoxes;\n","import type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends HeroRadioProps {\n /** icon for the option */\n icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\n const {\n children,\n Component,\n description,\n getBaseProps,\n getControlProps,\n getInputProps,\n getLabelProps,\n getLabelWrapperProps,\n getWrapperProps,\n isDisabled,\n } = useRadio(props);\n\n return (\n <Component\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getBaseProps()}\n className={cn(\n 'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n {\n // disabled styles\n 'pointer-events-none opacity-disabled': isDisabled,\n },\n )}\n >\n <VisuallyHidden>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <input {...getInputProps()} />\n </VisuallyHidden>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <span {...getWrapperProps()}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <span {...getControlProps()} />\n </span>\n {icon}\n <div\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getLabelWrapperProps()}\n className={cn(getLabelWrapperProps().className, 'grow')}\n >\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n {children && <span {...getLabelProps()}>{children}</span>}\n {description && (\n <span className=\"text-small text-foreground opacity-70\">\n {description}\n </span>\n )}\n </div>\n </Component>\n );\n};\n\nexport default RadioBox;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"]}
|