@idbrnd/design-system 2.3.1 → 3.0.1

package/README.md

@@ -1,6 +1,6 @@
 # @idbrnd/design-system
 
-![Version](https://img.shields.io/badge/version-2.3.1-4B5FE1?style=flat-square)
+![Version](https://img.shields.io/badge/version-3.0.1-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/components/SearchBar/SearchBar.d.ts

@@ -1,9 +1,9 @@
-import type { InputProps, InputSize } from '../Input/Input';
+import type { InputProps, InputSize } from "../Input/Input";
 export type SearchBarSize = InputSize;
-export type SearchBarVariant = 'default' | 'onTyping' | 'typed' | 'error';
-export interface SearchBarProps extends Omit<InputProps, 'type' | 'value' | 'onChange' | 'variant'> {
+export type SearchBarVariant = "default" | "onTyping" | "typed" | "error";
+export interface SearchBarProps extends Omit<InputProps, "type" | "value" | "onChange" | "variant"> {
     value: string;
-    onChange: NonNullable<InputProps['onChange']>;
+    onChange: NonNullable<InputProps["onChange"]>;
     onSearch: (value: string) => void;
     onClear?: () => void;
     variant?: SearchBarVariant;

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

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

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

@@ -0,0 +1 @@
+export default function SearchBarPage(): 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";