@zenkigen-inc/component-ui 1.18.1 → 1.18.3

package/dist/index.d.mts

@@ -1,23 +1,29 @@
 import * as react from 'react';
-import react__default, { PropsWithChildren, ElementType, ComponentPropsWithoutRef, CSSProperties, ReactNode, ChangeEvent, MouseEvent, MutableRefObject, ReactElement, RefObject, HTMLAttributes, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, ButtonHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import react__default, { ReactNode, ElementType, PropsWithChildren, ComponentPropsWithoutRef, CSSProperties, ChangeEvent, MouseEvent, MutableRefObject, ReactElement, RefObject, HTMLAttributes, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, ButtonHTMLAttributes, 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';
 
-type Props$y = {
+type Props$x = {
     size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
     userId?: number;
     firstName?: string;
     lastName?: string;
     isDisabled?: boolean;
 };
-declare function Avatar({ size, ...props }: Props$y): react.JSX.Element;
+declare function Avatar({ size, ...props }: Props$x): react.JSX.Element;
 
-declare function Breadcrumb({ children }: PropsWithChildren): react.JSX.Element;
+type BreadcrumbProps = {
+    /** パンくずとして表示する要素。通常は複数の Breadcrumb.Item を渡す。 */
+    children: ReactNode;
+};
+declare function Breadcrumb({ children }: BreadcrumbProps): react.JSX.Element;
 declare namespace Breadcrumb {
-    var Item: ({ children }: PropsWithChildren) => react.JSX.Element;
+    var Item: ({ children }: {
+        children: ReactNode;
+    }) => react.JSX.Element;
 }
 
 type Size$3 = 'small' | 'medium' | 'large';
@@ -49,24 +55,36 @@ type PublicProps<T extends ElementAs> = BaseProps$1<T> & {
 };
 declare const Button: <T extends ElementAs = "button">(props: PublicProps<T>) => react.JSX.Element;
 
-type Props$x = {
+type Props$w = {
+    /** フォーム送信用の name 属性 */
     name?: string;
+    /** フォーム送信用の値 */
     value?: string;
+    /** 入力要素の ID。label と関連付ける場合に指定する */
     id?: string;
+    /** チェック状態（制御用） */
     isChecked?: boolean;
+    /** 色バリエーション。default: インタラクティブ色 / gray: グレー系 / error: エラー色 */
     color?: 'default' | 'gray' | 'error';
+    /** インデターミネイト表示を行うか（表示時は isChecked も true を推奨） */
     isIndeterminate?: boolean;
+    /** 無効状態にするか */
     isDisabled?: boolean;
+    /** 右側に表示するラベルテキスト */
     label?: string;
+    /** 状態変化時のハンドラー。isDisabled=true の場合は呼ばれない */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$x): react.JSX.Element;
+declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$w): react.JSX.Element;
 
-type Props$w = {
+/** Dropdown.Item コンポーネントのプロパティ */
+type Props$v = {
+    /** 項目の配色。red は破壊的アクションに用いる。 */
     color?: 'gray' | 'red';
+    /** 項目をクリックしたときに呼び出されるハンドラ。 */
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
-declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props$w>): react.JSX.Element;
+declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props$v>): react.JSX.Element;
 
 type DropdownItemType = {
     id: string;
@@ -77,43 +95,62 @@ type DropdownItemType = {
 type DropdownVerticalPosition = 'top' | 'bottom';
 type DropdownHorizontalAlign = 'left' | 'center' | 'right';
 
-type Props$v = {
+/** Dropdown.Menu コンポーネントのプロパティ */
+type Props$u = {
+    /** メニュー全体の最大高さ。スクロール領域を制限したい場合に設定する。 */
     maxHeight?: CSSProperties['height'];
+    /** true のとき上下の余白を取り除き、完全にカスタムなコンテンツを配置する。 */
     isNoPadding?: boolean;
+    /** トリガーからの垂直方向（上側か下側か）を指定する。 */
     verticalPosition?: DropdownVerticalPosition;
+    /** トリガーに対する水平方向の揃えを決める。 */
     horizontalAlign?: DropdownHorizontalAlign;
 };
-declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props$v>): false | react.JSX.Element;
+declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props$u>): false | react.JSX.Element;
 
-type Props$u = {
+/** Dropdown コンポーネントのプロパティ */
+type Props$t = {
+    /** ボタンサイズを指定し、高さとタイポグラフィを切り替える。 */
     size?: 'x-small' | 'small' | 'medium' | 'large';
+    /** テキストスタイルかアウトラインスタイルかを選択する。 */
     variant?: 'text' | 'outline';
+    /** ネイティブの title 属性経由でトリガーボタンにヒントを付与する。 */
     title?: string;
+    /** true のときトリガーとメニューを無効化し、クリックを受け付けない。 */
     isDisabled?: boolean;
+    /** true のとき組み込みの矢印アイコンを非表示にする。 */
     isArrowHidden?: boolean;
+    /** メニューを別コンテナへポータル描画するためのターゲット要素参照。 */
     portalTargetRef?: MutableRefObject<HTMLElement | null>;
 } & ({
+    /** 自前のReact要素をトリガーとして描画する場合に渡す。 */
     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$u>): react.JSX.Element;
+declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, portalTargetRef, }: PropsWithChildren<Props$t>): react.JSX.Element;
 declare namespace Dropdown {
     var Menu: typeof DropdownMenu;
     var Item: typeof DropdownItem;
 }
 
-type Props$t = {
+type Props$s = {
+    /** 表示・初期化に使用する評価値（0〜5の整数を推奨） */
     value: number;
+    /** 星をクリックして評価を変更できるかを制御する */
     isEditable?: boolean;
+    /** 評価が変更された際に新しい値を通知するコールバック */
     onChangeRating?: (newRating: number) => void | null;
+    /** 星アイコンのサイズ（medium: 16px, large: 24px） */
     size?: 'medium' | 'large';
 };
-declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props$t): react.JSX.Element;
+declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props$s): react.JSX.Element;
 
 type Size$2 = 'small' | 'medium' | 'large';
 declare const ERROR_TYPES: {
@@ -161,13 +198,17 @@ type FileInputRef = {
 declare const FileInput: react.ForwardRefExoticComponent<FileInputProps & react.RefAttributes<FileInputRef>>;
 
 type Level = 1 | 2 | 3 | 4 | 5;
-type Props$s = {
+type Props$r = {
+    /** DOMの見出しレベル（`<h1>`〜`<h5>`）を指定する */
     level: Level;
+    /** 見出しテキストの前に配置するアイコンやアバターなど */
     before?: ReactNode;
+    /** 見出しテキストの後に配置する補助アクションやラベル */
     after?: ReactNode;
+    /** 表示する見出しコンテンツ */
     children?: ReactNode;
 };
-declare function Heading(props: Props$s): react.JSX.Element;
+declare function Heading(props: Props$r): react.JSX.Element;
 
 declare const useOutsideClick: <T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: (event: Event) => void, enabled?: boolean) => void;
 
@@ -238,7 +279,7 @@ type ColorToken = UserColorToken | TextColorToken | LinkColorToken | BackgroundC
 
 type Size$1 = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
 type Color = keyof typeof iconColors;
-type Props$r = {
+type Props$q = {
     name: IconName;
     size?: Size$1;
     color?: Color;
@@ -246,11 +287,11 @@ type Props$r = {
     isDisabled?: boolean;
     className?: string;
 };
-declare const Icon: ({ size, isDisabled, ...props }: Props$r) => react.JSX.Element;
+declare const Icon: ({ size, isDisabled, ...props }: Props$q) => react.JSX.Element;
 
 type Size = 'small' | 'medium' | 'large';
 type Variant = 'outline' | 'text';
-type Props$q = {
+type Props$p = {
     /** 表示するアイコン名 */
     icon: IconName;
     /** ボタンのサイズ */
@@ -270,28 +311,31 @@ type Props$q = {
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'className'>) | ({
     isAnchor?: false;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'className'>));
-declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$q): react.JSX.Element;
+declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$p): react.JSX.Element;
 
-type Props$p = {
+type Props$o = {
+    /** インジケーターのサイズ。small=16px / medium=32px / large=64px */
     size?: 'small' | 'medium' | 'large';
+    /** Loading を重ねる位置。Tailwind の position ユーティリティを切り替えます */
     position?: 'fixed' | 'absolute' | 'static';
+    /** ラッパー要素の高さ。ビュー全体を覆う場合は `100%` や `100vh` を指定します */
     height?: string;
 };
-declare function Loading({ size, position, height }: Props$p): react.JSX.Element;
+declare function Loading({ size, position, height }: Props$o): react.JSX.Element;
 
 declare function ModalBody({ children }: PropsWithChildren): react.JSX.Element;
 
-type Props$o = {
+type Props$n = {
     isNoBorder?: boolean;
 };
-declare function ModalFooter({ children, isNoBorder }: PropsWithChildren<Props$o>): react__default.JSX.Element;
+declare function ModalFooter({ children, isNoBorder }: PropsWithChildren<Props$n>): react__default.JSX.Element;
 
-type Props$n = {
+type Props$m = {
     isNoBorder?: boolean;
 };
-declare function ModalHeader({ children, isNoBorder }: PropsWithChildren<Props$n>): react.JSX.Element;
+declare function ModalHeader({ children, isNoBorder }: PropsWithChildren<Props$m>): react.JSX.Element;
 
-type Props$m = {
+type Props$l = {
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
     maxWidth?: CSSProperties['maxWidth'];
@@ -299,26 +343,32 @@ type Props$m = {
     onClose?: () => void;
     portalTargetRef?: MutableRefObject<HTMLElement | null>;
 };
-declare function Modal({ children, width, height, maxWidth, isOpen, onClose, portalTargetRef, }: PropsWithChildren<Props$m>): react.JSX.Element | null;
+declare function Modal({ children, width, height, maxWidth, isOpen, onClose, portalTargetRef, }: PropsWithChildren<Props$l>): react.JSX.Element | null;
 declare namespace Modal {
     var Body: typeof ModalBody;
     var Header: typeof ModalHeader;
     var Footer: typeof ModalFooter;
 }
 
-type Props$l = {
+type Props$k = {
+    /** 通知の状態を表す。表示する背景色とアイコンが切り替わる。 */
     state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
+    /** コンポーネントの縦サイズとパディングを制御する。 */
     size?: 'small' | 'medium';
+    /** 通知に表示するメッセージ本体。 */
     children?: ReactNode;
 } & ({
+    /** 閉じるボタンを表示しない場合の設定。 */
     showClose?: false;
 } | {
+    /** 閉じるボタンを表示する場合の設定。 */
     showClose: true;
+    /** 閉じるボタンがクリックされたときのハンドラ。 */
     onClickClose: () => void;
 });
-declare function NotificationInline({ state, size, ...props }: Props$l): react.JSX.Element;
+declare function NotificationInline({ state, size, ...props }: Props$k): react.JSX.Element;
 
-type Props$k = {
+type Props$j = {
     /** 現在のページ番号 */
     currentPage: number;
     /** トータルのページ数 */
@@ -328,29 +378,29 @@ type Props$k = {
     /** ボタンが押されたときのイベントハンドラ */
     onClick: (value: number) => void;
 };
-declare function Pagination({ currentPage, totalPage, sideNumPagesToShow, onClick }: Props$k): react.JSX.Element | null;
+declare function Pagination({ currentPage, totalPage, sideNumPagesToShow, onClick }: Props$j): react.JSX.Element | null;
 
-type Props$j = {
-    /** トータル件数 */
+type Props$i = {
+    /** データの総件数。Selectのオプション数と件数表示の上下限計算に用いる。 */
     totalSize: number;
-    /** ページあたり件数 */
+    /** 1ページに表示する件数。pageMax = Math.ceil(totalSize / sizePerPage) の計算に利用する。 */
     sizePerPage: number;
-    /** 現在のページ番号 */
+    /** 現在のページ番号（1起算）。Selectの選択状態と前後ボタンの活性状態を決定する。 */
     currentPage: number;
-    /** 件数表示単位ラベル */
+    /** 件数範囲表示の末尾に付与する単位ラベル（例: 件 / results）。 */
     countLabel?: string;
-    /** ページ表示単位ラベル */
+    /** 「/ pageMax」表示に付与する単位ラベル（例: ページ）。 */
     pageLabel?: string;
-    /** Selectのリストの最大の高さ */
+    /** Selectのドロップダウンリストに設定する最大高さ(px)。 */
     optionListMaxHeight?: number;
-    /** 戻るボタンクリック時のイベントハンドラ */
+    /** 戻るボタンクリック時のイベントハンドラ。呼び出し側でcurrentPageを減算する。 */
     onClickPrevButton: () => void;
-    /** 進むボタンクリック時のイベントハンドラ */
+    /** 進むボタンクリック時のイベントハンドラ。呼び出し側でcurrentPageを加算する。 */
     onClickNextButton: () => void;
-    /** Selectが切り替わった時のイベントハンドラ */
+    /** Selectが別のページに切り替わった時のイベントハンドラ。引数は選択されたページ番号。 */
     onChange: (value: number) => void;
 };
-declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$j): react.JSX.Element;
+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>>;
@@ -371,8 +421,8 @@ type TextInputComponent = ForwardRefExoticComponent<TextInputProps & RefAttribut
 };
 declare const TextInput: TextInputComponent;
 
-type Props$i = Omit<ComponentPropsWithoutRef<typeof TextInput>, 'type' | 'onClickClearButton' | 'className'>;
-declare const PasswordInput: ForwardRefExoticComponent<Props$i & RefAttributes<HTMLInputElement>> & {
+type Props$h = Omit<ComponentPropsWithoutRef<typeof TextInput>, 'type' | 'onClickClearButton' | 'className'>;
+declare const PasswordInput: ForwardRefExoticComponent<Props$h & RefAttributes<HTMLInputElement>> & {
     HelperMessage: ForwardRefExoticComponent<TextInputHelperMessageProps & RefAttributes<HTMLDivElement>>;
     ErrorMessage: ForwardRefExoticComponent<TextInputErrorMessageProps & RefAttributes<HTMLDivElement>>;
     displayName: string;
@@ -406,14 +456,14 @@ type PopoverContextValue = {
     onClose?: (event: PopoverCloseEvent) => void;
 };
 
-type Props$h = {
+type Props$g = {
     isOpen: boolean;
     placement?: PopoverPlacement;
     offset?: number;
     onClose?: (event: PopoverCloseEvent) => void;
     anchorRef?: React.RefObject<HTMLElement | null>;
 };
-declare function Popover({ isOpen, children, placement, offset: offsetValue, onClose, anchorRef, }: PropsWithChildren<Props$h>): react.JSX.Element;
+declare function Popover({ isOpen, children, placement, offset: offsetValue, onClose, anchorRef, }: PropsWithChildren<Props$g>): react.JSX.Element;
 declare namespace Popover {
     var Trigger: react.ForwardRefExoticComponent<{
         children: React.ReactElement;
@@ -437,45 +487,59 @@ declare function PopupBody({ children }: PropsWithChildren): react.JSX.Element;
 
 declare function PopupFooter({ children }: PropsWithChildren): react__default.JSX.Element;
 
-type Props$g = PropsWithChildren<{
+type Props$f = PropsWithChildren<{
     before?: ReactNode;
 }>;
-declare function PopupHeader({ children, before }: Props$g): react.JSX.Element;
+declare function PopupHeader({ children, before }: Props$f): react.JSX.Element;
 
-type Props$f = {
+type Props$e = {
     isOpen?: boolean;
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
     onClose?: () => void;
 };
-declare function Popup({ children, isOpen: controlledIsOpen, width, height, onClose }: PropsWithChildren<Props$f>): react.JSX.Element | null;
+declare function Popup({ children, isOpen: controlledIsOpen, width, height, onClose }: PropsWithChildren<Props$e>): react.JSX.Element | null;
 declare namespace Popup {
     var Body: typeof PopupBody;
     var Header: typeof PopupHeader;
     var Footer: typeof PopupFooter;
 }
 
-type Props$e = {
+type Props$d = {
+    /** フォーム送信用の name 属性。グループ化して単一選択を扱う場合に指定する */
     name?: string;
+    /** フォーム送信用の値 */
     value?: string;
+    /** 入力要素の ID。label と関連付ける場合に指定する */
     id?: string;
+    /** 右側に表示するラベルテキスト */
     label?: string;
+    /** 選択状態（制御用） */
     isChecked?: boolean;
+    /** 無効状態にするか */
     isDisabled?: boolean;
+    /** 状態変化時のハンドラー。isDisabled=true の場合は呼ばれない */
     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$d): react.JSX.Element;
 
-type Props$d = {
+type Props$c = {
+    /** サイズ */
     size?: 'medium' | 'large';
+    /** 入力欄に表示するプレースホルダー */
     placeholder?: string;
+    /** 入力フィールドの幅。CSSの幅指定文字列を渡す */
     width?: string;
+    /** 現在の入力値 */
     value: string;
+    /** 入力値変更時に呼び出されるハンドラ */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /** Enterキーなどでフォーム送信された際のハンドラ */
     onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
+    /** クリアボタン押下時のハンドラ。指定時のみボタンを描画する */
     onClickClearButton?: () => void;
 };
-declare const Search: react.ForwardRefExoticComponent<Props$d & react.RefAttributes<HTMLDivElement>>;
+declare const Search: react.ForwardRefExoticComponent<Props$c & react.RefAttributes<HTMLDivElement>>;
 
 type BaseProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'className'> & {
     value: string;
@@ -519,12 +583,12 @@ type SelectOption = {
     icon?: IconName;
 };
 
-type Props$c = {
+type Props$b = {
     option: SelectOption;
 };
-declare function SelectItem({ option }: Props$c): react.JSX.Element;
+declare function SelectItem({ option }: Props$b): react.JSX.Element;
 
-type Props$b = {
+type Props$a = {
     size?: 'x-small' | 'small' | 'medium' | 'large';
     variant?: 'outline' | 'text';
     width?: CSSProperties['width'];
@@ -538,27 +602,36 @@ type Props$b = {
     isOptionSelected?: boolean;
     onChange?: (option: SelectOption | null) => void;
 };
-declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, 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$a>): react.JSX.Element;
 declare namespace Select {
     var Option: typeof SelectItem;
 }
 
 type SortOrder = 'ascend' | 'descend' | null;
 
-type Props$a = {
+type Props$9 = {
+    /** ボタンとドロップダウンの高さ・タイポグラフィを切り替えるサイズ。 */
     size?: 'x-small' | 'small' | 'medium' | 'large';
+    /** スタイルバリエーション。 */
     variant?: 'outline' | 'text';
+    /** コンポーネント全体の幅。省略時は内容幅に合わせる。 */
     width?: CSSProperties['width'];
+    /** トリガーボタンに表示する列名。 */
     label: string;
+    /** 現在の並び替え方向。外部状態で `'ascend' | 'descend' | null` を制御する。 */
     sortOrder: SortOrder;
+    /** true の場合はボタンやリストの操作を無効化する。 */
     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;
+declare function SelectSort({ size, variant, width, label, sortOrder, isDisabled, isSortKey, onChange, onClickDeselect, }: Props$9): react.JSX.Element;
 
-type Props$9 = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'type' | 'disabled' | 'onClick' | 'aria-disabled' | 'aria-label'> & {
+type Props$8 = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'type' | 'disabled' | 'onClick' | 'aria-disabled' | 'aria-label'> & {
     size?: 'x-small' | 'small' | 'medium' | 'large';
     width?: CSSProperties['width'];
     label: string;
@@ -567,14 +640,14 @@ type Props$9 = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'type
     'aria-label': string;
     onClick?: () => void;
 };
-declare function SortButton({ size, width, label, sortOrder, isDisabled, onClick, 'aria-label': ariaLabel, ...rest }: Props$9): react.JSX.Element;
+declare function SortButton({ size, width, label, sortOrder, isDisabled, onClick, 'aria-label': ariaLabel, ...rest }: Props$8): react.JSX.Element;
 
-type Props$8 = {
+type Props$7 = {
     children?: ReactNode;
     /** レイアウトタイプ */
     layout?: 'auto' | 'equal';
 };
-declare function Tab({ children, layout }: Props$8): react.JSX.Element;
+declare function Tab({ children, layout }: Props$7): react.JSX.Element;
 declare namespace Tab {
     var Item: ({ isSelected, isDisabled, icon, ...props }: {
         id: string;
@@ -586,7 +659,7 @@ declare namespace Tab {
     }) => react.JSX.Element;
 }
 
-type Props$7 = {
+type Props$6 = {
     id: string;
     isSelected?: boolean;
     isDisabled?: boolean;
@@ -594,29 +667,29 @@ type Props$7 = {
     children?: ReactNode;
     onClick: (id: string) => void;
 };
-declare const TabItem: ({ isSelected, isDisabled, icon, ...props }: Props$7) => react.JSX.Element;
+declare const TabItem: ({ isSelected, isDisabled, icon, ...props }: Props$6) => react.JSX.Element;
 
-type Props$6 = {
+type Props$5 = {
     children?: ReactNode;
     className?: string;
     isHeader?: boolean;
 };
-declare function TableCell({ children, className, isHeader }: Props$6): react.JSX.Element;
+declare function TableCell({ children, className, isHeader }: Props$5): react.JSX.Element;
 
-type Props$5 = {
+type Props$4 = {
     children?: ReactNode;
     isHoverBackgroundVisible?: boolean;
 };
-declare function TableRow({ children, isHoverBackgroundVisible }: Props$5): react.JSX.Element;
+declare function TableRow({ children, isHoverBackgroundVisible }: Props$4): react.JSX.Element;
 
-type Props$4 = {
+type Props$3 = {
     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$4>): react.JSX.Element;
+declare function Table({ width, templateRows, templateColumns, autoColumns, autoRows, children, }: PropsWithChildren<Props$3>): react.JSX.Element;
 declare namespace Table {
     var Row: typeof TableRow;
     var Cell: typeof TableCell;
@@ -625,21 +698,31 @@ declare namespace Table {
 type TagColor = keyof typeof tagLightColors;
 type ColorVariant = 'normal' | 'light';
 
-type Props$3 = {
+type Props$2 = {
+    /** 削除イベントで使用するタグの一意なID。 */
     id: string;
+    /** タグに表示する1行のテキスト。 */
     children: string;
+    /** `tagColors`/`tagLightColors` で定義されたカラートークンのキー。 */
     color: TagColor;
+    /** `'normal'` は濃色、`'light'` は淡色のスタイルを適用する。 */
     variant?: ColorVariant;
 } & ({
+    /** 削除ボタンを表示してタグを編集可能にする。 */
     isEditable: true;
+    /** 削除ボタン押下時にタグのIDを受け取るハンドラ。 */
     onDelete: (id: string) => void;
+    /** 編集可能なタグは `medium` のみサポートする。 */
     size?: 'medium';
 } | {
+    /** 標準表示のため `isEditable` は指定しない。 */
     isEditable?: undefined;
+    /** 編集不可のタグでは `onDelete` を受け付けない。 */
     onDelete?: never;
+    /** 標準表示時に選択可能なサイズ。 */
     size?: 'x-small' | 'small' | 'medium';
 });
-declare function Tag({ id, children, color, variant, size, isEditable, onDelete }: Props$3): react.JSX.Element;
+declare function Tag({ id, children, color, variant, size, isEditable, onDelete }: Props$2): react.JSX.Element;
 
 type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> & {
     size?: 'medium' | 'large';
@@ -674,18 +757,26 @@ declare const TextArea: TextAreaComponent;
 
 type ToastState = 'success' | 'error' | 'warning' | 'information';
 
-type Props$2 = {
+type Props$1 = {
+    /** 表示するメッセージの状態（色・アイコンを切り替えます） */
     state?: ToastState;
+    /** トースト全体の幅。数値・文字列いずれも指定可能 */
     width?: CSSProperties['width'];
+    /** true で 5 秒後に自動で閉じる */
     isAutoClose?: boolean;
+    /** true でフェードイン/アウトのアニメーションを有効化 */
     isAnimation?: boolean;
+    /** 表示する本文 */
     children?: ReactNode;
+    /** クローズボタンや自動クローズ完了時に呼び出されるコールバック */
     onClickClose: () => void;
 };
-declare function Toast({ state, width, isAutoClose, isAnimation, children, onClickClose, }: Props$2): react.JSX.Element;
+declare function Toast({ state, width, isAutoClose, isAnimation, children, onClickClose, }: Props$1): react.JSX.Element;
 
 type AddToastArgs = {
+    /** 表示する本文 */
     message: string;
+    /** 表示ステート */
     state: ToastState;
 };
 type ToastProviderProps = {
@@ -695,30 +786,50 @@ type ToastProviderProps = {
 declare const ToastProvider: ({ children }: PropsWithChildren) => react.JSX.Element;
 declare const useToast: () => ToastProviderProps;
 
-type Props$1 = {
+/** Toggle コンポーネントの公開 Props */
+type Props = {
+    /** `label` と関連付けるための input 要素の id/name */
     id: string;
+    /** トラックとインジケーターのサイズを決定する */
     size: 'small' | 'medium' | 'large';
+    /** 現在の ON/OFF 状態（制御コンポーネント） */
     isChecked: boolean;
+    /** ON/OFF の切り替え時に呼び出されるハンドラー */
     onChange: () => void;
+    /** トグル横に表示するラベル。文字列以外の ReactNode も可 */
     label?: ReactNode;
+    /** ラベル配置を右または左から選択する */
     labelPosition?: 'left' | 'right';
+    /** 無効状態の制御。true の場合は操作不可となる */
     isDisabled?: boolean;
 };
-declare function Toggle({ id, size, isChecked, onChange, label, labelPosition, isDisabled, }: Props$1): react.JSX.Element;
+declare function Toggle({ id, size, isChecked, onChange, label, labelPosition, isDisabled, }: Props): react.JSX.Element;
 
 type TooltipSize = 'small' | 'medium';
 type TooltipVerticalPosition = 'top' | 'bottom';
 type TooltipHorizontalAlign = 'left' | 'center' | 'right';
 
-type Props = {
+/**
+ * Tooltipコンポーネントに渡すProps。
+ */
+type TooltipProps = {
+    /** Tooltipを表示させるトリガー要素。hover対象となる。 */
+    children: ReactNode;
+    /** Tooltip内に表示する内容。テキストに限らず複数行の要素を渡せる。 */
     content: ReactNode;
+    /** Tooltipのタイポグラフィとパディングを切り替えるサイズ。 */
     size?: TooltipSize;
+    /** Tooltip本体の最大幅。未指定時は内容に合わせて伸縮する。 */
     maxWidth?: CSSProperties['maxWidth'];
+    /** トリガーに対してTooltipを上下どちらに配置するか。 */
     verticalPosition?: TooltipVerticalPosition;
+    /** 水平方向の揃え位置。左右端または中央に合わせる。 */
     horizontalAlign?: TooltipHorizontalAlign;
+    /** trueの場合、hoverしてもTooltipを表示しない。 */
     isDisabledHover?: boolean;
+    /** Tooltipを別DOMツリー（例: document.body）に描画したい場合のポータル先。 */
     portalTarget?: HTMLElement;
 };
-declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: PropsWithChildren<Props>): react.JSX.Element;
+declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: TooltipProps): react.JSX.Element;
 
 export { Avatar, Breadcrumb, Button, Checkbox, type ColorVariant, 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 };