@accelint/design-toolkit 2.6.0 → 4.0.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/components/accordion/index.d.ts +42 -0
- package/dist/components/accordion/index.js.map +1 -1
- package/dist/components/accordion/styles.d.ts +1 -1
- package/dist/components/accordion/styles.js +1 -1
- package/dist/components/accordion/styles.js.map +1 -1
- package/dist/components/avatar/index.d.ts +29 -0
- package/dist/components/avatar/index.js.map +1 -1
- package/dist/components/avatar/styles.d.ts +1 -1
- package/dist/components/badge/index.d.ts +24 -0
- package/dist/components/badge/index.js.map +1 -1
- package/dist/components/badge/styles.d.ts +1 -1
- package/dist/components/button/index.d.ts +104 -0
- package/dist/components/button/index.js +1 -1
- package/dist/components/button/index.js.map +1 -1
- package/dist/components/button/styles.d.ts +31 -109
- package/dist/components/button/styles.js +1 -1
- package/dist/components/button/styles.js.map +1 -1
- package/dist/components/button/types.d.ts +6 -4
- package/dist/components/checkbox/index.d.ts +33 -0
- package/dist/components/checkbox/index.js.map +1 -1
- package/dist/components/checkbox/styles.d.ts +4 -4
- package/dist/components/checkbox/styles.js +1 -1
- package/dist/components/checkbox/styles.js.map +1 -1
- package/dist/components/chip/index.d.ts +34 -0
- package/dist/components/chip/index.js.map +1 -1
- package/dist/components/chip/styles.d.ts +4 -4
- package/dist/components/chip/styles.js +1 -1
- package/dist/components/chip/styles.js.map +1 -1
- package/dist/components/classification-badge/index.d.ts +15 -0
- package/dist/components/classification-badge/index.js.map +1 -1
- package/dist/components/classification-banner/index.d.ts +11 -0
- package/dist/components/classification-banner/index.js.map +1 -1
- package/dist/components/color-picker/styles.d.ts +1 -1
- package/dist/components/color-picker/styles.js +1 -1
- package/dist/components/color-picker/styles.js.map +1 -1
- package/dist/components/combobox-field/index.d.ts +1 -0
- package/dist/components/combobox-field/styles.d.ts +6 -6
- package/dist/components/combobox-field/styles.js +1 -1
- package/dist/components/combobox-field/styles.js.map +1 -1
- package/dist/components/combobox-field/types.d.ts +1 -0
- package/dist/components/date-field/index.d.ts +45 -3
- package/dist/components/date-field/index.js +1 -1
- package/dist/components/date-field/index.js.map +1 -1
- package/dist/components/date-field/styles.d.ts +41 -51
- package/dist/components/date-field/styles.js +1 -1
- package/dist/components/date-field/styles.js.map +1 -1
- package/dist/components/date-field/types.d.ts +12 -15
- package/dist/components/details-list/styles.d.ts +1 -1
- package/dist/components/dialog/index.d.ts +48 -36
- package/dist/components/dialog/index.js +1 -1
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/dialog/styles.d.ts +60 -0
- package/dist/components/dialog/styles.js +2 -0
- package/dist/components/dialog/styles.js.map +1 -0
- package/dist/components/dialog/types.d.ts +14 -0
- package/dist/components/dialog/types.js +2 -0
- package/dist/components/dialog/types.js.map +1 -0
- package/dist/components/drawer/events.d.ts +8 -0
- package/dist/components/drawer/events.js +2 -0
- package/dist/components/drawer/events.js.map +1 -0
- package/dist/components/drawer/index.d.ts +89 -43
- package/dist/components/drawer/index.js +1 -1
- package/dist/components/drawer/index.js.map +1 -1
- package/dist/components/drawer/styles.d.ts +50 -16
- package/dist/components/drawer/styles.js +1 -1
- package/dist/components/drawer/styles.js.map +1 -1
- package/dist/components/drawer/types.d.ts +154 -238
- package/dist/components/drawer/types.js +1 -1
- package/dist/components/drawer/types.js.map +1 -1
- package/dist/components/hero/styles.d.ts +1 -1
- package/dist/components/hotkey/index.d.ts +32 -1
- package/dist/components/hotkey/index.js +1 -1
- package/dist/components/hotkey/index.js.map +1 -1
- package/dist/components/hotkey/styles.d.ts +1 -1
- package/dist/components/icon/index.d.ts +29 -0
- package/dist/components/icon/index.js.map +1 -1
- package/dist/components/icon/styles.d.ts +1 -1
- package/dist/components/input/index.d.ts +19 -0
- package/dist/components/input/index.js +1 -1
- package/dist/components/input/index.js.map +1 -1
- package/dist/components/input/styles.d.ts +1 -1
- package/dist/components/input/styles.js +1 -1
- package/dist/components/input/styles.js.map +1 -1
- package/dist/components/input/types.d.ts +1 -0
- package/dist/components/label/index.d.ts +19 -0
- package/dist/components/label/index.js.map +1 -1
- package/dist/components/label/styles.d.ts +1 -1
- package/dist/components/menu/index.d.ts +69 -7
- package/dist/components/menu/index.js +1 -1
- package/dist/components/menu/index.js.map +1 -1
- package/dist/components/menu/styles.d.ts +11 -38
- package/dist/components/menu/styles.js +1 -1
- package/dist/components/menu/styles.js.map +1 -1
- package/dist/components/menu/types.d.ts +11 -16
- package/dist/components/options/index.d.ts +41 -0
- package/dist/components/options/index.js.map +1 -1
- package/dist/components/options/styles.d.ts +6 -6
- package/dist/components/options/styles.js +1 -1
- package/dist/components/options/styles.js.map +1 -1
- package/dist/components/options/types.d.ts +1 -1
- package/dist/components/popover/index.d.ts +36 -2
- package/dist/components/popover/index.js +1 -1
- package/dist/components/popover/index.js.map +1 -1
- package/dist/components/popover/styles.d.ts +1 -1
- package/dist/components/query-builder/index.d.ts +24 -0
- package/dist/components/query-builder/index.js.map +1 -1
- package/dist/components/radio/index.d.ts +31 -0
- package/dist/components/radio/index.js.map +1 -1
- package/dist/components/radio/styles.d.ts +4 -4
- package/dist/components/radio/styles.js +1 -1
- package/dist/components/radio/styles.js.map +1 -1
- package/dist/components/search-field/styles.d.ts +1 -1
- package/dist/components/search-field/styles.js +1 -1
- package/dist/components/search-field/styles.js.map +1 -1
- package/dist/components/search-field/types.d.ts +1 -0
- package/dist/components/select-field/index.d.ts +44 -0
- package/dist/components/select-field/index.js +1 -1
- package/dist/components/select-field/index.js.map +1 -1
- package/dist/components/select-field/styles.d.ts +7 -7
- package/dist/components/select-field/styles.js +1 -1
- package/dist/components/select-field/styles.js.map +1 -1
- package/dist/components/select-field/types.d.ts +1 -0
- package/dist/components/skeleton/styles.d.ts +1 -1
- package/dist/components/slider/index.d.ts +15 -20
- package/dist/components/slider/index.js +1 -1
- package/dist/components/slider/index.js.map +1 -1
- package/dist/components/slider/styles.d.ts +84 -0
- package/dist/components/slider/styles.js +2 -0
- package/dist/components/slider/styles.js.map +1 -0
- package/dist/components/slider/types.d.ts +22 -0
- package/dist/components/slider/types.js +2 -0
- package/dist/components/slider/types.js.map +1 -0
- package/dist/components/switch/index.d.ts +36 -0
- package/dist/components/switch/index.js +1 -1
- package/dist/components/switch/index.js.map +1 -1
- package/dist/components/switch/styles.d.ts +24 -22
- package/dist/components/switch/styles.js +1 -1
- package/dist/components/switch/styles.js.map +1 -1
- package/dist/components/switch/types.d.ts +1 -0
- package/dist/components/tabs/index.d.ts +46 -0
- package/dist/components/tabs/index.js.map +1 -1
- package/dist/components/text-area-field/index.d.ts +20 -0
- package/dist/components/text-area-field/index.js.map +1 -1
- package/dist/components/text-area-field/styles.d.ts +7 -7
- package/dist/components/text-area-field/styles.js +1 -1
- package/dist/components/text-area-field/styles.js.map +1 -1
- package/dist/components/text-field/index.d.ts +62 -0
- package/dist/components/text-field/index.js.map +1 -1
- package/dist/components/text-field/styles.d.ts +7 -7
- package/dist/components/text-field/types.d.ts +1 -0
- package/dist/components/tooltip/index.d.ts +42 -0
- package/dist/components/tooltip/index.js +1 -1
- package/dist/components/tooltip/index.js.map +1 -1
- package/dist/components/tooltip/styles.d.ts +1 -1
- package/dist/components/view-stack/events.d.ts +9 -0
- package/dist/components/view-stack/events.js +2 -0
- package/dist/components/view-stack/events.js.map +1 -0
- package/dist/components/view-stack/index.d.ts +13 -10
- package/dist/components/view-stack/index.js +1 -1
- package/dist/components/view-stack/index.js.map +1 -1
- package/dist/components/view-stack/types.d.ts +13 -9
- package/dist/index.css +3 -3
- package/dist/index.d.ts +23 -19
- package/dist/index.js +1 -1
- package/dist/lib/types.d.ts +6 -2
- package/dist/lib/utils.d.ts +15 -5
- package/dist/lib/utils.js +1 -1
- package/dist/lib/utils.js.map +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/styles.css +1449 -774
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/themes.css +12 -0
- package/dist/tokens/tokens.css +12 -0
- package/dist/variants/variants.css +19 -5
- package/package.json +16 -9
- package/dist/components/box/index.d.ts +0 -19
- package/dist/components/box/index.js +0 -2
- package/dist/components/box/index.js.map +0 -1
- package/dist/components/drawer/context.d.ts +0 -13
- package/dist/components/drawer/context.js +0 -2
- package/dist/components/drawer/context.js.map +0 -1
- package/dist/components/drawer/state.d.ts +0 -26
- package/dist/components/drawer/state.js +0 -2
- package/dist/components/drawer/state.js.map +0 -1
|
@@ -6,11 +6,6 @@ declare const ButtonStylesDefaults: {
|
|
|
6
6
|
readonly variant: "filled";
|
|
7
7
|
};
|
|
8
8
|
declare const ButtonStyles: tailwind_variants.TVReturnType<{} | {
|
|
9
|
-
color: {
|
|
10
|
-
info: tailwind_merge.ClassNameValue | {};
|
|
11
|
-
serious: tailwind_merge.ClassNameValue | {};
|
|
12
|
-
critical: tailwind_merge.ClassNameValue | {};
|
|
13
|
-
};
|
|
14
9
|
variant: {
|
|
15
10
|
filled: tailwind_merge.ClassNameValue | {};
|
|
16
11
|
outline: tailwind_merge.ClassNameValue | {};
|
|
@@ -19,64 +14,39 @@ declare const ButtonStyles: tailwind_variants.TVReturnType<{} | {
|
|
|
19
14
|
floating: tailwind_merge.ClassNameValue | {};
|
|
20
15
|
};
|
|
21
16
|
}, undefined, undefined, {
|
|
22
|
-
color: {
|
|
23
|
-
info: string;
|
|
24
|
-
serious: string;
|
|
25
|
-
critical: string;
|
|
26
|
-
};
|
|
27
17
|
variant: {
|
|
28
|
-
filled: string;
|
|
29
|
-
outline: string;
|
|
18
|
+
filled: string[];
|
|
19
|
+
outline: string[];
|
|
30
20
|
flat: string;
|
|
31
21
|
icon: string[];
|
|
32
22
|
floating: string[];
|
|
33
23
|
};
|
|
34
24
|
}, undefined, tailwind_variants.TVReturnType<{
|
|
35
|
-
color: {
|
|
36
|
-
info: string;
|
|
37
|
-
serious: string;
|
|
38
|
-
critical: string;
|
|
39
|
-
};
|
|
40
25
|
variant: {
|
|
41
|
-
filled: string;
|
|
42
|
-
outline: string;
|
|
26
|
+
filled: string[];
|
|
27
|
+
outline: string[];
|
|
43
28
|
flat: string;
|
|
44
29
|
icon: string[];
|
|
45
30
|
floating: string[];
|
|
46
31
|
};
|
|
47
32
|
}, undefined, string[], {
|
|
48
|
-
color: {
|
|
49
|
-
info: string;
|
|
50
|
-
serious: string;
|
|
51
|
-
critical: string;
|
|
52
|
-
};
|
|
53
33
|
variant: {
|
|
54
|
-
filled: string;
|
|
55
|
-
outline: string;
|
|
34
|
+
filled: string[];
|
|
35
|
+
outline: string[];
|
|
56
36
|
flat: string;
|
|
57
37
|
icon: string[];
|
|
58
38
|
floating: string[];
|
|
59
39
|
};
|
|
60
40
|
}, undefined, tailwind_variants.TVReturnType<{
|
|
61
|
-
color: {
|
|
62
|
-
info: string;
|
|
63
|
-
serious: string;
|
|
64
|
-
critical: string;
|
|
65
|
-
};
|
|
66
41
|
variant: {
|
|
67
|
-
filled: string;
|
|
68
|
-
outline: string;
|
|
42
|
+
filled: string[];
|
|
43
|
+
outline: string[];
|
|
69
44
|
flat: string;
|
|
70
45
|
icon: string[];
|
|
71
46
|
floating: string[];
|
|
72
47
|
};
|
|
73
|
-
}, undefined, string[], unknown, unknown
|
|
48
|
+
}, undefined, string[], unknown, unknown>>>;
|
|
74
49
|
declare const LinkButtonStyles: tailwind_variants.TVReturnType<{} | {
|
|
75
|
-
color: {
|
|
76
|
-
info: tailwind_merge.ClassNameValue | {};
|
|
77
|
-
serious: tailwind_merge.ClassNameValue | {};
|
|
78
|
-
critical: tailwind_merge.ClassNameValue | {};
|
|
79
|
-
};
|
|
80
50
|
variant: {
|
|
81
51
|
filled: tailwind_merge.ClassNameValue | {};
|
|
82
52
|
outline: tailwind_merge.ClassNameValue | {};
|
|
@@ -85,123 +55,75 @@ declare const LinkButtonStyles: tailwind_variants.TVReturnType<{} | {
|
|
|
85
55
|
floating: tailwind_merge.ClassNameValue | {};
|
|
86
56
|
};
|
|
87
57
|
}, undefined, undefined, {
|
|
88
|
-
color: {
|
|
89
|
-
info: string;
|
|
90
|
-
serious: string;
|
|
91
|
-
critical: string;
|
|
92
|
-
};
|
|
93
58
|
variant: {
|
|
94
|
-
filled: string;
|
|
95
|
-
outline: string;
|
|
59
|
+
filled: string[];
|
|
60
|
+
outline: string[];
|
|
96
61
|
flat: string;
|
|
97
62
|
icon: string[];
|
|
98
63
|
floating: string[];
|
|
99
64
|
};
|
|
100
65
|
}, undefined, tailwind_variants.TVReturnType<{
|
|
101
|
-
color: {
|
|
102
|
-
info: string;
|
|
103
|
-
serious: string;
|
|
104
|
-
critical: string;
|
|
105
|
-
};
|
|
106
66
|
variant: {
|
|
107
|
-
filled: string;
|
|
108
|
-
outline: string;
|
|
67
|
+
filled: string[];
|
|
68
|
+
outline: string[];
|
|
109
69
|
flat: string;
|
|
110
70
|
icon: string[];
|
|
111
71
|
floating: string[];
|
|
112
72
|
};
|
|
113
73
|
}, undefined, string[], {
|
|
114
|
-
color: {
|
|
115
|
-
info: string;
|
|
116
|
-
serious: string;
|
|
117
|
-
critical: string;
|
|
118
|
-
};
|
|
119
74
|
variant: {
|
|
120
|
-
filled: string;
|
|
121
|
-
outline: string;
|
|
75
|
+
filled: string[];
|
|
76
|
+
outline: string[];
|
|
122
77
|
flat: string;
|
|
123
78
|
icon: string[];
|
|
124
79
|
floating: string[];
|
|
125
80
|
};
|
|
126
81
|
}, undefined, tailwind_variants.TVReturnType<{
|
|
127
|
-
color: {
|
|
128
|
-
info: string;
|
|
129
|
-
serious: string;
|
|
130
|
-
critical: string;
|
|
131
|
-
};
|
|
132
82
|
variant: {
|
|
133
|
-
filled: string;
|
|
134
|
-
outline: string;
|
|
83
|
+
filled: string[];
|
|
84
|
+
outline: string[];
|
|
135
85
|
flat: string;
|
|
136
86
|
icon: string[];
|
|
137
87
|
floating: string[];
|
|
138
88
|
};
|
|
139
|
-
}, undefined, string[], unknown, unknown
|
|
140
|
-
declare const ToggleButtonStyles: tailwind_variants.TVReturnType<{
|
|
141
|
-
color: {
|
|
142
|
-
info: tailwind_merge.ClassNameValue | {};
|
|
143
|
-
serious: tailwind_merge.ClassNameValue | {};
|
|
144
|
-
critical: tailwind_merge.ClassNameValue | {};
|
|
145
|
-
};
|
|
89
|
+
}, undefined, string[], unknown, unknown>>>;
|
|
90
|
+
declare const ToggleButtonStyles: tailwind_variants.TVReturnType<{
|
|
146
91
|
variant: {
|
|
147
|
-
filled:
|
|
148
|
-
|
|
149
|
-
flat: tailwind_merge.ClassNameValue | {};
|
|
150
|
-
icon: tailwind_merge.ClassNameValue | {};
|
|
151
|
-
floating: tailwind_merge.ClassNameValue | {};
|
|
152
|
-
};
|
|
153
|
-
}, undefined, undefined, {
|
|
154
|
-
color: {
|
|
155
|
-
info: string;
|
|
156
|
-
serious: string;
|
|
157
|
-
critical: string;
|
|
92
|
+
filled: string[];
|
|
93
|
+
floating: string[];
|
|
158
94
|
};
|
|
95
|
+
}, undefined, string[], {
|
|
159
96
|
variant: {
|
|
160
|
-
filled: string;
|
|
161
|
-
outline: string;
|
|
97
|
+
filled: string[];
|
|
98
|
+
outline: string[];
|
|
162
99
|
flat: string;
|
|
163
100
|
icon: string[];
|
|
164
101
|
floating: string[];
|
|
165
102
|
};
|
|
166
103
|
}, undefined, tailwind_variants.TVReturnType<{
|
|
167
|
-
color: {
|
|
168
|
-
info: string;
|
|
169
|
-
serious: string;
|
|
170
|
-
critical: string;
|
|
171
|
-
};
|
|
172
104
|
variant: {
|
|
173
|
-
filled: string;
|
|
174
|
-
outline: string;
|
|
105
|
+
filled: string[];
|
|
106
|
+
outline: string[];
|
|
175
107
|
flat: string;
|
|
176
108
|
icon: string[];
|
|
177
109
|
floating: string[];
|
|
178
110
|
};
|
|
179
111
|
}, undefined, string[], {
|
|
180
|
-
color: {
|
|
181
|
-
info: string;
|
|
182
|
-
serious: string;
|
|
183
|
-
critical: string;
|
|
184
|
-
};
|
|
185
112
|
variant: {
|
|
186
|
-
filled: string;
|
|
187
|
-
outline: string;
|
|
113
|
+
filled: string[];
|
|
114
|
+
outline: string[];
|
|
188
115
|
flat: string;
|
|
189
116
|
icon: string[];
|
|
190
117
|
floating: string[];
|
|
191
118
|
};
|
|
192
119
|
}, undefined, tailwind_variants.TVReturnType<{
|
|
193
|
-
color: {
|
|
194
|
-
info: string;
|
|
195
|
-
serious: string;
|
|
196
|
-
critical: string;
|
|
197
|
-
};
|
|
198
120
|
variant: {
|
|
199
|
-
filled: string;
|
|
200
|
-
outline: string;
|
|
121
|
+
filled: string[];
|
|
122
|
+
outline: string[];
|
|
201
123
|
flat: string;
|
|
202
124
|
icon: string[];
|
|
203
125
|
floating: string[];
|
|
204
126
|
};
|
|
205
|
-
}, undefined, string[], unknown, unknown
|
|
127
|
+
}, undefined, string[], unknown, unknown>>>;
|
|
206
128
|
|
|
207
129
|
export { ButtonStyles, ButtonStylesDefaults, LinkButtonStyles, ToggleButtonStyles };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {tv}from'./../../lib/utils.js';const
|
|
1
|
+
import {tv}from'./../../lib/utils.js';const l={color:"info",variant:"filled"},i=tv({base:["group/button flex w-content cursor-pointer items-center justify-center rounded-medium outline outline-transparent","disabled:cursor-not-allowed","size-large:gap-xs size-large:px-m size-large:py-s size-large:text-button-l","size-medium:gap-xs size-medium:px-m size-medium:py-s size-medium:text-button-m","size-small:gap-xxs size-small:px-s size-small:py-xs size-small:text-button-s","size-xsmall:gap-xxs size-xsmall:px-s size-xsmall:py-xs size-xsmall:text-button-xs"],variants:{variant:{filled:["disabled:fg-disabled disabled:bg-interactive-disabled","enabled:color-info:fg-inverse-light","enabled:color-info:bg-interactive-default","enabled:hover:color-info:bg-interactive-hover-light","enabled:focus-visible:color-info:bg-interactive-hover-light","enabled:color-serious:fg-inverse-light","enabled:color-serious:bg-serious","enabled:hover:color-serious:bg-serious-hover","enabled:focus-visible:color-serious:bg-serious-hover","enabled:color-critical:fg-default-light","enabled:color-critical:bg-critical","enabled:hover:color-critical:bg-critical-hover","enabled:focus-visible:color-critical:bg-critical-hover"],outline:["disabled:fg-disabled disabled:outline-interactive-disabled","enabled:color-info:fg-default-light enabled:color-info:outline-interactive","enabled:hover:color-info:outline-interactive-hover","enabled:focus-visible:color-info:outline-interactive-hover","enabled:color-serious:fg-default-light enabled:color-serious:outline-serious","enabled:hover:color-serious:outline-interactive-hover","enabled:focus-visible:color-serious:outline-interactive-hover","enabled:color-critical:fg-default-light enabled:color-critical:outline-critical","enabled:hover:color-critical:outline-interactive-hover","enabled:focus-visible:color-critical:outline-interactive-hover"],flat:"disabled:fg-disabled disabled:bg-transparent",icon:["size-small:rounded-small size-xsmall:rounded-small size-large:p-xs size-medium:p-xs size-small:p-xxs size-xsmall:p-xxs","disabled:fg-disabled disabled:bg-transparent"],floating:["rounded-full","size-large:p-xs size-medium:p-xs size-small:p-xxs size-xsmall:p-xxs","disabled:fg-disabled disabled:bg-interactive-disabled disabled:outline-interactive-disabled","enabled:color-info:fg-interactive enabled:color-info:bg-surface-default enabled:color-info:outline-interactive","enabled:hover:color-info:fg-interactive-hover enabled:hover:color-info:outline-interactive-hover","enabled:focus-visible:color-info:fg-interactive-hover enabled:focus-visible:color-info:outline-interactive-hover","enabled:color-serious:fg-serious enabled:color-serious:bg-serious-subtle enabled:color-serious:outline-serious","enabled:hover:color-serious:fg-interactive-hover enabled:hover:color-serious:outline-interactive-hover","enabled:focus-visible:color-serious:fg-interactive-hover enabled:focus-visible:color-serious:outline-interactive-hover","enabled:color-critical:fg-critical enabled:color-critical:bg-critical-subtle enabled:color-critical:outline-critical","enabled:hover:color-critical:fg-interactive-hover enabled:hover:color-critical:outline-interactive-hover","enabled:focus-visible:color-critical:fg-interactive-hover enabled:focus-visible:color-critical:outline-interactive-hover"]}},compoundVariants:[{variant:["flat","icon"],className:["enabled:color-info:fg-default-light","enabled:hover:color-info:bg-interactive-hover-dark","enabled:focus-visible:color-info:bg-interactive-hover-dark"]},{variant:["flat","icon"],className:["enabled:color-serious:fg-default-light","enabled:hover:color-serious:bg-serious-hover","enabled:focus-visible:color-serious:bg-serious-hover"]},{variant:["flat","icon"],className:["enabled:color-critical:fg-default-light","enabled:hover:color-critical:bg-critical-hover","enabled:focus-visible:color-critical:bg-critical-hover"]}],defaultVariants:l}),r=tv({extend:i}),t=tv({extend:i}),s=tv({extend:i,base:["enabled:selected:fg-highlight","enabled:selected:hover:fg-highlight","enabled:selected:focus-visible:fg-highlight"],variants:{variant:{filled:["enabled:selected:color-info:bg-info-subtle","enabled:selected:hover:color-info:bg-interactive-hover-light","enabled:selected:focus-visible:color-info:bg-interactive-hover-light","enabled:selected:color-serious:bg-serious-subtle","enabled:selected:hover:color-serious:bg-serious-hover","enabled:selected:focus-visible:color-serious:bg-serious-hover","enabled:selected:color-critical:bg-critical-subtle","enabled:selected:hover:color-critical:bg-critical-hover","enabled:selected:focus-visible:color-critical:bg-critical-hover"],floating:["enabled:selected:color-info:outline-highlight","enabled:selected:hover:color-info:outline-interactive-hover","enabled:selected:focus-visible:color-info:outline-interactive-hover","enabled:selected:color-serious:outline-highlight","enabled:selected:hover:color-serious:outline-interactive-hover","enabled:selected:focus-visible:color-serious:outline-interactive-hover","enabled:selected:color-critical:outline-highlight","enabled:selected:hover:color-critical:outline-interactive-hover","enabled:selected:focus-visible:color-critical:outline-interactive-hover"]}}});export{r as ButtonStyles,l as ButtonStylesDefaults,t as LinkButtonStyles,s as ToggleButtonStyles};//# sourceMappingURL=styles.js.map
|
|
2
2
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/button/styles.ts"],"names":["BaseButtonStyles","e"],"mappings":"sCAeS,MAAA,CAAA,CAAA,CAAA,KACP,CAAA,MAAS,CAAA,QAGLA,QACJ,CAAA,CAAM,CACJ,CAAAC,EAAA,CAAA,CAAA,IAAA,CAAA,CAAA,mHACA,CAAA,6BACA,CAAA,4EACA,CAAA,+JAEA,CAAA,mFAEF,CAAU,CACR,QACE,CAAA,CAAA,KACA,CAAA,CAAA,IAAA,CAAA,UACA,CAAA,EAAU,CAAA,QAEZ,CAAA,EAAS,CACP,CAAA,OAAQ,CAAA,CAAA,MAAA,CAAA,uDACC,CAAA,OAAA,CAAA,4DACH,CAAA,IAAA,CAAA,8CAEJ,CAAA,IAAA,CAAA,CAAA,uKAGF,CAAU,CACR,QAAA,CAAA,CAAA,oFAEA,CAAA,iHAQK,CAAA,CAAA,CAAA,YACE,CAAA,OACT,CAAA,QAAA,CAAW,SACT,CAAA,CAAA,2DAEA,CAAA,0CACA,CAAA,0CAIK,CAAA,CAAA,CAAA,CAAA,YACE,CAAA,OAAA,CACT,SAAA,CAAW,SACT,CAAA,CAAA,sDACA,CAAA,yCACA,CAAA,yCAIK,CAAA,CAAA,CAAA,CAAA,KACP,CAAA,MAAU,CAAA,OAAQ,CAAA,CAAA,MAClB,CAAA,MAAA,CAAA,CAAW,SACT,CAAA,CAAA,0BACA,CAAA,yCACA,CAAA,yCAIK,CAAA,CAAA,CAAA,CAAA,KACP,CAAA,yBACA,CAAW,SACT,CAAA,CAAA,+EACA,CAAA,yJAOK,UACP,SAAS,CAAA,OACT,UAAW,SACT,CAAA,CAAA,+CAEA,CAAA,gCACA,CAAA,gCAIK,CAAA,CAAA,CAAA,CAAA,KAAA,CACP,SAAS,CAAA,OAAA,CACT,UAAW,SACT,CAAA,CAAA,kDACA,CAAA,yCACA,CAAA,yCAIK,CAAA,CAAA,CAAA,CAAA,KAAA,CACP,SAAU,CAAA,OAAQ,CAAA,CAAA,eACP,SACT,CAAA,CAAA,0BACA,CAAA,gCACA,CAAA,gCAIK,CAAA,CAAA,CAAA,CAAA,KAAA,CACP,SAAS,CAAA,OAAA,CAAA,UACT,CAAW,SACT,CAAA,CAAA,sEACA,CAAA,yJAOK,oBACE,CAAA,OACT,CAAA,QAAA,CAAW,qCAET,CAAA,qBACA,CAAA,iCACA,CAAA,iCAIK,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,mBAEP,SAAA,CAAW,SACT,CAAA,CAAA,mDACA,CAAA,mFAKK,oBACG,CAAA,OAAQ,CAAA,CAAA,MAClB,CAAA,MAAA,CAAA,CAAW,qCAET,CAAA,iCACA,CAAA,iCAIK,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,UACE,CAAA,OAAA,CAAA,UACT,CAAW,SACT,CAAA,CAAA,sJAEA,CAAA,+FAQN,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQD,EACV,CAAC,OAGC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQA,EACV,CAAC,CAAA,MAGC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQA,EAAAA,CACR,0BAEW,CAAA,CAAA,CAAA,KACP,CAAA,MAAS,CAAA,OACT,CAAA,QAAA,CAAW,SACT,CAAA,CAAA,0BACA,CAAA,iCACA,CAAA,mDACA,CAAA,mDAIK,CAAA,CAAA,CAAA,CAAA,YACE,CAAA,OAAA,CAAA,UACT,CAAW,SACT,CAAA,CAAA,uFAEA,CAAA,kDAIK,CAAA,CAAA,CAAA,CAAA,KAAA,CACP,SAAS,CAAA,OACT,CAAA,QAAA,CAAW,SACT,CAAA,CAAA,0BACA,CAAA,oCACA,CAAA,yCACA,CAAA,yCAIK,CAAA,CAAA,CAAA,CAAA,KAAA,CACP,4BACA,CAAW,SACT,CAAA,CAAA,oCACA,CAAA,qGAKK,oBACE,CAAA,OACT,CAAA,QAAA,CAAW,qCAET,CAAA,qCACA,CAAA,0CACA,CAAA,0CAIK,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,6BAEP,CAAW,SACT,CAAA,CAAA,oCACA,CAAA,qGAMF,CAAA,CAAA,CAAA,CAAW,SACT,CAAA,CAAA,+BACA,CAAA,2EAKP,CAAA,CAAA,CAAA,CAAA","file":"styles.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { tv } from '@/lib/utils';\n\nexport const ButtonStylesDefaults = {\n color: 'info',\n variant: 'filled',\n} as const;\n\nconst BaseButtonStyles = tv({\n base: [\n 'group/button flex w-content cursor-pointer items-center justify-center rounded-medium outline outline-transparent',\n 'disabled:cursor-not-allowed',\n 'size-large:gap-xs size-large:px-m size-large:py-s size-large:text-button-l',\n 'size-medium:gap-xs size-medium:px-m size-medium:py-s size-medium:text-button-m',\n 'size-small:gap-xxs size-small:px-s size-small:py-xs size-small:text-button-s',\n 'size-xsmall:gap-xxs size-xsmall:px-s size-xsmall:py-xs size-xsmall:text-button-xs',\n ],\n variants: {\n color: {\n info: '',\n serious: '',\n critical: '',\n },\n variant: {\n filled: 'disabled:fg-disabled disabled:bg-interactive-disabled',\n outline: 'disabled:fg-disabled disabled:outline-interactive-disabled',\n flat: 'disabled:fg-disabled disabled:bg-transparent',\n icon: [\n 'size-small:rounded-small size-xsmall:rounded-small size-large:p-xs size-medium:p-xs size-small:p-xxs size-xsmall:p-xxs',\n 'disabled:fg-disabled disabled:bg-transparent',\n ],\n floating: [\n 'rounded-full',\n 'size-large:p-xs size-medium:p-xs size-small:p-xxs size-xsmall:p-xxs',\n 'disabled:fg-disabled disabled:bg-interactive-disabled disabled:outline-interactive-disabled',\n ],\n },\n },\n compoundVariants: [\n /** Colors **/\n // Info\n {\n color: 'info',\n variant: 'filled',\n className: [\n 'enabled:fg-inverse-light',\n 'enabled:bg-interactive-default',\n 'enabled:hover:bg-interactive-hover-light',\n 'enabled:focus:bg-interactive-hover-light',\n ],\n },\n {\n color: 'info',\n variant: 'outline',\n className: [\n 'enabled:fg-default-light enabled:outline-interactive',\n 'enabled:hover:outline-interactive-hover',\n 'enabled:focus:outline-interactive-hover',\n ],\n },\n {\n color: 'info',\n variant: ['flat', 'icon'],\n className: [\n 'enabled:fg-default-light',\n 'enabled:hover:bg-interactive-hover-dark',\n 'enabled:focus:bg-interactive-hover-dark',\n ],\n },\n {\n color: 'info',\n variant: 'floating',\n className: [\n 'enabled:fg-interactive enabled:bg-surface-default enabled:outline-interactive',\n 'enabled:hover:fg-interactive-hover enabled:hover:outline-interactive-hover',\n 'enabled:focus:fg-interactive-hover enabled:focus:outline-interactive-hover',\n ],\n },\n\n // Serious\n {\n color: 'serious',\n variant: 'filled',\n className: [\n 'enabled:fg-inverse-light',\n 'enabled:bg-serious',\n 'enabled:hover:bg-serious-hover',\n 'enabled:focus:bg-serious-hover',\n ],\n },\n {\n color: 'serious',\n variant: 'outline',\n className: [\n 'enabled:fg-default-light enabled:outline-serious',\n 'enabled:hover:outline-interactive-hover',\n 'enabled:focus:outline-interactive-hover',\n ],\n },\n {\n color: 'serious',\n variant: ['flat', 'icon'],\n className: [\n 'enabled:fg-default-light',\n 'enabled:hover:bg-serious-hover',\n 'enabled:focus:bg-serious-hover',\n ],\n },\n {\n color: 'serious',\n variant: 'floating',\n className: [\n 'enabled:fg-serious enabled:bg-serious-subtle enabled:outline-serious',\n 'enabled:hover:fg-interactive-hover enabled:hover:outline-interactive-hover',\n 'enabled:focus:fg-interactive-hover enabled:focus:outline-interactive-hover',\n ],\n },\n\n // Critical\n {\n color: 'critical',\n variant: 'filled',\n className: [\n 'enabled:fg-default-light',\n 'enabled:bg-critical',\n 'enabled:hover:bg-critical-hover',\n 'enabled:focus:bg-critical-hover',\n ],\n },\n {\n color: 'critical',\n variant: 'outline',\n className: [\n 'enabled:fg-default-light enabled:outline-critical',\n 'enabled:hover:outline-interactive-hover',\n 'enabled:focus:outline-interactive-hover',\n ],\n },\n {\n color: 'critical',\n variant: ['flat', 'icon'],\n className: [\n 'enabled:fg-default-light',\n 'enabled:hover:bg-critical-hover',\n 'enabled:focus:bg-critical-hover',\n ],\n },\n {\n color: 'critical',\n variant: 'floating',\n className: [\n 'enabled:fg-critical enabled:bg-critical-subtle enabled:outline-critical',\n 'enabled:hover:fg-interactive-hover enabled:hover:outline-interactive-hover',\n 'enabled:focus:fg-interactive-hover enabled:focus:outline-interactive-hover',\n ],\n },\n ],\n defaultVariants: ButtonStylesDefaults,\n});\n\nexport const ButtonStyles = tv({\n extend: BaseButtonStyles,\n});\n\nexport const LinkButtonStyles = tv({\n extend: BaseButtonStyles,\n});\n\nexport const ToggleButtonStyles = tv({\n extend: BaseButtonStyles,\n compoundVariants: [\n {\n color: 'info',\n variant: 'filled',\n className: [\n 'enabled:fg-inverse-light',\n 'enabled:selected:bg-info-subtle',\n 'enabled:selected:hover:bg-interactive-hover-light',\n 'enabled:selected:focus:bg-interactive-hover-light',\n ],\n },\n {\n color: 'info',\n variant: 'floating',\n className: [\n 'enabled:selected:outline-highlight',\n 'enabled:selected:hover:outline-interactive-hover',\n 'enabled:selected:focus:outline-interactive-hover',\n ],\n },\n {\n color: 'serious',\n variant: 'filled',\n className: [\n 'enabled:fg-inverse-light',\n 'enabled:selected:bg-serious-subtle',\n 'enabled:selected:hover:bg-serious-hover',\n 'enabled:selected:focus:bg-serious-hover',\n ],\n },\n {\n color: 'serious',\n variant: 'floating',\n className: [\n 'enabled:selected:outline-highlight',\n 'enabled:selected:hover:outline-interactive-hover',\n 'enabled:selected:focus:outline-interactive-hover',\n ],\n },\n {\n color: 'critical',\n variant: 'filled',\n className: [\n 'enabled:fg-default-light',\n 'enabled:selected:bg-critical-subtle',\n 'enabled:selected:hover:bg-critical-hover',\n 'enabled:selected:focus:bg-critical-hover',\n ],\n },\n {\n color: 'critical',\n variant: 'floating',\n className: [\n 'enabled:selected:outline-highlight',\n 'enabled:selected:hover:outline-interactive-hover',\n 'enabled:selected:focus:outline-interactive-hover',\n ],\n },\n // Must be last to override color values\n {\n className: [\n 'enabled:selected:fg-highlight',\n 'enabled:selected:hover:fg-highlight',\n 'enabled:selected:focus:fg-highlight',\n ],\n },\n ],\n});\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/button/styles.ts"],"names":["BaseButtonStyles","e"],"mappings":"sCAeS,MAAA,CAAA,CAAA,CAAA,KACP,CAAA,cACF,CAEMA,QACJ,CAAA,CAAM,CACJ,CAAAC,EAAA,CAAA,CAAA,IAAA,CAAA,CAAA,mHACA,CAAA,0GAEA,CAAA,gFACA,CAAA,8EACA,CAAA,oFAEQ,CACR,QAAS,CACP,CAAA,OACE,iEAGA,CAAA,qCACA,CAAA,iGAEA,CAAA,6DAGA,CAAA,2EAEA,CAAA,8CACA,CAAA,gGAIA,CAAA,oCACA,CAAA,yGAGO,CACP,CAAA,OAAA,CAAA,CAAA,yIAIA,CAAA,oDACA,CAAA,2IAIA,CAAA,uDACA,CAAA,iJAIA,CAAA,wDACA,CAAA,gEAEI,CAAA,CAAA,IAAA,CAAA,8CAEJ,CAAA,IAAA,CAAA,CAAA,uKAGF,CAAU,CACR,QAAA,CAAA,CAAA,cACA,CAAA,qEACA,CAAA,6FAGA,CAAA,mNAEA,CAAA,kHAGA,CAAA,yNAEA,CAAA,wHAGA,CAAA,iOAEA,CAAA,0HAIN,CAAA,CAAA,CAAA,CAAA,gBAGI,CAAS,CAAC,CAAA,OAAQ,CAAA,CAAA,MAClB,CAAA,MAAA,CAAA,CAAW,SACT,CAAA,CAAA,qCACA,CAAA,iHAOF,CAAA,CAAS,CAAC,QAAQ,CAAA,CAAA,eACP,SACT,CAAA,CAAA,uFAEA,CAAA,sDAMF,CAAA,CAAS,CAAC,CAAA,OAAQ,CAAA,CAAA,MAClB,CAAA,MAAA,CAAA,CAAW,SACT,CAAA,CAAA,yCACA,CAAA,yGAKN,CAAA,CAAA,CAAA,CAAA,eAIA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQD,EACV,CAAC,CAAA,MAGC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQA,EACV,CAAC,CAAA,MAGC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQA,GACR,CAAA,8CAEE,CAAA,qCACA,CAAA,6CAEF,CAAU,CACR,QAAS,CACP,CAAA,OAEE,CAAA,CAAA,MAAA,CAAA,CAAA,4CACA,CAAA,qIAIA,CAAA,kDACA,CAAA,uHAIA,CAAA,oDACA,CAAA,2HAGF,CAAU,CAER,QAAA,CAAA,CAAA,+CACA,CAAA,mIAIA,CAAA,kDACA,CAAA,yIAIA,CAAA,mDACA,CAAA,2IAKP,CAAA,CAAA,CAAA,CAAA","file":"styles.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { tv } from '@/lib/utils';\n\nexport const ButtonStylesDefaults = {\n color: 'info',\n variant: 'filled',\n} as const;\n\nconst BaseButtonStyles = tv({\n base: [\n 'group/button flex w-content cursor-pointer items-center justify-center rounded-medium outline outline-transparent',\n 'disabled:cursor-not-allowed',\n 'size-large:gap-xs size-large:px-m size-large:py-s size-large:text-button-l',\n 'size-medium:gap-xs size-medium:px-m size-medium:py-s size-medium:text-button-m',\n 'size-small:gap-xxs size-small:px-s size-small:py-xs size-small:text-button-s',\n 'size-xsmall:gap-xxs size-xsmall:px-s size-xsmall:py-xs size-xsmall:text-button-xs',\n ],\n variants: {\n variant: {\n filled: [\n 'disabled:fg-disabled disabled:bg-interactive-disabled',\n\n // Info\n 'enabled:color-info:fg-inverse-light',\n 'enabled:color-info:bg-interactive-default',\n 'enabled:hover:color-info:bg-interactive-hover-light',\n 'enabled:focus-visible:color-info:bg-interactive-hover-light',\n\n // Serious\n 'enabled:color-serious:fg-inverse-light',\n 'enabled:color-serious:bg-serious',\n 'enabled:hover:color-serious:bg-serious-hover',\n 'enabled:focus-visible:color-serious:bg-serious-hover',\n\n // Critical\n 'enabled:color-critical:fg-default-light',\n 'enabled:color-critical:bg-critical',\n 'enabled:hover:color-critical:bg-critical-hover',\n 'enabled:focus-visible:color-critical:bg-critical-hover',\n ],\n outline: [\n 'disabled:fg-disabled disabled:outline-interactive-disabled',\n\n // Info\n 'enabled:color-info:fg-default-light enabled:color-info:outline-interactive',\n 'enabled:hover:color-info:outline-interactive-hover',\n 'enabled:focus-visible:color-info:outline-interactive-hover',\n\n // Serious\n 'enabled:color-serious:fg-default-light enabled:color-serious:outline-serious',\n 'enabled:hover:color-serious:outline-interactive-hover',\n 'enabled:focus-visible:color-serious:outline-interactive-hover',\n\n // Critical\n 'enabled:color-critical:fg-default-light enabled:color-critical:outline-critical',\n 'enabled:hover:color-critical:outline-interactive-hover',\n 'enabled:focus-visible:color-critical:outline-interactive-hover',\n ],\n flat: 'disabled:fg-disabled disabled:bg-transparent',\n icon: [\n 'size-small:rounded-small size-xsmall:rounded-small size-large:p-xs size-medium:p-xs size-small:p-xxs size-xsmall:p-xxs',\n 'disabled:fg-disabled disabled:bg-transparent',\n ],\n floating: [\n 'rounded-full',\n 'size-large:p-xs size-medium:p-xs size-small:p-xxs size-xsmall:p-xxs',\n 'disabled:fg-disabled disabled:bg-interactive-disabled disabled:outline-interactive-disabled',\n\n // Info\n 'enabled:color-info:fg-interactive enabled:color-info:bg-surface-default enabled:color-info:outline-interactive',\n 'enabled:hover:color-info:fg-interactive-hover enabled:hover:color-info:outline-interactive-hover',\n 'enabled:focus-visible:color-info:fg-interactive-hover enabled:focus-visible:color-info:outline-interactive-hover',\n\n // Serious\n 'enabled:color-serious:fg-serious enabled:color-serious:bg-serious-subtle enabled:color-serious:outline-serious',\n 'enabled:hover:color-serious:fg-interactive-hover enabled:hover:color-serious:outline-interactive-hover',\n 'enabled:focus-visible:color-serious:fg-interactive-hover enabled:focus-visible:color-serious:outline-interactive-hover',\n\n // Critical\n 'enabled:color-critical:fg-critical enabled:color-critical:bg-critical-subtle enabled:color-critical:outline-critical',\n 'enabled:hover:color-critical:fg-interactive-hover enabled:hover:color-critical:outline-interactive-hover',\n 'enabled:focus-visible:color-critical:fg-interactive-hover enabled:focus-visible:color-critical:outline-interactive-hover',\n ],\n },\n },\n compoundVariants: [\n // Info\n {\n variant: ['flat', 'icon'],\n className: [\n 'enabled:color-info:fg-default-light',\n 'enabled:hover:color-info:bg-interactive-hover-dark',\n 'enabled:focus-visible:color-info:bg-interactive-hover-dark',\n ],\n },\n\n // Serious\n {\n variant: ['flat', 'icon'],\n className: [\n 'enabled:color-serious:fg-default-light',\n 'enabled:hover:color-serious:bg-serious-hover',\n 'enabled:focus-visible:color-serious:bg-serious-hover',\n ],\n },\n\n // Critical\n {\n variant: ['flat', 'icon'],\n className: [\n 'enabled:color-critical:fg-default-light',\n 'enabled:hover:color-critical:bg-critical-hover',\n 'enabled:focus-visible:color-critical:bg-critical-hover',\n ],\n },\n ],\n defaultVariants: ButtonStylesDefaults,\n});\n\nexport const ButtonStyles = tv({\n extend: BaseButtonStyles,\n});\n\nexport const LinkButtonStyles = tv({\n extend: BaseButtonStyles,\n});\n\nexport const ToggleButtonStyles = tv({\n extend: BaseButtonStyles,\n base: [\n 'enabled:selected:fg-highlight',\n 'enabled:selected:hover:fg-highlight',\n 'enabled:selected:focus-visible:fg-highlight',\n ],\n variants: {\n variant: {\n filled: [\n // Info\n 'enabled:selected:color-info:bg-info-subtle',\n 'enabled:selected:hover:color-info:bg-interactive-hover-light',\n 'enabled:selected:focus-visible:color-info:bg-interactive-hover-light',\n\n // Serious\n 'enabled:selected:color-serious:bg-serious-subtle',\n 'enabled:selected:hover:color-serious:bg-serious-hover',\n 'enabled:selected:focus-visible:color-serious:bg-serious-hover',\n\n // Critical\n 'enabled:selected:color-critical:bg-critical-subtle',\n 'enabled:selected:hover:color-critical:bg-critical-hover',\n 'enabled:selected:focus-visible:color-critical:bg-critical-hover',\n ],\n floating: [\n // Info\n 'enabled:selected:color-info:outline-highlight',\n 'enabled:selected:hover:color-info:outline-interactive-hover',\n 'enabled:selected:focus-visible:color-info:outline-interactive-hover',\n\n // Serious\n 'enabled:selected:color-serious:outline-highlight',\n 'enabled:selected:hover:color-serious:outline-interactive-hover',\n 'enabled:selected:focus-visible:color-serious:outline-interactive-hover',\n\n // Critical\n 'enabled:selected:color-critical:outline-highlight',\n 'enabled:selected:hover:color-critical:outline-interactive-hover',\n 'enabled:selected:focus-visible:color-critical:outline-interactive-hover',\n ],\n },\n },\n});\n"]}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { AriaAttributesWithRef } from '../../lib/types.js';
|
|
2
2
|
import { ButtonProps as ButtonProps$1, LinkProps, ToggleButtonProps as ToggleButtonProps$1 } from 'react-aria-components';
|
|
3
3
|
import { VariantProps } from 'tailwind-variants';
|
|
4
4
|
import { ButtonStyles } from './styles.js';
|
|
5
|
+
import 'react';
|
|
5
6
|
import 'tailwind-merge';
|
|
6
7
|
|
|
7
8
|
type ButtonStyleVariants = VariantProps<typeof ButtonStyles> & {
|
|
8
9
|
size?: 'large' | 'medium' | 'small' | 'xsmall';
|
|
10
|
+
color?: 'info' | 'serious' | 'critical';
|
|
9
11
|
};
|
|
10
|
-
type ButtonProps = ButtonProps$1 & ButtonStyleVariants &
|
|
11
|
-
type LinkButtonProps = LinkProps & ButtonStyleVariants &
|
|
12
|
-
type ToggleButtonProps = ToggleButtonProps$1 & ButtonStyleVariants &
|
|
12
|
+
type ButtonProps = ButtonProps$1 & ButtonStyleVariants & AriaAttributesWithRef<HTMLButtonElement>;
|
|
13
|
+
type LinkButtonProps = LinkProps & ButtonStyleVariants & AriaAttributesWithRef<HTMLAnchorElement>;
|
|
14
|
+
type ToggleButtonProps = ToggleButtonProps$1 & ButtonStyleVariants & AriaAttributesWithRef<HTMLButtonElement>;
|
|
13
15
|
|
|
14
16
|
export type { ButtonProps, ButtonStyleVariants, LinkButtonProps, ToggleButtonProps };
|
|
@@ -11,6 +11,39 @@ declare namespace CheckboxGroup {
|
|
|
11
11
|
var displayName: string;
|
|
12
12
|
}
|
|
13
13
|
declare const CheckboxContext: react.Context<ContextValue<CheckboxProps, HTMLLabelElement>>;
|
|
14
|
+
/**
|
|
15
|
+
* Checkbox - A form control for binary or multiple selection with group support
|
|
16
|
+
*
|
|
17
|
+
* Provides accessible checkbox functionality with support for individual checkboxes
|
|
18
|
+
* or grouped selections. Includes visual feedback for checked, indeterminate, and
|
|
19
|
+
* disabled states with integrated labeling and validation support.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* // Basic checkbox
|
|
23
|
+
* <Checkbox>
|
|
24
|
+
* Accept terms and conditions
|
|
25
|
+
* </Checkbox>
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* // Checkbox group with multiple options
|
|
29
|
+
* <Checkbox.Group label="Select preferences">
|
|
30
|
+
* <Checkbox value="notifications">Email notifications</Checkbox>
|
|
31
|
+
* <Checkbox value="marketing">Marketing emails</Checkbox>
|
|
32
|
+
* <Checkbox value="updates">Product updates</Checkbox>
|
|
33
|
+
* </Checkbox.Group>
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* // Disabled checkbox
|
|
37
|
+
* <Checkbox isDisabled>
|
|
38
|
+
* Unavailable option
|
|
39
|
+
* </Checkbox>
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* // Indeterminate checkbox (partial selection)
|
|
43
|
+
* <Checkbox isIndeterminate>
|
|
44
|
+
* Select all items
|
|
45
|
+
* </Checkbox>
|
|
46
|
+
*/
|
|
14
47
|
declare function Checkbox({ ref, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
15
48
|
declare namespace Checkbox {
|
|
16
49
|
var displayName: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/checkbox/index.tsx"],"names":["checkbox","CheckboxGroupContext","CheckboxGroup","ref","props","x","children","classNames","orientation","rest","a","composeRenderProps","className","group","n","isRequired","jsx","Label","m","u","y","isDisabled","label","CheckboxContext","isIndeterminate","jsxs","Icon","isSelected","N","Checkbox"],"mappings":"oWA4B2B,MAAA,CAAA,KAAA,CAAAA,EAAU,UAAS,CAAA,CAAA,CAAA,QAAyB,CAAA,CAE1DC,CAAAA,OACyD,CAAA,CAEtE,CAAA,KAAA,CAAA,CAAA,CAASC,CAAAA,cAAc,EAAE,CAAA,CAAA,CAAAC,aAAAA,CAAK,IAAS,EAAuB,SAC7BC,CAAAA,CAAOD,CAAAA,GAAO,CAAA,CAAA,CAAA,GAA0B,CAEvE,CAAA,CAAA,CAAA,CAAA,CAAM,CACJ,CAAA,CAAA,CAAAE,eAAA,CAAA,CAAA,CAAA,CAAA,EAAAC,aACAC,CACA,QACA,CAAA,CAAA,CAAA,UAAAC,CAAc,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,WAIhB,CAAA,CAAA,CAAA,UAEQC,CAAAA,GACJ,CAAA,CAAKN,EACL,CAAA,OAAAO,GAAA,CAAWC,aAAAA,CAAmBJ,CAAAA,GAAY,CAAA,CAAA,GAAQK,CAAAA,CAAAA,CAChDC,SAAQ,CAAAC,kBAAA,CAAA,CAAAF,EAAW,KAErB,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,SAAA,CAAkBJ,CAAAA,CAEjB,CAAA,CAAA,CAAA,kBAA0C,CAAA,CAAA,CAAA,QAAY,CAAAM,kBAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAAC,UAElD,CAAA,CAAA,CAAA,UACCC,CAAAA,CAACC,CAAAA,GACCC,IAAA,CAAAC,QAAA,CAAA,CAAA,QAAwB,CAAA,CAAA,CAAA,EAAAT,GAAA,CAAAU,KAAA,CAAWb,CAAAA,SAAmB,CACtD,CAAA,CAAA,CAAA,SAAYc,CACZ,CAAA,EAAA,KAAA,CAAA,CAAA,CAAYN,UAEX,CAAAO,CAAAA,CACH,UAQZpB,CAAAA,CAAc,CAAA,QAAA,CAAA,CAAA,CAAc,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,WAEfqB,CAAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/checkbox/index.tsx"],"names":["checkbox","CheckboxGroupContext","CheckboxGroup","ref","props","x","children","classNames","orientation","rest","a","composeRenderProps","className","group","n","isRequired","jsx","Label","m","u","y","isDisabled","label","CheckboxContext","isIndeterminate","jsxs","Icon","isSelected","N","Checkbox"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { Check, Remove } from '@accelint/icons';\nimport { createContext } from 'react';\nimport {\n Checkbox as AriaCheckbox,\n CheckboxGroup as AriaCheckboxGroup,\n type ContextValue,\n composeRenderProps,\n useContextProps,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { CheckboxStyles } from './styles';\nimport type { CheckboxGroupProps, CheckboxProps } from './types';\n\nconst { group, groupLabel, checkbox, control, label } = CheckboxStyles();\n\nexport const CheckboxGroupContext =\n createContext<ContextValue<CheckboxGroupProps, HTMLDivElement>>(null);\n\nfunction CheckboxGroup({ ref, ...props }: CheckboxGroupProps) {\n [props, ref] = useContextProps(props, ref ?? null, CheckboxGroupContext);\n\n const {\n children,\n classNames,\n label,\n orientation = 'vertical',\n ...rest\n } = props;\n\n return (\n <AriaCheckboxGroup\n {...rest}\n ref={ref}\n className={composeRenderProps(classNames?.group, (className) =>\n group({ className }),\n )}\n data-orientation={orientation}\n >\n {composeRenderProps(children, (children, { isDisabled, isRequired }) => (\n <>\n {label && (\n <Label\n className={groupLabel({ className: classNames?.label })}\n isDisabled={isDisabled}\n isRequired={isRequired}\n >\n {label}\n </Label>\n )}\n {children}\n </>\n ))}\n </AriaCheckboxGroup>\n );\n}\nCheckboxGroup.displayName = 'Checkbox.Group';\n\nexport const CheckboxContext =\n createContext<ContextValue<CheckboxProps, HTMLLabelElement>>(null);\n\n/**\n * Checkbox - A form control for binary or multiple selection with group support\n *\n * Provides accessible checkbox functionality with support for individual checkboxes\n * or grouped selections. Includes visual feedback for checked, indeterminate, and\n * disabled states with integrated labeling and validation support.\n *\n * @example\n * // Basic checkbox\n * <Checkbox>\n * Accept terms and conditions\n * </Checkbox>\n *\n * @example\n * // Checkbox group with multiple options\n * <Checkbox.Group label=\"Select preferences\">\n * <Checkbox value=\"notifications\">Email notifications</Checkbox>\n * <Checkbox value=\"marketing\">Marketing emails</Checkbox>\n * <Checkbox value=\"updates\">Product updates</Checkbox>\n * </Checkbox.Group>\n *\n * @example\n * // Disabled checkbox\n * <Checkbox isDisabled>\n * Unavailable option\n * </Checkbox>\n *\n * @example\n * // Indeterminate checkbox (partial selection)\n * <Checkbox isIndeterminate>\n * Select all items\n * </Checkbox>\n */\nexport function Checkbox({ ref, ...props }: CheckboxProps) {\n [props, ref] = useContextProps(props, ref ?? null, CheckboxContext);\n\n const { classNames, children, ...rest } = props;\n\n return (\n <AriaCheckbox\n {...rest}\n ref={ref}\n className={composeRenderProps(classNames?.checkbox, (className) =>\n checkbox({ className }),\n )}\n >\n {composeRenderProps(\n children,\n (children, { isIndeterminate, isSelected }) => (\n <>\n <span className={control({ className: classNames?.control })}>\n <Icon size='small'>\n {isIndeterminate && !isSelected && <Remove />}\n {isSelected && <Check />}\n </Icon>\n </span>\n {children && (\n <span className={label({ className: classNames?.label })}>\n {children}\n </span>\n )}\n </>\n ),\n )}\n </AriaCheckbox>\n );\n}\nCheckbox.displayName = 'Checkbox';\nCheckbox.Group = CheckboxGroup;\n"]}
|
|
@@ -4,9 +4,9 @@ import * as tailwind_merge from 'tailwind-merge';
|
|
|
4
4
|
declare const CheckboxStyles: tailwind_variants.TVReturnType<{
|
|
5
5
|
[key: string]: {
|
|
6
6
|
[key: string]: tailwind_merge.ClassNameValue | {
|
|
7
|
-
label?: tailwind_merge.ClassNameValue;
|
|
8
7
|
checkbox?: tailwind_merge.ClassNameValue;
|
|
9
8
|
group?: tailwind_merge.ClassNameValue;
|
|
9
|
+
label?: tailwind_merge.ClassNameValue;
|
|
10
10
|
groupLabel?: tailwind_merge.ClassNameValue;
|
|
11
11
|
control?: tailwind_merge.ClassNameValue;
|
|
12
12
|
};
|
|
@@ -14,9 +14,9 @@ declare const CheckboxStyles: tailwind_variants.TVReturnType<{
|
|
|
14
14
|
} | {
|
|
15
15
|
[x: string]: {
|
|
16
16
|
[x: string]: tailwind_merge.ClassNameValue | {
|
|
17
|
-
label?: tailwind_merge.ClassNameValue;
|
|
18
17
|
checkbox?: tailwind_merge.ClassNameValue;
|
|
19
18
|
group?: tailwind_merge.ClassNameValue;
|
|
19
|
+
label?: tailwind_merge.ClassNameValue;
|
|
20
20
|
groupLabel?: tailwind_merge.ClassNameValue;
|
|
21
21
|
control?: tailwind_merge.ClassNameValue;
|
|
22
22
|
};
|
|
@@ -30,9 +30,9 @@ declare const CheckboxStyles: tailwind_variants.TVReturnType<{
|
|
|
30
30
|
}, undefined, {
|
|
31
31
|
[key: string]: {
|
|
32
32
|
[key: string]: tailwind_merge.ClassNameValue | {
|
|
33
|
-
label?: tailwind_merge.ClassNameValue;
|
|
34
33
|
checkbox?: tailwind_merge.ClassNameValue;
|
|
35
34
|
group?: tailwind_merge.ClassNameValue;
|
|
35
|
+
label?: tailwind_merge.ClassNameValue;
|
|
36
36
|
groupLabel?: tailwind_merge.ClassNameValue;
|
|
37
37
|
control?: tailwind_merge.ClassNameValue;
|
|
38
38
|
};
|
|
@@ -49,6 +49,6 @@ declare const CheckboxStyles: tailwind_variants.TVReturnType<{
|
|
|
49
49
|
checkbox: string[];
|
|
50
50
|
control: string[];
|
|
51
51
|
label: string[];
|
|
52
|
-
}, undefined, unknown, unknown
|
|
52
|
+
}, undefined, unknown, unknown>>;
|
|
53
53
|
|
|
54
54
|
export { CheckboxStyles };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {tv}from'./../../lib/utils.js';const c=tv({slots:{group:["group/checkbox-group flex gap-xs","orientation-horizontal:flex-wrap","orientation-vertical:flex-col"],groupLabel:"w-full",checkbox:["group/checkbox flex cursor-pointer items-center gap-m group-orientation-horizontal/checkbox-group:grow group-orientation-horizontal/checkbox-group:basis-1/3","disabled:cursor-not-allowed"],control:["my-xxs flex size-l items-center justify-center rounded-small outline outline-interactive","group-enabled/checkbox:fg-info-subtle","group-enabled/checkbox:group-focus/checkbox:outline-interactive-hover","group-enabled/checkbox:group-hover/checkbox:outline-interactive-hover","group-enabled/checkbox:group-indeterminate/checkbox:bg-highlight group-enabled/checkbox:group-indeterminate/checkbox:outline-highlight","group-enabled/checkbox:group-indeterminate/checkbox:group-focus/checkbox:outline-interactive-hover","group-enabled/checkbox:group-indeterminate/checkbox:group-hover/checkbox:outline-interactive-hover","group-enabled/checkbox:group-selected/checkbox:bg-highlight group-enabled/checkbox:group-selected/checkbox:outline-highlight","group-enabled/checkbox:group-selected/checkbox:group-focus/checkbox:outline-interactive-hover","group-enabled/checkbox:group-selected/checkbox:group-hover/checkbox:outline-interactive-hover","group-disabled/checkbox:outline-interactive-disabled","group-disabled/checkbox:group-indeterminate/checkbox:fg-inverse-light group-disabled/checkbox:group-indeterminate/checkbox:bg-interactive-disabled","group-disabled/checkbox:group-selected/checkbox:fg-inverse-light group-disabled/checkbox:group-selected/checkbox:bg-interactive-disabled"],label:["text-body-s text-interactive-default","group-disabled/checkbox:text-interactive-disabled"]}});export{c as CheckboxStyles};//# sourceMappingURL=styles.js.map
|
|
1
|
+
import {tv}from'./../../lib/utils.js';const c=tv({slots:{group:["group/checkbox-group flex gap-xs","orientation-horizontal:flex-wrap","orientation-vertical:flex-col"],groupLabel:"w-full",checkbox:["group/checkbox flex cursor-pointer items-center gap-m group-orientation-horizontal/checkbox-group:grow group-orientation-horizontal/checkbox-group:basis-1/3","disabled:cursor-not-allowed"],control:["my-xxs flex size-l items-center justify-center rounded-small outline outline-interactive","group-enabled/checkbox:fg-info-subtle","group-enabled/checkbox:group-focus-visible/checkbox:outline-interactive-hover","group-enabled/checkbox:group-hover/checkbox:outline-interactive-hover","group-enabled/checkbox:group-indeterminate/checkbox:bg-highlight group-enabled/checkbox:group-indeterminate/checkbox:outline-highlight","group-enabled/checkbox:group-indeterminate/checkbox:group-focus-visible/checkbox:outline-interactive-hover","group-enabled/checkbox:group-indeterminate/checkbox:group-hover/checkbox:outline-interactive-hover","group-enabled/checkbox:group-selected/checkbox:bg-highlight group-enabled/checkbox:group-selected/checkbox:outline-highlight","group-enabled/checkbox:group-selected/checkbox:group-focus-visible/checkbox:outline-interactive-hover","group-enabled/checkbox:group-selected/checkbox:group-hover/checkbox:outline-interactive-hover","group-disabled/checkbox:outline-interactive-disabled","group-disabled/checkbox:group-indeterminate/checkbox:fg-inverse-light group-disabled/checkbox:group-indeterminate/checkbox:bg-interactive-disabled","group-disabled/checkbox:group-selected/checkbox:fg-inverse-light group-disabled/checkbox:group-selected/checkbox:bg-interactive-disabled"],label:["text-body-s text-interactive-default","group-disabled/checkbox:text-interactive-disabled"]}});export{c as CheckboxStyles};//# sourceMappingURL=styles.js.map
|
|
2
2
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/checkbox/styles.ts"],"names":["e"],"mappings":"6CAeS,CACLA,EAAA,CAAA,CAAA,KACE,CAAA,CAAA,KAAA,CAAA,CAAA,kCACA,CAAA,kEAGF,CAAA,CAAA,UACA,CAAA,QAAU,CACR,wKACA,CAAA,6BAEO,CACP,CAAA,OAAA,CAAA,CAAA,kIAEA,CAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/checkbox/styles.ts"],"names":["e"],"mappings":"6CAeS,CACLA,EAAA,CAAA,CAAA,KACE,CAAA,CAAA,KAAA,CAAA,CAAA,kCACA,CAAA,kEAGF,CAAA,CAAA,UACA,CAAA,QAAU,CACR,wKACA,CAAA,6BAEO,CACP,CAAA,OAAA,CAAA,CAAA,kIAEA,CAAA,+EACA,CAAA,gNAEA,CAAA,4GACA,CAAA,mOAEA,CAAA,uGACA,CAAA,sJAEA,CAAA,oJACA,CAAA,yLAIA,CAAA,mDAGL,CAAA,CAAA,CAAA","file":"styles.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { tv } from '@/lib/utils';\n\nexport const CheckboxStyles = tv({\n slots: {\n group: [\n 'group/checkbox-group flex gap-xs',\n 'orientation-horizontal:flex-wrap',\n 'orientation-vertical:flex-col',\n ],\n groupLabel: 'w-full',\n checkbox: [\n 'group/checkbox flex cursor-pointer items-center gap-m group-orientation-horizontal/checkbox-group:grow group-orientation-horizontal/checkbox-group:basis-1/3',\n 'disabled:cursor-not-allowed',\n ],\n control: [\n 'my-xxs flex size-l items-center justify-center rounded-small outline outline-interactive',\n 'group-enabled/checkbox:fg-info-subtle',\n 'group-enabled/checkbox:group-focus-visible/checkbox:outline-interactive-hover',\n 'group-enabled/checkbox:group-hover/checkbox:outline-interactive-hover',\n 'group-enabled/checkbox:group-indeterminate/checkbox:bg-highlight group-enabled/checkbox:group-indeterminate/checkbox:outline-highlight',\n 'group-enabled/checkbox:group-indeterminate/checkbox:group-focus-visible/checkbox:outline-interactive-hover',\n 'group-enabled/checkbox:group-indeterminate/checkbox:group-hover/checkbox:outline-interactive-hover',\n 'group-enabled/checkbox:group-selected/checkbox:bg-highlight group-enabled/checkbox:group-selected/checkbox:outline-highlight',\n 'group-enabled/checkbox:group-selected/checkbox:group-focus-visible/checkbox:outline-interactive-hover',\n 'group-enabled/checkbox:group-selected/checkbox:group-hover/checkbox:outline-interactive-hover',\n 'group-disabled/checkbox:outline-interactive-disabled',\n 'group-disabled/checkbox:group-indeterminate/checkbox:fg-inverse-light group-disabled/checkbox:group-indeterminate/checkbox:bg-interactive-disabled',\n 'group-disabled/checkbox:group-selected/checkbox:fg-inverse-light group-disabled/checkbox:group-selected/checkbox:bg-interactive-disabled',\n ],\n label: [\n 'text-body-s text-interactive-default',\n 'group-disabled/checkbox:text-interactive-disabled',\n ],\n },\n});\n"]}
|
|
@@ -24,6 +24,40 @@ declare function DeletableChip({ ref, ...props }: DeletableChipProps): react_jsx
|
|
|
24
24
|
declare namespace DeletableChip {
|
|
25
25
|
var displayName: string;
|
|
26
26
|
}
|
|
27
|
+
/**
|
|
28
|
+
* Chip - A compact element for displaying tags, filters, or selectable items
|
|
29
|
+
*
|
|
30
|
+
* Provides flexible chip functionality supporting both individual chips and chip lists.
|
|
31
|
+
* Includes variants for deletable and selectable chips with keyboard navigation and
|
|
32
|
+
* accessibility features. Perfect for tags, filters, or multi-selection interfaces.
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* // Basic chip
|
|
36
|
+
* <Chip>JavaScript</Chip>
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* // Chip list with multiple items
|
|
40
|
+
* <Chip.List>
|
|
41
|
+
* <Chip>React</Chip>
|
|
42
|
+
* <Chip>TypeScript</Chip>
|
|
43
|
+
* <Chip>Node.js</Chip>
|
|
44
|
+
* </Chip.List>
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* // Deletable chips
|
|
48
|
+
* <Chip.List onRemove={() => console.log('removed')}>
|
|
49
|
+
* <Chip.Deletable>
|
|
50
|
+
* Removable Tag
|
|
51
|
+
* </Chip.Deletable>
|
|
52
|
+
* </Chip.List>
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* // Selectable chips
|
|
56
|
+
* <Chip.List selectionMode="multiple">
|
|
57
|
+
* <Chip.Selectable id="option1">Option 1</Chip.Selectable>
|
|
58
|
+
* <Chip.Selectable id="option2">Option 2</Chip.Selectable>
|
|
59
|
+
* </Chip.List>
|
|
60
|
+
*/
|
|
27
61
|
declare function Chip({ ref, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
|
|
28
62
|
declare namespace Chip {
|
|
29
63
|
var displayName: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/chip/index.tsx"],"names":["v","props","jsx","i","ChipProvider","ChipList","useContextProps","ref","ChipContext","C","className","dependencies","rest","ChipListRenderingContext","AriaTagGroup","L","AriaTagList","S","p","SelectableChipStyles","SelectableChip","AriaTag","u","composeRenderProps","size","remove","DeletableChipStyles","DeletableChip","classNames","deletableChip","textValue","children","H","Button","z","Icon","y","Chip","Component","g","A"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport type { ProviderProps } from '@/lib/types';\nimport { CancelFill } from '@accelint/icons';\nimport { createContext, useContext } from 'react';\nimport {\n Tag as AriaTag,\n TagGroup as AriaTagGroup,\n TagList as AriaTagList,\n Button,\n type ContextValue,\n composeRenderProps,\n useContextProps,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport {\n ChipStyles,\n ChipStylesDefaults,\n DeletableChipStyles,\n SelectableChipStyles,\n} from './styles';\nimport type {\n BaseChipProps,\n ChipListProps,\n ChipProps,\n DeletableChipProps,\n SelectableChipProps,\n} from './types';\n\nexport const ChipContext =\n createContext<ContextValue<BaseChipProps, HTMLDivElement>>(null);\n\nfunction ChipProvider({ children, ...props }: ProviderProps<BaseChipProps>) {\n return <ChipContext.Provider value={props}>{children}</ChipContext.Provider>;\n}\nChipProvider.displayName = 'Chip.Provider';\n\nconst ChipListRenderingContext = createContext(false);\n\nfunction ChipList<T extends object>({ ref, ...props }: ChipListProps<T>) {\n [props, ref] = useContextProps(props, ref ?? null, ChipContext);\n\n const {\n children,\n className,\n dependencies,\n items,\n renderEmptyState,\n size = 'medium',\n ...rest\n } = props;\n\n return (\n <ChipListRenderingContext.Provider value>\n <ChipProvider size={size}>\n <AriaTagGroup {...rest}>\n <AriaTagList<T>\n ref={ref}\n className={composeRenderProps(className, (className) =>\n list({ className }),\n )}\n dependencies={dependencies}\n items={items}\n renderEmptyState={renderEmptyState}\n >\n {children}\n </AriaTagList>\n </AriaTagGroup>\n </ChipProvider>\n </ChipListRenderingContext.Provider>\n );\n}\nChipList.displayName = 'Chip.List';\n\nconst { chip: selectableChip } = SelectableChipStyles();\n\nfunction SelectableChip({ ref, ...props }: SelectableChipProps) {\n [props, ref] = useContextProps(props, ref ?? null, ChipContext);\n\n const { className, size = 'medium', ...rest } = props;\n\n return (\n <AriaTag\n {...rest}\n ref={ref}\n className={composeRenderProps(className, (className) =>\n selectableChip({ className, size }),\n )}\n data-size={size}\n />\n );\n}\nSelectableChip.displayName = 'Chip.Selectable';\n\nconst { chip: deletableChip, remove } = DeletableChipStyles();\n\nfunction DeletableChip({ ref, ...props }: DeletableChipProps) {\n [props, ref] = useContextProps(props, ref ?? null, ChipContext);\n\n const {\n children,\n classNames,\n size = 'medium',\n textValue = typeof children === 'string' ? children : undefined,\n ...rest\n } = props;\n\n return (\n <AriaTag\n {...rest}\n ref={ref}\n className={composeRenderProps(classNames?.chip, (className) =>\n deletableChip({ className, size }),\n )}\n textValue={textValue}\n data-size={size}\n >\n {composeRenderProps(children, (children, { allowsRemoving }) => {\n if (!allowsRemoving) {\n throw new Error(\n 'You have a <Chip.Deletable> in a <Chip.List> that does not specify an onRemove handler.',\n );\n }\n\n return (\n <>\n {children}\n <Button\n slot='remove'\n className={composeRenderProps(classNames?.remove, (className) =>\n remove({ className }),\n )}\n >\n <Icon size='small'>\n <CancelFill />\n </Icon>\n </Button>\n </>\n );\n })}\n </AriaTag>\n );\n}\nDeletableChip.displayName = 'Chip.Deletable';\n\nconst { list, chip } = ChipStyles();\n\nexport function Chip({ ref, ...props }: ChipProps) {\n [props, ref] = useContextProps(props, ref ?? null, ChipContext);\n\n const context = useContext(ChipListRenderingContext);\n const Component = context ? AriaTag : 'div';\n const {\n className,\n size = 'medium',\n variant = ChipStylesDefaults.variant,\n ...rest\n } = props;\n\n return (\n <Icon.Provider size={size === 'medium' ? 'small' : 'xsmall'}>\n <Component\n {...rest}\n ref={ref}\n className={chip({ size, variant, className })}\n data-size={size}\n />\n </Icon.Provider>\n );\n}\nChip.displayName = 'Chip';\nChip.Provider = ChipProvider;\nChip.List = ChipList;\nChip.Deletable = DeletableChip;\nChip.Selectable = SelectableChip;\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/chip/index.tsx"],"names":["v","props","jsx","i","ChipProvider","ChipList","useContextProps","ref","ChipContext","C","className","dependencies","rest","ChipListRenderingContext","AriaTagGroup","L","AriaTagList","S","p","SelectableChipStyles","SelectableChip","AriaTag","u","composeRenderProps","size","remove","DeletableChipStyles","DeletableChip","classNames","deletableChip","textValue","children","H","Button","z","Icon","y","Chip","Component","g","A"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport type { ProviderProps } from '@/lib/types';\nimport { CancelFill } from '@accelint/icons';\nimport { createContext, useContext } from 'react';\nimport {\n Tag as AriaTag,\n TagGroup as AriaTagGroup,\n TagList as AriaTagList,\n Button,\n type ContextValue,\n composeRenderProps,\n useContextProps,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport {\n ChipStyles,\n ChipStylesDefaults,\n DeletableChipStyles,\n SelectableChipStyles,\n} from './styles';\nimport type {\n BaseChipProps,\n ChipListProps,\n ChipProps,\n DeletableChipProps,\n SelectableChipProps,\n} from './types';\n\nexport const ChipContext =\n createContext<ContextValue<BaseChipProps, HTMLDivElement>>(null);\n\nfunction ChipProvider({ children, ...props }: ProviderProps<BaseChipProps>) {\n return <ChipContext.Provider value={props}>{children}</ChipContext.Provider>;\n}\nChipProvider.displayName = 'Chip.Provider';\n\nconst ChipListRenderingContext = createContext(false);\n\nfunction ChipList<T extends object>({ ref, ...props }: ChipListProps<T>) {\n [props, ref] = useContextProps(props, ref ?? null, ChipContext);\n\n const {\n children,\n className,\n dependencies,\n items,\n renderEmptyState,\n size = 'medium',\n ...rest\n } = props;\n\n return (\n <ChipListRenderingContext.Provider value>\n <ChipProvider size={size}>\n <AriaTagGroup {...rest}>\n <AriaTagList<T>\n ref={ref}\n className={composeRenderProps(className, (className) =>\n list({ className }),\n )}\n dependencies={dependencies}\n items={items}\n renderEmptyState={renderEmptyState}\n >\n {children}\n </AriaTagList>\n </AriaTagGroup>\n </ChipProvider>\n </ChipListRenderingContext.Provider>\n );\n}\nChipList.displayName = 'Chip.List';\n\nconst { chip: selectableChip } = SelectableChipStyles();\n\nfunction SelectableChip({ ref, ...props }: SelectableChipProps) {\n [props, ref] = useContextProps(props, ref ?? null, ChipContext);\n\n const { className, size = 'medium', ...rest } = props;\n\n return (\n <AriaTag\n {...rest}\n ref={ref}\n className={composeRenderProps(className, (className) =>\n selectableChip({ className, size }),\n )}\n data-size={size}\n />\n );\n}\nSelectableChip.displayName = 'Chip.Selectable';\n\nconst { chip: deletableChip, remove } = DeletableChipStyles();\n\nfunction DeletableChip({ ref, ...props }: DeletableChipProps) {\n [props, ref] = useContextProps(props, ref ?? null, ChipContext);\n\n const {\n children,\n classNames,\n size = 'medium',\n textValue = typeof children === 'string' ? children : undefined,\n ...rest\n } = props;\n\n return (\n <AriaTag\n {...rest}\n ref={ref}\n className={composeRenderProps(classNames?.chip, (className) =>\n deletableChip({ className, size }),\n )}\n textValue={textValue}\n data-size={size}\n >\n {composeRenderProps(children, (children, { allowsRemoving }) => {\n if (!allowsRemoving) {\n throw new Error(\n 'You have a <Chip.Deletable> in a <Chip.List> that does not specify an onRemove handler.',\n );\n }\n\n return (\n <>\n {children}\n <Button\n slot='remove'\n className={composeRenderProps(classNames?.remove, (className) =>\n remove({ className }),\n )}\n >\n <Icon size='small'>\n <CancelFill />\n </Icon>\n </Button>\n </>\n );\n })}\n </AriaTag>\n );\n}\nDeletableChip.displayName = 'Chip.Deletable';\n\nconst { list, chip } = ChipStyles();\n\n/**\n * Chip - A compact element for displaying tags, filters, or selectable items\n *\n * Provides flexible chip functionality supporting both individual chips and chip lists.\n * Includes variants for deletable and selectable chips with keyboard navigation and\n * accessibility features. Perfect for tags, filters, or multi-selection interfaces.\n *\n * @example\n * // Basic chip\n * <Chip>JavaScript</Chip>\n *\n * @example\n * // Chip list with multiple items\n * <Chip.List>\n * <Chip>React</Chip>\n * <Chip>TypeScript</Chip>\n * <Chip>Node.js</Chip>\n * </Chip.List>\n *\n * @example\n * // Deletable chips\n * <Chip.List onRemove={() => console.log('removed')}>\n * <Chip.Deletable>\n * Removable Tag\n * </Chip.Deletable>\n * </Chip.List>\n *\n * @example\n * // Selectable chips\n * <Chip.List selectionMode=\"multiple\">\n * <Chip.Selectable id=\"option1\">Option 1</Chip.Selectable>\n * <Chip.Selectable id=\"option2\">Option 2</Chip.Selectable>\n * </Chip.List>\n */\nexport function Chip({ ref, ...props }: ChipProps) {\n [props, ref] = useContextProps(props, ref ?? null, ChipContext);\n\n const context = useContext(ChipListRenderingContext);\n const Component = context ? AriaTag : 'div';\n const {\n className,\n size = 'medium',\n variant = ChipStylesDefaults.variant,\n ...rest\n } = props;\n\n return (\n <Icon.Provider size={size === 'medium' ? 'small' : 'xsmall'}>\n <Component\n {...rest}\n ref={ref}\n className={chip({ size, variant, className })}\n data-size={size}\n />\n </Icon.Provider>\n );\n}\nChip.displayName = 'Chip';\nChip.Provider = ChipProvider;\nChip.List = ChipList;\nChip.Deletable = DeletableChip;\nChip.Selectable = SelectableChip;\n"]}
|
|
@@ -34,7 +34,7 @@ declare const BaseChipStyles: tailwind_variants.TVReturnType<{
|
|
|
34
34
|
}, tailwind_variants.TVReturnType<unknown, {
|
|
35
35
|
list: string;
|
|
36
36
|
chip: string[];
|
|
37
|
-
}, undefined, unknown, unknown
|
|
37
|
+
}, undefined, unknown, unknown>>;
|
|
38
38
|
declare const ChipStyles: tailwind_variants.TVReturnType<{
|
|
39
39
|
variant: {
|
|
40
40
|
advisory: {
|
|
@@ -102,7 +102,7 @@ declare const ChipStyles: tailwind_variants.TVReturnType<{
|
|
|
102
102
|
}, tailwind_variants.TVReturnType<unknown, {
|
|
103
103
|
list: string;
|
|
104
104
|
chip: string[];
|
|
105
|
-
}, undefined, unknown, unknown
|
|
105
|
+
}, undefined, unknown, unknown>>>;
|
|
106
106
|
declare const SelectableChipStyles: tailwind_variants.TVReturnType<{
|
|
107
107
|
[key: string]: {
|
|
108
108
|
[key: string]: tailwind_merge.ClassNameValue | {
|
|
@@ -170,7 +170,7 @@ declare const SelectableChipStyles: tailwind_variants.TVReturnType<{
|
|
|
170
170
|
}, tailwind_variants.TVReturnType<unknown, {
|
|
171
171
|
list: string;
|
|
172
172
|
chip: string[];
|
|
173
|
-
}, undefined, unknown, unknown
|
|
173
|
+
}, undefined, unknown, unknown>>>;
|
|
174
174
|
declare const DeletableChipStyles: tailwind_variants.TVReturnType<{
|
|
175
175
|
[key: string]: {
|
|
176
176
|
[key: string]: tailwind_merge.ClassNameValue | {
|
|
@@ -242,6 +242,6 @@ declare const DeletableChipStyles: tailwind_variants.TVReturnType<{
|
|
|
242
242
|
}, tailwind_variants.TVReturnType<unknown, {
|
|
243
243
|
list: string;
|
|
244
244
|
chip: string[];
|
|
245
|
-
}, undefined, unknown, unknown
|
|
245
|
+
}, undefined, unknown, unknown>>>;
|
|
246
246
|
|
|
247
247
|
export { BaseChipStyles, ChipStyles, ChipStylesDefaults, DeletableChipStyles, SelectableChipStyles };
|