torch-glare 2.3.0 → 2.4.1

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>

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', () => {