@zenkigen-inc/component-ui 1.20.3 → 1.21.0

package/dist/index.d.mts

@@ -2,18 +2,35 @@ import * as react from 'react';
 import react__default, { ReactNode, ElementType, PropsWithChildren, ComponentPropsWithoutRef, CSSProperties, ChangeEvent, HTMLAttributes, ButtonHTMLAttributes, ReactElement, MouseEvent, MutableRefObject, RefObject, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, TextareaHTMLAttributes } from 'react';
 import * as _zenkigen_inc_component_icons from '@zenkigen-inc/component-icons';
 import { IconName } from '@zenkigen-inc/component-icons';
-import { iconColors, tagLightColors } from '@zenkigen-inc/component-theme';
 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 を渡す。 */
@@ -26,7 +43,7 @@ declare namespace Breadcrumb {
     }) => react.JSX.Element;
 }
 
-type Size$3 = 'small' | 'medium' | 'large';
+type Size$3 = 'small' | 'medium' | 'large' | 'x-large';
 type Variant$1 = 'fill' | 'fillDanger' | 'outline' | 'text';
 type JustifyContent = 'start' | 'center';
 type ElementAs = ElementType;
@@ -66,6 +83,8 @@ type Props$w = {
     isChecked?: boolean;
     /** 色バリエーション。default: インタラクティブ色 / gray: グレー系 / error: エラー色 */
     color?: 'default' | 'gray' | 'error';
+    /** サイズバリエーション。medium: box 20px / large: box 24px */
+    size?: 'medium' | 'large';
     /** インデターミネイト表示を行うか（表示時は isChecked も true を推奨） */
     isIndeterminate?: boolean;
     /** 無効状態にするか */
@@ -75,7 +94,88 @@ type Props$w = {
     /** 状態変化時のハンドラー。isDisabled=true の場合は呼ばれない */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$w): react.JSX.Element;
+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 のエラーメッセージを表示するコンポーネントのプロパティ
@@ -330,11 +430,10 @@ type TailwindColorToken = `${TailwindColorName}-${TailwindColorShade}` | 'transp
 type ColorToken = UserColorToken | TextColorToken | LinkColorToken | BackgroundColorToken | BorderColorToken | IconColorToken | InteractiveColorToken | FieldColorToken | FocusColorToken | HoverColorToken | ActiveColorToken | SelectedColorToken | DisabledColorToken | SupportColorToken | BaseColorToken | TailwindColorToken;
 
 type Size$1 = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
-type Color = keyof typeof iconColors;
 type Props$q = {
     name: IconName;
     size?: Size$1;
-    color?: Color;
+    color?: ColorToken;
     accentColor?: ColorToken;
     isDisabled?: boolean;
     className?: string;
@@ -356,6 +455,8 @@ type Props$p = {
     isNoPadding?: boolean;
     /** ボタンのバリアント */
     variant?: Variant;
+    /** アイコンのカラー */
+    iconColor?: ColorToken;
     /** アイコンのアクセントカラー */
     iconAccentColor?: ColorToken;
 } & (({
@@ -365,7 +466,7 @@ type Props$p = {
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'className'>) | ({
     isAnchor?: false;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'className'>));
-declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, iconAccentColor, ...props }: Props$p): react.JSX.Element;
+declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, iconColor, iconAccentColor, ...props }: Props$p): react.JSX.Element;
 
 type Props$o = {
     /** インジケーターのサイズ。small=16px / medium=32px / large=64px */
@@ -456,14 +557,9 @@ 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;
     onClickClearButton?: () => void;
@@ -485,7 +581,7 @@ declare const PasswordInput: ForwardRefExoticComponent<Props$h & RefAttributes<H
 /**
  * Popoverが閉じられる理由を定義する型
  */
-type CloseReason = 'outside-click' | 'escape-key-down';
+type CloseReason = 'outside-click' | 'escape-key-down' | 'modal-open';
 /**
  * Popoverのクローズイベントの型定義
  */
@@ -572,10 +668,12 @@ type Props$d = {
     isChecked?: boolean;
     /** 無効状態にするか */
     isDisabled?: boolean;
+    /** ラジオボタンのサイズ */
+    size?: 'medium' | 'large';
     /** 状態変化時のハンドラー。isDisabled=true の場合は呼ばれない */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Radio({ name, value, id, label, isChecked, isDisabled, onChange }: Props$d): react.JSX.Element;
+declare function Radio({ name, value, id, label, isChecked, isDisabled, size, onChange, }: Props$d): react.JSX.Element;
 
 type Props$c = {
     /** サイズ */
@@ -710,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;
     /** レイアウトタイプ */
@@ -797,11 +929,16 @@ type TextAreaBaseProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'clas
     value: string;
     height?: CSSProperties['height'];
     isError?: boolean;
+} & ({
+    variant?: 'outline';
     /**
      * @deprecated 外部から className を渡してスタイルを上書きすることは非推奨です。
      */
     className?: string;
-};
+} | {
+    variant: 'text';
+    className?: never;
+});
 type AutoHeightUnion = {
     autoHeight: true;
     maxHeight?: CSSProperties['maxHeight'];
@@ -918,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

@@ -2,18 +2,35 @@ import * as react from 'react';
 import react__default, { ReactNode, ElementType, PropsWithChildren, ComponentPropsWithoutRef, CSSProperties, ChangeEvent, HTMLAttributes, ButtonHTMLAttributes, ReactElement, MouseEvent, MutableRefObject, RefObject, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, TextareaHTMLAttributes } from 'react';
 import * as _zenkigen_inc_component_icons from '@zenkigen-inc/component-icons';
 import { IconName } from '@zenkigen-inc/component-icons';
-import { iconColors, tagLightColors } from '@zenkigen-inc/component-theme';
 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 を渡す。 */
@@ -26,7 +43,7 @@ declare namespace Breadcrumb {
     }) => react.JSX.Element;
 }
 
-type Size$3 = 'small' | 'medium' | 'large';
+type Size$3 = 'small' | 'medium' | 'large' | 'x-large';
 type Variant$1 = 'fill' | 'fillDanger' | 'outline' | 'text';
 type JustifyContent = 'start' | 'center';
 type ElementAs = ElementType;
@@ -66,6 +83,8 @@ type Props$w = {
     isChecked?: boolean;
     /** 色バリエーション。default: インタラクティブ色 / gray: グレー系 / error: エラー色 */
     color?: 'default' | 'gray' | 'error';
+    /** サイズバリエーション。medium: box 20px / large: box 24px */
+    size?: 'medium' | 'large';
     /** インデターミネイト表示を行うか（表示時は isChecked も true を推奨） */
     isIndeterminate?: boolean;
     /** 無効状態にするか */
@@ -75,7 +94,88 @@ type Props$w = {
     /** 状態変化時のハンドラー。isDisabled=true の場合は呼ばれない */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$w): react.JSX.Element;
+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 のエラーメッセージを表示するコンポーネントのプロパティ
@@ -330,11 +430,10 @@ type TailwindColorToken = `${TailwindColorName}-${TailwindColorShade}` | 'transp
 type ColorToken = UserColorToken | TextColorToken | LinkColorToken | BackgroundColorToken | BorderColorToken | IconColorToken | InteractiveColorToken | FieldColorToken | FocusColorToken | HoverColorToken | ActiveColorToken | SelectedColorToken | DisabledColorToken | SupportColorToken | BaseColorToken | TailwindColorToken;
 
 type Size$1 = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
-type Color = keyof typeof iconColors;
 type Props$q = {
     name: IconName;
     size?: Size$1;
-    color?: Color;
+    color?: ColorToken;
     accentColor?: ColorToken;
     isDisabled?: boolean;
     className?: string;
@@ -356,6 +455,8 @@ type Props$p = {
     isNoPadding?: boolean;
     /** ボタンのバリアント */
     variant?: Variant;
+    /** アイコンのカラー */
+    iconColor?: ColorToken;
     /** アイコンのアクセントカラー */
     iconAccentColor?: ColorToken;
 } & (({
@@ -365,7 +466,7 @@ type Props$p = {
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'className'>) | ({
     isAnchor?: false;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'className'>));
-declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, iconAccentColor, ...props }: Props$p): react.JSX.Element;
+declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, iconColor, iconAccentColor, ...props }: Props$p): react.JSX.Element;
 
 type Props$o = {
     /** インジケーターのサイズ。small=16px / medium=32px / large=64px */
@@ -456,14 +557,9 @@ 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;
     onClickClearButton?: () => void;
@@ -485,7 +581,7 @@ declare const PasswordInput: ForwardRefExoticComponent<Props$h & RefAttributes<H
 /**
  * Popoverが閉じられる理由を定義する型
  */
-type CloseReason = 'outside-click' | 'escape-key-down';
+type CloseReason = 'outside-click' | 'escape-key-down' | 'modal-open';
 /**
  * Popoverのクローズイベントの型定義
  */
@@ -572,10 +668,12 @@ type Props$d = {
     isChecked?: boolean;
     /** 無効状態にするか */
     isDisabled?: boolean;
+    /** ラジオボタンのサイズ */
+    size?: 'medium' | 'large';
     /** 状態変化時のハンドラー。isDisabled=true の場合は呼ばれない */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Radio({ name, value, id, label, isChecked, isDisabled, onChange }: Props$d): react.JSX.Element;
+declare function Radio({ name, value, id, label, isChecked, isDisabled, size, onChange, }: Props$d): react.JSX.Element;
 
 type Props$c = {
     /** サイズ */
@@ -710,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;
     /** レイアウトタイプ */
@@ -797,11 +929,16 @@ type TextAreaBaseProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'clas
     value: string;
     height?: CSSProperties['height'];
     isError?: boolean;
+} & ({
+    variant?: 'outline';
     /**
      * @deprecated 外部から className を渡してスタイルを上書きすることは非推奨です。
      */
     className?: string;
-};
+} | {
+    variant: 'text';
+    className?: never;
+});
 type AutoHeightUnion = {
     autoHeight: true;
     maxHeight?: CSSProperties['maxHeight'];
@@ -918,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 };