@zenkigen-inc/component-ui 1.17.0 → 1.18.1

package/README.md

@@ -1,5 +1,14 @@
 # @zenkigen-inc/component-ui
 
+## 目次
+
+- [インストール](#インストール)
+- [利用方法](#利用方法)
+- [開発者向け](#開発者向け)
+  - [コンポーネントの雛形を生成する](#コンポーネントの雛形を生成する)
+  - [実装したコンポーネントを export する](#実装したコンポーネントを-export-する)
+- [ライセンス](#ライセンス)
+
 ## インストール
 
 ```bash

package/dist/index.d.mts

@@ -1,24 +1,26 @@
 import * as react from 'react';
-import react__default, { PropsWithChildren, ElementType, ComponentPropsWithoutRef, CSSProperties, ReactNode, ChangeEvent, MouseEvent, MutableRefObject, ReactElement, RefObject, InputHTMLAttributes, FormEvent, ButtonHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import react__default, { PropsWithChildren, ElementType, ComponentPropsWithoutRef, CSSProperties, ReactNode, ChangeEvent, MouseEvent, MutableRefObject, ReactElement, RefObject, HTMLAttributes, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, ButtonHTMLAttributes, 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';
 
-type Props$x = {
+type Props$y = {
     size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
     userId?: number;
     firstName?: string;
     lastName?: string;
     isDisabled?: boolean;
 };
-declare function Avatar({ size, ...props }: Props$x): react.JSX.Element;
+declare function Avatar({ size, ...props }: Props$y): react.JSX.Element;
 
 declare function Breadcrumb({ children }: PropsWithChildren): react.JSX.Element;
 declare namespace Breadcrumb {
     var Item: ({ children }: PropsWithChildren) => react.JSX.Element;
 }
 
-type Size$2 = 'small' | 'medium' | 'large';
+type Size$3 = 'small' | 'medium' | 'large';
 type Variant$1 = 'fill' | 'fillDanger' | 'outline' | 'text';
 type JustifyContent = 'start' | 'center';
 type ElementAs = ElementType;
@@ -26,20 +28,28 @@ type AsProp<T extends ElementAs> = {
     elementAs?: T;
 };
 type PolymorphicPropsWithoutRef<T extends ElementAs, P extends object> = PropsWithChildren<P> & ComponentPropsWithoutRef<T> & AsProp<T>;
-type Props$w<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
-    size?: Size$2;
+type DeprecatedClassNameProp<T extends ElementAs> = {
+    /**
+     * @deprecated 外部から className を渡してスタイルを上書きすることは非推奨です。
+     */
+    className?: ComponentPropsWithoutRef<T>['className'];
+};
+type BaseProps$1<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
+    size?: Size$3;
     width?: CSSProperties['width'];
     isSelected?: boolean;
     isDisabled?: boolean;
-    variant?: Variant$1;
     before?: ReactNode;
     after?: ReactNode;
     borderRadius?: CSSProperties['borderRadius'];
     justifyContent?: JustifyContent;
-}>;
-declare const Button: <T extends ElementAs = "button">({ size, variant, isDisabled, isSelected, width, borderRadius, justifyContent, before, after, elementAs, children, ...props }: Props$w<T>) => react.JSX.Element;
+}> & DeprecatedClassNameProp<T>;
+type PublicProps<T extends ElementAs> = BaseProps$1<T> & {
+    variant?: Variant$1;
+};
+declare const Button: <T extends ElementAs = "button">(props: PublicProps<T>) => react.JSX.Element;
 
-type Props$v = {
+type Props$x = {
     name?: string;
     value?: string;
     id?: string;
@@ -50,13 +60,13 @@ type Props$v = {
     label?: string;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$v): react.JSX.Element;
+declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$x): react.JSX.Element;
 
-type Props$u = {
+type Props$w = {
     color?: 'gray' | 'red';
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
-declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props$u>): react.JSX.Element;
+declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props$w>): react.JSX.Element;
 
 type DropdownItemType = {
     id: string;
@@ -67,15 +77,15 @@ type DropdownItemType = {
 type DropdownVerticalPosition = 'top' | 'bottom';
 type DropdownHorizontalAlign = 'left' | 'center' | 'right';
 
-type Props$t = {
+type Props$v = {
     maxHeight?: CSSProperties['height'];
     isNoPadding?: boolean;
     verticalPosition?: DropdownVerticalPosition;
     horizontalAlign?: DropdownHorizontalAlign;
 };
-declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props$t>): false | react.JSX.Element;
+declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props$v>): false | react.JSX.Element;
 
-type Props$s = {
+type Props$u = {
     size?: 'x-small' | 'small' | 'medium' | 'large';
     variant?: 'text' | 'outline';
     title?: string;
@@ -91,28 +101,73 @@ type Props$s = {
     label: string;
     icon?: IconName;
 });
-declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, portalTargetRef, }: PropsWithChildren<Props$s>): react.JSX.Element;
+declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, portalTargetRef, }: PropsWithChildren<Props$u>): react.JSX.Element;
 declare namespace Dropdown {
     var Menu: typeof DropdownMenu;
     var Item: typeof DropdownItem;
 }
 
-type Props$r = {
+type Props$t = {
     value: number;
     isEditable?: boolean;
     onChangeRating?: (newRating: number) => void | null;
     size?: 'medium' | 'large';
 };
-declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props$r): react.JSX.Element;
+declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props$t): react.JSX.Element;
+
+type Size$2 = 'small' | 'medium' | 'large';
+declare const ERROR_TYPES: {
+    readonly SIZE_TOO_LARGE: "SIZE_TOO_LARGE";
+    readonly UNSUPPORTED_FORMAT: "UNSUPPORTED_FORMAT";
+};
+type FileInputErrorType = (typeof ERROR_TYPES)[keyof typeof ERROR_TYPES];
+type FileInputError = {
+    type: FileInputErrorType;
+    message: string;
+};
+type BaseFileInputProps = {
+    /** input要素のID（外部のlabel要素との連携用） */
+    id?: string;
+    /** 許可するファイル形式（MIMEタイプ） */
+    accept?: string;
+    /** 最大ファイルサイズ（バイト単位） */
+    maxSize?: number;
+    /** 無効化状態 */
+    isDisabled?: boolean;
+    /** エラー状態 */
+    isError?: boolean;
+    /** ファイル選択時のコールバック */
+    onSelect?: (file: File | null) => void;
+    /** エラー時のコールバック */
+    onError?: (errors: FileInputError[]) => void;
+    /** エラーメッセージリスト */
+    errorMessages?: string[];
+};
+type ButtonFileInputProps = BaseFileInputProps & {
+    /** コンポーネントのバリエーション */
+    variant: 'button';
+    /** サイズ */
+    size?: Size$2;
+};
+type DropzoneFileInputProps = BaseFileInputProps & {
+    /** コンポーネントのバリエーション */
+    variant: 'dropzone';
+};
+type FileInputProps = ButtonFileInputProps | DropzoneFileInputProps;
+type FileInputRef = {
+    /** ファイル選択状態をリセット */
+    reset: () => void;
+};
+declare const FileInput: react.ForwardRefExoticComponent<FileInputProps & react.RefAttributes<FileInputRef>>;
 
 type Level = 1 | 2 | 3 | 4 | 5;
-type Props$q = {
+type Props$s = {
     level: Level;
     before?: ReactNode;
     after?: ReactNode;
     children?: ReactNode;
 };
-declare function Heading(props: Props$q): react.JSX.Element;
+declare function Heading(props: Props$s): react.JSX.Element;
 
 declare const useOutsideClick: <T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: (event: Event) => void, enabled?: boolean) => void;
 
@@ -183,7 +238,7 @@ type ColorToken = UserColorToken | TextColorToken | LinkColorToken | BackgroundC
 
 type Size$1 = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
 type Color = keyof typeof iconColors;
-type Props$p = {
+type Props$r = {
     name: IconName;
     size?: Size$1;
     color?: Color;
@@ -191,11 +246,11 @@ type Props$p = {
     isDisabled?: boolean;
     className?: string;
 };
-declare const Icon: ({ size, isDisabled, ...props }: Props$p) => react.JSX.Element;
+declare const Icon: ({ size, isDisabled, ...props }: Props$r) => react.JSX.Element;
 
 type Size = 'small' | 'medium' | 'large';
 type Variant = 'outline' | 'text';
-type Props$o = {
+type Props$q = {
     /** 表示するアイコン名 */
     icon: IconName;
     /** ボタンのサイズ */
@@ -214,30 +269,29 @@ type Props$o = {
     target?: HTMLAnchorElement['target'];
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'className'>) | ({
     isAnchor?: false;
-    onClick?: () => void;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled' | 'className'>));
-declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$o): react.JSX.Element;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'className'>));
+declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$q): react.JSX.Element;
 
-type Props$n = {
+type Props$p = {
     size?: 'small' | 'medium' | 'large';
     position?: 'fixed' | 'absolute' | 'static';
     height?: string;
 };
-declare function Loading({ size, position, height }: Props$n): react.JSX.Element;
+declare function Loading({ size, position, height }: Props$p): react.JSX.Element;
 
 declare function ModalBody({ children }: PropsWithChildren): react.JSX.Element;
 
-type Props$m = {
+type Props$o = {
     isNoBorder?: boolean;
 };
-declare function ModalFooter({ children, isNoBorder }: PropsWithChildren<Props$m>): react__default.JSX.Element;
+declare function ModalFooter({ children, isNoBorder }: PropsWithChildren<Props$o>): react__default.JSX.Element;
 
-type Props$l = {
+type Props$n = {
     isNoBorder?: boolean;
 };
-declare function ModalHeader({ children, isNoBorder }: PropsWithChildren<Props$l>): react.JSX.Element;
+declare function ModalHeader({ children, isNoBorder }: PropsWithChildren<Props$n>): react.JSX.Element;
 
-type Props$k = {
+type Props$m = {
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
     maxWidth?: CSSProperties['maxWidth'];
@@ -245,14 +299,14 @@ type Props$k = {
     onClose?: () => void;
     portalTargetRef?: MutableRefObject<HTMLElement | null>;
 };
-declare function Modal({ children, width, height, maxWidth, isOpen, onClose, portalTargetRef, }: PropsWithChildren<Props$k>): react.JSX.Element | null;
+declare function Modal({ children, width, height, maxWidth, isOpen, onClose, portalTargetRef, }: PropsWithChildren<Props$m>): react.JSX.Element | null;
 declare namespace Modal {
     var Body: typeof ModalBody;
     var Header: typeof ModalHeader;
     var Footer: typeof ModalFooter;
 }
 
-type Props$j = {
+type Props$l = {
     state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
     size?: 'small' | 'medium';
     children?: ReactNode;
@@ -262,9 +316,9 @@ type Props$j = {
     showClose: true;
     onClickClose: () => void;
 });
-declare function NotificationInline({ state, size, ...props }: Props$j): react.JSX.Element;
+declare function NotificationInline({ state, size, ...props }: Props$l): react.JSX.Element;
 
-type Props$i = {
+type Props$k = {
     /** 現在のページ番号 */
     currentPage: number;
     /** トータルのページ数 */
@@ -274,9 +328,9 @@ type Props$i = {
     /** ボタンが押されたときのイベントハンドラ */
     onClick: (value: number) => void;
 };
-declare function Pagination({ currentPage, totalPage, sideNumPagesToShow, onClick }: Props$i): react.JSX.Element;
+declare function Pagination({ currentPage, totalPage, sideNumPagesToShow, onClick }: Props$k): react.JSX.Element | null;
 
-type Props$h = {
+type Props$j = {
     /** トータル件数 */
     totalSize: number;
     /** ページあたり件数 */
@@ -296,22 +350,112 @@ type Props$h = {
     /** Selectが切り替わった時のイベントハンドラ */
     onChange: (value: number) => void;
 };
-declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$h): react.JSX.Element;
+declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$j): react.JSX.Element;
+
+type TextInputErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const TextInputErrorMessage: react.ForwardRefExoticComponent<TextInputErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
 
-declare const TextInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    size?: "medium" | "large";
+type TextInputHelperMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const TextInputHelperMessage: react.ForwardRefExoticComponent<TextInputHelperMessageProps & react.RefAttributes<HTMLDivElement>>;
+
+type TextInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'className'> & {
+    size?: 'medium' | 'large';
     value: string;
     isError?: boolean;
     onClickClearButton?: () => void;
-} & {
-    /** 入力欄の末尾に表示する要素。例: アイコンやテキスト（内部実装用） */
-    after?: ReactNode;
-} & react.RefAttributes<HTMLInputElement>>;
+};
 
-type Props$g = Omit<ComponentPropsWithoutRef<typeof TextInput>, 'type' | 'onClickClearButton'>;
-declare const PasswordInput: react.ForwardRefExoticComponent<Props$g & react.RefAttributes<HTMLInputElement>>;
+type TextInputComponent = ForwardRefExoticComponent<TextInputProps & RefAttributes<HTMLInputElement>> & {
+    HelperMessage: typeof TextInputHelperMessage;
+    ErrorMessage: typeof TextInputErrorMessage;
+};
+declare const TextInput: TextInputComponent;
+
+type Props$i = Omit<ComponentPropsWithoutRef<typeof TextInput>, 'type' | 'onClickClearButton' | 'className'>;
+declare const PasswordInput: ForwardRefExoticComponent<Props$i & RefAttributes<HTMLInputElement>> & {
+    HelperMessage: ForwardRefExoticComponent<TextInputHelperMessageProps & RefAttributes<HTMLDivElement>>;
+    ErrorMessage: ForwardRefExoticComponent<TextInputErrorMessageProps & RefAttributes<HTMLDivElement>>;
+    displayName: string;
+};
+
+/**
+ * Popoverが閉じられる理由を定義する型
+ */
+type CloseReason = 'outside-click' | 'escape-key-down';
+/**
+ * Popoverのクローズイベントの型定義
+ */
+type PopoverCloseEvent = {
+    /** 閉じられた理由 */
+    reason: CloseReason;
+};
+/**
+ * Popoverの配置位置を定義する型
+ */
+type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+/**
+ * Popover Context の値の型定義
+ */
+type PopoverContextValue = {
+    isOpen: boolean;
+    triggerRef: react.RefObject<HTMLElement | null>;
+    anchorRef?: react.RefObject<HTMLElement | null>;
+    floating: ReturnType<typeof useFloating>;
+    contentId: string;
+    panelId: string;
+    onClose?: (event: PopoverCloseEvent) => void;
+};
+
+type Props$h = {
+    isOpen: boolean;
+    placement?: PopoverPlacement;
+    offset?: number;
+    onClose?: (event: PopoverCloseEvent) => void;
+    anchorRef?: React.RefObject<HTMLElement | null>;
+};
+declare function Popover({ isOpen, children, placement, offset: offsetValue, onClose, anchorRef, }: PropsWithChildren<Props$h>): react.JSX.Element;
+declare namespace Popover {
+    var Trigger: react.ForwardRefExoticComponent<{
+        children: React.ReactElement;
+    } & react.RefAttributes<HTMLElement>>;
+    var Content: react.ForwardRefExoticComponent<{
+        children?: React.ReactNode;
+    } & react.RefAttributes<HTMLDivElement>>;
+}
+
+type PopoverContentProps = {
+    children?: react.ReactNode;
+};
+declare const PopoverContent: react.ForwardRefExoticComponent<PopoverContentProps & react.RefAttributes<HTMLDivElement>>;
+
+type PopoverTriggerProps = {
+    children: react.ReactElement;
+};
+declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverTriggerProps & react.RefAttributes<HTMLElement>>;
+
+declare function PopupBody({ children }: PropsWithChildren): react.JSX.Element;
+
+declare function PopupFooter({ children }: PropsWithChildren): react__default.JSX.Element;
+
+type Props$g = PropsWithChildren<{
+    before?: ReactNode;
+}>;
+declare function PopupHeader({ children, before }: Props$g): react.JSX.Element;
 
 type Props$f = {
+    isOpen?: boolean;
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
+    onClose?: () => void;
+};
+declare function Popup({ children, isOpen: controlledIsOpen, width, height, onClose }: PropsWithChildren<Props$f>): react.JSX.Element | null;
+declare namespace Popup {
+    var Body: typeof PopupBody;
+    var Header: typeof PopupHeader;
+    var Footer: typeof PopupFooter;
+}
+
+type Props$e = {
     name?: string;
     value?: string;
     id?: string;
@@ -320,9 +464,9 @@ type Props$f = {
     isDisabled?: boolean;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Radio({ name, value, id, label, isChecked, isDisabled, onChange }: Props$f): react.JSX.Element;
+declare function Radio({ name, value, id, label, isChecked, isDisabled, onChange }: Props$e): react.JSX.Element;
 
-type Props$e = {
+type Props$d = {
     size?: 'medium' | 'large';
     placeholder?: string;
     width?: string;
@@ -331,7 +475,7 @@ type Props$e = {
     onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
     onClickClearButton?: () => void;
 };
-declare const Search: react.ForwardRefExoticComponent<Props$e & react.RefAttributes<HTMLDivElement>>;
+declare const Search: react.ForwardRefExoticComponent<Props$d & react.RefAttributes<HTMLDivElement>>;
 
 type BaseProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'className'> & {
     value: string;
@@ -375,12 +519,12 @@ type SelectOption = {
     icon?: IconName;
 };
 
-type Props$d = {
+type Props$c = {
     option: SelectOption;
 };
-declare function SelectItem({ option }: Props$d): react.JSX.Element;
+declare function SelectItem({ option }: Props$c): react.JSX.Element;
 
-type Props$c = {
+type Props$b = {
     size?: 'x-small' | 'small' | 'medium' | 'large';
     variant?: 'outline' | 'text';
     width?: CSSProperties['width'];
@@ -394,14 +538,14 @@ type Props$c = {
     isOptionSelected?: boolean;
     onChange?: (option: SelectOption | null) => void;
 };
-declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, }: PropsWithChildren<Props$c>): react.JSX.Element;
+declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, }: PropsWithChildren<Props$b>): react.JSX.Element;
 declare namespace Select {
     var Option: typeof SelectItem;
 }
 
 type SortOrder = 'ascend' | 'descend' | null;
 
-type Props$b = {
+type Props$a = {
     size?: 'x-small' | 'small' | 'medium' | 'large';
     variant?: 'outline' | 'text';
     width?: CSSProperties['width'];
@@ -412,9 +556,9 @@ type Props$b = {
     onChange?: (value: SortOrder) => void;
     onClickDeselect?: () => void;
 };
-declare function SelectSort({ size, variant, width, label, sortOrder, isDisabled, isSortKey, onChange, onClickDeselect, }: Props$b): react.JSX.Element;
+declare function SelectSort({ size, variant, width, label, sortOrder, isDisabled, isSortKey, onChange, onClickDeselect, }: Props$a): react.JSX.Element;
 
-type Props$a = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'type' | 'disabled' | 'onClick' | 'aria-disabled' | 'aria-label'> & {
+type Props$9 = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'type' | 'disabled' | 'onClick' | 'aria-disabled' | 'aria-label'> & {
     size?: 'x-small' | 'small' | 'medium' | 'large';
     width?: CSSProperties['width'];
     label: string;
@@ -423,54 +567,56 @@ type Props$a = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'type
     'aria-label': string;
     onClick?: () => void;
 };
-declare function SortButton({ size, width, label, sortOrder, isDisabled, onClick, 'aria-label': ariaLabel, ...rest }: Props$a): react.JSX.Element;
+declare function SortButton({ size, width, label, sortOrder, isDisabled, onClick, 'aria-label': ariaLabel, ...rest }: Props$9): react.JSX.Element;
 
-type Props$9 = {
+type Props$8 = {
     children?: ReactNode;
     /** レイアウトタイプ */
     layout?: 'auto' | 'equal';
 };
-declare function Tab({ children, layout }: Props$9): react.JSX.Element;
+declare function Tab({ children, layout }: Props$8): react.JSX.Element;
 declare namespace Tab {
-    var Item: ({ isSelected, ...props }: {
+    var Item: ({ isSelected, isDisabled, icon, ...props }: {
         id: string;
         isSelected?: boolean;
         isDisabled?: boolean;
+        icon?: _zenkigen_inc_component_icons.IconName;
         children?: ReactNode;
         onClick: (id: string) => void;
     }) => react.JSX.Element;
 }
 
-type Props$8 = {
+type Props$7 = {
     id: string;
     isSelected?: boolean;
     isDisabled?: boolean;
+    icon?: IconName;
     children?: ReactNode;
     onClick: (id: string) => void;
 };
-declare const TabItem: ({ isSelected, ...props }: Props$8) => react.JSX.Element;
+declare const TabItem: ({ isSelected, isDisabled, icon, ...props }: Props$7) => react.JSX.Element;
 
-type Props$7 = {
+type Props$6 = {
     children?: ReactNode;
     className?: string;
     isHeader?: boolean;
 };
-declare function TableCell({ children, className, isHeader }: Props$7): react.JSX.Element;
+declare function TableCell({ children, className, isHeader }: Props$6): react.JSX.Element;
 
-type Props$6 = {
+type Props$5 = {
     children?: ReactNode;
     isHoverBackgroundVisible?: boolean;
 };
-declare function TableRow({ children, isHoverBackgroundVisible }: Props$6): react.JSX.Element;
+declare function TableRow({ children, isHoverBackgroundVisible }: Props$5): react.JSX.Element;
 
-type Props$5 = {
+type Props$4 = {
     width?: CSSProperties['width'];
     templateRows?: CSSProperties['gridTemplateRows'];
     templateColumns?: CSSProperties['gridTemplateColumns'];
     autoColumns?: CSSProperties['gridAutoColumns'];
     autoRows?: CSSProperties['gridAutoRows'];
 };
-declare function Table({ width, templateRows, templateColumns, autoColumns, autoRows, children, }: PropsWithChildren<Props$5>): react.JSX.Element;
+declare function Table({ width, templateRows, templateColumns, autoColumns, autoRows, children, }: PropsWithChildren<Props$4>): react.JSX.Element;
 declare namespace Table {
     var Row: typeof TableRow;
     var Cell: typeof TableCell;
@@ -479,7 +625,7 @@ declare namespace Table {
 type TagColor = keyof typeof tagLightColors;
 type ColorVariant = 'normal' | 'light';
 
-type Props$4 = {
+type Props$3 = {
     id: string;
     children: string;
     color: TagColor;
@@ -493,13 +639,17 @@ type Props$4 = {
     onDelete?: never;
     size?: 'x-small' | 'small' | 'medium';
 });
-declare function Tag({ id, children, color, variant, size, isEditable, onDelete }: Props$4): react.JSX.Element;
+declare function Tag({ id, children, color, variant, size, isEditable, onDelete }: Props$3): react.JSX.Element;
 
-type Props$3 = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> & {
     size?: 'medium' | 'large';
     value: string;
     height?: CSSProperties['height'];
     isError?: boolean;
+    /**
+     * @deprecated 外部から className を渡してスタイルを上書きすることは非推奨です。
+     */
+    className?: string;
 } & ({
     autoHeight: true;
     maxHeight?: CSSProperties['maxHeight'];
@@ -509,7 +659,18 @@ type Props$3 = TextareaHTMLAttributes<HTMLTextAreaElement> & {
     maxHeight?: never;
     isResizable?: boolean;
 });
-declare const TextArea: react.ForwardRefExoticComponent<Props$3 & react.RefAttributes<HTMLTextAreaElement>>;
+
+type TextAreaErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const TextAreaErrorMessage: react.ForwardRefExoticComponent<TextAreaErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
+
+type TextAreaHelperMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const TextAreaHelperMessage: react.ForwardRefExoticComponent<TextAreaHelperMessageProps & react.RefAttributes<HTMLDivElement>>;
+
+type TextAreaComponent = ForwardRefExoticComponent<TextAreaProps & RefAttributes<HTMLTextAreaElement>> & {
+    HelperMessage: typeof TextAreaHelperMessage;
+    ErrorMessage: typeof TextAreaErrorMessage;
+};
+declare const TextArea: TextAreaComponent;
 
 type ToastState = 'success' | 'error' | 'warning' | 'information';
 
@@ -560,4 +721,4 @@ type Props = {
 };
 declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: PropsWithChildren<Props>): react.JSX.Element;
 
-export { Avatar, Breadcrumb, Button, Checkbox, type ColorVariant, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, 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, 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 };