@fuf-stack/uniform 1.5.0 → 1.5.3
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 +5 -5
- package/dist/Checkboxes/index.js +4 -4
- package/dist/FieldArray/index.cjs +5 -5
- package/dist/FieldArray/index.js +4 -4
- package/dist/Form/index.cjs +5 -5
- package/dist/Form/index.js +4 -4
- package/dist/Input/index.cjs +5 -5
- package/dist/Input/index.js +4 -4
- package/dist/RadioBoxes/index.cjs +5 -5
- package/dist/RadioBoxes/index.js +4 -4
- package/dist/RadioTabs/index.cjs +5 -5
- package/dist/RadioTabs/index.js +4 -4
- package/dist/Radios/index.cjs +5 -5
- package/dist/Radios/index.js +4 -4
- package/dist/Select/index.cjs +5 -5
- package/dist/Select/index.js +4 -4
- package/dist/SubmitButton/index.cjs +5 -5
- package/dist/SubmitButton/index.js +4 -4
- package/dist/Switch/index.cjs +5 -5
- package/dist/Switch/index.js +4 -4
- package/dist/TextArea/index.cjs +5 -5
- package/dist/TextArea/index.js +4 -4
- package/dist/{chunk-D2HI4KE4.js → chunk-2A74CSGX.js} +2 -2
- package/dist/{chunk-HQNZYWJX.cjs → chunk-3FSNNDYZ.cjs} +14 -14
- package/dist/{chunk-HQNZYWJX.cjs.map → chunk-3FSNNDYZ.cjs.map} +1 -1
- package/dist/{chunk-LLQLEDOO.js → chunk-3MXAIQKI.js} +3 -3
- package/dist/{chunk-53XSXUNE.js → chunk-4DGOOLSO.js} +6 -6
- package/dist/{chunk-53XSXUNE.js.map → chunk-4DGOOLSO.js.map} +1 -1
- package/dist/{chunk-S7K35LVS.js → chunk-4EZWAVRZ.js} +3 -3
- package/dist/{chunk-S7K35LVS.js.map → chunk-4EZWAVRZ.js.map} +1 -1
- package/dist/{chunk-P6HJOG7D.cjs → chunk-4WYC2RBE.cjs} +7 -3
- package/dist/chunk-4WYC2RBE.cjs.map +1 -0
- package/dist/{chunk-Q2BOMFJ5.js → chunk-7KLFK2IT.js} +7 -3
- package/dist/{chunk-Q2BOMFJ5.js.map → chunk-7KLFK2IT.js.map} +1 -1
- package/dist/{chunk-DYTE5N3B.cjs → chunk-BOESKBZN.cjs} +94 -73
- package/dist/chunk-BOESKBZN.cjs.map +1 -0
- package/dist/{chunk-FLK6OPFY.cjs → chunk-BZ5OMN4Y.cjs} +3 -3
- package/dist/{chunk-FLK6OPFY.cjs.map → chunk-BZ5OMN4Y.cjs.map} +1 -1
- package/dist/{chunk-ZN3ESUQR.js → chunk-BZBA2YGQ.js} +4 -4
- package/dist/{chunk-ZN3ESUQR.js.map → chunk-BZBA2YGQ.js.map} +1 -1
- package/dist/{chunk-OCYJFIPV.js → chunk-CHG25NCC.js} +4 -4
- package/dist/{chunk-OCYJFIPV.js.map → chunk-CHG25NCC.js.map} +1 -1
- package/dist/{chunk-GST3AQOR.js → chunk-CROGVLLB.js} +90 -69
- package/dist/chunk-CROGVLLB.js.map +1 -0
- package/dist/{chunk-BWPTCHL7.cjs → chunk-CUXVVIWS.cjs} +5 -5
- package/dist/{chunk-BWPTCHL7.cjs.map → chunk-CUXVVIWS.cjs.map} +1 -1
- package/dist/{chunk-5LWD6VRV.cjs → chunk-I6CQH42B.cjs} +5 -5
- package/dist/{chunk-5LWD6VRV.cjs.map → chunk-I6CQH42B.cjs.map} +1 -1
- package/dist/{chunk-62AYJT2H.cjs → chunk-JJDPGGYL.cjs} +3 -3
- package/dist/{chunk-62AYJT2H.cjs.map → chunk-JJDPGGYL.cjs.map} +1 -1
- package/dist/{chunk-CW4VK77Z.cjs → chunk-KE3ZO2IJ.cjs} +5 -5
- package/dist/{chunk-CW4VK77Z.cjs.map → chunk-KE3ZO2IJ.cjs.map} +1 -1
- package/dist/{chunk-4WRUHOGY.js → chunk-L53NZ7S5.js} +4 -4
- package/dist/{chunk-4WRUHOGY.js.map → chunk-L53NZ7S5.js.map} +1 -1
- package/dist/{chunk-YIBISSMT.cjs → chunk-LZPH7LW5.cjs} +7 -7
- package/dist/{chunk-YIBISSMT.cjs.map → chunk-LZPH7LW5.cjs.map} +1 -1
- package/dist/{chunk-6IU7IYYB.js → chunk-MODD3TFE.js} +2 -2
- package/dist/{chunk-C5GIWGQR.cjs → chunk-O3DDOJTB.cjs} +1 -1
- package/dist/{chunk-C5GIWGQR.cjs.map → chunk-O3DDOJTB.cjs.map} +1 -1
- package/dist/{chunk-ZLQCMOVU.cjs → chunk-RNBJT4Y7.cjs} +7 -7
- package/dist/{chunk-ZLQCMOVU.cjs.map → chunk-RNBJT4Y7.cjs.map} +1 -1
- package/dist/{chunk-3NH4MEMM.cjs → chunk-SU5WXAC7.cjs} +6 -6
- package/dist/{chunk-3NH4MEMM.cjs.map → chunk-SU5WXAC7.cjs.map} +1 -1
- package/dist/{chunk-3Q3IUEGL.js → chunk-SUO4QK32.js} +3 -3
- package/dist/{chunk-S36CKKDV.cjs → chunk-TED4I5EF.cjs} +5 -5
- package/dist/{chunk-S36CKKDV.cjs.map → chunk-TED4I5EF.cjs.map} +1 -1
- package/dist/{chunk-AYWMAPAX.js → chunk-TTKSVOSS.js} +13 -13
- package/dist/{chunk-AYWMAPAX.js.map → chunk-TTKSVOSS.js.map} +1 -1
- package/dist/{chunk-VLEYEBRE.js → chunk-VRFZFKDM.js} +4 -4
- package/dist/{chunk-VLEYEBRE.js.map → chunk-VRFZFKDM.js.map} +1 -1
- package/dist/{chunk-2DHTL4PW.cjs → chunk-XZLIDJKA.cjs} +4 -4
- package/dist/{chunk-2DHTL4PW.cjs.map → chunk-XZLIDJKA.cjs.map} +1 -1
- package/dist/{chunk-CJD3DW4J.js → chunk-Y6NHIZ2M.js} +1 -1
- package/dist/chunk-Y6NHIZ2M.js.map +1 -0
- package/dist/hooks/index.cjs +4 -4
- package/dist/hooks/index.js +3 -3
- package/dist/hooks/useInputValueDebounce/index.cjs +3 -3
- package/dist/hooks/useInputValueDebounce/index.js +2 -2
- package/dist/hooks/useInputValueTransform/index.cjs +2 -2
- package/dist/hooks/useInputValueTransform/index.js +1 -1
- package/dist/index.cjs +15 -15
- package/dist/index.js +14 -14
- package/package.json +4 -4
- package/dist/chunk-CJD3DW4J.js.map +0 -1
- package/dist/chunk-DYTE5N3B.cjs.map +0 -1
- package/dist/chunk-GST3AQOR.js.map +0 -1
- package/dist/chunk-P6HJOG7D.cjs.map +0 -1
- /package/dist/{chunk-D2HI4KE4.js.map → chunk-2A74CSGX.js.map} +0 -0
- /package/dist/{chunk-LLQLEDOO.js.map → chunk-3MXAIQKI.js.map} +0 -0
- /package/dist/{chunk-6IU7IYYB.js.map → chunk-MODD3TFE.js.map} +0 -0
- /package/dist/{chunk-3Q3IUEGL.js.map → chunk-SUO4QK32.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-ZLQCMOVU.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-ZLQCMOVU.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 'text-foreground group-data-[invalid=true]:text-danger mb-2 inline-flex text-sm subpixel-antialiased',\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 showInvalidWhen: 'immediate',\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 border-default hover:bg-content2 data-[selected=true]:border-focus inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 p-4',\n {\n // disabled styles\n 'opacity-disabled pointer-events-none': 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-small text-foreground opacity-70\">\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"]}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-RNBJT4Y7.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-RNBJT4Y7.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 showInvalidWhen: 'immediate',\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"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkO3DDOJTBcjs = require('./chunk-O3DDOJTB.cjs');
|
|
5
5
|
|
|
6
6
|
// src/Form/Form.tsx
|
|
7
7
|
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
@@ -22,7 +22,7 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
22
22
|
setDebugMode,
|
|
23
23
|
validation: { errors },
|
|
24
24
|
watch
|
|
25
|
-
} =
|
|
25
|
+
} = _chunkO3DDOJTBcjs.useFormContext.call(void 0, );
|
|
26
26
|
const showDebugButton = debugMode === "off";
|
|
27
27
|
const showDebugCard = debugMode === "debug" || debugMode === "debug-testids";
|
|
28
28
|
const showDebugTestIds = debugMode === "debug-testids";
|
|
@@ -32,7 +32,7 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
32
32
|
_Button.Button,
|
|
33
33
|
{
|
|
34
34
|
ariaLabel: "Enable form debug mode",
|
|
35
|
-
className: "
|
|
35
|
+
className: "fixed bottom-2.5 right-2.5 w-5 text-default-400",
|
|
36
36
|
icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa6.FaBug, {}),
|
|
37
37
|
variant: "light",
|
|
38
38
|
onClick: () => {
|
|
@@ -67,7 +67,7 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
67
67
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
68
68
|
_Button.Button,
|
|
69
69
|
{
|
|
70
|
-
className: "
|
|
70
|
+
className: "mb-4 ml-auto mr-auto",
|
|
71
71
|
icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa6.FaBullseye, {}),
|
|
72
72
|
variant: showDebugTestIds ? "solid" : "light",
|
|
73
73
|
onClick: () => {
|
|
@@ -112,7 +112,7 @@ var Form = ({
|
|
|
112
112
|
validationTrigger = "all"
|
|
113
113
|
}) => {
|
|
114
114
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
115
|
-
|
|
115
|
+
_chunkO3DDOJTBcjs.FormContext_default,
|
|
116
116
|
{
|
|
117
117
|
debugModeSettings: debug,
|
|
118
118
|
initialValues,
|
|
@@ -148,4 +148,4 @@ var Form_default2 = Form_default;
|
|
|
148
148
|
|
|
149
149
|
|
|
150
150
|
exports.Form_default = Form_default; exports.Form_default2 = Form_default2;
|
|
151
|
-
//# sourceMappingURL=chunk-
|
|
151
|
+
//# sourceMappingURL=chunk-SU5WXAC7.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-SU5WXAC7.cjs","../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"names":["jsx","jsxs","cn","Form_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-SU5WXAC7.cjs","sourcesContent":[null,"import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n /** form children */\n children: ReactNode | ReactNode[];\n /** CSS class name */\n className?: string | string[];\n /** settings for from debug mode */\n debug?: DebugModeSettings;\n /** initial form values */\n initialValues?: FieldValues;\n /** name of the form */\n name?: string;\n /** form submit handler */\n onSubmit: SubmitHandler<FieldValues>;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** veto validation schema */\n validation?: VetoInstance;\n /** when the validation should be triggered */\n validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n children,\n className = undefined,\n debug = undefined,\n initialValues = undefined,\n name = undefined,\n onSubmit,\n testId = undefined,\n validation = undefined,\n validationTrigger = 'all',\n}: FormProps) => {\n return (\n <FormProvider\n debugModeSettings={debug}\n initialValues={initialValues}\n onSubmit={onSubmit}\n validation={validation}\n validationTrigger={validationTrigger}\n >\n {({ handleSubmit, isValid }) => {\n return (\n <div className=\"flex w-full flex-row justify-between gap-6\">\n <form\n className={cn('grow', className)}\n data-form-is-valid={isValid}\n data-testid={slugify(testId ?? name ?? '')}\n name={name}\n onSubmit={handleSubmit}\n >\n {children}\n </form>\n {/* render debug viewer when not in test environment and debug not disabled */}\n {!IS_TEST && !debug?.disable && (\n <FormDebugViewer className=\"w-96 shrink\" />\n )}\n </div>\n );\n }}\n </FormProvider>\n );\n};\n\nexport default Form;\n","import { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n /** CSS class name */\n className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n const {\n debugMode,\n formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },\n setDebugMode,\n validation: { errors },\n watch,\n } = useFormContext();\n\n const showDebugButton = debugMode === 'off';\n const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n const showDebugTestIds = debugMode === 'debug-testids';\n\n // TODO: maybe use new Watch component?\n // see: https://github.com/react-hook-form/react-hook-form/pull/12986\n const values = watch();\n\n if (showDebugButton) {\n return (\n <Button\n ariaLabel=\"Enable form debug mode\"\n className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n icon={<FaBug />}\n variant=\"light\"\n onClick={() => {\n setDebugMode('debug');\n }}\n />\n );\n }\n\n // do not show card\n if (!showDebugCard) {\n return null;\n }\n\n return (\n <Card\n className={cn(className)}\n header={\n <div className=\"flex w-full flex-row justify-between\">\n <span className=\"text-lg\">Debug Mode</span>\n <Button\n color=\"danger\"\n icon={<FaTimes />}\n size=\"sm\"\n variant=\"light\"\n onClick={() => {\n setDebugMode('off');\n }}\n />\n </div>\n }\n >\n <Button\n className=\"mb-4 ml-auto mr-auto\"\n icon={<FaBullseye />}\n variant={showDebugTestIds ? 'solid' : 'light'}\n onClick={() => {\n setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n }}\n >\n {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n </Button>\n <Json\n value={{\n values,\n errors: errors ?? null,\n submit: {\n isValid,\n isSubmitting,\n isSubmitSuccessful,\n submitCount,\n },\n }}\n />\n </Card>\n );\n};\n\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useUniformField
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-Y6NHIZ2M.js";
|
|
4
4
|
import {
|
|
5
5
|
useInputValueDebounce
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-MODD3TFE.js";
|
|
7
7
|
import {
|
|
8
8
|
__objRest,
|
|
9
9
|
__spreadValues
|
|
@@ -128,4 +128,4 @@ export {
|
|
|
128
128
|
Input_default,
|
|
129
129
|
Input_default2
|
|
130
130
|
};
|
|
131
|
-
//# sourceMappingURL=chunk-
|
|
131
|
+
//# sourceMappingURL=chunk-SUO4QK32.js.map
|
|
@@ -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 _chunkO3DDOJTBcjs = require('./chunk-O3DDOJTB.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -16,7 +16,7 @@ var radioTabsVariants = _pixelutils.tv.call(void 0, {
|
|
|
16
16
|
base: "group gap-0",
|
|
17
17
|
// Needs group for group-data condition
|
|
18
18
|
cursor: "",
|
|
19
|
-
label: "text-foreground group-data-[invalid=true]:text-danger
|
|
19
|
+
label: "mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger",
|
|
20
20
|
tab: "",
|
|
21
21
|
tabBase: "",
|
|
22
22
|
tabContent: "",
|
|
@@ -32,7 +32,7 @@ var radioTabsVariants = _pixelutils.tv.call(void 0, {
|
|
|
32
32
|
tabBase: "p-1 pb-0",
|
|
33
33
|
tabWrapper: [
|
|
34
34
|
// border style
|
|
35
|
-
"
|
|
35
|
+
"rounded-medium border border-divider",
|
|
36
36
|
// full width
|
|
37
37
|
"w-full"
|
|
38
38
|
]
|
|
@@ -69,7 +69,7 @@ var RadioTabs = (_a) => {
|
|
|
69
69
|
label,
|
|
70
70
|
required,
|
|
71
71
|
testId
|
|
72
|
-
} =
|
|
72
|
+
} = _chunkO3DDOJTBcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
|
|
73
73
|
name,
|
|
74
74
|
showInvalidWhen: "immediate"
|
|
75
75
|
}, uniformFieldProps));
|
|
@@ -145,4 +145,4 @@ var RadioTabs_default2 = RadioTabs_default;
|
|
|
145
145
|
|
|
146
146
|
|
|
147
147
|
exports.RadioTabs_default = RadioTabs_default; exports.RadioTabs_default2 = RadioTabs_default2;
|
|
148
|
-
//# sourceMappingURL=chunk-
|
|
148
|
+
//# sourceMappingURL=chunk-TED4I5EF.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-TED4I5EF.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-TED4I5EF.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 showInvalidWhen: 'immediate',\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-Y6NHIZ2M.js";
|
|
4
4
|
import {
|
|
5
5
|
__objRest,
|
|
6
6
|
__spreadProps,
|
|
@@ -16,36 +16,36 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
16
16
|
var selectVariants = tv({
|
|
17
17
|
slots: {
|
|
18
18
|
base: "group leading-normal",
|
|
19
|
-
clearIndicator: "text-foreground-500 hover:bg-default-200 hover:text-foreground-800
|
|
20
|
-
control: "border-default-200 bg-content1 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger
|
|
19
|
+
clearIndicator: "rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800",
|
|
20
|
+
control: "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",
|
|
21
21
|
control_focused: "border-focus",
|
|
22
22
|
crossIcon: "",
|
|
23
23
|
downChevron: "",
|
|
24
|
-
dropdownIndicator: "text-foreground-500 hover:bg-default-200
|
|
24
|
+
dropdownIndicator: "rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black",
|
|
25
25
|
group: "",
|
|
26
|
-
groupHeading: "
|
|
26
|
+
groupHeading: "mb-1 ml-3 mt-2 text-sm text-foreground-500",
|
|
27
27
|
indicatorsContainer: "gap-1 p-1",
|
|
28
28
|
indicatorSeparator: "bg-default-300",
|
|
29
29
|
input: "py-0.5 pl-1",
|
|
30
30
|
// see HeroUI styles for group-data condition,
|
|
31
31
|
// e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
|
|
32
|
-
label: 'text-small group-data-[invalid=true]:!text-danger group-data-[required=true]:after:
|
|
32
|
+
label: '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-["*"]',
|
|
33
33
|
loadingIndicator: "",
|
|
34
|
-
loadingMessage: "
|
|
35
|
-
menu: "border-default-200 bg-content1
|
|
34
|
+
loadingMessage: "rounded-sm p-2 text-foreground-500",
|
|
35
|
+
menu: "mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg",
|
|
36
36
|
menuList: "",
|
|
37
37
|
// ensure menu has same z-index as modal so it is visible when rendered in modal
|
|
38
38
|
// see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)
|
|
39
39
|
menuPortal: "z-50!",
|
|
40
|
-
multiValue: "
|
|
40
|
+
multiValue: "items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1",
|
|
41
41
|
multiValueContainer: "",
|
|
42
42
|
multiValueLabel: "py-0.5 leading-6",
|
|
43
|
-
multiValueRemove: "text-default-500 hover:border-default-300 hover:text-default-800
|
|
44
|
-
noOptionsMessage: "
|
|
43
|
+
multiValueRemove: "rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800",
|
|
44
|
+
noOptionsMessage: "rounded-sm p-2 text-foreground-500",
|
|
45
45
|
option_focused: "bg-default-100 active:bg-default-200",
|
|
46
46
|
option_selected: "bg-default-300",
|
|
47
47
|
option: "rounded px-3 py-2 hover:cursor-pointer",
|
|
48
|
-
placeholder: "
|
|
48
|
+
placeholder: "ml-1 py-0.5 pl-1 text-sm text-foreground-500",
|
|
49
49
|
selectContainer: "",
|
|
50
50
|
singleValue: "ml-1! leading-7!",
|
|
51
51
|
valueContainer: "gap-1 p-1"
|
|
@@ -277,4 +277,4 @@ export {
|
|
|
277
277
|
Select_default,
|
|
278
278
|
Select_default2
|
|
279
279
|
};
|
|
280
|
-
//# sourceMappingURL=chunk-
|
|
280
|
+
//# sourceMappingURL=chunk-TTKSVOSS.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Select/Select.tsx","../src/Select/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { Props } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\n\nexport const selectVariants = tv({\n slots: {\n base: 'group leading-normal',\n clearIndicator:\n 'text-foreground-500 hover:bg-default-200 hover:text-foreground-800 rounded-md p-1 hover:cursor-pointer',\n control:\n 'border-default-200 bg-content1 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger rounded-lg border-2 duration-150! motion-reduce:transition-none',\n control_focused: 'border-focus',\n crossIcon: '',\n downChevron: '',\n dropdownIndicator:\n 'text-foreground-500 hover:bg-default-200 rounded-md p-1 hover:cursor-pointer hover:text-black',\n group: '',\n groupHeading: 'text-foreground-500 mt-2 mb-1 ml-3 text-sm',\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 'text-small group-data-[invalid=true]:!text-danger group-data-[required=true]:after:text-danger pointer-events-auto relative bottom-1.5 ml-1 subpixel-antialiased group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:content-[\"*\"]',\n loadingIndicator: '',\n loadingMessage: 'text-foreground-500 rounded-sm p-2',\n menu: 'border-default-200 bg-content1 mt-2 rounded-xl border 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: 'bg-default-100 items-center gap-1.5 rounded py-0.5 pr-1 pl-2',\n multiValueContainer: '',\n multiValueLabel: 'py-0.5 leading-6',\n multiValueRemove:\n 'text-default-500 hover:border-default-300 hover:text-default-800 rounded hover:cursor-pointer',\n noOptionsMessage: 'text-foreground-500 rounded-sm p-2',\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: 'text-foreground-500 ml-1 py-0.5 pl-1 text-sm',\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({ name, ...uniformFieldProps });\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"],"mappings":"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","names":["_a","Select_default"]}
|
|
1
|
+
{"version":3,"sources":["../src/Select/Select.tsx","../src/Select/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { Props } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { 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({ name, ...uniformFieldProps });\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"],"mappings":"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","names":["_a","Select_default"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useUniformField
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-Y6NHIZ2M.js";
|
|
4
4
|
import {
|
|
5
5
|
FieldValidationError_default
|
|
6
6
|
} from "./chunk-ELYGQTXB.js";
|
|
@@ -25,11 +25,11 @@ var checkboxesVariants = tv({
|
|
|
25
25
|
errorMessage: "text-tiny",
|
|
26
26
|
// see HeroUI styles for group-data condition,
|
|
27
27
|
// e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
|
|
28
|
-
label: "text-foreground group-data-[invalid=true]:!text-danger
|
|
28
|
+
label: "inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:!text-danger",
|
|
29
29
|
optionBase: "",
|
|
30
30
|
optionIcon: "",
|
|
31
31
|
optionLabel: "",
|
|
32
|
-
optionLabelSubline: "
|
|
32
|
+
optionLabelSubline: "text-foreground-400 !text-small",
|
|
33
33
|
optionWrapper: "",
|
|
34
34
|
wrapper: ""
|
|
35
35
|
},
|
|
@@ -179,4 +179,4 @@ export {
|
|
|
179
179
|
Checkboxes_default,
|
|
180
180
|
Checkboxes_default2
|
|
181
181
|
};
|
|
182
|
-
//# sourceMappingURL=chunk-
|
|
182
|
+
//# sourceMappingURL=chunk-VRFZFKDM.js.map
|
|
@@ -1 +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 'text-foreground group-data-[invalid=true]:!text-danger inline-flex text-sm subpixel-antialiased',\n optionBase: '',\n optionIcon: '',\n optionLabel: '',\n optionLabelSubline: '!text-small text-foreground-400',\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 showInvalidWhen: 'immediate',\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":"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","names":["_a","Checkboxes_default"]}
|
|
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 showInvalidWhen: 'immediate',\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":"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","names":["_a","Checkboxes_default"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkO3DDOJTBcjs = require('./chunk-O3DDOJTB.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -24,7 +24,7 @@ var radiosVariants = _pixelutils.tv.call(void 0, {
|
|
|
24
24
|
itemLabelWrapper: "",
|
|
25
25
|
itemWrapper: 'group-data-[invalid=true]:border-danger! [&:not(group-data-[invalid="true"]):not(group-data-[selected="false"])]:border-focus',
|
|
26
26
|
// e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
|
|
27
|
-
label: "text-foreground group-data-[invalid=true]:text-danger
|
|
27
|
+
label: "mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger",
|
|
28
28
|
wrapper: ""
|
|
29
29
|
}
|
|
30
30
|
});
|
|
@@ -49,7 +49,7 @@ var Radios = (_a) => {
|
|
|
49
49
|
required,
|
|
50
50
|
defaultValue,
|
|
51
51
|
testId
|
|
52
|
-
} =
|
|
52
|
+
} = _chunkO3DDOJTBcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
|
|
53
53
|
name,
|
|
54
54
|
showInvalidWhen: "immediate"
|
|
55
55
|
}, uniformFieldProps));
|
|
@@ -114,4 +114,4 @@ var Radios_default2 = Radios_default;
|
|
|
114
114
|
|
|
115
115
|
|
|
116
116
|
exports.Radios_default = Radios_default; exports.Radios_default2 = Radios_default2;
|
|
117
|
-
//# sourceMappingURL=chunk-
|
|
117
|
+
//# sourceMappingURL=chunk-XZLIDJKA.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-XZLIDJKA.cjs","../src/Radios/Radios.tsx","../src/Radios/index.ts"],"names":["_a","_b","Radios_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-XZLIDJKA.cjs","sourcesContent":[null,"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 showInvalidWhen: 'immediate',\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"]}
|