@simplysm/solid 13.0.96 → 13.0.98

package/README.md

@@ -1,158 +1,349 @@
 # @simplysm/solid
 
-SolidJS + Tailwind CSS 기반 엔터프라이즈 UI 컴포넌트 라이브러리. 폼 컨트롤, 데이터 테이블, 다이얼로그, 알림, 테마, i18n, CRUD, 권한 관리 등 100+ 컴포넌트를 제공한다.
+SolidJS + Tailwind CSS UI component library for building enterprise web applications.
 
-## 설치
+## Installation
 
 ```bash
 npm install @simplysm/solid
 ```
 
-**주요 의존성:** SolidJS, @solidjs/router, Tailwind CSS 3, Tiptap, Tabler Icons
-**선택 의존성:** echarts (ECharts 차트 사용 시)
-
-## 문서
-
-| 카테고리 | 설명 |
-|---------|------|
-| [폼 컨트롤](docs/form-controls.md) | Button, TextInput, NumberInput, Select, Combobox, DatePicker, DateRangePicker, Checkbox, RadioGroup, CheckboxGroup, ColorPicker, RichTextEditor, Numpad, StatePreset 등 |
-| [레이아웃 & 데이터](docs/layout-data.md) | FormGroup, FormTable, Sidebar, Topbar, Table, DataSheet, List, Calendar, Kanban, Pagination 등 |
-| [디스플레이 & 피드백](docs/display-feedback.md) | Card, Alert, Icon, Link, Tag, Barcode, Echarts, Dialog, Dropdown, Collapse, Tabs, Notification, Busy, Progress, Print 등 |
-| [프로바이더 & 훅](docs/providers-hooks.md) | SystemProvider, ThemeProvider, I18nProvider, SharedDataProvider, useDialog, useBusy, useNotification, createAppStructure 등 |
-| [기능 컴포넌트](docs/features.md) | CrudSheet, CrudDetail, DataSelectButton, SharedDataSelect, SharedDataSelectButton, SharedDataSelectList, PermissionTable, AddressSearch 등 |
-
-## 빠른 시작
-
-### SystemProvider (권장)
-
-`SystemProvider`는 모든 필수 프로바이더를 한 번에 감싸는 편의 컴포넌트다.
+## API Overview
+
+### Form Controls
+
+| API | Type | Description |
+|-----|------|-------------|
+| `Button` | Component | Themed button with ripple effect |
+| `Select` | Component | Single/multiple select dropdown |
+| `Select.Item` | Sub-component | Selectable item within Select |
+| `Select.Header` | Sub-component | Custom header slot for Select dropdown |
+| `Select.Action` | Sub-component | Action button appended to Select trigger |
+| `Select.ItemTemplate` | Sub-component | Render template for items in `items` mode |
+| `Combobox` | Component | Autocomplete with async search |
+| `Combobox.Item` | Sub-component | Selectable item within Combobox |
+| `Combobox.ItemTemplate` | Sub-component | Render template for loaded items |
+| `TextInput` | Component | Text input field with format support |
+| `TextInput.Prefix` | Sub-component | Prefix slot for TextInput |
+| `NumberInput` | Component | Numeric input with grouping and formatting |
+| `NumberInput.Prefix` | Sub-component | Prefix slot for NumberInput |
+| `DatePicker` | Component | Date input (year/month/date units) |
+| `DateTimePicker` | Component | DateTime input (minute/second units) |
+| `TimePicker` | Component | Time input (minute/second units) |
+| `Textarea` | Component | Auto-resizing textarea |
+| `Checkbox` | Component | Checkbox with indicator |
+| `Radio` | Component | Radio button with indicator |
+| `CheckboxGroup` | Component | Multi-select checkbox group |
+| `CheckboxGroup.Item` | Sub-component | Item within CheckboxGroup |
+| `RadioGroup` | Component | Single-select radio group |
+| `RadioGroup.Item` | Sub-component | Item within RadioGroup |
+| `ColorPicker` | Component | Native color picker input |
+| `DateRangePicker` | Component | Date range with period type selector |
+| `RichTextEditor` | Component | Tiptap-based rich text editor |
+| `Numpad` | Component | Numeric keypad for touch input |
+| `StatePreset` | Component | Save/restore state presets to storage |
+| `ThemeToggle` | Component | Light/system/dark theme cycle button |
+| `Invalid` | Component | Validation indicator wrapper |
+| `fieldSurface`, `fieldBaseClass`, `fieldSizeClasses`, `fieldInputClass` | Style export | Field style tokens |
+| `getFieldWrapperClass`, `getTextareaWrapperClass` | Function | Field wrapper class builders |
+| `checkboxBaseClass`, `indicatorBaseClass`, `checkedClass`, `checkboxSizeClasses` | Style export | Checkbox style tokens |
+
+-> See [docs/form-control.md](./docs/form-control.md) for details.
+
+### Layout
+
+| API | Type | Description |
+|-----|------|-------------|
+| `FormGroup` | Component | Vertical/inline form field group |
+| `FormGroup.Item` | Sub-component | Labeled form group item |
+| `FormTable` | Component | Table-based form layout |
+| `FormTable.Row` | Sub-component | Table row |
+| `FormTable.Item` | Sub-component | Labeled table cell |
+| `Sidebar` | Component | Collapsible sidebar panel |
+| `Sidebar.Container` | Sub-component | Sidebar + content layout container |
+| `Sidebar.Menu` | Sub-component | Recursive menu with route matching |
+| `Sidebar.User` | Sub-component | User info with dropdown menu |
+| `Topbar` | Component | Top navigation bar |
+| `Topbar.Container` | Sub-component | Topbar + content layout container |
+| `Topbar.Menu` | Sub-component | Dropdown navigation menu |
+| `Topbar.User` | Sub-component | User info with dropdown |
+| `Topbar.Actions` | Sub-component | Displays actions from useTopbarActions() |
+| `useTopbarActions()` | Hook | Register topbar action elements |
+| `useTopbarActionsAccessor()` | Hook | Read topbar actions signal |
+
+-> See [docs/layout.md](./docs/layout.md) for details.
+
+### Data
+
+| API | Type | Description |
+|-----|------|-------------|
+| `Table` | Component | Styled HTML table |
+| `Table.Row` | Sub-component | Table row |
+| `Table.HeaderCell` | Sub-component | Table header cell |
+| `Table.Cell` | Sub-component | Table data cell |
+| `List` | Component | Vertical list container |
+| `ListContext` | Context | List nesting level context |
+| `useListContext()` | Hook | Access list context |
+| `Pagination` | Component | Page navigation controls |
+| `DataSheet` | Component | Spreadsheet-like data grid |
+| `DataSheet.Column` | Sub-component | Column definition |
+| `Calendar` | Component | Month calendar with value items |
+| `Kanban` | Component | Kanban board with drag-and-drop |
+| `Kanban.Lane` | Sub-component | Kanban lane |
+| `Kanban.Card` | Sub-component | Draggable card |
+
+-> See [docs/data.md](./docs/data.md) for details.
+
+### Display
+
+| API | Type | Description |
+|-----|------|-------------|
+| `Barcode` | Component | SVG barcode renderer (bwip-js) |
+| `BarcodeType` | Type | Union of supported barcode formats |
+| `Card` | Component | Elevated card container |
+| `Echarts` | Component | Apache ECharts wrapper |
+| `Icon` | Component | Tabler icon wrapper |
+| `Tag` | Component | Themed inline tag/badge |
+| `Link` | Component | Themed anchor link |
+| `Alert` | Component | Themed alert box |
+
+-> See [docs/display.md](./docs/display.md) for details.
+
+### Disclosure
+
+| API | Type | Description |
+|-----|------|-------------|
+| `Collapse` | Component | Animated expand/collapse container |
+| `Dropdown` | Component | Positioned popup with trigger |
+| `Dropdown.Trigger` | Sub-component | Click target for dropdown |
+| `Dropdown.Content` | Sub-component | Popup content |
+| `Dialog` | Component | Modal/float dialog with drag/resize |
+| `Dialog.Header` | Sub-component | Dialog title bar |
+| `Dialog.Action` | Sub-component | Header action buttons |
+| `DialogProvider` | Component | Programmatic dialog provider |
+| `useDialog()` | Hook | Open dialogs programmatically |
+| `DialogDefaultsContext` | Context | Default dialog configuration |
+| `Tabs` | Component | Tab bar container |
+| `Tabs.Tab` | Sub-component | Individual tab |
+
+-> See [docs/disclosure.md](./docs/disclosure.md) for details.
+
+### Feedback
+
+| API | Type | Description |
+|-----|------|-------------|
+| `Progress` | Component | Themed progress bar |
+| `NotificationProvider` | Component | Notification system provider |
+| `useNotification()` | Hook | Create/manage notifications |
+| `NotificationBell` | Component | Bell icon with unread badge + dropdown |
+| `NotificationBanner` | Component | Toast-style notification banner |
+| `BusyProvider` | Component | Global loading overlay provider |
+| `useBusy()` | Hook | Show/hide loading overlay |
+| `BusyContainer` | Component | Local loading overlay container |
+| `PrintProvider` | Component | Print/PDF generation provider |
+| `usePrint()` | Hook | Print to printer or generate PDF |
+| `usePrintInstance()` | Hook | Signal ready state in print content |
+| `Print` | Component | Print content wrapper |
+| `Print.Page` | Sub-component | Page break boundary |
+
+-> See [docs/feedback.md](./docs/feedback.md) for details.
+
+### Features
+
+| API | Type | Description |
+|-----|------|-------------|
+| `AddressSearchContent` | Component | Korean address search (Daum Postcode) |
+| `SharedDataSelect` | Component | Select bound to shared data |
+| `SharedDataSelectButton` | Component | Button that opens shared data dialog |
+| `SharedDataSelectList` | Component | List bound to shared data |
+| `DataSelectButton` | Component | Button that opens a data selection dialog |
+| `CrudSheet` | Component | Full CRUD data grid |
+| `CrudSheet.Column` | Sub-component | Column definition for CrudSheet |
+| `CrudSheet.Filter` | Sub-component | Filter panel slot |
+| `CrudSheet.Tools` | Sub-component | Toolbar slot |
+| `CrudDetail` | Component | CRUD detail form |
+| `CrudDetail.Header` | Sub-component | Detail header slot |
+| `PermissionTable` | Component | Permission matrix table |
+
+-> See [docs/features.md](./docs/features.md) for details.
+
+### Providers
+
+| API | Type | Description |
+|-----|------|-------------|
+| `ConfigContext` | Context | App configuration (clientName) |
+| `useConfig()` | Hook | Access app config |
+| `ConfigProvider` | Component | Provides app config |
+| `SyncStorageProvider` | Component | Pluggable storage provider |
+| `useSyncStorage()` | Hook | Access sync storage adapter |
+| `LoggerProvider` | Component | Logging adapter provider |
+| `ThemeProvider` | Component | Light/dark/system theme provider |
+| `useTheme()` | Hook | Access theme mode and toggle |
+| `ServiceClientProvider` | Component | Service client connection provider |
+| `useServiceClient()` | Hook | Access service client |
+| `SystemProvider` | Component | Composite provider (bundles common providers) |
+| `I18nProvider` | Component | Internationalization provider |
+| `useI18n()` | Hook | Access translation functions |
+| `SharedDataProvider` | Component | Shared data cache provider |
+| `useSharedData()` | Hook | Access shared data definitions |
+| `SharedDataChangeEvent` | Event | Event emitted on shared data changes |
+
+-> See [docs/providers.md](./docs/providers.md) for details.
+
+### Hooks
+
+| API | Type | Description |
+|-----|------|-------------|
+| `useLocalStorage` | Hook | localStorage-backed reactive signal |
+| `useSyncConfig` | Hook | Storage-synced config signal |
+| `useLogger` | Hook | Logging with pluggable adapter |
+| `createControllableSignal` | Hook | Controlled/uncontrolled signal pattern |
+| `createControllableStore` | Hook | Controlled/uncontrolled store pattern |
+| `createIMEHandler` | Hook | IME composition handling for inputs |
+| `createMountTransition` | Hook | Mount/unmount animation state |
+| `useRouterLink` | Hook | Router navigation with modifier keys |
+
+-> See [docs/hooks.md](./docs/hooks.md) for details.
+
+### Helpers
+
+| API | Type | Description |
+|-----|------|-------------|
+| `mergeStyles` | Function | Merge CSS style objects and strings |
+| `createAppStructure` | Function | Build app menus, routes, and permissions |
+| `createSlot` | Function | Single-item slot pattern |
+| `createSlots` | Function | Multi-item slot pattern |
+
+-> See [docs/helpers.md](./docs/helpers.md) for details.
+
+### Styles + Directives
+
+| API | Type | Description |
+|-----|------|-------------|
+| `border`, `bg`, `text` | Style tokens | Base design tokens |
+| `state`, `ComponentSize`, `pad`, `gap` | Style tokens | Control design tokens |
+| `themeTokens`, `SemanticTheme` | Style tokens | Theme color tokens |
+| `ripple` | Directive | Pointer ripple effect |
+
+-> See [docs/styles.md](./docs/styles.md) for details.
+
+## Usage Examples
+
+### Basic Form
 
 ```tsx
-import { SystemProvider } from "@simplysm/solid";
+import { createSignal } from "solid-js";
+import { TextInput, NumberInput, Button, Select } from "@simplysm/solid";
+
+function OrderForm() {
+  const [name, setName] = createSignal("");
+  const [quantity, setQuantity] = createSignal<number>();
+  const [status, setStatus] = createSignal<string>();
 
-function App() {
   return (
-    <SystemProvider clientName="my-app" busyVariant="spinner">
-      <MyPage />
-    </SystemProvider>
+    <FormGroup>
+      <FormGroup.Item label="Name">
+        <TextInput value={name()} onValueChange={setName} required />
+      </FormGroup.Item>
+      <FormGroup.Item label="Quantity">
+        <NumberInput value={quantity()} onValueChange={setQuantity} min={1} />
+      </FormGroup.Item>
+      <FormGroup.Item label="Status">
+        <Select value={status()} onValueChange={setStatus} renderValue={(v) => v}>
+          <Select.Item value="pending">Pending</Select.Item>
+          <Select.Item value="confirmed">Confirmed</Select.Item>
+        </Select>
+      </FormGroup.Item>
+      <Button theme="primary" variant="solid">Submit</Button>
+    </FormGroup>
   );
 }
 ```
 
-내부적으로 다음 프로바이더를 순서대로 감싼다:
-`ConfigProvider` > `I18nProvider` > `SyncStorageProvider` > `LoggerProvider` > `NotificationProvider` > `ErrorLoggerProvider` > `PwaUpdateProvider` > `ClipboardProvider` > `ThemeProvider` > `ServiceClientProvider` > `SharedDataProvider` > `BusyProvider`
-
-### 개별 프로바이더 조합
+### Dialog + Notification
 
 ```tsx
-import { ThemeProvider, I18nProvider, NotificationProvider, BusyProvider } from "@simplysm/solid";
+import { useDialog, useNotification, Button } from "@simplysm/solid";
 
-function App() {
-  return (
-    <ThemeProvider>
-      <I18nProvider>
-        <NotificationProvider>
-          <BusyProvider>
-            <MyPage />
-          </BusyProvider>
-        </NotificationProvider>
-      </I18nProvider>
-    </ThemeProvider>
-  );
+function MyPage() {
+  const dialog = useDialog();
+  const notification = useNotification();
+
+  const handleOpen = async () => {
+    const result = await dialog.show(
+      MyDialogContent,
+      { title: "Edit Item" },
+      { header: "Edit", resizable: true },
+    );
+    if (result) {
+      notification.success("Saved", "Item saved successfully.");
+    }
+  };
+
+  return <Button onClick={handleOpen}>Open Editor</Button>;
 }
 ```
 
-### 기본 폼 예제
+### Sidebar + Topbar Layout
 
 ```tsx
-import { createSignal } from "solid-js";
-import { Card, FormGroup, TextInput, Select, Button } from "@simplysm/solid";
-
-function MyPage() {
-  const [name, setName] = createSignal("");
-  const [role, setRole] = createSignal<string>();
+import { Sidebar, Topbar, ThemeToggle, NotificationBell } from "@simplysm/solid";
 
+function AppLayout() {
   return (
-    <Card>
-      <FormGroup>
-        <FormGroup.Item label="이름">
-          <TextInput value={name()} onValueChange={setName} required />
-        </FormGroup.Item>
-        <FormGroup.Item label="역할">
-          <Select
-            value={role()}
-            onValueChange={setRole}
-            items={["admin", "user", "guest"]}
-            renderValue={(item) => <span>{item}</span>}
-          />
-        </FormGroup.Item>
-      </FormGroup>
-      <Button theme="primary" onClick={() => save()}>저장</Button>
-    </Card>
+    <div class="h-screen">
+      <Sidebar.Container>
+        <Sidebar>
+          <Sidebar.User name="Admin" description="admin@example.com" />
+          <Sidebar.Menu menus={appMenus} />
+        </Sidebar>
+        <Topbar.Container>
+          <Topbar>
+            <h1 class="text-lg font-bold">My App</h1>
+            <Topbar.Menu menus={navMenus} />
+            <div class="flex-1" />
+            <NotificationBell />
+            <ThemeToggle />
+          </Topbar>
+          <main class="flex-1 overflow-auto p-4">
+            {/* Page content */}
+          </main>
+        </Topbar.Container>
+      </Sidebar.Container>
+    </div>
   );
 }
 ```
 
-## 공통 타입
-
-### ComponentSize
-
-모든 폼 컨트롤과 대부분의 컴포넌트가 `size` prop을 지원한다.
+### Data Table with Busy State
 
-```typescript
-type ComponentSize = "xs" | "sm" | "md" | "lg" | "xl";
-```
+```tsx
+import { DataSheet, BusyContainer, Pagination, useBusy } from "@simplysm/solid";
 
-### SemanticTheme
+function DataPage() {
+  const busy = useBusy();
 
-의미론적 색상 테마.
+  const loadData = async () => {
+    busy.show();
+    try {
+      // fetch data
+    } finally {
+      busy.hide();
+    }
+  };
 
-```typescript
-type SemanticTheme = "base" | "primary" | "success" | "warning" | "danger" | "info";
-```
-
-### 스타일 유틸리티
-
-Tailwind 클래스 프리셋. 테마 일관성을 위해 사용한다.
-
-```typescript
-import { bg, border, text, pad, gap, themeTokens } from "@simplysm/solid";
-
-// 배경색
-bg.surface   // bg-white dark:bg-base-900
-bg.muted     // bg-base-100 dark:bg-base-800
-bg.subtle    // bg-base-200 dark:bg-base-700
-
-// 테두리색
-border.default  // border-base-200 dark:border-base-700
-
-// 텍스트색
-text.default     // text-base-900 dark:text-base-100
-text.muted       // text-base-400 dark:text-base-500
-text.placeholder // placeholder 전용
-
-// 패딩/갭 프리셋
-pad.xs  // px-1 py-0
-pad.sm  // px-1.5 py-0.5
-pad.md  // px-2 py-1
-pad.lg  // px-3 py-2
-pad.xl  // px-4 py-3
-
-gap.xs  // gap-0
-gap.sm  // gap-0.5
-gap.md  // gap-1
-gap.lg  // gap-1.5
-gap.xl  // gap-2
-
-// 테마 토큰 (semantic theme별 solid/light/text/hoverBg/border)
-themeTokens.primary.solid      // bg-primary-500 text-white
-themeTokens.primary.solidHover // hover:bg-primary-600 dark:hover:bg-primary-400
-themeTokens.primary.light      // bg-primary-100 text-primary-900
-themeTokens.primary.text       // text-primary-600 dark:text-primary-400
-themeTokens.primary.hoverBg    // hover:bg-primary-100 dark:hover:bg-primary-800/30
-themeTokens.primary.border     // border-primary-300 dark:border-primary-600
+  return (
+    <BusyContainer busy={loading()}>
+      <DataSheet items={items()} getItemKey={(item) => item.id}>
+        <DataSheet.Column header="Name" key="name">
+          {(ctx) => ctx.item.name}
+        </DataSheet.Column>
+        <DataSheet.Column header="Value" key="value" align="right">
+          {(ctx) => ctx.item.value}
+        </DataSheet.Column>
+      </DataSheet>
+      <Pagination page={page()} onPageChange={setPage} totalPageCount={10} />
+    </BusyContainer>
+  );
+}
 ```
-
-### 라이트/다크 테마
-
-`ThemeProvider`와 `useTheme()` 훅으로 라이트/다크/시스템 모드를 제어한다. localStorage에 설정이 자동 저장된다.

package/docs/data.md

@@ -0,0 +1,216 @@
+# Data Components
+
+Source: `src/components/data/**/*.tsx`
+
+## Table
+
+Styled HTML table with border-separated cells.
+
+```ts
+interface TableProps extends JSX.HTMLAttributes<HTMLTableElement> {
+  inset?: boolean;  // borderless style for embedding
+}
+```
+
+### Sub-components
+
+- **`Table.Row`** -- `<tr>` element. Extends `JSX.HTMLAttributes<HTMLTableRowElement>`.
+- **`Table.HeaderCell`** -- `<th>` element with bold text and muted background. Extends `JSX.ThHTMLAttributes<HTMLTableCellElement>`.
+- **`Table.Cell`** -- `<td>` element with borders. Extends `JSX.TdHTMLAttributes<HTMLTableCellElement>`.
+
+## List
+
+Vertical list container with nesting support via `ListContext`.
+
+```ts
+interface ListProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  inset?: boolean;  // borderless style
+}
+```
+
+Uses `ListContext` to track nesting level for indentation.
+
+### ListContext
+
+```ts
+interface ListContextValue {
+  level: number;
+}
+
+const ListContext: Context<ListContextValue>;  // default: { level: 0 }
+function useListContext(): ListContextValue;
+```
+
+### ListItem
+
+Interactive list item with selection, expansion, and ripple support.
+
+```ts
+interface ListItemProps extends Omit<JSX.HTMLAttributes<HTMLButtonElement>, "onClick"> {
+  selected?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  size?: ComponentSize;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onClick?: (e: MouseEvent) => void;
+}
+```
+
+- **`ListItem.Children`** -- Nested content rendered inside a `Collapse`. Children are wrapped in a nested `List`.
+
+## Pagination
+
+Page navigation control with first/prev/next/last buttons.
+
+```ts
+interface PaginationProps extends JSX.HTMLAttributes<HTMLElement> {
+  page: number;
+  onPageChange?: (page: number) => void;
+  totalPageCount: number;
+  displayPageCount?: number;  // default: 10
+  size?: ComponentSize;
+}
+```
+
+## DataSheet
+
+Spreadsheet-like data grid with sorting, selection, expansion, reorder, column resize, and configuration.
+
+```ts
+interface DataSheetProps<TItem> {
+  items: TItem[];
+  getItemKey: (item: TItem) => string | number | undefined;
+  getItemChildren?: (item: TItem, index: number, depth: number) => TItem[] | undefined;
+  storageKey?: string;
+  inset?: boolean;
+  page?: number;
+  onPageChange?: (page: number) => void;
+  totalPageCount?: number;
+  sorts?: SortingDef[];
+  onSortsChange?: (sorts: SortingDef[]) => void;
+  selectionMode?: "single" | "multiple";
+  selectedKeys?: (string | number)[];
+  onSelectedKeysChange?: (keys: (string | number)[]) => void;
+  onSelect?: (result: { items: TItem[]; keys: (string | number)[] }) => void;
+  onReorder?: (event: DataSheetReorderEvent<TItem>) => void;
+  class?: string;
+  style?: JSX.CSSProperties;
+  children: JSX.Element;
+}
+```
+
+### Sub-components
+
+- **`DataSheet.Column<TItem>`** -- Column definition.
+
+```ts
+interface DataSheetColumnProps<TItem> {
+  key: string;
+  header?: string | string[];
+  width?: string;
+  minWidth?: string;
+  fixed?: boolean;
+  align?: "left" | "center" | "right";
+  sortable?: boolean;
+  sortKey?: string;
+  resizable?: boolean;
+  summary?: (items: TItem[]) => JSX.Element;
+  children: (ctx: DataSheetCellContext<TItem>) => JSX.Element;
+}
+
+interface DataSheetCellContext<TItem> {
+  item: TItem;
+  index: number;
+  row: number;
+  depth: number;
+}
+```
+
+### DataSheet.Config
+
+Column visibility and order configuration dialog, persisted via storage.
+
+```ts
+interface DataSheetConfig {
+  columns: DataSheetConfigColumn[];
+}
+
+interface DataSheetConfigColumn {
+  key: string;
+  hidden?: boolean;
+  width?: string;
+}
+```
+
+### Related Types
+
+```ts
+interface SortingDef {
+  key: string;
+  desc: boolean;
+}
+
+interface DataSheetReorderEvent<TItem> {
+  item: TItem;
+  position: "before" | "after" | "inside";
+  target: TItem;
+}
+```
+
+## Calendar
+
+Month calendar displaying items on date cells.
+
+```ts
+interface CalendarProps<TValue> extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
+  year: number;
+  month: number;
+  onYearChange?: (year: number) => void;
+  onMonthChange?: (month: number) => void;
+  items?: TValue[];
+  getItemDate?: (item: TValue) => DateOnly;
+  renderItem?: (item: TValue, index: number) => JSX.Element;
+  onDateClick?: (date: DateOnly) => void;
+  size?: ComponentSize;
+  class?: string;
+  style?: JSX.CSSProperties;
+}
+```
+
+## Kanban
+
+Kanban board with drag-and-drop cards between lanes.
+
+```ts
+interface KanbanProps<TCardValue, TLaneValue> extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
+  onDrop?: (info: KanbanDropInfo<TLaneValue, TCardValue>) => void;
+  children: JSX.Element;
+}
+
+interface KanbanDropInfo<TLaneValue, TCardValue> {
+  card: KanbanCardRef<TLaneValue, TCardValue>;
+  target: KanbanDropTarget<TCardValue>;
+}
+```
+
+### Sub-components
+
+- **`Kanban.Lane<TLaneValue>`** -- Lane container.
+
+```ts
+interface KanbanLaneProps<TLaneValue> extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
+  value: TLaneValue;
+  header?: JSX.Element;
+  children: JSX.Element;
+}
+```
+
+- **`Kanban.Card<TCardValue>`** -- Draggable card.
+
+```ts
+interface KanbanCardProps<TCardValue> extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
+  value: TCardValue;
+  children: JSX.Element;
+}
+```