@zenkigen-inc/component-ui 1.20.4 → 1.21.0

package/dist/index.d.mts

@@ -6,14 +6,31 @@ import { tokens } from '@zenkigen-inc/component-config';
 import { useFloating } from '@floating-ui/react';
 import { tagLightColors } from '@zenkigen-inc/component-theme';
 
+type AvatarSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+
 type Props$x = {
-    size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+    size?: AvatarSize;
     userId?: number;
     firstName?: string;
     lastName?: string;
     isDisabled?: boolean;
 };
-declare function Avatar({ size, ...props }: Props$x): react.JSX.Element;
+declare function Avatar({ size: sizeProp, ...props }: Props$x): react.JSX.Element;
+
+type RenderSurplusContext = {
+    remain: number;
+    total: number;
+    defaultBadge: ReactNode;
+};
+type AvatarGroupProps = {
+    children: ReactNode;
+    size?: AvatarSize;
+    max?: number;
+    total?: number;
+    renderSurplus?: (ctx: RenderSurplusContext) => ReactNode;
+    'aria-label'?: string;
+};
+declare function AvatarGroup({ children, size, max: maxProp, total, renderSurplus, 'aria-label': ariaLabel, }: AvatarGroupProps): react.JSX.Element;
 
 type BreadcrumbProps = {
     /** パンくずとして表示する要素。通常は複数の Breadcrumb.Item を渡す。 */
@@ -79,6 +96,87 @@ type Props$w = {
 };
 declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, size, }: Props$w): react.JSX.Element;
 
+type TextInputErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const TextInputErrorMessage: react.ForwardRefExoticComponent<TextInputErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
+
+type TextInputHelperMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const TextInputHelperMessage: react.ForwardRefExoticComponent<TextInputHelperMessageProps & react.RefAttributes<HTMLDivElement>>;
+
+type ComboboxSize = 'medium' | 'large';
+type ComboboxVariant = 'outline' | 'text';
+type ComboboxChangeMeta = {
+    label: string;
+};
+type ComboboxProps = PropsWithChildren<{
+    /** 選択値（controlled） */
+    value: string | null;
+    /** 選択変更時のコールバック */
+    onChange: (value: string | null, meta: ComboboxChangeMeta | null) => void;
+    /** 入力テキスト（controlled） */
+    inputValue: string;
+    /** 入力変更時のコールバック */
+    onInputChange: (value: string) => void;
+    /** popup の開閉状態（任意、controlled） */
+    isOpen?: boolean;
+    /** 開閉変更時のコールバック */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** サイズ */
+    size?: ComboboxSize;
+    /** バリアント */
+    variant?: ComboboxVariant;
+    /** プレースホルダー */
+    placeholder?: string;
+    /** エラー状態 */
+    isError?: boolean;
+    /** 無効状態 */
+    isDisabled?: boolean;
+    /** 幅 */
+    width?: CSSProperties['width'];
+    /** 最大幅 */
+    maxWidth?: CSSProperties['maxWidth'];
+    /** 候補リストの最大高さ */
+    listMaxHeight?: CSSProperties['height'];
+    /** true のとき候補リストの幅を input と一致させる。false のときコンテンツに応じて広がる（min: input 幅, max: ビューポート幅） */
+    matchListToTrigger?: boolean;
+}>;
+type ComboboxInputProps = PropsWithChildren<{
+    /** input の autoFocus */
+    autoFocus?: boolean;
+}>;
+type ComboboxListProps = PropsWithChildren<{
+    /** 候補リストの最大高さ（Combobox の listMaxHeight を上書き） */
+    maxHeight?: CSSProperties['height'];
+}>;
+type ComboboxItemProps = {
+    /** 選択値として使う文字列（必須） */
+    value: string;
+    /** input 表示・選択時の復元用文字列（必須）。1 行 truncate 表示で自動レンダリングされる */
+    label: string;
+    /** 個別アイテムの無効化 */
+    isDisabled?: boolean;
+};
+
+declare function ComboboxInput({ autoFocus, children }: ComboboxInputProps): react.JSX.Element;
+
+declare function ComboboxItem({ value, label, isDisabled }: ComboboxItemProps): react.JSX.Element;
+
+declare function ComboboxList({ children, maxHeight: maxHeightProp }: ComboboxListProps): react.JSX.Element;
+
+declare function ComboboxLoading(): react.JSX.Element;
+declare function ComboboxEmpty(): react.JSX.Element;
+
+declare function ComboboxBase({ children, value, onChange, inputValue, onInputChange, isOpen: isOpenProp, onOpenChange, size, variant, placeholder, isError, isDisabled, width, maxWidth, listMaxHeight, matchListToTrigger, }: ComboboxProps): react.JSX.Element;
+declare const Combobox: typeof ComboboxBase & {
+    Input: typeof ComboboxInput;
+    List: typeof ComboboxList;
+    Item: typeof ComboboxItem;
+    Loading: typeof ComboboxLoading;
+    Empty: typeof ComboboxEmpty;
+    HelperMessage: react.ForwardRefExoticComponent<TextInputHelperMessageProps & react.RefAttributes<HTMLDivElement>>;
+    ErrorMessage: react.ForwardRefExoticComponent<TextInputErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
+    displayName: string;
+};
+
 /**
  * DatePicker のエラーメッセージを表示するコンポーネントのプロパティ
  *
@@ -459,14 +557,8 @@ type Props$i = {
 };
 declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$i): react.JSX.Element;
 
-type TextInputErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
-declare const TextInputErrorMessage: react.ForwardRefExoticComponent<TextInputErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
-
-type TextInputHelperMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
-declare const TextInputHelperMessage: react.ForwardRefExoticComponent<TextInputHelperMessageProps & react.RefAttributes<HTMLDivElement>>;
-
 type TextInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'className'> & {
-    size?: 'medium' | 'large';
+    size?: 'medium' | 'large' | 'x-large';
     variant?: 'outline' | 'text';
     value: string;
     isError?: boolean;
@@ -716,6 +808,40 @@ type Props$8 = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'type
 };
 declare function SortButton({ size, width, label, sortOrder, isDisabled, onClick, 'aria-label': ariaLabel, ...rest }: Props$8): react.JSX.Element;
 
+type StepsSize = 'small' | 'medium' | 'large';
+type StepsOrientation = 'horizontal' | 'vertical';
+type StepsTextOrientation = 'horizontal' | 'vertical';
+type StepsVariant = 'subtle' | 'solid';
+type StepProgress = 'completed' | 'current' | 'upcoming';
+type StepState = {
+    progress: StepProgress;
+};
+type StepsProps = {
+    children: ReactNode;
+    currentStep?: number;
+    defaultCurrentStep?: number;
+    size?: StepsSize;
+    orientation?: StepsOrientation;
+    textOrientation?: StepsTextOrientation;
+    variant?: StepsVariant;
+    'aria-label'?: string;
+};
+type StepsItemProps = {
+    label: ReactNode;
+    description?: ReactNode;
+};
+
+declare function StepsItem({ label, description }: StepsItemProps): react.JSX.Element;
+declare namespace StepsItem {
+    var displayName: string;
+}
+
+declare function StepsRoot({ children, currentStep, defaultCurrentStep, size, orientation, textOrientation, variant, 'aria-label': ariaLabel, }: StepsProps): react.JSX.Element | null;
+type StepsComponent = typeof StepsRoot & {
+    Item: typeof StepsItem;
+};
+declare const Steps: StepsComponent;
+
 type Props$7 = {
     children?: ReactNode;
     /** レイアウトタイプ */
@@ -929,4 +1055,4 @@ type TooltipProps = {
 };
 declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: TooltipProps): react.JSX.Element;
 
-export { Avatar, Breadcrumb, Button, Checkbox, type ColorVariant, DatePicker, type DatePickerProps, type DatePickerTimeZone, Divider, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, FileInput, type FileInputRef, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, Popover, PopoverContent, type PopoverContextValue, type PopoverPlacement, PopoverTrigger, Popup, 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 };
+export { Avatar, AvatarGroup, Breadcrumb, Button, Checkbox, type ColorVariant, Combobox, type ComboboxChangeMeta, type ComboboxInputProps, type ComboboxItemProps, type ComboboxListProps, type ComboboxProps, type ComboboxSize, type ComboboxVariant, DatePicker, type DatePickerProps, type DatePickerTimeZone, Divider, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, FileInput, type FileInputRef, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, Popover, PopoverContent, type PopoverContextValue, type PopoverPlacement, PopoverTrigger, Popup, Radio, type RenderSurplusContext, Search, SegmentedControl, Select, type SelectOption, SelectSort, SortButton, type SortOrder, type StepProgress, type StepState, Steps, type StepsOrientation, type StepsProps, type StepsSize, type StepsTextOrientation, type StepsVariant, 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

@@ -6,14 +6,31 @@ import { tokens } from '@zenkigen-inc/component-config';
 import { useFloating } from '@floating-ui/react';
 import { tagLightColors } from '@zenkigen-inc/component-theme';
 
+type AvatarSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+
 type Props$x = {
-    size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+    size?: AvatarSize;
     userId?: number;
     firstName?: string;
     lastName?: string;
     isDisabled?: boolean;
 };
-declare function Avatar({ size, ...props }: Props$x): react.JSX.Element;
+declare function Avatar({ size: sizeProp, ...props }: Props$x): react.JSX.Element;
+
+type RenderSurplusContext = {
+    remain: number;
+    total: number;
+    defaultBadge: ReactNode;
+};
+type AvatarGroupProps = {
+    children: ReactNode;
+    size?: AvatarSize;
+    max?: number;
+    total?: number;
+    renderSurplus?: (ctx: RenderSurplusContext) => ReactNode;
+    'aria-label'?: string;
+};
+declare function AvatarGroup({ children, size, max: maxProp, total, renderSurplus, 'aria-label': ariaLabel, }: AvatarGroupProps): react.JSX.Element;
 
 type BreadcrumbProps = {
     /** パンくずとして表示する要素。通常は複数の Breadcrumb.Item を渡す。 */
@@ -79,6 +96,87 @@ type Props$w = {
 };
 declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, size, }: Props$w): react.JSX.Element;
 
+type TextInputErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const TextInputErrorMessage: react.ForwardRefExoticComponent<TextInputErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
+
+type TextInputHelperMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const TextInputHelperMessage: react.ForwardRefExoticComponent<TextInputHelperMessageProps & react.RefAttributes<HTMLDivElement>>;
+
+type ComboboxSize = 'medium' | 'large';
+type ComboboxVariant = 'outline' | 'text';
+type ComboboxChangeMeta = {
+    label: string;
+};
+type ComboboxProps = PropsWithChildren<{
+    /** 選択値（controlled） */
+    value: string | null;
+    /** 選択変更時のコールバック */
+    onChange: (value: string | null, meta: ComboboxChangeMeta | null) => void;
+    /** 入力テキスト（controlled） */
+    inputValue: string;
+    /** 入力変更時のコールバック */
+    onInputChange: (value: string) => void;
+    /** popup の開閉状態（任意、controlled） */
+    isOpen?: boolean;
+    /** 開閉変更時のコールバック */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** サイズ */
+    size?: ComboboxSize;
+    /** バリアント */
+    variant?: ComboboxVariant;
+    /** プレースホルダー */
+    placeholder?: string;
+    /** エラー状態 */
+    isError?: boolean;
+    /** 無効状態 */
+    isDisabled?: boolean;
+    /** 幅 */
+    width?: CSSProperties['width'];
+    /** 最大幅 */
+    maxWidth?: CSSProperties['maxWidth'];
+    /** 候補リストの最大高さ */
+    listMaxHeight?: CSSProperties['height'];
+    /** true のとき候補リストの幅を input と一致させる。false のときコンテンツに応じて広がる（min: input 幅, max: ビューポート幅） */
+    matchListToTrigger?: boolean;
+}>;
+type ComboboxInputProps = PropsWithChildren<{
+    /** input の autoFocus */
+    autoFocus?: boolean;
+}>;
+type ComboboxListProps = PropsWithChildren<{
+    /** 候補リストの最大高さ（Combobox の listMaxHeight を上書き） */
+    maxHeight?: CSSProperties['height'];
+}>;
+type ComboboxItemProps = {
+    /** 選択値として使う文字列（必須） */
+    value: string;
+    /** input 表示・選択時の復元用文字列（必須）。1 行 truncate 表示で自動レンダリングされる */
+    label: string;
+    /** 個別アイテムの無効化 */
+    isDisabled?: boolean;
+};
+
+declare function ComboboxInput({ autoFocus, children }: ComboboxInputProps): react.JSX.Element;
+
+declare function ComboboxItem({ value, label, isDisabled }: ComboboxItemProps): react.JSX.Element;
+
+declare function ComboboxList({ children, maxHeight: maxHeightProp }: ComboboxListProps): react.JSX.Element;
+
+declare function ComboboxLoading(): react.JSX.Element;
+declare function ComboboxEmpty(): react.JSX.Element;
+
+declare function ComboboxBase({ children, value, onChange, inputValue, onInputChange, isOpen: isOpenProp, onOpenChange, size, variant, placeholder, isError, isDisabled, width, maxWidth, listMaxHeight, matchListToTrigger, }: ComboboxProps): react.JSX.Element;
+declare const Combobox: typeof ComboboxBase & {
+    Input: typeof ComboboxInput;
+    List: typeof ComboboxList;
+    Item: typeof ComboboxItem;
+    Loading: typeof ComboboxLoading;
+    Empty: typeof ComboboxEmpty;
+    HelperMessage: react.ForwardRefExoticComponent<TextInputHelperMessageProps & react.RefAttributes<HTMLDivElement>>;
+    ErrorMessage: react.ForwardRefExoticComponent<TextInputErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
+    displayName: string;
+};
+
 /**
  * DatePicker のエラーメッセージを表示するコンポーネントのプロパティ
  *
@@ -459,14 +557,8 @@ type Props$i = {
 };
 declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$i): react.JSX.Element;
 
-type TextInputErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
-declare const TextInputErrorMessage: react.ForwardRefExoticComponent<TextInputErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
-
-type TextInputHelperMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
-declare const TextInputHelperMessage: react.ForwardRefExoticComponent<TextInputHelperMessageProps & react.RefAttributes<HTMLDivElement>>;
-
 type TextInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'className'> & {
-    size?: 'medium' | 'large';
+    size?: 'medium' | 'large' | 'x-large';
     variant?: 'outline' | 'text';
     value: string;
     isError?: boolean;
@@ -716,6 +808,40 @@ type Props$8 = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'type
 };
 declare function SortButton({ size, width, label, sortOrder, isDisabled, onClick, 'aria-label': ariaLabel, ...rest }: Props$8): react.JSX.Element;
 
+type StepsSize = 'small' | 'medium' | 'large';
+type StepsOrientation = 'horizontal' | 'vertical';
+type StepsTextOrientation = 'horizontal' | 'vertical';
+type StepsVariant = 'subtle' | 'solid';
+type StepProgress = 'completed' | 'current' | 'upcoming';
+type StepState = {
+    progress: StepProgress;
+};
+type StepsProps = {
+    children: ReactNode;
+    currentStep?: number;
+    defaultCurrentStep?: number;
+    size?: StepsSize;
+    orientation?: StepsOrientation;
+    textOrientation?: StepsTextOrientation;
+    variant?: StepsVariant;
+    'aria-label'?: string;
+};
+type StepsItemProps = {
+    label: ReactNode;
+    description?: ReactNode;
+};
+
+declare function StepsItem({ label, description }: StepsItemProps): react.JSX.Element;
+declare namespace StepsItem {
+    var displayName: string;
+}
+
+declare function StepsRoot({ children, currentStep, defaultCurrentStep, size, orientation, textOrientation, variant, 'aria-label': ariaLabel, }: StepsProps): react.JSX.Element | null;
+type StepsComponent = typeof StepsRoot & {
+    Item: typeof StepsItem;
+};
+declare const Steps: StepsComponent;
+
 type Props$7 = {
     children?: ReactNode;
     /** レイアウトタイプ */
@@ -929,4 +1055,4 @@ type TooltipProps = {
 };
 declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: TooltipProps): react.JSX.Element;
 
-export { Avatar, Breadcrumb, Button, Checkbox, type ColorVariant, DatePicker, type DatePickerProps, type DatePickerTimeZone, Divider, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, FileInput, type FileInputRef, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, Popover, PopoverContent, type PopoverContextValue, type PopoverPlacement, PopoverTrigger, Popup, 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 };
+export { Avatar, AvatarGroup, Breadcrumb, Button, Checkbox, type ColorVariant, Combobox, type ComboboxChangeMeta, type ComboboxInputProps, type ComboboxItemProps, type ComboboxListProps, type ComboboxProps, type ComboboxSize, type ComboboxVariant, DatePicker, type DatePickerProps, type DatePickerTimeZone, Divider, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, FileInput, type FileInputRef, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, Popover, PopoverContent, type PopoverContextValue, type PopoverPlacement, PopoverTrigger, Popup, Radio, type RenderSurplusContext, Search, SegmentedControl, Select, type SelectOption, SelectSort, SortButton, type SortOrder, type StepProgress, type StepState, Steps, type StepsOrientation, type StepsProps, type StepsSize, type StepsTextOrientation, type StepsVariant, Tab, TabItem, Table, TableCell, TableRow, Tag, type TagColor, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, type UseRovingFocusProps, type UseRovingFocusReturn, useOutsideClick, useRovingFocus, useToast };