@zenkigen-inc/component-ui 1.18.5 → 1.19.1

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react 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 react__default, { ReactNode, ElementType, PropsWithChildren, ComponentPropsWithoutRef, CSSProperties, ChangeEvent, HTMLAttributes, ButtonHTMLAttributes, ReactElement, MouseEvent, MutableRefObject, RefObject, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, TextareaHTMLAttributes } from 'react';
 import * as _zenkigen_inc_component_icons from '@zenkigen-inc/component-icons';
 import { IconName } from '@zenkigen-inc/component-icons';
 import { iconColors, tagLightColors } from '@zenkigen-inc/component-theme';
@@ -77,6 +77,56 @@ type Props$w = {
 };
 declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$w): react.JSX.Element;
 
+/**
+ * DatePicker のエラーメッセージを表示するコンポーネントのプロパティ
+ *
+ * `isError={true}` の場合にのみレンダリングされます。
+ * `className` プロパティは除外されており、内部スタイルが適用されます。
+ */
+type DatePickerErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const DatePickerErrorMessage: react.ForwardRefExoticComponent<DatePickerErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * DatePicker のユーティリティ関数
+ *
+ * 日付の変換・フォーマットを行う。
+ * タイムゾーンを考慮した日付文字列（"YYYY-MM-DD" 形式）を中間表現として使用し、
+ * Date オブジェクトとの相互変換を行う。
+ */
+/**
+ * DatePicker でサポートするタイムゾーン
+ */
+type DatePickerTimeZone = 'UTC' | 'Asia/Tokyo';
+
+type DatePickerButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className' | 'disabled' | 'onChange' | 'style' | 'value'>;
+type DatePickerProps = DatePickerButtonProps & {
+    /** 選択された日付。未選択の場合は `null` */
+    value: Date | null;
+    /** 日付が変更されたときに呼び出されるコールバック関数 */
+    onChange: (value: Date | null) => void;
+    /** 無効状態かどうか @default false */
+    isDisabled?: boolean;
+    /** エラー状態かどうか。`true` の場合、トリガーボタンが `outlineDanger` バリアントで表示される @default false */
+    isError?: boolean;
+    /** 選択可能な最小日付。この日付より前の日付は選択不可になる */
+    minDate?: Date;
+    /** 選択可能な最大日付。この日付より後の日付は選択不可になる */
+    maxDate?: Date;
+    /** 未選択時に表示されるプレースホルダーテキスト @default '日付を選択' */
+    placeholder?: string;
+    /** トリガーボタンのサイズ @default 'medium' */
+    size?: 'small' | 'medium' | 'large';
+    /** 日付変換に使用するタイムゾーン。選択された日付は指定タイムゾーンの 00:00:00 として返される @default 'Asia/Tokyo' */
+    timeZone?: DatePickerTimeZone;
+    /** Compound Component（ErrorMessage 等） */
+    children?: ReactNode;
+};
+type DatePickerComponent = ((props: DatePickerProps) => ReactElement) & {
+    ErrorMessage: typeof DatePickerErrorMessage;
+    displayName?: string;
+};
+declare const DatePicker: DatePickerComponent;
+
 /** Dropdown.Item コンポーネントのプロパティ */
 type Props$v = {
     /** 項目の配色。red は破壊的アクションに用いる。 */
@@ -304,6 +354,8 @@ type Props$p = {
     isNoPadding?: boolean;
     /** ボタンのバリアント */
     variant?: Variant;
+    /** アイコンのアクセントカラー */
+    iconAccentColor?: ColorToken;
 } & (({
     isAnchor: true;
     href: string;
@@ -311,7 +363,7 @@ type Props$p = {
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'className'>) | ({
     isAnchor?: false;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'className'>));
-declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$p): react.JSX.Element;
+declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, iconAccentColor, ...props }: Props$p): react.JSX.Element;
 
 type Props$o = {
     /** インジケーターのサイズ。small=16px / medium=32px / large=64px */
@@ -589,20 +641,34 @@ type Props$b = {
 declare function SelectItem({ option }: Props$b): react.JSX.Element;
 
 type Props$a = {
+    /** コンポーネントのサイズ */
     size?: 'x-small' | 'small' | 'medium' | 'large';
+    /** 表示スタイルのバリエーション */
     variant?: 'outline' | 'text';
+    /** コンポーネントの幅 */
     width?: CSSProperties['width'];
+    /** コンポーネントの最大幅 */
     maxWidth?: CSSProperties['maxWidth'];
+    /** 未選択時に表示されるテキスト */
     placeholder?: string;
+    /** プレースホルダー表示時のアイコン */
     placeholderIcon?: IconName;
+    /** 現在選択されているオプション */
     selectedOption?: SelectOption | null;
+    /** オプションリストの最大高さ */
     optionListMaxHeight?: CSSProperties['height'];
+    /** 無効状態の制御 */
     isDisabled?: boolean;
+    /** エラー状態の制御 */
     isError?: boolean;
+    /** 選択状態の見た目を適用するかどうか */
     isOptionSelected?: boolean;
+    /** 選択変更時のコールバック関数 */
     onChange?: (option: SelectOption | null) => void;
+    /** ドロップダウンリストの幅をトリガーボタンの幅に合わせる */
+    matchListToTrigger?: boolean;
 };
-declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, }: PropsWithChildren<Props$a>): react.JSX.Element;
+declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, matchListToTrigger, }: PropsWithChildren<Props$a>): react.JSX.Element;
 declare namespace Select {
     var Option: typeof SelectItem;
 }
@@ -832,4 +898,4 @@ type TooltipProps = {
 };
 declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: TooltipProps): react.JSX.Element;
 
-export { Avatar, Breadcrumb, Button, Checkbox, type ColorVariant, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, FileInput, type FileInputRef, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, Popover, PopoverContent, type PopoverContextValue, type PopoverPlacement, PopoverTrigger, Popup, Radio, Search, SegmentedControl, Select, type SelectOption, SelectSort, SortButton, type SortOrder, Tab, TabItem, Table, TableCell, TableRow, Tag, type TagColor, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, type UseRovingFocusProps, type UseRovingFocusReturn, useOutsideClick, useRovingFocus, useToast };
+export { Avatar, Breadcrumb, Button, Checkbox, type ColorVariant, DatePicker, type DatePickerProps, type DatePickerTimeZone, 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 };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react 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 react__default, { ReactNode, ElementType, PropsWithChildren, ComponentPropsWithoutRef, CSSProperties, ChangeEvent, HTMLAttributes, ButtonHTMLAttributes, ReactElement, MouseEvent, MutableRefObject, RefObject, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, TextareaHTMLAttributes } from 'react';
 import * as _zenkigen_inc_component_icons from '@zenkigen-inc/component-icons';
 import { IconName } from '@zenkigen-inc/component-icons';
 import { iconColors, tagLightColors } from '@zenkigen-inc/component-theme';
@@ -77,6 +77,56 @@ type Props$w = {
 };
 declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$w): react.JSX.Element;
 
+/**
+ * DatePicker のエラーメッセージを表示するコンポーネントのプロパティ
+ *
+ * `isError={true}` の場合にのみレンダリングされます。
+ * `className` プロパティは除外されており、内部スタイルが適用されます。
+ */
+type DatePickerErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const DatePickerErrorMessage: react.ForwardRefExoticComponent<DatePickerErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * DatePicker のユーティリティ関数
+ *
+ * 日付の変換・フォーマットを行う。
+ * タイムゾーンを考慮した日付文字列（"YYYY-MM-DD" 形式）を中間表現として使用し、
+ * Date オブジェクトとの相互変換を行う。
+ */
+/**
+ * DatePicker でサポートするタイムゾーン
+ */
+type DatePickerTimeZone = 'UTC' | 'Asia/Tokyo';
+
+type DatePickerButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className' | 'disabled' | 'onChange' | 'style' | 'value'>;
+type DatePickerProps = DatePickerButtonProps & {
+    /** 選択された日付。未選択の場合は `null` */
+    value: Date | null;
+    /** 日付が変更されたときに呼び出されるコールバック関数 */
+    onChange: (value: Date | null) => void;
+    /** 無効状態かどうか @default false */
+    isDisabled?: boolean;
+    /** エラー状態かどうか。`true` の場合、トリガーボタンが `outlineDanger` バリアントで表示される @default false */
+    isError?: boolean;
+    /** 選択可能な最小日付。この日付より前の日付は選択不可になる */
+    minDate?: Date;
+    /** 選択可能な最大日付。この日付より後の日付は選択不可になる */
+    maxDate?: Date;
+    /** 未選択時に表示されるプレースホルダーテキスト @default '日付を選択' */
+    placeholder?: string;
+    /** トリガーボタンのサイズ @default 'medium' */
+    size?: 'small' | 'medium' | 'large';
+    /** 日付変換に使用するタイムゾーン。選択された日付は指定タイムゾーンの 00:00:00 として返される @default 'Asia/Tokyo' */
+    timeZone?: DatePickerTimeZone;
+    /** Compound Component（ErrorMessage 等） */
+    children?: ReactNode;
+};
+type DatePickerComponent = ((props: DatePickerProps) => ReactElement) & {
+    ErrorMessage: typeof DatePickerErrorMessage;
+    displayName?: string;
+};
+declare const DatePicker: DatePickerComponent;
+
 /** Dropdown.Item コンポーネントのプロパティ */
 type Props$v = {
     /** 項目の配色。red は破壊的アクションに用いる。 */
@@ -304,6 +354,8 @@ type Props$p = {
     isNoPadding?: boolean;
     /** ボタンのバリアント */
     variant?: Variant;
+    /** アイコンのアクセントカラー */
+    iconAccentColor?: ColorToken;
 } & (({
     isAnchor: true;
     href: string;
@@ -311,7 +363,7 @@ type Props$p = {
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'className'>) | ({
     isAnchor?: false;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'className'>));
-declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$p): react.JSX.Element;
+declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, iconAccentColor, ...props }: Props$p): react.JSX.Element;
 
 type Props$o = {
     /** インジケーターのサイズ。small=16px / medium=32px / large=64px */
@@ -589,20 +641,34 @@ type Props$b = {
 declare function SelectItem({ option }: Props$b): react.JSX.Element;
 
 type Props$a = {
+    /** コンポーネントのサイズ */
     size?: 'x-small' | 'small' | 'medium' | 'large';
+    /** 表示スタイルのバリエーション */
     variant?: 'outline' | 'text';
+    /** コンポーネントの幅 */
     width?: CSSProperties['width'];
+    /** コンポーネントの最大幅 */
     maxWidth?: CSSProperties['maxWidth'];
+    /** 未選択時に表示されるテキスト */
     placeholder?: string;
+    /** プレースホルダー表示時のアイコン */
     placeholderIcon?: IconName;
+    /** 現在選択されているオプション */
     selectedOption?: SelectOption | null;
+    /** オプションリストの最大高さ */
     optionListMaxHeight?: CSSProperties['height'];
+    /** 無効状態の制御 */
     isDisabled?: boolean;
+    /** エラー状態の制御 */
     isError?: boolean;
+    /** 選択状態の見た目を適用するかどうか */
     isOptionSelected?: boolean;
+    /** 選択変更時のコールバック関数 */
     onChange?: (option: SelectOption | null) => void;
+    /** ドロップダウンリストの幅をトリガーボタンの幅に合わせる */
+    matchListToTrigger?: boolean;
 };
-declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, }: PropsWithChildren<Props$a>): react.JSX.Element;
+declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, matchListToTrigger, }: PropsWithChildren<Props$a>): react.JSX.Element;
 declare namespace Select {
     var Option: typeof SelectItem;
 }
@@ -832,4 +898,4 @@ type TooltipProps = {
 };
 declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: TooltipProps): react.JSX.Element;
 
-export { Avatar, Breadcrumb, Button, Checkbox, type ColorVariant, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, FileInput, type FileInputRef, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, Popover, PopoverContent, type PopoverContextValue, type PopoverPlacement, PopoverTrigger, Popup, Radio, Search, SegmentedControl, Select, type SelectOption, SelectSort, SortButton, type SortOrder, Tab, TabItem, Table, TableCell, TableRow, Tag, type TagColor, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, type UseRovingFocusProps, type UseRovingFocusReturn, useOutsideClick, useRovingFocus, useToast };
+export { Avatar, Breadcrumb, Button, Checkbox, type ColorVariant, DatePicker, type DatePickerProps, type DatePickerTimeZone, 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 };