@zenkigen-inc/component-ui 1.21.1 → 1.22.0

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';
@@ -516,6 +516,8 @@ type Props$k = {
     state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
     /** コンポーネントの縦サイズとパディングを制御する。 */
     size?: 'small' | 'medium';
+    /** 枠線の有無を切り替える。outline は state に応じた 1px の枠線を表示する。 */
+    variant?: 'default' | 'outline';
     /** 通知に表示するメッセージ本体。 */
     children?: ReactNode;
 } & ({
@@ -527,7 +529,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 +683,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 +836,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,6 +1051,74 @@ 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 = {
@@ -1061,4 +1196,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';
@@ -516,6 +516,8 @@ type Props$k = {
     state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
     /** コンポーネントの縦サイズとパディングを制御する。 */
     size?: 'small' | 'medium';
+    /** 枠線の有無を切り替える。outline は state に応じた 1px の枠線を表示する。 */
+    variant?: 'default' | 'outline';
     /** 通知に表示するメッセージ本体。 */
     children?: ReactNode;
 } & ({
@@ -527,7 +529,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 +683,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 +836,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,6 +1051,74 @@ 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 = {
@@ -1061,4 +1196,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 };