torch-glare 2.4.0 → 2.4.1

package/docs/components/label.md

@@ -11,13 +11,22 @@ keywords: [label, form, input, required, text, typography]
 
 ## 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 Label
+```
+
+`add` also copies any components, hooks, and utilities that `Label` depends on.
 
 ## Import
 
-```typescript
-import { Label } from '@torch-ui/components'
-import type { LabelProps } from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { Label } from "@/components/Label";
 ```
 
 ## Quick Examples
@@ -25,8 +34,8 @@ import type { LabelProps } from '@torch-ui/components'
 ### Basic Usage
 
 ```typescript
-import { Label } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { Label } from "@/components/Label";
+import { InputField } from "@/components/InputField";
 
 function Example() {
   return (
@@ -40,8 +49,8 @@ function Example() {
 ### With Required Indicator
 
 ```typescript
-import { Label } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { Label } from "@/components/Label";
+import { InputField } from "@/components/InputField";
 
 function RequiredField() {
   return (
@@ -58,8 +67,8 @@ function RequiredField() {
 ### With Secondary Label
 
 ```typescript
-import { Label } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { Label } from "@/components/Label";
+import { InputField } from "@/components/InputField";
 
 function WithSecondary() {
   return (
@@ -76,8 +85,8 @@ function WithSecondary() {
 ### All Labels Combined
 
 ```typescript
-import { Label } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { Label } from "@/components/Label";
+import { InputField } from "@/components/InputField";
 
 function AllLabels() {
   return (
@@ -95,8 +104,8 @@ function AllLabels() {
 ### Horizontal Layout
 
 ```typescript
-import { Label } from '@torch-ui/components'
-import { Switch } from '@torch-ui/components'
+import { Label } from "@/components/Label";
+import { Switch } from "@/components/Switch";
 
 function HorizontalLabel() {
   return (
@@ -113,8 +122,8 @@ function HorizontalLabel() {
 ### Vertical Label Direction
 
 ```typescript
-import { Label } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { Label } from "@/components/Label";
+import { InputField } from "@/components/InputField";
 
 function VerticalLabels() {
   return (
@@ -132,8 +141,8 @@ function VerticalLabels() {
 ### Reversed Children
 
 ```typescript
-import { Label } from '@torch-ui/components'
-import { Checkbox } from '@torch-ui/components'
+import { Label } from "@/components/Label";
+import { Checkbox } from "@/components/Checkbox";
 
 function ReversedLayout() {
   return (
@@ -151,8 +160,8 @@ function ReversedLayout() {
 ### Different Sizes
 
 ```typescript
-import { Label } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { Label } from "@/components/Label";
+import { InputField } from "@/components/InputField";
 
 function Sizes() {
   return (
@@ -176,8 +185,8 @@ function Sizes() {
 ### Style Variants
 
 ```typescript
-import { Label } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { Label } from "@/components/Label";
+import { InputField } from "@/components/InputField";
 
 function Variants() {
   return (
@@ -203,7 +212,7 @@ function Variants() {
 ### Polymorphic Rendering
 
 ```typescript
-import { Label } from '@torch-ui/components'
+import { Label } from "@/components/Label";
 
 function PolymorphicLabel() {
   return (
@@ -233,8 +242,9 @@ function PolymorphicLabel() {
 ### Form Example
 
 ```typescript
-import { Label } from '@torch-ui/components'
-import { InputField, Button } from '@torch-ui/components'
+import { Label } from "@/components/Label";
+import { Button } from "@/components/Button";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function RegistrationForm() {
@@ -359,7 +369,7 @@ export const Label: React.ForwardRefExoticComponent<
 ### Usage with Types
 
 ```typescript
-import { Label } from '@torch-ui/components'
+import { Label } from "@/components/Label";
 import { useRef } from 'react'
 
 function TypedExample() {
@@ -387,8 +397,8 @@ function TypedExample() {
 ### Responsive Layout
 
 ```typescript
-import { Label } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { Label } from "@/components/Label";
+import { InputField } from "@/components/InputField";
 import { useState, useEffect } from 'react'
 
 function ResponsiveLabel() {
@@ -417,8 +427,9 @@ function ResponsiveLabel() {
 ### Dynamic Required State
 
 ```typescript
-import { Label } from '@torch-ui/components'
-import { InputField, Checkbox } from '@torch-ui/components'
+import { Label } from "@/components/Label";
+import { Checkbox } from "@/components/Checkbox";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function DynamicRequired() {
@@ -452,7 +463,7 @@ function DynamicRequired() {
 ### Label Group Component
 
 ```typescript
-import { Label } from '@torch-ui/components'
+import { Label } from "@/components/Label";
 import { ReactNode } from 'react'
 
 interface LabelGroupProps {
@@ -508,7 +519,7 @@ function FormWithGroup() {
 
 ```typescript
 import { render, screen } from '@testing-library/react'
-import { Label } from '@torch-ui/components'
+import { Label } from "@/components/Label";
 
 describe('Label', () => {
   it('renders label text', () => {

package/docs/components/labeled-check-box.md

@@ -1,6 +1,6 @@
 ---
 name: LabeledCheckBox
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/forms
 tags: [form, checkbox, label, selection, accessible, compound]
@@ -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 LabeledCheckBox
 ```
 
+`add` also copies any components, hooks, and utilities that `LabeledCheckBox` depends on.
+
 ## Import
 
-```typescript
-import { LabeledCheckBox } from 'torch-glare/lib/components/LabeledCheckBox'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { LabeledCheckBox } from "@/components/LabeledCheckBox";
 ```
 
 ## Quick Examples
@@ -32,7 +40,7 @@ import { LabeledCheckBox } from 'torch-glare/lib/components/LabeledCheckBox'
 ### Basic Usage
 
 ```typescript
-import { LabeledCheckBox } from 'torch-glare/lib/components/LabeledCheckBox'
+import { LabeledCheckBox } from '@/components/LabeledCheckBox'
 
 function Example() {
   const [checked, setChecked] = useState(false)
@@ -389,7 +397,7 @@ function EmailSubscriptions() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { LabeledCheckBox } from 'torch-glare/lib/components/LabeledCheckBox'
+import { LabeledCheckBox } from '@/components/LabeledCheckBox'
 
 describe('LabeledCheckBox', () => {
   it('renders label and checkbox together', () => {
@@ -571,10 +579,10 @@ Note: Large size uses medium checkbox for visual balance.
 ```diff
 // Import path
 - import LabeledCheckBox from 'torch-glare/LabeledCheckBox'
-+ import { LabeledCheckBox } from 'torch-glare/lib/components/LabeledCheckBox'
++ import { LabeledCheckBox } from '@/components/LabeledCheckBox'
 
 // Size prop values
-- <LabeledCheckBox size="small" />
+- <LabeledCheckBox size="M" />
 + <LabeledCheckBox size="S" />
 ```
 

package/docs/components/labeled-radio.md

@@ -1,6 +1,6 @@
 ---
 name: LabeledRadio
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/forms
 tags: [form, radio, label, selection, accessible, compound]
@@ -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 LabeledRadio
 ```
 
+`add` also copies any components, hooks, and utilities that `LabeledRadio` depends on.
+
 ## Import
 
-```typescript
-import { LabeledRadio } from 'torch-glare/lib/components/LabeledRadio'
-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 { LabeledRadio } from "@/components/LabeledRadio";
 ```
 
 ## Quick Examples
@@ -33,8 +40,8 @@ import { RadioGroup } from 'torch-glare/lib/components/Radio'
 ### Basic Usage
 
 ```typescript
-import { LabeledRadio } from 'torch-glare/lib/components/LabeledRadio'
-import { RadioGroup } from 'torch-glare/lib/components/Radio'
+import { LabeledRadio } from '@/components/LabeledRadio'
+import { RadioGroup } from '@/components/Radio'
 
 function Example() {
   const [selected, setSelected] = useState('option1')
@@ -503,8 +510,8 @@ function AccountTypeSelector() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { LabeledRadio } from 'torch-glare/lib/components/LabeledRadio'
-import { RadioGroup } from 'torch-glare/lib/components/Radio'
+import { LabeledRadio } from '@/components/LabeledRadio'
+import { RadioGroup } from '@/components/Radio'
 
 describe('LabeledRadio', () => {
   it('renders label and radio together', () => {
@@ -723,10 +730,10 @@ Note: Large size uses medium radio for visual balance.
 ```diff
 // Import path
 - import LabeledRadio from 'torch-glare/LabeledRadio'
-+ import { LabeledRadio } from 'torch-glare/lib/components/LabeledRadio'
++ import { LabeledRadio } from '@/components/LabeledRadio'
 
 // Size prop values
-- <LabeledRadio size="small" />
+- <LabeledRadio size="M" />
 + <LabeledRadio size="S" />
 ```
 

package/docs/components/link-button.md

@@ -12,10 +12,16 @@ A stylized link button component featuring an animated arrow that appears on hov
 
 ## 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 link-button
+npx torch-glare@latest init
+npx torch-glare@latest add LinkButton
 ```
 
+`add` also copies any components, hooks, and utilities that `LinkButton` depends on.
+
 ## Imports
 
 ```typescript

package/docs/components/login-button.md

@@ -12,10 +12,16 @@ A specialized full-width button component designed specifically for authenticati
 
 ## 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 login-button
+npx torch-glare@latest init
+npx torch-glare@latest add LoginButton
 ```
 
+`add` also copies any components, hooks, and utilities that `LoginButton` depends on.
+
 ## Imports
 
 ```typescript
@@ -843,7 +849,7 @@ describe('LoginButton', () => {
 // Before: Material-UI Button
 <Button
   fullWidth
-  variant="contained"
+  variant="PrimeStyle"
   loading={isLoading}
 >
   Sign In

package/docs/components/password-level.md

@@ -11,13 +11,22 @@ keywords: [password, strength, security, validation, indicator, level]
 
 ## 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 PasswordLevel
+```
+
+`add` also copies any components, hooks, and utilities that `PasswordLevel` depends on.
 
 ## Import
 
-```typescript
-import { PasswordLevel } from '@torch-ui/components'
-import type { PasswordLevelProps } from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { PasswordLevel } from "@/components/PasswordLevel";
 ```
 
 ## Quick Examples
@@ -25,8 +34,8 @@ import type { PasswordLevelProps } from '@torch-ui/components'
 ### Basic Usage
 
 ```typescript
-import { PasswordLevel } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { PasswordLevel } from "@/components/PasswordLevel";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function Example() {
@@ -49,8 +58,8 @@ function Example() {
 ### With Labels
 
 ```typescript
-import { PasswordLevel } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { PasswordLevel } from "@/components/PasswordLevel";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function WithLabels() {
@@ -96,8 +105,10 @@ function WithLabels() {
 ### Registration Form
 
 ```typescript
-import { PasswordLevel } from '@torch-ui/components'
-import { InputField, Button, FieldHint } from '@torch-ui/components'
+import { PasswordLevel } from "@/components/PasswordLevel";
+import { Button } from "@/components/Button";
+import { FieldHint } from "@/components/FieldHint";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function RegistrationForm() {
@@ -157,8 +168,8 @@ function RegistrationForm() {
 ### With Requirements Checklist
 
 ```typescript
-import { PasswordLevel } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { PasswordLevel } from "@/components/PasswordLevel";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function PasswordWithChecklist() {
@@ -217,8 +228,9 @@ function PasswordWithChecklist() {
 ### Password Change Form
 
 ```typescript
-import { PasswordLevel } from '@torch-ui/components'
-import { InputField, Button } from '@torch-ui/components'
+import { PasswordLevel } from "@/components/PasswordLevel";
+import { Button } from "@/components/Button";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function PasswordChangeForm() {
@@ -269,8 +281,8 @@ function PasswordChangeForm() {
 ### Real-time Feedback
 
 ```typescript
-import { PasswordLevel } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { PasswordLevel } from "@/components/PasswordLevel";
+import { InputField } from "@/components/InputField";
 import { useState, useEffect } from 'react'
 
 function RealTimeFeedback() {
@@ -327,7 +339,7 @@ function RealTimeFeedback() {
 ### Different Themes
 
 ```typescript
-import { PasswordLevel } from '@torch-ui/components'
+import { PasswordLevel } from "@/components/PasswordLevel";
 import { useState } from 'react'
 
 function ThemeExample() {
@@ -360,7 +372,7 @@ function ThemeExample() {
 ### Custom Styling
 
 ```typescript
-import { PasswordLevel } from '@torch-ui/components'
+import { PasswordLevel } from "@/components/PasswordLevel";
 import { useState } from 'react'
 
 function CustomStyling() {
@@ -387,8 +399,8 @@ function CustomStyling() {
 ### Animated Feedback
 
 ```typescript
-import { PasswordLevel } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { PasswordLevel } from "@/components/PasswordLevel";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function AnimatedFeedback() {
@@ -524,7 +536,7 @@ function isPasswordAcceptable(password: string, minLevel: number = 2): boolean {
 ### Validation Hook
 
 ```typescript
-import { PasswordLevel } from '@torch-ui/components'
+import { PasswordLevel } from "@/components/PasswordLevel";
 import { useState, useMemo } from 'react'
 
 function usePasswordValidation(password: string) {
@@ -584,8 +596,9 @@ function ValidatedPasswordField() {
 ### Password Generator
 
 ```typescript
-import { PasswordLevel } from '@torch-ui/components'
-import { InputField, Button } from '@torch-ui/components'
+import { PasswordLevel } from "@/components/PasswordLevel";
+import { Button } from "@/components/Button";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function PasswordGenerator() {
@@ -638,7 +651,7 @@ function PasswordGenerator() {
 
 ```typescript
 import { render, screen } from '@testing-library/react'
-import { PasswordLevel } from '@torch-ui/components'
+import { PasswordLevel } from "@/components/PasswordLevel";
 
 describe('PasswordLevel', () => {
   it('renders three bars', () => {

package/docs/components/popover.md

@@ -11,19 +11,22 @@ keywords: [popover, overlay, dropdown, radix-ui, menu, non-modal]
 
 ## 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 Popover
 ```
 
+`add` also copies any components, hooks, and utilities that `Popover` depends on.
+
 ## Import
 
-```typescript
-import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverItem,
-} from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { Popover } from "@/components/Popover";
 ```
 
 ## Quick Examples
@@ -31,8 +34,8 @@ import {
 ### Basic Usage
 
 ```typescript
-import { Popover, PopoverTrigger, PopoverContent } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/Popover";
+import { Button } from "@/components/Button";
 
 function Example() {
   return (
@@ -53,7 +56,7 @@ function Example() {
 ### With PopoverItem List
 
 ```typescript
-import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from '@torch-ui/components'
+import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from "@/components/Popover";
 
 function SelectPopover() {
   const items = ['Option 1', 'Option 2', 'Option 3']
@@ -81,7 +84,7 @@ function SelectPopover() {
 ### SystemStyle Variant
 
 ```typescript
-import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from '@torch-ui/components'
+import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from "@/components/Popover";
 
 function SystemStylePopover() {
   return (
@@ -102,7 +105,7 @@ function SystemStylePopover() {
 ### With Icons
 
 ```typescript
-import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from '@torch-ui/components'
+import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from "@/components/Popover";
 
 function IconPopover() {
   return (
@@ -132,7 +135,7 @@ function IconPopover() {
 ### With Active State
 
 ```typescript
-import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from '@torch-ui/components'
+import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from "@/components/Popover";
 import { useState } from 'react'
 
 function SelectablePopover() {
@@ -171,7 +174,7 @@ function SelectablePopover() {
 ### With Overlay Blur
 
 ```typescript
-import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from '@torch-ui/components'
+import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from "@/components/Popover";
 
 function BlurredPopover() {
   return (
@@ -191,7 +194,7 @@ function BlurredPopover() {
 ### Warning Items
 
 ```typescript
-import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from '@torch-ui/components'
+import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from "@/components/Popover";
 
 function WarningPopover() {
   return (
@@ -217,7 +220,7 @@ function WarningPopover() {
 ### Size Variants
 
 ```typescript
-import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from '@torch-ui/components'
+import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from "@/components/Popover";
 
 function SizedPopover() {
   return (
@@ -237,7 +240,7 @@ function SizedPopover() {
 ### Controlled Popover
 
 ```typescript
-import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from '@torch-ui/components'
+import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from "@/components/Popover";
 import { useState } from 'react'
 
 function ControlledPopover() {
@@ -265,7 +268,7 @@ function ControlledPopover() {
 ### Positioning
 
 ```typescript
-import { Popover, PopoverTrigger, PopoverContent } from '@torch-ui/components'
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/Popover";
 
 function PositionedPopover() {
   return (
@@ -420,7 +423,7 @@ export const PopoverItem: <T extends React.ElementType = 'button'>(
 ### Select Pattern
 
 ```typescript
-import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from '@torch-ui/components'
+import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from "@/components/Popover";
 import { useState } from 'react'
 
 function SelectField() {
@@ -481,7 +484,7 @@ function ContextMenu({ onEdit, onDelete }) {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from '@torch-ui/components'
+import { Popover, PopoverTrigger, PopoverContent, PopoverItem } from "@/components/Popover";
 
 describe('Popover', () => {
   it('opens on trigger click', () => {
@@ -590,8 +593,8 @@ describe('Popover', () => {
 ## Migration from DropdownMenu
 
 ```diff
-- import { DropdownMenu } from '@torch-ui/components'
-+ import { Popover } from '@torch-ui/components'
+- import { DropdownMenu } from "@/components/DropdownMenu";
++ import { Popover } from "@/components/Popover";
 
 - <DropdownMenu>
 -   <DropdownMenuTrigger>Open</DropdownMenuTrigger>