infinity-ui-elements 1.8.28 → 1.8.30
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/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/components/Radio/RadioGroup.d.ts +132 -0
- package/dist/components/Radio/RadioGroup.d.ts.map +1 -0
- package/dist/components/Radio/RadioGroup.stories.d.ts +32 -0
- package/dist/components/Radio/RadioGroup.stories.d.ts.map +1 -0
- package/dist/components/Radio/index.d.ts +2 -0
- package/dist/components/Radio/index.d.ts.map +1 -1
- package/dist/components/Select/Select.d.ts +5 -0
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/Select.stories.d.ts +1 -0
- package/dist/components/Select/Select.stories.d.ts.map +1 -1
- package/dist/index.esm.js +139 -7
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +138 -5
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,kCAAkC,CAAC;AAU1C,QAAA,MAAM,kBAAkB;;;;mFAyCvB,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,GAAG,cAAc,CAC5B;IACD;;OAEG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;IACnD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAChE;AAqBD,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,kCAAkC,CAAC;AAU1C,QAAA,MAAM,kBAAkB;;;;mFAyCvB,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,GAAG,cAAc,CAC5B;IACD;;OAEG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;IACnD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAChE;AAqBD,eAAO,MAAM,UAAU,wFAiVtB,CAAC;AAIF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export interface RadioOption {
|
|
3
|
+
/**
|
|
4
|
+
* The value of the radio option
|
|
5
|
+
*/
|
|
6
|
+
value: string;
|
|
7
|
+
/**
|
|
8
|
+
* The label text for the radio option
|
|
9
|
+
*/
|
|
10
|
+
label: string;
|
|
11
|
+
/**
|
|
12
|
+
* Whether this option is disabled
|
|
13
|
+
*/
|
|
14
|
+
isDisabled?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Custom class name for the option container
|
|
17
|
+
*/
|
|
18
|
+
containerClassName?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Custom class name for the option label
|
|
21
|
+
*/
|
|
22
|
+
labelClassName?: string;
|
|
23
|
+
}
|
|
24
|
+
export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
|
|
25
|
+
/**
|
|
26
|
+
* Selected value (controlled)
|
|
27
|
+
*/
|
|
28
|
+
value?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Default selected value (uncontrolled)
|
|
31
|
+
*/
|
|
32
|
+
defaultValue?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Callback when selection changes
|
|
35
|
+
*/
|
|
36
|
+
onChange?: (value: string) => void;
|
|
37
|
+
/**
|
|
38
|
+
* Array of radio options
|
|
39
|
+
*/
|
|
40
|
+
options?: RadioOption[];
|
|
41
|
+
/**
|
|
42
|
+
* Custom radio buttons as children (alternative to options)
|
|
43
|
+
*/
|
|
44
|
+
children?: React.ReactNode;
|
|
45
|
+
/**
|
|
46
|
+
* Label for the radio group
|
|
47
|
+
*/
|
|
48
|
+
label?: string;
|
|
49
|
+
/**
|
|
50
|
+
* Helper text below the radio group
|
|
51
|
+
*/
|
|
52
|
+
helperText?: string;
|
|
53
|
+
/**
|
|
54
|
+
* Error text (overrides helperText when present)
|
|
55
|
+
*/
|
|
56
|
+
errorText?: string;
|
|
57
|
+
/**
|
|
58
|
+
* Success text (overrides helperText when present)
|
|
59
|
+
*/
|
|
60
|
+
successText?: string;
|
|
61
|
+
/**
|
|
62
|
+
* Validation state for the radio group
|
|
63
|
+
*/
|
|
64
|
+
validationState?: "none" | "error";
|
|
65
|
+
/**
|
|
66
|
+
* Whether the radio group is disabled
|
|
67
|
+
*/
|
|
68
|
+
isDisabled?: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Whether the radio group is required
|
|
71
|
+
*/
|
|
72
|
+
isRequired?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* Whether the radio group is optional
|
|
75
|
+
*/
|
|
76
|
+
isOptional?: boolean;
|
|
77
|
+
/**
|
|
78
|
+
* Size of the radio buttons
|
|
79
|
+
*/
|
|
80
|
+
size?: "small" | "medium" | "large";
|
|
81
|
+
/**
|
|
82
|
+
* Name attribute for the radio inputs (auto-generated if not provided)
|
|
83
|
+
*/
|
|
84
|
+
name?: string;
|
|
85
|
+
/**
|
|
86
|
+
* Orientation of the radio group
|
|
87
|
+
*/
|
|
88
|
+
orientation?: "horizontal" | "vertical";
|
|
89
|
+
/**
|
|
90
|
+
* Spacing between radio options
|
|
91
|
+
*/
|
|
92
|
+
spacing?: "tight" | "normal" | "loose";
|
|
93
|
+
/**
|
|
94
|
+
* Custom class for the container
|
|
95
|
+
*/
|
|
96
|
+
containerClassName?: string;
|
|
97
|
+
/**
|
|
98
|
+
* Custom class for the label
|
|
99
|
+
*/
|
|
100
|
+
labelClassName?: string;
|
|
101
|
+
/**
|
|
102
|
+
* Custom class for the radio group wrapper
|
|
103
|
+
*/
|
|
104
|
+
groupClassName?: string;
|
|
105
|
+
/**
|
|
106
|
+
* Info heading for tooltip
|
|
107
|
+
*/
|
|
108
|
+
infoHeading?: string;
|
|
109
|
+
/**
|
|
110
|
+
* Info description for tooltip
|
|
111
|
+
*/
|
|
112
|
+
infoDescription?: string;
|
|
113
|
+
/**
|
|
114
|
+
* Custom Link component to render on the right side
|
|
115
|
+
*/
|
|
116
|
+
LinkComponent?: React.ReactNode;
|
|
117
|
+
/**
|
|
118
|
+
* Link text
|
|
119
|
+
*/
|
|
120
|
+
linkText?: string;
|
|
121
|
+
/**
|
|
122
|
+
* Link href
|
|
123
|
+
*/
|
|
124
|
+
linkHref?: string;
|
|
125
|
+
/**
|
|
126
|
+
* Link click handler
|
|
127
|
+
*/
|
|
128
|
+
onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
129
|
+
}
|
|
130
|
+
declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
131
|
+
export { RadioGroup };
|
|
132
|
+
//# sourceMappingURL=RadioGroup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IAC/E;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,QAAA,MAAM,UAAU,wFA4Pf,CAAC;AAIF,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: import("react").ForwardRefExoticComponent<import("./RadioGroup").RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
|
+
parameters: {
|
|
6
|
+
layout: string;
|
|
7
|
+
};
|
|
8
|
+
tags: string[];
|
|
9
|
+
};
|
|
10
|
+
export default meta;
|
|
11
|
+
type Story = StoryObj<typeof meta>;
|
|
12
|
+
export declare const Default: Story;
|
|
13
|
+
export declare const WithDefaultValue: Story;
|
|
14
|
+
export declare const Controlled: Story;
|
|
15
|
+
export declare const WithHelperText: Story;
|
|
16
|
+
export declare const WithError: Story;
|
|
17
|
+
export declare const WithSuccess: Story;
|
|
18
|
+
export declare const Required: Story;
|
|
19
|
+
export declare const Optional: Story;
|
|
20
|
+
export declare const Disabled: Story;
|
|
21
|
+
export declare const WithDisabledOption: Story;
|
|
22
|
+
export declare const Horizontal: Story;
|
|
23
|
+
export declare const Vertical: Story;
|
|
24
|
+
export declare const Spacing: Story;
|
|
25
|
+
export declare const Sizes: Story;
|
|
26
|
+
export declare const WithChildren: Story;
|
|
27
|
+
export declare const WithInfoTooltip: Story;
|
|
28
|
+
export declare const WithLink: Story;
|
|
29
|
+
export declare const ManyOptions: Story;
|
|
30
|
+
export declare const HorizontalManyOptions: Story;
|
|
31
|
+
export declare const AllStates: Story;
|
|
32
|
+
//# sourceMappingURL=RadioGroup.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/RadioGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,QAAA,MAAM,IAAI;;;;;;;CAOyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAQnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAShC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAoBnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAcnC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAkCvB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC/C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC/C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC"}
|
|
@@ -90,6 +90,11 @@ export interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
90
90
|
* Callback when clear button is clicked
|
|
91
91
|
*/
|
|
92
92
|
onClear?: () => void;
|
|
93
|
+
/**
|
|
94
|
+
* Show the selected option's leadingIcon in the input box
|
|
95
|
+
* Only shown when an option is selected and has a leadingIcon
|
|
96
|
+
*/
|
|
97
|
+
showLeadingIcon?: boolean;
|
|
93
98
|
/**
|
|
94
99
|
* Custom class for the container
|
|
95
100
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -27,6 +27,7 @@ export declare const Loading: Story;
|
|
|
27
27
|
export declare const Empty: Story;
|
|
28
28
|
export declare const Controlled: Story;
|
|
29
29
|
export declare const WithIcons: Story;
|
|
30
|
+
export declare const WithLeadingIcon: Story;
|
|
30
31
|
export declare const InForm: Story;
|
|
31
32
|
export declare const AllVariations: Story;
|
|
32
33
|
//# sourceMappingURL=Select.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAYlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA4B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAkFrC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAS9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAa9B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAShC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KASjC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA0BxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAmCvB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KA8DpB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAwD3B,CAAC"}
|
|
1
|
+
{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAYlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA4B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAkFrC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAS9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAa9B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAShC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KASjC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA0BxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAmCvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAmC7B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KA8DpB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAwD3B,CAAC"}
|
package/dist/index.esm.js
CHANGED
|
@@ -5,7 +5,7 @@ import { Slot } from '@radix-ui/react-slot';
|
|
|
5
5
|
import { PulseLoader, ClipLoader } from 'react-spinners';
|
|
6
6
|
import { clsx } from 'clsx';
|
|
7
7
|
import { twMerge } from 'tailwind-merge';
|
|
8
|
-
import { ExternalLink, Calendar, Loader2, Search, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
|
|
8
|
+
import { ExternalLink, Calendar, X, Loader2, Search, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
|
|
9
9
|
import Calendar$1 from 'react-calendar';
|
|
10
10
|
import 'react-calendar/dist/Calendar.css';
|
|
11
11
|
import { createPortal } from 'react-dom';
|
|
@@ -2077,7 +2077,7 @@ const formatDateDefault = (date) => {
|
|
|
2077
2077
|
day: "numeric",
|
|
2078
2078
|
});
|
|
2079
2079
|
};
|
|
2080
|
-
const DatePicker = React.forwardRef(({ className, value: controlledValue, defaultValue, onChange, placeholder = "Select a date", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", showClearButton =
|
|
2080
|
+
const DatePicker = React.forwardRef(({ className, value: controlledValue, defaultValue, onChange, placeholder = "Select a date", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", showClearButton = true, onClear, containerClassName, labelClassName, triggerClassName, calendarClassName, minDate, maxDate, formatDate = formatDateDefault, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
|
|
2081
2081
|
const [uncontrolledValue, setUncontrolledValue] = React.useState(parseDate(defaultValue));
|
|
2082
2082
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
2083
2083
|
const datePickerRef = React.useRef(null);
|
|
@@ -2230,7 +2230,7 @@ const DatePicker = React.forwardRef(({ className, value: controlledValue, defaul
|
|
|
2230
2230
|
? "text-feedback-ink-positive-intense"
|
|
2231
2231
|
: currentValidationState === "negative"
|
|
2232
2232
|
? "text-feedback-ink-negative-subtle"
|
|
2233
|
-
: "text-surface-ink-neutral-muted") }), jsx("span", { className: cn("flex-1 text-left truncate", !hasValue && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: hasValue && value ? formatDate(value) : placeholder }), showClearButton && hasValue && !isDisabled && (jsx("button", { type: "button", onClick: handleClear, className: "shrink-0 flex items-center justify-center text-surface-ink-neutral-muted hover:text-surface-ink-neutral-normal transition-colors", tabIndex: -1,
|
|
2233
|
+
: "text-surface-ink-neutral-muted") }), jsx("span", { className: cn("flex-1 text-left truncate", !hasValue && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: hasValue && value ? formatDate(value) : placeholder }), showClearButton && hasValue && !isDisabled && (jsx("button", { type: "button", onClick: handleClear, className: "shrink-0 flex items-center justify-center text-surface-ink-neutral-muted hover:text-surface-ink-neutral-normal transition-colors", tabIndex: -1, "aria-label": "Clear date", children: jsx(X, { className: "w-4 h-4" }) })), isOpen && !isDisabled && (jsx("div", { ref: calendarRef, className: cn("absolute z-50 left-0 bg-surface-fill-neutral-intense rounded-large shadow-lg p-4", dropdownPlacement === "bottom"
|
|
2234
2234
|
? "top-full mt-1"
|
|
2235
2235
|
: "bottom-full mb-1", calendarClassName), onClick: (e) => e.stopPropagation(), children: jsx("div", { className: "react-calendar-wrapper w-fit", children: jsx(Calendar$1, { onChange: handleCalendarChange, value: value ?? null, minDate: minDateParsed ?? undefined, maxDate: maxDateParsed ?? undefined, locale: "en-US", formatShortWeekday: (locale, date) => {
|
|
2236
2236
|
const weekdayNames = [
|
|
@@ -2597,7 +2597,7 @@ const selectVariants = cva("relative flex items-center gap-2 border rounded-larg
|
|
|
2597
2597
|
isDisabled: false,
|
|
2598
2598
|
},
|
|
2599
2599
|
});
|
|
2600
|
-
const Select = React.forwardRef(({ className, options = [], value: controlledValue, defaultValue, onChange, placeholder = "Select an option", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, isLoading = false, size = "medium", prefix, suffix, showClearButton = false, onClear, containerClassName, labelClassName, triggerClassName, menuClassName, menuWidth = "full", sectionHeading, emptyTitle = "No options available", emptyDescription = "There are no options to select from.", emptyIcon, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
|
|
2600
|
+
const Select = React.forwardRef(({ className, options = [], value: controlledValue, defaultValue, onChange, placeholder = "Select an option", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, isLoading = false, size = "medium", prefix, suffix, showClearButton = false, onClear, showLeadingIcon = false, containerClassName, labelClassName, triggerClassName, menuClassName, menuWidth = "full", sectionHeading, emptyTitle = "No options available", emptyDescription = "There are no options to select from.", emptyIcon, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
|
|
2601
2601
|
const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
|
|
2602
2602
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
2603
2603
|
const [dropdownPlacement, setDropdownPlacement] = React.useState("bottom");
|
|
@@ -2776,13 +2776,19 @@ const Select = React.forwardRef(({ className, options = [], value: controlledVal
|
|
|
2776
2776
|
size,
|
|
2777
2777
|
validationState: currentValidationState,
|
|
2778
2778
|
isDisabled,
|
|
2779
|
-
}), "relative w-full cursor-pointer", className), onClick: !isDisabled && !isLoading ? toggleOpen : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-disabled": isDisabled, ...props, children: [prefix
|
|
2779
|
+
}), "relative w-full cursor-pointer", className), onClick: !isDisabled && !isLoading ? toggleOpen : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-disabled": isDisabled, ...props, children: [prefix ? (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
|
|
2780
2780
|
? "text-surface-ink-neutral-disabled"
|
|
2781
2781
|
: currentValidationState === "positive"
|
|
2782
2782
|
? "text-feedback-ink-positive-intense"
|
|
2783
2783
|
: currentValidationState === "negative"
|
|
2784
2784
|
? "text-feedback-ink-negative-subtle"
|
|
2785
|
-
: "text-surface-ink-neutral-muted"), children: prefix }))
|
|
2785
|
+
: "text-surface-ink-neutral-muted"), children: prefix })) : showLeadingIcon && selectedOption?.leadingIcon ? (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
|
|
2786
|
+
? "text-surface-ink-neutral-disabled"
|
|
2787
|
+
: currentValidationState === "positive"
|
|
2788
|
+
? "text-feedback-ink-positive-intense"
|
|
2789
|
+
: currentValidationState === "negative"
|
|
2790
|
+
? "text-feedback-ink-negative-subtle"
|
|
2791
|
+
: "text-surface-ink-neutral-muted"), children: selectedOption.leadingIcon })) : null, jsx("span", { className: cn("flex-1 text-left truncate", !selectedOption && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: isLoading ? "Loading..." : selectedOption?.label || placeholder }), showClearButton && hasValue && !isDisabled && !isLoading && (jsx("button", { type: "button", onClick: handleClear, className: "shrink-0 flex items-center justify-center text-surface-ink-neutral-muted hover:text-surface-ink-neutral-normal transition-colors", tabIndex: -1, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), suffix && !showClearButton && (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
|
|
2786
2792
|
? "text-surface-ink-neutral-disabled"
|
|
2787
2793
|
: currentValidationState === "positive"
|
|
2788
2794
|
? "text-feedback-ink-positive-intense"
|
|
@@ -3092,6 +3098,132 @@ const Radio = React.forwardRef(({ label, errorText, size = "medium", validationS
|
|
|
3092
3098
|
});
|
|
3093
3099
|
Radio.displayName = "Radio";
|
|
3094
3100
|
|
|
3101
|
+
const RadioGroup = React.forwardRef(({ value: controlledValue, defaultValue, onChange, options, children, label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", name: nameProp, orientation = "vertical", spacing = "normal", containerClassName, labelClassName, groupClassName, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, className, id, ...props }, ref) => {
|
|
3102
|
+
const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
|
|
3103
|
+
const groupId = React.useId();
|
|
3104
|
+
const name = nameProp || `radio-group-${groupId}`;
|
|
3105
|
+
const groupRef = React.useRef(null);
|
|
3106
|
+
const radioRefs = React.useRef([]);
|
|
3107
|
+
const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
|
|
3108
|
+
// Determine which helper text to show
|
|
3109
|
+
const displayHelperText = errorText || successText || helperText;
|
|
3110
|
+
const currentValidationState = errorText ? "error" : validationState;
|
|
3111
|
+
const handleChange = (optionValue) => {
|
|
3112
|
+
if (onChange) {
|
|
3113
|
+
onChange(optionValue);
|
|
3114
|
+
}
|
|
3115
|
+
else {
|
|
3116
|
+
setUncontrolledValue(optionValue);
|
|
3117
|
+
}
|
|
3118
|
+
};
|
|
3119
|
+
// Keyboard navigation
|
|
3120
|
+
const handleKeyDown = (e) => {
|
|
3121
|
+
if (isDisabled)
|
|
3122
|
+
return;
|
|
3123
|
+
const currentIndex = radioRefs.current.findIndex((ref) => ref === document.activeElement);
|
|
3124
|
+
if (currentIndex === -1)
|
|
3125
|
+
return;
|
|
3126
|
+
const direction = orientation === "horizontal"
|
|
3127
|
+
? (e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0)
|
|
3128
|
+
: (e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0);
|
|
3129
|
+
if (direction === 0)
|
|
3130
|
+
return;
|
|
3131
|
+
e.preventDefault();
|
|
3132
|
+
// Find next enabled radio
|
|
3133
|
+
let nextIndex = currentIndex;
|
|
3134
|
+
const total = radioRefs.current.length;
|
|
3135
|
+
let attempts = 0;
|
|
3136
|
+
while (attempts < total) {
|
|
3137
|
+
nextIndex = (nextIndex + direction + total) % total;
|
|
3138
|
+
const nextRadio = radioRefs.current[nextIndex];
|
|
3139
|
+
if (nextRadio && !nextRadio.disabled) {
|
|
3140
|
+
nextRadio.focus();
|
|
3141
|
+
nextRadio.click();
|
|
3142
|
+
return;
|
|
3143
|
+
}
|
|
3144
|
+
attempts++;
|
|
3145
|
+
}
|
|
3146
|
+
};
|
|
3147
|
+
// Spacing configuration
|
|
3148
|
+
const spacingConfig = {
|
|
3149
|
+
tight: orientation === "horizontal" ? "gap-3" : "gap-2",
|
|
3150
|
+
normal: orientation === "horizontal" ? "gap-4" : "gap-3",
|
|
3151
|
+
loose: orientation === "horizontal" ? "gap-6" : "gap-4",
|
|
3152
|
+
};
|
|
3153
|
+
// Size configuration
|
|
3154
|
+
const sizeConfig = {
|
|
3155
|
+
small: {
|
|
3156
|
+
gap: "gap-2",
|
|
3157
|
+
},
|
|
3158
|
+
medium: {
|
|
3159
|
+
gap: "gap-2",
|
|
3160
|
+
},
|
|
3161
|
+
large: {
|
|
3162
|
+
gap: "gap-3",
|
|
3163
|
+
},
|
|
3164
|
+
};
|
|
3165
|
+
// Render options from array
|
|
3166
|
+
const renderOptions = () => {
|
|
3167
|
+
if (!options)
|
|
3168
|
+
return null;
|
|
3169
|
+
return options.map((option, index) => {
|
|
3170
|
+
const isChecked = value === option.value;
|
|
3171
|
+
const optionDisabled = isDisabled || option.isDisabled;
|
|
3172
|
+
return (jsx(Radio, { ref: (el) => {
|
|
3173
|
+
radioRefs.current[index] = el;
|
|
3174
|
+
}, name: name, value: option.value, label: option.label, checked: isChecked, onChange: (e) => {
|
|
3175
|
+
if (e.target.checked) {
|
|
3176
|
+
handleChange(option.value);
|
|
3177
|
+
}
|
|
3178
|
+
}, size: size, validationState: currentValidationState, isDisabled: optionDisabled, showErrorText: false, containerClassName: option.containerClassName, labelClassName: option.labelClassName }, option.value));
|
|
3179
|
+
});
|
|
3180
|
+
};
|
|
3181
|
+
// Clone children and inject props
|
|
3182
|
+
const renderChildren = () => {
|
|
3183
|
+
if (!children)
|
|
3184
|
+
return null;
|
|
3185
|
+
return React.Children.map(children, (child, index) => {
|
|
3186
|
+
if (!React.isValidElement(child)) {
|
|
3187
|
+
return child;
|
|
3188
|
+
}
|
|
3189
|
+
const childValue = child.props.value;
|
|
3190
|
+
const isChecked = value === childValue;
|
|
3191
|
+
const childDisabled = isDisabled || child.props.isDisabled;
|
|
3192
|
+
return React.cloneElement(child, {
|
|
3193
|
+
...child.props,
|
|
3194
|
+
ref: (el) => {
|
|
3195
|
+
radioRefs.current[index] = el;
|
|
3196
|
+
// Preserve original ref if it exists
|
|
3197
|
+
const originalRef = child.ref;
|
|
3198
|
+
if (typeof originalRef === "function") {
|
|
3199
|
+
originalRef(el);
|
|
3200
|
+
}
|
|
3201
|
+
else if (originalRef && "current" in originalRef) {
|
|
3202
|
+
originalRef.current = el;
|
|
3203
|
+
}
|
|
3204
|
+
},
|
|
3205
|
+
name,
|
|
3206
|
+
checked: isChecked,
|
|
3207
|
+
onChange: (e) => {
|
|
3208
|
+
if (e.target.checked) {
|
|
3209
|
+
handleChange(childValue || "");
|
|
3210
|
+
}
|
|
3211
|
+
// Call original onChange if it exists
|
|
3212
|
+
if (child.props.onChange) {
|
|
3213
|
+
child.props.onChange(e);
|
|
3214
|
+
}
|
|
3215
|
+
},
|
|
3216
|
+
size: child.props.size || size,
|
|
3217
|
+
validationState: child.props.validationState || currentValidationState,
|
|
3218
|
+
isDisabled: childDisabled,
|
|
3219
|
+
showErrorText: false,
|
|
3220
|
+
});
|
|
3221
|
+
});
|
|
3222
|
+
};
|
|
3223
|
+
return (jsxs("div", { ref: ref, className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), ...props, children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: id, className: "mb-2", labelClassName: labelClassName })), jsx("div", { ref: groupRef, role: "radiogroup", "aria-label": label, "aria-required": isRequired, "aria-invalid": currentValidationState === "error", "aria-disabled": isDisabled, className: cn("flex", orientation === "horizontal" ? "flex-row items-center" : "flex-col items-start", spacingConfig[spacing], groupClassName, className), onKeyDown: handleKeyDown, id: id, children: options ? renderOptions() : renderChildren() }), jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none" ? "default" : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
|
|
3224
|
+
});
|
|
3225
|
+
RadioGroup.displayName = "RadioGroup";
|
|
3226
|
+
|
|
3095
3227
|
const textFieldVariants = cva("relative flex items-center gap-2 border rounded-large transition-all font-functional font-size-100 leading-100", {
|
|
3096
3228
|
variants: {
|
|
3097
3229
|
size: {
|
|
@@ -4686,5 +4818,5 @@ const UploadBox = React.forwardRef(({ label, helperText, errorText, successText,
|
|
|
4686
4818
|
});
|
|
4687
4819
|
UploadBox.displayName = "UploadBox";
|
|
4688
4820
|
|
|
4689
|
-
export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, SearchableDropdown, Select, SelectTextField, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants };
|
|
4821
|
+
export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants };
|
|
4690
4822
|
//# sourceMappingURL=index.esm.js.map
|