@zenkigen-inc/component-ui 1.21.0 → 1.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import react__default, { ReactNode, ElementType, PropsWithChildren, ComponentPropsWithoutRef, CSSProperties, ChangeEvent, HTMLAttributes, ButtonHTMLAttributes, ReactElement, MouseEvent, MutableRefObject, RefObject, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, TextareaHTMLAttributes } from 'react';
2
+ import react__default, { ReactNode, ElementType, PropsWithChildren, ComponentPropsWithoutRef, CSSProperties, ChangeEvent, HTMLAttributes, ButtonHTMLAttributes, ReactElement, MouseEvent, MutableRefObject, RefObject, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, AriaAttributes, TextareaHTMLAttributes } from 'react';
3
3
  import * as _zenkigen_inc_component_icons from '@zenkigen-inc/component-icons';
4
4
  import { IconName } from '@zenkigen-inc/component-icons';
5
5
  import { tokens } from '@zenkigen-inc/component-config';
@@ -116,6 +116,12 @@ type ComboboxProps = PropsWithChildren<{
116
116
  inputValue: string;
117
117
  /** 入力変更時のコールバック */
118
118
  onInputChange: (value: string) => void;
119
+ /**
120
+ * クリアボタンのクリック時に呼ばれるコールバック。
121
+ * このコールバックを渡したときのみクリアボタンが表示される(TextInput と同一仕様)。
122
+ * 値のクリア(`onChange(null, null)` / `onInputChange('')`)は利用者側で行う。
123
+ */
124
+ onClickClearButton?: () => void;
119
125
  /** popup の開閉状態(任意、controlled) */
120
126
  isOpen?: boolean;
121
127
  /** 開閉変更時のコールバック */
@@ -165,7 +171,7 @@ declare function ComboboxList({ children, maxHeight: maxHeightProp }: ComboboxLi
165
171
  declare function ComboboxLoading(): react.JSX.Element;
166
172
  declare function ComboboxEmpty(): react.JSX.Element;
167
173
 
168
- declare function ComboboxBase({ children, value, onChange, inputValue, onInputChange, isOpen: isOpenProp, onOpenChange, size, variant, placeholder, isError, isDisabled, width, maxWidth, listMaxHeight, matchListToTrigger, }: ComboboxProps): react.JSX.Element;
174
+ declare function ComboboxBase({ children, value, onChange, inputValue, onInputChange, onClickClearButton, isOpen: isOpenProp, onOpenChange, size, variant, placeholder, isError, isDisabled, width, maxWidth, listMaxHeight, matchListToTrigger, }: ComboboxProps): react.JSX.Element;
169
175
  declare const Combobox: typeof ComboboxBase & {
170
176
  Input: typeof ComboboxInput;
171
177
  List: typeof ComboboxList;
@@ -510,6 +516,8 @@ type Props$k = {
510
516
  state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
511
517
  /** コンポーネントの縦サイズとパディングを制御する。 */
512
518
  size?: 'small' | 'medium';
519
+ /** 枠線の有無を切り替える。outline は state に応じた 1px の枠線を表示する。 */
520
+ variant?: 'default' | 'outline';
513
521
  /** 通知に表示するメッセージ本体。 */
514
522
  children?: ReactNode;
515
523
  } & ({
@@ -521,7 +529,7 @@ type Props$k = {
521
529
  /** 閉じるボタンがクリックされたときのハンドラ。 */
522
530
  onClickClose: () => void;
523
531
  });
524
- declare function NotificationInline({ state, size, ...props }: Props$k): react.JSX.Element;
532
+ declare function NotificationInline({ state, size, variant, ...props }: Props$k): react.JSX.Element;
525
533
 
526
534
  type Props$j = {
527
535
  /** 現在のページ番号 */
@@ -675,6 +683,67 @@ type Props$d = {
675
683
  };
676
684
  declare function Radio({ name, value, id, label, isChecked, isDisabled, size, onChange, }: Props$d): react.JSX.Element;
677
685
 
686
+ type RadioCardErrorMessageProps = {
687
+ children: ReactNode;
688
+ /** エラーメッセージ要素の id。未指定なら RadioCard が自動採番して注入する */
689
+ id?: string;
690
+ };
691
+ declare function RadioCardErrorMessage({ children, id }: RadioCardErrorMessageProps): react.JSX.Element | null;
692
+ declare namespace RadioCardErrorMessage {
693
+ var displayName: string;
694
+ }
695
+
696
+ type RadioCardGroupProps = {
697
+ children: ReactNode;
698
+ };
699
+ declare function RadioCardGroup({ children }: RadioCardGroupProps): react.JSX.Element;
700
+ declare namespace RadioCardGroup {
701
+ var displayName: string;
702
+ }
703
+
704
+ type RadioCardItemProps = {
705
+ /** このカードの値。グループの value と一致したとき選択状態になる */
706
+ value: string;
707
+ /** 主ラベル */
708
+ label: string;
709
+ /** 補足説明(ラベルの下に表示) */
710
+ description?: string;
711
+ /** このカード個別の無効化(グループの isDisabled と OR) */
712
+ isDisabled?: boolean;
713
+ /** input の id。未指定なら自動生成 */
714
+ id?: string;
715
+ };
716
+ declare function RadioCardItem({ value, label, description, isDisabled: itemDisabled, id }: RadioCardItemProps): react.JSX.Element;
717
+ declare namespace RadioCardItem {
718
+ var displayName: string;
719
+ }
720
+
721
+ type RadioCardProps = {
722
+ /** RadioCard.Group と任意で RadioCard.ErrorMessage */
723
+ children: ReactNode;
724
+ /** 選択されている値(controlled) */
725
+ value: string;
726
+ /** 選択変更時のハンドラー */
727
+ onChange: (value: string) => void;
728
+ /** input の name。未指定なら自動生成 */
729
+ name?: string;
730
+ /** グループ全体を無効化するか */
731
+ isDisabled?: boolean;
732
+ /** グループ全体をエラー状態にするか */
733
+ isError?: boolean;
734
+ /** radiogroup の aria-label(推奨) */
735
+ 'aria-label'?: string;
736
+ /** radiogroup の aria-labelledby */
737
+ 'aria-labelledby'?: string;
738
+ };
739
+ declare function RadioCardRoot({ children, value, onChange, name, isDisabled, isError, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: RadioCardProps): react.JSX.Element;
740
+ declare const RadioCard: typeof RadioCardRoot & {
741
+ Group: typeof RadioCardGroup;
742
+ Item: typeof RadioCardItem;
743
+ ErrorMessage: typeof RadioCardErrorMessage;
744
+ displayName: string;
745
+ };
746
+
678
747
  type Props$c = {
679
748
  /** サイズ */
680
749
  size?: 'medium' | 'large';
@@ -767,8 +836,12 @@ type Props$a = {
767
836
  onChange?: (option: SelectOption | null) => void;
768
837
  /** ドロップダウンリストの幅をトリガーボタンの幅に合わせる */
769
838
  matchListToTrigger?: boolean;
839
+ /** トリガーボタンに設定する aria-label。TimePicker 等のコンポジットからラベルを付与するために使用する */
840
+ 'aria-label'?: AriaAttributes['aria-label'];
841
+ /** トリガーボタンに設定する aria-describedby。エラーメッセージ等と関連付けるために使用する */
842
+ 'aria-describedby'?: AriaAttributes['aria-describedby'];
770
843
  };
771
- declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, matchListToTrigger, }: PropsWithChildren<Props$a>): react.JSX.Element;
844
+ 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;
772
845
  declare namespace Select {
773
846
  var Option: typeof SelectItem;
774
847
  }
@@ -978,6 +1051,74 @@ type TextAreaComponent = ForwardRefExoticComponent<TextAreaProps & RefAttributes
978
1051
  };
979
1052
  declare const TextArea: TextAreaComponent;
980
1053
 
1054
+ /** TimePicker(および内部の Select)のサイズ */
1055
+ type TimePickerSize = 'x-small' | 'small' | 'medium' | 'large';
1056
+
1057
+ /**
1058
+ * TimePicker のエラーメッセージを表示するコンポーネントのプロパティ
1059
+ *
1060
+ * `isError={true}` の場合にのみレンダリングされる。
1061
+ * `className` プロパティは除外されており、内部スタイルが適用される。
1062
+ */
1063
+ type TimePickerErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
1064
+ declare const TimePickerErrorMessage: react.ForwardRefExoticComponent<TimePickerErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
1065
+
1066
+ /**
1067
+ * TimePicker のユーティリティ関数・型
1068
+ *
1069
+ * 時刻の候補生成(時 / 分)と、`{ hour, minute }` 構造体 ⇄ `"HH:mm"` 文字列の相互変換を行う。
1070
+ * min/max による範囲制限は「範囲外の候補を生成リストから除外(非表示)」する方針で実装している。
1071
+ */
1072
+
1073
+ /** TimePicker の value 型。両方 `null` の場合は未入力を表す */
1074
+ type TimeValue = {
1075
+ hour: number | null;
1076
+ minute: number | null;
1077
+ };
1078
+ /** 分候補の刻み。すべて 60 の約数で等間隔に生成できる値のみを許可する */
1079
+ type MinuteStep = 1 | 5 | 10 | 15 | 30;
1080
+ /**
1081
+ * `"HH:mm"` 文字列を `{ hour, minute }` へ変換する。
1082
+ * 形式不正・範囲外(0-23 時 / 0-59 分の範囲外)の場合は `null` を返す。
1083
+ * @example parseTime('09:30') → { hour: 9, minute: 30 }
1084
+ */
1085
+ declare const parseTime: (time: string) => {
1086
+ hour: number;
1087
+ minute: number;
1088
+ } | null;
1089
+ /**
1090
+ * `{ hour, minute }` を `"HH:mm"` 文字列へ変換する。
1091
+ * 時・分のいずれかが `null`(=未入力)の場合は `null` を返す。
1092
+ * @example formatTime({ hour: 9, minute: 30 }) → '09:30'
1093
+ */
1094
+ declare const formatTime: (value: TimeValue) => string | null;
1095
+
1096
+ type TimePickerProps = {
1097
+ /** 選択時刻。`hour`・`minute` の両方が `null` の場合は未入力を表す */
1098
+ value: TimeValue;
1099
+ /** 時刻が変更されたときに呼び出されるコールバック関数。各 Select の変更ごとに新しい値を返す */
1100
+ onChange: (value: TimeValue) => void;
1101
+ /** コンポーネントのサイズ。内部の `Select` の size に 1:1 でマッピングされる @default 'medium' */
1102
+ size?: TimePickerSize;
1103
+ /** 分候補の刻み(60 の約数) @default 1 */
1104
+ minuteStep?: MinuteStep;
1105
+ /** 選択可能な最小時刻(`"HH:mm"`・inclusive)。範囲外の候補は非表示になる */
1106
+ minTime?: string;
1107
+ /** 選択可能な最大時刻(`"HH:mm"`・inclusive)。範囲外の候補は非表示になる */
1108
+ maxTime?: string;
1109
+ /** 無効状態かどうか @default false */
1110
+ isDisabled?: boolean;
1111
+ /** エラー状態かどうか。`true` の場合、両方の Select がエラー表示になる @default false */
1112
+ isError?: boolean;
1113
+ /** Compound Component(`TimePicker.ErrorMessage`) */
1114
+ children?: ReactNode;
1115
+ };
1116
+ type TimePickerComponent = ((props: TimePickerProps) => ReactElement) & {
1117
+ ErrorMessage: typeof TimePickerErrorMessage;
1118
+ displayName?: string;
1119
+ };
1120
+ declare const TimePicker: TimePickerComponent;
1121
+
981
1122
  type ToastState = 'success' | 'error' | 'warning' | 'information';
982
1123
 
983
1124
  type Props$1 = {
@@ -1055,4 +1196,4 @@ type TooltipProps = {
1055
1196
  };
1056
1197
  declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: TooltipProps): react.JSX.Element;
1057
1198
 
1058
- 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 };
1199
+ 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 CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import react__default, { ReactNode, ElementType, PropsWithChildren, ComponentPropsWithoutRef, CSSProperties, ChangeEvent, HTMLAttributes, ButtonHTMLAttributes, ReactElement, MouseEvent, MutableRefObject, RefObject, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, TextareaHTMLAttributes } from 'react';
2
+ import react__default, { ReactNode, ElementType, PropsWithChildren, ComponentPropsWithoutRef, CSSProperties, ChangeEvent, HTMLAttributes, ButtonHTMLAttributes, ReactElement, MouseEvent, MutableRefObject, RefObject, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, AriaAttributes, TextareaHTMLAttributes } from 'react';
3
3
  import * as _zenkigen_inc_component_icons from '@zenkigen-inc/component-icons';
4
4
  import { IconName } from '@zenkigen-inc/component-icons';
5
5
  import { tokens } from '@zenkigen-inc/component-config';
@@ -116,6 +116,12 @@ type ComboboxProps = PropsWithChildren<{
116
116
  inputValue: string;
117
117
  /** 入力変更時のコールバック */
118
118
  onInputChange: (value: string) => void;
119
+ /**
120
+ * クリアボタンのクリック時に呼ばれるコールバック。
121
+ * このコールバックを渡したときのみクリアボタンが表示される(TextInput と同一仕様)。
122
+ * 値のクリア(`onChange(null, null)` / `onInputChange('')`)は利用者側で行う。
123
+ */
124
+ onClickClearButton?: () => void;
119
125
  /** popup の開閉状態(任意、controlled) */
120
126
  isOpen?: boolean;
121
127
  /** 開閉変更時のコールバック */
@@ -165,7 +171,7 @@ declare function ComboboxList({ children, maxHeight: maxHeightProp }: ComboboxLi
165
171
  declare function ComboboxLoading(): react.JSX.Element;
166
172
  declare function ComboboxEmpty(): react.JSX.Element;
167
173
 
168
- declare function ComboboxBase({ children, value, onChange, inputValue, onInputChange, isOpen: isOpenProp, onOpenChange, size, variant, placeholder, isError, isDisabled, width, maxWidth, listMaxHeight, matchListToTrigger, }: ComboboxProps): react.JSX.Element;
174
+ declare function ComboboxBase({ children, value, onChange, inputValue, onInputChange, onClickClearButton, isOpen: isOpenProp, onOpenChange, size, variant, placeholder, isError, isDisabled, width, maxWidth, listMaxHeight, matchListToTrigger, }: ComboboxProps): react.JSX.Element;
169
175
  declare const Combobox: typeof ComboboxBase & {
170
176
  Input: typeof ComboboxInput;
171
177
  List: typeof ComboboxList;
@@ -510,6 +516,8 @@ type Props$k = {
510
516
  state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
511
517
  /** コンポーネントの縦サイズとパディングを制御する。 */
512
518
  size?: 'small' | 'medium';
519
+ /** 枠線の有無を切り替える。outline は state に応じた 1px の枠線を表示する。 */
520
+ variant?: 'default' | 'outline';
513
521
  /** 通知に表示するメッセージ本体。 */
514
522
  children?: ReactNode;
515
523
  } & ({
@@ -521,7 +529,7 @@ type Props$k = {
521
529
  /** 閉じるボタンがクリックされたときのハンドラ。 */
522
530
  onClickClose: () => void;
523
531
  });
524
- declare function NotificationInline({ state, size, ...props }: Props$k): react.JSX.Element;
532
+ declare function NotificationInline({ state, size, variant, ...props }: Props$k): react.JSX.Element;
525
533
 
526
534
  type Props$j = {
527
535
  /** 現在のページ番号 */
@@ -675,6 +683,67 @@ type Props$d = {
675
683
  };
676
684
  declare function Radio({ name, value, id, label, isChecked, isDisabled, size, onChange, }: Props$d): react.JSX.Element;
677
685
 
686
+ type RadioCardErrorMessageProps = {
687
+ children: ReactNode;
688
+ /** エラーメッセージ要素の id。未指定なら RadioCard が自動採番して注入する */
689
+ id?: string;
690
+ };
691
+ declare function RadioCardErrorMessage({ children, id }: RadioCardErrorMessageProps): react.JSX.Element | null;
692
+ declare namespace RadioCardErrorMessage {
693
+ var displayName: string;
694
+ }
695
+
696
+ type RadioCardGroupProps = {
697
+ children: ReactNode;
698
+ };
699
+ declare function RadioCardGroup({ children }: RadioCardGroupProps): react.JSX.Element;
700
+ declare namespace RadioCardGroup {
701
+ var displayName: string;
702
+ }
703
+
704
+ type RadioCardItemProps = {
705
+ /** このカードの値。グループの value と一致したとき選択状態になる */
706
+ value: string;
707
+ /** 主ラベル */
708
+ label: string;
709
+ /** 補足説明(ラベルの下に表示) */
710
+ description?: string;
711
+ /** このカード個別の無効化(グループの isDisabled と OR) */
712
+ isDisabled?: boolean;
713
+ /** input の id。未指定なら自動生成 */
714
+ id?: string;
715
+ };
716
+ declare function RadioCardItem({ value, label, description, isDisabled: itemDisabled, id }: RadioCardItemProps): react.JSX.Element;
717
+ declare namespace RadioCardItem {
718
+ var displayName: string;
719
+ }
720
+
721
+ type RadioCardProps = {
722
+ /** RadioCard.Group と任意で RadioCard.ErrorMessage */
723
+ children: ReactNode;
724
+ /** 選択されている値(controlled) */
725
+ value: string;
726
+ /** 選択変更時のハンドラー */
727
+ onChange: (value: string) => void;
728
+ /** input の name。未指定なら自動生成 */
729
+ name?: string;
730
+ /** グループ全体を無効化するか */
731
+ isDisabled?: boolean;
732
+ /** グループ全体をエラー状態にするか */
733
+ isError?: boolean;
734
+ /** radiogroup の aria-label(推奨) */
735
+ 'aria-label'?: string;
736
+ /** radiogroup の aria-labelledby */
737
+ 'aria-labelledby'?: string;
738
+ };
739
+ declare function RadioCardRoot({ children, value, onChange, name, isDisabled, isError, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: RadioCardProps): react.JSX.Element;
740
+ declare const RadioCard: typeof RadioCardRoot & {
741
+ Group: typeof RadioCardGroup;
742
+ Item: typeof RadioCardItem;
743
+ ErrorMessage: typeof RadioCardErrorMessage;
744
+ displayName: string;
745
+ };
746
+
678
747
  type Props$c = {
679
748
  /** サイズ */
680
749
  size?: 'medium' | 'large';
@@ -767,8 +836,12 @@ type Props$a = {
767
836
  onChange?: (option: SelectOption | null) => void;
768
837
  /** ドロップダウンリストの幅をトリガーボタンの幅に合わせる */
769
838
  matchListToTrigger?: boolean;
839
+ /** トリガーボタンに設定する aria-label。TimePicker 等のコンポジットからラベルを付与するために使用する */
840
+ 'aria-label'?: AriaAttributes['aria-label'];
841
+ /** トリガーボタンに設定する aria-describedby。エラーメッセージ等と関連付けるために使用する */
842
+ 'aria-describedby'?: AriaAttributes['aria-describedby'];
770
843
  };
771
- declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, matchListToTrigger, }: PropsWithChildren<Props$a>): react.JSX.Element;
844
+ 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;
772
845
  declare namespace Select {
773
846
  var Option: typeof SelectItem;
774
847
  }
@@ -978,6 +1051,74 @@ type TextAreaComponent = ForwardRefExoticComponent<TextAreaProps & RefAttributes
978
1051
  };
979
1052
  declare const TextArea: TextAreaComponent;
980
1053
 
1054
+ /** TimePicker(および内部の Select)のサイズ */
1055
+ type TimePickerSize = 'x-small' | 'small' | 'medium' | 'large';
1056
+
1057
+ /**
1058
+ * TimePicker のエラーメッセージを表示するコンポーネントのプロパティ
1059
+ *
1060
+ * `isError={true}` の場合にのみレンダリングされる。
1061
+ * `className` プロパティは除外されており、内部スタイルが適用される。
1062
+ */
1063
+ type TimePickerErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
1064
+ declare const TimePickerErrorMessage: react.ForwardRefExoticComponent<TimePickerErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
1065
+
1066
+ /**
1067
+ * TimePicker のユーティリティ関数・型
1068
+ *
1069
+ * 時刻の候補生成(時 / 分)と、`{ hour, minute }` 構造体 ⇄ `"HH:mm"` 文字列の相互変換を行う。
1070
+ * min/max による範囲制限は「範囲外の候補を生成リストから除外(非表示)」する方針で実装している。
1071
+ */
1072
+
1073
+ /** TimePicker の value 型。両方 `null` の場合は未入力を表す */
1074
+ type TimeValue = {
1075
+ hour: number | null;
1076
+ minute: number | null;
1077
+ };
1078
+ /** 分候補の刻み。すべて 60 の約数で等間隔に生成できる値のみを許可する */
1079
+ type MinuteStep = 1 | 5 | 10 | 15 | 30;
1080
+ /**
1081
+ * `"HH:mm"` 文字列を `{ hour, minute }` へ変換する。
1082
+ * 形式不正・範囲外(0-23 時 / 0-59 分の範囲外)の場合は `null` を返す。
1083
+ * @example parseTime('09:30') → { hour: 9, minute: 30 }
1084
+ */
1085
+ declare const parseTime: (time: string) => {
1086
+ hour: number;
1087
+ minute: number;
1088
+ } | null;
1089
+ /**
1090
+ * `{ hour, minute }` を `"HH:mm"` 文字列へ変換する。
1091
+ * 時・分のいずれかが `null`(=未入力)の場合は `null` を返す。
1092
+ * @example formatTime({ hour: 9, minute: 30 }) → '09:30'
1093
+ */
1094
+ declare const formatTime: (value: TimeValue) => string | null;
1095
+
1096
+ type TimePickerProps = {
1097
+ /** 選択時刻。`hour`・`minute` の両方が `null` の場合は未入力を表す */
1098
+ value: TimeValue;
1099
+ /** 時刻が変更されたときに呼び出されるコールバック関数。各 Select の変更ごとに新しい値を返す */
1100
+ onChange: (value: TimeValue) => void;
1101
+ /** コンポーネントのサイズ。内部の `Select` の size に 1:1 でマッピングされる @default 'medium' */
1102
+ size?: TimePickerSize;
1103
+ /** 分候補の刻み(60 の約数) @default 1 */
1104
+ minuteStep?: MinuteStep;
1105
+ /** 選択可能な最小時刻(`"HH:mm"`・inclusive)。範囲外の候補は非表示になる */
1106
+ minTime?: string;
1107
+ /** 選択可能な最大時刻(`"HH:mm"`・inclusive)。範囲外の候補は非表示になる */
1108
+ maxTime?: string;
1109
+ /** 無効状態かどうか @default false */
1110
+ isDisabled?: boolean;
1111
+ /** エラー状態かどうか。`true` の場合、両方の Select がエラー表示になる @default false */
1112
+ isError?: boolean;
1113
+ /** Compound Component(`TimePicker.ErrorMessage`) */
1114
+ children?: ReactNode;
1115
+ };
1116
+ type TimePickerComponent = ((props: TimePickerProps) => ReactElement) & {
1117
+ ErrorMessage: typeof TimePickerErrorMessage;
1118
+ displayName?: string;
1119
+ };
1120
+ declare const TimePicker: TimePickerComponent;
1121
+
981
1122
  type ToastState = 'success' | 'error' | 'warning' | 'information';
982
1123
 
983
1124
  type Props$1 = {
@@ -1055,4 +1196,4 @@ type TooltipProps = {
1055
1196
  };
1056
1197
  declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: TooltipProps): react.JSX.Element;
1057
1198
 
1058
- 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 };
1199
+ 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 };