@fuf-stack/uniform 0.16.10 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CheckboxGroup/index.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-C7I27oav.d.cts} +8 -69
- package/dist/{RadioGroup-Kmz3UY4g.d.ts → RadioGroup-C7I27oav.d.ts} +8 -69
- package/dist/RadioTabs/index.cjs +15 -0
- package/dist/RadioTabs/index.cjs.map +1 -0
- package/dist/RadioTabs/index.d.cts +11 -0
- package/dist/RadioTabs/index.d.ts +11 -0
- package/dist/RadioTabs/index.js +15 -0
- package/dist/RadioTabs/index.js.map +1 -0
- package/dist/RadioTabs-RmAv7A98.d.cts +140 -0
- package/dist/RadioTabs-RmAv7A98.d.ts +140 -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-6567TZFI.cjs +113 -0
- package/dist/chunk-6567TZFI.cjs.map +1 -0
- package/dist/chunk-CB2LOKAC.js +121 -0
- package/dist/chunk-CB2LOKAC.js.map +1 -0
- 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-PS3IIOSH.cjs +121 -0
- package/dist/chunk-PS3IIOSH.cjs.map +1 -0
- package/dist/chunk-XMTJGCGG.js +113 -0
- package/dist/chunk-XMTJGCGG.js.map +1 -0
- package/dist/index.cjs +10 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +7 -6
- package/dist/index.d.ts +7 -6
- package/dist/index.js +10 -2
- package/package.json +16 -6
- 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
|
@@ -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"]}
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
var _chunkEPYFZXEIcjs = require('./chunk-EPYFZXEI.cjs');
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
var _chunkOE5IW4ZGcjs = require('./chunk-OE5IW4ZG.cjs');
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
var _chunkIUVEFLF3cjs = require('./chunk-IUVEFLF3.cjs');
|
|
13
|
+
|
|
14
|
+
// src/RadioGroup/RadioGroup.tsx
|
|
15
|
+
var _radio = require('@heroui/radio');
|
|
16
|
+
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
17
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
18
|
+
var radioGroupVariants = _pixelutils.tv.call(void 0, {
|
|
19
|
+
slots: {
|
|
20
|
+
base: "group",
|
|
21
|
+
// Needs group for group-data condition
|
|
22
|
+
itemBase: "",
|
|
23
|
+
itemControl: "bg-focus group-data-[invalid=true]:bg-danger",
|
|
24
|
+
itemDescription: "",
|
|
25
|
+
itemLabel: "text-sm",
|
|
26
|
+
itemLabelWrapper: "",
|
|
27
|
+
itemWrapper: 'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid="true"]):not(group-data-[selected="false"])]:border-focus',
|
|
28
|
+
// TODO: get rid of !.
|
|
29
|
+
// see HeroUI styles for group-data condition,
|
|
30
|
+
// e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts
|
|
31
|
+
label: "text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger",
|
|
32
|
+
wrapper: ""
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
var RadioGroup = ({
|
|
36
|
+
className = void 0,
|
|
37
|
+
disabled = false,
|
|
38
|
+
inline = false,
|
|
39
|
+
label = void 0,
|
|
40
|
+
name,
|
|
41
|
+
options,
|
|
42
|
+
testId: _testId = void 0
|
|
43
|
+
}) => {
|
|
44
|
+
const { control, debugMode, getFieldState, getValues } = _chunkIUVEFLF3cjs.useFormContext.call(void 0, );
|
|
45
|
+
const { error, invalid, required, testId } = getFieldState(name, _testId);
|
|
46
|
+
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
47
|
+
const showLabel = label || showTestIdCopyButton;
|
|
48
|
+
const variants = radioGroupVariants();
|
|
49
|
+
const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
|
|
50
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
51
|
+
_chunkEPYFZXEIcjs.Controller_default,
|
|
52
|
+
{
|
|
53
|
+
control,
|
|
54
|
+
disabled,
|
|
55
|
+
name,
|
|
56
|
+
render: ({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {
|
|
57
|
+
const itemClassNames = {
|
|
58
|
+
base: classNames.itemBase,
|
|
59
|
+
control: classNames.itemControl,
|
|
60
|
+
description: classNames.itemDescription,
|
|
61
|
+
label: classNames.itemLabel,
|
|
62
|
+
labelWrapper: classNames.itemLabelWrapper,
|
|
63
|
+
wrapper: classNames.itemWrapper
|
|
64
|
+
};
|
|
65
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
66
|
+
_radio.RadioGroup,
|
|
67
|
+
{
|
|
68
|
+
classNames,
|
|
69
|
+
"data-invalid": invalid,
|
|
70
|
+
"data-required": required,
|
|
71
|
+
"data-testid": testId,
|
|
72
|
+
defaultValue: getValues()[name],
|
|
73
|
+
errorMessage: error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOE5IW4ZGcjs.FieldValidationError_default, { error }),
|
|
74
|
+
isDisabled,
|
|
75
|
+
isInvalid: invalid,
|
|
76
|
+
isRequired: required,
|
|
77
|
+
label: showLabel && // eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
78
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { children: [
|
|
79
|
+
label,
|
|
80
|
+
showTestIdCopyButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJU5RT22Ycjs.FieldCopyTestIdButton_default, { testId })
|
|
81
|
+
] }),
|
|
82
|
+
name,
|
|
83
|
+
orientation: inline ? "horizontal" : "vertical",
|
|
84
|
+
onBlur,
|
|
85
|
+
onChange,
|
|
86
|
+
ref,
|
|
87
|
+
children: options.map((option) => {
|
|
88
|
+
if ("value" in option) {
|
|
89
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
90
|
+
_radio.Radio,
|
|
91
|
+
{
|
|
92
|
+
classNames: itemClassNames,
|
|
93
|
+
"data-testid": _pixelutils.slugify.call(void 0,
|
|
94
|
+
`${testId}_option_${option.testId || option.value}`
|
|
95
|
+
),
|
|
96
|
+
isDisabled: isDisabled || option.disabled,
|
|
97
|
+
onChange,
|
|
98
|
+
value: option.value,
|
|
99
|
+
children: option.label ? option.label : option.value
|
|
100
|
+
},
|
|
101
|
+
option.value
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
return null;
|
|
105
|
+
})
|
|
106
|
+
}
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
);
|
|
111
|
+
};
|
|
112
|
+
var RadioGroup_default = RadioGroup;
|
|
113
|
+
|
|
114
|
+
// src/RadioGroup/index.ts
|
|
115
|
+
var RadioGroup_default2 = RadioGroup_default;
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
exports.RadioGroup_default = RadioGroup_default; exports.RadioGroup_default2 = RadioGroup_default2;
|
|
121
|
+
//# sourceMappingURL=chunk-PS3IIOSH.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-PS3IIOSH.cjs","../src/RadioGroup/RadioGroup.tsx","../src/RadioGroup/index.ts"],"names":["RadioGroup_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-PS3IIOSH.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup, Radio } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const radioGroupVariants = 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 radioGroupVariants>;\ntype ClassName = TVClassName<typeof radioGroupVariants>;\n\nexport interface RadioGroupOption {\n /** disables the option */\n disabled?: boolean;\n /** option label */\n label?: React.ReactNode;\n /** option icon */\n icon?: ReactNode;\n /** HTML data-testid attribute of the option */\n testId?: string;\n /** option value */\n value: string;\n}\n\nexport interface RadioGroupProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** determines orientation of the Buttons. */\n inline?: boolean;\n /** Label displayed next to the RadioButton. */\n label?: ReactNode;\n /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n name: string;\n /** Radio button configuration. */\n options: RadioGroupOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * RadioGroup component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioGroup = ({\n className = undefined,\n disabled = false,\n inline = false,\n label = undefined,\n name,\n options,\n testId: _testId = undefined,\n}: RadioGroupProps): ReactElement => {\n const { control, debugMode, getFieldState, getValues } = useFormContext();\n\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label || showTestIdCopyButton;\n\n const variants = radioGroupVariants();\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 <Radio\n classNames={itemClassNames}\n data-testid={slugify(\n `${testId}_option_${option.testId || option.value}`,\n )}\n isDisabled={isDisabled || option.disabled}\n key={option.value}\n onChange={onChange}\n value={option.value}\n >\n {option.label ? option.label : option.value}\n </Radio>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n }}\n />\n );\n};\n\nexport default RadioGroup;\n","import RadioGroup from './RadioGroup';\n\nexport type { RadioGroupProps } from './RadioGroup';\n\nexport { RadioGroup };\n\nexport default RadioGroup;\n"]}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Controller_default
|
|
3
|
+
} from "./chunk-AT2VVPRD.js";
|
|
4
|
+
import {
|
|
5
|
+
FieldCopyTestIdButton_default
|
|
6
|
+
} from "./chunk-2CRY7VDQ.js";
|
|
7
|
+
import {
|
|
8
|
+
FieldValidationError_default
|
|
9
|
+
} from "./chunk-ASPOGQPS.js";
|
|
10
|
+
import {
|
|
11
|
+
useFormContext
|
|
12
|
+
} from "./chunk-T4N6TMUL.js";
|
|
13
|
+
|
|
14
|
+
// src/RadioTabs/RadioTabs.tsx
|
|
15
|
+
import { RadioGroup as HeroRadioGroup } from "@heroui/radio";
|
|
16
|
+
import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
|
|
17
|
+
import Tabs from "@fuf-stack/pixels/Tabs";
|
|
18
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
19
|
+
var radioTabsVariants = tv({
|
|
20
|
+
slots: {
|
|
21
|
+
base: "group",
|
|
22
|
+
// Needs group for group-data condition
|
|
23
|
+
label: "text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger",
|
|
24
|
+
wrapper: "",
|
|
25
|
+
tabList: "",
|
|
26
|
+
tab: "",
|
|
27
|
+
tabContent: "",
|
|
28
|
+
cursor: "",
|
|
29
|
+
panel: ""
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
var RadioTabs = ({
|
|
33
|
+
className = void 0,
|
|
34
|
+
disabled = false,
|
|
35
|
+
inline = false,
|
|
36
|
+
label = void 0,
|
|
37
|
+
name,
|
|
38
|
+
options,
|
|
39
|
+
testId: _testId = void 0,
|
|
40
|
+
variant = void 0
|
|
41
|
+
}) => {
|
|
42
|
+
const { control, debugMode, getFieldState, getValues } = useFormContext();
|
|
43
|
+
const { error, invalid, required, testId } = getFieldState(name, _testId);
|
|
44
|
+
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
45
|
+
const showLabel = label || showTestIdCopyButton;
|
|
46
|
+
const variants = radioTabsVariants();
|
|
47
|
+
const classNames = variantsToClassNames(variants, className, "base");
|
|
48
|
+
const tabOptions = options.map((option) => ({
|
|
49
|
+
content: option == null ? void 0 : option.content,
|
|
50
|
+
disabled: option == null ? void 0 : option.disabled,
|
|
51
|
+
label: (option == null ? void 0 : option.label) || (option == null ? void 0 : option.value),
|
|
52
|
+
testId: slugify(`option_${(option == null ? void 0 : option.testId) || (option == null ? void 0 : option.value)}`),
|
|
53
|
+
key: option.value
|
|
54
|
+
}));
|
|
55
|
+
const disabledKeys = tabOptions == null ? void 0 : tabOptions.map(
|
|
56
|
+
(option) => option.key
|
|
57
|
+
);
|
|
58
|
+
return /* @__PURE__ */ jsx(
|
|
59
|
+
Controller_default,
|
|
60
|
+
{
|
|
61
|
+
control,
|
|
62
|
+
disabled,
|
|
63
|
+
name,
|
|
64
|
+
render: ({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {
|
|
65
|
+
return /* @__PURE__ */ jsx(
|
|
66
|
+
HeroRadioGroup,
|
|
67
|
+
{
|
|
68
|
+
classNames,
|
|
69
|
+
"data-invalid": invalid,
|
|
70
|
+
"data-required": required,
|
|
71
|
+
"data-testid": testId,
|
|
72
|
+
errorMessage: error && /* @__PURE__ */ jsx(FieldValidationError_default, { error }),
|
|
73
|
+
isDisabled,
|
|
74
|
+
isInvalid: invalid,
|
|
75
|
+
isRequired: required,
|
|
76
|
+
label: showLabel && // eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
77
|
+
/* @__PURE__ */ jsxs("label", { children: [
|
|
78
|
+
label,
|
|
79
|
+
showTestIdCopyButton && /* @__PURE__ */ jsx(FieldCopyTestIdButton_default, { testId })
|
|
80
|
+
] }),
|
|
81
|
+
name,
|
|
82
|
+
orientation: inline ? "horizontal" : "vertical",
|
|
83
|
+
onBlur,
|
|
84
|
+
onChange,
|
|
85
|
+
ref,
|
|
86
|
+
children: /* @__PURE__ */ jsx(
|
|
87
|
+
Tabs,
|
|
88
|
+
{
|
|
89
|
+
defaultSelectedKey: getValues()[name],
|
|
90
|
+
disabledKeys: disabled ? disabledKeys : void 0,
|
|
91
|
+
fullWidth: false,
|
|
92
|
+
onSelectionChange: onChange,
|
|
93
|
+
tabs: tabOptions,
|
|
94
|
+
testId,
|
|
95
|
+
variant
|
|
96
|
+
}
|
|
97
|
+
)
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
);
|
|
103
|
+
};
|
|
104
|
+
var RadioTabs_default = RadioTabs;
|
|
105
|
+
|
|
106
|
+
// src/RadioTabs/index.ts
|
|
107
|
+
var RadioTabs_default2 = RadioTabs_default;
|
|
108
|
+
|
|
109
|
+
export {
|
|
110
|
+
RadioTabs_default,
|
|
111
|
+
RadioTabs_default2
|
|
112
|
+
};
|
|
113
|
+
//# sourceMappingURL=chunk-XMTJGCGG.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/RadioTabs/RadioTabs.tsx","../src/RadioTabs/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TabsProps } from '@fuf-stack/pixels';\nimport type { TabProps } from '@fuf-stack/pixels/Tabs';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { Controller } from '../Controller';\nimport { useFormContext } from '../hooks';\nimport { FieldCopyTestIdButton } from '../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../partials/FieldValidationError';\n\nexport const radioTabsVariants = tv({\n slots: {\n base: 'group', // Needs group for group-data condition\n label:\n 'text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n wrapper: '',\n tabList: '',\n tab: '',\n tabContent: '',\n cursor: '',\n panel: '',\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 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: 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 disabled = false,\n inline = false,\n label = undefined,\n name,\n options,\n testId: _testId = undefined,\n variant = undefined,\n}: RadioTabsProps): 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 = radioTabsVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const tabOptions = options.map<TabProps>((option) => ({\n content: option?.content,\n disabled: option?.disabled,\n label: option?.label || option?.value,\n testId: slugify(`option_${option?.testId || option?.value}`),\n key: option.value,\n }));\n\n const disabledKeys: string[] | undefined = tabOptions?.map(\n (option) => option.key as string,\n );\n\n return (\n <Controller\n control={control}\n disabled={disabled}\n name={name}\n render={({ field: { onChange, disabled: isDisabled, onBlur, ref } }) => {\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 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 <Tabs\n defaultSelectedKey={getValues()[name]}\n disabledKeys={disabled ? disabledKeys : undefined}\n fullWidth={false}\n onSelectionChange={onChange}\n tabs={tabOptions as TabProps[]}\n testId={testId}\n variant={variant}\n />\n </HeroRadioGroup>\n );\n }}\n />\n );\n};\n\nexport default RadioTabs;\n","import RadioTabs from './RadioTabs';\n\nexport type { RadioTabsProps } from './RadioTabs';\n\nexport { RadioTabs };\n\nexport default RadioTabs;\n"],"mappings":";;;;;;;;;;;;;;AAKA,SAAS,cAAc,sBAAsB;AAE7C,SAAS,SAAS,IAAI,4BAA4B;AAClD,OAAO,UAAU;AA4GkB,cAOnB,YAPmB;AArG5B,IAAM,oBAAoB,GAAG;AAAA,EAClC,OAAO;AAAA,IACL,MAAM;AAAA;AAAA,IACN,OACE;AAAA,IACF,SAAS;AAAA,IACT,SAAS;AAAA,IACT,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AACF,CAAC;AA2CD,IAAM,YAAY,CAAC;AAAA,EACjB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,QAAQ,UAAU;AAAA,EAClB,UAAU;AACZ,MAAoC;AAClC,QAAM,EAAE,SAAS,WAAW,eAAe,UAAU,IAAI,eAAe;AAExE,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,SAAS;AAE3B,QAAM,WAAW,kBAAkB;AACnC,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,QAAM,aAAa,QAAQ,IAAc,CAAC,YAAY;AAAA,IACpD,SAAS,iCAAQ;AAAA,IACjB,UAAU,iCAAQ;AAAA,IAClB,QAAO,iCAAQ,WAAS,iCAAQ;AAAA,IAChC,QAAQ,QAAQ,WAAU,iCAAQ,YAAU,iCAAQ,MAAK,EAAE;AAAA,IAC3D,KAAK,OAAO;AAAA,EACd,EAAE;AAEF,QAAM,eAAqC,yCAAY;AAAA,IACrD,CAAC,WAAW,OAAO;AAAA;AAGrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,EAAE,OAAO,EAAE,UAAU,UAAU,YAAY,QAAQ,IAAI,EAAE,MAAM;AACtE,eACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YAGA,gBAAc;AAAA,YACd,iBAAe;AAAA,YACf,eAAa;AAAA,YACb,cAAc,SAAS,oBAAC,gCAAqB,OAAc;AAAA,YAC3D;AAAA,YACA,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,OACE;AAAA,YAEE,qBAAC,WACE;AAAA;AAAA,cACA,wBACC,oBAAC,iCAAsB,QAAgB;AAAA,eAE3C;AAAA,YAGJ;AAAA,YACA,aAAa,SAAS,eAAe;AAAA,YACrC;AAAA,YACA;AAAA,YACA;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,oBAAoB,UAAU,EAAE,IAAI;AAAA,gBACpC,cAAc,WAAW,eAAe;AAAA,gBACxC,WAAW;AAAA,gBACX,mBAAmB;AAAA,gBACnB,MAAM;AAAA,gBACN;AAAA,gBACA;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,oBAAQ;;;ACnJf,IAAOA,qBAAQ;","names":["RadioTabs_default"]}
|
package/dist/index.cjs
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
+
var _chunkPS3IIOSHcjs = require('./chunk-PS3IIOSH.cjs');
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
var _chunk6567TZFIcjs = require('./chunk-6567TZFI.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
3
9
|
var _chunkKIWE5ERIcjs = require('./chunk-KIWE5ERI.cjs');
|
|
4
10
|
|
|
5
11
|
|
|
@@ -27,7 +33,7 @@ var _chunk6GN255GPcjs = require('./chunk-6GN255GP.cjs');
|
|
|
27
33
|
var _chunkQY5DV3O7cjs = require('./chunk-QY5DV3O7.cjs');
|
|
28
34
|
|
|
29
35
|
|
|
30
|
-
var
|
|
36
|
+
var _chunkCTNGD5ZBcjs = require('./chunk-CTNGD5ZB.cjs');
|
|
31
37
|
|
|
32
38
|
|
|
33
39
|
var _chunkEPYFZXEIcjs = require('./chunk-EPYFZXEI.cjs');
|
|
@@ -72,5 +78,7 @@ require('./chunk-4DAZAO6Y.cjs');
|
|
|
72
78
|
|
|
73
79
|
|
|
74
80
|
|
|
75
|
-
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
exports.CheckboxGroup = _chunkBV2GRLYXcjs.CheckboxGroup_default; exports.Controller = _chunkEPYFZXEIcjs.Controller_default; exports.FieldArray = _chunkHCWKJ7D7cjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkJU5RT22Ycjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkOE5IW4ZGcjs.FieldValidationError_default; exports.Form = _chunkRMFLMX75cjs.Form_default; exports.Grid = _chunk6GN255GPcjs.Grid_default; exports.Input = _chunkQY5DV3O7cjs.Input_default; exports.RadioBoxes = _chunkCTNGD5ZBcjs.RadioBoxes_default; exports.RadioGroup = _chunkPS3IIOSHcjs.RadioGroup_default; exports.RadioTabs = _chunk6567TZFIcjs.RadioTabs_default; exports.Select = _chunkKIWE5ERIcjs.Select_default; exports.SubmitButton = _chunkH65I56SIcjs.SubmitButton_default; exports.Switch = _chunkOR76PGSScjs.Switch_default; exports.TextArea = _chunkO3523LQ5cjs.TextArea_default; exports.checkFieldIsRequired = _chunkIUVEFLF3cjs.checkFieldIsRequired; exports.fromNullishString = _chunkCESGUF6Fcjs.fromNullishString; exports.toFormFormat = _chunkCESGUF6Fcjs.toFormFormat; exports.toNullishString = _chunkCESGUF6Fcjs.toNullishString; exports.toValidationFormat = _chunkCESGUF6Fcjs.toValidationFormat; exports.useFieldArray = _chunkIUVEFLF3cjs.useFieldArray; exports.useFormContext = _chunkIUVEFLF3cjs.useFormContext; exports.useInput = _chunkIUVEFLF3cjs.useInput;
|
|
76
84
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACF,wDAA6B;AAC7B,gCAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,k1CAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/index.cjs"}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { C as Controller, a as ControllerProps } from './Controller-8Nqugui5.cjs';
|
|
2
|
-
export { C as CheckboxGroup, b as CheckboxGroupOption, a as CheckboxGroupProps } from './CheckboxGroup-
|
|
2
|
+
export { C as CheckboxGroup, b as CheckboxGroupOption, a as CheckboxGroupProps } from './CheckboxGroup-fAdey3Td.cjs';
|
|
3
3
|
export { F as FieldArray, a as FieldArrayChildrenRenderFn, b as FieldArrayFeatures, c as FieldArrayProps } from './FieldArray-hqxjr18x.cjs';
|
|
4
4
|
export { F as Form, a as FormProps } from './Form-D0grgL6G.cjs';
|
|
5
5
|
export { G as Grid, a as GridProps } from './Grid-DF3L9NF3.cjs';
|
|
@@ -10,10 +10,12 @@ export { useInput } from '@heroui/input';
|
|
|
10
10
|
export { I as Input, a as InputProps } from './Input-B_wjhY9e.cjs';
|
|
11
11
|
export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton-DnbovhMk.cjs';
|
|
12
12
|
export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-DAT12Ess.cjs';
|
|
13
|
-
export { R as
|
|
14
|
-
export {
|
|
13
|
+
export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-C61IRDCU.cjs';
|
|
14
|
+
export { R as RadioGroup, a as RadioGroupProps } from './RadioGroup-C7I27oav.cjs';
|
|
15
|
+
export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-RmAv7A98.cjs';
|
|
16
|
+
export { S as Select, a as SelectProps } from './Select-JRwrSDew.cjs';
|
|
15
17
|
export { S as SubmitButton, a as SubmitButtonProps } from './SubmitButton-BEp_zzwf.cjs';
|
|
16
|
-
export { S as Switch, a as SwitchProps } from './Switch-
|
|
18
|
+
export { S as Switch, a as SwitchProps } from './Switch-CLs964dL.cjs';
|
|
17
19
|
export { T as TextArea, a as TextAreaProps } from './TextArea-DNpInDsW.cjs';
|
|
18
20
|
import 'react/jsx-runtime';
|
|
19
21
|
import 'tailwind-variants/dist/config.js';
|
|
@@ -22,6 +24,5 @@ import '@fuf-stack/pixel-utils';
|
|
|
22
24
|
import 'react';
|
|
23
25
|
import '@fuf-stack/veto';
|
|
24
26
|
import './FormContext-ldCpxKnY.cjs';
|
|
25
|
-
import '@fuf-stack/pixels/Tabs';
|
|
26
|
-
import 'react-select';
|
|
27
27
|
import '@fuf-stack/pixels';
|
|
28
|
+
import 'react-select';
|