torch-glare 2.4.0 → 2.4.1

package/docs/components/profile-menu.md

@@ -11,12 +11,22 @@ keywords: [profile-menu, user-menu, avatar-menu, account-menu, popover]
 
 ## Installation
 
-No additional dependencies required (uses internal Popover component).
+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 ProfileMenu
+```
+
+`add` also copies any components, hooks, and utilities that `ProfileMenu` depends on.
 
 ## Import
 
-```typescript
-import { ProfileMenu } from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { ProfileMenu } from "@/components/ProfileMenu";
 ```
 
 ## Quick Examples
@@ -24,7 +34,7 @@ import { ProfileMenu } from '@torch-ui/components'
 ### Basic Usage
 
 ```typescript
-import { ProfileMenu } from '@torch-ui/components'
+import { ProfileMenu } from "@/components/ProfileMenu";
 
 function Example() {
   return (
@@ -39,8 +49,8 @@ function Example() {
 ### With Dropdown Content
 
 ```typescript
-import { ProfileMenu } from '@torch-ui/components'
-import { PopoverItem } from '@torch-ui/components'
+import { ProfileMenu } from "@/components/ProfileMenu";
+import { PopoverItem } from "@/components/Popover";
 
 function ProfileDropdown() {
   return (
@@ -62,7 +72,7 @@ function ProfileDropdown() {
 ### Selected State
 
 ```typescript
-import { ProfileMenu } from '@torch-ui/components'
+import { ProfileMenu } from "@/components/ProfileMenu";
 import { useState } from 'react'
 
 function SelectedProfile() {
@@ -81,8 +91,8 @@ function SelectedProfile() {
 ### With Overlay Blur
 
 ```typescript
-import { ProfileMenu } from '@torch-ui/components'
-import { PopoverItem } from '@torch-ui/components'
+import { ProfileMenu } from "@/components/ProfileMenu";
+import { PopoverItem } from "@/components/Popover";
 
 function BlurredProfileMenu() {
   return (
@@ -105,8 +115,8 @@ function BlurredProfileMenu() {
 ### Complete User Menu
 
 ```typescript
-import { ProfileMenu } from '@torch-ui/components'
-import { PopoverItem } from '@torch-ui/components'
+import { ProfileMenu } from "@/components/ProfileMenu";
+import { PopoverItem } from "@/components/Popover";
 import { useRouter } from 'next/navigation'
 
 function UserMenu({ user }: { user: User }) {
@@ -162,8 +172,8 @@ function UserMenu({ user }: { user: User }) {
 ### With Status Indicator
 
 ```typescript
-import { ProfileMenu } from '@torch-ui/components'
-import { PopoverItem } from '@torch-ui/components'
+import { ProfileMenu } from "@/components/ProfileMenu";
+import { PopoverItem } from "@/components/Popover";
 
 function OnlineProfileMenu() {
   return (
@@ -190,8 +200,9 @@ function OnlineProfileMenu() {
 ### With Role Badge
 
 ```typescript
-import { ProfileMenu } from '@torch-ui/components'
-import { PopoverItem, Badge } from '@torch-ui/components'
+import { ProfileMenu } from "@/components/ProfileMenu";
+import { Badge } from "@/components/Badge";
+import { PopoverItem } from "@/components/Popover";
 
 function AdminProfileMenu({ user }: { user: User }) {
   return (
@@ -199,7 +210,7 @@ function AdminProfileMenu({ user }: { user: User }) {
       label={
         <div className="flex flex-col items-start">
           <span>{user.name}</span>
-          <Badge variant="purple" size="XS" label={user.role} />
+          <Badge color="purple" size="XS" label={user.role} />
         </div>
       }
       icon={user.avatar}
@@ -218,8 +229,8 @@ function AdminProfileMenu({ user }: { user: User }) {
 ### Dark Theme
 
 ```typescript
-import { ProfileMenu } from '@torch-ui/components'
-import { PopoverItem } from '@torch-ui/components'
+import { ProfileMenu } from "@/components/ProfileMenu";
+import { PopoverItem } from "@/components/Popover";
 
 function DarkProfileMenu() {
   return (
@@ -241,8 +252,8 @@ function DarkProfileMenu() {
 ### Multiple Profile Switcher
 
 ```typescript
-import { ProfileMenu } from '@torch-ui/components'
-import { PopoverItem } from '@torch-ui/components'
+import { ProfileMenu } from "@/components/ProfileMenu";
+import { PopoverItem } from "@/components/Popover";
 import { useState } from 'react'
 
 function ProfileSwitcher() {
@@ -290,8 +301,8 @@ function ProfileSwitcher() {
 ### With Custom Actions
 
 ```typescript
-import { ProfileMenu } from '@torch-ui/components'
-import { PopoverItem } from '@torch-ui/components'
+import { ProfileMenu } from "@/components/ProfileMenu";
+import { PopoverItem } from "@/components/Popover";
 
 function ActionsProfileMenu() {
   return (
@@ -322,8 +333,8 @@ function ActionsProfileMenu() {
 ### With Keyboard Shortcuts
 
 ```typescript
-import { ProfileMenu } from '@torch-ui/components'
-import { PopoverItem } from '@torch-ui/components'
+import { ProfileMenu } from "@/components/ProfileMenu";
+import { PopoverItem } from "@/components/Popover";
 
 function ShortcutProfileMenu() {
   return (
@@ -390,7 +401,7 @@ export const ProfileMenu: React.FC<ProfileMenuProps>
 ### Usage with TypeScript
 
 ```typescript
-import { ProfileMenu } from '@torch-ui/components'
+import { ProfileMenu } from "@/components/ProfileMenu";
 
 interface User {
   name: string
@@ -514,8 +525,8 @@ function SidebarProfile({ user }: { user: User }) {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { ProfileMenu } from '@torch-ui/components'
-import { PopoverItem } from '@torch-ui/components'
+import { ProfileMenu } from "@/components/ProfileMenu";
+import { PopoverItem } from "@/components/Popover";
 
 describe('ProfileMenu', () => {
   it('renders user name and avatar', () => {

package/docs/components/radio-card.md

@@ -1,6 +1,6 @@
 ---
 name: RadioCard
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/forms
 tags: [form, radio, card, selection, compound, accessible]
@@ -17,15 +17,22 @@ dependencies:
 
 ## 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 torch-glare
+npx torch-glare@latest init
+npx torch-glare@latest add RadioCard
 ```
 
+`add` also copies any components, hooks, and utilities that `RadioCard` depends on.
+
 ## Import
 
-```typescript
-import { RadioCard } from 'torch-glare/lib/components/RadioCard'
-import { RadioGroup } from 'torch-glare/lib/components/Radio'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { RadioCard } from "@/components/RadioCard";
 ```
 
 ## Quick Examples
@@ -33,8 +40,8 @@ import { RadioGroup } from 'torch-glare/lib/components/Radio'
 ### Basic Usage
 
 ```typescript
-import { RadioCard } from 'torch-glare/lib/components/RadioCard'
-import { RadioGroup } from 'torch-glare/lib/components/Radio'
+import { RadioCard } from '@/components/RadioCard'
+import { RadioGroup } from '@/components/Radio'
 
 function Example() {
   const [selected, setSelected] = useState('option1')
@@ -534,8 +541,8 @@ function DeploymentOptions() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { RadioCard } from 'torch-glare/lib/components/RadioCard'
-import { RadioGroup } from 'torch-glare/lib/components/Radio'
+import { RadioCard } from '@/components/RadioCard'
+import { RadioGroup } from '@/components/Radio'
 
 describe('RadioCard', () => {
   it('renders card with header and description', () => {

package/docs/components/radio.md

@@ -1,6 +1,6 @@
 ---
 name: Radio
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/forms
 tags: [form, radio, selection, radix-ui, accessible, group, controlled]
@@ -17,14 +17,22 @@ dependencies:
 
 ## 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 torch-glare
+npx torch-glare@latest init
+npx torch-glare@latest add Radio
 ```
 
+`add` also copies any components, hooks, and utilities that `Radio` depends on.
+
 ## Import
 
-```typescript
-import { Radio, RadioGroup } from 'torch-glare/lib/components/Radio'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { Radio } from "@/components/Radio";
 ```
 
 ## Quick Examples
@@ -32,7 +40,7 @@ import { Radio, RadioGroup } from 'torch-glare/lib/components/Radio'
 ### Basic Radio Group
 
 ```typescript
-import { Radio, RadioGroup } from 'torch-glare/lib/components/Radio'
+import { Radio, RadioGroup } from '@/components/Radio'
 
 function Example() {
   const [value, setValue] = useState('option1')
@@ -442,7 +450,7 @@ function ConditionalForm() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { Radio, RadioGroup } from 'torch-glare/lib/components/Radio'
+import { Radio, RadioGroup } from '@/components/Radio'
 
 describe('Radio', () => {
   it('handles selection changes', () => {
@@ -659,10 +667,10 @@ Radix UI automatically handles:
 ```diff
 // Import path
 - import Radio from 'torch-glare/Radio'
-+ import { Radio, RadioGroup } from 'torch-glare/lib/components/Radio'
++ import { Radio, RadioGroup } from '@/components/Radio'
 
 // Size prop values
-- <Radio size="small" />
+- <Radio size="M" />
 + <Radio size="S" />
 ```
 

package/docs/components/scroll-area.md

@@ -12,11 +12,15 @@ A customizable scrollable container component with styled scrollbars. Built on R
 
 ## 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 scroll-area
+npx torch-glare@latest init
+npx torch-glare@latest add ScrollArea
 ```
 
-**Dependencies**: Requires `@radix-ui/react-scroll-area`
+`add` also copies any components, hooks, and utilities that `ScrollArea` depends on.
 
 ## Imports
 

package/docs/components/search-field.md

@@ -1,6 +1,6 @@
 ---
 name: SearchField
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/forms
 tags: [form, search, input, field, system-style, glassmorphism]
@@ -16,14 +16,22 @@ dependencies:
 
 ## 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 torch-glare
+npx torch-glare@latest init
+npx torch-glare@latest add SearchField
 ```
 
+`add` also copies any components, hooks, and utilities that `SearchField` depends on.
+
 ## Import
 
-```typescript
-import { SearchField } from 'torch-glare/lib/components/SearchField'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { SearchField } from "@/components/SearchField";
 ```
 
 ## Quick Examples
@@ -31,7 +39,7 @@ import { SearchField } from 'torch-glare/lib/components/SearchField'
 ### Basic Usage
 
 ```typescript
-import { SearchField } from 'torch-glare/lib/components/SearchField'
+import { SearchField } from '@/components/SearchField'
 
 function Example() {
   const [search, setSearch] = useState('')
@@ -471,7 +479,7 @@ function NavigationSearch() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { SearchField } from 'torch-glare/lib/components/SearchField'
+import { SearchField } from '@/components/SearchField'
 
 describe('SearchField', () => {
   it('displays placeholder text when empty', () => {

package/docs/components/searchable-select.md

@@ -11,17 +11,22 @@ keywords: [searchable-select, combobox, select, search, async, infinite-scroll,
 
 ## 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-popover
+npx torch-glare@latest init
+npx torch-glare@latest add SearchableSelect
 ```
 
-SearchableSelect is built on the TORCH `Popover` component (which wraps `@radix-ui/react-popover`) and reuses the `Input`, `Button`, and `DropdownMenu` item styles. All imports come from `@torch-ui/components`.
+`add` also copies any components, hooks, and utilities that `SearchableSelect` depends on.
 
 ## Import
 
-```typescript
-import { SearchableSelect } from '@torch-ui/components'
-import type { SearchableSelectOption } from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { SearchableSelect } from "@/components/SearchableSelect";
 ```
 
 ## Quick Examples
@@ -31,8 +36,8 @@ import type { SearchableSelectOption } from '@torch-ui/components'
 Pass a static `options` array and control the selection with `value` / `onValueChange`. Options may include an `icon`. Filtering happens locally by default.
 
 ```typescript
-import { SearchableSelect } from '@torch-ui/components'
-import type { SearchableSelectOption } from '@torch-ui/components'
+import { SearchableSelect } from "@/components/SearchableSelect";
+import type { SearchableSelectOption } from "@/components/SearchableSelect";
 import { useState } from 'react'
 
 const options: SearchableSelectOption[] = [
@@ -62,8 +67,8 @@ function FrameworkPicker() {
 For large or remote datasets, set `filterClientSide={false}` and drive everything from controlled props: refetch in `onSearchChange` (debounced), append pages in `onLoadMore`, and report `hasMore` / `loading`. Options are rendered as-is — the component does not filter them locally in this mode.
 
 ```typescript
-import { SearchableSelect } from '@torch-ui/components'
-import type { SearchableSelectOption } from '@torch-ui/components'
+import { SearchableSelect } from "@/components/SearchableSelect";
+import type { SearchableSelectOption } from "@/components/SearchableSelect";
 import { useEffect, useState } from 'react'
 
 const PAGE_SIZE = 20
@@ -125,7 +130,7 @@ function UserPicker() {
 The list shows up to `maxVisibleItems` rows (default `5`) before it scrolls internally.
 
 ```typescript
-import { SearchableSelect } from '@torch-ui/components'
+import { SearchableSelect } from "@/components/SearchableSelect";
 
 function CompactList({ options, value, onValueChange }) {
   return (
@@ -144,7 +149,7 @@ function CompactList({ options, value, onValueChange }) {
 Pass `dir="rtl"` to lay out the input, chevron, and dropdown right-to-left.
 
 ```typescript
-import { SearchableSelect } from '@torch-ui/components'
+import { SearchableSelect } from "@/components/SearchableSelect";
 
 function ArabicPicker({ options, value, onValueChange }) {
   return (
@@ -236,8 +241,8 @@ export function SearchableSelect(props: SearchableSelectProps): JSX.Element
 React Query's `useInfiniteQuery` maps cleanly onto the controlled async props. Track the debounced query in state, flatten pages into `options`, and wire `fetchNextPage`/`hasNextPage`/`isFetching` to `onLoadMore`/`hasMore`/`loading`.
 
 ```typescript
-import { SearchableSelect } from '@torch-ui/components'
-import type { SearchableSelectOption } from '@torch-ui/components'
+import { SearchableSelect } from "@/components/SearchableSelect";
+import type { SearchableSelectOption } from "@/components/SearchableSelect";
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
 
@@ -283,7 +288,7 @@ function UserPicker() {
 The same shape works with SWR's `useSWRInfinite` — increment `size` in `onLoadMore`, flatten the page array into `options`, and derive `hasMore` from the last page length.
 
 ```typescript
-import { SearchableSelect } from '@torch-ui/components'
+import { SearchableSelect } from "@/components/SearchableSelect";
 import useSWRInfinite from 'swr/infinite'
 import { useState } from 'react'
 

package/docs/components/searchable-table.md

@@ -11,17 +11,22 @@ keywords: [searchable-table, dialog, table, search, async, infinite-scroll, pagi
 
 ## Installation
 
-`SearchableTable` is part of the TORCH Glare component library. It composes the [Dialog](./dialog.md) (built on Radix Dialog) and the [Table](./table.md) component internally, so both must be available — they ship with the library.
+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 @torch-ui/components @radix-ui/react-dialog
+npx torch-glare@latest init
+npx torch-glare@latest add SearchableTable
 ```
 
+`add` also copies any components, hooks, and utilities that `SearchableTable` depends on.
+
 ## Import
 
-```typescript
-import { SearchableTable } from '@torch-ui/components'
-import type { SearchableTableColumn } from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { SearchableTable } from "@/components/SearchableTable";
 ```
 
 ## Quick Examples
@@ -31,8 +36,8 @@ import type { SearchableTableColumn } from '@torch-ui/components'
 Provide a `columns` config and a `rows` array. Single-select is controlled via `value` / `onSelect`. Use `getLabel` to control the text shown in the input after selection, and `getRowId` to give each row a stable key.
 
 ```typescript
-import { SearchableTable } from '@torch-ui/components'
-import type { SearchableTableColumn } from '@torch-ui/components'
+import { SearchableTable } from "@/components/SearchableTable";
+import type { SearchableTableColumn } from "@/components/SearchableTable";
 import { useState } from 'react'
 
 type User = { id: string; name: string; role: string; email: string }
@@ -97,8 +102,8 @@ const columns: SearchableTableColumn<User>[] = [
 Set `filterClientSide={false}` and treat `rows` as already-filtered server data. `onSearchChange` fires (debounced by `searchDebounceMs`, default 300ms) whenever the query settles — refetch there. As the list nears the bottom, `onLoadMore` fires while `hasMore && !loading`; a loading row renders whenever `loading` is true.
 
 ```typescript
-import { SearchableTable } from '@torch-ui/components'
-import type { SearchableTableColumn } from '@torch-ui/components'
+import { SearchableTable } from "@/components/SearchableTable";
+import type { SearchableTableColumn } from "@/components/SearchableTable";
 import { useEffect, useState } from 'react'
 
 type User = { id: string; name: string; role: string; email: string }
@@ -244,7 +249,7 @@ export interface SearchableTableColumn<T> {
 ### Component signature
 
 ```typescript
-import { Themes } from '@torch-ui/components'
+import { Themes } from "@/utils/types";
 
 interface SearchableTableProps<T> {
   columns: SearchableTableColumn<T>[]
@@ -287,8 +292,8 @@ Always pass the type argument explicitly (`<SearchableTable<User> … />`) so `c
 Wire pagination through `useInfiniteQuery`, flatten the pages into `rows`, and map the query's state onto `hasMore` / `loading` / `onLoadMore`.
 
 ```typescript
-import { SearchableTable } from '@torch-ui/components'
-import type { SearchableTableColumn } from '@torch-ui/components'
+import { SearchableTable } from "@/components/SearchableTable";
+import type { SearchableTableColumn } from "@/components/SearchableTable";
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { useState } from 'react'
 
@@ -354,7 +359,7 @@ function UserPicker() {
 ### SWR — `useSWRInfinite`
 
 ```typescript
-import { SearchableTable } from '@torch-ui/components'
+import { SearchableTable } from "@/components/SearchableTable";
 import useSWRInfinite from 'swr/infinite'
 import { useState } from 'react'