torch-glare 2.3.0 → 2.4.1

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
@@ -176,7 +170,11 @@ Inbox auto-detects `isRead`, `isStarred`, `hasAttachment`, `priority`. Override
 | `type` | `FieldType` | Renderer key (see below). Auto-inferred if omitted. |
 | `visible` | `boolean` | Show in cells. Default `true`. |
 | `order` | `number` | Display order. |
-| `filterable` | `boolean` | Surface this field in the filter panel. |
+| `filterable` | `boolean` | Surface this field in the filter panel. The control adapts to the field `type`: categorical fields render checkboxes/radios (or a searchable dropdown via `filterVariant`), numeric fields a range slider, and **date / date-format fields a From + To pair of Glare `DatePicker`s** (two single-date pickers bounding the range). Set `false` to explicitly exclude a field the panel would otherwise auto-detect (e.g. an `id` or `name` with few unique values). |
+| `filterLabel` | `string` | Override the label shown above this field's filter (defaults to `label`). |
+| `filterMode` | `"single" \| "multi"` | Categorical selection mode. `"multi"` (default) renders checkboxes; `"single"` renders radios. |
+| `filterVariant` | `"checkbox" \| "searchable-select"` | Categorical control style. `"checkbox"` (default) is the inline checkbox/radio list; `"searchable-select"` renders a single-select `SearchableSelect` dropdown — useful when a field has many options. Implies single-select. |
+| `filterOptions` | `string[] \| { label: string; value: string }[]` | Explicit option list for the categorical filter (otherwise options are collected from the data). |
 | `variants` | `Record<string, BadgeVariant>` | For `enum-badge`: per-value color map. |
 | `currency` | `string \| CurrencyOptions` | For `currency`: ISO code or `{ symbol, locale, decimals, code }`. |
 | `thresholds` | `[number, number]` | For `progress-bar`: warning/ok thresholds. |
@@ -188,6 +186,8 @@ Inbox auto-detects `isRead`, `isStarred`, `hasAttachment`, `priority`. Override
 
 `text` · `number` · `date` · `date-format` · `boolean` · `currency` · `number-format` · `enum-badge` · `badge-array` · `progress-bar` · `star-rating` · `icon-text` · `two-line` · `avatar` · `link` · `image` · `hidden`
 
+> **`hidden` vs `filterable: false`** — use `type: "hidden"` to drop a field from the UI **entirely** (no column, no column-toggle in the config panel, no filter) while it stays in the data for row identity — e.g. an `id` you key rows by but never want shown. Use `filterable: false` to keep a field as a **column** but remove only its **filter**.
+
 ### `BadgeVariant`
 
 `green` · `greenLight` · `cocktailGreen` · `yellow` · `redOrange` · `redLight` · `rose` · `purple` · `bluePurple` · `blue` · `navy` · `gray` · `highlight`
@@ -241,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() {

package/docs/components/dialog.md

@@ -11,24 +11,22 @@ keywords: [dialog, modal, overlay, popup, radix-ui, compound-component]
 
 ## 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 @radix-ui/react-dialog
+npx torch-glare@latest init
+npx torch-glare@latest add Dialog
 ```
 
+`add` also copies any components, hooks, and utilities that `Dialog` depends on.
+
 ## Import
 
-```typescript
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-  DialogClose,
-  DialogCloseButton,
-} from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { Dialog } from "@/components/Dialog";
 ```
 
 ## Quick Examples
@@ -36,8 +34,8 @@ import {
 ### Basic Usage
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/Dialog";
+import { Button } from "@/components/Button";
 
 function Example() {
   return (
@@ -61,8 +59,8 @@ function Example() {
 ### With Header and Footer
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose } from "@/components/Dialog";
+import { Button } from "@/components/Button";
 
 function FormDialog() {
   return (
@@ -86,9 +84,9 @@ function FormDialog() {
 
         <DialogFooter>
           <DialogClose asChild>
-            <Button variant="SecondaryStyle">Cancel</Button>
+            <Button variant="BluSecStyle">Cancel</Button>
           </DialogClose>
-          <Button variant="PrimaryStyle">Save Changes</Button>
+          <Button variant="PrimeStyle">Save Changes</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
@@ -99,7 +97,7 @@ function FormDialog() {
 ### Controlled State
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "@/components/Dialog";
 import { useState } from 'react'
 
 function ControlledDialog() {
@@ -123,8 +121,8 @@ function ControlledDialog() {
 ### With Custom Close Button
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogCloseButton } from '@torch-ui/components'
-import { ActionButton } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogCloseButton } from "@/components/Dialog";
+import { ActionButton } from "@/components/ActionButton";
 
 function CustomCloseDialog() {
   return (
@@ -150,14 +148,14 @@ function CustomCloseDialog() {
 ### Confirmation Dialog
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose } from "@/components/Dialog";
+import { Button } from "@/components/Button";
 
 function ConfirmationDialog({ onConfirm }: { onConfirm: () => void }) {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button variant="DestructiveStyle">Delete Account</Button>
+        <Button variant="RedSecStyle">Delete Account</Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
@@ -170,10 +168,10 @@ function ConfirmationDialog({ onConfirm }: { onConfirm: () => void }) {
 
         <DialogFooter>
           <DialogClose asChild>
-            <Button variant="SecondaryStyle">Cancel</Button>
+            <Button variant="BluSecStyle">Cancel</Button>
           </DialogClose>
           <DialogClose asChild>
-            <Button variant="DestructiveStyle" onClick={onConfirm}>
+            <Button variant="RedSecStyle" onClick={onConfirm}>
               Delete Account
             </Button>
           </DialogClose>
@@ -187,8 +185,9 @@ function ConfirmationDialog({ onConfirm }: { onConfirm: () => void }) {
 ### Nested Form Dialog
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from '@torch-ui/components'
-import { Button, Input } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from "@/components/Dialog";
+import { Button } from "@/components/Button";
+import { Input } from "@/components/Input";
 import { useForm } from 'react-hook-form'
 
 interface FormData {
@@ -236,8 +235,9 @@ function FormDialog() {
 ### Content-Heavy Dialog
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@torch-ui/components'
-import { Button, ScrollArea } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/Dialog";
+import { Button } from "@/components/Button";
+import { ScrollArea } from "@/components/ScrollArea";
 
 function ContentDialog() {
   return (
@@ -273,8 +273,8 @@ function ContentDialog() {
 ### Multi-Step Dialog
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle } from "@/components/Dialog";
+import { Button } from "@/components/Button";
 import { useState } from 'react'
 
 function MultiStepDialog() {
@@ -298,7 +298,7 @@ function MultiStepDialog() {
 
         <DialogFooter>
           {step > 1 && (
-            <Button variant="SecondaryStyle" onClick={() => setStep(step - 1)}>
+            <Button variant="BluSecStyle" onClick={() => setStep(step - 1)}>
               Back
             </Button>
           )}
@@ -317,7 +317,7 @@ function MultiStepDialog() {
 ### Image Preview Dialog
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent } from "@/components/Dialog";
 
 function ImageDialog({ src, alt }: { src: string; alt: string }) {
   return (
@@ -340,8 +340,9 @@ function ImageDialog({ src, alt }: { src: string; alt: string }) {
 ### Loading State Dialog
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from '@torch-ui/components'
-import { Button, SpinLoading } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from "@/components/Dialog";
+import { Button } from "@/components/Button";
+import { SpinLoading } from "@/components/SpinLoading";
 import { useState } from 'react'
 
 function LoadingDialog() {
@@ -676,8 +677,8 @@ Pick an icon that matches the entity (`ri-bank-line` for accounts, `ri-calendar-
 ### Alert/Confirmation Pattern
 
 ```typescript
-import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from "@/components/Dialog";
+import { Button } from "@/components/Button";
 
 function useConfirmDialog() {
   const [open, setOpen] = useState(false)
@@ -730,7 +731,7 @@ function useConfirmDialog() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "@/components/Dialog";
 
 describe('Dialog', () => {
   it('opens when trigger is clicked', () => {
@@ -839,7 +840,7 @@ describe('Dialog', () => {
 
 ```diff
 - import { Dialog, DialogTitle, DialogContent } from '@mui/material'
-+ import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@torch-ui/components'
++ import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "@/components/Dialog";
 
 - <Dialog open={open} onClose={() => setOpen(false)}>
 -   <DialogTitle>Title</DialogTitle>
@@ -858,7 +859,7 @@ describe('Dialog', () => {
 
 ```diff
 - import { Dialog } from '@headlessui/react'
-+ import { Dialog, DialogContent, DialogTitle } from '@torch-ui/components'
++ import { Dialog, DialogContent, DialogTitle } from "@/components/Dialog";
 
 - <Dialog open={open} onClose={setOpen}>
 -   <Dialog.Panel>

package/docs/components/divider.md

@@ -12,10 +12,16 @@ A flexible separator component for creating visual divisions between content sec
 
 ## 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-cli add divider
+npx torch-glare@latest init
+npx torch-glare@latest add Divider
 ```
 
+`add` also copies any components, hooks, and utilities that `Divider` depends on.
+
 ## Imports
 
 ```typescript
@@ -282,7 +288,7 @@ export function FormWithDividers() {
       <Divider />
 
       <div className="flex justify-end gap-3">
-        <Button variant="SecStyle">Cancel</Button>
+        <Button variant="BluSecStyle">Cancel</Button>
         <Button variant="PrimeStyle">Save Changes</Button>
       </div>
     </form>
@@ -317,11 +323,11 @@ export function DividerWithText() {
 
       {/* Social login */}
       <div className="space-y-2">
-        <Button className="w-full" variant="SecStyle">
+        <Button className="w-full" variant="BluSecStyle">
           <i className="ri-google-fill mr-2"></i>
           Continue with Google
         </Button>
-        <Button className="w-full" variant="SecStyle">
+        <Button className="w-full" variant="BluSecStyle">
           <i className="ri-github-fill mr-2"></i>
           Continue with GitHub
         </Button>

package/docs/components/drawer.md

@@ -14,47 +14,22 @@ keywords: [drawer, sheet, side-panel, bottom-sheet, slide, vaul, form, create, e
 
 ## 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 Drawer
 ```
 
-The Drawer's only third-party dependency is [`vaul`](https://www.npmjs.com/package/vaul), which the CLI installs automatically.
-
-> [!NOTE]
-> **Building create / edit forms?** The Drawer ships on its own. The form examples on this page also use `SectionBlock`, `InputField`, and `Button`. Install them alongside it:
->
-> ```bash
-> npx torch-glare@latest add Drawer SectionBlock InputField Button
-> ```
->
-> These are *not* auto-installed by `add Drawer`, because `Drawer.tsx` does not import them — they are only needed for the form composition pattern, not for the Drawer itself.
+`add` also copies any components, hooks, and utilities that `Drawer` depends on.
 
 ## Import
 
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
 ```tsx
-import {
-  Drawer,
-  DrawerNested,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerHeaderTitle,
-  DrawerHeaderActions,
-  DrawerBadge,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-  // Notch (the tab that sticks out of the top edge)
-  DrawerNotch,
-  DrawerNotchClose,
-  DrawerNotchPill,
-  DrawerNotchDivider,
-  DrawerNotchApp,
-  // Lower-level primitives (rarely needed directly)
-  DrawerPortal,
-  DrawerOverlay,
-} from "@/components/Drawer";
+import { Drawer } from "@/components/Drawer";
 ```
 
 ## Anatomy