torch-glare 2.4.0 → 2.4.1

package/docs/components/field-hint.md

@@ -11,13 +11,22 @@ keywords: [field-hint, alert, validation, message, form, feedback, inline]
 
 ## 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 FieldHint
+```
+
+`add` also copies any components, hooks, and utilities that `FieldHint` depends on.
 
 ## Import
 
-```typescript
-import { FieldHint } from '@torch-ui/components'
-import type { FieldHintProps } from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { FieldHint } from "@/components/FieldHint";
 ```
 
 ## Quick Examples
@@ -25,7 +34,7 @@ import type { FieldHintProps } from '@torch-ui/components'
 ### Basic Usage
 
 ```typescript
-import { FieldHint } from '@torch-ui/components'
+import { FieldHint } from "@/components/FieldHint";
 
 function Example() {
   return (
@@ -40,7 +49,7 @@ function Example() {
 ### All States
 
 ```typescript
-import { FieldHint } from '@torch-ui/components'
+import { FieldHint } from "@/components/FieldHint";
 
 function AllStates() {
   return (
@@ -72,8 +81,8 @@ function AllStates() {
 ### With Form Field
 
 ```typescript
-import { FieldHint } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { FieldHint } from "@/components/FieldHint";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function WithFormField() {
@@ -115,7 +124,7 @@ function WithFormField() {
 ### Custom Icon
 
 ```typescript
-import { FieldHint } from '@torch-ui/components'
+import { FieldHint } from "@/components/FieldHint";
 
 function CustomIcon() {
   return (
@@ -145,8 +154,9 @@ function CustomIcon() {
 ### Password Validation
 
 ```typescript
-import { FieldHint } from '@torch-ui/components'
-import { InputField, PasswordLevel } from '@torch-ui/components'
+import { FieldHint } from "@/components/FieldHint";
+import { InputField } from "@/components/InputField";
+import { PasswordLevel } from "@/components/PasswordLevel";
 import { useState } from 'react'
 
 function PasswordValidation() {
@@ -199,8 +209,9 @@ function PasswordValidation() {
 ### Form Validation
 
 ```typescript
-import { FieldHint } from '@torch-ui/components'
-import { InputField, Button } from '@torch-ui/components'
+import { FieldHint } from "@/components/FieldHint";
+import { Button } from "@/components/Button";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function FormValidation() {
@@ -289,8 +300,9 @@ function FormValidation() {
 ### API Response Feedback
 
 ```typescript
-import { FieldHint } from '@torch-ui/components'
-import { InputField, Button } from '@torch-ui/components'
+import { FieldHint } from "@/components/FieldHint";
+import { Button } from "@/components/Button";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function APIFeedback() {
@@ -360,7 +372,7 @@ function APIFeedback() {
 ### File Upload Feedback
 
 ```typescript
-import { FieldHint } from '@torch-ui/components'
+import { FieldHint } from "@/components/FieldHint";
 import { useState } from 'react'
 
 function FileUploadFeedback() {
@@ -429,7 +441,7 @@ function FileUploadFeedback() {
 ### Multi-line Message
 
 ```typescript
-import { FieldHint } from '@torch-ui/components'
+import { FieldHint } from "@/components/FieldHint";
 
 function MultilineMessage() {
   return (
@@ -456,7 +468,7 @@ Please save your work before continuing.`}
 ### Dynamic Theme
 
 ```typescript
-import { FieldHint } from '@torch-ui/components'
+import { FieldHint } from "@/components/FieldHint";
 import { useState } from 'react'
 
 function DynamicTheme() {
@@ -488,8 +500,8 @@ function DynamicTheme() {
 ### Conditional Rendering
 
 ```typescript
-import { FieldHint } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { FieldHint } from "@/components/FieldHint";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function ConditionalHints() {
@@ -579,7 +591,7 @@ export const FieldHint: React.FC<FieldHintProps>
 ### Usage with Types
 
 ```typescript
-import { FieldHint } from '@torch-ui/components'
+import { FieldHint } from "@/components/FieldHint";
 import { useState } from 'react'
 
 type ValidationState = {
@@ -607,7 +619,7 @@ function TypedExample() {
 ### Validation Hook
 
 ```typescript
-import { FieldHint } from '@torch-ui/components'
+import { FieldHint } from "@/components/FieldHint";
 import { useState, useCallback } from 'react'
 
 function useFieldValidation<T>(
@@ -665,8 +677,8 @@ function ValidatedField() {
 ### Form Field Wrapper
 
 ```typescript
-import { FieldHint } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { FieldHint } from "@/components/FieldHint";
+import { InputField } from "@/components/InputField";
 import { ReactNode } from 'react'
 
 interface FieldWrapperProps {
@@ -711,7 +723,7 @@ function FieldWrapper({
 
 ```typescript
 import { render, screen } from '@testing-library/react'
-import { FieldHint } from '@torch-ui/components'
+import { FieldHint } from "@/components/FieldHint";
 
 describe('FieldHint', () => {
   it('renders label text', () => {

package/docs/components/field-section.md

@@ -12,10 +12,16 @@ A structured form section component that provides consistent layout for form fie
 
 ## 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 field-section
+npx torch-glare@latest init
+npx torch-glare@latest add FieldSection
 ```
 
+`add` also copies any components, hooks, and utilities that `FieldSection` depends on.
+
 ## Imports
 
 ```typescript
@@ -346,7 +352,7 @@ export function ProfileSettingsForm() {
       >
         <div className="w-full flex items-center gap-4">
           <Avatar size="L" src="/default-avatar.jpg" />
-          <Button variant="SecStyle" size="M">
+          <Button variant="BluSecStyle" size="M">
             Upload New Photo
           </Button>
         </div>
@@ -490,7 +496,7 @@ export function AccountSettings() {
         }
       >
         <div className="w-full space-y-2">
-          <Button variant="DangerStyle" size="M">
+          <Button variant="RedSecStyle" size="M">
             Delete Account
           </Button>
         </div>

package/docs/components/form-stepper.md

@@ -14,10 +14,16 @@ The component is composed of `FormStepper`, `FormStep`, `FormStepIndicator`, and
 
 ## 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 FormStepper
 ```
 
+`add` also copies any components, hooks, and utilities that `FormStepper` depends on.
+
 ## Imports
 
 ```typescript

package/docs/components/form.md

@@ -1,6 +1,6 @@
 ---
 name: Form
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/forms
 tags: [form, validation, react-hook-form, accessible, compound]
@@ -18,25 +18,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 react-hook-form
+npx torch-glare@latest init
+npx torch-glare@latest add Form
 ```
 
+`add` also copies any components, hooks, and utilities that `Form` depends on.
+
 ## Import
 
-```typescript
-import {
-  Form,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage
-} from 'torch-glare/lib/components/Form'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
 
-// Also import from react-hook-form
-import { useForm } from 'react-hook-form'
+```tsx
+import { Form } from "@/components/Form";
 ```
 
 ## Quick Examples
@@ -52,9 +49,9 @@ import {
   FormLabel,
   FormControl,
   FormMessage
-} from 'torch-glare/lib/components/Form'
-import { Input } from 'torch-glare/lib/components/Input'
-import { Button } from 'torch-glare/lib/components/Button'
+} from '@/components/Form'
+import { Input } from '@/components/Input'
+import { Button } from '@/components/Button'
 
 function BasicForm() {
   const form = useForm({
@@ -213,9 +210,9 @@ function ValidatedForm() {
 ### With Multiple Field Types
 
 ```typescript
-import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from 'torch-glare/lib/components/Select'
-import { Checkbox } from 'torch-glare/lib/components/Checkbox'
-import { RadioGroup, RadioGroupItem } from 'torch-glare/lib/components/Radio'
+import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@/components/Select'
+import { Checkbox } from '@/components/Checkbox'
+import { RadioGroup, RadioGroupItem } from '@/components/Radio'
 
 function MultiFieldForm() {
   const form = useForm({

package/docs/components/header-bar.md

@@ -12,10 +12,16 @@ A presentational header chip used at the top of a form, page, or drawer to commu
 
 ## 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 HeaderBar
 ```
 
+`add` also copies any components, hooks, and utilities that `HeaderBar` depends on.
+
 ## Imports
 
 ```typescript

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" },