@zenkigen-inc/component-ui 1.15.2 → 1.16.0

package/dist/index.d.mts

@@ -1,16 +1,16 @@
 import * as react from 'react';
-import react__default, { PropsWithChildren, ElementType, ComponentPropsWithoutRef, CSSProperties, ReactNode, ChangeEvent, MouseEvent, MutableRefObject, ReactElement, RefObject, FormEvent, TextareaHTMLAttributes, InputHTMLAttributes } from 'react';
+import react__default, { PropsWithChildren, ElementType, ComponentPropsWithoutRef, CSSProperties, ReactNode, ChangeEvent, MouseEvent, MutableRefObject, ReactElement, RefObject, FormEvent, ButtonHTMLAttributes, TextareaHTMLAttributes, InputHTMLAttributes } from 'react';
 import { IconName } from '@zenkigen-inc/component-icons';
 import { iconColors, tagLightColors } from '@zenkigen-inc/component-theme';
 
-type Props$v = {
+type Props$w = {
     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 Avatar({ size, ...props }: Props$w): react.JSX.Element;
 
 declare function Breadcrumb({ children }: PropsWithChildren): react.JSX.Element;
 declare namespace Breadcrumb {
@@ -25,7 +25,7 @@ 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, {
+type Props$v<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
     size?: Size$2;
     width?: CSSProperties['width'];
     isSelected?: boolean;
@@ -36,9 +36,9 @@ type Props$u<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
     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;
+declare const Button: <T extends ElementAs = "button">({ size, variant, isDisabled, isSelected, width, borderRadius, justifyContent, before, after, elementAs, children, ...props }: Props$v<T>) => react.JSX.Element;
 
-type Props$t = {
+type Props$u = {
     name?: string;
     value?: string;
     id?: string;
@@ -49,13 +49,13 @@ type Props$t = {
     label?: string;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$t): react.JSX.Element;
+declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$u): react.JSX.Element;
 
-type Props$s = {
+type Props$t = {
     color?: 'gray' | 'red';
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
-declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props$s>): react.JSX.Element;
+declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props$t>): react.JSX.Element;
 
 type DropdownItemType = {
     id: string;
@@ -66,15 +66,15 @@ type DropdownItemType = {
 type DropdownVerticalPosition = 'top' | 'bottom';
 type DropdownHorizontalAlign = 'left' | 'center' | 'right';
 
-type Props$r = {
+type Props$s = {
     maxHeight?: CSSProperties['height'];
     isNoPadding?: boolean;
     verticalPosition?: DropdownVerticalPosition;
     horizontalAlign?: DropdownHorizontalAlign;
 };
-declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props$r>): false | react.JSX.Element;
+declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props$s>): false | react.JSX.Element;
 
-type Props$q = {
+type Props$r = {
     size?: 'x-small' | 'small' | 'medium' | 'large';
     variant?: 'text' | 'outline';
     title?: string;
@@ -90,45 +90,59 @@ type Props$q = {
     label: string;
     icon?: IconName;
 });
-declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, portalTargetRef, }: PropsWithChildren<Props$q>): react.JSX.Element;
+declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, portalTargetRef, }: PropsWithChildren<Props$r>): react.JSX.Element;
 declare namespace Dropdown {
     var Menu: typeof DropdownMenu;
     var Item: typeof DropdownItem;
 }
 
-type Props$p = {
+type Props$q = {
     value: number;
     isEditable?: boolean;
     onChangeRating?: (newRating: number) => void | null;
     size?: 'medium' | 'large';
 };
-declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props$p): react.JSX.Element;
+declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props$q): react.JSX.Element;
 
 type Level = 1 | 2 | 3 | 4 | 5;
-type Props$o = {
+type Props$p = {
     level: Level;
     before?: ReactNode;
     after?: ReactNode;
     children?: ReactNode;
 };
-declare function Heading(props: Props$o): react.JSX.Element;
+declare function Heading(props: Props$p): react.JSX.Element;
 
 declare const useOutsideClick: <T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: (event: Event) => void, enabled?: boolean) => void;
 
+type UseRovingFocusProps = {
+    values: string[];
+    defaultFocusedValue?: string;
+    isDisabled?: boolean;
+};
+type UseRovingFocusReturn = {
+    focusedValue: string | null;
+    handleFocusChange: (value: string) => void;
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+    handleBlur: () => void;
+    setFocusedValue: React.Dispatch<React.SetStateAction<string | null>>;
+};
+declare const useRovingFocus: ({ values, defaultFocusedValue, isDisabled, }: UseRovingFocusProps) => UseRovingFocusReturn;
+
 type Size$1 = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
 type Color = keyof typeof iconColors;
-type Props$n = {
+type Props$o = {
     name: IconName;
     size?: Size$1;
     color?: Color;
     isDisabled?: boolean;
     className?: string;
 };
-declare const Icon: ({ size, isDisabled, ...props }: Props$n) => react.JSX.Element;
+declare const Icon: ({ size, isDisabled, ...props }: Props$o) => react.JSX.Element;
 
 type Size = 'small' | 'medium' | 'large';
 type Variant = 'outline' | 'text';
-type Props$m = {
+type Props$n = {
     icon: IconName;
     size?: Size;
     isDisabled?: boolean;
@@ -142,28 +156,28 @@ type Props$m = {
     isAnchor?: false;
     onClick?: () => void;
 });
-declare function IconButton({ size, variant, isNoPadding, isDisabled, ...props }: Props$m): react.JSX.Element;
+declare function IconButton({ size, variant, isNoPadding, isDisabled, ...props }: Props$n): react.JSX.Element;
 
-type Props$l = {
+type Props$m = {
     size?: 'small' | 'medium' | 'large';
     position?: 'fixed' | 'absolute' | 'static';
     height?: string;
 };
-declare function Loading({ size, position, height }: Props$l): react.JSX.Element;
+declare function Loading({ size, position, height }: Props$m): react.JSX.Element;
 
 declare function ModalBody({ children }: PropsWithChildren): react.JSX.Element;
 
-type Props$k = {
+type Props$l = {
     isNoBorder?: boolean;
 };
-declare function ModalFooter({ children, isNoBorder }: PropsWithChildren<Props$k>): react__default.JSX.Element;
+declare function ModalFooter({ children, isNoBorder }: PropsWithChildren<Props$l>): react__default.JSX.Element;
 
-type Props$j = {
+type Props$k = {
     isNoBorder?: boolean;
 };
-declare function ModalHeader({ children, isNoBorder }: PropsWithChildren<Props$j>): react.JSX.Element;
+declare function ModalHeader({ children, isNoBorder }: PropsWithChildren<Props$k>): react.JSX.Element;
 
-type Props$i = {
+type Props$j = {
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
     maxWidth?: CSSProperties['maxWidth'];
@@ -171,14 +185,14 @@ type Props$i = {
     onClose?: () => void;
     portalTargetRef?: MutableRefObject<HTMLElement | null>;
 };
-declare function Modal({ children, width, height, maxWidth, isOpen, onClose, portalTargetRef, }: PropsWithChildren<Props$i>): react.JSX.Element | null;
+declare function Modal({ children, width, height, maxWidth, isOpen, onClose, portalTargetRef, }: PropsWithChildren<Props$j>): react.JSX.Element | null;
 declare namespace Modal {
     var Body: typeof ModalBody;
     var Header: typeof ModalHeader;
     var Footer: typeof ModalFooter;
 }
 
-type Props$h = {
+type Props$i = {
     state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
     size?: 'small' | 'medium';
     children?: ReactNode;
@@ -188,9 +202,9 @@ type Props$h = {
     showClose: true;
     onClickClose: () => void;
 });
-declare function NotificationInline({ state, size, ...props }: Props$h): react.JSX.Element;
+declare function NotificationInline({ state, size, ...props }: Props$i): react.JSX.Element;
 
-type Props$g = {
+type Props$h = {
     /** 現在のページ番号 */
     currentPage: number;
     /** トータルのページ数 */
@@ -200,9 +214,9 @@ type Props$g = {
     /** ボタンが押されたときのイベントハンドラ */
     onClick: (value: number) => void;
 };
-declare function Pagination({ currentPage, totalPage, sideNumPagesToShow, onClick }: Props$g): react.JSX.Element;
+declare function Pagination({ currentPage, totalPage, sideNumPagesToShow, onClick }: Props$h): react.JSX.Element;
 
-type Props$f = {
+type Props$g = {
     /** トータル件数 */
     totalSize: number;
     /** ページあたり件数 */
@@ -222,9 +236,9 @@ type Props$f = {
     /** Selectが切り替わった時のイベントハンドラ */
     onChange: (value: number) => void;
 };
-declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$f): react.JSX.Element;
+declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$g): react.JSX.Element;
 
-type Props$e = {
+type Props$f = {
     name?: string;
     value?: string;
     id?: string;
@@ -233,9 +247,9 @@ type Props$e = {
     isDisabled?: boolean;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Radio({ name, value, id, label, isChecked, isDisabled, onChange }: Props$e): react.JSX.Element;
+declare function Radio({ name, value, id, label, isChecked, isDisabled, onChange }: Props$f): react.JSX.Element;
 
-type Props$d = {
+type Props$e = {
     size?: 'medium' | 'large';
     placeholder?: string;
     width?: string;
@@ -244,7 +258,42 @@ type Props$d = {
     onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
     onClickClearButton?: () => void;
 };
-declare const Search: react.ForwardRefExoticComponent<Props$d & react.RefAttributes<HTMLDivElement>>;
+declare const Search: react.ForwardRefExoticComponent<Props$e & react.RefAttributes<HTMLDivElement>>;
+
+type BaseProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'className'> & {
+    value: string;
+    isDisabled?: boolean;
+};
+type SegmentedControlItemProps = BaseProps & ({
+    icon: IconName;
+    label?: never;
+    'aria-label': string;
+} | {
+    icon: IconName;
+    label: string;
+    'aria-label'?: string;
+} | {
+    icon?: never;
+    label: string;
+    'aria-label'?: string;
+} | {
+    icon?: never;
+    label?: never;
+    'aria-label'?: string;
+});
+
+type SegmentedControlProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange' | 'className'> & {
+    children: ReactNode;
+    value?: string;
+    size?: 'small' | 'medium';
+    'aria-label': string;
+    isDisabled?: boolean;
+    onChange?: (value: string) => void;
+};
+declare const SegmentedControl: {
+    ({ children, value, onChange, size, isDisabled, "aria-label": ariaLabel, ...rest }: SegmentedControlProps): react__default.JSX.Element;
+    Item: ({ label, value, icon, isDisabled: itemDisabled, "aria-label": ariaLabel, ...rest }: SegmentedControlItemProps) => react__default.JSX.Element;
+};
 
 type SelectOption = {
     id: string;
@@ -253,12 +302,12 @@ type SelectOption = {
     icon?: IconName;
 };
 
-type Props$c = {
+type Props$d = {
     option: SelectOption;
 };
-declare function SelectItem({ option }: Props$c): react.JSX.Element;
+declare function SelectItem({ option }: Props$d): react.JSX.Element;
 
-type Props$b = {
+type Props$c = {
     size?: 'x-small' | 'small' | 'medium' | 'large';
     variant?: 'outline' | 'text';
     width?: CSSProperties['width'];
@@ -268,17 +317,18 @@ type Props$b = {
     selectedOption?: SelectOption | null;
     optionListMaxHeight?: CSSProperties['height'];
     isDisabled?: boolean;
+    isError?: 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 function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, }: PropsWithChildren<Props$c>): react.JSX.Element;
 declare namespace Select {
     var Option: typeof SelectItem;
 }
 
 type SortOrder = 'ascend' | 'descend' | null;
 
-type Props$a = {
+type Props$b = {
     size?: 'x-small' | 'small' | 'medium' | 'large';
     variant?: 'outline' | 'text';
     width?: CSSProperties['width'];
@@ -289,7 +339,18 @@ type Props$a = {
     onChange?: (value: SortOrder) => void;
     onClickDeselect?: () => void;
 };
-declare function SelectSort({ size, variant, width, label, sortOrder, isDisabled, isSortKey, onChange, onClickDeselect, }: Props$a): react.JSX.Element;
+declare function SelectSort({ size, variant, width, label, sortOrder, isDisabled, isSortKey, onChange, onClickDeselect, }: Props$b): react.JSX.Element;
+
+type Props$a = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'type' | 'disabled' | 'onClick' | 'aria-disabled' | 'aria-label'> & {
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    width?: CSSProperties['width'];
+    label: string;
+    sortOrder: SortOrder;
+    isDisabled?: boolean;
+    'aria-label': string;
+    onClick?: () => void;
+};
+declare function SortButton({ size, width, label, sortOrder, isDisabled, onClick, 'aria-label': ariaLabel, ...rest }: Props$a): react.JSX.Element;
 
 type Props$9 = {
     children?: ReactNode;
@@ -431,4 +492,4 @@ type Props = {
 };
 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 };
+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 };