visits-style 2.1.4 → 2.2.1
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 +17 -0
- package/dist/components/Dialog/DialogHeader.d.ts +7 -0
- package/dist/components/Dialog/index.d.ts +50 -0
- package/dist/components/Popover/index.d.ts +58 -0
- package/dist/components/Portal/index.d.ts +7 -0
- package/dist/components/Sheet/index.d.ts +33 -0
- package/dist/components/Toast/ToastFloat.d.ts +11 -0
- package/dist/components/Toast/ToastItem.d.ts +2 -0
- package/dist/components/Toast/index.d.ts +3 -0
- package/dist/components/Toast/observer.d.ts +28 -0
- package/dist/components/Toast/types.d.ts +62 -0
- package/dist/components/Tooltip/index.d.ts +43 -0
- package/dist/components/index.d.ts +11 -0
- package/dist/elements/Base.d.ts +14 -0
- package/dist/elements/Button/ButtonGroup.d.ts +2 -0
- package/dist/elements/Button/index.d.ts +9 -0
- package/dist/elements/Divider/index.d.ts +6 -0
- package/dist/elements/Progress/index.d.ts +11 -0
- package/dist/elements/Skeleton/index.d.ts +4 -0
- package/dist/elements/Spinner/index.d.ts +7 -0
- package/dist/elements/index.d.ts +7 -0
- package/dist/forms/Checkbox/index.d.ts +13 -0
- package/dist/forms/Field/FormField.d.ts +16 -0
- package/dist/forms/Field/FormLabel.d.ts +2 -0
- package/dist/forms/Field/InputField.d.ts +7 -0
- package/dist/forms/Input/index.d.ts +8 -0
- package/dist/forms/Radio/RadioGroup.d.ts +14 -0
- package/dist/forms/Radio/index.d.ts +10 -0
- package/dist/forms/Select/index.d.ts +49 -0
- package/dist/forms/Select/native.d.ts +11 -0
- package/dist/forms/Switch/index.d.ts +8 -0
- package/dist/forms/Textarea/index.d.ts +8 -0
- package/dist/forms/index.d.ts +9 -0
- package/dist/hooks/useIsomorphicLayoutEffect.d.ts +3 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +4 -454
- package/dist/index.es.js +983 -955
- package/dist/utils/isClient.d.ts +2 -0
- package/dist/utils/merge.d.ts +4 -0
- package/dist/utils/stopPropagation.d.ts +2 -0
- package/package.json +10 -7
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
/**
|
|
4
|
+
* ボタンなどの表示するラベル\
|
|
5
|
+
* showを変更するロジックのイベントが必要となります
|
|
6
|
+
*/
|
|
7
|
+
header: ReactNode;
|
|
8
|
+
/** trueの場合、内容を開きます */
|
|
9
|
+
show: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* アニメーションの時間\
|
|
12
|
+
* 0に設定すると、即時に反応します
|
|
13
|
+
* @default 300
|
|
14
|
+
*/
|
|
15
|
+
timeout?: number;
|
|
16
|
+
}
|
|
17
|
+
export default function Accordion({ header, show, children, timeout, ...rest }: Props): import("react").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
interface DialogHeaderProps extends HTMLAttributes<HTMLElement> {
|
|
3
|
+
closeIcon: ReactNode;
|
|
4
|
+
onClose?: () => void;
|
|
5
|
+
}
|
|
6
|
+
export default function DialogHeader({ onClose, children, closeIcon, ...rest }: DialogHeaderProps): import("react").JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactNode, Ref } from 'react';
|
|
2
|
+
export interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
/** trueの場合、モーダルを表示します。 */
|
|
4
|
+
open?: boolean;
|
|
5
|
+
/** モーダルのbodyに入れる内容 */
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
/** オーバーレイのクリックでモーダルクローズ */
|
|
8
|
+
closeOnOverlay?: boolean;
|
|
9
|
+
/** escボタンでクローズ */
|
|
10
|
+
closeOnEsc?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* モーダルの表示・非表示のアニメーション速度
|
|
13
|
+
* @default 150
|
|
14
|
+
*/
|
|
15
|
+
timeout?: number | {
|
|
16
|
+
open: number;
|
|
17
|
+
close: number;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* モーダルのデフォルトデザインを適用し、サイズを指定します。\
|
|
21
|
+
* 未指定の場合は、スタイルを全部外した状態で表示されます
|
|
22
|
+
* */
|
|
23
|
+
size?: 'small' | 'medium' | 'large';
|
|
24
|
+
/** モーダルのtransition exitが完了した時に発火されるcallback */
|
|
25
|
+
onOpenChange?: (open: boolean) => void;
|
|
26
|
+
/** モーダルのtransition exitが完了した時に発火されるcallback */
|
|
27
|
+
onExited?: () => void;
|
|
28
|
+
/**
|
|
29
|
+
* モーダルの背景からのpaddingを指定します。
|
|
30
|
+
* @default '0.85rem'
|
|
31
|
+
*/
|
|
32
|
+
padding?: string;
|
|
33
|
+
/**
|
|
34
|
+
* モーダルの縦並びを設定します。
|
|
35
|
+
* @default 'center'
|
|
36
|
+
*/
|
|
37
|
+
verticalAlign?: 'start' | 'center' | 'end';
|
|
38
|
+
}
|
|
39
|
+
export default function Dialog({ open, children, timeout, padding, verticalAlign, closeOnOverlay, closeOnEsc, onExited, className, onOpenChange, size, ...rest }: Props): import("react").JSX.Element;
|
|
40
|
+
export { default as DialogHeader } from './DialogHeader';
|
|
41
|
+
interface DialogContentProps extends HTMLAttributes<HTMLElement> {
|
|
42
|
+
ref?: Ref<HTMLElement>;
|
|
43
|
+
size?: Props['size'];
|
|
44
|
+
}
|
|
45
|
+
export declare function DialogContent({ size, ...rest }: DialogContentProps): import("react").JSX.Element;
|
|
46
|
+
interface DialogFooterProps extends HTMLAttributes<HTMLElement> {
|
|
47
|
+
/** @default 'right' */
|
|
48
|
+
align?: 'center' | 'left' | 'right';
|
|
49
|
+
}
|
|
50
|
+
export declare function DialogFooter({ align, ...rest }: DialogFooterProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { CSSProperties, HTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
|
|
2
|
+
import { ReferenceType } from '@floating-ui/react';
|
|
3
|
+
import { Placement } from '@floating-ui/core';
|
|
4
|
+
export interface PopoverRef {
|
|
5
|
+
open: () => void;
|
|
6
|
+
close: () => void;
|
|
7
|
+
}
|
|
8
|
+
export interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
9
|
+
ref?: Ref<PopoverRef>;
|
|
10
|
+
/** ボタンの内容 */
|
|
11
|
+
label: ReactElement;
|
|
12
|
+
/** 内容のリスト */
|
|
13
|
+
children?: ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* 表示される場所
|
|
16
|
+
* @default 'bottom-end'
|
|
17
|
+
*/
|
|
18
|
+
position?: Placement;
|
|
19
|
+
/**
|
|
20
|
+
* Popoverが表示される間隔
|
|
21
|
+
* @default '{ x: 0, y: 6 }'
|
|
22
|
+
*/
|
|
23
|
+
offset?: {
|
|
24
|
+
x: number;
|
|
25
|
+
y: number;
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* Popoverの表示・非表示のアニメーション速度
|
|
29
|
+
* @default { open: 150, close: 75 }
|
|
30
|
+
*/
|
|
31
|
+
timeout?: number | {
|
|
32
|
+
open: number;
|
|
33
|
+
close: number;
|
|
34
|
+
};
|
|
35
|
+
/** 閉じた場合のコールバック */
|
|
36
|
+
onClose?: (ref?: ReferenceType | null, float?: HTMLElement | null) => void;
|
|
37
|
+
/** 開けた場合のコールバック */
|
|
38
|
+
onOpen?: (ref?: ReferenceType | null, float?: HTMLElement | null) => void;
|
|
39
|
+
/** popoverを閉じる処理を手動に設定します */
|
|
40
|
+
onManualClose?: () => void;
|
|
41
|
+
/** コンテンツを出さない */
|
|
42
|
+
disabled?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* zIndexを指定する
|
|
45
|
+
* @default 9996
|
|
46
|
+
*/
|
|
47
|
+
zIndex?: number;
|
|
48
|
+
/** 基本スタイルを全部外し、classNameの定義のみ使います */
|
|
49
|
+
override?: boolean;
|
|
50
|
+
}
|
|
51
|
+
export default function Popover({ ref, position, label, children, disabled, offset, onOpen, onClose, onManualClose, timeout, override, zIndex, role, ...rest }: Props): import("react").JSX.Element;
|
|
52
|
+
interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
53
|
+
styles: CSSProperties;
|
|
54
|
+
/** 基本スタイルを全部外し、classNameの定義のみ使います */
|
|
55
|
+
override?: boolean;
|
|
56
|
+
}
|
|
57
|
+
export declare function PopoverContent({ override, styles, style, ...rest }: PopoverContentProps): import("react").JSX.Element;
|
|
58
|
+
export {};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
/** trueの場合、モーダルを表示します。 */
|
|
4
|
+
open?: boolean;
|
|
5
|
+
/**
|
|
6
|
+
* モーダルの表示・非表示のアニメーション速度
|
|
7
|
+
* @default '{ open: 250, close: 150 }'
|
|
8
|
+
*/
|
|
9
|
+
timeout?: number | {
|
|
10
|
+
open: number;
|
|
11
|
+
close: number;
|
|
12
|
+
};
|
|
13
|
+
onOpenChange?: (open: boolean) => void;
|
|
14
|
+
/** 開けた場合のコールバック */
|
|
15
|
+
onOpen?: () => void;
|
|
16
|
+
/** モーダルのtransition exitが完了した時に発火されるcallback */
|
|
17
|
+
onExited?: () => void;
|
|
18
|
+
overlay?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* sheetが表示されれう場所
|
|
21
|
+
* @defaut 'right'
|
|
22
|
+
*/
|
|
23
|
+
position?: 'left' | 'right' | 'top' | 'bottom';
|
|
24
|
+
/** 基本スタイルを全部外し、classNameの定義のみ使います */
|
|
25
|
+
override?: boolean;
|
|
26
|
+
}
|
|
27
|
+
export default function Sheet({ open, timeout, onOpenChange, position, overlay, onExited, onOpen, ...rest }: Props): import("react").JSX.Element;
|
|
28
|
+
interface SheetContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
29
|
+
/** 基本スタイルを全部外し、classNameの定義のみ使います */
|
|
30
|
+
override?: boolean;
|
|
31
|
+
}
|
|
32
|
+
export declare function SheetContent(props: SheetContentProps): import("react").JSX.Element;
|
|
33
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { ToastConfig } from './types';
|
|
3
|
+
interface ToastContainerProps extends Pick<ToastConfig, 'id' | 'duration' | 'className' | 'type'> {
|
|
4
|
+
index: number;
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
inverted?: boolean;
|
|
7
|
+
timeout?: number;
|
|
8
|
+
max?: number;
|
|
9
|
+
}
|
|
10
|
+
export default function ToastContainer({ id, type, index, duration, className, children, inverted, timeout, max, }: ToastContainerProps): import("react").JSX.Element | null;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { ToastConfig } from './types';
|
|
3
|
+
type PublishArgs = ({
|
|
4
|
+
id: string;
|
|
5
|
+
type: 'add';
|
|
6
|
+
config: ToastConfig;
|
|
7
|
+
} | {
|
|
8
|
+
id: string;
|
|
9
|
+
type: 'remove';
|
|
10
|
+
} | {
|
|
11
|
+
id: string;
|
|
12
|
+
type: 'update';
|
|
13
|
+
config: Partial<ToastConfig>;
|
|
14
|
+
});
|
|
15
|
+
declare class ToastObserver {
|
|
16
|
+
/** システムで1つしか存在しない前提とする */
|
|
17
|
+
notify: (args: PublishArgs) => void;
|
|
18
|
+
lastId: number;
|
|
19
|
+
/** internal use only */
|
|
20
|
+
subscribe: (callback: (args: PublishArgs) => void) => () => void;
|
|
21
|
+
add: (label: ReactNode, config?: Omit<ToastConfig, "label" | "id">) => string;
|
|
22
|
+
/** 表示中のtoastを修正します。promiseのロード状態を表示することなどに使います */
|
|
23
|
+
update: (id: string, config: Partial<Omit<ToastConfig, "id">>) => void;
|
|
24
|
+
remove: (id: string) => void;
|
|
25
|
+
clear: () => void;
|
|
26
|
+
}
|
|
27
|
+
declare const observer: ToastObserver;
|
|
28
|
+
export default observer;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { ReactNode, FunctionComponent } from 'react';
|
|
2
|
+
export type ToastType = 'info' | 'success' | 'error' | 'warn' | 'loading';
|
|
3
|
+
export interface ToastConfig {
|
|
4
|
+
/** 認識ID */
|
|
5
|
+
id: string;
|
|
6
|
+
label: ReactNode;
|
|
7
|
+
type?: ToastType;
|
|
8
|
+
/** ラベル以外に表示する内容 */
|
|
9
|
+
message?: ReactNode;
|
|
10
|
+
/**
|
|
11
|
+
* 表示される時間 nullの場合は自動で閉じられません
|
|
12
|
+
* @default 5000
|
|
13
|
+
*/
|
|
14
|
+
duration?: number | null;
|
|
15
|
+
className?: string;
|
|
16
|
+
}
|
|
17
|
+
export type ToastItemProps = Omit<ToastConfig, 'duration' | 'className'>;
|
|
18
|
+
export type ToasterPosition = 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left';
|
|
19
|
+
export interface ToasterProps {
|
|
20
|
+
className?: string;
|
|
21
|
+
/** レンダリング対象のコンポーネント */
|
|
22
|
+
/**
|
|
23
|
+
* toastの表示される場所の指定
|
|
24
|
+
* \
|
|
25
|
+
* top, top-right, top-left, bottom, bottom-right, bottom-left
|
|
26
|
+
* @default 'top-left'
|
|
27
|
+
*/
|
|
28
|
+
position?: ToasterPosition;
|
|
29
|
+
/**
|
|
30
|
+
* offset 単位はpx
|
|
31
|
+
* @default positionによって16px自動反映
|
|
32
|
+
*/
|
|
33
|
+
offset?: Partial<{
|
|
34
|
+
top: string;
|
|
35
|
+
left: string;
|
|
36
|
+
right: string;
|
|
37
|
+
bottom: string;
|
|
38
|
+
}>;
|
|
39
|
+
/**
|
|
40
|
+
* 並ばずに、Toastが積み上げます\
|
|
41
|
+
* (まだ開発中です)
|
|
42
|
+
*/
|
|
43
|
+
stack?: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* 表示する最大Toast数を指定します
|
|
46
|
+
* @default 3
|
|
47
|
+
*/
|
|
48
|
+
max?: number;
|
|
49
|
+
ListItem?: FunctionComponent<ToastItemProps>;
|
|
50
|
+
/**
|
|
51
|
+
* 表示するToastのタイプに使うアイコンを指定(未指定の場合はアイコンは表示されません)\
|
|
52
|
+
* ただし、loading状態はspinnerを表示します
|
|
53
|
+
*/
|
|
54
|
+
icons?: Record<Exclude<ToastType, 'loading'>, ReactNode>;
|
|
55
|
+
}
|
|
56
|
+
export interface ToastContextType {
|
|
57
|
+
/**
|
|
58
|
+
* 表示するToastのタイプに使うアイコンを指定(未指定の場合はアイコンは表示されません)\
|
|
59
|
+
* ただし、loading状態はspinnerを表示します
|
|
60
|
+
*/
|
|
61
|
+
icons?: Record<Exclude<ToastType, 'loading'>, ReactNode>;
|
|
62
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { ReactNode, ReactElement, RefObject, HTMLAttributes } from 'react';
|
|
2
|
+
import { Placement, ReferenceElement } from '@floating-ui/core';
|
|
3
|
+
export interface TooltipRef {
|
|
4
|
+
floating: RefObject<HTMLElement | null>;
|
|
5
|
+
reference: RefObject<ReferenceElement | null>;
|
|
6
|
+
open: () => void;
|
|
7
|
+
close: () => void;
|
|
8
|
+
}
|
|
9
|
+
export interface TooltipProps {
|
|
10
|
+
/** 吹き出しとして表示したい内容 */
|
|
11
|
+
label: ReactNode;
|
|
12
|
+
/** マウスオーバーの対象になるelement */
|
|
13
|
+
children: ReactElement;
|
|
14
|
+
/**
|
|
15
|
+
* 表示される場所
|
|
16
|
+
* @default 'bottom'
|
|
17
|
+
*/
|
|
18
|
+
position?: Placement;
|
|
19
|
+
/**
|
|
20
|
+
* ツールチップが表示される間隔, 単位はpx
|
|
21
|
+
* @default '{ x: 0, y: 6 }'
|
|
22
|
+
*/
|
|
23
|
+
offset?: {
|
|
24
|
+
x: number;
|
|
25
|
+
y: number;
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* ツールチップの表示・非表示のアニメーション速度
|
|
29
|
+
* @default 150
|
|
30
|
+
*/
|
|
31
|
+
timeout?: number;
|
|
32
|
+
/** 吹き出し表示座標を対象のElementではなくマウスカーソルにする */
|
|
33
|
+
clientPoint?: boolean;
|
|
34
|
+
/** 吹き出しを出さない */
|
|
35
|
+
disabled?: boolean;
|
|
36
|
+
className?: string;
|
|
37
|
+
}
|
|
38
|
+
declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<TooltipRef>>;
|
|
39
|
+
export default Tooltip;
|
|
40
|
+
interface TooltipContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
41
|
+
custom?: boolean;
|
|
42
|
+
}
|
|
43
|
+
export declare const TooltipContent: import('react').ForwardRefExoticComponent<TooltipContentProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export * from '../forms';
|
|
2
|
+
export { default as Accordion, type Props as AccordionProps } from './Accordion';
|
|
3
|
+
export { default as Tooltip, type TooltipProps, type TooltipRef } from './Tooltip';
|
|
4
|
+
export { default as Popover, type Props as PopoverProps, type PopoverRef } from './Popover';
|
|
5
|
+
export { default as Portal, type Props as PortalProps } from './Portal';
|
|
6
|
+
export { default as Dialog, type Props as DialogProps } from './Dialog';
|
|
7
|
+
export { default as Sheet, type Props as SheetProps } from './Sheet';
|
|
8
|
+
export { default as Toast } from './Toast';
|
|
9
|
+
export { default as ToastItem } from './Toast/ToastItem';
|
|
10
|
+
export { default as toast } from './Toast/observer';
|
|
11
|
+
export type * from './Toast/types';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ElementType, ComponentPropsWithRef, HTMLAttributes } from 'react';
|
|
2
|
+
import { ClassValue } from '../utils/merge';
|
|
3
|
+
export type { HTMLAttributes, ButtonHTMLAttributes, SVGAttributes } from 'react';
|
|
4
|
+
export interface BaseProps {
|
|
5
|
+
as?: ElementType;
|
|
6
|
+
classList?: ClassValue | ClassValue[];
|
|
7
|
+
/** 基本スタイルを全部外し、classNameの定義のみ使います */
|
|
8
|
+
override?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export default function Base<T extends HTMLAttributes<HTMLElement>>({ as, classList, className, override, ...props }: T & BaseProps): import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
|
|
11
|
+
export declare function element<T extends ElementType>(tag: T, classList: ClassValue | ClassValue[]): {
|
|
12
|
+
({ className, ...props }: ComponentPropsWithRef<T>): import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
|
|
13
|
+
displayName: string;
|
|
14
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes } from 'react';
|
|
2
|
+
interface InnerButtonProps {
|
|
3
|
+
variant?: 'primary' | 'info' | 'warn' | 'link' | 'outline' | 'ghost' | 'danger';
|
|
4
|
+
size?: 'icon' | 'none';
|
|
5
|
+
}
|
|
6
|
+
export type ButtonProps = InnerButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
7
|
+
export declare function varientButton({ variant, size }: InnerButtonProps): string;
|
|
8
|
+
export default function Button({ size, variant, className, ...rest }: ButtonProps): import("react").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { HTMLAttributes } from '../Base';
|
|
2
|
+
export interface Props extends HTMLAttributes<HTMLElement> {
|
|
3
|
+
/** @default 'horizontal' */
|
|
4
|
+
orientation?: 'horizontal' | 'vertical';
|
|
5
|
+
}
|
|
6
|
+
export default function Divider({ orientation, ...props }: Props): import("react").JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { HTMLAttributes } from '../Base';
|
|
2
|
+
export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
/** 現状の進捗 */
|
|
4
|
+
value: number;
|
|
5
|
+
/**
|
|
6
|
+
* 進捗の最大値\
|
|
7
|
+
* 最小値は0基準になるので、それに合わせてください
|
|
8
|
+
*/
|
|
9
|
+
max: number;
|
|
10
|
+
}
|
|
11
|
+
export default function Progress({ value, max, ...rest }: ProgressProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { default as Base } from './Base';
|
|
2
|
+
export { default as Skeleton } from './Skeleton';
|
|
3
|
+
export { default as Button, type ButtonProps, varientButton } from './Button';
|
|
4
|
+
export { default as ButtonGroup } from './Button/ButtonGroup';
|
|
5
|
+
export { default as Spinner, type Props as SinnerProps } from './Spinner';
|
|
6
|
+
export { default as Progress, type ProgressProps } from './Progress';
|
|
7
|
+
export { default as Divider, type Props as DividerProps } from './Divider';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onChange' | 'type' | 'role'> {
|
|
3
|
+
error?: boolean;
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
checked?: boolean;
|
|
6
|
+
indeterminate?: boolean;
|
|
7
|
+
/** idが未指定の場合、nameが代わりに使われます */
|
|
8
|
+
name?: string;
|
|
9
|
+
/** チェック状態のアイコンを指定する */
|
|
10
|
+
checkIcon: ReactNode;
|
|
11
|
+
onChange?: (checked: boolean) => void;
|
|
12
|
+
}
|
|
13
|
+
export default function Checkbox({ checked, indeterminate, id, name, onChange, value, checkIcon, error, ...rest }: Props): import("react").JSX.Element;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactElement } from 'react';
|
|
2
|
+
export interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
label?: string;
|
|
4
|
+
htmlFor?: string;
|
|
5
|
+
error?: string;
|
|
6
|
+
help?: string;
|
|
7
|
+
innerClass?: string;
|
|
8
|
+
/**
|
|
9
|
+
* メッセージの表示する箇所を指定します
|
|
10
|
+
* 未指定の場合、後に表示し、errorがあると、エラーの表示を優先して入れ替えます
|
|
11
|
+
*/
|
|
12
|
+
helpBefore?: boolean;
|
|
13
|
+
children: ReactElement | ReactElement[];
|
|
14
|
+
required?: boolean;
|
|
15
|
+
}
|
|
16
|
+
export default function Field({ label, children, required, htmlFor, error, help, helpBefore, innerClass, ...rest }: Props): import("react").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export interface Props extends HTMLAttributes<HTMLInputElement> {
|
|
3
|
+
error?: boolean;
|
|
4
|
+
/** 基本スタイルを全部外し、classNameの定義のみ使います */
|
|
5
|
+
override?: boolean;
|
|
6
|
+
}
|
|
7
|
+
export default function InputField({ error, ...rest }: Props): import("react").JSX.Element;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { InputHTMLAttributes, Ref } from 'react';
|
|
2
|
+
export interface Props extends InputHTMLAttributes<HTMLInputElement> {
|
|
3
|
+
ref?: Ref<HTMLInputElement>;
|
|
4
|
+
error?: boolean;
|
|
5
|
+
/** 基本スタイルを全部外し、classNameの定義のみ使います */
|
|
6
|
+
override?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export default function Input({ type, error, ...rest }: Props): import("react").JSX.Element;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
interface Props<T> {
|
|
3
|
+
className?: string;
|
|
4
|
+
name?: string;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
value: T;
|
|
7
|
+
options: Array<{
|
|
8
|
+
id: NonNullable<T>;
|
|
9
|
+
label: ReactNode;
|
|
10
|
+
}>;
|
|
11
|
+
onChange: (value: T) => void;
|
|
12
|
+
}
|
|
13
|
+
export default function RadioGroup<T = unknown>({ name, className, value, options, onChange, disabled, }: Props<T>): import("react").JSX.Element;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onChange' | 'type' | 'role'> {
|
|
3
|
+
error?: boolean;
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
checked?: boolean;
|
|
6
|
+
/** idが未指定の場合、nameが代わりに使われます */
|
|
7
|
+
name?: string;
|
|
8
|
+
onChange?: (checked: boolean) => void;
|
|
9
|
+
}
|
|
10
|
+
export default function Radio({ checked, className, id, name, onChange, value, error, ...rest }: Props): import("react").JSX.Element;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';
|
|
2
|
+
type OptionType<T> = {
|
|
3
|
+
value: T;
|
|
4
|
+
label: string;
|
|
5
|
+
} | string;
|
|
6
|
+
interface OptionRenderConfig {
|
|
7
|
+
index: number;
|
|
8
|
+
selected: boolean;
|
|
9
|
+
onChange: () => void;
|
|
10
|
+
}
|
|
11
|
+
export interface Props<T> extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'onClick' | 'type' | 'value' | 'children'> {
|
|
12
|
+
/** 配列の値の入力の場合、複数選択モードに切り替えます */
|
|
13
|
+
value: T | T[];
|
|
14
|
+
options: OptionType<T>[];
|
|
15
|
+
onChange?: (value: T) => void;
|
|
16
|
+
onClear?: () => void;
|
|
17
|
+
renderItem?: (item: OptionType<T>, config: OptionRenderConfig) => ReactElement;
|
|
18
|
+
placeholder?: string;
|
|
19
|
+
arrowIcon?: ReactNode;
|
|
20
|
+
closeIcon?: ReactNode;
|
|
21
|
+
checkIcon?: ReactNode;
|
|
22
|
+
/**
|
|
23
|
+
* select選択肢の最大高さ
|
|
24
|
+
* @default 408
|
|
25
|
+
*/
|
|
26
|
+
maxHeight?: number;
|
|
27
|
+
error?: boolean;
|
|
28
|
+
/** 基本スタイルを全部外し、classNameの定義のみ使います */
|
|
29
|
+
override?: boolean;
|
|
30
|
+
/** クリアボタン、矢印アイコンの領域のdivのスタイルのカスタム指定 */
|
|
31
|
+
buttonAreaStyle?: string;
|
|
32
|
+
/** section(stringのみで区域を区切った場合)を使うときのスタイルのカスタム指定 */
|
|
33
|
+
sectionLabelStyle?: string;
|
|
34
|
+
/** 各選択肢のスタイルのカスタム指定 */
|
|
35
|
+
optionStyle?: string;
|
|
36
|
+
/** 選択を取り消すボタンのaria-label */
|
|
37
|
+
clearLabelText?: string;
|
|
38
|
+
}
|
|
39
|
+
export default function Select<T = unknown>({ className, placeholder, options, error, disabled, value, maxHeight, arrowIcon, closeIcon, checkIcon, onChange, onClear, renderItem, sectionLabelStyle, buttonAreaStyle, clearLabelText, optionStyle, ...rest }: Props<T>): import("react").JSX.Element;
|
|
40
|
+
interface SelectItemProps<T> {
|
|
41
|
+
className?: string;
|
|
42
|
+
value: T;
|
|
43
|
+
label: string;
|
|
44
|
+
onChange?: (value: T) => void;
|
|
45
|
+
checkIcon?: ReactNode;
|
|
46
|
+
selected?: boolean;
|
|
47
|
+
}
|
|
48
|
+
export declare function SelectItem<T>({ className, value, label, selected, checkIcon, onChange, }: SelectItemProps<T>): import("react").JSX.Element;
|
|
49
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode, Ref, SelectHTMLAttributes } from 'react';
|
|
2
|
+
export interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
3
|
+
ref?: Ref<HTMLSelectElement>;
|
|
4
|
+
placeholder?: string;
|
|
5
|
+
error?: boolean;
|
|
6
|
+
/** 基本スタイルを全部外し、classNameの定義のみ使います */
|
|
7
|
+
override?: boolean;
|
|
8
|
+
arrowIcon?: ReactNode;
|
|
9
|
+
wrapperStyle?: string;
|
|
10
|
+
}
|
|
11
|
+
export default function NativeSelect({ error, placeholder, children, arrowIcon, wrapperStyle, ...rest }: Props): import("react").JSX.Element;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes, Ref } from 'react';
|
|
2
|
+
export interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onChange' | 'type' | 'role'> {
|
|
3
|
+
ref?: Ref<HTMLInputElement>;
|
|
4
|
+
error?: boolean;
|
|
5
|
+
checked?: boolean;
|
|
6
|
+
onChange?: (checked: boolean) => void;
|
|
7
|
+
}
|
|
8
|
+
export default function Switch({ checked, onChange, value, id, name, error, ref, ...rest }: Props): import("react").JSX.Element;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Ref, TextareaHTMLAttributes } from 'react';
|
|
2
|
+
export interface Props extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
3
|
+
ref?: Ref<HTMLTextAreaElement>;
|
|
4
|
+
error?: boolean;
|
|
5
|
+
/** 基本スタイルを全部外し、classNameの定義のみ使います */
|
|
6
|
+
override?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export default function Textarea({ error, ...rest }: Props): import("react").JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { default as FormField, type Props as FormFieldProps } from './Field/FormField';
|
|
2
|
+
export { default as FormLabel } from './Field/FormLabel';
|
|
3
|
+
export { default as InputField, type Props as InputFieldProps } from './Field/InputField';
|
|
4
|
+
export { default as Input, type Props as InputProps } from './Input';
|
|
5
|
+
export { default as Textarea, type Props as TextareaProps } from './Textarea';
|
|
6
|
+
export { default as Checkbox, type Props as CheckboxProps } from './Checkbox';
|
|
7
|
+
export { default as Select, type Props as SelectProps } from './Select';
|
|
8
|
+
export { default as Radio, type Props as RadioProps } from './Radio';
|
|
9
|
+
export { default as Switch, type Props as SwitchProps } from './Switch';
|