@simplysm/solid 13.0.85 → 13.0.86

package/docs/form-controls.md

@@ -1,520 +1,378 @@
-# Form Controls
+# 폼 컨트롤
 
 ## Button
 
-```typescript
-interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
-  theme?: "base" | "primary" | "info" | "success" | "warning" | "danger";
-  variant?: "solid" | "outline" | "ghost";
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  inset?: boolean;
-}
+```tsx
+import { Button } from "@simplysm/solid";
+
+<Button theme="primary" variant="solid" size="md" onClick={handleClick}>
+  저장
+</Button>
+<Button variant="outline" disabled>취소</Button>
+<Button variant="ghost" inset>아이콘 버튼</Button>
 ```
 
-Standard button with semantic themes and visual variants.
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `theme` | `"base" \| "primary" \| "success" \| "warning" \| "danger"` | `"base"` | 색상 테마 |
+| `variant` | `"solid" \| "outline" \| "ghost"` | `"solid"` | 스타일 변형 |
+| `size` | `ComponentSize` | `"md"` | 크기 |
+| `inset` | `boolean` | `false` | 테두리 없음 |
+| `disabled` | `boolean` | `false` | 비활성화 |
 
 ---
 
 ## TextInput
 
-```typescript
-interface TextInputProps {
-  value?: string;
-  onValueChange?: (value: string) => void;
-  type?: "text" | "password" | "email";
-  placeholder?: string;
-  title?: string;
-  autocomplete?: JSX.HTMLAutocomplete;
-  disabled?: boolean;
-  readOnly?: boolean;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  inset?: boolean;
-  format?: string;
-  required?: boolean;
-  minLength?: number;
-  maxLength?: number;
-  pattern?: string | RegExp;
-  validate?: (value: string) => string | undefined;
-  lazyValidation?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-  children?: JSX.Element;
-}
-```
+```tsx
+import { TextInput } from "@simplysm/solid";
 
-Single-line text input with format masking and validation. Use `format` for input masks (e.g. `"XXX-XXXX-XXXX"`).
+<TextInput value={name()} onValueChange={setName} placeholder="이름 입력" />
 
-**Sub-component:** `TextInput.Prefix` -- renders content before the input.
+// 접두사 슬롯
+<TextInput value={phone()} onValueChange={setPhone} format="XXX-XXXX-XXXX">
+  <TextInput.Prefix>+82</TextInput.Prefix>
+</TextInput>
+```
+
+| Prop | 타입 | 설명 |
+|------|------|------|
+| `value` | `string` | 값 |
+| `onValueChange` | `(v: string) => void` | 변경 콜백 |
+| `type` | `"text" \| "password" \| "email"` | 입력 타입 |
+| `format` | `string` | 형식 마스크 (예: `"XXX-XXXX-XXXX"`) |
+| `size`, `inset`, `disabled`, `readOnly`, `required` | | 공통 |
+| `minLength`, `maxLength`, `pattern` | | 유효성 |
+| `validate` | `(v: string) => string \| undefined` | 커스텀 유효성 |
+| `lazyValidation` | `boolean` | blur 시 검증 |
 
 ---
 
 ## NumberInput
 
-```typescript
-interface NumberInputProps {
-  value?: number;
-  onValueChange?: (value: number | undefined) => void;
-  useGrouping?: boolean;
-  minimumFractionDigits?: number;
-  placeholder?: string;
-  title?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  inset?: boolean;
-  required?: boolean;
-  min?: number;
-  max?: number;
-  validate?: (value: number | undefined) => string | undefined;
-  lazyValidation?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-  children?: JSX.Element;
-}
+```tsx
+<NumberInput value={amount()} onValueChange={setAmount} min={0} max={100} />
+<NumberInput value={price()} onValueChange={setPrice} useGrouping minimumFractionDigits={2} />
 ```
 
-Numeric input with locale-aware formatting. `useGrouping` enables thousands separators (default: `true`).
-
-**Sub-component:** `NumberInput.Prefix` -- renders content before the input.
+| Prop | 타입 | 설명 |
+|------|------|------|
+| `value` | `number` | 값 |
+| `onValueChange` | `(v: number \| undefined) => void` | 변경 콜백 |
+| `useGrouping` | `boolean` | 천단위 구분자 (기본: true) |
+| `minimumFractionDigits` | `number` | 최소 소수점 자릿수 |
+| `min`, `max` | `number` | 범위 |
 
 ---
 
-## DatePicker
+## Textarea
 
-```typescript
-interface DatePickerProps {
-  value?: DateOnly;
-  onValueChange?: (value: DateOnly | undefined) => void;
-  unit?: "year" | "month" | "date";
-  min?: DateOnly;
-  max?: DateOnly;
-  title?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  inset?: boolean;
-  required?: boolean;
-  validate?: (value: DateOnly | undefined) => string | undefined;
-  lazyValidation?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-}
+```tsx
+<Textarea value={memo()} onValueChange={setMemo} minRows={3} />
 ```
 
-Date picker with calendar dropdown. `unit` controls the selection granularity (default: `"date"`).
+Alt+Enter로 줄바꿈. `minRows`로 최소 높이 설정.
 
 ---
 
-## DateTimePicker
+## DatePicker
 
-```typescript
-interface DateTimePickerProps {
-  value?: DateTime;
-  onValueChange?: (value: DateTime | undefined) => void;
-  unit?: "minute" | "second";
-  min?: DateTime;
-  max?: DateTime;
-  title?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  inset?: boolean;
-  required?: boolean;
-  validate?: (value: DateTime | undefined) => string | undefined;
-  lazyValidation?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-}
+```tsx
+import { DatePicker } from "@simplysm/solid";
+
+<DatePicker value={date()} onValueChange={setDate} />
+<DatePicker value={month()} onValueChange={setMonth} unit="month" />
+<DatePicker value={year()} onValueChange={setYear} unit="year" />
 ```
 
-Combined date and time picker. `unit` controls time precision (default: `"minute"`).
+| Prop | 타입 | 설명 |
+|------|------|------|
+| `value` | `DateOnly` | 값 |
+| `onValueChange` | `(v: DateOnly \| undefined) => void` | 변경 콜백 |
+| `unit` | `"year" \| "month" \| "date"` | 선택 단위 (기본: `"date"`) |
+| `min`, `max` | `DateOnly` | 범위 제한 |
 
 ---
 
-## TimePicker
+## DateTimePicker
 
-```typescript
-interface TimePickerProps {
-  value?: Time;
-  onValueChange?: (value: Time | undefined) => void;
-  unit?: "minute" | "second";
-  title?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  inset?: boolean;
-  min?: Time;
-  max?: Time;
-  required?: boolean;
-  validate?: (value: Time | undefined) => string | undefined;
-  lazyValidation?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-}
+```tsx
+<DateTimePicker value={dt()} onValueChange={setDt} unit="minute" />
 ```
 
-Time-only picker. `unit` controls precision (default: `"minute"`).
+`unit`: `"minute"` (기본) 또는 `"second"`
 
 ---
 
-## Textarea
+## TimePicker
 
-```typescript
-interface TextareaProps {
-  value?: string;
-  onValueChange?: (value: string) => void;
-  placeholder?: string;
-  title?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  inset?: boolean;
-  minRows?: number;
-  required?: boolean;
-  minLength?: number;
-  maxLength?: number;
-  validate?: (value: string) => string | undefined;
-  lazyValidation?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-}
+```tsx
+<TimePicker value={time()} onValueChange={setTime} />
 ```
 
-Auto-resizing multi-line text input. `minRows` sets the minimum height (default: `1`).
-
 ---
 
-## Select
+## DateRangePicker
 
-```typescript
-// Single select
-interface SelectSingleProps<TValue> {
-  multiple?: false;
-  value?: TValue;
-  onValueChange?: (value: TValue | undefined) => void;
-}
-
-// Multiple select
-interface SelectMultipleProps<TValue> {
-  multiple: true;
-  value?: TValue[];
-  onValueChange?: (value: TValue[]) => void;
-  tagDirection?: "horizontal" | "vertical";
-  hideSelectAll?: boolean;
-}
-
-// Common props
-interface SelectCommonProps<TValue> {
-  items?: TValue[];
-  itemChildren?: (item: TValue, index: number, depth: number) => TValue[] | undefined;
-  renderValue?: (value: TValue) => JSX.Element;
-  itemSearchText?: (item: TValue) => string;
-  isItemHidden?: (item: TValue) => boolean;
-  disabled?: boolean;
-  required?: boolean;
-  placeholder?: string;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  inset?: boolean;
-  validate?: (value: unknown) => string | undefined;
-  lazyValidation?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-  children?: JSX.Element;
-}
-```
+기간 유형(일/월/범위) 선택과 시작/종료일 입력을 조합한 날짜 범위 선택기.
 
-Dropdown select with single or multiple selection modes. Supports two usage patterns:
+```tsx
+import { DateRangePicker, type DateRangePeriodType } from "@simplysm/solid";
 
-1. **Items mode:** pass `items` array for automatic rendering.
-2. **Children mode:** use `Select.Item` sub-components for declarative composition.
+const [periodType, setPeriodType] = createSignal<DateRangePeriodType>("range");
+const [from, setFrom] = createSignal<DateOnly>();
+const [to, setTo] = createSignal<DateOnly>();
 
-Providing `itemSearchText` enables a built-in search input. `itemChildren` enables tree-structured items.
+<DateRangePicker
+  periodType={periodType()}
+  onPeriodTypeChange={setPeriodType}
+  from={from()}
+  onFromChange={setFrom}
+  to={to()}
+  onToChange={setTo}
+  required
+/>
+```
+
+| Prop | 타입 | 설명 |
+|------|------|------|
+| `periodType` | `"day" \| "month" \| "range"` | 기간 유형 |
+| `onPeriodTypeChange` | `(v: DateRangePeriodType) => void` | 기간 유형 변경 콜백 |
+| `from` | `DateOnly` | 시작일 |
+| `onFromChange` | `(v: DateOnly \| undefined) => void` | 시작일 변경 콜백 |
+| `to` | `DateOnly` | 종료일 |
+| `onToChange` | `(v: DateOnly \| undefined) => void` | 종료일 변경 콜백 |
 
-**Sub-components:**
-- `Select.Item` -- selectable option (`{ value: TValue; disabled?: boolean }`)
-- `Select.Header` -- non-selectable header row
-- `Select.Action` -- non-selectable action row
-- `Select.ItemTemplate` -- custom item renderer
+기간 유형에 따라 자동으로 from/to를 조정한다:
+- `"day"`: from = to (동일)
+- `"month"`: from = 월 첫째 날, to = 월 마지막 날
+- `"range"`: 시작일/종료일 독립 선택
 
 ---
 
-## Combobox
+## Checkbox / Radio
 
-```typescript
-interface ComboboxProps<TValue> {
-  value?: TValue;
-  onValueChange?: (value: TValue) => void;
-  loadItems: (query: string) => TValue[] | Promise<TValue[]>;
-  renderValue: (value: TValue) => JSX.Element;
-  debounceMs?: number;
-  allowsCustomValue?: boolean;
-  parseCustomValue?: (text: string) => TValue;
-  disabled?: boolean;
-  required?: boolean;
-  validate?: (value: TValue | undefined) => string | undefined;
-  lazyValidation?: boolean;
-  placeholder?: string;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  inset?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-  children?: JSX.Element;
-}
-```
+```tsx
+<Checkbox checked={active()} onCheckedChange={setActive}>활성</Checkbox>
+<Checkbox checked={agreed()} onCheckedChange={setAgreed} required>약관 동의</Checkbox>
 
-Autocomplete input with async item loading. `loadItems` is called with the current query string. `debounceMs` controls the debounce delay (default: `300`). Set `allowsCustomValue` to accept free-form input not in the results list.
-
-**Sub-components:** `Combobox.Item`, `Combobox.ItemTemplate`
+<RadioGroup value={role()} onValueChange={setRole}>
+  <Radio value="admin">관리자</Radio>
+  <Radio value="user">사용자</Radio>
+</RadioGroup>
+```
 
 ---
 
-## Checkbox
-
-```typescript
-interface CheckboxProps {
-  checked?: boolean;
-  onCheckedChange?: (checked: boolean) => void;
-  disabled?: boolean;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  inset?: boolean;
-  inline?: boolean;
-  required?: boolean;
-  validate?: (checked: boolean) => string | undefined;
-  lazyValidation?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-  children?: JSX.Element;
-}
-```
+## CheckboxGroup
 
-Standard checkbox with label support via `children`.
+다중 선택을 위한 체크박스 그룹.
 
----
+```tsx
+import { CheckboxGroup } from "@simplysm/solid";
+
+const [selectedTags, setSelectedTags] = createSignal<string[]>([]);
 
-## Radio
-
-```typescript
-interface RadioProps {
-  checked?: boolean;
-  onCheckedChange?: (checked: boolean) => void;
-  disabled?: boolean;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  inset?: boolean;
-  inline?: boolean;
-  required?: boolean;
-  validate?: (checked: boolean) => string | undefined;
-  lazyValidation?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-  children?: JSX.Element;
-}
+<CheckboxGroup value={selectedTags()} onValueChange={setSelectedTags} required>
+  <CheckboxGroup.Item value="frontend">프론트엔드</CheckboxGroup.Item>
+  <CheckboxGroup.Item value="backend">백엔드</CheckboxGroup.Item>
+  <CheckboxGroup.Item value="devops">DevOps</CheckboxGroup.Item>
+</CheckboxGroup>
 ```
 
-Standalone radio button. For grouped radio buttons, use `RadioGroup`.
+| Prop | 타입 | 설명 |
+|------|------|------|
+| `value` | `TValue[]` | 선택된 값 배열 |
+| `onValueChange` | `(v: TValue[]) => void` | 변경 콜백 |
+| `disabled` | `boolean` | 비활성화 |
+| `inline` | `boolean` | 가로 배치 |
+| `inset` | `boolean` | 테두리 없음 |
+| `required` | `boolean` | 최소 1개 선택 필수 |
+| `validate` | `(v: TValue[]) => string \| undefined` | 커스텀 유효성 |
 
 ---
 
-## CheckboxGroup
-
-```typescript
-interface CheckboxGroupProps<TValue> {
-  value?: TValue[];
-  onValueChange?: (value: TValue[]) => void;
-  disabled?: boolean;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  inline?: boolean;
-  inset?: boolean;
-  required?: boolean;
-  validate?: (value: TValue[]) => string | undefined;
-  lazyValidation?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-  children?: JSX.Element;
-}
-```
+## Select
 
-Group of checkboxes with multi-value binding.
+```tsx
+// 단일 선택 (items 모드)
+<Select
+  value={selected()}
+  onValueChange={setSelected}
+  items={options}
+  renderValue={(item) => <span>{item.label}</span>}
+  itemSearchText={(item) => item.label}
+/>
 
-**Sub-component:** `CheckboxGroup.Item` -- `{ value: TValue; disabled?: boolean; children?: JSX.Element }`
+// 다중 선택
+<Select
+  multiple
+  value={selectedList()}
+  onValueChange={setSelectedList}
+  items={options}
+  renderValue={(item) => <span>{item.label}</span>}
+  tagDirection="horizontal"
+/>
 
----
+// 트리 구조
+<Select
+  value={selected()}
+  onValueChange={setSelected}
+  items={categories}
+  itemChildren={(item) => item.children}
+  renderValue={(item) => <span>{item.name}</span>}
+/>
 
-## RadioGroup
-
-```typescript
-interface RadioGroupProps<TValue> {
-  value?: TValue;
-  onValueChange?: (value: TValue) => void;
-  disabled?: boolean;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  inline?: boolean;
-  inset?: boolean;
-  required?: boolean;
-  validate?: (value: TValue | undefined) => string | undefined;
-  lazyValidation?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-  children?: JSX.Element;
-}
+// Children 모드
+<Select value={v()} onValueChange={setV}>
+  <Select.Item value="a">옵션 A</Select.Item>
+  <Select.Item value="b">옵션 B</Select.Item>
+  <Select.Header>그룹 헤더</Select.Header>
+</Select>
+
+// ItemTemplate (items 모드에서 드롭다운 렌더링 커스터마이징)
+<Select items={users} renderValue={(u) => <span>{u.name}</span>}>
+  <Select.ItemTemplate>
+    {(item, _index, _depth) => <span>{item.name} ({item.email})</span>}
+  </Select.ItemTemplate>
+</Select>
+
+// Action (드롭다운 하단 커스텀 액션)
+<Select items={users} renderValue={(u) => <span>{u.name}</span>}>
+  <Select.Action onClick={handleSearch}>
+    <Icon icon={IconSearch} />
+  </Select.Action>
+</Select>
 ```
 
-Group of radio buttons with single-value binding.
-
-**Sub-component:** `RadioGroup.Item` -- `{ value: TValue; disabled?: boolean; children?: JSX.Element }`
-
 ---
 
-## ColorPicker
+## Combobox
 
-```typescript
-interface ColorPickerProps {
-  value?: string;
-  onValueChange?: (value: string | undefined) => void;
-  title?: string;
-  disabled?: boolean;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  inset?: boolean;
-  required?: boolean;
-  validate?: (value: string | undefined) => string | undefined;
-  lazyValidation?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-}
-```
+```tsx
+<Combobox
+  value={user()}
+  onValueChange={setUser}
+  loadItems={async (query) => await searchUsers(query)}
+  renderValue={(u) => <span>{u.name}</span>}
+  debounceMs={300}
+/>
 
-Color picker with hex `#RRGGBB` value format.
+// 커스텀 값 허용
+<Combobox
+  allowsCustomValue
+  parseCustomValue={(text) => ({ id: 0, name: text })}
+  loadItems={loadItems}
+  renderValue={(v) => <span>{v.name}</span>}
+/>
+```
 
 ---
 
-## DateRangePicker
+## ColorPicker
 
-```typescript
-type DateRangePeriodType = "day" | "month" | "range";
-
-interface DateRangePickerProps {
-  periodType?: DateRangePeriodType;
-  onPeriodTypeChange?: (value: DateRangePeriodType) => void;
-  from?: DateOnly;
-  onFromChange?: (value: DateOnly | undefined) => void;
-  to?: DateOnly;
-  onToChange?: (value: DateOnly | undefined) => void;
-  required?: boolean;
-  disabled?: boolean;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  class?: string;
-  style?: JSX.CSSProperties;
-}
+```tsx
+<ColorPicker value={color()} onValueChange={setColor} />
+// value: "#RRGGBB" 형식
 ```
 
-Date range picker with day, month, and custom range modes. Each value (`periodType`, `from`, `to`) is independently controllable.
-
 ---
 
 ## RichTextEditor
 
-```typescript
-interface RichTextEditorProps {
-  value?: string;
-  onValueChange?: (value: string) => void;
-  disabled?: boolean;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  class?: string;
-  style?: JSX.CSSProperties;
-}
-```
+Tiptap 기반 리치 텍스트 에디터. 서식, 텍스트 스타일, 정렬, 테이블, 이미지, 하이라이트 도구 포함.
 
-Rich text editor backed by Tiptap. `value` is an HTML string.
+```tsx
+<RichTextEditor value={html()} onValueChange={setHtml} />
+```
 
 ---
 
 ## Numpad
 
-```typescript
-interface NumpadProps {
-  value?: number;
-  onValueChange?: (value: number | undefined) => void;
-  placeholder?: string;
-  required?: boolean;
-  inputDisabled?: boolean;
-  withEnterButton?: boolean;
-  withMinusButton?: boolean;
-  onEnterButtonClick?: () => void;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  class?: string;
-  style?: JSX.CSSProperties;
-}
-```
+터치 환경용 숫자 키패드 컴포넌트.
 
-On-screen number pad with optional enter and minus buttons.
+```tsx
+import { Numpad } from "@simplysm/solid";
 
----
+<Numpad value={quantity()} onValueChange={setQuantity} />
 
-## StatePreset
+// Enter 버튼 + 마이너스 버튼 포함
+<Numpad
+  value={amount()}
+  onValueChange={setAmount}
+  withEnterButton
+  withMinusButton
+  onEnterButtonClick={() => submit()}
+  required
+/>
 
-```typescript
-interface StatePresetProps<TValue> {
-  storageKey: string;
-  value: TValue;
-  onValueChange: (value: TValue) => void;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  class?: string;
-  style?: JSX.CSSProperties;
-}
+// 직접 입력 비활성화 (키패드만 사용)
+<Numpad value={code()} onValueChange={setCode} inputDisabled />
 ```
 
-Save and restore named presets of component state to sync storage. `storageKey` uniquely identifies the state entry.
+| Prop | 타입 | 설명 |
+|------|------|------|
+| `value` | `number` | 값 |
+| `onValueChange` | `(v: number \| undefined) => void` | 변경 콜백 |
+| `withEnterButton` | `boolean` | Enter 버튼 표시 |
+| `withMinusButton` | `boolean` | 마이너스 토글 버튼 표시 |
+| `onEnterButtonClick` | `() => void` | Enter 버튼 클릭 콜백 |
+| `inputDisabled` | `boolean` | NumberInput 직접 입력 비활성화 |
+| `required` | `boolean` | 필수 입력 |
+| `size` | `ComponentSize` | 크기 |
 
 ---
 
-## ThemeToggle
-
-```typescript
-interface ThemeToggleProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-}
-```
+## StatePreset
 
-Button that cycles through light, system, and dark theme modes.
+필터/설정 상태를 프리셋으로 저장하고 복원하는 컴포넌트. localStorage에 자동 저장된다.
 
----
+```tsx
+import { StatePreset } from "@simplysm/solid";
 
-## Invalid
+const [filterState, setFilterState] = createSignal({ status: "active", keyword: "" });
 
-```typescript
-interface InvalidProps {
-  message?: string;
-  variant?: "border" | "dot";
-  lazyValidation?: boolean;
-}
+<StatePreset
+  storageKey="user-list-filter"
+  value={filterState()}
+  onValueChange={setFilterState}
+/>
 ```
 
-Validation error indicator. When `message` is non-empty, the component renders in an invalid state. Used internally by form controls and can be composed for custom validation displays.
+| Prop | 타입 | 설명 |
+|------|------|------|
+| `storageKey` | `string` | localStorage 저장 키 |
+| `value` | `TValue` | 현재 상태 값 |
+| `onValueChange` | `(v: TValue) => void` | 상태 복원 콜백 |
+| `size` | `ComponentSize` | 크기 |
+
+프리셋 칩 UI를 제공하며, 클릭으로 복원, 저장(덮어쓰기), 삭제가 가능하다. 삭제/덮어쓰기 시 실행 취소 알림을 표시한다.
 
 ---
 
-## Usage Examples
+## ThemeToggle
 
-```typescript
-import { TextInput, Select, Checkbox, DatePicker } from "@simplysm/solid";
-import { createSignal } from "solid-js";
+라이트/다크/시스템 모드 전환 버튼.
 
-const [name, setName] = createSignal("");
-const [color, setColor] = createSignal<string>();
-const [agreed, setAgreed] = createSignal(false);
-const [date, setDate] = createSignal<DateOnly>();
+```tsx
+<ThemeToggle />
+```
 
-<TextInput value={name()} onValueChange={setName} placeholder="Name" required />
+---
 
-<Select
-  items={["Red", "Green", "Blue"]}
-  value={color()}
-  onValueChange={setColor}
-  placeholder="Pick a color"
-/>
+## 유효성 검증
 
-<Checkbox checked={agreed()} onCheckedChange={setAgreed}>
-  I agree to the terms
-</Checkbox>
+모든 폼 컨트롤은 `validate`, `required`, `lazyValidation` prop을 지원한다.
 
-<DatePicker value={date()} onValueChange={setDate} unit="date" />
+```tsx
+<TextInput
+  value={email()}
+  onValueChange={setEmail}
+  required
+  validate={(v) => v.includes("@") ? undefined : "이메일 형식이 아닙니다"}
+  lazyValidation  // blur 시 검증
+/>
 ```
+
+`Invalid` 컴포넌트로 검증 에러를 감싸서 표시할 수 있다.