@spothero/ui 25.15.0-beta.1 → 25.16.0-beta.2

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.
Files changed (23) hide show
  1. package/dist/components/Accordion/AccordionActionButton.d.ts +6 -2
  2. package/dist/components/Menu/Menu.d.ts +6 -0
  3. package/dist/components/Menu/Menu.styles.d.ts +4 -258
  4. package/dist/components/Menu/index.d.ts +2 -0
  5. package/dist/components/Modal/styles/footer.d.ts +1 -0
  6. package/dist/components/SelectionCard/SelectionCard.d.ts +20 -0
  7. package/dist/components/SelectionCard/index.d.ts +1 -0
  8. package/dist/components/Table/Table.d.ts +1 -0
  9. package/dist/components/Table/Table.styles.d.ts +73 -65
  10. package/dist/components/Table/index.d.ts +2 -0
  11. package/dist/components/Tabs/Tabs.d.ts +10 -0
  12. package/dist/components/Tabs/combineSizeWithVariant.d.ts +120 -0
  13. package/dist/components/Tabs/index.d.ts +2 -0
  14. package/dist/components/Tabs/styles/index.d.ts +52 -298
  15. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.d.ts +27 -0
  16. package/dist/components/ToggleButtonGroup/index.d.ts +1 -0
  17. package/dist/components/ToggleButtonGroup/styles/index.d.ts +5 -0
  18. package/dist/index.cjs.js +459 -600
  19. package/dist/index.cjs.js.map +1 -1
  20. package/dist/index.d.ts +68 -18
  21. package/dist/index.esm.js +458 -599
  22. package/dist/index.esm.js.map +1 -1
  23. package/package.json +6 -4
package/dist/components/Tabs/styles/index.d.ts CHANGED
@@ -1,308 +1,62 @@
1
- declare const _default: {
2
- baseStyle?: ((props: import("@chakra-ui/react").StyleFunctionProps) => {
3
- root: {
4
- display: string;
5
- };
6
- tab: {
7
- flex: number | undefined;
8
- transitionProperty: string;
9
- transitionDuration: string;
10
- _focusVisible: {
11
- zIndex: number;
12
- boxShadow: string;
13
- };
14
- _disabled: {
15
- cursor: string;
16
- opacity: number;
17
- };
18
- };
19
- tablist: {
20
- justifyContent: string;
21
- flexDirection: string;
22
- };
23
- tabpanel: {
24
- p: number;
25
- };
26
- }) | undefined;
27
- sizes?: {
28
- sm: {
29
- tab: {
30
- py: number;
31
- px: number;
32
- fontSize: string;
1
+ import { theme as chakraDefaultTheme } from '@chakra-ui/react';
2
+ export declare const variants: {
3
+ readonly line: {
4
+ readonly tablist: {
5
+ readonly borderBottom: "2px solid";
6
+ readonly borderColor: "inherit";
7
+ };
8
+ readonly tab: {
9
+ readonly color: "gray.600";
10
+ readonly borderBottom: "2px solid";
11
+ readonly borderColor: "transparent";
12
+ readonly marginBottom: "-2px";
13
+ readonly _selected: {
14
+ readonly color: "primary.default";
15
+ readonly borderColor: "primary.default";
16
+ readonly fontWeight: "semibold";
17
+ };
18
+ readonly _active: {
19
+ readonly color: "black";
20
+ readonly bg: "transparent";
21
+ };
22
+ readonly _disabled: {
23
+ readonly opacity: 0.4;
24
+ readonly cursor: "not-allowed";
25
+ };
26
+ readonly _hover: {
27
+ readonly color: "black";
33
28
  };
34
29
  };
35
- md: {
36
- tab: {
37
- fontSize: string;
38
- py: number;
39
- px: number;
40
- };
41
- };
42
- lg: {
43
- tab: {
44
- fontSize: string;
45
- py: number;
46
- px: number;
47
- };
48
- };
49
- } | undefined;
50
- variants?: {
51
- line: (props: import("@chakra-ui/react").StyleFunctionProps) => {
52
- tablist: {
53
- [x: string]: string;
54
- borderColor: string;
55
- };
56
- tab: {
57
- [x: string]: string | {
58
- [x: string]: string | {
59
- [x: string]: string;
60
- };
61
- _dark: {
62
- [x: string]: string;
63
- };
64
- borderColor: string;
65
- _active?: undefined;
66
- } | {
67
- [x: string]: string | {
68
- [x: string]: string;
69
- };
70
- _dark: {
71
- [x: string]: string;
72
- };
73
- borderColor?: undefined;
74
- _active?: undefined;
75
- } | {
76
- _active: {
77
- bg: string;
78
- };
79
- _dark?: undefined;
80
- borderColor?: undefined;
81
- };
82
- borderColor: string;
83
- _selected: {
84
- [x: string]: string | {
85
- [x: string]: string;
86
- };
87
- _dark: {
88
- [x: string]: string;
89
- };
90
- borderColor: string;
91
- };
92
- _active: {
93
- [x: string]: string | {
94
- [x: string]: string;
95
- };
96
- _dark: {
97
- [x: string]: string;
98
- };
99
- };
100
- _disabled: {
101
- _active: {
102
- bg: string;
103
- };
104
- };
105
- color: string;
106
- bg: string;
107
- };
108
- };
109
- enclosed: (props: import("@chakra-ui/react").StyleFunctionProps) => {
110
- tab: {
111
- [x: string]: string | {
112
- [x: string]: string | {
113
- [x: string]: string;
114
- };
115
- _dark: {
116
- [x: string]: string;
117
- };
118
- borderColor: string;
119
- borderBottomColor: string;
120
- };
121
- borderTopRadius: string;
122
- border: string;
123
- borderColor: string;
124
- mb: string;
125
- _selected: {
126
- [x: string]: string | {
127
- [x: string]: string;
128
- };
129
- _dark: {
130
- [x: string]: string;
131
- };
132
- borderColor: string;
133
- borderBottomColor: string;
134
- };
135
- color: string;
136
- };
137
- tablist: {
138
- mb: string;
139
- borderBottom: string;
140
- borderColor: string;
141
- };
142
- };
143
- "enclosed-colored": (props: import("@chakra-ui/react").StyleFunctionProps) => {
144
- tab: {
145
- [x: string]: string | {
146
- [x: string]: string;
147
- marginEnd?: undefined;
148
- _dark?: undefined;
149
- borderColor?: undefined;
150
- borderTopColor?: undefined;
151
- borderBottomColor?: undefined;
152
- } | {
153
- marginEnd: string;
154
- _dark?: undefined;
155
- borderColor?: undefined;
156
- borderTopColor?: undefined;
157
- borderBottomColor?: undefined;
158
- } | {
159
- [x: string]: string | {
160
- [x: string]: string;
161
- };
162
- _dark: {
163
- [x: string]: string;
164
- };
165
- borderColor: string;
166
- borderTopColor: string;
167
- borderBottomColor: string;
168
- marginEnd?: undefined;
169
- };
170
- border: string;
171
- borderColor: string;
172
- _dark: {
173
- [x: string]: string;
174
- };
175
- mb: string;
176
- _notLast: {
177
- marginEnd: string;
178
- };
179
- _selected: {
180
- [x: string]: string | {
181
- [x: string]: string;
182
- };
183
- _dark: {
184
- [x: string]: string;
185
- };
186
- borderColor: string;
187
- borderTopColor: string;
188
- borderBottomColor: string;
189
- };
190
- color: string;
191
- bg: string;
192
- };
193
- tablist: {
194
- mb: string;
195
- borderBottom: string;
196
- borderColor: string;
197
- };
198
- };
199
- "soft-rounded": (props: import("@chakra-ui/react").StyleFunctionProps) => {
200
- tab: {
201
- borderRadius: string;
202
- fontWeight: string;
203
- color: string;
204
- _selected: {
205
- color: any;
206
- bg: any;
207
- };
208
- };
209
- };
210
- "solid-rounded": (props: import("@chakra-ui/react").StyleFunctionProps) => {
211
- tab: {
212
- [x: string]: string | {
213
- [x: string]: string;
214
- _dark?: undefined;
215
- } | {
216
- [x: string]: string | {
217
- [x: string]: string;
218
- };
219
- _dark: {
220
- [x: string]: string;
221
- };
222
- };
223
- borderRadius: string;
224
- fontWeight: string;
225
- _dark: {
226
- [x: string]: string;
227
- };
228
- _selected: {
229
- [x: string]: string | {
230
- [x: string]: string;
231
- };
232
- _dark: {
233
- [x: string]: string;
234
- };
235
- };
236
- color: string;
237
- bg: string;
238
- };
30
+ };
31
+ readonly enclosed: {
32
+ readonly tablist: {
33
+ readonly backgroundColor: "white";
34
+ readonly borderRadius: "8px";
35
+ readonly borderColor: "gray.200";
36
+ readonly borderWidth: "1px";
37
+ readonly paddingY: 1;
239
38
  };
240
- unstyled: {};
241
- } | undefined;
242
- defaultProps?: {
243
- size?: "md" | "sm" | "lg" | undefined;
244
- variant?: "unstyled" | "line" | "enclosed" | "enclosed-colored" | "soft-rounded" | "solid-rounded" | undefined;
245
- colorScheme?: string | undefined;
246
- } | undefined;
247
- parts: ("root" | "tab" | "tabpanel" | "tabpanels" | "tablist" | "indicator")[];
248
- } & {
249
- variants: {
250
- line: {
251
- tablist: {
252
- borderBottom: string;
253
- borderColor: string;
254
- };
255
- tab: {
256
- color: string;
257
- borderBottom: string;
258
- borderColor: string;
259
- marginBottom: string;
260
- _selected: {
261
- color: string;
262
- borderColor: string;
263
- fontWeight: string;
264
- };
265
- _active: {
266
- color: string;
267
- bg: string;
268
- };
269
- _disabled: {
270
- opacity: number;
271
- cursor: string;
272
- };
273
- _hover: {
274
- color: string;
39
+ readonly tab: {
40
+ readonly borderRadius: "6px";
41
+ readonly marginX: 1;
42
+ readonly _selected: {
43
+ readonly fontWeight: "semibold";
44
+ readonly color: "white";
45
+ readonly backgroundColor: "primary.default";
46
+ readonly _hover: {
47
+ readonly backgroundColor: "primary.600";
275
48
  };
276
49
  };
277
- };
278
- enclosed: {
279
- tablist: {
280
- backgroundColor: string;
281
- borderRadius: string;
282
- borederColor: string;
283
- borderWidth: string;
284
- paddingY: number;
50
+ readonly _active: {
51
+ readonly backgroundColor: "gray.200";
285
52
  };
286
- tab: {
287
- borderRadius: string;
288
- marginX: number;
289
- _selected: {
290
- fontWeight: string;
291
- color: string;
292
- backgroundColor: string;
293
- _hover: {
294
- backgroundColor: string;
295
- };
296
- };
297
- _active: {
298
- backgroundColor: string;
299
- };
300
- _disabled: {
301
- opacity: number;
302
- cursor: string;
303
- };
53
+ readonly _disabled: {
54
+ readonly opacity: 0.4;
55
+ readonly cursor: "not-allowed";
304
56
  };
305
57
  };
306
58
  };
307
59
  };
308
- export default _default;
60
+ type TabsStyle = NonNullable<typeof chakraDefaultTheme.components.Tabs>;
61
+ declare const tabsStyle: TabsStyle;
62
+ export default tabsStyle;
package/dist/components/ToggleButtonGroup/ToggleButtonGroup.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ import { type ButtonGroupProps, type SystemStyleObject } from '@chakra-ui/react';
2
+ import React from 'react';
3
+ type ToggleButtonChildProps = {
4
+ value: string;
5
+ onClick?: React.MouseEventHandler;
6
+ sx?: SystemStyleObject;
7
+ };
8
+ export type ToggleButtonGroupProps = {
9
+ onChange: (value: string) => void;
10
+ value: string;
11
+ children: React.ReactElement<ToggleButtonChildProps> | Array<React.ReactElement<ToggleButtonChildProps>>;
12
+ groupProps?: ButtonGroupProps;
13
+ buttonGroupStyles?: SystemStyleObject;
14
+ childrenStyles?: SystemStyleObject;
15
+ };
16
+ /**
17
+ * @example (
18
+ * <ToggleButtonGroup onChange={handleChangeValue} value={value}>
19
+ * <Button value={value1}>label1</Button>
20
+ * <Button value={value2}>label2</Button>
21
+ * </ToggleButtonGroup>
22
+ * )
23
+ * @note
24
+ * must have multiple child elements
25
+ */
26
+ declare const ToggleButtonGroup: React.ForwardRefExoticComponent<ToggleButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
27
+ export default ToggleButtonGroup;
package/dist/components/ToggleButtonGroup/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as ToggleButtonGroup } from './ToggleButtonGroup';
package/dist/components/ToggleButtonGroup/styles/index.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import type { SystemStyleObject } from '@chakra-ui/react';
2
+ export declare const defaultStyles: SystemStyleObject;
3
+ export declare const inactiveStyles: SystemStyleObject;
4
+ export declare const activeStyles: SystemStyleObject;
5
+ export declare const buttonGroupStyles: SystemStyleObject;