@zenkigen-inc/component-ui 1.16.3 → 1.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +102 -43
- package/dist/index.d.ts +102 -43
- package/dist/index.js +324 -248
- package/dist/index.mjs +297 -222
- package/package.json +5 -3
package/dist/index.d.mts
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import react__default, { PropsWithChildren, ElementType, ComponentPropsWithoutRef, CSSProperties, ReactNode, ChangeEvent, MouseEvent, MutableRefObject, ReactElement, RefObject, FormEvent, ButtonHTMLAttributes, TextareaHTMLAttributes
|
|
2
|
+
import react__default, { PropsWithChildren, ElementType, ComponentPropsWithoutRef, CSSProperties, ReactNode, ChangeEvent, MouseEvent, MutableRefObject, ReactElement, RefObject, InputHTMLAttributes, FormEvent, ButtonHTMLAttributes, TextareaHTMLAttributes } from 'react';
|
|
3
3
|
import { IconName } from '@zenkigen-inc/component-icons';
|
|
4
4
|
import { iconColors, tagLightColors } from '@zenkigen-inc/component-theme';
|
|
5
|
+
import { tokens } from '@zenkigen-inc/component-config';
|
|
5
6
|
|
|
6
|
-
type Props$
|
|
7
|
+
type Props$x = {
|
|
7
8
|
size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
|
|
8
9
|
userId?: number;
|
|
9
10
|
firstName?: string;
|
|
10
11
|
lastName?: string;
|
|
11
12
|
isDisabled?: boolean;
|
|
12
13
|
};
|
|
13
|
-
declare function Avatar({ size, ...props }: Props$
|
|
14
|
+
declare function Avatar({ size, ...props }: Props$x): react.JSX.Element;
|
|
14
15
|
|
|
15
16
|
declare function Breadcrumb({ children }: PropsWithChildren): react.JSX.Element;
|
|
16
17
|
declare namespace Breadcrumb {
|
|
@@ -25,7 +26,7 @@ type AsProp<T extends ElementAs> = {
|
|
|
25
26
|
elementAs?: T;
|
|
26
27
|
};
|
|
27
28
|
type PolymorphicPropsWithoutRef<T extends ElementAs, P extends object> = PropsWithChildren<P> & ComponentPropsWithoutRef<T> & AsProp<T>;
|
|
28
|
-
type Props$
|
|
29
|
+
type Props$w<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
|
|
29
30
|
size?: Size$2;
|
|
30
31
|
width?: CSSProperties['width'];
|
|
31
32
|
isSelected?: boolean;
|
|
@@ -36,9 +37,9 @@ type Props$v<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
|
|
|
36
37
|
borderRadius?: CSSProperties['borderRadius'];
|
|
37
38
|
justifyContent?: JustifyContent;
|
|
38
39
|
}>;
|
|
39
|
-
declare const Button: <T extends ElementAs = "button">({ size, variant, isDisabled, isSelected, width, borderRadius, justifyContent, before, after, elementAs, children, ...props }: Props$
|
|
40
|
+
declare const Button: <T extends ElementAs = "button">({ size, variant, isDisabled, isSelected, width, borderRadius, justifyContent, before, after, elementAs, children, ...props }: Props$w<T>) => react.JSX.Element;
|
|
40
41
|
|
|
41
|
-
type Props$
|
|
42
|
+
type Props$v = {
|
|
42
43
|
name?: string;
|
|
43
44
|
value?: string;
|
|
44
45
|
id?: string;
|
|
@@ -49,13 +50,13 @@ type Props$u = {
|
|
|
49
50
|
label?: string;
|
|
50
51
|
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
51
52
|
};
|
|
52
|
-
declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$
|
|
53
|
+
declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$v): react.JSX.Element;
|
|
53
54
|
|
|
54
|
-
type Props$
|
|
55
|
+
type Props$u = {
|
|
55
56
|
color?: 'gray' | 'red';
|
|
56
57
|
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
57
58
|
};
|
|
58
|
-
declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props$
|
|
59
|
+
declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props$u>): react.JSX.Element;
|
|
59
60
|
|
|
60
61
|
type DropdownItemType = {
|
|
61
62
|
id: string;
|
|
@@ -66,15 +67,15 @@ type DropdownItemType = {
|
|
|
66
67
|
type DropdownVerticalPosition = 'top' | 'bottom';
|
|
67
68
|
type DropdownHorizontalAlign = 'left' | 'center' | 'right';
|
|
68
69
|
|
|
69
|
-
type Props$
|
|
70
|
+
type Props$t = {
|
|
70
71
|
maxHeight?: CSSProperties['height'];
|
|
71
72
|
isNoPadding?: boolean;
|
|
72
73
|
verticalPosition?: DropdownVerticalPosition;
|
|
73
74
|
horizontalAlign?: DropdownHorizontalAlign;
|
|
74
75
|
};
|
|
75
|
-
declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props$
|
|
76
|
+
declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props$t>): false | react.JSX.Element;
|
|
76
77
|
|
|
77
|
-
type Props$
|
|
78
|
+
type Props$s = {
|
|
78
79
|
size?: 'x-small' | 'small' | 'medium' | 'large';
|
|
79
80
|
variant?: 'text' | 'outline';
|
|
80
81
|
title?: string;
|
|
@@ -90,28 +91,28 @@ type Props$r = {
|
|
|
90
91
|
label: string;
|
|
91
92
|
icon?: IconName;
|
|
92
93
|
});
|
|
93
|
-
declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, portalTargetRef, }: PropsWithChildren<Props$
|
|
94
|
+
declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, portalTargetRef, }: PropsWithChildren<Props$s>): react.JSX.Element;
|
|
94
95
|
declare namespace Dropdown {
|
|
95
96
|
var Menu: typeof DropdownMenu;
|
|
96
97
|
var Item: typeof DropdownItem;
|
|
97
98
|
}
|
|
98
99
|
|
|
99
|
-
type Props$
|
|
100
|
+
type Props$r = {
|
|
100
101
|
value: number;
|
|
101
102
|
isEditable?: boolean;
|
|
102
103
|
onChangeRating?: (newRating: number) => void | null;
|
|
103
104
|
size?: 'medium' | 'large';
|
|
104
105
|
};
|
|
105
|
-
declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props$
|
|
106
|
+
declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props$r): react.JSX.Element;
|
|
106
107
|
|
|
107
108
|
type Level = 1 | 2 | 3 | 4 | 5;
|
|
108
|
-
type Props$
|
|
109
|
+
type Props$q = {
|
|
109
110
|
level: Level;
|
|
110
111
|
before?: ReactNode;
|
|
111
112
|
after?: ReactNode;
|
|
112
113
|
children?: ReactNode;
|
|
113
114
|
};
|
|
114
|
-
declare function Heading(props: Props$
|
|
115
|
+
declare function Heading(props: Props$q): react.JSX.Element;
|
|
115
116
|
|
|
116
117
|
declare const useOutsideClick: <T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: (event: Event) => void, enabled?: boolean) => void;
|
|
117
118
|
|
|
@@ -129,20 +130,72 @@ type UseRovingFocusReturn = {
|
|
|
129
130
|
};
|
|
130
131
|
declare const useRovingFocus: ({ values, defaultFocusedValue, isDisabled, }: UseRovingFocusProps) => UseRovingFocusReturn;
|
|
131
132
|
|
|
133
|
+
type UserColorToken = keyof typeof tokens.user;
|
|
134
|
+
type TextColorToken = keyof typeof tokens.tokens.text;
|
|
135
|
+
type LinkColorToken = keyof typeof tokens.tokens.link;
|
|
136
|
+
type BackgroundColorToken = keyof typeof tokens.tokens.background;
|
|
137
|
+
type BorderColorToken = keyof typeof tokens.tokens.border;
|
|
138
|
+
type IconColorToken = keyof typeof tokens.tokens.icon;
|
|
139
|
+
type InteractiveColorToken = keyof typeof tokens.tokens.interactive;
|
|
140
|
+
type FieldColorToken = keyof typeof tokens.tokens.field;
|
|
141
|
+
type FocusColorToken = keyof typeof tokens.tokens.focus;
|
|
142
|
+
type HoverColorToken = keyof typeof tokens.tokens.hover;
|
|
143
|
+
type ActiveColorToken = keyof typeof tokens.tokens.active;
|
|
144
|
+
type SelectedColorToken = keyof typeof tokens.tokens.selected;
|
|
145
|
+
type DisabledColorToken = keyof typeof tokens.tokens.disabled;
|
|
146
|
+
type SupportColorToken = keyof typeof tokens.tokens.support;
|
|
147
|
+
type BlueColorStep = keyof typeof tokens.colors.blue;
|
|
148
|
+
type GrayColorStep = keyof typeof tokens.colors.gray;
|
|
149
|
+
type RedColorStep = keyof typeof tokens.colors.red;
|
|
150
|
+
type YellowColorStep = keyof typeof tokens.colors.yellow;
|
|
151
|
+
type GreenColorStep = keyof typeof tokens.colors.green;
|
|
152
|
+
type PurpleColorStep = keyof typeof tokens.colors.purple;
|
|
153
|
+
type BlueGreenColorStep = keyof typeof tokens.colors.blueGreen;
|
|
154
|
+
type BaseColorToken = `blue-${BlueColorStep}` | `gray-${GrayColorStep}` | `red-${RedColorStep}` | `yellow-${YellowColorStep}` | `green-${GreenColorStep}` | `purple-${PurpleColorStep}` | `blueGreen-${BlueGreenColorStep}` | 'black' | 'white';
|
|
155
|
+
declare const _tailwindColors: {
|
|
156
|
+
readonly slate: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
157
|
+
readonly gray: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
158
|
+
readonly zinc: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
159
|
+
readonly neutral: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
160
|
+
readonly stone: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
161
|
+
readonly red: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
162
|
+
readonly orange: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
163
|
+
readonly amber: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
164
|
+
readonly yellow: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
165
|
+
readonly lime: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
166
|
+
readonly green: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
167
|
+
readonly emerald: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
168
|
+
readonly teal: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
169
|
+
readonly cyan: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
170
|
+
readonly sky: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
171
|
+
readonly blue: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
172
|
+
readonly indigo: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
173
|
+
readonly violet: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
174
|
+
readonly purple: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
175
|
+
readonly fuchsia: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
176
|
+
readonly pink: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
177
|
+
readonly rose: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
178
|
+
};
|
|
179
|
+
type TailwindColorName = keyof typeof _tailwindColors;
|
|
180
|
+
type TailwindColorShade = (typeof _tailwindColors)[TailwindColorName][number];
|
|
181
|
+
type TailwindColorToken = `${TailwindColorName}-${TailwindColorShade}` | 'transparent' | 'current' | 'inherit';
|
|
182
|
+
type ColorToken = UserColorToken | TextColorToken | LinkColorToken | BackgroundColorToken | BorderColorToken | IconColorToken | InteractiveColorToken | FieldColorToken | FocusColorToken | HoverColorToken | ActiveColorToken | SelectedColorToken | DisabledColorToken | SupportColorToken | BaseColorToken | TailwindColorToken;
|
|
183
|
+
|
|
132
184
|
type Size$1 = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
|
|
133
185
|
type Color = keyof typeof iconColors;
|
|
134
|
-
type Props$
|
|
186
|
+
type Props$p = {
|
|
135
187
|
name: IconName;
|
|
136
188
|
size?: Size$1;
|
|
137
189
|
color?: Color;
|
|
190
|
+
accentColor?: ColorToken;
|
|
138
191
|
isDisabled?: boolean;
|
|
139
192
|
className?: string;
|
|
140
193
|
};
|
|
141
|
-
declare const Icon: ({ size, isDisabled, ...props }: Props$
|
|
194
|
+
declare const Icon: ({ size, isDisabled, ...props }: Props$p) => react.JSX.Element;
|
|
142
195
|
|
|
143
196
|
type Size = 'small' | 'medium' | 'large';
|
|
144
197
|
type Variant = 'outline' | 'text';
|
|
145
|
-
type Props$
|
|
198
|
+
type Props$o = {
|
|
146
199
|
/** 表示するアイコン名 */
|
|
147
200
|
icon: IconName;
|
|
148
201
|
/** ボタンのサイズ */
|
|
@@ -163,28 +216,28 @@ type Props$n = {
|
|
|
163
216
|
isAnchor?: false;
|
|
164
217
|
onClick?: () => void;
|
|
165
218
|
} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled' | 'className'>));
|
|
166
|
-
declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$
|
|
219
|
+
declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$o): react.JSX.Element;
|
|
167
220
|
|
|
168
|
-
type Props$
|
|
221
|
+
type Props$n = {
|
|
169
222
|
size?: 'small' | 'medium' | 'large';
|
|
170
223
|
position?: 'fixed' | 'absolute' | 'static';
|
|
171
224
|
height?: string;
|
|
172
225
|
};
|
|
173
|
-
declare function Loading({ size, position, height }: Props$
|
|
226
|
+
declare function Loading({ size, position, height }: Props$n): react.JSX.Element;
|
|
174
227
|
|
|
175
228
|
declare function ModalBody({ children }: PropsWithChildren): react.JSX.Element;
|
|
176
229
|
|
|
177
|
-
type Props$
|
|
230
|
+
type Props$m = {
|
|
178
231
|
isNoBorder?: boolean;
|
|
179
232
|
};
|
|
180
|
-
declare function ModalFooter({ children, isNoBorder }: PropsWithChildren<Props$
|
|
233
|
+
declare function ModalFooter({ children, isNoBorder }: PropsWithChildren<Props$m>): react__default.JSX.Element;
|
|
181
234
|
|
|
182
|
-
type Props$
|
|
235
|
+
type Props$l = {
|
|
183
236
|
isNoBorder?: boolean;
|
|
184
237
|
};
|
|
185
|
-
declare function ModalHeader({ children, isNoBorder }: PropsWithChildren<Props$
|
|
238
|
+
declare function ModalHeader({ children, isNoBorder }: PropsWithChildren<Props$l>): react.JSX.Element;
|
|
186
239
|
|
|
187
|
-
type Props$
|
|
240
|
+
type Props$k = {
|
|
188
241
|
width?: CSSProperties['width'];
|
|
189
242
|
height?: CSSProperties['height'];
|
|
190
243
|
maxWidth?: CSSProperties['maxWidth'];
|
|
@@ -192,14 +245,14 @@ type Props$j = {
|
|
|
192
245
|
onClose?: () => void;
|
|
193
246
|
portalTargetRef?: MutableRefObject<HTMLElement | null>;
|
|
194
247
|
};
|
|
195
|
-
declare function Modal({ children, width, height, maxWidth, isOpen, onClose, portalTargetRef, }: PropsWithChildren<Props$
|
|
248
|
+
declare function Modal({ children, width, height, maxWidth, isOpen, onClose, portalTargetRef, }: PropsWithChildren<Props$k>): react.JSX.Element | null;
|
|
196
249
|
declare namespace Modal {
|
|
197
250
|
var Body: typeof ModalBody;
|
|
198
251
|
var Header: typeof ModalHeader;
|
|
199
252
|
var Footer: typeof ModalFooter;
|
|
200
253
|
}
|
|
201
254
|
|
|
202
|
-
type Props$
|
|
255
|
+
type Props$j = {
|
|
203
256
|
state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
|
|
204
257
|
size?: 'small' | 'medium';
|
|
205
258
|
children?: ReactNode;
|
|
@@ -209,9 +262,9 @@ type Props$i = {
|
|
|
209
262
|
showClose: true;
|
|
210
263
|
onClickClose: () => void;
|
|
211
264
|
});
|
|
212
|
-
declare function NotificationInline({ state, size, ...props }: Props$
|
|
265
|
+
declare function NotificationInline({ state, size, ...props }: Props$j): react.JSX.Element;
|
|
213
266
|
|
|
214
|
-
type Props$
|
|
267
|
+
type Props$i = {
|
|
215
268
|
/** 現在のページ番号 */
|
|
216
269
|
currentPage: number;
|
|
217
270
|
/** トータルのページ数 */
|
|
@@ -221,9 +274,9 @@ type Props$h = {
|
|
|
221
274
|
/** ボタンが押されたときのイベントハンドラ */
|
|
222
275
|
onClick: (value: number) => void;
|
|
223
276
|
};
|
|
224
|
-
declare function Pagination({ currentPage, totalPage, sideNumPagesToShow, onClick }: Props$
|
|
277
|
+
declare function Pagination({ currentPage, totalPage, sideNumPagesToShow, onClick }: Props$i): react.JSX.Element;
|
|
225
278
|
|
|
226
|
-
type Props$
|
|
279
|
+
type Props$h = {
|
|
227
280
|
/** トータル件数 */
|
|
228
281
|
totalSize: number;
|
|
229
282
|
/** ページあたり件数 */
|
|
@@ -243,7 +296,20 @@ type Props$g = {
|
|
|
243
296
|
/** Selectが切り替わった時のイベントハンドラ */
|
|
244
297
|
onChange: (value: number) => void;
|
|
245
298
|
};
|
|
246
|
-
declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$
|
|
299
|
+
declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$h): react.JSX.Element;
|
|
300
|
+
|
|
301
|
+
declare const TextInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
|
|
302
|
+
size?: "medium" | "large";
|
|
303
|
+
value: string;
|
|
304
|
+
isError?: boolean;
|
|
305
|
+
onClickClearButton?: () => void;
|
|
306
|
+
} & {
|
|
307
|
+
/** 入力欄の末尾に表示する要素。例: アイコンやテキスト（内部実装用） */
|
|
308
|
+
after?: ReactNode;
|
|
309
|
+
} & react.RefAttributes<HTMLInputElement>>;
|
|
310
|
+
|
|
311
|
+
type Props$g = Omit<ComponentPropsWithoutRef<typeof TextInput>, 'type' | 'onClickClearButton'>;
|
|
312
|
+
declare const PasswordInput: react.ForwardRefExoticComponent<Props$g & react.RefAttributes<HTMLInputElement>>;
|
|
247
313
|
|
|
248
314
|
type Props$f = {
|
|
249
315
|
name?: string;
|
|
@@ -445,13 +511,6 @@ type Props$3 = TextareaHTMLAttributes<HTMLTextAreaElement> & {
|
|
|
445
511
|
});
|
|
446
512
|
declare const TextArea: react.ForwardRefExoticComponent<Props$3 & react.RefAttributes<HTMLTextAreaElement>>;
|
|
447
513
|
|
|
448
|
-
declare const TextInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
|
|
449
|
-
size?: "medium" | "large";
|
|
450
|
-
value: string;
|
|
451
|
-
isError?: boolean;
|
|
452
|
-
onClickClearButton?: () => void;
|
|
453
|
-
} & react.RefAttributes<HTMLInputElement>>;
|
|
454
|
-
|
|
455
514
|
type ToastState = 'success' | 'error' | 'warning' | 'information';
|
|
456
515
|
|
|
457
516
|
type Props$2 = {
|
|
@@ -501,4 +560,4 @@ type Props = {
|
|
|
501
560
|
};
|
|
502
561
|
declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: PropsWithChildren<Props>): react.JSX.Element;
|
|
503
562
|
|
|
504
|
-
export { Avatar, Breadcrumb, Button, Checkbox, type ColorVariant, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, Radio, Search, SegmentedControl, Select, type SelectOption, SelectSort, SortButton, type SortOrder, Tab, TabItem, Table, TableCell, TableRow, Tag, type TagColor, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, type UseRovingFocusProps, type UseRovingFocusReturn, useOutsideClick, useRovingFocus, useToast };
|
|
563
|
+
export { Avatar, Breadcrumb, Button, Checkbox, type ColorVariant, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, Radio, Search, SegmentedControl, Select, type SelectOption, SelectSort, SortButton, type SortOrder, Tab, TabItem, Table, TableCell, TableRow, Tag, type TagColor, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, type UseRovingFocusProps, type UseRovingFocusReturn, useOutsideClick, useRovingFocus, useToast };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import react__default, { PropsWithChildren, ElementType, ComponentPropsWithoutRef, CSSProperties, ReactNode, ChangeEvent, MouseEvent, MutableRefObject, ReactElement, RefObject, FormEvent, ButtonHTMLAttributes, TextareaHTMLAttributes
|
|
2
|
+
import react__default, { PropsWithChildren, ElementType, ComponentPropsWithoutRef, CSSProperties, ReactNode, ChangeEvent, MouseEvent, MutableRefObject, ReactElement, RefObject, InputHTMLAttributes, FormEvent, ButtonHTMLAttributes, TextareaHTMLAttributes } from 'react';
|
|
3
3
|
import { IconName } from '@zenkigen-inc/component-icons';
|
|
4
4
|
import { iconColors, tagLightColors } from '@zenkigen-inc/component-theme';
|
|
5
|
+
import { tokens } from '@zenkigen-inc/component-config';
|
|
5
6
|
|
|
6
|
-
type Props$
|
|
7
|
+
type Props$x = {
|
|
7
8
|
size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
|
|
8
9
|
userId?: number;
|
|
9
10
|
firstName?: string;
|
|
10
11
|
lastName?: string;
|
|
11
12
|
isDisabled?: boolean;
|
|
12
13
|
};
|
|
13
|
-
declare function Avatar({ size, ...props }: Props$
|
|
14
|
+
declare function Avatar({ size, ...props }: Props$x): react.JSX.Element;
|
|
14
15
|
|
|
15
16
|
declare function Breadcrumb({ children }: PropsWithChildren): react.JSX.Element;
|
|
16
17
|
declare namespace Breadcrumb {
|
|
@@ -25,7 +26,7 @@ type AsProp<T extends ElementAs> = {
|
|
|
25
26
|
elementAs?: T;
|
|
26
27
|
};
|
|
27
28
|
type PolymorphicPropsWithoutRef<T extends ElementAs, P extends object> = PropsWithChildren<P> & ComponentPropsWithoutRef<T> & AsProp<T>;
|
|
28
|
-
type Props$
|
|
29
|
+
type Props$w<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
|
|
29
30
|
size?: Size$2;
|
|
30
31
|
width?: CSSProperties['width'];
|
|
31
32
|
isSelected?: boolean;
|
|
@@ -36,9 +37,9 @@ type Props$v<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
|
|
|
36
37
|
borderRadius?: CSSProperties['borderRadius'];
|
|
37
38
|
justifyContent?: JustifyContent;
|
|
38
39
|
}>;
|
|
39
|
-
declare const Button: <T extends ElementAs = "button">({ size, variant, isDisabled, isSelected, width, borderRadius, justifyContent, before, after, elementAs, children, ...props }: Props$
|
|
40
|
+
declare const Button: <T extends ElementAs = "button">({ size, variant, isDisabled, isSelected, width, borderRadius, justifyContent, before, after, elementAs, children, ...props }: Props$w<T>) => react.JSX.Element;
|
|
40
41
|
|
|
41
|
-
type Props$
|
|
42
|
+
type Props$v = {
|
|
42
43
|
name?: string;
|
|
43
44
|
value?: string;
|
|
44
45
|
id?: string;
|
|
@@ -49,13 +50,13 @@ type Props$u = {
|
|
|
49
50
|
label?: string;
|
|
50
51
|
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
51
52
|
};
|
|
52
|
-
declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$
|
|
53
|
+
declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$v): react.JSX.Element;
|
|
53
54
|
|
|
54
|
-
type Props$
|
|
55
|
+
type Props$u = {
|
|
55
56
|
color?: 'gray' | 'red';
|
|
56
57
|
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
57
58
|
};
|
|
58
|
-
declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props$
|
|
59
|
+
declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props$u>): react.JSX.Element;
|
|
59
60
|
|
|
60
61
|
type DropdownItemType = {
|
|
61
62
|
id: string;
|
|
@@ -66,15 +67,15 @@ type DropdownItemType = {
|
|
|
66
67
|
type DropdownVerticalPosition = 'top' | 'bottom';
|
|
67
68
|
type DropdownHorizontalAlign = 'left' | 'center' | 'right';
|
|
68
69
|
|
|
69
|
-
type Props$
|
|
70
|
+
type Props$t = {
|
|
70
71
|
maxHeight?: CSSProperties['height'];
|
|
71
72
|
isNoPadding?: boolean;
|
|
72
73
|
verticalPosition?: DropdownVerticalPosition;
|
|
73
74
|
horizontalAlign?: DropdownHorizontalAlign;
|
|
74
75
|
};
|
|
75
|
-
declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props$
|
|
76
|
+
declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props$t>): false | react.JSX.Element;
|
|
76
77
|
|
|
77
|
-
type Props$
|
|
78
|
+
type Props$s = {
|
|
78
79
|
size?: 'x-small' | 'small' | 'medium' | 'large';
|
|
79
80
|
variant?: 'text' | 'outline';
|
|
80
81
|
title?: string;
|
|
@@ -90,28 +91,28 @@ type Props$r = {
|
|
|
90
91
|
label: string;
|
|
91
92
|
icon?: IconName;
|
|
92
93
|
});
|
|
93
|
-
declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, portalTargetRef, }: PropsWithChildren<Props$
|
|
94
|
+
declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, portalTargetRef, }: PropsWithChildren<Props$s>): react.JSX.Element;
|
|
94
95
|
declare namespace Dropdown {
|
|
95
96
|
var Menu: typeof DropdownMenu;
|
|
96
97
|
var Item: typeof DropdownItem;
|
|
97
98
|
}
|
|
98
99
|
|
|
99
|
-
type Props$
|
|
100
|
+
type Props$r = {
|
|
100
101
|
value: number;
|
|
101
102
|
isEditable?: boolean;
|
|
102
103
|
onChangeRating?: (newRating: number) => void | null;
|
|
103
104
|
size?: 'medium' | 'large';
|
|
104
105
|
};
|
|
105
|
-
declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props$
|
|
106
|
+
declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props$r): react.JSX.Element;
|
|
106
107
|
|
|
107
108
|
type Level = 1 | 2 | 3 | 4 | 5;
|
|
108
|
-
type Props$
|
|
109
|
+
type Props$q = {
|
|
109
110
|
level: Level;
|
|
110
111
|
before?: ReactNode;
|
|
111
112
|
after?: ReactNode;
|
|
112
113
|
children?: ReactNode;
|
|
113
114
|
};
|
|
114
|
-
declare function Heading(props: Props$
|
|
115
|
+
declare function Heading(props: Props$q): react.JSX.Element;
|
|
115
116
|
|
|
116
117
|
declare const useOutsideClick: <T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: (event: Event) => void, enabled?: boolean) => void;
|
|
117
118
|
|
|
@@ -129,20 +130,72 @@ type UseRovingFocusReturn = {
|
|
|
129
130
|
};
|
|
130
131
|
declare const useRovingFocus: ({ values, defaultFocusedValue, isDisabled, }: UseRovingFocusProps) => UseRovingFocusReturn;
|
|
131
132
|
|
|
133
|
+
type UserColorToken = keyof typeof tokens.user;
|
|
134
|
+
type TextColorToken = keyof typeof tokens.tokens.text;
|
|
135
|
+
type LinkColorToken = keyof typeof tokens.tokens.link;
|
|
136
|
+
type BackgroundColorToken = keyof typeof tokens.tokens.background;
|
|
137
|
+
type BorderColorToken = keyof typeof tokens.tokens.border;
|
|
138
|
+
type IconColorToken = keyof typeof tokens.tokens.icon;
|
|
139
|
+
type InteractiveColorToken = keyof typeof tokens.tokens.interactive;
|
|
140
|
+
type FieldColorToken = keyof typeof tokens.tokens.field;
|
|
141
|
+
type FocusColorToken = keyof typeof tokens.tokens.focus;
|
|
142
|
+
type HoverColorToken = keyof typeof tokens.tokens.hover;
|
|
143
|
+
type ActiveColorToken = keyof typeof tokens.tokens.active;
|
|
144
|
+
type SelectedColorToken = keyof typeof tokens.tokens.selected;
|
|
145
|
+
type DisabledColorToken = keyof typeof tokens.tokens.disabled;
|
|
146
|
+
type SupportColorToken = keyof typeof tokens.tokens.support;
|
|
147
|
+
type BlueColorStep = keyof typeof tokens.colors.blue;
|
|
148
|
+
type GrayColorStep = keyof typeof tokens.colors.gray;
|
|
149
|
+
type RedColorStep = keyof typeof tokens.colors.red;
|
|
150
|
+
type YellowColorStep = keyof typeof tokens.colors.yellow;
|
|
151
|
+
type GreenColorStep = keyof typeof tokens.colors.green;
|
|
152
|
+
type PurpleColorStep = keyof typeof tokens.colors.purple;
|
|
153
|
+
type BlueGreenColorStep = keyof typeof tokens.colors.blueGreen;
|
|
154
|
+
type BaseColorToken = `blue-${BlueColorStep}` | `gray-${GrayColorStep}` | `red-${RedColorStep}` | `yellow-${YellowColorStep}` | `green-${GreenColorStep}` | `purple-${PurpleColorStep}` | `blueGreen-${BlueGreenColorStep}` | 'black' | 'white';
|
|
155
|
+
declare const _tailwindColors: {
|
|
156
|
+
readonly slate: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
157
|
+
readonly gray: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
158
|
+
readonly zinc: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
159
|
+
readonly neutral: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
160
|
+
readonly stone: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
161
|
+
readonly red: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
162
|
+
readonly orange: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
163
|
+
readonly amber: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
164
|
+
readonly yellow: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
165
|
+
readonly lime: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
166
|
+
readonly green: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
167
|
+
readonly emerald: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
168
|
+
readonly teal: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
169
|
+
readonly cyan: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
170
|
+
readonly sky: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
171
|
+
readonly blue: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
172
|
+
readonly indigo: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
173
|
+
readonly violet: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
174
|
+
readonly purple: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
175
|
+
readonly fuchsia: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
176
|
+
readonly pink: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
177
|
+
readonly rose: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
178
|
+
};
|
|
179
|
+
type TailwindColorName = keyof typeof _tailwindColors;
|
|
180
|
+
type TailwindColorShade = (typeof _tailwindColors)[TailwindColorName][number];
|
|
181
|
+
type TailwindColorToken = `${TailwindColorName}-${TailwindColorShade}` | 'transparent' | 'current' | 'inherit';
|
|
182
|
+
type ColorToken = UserColorToken | TextColorToken | LinkColorToken | BackgroundColorToken | BorderColorToken | IconColorToken | InteractiveColorToken | FieldColorToken | FocusColorToken | HoverColorToken | ActiveColorToken | SelectedColorToken | DisabledColorToken | SupportColorToken | BaseColorToken | TailwindColorToken;
|
|
183
|
+
|
|
132
184
|
type Size$1 = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
|
|
133
185
|
type Color = keyof typeof iconColors;
|
|
134
|
-
type Props$
|
|
186
|
+
type Props$p = {
|
|
135
187
|
name: IconName;
|
|
136
188
|
size?: Size$1;
|
|
137
189
|
color?: Color;
|
|
190
|
+
accentColor?: ColorToken;
|
|
138
191
|
isDisabled?: boolean;
|
|
139
192
|
className?: string;
|
|
140
193
|
};
|
|
141
|
-
declare const Icon: ({ size, isDisabled, ...props }: Props$
|
|
194
|
+
declare const Icon: ({ size, isDisabled, ...props }: Props$p) => react.JSX.Element;
|
|
142
195
|
|
|
143
196
|
type Size = 'small' | 'medium' | 'large';
|
|
144
197
|
type Variant = 'outline' | 'text';
|
|
145
|
-
type Props$
|
|
198
|
+
type Props$o = {
|
|
146
199
|
/** 表示するアイコン名 */
|
|
147
200
|
icon: IconName;
|
|
148
201
|
/** ボタンのサイズ */
|
|
@@ -163,28 +216,28 @@ type Props$n = {
|
|
|
163
216
|
isAnchor?: false;
|
|
164
217
|
onClick?: () => void;
|
|
165
218
|
} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled' | 'className'>));
|
|
166
|
-
declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$
|
|
219
|
+
declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$o): react.JSX.Element;
|
|
167
220
|
|
|
168
|
-
type Props$
|
|
221
|
+
type Props$n = {
|
|
169
222
|
size?: 'small' | 'medium' | 'large';
|
|
170
223
|
position?: 'fixed' | 'absolute' | 'static';
|
|
171
224
|
height?: string;
|
|
172
225
|
};
|
|
173
|
-
declare function Loading({ size, position, height }: Props$
|
|
226
|
+
declare function Loading({ size, position, height }: Props$n): react.JSX.Element;
|
|
174
227
|
|
|
175
228
|
declare function ModalBody({ children }: PropsWithChildren): react.JSX.Element;
|
|
176
229
|
|
|
177
|
-
type Props$
|
|
230
|
+
type Props$m = {
|
|
178
231
|
isNoBorder?: boolean;
|
|
179
232
|
};
|
|
180
|
-
declare function ModalFooter({ children, isNoBorder }: PropsWithChildren<Props$
|
|
233
|
+
declare function ModalFooter({ children, isNoBorder }: PropsWithChildren<Props$m>): react__default.JSX.Element;
|
|
181
234
|
|
|
182
|
-
type Props$
|
|
235
|
+
type Props$l = {
|
|
183
236
|
isNoBorder?: boolean;
|
|
184
237
|
};
|
|
185
|
-
declare function ModalHeader({ children, isNoBorder }: PropsWithChildren<Props$
|
|
238
|
+
declare function ModalHeader({ children, isNoBorder }: PropsWithChildren<Props$l>): react.JSX.Element;
|
|
186
239
|
|
|
187
|
-
type Props$
|
|
240
|
+
type Props$k = {
|
|
188
241
|
width?: CSSProperties['width'];
|
|
189
242
|
height?: CSSProperties['height'];
|
|
190
243
|
maxWidth?: CSSProperties['maxWidth'];
|
|
@@ -192,14 +245,14 @@ type Props$j = {
|
|
|
192
245
|
onClose?: () => void;
|
|
193
246
|
portalTargetRef?: MutableRefObject<HTMLElement | null>;
|
|
194
247
|
};
|
|
195
|
-
declare function Modal({ children, width, height, maxWidth, isOpen, onClose, portalTargetRef, }: PropsWithChildren<Props$
|
|
248
|
+
declare function Modal({ children, width, height, maxWidth, isOpen, onClose, portalTargetRef, }: PropsWithChildren<Props$k>): react.JSX.Element | null;
|
|
196
249
|
declare namespace Modal {
|
|
197
250
|
var Body: typeof ModalBody;
|
|
198
251
|
var Header: typeof ModalHeader;
|
|
199
252
|
var Footer: typeof ModalFooter;
|
|
200
253
|
}
|
|
201
254
|
|
|
202
|
-
type Props$
|
|
255
|
+
type Props$j = {
|
|
203
256
|
state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
|
|
204
257
|
size?: 'small' | 'medium';
|
|
205
258
|
children?: ReactNode;
|
|
@@ -209,9 +262,9 @@ type Props$i = {
|
|
|
209
262
|
showClose: true;
|
|
210
263
|
onClickClose: () => void;
|
|
211
264
|
});
|
|
212
|
-
declare function NotificationInline({ state, size, ...props }: Props$
|
|
265
|
+
declare function NotificationInline({ state, size, ...props }: Props$j): react.JSX.Element;
|
|
213
266
|
|
|
214
|
-
type Props$
|
|
267
|
+
type Props$i = {
|
|
215
268
|
/** 現在のページ番号 */
|
|
216
269
|
currentPage: number;
|
|
217
270
|
/** トータルのページ数 */
|
|
@@ -221,9 +274,9 @@ type Props$h = {
|
|
|
221
274
|
/** ボタンが押されたときのイベントハンドラ */
|
|
222
275
|
onClick: (value: number) => void;
|
|
223
276
|
};
|
|
224
|
-
declare function Pagination({ currentPage, totalPage, sideNumPagesToShow, onClick }: Props$
|
|
277
|
+
declare function Pagination({ currentPage, totalPage, sideNumPagesToShow, onClick }: Props$i): react.JSX.Element;
|
|
225
278
|
|
|
226
|
-
type Props$
|
|
279
|
+
type Props$h = {
|
|
227
280
|
/** トータル件数 */
|
|
228
281
|
totalSize: number;
|
|
229
282
|
/** ページあたり件数 */
|
|
@@ -243,7 +296,20 @@ type Props$g = {
|
|
|
243
296
|
/** Selectが切り替わった時のイベントハンドラ */
|
|
244
297
|
onChange: (value: number) => void;
|
|
245
298
|
};
|
|
246
|
-
declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$
|
|
299
|
+
declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$h): react.JSX.Element;
|
|
300
|
+
|
|
301
|
+
declare const TextInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
|
|
302
|
+
size?: "medium" | "large";
|
|
303
|
+
value: string;
|
|
304
|
+
isError?: boolean;
|
|
305
|
+
onClickClearButton?: () => void;
|
|
306
|
+
} & {
|
|
307
|
+
/** 入力欄の末尾に表示する要素。例: アイコンやテキスト（内部実装用） */
|
|
308
|
+
after?: ReactNode;
|
|
309
|
+
} & react.RefAttributes<HTMLInputElement>>;
|
|
310
|
+
|
|
311
|
+
type Props$g = Omit<ComponentPropsWithoutRef<typeof TextInput>, 'type' | 'onClickClearButton'>;
|
|
312
|
+
declare const PasswordInput: react.ForwardRefExoticComponent<Props$g & react.RefAttributes<HTMLInputElement>>;
|
|
247
313
|
|
|
248
314
|
type Props$f = {
|
|
249
315
|
name?: string;
|
|
@@ -445,13 +511,6 @@ type Props$3 = TextareaHTMLAttributes<HTMLTextAreaElement> & {
|
|
|
445
511
|
});
|
|
446
512
|
declare const TextArea: react.ForwardRefExoticComponent<Props$3 & react.RefAttributes<HTMLTextAreaElement>>;
|
|
447
513
|
|
|
448
|
-
declare const TextInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
|
|
449
|
-
size?: "medium" | "large";
|
|
450
|
-
value: string;
|
|
451
|
-
isError?: boolean;
|
|
452
|
-
onClickClearButton?: () => void;
|
|
453
|
-
} & react.RefAttributes<HTMLInputElement>>;
|
|
454
|
-
|
|
455
514
|
type ToastState = 'success' | 'error' | 'warning' | 'information';
|
|
456
515
|
|
|
457
516
|
type Props$2 = {
|
|
@@ -501,4 +560,4 @@ type Props = {
|
|
|
501
560
|
};
|
|
502
561
|
declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: PropsWithChildren<Props>): react.JSX.Element;
|
|
503
562
|
|
|
504
|
-
export { Avatar, Breadcrumb, Button, Checkbox, type ColorVariant, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, Radio, Search, SegmentedControl, Select, type SelectOption, SelectSort, SortButton, type SortOrder, Tab, TabItem, Table, TableCell, TableRow, Tag, type TagColor, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, type UseRovingFocusProps, type UseRovingFocusReturn, useOutsideClick, useRovingFocus, useToast };
|
|
563
|
+
export { Avatar, Breadcrumb, Button, Checkbox, type ColorVariant, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, Radio, Search, SegmentedControl, Select, type SelectOption, SelectSort, SortButton, type SortOrder, Tab, TabItem, Table, TableCell, TableRow, Tag, type TagColor, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, type UseRovingFocusProps, type UseRovingFocusReturn, useOutsideClick, useRovingFocus, useToast };
|