@idbrnd/design-system 2.3.1 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -7
- package/dist/components/IconButton/BasicIcon/BasicIconButton.d.ts +12 -4
- package/dist/components/SearchBar/SearchBar.d.ts +4 -4
- package/dist/dev/pages/BasicIconButtonPage.d.ts +1 -0
- package/dist/dev/pages/SearchBarPage.d.ts +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1238 -1234
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @idbrnd/design-system
|
|
2
2
|
|
|
3
|
-
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -166,14 +166,16 @@ import { WeakButton } from "@idbrnd/design-system";
|
|
|
166
166
|
import { BasicIconButton } from "@idbrnd/design-system";
|
|
167
167
|
|
|
168
168
|
<BasicIconButton size="large"><SearchIcon /></BasicIconButton>
|
|
169
|
-
<BasicIconButton size="
|
|
169
|
+
<BasicIconButton size="large" touchArea="compact"><SearchIcon /></BasicIconButton>
|
|
170
|
+
<BasicIconButton size="medium" disabled><SearchIcon /></BasicIconButton>
|
|
170
171
|
```
|
|
171
172
|
|
|
172
|
-
| Prop | 타입
|
|
173
|
-
| ------------- |
|
|
174
|
-
| `size` | `"
|
|
175
|
-
| `
|
|
176
|
-
| `
|
|
173
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
174
|
+
| ------------- | -------------------------- | ----------- | --------------------------------------------------------------------------------------------------- |
|
|
175
|
+
| `size` | `"medium"` \| `"large"` | `"medium"` | 아이콘 크기 (large: 24×24, medium: 20×20) |
|
|
176
|
+
| `touchArea` | `"default"` \| `"compact"` | `"default"` | 인터랙션 적용 범위. large는 default(44×44)/compact(36×36) 모두 지원, medium은 default(32×32)만 지원 |
|
|
177
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
178
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
177
179
|
|
|
178
180
|
### FillIconButton
|
|
179
181
|
|
|
@@ -1854,6 +1856,7 @@ import type {
|
|
|
1854
1856
|
// IconButton
|
|
1855
1857
|
BasicIconButtonProps,
|
|
1856
1858
|
BasicIconButtonSize,
|
|
1859
|
+
BasicIconButtonTouchArea,
|
|
1857
1860
|
FillIconButtonProps,
|
|
1858
1861
|
FillIconButtonSize,
|
|
1859
1862
|
FillIconButtonVariant,
|
|
@@ -1,10 +1,18 @@
|
|
|
1
|
-
import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from
|
|
2
|
-
export type BasicIconButtonSize =
|
|
3
|
-
export
|
|
1
|
+
import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from "react";
|
|
2
|
+
export type BasicIconButtonSize = "large" | "medium";
|
|
3
|
+
export type BasicIconButtonTouchArea = "default" | "compact";
|
|
4
|
+
export interface BasicIconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "style"> {
|
|
4
5
|
size?: BasicIconButtonSize;
|
|
6
|
+
/**
|
|
7
|
+
* 인터랙션(hover/focus/active)이 적용되는 터치 영역.
|
|
8
|
+
* - `size="large"`: `default`(44×44) / `compact`(36×36) 모두 지원
|
|
9
|
+
* - `size="medium"`: `default`(32×32)만 지원 — `compact` 전달 시 `default`로 처리됩니다.
|
|
10
|
+
* @defaultValue `'default'`
|
|
11
|
+
*/
|
|
12
|
+
touchArea?: BasicIconButtonTouchArea;
|
|
5
13
|
keepFocusOnClick?: boolean;
|
|
6
14
|
customStyle?: CSSProperties;
|
|
7
15
|
children?: ReactNode;
|
|
8
16
|
}
|
|
9
|
-
declare function BasicIconButton({ size, disabled, keepFocusOnClick, customStyle, onClick, className, children, type, ...rest }: BasicIconButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
declare function BasicIconButton({ size, touchArea, disabled, keepFocusOnClick, customStyle, onClick, className, children, type, ...rest }: BasicIconButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
10
18
|
export default BasicIconButton;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import type { InputProps, InputSize } from
|
|
1
|
+
import type { InputProps, InputSize } from "../Input/Input";
|
|
2
2
|
export type SearchBarSize = InputSize;
|
|
3
|
-
export type SearchBarVariant =
|
|
4
|
-
export interface SearchBarProps extends Omit<InputProps,
|
|
3
|
+
export type SearchBarVariant = "default" | "onTyping" | "typed" | "error";
|
|
4
|
+
export interface SearchBarProps extends Omit<InputProps, "type" | "value" | "onChange" | "variant"> {
|
|
5
5
|
value: string;
|
|
6
|
-
onChange: NonNullable<InputProps[
|
|
6
|
+
onChange: NonNullable<InputProps["onChange"]>;
|
|
7
7
|
onSearch: (value: string) => void;
|
|
8
8
|
onClear?: () => void;
|
|
9
9
|
variant?: SearchBarVariant;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function BasicIconButtonPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function SearchBarPage(): import("react/jsx-runtime").JSX.Element;
|
package/dist/index.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ export type { WeakButtonProps, WeakButtonSize, WeakButtonVariant, WeakButtonWidt
|
|
|
11
11
|
export { default as BasicIconButton } from "./components/IconButton/BasicIcon/BasicIconButton";
|
|
12
12
|
export { default as FillIconButton } from "./components/IconButton/FillIcon/FillIconButton";
|
|
13
13
|
export { default as OutlineIconButton } from "./components/IconButton/OutlineIcon/OutlineIconButton";
|
|
14
|
-
export type { BasicIconButtonProps, BasicIconButtonSize, } from "./components/IconButton/BasicIcon/BasicIconButton";
|
|
14
|
+
export type { BasicIconButtonProps, BasicIconButtonSize, BasicIconButtonTouchArea, } from "./components/IconButton/BasicIcon/BasicIconButton";
|
|
15
15
|
export type { FillIconButtonProps, FillIconButtonSize, FillIconButtonVariant, } from "./components/IconButton/FillIcon/FillIconButton";
|
|
16
16
|
export type { OutlineIconButtonProps, OutlineIconButtonSize, } from "./components/IconButton/OutlineIcon/OutlineIconButton";
|
|
17
17
|
export { default as Input } from "./components/Input/Input";
|