@zenkigen-inc/component-ui 1.15.1 → 1.15.2

package/dist/index.d.mts

@@ -0,0 +1,434 @@
+import * as react from 'react';
+import react__default, { PropsWithChildren, ElementType, ComponentPropsWithoutRef, CSSProperties, ReactNode, ChangeEvent, MouseEvent, MutableRefObject, ReactElement, RefObject, FormEvent, TextareaHTMLAttributes, InputHTMLAttributes } from 'react';
+import { IconName } from '@zenkigen-inc/component-icons';
+import { iconColors, tagLightColors } from '@zenkigen-inc/component-theme';
+
+type Props$v = {
+    size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+    userId?: number;
+    firstName: string;
+    lastName: string;
+    isDisabled?: boolean;
+};
+declare function Avatar({ size, ...props }: Props$v): react.JSX.Element;
+
+declare function Breadcrumb({ children }: PropsWithChildren): react.JSX.Element;
+declare namespace Breadcrumb {
+    var Item: ({ children }: PropsWithChildren) => react.JSX.Element;
+}
+
+type Size$2 = 'small' | 'medium' | 'large';
+type Variant$1 = 'fill' | 'fillDanger' | 'outline' | 'text';
+type JustifyContent = 'start' | 'center';
+type ElementAs = ElementType;
+type AsProp<T extends ElementAs> = {
+    elementAs?: T;
+};
+type PolymorphicPropsWithoutRef<T extends ElementAs, P extends object> = PropsWithChildren<P> & ComponentPropsWithoutRef<T> & AsProp<T>;
+type Props$u<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
+    size?: Size$2;
+    width?: CSSProperties['width'];
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    variant?: Variant$1;
+    before?: ReactNode;
+    after?: ReactNode;
+    borderRadius?: CSSProperties['borderRadius'];
+    justifyContent?: JustifyContent;
+}>;
+declare const Button: <T extends ElementAs = "button">({ size, variant, isDisabled, isSelected, width, borderRadius, justifyContent, before, after, elementAs, children, ...props }: Props$u<T>) => react.JSX.Element;
+
+type Props$t = {
+    name?: string;
+    value?: string;
+    id?: string;
+    isChecked?: boolean;
+    color?: 'default' | 'gray' | 'error';
+    isIndeterminate?: boolean;
+    isDisabled?: boolean;
+    label?: string;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$t): react.JSX.Element;
+
+type Props$s = {
+    color?: 'gray' | 'red';
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props$s>): react.JSX.Element;
+
+type DropdownItemType = {
+    id: string;
+    content: ReactNode;
+    color?: 'gray' | 'red';
+    onClick?: () => void;
+};
+type DropdownVerticalPosition = 'top' | 'bottom';
+type DropdownHorizontalAlign = 'left' | 'center' | 'right';
+
+type Props$r = {
+    maxHeight?: CSSProperties['height'];
+    isNoPadding?: boolean;
+    verticalPosition?: DropdownVerticalPosition;
+    horizontalAlign?: DropdownHorizontalAlign;
+};
+declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props$r>): false | react.JSX.Element;
+
+type Props$q = {
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    variant?: 'text' | 'outline';
+    title?: string;
+    isDisabled?: boolean;
+    isArrowHidden?: boolean;
+    portalTargetRef?: MutableRefObject<HTMLElement | null>;
+} & ({
+    target: ReactElement;
+    label?: never;
+    icon?: never;
+} | {
+    target?: undefined;
+    label: string;
+    icon?: IconName;
+});
+declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, portalTargetRef, }: PropsWithChildren<Props$q>): react.JSX.Element;
+declare namespace Dropdown {
+    var Menu: typeof DropdownMenu;
+    var Item: typeof DropdownItem;
+}
+
+type Props$p = {
+    value: number;
+    isEditable?: boolean;
+    onChangeRating?: (newRating: number) => void | null;
+    size?: 'medium' | 'large';
+};
+declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props$p): react.JSX.Element;
+
+type Level = 1 | 2 | 3 | 4 | 5;
+type Props$o = {
+    level: Level;
+    before?: ReactNode;
+    after?: ReactNode;
+    children?: ReactNode;
+};
+declare function Heading(props: Props$o): react.JSX.Element;
+
+declare const useOutsideClick: <T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: (event: Event) => void, enabled?: boolean) => void;
+
+type Size$1 = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+type Color = keyof typeof iconColors;
+type Props$n = {
+    name: IconName;
+    size?: Size$1;
+    color?: Color;
+    isDisabled?: boolean;
+    className?: string;
+};
+declare const Icon: ({ size, isDisabled, ...props }: Props$n) => react.JSX.Element;
+
+type Size = 'small' | 'medium' | 'large';
+type Variant = 'outline' | 'text';
+type Props$m = {
+    icon: IconName;
+    size?: Size;
+    isDisabled?: boolean;
+    isNoPadding?: boolean;
+    variant?: Variant;
+} & ({
+    isAnchor: true;
+    href: string;
+    target?: HTMLAnchorElement['target'];
+} | {
+    isAnchor?: false;
+    onClick?: () => void;
+});
+declare function IconButton({ size, variant, isNoPadding, isDisabled, ...props }: Props$m): react.JSX.Element;
+
+type Props$l = {
+    size?: 'small' | 'medium' | 'large';
+    position?: 'fixed' | 'absolute' | 'static';
+    height?: string;
+};
+declare function Loading({ size, position, height }: Props$l): react.JSX.Element;
+
+declare function ModalBody({ children }: PropsWithChildren): react.JSX.Element;
+
+type Props$k = {
+    isNoBorder?: boolean;
+};
+declare function ModalFooter({ children, isNoBorder }: PropsWithChildren<Props$k>): react__default.JSX.Element;
+
+type Props$j = {
+    isNoBorder?: boolean;
+};
+declare function ModalHeader({ children, isNoBorder }: PropsWithChildren<Props$j>): react.JSX.Element;
+
+type Props$i = {
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
+    maxWidth?: CSSProperties['maxWidth'];
+    isOpen: boolean;
+    onClose?: () => void;
+    portalTargetRef?: MutableRefObject<HTMLElement | null>;
+};
+declare function Modal({ children, width, height, maxWidth, isOpen, onClose, portalTargetRef, }: PropsWithChildren<Props$i>): react.JSX.Element | null;
+declare namespace Modal {
+    var Body: typeof ModalBody;
+    var Header: typeof ModalHeader;
+    var Footer: typeof ModalFooter;
+}
+
+type Props$h = {
+    state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
+    size?: 'small' | 'medium';
+    children?: ReactNode;
+} & ({
+    showClose?: false;
+} | {
+    showClose: true;
+    onClickClose: () => void;
+});
+declare function NotificationInline({ state, size, ...props }: Props$h): react.JSX.Element;
+
+type Props$g = {
+    /** 現在のページ番号 */
+    currentPage: number;
+    /** トータルのページ数 */
+    totalPage: number;
+    /** 現在のページ番号を中心としたときの、左右のページボタン数 */
+    sideNumPagesToShow?: number;
+    /** ボタンが押されたときのイベントハンドラ */
+    onClick: (value: number) => void;
+};
+declare function Pagination({ currentPage, totalPage, sideNumPagesToShow, onClick }: Props$g): react.JSX.Element;
+
+type Props$f = {
+    /** トータル件数 */
+    totalSize: number;
+    /** ページあたり件数 */
+    sizePerPage: number;
+    /** 現在のページ番号 */
+    currentPage: number;
+    /** 件数表示単位ラベル */
+    countLabel?: string;
+    /** ページ表示単位ラベル */
+    pageLabel?: string;
+    /** Selectのリストの最大の高さ */
+    optionListMaxHeight?: number;
+    /** 戻るボタンクリック時のイベントハンドラ */
+    onClickPrevButton: () => void;
+    /** 進むボタンクリック時のイベントハンドラ */
+    onClickNextButton: () => void;
+    /** Selectが切り替わった時のイベントハンドラ */
+    onChange: (value: number) => void;
+};
+declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$f): react.JSX.Element;
+
+type Props$e = {
+    name?: string;
+    value?: string;
+    id?: string;
+    label?: string;
+    isChecked?: boolean;
+    isDisabled?: boolean;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+declare function Radio({ name, value, id, label, isChecked, isDisabled, onChange }: Props$e): react.JSX.Element;
+
+type Props$d = {
+    size?: 'medium' | 'large';
+    placeholder?: string;
+    width?: string;
+    value: string;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
+    onClickClearButton?: () => void;
+};
+declare const Search: react.ForwardRefExoticComponent<Props$d & react.RefAttributes<HTMLDivElement>>;
+
+type SelectOption = {
+    id: string;
+    value: string;
+    label: string;
+    icon?: IconName;
+};
+
+type Props$c = {
+    option: SelectOption;
+};
+declare function SelectItem({ option }: Props$c): react.JSX.Element;
+
+type Props$b = {
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    variant?: 'outline' | 'text';
+    width?: CSSProperties['width'];
+    maxWidth?: CSSProperties['maxWidth'];
+    placeholder?: string;
+    placeholderIcon?: IconName;
+    selectedOption?: SelectOption | null;
+    optionListMaxHeight?: CSSProperties['height'];
+    isDisabled?: boolean;
+    isOptionSelected?: boolean;
+    onChange?: (option: SelectOption | null) => void;
+};
+declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isOptionSelected, onChange, optionListMaxHeight, }: PropsWithChildren<Props$b>): react.JSX.Element;
+declare namespace Select {
+    var Option: typeof SelectItem;
+}
+
+type SortOrder = 'ascend' | 'descend' | null;
+
+type Props$a = {
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    variant?: 'outline' | 'text';
+    width?: CSSProperties['width'];
+    label: string;
+    sortOrder: SortOrder;
+    isDisabled?: boolean;
+    isSortKey?: boolean;
+    onChange?: (value: SortOrder) => void;
+    onClickDeselect?: () => void;
+};
+declare function SelectSort({ size, variant, width, label, sortOrder, isDisabled, isSortKey, onChange, onClickDeselect, }: Props$a): react.JSX.Element;
+
+type Props$9 = {
+    children?: ReactNode;
+};
+declare function Tab({ children }: Props$9): react.JSX.Element;
+declare namespace Tab {
+    var Item: ({ isSelected, ...props }: {
+        id: string;
+        isSelected?: boolean;
+        isDisabled?: boolean;
+        children?: ReactNode;
+        onClick: (id: string) => void;
+    }) => react.JSX.Element;
+}
+
+type Props$8 = {
+    id: string;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    children?: ReactNode;
+    onClick: (id: string) => void;
+};
+declare const TabItem: ({ isSelected, ...props }: Props$8) => react.JSX.Element;
+
+type Props$7 = {
+    children?: ReactNode;
+    className?: string;
+    isHeader?: boolean;
+};
+declare function TableCell({ children, className, isHeader }: Props$7): react.JSX.Element;
+
+type Props$6 = {
+    children?: ReactNode;
+    isHoverBackgroundVisible?: boolean;
+};
+declare function TableRow({ children, isHoverBackgroundVisible }: Props$6): react.JSX.Element;
+
+type Props$5 = {
+    width?: CSSProperties['width'];
+    templateRows?: CSSProperties['gridTemplateRows'];
+    templateColumns?: CSSProperties['gridTemplateColumns'];
+    autoColumns?: CSSProperties['gridAutoColumns'];
+    autoRows?: CSSProperties['gridAutoRows'];
+};
+declare function Table({ width, templateRows, templateColumns, autoColumns, autoRows, children, }: PropsWithChildren<Props$5>): react.JSX.Element;
+declare namespace Table {
+    var Row: typeof TableRow;
+    var Cell: typeof TableCell;
+}
+
+type TagColor = keyof typeof tagLightColors;
+type ColorVariant = 'normal' | 'light';
+
+type Props$4 = {
+    id: string;
+    children: string;
+    color: TagColor;
+    variant?: ColorVariant;
+} & ({
+    isEditable: true;
+    onDelete: (id: string) => void;
+    size?: 'medium';
+} | {
+    isEditable?: undefined;
+    onDelete?: never;
+    size?: 'x-small' | 'small' | 'medium';
+});
+declare function Tag({ id, children, color, variant, size, isEditable, onDelete }: Props$4): react.JSX.Element;
+
+type Props$3 = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    size?: 'medium' | 'large';
+    value: string;
+    height?: CSSProperties['height'];
+    isError?: boolean;
+} & ({
+    autoHeight: true;
+    maxHeight?: CSSProperties['maxHeight'];
+    isResizable?: never;
+} | {
+    autoHeight?: false;
+    maxHeight?: never;
+    isResizable?: boolean;
+});
+declare const TextArea: react.ForwardRefExoticComponent<Props$3 & react.RefAttributes<HTMLTextAreaElement>>;
+
+declare const TextInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    size?: "medium" | "large";
+    value: string;
+    isError?: boolean;
+    onClickClearButton?: () => void;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type ToastState = 'success' | 'error' | 'warning' | 'information';
+
+type Props$2 = {
+    state?: ToastState;
+    width?: CSSProperties['width'];
+    isAutoClose?: boolean;
+    isAnimation?: boolean;
+    children?: ReactNode;
+    onClickClose: () => void;
+};
+declare function Toast({ state, width, isAutoClose, isAnimation, children, onClickClose, }: Props$2): react.JSX.Element;
+
+type AddToastArgs = {
+    message: string;
+    state: ToastState;
+};
+type ToastProviderProps = {
+    addToast: (args: AddToastArgs) => void;
+    removeToast: (id: number) => void;
+};
+declare const ToastProvider: ({ children }: PropsWithChildren) => react.JSX.Element;
+declare const useToast: () => ToastProviderProps;
+
+type Props$1 = {
+    id: string;
+    size: 'small' | 'medium' | 'large';
+    isChecked: boolean;
+    onChange: () => void;
+    label?: ReactNode;
+    labelPosition?: 'left' | 'right';
+    isDisabled?: boolean;
+};
+declare function Toggle({ id, size, isChecked, onChange, label, labelPosition, isDisabled, }: Props$1): react.JSX.Element;
+
+type TooltipSize = 'small' | 'medium';
+type TooltipVerticalPosition = 'top' | 'bottom';
+type TooltipHorizontalAlign = 'left' | 'center' | 'right';
+
+type Props = {
+    content: ReactNode;
+    size?: TooltipSize;
+    maxWidth?: CSSProperties['maxWidth'];
+    verticalPosition?: TooltipVerticalPosition;
+    horizontalAlign?: TooltipHorizontalAlign;
+    isDisabledHover?: boolean;
+    portalTarget?: HTMLElement;
+};
+declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: PropsWithChildren<Props>): react.JSX.Element;
+
+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, Select, type SelectOption, SelectSort, type SortOrder, Tab, TabItem, Table, TableCell, TableRow, Tag, type TagColor, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, useOutsideClick, useToast };