visits-style 2.0.0 → 2.0.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.
package/dist/index.d.ts CHANGED
@@ -1,404 +1,447 @@
1
- export { default as clsx } from 'clsx';
2
- import * as react_jsx_runtime from 'react/jsx-runtime';
3
- import * as react from 'react';
4
- import { HTMLAttributes, ReactElement, LabelHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ButtonHTMLAttributes, ReactNode, RefObject, FunctionComponent, SVGAttributes } from 'react';
5
- import { ReferenceElement, Placement } from '@floating-ui/core';
6
- import { ReferenceType } from '@floating-ui/react';
7
-
8
- declare function merge(a: string, b?: string): string;
9
-
10
- interface Props$e extends HTMLAttributes<HTMLDivElement> {
11
- label?: string;
12
- htmlFor?: string;
13
- error?: string;
14
- help?: string;
15
- innerClass?: string;
16
- /**
17
- * メッセージの表示する箇所を指定します
18
- * 未指定の場合、後に表示し、errorがあると、エラーの表示を優先して入れ替えます
19
- */
20
- helpBefore?: boolean;
21
- children: ReactElement | ReactElement[];
22
- required?: boolean;
23
- }
24
- declare function Field({ label, children, required, htmlFor, error, help, helpBefore, className, innerClass, ...rest }: Props$e): react_jsx_runtime.JSX.Element;
25
-
26
- declare function FormLabel({ className, ...rest }: LabelHTMLAttributes<HTMLLabelElement>): react_jsx_runtime.JSX.Element;
27
-
28
- interface Props$d extends HTMLAttributes<HTMLInputElement> {
29
- error?: boolean;
30
- /** 基本スタイルを全部外し、完全にclassNameの定義によせます */
31
- unstyled?: boolean;
32
- }
33
- declare function InputField({ error, unstyled, className, ...rest }: Props$d): react_jsx_runtime.JSX.Element;
34
-
35
- interface Props$c extends InputHTMLAttributes<HTMLInputElement> {
36
- error?: boolean;
37
- /** 基本スタイルを全部外し、完全にclassNameの定義によせます */
38
- unstyled?: boolean;
39
- }
40
- declare const Input: react.ForwardRefExoticComponent<Props$c & react.RefAttributes<HTMLInputElement>>;
41
-
42
- interface Props$b extends TextareaHTMLAttributes<HTMLTextAreaElement> {
43
- error?: boolean;
44
- unstyled?: boolean;
45
- }
46
- declare const Textarea: react.ForwardRefExoticComponent<Props$b & react.RefAttributes<HTMLTextAreaElement>>;
47
-
48
- interface Props$a extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onChange' | 'type' | 'role'> {
49
- children?: ReactNode;
50
- checked?: boolean;
51
- indeterminate?: boolean;
52
- /** idが未指定の場合、nameが代わりに使われます */
53
- name?: string;
54
- onChange?: (checked: boolean) => void;
55
- }
56
- declare function Checkbox({ checked, indeterminate, className, id, name, onChange, value, ...rest }: Props$a): react_jsx_runtime.JSX.Element;
57
-
58
- type OptionType<T> = {
59
- value: T;
60
- label: string;
61
- } | string;
62
- interface OptionRenderConfig {
63
- index: number;
64
- selected: boolean;
65
- onChange: () => void;
66
- }
67
- interface Props$9<T> extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'onClick' | 'type' | 'value' | 'children'> {
68
- /** 配列の値の入力の場合、複数選択モードに切り替えます */
69
- value: T | T[];
70
- options: OptionType<T>[];
71
- onChange?: (value: T) => void;
72
- onClear?: () => void;
73
- renderItem?: (item: OptionType<T>, config: OptionRenderConfig) => ReactElement;
74
- placeholder?: string;
75
- arrow?: ReactNode;
76
- maxHeight?: number;
77
- error?: boolean;
78
- unstyled?: boolean;
79
- }
80
- declare function Select<T = any>({ className, placeholder, options, error, unstyled, disabled, value, maxHeight, arrow, onChange, onClear, renderItem, ...rest }: Props$9<T>): react_jsx_runtime.JSX.Element;
81
-
82
- interface Props$8 extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onChange' | 'type' | 'role'> {
83
- children?: ReactNode;
84
- checked?: boolean;
85
- /** idが未指定の場合、nameが代わりに使われます */
86
- name?: string;
87
- onChange?: (checked: boolean) => void;
88
- }
89
- declare function Radio({ checked, className, id, name, onChange, value, ...rest }: Props$8): react_jsx_runtime.JSX.Element;
90
-
91
- interface Props$7 extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onChange' | 'type' | 'role'> {
92
- checked?: boolean;
93
- onChange?: (checked: boolean) => void;
94
- }
95
- declare const Switch: react.ForwardRefExoticComponent<Props$7 & react.RefAttributes<HTMLInputElement>>;
96
-
97
- interface Props$6 extends HTMLAttributes<HTMLDivElement> {
98
- /**
99
- * ボタンなどの表示するラベル\
100
- * showを変更するロジックのイベントが必要となります
101
- */
102
- header: ReactNode;
103
- /** trueの場合、内容を開きます */
104
- show: boolean;
105
- /**
106
- * アニメーションの時間\
107
- * 0に設定すると、即時に反応します
108
- * @default 300
109
- */
110
- timeout?: number;
111
- }
112
- declare function Accordion({ header, show, children, timeout, ...rest }: Props$6): react_jsx_runtime.JSX.Element;
113
-
114
- interface TooltipRef {
115
- floating: RefObject<HTMLElement | null>;
116
- reference: RefObject<ReferenceElement | null>;
117
- open: () => void;
118
- close: () => void;
119
- }
120
- interface TooltipProps {
121
- /** 吹き出しとして表示したい内容 */
122
- label: ReactNode;
123
- /** マウスオーバーの対象になるelement */
124
- children: ReactElement;
125
- /**
126
- * 表示される場所
127
- * @default 'bottom'
128
- */
129
- position?: Placement;
130
- /**
131
- * ツールチップが表示される間隔, 単位はpx
132
- * @default '{ x: 0, y: 6 }'
133
- */
134
- offset?: {
135
- x: number;
136
- y: number;
137
- };
138
- /**
139
- * ツールチップの表示・非表示のアニメーション速度
140
- * @default 150
141
- */
142
- timeout?: number;
143
- /** 吹き出し表示座標を対象のElementではなくマウスカーソルにする */
144
- clientPoint?: boolean;
145
- /** 吹き出しを出さない */
146
- disabled?: boolean;
147
- className?: string;
148
- }
149
- declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<TooltipRef>>;
150
-
151
- interface PopoverRef {
152
- open: () => void;
153
- close: () => void;
154
- }
155
- interface Props$5 extends HTMLAttributes<HTMLDivElement> {
156
- /** ボタンの内容 */
157
- label: ReactElement;
158
- /** 内容のリスト */
159
- children?: ReactNode;
160
- /**
161
- * 表示される場所
162
- * @default 'bottom-end'
163
- */
164
- position?: Placement;
165
- /**
166
- * Popoverが表示される間隔
167
- * @default '{ x: 0, y: 6 }'
168
- */
169
- offset?: {
170
- x: number;
171
- y: number;
172
- };
173
- /**
174
- * Popoverの表示・非表示のアニメーション速度
175
- * @default { open: 150, close: 75 }
176
- */
177
- timeout?: number | {
178
- open: number;
179
- close: number;
180
- };
181
- /** 閉じた場合のコールバック */
182
- onClose?: (ref?: ReferenceType | null, float?: HTMLElement | null) => void;
183
- /** 開けた場合のコールバック */
184
- onOpen?: (ref?: ReferenceType | null, float?: HTMLElement | null) => void;
185
- /** popoverを閉じる処理を手動に設定します */
186
- onManualClose?: () => void;
187
- /** コンテンツを出さない */
188
- disabled?: boolean;
189
- /**
190
- * zIndexを指定する
191
- * @default 9996
192
- */
193
- zIndex?: number;
194
- /** デフォルトスタイルを外し、cssクラスを適用します */
195
- unstyled?: boolean;
196
- }
197
- declare const Popover: react.ForwardRefExoticComponent<Props$5 & react.RefAttributes<PopoverRef>>;
198
-
199
- interface Props$4 {
200
- children: ReactNode;
201
- container?: HTMLElement;
202
- disabled?: boolean;
203
- }
204
- declare function Portal({ children, container, disabled }: Props$4): react.ReactPortal | null;
205
-
206
- interface Props$3 extends HTMLAttributes<HTMLDivElement> {
207
- /** trueの場合、モーダルを表示します。 */
208
- open?: boolean;
209
- /** モーダルのbodyに入れる内容 */
210
- children?: ReactNode;
211
- /** オーバーレイのクリックでモーダルクローズ */
212
- closeOnOverlay?: boolean;
213
- /** escボタンでクローズ */
214
- closeOnEsc?: boolean;
215
- /**
216
- * モーダルの表示・非表示のアニメーション速度
217
- * @default 150
218
- */
219
- timeout?: number | {
220
- open: number;
221
- close: number;
222
- };
223
- /**
224
- * モーダルのデフォルトデザインを適用し、サイズを指定します。\
225
- * 未指定の場合は、スタイルを全部外した状態で表示されます
226
- * */
227
- size?: 'small' | 'medium' | 'large';
228
- /** モーダルのtransition exitが完了した時に発火されるcallback */
229
- onOpenChange?: (open: boolean) => void;
230
- /** モーダルのtransition exitが完了した時に発火されるcallback */
231
- onExited?: () => void;
232
- /**
233
- * モーダルの背景からのpaddingを指定します。
234
- * @default '0.85rem'
235
- */
236
- padding?: string;
237
- /**
238
- * モーダルの縦並びを設定します。
239
- * @default 'center'
240
- */
241
- verticalAlign?: 'start' | 'center' | 'end';
242
- }
243
- declare function Dialog({ open, children, timeout, padding, verticalAlign, closeOnOverlay, closeOnEsc, onExited, className, onOpenChange, size, ...rest }: Props$3): react_jsx_runtime.JSX.Element;
244
-
245
- interface Props$2 extends HTMLAttributes<HTMLDivElement> {
246
- /** trueの場合、モーダルを表示します。 */
247
- open?: boolean;
248
- /**
249
- * モーダルの表示・非表示のアニメーション速度
250
- * @default '{ open: 250, close: 150 }'
251
- */
252
- timeout?: number | {
253
- open: number;
254
- close: number;
255
- };
256
- /** モーダルのtransition exitが完了した時に発火されるcallback */
257
- onOpenChange?: (open: boolean) => void;
258
- /** モーダルのtransition exitが完了した時に発火されるcallback */
259
- onExited?: () => void;
260
- overlay?: boolean;
261
- /**
262
- * sheetが表示されれう場所
263
- * @defaut 'right'
264
- */
265
- position?: 'left' | 'right' | 'top' | 'bottom';
266
- unstyled?: boolean;
267
- }
268
- declare function Sheet({ open, timeout, onOpenChange, position, overlay, ...rest }: Props$2): react_jsx_runtime.JSX.Element;
269
-
270
- type ToastType = 'info' | 'success' | 'error' | 'warn' | 'loading';
271
- interface ToastConfig {
272
- /** 認識ID */
273
- id: string;
274
- label: ReactNode;
275
- type?: ToastType;
276
- /** ラベル以外に表示する内容 */
277
- message?: ReactNode;
278
- /**
279
- * 表示される時間 nullの場合は自動で閉じられません
280
- * @default 5000
281
- */
282
- duration?: number | null;
283
- className?: string;
284
- }
285
- type ToastItemProps = Omit<ToastConfig, 'duration' | 'className'>;
286
- type ToasterPosition = 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left';
287
- interface ToasterProps {
288
- className?: string;
289
- /** レンダリング対象のコンポーネント */
290
- /**
291
- * toastの表示される場所の指定
292
- * \
293
- * top, top-right, top-left, bottom, bottom-right, bottom-left
294
- * @default 'top-left'
295
- */
296
- position?: ToasterPosition;
297
- /**
298
- * margin 単位はpx
299
- * @default '16px'
300
- */
301
- margin?: number;
302
- /**
303
- * 並ばずに、Toastが積み上げます\
304
- * (まだ開発中です)
305
- */
306
- stack?: boolean;
307
- /**
308
- * 表示する最大Toast数を指定します
309
- * @default 3
310
- */
311
- max?: number;
312
- ListItem?: FunctionComponent<ToastItemProps>;
313
- }
314
-
315
- declare function Toast({ className, margin, position, max, ListItem, }: ToasterProps): react_jsx_runtime.JSX.Element;
316
-
317
- declare function ToastItem({ type, label, message }: ToastItemProps): react_jsx_runtime.JSX.Element;
318
-
319
- type PublishArgs = ({
320
- id: string;
321
- type: 'add';
322
- config: ToastConfig;
323
- } | {
324
- id: string;
325
- type: 'remove';
326
- } | {
327
- id: string;
328
- type: 'update';
329
- config: Partial<ToastConfig>;
330
- });
331
- declare class ToastObserver {
332
- /** システムで1つしか存在しない前提とする */
333
- notify: (args: PublishArgs) => void;
334
- lastId: number;
335
- /** internal use only */
336
- subscribe: (callback: (args: PublishArgs) => void) => () => void;
337
- add: (label: ReactNode, config?: Omit<ToastConfig, "label" | "id">) => string;
338
- /** 表示中のtoastを修正します。promiseのロード状態を表示することなどに使います */
339
- update: (id: string, config: Partial<Omit<ToastConfig, "id">>) => void;
340
- remove: (id: string) => void;
341
- clear: () => void;
342
- }
343
- declare const observer: ToastObserver;
344
-
345
- declare function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
346
-
347
- interface InnerButtonProps {
348
- variant?: 'primary' | 'info' | 'warn' | 'link' | 'outline' | 'ghost' | 'danger';
349
- size?: 'icon' | 'none';
350
- }
351
- type ButtonProps = InnerButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
352
- declare function Button({ size, variant, className, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
353
-
354
- declare function ButtonGroup({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
355
-
356
- interface Props$1 extends HTMLAttributes<HTMLDivElement> {
357
- /** サイズ */
358
- size?: number;
359
- label?: string;
360
- }
361
- declare function Spinner({ size, label, ...rest }: Props$1): react_jsx_runtime.JSX.Element;
362
-
363
- interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
364
- /** 現状の進捗 */
365
- value: number;
366
- /**
367
- * 進捗の最大値\
368
- * 最小値は0基準になるので、それに合わせてください
369
- */
370
- max: number;
371
- }
372
- declare function Progress({ value, max, className, ...rest }: ProgressProps): react_jsx_runtime.JSX.Element;
373
-
374
- interface Props extends HTMLAttributes<HTMLElement> {
375
- /** @default 'horizontal' */
376
- orientation?: 'horizontal' | 'vertical';
377
- }
378
- declare function Divider({ className, orientation, ...props }: Props): react_jsx_runtime.JSX.Element;
379
-
380
- declare function Approved(props: SVGAttributes<SVGSVGElement>): react_jsx_runtime.JSX.Element;
381
-
382
- declare function Alert(props: SVGAttributes<SVGSVGElement>): react_jsx_runtime.JSX.Element;
383
-
384
- declare function Caution(props: SVGAttributes<SVGSVGElement>): react_jsx_runtime.JSX.Element;
385
-
386
- declare function Check(props: SVGAttributes<SVGSVGElement>): react_jsx_runtime.JSX.Element;
387
-
388
- declare function IconChevronRound(props: SVGAttributes<SVGSVGElement>): react_jsx_runtime.JSX.Element;
389
-
390
- declare function FileRound(props: SVGAttributes<SVGSVGElement>): react_jsx_runtime.JSX.Element;
391
-
392
- declare function Pencil(props: SVGAttributes<SVGSVGElement>): react_jsx_runtime.JSX.Element;
393
-
394
- declare function User(props: SVGAttributes<SVGSVGElement>): react_jsx_runtime.JSX.Element;
395
-
396
- declare function Close(props: SVGAttributes<SVGSVGElement>): react_jsx_runtime.JSX.Element;
397
-
398
- declare function Refresh(props: SVGAttributes<SVGSVGElement>): react_jsx_runtime.JSX.Element;
399
-
400
- declare function Plus(props: SVGAttributes<SVGSVGElement>): react_jsx_runtime.JSX.Element;
401
-
402
- declare function ChevronDown(props: SVGAttributes<SVGSVGElement>): react_jsx_runtime.JSX.Element;
403
-
404
- export { Accordion, type Props$6 as AccordionProps, Button, ButtonGroup, type ButtonProps, Checkbox, type Props$a as CheckboxProps, Dialog, type Props$3 as DialogProps, Divider, type Props as DividerProps, Field as FormField, type Props$e as FormFieldProps, FormLabel, Alert as IconAlert, Approved as IconApproved, ChevronDown as IconArrowDown, Caution as IconCaution, Check as IconCheck, IconChevronRound, Close as IconClose, FileRound as IconFileRound, Pencil as IconPencil, Plus as IconPlus, Refresh as IconRefresh, User as IconUser, Input, InputField, type Props$d as InputFieldProps, type Props$c as InputProps, Skeleton as Placeholder, Popover, type Props$5 as PopoverProps, type PopoverRef, Portal, type Props$4 as PortalProps, Progress, type ProgressProps, Radio, type Props$8 as RadioProps, Select, type Props$9 as SelectProps, Sheet, type Props$2 as SheetProps, type Props$1 as SinnerProps, Spinner, Switch, type Props$7 as SwitchProps, Textarea, type Props$b as TextareaProps, Toast, type ToastConfig, ToastItem, type ToastItemProps, type ToastType, type ToasterPosition, type ToasterProps, Tooltip, type TooltipProps, type TooltipRef, merge, observer as toast };
1
+ import { ButtonHTMLAttributes } from 'react';
2
+ import { default as clsx } from 'clsx';
3
+ import { ForwardRefExoticComponent } from 'react';
4
+ import { FunctionComponent } from 'react';
5
+ import { HTMLAttributes } from 'react';
6
+ import { InputHTMLAttributes } from 'react';
7
+ import { JSX } from 'react/jsx-runtime';
8
+ import { LabelHTMLAttributes } from 'react';
9
+ import { Placement } from '@floating-ui/core';
10
+ import { ReactElement } from 'react';
11
+ import { ReactNode } from 'react';
12
+ import { ReactPortal } from 'react';
13
+ import { RefAttributes } from 'react';
14
+ import { ReferenceElement } from '@floating-ui/core';
15
+ import { ReferenceType } from '@floating-ui/react';
16
+ import { RefObject } from 'react';
17
+ import { SVGAttributes } from 'react';
18
+ import { TextareaHTMLAttributes } from 'react';
19
+
20
+ export declare function Accordion({ header, show, children, timeout, ...rest }: AccordionProps): JSX.Element;
21
+
22
+ export declare interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
23
+ /**
24
+ * ボタンなどの表示するラベル\
25
+ * showを変更するロジックのイベントが必要となります
26
+ */
27
+ header: ReactNode;
28
+ /** trueの場合、内容を開きます */
29
+ show: boolean;
30
+ /**
31
+ * アニメーションの時間\
32
+ * 0に設定すると、即時に反応します
33
+ * @default 300
34
+ */
35
+ timeout?: number;
36
+ }
37
+
38
+ export declare function Button({ size, variant, className, ...rest }: ButtonProps): JSX.Element;
39
+
40
+ export declare function ButtonGroup({ className, ...rest }: HTMLAttributes<HTMLDivElement>): JSX.Element;
41
+
42
+ export declare type ButtonProps = InnerButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
43
+
44
+ export declare function Checkbox({ checked, indeterminate, className, id, name, onChange, value, ...rest }: CheckboxProps): JSX.Element;
45
+
46
+ export declare interface CheckboxProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onChange' | 'type' | 'role'> {
47
+ children?: ReactNode;
48
+ checked?: boolean;
49
+ indeterminate?: boolean;
50
+ /** idが未指定の場合、nameが代わりに使われます */
51
+ name?: string;
52
+ onChange?: (checked: boolean) => void;
53
+ }
54
+
55
+ export { clsx }
56
+
57
+ export declare function Dialog({ open, children, timeout, padding, verticalAlign, closeOnOverlay, closeOnEsc, onExited, className, onOpenChange, size, ...rest }: DialogProps): JSX.Element;
58
+
59
+ export declare interface DialogProps extends HTMLAttributes<HTMLDivElement> {
60
+ /** trueの場合、モーダルを表示します。 */
61
+ open?: boolean;
62
+ /** モーダルのbodyに入れる内容 */
63
+ children?: ReactNode;
64
+ /** オーバーレイのクリックでモーダルクローズ */
65
+ closeOnOverlay?: boolean;
66
+ /** escボタンでクローズ */
67
+ closeOnEsc?: boolean;
68
+ /**
69
+ * モーダルの表示・非表示のアニメーション速度
70
+ * @default 150
71
+ */
72
+ timeout?: number | {
73
+ open: number;
74
+ close: number;
75
+ };
76
+ /**
77
+ * モーダルのデフォルトデザインを適用し、サイズを指定します。\
78
+ * 未指定の場合は、スタイルを全部外した状態で表示されます
79
+ * */
80
+ size?: 'small' | 'medium' | 'large';
81
+ /** モーダルのtransition exitが完了した時に発火されるcallback */
82
+ onOpenChange?: (open: boolean) => void;
83
+ /** モーダルのtransition exitが完了した時に発火されるcallback */
84
+ onExited?: () => void;
85
+ /**
86
+ * モーダルの背景からのpaddingを指定します。
87
+ * @default '0.85rem'
88
+ */
89
+ padding?: string;
90
+ /**
91
+ * モーダルの縦並びを設定します。
92
+ * @default 'center'
93
+ */
94
+ verticalAlign?: 'start' | 'center' | 'end';
95
+ }
96
+
97
+ export declare function Divider({ className, orientation, ...props }: DividerProps): JSX.Element;
98
+
99
+ export declare interface DividerProps extends HTMLAttributes<HTMLElement> {
100
+ /** @default 'horizontal' */
101
+ orientation?: 'horizontal' | 'vertical';
102
+ }
103
+
104
+ export declare function FormField({ label, children, required, htmlFor, error, help, helpBefore, className, innerClass, ...rest }: FormFieldProps): JSX.Element;
105
+
106
+ export declare interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
107
+ label?: string;
108
+ htmlFor?: string;
109
+ error?: string;
110
+ help?: string;
111
+ innerClass?: string;
112
+ /**
113
+ * メッセージの表示する箇所を指定します
114
+ * 未指定の場合、後に表示し、errorがあると、エラーの表示を優先して入れ替えます
115
+ */
116
+ helpBefore?: boolean;
117
+ children: ReactElement | ReactElement[];
118
+ required?: boolean;
119
+ }
120
+
121
+ export declare function FormLabel({ className, ...rest }: LabelHTMLAttributes<HTMLLabelElement>): JSX.Element;
122
+
123
+ export declare function IconAlert(props: SVGAttributes<SVGSVGElement>): JSX.Element;
124
+
125
+ export declare function IconApproved(props: SVGAttributes<SVGSVGElement>): JSX.Element;
126
+
127
+ export declare function IconArrowDown(props: SVGAttributes<SVGSVGElement>): JSX.Element;
128
+
129
+ export declare function IconCaution(props: SVGAttributes<SVGSVGElement>): JSX.Element;
130
+
131
+ export declare function IconCheck(props: SVGAttributes<SVGSVGElement>): JSX.Element;
132
+
133
+ export declare function IconChevronRound(props: SVGAttributes<SVGSVGElement>): JSX.Element;
134
+
135
+ export declare function IconClose(props: SVGAttributes<SVGSVGElement>): JSX.Element;
136
+
137
+ export declare function IconFileRound(props: SVGAttributes<SVGSVGElement>): JSX.Element;
138
+
139
+ export declare function IconPencil(props: SVGAttributes<SVGSVGElement>): JSX.Element;
140
+
141
+ export declare function IconPlus(props: SVGAttributes<SVGSVGElement>): JSX.Element;
142
+
143
+ export declare function IconRefresh(props: SVGAttributes<SVGSVGElement>): JSX.Element;
144
+
145
+ export declare function IconUser(props: SVGAttributes<SVGSVGElement>): JSX.Element;
146
+
147
+ declare interface InnerButtonProps {
148
+ variant?: 'primary' | 'info' | 'warn' | 'link' | 'outline' | 'ghost' | 'danger';
149
+ size?: 'icon' | 'none';
150
+ }
151
+
152
+ export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
153
+
154
+ export declare function InputField({ error, unstyled, className, ...rest }: InputFieldProps): JSX.Element;
155
+
156
+ export declare interface InputFieldProps extends HTMLAttributes<HTMLInputElement> {
157
+ error?: boolean;
158
+ /** 基本スタイルを全部外し、完全にclassNameの定義によせます */
159
+ unstyled?: boolean;
160
+ }
161
+
162
+ export declare interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
163
+ error?: boolean;
164
+ /** 基本スタイルを全部外し、完全にclassNameの定義によせます */
165
+ unstyled?: boolean;
166
+ }
167
+
168
+ export declare function merge(a: string, b?: string): string;
169
+
170
+ declare interface OptionRenderConfig {
171
+ index: number;
172
+ selected: boolean;
173
+ onChange: () => void;
174
+ }
175
+
176
+ declare type OptionType<T> = {
177
+ value: T;
178
+ label: string;
179
+ } | string;
180
+
181
+ export declare function Placeholder({ className, ...props }: HTMLAttributes<HTMLDivElement>): JSX.Element;
182
+
183
+ export declare const Popover: ForwardRefExoticComponent<PopoverProps & RefAttributes<PopoverRef>>;
184
+
185
+ export declare interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
186
+ /** ボタンの内容 */
187
+ label: ReactElement;
188
+ /** 内容のリスト */
189
+ children?: ReactNode;
190
+ /**
191
+ * 表示される場所
192
+ * @default 'bottom-end'
193
+ */
194
+ position?: Placement;
195
+ /**
196
+ * Popoverが表示される間隔
197
+ * @default '{ x: 0, y: 6 }'
198
+ */
199
+ offset?: {
200
+ x: number;
201
+ y: number;
202
+ };
203
+ /**
204
+ * Popoverの表示・非表示のアニメーション速度
205
+ * @default { open: 150, close: 75 }
206
+ */
207
+ timeout?: number | {
208
+ open: number;
209
+ close: number;
210
+ };
211
+ /** 閉じた場合のコールバック */
212
+ onClose?: (ref?: ReferenceType | null, float?: HTMLElement | null) => void;
213
+ /** 開けた場合のコールバック */
214
+ onOpen?: (ref?: ReferenceType | null, float?: HTMLElement | null) => void;
215
+ /** popoverを閉じる処理を手動に設定します */
216
+ onManualClose?: () => void;
217
+ /** コンテンツを出さない */
218
+ disabled?: boolean;
219
+ /**
220
+ * zIndexを指定する
221
+ * @default 9996
222
+ */
223
+ zIndex?: number;
224
+ /** デフォルトスタイルを外し、cssクラスを適用します */
225
+ unstyled?: boolean;
226
+ }
227
+
228
+ export declare interface PopoverRef {
229
+ open: () => void;
230
+ close: () => void;
231
+ }
232
+
233
+ export declare function Portal({ children, container, disabled }: PortalProps): ReactPortal | null;
234
+
235
+ export declare interface PortalProps {
236
+ children: ReactNode;
237
+ container?: HTMLElement;
238
+ disabled?: boolean;
239
+ }
240
+
241
+ export declare function Progress({ value, max, className, ...rest }: ProgressProps): JSX.Element;
242
+
243
+ export declare interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
244
+ /** 現状の進捗 */
245
+ value: number;
246
+ /**
247
+ * 進捗の最大値\
248
+ * 最小値は0基準になるので、それに合わせてください
249
+ */
250
+ max: number;
251
+ }
252
+
253
+ declare type PublishArgs = ({
254
+ id: string;
255
+ type: 'add';
256
+ config: ToastConfig;
257
+ } | {
258
+ id: string;
259
+ type: 'remove';
260
+ } | {
261
+ id: string;
262
+ type: 'update';
263
+ config: Partial<ToastConfig>;
264
+ });
265
+
266
+ export declare function Radio({ checked, className, id, name, onChange, value, ...rest }: RadioProps): JSX.Element;
267
+
268
+ export declare interface RadioProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onChange' | 'type' | 'role'> {
269
+ children?: ReactNode;
270
+ checked?: boolean;
271
+ /** idが未指定の場合、nameが代わりに使われます */
272
+ name?: string;
273
+ onChange?: (checked: boolean) => void;
274
+ }
275
+
276
+ export declare function Select<T = any>({ className, placeholder, options, error, unstyled, disabled, value, maxHeight, arrow, onChange, onClear, renderItem, ...rest }: SelectProps<T>): JSX.Element;
277
+
278
+ export declare interface SelectProps<T> extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'onClick' | 'type' | 'value' | 'children'> {
279
+ /** 配列の値の入力の場合、複数選択モードに切り替えます */
280
+ value: T | T[];
281
+ options: OptionType<T>[];
282
+ onChange?: (value: T) => void;
283
+ onClear?: () => void;
284
+ renderItem?: (item: OptionType<T>, config: OptionRenderConfig) => ReactElement;
285
+ placeholder?: string;
286
+ arrow?: ReactNode;
287
+ maxHeight?: number;
288
+ error?: boolean;
289
+ unstyled?: boolean;
290
+ }
291
+
292
+ export declare function Sheet({ open, timeout, onOpenChange, position, overlay, ...rest }: SheetProps): JSX.Element;
293
+
294
+ export declare interface SheetProps extends HTMLAttributes<HTMLDivElement> {
295
+ /** trueの場合、モーダルを表示します。 */
296
+ open?: boolean;
297
+ /**
298
+ * モーダルの表示・非表示のアニメーション速度
299
+ * @default '{ open: 250, close: 150 }'
300
+ */
301
+ timeout?: number | {
302
+ open: number;
303
+ close: number;
304
+ };
305
+ /** モーダルのtransition exitが完了した時に発火されるcallback */
306
+ onOpenChange?: (open: boolean) => void;
307
+ /** モーダルのtransition exitが完了した時に発火されるcallback */
308
+ onExited?: () => void;
309
+ overlay?: boolean;
310
+ /**
311
+ * sheetが表示されれう場所
312
+ * @defaut 'right'
313
+ */
314
+ position?: 'left' | 'right' | 'top' | 'bottom';
315
+ unstyled?: boolean;
316
+ }
317
+
318
+ export declare interface SinnerProps extends HTMLAttributes<HTMLDivElement> {
319
+ /** サイズ */
320
+ size?: number;
321
+ label?: string;
322
+ }
323
+
324
+ export declare function Spinner({ size, label, ...rest }: SinnerProps): JSX.Element;
325
+
326
+ export declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLInputElement>>;
327
+
328
+ export declare interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onChange' | 'type' | 'role'> {
329
+ checked?: boolean;
330
+ onChange?: (checked: boolean) => void;
331
+ }
332
+
333
+ export declare const Textarea: ForwardRefExoticComponent<TextareaProps & RefAttributes<HTMLTextAreaElement>>;
334
+
335
+ export declare interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
336
+ error?: boolean;
337
+ unstyled?: boolean;
338
+ }
339
+
340
+ export declare function Toast({ className, margin, position, max, ListItem, }: ToasterProps): JSX.Element;
341
+
342
+ export declare const toast: ToastObserver;
343
+
344
+ export declare interface ToastConfig {
345
+ /** 認識ID */
346
+ id: string;
347
+ label: ReactNode;
348
+ type?: ToastType;
349
+ /** ラベル以外に表示する内容 */
350
+ message?: ReactNode;
351
+ /**
352
+ * 表示される時間 nullの場合は自動で閉じられません
353
+ * @default 5000
354
+ */
355
+ duration?: number | null;
356
+ className?: string;
357
+ }
358
+
359
+ export declare type ToasterPosition = 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left';
360
+
361
+ export declare interface ToasterProps {
362
+ className?: string;
363
+ /** レンダリング対象のコンポーネント */
364
+ /**
365
+ * toastの表示される場所の指定
366
+ * \
367
+ * top, top-right, top-left, bottom, bottom-right, bottom-left
368
+ * @default 'top-left'
369
+ */
370
+ position?: ToasterPosition;
371
+ /**
372
+ * margin 単位はpx
373
+ * @default '16px'
374
+ */
375
+ margin?: number;
376
+ /**
377
+ * 並ばずに、Toastが積み上げます\
378
+ * (まだ開発中です)
379
+ */
380
+ stack?: boolean;
381
+ /**
382
+ * 表示する最大Toast数を指定します
383
+ * @default 3
384
+ */
385
+ max?: number;
386
+ ListItem?: FunctionComponent<ToastItemProps>;
387
+ }
388
+
389
+ export declare function ToastItem({ type, label, message }: ToastItemProps): JSX.Element;
390
+
391
+ export declare type ToastItemProps = Omit<ToastConfig, 'duration' | 'className'>;
392
+
393
+ declare class ToastObserver {
394
+ /** システムで1つしか存在しない前提とする */
395
+ notify: (args: PublishArgs) => void;
396
+ lastId: number;
397
+ /** internal use only */
398
+ subscribe: (callback: (args: PublishArgs) => void) => () => void;
399
+ add: (label: ReactNode, config?: Omit<ToastConfig, "label" | "id">) => string;
400
+ /** 表示中のtoastを修正します。promiseのロード状態を表示することなどに使います */
401
+ update: (id: string, config: Partial<Omit<ToastConfig, "id">>) => void;
402
+ remove: (id: string) => void;
403
+ clear: () => void;
404
+ }
405
+
406
+ export declare type ToastType = 'info' | 'success' | 'error' | 'warn' | 'loading';
407
+
408
+ export declare const Tooltip: ForwardRefExoticComponent<TooltipProps & RefAttributes<TooltipRef>>;
409
+
410
+ export declare interface TooltipProps {
411
+ /** 吹き出しとして表示したい内容 */
412
+ label: ReactNode;
413
+ /** マウスオーバーの対象になるelement */
414
+ children: ReactElement;
415
+ /**
416
+ * 表示される場所
417
+ * @default 'bottom'
418
+ */
419
+ position?: Placement;
420
+ /**
421
+ * ツールチップが表示される間隔, 単位はpx
422
+ * @default '{ x: 0, y: 6 }'
423
+ */
424
+ offset?: {
425
+ x: number;
426
+ y: number;
427
+ };
428
+ /**
429
+ * ツールチップの表示・非表示のアニメーション速度
430
+ * @default 150
431
+ */
432
+ timeout?: number;
433
+ /** 吹き出し表示座標を対象のElementではなくマウスカーソルにする */
434
+ clientPoint?: boolean;
435
+ /** 吹き出しを出さない */
436
+ disabled?: boolean;
437
+ className?: string;
438
+ }
439
+
440
+ export declare interface TooltipRef {
441
+ floating: RefObject<HTMLElement | null>;
442
+ reference: RefObject<ReferenceElement | null>;
443
+ open: () => void;
444
+ close: () => void;
445
+ }
446
+
447
+ export { }