@fuf-stack/uniform 0.21.5 → 0.22.0
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-DsBWaOSk.d.ts} +5 -7
- package/dist/{Input-oubBKJSg.d.ts → Input-qD-RcDl4.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-X4BLYZLW.cjs → chunk-2EYP66KF.cjs} +26 -19
- package/dist/chunk-2EYP66KF.cjs.map +1 -0
- 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-BLUXOGQ5.js → chunk-DPOGZE5O.js} +2 -2
- package/dist/{chunk-EV2JYVMO.js → chunk-EPY6UDD3.js} +26 -19
- package/dist/chunk-EPY6UDD3.js.map +1 -0
- package/dist/chunk-G5UX55XC.js +37 -0
- package/dist/chunk-G5UX55XC.js.map +1 -0
- 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-I2PJDXWB.cjs +102 -0
- package/dist/chunk-I2PJDXWB.cjs.map +1 -0
- 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-KMDTMBYI.js +102 -0
- package/dist/chunk-KMDTMBYI.js.map +1 -0
- 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-HRDUEFZG.js → chunk-NR5MV234.js} +5 -5
- package/dist/{chunk-LSNARJIH.js → chunk-O7DOVGO2.js} +5 -5
- package/dist/{chunk-NS3JN77D.js → chunk-P3PJSG5J.js} +5 -5
- 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-ZNZ5ZB3A.cjs → chunk-QTROOQ53.cjs} +7 -7
- package/dist/{chunk-ZNZ5ZB3A.cjs.map → chunk-QTROOQ53.cjs.map} +1 -1
- 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-IE7LRIBW.cjs → chunk-SHB3Z5GN.cjs} +29 -11
- package/dist/chunk-SHB3Z5GN.cjs.map +1 -0
- package/dist/{chunk-Z7AMEDDV.js → chunk-TCYPTU4E.js} +5 -5
- package/dist/chunk-TSB65253.cjs +37 -0
- package/dist/chunk-TSB65253.cjs.map +1 -0
- 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-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-6ON3SM45.js → chunk-XDHY7DXJ.js} +30 -12
- package/dist/chunk-XDHY7DXJ.js.map +1 -0
- 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 +116 -0
- package/dist/hooks/useInputValueTransform/index.d.ts +116 -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 +11 -1
- 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
|
@@ -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-PL44Y7AM.cjs","../src/SubmitButton/SubmitButton.tsx","../src/SubmitButton/index.ts"],"names":["SubmitButton_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACDA,oDAA4B;AAC5B,2CAAuB;AAoCnB,+CAAA;AAdJ,IAAM,aAAA,EAAe,CAAC;AAAA,EACpB,SAAA,EAAW,QAAA;AAAA,EACX,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,MAAA,EAAQ,SAAA;AAAA,EACR,QAAA,EAAU,KAAA;AAAA,EACV,KAAA,EAAO,IAAA;AAAA,EACP,OAAA,EAAS;AACX,CAAA,EAAA,GAAyB;AACvB,EAAA,MAAM;AAAA,IACJ,SAAA,EAAW,EAAE,aAAa,CAAA;AAAA,IAC1B;AAAA,EACF,EAAA,EAAI,8CAAA,CAAe;AAEnB,EAAA,uBACE,6BAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,4BAAA,SAAY,CAAA;AAAA,MACvB,KAAA;AAAA,MACA,MAAA,EAAQ,iCAAA,MAAQ,EAAQ,EAAE,WAAA,EAAa,KAAK,CAAC,CAAA;AAAA,MAC7C,QAAA,EAAU,YAAA;AAAA,MACV,OAAA,EAAS,QAAA,GAAW,YAAA;AAAA,MAIpB,OAAA,EAAS,aAAA;AAAA,MACT,IAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ,CAAA;AAEA,IAAO,qBAAA,EAAQ,YAAA;ADtBf;AACA;AE/BA,IAAOA,sBAAAA,EAAQ,oBAAA;AFiCf;AACA;AACE;AACA;AACF,2GAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-PL44Y7AM.cjs","sourcesContent":[null,"import type { ButtonProps } from '@fuf-stack/pixels';\nimport type { ReactNode } from 'react';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../hooks';\n\nexport interface SubmitButtonProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: string;\n /** color of the button */\n color?: ButtonProps['color'];\n /** If set loading animation is shown */\n loading?: boolean;\n /** size of the button */\n size?: ButtonProps['size'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * From SubmitButton\n */\nconst SubmitButton = ({\n children = 'Submit',\n className = undefined,\n color = 'success',\n loading = false,\n size = 'md',\n testId = 'form_submit_button',\n}: SubmitButtonProps) => {\n const {\n formState: { isSubmitting },\n triggerSubmit,\n } = useFormContext();\n\n return (\n <Button\n className={cn(className)}\n color={color}\n testId={slugify(testId, { replaceDots: true })}\n disabled={isSubmitting}\n loading={loading || isSubmitting}\n // @ts-expect-error we use form context triggerSubmit\n // here so that submit button also works in special\n // scenarios (e.g. when used in modal)\n onClick={triggerSubmit}\n size={size}\n type=\"submit\"\n >\n {children}\n </Button>\n );\n};\n\nexport default SubmitButton;\n","import SubmitButton from './SubmitButton';\n\nexport type { SubmitButtonProps } from './SubmitButton';\n\nexport { SubmitButton };\n\nexport default SubmitButton;\n"]}
|
|
@@ -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,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,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 _chunkI2PJDXWBcjs = require('./chunk-I2PJDXWB.cjs');
|
|
11
14
|
|
|
12
15
|
// src/TextArea/TextArea.tsx
|
|
13
16
|
var _input = require('@heroui/input');
|
|
@@ -16,20 +19,35 @@ var _jsxruntime = require('react/jsx-runtime');
|
|
|
16
19
|
var TextArea = ({
|
|
17
20
|
children = null,
|
|
18
21
|
className = void 0,
|
|
22
|
+
debounceDelay = 300,
|
|
19
23
|
disabled = false,
|
|
20
24
|
label = void 0,
|
|
21
25
|
name,
|
|
22
26
|
placeholder = " ",
|
|
23
27
|
testId: _testId = void 0
|
|
24
28
|
}) => {
|
|
25
|
-
|
|
26
|
-
const { control, debugMode, getFieldState } = _chunkOHEPPLILcjs.useFormContext.call(void 0, );
|
|
29
|
+
const { control, debugMode, getFieldState } = _chunkY6EAPURVcjs.useFormContext.call(void 0, );
|
|
27
30
|
const { error, invalid, required, testId } = getFieldState(name, _testId);
|
|
28
|
-
const { field } =
|
|
29
|
-
|
|
31
|
+
const { field } = _chunkY6EAPURVcjs.useController.call(void 0, {
|
|
32
|
+
control,
|
|
33
|
+
disabled,
|
|
34
|
+
name
|
|
35
|
+
});
|
|
36
|
+
const {
|
|
37
|
+
disabled: isDisabled,
|
|
38
|
+
onChange: fieldOnChange,
|
|
39
|
+
onBlur: fieldOnBlur,
|
|
40
|
+
value: fieldValue,
|
|
41
|
+
ref
|
|
42
|
+
} = field;
|
|
43
|
+
const { onChange, onBlur, value } = _chunkI2PJDXWBcjs.useInputValueDebounce.call(void 0, {
|
|
44
|
+
debounceDelay,
|
|
45
|
+
onBlur: fieldOnBlur,
|
|
46
|
+
onChange: fieldOnChange,
|
|
47
|
+
value: fieldValue
|
|
48
|
+
});
|
|
30
49
|
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
31
50
|
const showLabel = label || showTestIdCopyButton;
|
|
32
|
-
const displayValue = (_a = value == null ? void 0 : value.toString()) != null ? _a : "";
|
|
33
51
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
34
52
|
_input.Textarea,
|
|
35
53
|
{
|
|
@@ -47,12 +65,12 @@ var TextArea = ({
|
|
|
47
65
|
showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPA2DQCBYcjs.FieldCopyTestIdButton_default, { testId })
|
|
48
66
|
] }),
|
|
49
67
|
labelPlacement: "outside",
|
|
50
|
-
placeholder,
|
|
51
68
|
name,
|
|
52
|
-
value: displayValue,
|
|
53
|
-
onChange,
|
|
54
69
|
onBlur,
|
|
70
|
+
onChange,
|
|
71
|
+
placeholder,
|
|
55
72
|
ref,
|
|
73
|
+
value,
|
|
56
74
|
variant: "bordered",
|
|
57
75
|
children
|
|
58
76
|
}
|
|
@@ -67,4 +85,4 @@ var TextArea_default2 = TextArea_default;
|
|
|
67
85
|
|
|
68
86
|
|
|
69
87
|
exports.TextArea_default = TextArea_default; exports.TextArea_default2 = TextArea_default2;
|
|
70
|
-
//# sourceMappingURL=chunk-
|
|
88
|
+
//# sourceMappingURL=chunk-SHB3Z5GN.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-SHB3Z5GN.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;AACE;AACF,wDAA6B;AAC7B;AACA;ACZA,sCAAyC;AAEzC,oDAAmB;AA0EF,+CAAA;AA9CjB,IAAM,SAAA,EAAW,CAAC;AAAA,EAChB,SAAA,EAAW,IAAA;AAAA,EACX,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,cAAA,EAAgB,GAAA;AAAA,EAChB,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;AACnB,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;AAAc,IAC9B,OAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,EACF,CAAC,CAAA;AAED,EAAA,MAAM;AAAA,IACJ,QAAA,EAAU,UAAA;AAAA,IACV,QAAA,EAAU,aAAA;AAAA,IACV,MAAA,EAAQ,WAAA;AAAA,IACR,KAAA,EAAO,UAAA;AAAA,IACP;AAAA,EACF,EAAA,EAAI,KAAA;AAGJ,EAAA,MAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,EAAA,EAAI,qDAAA;AAAsB,IACxD,aAAA;AAAA,IACA,MAAA,EAAQ,WAAA;AAAA,IACR,QAAA,EAAU,aAAA;AAAA,IACV,KAAA,EAAO;AAAA,EACT,CAAC,CAAA;AAED,EAAA,MAAM,qBAAA,EAAuB,UAAA,IAAc,eAAA;AAC3C,EAAA,MAAM,UAAA,EAAY,MAAA,GAAS,oBAAA;AAE3B,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,IAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAA;AAAA,MACA,KAAA;AAAA,MACA,OAAA,EAAQ,UAAA;AAAA,MAEP;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ,CAAA;AAEA,IAAO,iBAAA,EAAQ,QAAA;AD1Bf;AACA;AE1EA,IAAOA,kBAAAA,EAAQ,gBAAA;AF4Ef;AACA;AACE;AACA;AACF,2FAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-SHB3Z5GN.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, useInputValueDebounce } 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 /** debounce delay in milliseconds for form state updates (default: 300ms) */\n debounceDelay?: number;\n /** Determines if the TextArea is disabled or not. */\n disabled?: boolean;\n /** Label displayed above the TextArea. */\n label?: ReactNode;\n /** Name the TextArea is registered at in HTML forms (react-hook-form). */\n name: string;\n /** placeholder for the textArea content. */\n placeholder?: string;\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * TextArea component based on [HeroUI TextArea](https://www.heroui.com//docs/components/textarea)\n */\nconst TextArea = ({\n children = null,\n className = undefined,\n debounceDelay = 300,\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({\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 debounced handlers for form updates\n const { onChange, onBlur, value } = useInputValueDebounce({\n debounceDelay,\n onBlur: fieldOnBlur,\n onChange: fieldOnChange,\n value: fieldValue,\n });\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\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 name={name}\n onBlur={onBlur}\n onChange={onChange}\n placeholder={placeholder}\n ref={ref}\n value={value as string}\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,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
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/hooks/useInputValueTransform/useInputValueTransform.ts
|
|
2
|
+
var _react = require('react');
|
|
3
|
+
var useInputValueTransform = ({
|
|
4
|
+
value,
|
|
5
|
+
type,
|
|
6
|
+
transformValue
|
|
7
|
+
}) => {
|
|
8
|
+
const prevExternalValue = _react.useRef.call(void 0, value);
|
|
9
|
+
const [displayValue, setDisplayValue] = _react.useState.call(void 0, () => {
|
|
10
|
+
return (transformValue == null ? void 0 : transformValue.displayValue) ? transformValue.displayValue(value != null ? value : "") : value != null ? value : "";
|
|
11
|
+
});
|
|
12
|
+
_react.useEffect.call(void 0, () => {
|
|
13
|
+
if (value !== prevExternalValue.current) {
|
|
14
|
+
prevExternalValue.current = value;
|
|
15
|
+
const newDisplayValue = (transformValue == null ? void 0 : transformValue.displayValue) ? transformValue.displayValue(value != null ? value : "") : value != null ? value : "";
|
|
16
|
+
setDisplayValue(newDisplayValue);
|
|
17
|
+
}
|
|
18
|
+
}, [value, transformValue]);
|
|
19
|
+
const getFormValue = () => {
|
|
20
|
+
if (type === "number") {
|
|
21
|
+
return displayValue === "" ? "" : Number(displayValue);
|
|
22
|
+
}
|
|
23
|
+
return (transformValue == null ? void 0 : transformValue.formValue) ? transformValue.formValue(displayValue) : displayValue;
|
|
24
|
+
};
|
|
25
|
+
return {
|
|
26
|
+
displayValue,
|
|
27
|
+
handleInputChange: (e) => {
|
|
28
|
+
setDisplayValue(e.target.value);
|
|
29
|
+
},
|
|
30
|
+
getFormValue
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
exports.useInputValueTransform = useInputValueTransform;
|
|
37
|
+
//# sourceMappingURL=chunk-TSB65253.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-TSB65253.cjs","../src/hooks/useInputValueTransform/useInputValueTransform.ts"],"names":[],"mappings":"AAAA;ACAA,8BAA4C;AAsHrC,IAAM,uBAAA,EAAyB,CAAC;AAAA,EACrC,KAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,EAAA,GAAmE;AAEjE,EAAA,MAAM,kBAAA,EAAoB,2BAAA,KAAY,CAAA;AAGtC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,EAAA,EAAI,6BAAA,CAAS,EAAA,GAAM;AACrD,IAAA,OAAA,CAAO,eAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,cAAA,CAAgB,YAAA,EAAA,EACnB,cAAA,CAAe,YAAA,CAAa,MAAA,GAAA,KAAA,EAAA,MAAA,EAAS,EAAE,EAAA,EACtC,MAAA,GAAA,KAAA,EAAA,MAAA,EAAS,EAAA;AAAA,EAChB,CAAC,CAAA;AAcD,EAAA,8BAAA,CAAU,EAAA,GAAM;AAEd,IAAA,GAAA,CAAI,MAAA,IAAU,iBAAA,CAAkB,OAAA,EAAS;AACvC,MAAA,iBAAA,CAAkB,QAAA,EAAU,KAAA;AAE5B,MAAA,MAAM,gBAAA,EAAA,CAAkB,eAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,cAAA,CAAgB,YAAA,EAAA,EACpC,cAAA,CAAe,YAAA,CAAa,MAAA,GAAA,KAAA,EAAA,MAAA,EAAS,EAAE,EAAA,EACtC,MAAA,GAAA,KAAA,EAAA,MAAA,EAAS,EAAA;AAEd,MAAA,eAAA,CAAgB,eAAe,CAAA;AAAA,IACjC;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,cAAc,CAAC,CAAA;AAsB1B,EAAA,MAAM,aAAA,EAAe,CAAA,EAAA,GAAuB;AAC1C,IAAA,GAAA,CAAI,KAAA,IAAS,QAAA,EAAU;AACrB,MAAA,OAAO,aAAA,IAAiB,GAAA,EAAK,GAAA,EAAK,MAAA,CAAO,YAAY,CAAA;AAAA,IACvD;AAEA,IAAA,OAAA,CAAO,eAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,cAAA,CAAgB,SAAA,EAAA,EACnB,cAAA,CAAe,SAAA,CAAU,YAAsB,EAAA,EAC/C,YAAA;AAAA,EACN,CAAA;AAEA,EAAA,OAAO;AAAA,IACL,YAAA;AAAA,IACA,iBAAA,EAAmB,CAAC,CAAA,EAAA,GAA2C;AAC7D,MAAA,eAAA,CAAgB,CAAA,CAAE,MAAA,CAAO,KAAK,CAAA;AAAA,IAChC,CAAA;AAAA,IACA;AAAA,EACF,CAAA;AACF,CAAA;ADnKA;AACA;AACE;AACF,wDAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-TSB65253.cjs","sourcesContent":[null,"import { useEffect, useRef, useState } from 'react';\n\nexport interface InputValueTransform {\n /** Transforms the form value to display value (e.g., 1000 → \"$1,000\") */\n displayValue: (value: string | number) => string | number;\n /** Transforms the display value to form value (e.g., \"$1,000\" → 1000) */\n formValue: (value: string) => string | number;\n}\n\nexport interface UseInputValueTransformOptions {\n /** The current form field value */\n value: string | number;\n /** Input type for special number handling */\n type?: 'text' | 'number' | 'password';\n /** Value transformation functions */\n transformValue?: InputValueTransform;\n}\n\nexport interface UseInputValueTransformReturn {\n /** The current display value for the input */\n displayValue: string | number;\n /** Input change handler (pass directly to onChange) */\n handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n /** Gets the form value from current display value */\n getFormValue: () => string | number;\n}\n\n/**\n * Custom hook for handling input value transformations between display and form values.\n *\n * This hook manages the separation between what the user sees (display value) and what gets\n * stored in the form (form value). It's particularly useful for:\n * - Currency formatting ($1,000 display vs 1000 stored)\n * - Number inputs with special handling\n * - Date formatting (MM/DD/YYYY display vs ISO date stored)\n * - Phone number formatting ((555) 123-4567 display vs 5551234567 stored)\n *\n * **Key Features:**\n * - Immediate display value updates for responsive UI\n * - Automatic external value synchronization (form resets, setValue calls)\n * - Special number input handling (empty string preservation)\n * - Bidirectional value transformations\n *\n * @param options Configuration for value transformation\n * @returns Display value management and form value conversion\n *\n * @example\n * ```tsx\n * // Currency formatting\n * const currencyTransform = {\n * displayValue: (val) => val ? `$${Number(val).toLocaleString()}` : '',\n * formValue: (val) => parseFloat(val.replace(/[$,]/g, '')) || 0\n * };\n *\n * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({\n * value: 1000,\n * transformValue: currencyTransform\n * });\n * // displayValue = \"$1,000\"\n * // getFormValue() = 1000\n * ```\n *\n * @example\n * ```tsx\n * // Phone number formatting\n * const phoneTransform = {\n * displayValue: (val) => {\n * const cleaned = val.toString().replace(/\\D/g, '');\n * const match = cleaned.match(/^(\\d{3})(\\d{3})(\\d{4})$/);\n * return match ? `(${match[1]}) ${match[2]}-${match[3]}` : val;\n * },\n * formValue: (val) => val.replace(/\\D/g, '')\n * };\n *\n * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({\n * value: '5551234567',\n * transformValue: phoneTransform\n * });\n * // displayValue = \"(555) 123-4567\"\n * // getFormValue() = \"5551234567\"\n * ```\n *\n * @example\n * ```tsx\n * // Number input (no transforms needed)\n * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({\n * value: 42,\n * type: 'number'\n * });\n * // Handles empty string → empty string (not NaN)\n * // Handles \"123\" → 123 (string to number conversion)\n * ```\n *\n * @example\n * ```tsx\n * // Usage in a form component\n * const MyInput = ({ field, transformValue }) => {\n * const { displayValue, handleInputChange, getFormValue } = useInputValueTransform({\n * value: field.value,\n * transformValue\n * });\n *\n * // Debounce the form updates (optional)\n * useInputValueDebounce({\n * value: getFormValue(),\n * onChange: field.onChange,\n * debounceDelay: 300\n * });\n *\n * return (\n * <input\n * value={displayValue}\n * onChange={handleInputChange}\n * />\n * );\n * };\n * ```\n */\nexport const useInputValueTransform = ({\n value,\n type,\n transformValue,\n}: UseInputValueTransformOptions): UseInputValueTransformReturn => {\n // Track previous external value to detect real external changes\n const prevExternalValue = useRef(value);\n\n // Local state for immediate display updates\n const [displayValue, setDisplayValue] = useState(() => {\n return transformValue?.displayValue\n ? transformValue.displayValue(value ?? '')\n : (value ?? '');\n });\n\n /**\n * Synchronizes display value when form value changes externally.\n *\n * This handles cases like:\n * - Form resets: reset() or setValue('field', '')\n * - External updates: setValue('field', 'new value')\n * - Default value initialization from form state\n * - Programmatic field updates from other components\n *\n * Uses a ref to track the previous value and only updates when the external\n * value actually changes, preventing infinite re-renders.\n */\n useEffect(() => {\n // Only process if the external value actually changed\n if (value !== prevExternalValue.current) {\n prevExternalValue.current = value;\n\n const newDisplayValue = transformValue?.displayValue\n ? transformValue.displayValue(value ?? '')\n : (value ?? '');\n\n setDisplayValue(newDisplayValue);\n }\n }, [value, transformValue]);\n\n /**\n * Converts the current display value to the appropriate form value.\n *\n * **Conversion Logic:**\n * 1. **Number inputs**:\n * - Empty string → empty string (preserves empty state, prevents NaN)\n * - Non-empty string → Number(value) (converts to numeric form)\n * - Example: \"\" → \"\", \"42\" → 42, \"3.14\" → 3.14\n *\n * 2. **Transform inputs**:\n * - Applies custom formValue transform function\n * - Used for converting display format back to storage format\n * - Example: \"$1,000\" → 1000, \"(555) 123-4567\" → \"5551234567\"\n *\n * 3. **Regular inputs**:\n * - Passes through the display value unchanged\n * - Example: \"hello\" → \"hello\", \"test@example.com\" → \"test@example.com\"\n *\n * @returns The form value ready for storage/submission\n */\n const getFormValue = (): string | number => {\n if (type === 'number') {\n return displayValue === '' ? '' : Number(displayValue);\n }\n\n return transformValue?.formValue\n ? transformValue.formValue(displayValue as string)\n : displayValue;\n };\n\n return {\n displayValue,\n handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n setDisplayValue(e.target.value);\n },\n getFormValue,\n };\n};\n"]}
|
|
@@ -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"]}
|
|
@@ -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"]}
|
|
@@ -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
|
|
|
12
12
|
// src/RadioGroup/RadioGroup.tsx
|
|
13
13
|
import { RadioGroup as HeroRadioGroup, Radio } from "@heroui/radio";
|
|
@@ -109,4 +109,4 @@ export {
|
|
|
109
109
|
RadioGroup_default,
|
|
110
110
|
RadioGroup_default2
|
|
111
111
|
};
|
|
112
|
-
//# sourceMappingURL=chunk-
|
|
112
|
+
//# sourceMappingURL=chunk-WRNAIS4U.js.map
|
|
@@ -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
|
__objRest,
|
|
13
13
|
__spreadProps,
|
|
@@ -166,4 +166,4 @@ export {
|
|
|
166
166
|
RadioBoxes_default,
|
|
167
167
|
RadioBoxes_default2
|
|
168
168
|
};
|
|
169
|
-
//# sourceMappingURL=chunk-
|
|
169
|
+
//# sourceMappingURL=chunk-X2PR2IOK.js.map
|