torch-glare 2.4.0 → 2.4.1

package/docs/components/action-button.md

@@ -12,10 +12,16 @@ A compact icon-only button component designed for toolbars, action bars, and inl
 
 ## 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 action-button
+npx torch-glare@latest init
+npx torch-glare@latest add ActionButton
 ```
 
+`add` also copies any components, hooks, and utilities that `ActionButton` depends on.
+
 ## Imports
 
 ```typescript
@@ -74,25 +80,25 @@ export function Toolbar() {
         <i className="ri-save-line"></i>
       </ActionButton>
 
-      <ActionButton size="S" variant="SecStyle">
+      <ActionButton size="S" variant="BluSecStyle">
         <i className="ri-file-copy-line"></i>
       </ActionButton>
 
-      <ActionButton size="S" variant="SecStyle">
+      <ActionButton size="S" variant="BluSecStyle">
         <i className="ri-scissors-line"></i>
       </ActionButton>
 
-      <ActionButton size="S" variant="SecStyle">
+      <ActionButton size="S" variant="BluSecStyle">
         <i className="ri-clipboard-line"></i>
       </ActionButton>
 
       <div className="w-px h-6 bg-border-system-global-primary mx-1" />
 
-      <ActionButton size="S" variant="SecStyle">
+      <ActionButton size="S" variant="BluSecStyle">
         <i className="ri-arrow-go-back-line"></i>
       </ActionButton>
 
-      <ActionButton size="S" variant="SecStyle">
+      <ActionButton size="S" variant="BluSecStyle">
         <i className="ri-arrow-go-forward-line"></i>
       </ActionButton>
     </div>
@@ -112,7 +118,7 @@ export function TableRowActions({ row }) {
     <td className="flex items-center gap-1 justify-end">
       <ActionButton
         size="XS"
-        variant="SecStyle"
+        variant="BluSecStyle"
         onClick={() => setIsEditing(true)}
         aria-label="Edit row"
       >
@@ -121,7 +127,7 @@ export function TableRowActions({ row }) {
 
       <ActionButton
         size="XS"
-        variant="SecStyle"
+        variant="BluSecStyle"
         onClick={() => handleDuplicate(row.id)}
         aria-label="Duplicate row"
       >
@@ -130,7 +136,7 @@ export function TableRowActions({ row }) {
 
       <ActionButton
         size="XS"
-        variant="DangerStyle"
+        variant="RedSecStyle"
         onClick={() => handleDelete(row.id)}
         aria-label="Delete row"
       >
@@ -158,7 +164,7 @@ export function CardWithActions() {
         <div className="flex items-center gap-1">
           <ActionButton
             size="S"
-            variant={isFavorite ? "YelSecStyle" : "SecStyle"}
+            variant={isFavorite ? "YelSecStyle" : "BluSecStyle"}
             onClick={() => setIsFavorite(!isFavorite)}
             aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
           >
@@ -167,7 +173,7 @@ export function CardWithActions() {
 
           <ActionButton
             size="S"
-            variant="SecStyle"
+            variant="BluSecStyle"
             onClick={() => setIsExpanded(!isExpanded)}
             aria-label={isExpanded ? "Collapse" : "Expand"}
           >
@@ -176,7 +182,7 @@ export function CardWithActions() {
 
           <ActionButton
             size="S"
-            variant="SecStyle"
+            variant="BluSecStyle"
             aria-label="More options"
           >
             <i className="ri-more-2-fill"></i>
@@ -256,7 +262,7 @@ export function ActionButtonGroup() {
     <div className="inline-flex items-center border border-border-system-global-primary rounded-lg overflow-hidden">
       <ActionButton
         size="S"
-        variant={activeView === 'list' ? "PrimeStyle" : "SecStyle"}
+        variant={activeView === 'list' ? "PrimeStyle" : "BluSecStyle"}
         onClick={() => setActiveView('list')}
         className="rounded-none border-0"
         aria-label="List view"
@@ -266,7 +272,7 @@ export function ActionButtonGroup() {
 
       <ActionButton
         size="S"
-        variant={activeView === 'grid' ? "PrimeStyle" : "SecStyle"}
+        variant={activeView === 'grid' ? "PrimeStyle" : "BluSecStyle"}
         onClick={() => setActiveView('grid')}
         className="rounded-none border-0 border-l border-border-system-global-primary"
         aria-label="Grid view"
@@ -276,7 +282,7 @@ export function ActionButtonGroup() {
 
       <ActionButton
         size="S"
-        variant={activeView === 'kanban' ? "PrimeStyle" : "SecStyle"}
+        variant={activeView === 'kanban' ? "PrimeStyle" : "BluSecStyle"}
         onClick={() => setActiveView('kanban')}
         className="rounded-none border-0 border-l border-border-system-global-primary"
         aria-label="Kanban view"
@@ -299,25 +305,25 @@ export function ActionButtonsWithTooltips() {
   return (
     <div className="flex items-center gap-2">
       <Tooltip content="Bold (Ctrl+B)">
-        <ActionButton size="S" variant="SecStyle">
+        <ActionButton size="S" variant="BluSecStyle">
           <i className="ri-bold"></i>
         </ActionButton>
       </Tooltip>
 
       <Tooltip content="Italic (Ctrl+I)">
-        <ActionButton size="S" variant="SecStyle">
+        <ActionButton size="S" variant="BluSecStyle">
           <i className="ri-italic"></i>
         </ActionButton>
       </Tooltip>
 
       <Tooltip content="Underline (Ctrl+U)">
-        <ActionButton size="S" variant="SecStyle">
+        <ActionButton size="S" variant="BluSecStyle">
           <i className="ri-underline"></i>
         </ActionButton>
       </Tooltip>
 
       <Tooltip content="Strikethrough">
-        <ActionButton size="S" variant="SecStyle">
+        <ActionButton size="S" variant="BluSecStyle">
           <i className="ri-strikethrough"></i>
         </ActionButton>
       </Tooltip>
@@ -362,7 +368,7 @@ Inherits all variants from the Button component:
 - `SecStyle` - Secondary action style
 - `DangerStyle` - Destructive actions
 - `YelSecStyle` - Yellow secondary style
-- `BlueSecStyle` - Blue secondary style
+- `BluSecStyle` - Blue secondary style
 - `RedSecStyle` - Red secondary style
 - `BorderStyle` - Border-only style
 - `NoBorderNoFillStyle` - Minimal style
@@ -414,7 +420,7 @@ type ButtonVariant =
   | 'SecStyle'
   | 'DangerStyle'
   | 'YelSecStyle'
-  | 'BlueSecStyle'
+  | 'BluSecStyle'
   | 'RedSecStyle'
   | 'BorderStyle'
   | 'NoBorderNoFillStyle'
@@ -437,7 +443,7 @@ function IconButtonBar({ onAction }) {
         <ActionButton
           key={item.action}
           size="S"
-          variant="SecStyle"
+          variant="BluSecStyle"
           onClick={() => onAction(item.action)}
         >
           <i className={item.icon}></i>
@@ -469,7 +475,7 @@ function ConditionalActions({ permissions, item }) {
       {permissions.canDelete && (
         <ActionButton
           size="XS"
-          variant="DangerStyle"
+          variant="RedSecStyle"
           onClick={() => deleteItem(item.id)}
         >
           <i className="ri-delete-bin-line"></i>
@@ -609,7 +615,7 @@ items.map(item => (
 
 ```tsx
 // Before: Material-UI IconButton
-<IconButton size="small" color="primary">
+<IconButton size="S" color="primary">
   <AddIcon />
 </IconButton>
 

package/docs/components/actions-group.md

@@ -12,10 +12,16 @@ A flexible container component for grouping action buttons and controls with opt
 
 ## 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 actions-group
+npx torch-glare@latest init
+npx torch-glare@latest add ActionsGroup
 ```
 
+`add` also copies any components, hooks, and utilities that `ActionsGroup` depends on.
+
 ## Imports
 
 ```typescript
@@ -32,7 +38,7 @@ export function BasicActionsGroup() {
   return (
     <ActionsGroup>
       <Button variant="PrimeStyle">Save</Button>
-      <Button variant="SecStyle">Cancel</Button>
+      <Button variant="BluSecStyle">Cancel</Button>
     </ActionsGroup>
   )
 }
@@ -56,7 +62,7 @@ export function ActionsWithDividers() {
           <i className="ri-save-line mr-2"></i>
           Save Changes
         </Button>
-        <Button variant="SecStyle" size="M">
+        <Button variant="BluSecStyle" size="M">
           <i className="ri-close-line mr-2"></i>
           Discard
         </Button>
@@ -89,7 +95,7 @@ export function FormActions() {
       </div>
 
       <ActionsGroup className="justify-end">
-        <Button variant="SecStyle" type="button">
+        <Button variant="BluSecStyle" type="button">
           Cancel
         </Button>
         <Button variant="PrimeStyle" type="submit">
@@ -123,10 +129,10 @@ export function ModalFooterActions() {
 
       {/* Modal Footer */}
       <ActionsGroup withDivider className="p-6 justify-end">
-        <Button variant="SecStyle">
+        <Button variant="BluSecStyle">
           Cancel
         </Button>
-        <Button variant="DangerStyle">
+        <Button variant="RedSecStyle">
           <i className="ri-delete-bin-line mr-2"></i>
           Delete
         </Button>
@@ -156,28 +162,28 @@ export function MultiActionGroups() {
               <i className="ri-save-line mr-2"></i>
               Save
             </Button>
-            <Button variant="SecStyle" size="S">
+            <Button variant="BluSecStyle" size="S">
               <i className="ri-file-copy-line mr-2"></i>
               Duplicate
             </Button>
           </div>
 
-          <Button variant="SecStyle" size="S">
+          <Button variant="BluSecStyle" size="S">
             <i className="ri-more-2-fill"></i>
           </Button>
         </ActionsGroup>
 
         {/* Secondary Actions */}
         <ActionsGroup withDivider>
-          <Button variant="SecStyle" size="S">
+          <Button variant="BluSecStyle" size="S">
             <i className="ri-share-line mr-2"></i>
             Share
           </Button>
-          <Button variant="SecStyle" size="S">
+          <Button variant="BluSecStyle" size="S">
             <i className="ri-download-line mr-2"></i>
             Export
           </Button>
-          <Button variant="SecStyle" size="S">
+          <Button variant="BluSecStyle" size="S">
             <i className="ri-printer-line mr-2"></i>
             Print
           </Button>
@@ -185,7 +191,7 @@ export function MultiActionGroups() {
 
         {/* Danger Zone */}
         <ActionsGroup withDivider>
-          <Button variant="DangerStyle" size="S" className="w-full">
+          <Button variant="RedSecStyle" size="S" className="w-full">
             <i className="ri-delete-bin-line mr-2"></i>
             Delete Document
           </Button>
@@ -215,7 +221,7 @@ export function CardActions() {
             </p>
 
             <ActionsGroup className="justify-end">
-              <Button variant="SecStyle" size="S">
+              <Button variant="BluSecStyle" size="S">
                 View
               </Button>
               <Button variant="PrimeStyle" size="S">
@@ -283,7 +289,7 @@ export function ToolbarActions() {
 
         {/* Save Group */}
         <ActionsGroup>
-          <Button variant="SecStyle" size="S">
+          <Button variant="BluSecStyle" size="S">
             Preview
           </Button>
           <Button variant="PrimeStyle" size="S">
@@ -336,7 +342,7 @@ export function WizardNavigation() {
       {/* Navigation Actions */}
       <ActionsGroup className="justify-between">
         <Button
-          variant="SecStyle"
+          variant="BluSecStyle"
           disabled={currentStep === 1}
           onClick={() => setCurrentStep(currentStep - 1)}
         >
@@ -388,10 +394,10 @@ export function ConfirmationDialog({ title, message, onConfirm, onCancel }) {
         </div>
 
         <ActionsGroup withDivider className="p-6 justify-end gap-3">
-          <Button variant="SecStyle" onClick={onCancel}>
+          <Button variant="BluSecStyle" onClick={onCancel}>
             Cancel
           </Button>
-          <Button variant="DangerStyle" onClick={onConfirm}>
+          <Button variant="RedSecStyle" onClick={onConfirm}>
             Confirm
           </Button>
         </ActionsGroup>
@@ -466,7 +472,7 @@ export function LoadingActions() {
   return (
     <ActionsGroup className="justify-end">
       <Button
-        variant="SecStyle"
+        variant="BluSecStyle"
         disabled={isLoading}
       >
         Cancel
@@ -553,7 +559,7 @@ type Themes = 'light' | 'dark' | 'default'
 function ResponsiveActions() {
   return (
     <ActionsGroup className="flex-col sm:flex-row justify-end">
-      <Button variant="SecStyle" className="w-full sm:w-auto">
+      <Button variant="BluSecStyle" className="w-full sm:w-auto">
         Cancel
       </Button>
       <Button variant="PrimeStyle" className="w-full sm:w-auto">
@@ -576,7 +582,7 @@ function GroupedActions() {
       </ActionsGroup>
 
       <ActionsGroup withDivider>
-        <Button variant="DangerStyle" className="w-full">
+        <Button variant="RedSecStyle" className="w-full">
           Dangerous Action
         </Button>
       </ActionsGroup>

package/docs/components/alert-dialog.md

@@ -11,25 +11,22 @@ keywords: [alert-dialog, confirmation, modal, alert, warning, error, radix-ui]
 
 ## 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-alert-dialog
+npx torch-glare@latest init
+npx torch-glare@latest add AlertDialog
 ```
 
+`add` also copies any components, hooks, and utilities that `AlertDialog` depends on.
+
 ## Import
 
-```typescript
-import {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogLabel,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-} from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { AlertDialog } from "@/components/AlertDialog";
 ```
 
 ## Quick Examples
@@ -37,8 +34,8 @@ import {
 ### Basic Alert
 
 ```typescript
-import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction } from "@/components/AlertDialog";
+import { Button } from "@/components/Button";
 
 function Example() {
   return (
@@ -63,8 +60,8 @@ function Example() {
 ### Delete Confirmation (Error Variant)
 
 ```typescript
-import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from "@/components/AlertDialog";
+import { Button } from "@/components/Button";
 
 function DeleteConfirmation() {
   const handleDelete = () => {
@@ -75,7 +72,7 @@ function DeleteConfirmation() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button variant="DestructiveStyle">Delete Item</Button>
+        <Button variant="RedSecStyle">Delete Item</Button>
       </AlertDialogTrigger>
       <AlertDialogContent variant="error">
         <AlertDialogHeader>
@@ -90,7 +87,7 @@ function DeleteConfirmation() {
             <i className="ri-close-line" />
           </AlertDialogCancel>
           <AlertDialogAction
-            variant="DestructiveStyle"
+            variant="RedSecStyle"
             onClick={handleDelete}
           >
             Delete Permanently
@@ -105,7 +102,7 @@ function DeleteConfirmation() {
 ### Success Alert
 
 ```typescript
-import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogAction } from '@torch-ui/components'
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogAction } from "@/components/AlertDialog";
 
 function SuccessAlert() {
   return (
@@ -119,7 +116,7 @@ function SuccessAlert() {
           Your task has been successfully completed and saved.
         </AlertDialogDescription>
         <AlertDialogFooter>
-          <AlertDialogAction variant="PrimaryStyle">
+          <AlertDialogAction variant="PrimeStyle">
             Continue
           </AlertDialogAction>
         </AlertDialogFooter>
@@ -132,7 +129,7 @@ function SuccessAlert() {
 ### Warning Alert
 
 ```typescript
-import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@torch-ui/components'
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from "@/components/AlertDialog";
 
 function WarningAlert() {
   return (
@@ -150,7 +147,7 @@ function WarningAlert() {
           <AlertDialogCancel>
             <i className="ri-close-line" />
           </AlertDialogCancel>
-          <AlertDialogAction variant="PrimaryStyle">
+          <AlertDialogAction variant="PrimeStyle">
             Leave Anyway
           </AlertDialogAction>
         </AlertDialogFooter>
@@ -163,7 +160,7 @@ function WarningAlert() {
 ### Info Alert
 
 ```typescript
-import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogAction } from '@torch-ui/components'
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogAction } from "@/components/AlertDialog";
 
 function InfoAlert() {
   return (
@@ -178,7 +175,7 @@ function InfoAlert() {
           your next restart. This may take a few minutes.
         </AlertDialogDescription>
         <AlertDialogFooter>
-          <AlertDialogAction variant="PrimaryStyle">
+          <AlertDialogAction variant="PrimeStyle">
             Got It
           </AlertDialogAction>
         </AlertDialogFooter>
@@ -191,7 +188,7 @@ function InfoAlert() {
 ### Controlled State
 
 ```typescript
-import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction } from '@torch-ui/components'
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction } from "@/components/AlertDialog";
 import { useState } from 'react'
 
 function ControlledAlert() {
@@ -229,8 +226,9 @@ function ControlledAlert() {
 ### Account Deletion Flow
 
 ```typescript
-import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@torch-ui/components'
-import { Button, Input } from '@torch-ui/components'
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from "@/components/AlertDialog";
+import { Button } from "@/components/Button";
+import { Input } from "@/components/Input";
 import { useState } from 'react'
 
 function DeleteAccountDialog() {
@@ -240,7 +238,7 @@ function DeleteAccountDialog() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button variant="DestructiveStyle">Delete Account</Button>
+        <Button variant="RedSecStyle">Delete Account</Button>
       </AlertDialogTrigger>
       <AlertDialogContent variant="error">
         <AlertDialogLabel title="Delete Account" />
@@ -260,7 +258,7 @@ function DeleteAccountDialog() {
             <i className="ri-close-line" />
           </AlertDialogCancel>
           <AlertDialogAction
-            variant="DestructiveStyle"
+            variant="RedSecStyle"
             disabled={!isValid}
           >
             Delete My Account
@@ -275,7 +273,7 @@ function DeleteAccountDialog() {
 ### Multi-Action Alert
 
 ```typescript
-import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@torch-ui/components'
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from "@/components/AlertDialog";
 
 function MultiActionAlert() {
   const handleSave = () => console.log('Saved')
@@ -295,10 +293,10 @@ function MultiActionAlert() {
           <AlertDialogCancel>
             Cancel
           </AlertDialogCancel>
-          <AlertDialogAction variant="SecondaryStyle" onClick={handleDiscard}>
+          <AlertDialogAction variant="BluSecStyle" onClick={handleDiscard}>
             Don't Save
           </AlertDialogAction>
-          <AlertDialogAction variant="PrimaryStyle" onClick={handleSave}>
+          <AlertDialogAction variant="PrimeStyle" onClick={handleSave}>
             Save Changes
           </AlertDialogAction>
         </AlertDialogFooter>
@@ -311,8 +309,8 @@ function MultiActionAlert() {
 ### With Loading State
 
 ```typescript
-import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@torch-ui/components'
-import { SpinLoading } from '@torch-ui/components'
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from "@/components/AlertDialog";
+import { SpinLoading } from "@/components/SpinLoading";
 import { useState } from 'react'
 
 function AsyncAlert() {
@@ -358,7 +356,7 @@ function AsyncAlert() {
 ### Permission Request
 
 ```typescript
-import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@torch-ui/components'
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from "@/components/AlertDialog";
 
 function PermissionAlert() {
   const handleAllow = () => {
@@ -381,7 +379,7 @@ function PermissionAlert() {
           <AlertDialogCancel>
             Not Now
           </AlertDialogCancel>
-          <AlertDialogAction variant="PrimaryStyle" onClick={handleAllow}>
+          <AlertDialogAction variant="PrimeStyle" onClick={handleAllow}>
             Allow Camera Access
           </AlertDialogAction>
         </AlertDialogFooter>
@@ -648,7 +646,7 @@ Once the patches above are in place, every consumer renders correctly with bare
 
 ```typescript
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
-import { ButtonVariant } from '@torch-ui/types'
+import { ButtonVariant } from "@/utils/types";
 
 // Root component
 interface AlertDialogProps {
@@ -693,7 +691,7 @@ export const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogActio
 ### useAlertDialog Hook
 
 ```typescript
-import { AlertDialog, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@torch-ui/components'
+import { AlertDialog, AlertDialogContent, AlertDialogLabel, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from "@/components/AlertDialog";
 import { useState } from 'react'
 
 function useAlertDialog() {
@@ -763,7 +761,7 @@ function App() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogAction } from '@torch-ui/components'
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogAction } from "@/components/AlertDialog";
 
 describe('AlertDialog', () => {
   it('renders with correct variant', () => {
@@ -775,8 +773,10 @@ describe('AlertDialog', () => {
       </AlertDialog>
     )
 
+    // AlertDialogContent applies the variant as StatusTextStyle classes
+    // (it does not set a data-variant attribute).
     const content = screen.getByRole('alertdialog')
-    expect(content).toHaveAttribute('data-variant', 'error')
+    expect(content).toHaveClass('[&_strong]:text-content-presentation-state-negative')
   })
 
   it('calls action handler', () => {
@@ -845,8 +845,8 @@ describe('AlertDialog', () => {
 ## Migration from Dialog
 
 ```diff
-- import { Dialog, DialogTrigger, DialogContent } from '@torch-ui/components'
-+ import { AlertDialog, AlertDialogTrigger, AlertDialogContent } from '@torch-ui/components'
+- import { Dialog, DialogTrigger, DialogContent } from "@/components/Dialog";
++ import { AlertDialog, AlertDialogTrigger, AlertDialogContent } from "@/components/AlertDialog";
 
 - <Dialog>
 -   <DialogTrigger>Delete</DialogTrigger>
@@ -891,7 +891,7 @@ describe('AlertDialog', () => {
 4. **Distinguish action buttons**: Make destructive action clear
    ```typescript
    <AlertDialogCancel>Cancel</AlertDialogCancel>
-   <AlertDialogAction variant="DestructiveStyle">Delete</AlertDialogAction>
+   <AlertDialogAction variant="RedSecStyle">Delete</AlertDialogAction>
    ```
 
 5. **Don't overuse**: Reserve for important decisions only

package/docs/components/avatar.md

@@ -12,11 +12,15 @@ A flexible avatar component for displaying user profile images with automatic fa
 
 ## 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 avatar
+npx torch-glare@latest init
+npx torch-glare@latest add Avatar
 ```
 
-**Dependencies**: Requires `@radix-ui/react-avatar`
+`add` also copies any components, hooks, and utilities that `Avatar` depends on.
 
 ## Imports
 

package/docs/components/badge-field.md

@@ -12,11 +12,15 @@ An advanced tag selection input component that combines badges with search funct
 
 ## 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-field
+npx torch-glare@latest init
+npx torch-glare@latest add BadgeField
 ```
 
-**Dependencies**: Requires Popover, Tooltip, Badge, and Input components.
+`add` also copies any components, hooks, and utilities that `BadgeField` depends on.
 
 ## Imports