torch-glare 2.4.0 → 2.4.2

package/docs/components/data-table.md

@@ -11,15 +11,22 @@ keywords: [table, datatable, grid, sorting, selection, drag-drop, reorder, pagin
 
 ## 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
-npm install @tanstack/react-table @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
+npx torch-glare@latest init
+npx torch-glare@latest add DataTable
 ```
 
+`add` also copies any components, hooks, and utilities that `DataTable` depends on.
+
 ## Import
 
-```typescript
-import { DataTable } from '@torch-ui/components'
-import { ColumnDef } from '@tanstack/react-table'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { DataTable } from "@/components/DataTable";
 ```
 
 ## Quick Examples
@@ -27,7 +34,7 @@ import { ColumnDef } from '@tanstack/react-table'
 ### Basic Usage
 
 ```typescript
-import { DataTable } from '@torch-ui/components'
+import { DataTable } from "@/components/DataTable";
 import { ColumnDef } from '@tanstack/react-table'
 
 interface User {
@@ -66,7 +73,7 @@ function Example() {
 ### With Row Reordering
 
 ```typescript
-import { DataTable } from '@torch-ui/components'
+import { DataTable } from "@/components/DataTable";
 import { useState } from 'react'
 
 function ReorderableTable() {
@@ -97,8 +104,8 @@ function ReorderableTable() {
 ### With Custom Cell Rendering
 
 ```typescript
-import { DataTable } from '@torch-ui/components'
-import { Badge } from '@torch-ui/components'
+import { DataTable } from "@/components/DataTable";
+import { Badge } from "@/components/Badge";
 import { ColumnDef } from '@tanstack/react-table'
 
 interface Task {
@@ -124,7 +131,7 @@ const columns: ColumnDef<Task>[] = [
         completed: 'green',
       }[status]
 
-      return <Badge variant={variant} label={status} />
+      return <Badge color={variant} label={status} />
     },
   },
   {
@@ -147,7 +154,7 @@ function TaskTable() {
 ### With Sortable Columns
 
 ```typescript
-import { DataTable } from '@torch-ui/components'
+import { DataTable } from "@/components/DataTable";
 import { ColumnDef } from '@tanstack/react-table'
 
 interface Product {
@@ -190,8 +197,8 @@ function ProductTable() {
 ### With Actions Column
 
 ```typescript
-import { DataTable } from '@torch-ui/components'
-import { ActionButton } from '@torch-ui/components'
+import { DataTable } from "@/components/DataTable";
+import { ActionButton } from "@/components/ActionButton";
 import { ColumnDef } from '@tanstack/react-table'
 
 interface User {
@@ -246,7 +253,7 @@ function UserTable() {
 ### With Selection Handling
 
 ```typescript
-import { DataTable } from '@torch-ui/components'
+import { DataTable } from "@/components/DataTable";
 import { useState } from 'react'
 
 function SelectableTable() {
@@ -280,7 +287,7 @@ function SelectableTable() {
 ### Dark Theme
 
 ```typescript
-import { DataTable } from '@torch-ui/components'
+import { DataTable } from "@/components/DataTable";
 
 function DarkTable() {
   const columns = [
@@ -300,7 +307,7 @@ function DarkTable() {
 ### Complex Data with Nested Objects
 
 ```typescript
-import { DataTable } from '@torch-ui/components'
+import { DataTable } from "@/components/DataTable";
 import { ColumnDef } from '@tanstack/react-table'
 
 interface Order {
@@ -363,7 +370,7 @@ function OrderTable() {
 ### Empty State
 
 ```typescript
-import { DataTable } from '@torch-ui/components'
+import { DataTable } from "@/components/DataTable";
 
 function EmptyTable() {
   const columns = [
@@ -468,7 +475,7 @@ DataTable<TData extends { id: string | number }, TValue>
 ### Controlled Row Selection
 
 ```typescript
-import { DataTable } from '@torch-ui/components'
+import { DataTable } from "@/components/DataTable";
 import { useState } from 'react'
 
 function ControlledSelectionTable() {
@@ -495,8 +502,8 @@ function ControlledSelectionTable() {
 ### With Search/Filter
 
 ```typescript
-import { DataTable } from '@torch-ui/components'
-import { Input } from '@torch-ui/components'
+import { DataTable } from "@/components/DataTable";
+import { Input } from "@/components/Input";
 import { useState, useMemo } from 'react'
 
 function SearchableTable() {
@@ -536,7 +543,7 @@ function SearchableTable() {
 ### Persisting Row Order
 
 ```typescript
-import { DataTable } from '@torch-ui/components'
+import { DataTable } from "@/components/DataTable";
 import { useState, useEffect } from 'react'
 
 function PersistentOrderTable() {
@@ -569,16 +576,21 @@ function PersistentOrderTable() {
 
 ## Features
 
-### Built-in Capabilities
+The component's props are `columns`, `data`, `theme`, and `onRowReorder` — see the API
+Reference. Its built-in, rendered capabilities are:
+
+- **Row Selection**: Multi-row selection checkboxes (select all / select individual) are
+  rendered and tracked internally. Selection state persists through reordering. Note: the
+  component does not expose a selection-change prop — selection is internal visual state.
+- **Drag & Drop**: Reorder rows by dragging; `onRowReorder` returns the new data array
+  (keyboard drag supported via dnd-kit).
+- **Column Sorting**: Click headers to sort ascending/descending.
+- **Custom Cells**: Full control over cell rendering via each column's `cell`.
+- **Type Safety**: Full TypeScript support with generics.
 
-- **Row Selection**: Multi-row selection with checkboxes (select all, select individual)
-- **Drag & Drop**: Reorder rows by dragging (maintains selection state)
-- **Column Sorting**: Click headers to sort ascending/descending
-- **Pagination**: Built-in pagination support (via TanStack Table)
-- **Filtering**: Client-side filtering capabilities
-- **Custom Cells**: Full control over cell rendering
-- **Keyboard Navigation**: Drag-and-drop with keyboard support
-- **Type Safety**: Full TypeScript support with generics
+> The TanStack pagination and filtering **row models** are enabled internally, but the
+> component renders **no** pagination or filter controls and exposes no page/filter props.
+> To paginate or filter, wrap the data yourself or compose your own controls around it.
 
 ### Drag-and-Drop Behavior
 
@@ -601,7 +613,7 @@ function PersistentOrderTable() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { DataTable } from '@torch-ui/components'
+import { DataTable } from "@/components/DataTable";
 import { ColumnDef } from '@tanstack/react-table'
 
 const mockData = [
@@ -651,7 +663,7 @@ describe('DataTable', () => {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { DataTable } from '@torch-ui/components'
+import { DataTable } from "@/components/DataTable";
 
 test('row selection works correctly', () => {
   const columns = [{ accessorKey: 'name', header: 'Name' }]
@@ -767,7 +779,7 @@ const columns: ColumnDef<User>[] = [
 
 ```diff
 - import { DataGrid } from '@mui/x-data-grid'
-+ import { DataTable } from '@torch-ui/components'
++ import { DataTable } from "@/components/DataTable";
 + import { ColumnDef } from '@tanstack/react-table'
 
 - <DataGrid rows={data} columns={columns} />
@@ -778,7 +790,7 @@ const columns: ColumnDef<User>[] = [
 
 ```diff
 - import { useTable } from 'react-table'
-+ import { DataTable } from '@torch-ui/components'
++ import { DataTable } from "@/components/DataTable";
 + import { ColumnDef } from '@tanstack/react-table'
 
 - const { getTableProps, rows } = useTable({ columns, data })

package/docs/components/data-views-config-panel.md

@@ -13,16 +13,22 @@ keywords: [data-views, config panel, config-panel, settings panel, saved view, s
 
 ## Installation
 
-Part of `torch-glare`. Ships with the `DataViews` folder when you run
-`npx torch-glare add DataViews` — no separate install. It depends on the
-shared `Radio`, `Switch`, `Label`, `FilterPanel`, and a colocated internal
-`PanelControls` file (see "Internal: PanelControls" below).
+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 DataViewsConfigPanel
+```
+
+`add` also copies any components, hooks, and utilities that `DataViewsConfigPanel` depends on.
 
 ## Import
 
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
 ```tsx
-import { DataViewsConfigPanel } from "torch-glare"
-import type { DataViewsConfigPanelProps } from "torch-glare"
+import { DataViewsConfigPanel } from "@/components/DataViewsConfigPanel";
 ```
 
 ## When to use it directly
@@ -36,11 +42,9 @@ import type { DataViewsConfigPanelProps } from "torch-glare"
 ## Standalone Example (composable mode)
 
 ```tsx
-import {
-  DataViewsConfigPanel,
-  TableView,
-  useDataViewsState,
-} from "torch-glare"
+import { DataViewsConfigPanel } from "@/components/DataViewsConfigPanel";
+import { TableView } from "@/components/TableView";
+import { useDataViewsState } from "@/hooks/useDataViewsState";
 import { useState } from "react"
 
 function CustomScreen({ data, fields }) {

package/docs/components/data-views-layout.md

@@ -11,28 +11,22 @@ keywords: [data-views, layout, table, kanban, inbox, tree, multi-view, filter, s
 
 ## 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 add DataViews
+npx torch-glare@latest init
+npx torch-glare@latest add DataViewsLayout
 ```
 
-The CLI transitively installs everything DataViews imports — the sibling views,
-the `DataViewCard` layout, the `useDataViewsState` hook, the `dataViews` utils,
-and the `TreeFolder` component — plus the 3rd-party deps it uses
-(`@radix-ui/react-slider`, `react-day-picker`, `lucide-react`, `vaul`).
-
-> **Badge version:** DataViews uses the current Badge API
-> (`color` / `badgeStyle` / `showIcon`). If your project vendored an older
-> `Badge.tsx` (with `variant` / `isSelected`), refresh it with
-> `npx torch-glare@latest add Badge --force` and migrate call sites
-> (`variant=` → `color=`, `isSelected`+`onUnselect` → `isClosable`+`onClose`).
-> The Badge also needs `mapping-color-system-v4` tokens
-> (`--background-presentation-badge-{color}-{subtle|solid}`) in your CSS.
+`add` also copies any components, hooks, and utilities that `DataViewsLayout` depends on.
 
 ## Import
 
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
 ```tsx
-import { DataViewsLayout } from "torch-glare"
-import type { FieldConfig, ViewVisibility } from "torch-glare"
+import { DataViewsLayout } from "@/components/DataViewsLayout";
 ```
 
 ## Quick Examples
@@ -247,7 +241,10 @@ passes `savedViews` to `DataViewsLayout` expecting it to work.
 When you want a custom layout (e.g. Table on the left, Kanban on the right), bypass `DataViewsLayout` and compose the views directly.
 
 ```tsx
-import { TableView, KanbanView, FilterPanel, useDataViewsState } from "torch-glare"
+import { FilterPanel } from "@/components/FilterPanel";
+import { KanbanView } from "@/components/KanbanView";
+import { TableView } from "@/components/TableView";
+import { useDataViewsState } from "@/hooks/useDataViewsState";
 
 function CustomScreen({ data, fields }: Props) {
   const state = useDataViewsState({ data, fields })

package/docs/components/date-picker.md

@@ -11,15 +11,22 @@ keywords: [date-picker, calendar, time, datetime, input, popover]
 
 ## 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
-npm install react-day-picker date-fns torch-react-mobile-picker
+npx torch-glare@latest init
+npx torch-glare@latest add DatePicker
 ```
 
+`add` also copies any components, hooks, and utilities that `DatePicker` depends on.
+
 ## Import
 
-```typescript
-import { DatePicker } from '@torch-ui/components'
-import type { DatePickerProps } from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { DatePicker } from "@/components/DatePicker";
 ```
 
 ## Quick Examples
@@ -27,7 +34,7 @@ import type { DatePickerProps } from '@torch-ui/components'
 ### Basic Usage
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 
 function Example() {
@@ -46,7 +53,7 @@ function Example() {
 ### With Time Picker
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 
 function DateTimePicker() {
@@ -66,7 +73,7 @@ function DateTimePicker() {
 ### Range Selection
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 import { DateRange } from 'react-day-picker'
 
@@ -91,7 +98,7 @@ function RangePicker() {
 ### Multiple Date Selection
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 
 function MultipleDates() {
@@ -111,7 +118,7 @@ function MultipleDates() {
 ### Custom Date Format
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 
 function CustomFormat() {
   const [date, setDate] = useState<Date>(new Date())
@@ -129,8 +136,8 @@ function CustomFormat() {
 ### Custom Trigger Element
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
+import { Button } from "@/components/Button";
 
 function CustomTrigger() {
   const [date, setDate] = useState<Date>(new Date())
@@ -140,7 +147,7 @@ function CustomTrigger() {
       value={date}
       onChange={(e) => setDate(e.target.value)}
     >
-      <Button variant="SecondaryStyle">
+      <Button variant="BluSecStyle">
         <i className="ri-calendar-line" />
         Select Date
       </Button>
@@ -152,8 +159,8 @@ function CustomTrigger() {
 ### With Controlled Input
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function ControlledInput() {
@@ -176,7 +183,7 @@ function ControlledInput() {
 ### Date Restrictions
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 
 function RestrictedDates() {
   const [date, setDate] = useState<Date>()
@@ -201,7 +208,7 @@ function RestrictedDates() {
 ### Booking System
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 import { DateRange } from 'react-day-picker'
 
@@ -243,7 +250,7 @@ function BookingPicker() {
 ### Deadline Picker with Time
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 
 function DeadlinePicker() {
@@ -356,7 +363,7 @@ type RangeDatePicker = DatePickerProps & {
 ### Event Scheduler
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 
 function EventScheduler() {
@@ -399,7 +406,7 @@ function EventScheduler() {
 ### Birthday Picker
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 
 function BirthdayPicker() {
@@ -431,7 +438,7 @@ function BirthdayPicker() {
 ### Work Schedule Picker
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 
 function WorkSchedule() {
@@ -462,7 +469,7 @@ function WorkSchedule() {
 
 ```typescript
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import userEvent from '@testing-library/user-event'
 
 describe('DatePicker', () => {
@@ -753,7 +760,7 @@ Reverse-engineer the implementation from the call sites in `DatePicker.tsx` unti
 ### With Form Libraries
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useForm, Controller } from 'react-hook-form'
 
 function FormExample() {
@@ -788,7 +795,7 @@ function FormExample() {
 ### With State Management
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useStore } from './store'
 
 function DatePickerWithStore() {