@zenkigen-inc/component-ui 1.21.1 → 1.23.1

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 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 react__default, { ReactNode, ElementType, PropsWithChildren, ComponentPropsWithoutRef, CSSProperties, ChangeEvent, HTMLAttributes, ButtonHTMLAttributes, ReactElement, MouseEvent, MutableRefObject, RefObject, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, AriaAttributes, TextareaHTMLAttributes } from 'react';
 import * as _zenkigen_inc_component_icons from '@zenkigen-inc/component-icons';
 import { IconName } from '@zenkigen-inc/component-icons';
 import { tokens } from '@zenkigen-inc/component-config';
@@ -183,6 +183,8 @@ declare const Combobox: typeof ComboboxBase & {
     displayName: string;
 };
 
+type DatePickerSize = 'small' | 'medium' | 'large' | 'x-large';
+
 /**
  * DatePicker のエラーメッセージを表示するコンポーネントのプロパティ
  *
@@ -220,8 +222,15 @@ type DatePickerProps = DatePickerButtonProps & {
     maxDate?: Date;
     /** 未選択時に表示されるプレースホルダーテキスト @default '日付を選択' */
     placeholder?: string;
-    /** トリガーボタンのサイズ @default 'medium' */
-    size?: 'small' | 'medium' | 'large';
+    /**
+     * トリガーボタンのサイズ。`'x-large'` はカレンダーも拡大される（342×437px）
+     *
+     * `'x-large'` はモバイル向け。カレンダーがスクロールしないため、ビューポート幅 358px 以上、
+     * かつトリガーの上下いずれかに 445px 以上の余白が確保できるレイアウトでのみ使用すること。
+     * 満たせない場合はフッターが画面外に出て操作できなくなるため `'large'` 以下を選ぶ。
+     * @default 'medium'
+     */
+    size?: DatePickerSize;
     /** 日付変換に使用するタイムゾーン。選択された日付は指定タイムゾーンの 00:00:00 として返される @default 'Asia/Tokyo' */
     timeZone?: DatePickerTimeZone;
     /** Compound Component（ErrorMessage 等） */
@@ -516,6 +525,8 @@ type Props$k = {
     state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
     /** コンポーネントの縦サイズとパディングを制御する。 */
     size?: 'small' | 'medium';
+    /** 枠線の有無を切り替える。outline は state に応じた 1px の枠線を表示する。 */
+    variant?: 'default' | 'outline';
     /** 通知に表示するメッセージ本体。 */
     children?: ReactNode;
 } & ({
@@ -527,7 +538,7 @@ type Props$k = {
     /** 閉じるボタンがクリックされたときのハンドラ。 */
     onClickClose: () => void;
 });
-declare function NotificationInline({ state, size, ...props }: Props$k): react.JSX.Element;
+declare function NotificationInline({ state, size, variant, ...props }: Props$k): react.JSX.Element;
 
 type Props$j = {
     /** 現在のページ番号 */
@@ -681,6 +692,67 @@ type Props$d = {
 };
 declare function Radio({ name, value, id, label, isChecked, isDisabled, size, onChange, }: Props$d): react.JSX.Element;
 
+type RadioCardErrorMessageProps = {
+    children: ReactNode;
+    /** エラーメッセージ要素の id。未指定なら RadioCard が自動採番して注入する */
+    id?: string;
+};
+declare function RadioCardErrorMessage({ children, id }: RadioCardErrorMessageProps): react.JSX.Element | null;
+declare namespace RadioCardErrorMessage {
+    var displayName: string;
+}
+
+type RadioCardGroupProps = {
+    children: ReactNode;
+};
+declare function RadioCardGroup({ children }: RadioCardGroupProps): react.JSX.Element;
+declare namespace RadioCardGroup {
+    var displayName: string;
+}
+
+type RadioCardItemProps = {
+    /** このカードの値。グループの value と一致したとき選択状態になる */
+    value: string;
+    /** 主ラベル */
+    label: string;
+    /** 補足説明（ラベルの下に表示） */
+    description?: string;
+    /** このカード個別の無効化（グループの isDisabled と OR） */
+    isDisabled?: boolean;
+    /** input の id。未指定なら自動生成 */
+    id?: string;
+};
+declare function RadioCardItem({ value, label, description, isDisabled: itemDisabled, id }: RadioCardItemProps): react.JSX.Element;
+declare namespace RadioCardItem {
+    var displayName: string;
+}
+
+type RadioCardProps = {
+    /** RadioCard.Group と任意で RadioCard.ErrorMessage */
+    children: ReactNode;
+    /** 選択されている値（controlled） */
+    value: string;
+    /** 選択変更時のハンドラー */
+    onChange: (value: string) => void;
+    /** input の name。未指定なら自動生成 */
+    name?: string;
+    /** グループ全体を無効化するか */
+    isDisabled?: boolean;
+    /** グループ全体をエラー状態にするか */
+    isError?: boolean;
+    /** radiogroup の aria-label（推奨） */
+    'aria-label'?: string;
+    /** radiogroup の aria-labelledby */
+    'aria-labelledby'?: string;
+};
+declare function RadioCardRoot({ children, value, onChange, name, isDisabled, isError, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: RadioCardProps): react.JSX.Element;
+declare const RadioCard: typeof RadioCardRoot & {
+    Group: typeof RadioCardGroup;
+    Item: typeof RadioCardItem;
+    ErrorMessage: typeof RadioCardErrorMessage;
+    displayName: string;
+};
+
 type Props$c = {
     /** サイズ */
     size?: 'medium' | 'large';
@@ -773,8 +845,12 @@ type Props$a = {
     onChange?: (option: SelectOption | null) => void;
     /** ドロップダウンリストの幅をトリガーボタンの幅に合わせる */
     matchListToTrigger?: boolean;
+    /** トリガーボタンに設定する aria-label。TimePicker 等のコンポジットからラベルを付与するために使用する */
+    'aria-label'?: AriaAttributes['aria-label'];
+    /** トリガーボタンに設定する aria-describedby。エラーメッセージ等と関連付けるために使用する */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
 };
-declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, matchListToTrigger, }: PropsWithChildren<Props$a>): react.JSX.Element;
+declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, matchListToTrigger, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, }: PropsWithChildren<Props$a>): react.JSX.Element;
 declare namespace Select {
     var Option: typeof SelectItem;
 }
@@ -984,36 +1060,118 @@ type TextAreaComponent = ForwardRefExoticComponent<TextAreaProps & RefAttributes
 };
 declare const TextArea: TextAreaComponent;
 
+/** TimePicker（および内部の Select）のサイズ */
+type TimePickerSize = 'x-small' | 'small' | 'medium' | 'large';
+
+/**
+ * TimePicker のエラーメッセージを表示するコンポーネントのプロパティ
+ *
+ * `isError={true}` の場合にのみレンダリングされる。
+ * `className` プロパティは除外されており、内部スタイルが適用される。
+ */
+type TimePickerErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const TimePickerErrorMessage: react.ForwardRefExoticComponent<TimePickerErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * TimePicker のユーティリティ関数・型
+ *
+ * 時刻の候補生成（時 / 分）と、`{ hour, minute }` 構造体 ⇄ `"HH:mm"` 文字列の相互変換を行う。
+ * min/max による範囲制限は「範囲外の候補を生成リストから除外（非表示）」する方針で実装している。
+ */
+
+/** TimePicker の value 型。両方 `null` の場合は未入力を表す */
+type TimeValue = {
+    hour: number | null;
+    minute: number | null;
+};
+/** 分候補の刻み。すべて 60 の約数で等間隔に生成できる値のみを許可する */
+type MinuteStep = 1 | 5 | 10 | 15 | 30;
+/**
+ * `"HH:mm"` 文字列を `{ hour, minute }` へ変換する。
+ * 形式不正・範囲外（0-23 時 / 0-59 分の範囲外）の場合は `null` を返す。
+ * @example parseTime('09:30') → { hour: 9, minute: 30 }
+ */
+declare const parseTime: (time: string) => {
+    hour: number;
+    minute: number;
+} | null;
+/**
+ * `{ hour, minute }` を `"HH:mm"` 文字列へ変換する。
+ * 時・分のいずれかが `null`（＝未入力）の場合は `null` を返す。
+ * @example formatTime({ hour: 9, minute: 30 }) → '09:30'
+ */
+declare const formatTime: (value: TimeValue) => string | null;
+
+type TimePickerProps = {
+    /** 選択時刻。`hour`・`minute` の両方が `null` の場合は未入力を表す */
+    value: TimeValue;
+    /** 時刻が変更されたときに呼び出されるコールバック関数。各 Select の変更ごとに新しい値を返す */
+    onChange: (value: TimeValue) => void;
+    /** コンポーネントのサイズ。内部の `Select` の size に 1:1 でマッピングされる @default 'medium' */
+    size?: TimePickerSize;
+    /** 分候補の刻み（60 の約数） @default 1 */
+    minuteStep?: MinuteStep;
+    /** 選択可能な最小時刻（`"HH:mm"`・inclusive）。範囲外の候補は非表示になる */
+    minTime?: string;
+    /** 選択可能な最大時刻（`"HH:mm"`・inclusive）。範囲外の候補は非表示になる */
+    maxTime?: string;
+    /** 無効状態かどうか @default false */
+    isDisabled?: boolean;
+    /** エラー状態かどうか。`true` の場合、両方の Select がエラー表示になる @default false */
+    isError?: boolean;
+    /** Compound Component（`TimePicker.ErrorMessage`） */
+    children?: ReactNode;
+};
+type TimePickerComponent = ((props: TimePickerProps) => ReactElement) & {
+    ErrorMessage: typeof TimePickerErrorMessage;
+    displayName?: string;
+};
+declare const TimePicker: TimePickerComponent;
+
 type ToastState = 'success' | 'error' | 'warning' | 'information';
 
 type Props$1 = {
-    /** 表示するメッセージの状態（色・アイコンを切り替えます） */
+    /** トーストの状態を表す。表示するアイコンとタイトルの文字色が切り替わる。 */
     state?: ToastState;
-    /** トースト全体の幅。数値・文字列いずれも指定可能 */
+    /** トースト全体の幅。数値・文字列いずれも指定できる。 */
     width?: CSSProperties['width'];
-    /** true で 5 秒後に自動で閉じる */
+    /** true のとき 5 秒後に自動で閉じ、onClickClose を呼ぶ。既定は false（ToastProvider 経由のトーストには既定で true が渡される）。 */
     isAutoClose?: boolean;
-    /** true でフェードイン/アウトのアニメーションを有効化 */
+    /** true のときフェードイン / フェードアウトのアニメーションを有効にする。 */
     isAnimation?: boolean;
-    /** 表示する本文 */
+    /** true のとき閉じるボタンを表示する。isAutoClose が false のときは指定に関わらず必ず表示される。 */
+    hasCloseButton?: boolean;
+    /** タイトルの下に表示する補足テキスト。 */
+    description?: ReactNode;
+    /** タイトルとして表示する本文。 */
     children?: ReactNode;
-    /** クローズボタンや自動クローズ完了時に呼び出されるコールバック */
+    /** 閉じるボタン押下時および自動クローズ完了時に呼ばれる、トースト終了の通知コールバック。 */
     onClickClose: () => void;
 };
-declare function Toast({ state, width, isAutoClose, isAnimation, children, onClickClose, }: Props$1): react.JSX.Element;
+declare function Toast({ state, width, isAutoClose, isAnimation, hasCloseButton, description, children, onClickClose, }: Props$1): react.JSX.Element;
 
 type AddToastArgs = {
-    /** 表示する本文 */
+    /** タイトルとして表示する本文 */
     message: string;
     /** 表示ステート */
     state: ToastState;
+    /** タイトルの下に表示する補足テキスト */
+    description?: ReactNode;
+    /** 閉じるボタンを表示するかどうか。ToastProvider の既定値を上書きする */
+    hasCloseButton?: boolean;
+    /** 5 秒後に自動で閉じるかどうか。既定は true */
+    isAutoClose?: boolean;
 };
-type ToastProviderProps = {
+type ToastContextValue = {
     addToast: (args: AddToastArgs) => void;
     removeToast: (id: number) => void;
 };
-declare const ToastProvider: ({ children }: PropsWithChildren) => react.JSX.Element;
-declare const useToast: () => ToastProviderProps;
+type ToastProviderProps = PropsWithChildren<{
+    /** このプロバイダー配下で追加されるトーストの、閉じるボタン表示の既定値 */
+    hasCloseButton?: boolean;
+}>;
+declare const ToastProvider: ({ children, hasCloseButton }: ToastProviderProps) => react.JSX.Element;
+declare const useToast: () => ToastContextValue;
 
 /** Toggle コンポーネントの公開 Props */
 type Props = {
@@ -1061,4 +1219,4 @@ type TooltipProps = {
 };
 declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: TooltipProps): react.JSX.Element;
 
-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 };
+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, type MinuteStep, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, Popover, PopoverContent, type PopoverContextValue, type PopoverPlacement, PopoverTrigger, Popup, Radio, RadioCard, type RadioCardErrorMessageProps, type RadioCardGroupProps, type RadioCardItemProps, type RadioCardProps, 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, TimePicker, type TimePickerProps, type TimeValue, Toast, ToastProvider, Toggle, Tooltip, type UseRovingFocusProps, type UseRovingFocusReturn, formatTime, parseTime, useOutsideClick, useRovingFocus, useToast };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 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 react__default, { ReactNode, ElementType, PropsWithChildren, ComponentPropsWithoutRef, CSSProperties, ChangeEvent, HTMLAttributes, ButtonHTMLAttributes, ReactElement, MouseEvent, MutableRefObject, RefObject, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, AriaAttributes, TextareaHTMLAttributes } from 'react';
 import * as _zenkigen_inc_component_icons from '@zenkigen-inc/component-icons';
 import { IconName } from '@zenkigen-inc/component-icons';
 import { tokens } from '@zenkigen-inc/component-config';
@@ -183,6 +183,8 @@ declare const Combobox: typeof ComboboxBase & {
     displayName: string;
 };
 
+type DatePickerSize = 'small' | 'medium' | 'large' | 'x-large';
+
 /**
  * DatePicker のエラーメッセージを表示するコンポーネントのプロパティ
  *
@@ -220,8 +222,15 @@ type DatePickerProps = DatePickerButtonProps & {
     maxDate?: Date;
     /** 未選択時に表示されるプレースホルダーテキスト @default '日付を選択' */
     placeholder?: string;
-    /** トリガーボタンのサイズ @default 'medium' */
-    size?: 'small' | 'medium' | 'large';
+    /**
+     * トリガーボタンのサイズ。`'x-large'` はカレンダーも拡大される（342×437px）
+     *
+     * `'x-large'` はモバイル向け。カレンダーがスクロールしないため、ビューポート幅 358px 以上、
+     * かつトリガーの上下いずれかに 445px 以上の余白が確保できるレイアウトでのみ使用すること。
+     * 満たせない場合はフッターが画面外に出て操作できなくなるため `'large'` 以下を選ぶ。
+     * @default 'medium'
+     */
+    size?: DatePickerSize;
     /** 日付変換に使用するタイムゾーン。選択された日付は指定タイムゾーンの 00:00:00 として返される @default 'Asia/Tokyo' */
     timeZone?: DatePickerTimeZone;
     /** Compound Component（ErrorMessage 等） */
@@ -516,6 +525,8 @@ type Props$k = {
     state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
     /** コンポーネントの縦サイズとパディングを制御する。 */
     size?: 'small' | 'medium';
+    /** 枠線の有無を切り替える。outline は state に応じた 1px の枠線を表示する。 */
+    variant?: 'default' | 'outline';
     /** 通知に表示するメッセージ本体。 */
     children?: ReactNode;
 } & ({
@@ -527,7 +538,7 @@ type Props$k = {
     /** 閉じるボタンがクリックされたときのハンドラ。 */
     onClickClose: () => void;
 });
-declare function NotificationInline({ state, size, ...props }: Props$k): react.JSX.Element;
+declare function NotificationInline({ state, size, variant, ...props }: Props$k): react.JSX.Element;
 
 type Props$j = {
     /** 現在のページ番号 */
@@ -681,6 +692,67 @@ type Props$d = {
 };
 declare function Radio({ name, value, id, label, isChecked, isDisabled, size, onChange, }: Props$d): react.JSX.Element;
 
+type RadioCardErrorMessageProps = {
+    children: ReactNode;
+    /** エラーメッセージ要素の id。未指定なら RadioCard が自動採番して注入する */
+    id?: string;
+};
+declare function RadioCardErrorMessage({ children, id }: RadioCardErrorMessageProps): react.JSX.Element | null;
+declare namespace RadioCardErrorMessage {
+    var displayName: string;
+}
+
+type RadioCardGroupProps = {
+    children: ReactNode;
+};
+declare function RadioCardGroup({ children }: RadioCardGroupProps): react.JSX.Element;
+declare namespace RadioCardGroup {
+    var displayName: string;
+}
+
+type RadioCardItemProps = {
+    /** このカードの値。グループの value と一致したとき選択状態になる */
+    value: string;
+    /** 主ラベル */
+    label: string;
+    /** 補足説明（ラベルの下に表示） */
+    description?: string;
+    /** このカード個別の無効化（グループの isDisabled と OR） */
+    isDisabled?: boolean;
+    /** input の id。未指定なら自動生成 */
+    id?: string;
+};
+declare function RadioCardItem({ value, label, description, isDisabled: itemDisabled, id }: RadioCardItemProps): react.JSX.Element;
+declare namespace RadioCardItem {
+    var displayName: string;
+}
+
+type RadioCardProps = {
+    /** RadioCard.Group と任意で RadioCard.ErrorMessage */
+    children: ReactNode;
+    /** 選択されている値（controlled） */
+    value: string;
+    /** 選択変更時のハンドラー */
+    onChange: (value: string) => void;
+    /** input の name。未指定なら自動生成 */
+    name?: string;
+    /** グループ全体を無効化するか */
+    isDisabled?: boolean;
+    /** グループ全体をエラー状態にするか */
+    isError?: boolean;
+    /** radiogroup の aria-label（推奨） */
+    'aria-label'?: string;
+    /** radiogroup の aria-labelledby */
+    'aria-labelledby'?: string;
+};
+declare function RadioCardRoot({ children, value, onChange, name, isDisabled, isError, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: RadioCardProps): react.JSX.Element;
+declare const RadioCard: typeof RadioCardRoot & {
+    Group: typeof RadioCardGroup;
+    Item: typeof RadioCardItem;
+    ErrorMessage: typeof RadioCardErrorMessage;
+    displayName: string;
+};
+
 type Props$c = {
     /** サイズ */
     size?: 'medium' | 'large';
@@ -773,8 +845,12 @@ type Props$a = {
     onChange?: (option: SelectOption | null) => void;
     /** ドロップダウンリストの幅をトリガーボタンの幅に合わせる */
     matchListToTrigger?: boolean;
+    /** トリガーボタンに設定する aria-label。TimePicker 等のコンポジットからラベルを付与するために使用する */
+    'aria-label'?: AriaAttributes['aria-label'];
+    /** トリガーボタンに設定する aria-describedby。エラーメッセージ等と関連付けるために使用する */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
 };
-declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, matchListToTrigger, }: PropsWithChildren<Props$a>): react.JSX.Element;
+declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, matchListToTrigger, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, }: PropsWithChildren<Props$a>): react.JSX.Element;
 declare namespace Select {
     var Option: typeof SelectItem;
 }
@@ -984,36 +1060,118 @@ type TextAreaComponent = ForwardRefExoticComponent<TextAreaProps & RefAttributes
 };
 declare const TextArea: TextAreaComponent;
 
+/** TimePicker（および内部の Select）のサイズ */
+type TimePickerSize = 'x-small' | 'small' | 'medium' | 'large';
+
+/**
+ * TimePicker のエラーメッセージを表示するコンポーネントのプロパティ
+ *
+ * `isError={true}` の場合にのみレンダリングされる。
+ * `className` プロパティは除外されており、内部スタイルが適用される。
+ */
+type TimePickerErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const TimePickerErrorMessage: react.ForwardRefExoticComponent<TimePickerErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * TimePicker のユーティリティ関数・型
+ *
+ * 時刻の候補生成（時 / 分）と、`{ hour, minute }` 構造体 ⇄ `"HH:mm"` 文字列の相互変換を行う。
+ * min/max による範囲制限は「範囲外の候補を生成リストから除外（非表示）」する方針で実装している。
+ */
+
+/** TimePicker の value 型。両方 `null` の場合は未入力を表す */
+type TimeValue = {
+    hour: number | null;
+    minute: number | null;
+};
+/** 分候補の刻み。すべて 60 の約数で等間隔に生成できる値のみを許可する */
+type MinuteStep = 1 | 5 | 10 | 15 | 30;
+/**
+ * `"HH:mm"` 文字列を `{ hour, minute }` へ変換する。
+ * 形式不正・範囲外（0-23 時 / 0-59 分の範囲外）の場合は `null` を返す。
+ * @example parseTime('09:30') → { hour: 9, minute: 30 }
+ */
+declare const parseTime: (time: string) => {
+    hour: number;
+    minute: number;
+} | null;
+/**
+ * `{ hour, minute }` を `"HH:mm"` 文字列へ変換する。
+ * 時・分のいずれかが `null`（＝未入力）の場合は `null` を返す。
+ * @example formatTime({ hour: 9, minute: 30 }) → '09:30'
+ */
+declare const formatTime: (value: TimeValue) => string | null;
+
+type TimePickerProps = {
+    /** 選択時刻。`hour`・`minute` の両方が `null` の場合は未入力を表す */
+    value: TimeValue;
+    /** 時刻が変更されたときに呼び出されるコールバック関数。各 Select の変更ごとに新しい値を返す */
+    onChange: (value: TimeValue) => void;
+    /** コンポーネントのサイズ。内部の `Select` の size に 1:1 でマッピングされる @default 'medium' */
+    size?: TimePickerSize;
+    /** 分候補の刻み（60 の約数） @default 1 */
+    minuteStep?: MinuteStep;
+    /** 選択可能な最小時刻（`"HH:mm"`・inclusive）。範囲外の候補は非表示になる */
+    minTime?: string;
+    /** 選択可能な最大時刻（`"HH:mm"`・inclusive）。範囲外の候補は非表示になる */
+    maxTime?: string;
+    /** 無効状態かどうか @default false */
+    isDisabled?: boolean;
+    /** エラー状態かどうか。`true` の場合、両方の Select がエラー表示になる @default false */
+    isError?: boolean;
+    /** Compound Component（`TimePicker.ErrorMessage`） */
+    children?: ReactNode;
+};
+type TimePickerComponent = ((props: TimePickerProps) => ReactElement) & {
+    ErrorMessage: typeof TimePickerErrorMessage;
+    displayName?: string;
+};
+declare const TimePicker: TimePickerComponent;
+
 type ToastState = 'success' | 'error' | 'warning' | 'information';
 
 type Props$1 = {
-    /** 表示するメッセージの状態（色・アイコンを切り替えます） */
+    /** トーストの状態を表す。表示するアイコンとタイトルの文字色が切り替わる。 */
     state?: ToastState;
-    /** トースト全体の幅。数値・文字列いずれも指定可能 */
+    /** トースト全体の幅。数値・文字列いずれも指定できる。 */
     width?: CSSProperties['width'];
-    /** true で 5 秒後に自動で閉じる */
+    /** true のとき 5 秒後に自動で閉じ、onClickClose を呼ぶ。既定は false（ToastProvider 経由のトーストには既定で true が渡される）。 */
     isAutoClose?: boolean;
-    /** true でフェードイン/アウトのアニメーションを有効化 */
+    /** true のときフェードイン / フェードアウトのアニメーションを有効にする。 */
     isAnimation?: boolean;
-    /** 表示する本文 */
+    /** true のとき閉じるボタンを表示する。isAutoClose が false のときは指定に関わらず必ず表示される。 */
+    hasCloseButton?: boolean;
+    /** タイトルの下に表示する補足テキスト。 */
+    description?: ReactNode;
+    /** タイトルとして表示する本文。 */
     children?: ReactNode;
-    /** クローズボタンや自動クローズ完了時に呼び出されるコールバック */
+    /** 閉じるボタン押下時および自動クローズ完了時に呼ばれる、トースト終了の通知コールバック。 */
     onClickClose: () => void;
 };
-declare function Toast({ state, width, isAutoClose, isAnimation, children, onClickClose, }: Props$1): react.JSX.Element;
+declare function Toast({ state, width, isAutoClose, isAnimation, hasCloseButton, description, children, onClickClose, }: Props$1): react.JSX.Element;
 
 type AddToastArgs = {
-    /** 表示する本文 */
+    /** タイトルとして表示する本文 */
     message: string;
     /** 表示ステート */
     state: ToastState;
+    /** タイトルの下に表示する補足テキスト */
+    description?: ReactNode;
+    /** 閉じるボタンを表示するかどうか。ToastProvider の既定値を上書きする */
+    hasCloseButton?: boolean;
+    /** 5 秒後に自動で閉じるかどうか。既定は true */
+    isAutoClose?: boolean;
 };
-type ToastProviderProps = {
+type ToastContextValue = {
     addToast: (args: AddToastArgs) => void;
     removeToast: (id: number) => void;
 };
-declare const ToastProvider: ({ children }: PropsWithChildren) => react.JSX.Element;
-declare const useToast: () => ToastProviderProps;
+type ToastProviderProps = PropsWithChildren<{
+    /** このプロバイダー配下で追加されるトーストの、閉じるボタン表示の既定値 */
+    hasCloseButton?: boolean;
+}>;
+declare const ToastProvider: ({ children, hasCloseButton }: ToastProviderProps) => react.JSX.Element;
+declare const useToast: () => ToastContextValue;
 
 /** Toggle コンポーネントの公開 Props */
 type Props = {
@@ -1061,4 +1219,4 @@ type TooltipProps = {
 };
 declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: TooltipProps): react.JSX.Element;
 
-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 };
+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, type MinuteStep, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, Popover, PopoverContent, type PopoverContextValue, type PopoverPlacement, PopoverTrigger, Popup, Radio, RadioCard, type RadioCardErrorMessageProps, type RadioCardGroupProps, type RadioCardItemProps, type RadioCardProps, 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, TimePicker, type TimePickerProps, type TimeValue, Toast, ToastProvider, Toggle, Tooltip, type UseRovingFocusProps, type UseRovingFocusReturn, formatTime, parseTime, useOutsideClick, useRovingFocus, useToast };