@idbrnd/design-system 1.0.1 → 1.1.1

package/README.md

@@ -9,6 +9,7 @@ npm install @idbrnd/design-system
 ```
 
 `peerDependencies`
+
 - `react@^18.3.1`
 - `react-dom@^18.3.1`
 
@@ -17,8 +18,8 @@ npm install @idbrnd/design-system
 엔트리 파일(예: `src/main.tsx`)에서 스타일을 먼저 로드한 뒤 컴포넌트를 사용합니다.
 
 ```tsx
-import '@idbrnd/design-system/style.css';
-import { FillButton } from '@idbrnd/design-system';
+import "@idbrnd/design-system/style.css";
+import { FillButton } from "@idbrnd/design-system";
 
 export default function App() {
   return <FillButton>확인</FillButton>;
@@ -38,6 +39,10 @@ export default function App() {
 - 입력
   - `Input`
   - `SearchBar`
+- 컨트롤
+  - `CheckBox`
+  - `Radio`
+  - `ToggleSwitch`
 - 피드백
   - `showToast`, `dismissToast`
   - `showSnackbar`, `dismissSnackbar`
@@ -54,16 +59,20 @@ import {
   FillButton,
   OutlineButton,
   TextButton,
-  WeakButton
-} from '@idbrnd/design-system';
+  WeakButton,
+} from "@idbrnd/design-system";
 
 function ButtonExample() {
   return (
     <>
       <FillButton variant="primary">저장</FillButton>
       <OutlineButton variant="secondary">취소</OutlineButton>
-      <TextButton size="small" variant="assistive">텍스트 버튼</TextButton>
-      <WeakButton size="xsmall" variant="error">삭제</WeakButton>
+      <TextButton size="small" variant="assistive">
+        텍스트 버튼
+      </TextButton>
+      <WeakButton size="xsmall" variant="error">
+        삭제
+      </WeakButton>
     </>
   );
 }
@@ -76,13 +85,13 @@ import {
   BasicIconButton,
   FillIconButton,
   OutlineIconButton,
-  PushBadge
-} from '@idbrnd/design-system';
+  PushBadge,
+} from "@idbrnd/design-system";
 
 function IconButtonExample() {
   return (
     <>
-      <div style={{ position: 'relative', width: 'fit-content' }}>
+      <div style={{ position: "relative", width: "fit-content" }}>
         <BasicIconButton>+</BasicIconButton>
         <PushBadge variant="dot" />
       </div>
@@ -91,9 +100,7 @@ function IconButtonExample() {
         +
       </FillIconButton>
 
-      <OutlineIconButton size="medium">
-        +
-      </OutlineIconButton>
+      <OutlineIconButton size="medium">+</OutlineIconButton>
     </>
   );
 }
@@ -102,7 +109,7 @@ function IconButtonExample() {
 `PushBadge` 단독 사용:
 
 ```tsx
-import { PushBadge } from '@idbrnd/design-system';
+import { PushBadge } from "@idbrnd/design-system";
 
 function PushBadgeExample() {
   return (
@@ -120,11 +127,11 @@ function PushBadgeExample() {
 `Input`은 `value` + `onChange`를 받는 controlled 컴포넌트입니다.
 
 ```tsx
-import { useState } from 'react';
-import { Input } from '@idbrnd/design-system';
+import { useState } from "react";
+import { Input } from "@idbrnd/design-system";
 
 function InputExample() {
-  const [email, setEmail] = useState('');
+  const [email, setEmail] = useState("");
 
   return (
     <Input
@@ -154,18 +161,18 @@ function InputExample() {
 `variant="default"`는 내부 `Input`의 `basic`에 매핑되며, `onTyping`/`typed`/`error`도 각각 대응됩니다.
 
 ```tsx
-import { useState } from 'react';
-import { SearchBar } from '@idbrnd/design-system';
+import { useState } from "react";
+import { SearchBar } from "@idbrnd/design-system";
 
 function SearchExample() {
-  const [keyword, setKeyword] = useState('');
+  const [keyword, setKeyword] = useState("");
 
   return (
     <SearchBar
       value={keyword}
       onChange={(event) => setKeyword(event.target.value)}
       onSearch={(value) => {
-        console.log('search:', value);
+        console.log("search:", value);
       }}
       placeholder="검색어를 입력하세요"
     />
@@ -173,19 +180,130 @@ function SearchExample() {
 }
 ```
 
-### 5. Spinner
+### 5. CheckBox
+
+`CheckBox`는 `checked` + `onChange`를 받는 controlled 컴포넌트입니다.
+`indeterminate`는 `checked={true}`와 함께 사용하면 체크 아이콘 대신 대시(–) 아이콘을 표시합니다.
+
+```tsx
+import { useState } from "react";
+import { CheckBox } from "@idbrnd/design-system";
+
+function CheckBoxExample() {
+  const [checked, setChecked] = useState(false);
+  const [indeterminate, setIndeterminate] = useState(false);
+
+  return (
+    <>
+      {/* 기본 */}
+      <CheckBox checked={checked} onChange={(value) => setChecked(value)} />
+
+      {/* indeterminate: checked와 함께 사용 */}
+      <CheckBox
+        checked={indeterminate}
+        indeterminate={indeterminate}
+        onChange={(value) => setIndeterminate(value)}
+      />
+
+      {/* variant / size / density */}
+      <CheckBox variant="assistive" size="small" density="compact" checked />
+
+      {/* disabled */}
+      <CheckBox checked disabled />
+    </>
+  );
+}
+```
+
+유의사항:
+
+- `indeterminate={true}`는 `checked={true}`일 때만 대시 아이콘을 표시합니다. `checked={false}`이면 빈 박스로 표시됩니다.
+- `variant`는 `"primary"(기본값)` | `"assistive"`를 지원합니다.
+- `density="compact"`은 wrapper 크기만 줄이며, 아이콘은 box width에 맞춰 `size` 기준으로 그대로 표시됩니다.
+
+### 6. Radio
+
+`Radio`는 그룹 내 단일 선택을 위한 controlled 컴포넌트입니다.
+브라우저 기본 `name` 그룹 동작에 의존하지 않으며, `checked` prop으로 직접 선택 상태를 제어합니다.
+
+```tsx
+import { useState } from "react";
+import { Radio } from "@idbrnd/design-system";
+
+function RadioGroupExample() {
+  const [selected, setSelected] = useState("");
+
+  return (
+    <>
+      {["A", "B", "C"].map((v) => (
+        <label
+          key={v}
+          style={{ display: "flex", alignItems: "center", gap: 6 }}
+        >
+          <Radio
+            name="group"
+            value={v}
+            checked={selected === v}
+            onChange={(isChecked) => isChecked && setSelected(v)}
+          />
+          Option {v}
+        </label>
+      ))}
+    </>
+  );
+}
+```
+
+유의사항:
+
+- `name`이 같아도 자동으로 하나만 선택되지 않습니다. `checked={selected === value}` 비교로 직접 제어해야 합니다.
+- `onChange`는 `(checked: boolean) => void` 시그니처이며, 클릭 시 `true`가 전달됩니다. `isChecked && setSelected(v)` 패턴으로 true일 때만 state를 변경합니다.
+- `variant`는 `"primary"(기본값)` | `"assistive"`를 지원합니다.
+
+### 7. ToggleSwitch
+
+`ToggleSwitch`는 `active` + `onChange`를 받는 controlled 컴포넌트입니다.
+
+```tsx
+import { useState } from "react";
+import { ToggleSwitch } from "@idbrnd/design-system";
+
+function ToggleSwitchExample() {
+  const [active, setActive] = useState(false);
+
+  return (
+    <>
+      <ToggleSwitch active={active} onChange={(value) => setActive(value)} />
+
+      {/* size */}
+      <ToggleSwitch size="small" active={active} onChange={setActive} />
+      <ToggleSwitch size="large" active={active} onChange={setActive} />
+
+      {/* disabled */}
+      <ToggleSwitch active disabled />
+    </>
+  );
+}
+```
+
+유의사항:
+
+- 체크 상태를 나타내는 prop 이름이 `checked`가 아닌 `active`입니다.
+- `size`는 `"small"` | `"medium"(기본값)` | `"large"`를 지원합니다.
+
+### 9. Spinner
 
 ```tsx
 import {
   Spinner,
   CustomSpinner,
   Clip,
-  FadeSpinner
-} from '@idbrnd/design-system';
+  FadeSpinner,
+} from "@idbrnd/design-system";
 
 function SpinnerExample() {
   return (
-    <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+    <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
       <Spinner />
       <CustomSpinner size={12} />
       <Clip size={24} color="var(--semantic-primary-default)" />
@@ -195,14 +313,10 @@ function SpinnerExample() {
 }
 ```
 
-### 6. Toast
+### 10. Toast
 
 ```tsx
-import {
-  FillButton,
-  showToast,
-  dismissToast
-} from '@idbrnd/design-system';
+import { FillButton, showToast, dismissToast } from "@idbrnd/design-system";
 
 function ToastExample() {
   return (
@@ -210,8 +324,8 @@ function ToastExample() {
       <FillButton
         onClick={() =>
           showToast({
-            variant: 'positive',
-            message: '저장되었습니다.'
+            variant: "positive",
+            message: "저장되었습니다.",
           })
         }
       >
@@ -226,14 +340,14 @@ function ToastExample() {
 }
 ```
 
-### 7. Snackbar
+### 11. Snackbar
 
 ```tsx
 import {
   FillButton,
   showSnackbar,
-  dismissSnackbar
-} from '@idbrnd/design-system';
+  dismissSnackbar,
+} from "@idbrnd/design-system";
 
 function SnackbarExample() {
   return (
@@ -241,12 +355,12 @@ function SnackbarExample() {
       <FillButton
         onClick={() =>
           showSnackbar({
-            variant: 'basic',
-            heading: 'Message deleted.',
-            description: 'You can undo this action.',
-            actionLabel: '실행 취소',
-            onActionClick: () => console.log('undo'),
-            closeButton: true
+            variant: "basic",
+            heading: "Message deleted.",
+            description: "You can undo this action.",
+            actionLabel: "실행 취소",
+            onActionClick: () => console.log("undo"),
+            closeButton: true,
           })
         }
       >
@@ -266,11 +380,27 @@ function SnackbarExample() {
 모든 컴포넌트의 Props 타입을 패키지에서 직접 import 할 수 있습니다.
 
 ```tsx
-import type { FillButtonProps, InputProps, ToastShowOptions } from '@idbrnd/design-system';
+import type {
+  FillButtonProps,
+  InputProps,
+  CheckBoxProps,
+  CheckBoxVariant,
+  CheckBoxSize,
+  CheckBoxDensity,
+  RadioProps,
+  RadioVariant,
+  RadioSize,
+  RadioDensity,
+  ToggleSwitchProps,
+  ToggleSwitchSize,
+  ToastShowOptions,
+} from "@idbrnd/design-system";
 ```
 
 ## 주의사항
 
-- `Input`, `SearchBar`는 controlled 방식으로 사용해야 합니다.
+- `Input`, `SearchBar`, `CheckBox`, `Radio`, `ToggleSwitch`는 controlled 방식으로 사용해야 합니다.
+- `Radio`는 `name` prop만으로 단일 선택이 보장되지 않습니다. `checked={selected === value}` 비교로 직접 제어해야 합니다.
+- `CheckBox`의 `indeterminate={true}`는 `checked={true}`와 함께 사용해야 대시 아이콘이 표시됩니다.
 - `showToast`, `showSnackbar`는 내부적으로 `document.body`에 포털을 생성하므로 브라우저 환경에서 호출해야 합니다.
 - CSS 변수/타이포그래피를 포함한 스타일을 위해 `@idbrnd/design-system/style.css` import를 권장합니다.

package/dist/components/Control/CheckBox/CheckBox.d.ts

@@ -0,0 +1,15 @@
+import { type CSSProperties, type InputHTMLAttributes } from "react";
+export type CheckBoxVariant = "primary" | "assistive";
+export type CheckBoxSize = "medium" | "small";
+export type CheckBoxDensity = "default" | "compact";
+export interface CheckBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "style" | "size" | "type" | "checked" | "defaultChecked" | "onChange"> {
+    variant?: CheckBoxVariant;
+    size?: CheckBoxSize;
+    density?: CheckBoxDensity;
+    customStyle?: CSSProperties;
+    checked?: boolean;
+    indeterminate?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+declare function CheckBox({ variant, size, density, disabled, customStyle, className, checked, indeterminate, onChange, ...rest }: CheckBoxProps): import("react/jsx-runtime").JSX.Element;
+export default CheckBox;

package/dist/components/Control/Radio/Radio.d.ts

@@ -0,0 +1,13 @@
+import { type CSSProperties, type InputHTMLAttributes } from "react";
+export type RadioVariant = "primary" | "assistive";
+export type RadioSize = "medium" | "small";
+export type RadioDensity = "default" | "compact";
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "style" | "size" | "type" | "onChange"> {
+    variant?: RadioVariant;
+    size?: RadioSize;
+    density?: RadioDensity;
+    customStyle?: CSSProperties;
+    onChange?: (checked: boolean) => void;
+}
+declare function Radio({ variant, size, density, disabled, checked, customStyle, className, onChange, ...rest }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export default Radio;

package/dist/components/Control/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,10 @@
+import { type CSSProperties, type InputHTMLAttributes } from "react";
+export type ToggleSwitchSize = "small" | "medium" | "large";
+export interface ToggleSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "style" | "size" | "type" | "checked" | "defaultChecked" | "onChange"> {
+    size?: ToggleSwitchSize;
+    active?: boolean;
+    customStyle?: CSSProperties;
+    onChange?: (active: boolean) => void;
+}
+declare function ToggleSwitch({ size, active, disabled, customStyle, className, onChange, ...rest }: ToggleSwitchProps): import("react/jsx-runtime").JSX.Element;
+export default ToggleSwitch;

package/dist/index.d.ts

@@ -1,28 +1,34 @@
-import './styles/variables.css';
-import './styles/font-metrics.css';
-export { default as BasicIconButton } from './components/Button/BasicIcon/BasicIconButton';
-export { default as FillButton } from './components/Button/Fill/FillButton';
-export { default as FillIconButton } from './components/Button/FillIcon/FillIconButton';
-export { default as Input } from './components/Input/Input';
-export { default as OutlineButton } from './components/Button/Outline/OutlineButton';
-export { default as OutlineIconButton } from './components/Button/OutlineIcon/OutlineIconButton';
-export { default as PushBadge } from './components/PushBadge/PushBadge';
-export { default as SearchBar } from './components/SearchBar/SearchBar';
-export { dismissSnackbar, showSnackbar } from './components/Snackbar/Snackbar';
-export { default as Spinner, Clip, CustomSpinner, FadeSpinner } from './components/Spinner/Spinner';
-export { dismissToast, showToast } from './components/Toast/Toast';
-export { default as TextButton } from './components/Button/Text/TextButton';
-export { default as WeakButton } from './components/Button/Weak/WeakButton';
-export type { BasicIconButtonProps, BasicIconButtonSize } from './components/Button/BasicIcon/BasicIconButton';
-export type { FillButtonProps, FillButtonSize, FillButtonVariant, FillButtonWidthType } from './components/Button/Fill/FillButton';
-export type { FillIconButtonProps, FillIconButtonSize, FillIconButtonVariant } from './components/Button/FillIcon/FillIconButton';
-export type { InputProps, InputSize, DesignType, InputVariant } from './components/Input/Input';
-export type { PushBadgeProps, PushBadgeVariant } from './components/PushBadge/PushBadge';
-export type { SearchBarProps, SearchBarSize, SearchBarVariant } from './components/SearchBar/SearchBar';
-export type { SnackbarShowOptions, SnackbarVariant } from './components/Snackbar/Snackbar';
-export type { ClipProps, CustomSpinnerProps, FadeSpinnerProps } from './components/Spinner/Spinner';
-export type { ToastShowOptions, ToastVariant } from './components/Toast/Toast';
-export type { OutlineButtonProps, OutlineButtonSize, OutlineButtonVariant, OutlineButtonWidthType } from './components/Button/Outline/OutlineButton';
-export type { OutlineIconButtonProps, OutlineIconButtonSize } from './components/Button/OutlineIcon/OutlineIconButton';
-export type { TextButtonProps, TextButtonSize, TextButtonVariant, TextButtonWidthType } from './components/Button/Text/TextButton';
-export type { WeakButtonProps, WeakButtonSize, WeakButtonVariant, WeakButtonWidthType } from './components/Button/Weak/WeakButton';
+import "./styles/variables.css";
+import "./styles/font-metrics.css";
+export { default as BasicIconButton } from "./components/Button/BasicIcon/BasicIconButton";
+export { default as FillButton } from "./components/Button/Fill/FillButton";
+export { default as FillIconButton } from "./components/Button/FillIcon/FillIconButton";
+export { default as Input } from "./components/Input/Input";
+export { default as OutlineButton } from "./components/Button/Outline/OutlineButton";
+export { default as OutlineIconButton } from "./components/Button/OutlineIcon/OutlineIconButton";
+export { default as PushBadge } from "./components/Feedback/PushBadge/PushBadge";
+export { default as SearchBar } from "./components/SearchBar/SearchBar";
+export { dismissSnackbar, showSnackbar } from "./components/Feedback/Snackbar/Snackbar";
+export { default as Spinner, Clip, CustomSpinner, FadeSpinner, } from "./components/Spinner/Spinner";
+export { dismissToast, showToast } from "./components/Feedback/Toast/Toast";
+export { default as TextButton } from "./components/Button/Text/TextButton";
+export { default as WeakButton } from "./components/Button/Weak/WeakButton";
+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 { BasicIconButtonProps, BasicIconButtonSize, } from "./components/Button/BasicIcon/BasicIconButton";
+export type { FillButtonProps, FillButtonSize, FillButtonVariant, FillButtonWidthType, } from "./components/Button/Fill/FillButton";
+export type { FillIconButtonProps, FillIconButtonSize, FillIconButtonVariant, } from "./components/Button/FillIcon/FillIconButton";
+export type { InputProps, InputSize, DesignType, InputVariant, } from "./components/Input/Input";
+export type { PushBadgeProps, PushBadgeVariant, } from "./components/Feedback/PushBadge/PushBadge";
+export type { SearchBarProps, SearchBarSize, SearchBarVariant, } from "./components/SearchBar/SearchBar";
+export type { SnackbarShowOptions, SnackbarVariant, } from "./components/Feedback/Snackbar/Snackbar";
+export type { ClipProps, CustomSpinnerProps, FadeSpinnerProps, } from "./components/Spinner/Spinner";
+export type { ToastShowOptions, ToastVariant } from "./components/Feedback/Toast/Toast";
+export type { OutlineButtonProps, OutlineButtonSize, OutlineButtonVariant, OutlineButtonWidthType, } from "./components/Button/Outline/OutlineButton";
+export type { OutlineIconButtonProps, OutlineIconButtonSize, } from "./components/Button/OutlineIcon/OutlineIconButton";
+export type { TextButtonProps, TextButtonSize, TextButtonVariant, TextButtonWidthType, } from "./components/Button/Text/TextButton";
+export type { WeakButtonProps, WeakButtonSize, WeakButtonVariant, WeakButtonWidthType, } from "./components/Button/Weak/WeakButton";
+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";