torch-glare 2.4.0 → 2.4.1

package/docs/components/badge.md

@@ -12,10 +12,16 @@ Compact label for status, categories, and tags. Two visual styles (`solid`, `sub
 
 ## 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 badge
+npx torch-glare@latest init
+npx torch-glare@latest add Badge
 ```
 
+`add` also copies any components, hooks, and utilities that `Badge` depends on.
+
 ## Imports
 
 ```typescript

package/docs/components/breadcrumb.md

@@ -1,6 +1,6 @@
 ---
 name: Breadcrumb
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/navigation
 tags: [navigation, breadcrumb, wayfinding, compound, accessible, rtl]
@@ -17,32 +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 Breadcrumb
 ```
 
+`add` also copies any components, hooks, and utilities that `Breadcrumb` depends on.
+
 ## Import
 
-```typescript
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-} from 'torch-glare/lib/components/Breadcrumb'
-// or
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-} from 'torch-glare/lib/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { Breadcrumb } from "@/components/Breadcrumb";
 ```
 
 ## Quick Examples
@@ -50,14 +40,7 @@ import {
 ### Basic Usage
 
 ```typescript
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from 'torch-glare/lib/components/Breadcrumb'
+import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from "@/components/Breadcrumb";
 
 function Example() {
   return (
@@ -463,7 +446,7 @@ function DynamicBreadcrumb({ segments }: { segments: { label: string; href: stri
 ### Collapsible Breadcrumb with Dropdown
 
 ```typescript
-import { DropdownMenu } from 'torch-glare/lib/components/DropdownMenu'
+import { DropdownMenu } from "@/components/DropdownMenu";
 
 function CollapsibleBreadcrumb({
   items,
@@ -639,15 +622,7 @@ function FileExplorerBreadcrumb({
 
 ```typescript
 import { render, screen } from '@testing-library/react'
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-} from 'torch-glare/lib/components/Breadcrumb'
+import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from "@/components/Breadcrumb";
 
 describe('Breadcrumb', () => {
   it('renders navigation landmark', () => {

package/docs/components/button-group.md

@@ -1,6 +1,6 @@
 ---
 name: ButtonGroup
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/buttons
 tags: [toggle-group, button-group, selection, radix-ui, accessible, compound]
@@ -17,19 +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 ButtonGroup
 ```
 
+`add` also copies any components, hooks, and utilities that `ButtonGroup` depends on.
+
 ## Import
 
-```typescript
-import { ButtonGroup, ButtonGroupItem } from 'torch-glare/lib/components/ButtonGroup'
-// or
-import { ButtonGroup, ButtonGroupItem } from 'torch-glare/lib/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
 
-// Also re-exports ToggleButton from ToggleButton.tsx
-import { ToggleButton } from 'torch-glare/lib/components/ButtonGroup'
+```tsx
+import { ButtonGroup } from "@/components/ButtonGroup";
 ```
 
 ## Quick Examples
@@ -37,7 +40,7 @@ import { ToggleButton } from 'torch-glare/lib/components/ButtonGroup'
 ### Basic Usage (Single Selection)
 
 ```typescript
-import { ButtonGroup, ButtonGroupItem } from 'torch-glare/lib/components/ButtonGroup'
+import { ButtonGroup, ButtonGroupItem } from "@/components/ButtonGroup";
 
 function Example() {
   const [value, setValue] = useState('left')
@@ -420,7 +423,7 @@ function DarkToolbar() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { ButtonGroup, ButtonGroupItem } from 'torch-glare/lib/components/ButtonGroup'
+import { ButtonGroup, ButtonGroupItem } from "@/components/ButtonGroup";
 
 describe('ButtonGroup', () => {
   it('selects a single value', () => {

package/docs/components/button.md

@@ -1,6 +1,6 @@
 ---
 name: Button
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/buttons
 tags: [interactive, form, action, accessible, polymorphic]
@@ -17,16 +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 Button
 ```
 
+`add` also copies any components, hooks, and utilities that `Button` depends on.
+
 ## Import
 
-```typescript
-import { Button } from 'torch-glare/lib/components/Button'
-// or
-import { Button } from 'torch-glare/lib/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { Button } from "@/components/Button";
 ```
 
 ## Quick Examples
@@ -34,7 +40,7 @@ import { Button } from 'torch-glare/lib/components'
 ### Basic Usage
 
 ```typescript
-import { Button } from 'torch-glare/lib/components/Button'
+import { Button } from '@/components/Button'
 
 function Example() {
   return (
@@ -53,14 +59,21 @@ function Example() {
 <Button variant="PrimeContStyle">Primary Container</Button>
 
 // Secondary styles
-<Button variant="BlueSecStyle">Blue Secondary</Button>
+<Button variant="BluSecStyle">Blue Secondary</Button>
 <Button variant="YelSecStyle">Yellow Secondary</Button>
 <Button variant="RedSecStyle">Red Secondary</Button>
 
 // Container styles
-<Button variant="BlueContStyle">Blue Container</Button>
+<Button variant="BluContStyle">Blue Container</Button>
 <Button variant="RedContStyle">Red Container</Button>
 
+// Color (solid) styles
+<Button variant="PrimeColStyle">Primary Color</Button>
+<Button variant="BluColStyle">Blue Color</Button>
+<Button variant="RedColStyle">Red Color</Button>
+<Button variant="GreenColStyle">Green Color</Button>
+<Button variant="YelColStyle">Yellow Color</Button>
+
 // Border style
 <Button variant="BorderStyle">Border Only</Button>
 ```
@@ -68,11 +81,11 @@ function Example() {
 ### With Sizes
 
 ```typescript
-<Button size="sm">Small</Button>
-<Button size="md">Medium (Default)</Button>
-<Button size="lg">Large</Button>
-<Button size="xl">Extra Large</Button>
-<Button size="icon">Icon Only</Button>
+<Button size="S">Small</Button>
+<Button size="M">Medium (Default)</Button>
+<Button size="L">Large</Button>
+<Button size="XL">Extra Large</Button>
+<Button buttonType="icon">Icon Only</Button>
 ```
 
 ### Loading State
@@ -117,7 +130,7 @@ import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline'
 </Button>
 
 // Icon only
-<Button size="icon" aria-label="Add new item">
+<Button buttonType="icon" aria-label="Add new item">
   <PlusIcon className="w-5 h-5" />
 </Button>
 ```
@@ -143,7 +156,7 @@ import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline'
   Dark Theme Button
 </Button>
 
-<Button theme="light" variant="BlueSecStyle">
+<Button theme="light" variant="BluSecStyle">
   Light Theme Button
 </Button>
 ```
@@ -155,7 +168,8 @@ import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline'
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `variant` | `ButtonVariant` | `'PrimeStyle'` | Visual style variant of the button |
-| `size` | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'icon'` | `'md'` | Size of the button |
+| `size` | `'S' \| 'M' \| 'L' \| 'XL'` | `'M'` | Size of the button |
+| `buttonType` | `'button' \| 'icon'` | `'button'` | Layout type; `'icon'` renders a square icon-only button |
 | `is_loading` | `boolean` | `false` | Shows loading state and disables interaction |
 | `disabled` | `boolean` | `false` | Disables the button |
 | `asChild` | `boolean` | `false` | Merges props onto child element |
@@ -175,13 +189,18 @@ import { VariantProps } from 'class-variance-authority'
 
 type ButtonVariant =
   | 'PrimeStyle'
-  | 'BlueSecStyle'
+  | 'BluSecStyle'
   | 'YelSecStyle'
   | 'RedSecStyle'
   | 'BorderStyle'
   | 'PrimeContStyle'
-  | 'BlueContStyle'
+  | 'BluContStyle'
   | 'RedContStyle'
+  | 'PrimeColStyle'
+  | 'BluColStyle'
+  | 'RedColStyle'
+  | 'GreenColStyle'
+  | 'YelColStyle'
 
 type Themes = 'light' | 'dark' | 'default'
 
@@ -192,6 +211,7 @@ interface ButtonProps extends
   disabled?: boolean
   asChild?: boolean
   variant?: ButtonVariant
+  buttonType?: 'button' | 'icon'
   as?: React.ElementType
   theme?: Themes
   containerClassName?: string
@@ -207,8 +227,8 @@ export const Button: React.ForwardRefExoticComponent<
 ### Form Submit Button
 
 ```typescript
-import { Button } from 'torch-glare/lib/components/Button'
-import { Form } from 'torch-glare/lib/components/Form'
+import { Button } from '@/components/Button'
+import { Form } from '@/components/Form'
 
 function ContactForm() {
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -247,8 +267,8 @@ function ContactForm() {
 ### Button Group
 
 ```typescript
-import { Button } from 'torch-glare/lib/components/Button'
-import { ActionsGroup } from 'torch-glare/lib/components/ActionsGroup'
+import { Button } from '@/components/Button'
+import { ActionsGroup } from '@/components/ActionsGroup'
 
 function ButtonGroup() {
   return (
@@ -271,7 +291,7 @@ function DeleteButton({ onDelete }: { onDelete: () => void }) {
     return (
       <div className="flex gap-2">
         <Button
-          size="sm"
+          size="S"
           variant="RedSecStyle"
           onClick={() => {
             onDelete()
@@ -281,7 +301,7 @@ function DeleteButton({ onDelete }: { onDelete: () => void }) {
           Confirm Delete
         </Button>
         <Button
-          size="sm"
+          size="S"
           variant="BorderStyle"
           onClick={() => setNeedsConfirm(false)}
         >
@@ -305,8 +325,8 @@ function DeleteButton({ onDelete }: { onDelete: () => void }) {
 ### With Tooltip
 
 ```typescript
-import { Button } from 'torch-glare/lib/components/Button'
-import { Tooltip } from 'torch-glare/lib/components/Tooltip'
+import { Button } from '@/components/Button'
+import { Tooltip } from '@/components/Tooltip'
 
 function SaveButton() {
   return (
@@ -325,7 +345,7 @@ function SaveButton() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { Button } from 'torch-glare/lib/components/Button'
+import { Button } from '@/components/Button'
 
 describe('Button', () => {
   it('handles click events', () => {
@@ -397,20 +417,25 @@ The Button component automatically includes:
 ```typescript
 <button
   type="button"
-  role="button"
-  aria-busy={is_loading}
-  aria-disabled={disabled || is_loading}
   disabled={disabled || is_loading}
+  aria-busy={is_loading || undefined}
 >
   {children}
+  {/* While loading, the spinner is rendered with role="status" and aria-label="Loading" */}
 </button>
 ```
 
+Notes:
+- The component renders a native `<button>` (or the element passed via `as`), so it does **not** add an explicit `role="button"`.
+- It sets the native `disabled` attribute (never `aria-disabled`) when `disabled` or `is_loading` is true.
+- `aria-busy` is set only while loading; it is omitted otherwise.
+- The loading spinner itself carries `role="status"` and `aria-label="Loading"`.
+
 ### Screen Reader Support
 
 ```typescript
 // Always provide aria-label for icon-only buttons
-<Button size="icon" aria-label="Add new item">
+<Button buttonType="icon" aria-label="Add new item">
   <PlusIcon className="w-5 h-5" />
 </Button>
 
@@ -496,7 +521,7 @@ The Button component automatically includes:
 ```diff
 // Import path changed
 - import Button from 'torch-glare/Button'
-+ import { Button } from 'torch-glare/lib/components/Button'
++ import { Button } from '@/components/Button'
 
 // Loading prop renamed
 - <Button loading={true}>

package/docs/components/calendar.md

@@ -11,15 +11,22 @@ keywords: [calendar, date, day-picker, month, year, react-day-picker]
 
 ## 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 react-day-picker date-fns
+npx torch-glare@latest init
+npx torch-glare@latest add Calendar
 ```
 
+`add` also copies any components, hooks, and utilities that `Calendar` depends on.
+
 ## Import
 
-```typescript
-import { Calendar } from '@torch-ui/components'
-import type { CalendarProps } from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { Calendar } from "@/components/Calendar";
 ```
 
 ## Quick Examples
@@ -27,7 +34,7 @@ import type { CalendarProps } from '@torch-ui/components'
 ### Basic Usage
 
 ```typescript
-import { Calendar } from '@torch-ui/components'
+import { Calendar } from "@/components/Calendar";
 import { useState } from 'react'
 
 function Example() {
@@ -46,7 +53,7 @@ function Example() {
 ### Range Selection
 
 ```typescript
-import { Calendar } from '@torch-ui/components'
+import { Calendar } from "@/components/Calendar";
 import { useState } from 'react'
 import { DateRange } from 'react-day-picker'
 
@@ -69,7 +76,7 @@ function RangePicker() {
 ### Multiple Date Selection
 
 ```typescript
-import { Calendar } from '@torch-ui/components'
+import { Calendar } from "@/components/Calendar";
 import { useState } from 'react'
 
 function MultiplePicker() {
@@ -89,7 +96,7 @@ function MultiplePicker() {
 ### With Week Numbers
 
 ```typescript
-import { Calendar } from '@torch-ui/components'
+import { Calendar } from "@/components/Calendar";
 
 function WeekNumbers() {
   return (
@@ -104,7 +111,7 @@ function WeekNumbers() {
 ### Date Restrictions
 
 ```typescript
-import { Calendar } from '@torch-ui/components'
+import { Calendar } from "@/components/Calendar";
 
 function RestrictedCalendar() {
   const today = new Date()
@@ -127,7 +134,7 @@ function RestrictedCalendar() {
 ### Custom Caption Layout
 
 ```typescript
-import { Calendar } from '@torch-ui/components'
+import { Calendar } from "@/components/Calendar";
 
 function LabelOnly() {
   return (
@@ -151,8 +158,8 @@ function DropdownMonthsOnly() {
 ### With Footer
 
 ```typescript
-import { Calendar } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { Calendar } from "@/components/Calendar";
+import { Button } from "@/components/Button";
 
 function CalendarWithFooter() {
   const [selected, setSelected] = useState<Date>()
@@ -180,7 +187,7 @@ function CalendarWithFooter() {
 ### Multiple Months
 
 ```typescript
-import { Calendar } from '@torch-ui/components'
+import { Calendar } from "@/components/Calendar";
 
 function MultipleMonths() {
   return (
@@ -195,7 +202,7 @@ function MultipleMonths() {
 ### With Min/Max Date Range
 
 ```typescript
-import { Calendar } from '@torch-ui/components'
+import { Calendar } from "@/components/Calendar";
 import { DateRange } from 'react-day-picker'
 import { useState } from 'react'
 
@@ -217,7 +224,7 @@ function RangeWithLimits() {
 ### Custom Styling
 
 ```typescript
-import { Calendar } from '@torch-ui/components'
+import { Calendar } from "@/components/Calendar";
 
 function StyledCalendar() {
   return (
@@ -308,7 +315,7 @@ export const Calendar: React.FC<CalendarProps>
 ### Booking Calendar
 
 ```typescript
-import { Calendar } from '@torch-ui/components'
+import { Calendar } from "@/components/Calendar";
 import { useState } from 'react'
 import { DateRange } from 'react-day-picker'
 
@@ -346,7 +353,7 @@ function BookingCalendar() {
 ### Event Calendar
 
 ```typescript
-import { Calendar } from '@torch-ui/components'
+import { Calendar } from "@/components/Calendar";
 
 function EventCalendar({ events }: { events: Event[] }) {
   const eventDates = events.map(e => e.date)
@@ -371,7 +378,7 @@ function EventCalendar({ events }: { events: Event[] }) {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { Calendar } from '@torch-ui/components'
+import { Calendar } from "@/components/Calendar";
 
 describe('Calendar', () => {
   it('renders current month', () => {
@@ -504,7 +511,7 @@ The Calendar component uses CSS variables and can be fully customized:
 
 ```diff
 - import { DayPicker } from 'react-day-picker'
-+ import { Calendar } from '@torch-ui/components'
++ import { Calendar } from "@/components/Calendar";
 
 - <DayPicker
 + <Calendar

package/docs/components/card.md

@@ -1,6 +1,6 @@
 ---
 name: Card
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/layout
 tags: [container, layout, card, content, polymorphic]
@@ -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 Card
 ```
 
+`add` also copies any components, hooks, and utilities that `Card` depends on.
+
 ## Import
 
-```typescript
-import {
-  Card,
-  CardHeader,
-  CardDescription,
-  CardContent
-} from 'torch-glare/lib/components/Card'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { Card } from "@/components/Card";
 ```
 
 ## Quick Examples
@@ -36,7 +39,7 @@ import {
 ### Basic Usage
 
 ```typescript
-import { Card, CardHeader, CardContent } from 'torch-glare/lib/components/Card'
+import { Card, CardHeader, CardContent } from '@/components/Card'
 
 function Example() {
   return (
@@ -139,8 +142,8 @@ function CardGrid() {
 ### Card with Form
 
 ```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 LoginCard() {
   return (
@@ -305,8 +308,8 @@ function StatsCard({ title, value, change, icon }) {
 ### Profile Card
 
 ```typescript
-import { Avatar } from 'torch-glare/lib/components/Avatar'
-import { Badge } from 'torch-glare/lib/components/Badge'
+import { Avatar } from '@/components/Avatar'
+import { Badge } from '@/components/Badge'
 
 function ProfileCard({ user }) {
   return (
@@ -388,7 +391,7 @@ function ProductCard({ product }) {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { Card, CardHeader, CardContent } from 'torch-glare/lib/components/Card'
+import { Card, CardHeader, CardContent } from '@/components/Card'
 
 describe('Card', () => {
   it('renders card content', () => {
@@ -550,7 +553,7 @@ test('Card meets WCAG standards', async () => {
 ```diff
 // Import path changed
 - import Card from 'torch-glare/Card'
-+ import { Card, CardHeader, CardContent } from 'torch-glare/lib/components/Card'
++ import { Card, CardHeader, CardContent } from '@/components/Card'
 
 // Structure changed to compound
 - <Card title="Title" description="Description">