torch-glare 2.4.0 → 2.4.1

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

package/docs/components/label-field.md

@@ -11,13 +11,22 @@ keywords: [label-field, form, input, label, required, field]
 
 ## 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 LabelField
+```
+
+`add` also copies any components, hooks, and utilities that `LabelField` depends on.
 
 ## Import
 
-```typescript
-import { LabelField } from '@torch-ui/components'
-import type { LabelFieldProps } from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { LabelField } from "@/components/LabelField";
 ```
 
 ## Quick Examples
@@ -25,7 +34,7 @@ import type { LabelFieldProps } from '@torch-ui/components'
 ### Basic Usage
 
 ```typescript
-import { LabelField } from '@torch-ui/components'
+import { LabelField } from "@/components/LabelField";
 import { useState } from 'react'
 
 function Example() {
@@ -45,7 +54,7 @@ function Example() {
 ### With Required Indicator
 
 ```typescript
-import { LabelField } from '@torch-ui/components'
+import { LabelField } from "@/components/LabelField";
 
 function RequiredField() {
   return (
@@ -61,7 +70,7 @@ function RequiredField() {
 ### With Secondary Label
 
 ```typescript
-import { LabelField } from '@torch-ui/components'
+import { LabelField } from "@/components/LabelField";
 
 function WithSecondary() {
   return (
@@ -77,7 +86,7 @@ function WithSecondary() {
 ### With Error Message
 
 ```typescript
-import { LabelField } from '@torch-ui/components'
+import { LabelField } from "@/components/LabelField";
 import { useState } from 'react'
 
 function WithValidation() {
@@ -108,7 +117,7 @@ function WithValidation() {
 ### With Icon
 
 ```typescript
-import { LabelField } from '@torch-ui/components'
+import { LabelField } from "@/components/LabelField";
 
 function WithIcon() {
   return (
@@ -124,8 +133,8 @@ function WithIcon() {
 ### With Action Button
 
 ```typescript
-import { LabelField } from '@torch-ui/components'
-import { ActionButton } from '@torch-ui/components'
+import { LabelField } from "@/components/LabelField";
+import { ActionButton } from "@/components/ActionButton";
 import { useState } from 'react'
 
 function WithActionButton() {
@@ -151,7 +160,7 @@ function WithActionButton() {
 ### Horizontal Layout
 
 ```typescript
-import { LabelField } from '@torch-ui/components'
+import { LabelField } from "@/components/LabelField";
 
 function HorizontalLayout() {
   return (
@@ -168,7 +177,7 @@ function HorizontalLayout() {
 ### Different Sizes
 
 ```typescript
-import { LabelField } from '@torch-ui/components'
+import { LabelField } from "@/components/LabelField";
 
 function Sizes() {
   return (
@@ -192,8 +201,9 @@ function Sizes() {
 ### Registration Form
 
 ```typescript
-import { LabelField } from '@torch-ui/components'
-import { Button, PasswordLevel } from '@torch-ui/components'
+import { LabelField } from "@/components/LabelField";
+import { Button } from "@/components/Button";
+import { PasswordLevel } from "@/components/PasswordLevel";
 import { useState } from 'react'
 
 function RegistrationForm() {
@@ -281,7 +291,7 @@ function RegistrationForm() {
 ### With Popover Dropdown
 
 ```typescript
-import { LabelField } from '@torch-ui/components'
+import { LabelField } from "@/components/LabelField";
 import { useState } from 'react'
 
 function WithPopover() {
@@ -314,8 +324,8 @@ function WithPopover() {
 ### Profile Settings Form
 
 ```typescript
-import { LabelField } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { LabelField } from "@/components/LabelField";
+import { Button } from "@/components/Button";
 import { useState } from 'react'
 
 function ProfileSettings() {
@@ -426,7 +436,7 @@ export const LabelField: React.ForwardRefExoticComponent<
 ### Usage with Types
 
 ```typescript
-import { LabelField } from '@torch-ui/components'
+import { LabelField } from "@/components/LabelField";
 import { useRef, useState } from 'react'
 
 function TypedExample() {
@@ -455,7 +465,7 @@ function TypedExample() {
 ### Form Field Wrapper Hook
 
 ```typescript
-import { LabelField } from '@torch-ui/components'
+import { LabelField } from "@/components/LabelField";
 import { useState, useCallback } from 'react'
 
 function useFormField(initialValue: string = '') {
@@ -526,7 +536,7 @@ function FormWithHook() {
 ### Reusable Form Fields
 
 ```typescript
-import { LabelField } from '@torch-ui/components'
+import { LabelField } from "@/components/LabelField";
 import { ComponentProps } from 'react'
 
 type FieldConfig = Omit<ComponentProps<typeof LabelField>, 'value' | 'onChange'> & {
@@ -580,7 +590,7 @@ function DynamicForm() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { LabelField } from '@torch-ui/components'
+import { LabelField } from "@/components/LabelField";
 import userEvent from '@testing-library/user-event'
 
 describe('LabelField', () => {