@idbrnd/design-system 3.1.0 → 3.3.0

package/README.md

@@ -1,6 +1,6 @@
 # @idbrnd/design-system
 
-![Version](https://img.shields.io/badge/version-3.1.0-4B5FE1?style=flat-square)
+![Version](https://img.shields.io/badge/version-3.3.0-4B5FE1?style=flat-square)
 ![React](https://img.shields.io/badge/React-18.3.1-61DAFB?style=flat-square&logo=react&logoColor=white)
 ![Vite](https://img.shields.io/badge/Vite-7.3.0-646CFF?style=flat-square&logo=vite&logoColor=white)
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.9.3-3178C6?style=flat-square&logo=typescript&logoColor=white)
@@ -40,6 +40,7 @@ export default function App() {
   - [OutlineButton](#outlinebutton)
   - [TextButton](#textbutton)
   - [WeakButton](#weakbutton)
+  - [TertiaryButton](#tertiarybutton)
 - [아이콘 버튼](#아이콘-버튼)
   - [BasicIconButton](#basiciconbutton)
   - [FillIconButton](#filliconbutton)
@@ -47,6 +48,7 @@ export default function App() {
 - [입력](#입력)
   - [Input](#input)
   - [SearchBar](#searchbar)
+  - [Textarea](#textarea)
 - [컨트롤](#컨트롤)
   - [CheckBox](#checkbox)
   - [Radio](#radio)
@@ -55,6 +57,7 @@ export default function App() {
   - [Toast](#toast)
   - [Snackbar](#snackbar)
   - [PushBadge](#pushbadge)
+  - [EmptyState](#emptystate)
   - [Tooltip](#tooltip)
 - [Select](#select)
 - [Dropdown](#dropdown)
@@ -160,6 +163,35 @@ import { WeakButton } from "@idbrnd/design-system";
 | `keepFocusOnClick` | `boolean`                                          | `false`      | 클릭 후 포커스 유지 |
 | `customStyle`      | `CSSProperties`                                    | —            | 추가 인라인 스타일  |
 
+### TertiaryButton
+
+아이콘 슬롯을 갖는 보조 버튼입니다. 다른 버튼과 달리 `widthType`이 없고, `leadingIcon` / `trailingIcon`으로 텍스트 앞뒤에 아이콘을 배치할 수 있습니다.
+
+```tsx
+import { TertiaryButton } from "@idbrnd/design-system";
+import { ChevronDownIcon, PlusIcon } from "@idbrnd/design-system";
+
+<TertiaryButton variant="fill">확인</TertiaryButton>
+<TertiaryButton variant="primary" leadingIcon={<PlusIcon size={16} />}>추가</TertiaryButton>
+<TertiaryButton variant="gray" size="small" trailingIcon={<ChevronDownIcon size={16} />}>더보기</TertiaryButton>
+```
+
+| Prop               | 타입                                                  | 기본값     | 설명                |
+| ------------------ | ----------------------------------------------------- | ---------- | ------------------- |
+| `variant`          | `"fill"` \| `"tinted"` \| `"gray"` \| `"primary"`     | `"fill"`   | 색상 변형           |
+| `size`             | `"small"` \| `"medium"` \| `"large"`                  | `"medium"` | 크기                |
+| `leadingIcon`      | `ReactNode`                                           | —          | 텍스트 앞 아이콘    |
+| `trailingIcon`     | `ReactNode`                                           | —          | 텍스트 뒤 아이콘    |
+| `loading`          | `boolean`                                             | `false`    | 로딩 스피너 표시    |
+| `disabled`         | `boolean`                                             | `false`    | 비활성화            |
+| `keepFocusOnClick` | `boolean`                                             | `false`    | 클릭 후 포커스 유지 |
+| `customStyle`      | `CSSProperties`                                       | —          | 추가 인라인 스타일  |
+
+유의사항:
+
+- `loading` 중에는 아이콘과 children 대신 스피너만 표시되며 클릭이 동작하지 않습니다.
+- 다른 버튼들과 달리 `widthType`이 없어 항상 콘텐츠 크기를 따릅니다.
+
 ---
 
 ## 아이콘 버튼
@@ -348,6 +380,82 @@ function SearchExample() {
 - `description`, `fixedDescriptionHeight` 등 나머지 보조 속성은 `Input`과 동일하게 사용할 수 있습니다.
 - helper 문구를 일부 케이스에서만 줄바꿈하고 싶다면 `errorMessage` 또는 `description`에 래퍼 노드를 넘겨 `maxWidth`나 `<br />`를 적용하면 됩니다.
 
+### Textarea
+
+두 줄 이상의 긴 텍스트를 입력받는 controlled 컴포넌트입니다. 한 줄 입력에는 [Input](#input)을 사용하세요.
+
+높이는 `size`와 `minRows`로 결정되며 내용이 길어져도 늘어나지 않습니다. 넘치는 내용은 입력 영역 내부에서 스크롤됩니다.
+
+```tsx
+import { useState } from "react";
+import { Textarea, TextButton, OutlineButton } from "@idbrnd/design-system";
+
+function TextareaExample() {
+  const [content, setContent] = useState("");
+
+  return (
+    <Textarea
+      headingContent="문의 내용"
+      required
+      value={content}
+      onChange={(e) => setContent(e.target.value)}
+      description="접수 후 영업일 기준 2일 내에 답변드립니다."
+      bottom
+      leadingContent
+      maxLength={500}
+      trailingContent={
+        <>
+          <TextButton size="medium" variant="assistive">
+            취소
+          </TextButton>
+          <OutlineButton size="xsmall" variant="secondary">
+            등록
+          </OutlineButton>
+        </>
+      }
+    />
+  );
+}
+```
+
+| Prop              | 타입                                                                | 기본값                | 설명                                                             |
+| ----------------- | ------------------------------------------------------------------- | --------------------- | ---------------------------------------------------------------- |
+| `designType`      | `"outline"` \| `"fill"`                                             | `"outline"`           | 입력 영역 외형                                                   |
+| `size`            | `"default"` \| `"large"`                                            | `"default"`           | 텍스트 크기와 컨테이너 높이 (108px / 112px)                      |
+| `variant`         | `"basic"` \| `"onFocus"` \| `"typed"` \| `"error"` \| `"success"`   | 자동 계산             | 수동 상태 지정. `errorMessage`가 있으면 `error`가 우선 적용      |
+| `minRows`         | `number`                                                            | `2`                   | 노출할 줄 수 = 고정 높이. 넘치면 내부 스크롤                     |
+| `width`           | `number \| string`                                                  | `"100%"`              | 루트 너비                                                        |
+| `value`           | `string`                                                            | —                     | **(필수)** 입력값                                                |
+| `onChange`        | `ChangeEventHandler<HTMLTextAreaElement>`                           | —                     | 값 변경 핸들러                                                   |
+| `heading`         | `boolean`                                                           | `true`                | 상단 라벨 표시 여부                                              |
+| `headingContent`  | `ReactNode`                                                         | `"Label"`             | 상단 라벨 내용                                                   |
+| `required`        | `boolean`                                                           | `false`               | 필수 입력 표시 및 native `required` 속성 적용                    |
+| `description`     | `ReactNode \| boolean`                                              | `false`               | 하단 안내 문구. `true`면 기본 안내 문구를 사용                   |
+| `errorMessage`    | `ReactNode`                                                         | 기본 에러 문구        | 의미 있는 값이 전달되면 에러 상태가 자동 적용되고 해당 문구 표시 |
+| `successMessage`  | `ReactNode`                                                         | —                     | `variant="success"`일 때만 노출                                  |
+| `bottom`          | `boolean`                                                           | `false`               | 입력 영역 내부 하단 영역(글자 수 · 보조 액션) 노출 여부          |
+| `leadingContent`  | `boolean`                                                           | `false`               | 하단 좌측 글자 수 카운터 **상시** 노출 여부                      |
+| `maxLength`       | `number`                                                            | `100` 또는 `1500`     | 최대 입력 글자 수. 기본값은 `leadingContent`에 따라 달라짐       |
+| `trailingContent` | `ReactNode`                                                         | —                     | 하단 우측 보조 액션. 전달한 노드를 그대로 렌더링                 |
+| `placeholder`     | `string`                                                            | `"텍스트를 입력해 주세요."` | 플레이스홀더                                                |
+| `readOnly`        | `boolean`                                                           | `false`               | 읽기 전용                                                        |
+| `disabled`        | `boolean`                                                           | `false`               | 비활성화                                                         |
+| `customStyle`     | `CSSProperties`                                                     | `{}`                  | 루트 컨테이너에 적용할 추가 인라인 스타일                        |
+
+유의사항:
+
+- `defaultValue`는 지원하지 않습니다. 반드시 `value` + `onChange`로 제어해야 합니다.
+- 컨테이너 높이는 `size`가 결정합니다(`default` 108px / `large` 112px). `trailingContent`나 카운터 유무로 높이가 달라지지 않습니다.
+- 카운터와 보조 액션은 `bottom={true}`일 때만 노출됩니다. `bottom={false}`면 하단 영역 자체가 없습니다.
+- **`leadingContent={false}`여도 한도까지 100자 이하로 남으면 카운터가 자동으로 나타납니다.** 곧 입력이 막힌다는 것을 사용자가 미리 알 수 있게 하기 위한 동작이며, 기본값 기준 1400자부터 `1400/1500`이 표시됩니다.
+- `maxLength`를 지정하지 않으면 `leadingContent={true}`일 때 `100`, `false`일 때 `1500`이 적용됩니다. 즉 **입력 길이 제한은 항상 걸립니다.**
+- `trailingContent`는 전달한 노드를 그대로 렌더링합니다. 버튼을 하나 넘기면 하나만, 둘 넘기면 둘 다 노출됩니다. 버튼이 두 개일 때는 위계가 높은 버튼을 우측에 둡니다.
+- 하단 영역은 높이 32px을 차지합니다. 보조 액션 버튼은 이 높이에 맞춰 `TextButton size="medium"`, `OutlineButton size="xsmall"` 등을 사용하세요.
+- `errorMessage`·`description`의 빈 문자열, 공백 문자열, 내용 없는 JSX 래퍼는 문구가 없는 것으로 처리합니다. 노출할 문구가 없으면 문구 영역 자체를 렌더링하지 않습니다.
+- `variant="error"`면 적색 보더와 아이콘이, `variant="success"`면 녹색 체크 아이콘이 함께 표시됩니다.
+- 사용자가 모서리를 드래그해 크기를 바꾸는 native resize는 비활성화되어 있습니다.
+- `id`, `name`, `onFocus`, `onBlur`, `autoFocus` 등 대부분의 native `<textarea>` props도 함께 사용할 수 있습니다.
+
 ---
 
 ## 컨트롤
@@ -568,6 +676,64 @@ import { PushBadge } from "@idbrnd/design-system";
 | `maxCount`    | `number`                          | `999`      | `count`가 초과하면 `{maxCount}+`로 표시 |
 | `customStyle` | `CSSProperties`                   | —          | 추가 인라인 스타일                      |
 
+### EmptyState
+
+사용자가 특정 페이지에 처음 접속했을 때나 표시할 수 있는 데이터가 없을 때 노출하는 컴포넌트입니다.
+
+```tsx
+import { EmptyState, FillButton } from "@idbrnd/design-system";
+import { FolderIcon } from "@idbrnd/design-system";
+
+<EmptyState
+  size="medium"
+  visualContent={<FolderIcon size={36} />}
+  headingContent="등록된 프로젝트가 없습니다."
+  descriptionContent={"첫 번째 프로젝트를 생성하고\n모니터링을 시작해 보세요."}
+  buttonContent={
+    <FillButton variant="primary" size="xsmall">
+      프로젝트 생성
+    </FillButton>
+  }
+/>;
+```
+
+**텍스트만 사용 (위젯·테이블 내부)**
+
+```tsx
+<EmptyState
+  size="small"
+  headingContent="검색 결과가 없습니다."
+  descriptionContent="다른 키워드로 다시 검색해 보세요."
+/>
+```
+
+| Prop                 | 타입                                   | 기본값    | 설명                                                            |
+| -------------------- | -------------------------------------- | --------- | --------------------------------------------------------------- |
+| `size`               | `"large"` \| `"medium"` \| `"small"`   | `"small"` | 배치 구역의 크기·위계에 따른 사이즈                             |
+| `visualContent`      | `ReactNode`                            | —         | 상단 시각 요소. 일러스트·아이콘·이미지·임의 컴포넌트 모두 가능  |
+| `headingContent`     | `ReactNode`                            | —         | 타이틀. 상황을 짧게 요약하며 단일 행 권장                       |
+| `descriptionContent` | `ReactNode`                            | —         | 설명. 개행(`\n`)이 그대로 반영되며 줄 수 제한 없음              |
+| `buttonContent`      | `ReactNode`                            | —         | CTA 버튼 슬롯                                                   |
+| `customStyle`        | `CSSProperties`                        | —         | 루트에 적용할 추가 인라인 스타일                                |
+| `className`          | `string`                               | —         | 루트에 추가할 클래스명                                          |
+
+**size별 스펙**
+
+|                  | `large`                          | `medium`                         | `small`                           |
+| ---------------- | -------------------------------- | -------------------------------- | --------------------------------- |
+| 시각 요소 슬롯   | 80×80                            | 48×48                            | 32×32                             |
+| 타이틀           | `--text-heading-2-semibold`      | `--text-heading-2-semibold`      | `--text-body-2-normal-semibold`   |
+| 설명             | `--text-body-1-reading-regular`  | `--text-body-1-reading-regular`  | `--text-label-2-reading-regular`  |
+| 권장 버튼        | `FillButton` `assistive`/`small` | `FillButton` `assistive`/`xsmall`| `FillButton` `assistive`/`xsmall` |
+
+유의사항:
+
+- **네 슬롯 모두 넘긴 것만 렌더됩니다.** 넘기지 않으면 해당 영역과 인접 간격이 함께 사라지므로, 화면 상황에 맞게 가볍거나 묵직하게 조합할 수 있습니다.
+- 루트는 부모를 채우고(`width`/`height: 100%`) 콘텐츠를 중앙 정렬합니다. 상하 여백은 80px입니다.
+- 전체 화면 단위에는 `size="large"` 또는 `"medium"`에 시각 요소와 버튼을 함께 두어 액션을 유도하고, 카드·테이블 내부에는 `size="small"`로 컴팩트하게 노출하는 것을 권장합니다.
+- 텍스트는 `[상황 설명 + 해결책 제안]` 구조로 작성합니다. 설명은 두 줄 이내를 권장하지만 강제되지는 않습니다.
+- `visualContent`에 넣은 노드는 슬롯 크기에 맞춰 `max-width`/`max-height: 100%`가 적용됩니다.
+
 ### Tooltip
 
 트리거 엘리먼트에 마우스를 올리거나 클릭하면 말풍선 형태의 안내 텍스트를 표시하는 컴포넌트입니다. `trigger="always"`로 항상 표시되는 고정 안내 형태로도 사용할 수 있습니다.
@@ -1864,6 +2030,9 @@ import type {
   WeakButtonSize,
   WeakButtonVariant,
   WeakButtonWidthType,
+  TertiaryButtonProps,
+  TertiaryButtonSize,
+  TertiaryButtonVariant,
 
   // IconButton
   BasicIconButtonProps,
@@ -1884,6 +2053,11 @@ import type {
   SearchBarSize,
   SearchBarVariant,
 
+  // Textarea
+  TextareaProps,
+  TextareaSize,
+  TextareaVariant,
+
   // Control
   CheckBoxProps,
   CheckBoxVariant,
@@ -1903,6 +2077,8 @@ import type {
   SnackbarVariant,
   PushBadgeProps,
   PushBadgeVariant,
+  EmptyStateProps,
+  EmptyStateSize,
   ClipProps,
   CustomSpinnerProps,
   FadeSpinnerProps,
@@ -1938,6 +2114,17 @@ import type {
   DropdownType,
   DropdownAlign,
 
+  // Chip
+  ChipProps,
+  ChipVariant,
+  ChipSize,
+  ChipGroupProps,
+  ChipGroupType,
+  ChipGroupSize,
+  FilterChipProps,
+  FilterBarProps,
+  FilterBarSize,
+
   // SegmentedControl
   SegmentedControlProps,
   SegmentedControlVariant,

package/dist/components/Feedback/EmptyState/EmptyState.d.ts

@@ -0,0 +1,30 @@
+import type { CSSProperties, ReactNode } from 'react';
+export type EmptyStateSize = 'large' | 'medium' | 'small';
+export interface EmptyStateProps {
+    /** 배치 구역의 크기·위계에 따른 사이즈 */
+    size?: EmptyStateSize;
+    /**
+     * 상단 시각 요소 슬롯. 일러스트·아이콘·이미지·임의의 컴포넌트를 모두 받는다.
+     * 넘기지 않으면 영역 자체를 렌더하지 않는다.
+     */
+    visualContent?: ReactNode;
+    /**
+     * 타이틀. 상황을 짧게 요약하며 단일 행을 권장한다.
+     * 넘기지 않으면 영역 자체를 렌더하지 않는다.
+     */
+    headingContent?: ReactNode;
+    /**
+     * 설명. 개행(`\n`)이 그대로 반영되며, 줄 수는 제한하지 않는다 (가이드상 두 줄 권장).
+     * 넘기지 않으면 영역 자체를 렌더하지 않는다.
+     */
+    descriptionContent?: ReactNode;
+    /**
+     * CTA 버튼 슬롯. 소비처가 원하는 버튼 컴포넌트를 직접 넣는다.
+     * 넘기지 않으면 영역 자체를 렌더하지 않는다.
+     */
+    buttonContent?: ReactNode;
+    customStyle?: CSSProperties;
+    className?: string;
+}
+declare function EmptyState({ size, visualContent, headingContent, descriptionContent, buttonContent, customStyle, className }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export default EmptyState;

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,21 @@
+import type { TextareaProps } from './Textarea.types';
+export type { TextareaProps, TextareaSize, TextareaVariant, DesignType } from './Textarea.types';
+declare function Textarea({ designType, // 입력 영역 외형 타입
+size, // 텍스트 크기
+variant, // 상태 variant
+minRows, // 노출할 줄 수 (고정 높이)
+width, // 루트 너비
+value, // 현재 값
+heading, // 라벨 표시 여부
+headingContent, // 라벨 내용
+required, // 라벨 우측 *
+description, // 하단 안내 문구
+errorMessage, // 에러 상태 문구
+successMessage, // 성공 상태 문구
+bottom, // 입력 영역 내부 하단 영역 표시 여부
+leadingContent, // 하단 좌측 글자 수 카운터 표시 여부
+maxLength, // 최대 입력 글자 수 (카운터 분모)
+trailingContent, // 하단 우측 슬롯
+customStyle, // 루트 커스텀 스타일
+placeholder, disabled, readOnly, id, ...rest }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export default Textarea;

package/dist/components/Textarea/Textarea.types.d.ts

@@ -0,0 +1,133 @@
+import type { CSSProperties, ReactNode, TextareaHTMLAttributes } from 'react';
+import type { DesignType } from '../Input/Input.types';
+export type { DesignType };
+/**
+ * Textarea 높이·텍스트 크기 타입.
+ * @defaultValue `'default'`
+ */
+export type TextareaSize = 'default' | 'large';
+/**
+ * Textarea 상태 variant 타입.
+ * - `basic`: 기본 상태
+ * - `onFocus`: 포커스 진입 상태(보더 강조)
+ * - `typed`: 값이 입력된 상태
+ * - `error`: 유효성 오류 상태
+ * - `success`: 유효성 통과 상태
+ */
+export type TextareaVariant = 'basic' | 'onFocus' | 'typed' | 'error' | 'success';
+/** `Textarea` 컴포넌트 public props. */
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'style' | 'className' | 'cols' | 'rows' | 'required' | 'defaultValue' | 'value'> {
+    /**
+     * 입력 영역 외형 타입.
+     * - `outline`: 테두리로 영역 구분
+     * - `fill`: 배경 채움 + 테두리로 영역 구분
+     * @defaultValue `'outline'`
+     */
+    designType?: DesignType;
+    /**
+     * 입력 영역 텍스트 크기.
+     * - `default`: 14px
+     * - `large`: 16px
+     * @defaultValue `'default'`
+     */
+    size?: TextareaSize;
+    /**
+     * 상태 variant.
+     * `errorMessage`가 있으면 `error`가 우선 적용된다.
+     * 미지정 시 값 존재 여부에 따라 `basic`/`typed`를 자동 계산한다.
+     * 실제 포커스 시각 상태는 CSS `:focus-within`으로 처리하므로,
+     * `onFocus`는 포커스 상태를 강제로 보여줘야 할 때만 사용한다.
+     */
+    variant?: TextareaVariant;
+    /**
+     * 입력 영역에 노출할 줄 수.
+     * 이 값이 곧 고정 높이가 되며, 내용이 넘치면 내부 스크롤로 처리한다.
+     * Text Field와 구분하기 위해 2줄 미만은 권장하지 않는다.
+     * @defaultValue `2`
+     */
+    minRows?: number;
+    /**
+     * 루트 너비.
+     * 미지정 시 `100%`가 적용된다.
+     */
+    width?: number | string;
+    /**
+     * Textarea 값.
+     * 이 컴포넌트는 controlled 방식만 지원하므로 필수로 전달해야 한다.
+     */
+    value: string;
+    /**
+     * 상단 heading(라벨) 표시 여부.
+     * @defaultValue `true`
+     */
+    heading?: boolean;
+    /**
+     * 상단 heading(라벨) 텍스트/노드.
+     * @defaultValue `'Label'`
+     */
+    headingContent?: ReactNode;
+    /**
+     * 필수 입력 여부.
+     * `true`면 textarea의 `required` 속성을 적용하고, heading 노출 시 `*`를 함께 표시한다.
+     * @defaultValue `false`
+     */
+    required?: boolean;
+    /**
+     * 하단 안내 문구
+     * - `false`: 안내 문구 없음
+     * - `true`: 기본 안내 문구 사용
+     * - `ReactNode`: 커스텀 안내 문구 사용
+     *
+     * 주의: `error`/`success` 상태에서는 `errorMessage`/`successMessage`가 우선 노출된다.
+     * 노출할 문구가 없으면 문구 영역(`<p>`) 자체를 렌더링하지 않는다.
+     * @defaultValue `false`
+     */
+    description?: ReactNode | boolean;
+    /**
+     * 에러 문구.
+     * 전달되면 `variant` 지정 여부와 관계없이 `error` 상태가 우선 적용된다.
+     * 빈 문자열, 공백 문자열, 내용 없는 JSX 래퍼는 에러 문구로 간주하지 않는다.
+     */
+    errorMessage?: ReactNode;
+    /**
+     * 성공 문구.
+     * `variant === 'success'`일 때만 노출되며, 상태를 바꾸지는 않는다.
+     * (성공 판정 시점은 소비처의 유효성 검사 결과에 맡긴다)
+     */
+    successMessage?: ReactNode;
+    /**
+     * 입력 영역 내부 하단 영역(글자 수 · 보조 액션) 노출 여부.
+     * @defaultValue `false`
+     */
+    bottom?: boolean;
+    /**
+     * 하단 영역 좌측 글자 수 카운터(`현재/최대`)를 **상시** 노출할지 여부.
+     * (피그마 `Leading Content`에 대응)
+     *
+     * `false`여도 한도까지 남은 글자 수가 100자 이하가 되면 카운터가 나타난다.
+     * 곧 입력이 막힌다는 것을 사용자가 미리 인지할 수 있게 하기 위함이다.
+     * (기본값 기준 1400자부터 `1400/1500`)
+     *
+     * 주의:
+     * - `bottom`이 `false`면 하단 영역 자체가 없으므로 표시되지 않는다.
+     * - 분모가 필요하므로 `maxLength`가 항상 적용된다. 즉 입력 길이 제한이 늘 걸린다.
+     * @defaultValue `false`
+     */
+    leadingContent?: boolean;
+    /**
+     * 최대 입력 글자 수. (textarea 네이티브 속성)
+     * 도달하면 추가 입력이 차단되고, 카운터가 노출될 때 분모로 표시된다.
+     *
+     * 미지정 시 기본값은 `leadingContent`에 따라 달라진다.
+     * - `true`: `100` (짧은 입력을 전제)
+     * - `false`: `1500` (긴 글 입력을 전제)
+     */
+    maxLength?: number;
+    /**
+     * 하단 영역 우측 콘텐츠(보조 액션 버튼 등).
+     * 버튼이 두 개일 경우 위계가 높은 버튼을 우측에 둔다.
+     */
+    trailingContent?: ReactNode;
+    /** 루트 컨테이너에 적용할 추가 style */
+    customStyle?: CSSProperties;
+}

package/dist/index.d.ts

@@ -20,16 +20,20 @@ export { default as Input } from "./components/Input/Input";
 export { default as SearchBar } from "./components/SearchBar/SearchBar";
 export type { InputProps, InputSize, DesignType, InputVariant, } from "./components/Input/Input";
 export type { SearchBarProps, SearchBarSize, SearchBarVariant, } from "./components/SearchBar/SearchBar";
+export { default as Textarea } from "./components/Textarea/Textarea";
+export type { TextareaProps, TextareaSize, TextareaVariant, } from "./components/Textarea/Textarea";
 export { default as CheckBox } from "./components/Control/CheckBox/CheckBox";
 export { default as Radio } from "./components/Control/Radio/Radio";
 export { default as ToggleSwitch } from "./components/Control/ToggleSwitch/ToggleSwitch";
 export type { CheckBoxProps, CheckBoxVariant, CheckBoxSize, CheckBoxDensity, } from "./components/Control/CheckBox/CheckBox";
 export type { RadioProps, RadioVariant, RadioSize, RadioDensity, } from "./components/Control/Radio/Radio";
 export type { ToggleSwitchProps, ToggleSwitchSize, } from "./components/Control/ToggleSwitch/ToggleSwitch";
+export { default as EmptyState } from "./components/Feedback/EmptyState/EmptyState";
 export { default as PushBadge } from "./components/Feedback/PushBadge/PushBadge";
 export { dismissToast, showToast } from "./components/Feedback/Toast/Toast";
 export { dismissSnackbar, showSnackbar, } from "./components/Feedback/Snackbar/Snackbar";
 export { default as Spinner, Clip, CustomSpinner, FadeSpinner, } from "./components/Spinner/Spinner";
+export type { EmptyStateProps, EmptyStateSize, } from "./components/Feedback/EmptyState/EmptyState";
 export type { PushBadgeProps, PushBadgeVariant, } from "./components/Feedback/PushBadge/PushBadge";
 export type { ToastShowOptions, ToastVariant, } from "./components/Feedback/Toast/Toast";
 export type { SnackbarShowOptions, SnackbarVariant, } from "./components/Feedback/Snackbar/Snackbar";