@zenkigen-inc/component-ui 1.20.3 → 1.20.4

package/dist/index.d.mts

@@ -2,9 +2,9 @@ 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 * 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';
 import { tokens } from '@zenkigen-inc/component-config';
 import { useFloating } from '@floating-ui/react';
+import { tagLightColors } from '@zenkigen-inc/component-theme';
 
 type Props$x = {
     size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
@@ -26,7 +26,7 @@ declare namespace Breadcrumb {
     }) => react.JSX.Element;
 }
 
-type Size$3 = 'small' | 'medium' | 'large';
+type Size$3 = 'small' | 'medium' | 'large' | 'x-large';
 type Variant$1 = 'fill' | 'fillDanger' | 'outline' | 'text';
 type JustifyContent = 'start' | 'center';
 type ElementAs = ElementType;
@@ -66,6 +66,8 @@ type Props$w = {
     isChecked?: boolean;
     /** 色バリエーション。default: インタラクティブ色 / gray: グレー系 / error: エラー色 */
     color?: 'default' | 'gray' | 'error';
+    /** サイズバリエーション。medium: box 20px / large: box 24px */
+    size?: 'medium' | 'large';
     /** インデターミネイト表示を行うか（表示時は isChecked も true を推奨） */
     isIndeterminate?: boolean;
     /** 無効状態にするか */
@@ -75,7 +77,7 @@ type Props$w = {
     /** 状態変化時のハンドラー。isDisabled=true の場合は呼ばれない */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$w): react.JSX.Element;
+declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, size, }: Props$w): react.JSX.Element;
 
 /**
  * DatePicker のエラーメッセージを表示するコンポーネントのプロパティ
@@ -330,11 +332,10 @@ type TailwindColorToken = `${TailwindColorName}-${TailwindColorShade}` | 'transp
 type ColorToken = UserColorToken | TextColorToken | LinkColorToken | BackgroundColorToken | BorderColorToken | IconColorToken | InteractiveColorToken | FieldColorToken | FocusColorToken | HoverColorToken | ActiveColorToken | SelectedColorToken | DisabledColorToken | SupportColorToken | BaseColorToken | TailwindColorToken;
 
 type Size$1 = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
-type Color = keyof typeof iconColors;
 type Props$q = {
     name: IconName;
     size?: Size$1;
-    color?: Color;
+    color?: ColorToken;
     accentColor?: ColorToken;
     isDisabled?: boolean;
     className?: string;
@@ -356,6 +357,8 @@ type Props$p = {
     isNoPadding?: boolean;
     /** ボタンのバリアント */
     variant?: Variant;
+    /** アイコンのカラー */
+    iconColor?: ColorToken;
     /** アイコンのアクセントカラー */
     iconAccentColor?: ColorToken;
 } & (({
@@ -365,7 +368,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, iconAccentColor, ...props }: Props$p): react.JSX.Element;
+declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, iconColor, iconAccentColor, ...props }: Props$p): react.JSX.Element;
 
 type Props$o = {
     /** インジケーターのサイズ。small=16px / medium=32px / large=64px */
@@ -464,6 +467,7 @@ declare const TextInputHelperMessage: react.ForwardRefExoticComponent<TextInputH
 
 type TextInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'className'> & {
     size?: 'medium' | 'large';
+    variant?: 'outline' | 'text';
     value: string;
     isError?: boolean;
     onClickClearButton?: () => void;
@@ -485,7 +489,7 @@ declare const PasswordInput: ForwardRefExoticComponent<Props$h & RefAttributes<H
 /**
  * Popoverが閉じられる理由を定義する型
  */
-type CloseReason = 'outside-click' | 'escape-key-down';
+type CloseReason = 'outside-click' | 'escape-key-down' | 'modal-open';
 /**
  * Popoverのクローズイベントの型定義
  */
@@ -572,10 +576,12 @@ type Props$d = {
     isChecked?: boolean;
     /** 無効状態にするか */
     isDisabled?: boolean;
+    /** ラジオボタンのサイズ */
+    size?: 'medium' | 'large';
     /** 状態変化時のハンドラー。isDisabled=true の場合は呼ばれない */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Radio({ name, value, id, label, isChecked, isDisabled, onChange }: Props$d): react.JSX.Element;
+declare function Radio({ name, value, id, label, isChecked, isDisabled, size, onChange, }: Props$d): react.JSX.Element;
 
 type Props$c = {
     /** サイズ */
@@ -797,11 +803,16 @@ type TextAreaBaseProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'clas
     value: string;
     height?: CSSProperties['height'];
     isError?: boolean;
+} & ({
+    variant?: 'outline';
     /**
      * @deprecated 外部から className を渡してスタイルを上書きすることは非推奨です。
      */
     className?: string;
-};
+} | {
+    variant: 'text';
+    className?: never;
+});
 type AutoHeightUnion = {
     autoHeight: true;
     maxHeight?: CSSProperties['maxHeight'];

package/dist/index.d.ts

@@ -2,9 +2,9 @@ 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 * 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';
 import { tokens } from '@zenkigen-inc/component-config';
 import { useFloating } from '@floating-ui/react';
+import { tagLightColors } from '@zenkigen-inc/component-theme';
 
 type Props$x = {
     size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
@@ -26,7 +26,7 @@ declare namespace Breadcrumb {
     }) => react.JSX.Element;
 }
 
-type Size$3 = 'small' | 'medium' | 'large';
+type Size$3 = 'small' | 'medium' | 'large' | 'x-large';
 type Variant$1 = 'fill' | 'fillDanger' | 'outline' | 'text';
 type JustifyContent = 'start' | 'center';
 type ElementAs = ElementType;
@@ -66,6 +66,8 @@ type Props$w = {
     isChecked?: boolean;
     /** 色バリエーション。default: インタラクティブ色 / gray: グレー系 / error: エラー色 */
     color?: 'default' | 'gray' | 'error';
+    /** サイズバリエーション。medium: box 20px / large: box 24px */
+    size?: 'medium' | 'large';
     /** インデターミネイト表示を行うか（表示時は isChecked も true を推奨） */
     isIndeterminate?: boolean;
     /** 無効状態にするか */
@@ -75,7 +77,7 @@ type Props$w = {
     /** 状態変化時のハンドラー。isDisabled=true の場合は呼ばれない */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$w): react.JSX.Element;
+declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, size, }: Props$w): react.JSX.Element;
 
 /**
  * DatePicker のエラーメッセージを表示するコンポーネントのプロパティ
@@ -330,11 +332,10 @@ type TailwindColorToken = `${TailwindColorName}-${TailwindColorShade}` | 'transp
 type ColorToken = UserColorToken | TextColorToken | LinkColorToken | BackgroundColorToken | BorderColorToken | IconColorToken | InteractiveColorToken | FieldColorToken | FocusColorToken | HoverColorToken | ActiveColorToken | SelectedColorToken | DisabledColorToken | SupportColorToken | BaseColorToken | TailwindColorToken;
 
 type Size$1 = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
-type Color = keyof typeof iconColors;
 type Props$q = {
     name: IconName;
     size?: Size$1;
-    color?: Color;
+    color?: ColorToken;
     accentColor?: ColorToken;
     isDisabled?: boolean;
     className?: string;
@@ -356,6 +357,8 @@ type Props$p = {
     isNoPadding?: boolean;
     /** ボタンのバリアント */
     variant?: Variant;
+    /** アイコンのカラー */
+    iconColor?: ColorToken;
     /** アイコンのアクセントカラー */
     iconAccentColor?: ColorToken;
 } & (({
@@ -365,7 +368,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, iconAccentColor, ...props }: Props$p): react.JSX.Element;
+declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, iconColor, iconAccentColor, ...props }: Props$p): react.JSX.Element;
 
 type Props$o = {
     /** インジケーターのサイズ。small=16px / medium=32px / large=64px */
@@ -464,6 +467,7 @@ declare const TextInputHelperMessage: react.ForwardRefExoticComponent<TextInputH
 
 type TextInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'className'> & {
     size?: 'medium' | 'large';
+    variant?: 'outline' | 'text';
     value: string;
     isError?: boolean;
     onClickClearButton?: () => void;
@@ -485,7 +489,7 @@ declare const PasswordInput: ForwardRefExoticComponent<Props$h & RefAttributes<H
 /**
  * Popoverが閉じられる理由を定義する型
  */
-type CloseReason = 'outside-click' | 'escape-key-down';
+type CloseReason = 'outside-click' | 'escape-key-down' | 'modal-open';
 /**
  * Popoverのクローズイベントの型定義
  */
@@ -572,10 +576,12 @@ type Props$d = {
     isChecked?: boolean;
     /** 無効状態にするか */
     isDisabled?: boolean;
+    /** ラジオボタンのサイズ */
+    size?: 'medium' | 'large';
     /** 状態変化時のハンドラー。isDisabled=true の場合は呼ばれない */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Radio({ name, value, id, label, isChecked, isDisabled, onChange }: Props$d): react.JSX.Element;
+declare function Radio({ name, value, id, label, isChecked, isDisabled, size, onChange, }: Props$d): react.JSX.Element;
 
 type Props$c = {
     /** サイズ */
@@ -797,11 +803,16 @@ type TextAreaBaseProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'clas
     value: string;
     height?: CSSProperties['height'];
     isError?: boolean;
+} & ({
+    variant?: 'outline';
     /**
      * @deprecated 外部から className を渡してスタイルを上書きすることは非推奨です。
      */
     className?: string;
-};
+} | {
+    variant: 'text';
+    className?: never;
+});
 type AutoHeightUnion = {
     autoHeight: true;
     maxHeight?: CSSProperties['maxHeight'];