@zenkigen-inc/component-ui 1.18.4 → 1.19.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.
Files changed (5) hide show
  1. package/dist/index.d.mts +55 -3
  2. package/dist/index.d.ts +55 -3
  3. package/dist/index.js +1306 -857
  4. package/dist/index.mjs +1200 -742
  5. package/package.json +6 -5
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, MouseEvent, MutableRefObject, ReactElement, RefObject, HTMLAttributes, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, ButtonHTMLAttributes, TextareaHTMLAttributes } 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';
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 { iconColors, tagLightColors } from '@zenkigen-inc/component-theme';
@@ -77,6 +77,56 @@ type Props$w = {
77
77
  };
78
78
  declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$w): react.JSX.Element;
79
79
 
80
+ /**
81
+ * DatePicker のエラーメッセージを表示するコンポーネントのプロパティ
82
+ *
83
+ * `isError={true}` の場合にのみレンダリングされます。
84
+ * `className` プロパティは除外されており、内部スタイルが適用されます。
85
+ */
86
+ type DatePickerErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
87
+ declare const DatePickerErrorMessage: react.ForwardRefExoticComponent<DatePickerErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
88
+
89
+ /**
90
+ * DatePicker のユーティリティ関数
91
+ *
92
+ * 日付の変換・フォーマットを行う。
93
+ * タイムゾーンを考慮した日付文字列（"YYYY-MM-DD" 形式）を中間表現として使用し、
94
+ * Date オブジェクトとの相互変換を行う。
95
+ */
96
+ /**
97
+ * DatePicker でサポートするタイムゾーン
98
+ */
99
+ type DatePickerTimeZone = 'UTC' | 'Asia/Tokyo';
100
+
101
+ type DatePickerButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className' | 'disabled' | 'onChange' | 'style' | 'value'>;
102
+ type DatePickerProps = DatePickerButtonProps & {
103
+ /** 選択された日付。未選択の場合は `null` */
104
+ value: Date | null;
105
+ /** 日付が変更されたときに呼び出されるコールバック関数 */
106
+ onChange: (value: Date | null) => void;
107
+ /** 無効状態かどうか @default false */
108
+ isDisabled?: boolean;
109
+ /** エラー状態かどうか。`true` の場合、トリガーボタンが `outlineDanger` バリアントで表示される @default false */
110
+ isError?: boolean;
111
+ /** 選択可能な最小日付。この日付より前の日付は選択不可になる */
112
+ minDate?: Date;
113
+ /** 選択可能な最大日付。この日付より後の日付は選択不可になる */
114
+ maxDate?: Date;
115
+ /** 未選択時に表示されるプレースホルダーテキスト @default '日付を選択' */
116
+ placeholder?: string;
117
+ /** トリガーボタンのサイズ @default 'medium' */
118
+ size?: 'small' | 'medium' | 'large';
119
+ /** 日付変換に使用するタイムゾーン。選択された日付は指定タイムゾーンの 00:00:00 として返される @default 'Asia/Tokyo' */
120
+ timeZone?: DatePickerTimeZone;
121
+ /** Compound Component（ErrorMessage 等） */
122
+ children?: ReactNode;
123
+ };
124
+ type DatePickerComponent = ((props: DatePickerProps) => ReactElement) & {
125
+ ErrorMessage: typeof DatePickerErrorMessage;
126
+ displayName?: string;
127
+ };
128
+ declare const DatePicker: DatePickerComponent;
129
+
80
130
  /** Dropdown.Item コンポーネントのプロパティ */
81
131
  type Props$v = {
82
132
  /** 項目の配色。red は破壊的アクションに用いる。 */
@@ -304,6 +354,8 @@ type Props$p = {
304
354
  isNoPadding?: boolean;
305
355
  /** ボタンのバリアント */
306
356
  variant?: Variant;
357
+ /** アイコンのアクセントカラー */
358
+ iconAccentColor?: ColorToken;
307
359
  } & (({
308
360
  isAnchor: true;
309
361
  href: string;
@@ -311,7 +363,7 @@ type Props$p = {
311
363
  } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'className'>) | ({
312
364
  isAnchor?: false;
313
365
  } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'className'>));
314
- declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$p): react.JSX.Element;
366
+ declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, iconAccentColor, ...props }: Props$p): react.JSX.Element;
315
367
 
316
368
  type Props$o = {
317
369
  /** インジケーターのサイズ。small=16px / medium=32px / large=64px */
@@ -832,4 +884,4 @@ type TooltipProps = {
832
884
  };
833
885
  declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: TooltipProps): react.JSX.Element;
834
886
 
835
- 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 };
887
+ 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 CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import react__default, { ReactNode, ElementType, PropsWithChildren, ComponentPropsWithoutRef, CSSProperties, ChangeEvent, MouseEvent, MutableRefObject, ReactElement, RefObject, HTMLAttributes, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, ButtonHTMLAttributes, TextareaHTMLAttributes } 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';
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 { iconColors, tagLightColors } from '@zenkigen-inc/component-theme';
@@ -77,6 +77,56 @@ type Props$w = {
77
77
  };
78
78
  declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$w): react.JSX.Element;
79
79
 
80
+ /**
81
+ * DatePicker のエラーメッセージを表示するコンポーネントのプロパティ
82
+ *
83
+ * `isError={true}` の場合にのみレンダリングされます。
84
+ * `className` プロパティは除外されており、内部スタイルが適用されます。
85
+ */
86
+ type DatePickerErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
87
+ declare const DatePickerErrorMessage: react.ForwardRefExoticComponent<DatePickerErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
88
+
89
+ /**
90
+ * DatePicker のユーティリティ関数
91
+ *
92
+ * 日付の変換・フォーマットを行う。
93
+ * タイムゾーンを考慮した日付文字列（"YYYY-MM-DD" 形式）を中間表現として使用し、
94
+ * Date オブジェクトとの相互変換を行う。
95
+ */
96
+ /**
97
+ * DatePicker でサポートするタイムゾーン
98
+ */
99
+ type DatePickerTimeZone = 'UTC' | 'Asia/Tokyo';
100
+
101
+ type DatePickerButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className' | 'disabled' | 'onChange' | 'style' | 'value'>;
102
+ type DatePickerProps = DatePickerButtonProps & {
103
+ /** 選択された日付。未選択の場合は `null` */
104
+ value: Date | null;
105
+ /** 日付が変更されたときに呼び出されるコールバック関数 */
106
+ onChange: (value: Date | null) => void;
107
+ /** 無効状態かどうか @default false */
108
+ isDisabled?: boolean;
109
+ /** エラー状態かどうか。`true` の場合、トリガーボタンが `outlineDanger` バリアントで表示される @default false */
110
+ isError?: boolean;
111
+ /** 選択可能な最小日付。この日付より前の日付は選択不可になる */
112
+ minDate?: Date;
113
+ /** 選択可能な最大日付。この日付より後の日付は選択不可になる */
114
+ maxDate?: Date;
115
+ /** 未選択時に表示されるプレースホルダーテキスト @default '日付を選択' */
116
+ placeholder?: string;
117
+ /** トリガーボタンのサイズ @default 'medium' */
118
+ size?: 'small' | 'medium' | 'large';
119
+ /** 日付変換に使用するタイムゾーン。選択された日付は指定タイムゾーンの 00:00:00 として返される @default 'Asia/Tokyo' */
120
+ timeZone?: DatePickerTimeZone;
121
+ /** Compound Component（ErrorMessage 等） */
122
+ children?: ReactNode;
123
+ };
124
+ type DatePickerComponent = ((props: DatePickerProps) => ReactElement) & {
125
+ ErrorMessage: typeof DatePickerErrorMessage;
126
+ displayName?: string;
127
+ };
128
+ declare const DatePicker: DatePickerComponent;
129
+
80
130
  /** Dropdown.Item コンポーネントのプロパティ */
81
131
  type Props$v = {
82
132
  /** 項目の配色。red は破壊的アクションに用いる。 */
@@ -304,6 +354,8 @@ type Props$p = {
304
354
  isNoPadding?: boolean;
305
355
  /** ボタンのバリアント */
306
356
  variant?: Variant;
357
+ /** アイコンのアクセントカラー */
358
+ iconAccentColor?: ColorToken;
307
359
  } & (({
308
360
  isAnchor: true;
309
361
  href: string;
@@ -311,7 +363,7 @@ type Props$p = {
311
363
  } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'className'>) | ({
312
364
  isAnchor?: false;
313
365
  } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'className'>));
314
- declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$p): react.JSX.Element;
366
+ declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, iconAccentColor, ...props }: Props$p): react.JSX.Element;
315
367
 
316
368
  type Props$o = {
317
369
  /** インジケーターのサイズ。small=16px / medium=32px / large=64px */
@@ -832,4 +884,4 @@ type TooltipProps = {
832
884
  };
833
885
  declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: TooltipProps): react.JSX.Element;
834
886
 
835
- 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 };
887
+ 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 };