@fuf-stack/uniform 1.5.5 → 1.5.7
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/Checkboxes/index.cjs +3 -3
- package/dist/Checkboxes/index.js +2 -2
- package/dist/FieldArray/index.cjs +3 -3
- package/dist/FieldArray/index.js +2 -2
- package/dist/Form/index.cjs +3 -3
- package/dist/Form/index.js +2 -2
- package/dist/Input/index.cjs +3 -3
- package/dist/Input/index.js +2 -2
- package/dist/RadioBoxes/index.cjs +3 -3
- package/dist/RadioBoxes/index.js +2 -2
- package/dist/RadioTabs/index.cjs +3 -3
- package/dist/RadioTabs/index.js +2 -2
- package/dist/Radios/index.cjs +3 -3
- package/dist/Radios/index.js +2 -2
- package/dist/Select/index.cjs +3 -3
- package/dist/Select/index.js +2 -2
- package/dist/SubmitButton/index.cjs +3 -3
- package/dist/SubmitButton/index.js +2 -2
- package/dist/Switch/index.cjs +3 -3
- package/dist/Switch/index.js +2 -2
- package/dist/TextArea/index.cjs +3 -3
- package/dist/TextArea/index.js +2 -2
- package/dist/{chunk-HFYNTR6H.js → chunk-2ZM4P4G3.js} +2 -2
- package/dist/{chunk-Y5Q5CGS3.js → chunk-33X26MSK.js} +3 -4
- package/dist/chunk-33X26MSK.js.map +1 -0
- package/dist/{chunk-HI677N7G.cjs → chunk-3UIFEC4R.cjs} +17 -17
- package/dist/chunk-3UIFEC4R.cjs.map +1 -0
- package/dist/{chunk-WVTLXBTO.js → chunk-47MZU3WD.js} +17 -17
- package/dist/{chunk-WVTLXBTO.js.map → chunk-47MZU3WD.js.map} +1 -1
- package/dist/{chunk-F5UPZGEY.cjs → chunk-4XTUP7W7.cjs} +5 -5
- package/dist/{chunk-F5UPZGEY.cjs.map → chunk-4XTUP7W7.cjs.map} +1 -1
- package/dist/{chunk-SUT7AMXT.js → chunk-7FTSMHFL.js} +2 -2
- package/dist/{chunk-KBWRXYOJ.cjs → chunk-A5MP4JAG.cjs} +4 -5
- package/dist/chunk-A5MP4JAG.cjs.map +1 -0
- package/dist/{chunk-ZQQUG4OK.js → chunk-B5OTVY3W.js} +4 -7
- package/dist/chunk-B5OTVY3W.js.map +1 -0
- package/dist/{chunk-263G4JAA.cjs → chunk-CSTA3NED.cjs} +7 -10
- package/dist/chunk-CSTA3NED.cjs.map +1 -0
- package/dist/{chunk-3GAELJ2V.js → chunk-DFDZFIQN.js} +2 -2
- package/dist/{chunk-3QUPBPC4.cjs → chunk-EALQ3KNW.cjs} +4 -5
- package/dist/chunk-EALQ3KNW.cjs.map +1 -0
- package/dist/{chunk-DIVVP6PT.cjs → chunk-GE2QRIOE.cjs} +3 -3
- package/dist/{chunk-DIVVP6PT.cjs.map → chunk-GE2QRIOE.cjs.map} +1 -1
- package/dist/{chunk-PE5GBKV4.cjs → chunk-JABO2635.cjs} +4 -4
- package/dist/{chunk-PE5GBKV4.cjs.map → chunk-JABO2635.cjs.map} +1 -1
- package/dist/{chunk-IONFOB6T.cjs → chunk-KORRVEJL.cjs} +4 -5
- package/dist/chunk-KORRVEJL.cjs.map +1 -0
- package/dist/{chunk-DSUSI47C.js → chunk-LEEWUHKX.js} +2 -2
- package/dist/{chunk-6FZ7EYJV.js → chunk-LKBR2JGT.js} +3 -4
- package/dist/chunk-LKBR2JGT.js.map +1 -0
- package/dist/{chunk-DBVFPFUE.cjs → chunk-MLAU2DYU.cjs} +4 -5
- package/dist/chunk-MLAU2DYU.cjs.map +1 -0
- package/dist/{chunk-XZUDH3I3.cjs → chunk-P7Z25LOZ.cjs} +3 -3
- package/dist/{chunk-XZUDH3I3.cjs.map → chunk-P7Z25LOZ.cjs.map} +1 -1
- package/dist/{chunk-D2JPS3GR.js → chunk-QIIMEQS3.js} +3 -4
- package/dist/chunk-QIIMEQS3.js.map +1 -0
- package/dist/{chunk-ZAHSRYDI.js → chunk-RBQP2VHW.js} +2 -2
- package/dist/{chunk-ASCGKJH2.js → chunk-TCJK6IYV.js} +3 -4
- package/dist/chunk-TCJK6IYV.js.map +1 -0
- package/dist/{chunk-S7WOLTWD.js → chunk-UB44OT6Q.js} +3 -4
- package/dist/chunk-UB44OT6Q.js.map +1 -0
- package/dist/{chunk-7WT4JCGS.cjs → chunk-UO52HWMC.cjs} +3 -3
- package/dist/{chunk-7WT4JCGS.cjs.map → chunk-UO52HWMC.cjs.map} +1 -1
- package/dist/{chunk-SMIIVASZ.cjs → chunk-X5WF3MEZ.cjs} +4 -5
- package/dist/chunk-X5WF3MEZ.cjs.map +1 -0
- package/dist/hooks/index.cjs +2 -2
- package/dist/hooks/index.d.cts +9 -19
- package/dist/hooks/index.d.ts +9 -19
- package/dist/hooks/index.js +1 -1
- package/dist/index.cjs +13 -13
- package/dist/index.js +12 -12
- package/package.json +1 -1
- package/dist/chunk-263G4JAA.cjs.map +0 -1
- package/dist/chunk-3QUPBPC4.cjs.map +0 -1
- package/dist/chunk-6FZ7EYJV.js.map +0 -1
- package/dist/chunk-ASCGKJH2.js.map +0 -1
- package/dist/chunk-D2JPS3GR.js.map +0 -1
- package/dist/chunk-DBVFPFUE.cjs.map +0 -1
- package/dist/chunk-HI677N7G.cjs.map +0 -1
- package/dist/chunk-IONFOB6T.cjs.map +0 -1
- package/dist/chunk-KBWRXYOJ.cjs.map +0 -1
- package/dist/chunk-S7WOLTWD.js.map +0 -1
- package/dist/chunk-SMIIVASZ.cjs.map +0 -1
- package/dist/chunk-Y5Q5CGS3.js.map +0 -1
- package/dist/chunk-ZQQUG4OK.js.map +0 -1
- /package/dist/{chunk-HFYNTR6H.js.map → chunk-2ZM4P4G3.js.map} +0 -0
- /package/dist/{chunk-SUT7AMXT.js.map → chunk-7FTSMHFL.js.map} +0 -0
- /package/dist/{chunk-3GAELJ2V.js.map → chunk-DFDZFIQN.js.map} +0 -0
- /package/dist/{chunk-DSUSI47C.js.map → chunk-LEEWUHKX.js.map} +0 -0
- /package/dist/{chunk-ZAHSRYDI.js.map → chunk-RBQP2VHW.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-KORRVEJL.cjs","../src/RadioTabs/RadioTabs.tsx","../src/RadioTabs/index.ts"],"names":["_a","_b"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-KORRVEJL.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TabsProps } from '@fuf-stack/pixels';\nimport type { TabProps } from '@fuf-stack/pixels/Tabs';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { useUniformField } from '../hooks';\n\nexport const radioTabsVariants = tv({\n slots: {\n base: 'group gap-0', // Needs group for group-data condition\n cursor: '',\n label:\n 'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n tab: '',\n tabBase: '',\n tabContent: '',\n tabList: '',\n tabPanel: 'p-3',\n tabWrapper: '',\n wrapper: '',\n },\n variants: {\n hasContent: {\n true: {\n base: '',\n tabBase: 'p-1 pb-0',\n tabWrapper: [\n // border style\n 'rounded-medium border border-divider',\n // full width\n 'w-full',\n ],\n },\n },\n fullWidth: {\n true: {\n tabWrapper: 'w-full',\n },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof radioTabsVariants>;\ntype ClassName = TVClassName<typeof radioTabsVariants>;\n\nexport interface RadioTabsOption {\n /** Optional content inside of the tab */\n content?: ReactNode;\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 RadioTabsProps extends Omit<VariantProps, 'hasContent'> {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** Whether tabs should take up full container width */\n fullWidth?: 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: RadioTabsOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n /** How the RadioTabs should look like. */\n variant?: TabsProps['variant'];\n}\n\n/**\n * RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n * and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst RadioTabs = ({\n className = undefined,\n fullWidth = false,\n inline = false,\n name,\n options,\n variant = undefined,\n ...uniformFieldProps\n}: RadioTabsProps): ReactElement => {\n const {\n disabled,\n errorMessage,\n field: { onBlur, onChange, ref, value },\n invalid,\n label,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n const tabOptions = options.map<TabProps>((option) => {\n return {\n content: option?.content,\n disabled: option?.disabled,\n key: option.value,\n label: option?.label ?? option?.value,\n testId: slugify(`option_${option?.testId ?? option?.value}`, {\n replaceDots: true,\n }),\n };\n });\n\n const disabledAllKeys: string[] | undefined = tabOptions?.map((option) => {\n return option.key as string;\n });\n\n // check if any option has content\n // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async\n const hasContent = options.some((option) => {\n return option.content;\n });\n\n // classNames from slots\n const variants = radioTabsVariants({ hasContent, fullWidth });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroRadioGroup\n ref={ref}\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 errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n classNames={{\n base: classNames.base,\n label: classNames.label,\n wrapper: classNames.wrapper,\n }}\n >\n <Tabs\n disabledKeys={disabled ? disabledAllKeys : undefined}\n onSelectionChange={onChange}\n // make sure component is controlled\n selectedKey={value ?? ''}\n tabs={tabOptions}\n testId={testId}\n variant={variant}\n className={{\n base: classNames.tabBase,\n cursor: classNames.cursor,\n panel: classNames.tabPanel,\n tab: classNames.tab,\n tabContent: classNames.tabContent,\n tabList: classNames.tabList,\n tabWrapper: classNames.tabWrapper,\n }}\n />\n </HeroRadioGroup>\n );\n};\n\nexport default RadioTabs;\n","import RadioTabs from './RadioTabs';\n\nexport type { RadioTabsProps } from './RadioTabs';\n\nexport { RadioTabs };\n\nexport default RadioTabs;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useUniformField
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-47MZU3WD.js";
|
|
4
4
|
import {
|
|
5
5
|
useInputValueDebounce
|
|
6
6
|
} from "./chunk-MODD3TFE.js";
|
|
@@ -100,4 +100,4 @@ export {
|
|
|
100
100
|
TextArea_default,
|
|
101
101
|
TextArea_default2
|
|
102
102
|
};
|
|
103
|
-
//# sourceMappingURL=chunk-
|
|
103
|
+
//# sourceMappingURL=chunk-LEEWUHKX.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useUniformField
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-47MZU3WD.js";
|
|
4
4
|
import {
|
|
5
5
|
FieldValidationError_default
|
|
6
6
|
} from "./chunk-ELYGQTXB.js";
|
|
@@ -78,8 +78,7 @@ var Checkboxes = (_a) => {
|
|
|
78
78
|
required,
|
|
79
79
|
testId
|
|
80
80
|
} = useUniformField(__spreadValues({
|
|
81
|
-
name
|
|
82
|
-
showInvalidWhen: "immediate"
|
|
81
|
+
name
|
|
83
82
|
}, uniformFieldProps));
|
|
84
83
|
const errorFlat = (_a2 = _error && Object.values(
|
|
85
84
|
_error
|
|
@@ -179,4 +178,4 @@ export {
|
|
|
179
178
|
Checkboxes_default,
|
|
180
179
|
Checkboxes_default2
|
|
181
180
|
};
|
|
182
|
-
//# sourceMappingURL=chunk-
|
|
181
|
+
//# sourceMappingURL=chunk-LKBR2JGT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Checkboxes/Checkboxes.tsx","../src/Checkboxes/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type {\n CheckboxGroupProps as HeroCheckboxGroupProps,\n CheckboxProps as HeroCheckboxProps,\n} from '@heroui/checkbox';\nimport type { ReactNode } from 'react';\nimport type { FieldError } from 'react-hook-form';\n\nimport {\n Checkbox as HeroCheckbox,\n CheckboxGroup as HeroCheckboxGroup,\n} from '@heroui/checkbox';\nimport { checkbox as heroCheckboxVariants } from '@heroui/theme';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const checkboxesVariants = tv({\n slots: {\n base: 'group', // Needs group for group-data condition\n errorMessage: 'text-tiny',\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 'inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger',\n optionBase: '',\n optionIcon: '',\n optionLabel: '',\n optionLabelSubline: 'text-foreground-400 !text-small',\n optionWrapper: '',\n wrapper: '',\n },\n variants: {\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/checkbox.ts\n color: {\n info: {\n wrapper:\n 'text-info-foreground after:bg-info after:text-info-foreground',\n },\n ...heroCheckboxVariants.variants.color,\n } as const,\n lineThrough: {\n true: {\n optionLabel: [\n ...heroCheckboxVariants.variants.lineThrough.true.label,\n // fix stroke position when used with subline and enable animation\n 'relative before:transition-all before:duration-200',\n ],\n optionLabelSubline: 'group-data-[selected=true]:opacity-60',\n },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof checkboxesVariants>;\ntype ClassName = TVClassName<typeof checkboxesVariants>;\n\nexport interface CheckboxOption {\n /** option label */\n label?: ReactNode;\n /** subline displayed below the label */\n labelSubline?: ReactNode;\n /** option value */\n value: string;\n /** disables the option */\n disabled?: boolean;\n /** HTML data-testid attribute of the option */\n testId?: string;\n}\n\nexport interface CheckboxesProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** Color scheme of the checkboxes */\n color?: VariantProps['color'];\n /** Sets all checkboxes disabled */\n disabled?: boolean;\n /** Orientation of the checkboxes */\n inline?: boolean;\n /** Label displayed above the checkboxes */\n label?: ReactNode;\n /** Whether the checkboxes label should be crossed out */\n lineThrough?: boolean;\n /** Name the Field is registered on the form */\n name: string;\n /** Checkboxes that should be displayed. */\n options: CheckboxOption[];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Checkboxes component based on [HeroUI CheckboxGroup](https://www.heroui.com//docs/components/checkbox-group)\n */\nconst Checkboxes = ({\n className = undefined,\n color = 'primary',\n inline = false,\n lineThrough = false,\n options,\n name,\n ...uniformFieldProps\n}: CheckboxesProps) => {\n const {\n disabled,\n error: _error,\n field: { onChange, value = [], ref, onBlur },\n invalid,\n label,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // Convert React Hook Form's nested error object structure to a flat array\n // RHF errors can be nested like: checkboxField.0 (individual checkbox errors)\n // and checkboxField._error (global field errors) - this flattens all\n // error values into a single array for rendering with FieldValidationError\n const errorFlat: FieldError[] =\n (_error &&\n Object.values(\n _error as unknown as Record<string, FieldError[]>,\n ).flat()) ??\n [];\n const errorMessage = (\n <FieldValidationError error={errorFlat} testId={testId} />\n );\n\n /**\n * Handles the checkboxes value changes based on the number of options:\n * 1. For single checkbox (options.length === 1):\n * - Converts undefined/empty array to [] for consistent controlled behavior\n * - Extracts single value from array for onChange\n *\n * Example: undefined → []\n * [value] → value\n *\n * 2. For multiple checkboxes:\n * - Uses raw value array with fallback to empty array\n * - Passes through onChange directly\n *\n * Example: undefined → []\n * ['value1', 'value2'] → ['value1', 'value2']\n */\n const getCheckboxValue = (inputValue: unknown): string[] => {\n if (Array.isArray(inputValue)) {\n return inputValue as string[];\n }\n if (inputValue) {\n return [inputValue as string];\n }\n return [];\n };\n\n const singleCheckboxProps = {\n value: getCheckboxValue(value),\n onChange: (newValue: string[]) => {\n onChange(newValue?.[0]);\n },\n };\n\n const multipleCheckboxProps = {\n onChange,\n value: getCheckboxValue(value),\n };\n\n const checkboxesProps =\n options.length === 1 ? singleCheckboxProps : multipleCheckboxProps;\n\n // classNames from slots\n const variants = checkboxesVariants({ lineThrough });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n // map slots to HeroUI class names\n const heroCheckboxGroupClassNames: HeroCheckboxGroupProps['classNames'] = {\n base: classNames.base,\n label: classNames.label,\n wrapper: classNames.wrapper,\n };\n const heroCheckboxClassNames: HeroCheckboxProps['classNames'] = {\n base: classNames.optionBase,\n icon: classNames.optionIcon,\n label: classNames.optionLabel,\n wrapper: classNames.optionWrapper,\n };\n\n return (\n <HeroCheckboxGroup\n ref={ref}\n classNames={heroCheckboxGroupClassNames}\n color={color === 'info' ? 'primary' : color}\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-testid={testId}\n errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n {...checkboxesProps}\n >\n {options?.map((option) => {\n const optionTestId = slugify(\n `${testId}_option_${option?.testId ?? option?.value}`,\n { replaceDots: true },\n );\n\n // set content and classes depending option has subline\n const hasSubline = !!option.labelSubline;\n let labelContent: ReactNode;\n let optionClassNames = heroCheckboxClassNames;\n if (hasSubline) {\n labelContent = (\n <div className=\"flex grow flex-col items-start\">\n <span className={classNames.optionLabel}>{option.label}</span>\n <span className={classNames.optionLabelSubline}>\n {option.labelSubline}\n </span>\n </div>\n );\n // remove label classes from outer label when subline is used\n optionClassNames = { ...optionClassNames, label: '' };\n } else {\n labelContent = option.label;\n }\n\n return (\n <HeroCheckbox\n key={`index_${option.value}`}\n classNames={optionClassNames}\n data-invalid={invalid}\n data-testid={optionTestId}\n isDisabled={!!disabled || option.disabled}\n value={option?.value}\n aria-label={\n typeof option.label === 'string' ? option.label : option.value\n }\n >\n {labelContent}\n </HeroCheckbox>\n );\n })}\n </HeroCheckboxGroup>\n );\n};\n\nexport default Checkboxes;\n","import Checkboxes from './Checkboxes';\n\nexport type { CheckboxesProps, CheckboxOption } from './Checkboxes';\n\nexport { Checkboxes };\n\nexport default Checkboxes;\n"],"mappings":";;;;;;;;;;;;;AAQA;AAAA,EACE,YAAY;AAAA,EACZ,iBAAiB;AAAA,OACZ;AACP,SAAS,YAAY,4BAA4B;AAEjD,SAAS,SAAS,IAAI,4BAA4B;AAmH9C,cA4FQ,YA5FR;AA9GG,IAAM,qBAAqB,GAAG;AAAA,EACnC,OAAO;AAAA,IACL,MAAM;AAAA;AAAA,IACN,cAAc;AAAA;AAAA;AAAA,IAGd,OACE;AAAA,IACF,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,oBAAoB;AAAA,IACpB,eAAe;AAAA,IACf,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA;AAAA,IAER,OAAO;AAAA,MACL,MAAM;AAAA,QACJ,SACE;AAAA,MACJ;AAAA,OACG,qBAAqB,SAAS;AAAA,IAEnC,aAAa;AAAA,MACX,MAAM;AAAA,QACJ,aAAa;AAAA,UACX,GAAG,qBAAqB,SAAS,YAAY,KAAK;AAAA;AAAA,UAElD;AAAA,QACF;AAAA,QACA,oBAAoB;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AACF,CAAC;AA0CD,IAAM,aAAa,CAAC,OAQG;AARH,eAClB;AAAA,gBAAY;AAAA,IACZ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,cAAc;AAAA,IACd;AAAA,IACA;AAAA,EAtGF,IAgGoB,IAOf,8BAPe,IAOf;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAtGF,MAAAA;AAyGE,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,OAAO,EAAE,UAAU,QAAQ,CAAC,GAAG,KAAK,OAAO;AAAA,IAC3C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,gBAAgB;AAAA,IAClB;AAAA,KACG,kBACJ;AAMD,QAAM,aACHA,MAAA,UACC,OAAO;AAAA,IACL;AAAA,EACF,EAAE,KAAK,MAHR,OAAAA,MAID,CAAC;AACH,QAAM,eACJ,oBAAC,gCAAqB,OAAO,WAAW,QAAgB;AAmB1D,QAAM,mBAAmB,CAAC,eAAkC;AAC1D,QAAI,MAAM,QAAQ,UAAU,GAAG;AAC7B,aAAO;AAAA,IACT;AACA,QAAI,YAAY;AACd,aAAO,CAAC,UAAoB;AAAA,IAC9B;AACA,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,sBAAsB;AAAA,IAC1B,OAAO,iBAAiB,KAAK;AAAA,IAC7B,UAAU,CAAC,aAAuB;AAChC,eAAS,qCAAW,EAAE;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,wBAAwB;AAAA,IAC5B;AAAA,IACA,OAAO,iBAAiB,KAAK;AAAA,EAC/B;AAEA,QAAM,kBACJ,QAAQ,WAAW,IAAI,sBAAsB;AAG/C,QAAM,WAAW,mBAAmB,EAAE,YAAY,CAAC;AACnD,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAGnE,QAAM,8BAAoE;AAAA,IACxE,MAAM,WAAW;AAAA,IACjB,OAAO,WAAW;AAAA,IAClB,SAAS,WAAW;AAAA,EACtB;AACA,QAAM,yBAA0D;AAAA,IAC9D,MAAM,WAAW;AAAA,IACjB,MAAM,WAAW;AAAA,IACjB,OAAO,WAAW;AAAA,IAClB,SAAS,WAAW;AAAA,EACtB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,YAAY;AAAA,MACZ,OAAO,UAAU,SAAS,YAAY;AAAA,MAGtC,gBAAc;AAAA,MACd,eAAa;AAAA,MACb;AAAA,MACA,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,OAAO,QAAQ,oBAAC,YAAQ,iBAAM,IAAY;AAAA,MAC1C;AAAA,MACA;AAAA,MACA,aAAa,SAAS,eAAe;AAAA,OACjC,kBAhBL;AAAA,MAkBE,6CAAS,IAAI,CAAC,WAAW;AAjNhC,YAAAA;AAkNQ,cAAM,eAAe;AAAA,UACnB,GAAG,MAAM,YAAWA,MAAA,iCAAQ,WAAR,OAAAA,MAAkB,iCAAQ,KAAK;AAAA,UACnD,EAAE,aAAa,KAAK;AAAA,QACtB;AAGA,cAAM,aAAa,CAAC,CAAC,OAAO;AAC5B,YAAI;AACJ,YAAI,mBAAmB;AACvB,YAAI,YAAY;AACd,yBACE,qBAAC,SAAI,WAAU,kCACb;AAAA,gCAAC,UAAK,WAAW,WAAW,aAAc,iBAAO,OAAM;AAAA,YACvD,oBAAC,UAAK,WAAW,WAAW,oBACzB,iBAAO,cACV;AAAA,aACF;AAGF,6BAAmB,iCAAK,mBAAL,EAAuB,OAAO,GAAG;AAAA,QACtD,OAAO;AACL,yBAAe,OAAO;AAAA,QACxB;AAEA,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,YAAY;AAAA,YACZ,gBAAc;AAAA,YACd,eAAa;AAAA,YACb,YAAY,CAAC,CAAC,YAAY,OAAO;AAAA,YACjC,OAAO,iCAAQ;AAAA,YACf,cACE,OAAO,OAAO,UAAU,WAAW,OAAO,QAAQ,OAAO;AAAA,YAG1D;AAAA;AAAA,UAVI,SAAS,OAAO,KAAK;AAAA,QAW5B;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,qBAAQ;;;ACxPf,IAAOC,sBAAQ;","names":["_a","Checkboxes_default"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
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 _chunk3UIFEC4Rcjs = require('./chunk-3UIFEC4R.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -106,9 +106,8 @@ var Select = (_a) => {
|
|
|
106
106
|
label,
|
|
107
107
|
required,
|
|
108
108
|
testId
|
|
109
|
-
} =
|
|
110
|
-
name
|
|
111
|
-
showInvalidWhen: "immediate"
|
|
109
|
+
} = _chunk3UIFEC4Rcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
|
|
110
|
+
name
|
|
112
111
|
}, uniformFieldProps));
|
|
113
112
|
const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
|
|
114
113
|
const variants = selectVariants();
|
|
@@ -280,4 +279,4 @@ var Select_default2 = Select_default;
|
|
|
280
279
|
|
|
281
280
|
|
|
282
281
|
exports.Select_default = Select_default; exports.Select_default2 = Select_default2;
|
|
283
|
-
//# sourceMappingURL=chunk-
|
|
282
|
+
//# sourceMappingURL=chunk-MLAU2DYU.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-MLAU2DYU.cjs","../src/Select/Select.tsx","../src/Select/index.ts"],"names":["_a","Select_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-MLAU2DYU.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 { useUniformField } from '../hooks';\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 'duration-150! rounded-lg border-2 border-default-200 bg-content1 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 subpixel-antialiased text-small 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\ninterface SelectOption {\n /** option label */\n label?: React.ReactNode;\n /** option value */\n value: string;\n}\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n /** CSS class name */\n className?: ClassName; // string;\n /** Determine if the */\n clearable?: boolean;\n /** Set the select to disabled state. */\n disabled?: boolean;\n /** Filter Select Options */\n filterOption?:\n | undefined\n | ((option?: SelectOption, inputValue?: string) => boolean);\n /** Format the label of the option */\n renderOptionLabel?: undefined | Props['formatOptionLabel'];\n /** The value of the search input */\n inputValue?: string;\n /** Label that should be associated with the select. */\n label?: React.ReactNode;\n /** Set the select to a loading state. */\n loading?: boolean;\n /** switch between single and multi select mode. */\n multiSelect?: boolean;\n /** The name for the Select component, used by react-hook-form */\n name: string;\n /** Placeholder that is displayed when nothing is selected */\n placeholder?: string;\n /** The options for the Select component */\n options: SelectOption[];\n /** Handle change events on the input */\n onInputChange?: Props['onInputChange'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n // @ts-expect-error data-testid is not a default prop\n // eslint-disable-next-line react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}`;\n\n return <components.Input data-testid={testId} {...props} />;\n};\n\nconst ControlComponent: typeof components.Control = (props) => {\n // @ts-expect-error data-testid is not a default prop\n // eslint-disable-next-line react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}_select`;\n return (\n <div data-testid={testId}>\n {}\n <components.Control {...props} />\n </div>\n );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n // @ts-expect-error data-testid is not a default prop\n // eslint-disable-next-line react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}_select_option_${slugify(props?.data?.testId ?? props?.data?.value, { replaceDots: true })}`;\n return (\n <div data-testid={testId}>\n {}\n <components.Option {...props} />\n </div>\n );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n props,\n) => {\n // @ts-expect-error data-testid is not a default prop\n\n const testId = props?.selectProps['data-testid'] as string;\n return (\n <div data-testid={`${testId}_select_dropdown`}>\n {}\n <components.DropdownIndicator {...props} />\n </div>\n );\n};\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n className = undefined,\n clearable = true,\n filterOption = undefined,\n renderOptionLabel = undefined,\n inputValue = undefined,\n loading = false,\n multiSelect = false,\n name,\n onInputChange = undefined,\n options,\n placeholder = undefined,\n ...uniformFieldProps\n}: SelectProps) => {\n const {\n disabled,\n errorMessage,\n field: { onBlur, onChange, ref, value },\n getErrorMessageProps,\n getHelperWrapperProps,\n getLabelProps,\n invalid,\n label,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n const [isFocused, setIsFocused] = useState(false);\n\n // classNames from slots\n const variants = selectVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const { getBaseProps, getTriggerProps, getValueProps } = useSelect({\n children: [],\n classNames,\n errorMessage,\n isDisabled: disabled,\n isInvalid: invalid,\n isLoading: loading,\n isRequired: required,\n label,\n labelPlacement: 'outside',\n });\n\n return (\n <div\n {...getBaseProps()}\n className={cn(classNames.base)}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-required={required}\n data-testid={`${testId}_wrapper`}\n >\n {label ? (\n <label\n className={classNames.label}\n data-slot=\"label\"\n htmlFor={`react-select-${name}-input`}\n id={getLabelProps().id}\n >\n {label}\n </label>\n ) : null}\n <ReactSelect\n ref={ref}\n menuShouldBlockScroll\n unstyled\n aria-errormessage=\"\"\n aria-invalid={invalid}\n aria-labelledby={getTriggerProps()['aria-labelledby']?.split(' ')[1]}\n // Does not affect the testId of the select, but is needed to pass it to sub-components\n data-testid={testId}\n filterOption={filterOption}\n formatOptionLabel={renderOptionLabel}\n inputValue={inputValue}\n instanceId={name}\n isClearable={clearable}\n isDisabled={disabled}\n isLoading={loading}\n isMulti={multiSelect}\n // set menuPosition to fixed so that menu can be rendered\n // inside Card / Modal components, menuShouldBlockScroll\n // prevents container scroll when menu is open\n menuPosition=\"fixed\"\n name={name}\n onInputChange={onInputChange}\n options={options}\n placeholder={placeholder}\n classNames={{\n control: () => {\n return cn(classNames.control, {\n [classNames.control_focused]: isFocused && !invalid,\n });\n },\n clearIndicator: () => {\n return classNames.clearIndicator;\n },\n dropdownIndicator: () => {\n return classNames.dropdownIndicator;\n },\n groupHeading: () => {\n return classNames.groupHeading;\n },\n indicatorsContainer: () => {\n return classNames.indicatorsContainer;\n },\n indicatorSeparator: () => {\n return classNames.indicatorSeparator;\n },\n loadingIndicator: () => {\n return classNames.loadingIndicator;\n },\n loadingMessage: () => {\n return classNames.loadingMessage;\n },\n input: () => {\n return classNames.input;\n },\n menu: () => {\n return classNames.menu;\n },\n menuList: () => {\n return classNames.menuList;\n },\n menuPortal: () => {\n return classNames.menuPortal;\n },\n multiValue: () => {\n return classNames.multiValue;\n },\n multiValueLabel: () => {\n return cn(\n classNames.multiValueLabel,\n `${getValueProps().className}`,\n );\n },\n multiValueRemove: () => {\n return classNames.multiValueRemove;\n },\n noOptionsMessage: () => {\n return classNames.noOptionsMessage;\n },\n option: ({\n isFocused: optionIsFocused,\n isSelected: optionIsSelected,\n }) => {\n return cn(classNames.option, {\n [classNames.option_focused]: optionIsFocused,\n [classNames.option_selected]: optionIsSelected,\n });\n },\n placeholder: () => {\n return classNames.placeholder;\n },\n singleValue: () => {\n return cn(classNames.singleValue, `${getValueProps().className}`);\n },\n valueContainer: () => {\n return classNames.valueContainer;\n },\n }}\n components={{\n Input: InputComponent,\n Option: OptionComponent,\n DropdownIndicator: DropdownIndicatorComponent,\n Control: ControlComponent,\n }}\n onBlur={(_e) => {\n setIsFocused(false);\n onBlur();\n }}\n onChange={(option) => {\n if (multiSelect) {\n onChange(\n (option as SelectOption[])?.map((_option) => {\n return _option.value;\n }),\n );\n } else {\n onChange((option as SelectOption)?.value);\n }\n }}\n onFocus={(_e) => {\n setIsFocused(true);\n }}\n // set complete option as value by current field value\n value={options.find((option) => {\n return option.value === value;\n })}\n />\n {invalid ? (\n <div {...getHelperWrapperProps()}>\n {}\n <div {...getErrorMessageProps()}>{errorMessage}</div>\n </div>\n ) : null}\n </div>\n );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps } from './Select';\n\nexport { Select };\n\nexport default Select;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunk3UIFEC4Rcjs = require('./chunk-3UIFEC4R.cjs');
|
|
4
4
|
|
|
5
5
|
// src/SubmitButton/SubmitButton.tsx
|
|
6
6
|
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
@@ -19,7 +19,7 @@ var SubmitButton = ({
|
|
|
19
19
|
const {
|
|
20
20
|
formState: { isSubmitting },
|
|
21
21
|
triggerSubmit
|
|
22
|
-
} =
|
|
22
|
+
} = _chunk3UIFEC4Rcjs.useFormContext.call(void 0, );
|
|
23
23
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
24
24
|
_pixels.Button,
|
|
25
25
|
{
|
|
@@ -46,4 +46,4 @@ var SubmitButton_default2 = SubmitButton_default;
|
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
exports.SubmitButton_default = SubmitButton_default; exports.SubmitButton_default2 = SubmitButton_default2;
|
|
49
|
-
//# sourceMappingURL=chunk-
|
|
49
|
+
//# sourceMappingURL=chunk-P7Z25LOZ.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-P7Z25LOZ.cjs","../src/SubmitButton/SubmitButton.tsx","../src/SubmitButton/index.ts"],"names":["SubmitButton_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACDA,oDAA4B;AAC5B,2CAAuB;AA0CnB,+CAAA;AAhBJ,IAAM,aAAA,EAAe,CAAC;AAAA,EACpB,UAAA,EAAY,aAAA;AAAA,EACZ,SAAA,EAAW,QAAA;AAAA,EACX,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,MAAA,EAAQ,SAAA;AAAA,EACR,KAAA,EAAO,KAAA,CAAA;AAAA,EACP,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;AAAA,MACA,SAAA,EAAW,4BAAA,SAAY,CAAA;AAAA,MACvB,KAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,IAAA;AAAA,MACA,OAAA,EAAS,QAAA,GAAW,YAAA;AAAA,MAIpB,OAAA,EAAS,aAAA;AAAA,MACT,IAAA;AAAA,MACA,MAAA,EAAQ,iCAAA,MAAQ,EAAQ,EAAE,WAAA,EAAa,KAAK,CAAC,CAAA;AAAA,MAC7C,IAAA,EAAK,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ,CAAA;AAEA,IAAO,qBAAA,EAAQ,YAAA;AD1Bf;AACA;AEnCA,IAAOA,sBAAAA,EAAQ,oBAAA;AFqCf;AACA;AACE;AACA;AACF,2GAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-P7Z25LOZ.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 /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: string;\n /** color of the submit button */\n color?: ButtonProps['color'];\n /** icon of the submit button */\n icon?: ButtonProps['icon'];\n /** If set loading animation is shown */\n loading?: boolean;\n /** size of the submit 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 ariaLabel = 'Submit form',\n children = 'Submit',\n className = undefined,\n color = 'success',\n icon = undefined,\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 ariaLabel={ariaLabel}\n className={cn(className)}\n color={color}\n disabled={isSubmitting}\n icon={icon}\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 testId={slugify(testId, { replaceDots: true })}\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,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useUniformField
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-47MZU3WD.js";
|
|
4
4
|
import {
|
|
5
5
|
__objRest,
|
|
6
6
|
__spreadValues
|
|
@@ -50,8 +50,7 @@ var Radios = (_a) => {
|
|
|
50
50
|
defaultValue,
|
|
51
51
|
testId
|
|
52
52
|
} = useUniformField(__spreadValues({
|
|
53
|
-
name
|
|
54
|
-
showInvalidWhen: "immediate"
|
|
53
|
+
name
|
|
55
54
|
}, uniformFieldProps));
|
|
56
55
|
const variants = radiosVariants();
|
|
57
56
|
const classNames = variantsToClassNames(variants, className, "base");
|
|
@@ -114,4 +113,4 @@ export {
|
|
|
114
113
|
Radios_default,
|
|
115
114
|
Radios_default2
|
|
116
115
|
};
|
|
117
|
-
//# sourceMappingURL=chunk-
|
|
116
|
+
//# sourceMappingURL=chunk-QIIMEQS3.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Radios/Radios.tsx","../src/Radios/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport {\n Radio as HeroRadio,\n RadioGroup as HeroRadioGroup,\n} from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\n\nexport const radiosVariants = tv({\n slots: {\n // Needs group for group-data condition\n base: 'group gap-0',\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',\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radiosVariants>;\ntype ClassName = TVClassName<typeof radiosVariants>;\n\nexport interface RadioOption {\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 RadiosProps 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: RadioOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * Radios component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst Radios = ({\n className = undefined,\n inline = false,\n name,\n options,\n ...uniformFieldProps\n}: RadiosProps): ReactElement => {\n const {\n disabled,\n errorMessage,\n field: { onBlur, onChange, ref },\n invalid,\n label,\n required,\n defaultValue,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // classNames from slots\n const variants = radiosVariants();\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 ref={ref}\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={defaultValue as string | undefined}\n errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\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 <HeroRadio\n key={option.value}\n classNames={itemClassNames}\n data-testid={optionTestId}\n isDisabled={!!disabled || option.disabled}\n onChange={onChange}\n value={option.value}\n >\n {option.label ?? option.value}\n </HeroRadio>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default Radios;\n","import Radios from './Radios';\n\nexport type { RadiosProps } from './Radios';\n\nexport { Radios };\n\nexport default Radios;\n"],"mappings":";;;;;;;;;AAGA;AAAA,EACE,SAAS;AAAA,EACT,cAAc;AAAA,OACT;AAEP,SAAS,SAAS,IAAI,4BAA4B;AA0G7B;AAtGd,IAAM,iBAAiB,GAAG;AAAA,EAC/B,OAAO;AAAA;AAAA,IAEL,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,aACE;AAAA;AAAA,IAEF,OACE;AAAA,IACF,SAAS;AAAA,EACX;AACF,CAAC;AAsCD,IAAM,SAAS,CAAC,OAMiB;AANjB,eACd;AAAA,gBAAY;AAAA,IACZ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EAtEF,IAkEgB,IAKX,8BALW,IAKX;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,QAAQ,UAAU,IAAI;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,gBAAgB;AAAA,IAClB;AAAA,KACG,kBACJ;AAGD,QAAM,WAAW,eAAe;AAChC,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,QAAM,iBAAiB;AAAA,IACrB,MAAM,WAAW;AAAA,IACjB,SAAS,WAAW;AAAA,IACpB,aAAa,WAAW;AAAA,IACxB,OAAO,WAAW;AAAA,IAClB,cAAc,WAAW;AAAA,IACzB,SAAS,WAAW;AAAA,EACtB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MAGA,gBAAc;AAAA,MACd,iBAAe;AAAA,MACf,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,OAAO,QAAQ,oBAAC,YAAQ,iBAAM,IAAY;AAAA,MAC1C;AAAA,MACA;AAAA,MACA,aAAa,SAAS,eAAe;AAAA,MAEpC,kBAAQ,IAAI,CAAC,WAAW;AAvH/B,YAAAA,KAAAC;AAwHQ,YAAI,WAAW,QAAQ;AACrB,gBAAM,eAAe;AAAA,YACnB,GAAG,MAAM,YAAWD,MAAA,OAAO,WAAP,OAAAA,MAAiB,OAAO,KAAK;AAAA,YACjD,EAAE,aAAa,KAAK;AAAA,UACtB;AACA,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,YAAY;AAAA,cACZ,eAAa;AAAA,cACb,YAAY,CAAC,CAAC,YAAY,OAAO;AAAA,cACjC;AAAA,cACA,OAAO,OAAO;AAAA,cAEb,WAAAC,MAAA,OAAO,UAAP,OAAAA,MAAgB,OAAO;AAAA;AAAA,YAPnB,OAAO;AAAA,UAQd;AAAA,QAEJ;AACA,eAAO;AAAA,MACT,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,iBAAQ;;;AC1If,IAAOC,kBAAQ;","names":["_a","_b","Radios_default"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
FormContext_default,
|
|
3
3
|
useFormContext
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-47MZU3WD.js";
|
|
5
5
|
|
|
6
6
|
// src/Form/Form.tsx
|
|
7
7
|
import { cn as cn2, slugify } from "@fuf-stack/pixel-utils";
|
|
@@ -148,4 +148,4 @@ export {
|
|
|
148
148
|
Form_default,
|
|
149
149
|
Form_default2
|
|
150
150
|
};
|
|
151
|
-
//# sourceMappingURL=chunk-
|
|
151
|
+
//# sourceMappingURL=chunk-RBQP2VHW.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useUniformField
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-47MZU3WD.js";
|
|
4
4
|
import {
|
|
5
5
|
__objRest,
|
|
6
6
|
__spreadProps,
|
|
@@ -102,8 +102,7 @@ var RadioBoxes = (_a) => {
|
|
|
102
102
|
required,
|
|
103
103
|
testId
|
|
104
104
|
} = useUniformField(__spreadValues({
|
|
105
|
-
name
|
|
106
|
-
showInvalidWhen: "immediate"
|
|
105
|
+
name
|
|
107
106
|
}, uniformFieldProps));
|
|
108
107
|
const variants = radioBoxesVariants();
|
|
109
108
|
const classNames = variantsToClassNames(variants, className, "base");
|
|
@@ -168,4 +167,4 @@ export {
|
|
|
168
167
|
RadioBoxes_default,
|
|
169
168
|
RadioBoxes_default2
|
|
170
169
|
};
|
|
171
|
-
//# sourceMappingURL=chunk-
|
|
170
|
+
//# sourceMappingURL=chunk-TCJK6IYV.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\n//\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n slots: {\n base: 'group gap-0', // 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 'mb-2 inline-flex 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 inline = false,\n name,\n options,\n ...uniformFieldProps\n}: RadioBoxesProps) => {\n const {\n defaultValue,\n errorMessage,\n invalid,\n disabled,\n label,\n onBlur,\n onChange,\n ref,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // classNames from slots\n const variants = radioBoxesVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\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 ref={ref}\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={defaultValue as string}\n errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\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 key={option.value}\n classNames={itemClassNames}\n data-testid={optionTestId}\n description={option.description}\n icon={option.icon}\n isDisabled={!!disabled || option.disabled}\n onChange={onChange}\n value={option.value}\n >\n {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 {...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 <input {...getInputProps()} />\n </VisuallyHidden>\n <span {...getWrapperProps()}>\n <span {...getControlProps()} />\n </span>\n {icon}\n <div\n {...getLabelWrapperProps()}\n className={cn(getLabelWrapperProps().className, 'grow')}\n >\n {children ? <span {...getLabelProps()}>{children}</span> : null}\n {description ? (\n <span className=\"text-foreground opacity-70 text-small\">\n {description}\n </span>\n ) : null}\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"],"mappings":"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","names":["jsx","_a","_b","RadioBoxes_default"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useUniformField
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-47MZU3WD.js";
|
|
4
4
|
import {
|
|
5
5
|
__objRest,
|
|
6
6
|
__spreadValues
|
|
@@ -70,8 +70,7 @@ var RadioTabs = (_a) => {
|
|
|
70
70
|
required,
|
|
71
71
|
testId
|
|
72
72
|
} = useUniformField(__spreadValues({
|
|
73
|
-
name
|
|
74
|
-
showInvalidWhen: "immediate"
|
|
73
|
+
name
|
|
75
74
|
}, uniformFieldProps));
|
|
76
75
|
const tabOptions = options.map((option) => {
|
|
77
76
|
var _a2, _b2;
|
|
@@ -145,4 +144,4 @@ export {
|
|
|
145
144
|
RadioTabs_default,
|
|
146
145
|
RadioTabs_default2
|
|
147
146
|
};
|
|
148
|
-
//# sourceMappingURL=chunk-
|
|
147
|
+
//# sourceMappingURL=chunk-UB44OT6Q.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/RadioTabs/RadioTabs.tsx","../src/RadioTabs/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TabsProps } from '@fuf-stack/pixels';\nimport type { TabProps } from '@fuf-stack/pixels/Tabs';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { useUniformField } from '../hooks';\n\nexport const radioTabsVariants = tv({\n slots: {\n base: 'group gap-0', // Needs group for group-data condition\n cursor: '',\n label:\n 'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n tab: '',\n tabBase: '',\n tabContent: '',\n tabList: '',\n tabPanel: 'p-3',\n tabWrapper: '',\n wrapper: '',\n },\n variants: {\n hasContent: {\n true: {\n base: '',\n tabBase: 'p-1 pb-0',\n tabWrapper: [\n // border style\n 'rounded-medium border border-divider',\n // full width\n 'w-full',\n ],\n },\n },\n fullWidth: {\n true: {\n tabWrapper: 'w-full',\n },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof radioTabsVariants>;\ntype ClassName = TVClassName<typeof radioTabsVariants>;\n\nexport interface RadioTabsOption {\n /** Optional content inside of the tab */\n content?: ReactNode;\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 RadioTabsProps extends Omit<VariantProps, 'hasContent'> {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** Whether tabs should take up full container width */\n fullWidth?: 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: RadioTabsOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n /** How the RadioTabs should look like. */\n variant?: TabsProps['variant'];\n}\n\n/**\n * RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n * and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst RadioTabs = ({\n className = undefined,\n fullWidth = false,\n inline = false,\n name,\n options,\n variant = undefined,\n ...uniformFieldProps\n}: RadioTabsProps): ReactElement => {\n const {\n disabled,\n errorMessage,\n field: { onBlur, onChange, ref, value },\n invalid,\n label,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n const tabOptions = options.map<TabProps>((option) => {\n return {\n content: option?.content,\n disabled: option?.disabled,\n key: option.value,\n label: option?.label ?? option?.value,\n testId: slugify(`option_${option?.testId ?? option?.value}`, {\n replaceDots: true,\n }),\n };\n });\n\n const disabledAllKeys: string[] | undefined = tabOptions?.map((option) => {\n return option.key as string;\n });\n\n // check if any option has content\n // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async\n const hasContent = options.some((option) => {\n return option.content;\n });\n\n // classNames from slots\n const variants = radioTabsVariants({ hasContent, fullWidth });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroRadioGroup\n ref={ref}\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 errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n classNames={{\n base: classNames.base,\n label: classNames.label,\n wrapper: classNames.wrapper,\n }}\n >\n <Tabs\n disabledKeys={disabled ? disabledAllKeys : undefined}\n onSelectionChange={onChange}\n // make sure component is controlled\n selectedKey={value ?? ''}\n tabs={tabOptions}\n testId={testId}\n variant={variant}\n className={{\n base: classNames.tabBase,\n cursor: classNames.cursor,\n panel: classNames.tabPanel,\n tab: classNames.tab,\n tabContent: classNames.tabContent,\n tabList: classNames.tabList,\n tabWrapper: classNames.tabWrapper,\n }}\n />\n </HeroRadioGroup>\n );\n};\n\nexport default RadioTabs;\n","import RadioTabs from './RadioTabs';\n\nexport type { RadioTabsProps } from './RadioTabs';\n\nexport { RadioTabs };\n\nexport default RadioTabs;\n"],"mappings":"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","names":["_a","_b","RadioTabs_default"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunk3UIFEC4Rcjs = require('./chunk-3UIFEC4R.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
var _chunkBZ5OMN4Ycjs = require('./chunk-BZ5OMN4Y.cjs');
|
|
@@ -52,7 +52,7 @@ var TextArea = (_a) => {
|
|
|
52
52
|
label,
|
|
53
53
|
required,
|
|
54
54
|
testId
|
|
55
|
-
} =
|
|
55
|
+
} = _chunk3UIFEC4Rcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, { name }, uniformFieldProps));
|
|
56
56
|
const { onChange, onBlur, value } = _chunkBZ5OMN4Ycjs.useInputValueDebounce.call(void 0, {
|
|
57
57
|
debounceDelay,
|
|
58
58
|
onBlur: fieldOnBlur,
|
|
@@ -100,4 +100,4 @@ var TextArea_default2 = TextArea_default;
|
|
|
100
100
|
|
|
101
101
|
|
|
102
102
|
exports.TextArea_default = TextArea_default; exports.TextArea_default2 = TextArea_default2;
|
|
103
|
-
//# sourceMappingURL=chunk-
|
|
103
|
+
//# sourceMappingURL=chunk-UO52HWMC.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-UO52HWMC.cjs","../src/TextArea/TextArea.tsx","../src/TextArea/index.ts"],"names":["TextArea_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACA;ACRA,sCAAyC;AAEzC,oDAAyC;AA+ErC,+CAAA;AA1EG,IAAM,iBAAA,EAAmB,4BAAA;AAAG,EACjC,KAAA,EAAO;AAAA;AAAA,IAEL,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,WAAA,EAAa,EAAA;AAAA;AAAA,IAEb,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,YAAA,EAAc;AAAA,EAChB;AACF,CAAC,CAAA;AA2BD,IAAM,SAAA,EAAW,CAAC,EAAA,EAAA,GAOG;AAPH,EAAA,IAAA,GAAA,EAAA,EAAA,EAChB;AAAA,IAAA,SAAA,EAAW,IAAA;AAAA,IACX,SAAA,EAAW,WAAA,EAAa,KAAA,CAAA;AAAA,IACxB,cAAA,EAAgB,GAAA;AAAA,IAChB,IAAA;AAAA,IACA,YAAA,EAAc;AAAA,EArDhB,EAAA,EAgDkB,EAAA,EAMb,kBAAA,EAAA,yCAAA,EANa,EAMb;AAAA,IALH,UAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,EAAA,CAAA,CAAA;AAGA,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA,EAAO;AAAA,MACL,QAAA,EAAU,aAAA;AAAA,MACV,MAAA,EAAQ,WAAA;AAAA,MACR,KAAA,EAAO,UAAA;AAAA,MACP;AAAA,IACF,CAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,EACF,EAAA,EAAI,+CAAA,8CAAgB,EAAE,KAAA,CAAA,EAAS,iBAAA,CAAmB,CAAA;AAGlD,EAAA,MAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,EAAA,EAAI,qDAAA;AAAsB,IACxD,aAAA;AAAA,IACA,MAAA,EAAQ,WAAA;AAAA,IACR,QAAA,EAAU,aAAA;AAAA,IACV,KAAA,EAAO;AAAA,EACT,CAAC,CAAA;AAGD,EAAA,MAAM,SAAA,EAAW,gBAAA,CAAiB,CAAA;AAClC,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,UAAA,EAAY,MAAM,CAAA;AAEpE,EAAA,uBACE,6BAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,aAAA,EAAa,MAAA;AAAA,MACb,YAAA;AAAA,MACA,EAAA,EAAI,MAAA;AAAA,MACJ,UAAA,EAAY,QAAA;AAAA,MACZ,SAAA,EAAW,OAAA;AAAA,MACX,UAAA,EAAY,QAAA;AAAA,MACZ,KAAA;AAAA,MACA,cAAA,EAAe,SAAA;AAAA,MACf,IAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,OAAA,EAAQ,UAAA;AAAA,MACR,UAAA,EAAY;AAAA,QACV,IAAA,EAAM,UAAA,CAAW,IAAA;AAAA,QACjB,WAAA,EAAa,UAAA,CAAW,WAAA;AAAA;AAAA,QAExB,aAAA,EAAe,KAAA;AAAA,QACf,KAAA,EAAO,UAAA,CAAW,KAAA;AAAA,QAClB,YAAA,EAAc,UAAA,CAAW;AAAA,MAC3B,CAAA;AAAA,MAEC;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ,CAAA;AAEA,IAAO,iBAAA,EAAQ,QAAA;ADpBf;AACA;AEzFA,IAAOA,kBAAAA,EAAQ,gBAAA;AF2Ff;AACA;AACE;AACA;AACF,2FAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-UO52HWMC.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { Textarea as HeroTextArea } from '@heroui/input';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useInputValueDebounce, useUniformField } from '../hooks';\n\n// input variants\nexport const textAreaVariants = tv({\n slots: {\n /** wrapper around the whole input */\n base: '',\n /** clear button */\n clearButton: '',\n /** actual input element */\n input: '',\n /** inner wrapper (HeroUI inputWrapper slot) */\n inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n },\n});\n\ntype VariantProps = TVProps<typeof textAreaVariants>;\ntype ClassName = TVClassName<typeof textAreaVariants>;\n\nexport interface TextAreaProps extends VariantProps {\n /** Child components. The content of the textarea. */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** debounce delay in milliseconds for form state updates (default: 300ms) */\n debounceDelay?: number;\n /** Determines if the TextArea is disabled or not. */\n disabled?: boolean;\n /** Label displayed above the TextArea. */\n label?: ReactNode;\n /** Name the TextArea is registered at in HTML forms (react-hook-form). */\n name: string;\n /** placeholder for the textArea content. */\n placeholder?: string;\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * TextArea component based on [HeroUI TextArea](https://www.heroui.com//docs/components/textarea)\n */\nconst TextArea = ({\n children = null,\n className: _className = undefined,\n debounceDelay = 300,\n name,\n placeholder = ' ',\n ...uniformFieldProps\n}: TextAreaProps) => {\n const {\n disabled,\n errorMessage,\n field: {\n onChange: fieldOnChange,\n onBlur: fieldOnBlur,\n value: fieldValue,\n ref,\n },\n invalid,\n label,\n required,\n testId,\n } = useUniformField({ name, ...uniformFieldProps });\n\n // Use debounced handlers for form updates\n const { onChange, onBlur, value } = useInputValueDebounce({\n debounceDelay,\n onBlur: fieldOnBlur,\n onChange: fieldOnChange,\n value: fieldValue,\n });\n\n // classNames from slots\n const variants = textAreaVariants();\n const classNames = variantsToClassNames(variants, _className, 'base');\n\n return (\n <HeroTextArea\n ref={ref}\n data-testid={testId}\n errorMessage={errorMessage}\n id={testId}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label}\n labelPlacement=\"outside\"\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n placeholder={placeholder}\n value={value as string}\n variant=\"bordered\"\n classNames={{\n base: classNames.base,\n clearButton: classNames.clearButton,\n // set padding to 0 for error message exit animation\n helperWrapper: 'p-0',\n input: classNames.input,\n inputWrapper: classNames.inputWrapper,\n }}\n >\n {children}\n </HeroTextArea>\n );\n};\n\nexport default TextArea;\n","import TextArea from './TextArea';\n\nexport type { TextAreaProps } from './TextArea';\n\nexport { TextArea };\n\nexport default TextArea;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunk3UIFEC4Rcjs = require('./chunk-3UIFEC4R.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -101,9 +101,8 @@ var RadioBoxes = (_a) => {
|
|
|
101
101
|
ref,
|
|
102
102
|
required,
|
|
103
103
|
testId
|
|
104
|
-
} =
|
|
105
|
-
name
|
|
106
|
-
showInvalidWhen: "immediate"
|
|
104
|
+
} = _chunk3UIFEC4Rcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
|
|
105
|
+
name
|
|
107
106
|
}, uniformFieldProps));
|
|
108
107
|
const variants = radioBoxesVariants();
|
|
109
108
|
const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
|
|
@@ -168,4 +167,4 @@ var RadioBoxes_default2 = RadioBoxes_default;
|
|
|
168
167
|
|
|
169
168
|
|
|
170
169
|
exports.RadioBoxes_default = RadioBoxes_default; exports.RadioBoxes_default2 = RadioBoxes_default2;
|
|
171
|
-
//# sourceMappingURL=chunk-
|
|
170
|
+
//# sourceMappingURL=chunk-X5WF3MEZ.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-X5WF3MEZ.cjs","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/index.ts"],"names":["jsx","_a","_b","RadioBoxes_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-X5WF3MEZ.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\n//\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n slots: {\n base: 'group gap-0', // 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 'mb-2 inline-flex 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 inline = false,\n name,\n options,\n ...uniformFieldProps\n}: RadioBoxesProps) => {\n const {\n defaultValue,\n errorMessage,\n invalid,\n disabled,\n label,\n onBlur,\n onChange,\n ref,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // classNames from slots\n const variants = radioBoxesVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\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 ref={ref}\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={defaultValue as string}\n errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\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 key={option.value}\n classNames={itemClassNames}\n data-testid={optionTestId}\n description={option.description}\n icon={option.icon}\n isDisabled={!!disabled || option.disabled}\n onChange={onChange}\n value={option.value}\n >\n {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 {...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 <input {...getInputProps()} />\n </VisuallyHidden>\n <span {...getWrapperProps()}>\n <span {...getControlProps()} />\n </span>\n {icon}\n <div\n {...getLabelWrapperProps()}\n className={cn(getLabelWrapperProps().className, 'grow')}\n >\n {children ? <span {...getLabelProps()}>{children}</span> : null}\n {description ? (\n <span className=\"text-foreground opacity-70 text-small\">\n {description}\n </span>\n ) : null}\n </div>\n </Component>\n );\n};\n\nexport default RadioBox;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"]}
|
package/dist/hooks/index.cjs
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _chunk3UIFEC4Rcjs = require('../chunk-3UIFEC4R.cjs');
|
|
10
10
|
require('../chunk-OE5BOGGX.cjs');
|
|
11
11
|
require('../chunk-NHEZXA4H.cjs');
|
|
12
12
|
require('../chunk-Z353BLWI.cjs');
|
|
@@ -27,5 +27,5 @@ require('../chunk-555JRYCS.cjs');
|
|
|
27
27
|
|
|
28
28
|
|
|
29
29
|
|
|
30
|
-
exports.checkFieldIsRequired =
|
|
30
|
+
exports.checkFieldIsRequired = _chunk3UIFEC4Rcjs.checkFieldIsRequired; exports.useClientValidation = _chunk3UIFEC4Rcjs.useClientValidation; exports.useController = _chunk3UIFEC4Rcjs.useController; exports.useFormContext = _chunk3UIFEC4Rcjs.useFormContext; exports.useInput = _chunk3UIFEC4Rcjs.useInput; exports.useInputValueDebounce = _chunkBZ5OMN4Ycjs.useInputValueDebounce; exports.useInputValueTransform = _chunk4WYC2RBEcjs.useInputValueTransform; exports.useUniformField = _chunk3UIFEC4Rcjs.useUniformField; exports.useUniformFieldArray = _chunk3UIFEC4Rcjs.useUniformFieldArray;
|
|
31
31
|
//# sourceMappingURL=index.cjs.map
|
package/dist/hooks/index.d.cts
CHANGED
|
@@ -121,24 +121,20 @@ interface UseUniformFieldArrayProps<TFieldValues extends FieldValues = FieldValu
|
|
|
121
121
|
testId?: string;
|
|
122
122
|
/** Optional label content; pass false to suppress label entirely */
|
|
123
123
|
label?: ReactNode | false;
|
|
124
|
-
/**
|
|
125
|
-
* When to show the invalid state to users.
|
|
126
|
-
* - 'touched': Only show errors after field is touched or form is submitted (default, good for text inputs)
|
|
127
|
-
* - 'immediate': Show errors as soon as they occur (good for checkboxes, radios, arrays)
|
|
128
|
-
*/
|
|
129
|
-
showInvalidWhen?: 'touched' | 'immediate';
|
|
130
124
|
}
|
|
131
125
|
/**
|
|
132
126
|
* Enhanced useFieldArray hook with initialization and animation logic.
|
|
133
127
|
* Based on React Hook Form's useFieldArray with additional features:
|
|
134
128
|
* - Automatic initialization when lastElementNotRemovable is set
|
|
135
129
|
* - Animation control (disabled during initialization)
|
|
136
|
-
* - Automatic validation triggering
|
|
137
130
|
* - Support for flat arrays (arrays of primitives)
|
|
138
131
|
*
|
|
132
|
+
* Note: Automatic validation triggering on length change is disabled to prevent
|
|
133
|
+
* triggering form-wide validation. Array validation still runs on form submission.
|
|
134
|
+
*
|
|
139
135
|
* @see https://react-hook-form.com/docs/usefieldarray
|
|
140
136
|
*/
|
|
141
|
-
declare const useUniformFieldArray: <TFieldValues extends FieldValues = FieldValues>({ name, flat, elementInitialValue: _elementInitialValue, lastElementNotRemovable, disabled, testId: explicitTestId, label,
|
|
137
|
+
declare const useUniformFieldArray: <TFieldValues extends FieldValues = FieldValues>({ name, flat, elementInitialValue: _elementInitialValue, lastElementNotRemovable, disabled, testId: explicitTestId, label, }: UseUniformFieldArrayProps<TFieldValues>) => {
|
|
142
138
|
control: react_hook_form.Control<TFieldValues, any, TFieldValues>;
|
|
143
139
|
debugMode: ReturnType<typeof useFormContext<TFieldValues_1>>["debugMode"];
|
|
144
140
|
defaultValue: unknown;
|
|
@@ -179,12 +175,6 @@ interface UseUniformFieldParams<TFieldValues extends FieldValues = FieldValues>
|
|
|
179
175
|
testId?: string;
|
|
180
176
|
/** Optional label content; pass false to suppress label entirely */
|
|
181
177
|
label?: ReactNode | false;
|
|
182
|
-
/**
|
|
183
|
-
* When to show the invalid state to users.
|
|
184
|
-
* - 'touched': Only show errors after field is touched or form is submitted (default, good for text inputs)
|
|
185
|
-
* - 'immediate': Show errors as soon as they occur (good for checkboxes, radios, arrays)
|
|
186
|
-
*/
|
|
187
|
-
showInvalidWhen?: 'touched' | 'immediate';
|
|
188
178
|
}
|
|
189
179
|
interface UseUniformFieldReturn<TFieldValues extends FieldValues = FieldValues> {
|
|
190
180
|
/** react-hook-form control instance for advanced integrations */
|
|
@@ -209,7 +199,7 @@ interface UseUniformFieldReturn<TFieldValues extends FieldValues = FieldValues>
|
|
|
209
199
|
getLabelProps: ReturnType<typeof useInput>['getLabelProps'];
|
|
210
200
|
/** Access current form values (converted to validation-friendly format) */
|
|
211
201
|
getValues: ReturnType<typeof useFormContext<TFieldValues>>['getValues'];
|
|
212
|
-
/** Whether the field
|
|
202
|
+
/** Whether the field should show invalid state (debounced for smooth animations). True when field is invalid AND (dirty OR touched OR submitted) */
|
|
213
203
|
invalid: boolean;
|
|
214
204
|
/** Computed label node including optional test id copy button */
|
|
215
205
|
label: ReactNode | null;
|
|
@@ -236,10 +226,10 @@ interface UseUniformFieldReturn<TFieldValues extends FieldValues = FieldValues>
|
|
|
236
226
|
* • `true` (field becomes invalid): applies immediately so errors show right away
|
|
237
227
|
* • `false` (field becomes valid): delayed 200ms to allow smooth exit animations
|
|
238
228
|
* • Respects `prefers-reduced-motion` by skipping delays when user prefers reduced motion
|
|
239
|
-
* - Smart `invalid` visibility (via `showInvalid`)
|
|
240
|
-
* •
|
|
241
|
-
* •
|
|
242
|
-
* •
|
|
229
|
+
* - Smart `invalid` visibility (via `showInvalid`):
|
|
230
|
+
* • Shows errors when field is dirty OR touched OR form has been submitted
|
|
231
|
+
* • Prevents showing errors on pristine/untouched fields for better UX
|
|
232
|
+
* • Works well for all field types (text inputs, checkboxes, radios, arrays)
|
|
243
233
|
* - Prebuilt `errorMessage` React node using `FieldValidationError`
|
|
244
234
|
* - Computed `label` node which appends a `FieldCopyTestIdButton` in
|
|
245
235
|
* `debug-testids` mode
|