torch-glare 2.3.0 → 2.4.1

package/docs/components/image-attachment.md

@@ -11,16 +11,22 @@ keywords: [image-attachment, file-upload, drag-drop, preview, modal, expandable]
 
 ## Installation
 
-No external dependencies required.
+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 ImageAttachment
+```
+
+`add` also copies any components, hooks, and utilities that `ImageAttachment` depends on.
 
 ## Import
 
-```typescript
-import {
-  ImageAttachment,
-  ExpandableImage,
-  AttachmentImagePreview
-} from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { ImageAttachment } from "@/components/ImageAttachment";
 ```
 
 ## Component Overview
@@ -36,7 +42,7 @@ The ImageAttachment suite consists of three components:
 ### Basic File Upload
 
 ```typescript
-import { ImageAttachment } from '@torch-ui/components'
+import { ImageAttachment } from "@/components/ImageAttachment";
 import { useState } from 'react'
 
 function Example() {
@@ -64,7 +70,7 @@ function Example() {
 ### With Preview
 
 ```typescript
-import { ImageAttachment, ExpandableImage } from '@torch-ui/components'
+import { ImageAttachment, ExpandableImage } from "@/components/ImageAttachment";
 import { useState } from 'react'
 
 function WithPreview() {
@@ -106,12 +112,8 @@ function WithPreview() {
 ### Complete Upload Flow
 
 ```typescript
-import {
-  ImageAttachment,
-  ExpandableImage,
-  AttachmentImagePreview
-} from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { ImageAttachment, ExpandableImage, AttachmentImagePreview } from "@/components/ImageAttachment";
+import { Button } from "@/components/Button";
 import { useState } from 'react'
 
 function CompleteFlow() {
@@ -160,7 +162,7 @@ function CompleteFlow() {
             header={file?.name || 'Image Preview'}
           >
             <Button onClick={handleUpload}>Upload</Button>
-            <Button variant="SecondaryStyle" onClick={handleRemove}>
+            <Button variant="BluSecStyle" onClick={handleRemove}>
               Remove
             </Button>
           </AttachmentImagePreview>
@@ -174,7 +176,7 @@ function CompleteFlow() {
 ### With Drag and Drop (React Dropzone)
 
 ```typescript
-import { ImageAttachment, ExpandableImage } from '@torch-ui/components'
+import { ImageAttachment, ExpandableImage } from "@/components/ImageAttachment";
 import { useDropzone } from 'react-dropzone'
 import { useState } from 'react'
 
@@ -221,7 +223,7 @@ function WithDropzone() {
 ### Multiple File Upload
 
 ```typescript
-import { ImageAttachment, ExpandableImage } from '@torch-ui/components'
+import { ImageAttachment, ExpandableImage } from "@/components/ImageAttachment";
 import { useState } from 'react'
 
 function MultipleFiles() {
@@ -267,8 +269,9 @@ function MultipleFiles() {
 ### With Validation
 
 ```typescript
-import { ImageAttachment } from '@torch-ui/components'
-import { FieldHint, toast } from '@torch-ui/components'
+import { ImageAttachment } from "@/components/ImageAttachment";
+import { FieldHint } from "@/components/FieldHint";
+import { toast } from "@/components/Toast";
 import { useState } from 'react'
 
 function WithValidation() {
@@ -327,12 +330,9 @@ function WithValidation() {
 ### Profile Picture Upload
 
 ```typescript
-import {
-  ImageAttachment,
-  ExpandableImage,
-  AttachmentImagePreview
-} from '@torch-ui/components'
-import { Avatar, Button } from '@torch-ui/components'
+import { ImageAttachment, ExpandableImage, AttachmentImagePreview } from "@/components/ImageAttachment";
+import { Avatar } from "@/components/Avatar";
+import { Button } from "@/components/Button";
 import { useState } from 'react'
 
 function ProfilePictureUpload() {
@@ -400,8 +400,8 @@ function ProfilePictureUpload() {
 ### Gallery Upload
 
 ```typescript
-import { ImageAttachment, ExpandableImage } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { ImageAttachment, ExpandableImage } from "@/components/ImageAttachment";
+import { Button } from "@/components/Button";
 import { useState } from 'react'
 
 function GalleryUpload() {
@@ -448,7 +448,7 @@ function GalleryUpload() {
               <Button
                 size="S"
                 buttonType="icon"
-                variant="SecondaryStyle"
+                variant="BluSecStyle"
                 className="absolute top-1 right-1 opacity-0 group-hover:opacity-100"
                 onClick={() => handleRemove(image.id)}
               >
@@ -545,11 +545,7 @@ export const AttachmentImagePreview: React.FC<AttachmentImagePreviewProps>
 ### Usage with Types
 
 ```typescript
-import {
-  ImageAttachment,
-  ExpandableImage,
-  AttachmentImagePreview
-} from '@torch-ui/components'
+import { ImageAttachment, ExpandableImage, AttachmentImagePreview } from "@/components/ImageAttachment";
 import { useRef, useState } from 'react'
 
 function TypedExample() {
@@ -585,7 +581,7 @@ function TypedExample() {
 ### Upload with Progress
 
 ```typescript
-import { ImageAttachment } from '@torch-ui/components'
+import { ImageAttachment } from "@/components/ImageAttachment";
 import { useState } from 'react'
 
 function UploadWithProgress() {
@@ -638,7 +634,7 @@ function UploadWithProgress() {
 ### Image Cropper Integration
 
 ```typescript
-import { ImageAttachment, ExpandableImage } from '@torch-ui/components'
+import { ImageAttachment, ExpandableImage } from "@/components/ImageAttachment";
 import { useState } from 'react'
 import Cropper from 'react-easy-crop'
 
@@ -688,11 +684,7 @@ function ImageCropper() {
 
 ```typescript
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import {
-  ImageAttachment,
-  ExpandableImage,
-  AttachmentImagePreview
-} from '@torch-ui/components'
+import { ImageAttachment, ExpandableImage, AttachmentImagePreview } from "@/components/ImageAttachment";
 
 describe('ImageAttachment', () => {
   it('renders labels', () => {

package/docs/components/inbox-view.md

@@ -11,13 +11,22 @@ keywords: [data-views, inbox-view, inbox, list, master-detail, read, starred, pr
 
 ## 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 `Badge`, `Button`, `Avatar`, `Card`, `Divider`, and `TabFormItem` components plus `lucide-react`.
+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 InboxView
+```
+
+`add` also copies any components, hooks, and utilities that `InboxView` depends on.
 
 ## Import
 
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
 ```tsx
-import { InboxView, useDataViewsState } from "torch-glare"
-import type { InboxViewProps, InboxConfig, FieldConfig } from "torch-glare"
+import { InboxView } from "@/components/InboxView";
 ```
 
 ## When to use it directly
@@ -42,8 +51,10 @@ Override any of them with `inboxConfig`.
 ## Composable Mode example
 
 ```tsx
-import { InboxView, useDataViewsState } from "torch-glare"
-import type { FieldConfig, InboxConfig } from "torch-glare"
+import { InboxView } from "@/components/InboxView";
+import { useDataViewsState } from "@/hooks/useDataViewsState";
+import type { FieldConfig } from "@/components/FieldConfig";
+import type { InboxConfig } from "@/components/InboxConfig";
 
 const messages = [
   { id: 1, subject: "Welcome", from: { name: "Ada" }, isRead: false, isStarred: true, sentAt: "2024-06-01" },

package/docs/components/inner-label-field.md

@@ -11,13 +11,22 @@ keywords: [inner-label, floating-label, input, animated, material-design]
 
 ## Installation
 
-No external dependencies required.
+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 InnerLabelField
+```
+
+`add` also copies any components, hooks, and utilities that `InnerLabelField` depends on.
 
 ## Import
 
-```typescript
-import { InnerLabelField } from '@torch-ui/components'
-import type { InnerLabelFieldProps } from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { InnerLabelField } from "@/components/InnerLabelField";
 ```
 
 ## Quick Examples
@@ -25,7 +34,7 @@ import type { InnerLabelFieldProps } from '@torch-ui/components'
 ### Basic Usage
 
 ```typescript
-import { InnerLabelField } from '@torch-ui/components'
+import { InnerLabelField } from "@/components/InnerLabelField";
 import { useState } from 'react'
 
 function Example() {
@@ -44,7 +53,7 @@ function Example() {
 ### With Required Indicator
 
 ```typescript
-import { InnerLabelField } from '@torch-ui/components'
+import { InnerLabelField } from "@/components/InnerLabelField";
 
 function RequiredField() {
   return (
@@ -59,7 +68,7 @@ function RequiredField() {
 ### Different Input Types
 
 ```typescript
-import { InnerLabelField } from '@torch-ui/components'
+import { InnerLabelField } from "@/components/InnerLabelField";
 import { useState } from 'react'
 
 function InputTypes() {
@@ -92,7 +101,7 @@ function InputTypes() {
 ### With Error Message
 
 ```typescript
-import { InnerLabelField } from '@torch-ui/components'
+import { InnerLabelField } from "@/components/InnerLabelField";
 import { useState } from 'react'
 
 function WithValidation() {
@@ -123,8 +132,8 @@ function WithValidation() {
 ### With Action Button
 
 ```typescript
-import { InnerLabelField } from '@torch-ui/components'
-import { ActionButton } from '@torch-ui/components'
+import { InnerLabelField } from "@/components/InnerLabelField";
+import { ActionButton } from "@/components/ActionButton";
 import { useState } from 'react'
 
 function WithActionButton() {
@@ -150,8 +159,9 @@ function WithActionButton() {
 ### Login Form
 
 ```typescript
-import { InnerLabelField } from '@torch-ui/components'
-import { Button, FieldHint } from '@torch-ui/components'
+import { InnerLabelField } from "@/components/InnerLabelField";
+import { Button } from "@/components/Button";
+import { FieldHint } from "@/components/FieldHint";
 import { useState } from 'react'
 
 function LoginForm() {
@@ -224,8 +234,8 @@ function LoginForm() {
 ### Contact Form
 
 ```typescript
-import { InnerLabelField } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { InnerLabelField } from "@/components/InnerLabelField";
+import { Button } from "@/components/Button";
 import { useState } from 'react'
 
 function ContactForm() {
@@ -278,7 +288,7 @@ function ContactForm() {
 ### Different Sizes
 
 ```typescript
-import { InnerLabelField } from '@torch-ui/components'
+import { InnerLabelField } from "@/components/InnerLabelField";
 
 function Sizes() {
   return (
@@ -300,7 +310,7 @@ function Sizes() {
 ### Style Variants
 
 ```typescript
-import { InnerLabelField } from '@torch-ui/components'
+import { InnerLabelField } from "@/components/InnerLabelField";
 
 function Variants() {
   return (
@@ -325,7 +335,7 @@ function Variants() {
 ### With Popover Autocomplete
 
 ```typescript
-import { InnerLabelField } from '@torch-ui/components'
+import { InnerLabelField } from "@/components/InnerLabelField";
 import { useState } from 'react'
 
 function AutocompleteField() {
@@ -370,7 +380,7 @@ function AutocompleteField() {
 ### Disabled State
 
 ```typescript
-import { InnerLabelField } from '@torch-ui/components'
+import { InnerLabelField } from "@/components/InnerLabelField";
 
 function DisabledField() {
   return (
@@ -448,7 +458,7 @@ export const InnerLabelField: React.ForwardRefExoticComponent<
 ### Usage with Types
 
 ```typescript
-import { InnerLabelField } from '@torch-ui/components'
+import { InnerLabelField } from "@/components/InnerLabelField";
 import { useRef, useState } from 'react'
 
 function TypedExample() {
@@ -478,8 +488,8 @@ function TypedExample() {
 ### Controlled Form with Validation
 
 ```typescript
-import { InnerLabelField } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { InnerLabelField } from "@/components/InnerLabelField";
+import { Button } from "@/components/Button";
 import { useState } from 'react'
 
 function ValidatedForm() {
@@ -567,8 +577,8 @@ function ValidatedForm() {
 ### Real-time Search
 
 ```typescript
-import { InnerLabelField } from '@torch-ui/components'
-import { ActionButton } from '@torch-ui/components'
+import { InnerLabelField } from "@/components/InnerLabelField";
+import { ActionButton } from "@/components/ActionButton";
 import { useState, useEffect } from 'react'
 
 function SearchField() {
@@ -629,7 +639,7 @@ function SearchField() {
 
 ```typescript
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { InnerLabelField } from '@torch-ui/components'
+import { InnerLabelField } from "@/components/InnerLabelField";
 import userEvent from '@testing-library/user-event'
 
 describe('InnerLabelField', () => {

package/docs/components/input-field.md

@@ -1,6 +1,6 @@
 ---
 name: InputField
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/forms
 tags: [form, input, field, popover, tooltip, compound, accessible]
@@ -19,14 +19,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 InputField
 ```
 
+`add` also copies any components, hooks, and utilities that `InputField` depends on.
+
 ## Import
 
-```typescript
-import { InputField } from 'torch-glare/lib/components/InputField'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { InputField } from "@/components/InputField";
 ```
 
 ## Quick Examples
@@ -34,7 +42,7 @@ import { InputField } from 'torch-glare/lib/components/InputField'
 ### Basic Usage
 
 ```typescript
-import { InputField } from 'torch-glare/lib/components/InputField'
+import { InputField } from '@/components/InputField'
 
 function Example() {
   const [value, setValue] = useState('')
@@ -133,7 +141,7 @@ function AutocompleteField() {
 ### With Trailing Actions
 
 ```typescript
-import { Button } from 'torch-glare/lib/components/Button'
+import { Button } from '@/components/Button'
 
 function PasswordField() {
   const [showPassword, setShowPassword] = useState(false)
@@ -324,7 +332,7 @@ function EmailField() {
 ### Date Input with Calendar
 
 ```typescript
-import { Calendar } from 'torch-glare/lib/components/Calendar'
+import { Calendar } from '@/components/Calendar'
 
 function DateField() {
   const [date, setDate] = useState('')
@@ -362,7 +370,7 @@ function DateField() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { InputField } from 'torch-glare/lib/components/InputField'
+import { InputField } from '@/components/InputField'
 
 describe('InputField', () => {
   it('displays error message in tooltip', () => {
@@ -541,8 +549,8 @@ Wrap each labeled field in `flex flex-col gap-1.5` (not `space-y-1.5`) so labels
 
 ```diff
 // Migrating from Input to InputField
-- import { Input } from 'torch-glare/lib/components/Input'
-+ import { InputField } from 'torch-glare/lib/components/InputField'
+- import { Input } from '@/components/Input'
++ import { InputField } from '@/components/InputField'
 
 - <Input.Group error={!!error}>
 -   <Input.Icon>{icon}</Input.Icon>

package/docs/components/input-otp.md

@@ -1,6 +1,6 @@
 ---
 name: InputOTP
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/forms
 tags: [form, otp, input, verification, authentication, accessible]
@@ -16,19 +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 InputOTP
 ```
 
+`add` also copies any components, hooks, and utilities that `InputOTP` depends on.
+
 ## Import
 
-```typescript
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-  InputOTPSeparator
-} from 'torch-glare/lib/components/InputOTP'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { InputOTP } from "@/components/InputOTP";
 ```
 
 ## Quick Examples
@@ -36,7 +39,7 @@ import {
 ### Basic 6-Digit OTP
 
 ```typescript
-import { InputOTP, InputOTPGroup, InputOTPSlot } from 'torch-glare/lib/components/InputOTP'
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/InputOTP'
 
 function Example() {
   const [otp, setOtp] = useState('')
@@ -508,7 +511,7 @@ function MultiStepVerification() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { InputOTP, InputOTPGroup, InputOTPSlot } from 'torch-glare/lib/components/InputOTP'
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/InputOTP'
 
 describe('InputOTP', () => {
   it('handles input correctly', () => {

package/docs/components/input.md

@@ -1,6 +1,6 @@
 ---
 name: Input
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/forms
 tags: [form, input, text, field, accessible, compound]
@@ -16,16 +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 Input
 ```
 
+`add` also copies any components, hooks, and utilities that `Input` depends on.
+
 ## Import
 
-```typescript
-import { Input } from 'torch-glare/lib/components/Input'
-// Compound components
-import { Group, Icon, Trilling } from 'torch-glare/lib/components/Input'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { Input } from "@/components/Input";
 ```
 
 ## Quick Examples
@@ -33,7 +39,7 @@ import { Group, Icon, Trilling } from 'torch-glare/lib/components/Input'
 ### Basic Usage
 
 ```typescript
-import { Input } from 'torch-glare/lib/components/Input'
+import { Input } from '@/components/Input'
 
 function Example() {
   const [value, setValue] = useState('')
@@ -53,7 +59,7 @@ function Example() {
 ### With Icon
 
 ```typescript
-import { Input } from 'torch-glare/lib/components/Input'
+import { Input } from '@/components/Input'
 import { SearchIcon } from '@heroicons/react/24/outline'
 
 function SearchInput() {
@@ -71,15 +77,15 @@ function SearchInput() {
 ### With Trailing Element
 
 ```typescript
-import { Input } from 'torch-glare/lib/components/Input'
-import { Button } from 'torch-glare/lib/components/Button'
+import { Input } from '@/components/Input'
+import { Button } from '@/components/Button'
 
 function InputWithButton() {
   return (
     <Input.Group>
       <Input placeholder="Enter email..." />
       <Input.Trilling>
-        <Button size="sm" variant="PrimeStyle">
+        <Button size="S" variant="PrimeStyle">
           Subscribe
         </Button>
       </Input.Trilling>
@@ -251,8 +257,8 @@ export const Input: React.ForwardRefExoticComponent<InputProps> & {
 ### Form Field with Label
 
 ```typescript
-import { Input } from 'torch-glare/lib/components/Input'
-import { Label } from 'torch-glare/lib/components/Label'
+import { Input } from '@/components/Input'
+import { Label } from '@/components/Label'
 
 function FormField() {
   const [value, setValue] = useState('')
@@ -278,7 +284,7 @@ function FormField() {
 ### Search Field
 
 ```typescript
-import { Input } from 'torch-glare/lib/components/Input'
+import { Input } from '@/components/Input'
 import { SearchIcon, XMarkIcon } from '@heroicons/react/24/outline'
 
 function SearchField() {
@@ -391,7 +397,7 @@ function CurrencyInput() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { Input } from 'torch-glare/lib/components/Input'
+import { Input } from '@/components/Input'
 
 describe('Input', () => {
   it('handles user input', () => {
@@ -547,7 +553,7 @@ test('Input meets WCAG standards', async () => {
 ```diff
 // Import path changed
 - import Input from 'torch-glare/Input'
-+ import { Input } from 'torch-glare/lib/components/Input'
++ import { Input } from '@/components/Input'
 
 // Compound component structure
 - <Input icon={<SearchIcon />} />

package/docs/components/kanban-view.md

@@ -11,13 +11,22 @@ keywords: [data-views, kanban-view, kanban, board, columns, group-by, cards, com
 
 ## 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 `Button` component, the `DataViewCard` layout, and `lucide-react`.
+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 KanbanView
+```
+
+`add` also copies any components, hooks, and utilities that `KanbanView` depends on.
 
 ## Import
 
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
 ```tsx
-import { KanbanView, useDataViewsState } from "torch-glare"
-import type { KanbanViewProps, FieldConfig } from "torch-glare"
+import { KanbanView } from "@/components/KanbanView";
 ```
 
 ## When to use it directly
@@ -34,8 +43,9 @@ column. Column colors are assigned deterministically, or per-value via the
 field's `kanbanVariants`.
 
 ```tsx
-import { KanbanView, useDataViewsState } from "torch-glare"
-import type { FieldConfig } from "torch-glare"
+import { KanbanView } from "@/components/KanbanView";
+import { useDataViewsState } from "@/hooks/useDataViewsState";
+import type { FieldConfig } from "@/components/FieldConfig";
 
 const tasks = [
   { id: 1, title: "Spec API", status: "Todo", assignee: "Ada" },