@idbrnd/design-system 4.5.1 → 4.7.0

package/README.md

@@ -1,6 +1,6 @@
 # @idbrnd/design-system
 
-![Version](https://img.shields.io/static/v1?label=version&message=4.5.1&color=blue&style=flat-square) <!-- x-release-please-version -->
+![Version](https://img.shields.io/static/v1?label=version&message=4.7.0&color=blue&style=flat-square) <!-- x-release-please-version -->
 ![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)
@@ -618,6 +618,7 @@ import { showToast, dismissToast } from "@idbrnd/design-system";
 showToast({ variant: "positive", message: "저장되었습니다." });
 showToast({ variant: "negative", message: "오류가 발생했습니다." });
 showToast({ variant: "basic", message: "알림 메시지입니다." });
+showToast({ variant: "basic", message: "읽을 내용이 긴 메시지입니다.", duration: 5000 });
 
 dismissToast();
 ```
@@ -628,6 +629,7 @@ dismissToast();
 | `variant`     | `"basic"` \| `"positive"` \| `"negative"` | 색상 변형 (기본값 `"basic"`)                           |
 | `icon`        | `ReactNode`                               | 사용자 지정 아이콘. 미지정 시 variant 기본 아이콘 사용 |
 | `customStyle` | `CSSProperties`                           | 추가 인라인 스타일                                     |
+| `duration`    | `number`                                  | 자동 닫힘까지의 시간(밀리초) (기본값 `3000`)           |
 
 ### Snackbar
 
@@ -2407,7 +2409,7 @@ import { Spinner, CustomSpinner, Clip, FadeSpinner } from "@idbrnd/design-system
 
 ## 아이콘
 
-피그마에서 추출한 SVG 아이콘이 React 컴포넌트로 제공됩니다. 현재 **194개** 아이콘이 포함되어 있습니다.
+피그마에서 추출한 SVG 아이콘이 React 컴포넌트로 제공됩니다.
 
 ### 개별 컴포넌트 import (권장)
 
@@ -2462,11 +2464,11 @@ const icon: IconName = "search";
 | -------------------------------------- | ---------------------------------------- |
 | 단어 구분은 `-`                        | `chevron-down`, `circle-check-fill`      |
 | fill 변형은 `-fill` 접미사             | `bell-fill`, `setting-fill`              |
-| 고정 색상 아이콘은 `dashboard-` 접두사 | `dashboard-map`, `dashboard-heart-pulse` |
+| 대시보드 아이콘은 `dashboard-` 접두사  | `dashboard-map`, `dashboard-heart-pulse` |
 
-### 고정 색상 아이콘 (dashboard-\*)
+### 고정 색상 아이콘
 
-피그마 원본 색상(`#171719` + `#4A71FF`)이 하드코딩된 아이콘입니다. `color` prop을 넘겨도 색상이 바뀌지 않습니다.
+피그마 원본 색상이 하드코딩된 아이콘입니다. `dashboard-*`는 `#171719`와 `#4A71FF`를, `ai-sparkle`과 `ai-sparkle-fill`은 `#4A71FF`에서 `#0099FF`로 이어지는 그라디언트를 사용합니다. `color` prop을 넘겨도 색상이 바뀌지 않습니다.
 
 | 아이콘 이름                    | 컴포넌트명                      |
 | ------------------------------ | ------------------------------- |
@@ -2481,6 +2483,9 @@ const icon: IconName = "search";
 | `dashboard-heart-pulse`        | `DashboardHeartPulseIcon`       |
 | `dashboard-live-monitor`       | `DashboardLiveMonitorIcon`      |
 | `dashboard-graph`              | `DashboardGraphIcon`            |
+| `dashboard-system`             | `DashboardSystemIcon`           |
+| `ai-sparkle`                   | `AiSparkleIcon`                 |
+| `ai-sparkle-fill`              | `AiSparkleFillIcon`             |
 
 ---
 

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

@@ -5,6 +5,8 @@ export interface ToastShowOptions {
     variant?: ToastVariant;
     customStyle?: CSSProperties;
     icon?: ReactNode;
+    /** 자동 닫힘까지의 시간(밀리초). 생략하면 기본 3초 */
+    duration?: number;
 }
-export declare function showToast({ message, variant, customStyle, icon }: ToastShowOptions): void;
+export declare function showToast({ message, variant, customStyle, icon, duration }: ToastShowOptions): void;
 export declare function dismissToast(): void;

package/dist/icons/generated/AiSparkleFillIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const AiSparkleFillIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default AiSparkleFillIcon;

package/dist/icons/generated/AiSparkleIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const AiSparkleIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default AiSparkleIcon;

package/dist/icons/generated/ListFilterIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const ListFilterIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default ListFilterIcon;

package/dist/icons/generated/OpenInPhoneIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const OpenInPhoneIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default OpenInPhoneIcon;

package/dist/icons/generated/PencilFillIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const PencilFillIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default PencilFillIcon;

package/dist/icons/generated/PencilIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const PencilIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default PencilIcon;

package/dist/icons/generated/SirenIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const SirenIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default SirenIcon;

package/dist/icons/generated/SparkleFillIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const SparkleFillIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default SparkleFillIcon;

package/dist/icons/generated/SparkleIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const SparkleIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default SparkleIcon;

package/dist/icons/generated/TicketIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const TicketIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default TicketIcon;

package/dist/icons/generated/index.d.ts

@@ -1,5 +1,7 @@
 export { default as AiBrainFillIcon } from "./AiBrainFillIcon";
 export { default as AiBrainIcon } from "./AiBrainIcon";
+export { default as AiSparkleFillIcon } from "./AiSparkleFillIcon";
+export { default as AiSparkleIcon } from "./AiSparkleIcon";
 export { default as ArrowDownIcon } from "./ArrowDownIcon";
 export { default as ArrowDownThickIcon } from "./ArrowDownThickIcon";
 export { default as ArrowTurnDownRightIcon } from "./ArrowTurnDownRightIcon";
@@ -135,6 +137,7 @@ export { default as IntervalUpDownIcon } from "./IntervalUpDownIcon";
 export { default as LineHorizontalIcon } from "./LineHorizontalIcon";
 export { default as LineHorizontalThickIcon } from "./LineHorizontalThickIcon";
 export { default as LinkIcon } from "./LinkIcon";
+export { default as ListFilterIcon } from "./ListFilterIcon";
 export { default as ListIcon } from "./ListIcon";
 export { default as LoadingIcon } from "./LoadingIcon";
 export { default as LockFillIcon } from "./LockFillIcon";
@@ -151,6 +154,9 @@ export { default as MoreVerticalIcon } from "./MoreVerticalIcon";
 export { default as MoreVerticalTightIcon } from "./MoreVerticalTightIcon";
 export { default as OctagonAlertFillIcon } from "./OctagonAlertFillIcon";
 export { default as OctagonAlertIcon } from "./OctagonAlertIcon";
+export { default as OpenInPhoneIcon } from "./OpenInPhoneIcon";
+export { default as PencilFillIcon } from "./PencilFillIcon";
+export { default as PencilIcon } from "./PencilIcon";
 export { default as PersonContentFillIcon } from "./PersonContentFillIcon";
 export { default as PersonContentIcon } from "./PersonContentIcon";
 export { default as PersonFillIcon } from "./PersonFillIcon";
@@ -173,9 +179,12 @@ export { default as SettingFillIcon } from "./SettingFillIcon";
 export { default as SettingIcon } from "./SettingIcon";
 export { default as ShareFillIcon } from "./ShareFillIcon";
 export { default as ShareIcon } from "./ShareIcon";
+export { default as SirenIcon } from "./SirenIcon";
 export { default as SmileFillIcon } from "./SmileFillIcon";
 export { default as SmileIcon } from "./SmileIcon";
 export { default as SoundIcon } from "./SoundIcon";
+export { default as SparkleFillIcon } from "./SparkleFillIcon";
+export { default as SparkleIcon } from "./SparkleIcon";
 export { default as SquareCheckIcon } from "./SquareCheckIcon";
 export { default as SquareMoreIcon } from "./SquareMoreIcon";
 export { default as TemplateFillIcon } from "./TemplateFillIcon";
@@ -183,6 +192,7 @@ export { default as TemplateIcon } from "./TemplateIcon";
 export { default as TextFormatIcon } from "./TextFormatIcon";
 export { default as ThermometerIcon } from "./ThermometerIcon";
 export { default as ThumbnailIcon } from "./ThumbnailIcon";
+export { default as TicketIcon } from "./TicketIcon";
 export { default as TrashIcon } from "./TrashIcon";
 export { default as TriangleExclamationFillIcon } from "./TriangleExclamationFillIcon";
 export { default as TriangleExclamationIcon } from "./TriangleExclamationIcon";

package/dist/icons/iconMap.d.ts

@@ -1,6 +1,8 @@
 export declare const iconMap: {
     readonly "ai-brain-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "ai-brain": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly "ai-sparkle-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly "ai-sparkle": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "arrow-down": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "arrow-down-thick": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "arrow-turn-down-right": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
@@ -136,6 +138,7 @@ export declare const iconMap: {
     readonly "line-horizontal": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "line-horizontal-thick": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly link: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly "list-filter": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly list: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly loading: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "lock-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
@@ -152,6 +155,9 @@ export declare const iconMap: {
     readonly "more-vertical-tight": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "octagon-alert-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "octagon-alert": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly "open-in-phone": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly "pencil-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly pencil: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "person-content-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "person-content": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "person-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
@@ -174,9 +180,12 @@ export declare const iconMap: {
     readonly setting: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "share-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly share: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly siren: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "smile-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly smile: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly sound: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly "sparkle-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly sparkle: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "square-check": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "square-more": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "template-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
@@ -184,6 +193,7 @@ export declare const iconMap: {
     readonly "text-format": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly thermometer: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly thumbnail: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly ticket: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly trash: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "triangle-exclamation-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "triangle-exclamation": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;