@fuf-stack/uniform 1.3.1 → 1.4.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/RadioTabs/index.cjs +2 -2
- package/dist/RadioTabs/index.d.cts +2 -2
- package/dist/RadioTabs/index.d.ts +2 -2
- package/dist/RadioTabs/index.js +1 -1
- package/dist/{RadioTabs-8Gn71LRW.d.cts → RadioTabs-Dtcooxnl.d.cts} +62 -48
- package/dist/{RadioTabs-8Gn71LRW.d.ts → RadioTabs-Dtcooxnl.d.ts} +62 -48
- package/dist/{chunk-VPTOKYJG.cjs → chunk-2ZBMZSZF.cjs} +43 -9
- package/dist/chunk-2ZBMZSZF.cjs.map +1 -0
- package/dist/{chunk-PF4NU4QW.js → chunk-4VNCGXBX.js} +43 -9
- package/dist/chunk-4VNCGXBX.js.map +1 -0
- package/dist/index.cjs +2 -2
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/package.json +5 -5
- package/dist/chunk-PF4NU4QW.js.map +0 -1
- package/dist/chunk-VPTOKYJG.cjs.map +0 -1
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 _chunk2ZBMZSZFcjs = require('../chunk-2ZBMZSZF.cjs');
|
|
5
5
|
require('../chunk-OE5BOGGX.cjs');
|
|
6
6
|
require('../chunk-Y3AB4GV6.cjs');
|
|
7
7
|
require('../chunk-2GYFDVXX.cjs');
|
|
@@ -12,5 +12,5 @@ require('../chunk-555JRYCS.cjs');
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
exports.RadioTabs =
|
|
15
|
+
exports.RadioTabs = _chunk2ZBMZSZFcjs.RadioTabs_default; exports.default = _chunk2ZBMZSZFcjs.RadioTabs_default2;
|
|
16
16
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { R as RadioTabs } from '../RadioTabs-
|
|
2
|
-
export { a as RadioTabsProps } from '../RadioTabs-
|
|
1
|
+
import { R as RadioTabs } from '../RadioTabs-Dtcooxnl.cjs';
|
|
2
|
+
export { a as RadioTabsProps } from '../RadioTabs-Dtcooxnl.cjs';
|
|
3
3
|
import 'tailwind-variants';
|
|
4
4
|
import '@fuf-stack/pixel-utils';
|
|
5
5
|
import '@fuf-stack/pixels';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { R as RadioTabs } from '../RadioTabs-
|
|
2
|
-
export { a as RadioTabsProps } from '../RadioTabs-
|
|
1
|
+
import { R as RadioTabs } from '../RadioTabs-Dtcooxnl.js';
|
|
2
|
+
export { a as RadioTabsProps } from '../RadioTabs-Dtcooxnl.js';
|
|
3
3
|
import 'tailwind-variants';
|
|
4
4
|
import '@fuf-stack/pixel-utils';
|
|
5
5
|
import '@fuf-stack/pixels';
|
package/dist/RadioTabs/index.js
CHANGED
|
@@ -4,71 +4,83 @@ import { TabsProps } from '@fuf-stack/pixels';
|
|
|
4
4
|
import { ReactNode, ReactElement } from 'react';
|
|
5
5
|
|
|
6
6
|
declare const radioTabsVariants: tailwind_variants.TVReturnType<{
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
base
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
cursor?: tailwind_variants.ClassValue;
|
|
14
|
-
panel?: tailwind_variants.ClassValue;
|
|
15
|
-
tabContent?: tailwind_variants.ClassValue;
|
|
16
|
-
tabList?: tailwind_variants.ClassValue;
|
|
7
|
+
hasContent: {
|
|
8
|
+
true: {
|
|
9
|
+
base: string;
|
|
10
|
+
tabBase: string;
|
|
11
|
+
tabList: string;
|
|
12
|
+
tabWrapper: string;
|
|
17
13
|
};
|
|
18
14
|
};
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
label?: tailwind_variants.ClassValue;
|
|
24
|
-
tab?: tailwind_variants.ClassValue;
|
|
25
|
-
wrapper?: tailwind_variants.ClassValue;
|
|
26
|
-
cursor?: tailwind_variants.ClassValue;
|
|
27
|
-
panel?: tailwind_variants.ClassValue;
|
|
28
|
-
tabContent?: tailwind_variants.ClassValue;
|
|
29
|
-
tabList?: tailwind_variants.ClassValue;
|
|
15
|
+
fullWidth: {
|
|
16
|
+
true: {
|
|
17
|
+
base: string;
|
|
18
|
+
tabList: string;
|
|
30
19
|
};
|
|
31
20
|
};
|
|
32
|
-
}
|
|
21
|
+
}, {
|
|
33
22
|
base: string;
|
|
23
|
+
cursor: string;
|
|
34
24
|
label: string;
|
|
35
|
-
wrapper: string;
|
|
36
|
-
tabList: string;
|
|
37
25
|
tab: string;
|
|
26
|
+
tabBase: string;
|
|
38
27
|
tabContent: string;
|
|
39
|
-
|
|
40
|
-
|
|
28
|
+
tabList: string;
|
|
29
|
+
tabPanel: string;
|
|
30
|
+
tabWrapper: string;
|
|
31
|
+
wrapper: string;
|
|
41
32
|
}, undefined, {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
base
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
cursor?: tailwind_variants.ClassValue;
|
|
49
|
-
panel?: tailwind_variants.ClassValue;
|
|
50
|
-
tabContent?: tailwind_variants.ClassValue;
|
|
51
|
-
tabList?: tailwind_variants.ClassValue;
|
|
33
|
+
hasContent: {
|
|
34
|
+
true: {
|
|
35
|
+
base: string;
|
|
36
|
+
tabBase: string;
|
|
37
|
+
tabList: string;
|
|
38
|
+
tabWrapper: string;
|
|
52
39
|
};
|
|
53
40
|
};
|
|
54
|
-
|
|
41
|
+
fullWidth: {
|
|
42
|
+
true: {
|
|
43
|
+
base: string;
|
|
44
|
+
tabList: string;
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
}, {
|
|
55
48
|
base: string;
|
|
49
|
+
cursor: string;
|
|
56
50
|
label: string;
|
|
57
|
-
wrapper: string;
|
|
58
|
-
tabList: string;
|
|
59
51
|
tab: string;
|
|
52
|
+
tabBase: string;
|
|
60
53
|
tabContent: string;
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
54
|
+
tabList: string;
|
|
55
|
+
tabPanel: string;
|
|
56
|
+
tabWrapper: string;
|
|
57
|
+
wrapper: string;
|
|
58
|
+
}, tailwind_variants.TVReturnType<{
|
|
59
|
+
hasContent: {
|
|
60
|
+
true: {
|
|
61
|
+
base: string;
|
|
62
|
+
tabBase: string;
|
|
63
|
+
tabList: string;
|
|
64
|
+
tabWrapper: string;
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
fullWidth: {
|
|
68
|
+
true: {
|
|
69
|
+
base: string;
|
|
70
|
+
tabList: string;
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
}, {
|
|
64
74
|
base: string;
|
|
75
|
+
cursor: string;
|
|
65
76
|
label: string;
|
|
66
|
-
wrapper: string;
|
|
67
|
-
tabList: string;
|
|
68
77
|
tab: string;
|
|
78
|
+
tabBase: string;
|
|
69
79
|
tabContent: string;
|
|
70
|
-
|
|
71
|
-
|
|
80
|
+
tabList: string;
|
|
81
|
+
tabPanel: string;
|
|
82
|
+
tabWrapper: string;
|
|
83
|
+
wrapper: string;
|
|
72
84
|
}, undefined, unknown, unknown, undefined>>;
|
|
73
85
|
type VariantProps = TVProps<typeof radioTabsVariants>;
|
|
74
86
|
type ClassName = TVClassName<typeof radioTabsVariants>;
|
|
@@ -86,11 +98,13 @@ interface RadioTabsOption {
|
|
|
86
98
|
/** option value */
|
|
87
99
|
value: string;
|
|
88
100
|
}
|
|
89
|
-
interface RadioTabsProps extends VariantProps {
|
|
101
|
+
interface RadioTabsProps extends Omit<VariantProps, 'hasContent'> {
|
|
90
102
|
/** CSS class name */
|
|
91
103
|
className?: ClassName;
|
|
92
104
|
/** Determines if the Buttons are disabled or not. */
|
|
93
105
|
disabled?: boolean;
|
|
106
|
+
/** Whether tabs should take up full container width */
|
|
107
|
+
fullWidth?: boolean;
|
|
94
108
|
/** determines orientation of the Buttons. */
|
|
95
109
|
inline?: boolean;
|
|
96
110
|
/** Label displayed next to the RadioButton. */
|
|
@@ -108,6 +122,6 @@ interface RadioTabsProps extends VariantProps {
|
|
|
108
122
|
* RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)
|
|
109
123
|
* and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)
|
|
110
124
|
*/
|
|
111
|
-
declare const RadioTabs: ({ className, disabled, inline, label, name, options, testId: _testId, variant, }: RadioTabsProps) => ReactElement;
|
|
125
|
+
declare const RadioTabs: ({ className, disabled, fullWidth, inline, label, name, options, testId: _testId, variant, }: RadioTabsProps) => ReactElement;
|
|
112
126
|
|
|
113
127
|
export { RadioTabs as R, type RadioTabsProps as a };
|
|
@@ -4,71 +4,83 @@ import { TabsProps } from '@fuf-stack/pixels';
|
|
|
4
4
|
import { ReactNode, ReactElement } from 'react';
|
|
5
5
|
|
|
6
6
|
declare const radioTabsVariants: tailwind_variants.TVReturnType<{
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
base
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
cursor?: tailwind_variants.ClassValue;
|
|
14
|
-
panel?: tailwind_variants.ClassValue;
|
|
15
|
-
tabContent?: tailwind_variants.ClassValue;
|
|
16
|
-
tabList?: tailwind_variants.ClassValue;
|
|
7
|
+
hasContent: {
|
|
8
|
+
true: {
|
|
9
|
+
base: string;
|
|
10
|
+
tabBase: string;
|
|
11
|
+
tabList: string;
|
|
12
|
+
tabWrapper: string;
|
|
17
13
|
};
|
|
18
14
|
};
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
label?: tailwind_variants.ClassValue;
|
|
24
|
-
tab?: tailwind_variants.ClassValue;
|
|
25
|
-
wrapper?: tailwind_variants.ClassValue;
|
|
26
|
-
cursor?: tailwind_variants.ClassValue;
|
|
27
|
-
panel?: tailwind_variants.ClassValue;
|
|
28
|
-
tabContent?: tailwind_variants.ClassValue;
|
|
29
|
-
tabList?: tailwind_variants.ClassValue;
|
|
15
|
+
fullWidth: {
|
|
16
|
+
true: {
|
|
17
|
+
base: string;
|
|
18
|
+
tabList: string;
|
|
30
19
|
};
|
|
31
20
|
};
|
|
32
|
-
}
|
|
21
|
+
}, {
|
|
33
22
|
base: string;
|
|
23
|
+
cursor: string;
|
|
34
24
|
label: string;
|
|
35
|
-
wrapper: string;
|
|
36
|
-
tabList: string;
|
|
37
25
|
tab: string;
|
|
26
|
+
tabBase: string;
|
|
38
27
|
tabContent: string;
|
|
39
|
-
|
|
40
|
-
|
|
28
|
+
tabList: string;
|
|
29
|
+
tabPanel: string;
|
|
30
|
+
tabWrapper: string;
|
|
31
|
+
wrapper: string;
|
|
41
32
|
}, undefined, {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
base
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
cursor?: tailwind_variants.ClassValue;
|
|
49
|
-
panel?: tailwind_variants.ClassValue;
|
|
50
|
-
tabContent?: tailwind_variants.ClassValue;
|
|
51
|
-
tabList?: tailwind_variants.ClassValue;
|
|
33
|
+
hasContent: {
|
|
34
|
+
true: {
|
|
35
|
+
base: string;
|
|
36
|
+
tabBase: string;
|
|
37
|
+
tabList: string;
|
|
38
|
+
tabWrapper: string;
|
|
52
39
|
};
|
|
53
40
|
};
|
|
54
|
-
|
|
41
|
+
fullWidth: {
|
|
42
|
+
true: {
|
|
43
|
+
base: string;
|
|
44
|
+
tabList: string;
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
}, {
|
|
55
48
|
base: string;
|
|
49
|
+
cursor: string;
|
|
56
50
|
label: string;
|
|
57
|
-
wrapper: string;
|
|
58
|
-
tabList: string;
|
|
59
51
|
tab: string;
|
|
52
|
+
tabBase: string;
|
|
60
53
|
tabContent: string;
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
54
|
+
tabList: string;
|
|
55
|
+
tabPanel: string;
|
|
56
|
+
tabWrapper: string;
|
|
57
|
+
wrapper: string;
|
|
58
|
+
}, tailwind_variants.TVReturnType<{
|
|
59
|
+
hasContent: {
|
|
60
|
+
true: {
|
|
61
|
+
base: string;
|
|
62
|
+
tabBase: string;
|
|
63
|
+
tabList: string;
|
|
64
|
+
tabWrapper: string;
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
fullWidth: {
|
|
68
|
+
true: {
|
|
69
|
+
base: string;
|
|
70
|
+
tabList: string;
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
}, {
|
|
64
74
|
base: string;
|
|
75
|
+
cursor: string;
|
|
65
76
|
label: string;
|
|
66
|
-
wrapper: string;
|
|
67
|
-
tabList: string;
|
|
68
77
|
tab: string;
|
|
78
|
+
tabBase: string;
|
|
69
79
|
tabContent: string;
|
|
70
|
-
|
|
71
|
-
|
|
80
|
+
tabList: string;
|
|
81
|
+
tabPanel: string;
|
|
82
|
+
tabWrapper: string;
|
|
83
|
+
wrapper: string;
|
|
72
84
|
}, undefined, unknown, unknown, undefined>>;
|
|
73
85
|
type VariantProps = TVProps<typeof radioTabsVariants>;
|
|
74
86
|
type ClassName = TVClassName<typeof radioTabsVariants>;
|
|
@@ -86,11 +98,13 @@ interface RadioTabsOption {
|
|
|
86
98
|
/** option value */
|
|
87
99
|
value: string;
|
|
88
100
|
}
|
|
89
|
-
interface RadioTabsProps extends VariantProps {
|
|
101
|
+
interface RadioTabsProps extends Omit<VariantProps, 'hasContent'> {
|
|
90
102
|
/** CSS class name */
|
|
91
103
|
className?: ClassName;
|
|
92
104
|
/** Determines if the Buttons are disabled or not. */
|
|
93
105
|
disabled?: boolean;
|
|
106
|
+
/** Whether tabs should take up full container width */
|
|
107
|
+
fullWidth?: boolean;
|
|
94
108
|
/** determines orientation of the Buttons. */
|
|
95
109
|
inline?: boolean;
|
|
96
110
|
/** Label displayed next to the RadioButton. */
|
|
@@ -108,6 +122,6 @@ interface RadioTabsProps extends VariantProps {
|
|
|
108
122
|
* RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)
|
|
109
123
|
* and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)
|
|
110
124
|
*/
|
|
111
|
-
declare const RadioTabs: ({ className, disabled, inline, label, name, options, testId: _testId, variant, }: RadioTabsProps) => ReactElement;
|
|
125
|
+
declare const RadioTabs: ({ className, disabled, fullWidth, inline, label, name, options, testId: _testId, variant, }: RadioTabsProps) => ReactElement;
|
|
112
126
|
|
|
113
127
|
export { RadioTabs as R, type RadioTabsProps as a };
|
|
@@ -18,18 +18,37 @@ var radioTabsVariants = _pixelutils.tv.call(void 0, {
|
|
|
18
18
|
slots: {
|
|
19
19
|
base: "group",
|
|
20
20
|
// Needs group for group-data condition
|
|
21
|
+
cursor: "",
|
|
21
22
|
label: "text-foreground group-data-[invalid=true]:text-danger text-sm subpixel-antialiased",
|
|
22
|
-
wrapper: "",
|
|
23
|
-
tabList: "",
|
|
24
23
|
tab: "",
|
|
24
|
+
tabBase: "",
|
|
25
25
|
tabContent: "",
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
tabList: "",
|
|
27
|
+
tabPanel: "p-3",
|
|
28
|
+
tabWrapper: "",
|
|
29
|
+
wrapper: ""
|
|
30
|
+
},
|
|
31
|
+
variants: {
|
|
32
|
+
hasContent: {
|
|
33
|
+
true: {
|
|
34
|
+
base: "w-full rounded-b-none p-1",
|
|
35
|
+
tabBase: "p-1 pb-0",
|
|
36
|
+
tabList: "w-full",
|
|
37
|
+
tabWrapper: "border-divider rounded-medium border"
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
fullWidth: {
|
|
41
|
+
true: {
|
|
42
|
+
base: "w-full",
|
|
43
|
+
tabList: "w-full"
|
|
44
|
+
}
|
|
45
|
+
}
|
|
28
46
|
}
|
|
29
47
|
});
|
|
30
48
|
var RadioTabs = ({
|
|
31
49
|
className = void 0,
|
|
32
50
|
disabled = false,
|
|
51
|
+
fullWidth = false,
|
|
33
52
|
inline = false,
|
|
34
53
|
label = void 0,
|
|
35
54
|
name,
|
|
@@ -43,7 +62,10 @@ var RadioTabs = ({
|
|
|
43
62
|
const { disabled: isDisabled, onBlur, onChange, ref, value } = field;
|
|
44
63
|
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
45
64
|
const showLabel = label != null ? label : showTestIdCopyButton;
|
|
46
|
-
const
|
|
65
|
+
const hasContent = options.some((option) => {
|
|
66
|
+
return option.content;
|
|
67
|
+
});
|
|
68
|
+
const variants = radioTabsVariants({ hasContent, fullWidth });
|
|
47
69
|
const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
|
|
48
70
|
const tabOptions = options.map((option) => {
|
|
49
71
|
var _a, _b;
|
|
@@ -64,7 +86,6 @@ var RadioTabs = ({
|
|
|
64
86
|
_radio.RadioGroup,
|
|
65
87
|
{
|
|
66
88
|
ref,
|
|
67
|
-
classNames,
|
|
68
89
|
"data-invalid": invalid,
|
|
69
90
|
"data-required": required,
|
|
70
91
|
"data-testid": testId,
|
|
@@ -74,6 +95,11 @@ var RadioTabs = ({
|
|
|
74
95
|
name,
|
|
75
96
|
onBlur,
|
|
76
97
|
orientation: inline ? "horizontal" : "vertical",
|
|
98
|
+
classNames: {
|
|
99
|
+
base: classNames.base,
|
|
100
|
+
label: classNames.label,
|
|
101
|
+
wrapper: classNames.wrapper
|
|
102
|
+
},
|
|
77
103
|
errorMessage: error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkY3AB4GV6cjs.FieldValidationError_default, { error, testId }) : void 0,
|
|
78
104
|
label: showLabel ? (
|
|
79
105
|
// eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
@@ -86,12 +112,20 @@ var RadioTabs = ({
|
|
|
86
112
|
_Tabs2.default,
|
|
87
113
|
{
|
|
88
114
|
disabledKeys: disabled ? disabledAllKeys : void 0,
|
|
89
|
-
fullWidth: false,
|
|
90
115
|
onSelectionChange: onChange,
|
|
91
116
|
selectedKey: value != null ? value : "",
|
|
92
117
|
tabs: tabOptions,
|
|
93
118
|
testId,
|
|
94
|
-
variant
|
|
119
|
+
variant,
|
|
120
|
+
className: {
|
|
121
|
+
base: classNames.tabBase,
|
|
122
|
+
cursor: classNames.cursor,
|
|
123
|
+
panel: classNames.tabPanel,
|
|
124
|
+
tab: classNames.tab,
|
|
125
|
+
tabContent: classNames.tabContent,
|
|
126
|
+
tabList: classNames.tabList,
|
|
127
|
+
tabWrapper: classNames.tabWrapper
|
|
128
|
+
}
|
|
95
129
|
}
|
|
96
130
|
)
|
|
97
131
|
}
|
|
@@ -106,4 +140,4 @@ var RadioTabs_default2 = RadioTabs_default;
|
|
|
106
140
|
|
|
107
141
|
|
|
108
142
|
exports.RadioTabs_default = RadioTabs_default; exports.RadioTabs_default2 = RadioTabs_default2;
|
|
109
|
-
//# sourceMappingURL=chunk-
|
|
143
|
+
//# sourceMappingURL=chunk-2ZBMZSZF.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-2ZBMZSZF.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-2ZBMZSZF.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 { useController, 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 cursor: '',\n label:\n 'text-foreground group-data-[invalid=true]:text-danger text-sm subpixel-antialiased',\n tab: '',\n tabBase: '',\n tabContent: '',\n tabList: '',\n tabPanel: 'p-3',\n tabWrapper: '',\n wrapper: '',\n },\n variants: {\n hasContent: {\n true: {\n base: 'w-full rounded-b-none p-1',\n tabBase: 'p-1 pb-0',\n tabList: 'w-full',\n tabWrapper: 'border-divider rounded-medium border',\n },\n },\n fullWidth: {\n true: {\n base: 'w-full',\n tabList: 'w-full',\n },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof radioTabsVariants>;\ntype ClassName = TVClassName<typeof radioTabsVariants>;\n\nexport interface RadioTabsOption {\n /** Optional content inside of the tab */\n content?: ReactNode;\n /** disables the option */\n disabled?: boolean;\n /** option label */\n label?: React.ReactNode;\n /** option icon */\n icon?: ReactNode;\n /** HTML data-testid attribute of the option */\n testId?: string;\n /** option value */\n value: string;\n}\n\nexport interface RadioTabsProps extends Omit<VariantProps, 'hasContent'> {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** Whether tabs should take up full container width */\n fullWidth?: boolean;\n /** determines orientation of the Buttons. */\n inline?: boolean;\n /** Label displayed next to the RadioButton. */\n label?: ReactNode;\n /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n name: string;\n /** Radio button configuration. */\n options: RadioTabsOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n /** How the RadioTabs should look like. */\n variant?: TabsProps['variant'];\n}\n\n/**\n * RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n * and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst RadioTabs = ({\n className = undefined,\n disabled = false,\n fullWidth = 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 } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({ control, disabled, name });\n const { disabled: isDisabled, onBlur, onChange, ref, value } = field;\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label ?? showTestIdCopyButton;\n\n // check if any option has content\n // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async\n const hasContent = options.some((option) => {\n return option.content;\n });\n\n // classNames from slots\n const variants = radioTabsVariants({ hasContent, fullWidth });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const tabOptions = options.map<TabProps>((option) => {\n return {\n content: option?.content,\n disabled: option?.disabled,\n key: option.value,\n label: option?.label ?? option?.value,\n testId: slugify(`option_${option?.testId ?? option?.value}`, {\n replaceDots: true,\n }),\n };\n });\n\n const disabledAllKeys: string[] | undefined = tabOptions?.map((option) => {\n return option.key as string;\n });\n\n return (\n <HeroRadioGroup\n ref={ref}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n classNames={{\n base: classNames.base,\n label: classNames.label,\n wrapper: classNames.wrapper,\n }}\n errorMessage={\n error ? (\n <FieldValidationError error={error} testId={testId} />\n ) : undefined\n }\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 ) : null}\n </label>\n ) : undefined\n }\n >\n <Tabs\n disabledKeys={disabled ? disabledAllKeys : undefined}\n onSelectionChange={onChange}\n // make sure component is controlled\n selectedKey={value ?? ''}\n tabs={tabOptions}\n testId={testId}\n variant={variant}\n className={{\n base: classNames.tabBase,\n cursor: classNames.cursor,\n panel: classNames.tabPanel,\n tab: classNames.tab,\n tabContent: classNames.tabContent,\n tabList: classNames.tabList,\n tabWrapper: classNames.tabWrapper,\n }}\n />\n </HeroRadioGroup>\n );\n};\n\nexport default RadioTabs;\n","import RadioTabs from './RadioTabs';\n\nexport type { RadioTabsProps } from './RadioTabs';\n\nexport { RadioTabs };\n\nexport default RadioTabs;\n"]}
|
|
@@ -18,18 +18,37 @@ var radioTabsVariants = tv({
|
|
|
18
18
|
slots: {
|
|
19
19
|
base: "group",
|
|
20
20
|
// Needs group for group-data condition
|
|
21
|
+
cursor: "",
|
|
21
22
|
label: "text-foreground group-data-[invalid=true]:text-danger text-sm subpixel-antialiased",
|
|
22
|
-
wrapper: "",
|
|
23
|
-
tabList: "",
|
|
24
23
|
tab: "",
|
|
24
|
+
tabBase: "",
|
|
25
25
|
tabContent: "",
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
tabList: "",
|
|
27
|
+
tabPanel: "p-3",
|
|
28
|
+
tabWrapper: "",
|
|
29
|
+
wrapper: ""
|
|
30
|
+
},
|
|
31
|
+
variants: {
|
|
32
|
+
hasContent: {
|
|
33
|
+
true: {
|
|
34
|
+
base: "w-full rounded-b-none p-1",
|
|
35
|
+
tabBase: "p-1 pb-0",
|
|
36
|
+
tabList: "w-full",
|
|
37
|
+
tabWrapper: "border-divider rounded-medium border"
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
fullWidth: {
|
|
41
|
+
true: {
|
|
42
|
+
base: "w-full",
|
|
43
|
+
tabList: "w-full"
|
|
44
|
+
}
|
|
45
|
+
}
|
|
28
46
|
}
|
|
29
47
|
});
|
|
30
48
|
var RadioTabs = ({
|
|
31
49
|
className = void 0,
|
|
32
50
|
disabled = false,
|
|
51
|
+
fullWidth = false,
|
|
33
52
|
inline = false,
|
|
34
53
|
label = void 0,
|
|
35
54
|
name,
|
|
@@ -43,7 +62,10 @@ var RadioTabs = ({
|
|
|
43
62
|
const { disabled: isDisabled, onBlur, onChange, ref, value } = field;
|
|
44
63
|
const showTestIdCopyButton = debugMode === "debug-testids";
|
|
45
64
|
const showLabel = label != null ? label : showTestIdCopyButton;
|
|
46
|
-
const
|
|
65
|
+
const hasContent = options.some((option) => {
|
|
66
|
+
return option.content;
|
|
67
|
+
});
|
|
68
|
+
const variants = radioTabsVariants({ hasContent, fullWidth });
|
|
47
69
|
const classNames = variantsToClassNames(variants, className, "base");
|
|
48
70
|
const tabOptions = options.map((option) => {
|
|
49
71
|
var _a, _b;
|
|
@@ -64,7 +86,6 @@ var RadioTabs = ({
|
|
|
64
86
|
HeroRadioGroup,
|
|
65
87
|
{
|
|
66
88
|
ref,
|
|
67
|
-
classNames,
|
|
68
89
|
"data-invalid": invalid,
|
|
69
90
|
"data-required": required,
|
|
70
91
|
"data-testid": testId,
|
|
@@ -74,6 +95,11 @@ var RadioTabs = ({
|
|
|
74
95
|
name,
|
|
75
96
|
onBlur,
|
|
76
97
|
orientation: inline ? "horizontal" : "vertical",
|
|
98
|
+
classNames: {
|
|
99
|
+
base: classNames.base,
|
|
100
|
+
label: classNames.label,
|
|
101
|
+
wrapper: classNames.wrapper
|
|
102
|
+
},
|
|
77
103
|
errorMessage: error ? /* @__PURE__ */ jsx(FieldValidationError_default, { error, testId }) : void 0,
|
|
78
104
|
label: showLabel ? (
|
|
79
105
|
// eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
@@ -86,12 +112,20 @@ var RadioTabs = ({
|
|
|
86
112
|
Tabs,
|
|
87
113
|
{
|
|
88
114
|
disabledKeys: disabled ? disabledAllKeys : void 0,
|
|
89
|
-
fullWidth: false,
|
|
90
115
|
onSelectionChange: onChange,
|
|
91
116
|
selectedKey: value != null ? value : "",
|
|
92
117
|
tabs: tabOptions,
|
|
93
118
|
testId,
|
|
94
|
-
variant
|
|
119
|
+
variant,
|
|
120
|
+
className: {
|
|
121
|
+
base: classNames.tabBase,
|
|
122
|
+
cursor: classNames.cursor,
|
|
123
|
+
panel: classNames.tabPanel,
|
|
124
|
+
tab: classNames.tab,
|
|
125
|
+
tabContent: classNames.tabContent,
|
|
126
|
+
tabList: classNames.tabList,
|
|
127
|
+
tabWrapper: classNames.tabWrapper
|
|
128
|
+
}
|
|
95
129
|
}
|
|
96
130
|
)
|
|
97
131
|
}
|
|
@@ -106,4 +140,4 @@ export {
|
|
|
106
140
|
RadioTabs_default,
|
|
107
141
|
RadioTabs_default2
|
|
108
142
|
};
|
|
109
|
-
//# sourceMappingURL=chunk-
|
|
143
|
+
//# sourceMappingURL=chunk-4VNCGXBX.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 { useController, 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 cursor: '',\n label:\n 'text-foreground group-data-[invalid=true]:text-danger text-sm subpixel-antialiased',\n tab: '',\n tabBase: '',\n tabContent: '',\n tabList: '',\n tabPanel: 'p-3',\n tabWrapper: '',\n wrapper: '',\n },\n variants: {\n hasContent: {\n true: {\n base: 'w-full rounded-b-none p-1',\n tabBase: 'p-1 pb-0',\n tabList: 'w-full',\n tabWrapper: 'border-divider rounded-medium border',\n },\n },\n fullWidth: {\n true: {\n base: 'w-full',\n tabList: 'w-full',\n },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof radioTabsVariants>;\ntype ClassName = TVClassName<typeof radioTabsVariants>;\n\nexport interface RadioTabsOption {\n /** Optional content inside of the tab */\n content?: ReactNode;\n /** disables the option */\n disabled?: boolean;\n /** option label */\n label?: React.ReactNode;\n /** option icon */\n icon?: ReactNode;\n /** HTML data-testid attribute of the option */\n testId?: string;\n /** option value */\n value: string;\n}\n\nexport interface RadioTabsProps extends Omit<VariantProps, 'hasContent'> {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** Whether tabs should take up full container width */\n fullWidth?: boolean;\n /** determines orientation of the Buttons. */\n inline?: boolean;\n /** Label displayed next to the RadioButton. */\n label?: ReactNode;\n /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n name: string;\n /** Radio button configuration. */\n options: RadioTabsOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n /** How the RadioTabs should look like. */\n variant?: TabsProps['variant'];\n}\n\n/**\n * RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n * and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst RadioTabs = ({\n className = undefined,\n disabled = false,\n fullWidth = 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 } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({ control, disabled, name });\n const { disabled: isDisabled, onBlur, onChange, ref, value } = field;\n\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const showLabel = label ?? showTestIdCopyButton;\n\n // check if any option has content\n // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async\n const hasContent = options.some((option) => {\n return option.content;\n });\n\n // classNames from slots\n const variants = radioTabsVariants({ hasContent, fullWidth });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const tabOptions = options.map<TabProps>((option) => {\n return {\n content: option?.content,\n disabled: option?.disabled,\n key: option.value,\n label: option?.label ?? option?.value,\n testId: slugify(`option_${option?.testId ?? option?.value}`, {\n replaceDots: true,\n }),\n };\n });\n\n const disabledAllKeys: string[] | undefined = tabOptions?.map((option) => {\n return option.key as string;\n });\n\n return (\n <HeroRadioGroup\n ref={ref}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n classNames={{\n base: classNames.base,\n label: classNames.label,\n wrapper: classNames.wrapper,\n }}\n errorMessage={\n error ? (\n <FieldValidationError error={error} testId={testId} />\n ) : undefined\n }\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 ) : null}\n </label>\n ) : undefined\n }\n >\n <Tabs\n disabledKeys={disabled ? disabledAllKeys : undefined}\n onSelectionChange={onChange}\n // make sure component is controlled\n selectedKey={value ?? ''}\n tabs={tabOptions}\n testId={testId}\n variant={variant}\n className={{\n base: classNames.tabBase,\n cursor: classNames.cursor,\n panel: classNames.tabPanel,\n tab: classNames.tab,\n tabContent: classNames.tabContent,\n tabList: classNames.tabList,\n tabWrapper: classNames.tabWrapper,\n }}\n />\n </HeroRadioGroup>\n );\n};\n\nexport default RadioTabs;\n","import RadioTabs from './RadioTabs';\n\nexport type { RadioTabsProps } from './RadioTabs';\n\nexport { RadioTabs };\n\nexport default RadioTabs;\n"],"mappings":"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","names":["RadioTabs_default"]}
|
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunk2ZBMZSZFcjs = require('./chunk-2ZBMZSZF.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
var _chunkAYNTZPKLcjs = require('./chunk-AYNTZPKL.cjs');
|
|
@@ -88,5 +88,5 @@ require('./chunk-555JRYCS.cjs');
|
|
|
88
88
|
|
|
89
89
|
|
|
90
90
|
|
|
91
|
-
exports.CheckboxGroup = _chunkN2EEOWEPcjs.CheckboxGroup_default; exports.FieldArray = _chunkJZF4HUYOcjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkOE5BOGGXcjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkY3AB4GV6cjs.FieldValidationError_default; exports.Form = _chunkFOVP54XPcjs.Form_default; exports.Grid = _chunkTTD3KL6Ecjs.Grid_default; exports.Input = _chunk77C6VN4Lcjs.Input_default; exports.RadioBoxes = _chunkULR4573Wcjs.RadioBoxes_default; exports.RadioGroup = _chunkEEBHFSBYcjs.RadioGroup_default; exports.RadioTabs =
|
|
91
|
+
exports.CheckboxGroup = _chunkN2EEOWEPcjs.CheckboxGroup_default; exports.FieldArray = _chunkJZF4HUYOcjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkOE5BOGGXcjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkY3AB4GV6cjs.FieldValidationError_default; exports.Form = _chunkFOVP54XPcjs.Form_default; exports.Grid = _chunkTTD3KL6Ecjs.Grid_default; exports.Input = _chunk77C6VN4Lcjs.Input_default; exports.RadioBoxes = _chunkULR4573Wcjs.RadioBoxes_default; exports.RadioGroup = _chunkEEBHFSBYcjs.RadioGroup_default; exports.RadioTabs = _chunk2ZBMZSZFcjs.RadioTabs_default; exports.Select = _chunkAYNTZPKLcjs.Select_default; exports.SubmitButton = _chunkC64RKQEWcjs.SubmitButton_default; exports.Switch = _chunkUGCZORU3cjs.Switch_default; exports.TextArea = _chunkRDBCJJI7cjs.TextArea_default; exports.checkFieldIsRequired = _chunk2GYFDVXXcjs.checkFieldIsRequired; exports.fromNullishString = _chunkYGNY6CKUcjs.fromNullishString; exports.toFormFormat = _chunkYGNY6CKUcjs.toFormFormat; exports.toNullishString = _chunkYGNY6CKUcjs.toNullishString; exports.toValidationFormat = _chunkYGNY6CKUcjs.toValidationFormat; exports.useClientValidation = _chunk2GYFDVXXcjs.useClientValidation; exports.useController = _chunk2GYFDVXXcjs.useController; exports.useFieldArray = _chunk2GYFDVXXcjs.useFieldArray; exports.useFormContext = _chunk2GYFDVXXcjs.useFormContext; exports.useInput = _chunk2GYFDVXXcjs.useInput; exports.useInputValueDebounce = _chunkFLK6OPFYcjs.useInputValueDebounce; exports.useInputValueTransform = _chunkP6HJOG7Dcjs.useInputValueTransform;
|
|
92
92
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.d.cts
CHANGED
|
@@ -13,7 +13,7 @@ export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './F
|
|
|
13
13
|
export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-CU_xw0BL.cjs';
|
|
14
14
|
export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-CE3mYoFk.cjs';
|
|
15
15
|
export { R as RadioGroup, a as RadioGroupProps } from './RadioGroup-CAOX80Xx.cjs';
|
|
16
|
-
export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-
|
|
16
|
+
export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-Dtcooxnl.cjs';
|
|
17
17
|
export { S as Select, a as SelectProps } from './Select-CTRWinmO.cjs';
|
|
18
18
|
export { S as SubmitButton, a as SubmitButtonProps } from './SubmitButton-DqaxyVpp.cjs';
|
|
19
19
|
export { S as Switch, a as SwitchProps } from './Switch-Hr6PnK98.cjs';
|
package/dist/index.d.ts
CHANGED
|
@@ -13,7 +13,7 @@ export { F as FieldCopyTestIdButton, a as FieldCopyTestIdButtonProps } from './F
|
|
|
13
13
|
export { F as FieldValidationError, a as FieldValidationErrorProps } from './FieldValidationError-CU_xw0BL.js';
|
|
14
14
|
export { R as RadioBoxes, a as RadioBoxesProps } from './RadioBoxes-CE3mYoFk.js';
|
|
15
15
|
export { R as RadioGroup, a as RadioGroupProps } from './RadioGroup-CAOX80Xx.js';
|
|
16
|
-
export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-
|
|
16
|
+
export { R as RadioTabs, a as RadioTabsProps } from './RadioTabs-Dtcooxnl.js';
|
|
17
17
|
export { S as Select, a as SelectProps } from './Select-CTRWinmO.js';
|
|
18
18
|
export { S as SubmitButton, a as SubmitButtonProps } from './SubmitButton-DqaxyVpp.js';
|
|
19
19
|
export { S as Switch, a as SwitchProps } from './Switch-Hr6PnK98.js';
|
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fuf-stack/uniform",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "fuf react form library",
|
|
5
5
|
"author": "Fröhlich ∧ Frei",
|
|
6
6
|
"homepage": "https://github.com/fuf-stack/pixels#readme",
|
|
@@ -138,18 +138,18 @@
|
|
|
138
138
|
"@heroui/switch": "2.2.22",
|
|
139
139
|
"@heroui/system": "2.4.20",
|
|
140
140
|
"@heroui/theme": "2.4.20",
|
|
141
|
-
"@react-aria/visually-hidden": "3.8.
|
|
141
|
+
"@react-aria/visually-hidden": "3.8.28",
|
|
142
142
|
"framer-motion": "12.23.22",
|
|
143
143
|
"react-icons": "5.5.0",
|
|
144
144
|
"react-hook-form": "7.55.0",
|
|
145
145
|
"react-select": "5.10.2",
|
|
146
|
-
"@fuf-stack/pixels": "1.3.6",
|
|
147
146
|
"@fuf-stack/veto": "0.12.6",
|
|
148
|
-
"@fuf-stack/pixel-utils": "1.0.5"
|
|
147
|
+
"@fuf-stack/pixel-utils": "1.0.5",
|
|
148
|
+
"@fuf-stack/pixels": "1.3.6"
|
|
149
149
|
},
|
|
150
150
|
"devDependencies": {
|
|
151
151
|
"@types/debug": "4.1.12",
|
|
152
|
-
"@types/react": "19.1.
|
|
152
|
+
"@types/react": "19.1.16",
|
|
153
153
|
"@types/react-dom": "19.1.9",
|
|
154
154
|
"react": "19.1.1",
|
|
155
155
|
"react-dom": "19.1.1"
|
|
@@ -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 { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { useController, 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-foreground group-data-[invalid=true]:text-danger text-sm subpixel-antialiased',\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 } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({ control, disabled, name });\n const { disabled: isDisabled, onBlur, onChange, ref, value } = field;\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 return {\n content: option?.content,\n disabled: option?.disabled,\n key: option.value,\n label: option?.label ?? option?.value,\n testId: slugify(`option_${option?.testId ?? option?.value}`, {\n replaceDots: true,\n }),\n };\n });\n\n const disabledAllKeys: string[] | undefined = tabOptions?.map((option) => {\n return option.key as string;\n });\n\n return (\n <HeroRadioGroup\n ref={ref}\n classNames={classNames}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n errorMessage={\n error ? (\n <FieldValidationError error={error} testId={testId} />\n ) : undefined\n }\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 ) : null}\n </label>\n ) : undefined\n }\n >\n <Tabs\n disabledKeys={disabled ? disabledAllKeys : undefined}\n fullWidth={false}\n onSelectionChange={onChange}\n // make sure component is controlled\n selectedKey={value ?? ''}\n tabs={tabOptions}\n testId={testId}\n variant={variant}\n />\n </HeroRadioGroup>\n );\n};\n\nexport default RadioTabs;\n","import RadioTabs from './RadioTabs';\n\nexport type { RadioTabsProps } from './RadioTabs';\n\nexport { RadioTabs };\n\nexport default RadioTabs;\n"],"mappings":";;;;;;;;;;;;AAKA,SAAS,cAAc,sBAAsB;AAE7C,SAAS,SAAS,IAAI,4BAA4B;AAClD,OAAO,UAAU;AAoHP,cAMA,YANA;AA9GH,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,cAAc,IAAI,eAAe;AAC7D,QAAM,EAAE,OAAO,SAAS,UAAU,OAAO,IAAI,cAAc,MAAM,OAAO;AAExE,QAAM,EAAE,MAAM,IAAI,cAAc,EAAE,SAAS,UAAU,KAAK,CAAC;AAC3D,QAAM,EAAE,UAAU,YAAY,QAAQ,UAAU,KAAK,MAAM,IAAI;AAE/D,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YAAY,wBAAS;AAE3B,QAAM,WAAW,kBAAkB;AACnC,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,QAAM,aAAa,QAAQ,IAAc,CAAC,WAAW;AA3FvD;AA4FI,WAAO;AAAA,MACL,SAAS,iCAAQ;AAAA,MACjB,UAAU,iCAAQ;AAAA,MAClB,KAAK,OAAO;AAAA,MACZ,QAAO,sCAAQ,UAAR,YAAiB,iCAAQ;AAAA,MAChC,QAAQ,QAAQ,WAAU,sCAAQ,WAAR,YAAkB,iCAAQ,KAAK,IAAI;AAAA,QAC3D,aAAa;AAAA,MACf,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,QAAM,kBAAwC,yCAAY,IAAI,CAAC,WAAW;AACxE,WAAO,OAAO;AAAA,EAChB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MAGA,gBAAc;AAAA,MACd,iBAAe;AAAA,MACf,eAAa;AAAA,MACb;AAAA,MACA,WAAW;AAAA,MACX,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,aAAa,SAAS,eAAe;AAAA,MACrC,cACE,QACE,oBAAC,gCAAqB,OAAc,QAAgB,IAClD;AAAA,MAEN,OACE;AAAA;AAAA,QAEE,qBAAC,WACE;AAAA;AAAA,UACA,uBACC,oBAAC,iCAAsB,QAAgB,IACrC;AAAA,WACN;AAAA,UACE;AAAA,MAGN;AAAA,QAAC;AAAA;AAAA,UACC,cAAc,WAAW,kBAAkB;AAAA,UAC3C,WAAW;AAAA,UACX,mBAAmB;AAAA,UAEnB,aAAa,wBAAS;AAAA,UACtB,MAAM;AAAA,UACN;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,oBAAQ;;;ACnJf,IAAOA,qBAAQ;","names":["RadioTabs_default"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-VPTOKYJG.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-VPTOKYJG.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 { useController, 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-foreground group-data-[invalid=true]:text-danger text-sm subpixel-antialiased',\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 } = useFormContext();\n const { error, invalid, required, testId } = getFieldState(name, _testId);\n\n const { field } = useController({ control, disabled, name });\n const { disabled: isDisabled, onBlur, onChange, ref, value } = field;\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 return {\n content: option?.content,\n disabled: option?.disabled,\n key: option.value,\n label: option?.label ?? option?.value,\n testId: slugify(`option_${option?.testId ?? option?.value}`, {\n replaceDots: true,\n }),\n };\n });\n\n const disabledAllKeys: string[] | undefined = tabOptions?.map((option) => {\n return option.key as string;\n });\n\n return (\n <HeroRadioGroup\n ref={ref}\n classNames={classNames}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n isDisabled={isDisabled}\n isInvalid={invalid}\n isRequired={required}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n errorMessage={\n error ? (\n <FieldValidationError error={error} testId={testId} />\n ) : undefined\n }\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 ) : null}\n </label>\n ) : undefined\n }\n >\n <Tabs\n disabledKeys={disabled ? disabledAllKeys : undefined}\n fullWidth={false}\n onSelectionChange={onChange}\n // make sure component is controlled\n selectedKey={value ?? ''}\n tabs={tabOptions}\n testId={testId}\n variant={variant}\n />\n </HeroRadioGroup>\n );\n};\n\nexport default RadioTabs;\n","import RadioTabs from './RadioTabs';\n\nexport type { RadioTabsProps } from './RadioTabs';\n\nexport { RadioTabs };\n\nexport default RadioTabs;\n"]}
|