@fuf-stack/uniform 0.16.10 → 0.16.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CheckboxGroup/index.d.cts +2 -2
- package/dist/CheckboxGroup/index.d.ts +2 -2
- package/dist/RadioBoxes/index.cjs +15 -0
- package/dist/RadioBoxes/index.cjs.map +1 -0
- package/dist/RadioBoxes/index.d.cts +10 -0
- package/dist/RadioBoxes/index.d.ts +10 -0
- package/dist/RadioBoxes/index.js +15 -0
- package/dist/RadioBoxes/index.js.map +1 -0
- package/dist/RadioBoxes-C61IRDCU.d.cts +144 -0
- package/dist/RadioBoxes-C61IRDCU.d.ts +144 -0
- package/dist/RadioGroup/index.cjs +2 -2
- package/dist/RadioGroup/index.d.cts +2 -3
- package/dist/RadioGroup/index.d.ts +2 -3
- package/dist/RadioGroup/index.js +1 -1
- package/dist/{RadioGroup-Kmz3UY4g.d.cts → RadioGroup-Bu1tlWSX.d.cts} +8 -67
- package/dist/{RadioGroup-Kmz3UY4g.d.ts → RadioGroup-Bu1tlWSX.d.ts} +8 -67
- package/dist/RadioTabs/index.cjs +15 -0
- package/dist/RadioTabs/index.cjs.map +1 -0
- package/dist/RadioTabs/index.d.cts +12 -0
- package/dist/RadioTabs/index.d.ts +12 -0
- package/dist/RadioTabs/index.js +15 -0
- package/dist/RadioTabs/index.js.map +1 -0
- package/dist/RadioTabs-2kYDEVCo.d.cts +129 -0
- package/dist/RadioTabs-2kYDEVCo.d.ts +129 -0
- package/dist/Select/index.d.cts +2 -2
- package/dist/Select/index.d.ts +2 -2
- package/dist/Switch/index.d.cts +2 -2
- package/dist/Switch/index.d.ts +2 -2
- package/dist/{chunk-AINICJHT.cjs → chunk-CTNGD5ZB.cjs} +37 -140
- package/dist/chunk-CTNGD5ZB.cjs.map +1 -0
- package/dist/{chunk-XUXFZVOW.js → chunk-KKWLPRW3.js} +44 -147
- package/dist/chunk-KKWLPRW3.js.map +1 -0
- package/dist/chunk-MCQX3UZP.js +105 -0
- package/dist/chunk-MCQX3UZP.js.map +1 -0
- package/dist/chunk-PWTQZCI6.js +121 -0
- package/dist/chunk-PWTQZCI6.js.map +1 -0
- package/dist/chunk-TY4YVLKV.cjs +105 -0
- package/dist/chunk-TY4YVLKV.cjs.map +1 -0
- package/dist/chunk-WLIVQDPW.cjs +121 -0
- package/dist/chunk-WLIVQDPW.cjs.map +1 -0
- package/dist/index.cjs +10 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +7 -5
- package/dist/index.d.ts +7 -5
- package/dist/index.js +10 -2
- package/package.json +17 -7
- package/dist/chunk-AINICJHT.cjs.map +0 -1
- package/dist/chunk-XUXFZVOW.js.map +0 -1
- package/dist/{CheckboxGroup-Vb8_kKyX.d.cts → CheckboxGroup-fAdey3Td.d.cts} +5 -5
- package/dist/{CheckboxGroup-Vb8_kKyX.d.ts → CheckboxGroup-fAdey3Td.d.ts} +5 -5
- package/dist/{Select-D2Tn4xBh.d.cts → Select-JRwrSDew.d.cts} +15 -15
- package/dist/{Select-D2Tn4xBh.d.ts → Select-JRwrSDew.d.ts} +15 -15
- package/dist/{Switch-C1H8Kyu7.d.cts → Switch-CLs964dL.d.cts} +5 -5
- package/dist/{Switch-C1H8Kyu7.d.ts → Switch-CLs964dL.d.ts} +5 -5
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
var _chunkEPYFZXEIcjs = require('./chunk-EPYFZXEI.cjs');
|
|
4
4
|
|
|
@@ -16,13 +16,11 @@ var _chunkIUVEFLF3cjs = require('./chunk-IUVEFLF3.cjs');
|
|
|
16
16
|
|
|
17
17
|
var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
|
|
18
18
|
|
|
19
|
-
// src/
|
|
19
|
+
// src/RadioBoxes/RadioBoxes.tsx
|
|
20
20
|
var _radio = require('@heroui/radio');
|
|
21
21
|
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
22
|
-
var _ButtonGroup = require('@fuf-stack/pixels/ButtonGroup'); var _ButtonGroup2 = _interopRequireDefault(_ButtonGroup);
|
|
23
|
-
var _Tabs = require('@fuf-stack/pixels/Tabs'); var _Tabs2 = _interopRequireDefault(_Tabs);
|
|
24
22
|
|
|
25
|
-
// src/
|
|
23
|
+
// src/RadioBoxes/RadioBox.tsx
|
|
26
24
|
|
|
27
25
|
var _visuallyhidden = require('@react-aria/visually-hidden');
|
|
28
26
|
|
|
@@ -70,44 +68,13 @@ var RadioBox = (_a) => {
|
|
|
70
68
|
);
|
|
71
69
|
};
|
|
72
70
|
|
|
73
|
-
// src/
|
|
71
|
+
// src/RadioBoxes/RadioBoxes.tsx
|
|
74
72
|
|
|
75
|
-
var
|
|
76
|
-
|
|
77
|
-
var RadioButton = ({
|
|
78
|
-
children,
|
|
79
|
-
className = void 0,
|
|
80
|
-
isDisabled = false,
|
|
81
|
-
onChange,
|
|
82
|
-
testID = void 0,
|
|
83
|
-
value
|
|
84
|
-
}) => {
|
|
85
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
86
|
-
_pixels.Button,
|
|
87
|
-
{
|
|
88
|
-
className: _pixelutils.cn.call(void 0, className),
|
|
89
|
-
testId: testID,
|
|
90
|
-
disabled: isDisabled,
|
|
91
|
-
onClick: () => {
|
|
92
|
-
return onChange(value);
|
|
93
|
-
},
|
|
94
|
-
children
|
|
95
|
-
},
|
|
96
|
-
`index_${value}`
|
|
97
|
-
);
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
// src/RadioGroup/RadioGroup.tsx
|
|
101
|
-
|
|
102
|
-
var radioGroupVariants = _pixelutils.tv.call(void 0, {
|
|
73
|
+
var radioBoxesVariants = _pixelutils.tv.call(void 0, {
|
|
103
74
|
slots: {
|
|
104
75
|
base: "group",
|
|
105
76
|
// Needs group for group-data condition
|
|
106
|
-
buttonGroup: "rounded-xl group-data-[invalid=true]:border group-data-[invalid=true]:border-danger",
|
|
107
|
-
// optional if a button group is used
|
|
108
77
|
itemBase: "",
|
|
109
|
-
itemBaseActive: "bg-opacity-50",
|
|
110
|
-
// optional if a button group is used
|
|
111
78
|
itemControl: "bg-focus group-data-[invalid=true]:bg-danger",
|
|
112
79
|
itemDescription: "",
|
|
113
80
|
itemLabel: "text-sm",
|
|
@@ -117,30 +84,23 @@ var radioGroupVariants = _pixelutils.tv.call(void 0, {
|
|
|
117
84
|
// see HeroUI styles for group-data condition,
|
|
118
85
|
// e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
|
|
119
86
|
label: "text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger",
|
|
120
|
-
wrapper: ""
|
|
121
|
-
// Tabs
|
|
122
|
-
tabList: "",
|
|
123
|
-
tab: "",
|
|
124
|
-
tabContent: "",
|
|
125
|
-
cursor: "",
|
|
126
|
-
panel: ""
|
|
87
|
+
wrapper: ""
|
|
127
88
|
}
|
|
128
89
|
});
|
|
129
|
-
var
|
|
90
|
+
var RadioBoxes = ({
|
|
130
91
|
className = void 0,
|
|
131
92
|
disabled = false,
|
|
132
93
|
inline = false,
|
|
133
94
|
label = void 0,
|
|
134
95
|
name,
|
|
135
96
|
options,
|
|
136
|
-
testId: _testId = void 0
|
|
137
|
-
variant = "default"
|
|
97
|
+
testId: _testId = void 0
|
|
138
98
|
}) => {
|
|
139
99
|
const { control, debugMode, getFieldState, getValues } = _chunkIUVEFLF3cjs.useFormContext.call(void 0, );
|
|
140
100
|
const { error, invalid, required, testId } = getFieldState(name, _testId);
|
|
141
101
|
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
142
102
|
const showLabel = label || showTestIdCopyButton;
|
|
143
|
-
const variants =
|
|
103
|
+
const variants = radioBoxesVariants();
|
|
144
104
|
const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
|
|
145
105
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
146
106
|
_chunkEPYFZXEIcjs.Controller_default,
|
|
@@ -149,98 +109,14 @@ var RadioGroup = ({
|
|
|
149
109
|
disabled,
|
|
150
110
|
name,
|
|
151
111
|
render: ({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {
|
|
152
|
-
let RadioComponents;
|
|
153
112
|
const itemClassNames = {
|
|
154
113
|
base: classNames.itemBase,
|
|
155
114
|
control: classNames.itemControl,
|
|
156
115
|
description: classNames.itemDescription,
|
|
157
116
|
label: classNames.itemLabel,
|
|
158
117
|
labelWrapper: classNames.itemLabelWrapper,
|
|
159
|
-
wrapper: classNames.itemWrapper
|
|
160
|
-
tabList: classNames.tabList,
|
|
161
|
-
tab: classNames.tab,
|
|
162
|
-
tabContent: classNames.tabContent,
|
|
163
|
-
cursor: classNames.cursor,
|
|
164
|
-
panel: classNames.panel
|
|
118
|
+
wrapper: classNames.itemWrapper
|
|
165
119
|
};
|
|
166
|
-
switch (variant) {
|
|
167
|
-
case "radioBox":
|
|
168
|
-
RadioComponents = options.map((option) => {
|
|
169
|
-
if ("value" in option) {
|
|
170
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
171
|
-
RadioBox,
|
|
172
|
-
{
|
|
173
|
-
classNames: itemClassNames,
|
|
174
|
-
"data-testid": _pixelutils.slugify.call(void 0,
|
|
175
|
-
`${testId}_option_${option.testId || option.value}`
|
|
176
|
-
),
|
|
177
|
-
description: option.description,
|
|
178
|
-
icon: option.icon,
|
|
179
|
-
isDisabled: isDisabled || option.disabled,
|
|
180
|
-
onChange,
|
|
181
|
-
value: option.value,
|
|
182
|
-
children: option.label ? option.label : option.value
|
|
183
|
-
},
|
|
184
|
-
option.value
|
|
185
|
-
);
|
|
186
|
-
}
|
|
187
|
-
return null;
|
|
188
|
-
});
|
|
189
|
-
break;
|
|
190
|
-
case "radioButton":
|
|
191
|
-
RadioComponents = options.map((option) => {
|
|
192
|
-
if ("value" in option) {
|
|
193
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
194
|
-
RadioButton,
|
|
195
|
-
{
|
|
196
|
-
className: _pixelutils.cn.call(void 0, classNames.itemBase, {
|
|
197
|
-
[classNames.itemBaseActive]: getValues()[name] !== option.value
|
|
198
|
-
}),
|
|
199
|
-
isDisabled: isDisabled || option.disabled,
|
|
200
|
-
testID: _pixelutils.slugify.call(void 0,
|
|
201
|
-
`${testId}_option_${option.testId || option.value}`
|
|
202
|
-
),
|
|
203
|
-
onChange,
|
|
204
|
-
value: option.value,
|
|
205
|
-
children: option.label ? option.label : option.value
|
|
206
|
-
},
|
|
207
|
-
option.value
|
|
208
|
-
);
|
|
209
|
-
}
|
|
210
|
-
return null;
|
|
211
|
-
});
|
|
212
|
-
break;
|
|
213
|
-
case "tabs":
|
|
214
|
-
RadioComponents = /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
215
|
-
_Tabs2.default,
|
|
216
|
-
{
|
|
217
|
-
fullWidth: false,
|
|
218
|
-
tabs: options,
|
|
219
|
-
onSelectionChange: onChange
|
|
220
|
-
}
|
|
221
|
-
);
|
|
222
|
-
break;
|
|
223
|
-
default:
|
|
224
|
-
RadioComponents = options.map((option) => {
|
|
225
|
-
if ("value" in option) {
|
|
226
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
227
|
-
_radio.Radio,
|
|
228
|
-
{
|
|
229
|
-
classNames: itemClassNames,
|
|
230
|
-
"data-testid": _pixelutils.slugify.call(void 0,
|
|
231
|
-
`${testId}_option_${option.testId || option.value}`
|
|
232
|
-
),
|
|
233
|
-
isDisabled: isDisabled || option.disabled,
|
|
234
|
-
onChange,
|
|
235
|
-
value: option.value,
|
|
236
|
-
children: option.label ? option.label : option.value
|
|
237
|
-
},
|
|
238
|
-
option.value
|
|
239
|
-
);
|
|
240
|
-
}
|
|
241
|
-
return null;
|
|
242
|
-
});
|
|
243
|
-
}
|
|
244
120
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
245
121
|
_radio.RadioGroup,
|
|
246
122
|
{
|
|
@@ -248,6 +124,7 @@ var RadioGroup = ({
|
|
|
248
124
|
"data-invalid": invalid,
|
|
249
125
|
"data-required": required,
|
|
250
126
|
"data-testid": testId,
|
|
127
|
+
defaultValue: getValues()[name],
|
|
251
128
|
errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOE5IW4ZGcjs.FieldValidationError_default, { error }),
|
|
252
129
|
isDisabled,
|
|
253
130
|
isInvalid: invalid,
|
|
@@ -262,20 +139,40 @@ var RadioGroup = ({
|
|
|
262
139
|
onBlur,
|
|
263
140
|
onChange,
|
|
264
141
|
ref,
|
|
265
|
-
children:
|
|
142
|
+
children: options.map((option) => {
|
|
143
|
+
if ("value" in option) {
|
|
144
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
145
|
+
RadioBox,
|
|
146
|
+
{
|
|
147
|
+
classNames: itemClassNames,
|
|
148
|
+
"data-testid": _pixelutils.slugify.call(void 0,
|
|
149
|
+
`${testId}_option_${option.testId || option.value}`
|
|
150
|
+
),
|
|
151
|
+
description: option.description,
|
|
152
|
+
icon: option.icon,
|
|
153
|
+
isDisabled: isDisabled || option.disabled,
|
|
154
|
+
onChange,
|
|
155
|
+
value: option.value,
|
|
156
|
+
children: option.label ? option.label : option.value
|
|
157
|
+
},
|
|
158
|
+
option.value
|
|
159
|
+
);
|
|
160
|
+
}
|
|
161
|
+
return null;
|
|
162
|
+
})
|
|
266
163
|
}
|
|
267
164
|
);
|
|
268
165
|
}
|
|
269
166
|
}
|
|
270
167
|
);
|
|
271
168
|
};
|
|
272
|
-
var
|
|
169
|
+
var RadioBoxes_default = RadioBoxes;
|
|
273
170
|
|
|
274
|
-
// src/
|
|
275
|
-
var
|
|
171
|
+
// src/RadioBoxes/index.ts
|
|
172
|
+
var RadioBoxes_default2 = RadioBoxes_default;
|
|
276
173
|
|
|
277
174
|
|
|
278
175
|
|
|
279
176
|
|
|
280
|
-
exports.
|
|
281
|
-
//# sourceMappingURL=chunk-
|
|
177
|
+
exports.RadioBoxes_default = RadioBoxes_default; exports.RadioBoxes_default2 = RadioBoxes_default2;
|
|
178
|
+
//# sourceMappingURL=chunk-CTNGD5ZB.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-CTNGD5ZB.cjs","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/index.ts"],"names":["jsx","jsxs","RadioBoxes_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-CTNGD5ZB.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n slots: {\n base: 'group', // Needs group for group-data condition\n itemBase: '',\n itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n itemDescription: '',\n itemLabel: 'text-sm',\n itemLabelWrapper: '',\n itemWrapper:\n 'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\n // see HeroUI styles for group-data condition,\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n /** Description of the value. Works with variant radioBox. */\n description?: ReactNode;\n /** disables the option */\n disabled?: boolean;\n /** option label */\n label?: ReactNode;\n /** option icon */\n icon?: ReactNode;\n /** HTML data-testid attribute of the option */\n testId?: string;\n /** option value */\n value: string;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** determines orientation of the Buttons. */\n inline?: boolean;\n /** Label displayed next to the RadioButton. */\n label?: ReactNode;\n /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n name: string;\n /** Radio button configuration. */\n options: RadioBoxesOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n className = undefined,\n disabled = false,\n inline = false,\n label = undefined,\n name,\n options,\n testId: _testId = undefined,\n}: RadioBoxesProps): ReactElement => {\n const { control, debugMode, getFieldState, getValues } = useFormContext();\n\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n const variants = radioBoxesVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <Controller\n control={control}\n disabled={disabled}\n name={name}\n render={({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {\n const itemClassNames = {\n base: classNames.itemBase,\n control: classNames.itemControl,\n description: classNames.itemDescription,\n label: classNames.itemLabel,\n labelWrapper: classNames.itemLabelWrapper,\n wrapper: classNames.itemWrapper,\n };\n\n return (\n <HeroRadioGroup\n classNames={classNames}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n defaultValue={getValues()[name]}\n errorMessage={error && <FieldValidationError error={error} />}\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label>\n {label}\n {showTestIdCopyButton && (\n <FieldCopyTestIdButton testId={testId} />\n )}\n </label>\n )\n }\n name={name}\n orientation={inline ? 'horizontal' : 'vertical'}\n onBlur={onBlur}\n onChange={onChange}\n ref={ref}\n >\n {options.map((option) => {\n if ('value' in option) {\n return (\n <RadioBox\n classNames={itemClassNames}\n data-testid={slugify(\n `${testId}_option_${option.testId || option.value}`,\n )}\n description={option.description}\n icon={option.icon}\n isDisabled={isDisabled || option.disabled}\n key={option.value}\n onChange={onChange}\n value={option.value}\n >\n {option.label ? option.label : option.value}\n </RadioBox>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n }}\n />\n );\n};\n\nexport default RadioBoxes;\n","import type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends HeroRadioProps {\n /** icon for the option */\n icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\n const {\n children,\n Component,\n description,\n getBaseProps,\n getControlProps,\n getInputProps,\n getLabelProps,\n getLabelWrapperProps,\n getWrapperProps,\n isDisabled,\n } = useRadio(props);\n\n return (\n <Component\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getBaseProps()}\n className={cn(\n 'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n {\n // disabled styles\n 'pointer-events-none opacity-disabled': isDisabled,\n },\n )}\n >\n <VisuallyHidden>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <input {...getInputProps()} />\n </VisuallyHidden>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <span {...getWrapperProps()}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <span {...getControlProps()} />\n </span>\n {icon}\n <div\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getLabelWrapperProps()}\n className={cn(getLabelWrapperProps().className, 'grow')}\n >\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n {children && <span {...getLabelProps()}>{children}</span>}\n {description && (\n <span className=\"text-small text-foreground opacity-70\">\n {description}\n </span>\n )}\n </div>\n </Component>\n );\n};\n\nexport default RadioBox;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"]}
|
|
@@ -16,13 +16,11 @@ import {
|
|
|
16
16
|
__spreadValues
|
|
17
17
|
} from "./chunk-CRTRMMJ7.js";
|
|
18
18
|
|
|
19
|
-
// src/
|
|
20
|
-
import { RadioGroup as HeroRadioGroup
|
|
21
|
-
import {
|
|
22
|
-
import ButtonGroup from "@fuf-stack/pixels/ButtonGroup";
|
|
23
|
-
import Tabs from "@fuf-stack/pixels/Tabs";
|
|
19
|
+
// src/RadioBoxes/RadioBoxes.tsx
|
|
20
|
+
import { RadioGroup as HeroRadioGroup } from "@heroui/radio";
|
|
21
|
+
import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
|
|
24
22
|
|
|
25
|
-
// src/
|
|
23
|
+
// src/RadioBoxes/RadioBox.tsx
|
|
26
24
|
import { useRadio } from "@heroui/radio";
|
|
27
25
|
import { VisuallyHidden } from "@react-aria/visually-hidden";
|
|
28
26
|
import { cn } from "@fuf-stack/pixel-utils";
|
|
@@ -70,44 +68,13 @@ var RadioBox = (_a) => {
|
|
|
70
68
|
);
|
|
71
69
|
};
|
|
72
70
|
|
|
73
|
-
// src/
|
|
74
|
-
import {
|
|
75
|
-
|
|
76
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
77
|
-
var RadioButton = ({
|
|
78
|
-
children,
|
|
79
|
-
className = void 0,
|
|
80
|
-
isDisabled = false,
|
|
81
|
-
onChange,
|
|
82
|
-
testID = void 0,
|
|
83
|
-
value
|
|
84
|
-
}) => {
|
|
85
|
-
return /* @__PURE__ */ jsx2(
|
|
86
|
-
Button,
|
|
87
|
-
{
|
|
88
|
-
className: cn2(className),
|
|
89
|
-
testId: testID,
|
|
90
|
-
disabled: isDisabled,
|
|
91
|
-
onClick: () => {
|
|
92
|
-
return onChange(value);
|
|
93
|
-
},
|
|
94
|
-
children
|
|
95
|
-
},
|
|
96
|
-
`index_${value}`
|
|
97
|
-
);
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
// src/RadioGroup/RadioGroup.tsx
|
|
101
|
-
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
102
|
-
var radioGroupVariants = tv({
|
|
71
|
+
// src/RadioBoxes/RadioBoxes.tsx
|
|
72
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
73
|
+
var radioBoxesVariants = tv({
|
|
103
74
|
slots: {
|
|
104
75
|
base: "group",
|
|
105
76
|
// Needs group for group-data condition
|
|
106
|
-
buttonGroup: "rounded-xl group-data-[invalid=true]:border group-data-[invalid=true]:border-danger",
|
|
107
|
-
// optional if a button group is used
|
|
108
77
|
itemBase: "",
|
|
109
|
-
itemBaseActive: "bg-opacity-50",
|
|
110
|
-
// optional if a button group is used
|
|
111
78
|
itemControl: "bg-focus group-data-[invalid=true]:bg-danger",
|
|
112
79
|
itemDescription: "",
|
|
113
80
|
itemLabel: "text-sm",
|
|
@@ -117,165 +84,95 @@ var radioGroupVariants = tv({
|
|
|
117
84
|
// see HeroUI styles for group-data condition,
|
|
118
85
|
// e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
|
|
119
86
|
label: "text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger",
|
|
120
|
-
wrapper: ""
|
|
121
|
-
// Tabs
|
|
122
|
-
tabList: "",
|
|
123
|
-
tab: "",
|
|
124
|
-
tabContent: "",
|
|
125
|
-
cursor: "",
|
|
126
|
-
panel: ""
|
|
87
|
+
wrapper: ""
|
|
127
88
|
}
|
|
128
89
|
});
|
|
129
|
-
var
|
|
90
|
+
var RadioBoxes = ({
|
|
130
91
|
className = void 0,
|
|
131
92
|
disabled = false,
|
|
132
93
|
inline = false,
|
|
133
94
|
label = void 0,
|
|
134
95
|
name,
|
|
135
96
|
options,
|
|
136
|
-
testId: _testId = void 0
|
|
137
|
-
variant = "default"
|
|
97
|
+
testId: _testId = void 0
|
|
138
98
|
}) => {
|
|
139
99
|
const { control, debugMode, getFieldState, getValues } = useFormContext();
|
|
140
100
|
const { error, invalid, required, testId } = getFieldState(name, _testId);
|
|
141
101
|
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
142
102
|
const showLabel = label || showTestIdCopyButton;
|
|
143
|
-
const variants =
|
|
103
|
+
const variants = radioBoxesVariants();
|
|
144
104
|
const classNames = variantsToClassNames(variants, className, "base");
|
|
145
|
-
return /* @__PURE__ */
|
|
105
|
+
return /* @__PURE__ */ jsx2(
|
|
146
106
|
Controller_default,
|
|
147
107
|
{
|
|
148
108
|
control,
|
|
149
109
|
disabled,
|
|
150
110
|
name,
|
|
151
111
|
render: ({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {
|
|
152
|
-
let RadioComponents;
|
|
153
112
|
const itemClassNames = {
|
|
154
113
|
base: classNames.itemBase,
|
|
155
114
|
control: classNames.itemControl,
|
|
156
115
|
description: classNames.itemDescription,
|
|
157
116
|
label: classNames.itemLabel,
|
|
158
117
|
labelWrapper: classNames.itemLabelWrapper,
|
|
159
|
-
wrapper: classNames.itemWrapper
|
|
160
|
-
tabList: classNames.tabList,
|
|
161
|
-
tab: classNames.tab,
|
|
162
|
-
tabContent: classNames.tabContent,
|
|
163
|
-
cursor: classNames.cursor,
|
|
164
|
-
panel: classNames.panel
|
|
118
|
+
wrapper: classNames.itemWrapper
|
|
165
119
|
};
|
|
166
|
-
|
|
167
|
-
case "radioBox":
|
|
168
|
-
RadioComponents = options.map((option) => {
|
|
169
|
-
if ("value" in option) {
|
|
170
|
-
return /* @__PURE__ */ jsx3(
|
|
171
|
-
RadioBox,
|
|
172
|
-
{
|
|
173
|
-
classNames: itemClassNames,
|
|
174
|
-
"data-testid": slugify(
|
|
175
|
-
`${testId}_option_${option.testId || option.value}`
|
|
176
|
-
),
|
|
177
|
-
description: option.description,
|
|
178
|
-
icon: option.icon,
|
|
179
|
-
isDisabled: isDisabled || option.disabled,
|
|
180
|
-
onChange,
|
|
181
|
-
value: option.value,
|
|
182
|
-
children: option.label ? option.label : option.value
|
|
183
|
-
},
|
|
184
|
-
option.value
|
|
185
|
-
);
|
|
186
|
-
}
|
|
187
|
-
return null;
|
|
188
|
-
});
|
|
189
|
-
break;
|
|
190
|
-
case "radioButton":
|
|
191
|
-
RadioComponents = options.map((option) => {
|
|
192
|
-
if ("value" in option) {
|
|
193
|
-
return /* @__PURE__ */ jsx3(
|
|
194
|
-
RadioButton,
|
|
195
|
-
{
|
|
196
|
-
className: cn3(classNames.itemBase, {
|
|
197
|
-
[classNames.itemBaseActive]: getValues()[name] !== option.value
|
|
198
|
-
}),
|
|
199
|
-
isDisabled: isDisabled || option.disabled,
|
|
200
|
-
testID: slugify(
|
|
201
|
-
`${testId}_option_${option.testId || option.value}`
|
|
202
|
-
),
|
|
203
|
-
onChange,
|
|
204
|
-
value: option.value,
|
|
205
|
-
children: option.label ? option.label : option.value
|
|
206
|
-
},
|
|
207
|
-
option.value
|
|
208
|
-
);
|
|
209
|
-
}
|
|
210
|
-
return null;
|
|
211
|
-
});
|
|
212
|
-
break;
|
|
213
|
-
case "tabs":
|
|
214
|
-
RadioComponents = /* @__PURE__ */ jsx3(
|
|
215
|
-
Tabs,
|
|
216
|
-
{
|
|
217
|
-
fullWidth: false,
|
|
218
|
-
tabs: options,
|
|
219
|
-
onSelectionChange: onChange
|
|
220
|
-
}
|
|
221
|
-
);
|
|
222
|
-
break;
|
|
223
|
-
default:
|
|
224
|
-
RadioComponents = options.map((option) => {
|
|
225
|
-
if ("value" in option) {
|
|
226
|
-
return /* @__PURE__ */ jsx3(
|
|
227
|
-
Radio,
|
|
228
|
-
{
|
|
229
|
-
classNames: itemClassNames,
|
|
230
|
-
"data-testid": slugify(
|
|
231
|
-
`${testId}_option_${option.testId || option.value}`
|
|
232
|
-
),
|
|
233
|
-
isDisabled: isDisabled || option.disabled,
|
|
234
|
-
onChange,
|
|
235
|
-
value: option.value,
|
|
236
|
-
children: option.label ? option.label : option.value
|
|
237
|
-
},
|
|
238
|
-
option.value
|
|
239
|
-
);
|
|
240
|
-
}
|
|
241
|
-
return null;
|
|
242
|
-
});
|
|
243
|
-
}
|
|
244
|
-
return /* @__PURE__ */ jsx3(
|
|
120
|
+
return /* @__PURE__ */ jsx2(
|
|
245
121
|
HeroRadioGroup,
|
|
246
122
|
{
|
|
247
123
|
classNames,
|
|
248
124
|
"data-invalid": invalid,
|
|
249
125
|
"data-required": required,
|
|
250
126
|
"data-testid": testId,
|
|
251
|
-
|
|
127
|
+
defaultValue: getValues()[name],
|
|
128
|
+
errorMessage: error && /* @__PURE__ */ jsx2(FieldValidationError_default, { error }),
|
|
252
129
|
isDisabled,
|
|
253
130
|
isInvalid: invalid,
|
|
254
131
|
isRequired: required,
|
|
255
132
|
label: showLabel && // eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
256
133
|
/* @__PURE__ */ jsxs2("label", { children: [
|
|
257
134
|
label,
|
|
258
|
-
showTestIdCopyButton && /* @__PURE__ */
|
|
135
|
+
showTestIdCopyButton && /* @__PURE__ */ jsx2(FieldCopyTestIdButton_default, { testId })
|
|
259
136
|
] }),
|
|
260
137
|
name,
|
|
261
138
|
orientation: inline ? "horizontal" : "vertical",
|
|
262
139
|
onBlur,
|
|
263
140
|
onChange,
|
|
264
141
|
ref,
|
|
265
|
-
children:
|
|
142
|
+
children: options.map((option) => {
|
|
143
|
+
if ("value" in option) {
|
|
144
|
+
return /* @__PURE__ */ jsx2(
|
|
145
|
+
RadioBox,
|
|
146
|
+
{
|
|
147
|
+
classNames: itemClassNames,
|
|
148
|
+
"data-testid": slugify(
|
|
149
|
+
`${testId}_option_${option.testId || option.value}`
|
|
150
|
+
),
|
|
151
|
+
description: option.description,
|
|
152
|
+
icon: option.icon,
|
|
153
|
+
isDisabled: isDisabled || option.disabled,
|
|
154
|
+
onChange,
|
|
155
|
+
value: option.value,
|
|
156
|
+
children: option.label ? option.label : option.value
|
|
157
|
+
},
|
|
158
|
+
option.value
|
|
159
|
+
);
|
|
160
|
+
}
|
|
161
|
+
return null;
|
|
162
|
+
})
|
|
266
163
|
}
|
|
267
164
|
);
|
|
268
165
|
}
|
|
269
166
|
}
|
|
270
167
|
);
|
|
271
168
|
};
|
|
272
|
-
var
|
|
169
|
+
var RadioBoxes_default = RadioBoxes;
|
|
273
170
|
|
|
274
|
-
// src/
|
|
275
|
-
var
|
|
171
|
+
// src/RadioBoxes/index.ts
|
|
172
|
+
var RadioBoxes_default2 = RadioBoxes_default;
|
|
276
173
|
|
|
277
174
|
export {
|
|
278
|
-
|
|
279
|
-
|
|
175
|
+
RadioBoxes_default,
|
|
176
|
+
RadioBoxes_default2
|
|
280
177
|
};
|
|
281
|
-
//# sourceMappingURL=chunk-
|
|
178
|
+
//# sourceMappingURL=chunk-KKWLPRW3.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 { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n slots: {\n base: 'group', // Needs group for group-data condition\n itemBase: '',\n itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n itemDescription: '',\n itemLabel: 'text-sm',\n itemLabelWrapper: '',\n itemWrapper:\n 'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\n // see HeroUI styles for group-data condition,\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n /** Description of the value. Works with variant radioBox. */\n description?: ReactNode;\n /** disables the option */\n disabled?: boolean;\n /** option label */\n label?: ReactNode;\n /** option icon */\n icon?: ReactNode;\n /** HTML data-testid attribute of the option */\n testId?: string;\n /** option value */\n value: string;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** determines orientation of the Buttons. */\n inline?: boolean;\n /** Label displayed next to the RadioButton. */\n label?: ReactNode;\n /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n name: string;\n /** Radio button configuration. */\n options: RadioBoxesOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n className = undefined,\n disabled = false,\n inline = false,\n label = undefined,\n name,\n options,\n testId: _testId = undefined,\n}: RadioBoxesProps): ReactElement => {\n const { control, debugMode, getFieldState, getValues } = useFormContext();\n\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n const variants = radioBoxesVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <Controller\n control={control}\n disabled={disabled}\n name={name}\n render={({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {\n const itemClassNames = {\n base: classNames.itemBase,\n control: classNames.itemControl,\n description: classNames.itemDescription,\n label: classNames.itemLabel,\n labelWrapper: classNames.itemLabelWrapper,\n wrapper: classNames.itemWrapper,\n };\n\n return (\n <HeroRadioGroup\n classNames={classNames}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n defaultValue={getValues()[name]}\n errorMessage={error && <FieldValidationError error={error} />}\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n label={\n showLabel && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label>\n {label}\n {showTestIdCopyButton && (\n <FieldCopyTestIdButton testId={testId} />\n )}\n </label>\n )\n }\n name={name}\n orientation={inline ? 'horizontal' : 'vertical'}\n onBlur={onBlur}\n onChange={onChange}\n ref={ref}\n >\n {options.map((option) => {\n if ('value' in option) {\n return (\n <RadioBox\n classNames={itemClassNames}\n data-testid={slugify(\n `${testId}_option_${option.testId || option.value}`,\n )}\n description={option.description}\n icon={option.icon}\n isDisabled={isDisabled || option.disabled}\n key={option.value}\n onChange={onChange}\n value={option.value}\n >\n {option.label ? option.label : option.value}\n </RadioBox>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n }}\n />\n );\n};\n\nexport default RadioBoxes;\n","import type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends HeroRadioProps {\n /** icon for the option */\n icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\n const {\n children,\n Component,\n description,\n getBaseProps,\n getControlProps,\n getInputProps,\n getLabelProps,\n getLabelWrapperProps,\n getWrapperProps,\n isDisabled,\n } = useRadio(props);\n\n return (\n <Component\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getBaseProps()}\n className={cn(\n 'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n {\n // disabled styles\n 'pointer-events-none opacity-disabled': isDisabled,\n },\n )}\n >\n <VisuallyHidden>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <input {...getInputProps()} />\n </VisuallyHidden>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <span {...getWrapperProps()}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <span {...getControlProps()} />\n </span>\n {icon}\n <div\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...getLabelWrapperProps()}\n className={cn(getLabelWrapperProps().className, 'grow')}\n >\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n {children && <span {...getLabelProps()}>{children}</span>}\n {description && (\n <span className=\"text-small text-foreground opacity-70\">\n {description}\n </span>\n )}\n </div>\n </Component>\n );\n};\n\nexport default RadioBox;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"],"mappings":"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","names":["jsx","jsxs","RadioBoxes_default"]}
|