@fuf-stack/uniform 0.16.11 → 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/RadioGroup/index.cjs +2 -2
- package/dist/RadioGroup/index.d.cts +2 -2
- package/dist/RadioGroup/index.d.ts +2 -2
- package/dist/RadioGroup/index.js +1 -1
- package/dist/{RadioGroup-Bu1tlWSX.d.cts → RadioGroup-C7I27oav.d.cts} +0 -2
- package/dist/{RadioGroup-Bu1tlWSX.d.ts → RadioGroup-C7I27oav.d.ts} +0 -2
- package/dist/RadioTabs/index.cjs +2 -2
- package/dist/RadioTabs/index.d.cts +2 -3
- package/dist/RadioTabs/index.d.ts +2 -3
- package/dist/RadioTabs/index.js +1 -1
- package/dist/{RadioTabs-2kYDEVCo.d.cts → RadioTabs-RmAv7A98.d.cts} +15 -4
- package/dist/{RadioTabs-2kYDEVCo.d.ts → RadioTabs-RmAv7A98.d.ts} +15 -4
- package/dist/{chunk-TY4YVLKV.cjs → chunk-6567TZFI.cjs} +13 -5
- package/dist/chunk-6567TZFI.cjs.map +1 -0
- package/dist/{chunk-PWTQZCI6.js → chunk-CB2LOKAC.js} +1 -1
- package/dist/chunk-CB2LOKAC.js.map +1 -0
- package/dist/{chunk-WLIVQDPW.cjs → chunk-PS3IIOSH.cjs} +1 -1
- package/dist/chunk-PS3IIOSH.cjs.map +1 -0
- package/dist/{chunk-MCQX3UZP.js → chunk-XMTJGCGG.js} +14 -6
- package/dist/chunk-XMTJGCGG.js.map +1 -0
- package/dist/index.cjs +3 -3
- package/dist/index.d.cts +2 -3
- package/dist/index.d.ts +2 -3
- package/dist/index.js +2 -2
- package/package.json +6 -6
- package/dist/chunk-MCQX3UZP.js.map +0 -1
- package/dist/chunk-PWTQZCI6.js.map +0 -1
- package/dist/chunk-TY4YVLKV.cjs.map +0 -1
- package/dist/chunk-WLIVQDPW.cjs.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkPS3IIOSHcjs = require('../chunk-PS3IIOSH.cjs');
|
|
5
5
|
require('../chunk-EPYFZXEI.cjs');
|
|
6
6
|
require('../chunk-JU5RT22Y.cjs');
|
|
7
7
|
require('../chunk-OE5IW4ZG.cjs');
|
|
@@ -11,5 +11,5 @@ require('../chunk-4DAZAO6Y.cjs');
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
exports.RadioGroup =
|
|
14
|
+
exports.RadioGroup = _chunkPS3IIOSHcjs.RadioGroup_default; exports.default = _chunkPS3IIOSHcjs.RadioGroup_default2;
|
|
15
15
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { R as RadioGroup } from '../RadioGroup-
|
|
2
|
-
export { a as RadioGroupProps } from '../RadioGroup-
|
|
1
|
+
import { R as RadioGroup } from '../RadioGroup-C7I27oav.cjs';
|
|
2
|
+
export { a as RadioGroupProps } from '../RadioGroup-C7I27oav.cjs';
|
|
3
3
|
import 'tailwind-variants/dist/config.js';
|
|
4
4
|
import 'tailwind-variants';
|
|
5
5
|
import '@fuf-stack/pixel-utils';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { R as RadioGroup } from '../RadioGroup-
|
|
2
|
-
export { a as RadioGroupProps } from '../RadioGroup-
|
|
1
|
+
import { R as RadioGroup } from '../RadioGroup-C7I27oav.js';
|
|
2
|
+
export { a as RadioGroupProps } from '../RadioGroup-C7I27oav.js';
|
|
3
3
|
import 'tailwind-variants/dist/config.js';
|
|
4
4
|
import 'tailwind-variants';
|
|
5
5
|
import '@fuf-stack/pixel-utils';
|
package/dist/RadioGroup/index.js
CHANGED
|
@@ -107,8 +107,6 @@ declare const radioGroupVariants: tailwind_variants.TVReturnType<{
|
|
|
107
107
|
type VariantProps = TVProps<typeof radioGroupVariants>;
|
|
108
108
|
type ClassName = TVClassName<typeof radioGroupVariants>;
|
|
109
109
|
interface RadioGroupOption {
|
|
110
|
-
/** Description of the value. Works with variant radioBox. */
|
|
111
|
-
description?: React.ReactNode;
|
|
112
110
|
/** disables the option */
|
|
113
111
|
disabled?: boolean;
|
|
114
112
|
/** option label */
|
|
@@ -107,8 +107,6 @@ declare const radioGroupVariants: tailwind_variants.TVReturnType<{
|
|
|
107
107
|
type VariantProps = TVProps<typeof radioGroupVariants>;
|
|
108
108
|
type ClassName = TVClassName<typeof radioGroupVariants>;
|
|
109
109
|
interface RadioGroupOption {
|
|
110
|
-
/** Description of the value. Works with variant radioBox. */
|
|
111
|
-
description?: React.ReactNode;
|
|
112
110
|
/** disables the option */
|
|
113
111
|
disabled?: boolean;
|
|
114
112
|
/** option label */
|
package/dist/RadioTabs/index.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunk6567TZFIcjs = require('../chunk-6567TZFI.cjs');
|
|
5
5
|
require('../chunk-EPYFZXEI.cjs');
|
|
6
6
|
require('../chunk-JU5RT22Y.cjs');
|
|
7
7
|
require('../chunk-OE5IW4ZG.cjs');
|
|
@@ -11,5 +11,5 @@ require('../chunk-4DAZAO6Y.cjs');
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
exports.RadioTabs =
|
|
14
|
+
exports.RadioTabs = _chunk6567TZFIcjs.RadioTabs_default; exports.default = _chunk6567TZFIcjs.RadioTabs_default2;
|
|
15
15
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { R as RadioTabs } from '../RadioTabs-
|
|
2
|
-
export { a as RadioTabsProps } from '../RadioTabs-
|
|
1
|
+
import { R as RadioTabs } from '../RadioTabs-RmAv7A98.cjs';
|
|
2
|
+
export { a as RadioTabsProps } from '../RadioTabs-RmAv7A98.cjs';
|
|
3
3
|
import 'tailwind-variants/dist/config.js';
|
|
4
4
|
import 'tailwind-variants';
|
|
5
5
|
import '@fuf-stack/pixel-utils';
|
|
6
6
|
import '@fuf-stack/pixels';
|
|
7
|
-
import '@fuf-stack/pixels/Tabs';
|
|
8
7
|
import 'react';
|
|
9
8
|
|
|
10
9
|
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { R as RadioTabs } from '../RadioTabs-
|
|
2
|
-
export { a as RadioTabsProps } from '../RadioTabs-
|
|
1
|
+
import { R as RadioTabs } from '../RadioTabs-RmAv7A98.js';
|
|
2
|
+
export { a as RadioTabsProps } from '../RadioTabs-RmAv7A98.js';
|
|
3
3
|
import 'tailwind-variants/dist/config.js';
|
|
4
4
|
import 'tailwind-variants';
|
|
5
5
|
import '@fuf-stack/pixel-utils';
|
|
6
6
|
import '@fuf-stack/pixels';
|
|
7
|
-
import '@fuf-stack/pixels/Tabs';
|
|
8
7
|
import 'react';
|
|
9
8
|
|
|
10
9
|
|
package/dist/RadioTabs/index.js
CHANGED
|
@@ -2,7 +2,6 @@ import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config
|
|
|
2
2
|
import * as tailwind_variants from 'tailwind-variants';
|
|
3
3
|
import { TVProps, TVClassName } from '@fuf-stack/pixel-utils';
|
|
4
4
|
import { TabsProps } from '@fuf-stack/pixels';
|
|
5
|
-
import { TabProps } from '@fuf-stack/pixels/Tabs';
|
|
6
5
|
import { ReactNode, ReactElement } from 'react';
|
|
7
6
|
|
|
8
7
|
declare const radioTabsVariants: tailwind_variants.TVReturnType<{
|
|
@@ -100,6 +99,20 @@ declare const radioTabsVariants: tailwind_variants.TVReturnType<{
|
|
|
100
99
|
} | {}>, unknown, unknown, undefined>>;
|
|
101
100
|
type VariantProps = TVProps<typeof radioTabsVariants>;
|
|
102
101
|
type ClassName = TVClassName<typeof radioTabsVariants>;
|
|
102
|
+
interface RadioTabsOption {
|
|
103
|
+
/** Optional content inside of the tab */
|
|
104
|
+
content?: ReactNode;
|
|
105
|
+
/** disables the option */
|
|
106
|
+
disabled?: boolean;
|
|
107
|
+
/** option label */
|
|
108
|
+
label?: React.ReactNode;
|
|
109
|
+
/** option icon */
|
|
110
|
+
icon?: ReactNode;
|
|
111
|
+
/** HTML data-testid attribute of the option */
|
|
112
|
+
testId?: string;
|
|
113
|
+
/** option value */
|
|
114
|
+
value: string;
|
|
115
|
+
}
|
|
103
116
|
interface RadioTabsProps extends VariantProps {
|
|
104
117
|
/** CSS class name */
|
|
105
118
|
className?: ClassName;
|
|
@@ -112,9 +125,7 @@ interface RadioTabsProps extends VariantProps {
|
|
|
112
125
|
/** Name the RadioButtons are registered at in HTML forms (react-hook-form). */
|
|
113
126
|
name: string;
|
|
114
127
|
/** Radio button configuration. */
|
|
115
|
-
options:
|
|
116
|
-
content?: ReactNode;
|
|
117
|
-
})[];
|
|
128
|
+
options: RadioTabsOption[];
|
|
118
129
|
/** Id to grab element in internal tests. */
|
|
119
130
|
testId?: string;
|
|
120
131
|
/** How the RadioTabs should look like. */
|
|
@@ -2,7 +2,6 @@ import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config
|
|
|
2
2
|
import * as tailwind_variants from 'tailwind-variants';
|
|
3
3
|
import { TVProps, TVClassName } from '@fuf-stack/pixel-utils';
|
|
4
4
|
import { TabsProps } from '@fuf-stack/pixels';
|
|
5
|
-
import { TabProps } from '@fuf-stack/pixels/Tabs';
|
|
6
5
|
import { ReactNode, ReactElement } from 'react';
|
|
7
6
|
|
|
8
7
|
declare const radioTabsVariants: tailwind_variants.TVReturnType<{
|
|
@@ -100,6 +99,20 @@ declare const radioTabsVariants: tailwind_variants.TVReturnType<{
|
|
|
100
99
|
} | {}>, unknown, unknown, undefined>>;
|
|
101
100
|
type VariantProps = TVProps<typeof radioTabsVariants>;
|
|
102
101
|
type ClassName = TVClassName<typeof radioTabsVariants>;
|
|
102
|
+
interface RadioTabsOption {
|
|
103
|
+
/** Optional content inside of the tab */
|
|
104
|
+
content?: ReactNode;
|
|
105
|
+
/** disables the option */
|
|
106
|
+
disabled?: boolean;
|
|
107
|
+
/** option label */
|
|
108
|
+
label?: React.ReactNode;
|
|
109
|
+
/** option icon */
|
|
110
|
+
icon?: ReactNode;
|
|
111
|
+
/** HTML data-testid attribute of the option */
|
|
112
|
+
testId?: string;
|
|
113
|
+
/** option value */
|
|
114
|
+
value: string;
|
|
115
|
+
}
|
|
103
116
|
interface RadioTabsProps extends VariantProps {
|
|
104
117
|
/** CSS class name */
|
|
105
118
|
className?: ClassName;
|
|
@@ -112,9 +125,7 @@ interface RadioTabsProps extends VariantProps {
|
|
|
112
125
|
/** Name the RadioButtons are registered at in HTML forms (react-hook-form). */
|
|
113
126
|
name: string;
|
|
114
127
|
/** Radio button configuration. */
|
|
115
|
-
options:
|
|
116
|
-
content?: ReactNode;
|
|
117
|
-
})[];
|
|
128
|
+
options: RadioTabsOption[];
|
|
118
129
|
/** Id to grab element in internal tests. */
|
|
119
130
|
testId?: string;
|
|
120
131
|
/** How the RadioTabs should look like. */
|
|
@@ -45,7 +45,14 @@ var RadioTabs = ({
|
|
|
45
45
|
const showLabel = label || showTestIdCopyButton;
|
|
46
46
|
const variants = radioTabsVariants();
|
|
47
47
|
const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
|
|
48
|
-
const
|
|
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: _pixelutils.slugify.call(void 0, `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(
|
|
49
56
|
(option) => option.key
|
|
50
57
|
);
|
|
51
58
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
@@ -79,12 +86,13 @@ var RadioTabs = ({
|
|
|
79
86
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
80
87
|
_Tabs2.default,
|
|
81
88
|
{
|
|
89
|
+
defaultSelectedKey: getValues()[name],
|
|
82
90
|
disabledKeys: disabled ? disabledKeys : void 0,
|
|
83
|
-
variant,
|
|
84
91
|
fullWidth: false,
|
|
85
|
-
tabs: options,
|
|
86
92
|
onSelectionChange: onChange,
|
|
87
|
-
|
|
93
|
+
tabs: tabOptions,
|
|
94
|
+
testId,
|
|
95
|
+
variant
|
|
88
96
|
}
|
|
89
97
|
)
|
|
90
98
|
}
|
|
@@ -102,4 +110,4 @@ var RadioTabs_default2 = RadioTabs_default;
|
|
|
102
110
|
|
|
103
111
|
|
|
104
112
|
exports.RadioTabs_default = RadioTabs_default; exports.RadioTabs_default2 = RadioTabs_default2;
|
|
105
|
-
//# sourceMappingURL=chunk-
|
|
113
|
+
//# sourceMappingURL=chunk-6567TZFI.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-6567TZFI.cjs","../src/RadioTabs/RadioTabs.tsx","../src/RadioTabs/index.ts"],"names":[],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-6567TZFI.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 { 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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/RadioGroup/RadioGroup.tsx","../src/RadioGroup/index.ts"],"sourcesContent":["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"],"mappings":";;;;;;;;;;;;;;AAGA,SAAS,cAAc,gBAAgB,aAAa;AAEpD,SAAS,SAAS,IAAI,4BAA4B;AAwGf,cAOnB,YAPmB;AAjG5B,IAAM,qBAAqB,GAAG;AAAA,EACnC,OAAO;AAAA,IACL,MAAM;AAAA;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,aACE;AAAA;AAAA;AAAA;AAAA,IAGF,OACE;AAAA,IACF,SAAS;AAAA,EACX;AACF,CAAC;AAsCD,IAAM,aAAa,CAAC;AAAA,EAClB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,QAAQ,UAAU;AACpB,MAAqC;AACnC,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,mBAAmB;AACpC,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,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,cAAM,iBAAiB;AAAA,UACrB,MAAM,WAAW;AAAA,UACjB,SAAS,WAAW;AAAA,UACpB,aAAa,WAAW;AAAA,UACxB,OAAO,WAAW;AAAA,UAClB,cAAc,WAAW;AAAA,UACzB,SAAS,WAAW;AAAA,QACtB;AAEA,eACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YAGA,gBAAc;AAAA,YACd,iBAAe;AAAA,YACf,eAAa;AAAA,YACb,cAAc,UAAU,EAAE,IAAI;AAAA,YAC9B,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,YAEC,kBAAQ,IAAI,CAAC,WAAW;AACvB,kBAAI,WAAW,QAAQ;AACrB,uBACE;AAAA,kBAAC;AAAA;AAAA,oBACC,YAAY;AAAA,oBACZ,eAAa;AAAA,sBACX,GAAG,MAAM,WAAW,OAAO,UAAU,OAAO,KAAK;AAAA,oBACnD;AAAA,oBACA,YAAY,cAAc,OAAO;AAAA,oBAEjC;AAAA,oBACA,OAAO,OAAO;AAAA,oBAEb,iBAAO,QAAQ,OAAO,QAAQ,OAAO;AAAA;AAAA,kBAJjC,OAAO;AAAA,gBAKd;AAAA,cAEJ;AACA,qBAAO;AAAA,YACT,CAAC;AAAA;AAAA,QACH;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,qBAAQ;;;ACtJf,IAAOA,sBAAQ;","names":["RadioGroup_default"]}
|
|
@@ -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"]}
|
|
@@ -13,7 +13,7 @@ import {
|
|
|
13
13
|
|
|
14
14
|
// src/RadioTabs/RadioTabs.tsx
|
|
15
15
|
import { RadioGroup as HeroRadioGroup } from "@heroui/radio";
|
|
16
|
-
import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
|
|
16
|
+
import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
|
|
17
17
|
import Tabs from "@fuf-stack/pixels/Tabs";
|
|
18
18
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
19
19
|
var radioTabsVariants = tv({
|
|
@@ -45,7 +45,14 @@ var RadioTabs = ({
|
|
|
45
45
|
const showLabel = label || showTestIdCopyButton;
|
|
46
46
|
const variants = radioTabsVariants();
|
|
47
47
|
const classNames = variantsToClassNames(variants, className, "base");
|
|
48
|
-
const
|
|
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(
|
|
49
56
|
(option) => option.key
|
|
50
57
|
);
|
|
51
58
|
return /* @__PURE__ */ jsx(
|
|
@@ -79,12 +86,13 @@ var RadioTabs = ({
|
|
|
79
86
|
children: /* @__PURE__ */ jsx(
|
|
80
87
|
Tabs,
|
|
81
88
|
{
|
|
89
|
+
defaultSelectedKey: getValues()[name],
|
|
82
90
|
disabledKeys: disabled ? disabledKeys : void 0,
|
|
83
|
-
variant,
|
|
84
91
|
fullWidth: false,
|
|
85
|
-
tabs: options,
|
|
86
92
|
onSelectionChange: onChange,
|
|
87
|
-
|
|
93
|
+
tabs: tabOptions,
|
|
94
|
+
testId,
|
|
95
|
+
variant
|
|
88
96
|
}
|
|
89
97
|
)
|
|
90
98
|
}
|
|
@@ -102,4 +110,4 @@ export {
|
|
|
102
110
|
RadioTabs_default,
|
|
103
111
|
RadioTabs_default2
|
|
104
112
|
};
|
|
105
|
-
//# sourceMappingURL=chunk-
|
|
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,9 +1,9 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkPS3IIOSHcjs = require('./chunk-PS3IIOSH.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _chunk6567TZFIcjs = require('./chunk-6567TZFI.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
var _chunkKIWE5ERIcjs = require('./chunk-KIWE5ERI.cjs');
|
|
@@ -80,5 +80,5 @@ require('./chunk-4DAZAO6Y.cjs');
|
|
|
80
80
|
|
|
81
81
|
|
|
82
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 =
|
|
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;
|
|
84
84
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.d.cts
CHANGED
|
@@ -11,8 +11,8 @@ 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
13
|
export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-C61IRDCU.cjs';
|
|
14
|
-
export { R as RadioGroup, a as RadioGroupProps } from './RadioGroup-
|
|
15
|
-
export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-
|
|
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
16
|
export { S as Select, a as SelectProps } from './Select-JRwrSDew.cjs';
|
|
17
17
|
export { S as SubmitButton, a as SubmitButtonProps } from './SubmitButton-BEp_zzwf.cjs';
|
|
18
18
|
export { S as Switch, a as SwitchProps } from './Switch-CLs964dL.cjs';
|
|
@@ -25,5 +25,4 @@ import 'react';
|
|
|
25
25
|
import '@fuf-stack/veto';
|
|
26
26
|
import './FormContext-ldCpxKnY.cjs';
|
|
27
27
|
import '@fuf-stack/pixels';
|
|
28
|
-
import '@fuf-stack/pixels/Tabs';
|
|
29
28
|
import 'react-select';
|
package/dist/index.d.ts
CHANGED
|
@@ -11,8 +11,8 @@ export { I as Input, a as InputProps } from './Input-B_wjhY9e.js';
|
|
|
11
11
|
export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton-DnbovhMk.js';
|
|
12
12
|
export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-DAT12Ess.js';
|
|
13
13
|
export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-C61IRDCU.js';
|
|
14
|
-
export { R as RadioGroup, a as RadioGroupProps } from './RadioGroup-
|
|
15
|
-
export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-
|
|
14
|
+
export { R as RadioGroup, a as RadioGroupProps } from './RadioGroup-C7I27oav.js';
|
|
15
|
+
export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-RmAv7A98.js';
|
|
16
16
|
export { S as Select, a as SelectProps } from './Select-JRwrSDew.js';
|
|
17
17
|
export { S as SubmitButton, a as SubmitButtonProps } from './SubmitButton-BEp_zzwf.js';
|
|
18
18
|
export { S as Switch, a as SwitchProps } from './Switch-CLs964dL.js';
|
|
@@ -25,5 +25,4 @@ import 'react';
|
|
|
25
25
|
import '@fuf-stack/veto';
|
|
26
26
|
import './FormContext-ldCpxKnY.js';
|
|
27
27
|
import '@fuf-stack/pixels';
|
|
28
|
-
import '@fuf-stack/pixels/Tabs';
|
|
29
28
|
import 'react-select';
|
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fuf-stack/uniform",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.17.0",
|
|
4
4
|
"description": "fuf react form library",
|
|
5
5
|
"author": "Hannes Tiede",
|
|
6
6
|
"homepage": "https://github.com/fuf-stack/pixels#readme",
|
|
@@ -134,13 +134,13 @@
|
|
|
134
134
|
"@heroui/system": "2.4.13",
|
|
135
135
|
"@heroui/theme": "2.4.13",
|
|
136
136
|
"@react-aria/visually-hidden": "3.8.22",
|
|
137
|
-
"framer-motion": "12.
|
|
137
|
+
"framer-motion": "12.8.0",
|
|
138
138
|
"react-icons": "5.5.0",
|
|
139
139
|
"react-hook-form": "7.55.0",
|
|
140
140
|
"react-select": "5.10.1",
|
|
141
141
|
"@fuf-stack/pixel-utils": "0.5.3",
|
|
142
|
-
"@fuf-stack/pixels": "0.41.
|
|
143
|
-
"@fuf-stack/veto": "0.10.
|
|
142
|
+
"@fuf-stack/pixels": "0.41.6",
|
|
143
|
+
"@fuf-stack/veto": "0.10.1"
|
|
144
144
|
},
|
|
145
145
|
"devDependencies": {
|
|
146
146
|
"@types/debug": "4.1.12",
|
|
@@ -150,8 +150,8 @@
|
|
|
150
150
|
"react-dom": "19.0.0",
|
|
151
151
|
"@repo/storybook-config": "0.0.1",
|
|
152
152
|
"@repo/tailwind-config": "0.0.1",
|
|
153
|
-
"@repo/
|
|
154
|
-
"@repo/
|
|
153
|
+
"@repo/vite-config": "0.0.1",
|
|
154
|
+
"@repo/tsup-config": "0.0.1"
|
|
155
155
|
},
|
|
156
156
|
"scripts": {
|
|
157
157
|
"build": "tsup --config node_modules/@repo/tsup-config/config.ts",
|
|
@@ -1 +0,0 @@
|
|
|
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 { 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 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: (Omit<TabProps, 'content'> & { content?: ReactNode })[];\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 disabledKeys: string[] | undefined = options?.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 disabledKeys={disabled ? disabledKeys : undefined}\n variant={variant}\n fullWidth={false}\n tabs={options as TabProps[]}\n onSelectionChange={onChange}\n defaultSelectedKey={getValues()[name]}\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,IAAI,4BAA4B;AACzC,OAAO,UAAU;AAqFkB,cAOnB,YAPmB;AA9E5B,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;AA4BD,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,eAAqC,mCAAS;AAAA,IAClD,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,cAAc,WAAW,eAAe;AAAA,gBACxC;AAAA,gBACA,WAAW;AAAA,gBACX,MAAM;AAAA,gBACN,mBAAmB;AAAA,gBACnB,oBAAoB,UAAU,EAAE,IAAI;AAAA;AAAA,YACtC;AAAA;AAAA,QACF;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,oBAAQ;;;AC3Hf,IAAOA,qBAAQ;","names":["RadioTabs_default"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/RadioGroup/RadioGroup.tsx","../src/RadioGroup/index.ts"],"sourcesContent":["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 /** Description of the value. Works with variant radioBox. */\n description?: React.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 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"],"mappings":";;;;;;;;;;;;;;AAGA,SAAS,cAAc,gBAAgB,aAAa;AAEpD,SAAS,SAAS,IAAI,4BAA4B;AA0Gf,cAOnB,YAPmB;AAnG5B,IAAM,qBAAqB,GAAG;AAAA,EACnC,OAAO;AAAA,IACL,MAAM;AAAA;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,aACE;AAAA;AAAA;AAAA;AAAA,IAGF,OACE;AAAA,IACF,SAAS;AAAA,EACX;AACF,CAAC;AAwCD,IAAM,aAAa,CAAC;AAAA,EAClB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,QAAQ,UAAU;AACpB,MAAqC;AACnC,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,mBAAmB;AACpC,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,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,cAAM,iBAAiB;AAAA,UACrB,MAAM,WAAW;AAAA,UACjB,SAAS,WAAW;AAAA,UACpB,aAAa,WAAW;AAAA,UACxB,OAAO,WAAW;AAAA,UAClB,cAAc,WAAW;AAAA,UACzB,SAAS,WAAW;AAAA,QACtB;AAEA,eACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YAGA,gBAAc;AAAA,YACd,iBAAe;AAAA,YACf,eAAa;AAAA,YACb,cAAc,UAAU,EAAE,IAAI;AAAA,YAC9B,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,YAEC,kBAAQ,IAAI,CAAC,WAAW;AACvB,kBAAI,WAAW,QAAQ;AACrB,uBACE;AAAA,kBAAC;AAAA;AAAA,oBACC,YAAY;AAAA,oBACZ,eAAa;AAAA,sBACX,GAAG,MAAM,WAAW,OAAO,UAAU,OAAO,KAAK;AAAA,oBACnD;AAAA,oBACA,YAAY,cAAc,OAAO;AAAA,oBAEjC;AAAA,oBACA,OAAO,OAAO;AAAA,oBAEb,iBAAO,QAAQ,OAAO,QAAQ,OAAO;AAAA;AAAA,kBAJjC,OAAO;AAAA,gBAKd;AAAA,cAEJ;AACA,qBAAO;AAAA,YACT,CAAC;AAAA;AAAA,QACH;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,qBAAQ;;;ACxJf,IAAOA,sBAAQ;","names":["RadioGroup_default"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-TY4YVLKV.cjs","../src/RadioTabs/RadioTabs.tsx","../src/RadioTabs/index.ts"],"names":["RadioTabs_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-TY4YVLKV.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 { 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 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: (Omit<TabProps, 'content'> & { content?: ReactNode })[];\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 disabledKeys: string[] | undefined = options?.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 disabledKeys={disabled ? disabledKeys : undefined}\n variant={variant}\n fullWidth={false}\n tabs={options as TabProps[]}\n onSelectionChange={onChange}\n defaultSelectedKey={getValues()[name]}\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"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-WLIVQDPW.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-WLIVQDPW.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 /** Description of the value. Works with variant radioBox. */\n description?: React.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 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"]}
|