@idbrnd/design-system 2.3.0 → 3.0.0

package/README.md

@@ -1,6 +1,6 @@
 # @idbrnd/design-system
 
-![Version](https://img.shields.io/badge/version-2.3.0-4B5FE1?style=flat-square)
+![Version](https://img.shields.io/badge/version-3.0.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)
@@ -166,14 +166,16 @@ import { WeakButton } from "@idbrnd/design-system";
 import { BasicIconButton } from "@idbrnd/design-system";
 
 <BasicIconButton size="large"><SearchIcon /></BasicIconButton>
-<BasicIconButton size="small" disabled><SearchIcon /></BasicIconButton>
+<BasicIconButton size="large" touchArea="compact"><SearchIcon /></BasicIconButton>
+<BasicIconButton size="medium" disabled><SearchIcon /></BasicIconButton>
 ```
 
-| Prop          | 타입                                 | 기본값     | 설명               |
-| ------------- | ------------------------------------ | ---------- | ------------------ |
-| `size`        | `"small"` \| `"medium"` \| `"large"` | `"medium"` | 크기               |
-| `disabled`    | `boolean`                            | `false`    | 비활성화           |
-| `customStyle` | `CSSProperties`                      | —          | 추가 인라인 스타일 |
+| Prop          | 타입                       | 기본값      | 설명                                                                                                |
+| ------------- | -------------------------- | ----------- | --------------------------------------------------------------------------------------------------- |
+| `size`        | `"medium"` \| `"large"`    | `"medium"`  | 아이콘 크기 (large: 24×24, medium: 20×20)                                                           |
+| `touchArea`   | `"default"` \| `"compact"` | `"default"` | 인터랙션 적용 범위. large는 default(44×44)/compact(36×36) 모두 지원, medium은 default(32×32)만 지원 |
+| `disabled`    | `boolean`                  | `false`     | 비활성화                                                                                            |
+| `customStyle` | `CSSProperties`            | —           | 추가 인라인 스타일                                                                                  |
 
 ### FillIconButton
 
@@ -1854,6 +1856,7 @@ import type {
   // IconButton
   BasicIconButtonProps,
   BasicIconButtonSize,
+  BasicIconButtonTouchArea,
   FillIconButtonProps,
   FillIconButtonSize,
   FillIconButtonVariant,

package/dist/components/IconButton/BasicIcon/BasicIconButton.d.ts

@@ -1,10 +1,18 @@
-import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
-export type BasicIconButtonSize = 'large' | 'small';
-export interface BasicIconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from "react";
+export type BasicIconButtonSize = "large" | "medium";
+export type BasicIconButtonTouchArea = "default" | "compact";
+export interface BasicIconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "style"> {
     size?: BasicIconButtonSize;
+    /**
+     * 인터랙션(hover/focus/active)이 적용되는 터치 영역.
+     * - `size="large"`: `default`(44×44) / `compact`(36×36) 모두 지원
+     * - `size="medium"`: `default`(32×32)만 지원 — `compact` 전달 시 `default`로 처리됩니다.
+     * @defaultValue `'default'`
+     */
+    touchArea?: BasicIconButtonTouchArea;
     keepFocusOnClick?: boolean;
     customStyle?: CSSProperties;
     children?: ReactNode;
 }
-declare function BasicIconButton({ size, disabled, keepFocusOnClick, customStyle, onClick, className, children, type, ...rest }: BasicIconButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function BasicIconButton({ size, touchArea, disabled, keepFocusOnClick, customStyle, onClick, className, children, type, ...rest }: BasicIconButtonProps): import("react/jsx-runtime").JSX.Element;
 export default BasicIconButton;

package/dist/dev/pages/BasicIconButtonPage.d.ts

@@ -0,0 +1 @@
+export default function BasicIconButtonPage(): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -86,6 +86,7 @@ export { default as CollapseSidebarIcon } from "./CollapseSidebarIcon";
 export { default as CopyIcon } from "./CopyIcon";
 export { default as DashboardBookCheckIcon } from "./DashboardBookCheckIcon";
 export { default as DashboardDetectionIcon } from "./DashboardDetectionIcon";
+export { default as DashboardGraphIcon } from "./DashboardGraphIcon";
 export { default as DashboardHeartPulseIcon } from "./DashboardHeartPulseIcon";
 export { default as DashboardHistoryIcon } from "./DashboardHistoryIcon";
 export { default as DashboardLayerIcon } from "./DashboardLayerIcon";

package/dist/icons/iconMap.d.ts

@@ -87,6 +87,7 @@ export declare const iconMap: {
     readonly copy: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "dashboard-book-check": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "dashboard-detection": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly "dashboard-graph": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "dashboard-heart-pulse": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "dashboard-history": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "dashboard-layer": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export type { WeakButtonProps, WeakButtonSize, WeakButtonVariant, WeakButtonWidt
 export { default as BasicIconButton } from "./components/IconButton/BasicIcon/BasicIconButton";
 export { default as FillIconButton } from "./components/IconButton/FillIcon/FillIconButton";
 export { default as OutlineIconButton } from "./components/IconButton/OutlineIcon/OutlineIconButton";
-export type { BasicIconButtonProps, BasicIconButtonSize, } from "./components/IconButton/BasicIcon/BasicIconButton";
+export type { BasicIconButtonProps, BasicIconButtonSize, BasicIconButtonTouchArea, } from "./components/IconButton/BasicIcon/BasicIconButton";
 export type { FillIconButtonProps, FillIconButtonSize, FillIconButtonVariant, } from "./components/IconButton/FillIcon/FillIconButton";
 export type { OutlineIconButtonProps, OutlineIconButtonSize, } from "./components/IconButton/OutlineIcon/OutlineIconButton";
 export { default as Input } from "./components/Input/Input";