torch-glare 2.5.6 → 2.6.0

package/docs/components/tab-switch.md

@@ -1,170 +0,0 @@
----
-name: TabSwitch
-version: 2.4.5
-status: stable
-category: components/navigation
-tags: [tab-switch, segmented-control, view-switcher, toggle, list-cards, pills]
-last-reviewed: 2026-06-15
-bundle-size: 2.0kb
-dependencies:
-  - "class-variance-authority": "^0.7.0"
----
-
-# TabSwitch
-
-> A segmented control for picking one option from a small set — the classic List / Cards style pill switcher. The active option renders as a solid raised white pill; thin dividers sit between adjacent inactive options (never flanking the active pill). Controlled, generic over the option value, supports optional per-option icons, three sizes, and theme-aware track/labels. This is the switcher used in the DataViews header to flip between Table / Kanban / Inbox / Tree.
-
-## Installation
-
-TORCH Glare is a copy-in library: the CLI copies this component's source into your project
-(you do **not** install it from the npm package). Run `init` once, then `add`:
-
-```bash
-npx torch-glare@latest init
-npx torch-glare@latest add TabSwitch
-```
-
-`add` also copies any components, hooks, and utilities that `TabSwitch` depends on.
-
-## Import
-
-Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
-
-```tsx
-import { TabSwitch } from "@/components/TabSwitch";
-```
-
-## Quick Examples
-
-### Basic Usage (List / Cards)
-
-```typescript
-import { TabSwitch } from "@/components/TabSwitch";
-import { useState } from 'react'
-
-function Example() {
-  const [view, setView] = useState('list')
-
-  return (
-    <TabSwitch
-      value={view}
-      onValueChange={setView}
-      options={[
-        { value: 'list', label: 'List', icon: <i className="ri-layout-grid-line" /> },
-        { value: 'cards', label: 'Cards', icon: <i className="ri-grid-fill" /> },
-      ]}
-    />
-  )
-}
-```
-
-### Sizes
-
-```typescript
-<TabSwitch size="S" value={view} onValueChange={setView} options={options} />
-<TabSwitch size="M" value={view} onValueChange={setView} options={options} /> {/* default */}
-<TabSwitch size="L" value={view} onValueChange={setView} options={options} />
-```
-
-### Icons Only
-
-Omit `label` to render an icon-only switcher.
-
-```typescript
-<TabSwitch
-  value={view}
-  onValueChange={setView}
-  options={[
-    { value: 'list', icon: <i className="ri-layout-grid-line" /> },
-    { value: 'cards', icon: <i className="ri-grid-fill" /> },
-    { value: 'board', icon: <i className="ri-layout-column-line" /> },
-  ]}
-/>
-```
-
-### On a dark surface
-
-The active pill is always a solid white pill with dark text, so it stays visible on dark bars. The track and inactive labels follow the theme — pass `theme="dark"` (or render inside a `data-theme="dark"` scope) so they resolve dark-theme tokens. This is how the DataViews header uses it.
-
-```typescript
-<div data-theme="dark" className="bg-black p-2">
-  <TabSwitch theme="dark" value={view} onValueChange={setView} options={options} />
-</div>
-```
-
-### Disabled
-
-```typescript
-{/* whole control */}
-<TabSwitch disabled value={view} onValueChange={setView} options={options} />
-
-{/* a single option */}
-<TabSwitch
-  value={view}
-  onValueChange={setView}
-  options={[
-    { value: 'list', label: 'List' },
-    { value: 'cards', label: 'Cards', disabled: true },
-  ]}
-/>
-```
-
-## API Reference
-
-### TabSwitch
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `options` | `TabSwitchOption[]` | — (required) | The selectable options rendered as segments. |
-| `value` | `string` | — | The currently selected option value (controlled). |
-| `onValueChange` | `(value: string) => void` | — | Called with the option value when a segment is selected. |
-| `size` | `'S' \| 'M' \| 'L'` | `'M'` | Size of the control. |
-| `disabled` | `boolean` | `false` | Disables the whole control. |
-| `theme` | `'dark' \| 'light' \| 'default'` | — | Applies a fixed theme to the track and inactive labels (the active pill stays white). |
-| `className` | `string` | — | Additional classes merged onto the track. |
-
-`TabSwitch` is generic over the option value: `TabSwitch<T extends string>` infers `T` from `options`, so `value` and `onValueChange` are typed to your union (e.g. `'list' | 'cards'`).
-
-### TabSwitchOption
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `string` | — | Unique value for the option. |
-| `label` | `ReactNode` | `undefined` | Text or node shown for the option. Omit for an icon-only segment. |
-| `icon` | `ReactNode` | `undefined` | Optional leading icon rendered before the label. |
-| `disabled` | `boolean` | `false` | Disables this individual option. |
-
-## Accessibility
-
-- The track is a `role="tablist"`; each option is a `role="tab"` with `aria-selected` reflecting the active state.
-- Options are real `<button>` elements, so they are keyboard-focusable and activate on Enter/Space.
-
-## Notes
-
-- The active pill is intentionally a solid white pill with dark text in every theme (not derived from the per-theme selected-tab tokens), so it reads correctly on the always-dark DataViews header as well as on light surfaces.
-- TabSwitch is a controlled component — always pass both `value` and `onValueChange`.
-
-## TypeScript
-
-```typescript
-interface TabSwitchOption<T extends string = string> {
-  value: T
-  label?: React.ReactNode
-  icon?: React.ReactNode
-  disabled?: boolean
-}
-
-interface TabSwitchProps<T extends string = string>
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  options: TabSwitchOption<T>[]
-  value: T
-  onValueChange: (value: T) => void
-  size?: 'S' | 'M' | 'L'
-  theme?: 'dark' | 'light' | 'default'
-  disabled?: boolean
-}
-
-declare function TabSwitch<T extends string = string>(
-  props: TabSwitchProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> }
-): React.ReactElement
-```

package/docs/components/table-dnd-wrapper.md

@@ -1,107 +0,0 @@
----
-title: TableDnDWrapper
-description: A factory that wraps the Editor.js table tool to add drag-and-drop reordering of rows and columns, used by the TORCH Glare TextEditor
-group: Advanced
-keywords: [table-dnd-wrapper, editorjs, table, drag-and-drop, reorder, text-editor, advanced]
----
-
-# TableDnDWrapper
-
-> An advanced, non-visual module: a factory that **wraps `@editorjs/table`** and adds
-> drag-and-drop reordering of rows and columns. It is not a React component — its default
-> export, `createTableDnDClass(OriginalTable)`, returns a subclass of the Editor.js table tool
-> that you register in an Editor.js `tools` config. The TORCH Glare [TextEditor](./text-editor.md)
-> uses it internally; add it directly only when building a custom Editor.js instance.
-
-## How it works
-
-It reuses the table plugin's existing `.tc-toolbox` toggler elements — no extra UI is injected:
-
-- **Click** the toggler → opens the original popover menu (unchanged).
-- **Drag** the toggler → reorders that row or column (new behavior).
-
-## Installation
-
-TORCH Glare is a copy-in library: the CLI copies this module's source into your project
-(you do **not** install it from the npm package). Run `init` once, then `add`:
-
-```bash
-npx torch-glare@latest init
-npx torch-glare@latest add TextEditor
-```
-
-`createTableDnDClass` ships as part of the `TextEditor` folder, so `add TextEditor` copies it in.
-
-## Import
-
-```typescript
-import { createTableDnDClass } from "@/components/TextEditor";
-```
-
-## Quick Examples
-
-### Register a drag-enabled table in Editor.js
-
-```typescript
-import EditorJS from "@editorjs/editorjs";
-import Table from "@editorjs/table";
-import { createTableDnDClass } from "@/components/TextEditor";
-
-// Wrap the original table tool to add row/column drag-and-drop.
-const TableWithDnD = createTableDnDClass(Table);
-
-const editor = new EditorJS({
-  holder: "editor",
-  tools: {
-    table: {
-      class: TableWithDnD,
-      inlineToolbar: true,
-    },
-  },
-});
-```
-
-The returned class behaves exactly like `@editorjs/table` (same config, same saved data), with
-drag reordering added on top.
-
-## API Reference
-
-### Props
-
-| Member | Type | Description |
-|--------|------|-------------|
-| `default export` | `createTableDnDClass(OriginalTable) => TableClass` | Factory. Pass the Editor.js table tool class; returns a subclass that adds row/column drag-and-drop. |
-| `OriginalTable` | `TableClass` | The Editor.js table tool class to wrap (e.g. `@editorjs/table`). |
-| returns | `TableClass` | A `TableDnD` subclass to register under a `tools` key. |
-
-The returned class extends the original tool, so it inherits all of the wrapped table's config,
-props, and saved-data shape — the wrapper only augments pointer handling on the existing
-row/column togglers.
-
-### TypeScript
-
-```typescript
-// The wrapped table tool is typed loosely because it extends a third-party class.
-type TableClass = any;
-
-/**
- * Wrap an Editor.js table tool class and return a subclass that adds
- * drag-and-drop reordering of rows and columns.
- */
-export default function createTableDnDClass(OriginalTable: TableClass): TableClass;
-```
-
-## Common Patterns
-
-- **Use via TextEditor:** most apps should use [TextEditor](./text-editor.md), which applies
-  this wrapper for you — you rarely call the factory directly.
-- **Custom Editor.js:** wrap the table class once (`createTableDnDClass(Table)`) and register
-  the result; the rest of your Editor.js config is unchanged.
-- **Drag threshold:** a pointer must move a few pixels before a click becomes a drag, so normal
-  toggler clicks still open the table menu.
-
-## Related Components
-
-- [TextEditor](./text-editor.md) — the rich-text editor that uses this wrapper.
-- [ChartBlockTool](./chart-block-tool.md) — another internal Editor.js tool module.
-- [DataTable](./data-table.md) — a standalone React data table (unrelated to the Editor.js table block).