torch-glare 2.4.0 → 2.4.1

package/docs/components/toast.md

@@ -11,14 +11,22 @@ keywords: [toast, notification, message, alert, feedback, react-hot-toast]
 
 ## 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-hot-toast
+npx torch-glare@latest init
+npx torch-glare@latest add Toast
 ```
 
+`add` also copies any components, hooks, and utilities that `Toast` depends on.
+
 ## Import
 
-```typescript
-import { Toaster, toast } from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { Toast } from "@/components/Toast";
 ```
 
 ## Quick Examples
@@ -26,8 +34,8 @@ import { Toaster, toast } from '@torch-ui/components'
 ### Basic Setup
 
 ```typescript
-import { Toaster, toast } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { Toaster, toast } from "@/components/Toast";
+import { Button } from "@/components/Button";
 
 function App() {
   return (
@@ -44,8 +52,8 @@ function App() {
 ### Success Toast
 
 ```typescript
-import { toast } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { toast } from "@/components/Toast";
+import { Button } from "@/components/Button";
 
 function SuccessExample() {
   const handleSuccess = () => {
@@ -63,8 +71,8 @@ function SuccessExample() {
 ### Error Toast
 
 ```typescript
-import { toast } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { toast } from "@/components/Toast";
+import { Button } from "@/components/Button";
 
 function ErrorExample() {
   const handleError = () => {
@@ -82,8 +90,8 @@ function ErrorExample() {
 ### Loading Toast
 
 ```typescript
-import { toast } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { toast } from "@/components/Toast";
+import { Button } from "@/components/Button";
 
 function LoadingExample() {
   const handleAsync = async () => {
@@ -108,7 +116,7 @@ function LoadingExample() {
 ### Promise Toast
 
 ```typescript
-import { toast } from '@torch-ui/components'
+import { toast } from "@/components/Toast";
 
 function PromiseExample() {
   const saveData = async () => {
@@ -132,7 +140,7 @@ function PromiseExample() {
 ### Custom Duration
 
 ```typescript
-import { toast } from '@torch-ui/components'
+import { toast } from "@/components/Toast";
 
 function CustomDuration() {
   return (
@@ -156,7 +164,7 @@ function CustomDuration() {
 ### Custom Position
 
 ```typescript
-import { Toaster, toast } from '@torch-ui/components'
+import { Toaster, toast } from "@/components/Toast";
 
 function PositionExample() {
   return (
@@ -179,8 +187,8 @@ function PositionExample() {
 ### Dismissible Toast
 
 ```typescript
-import { toast } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { toast } from "@/components/Toast";
+import { Button } from "@/components/Button";
 
 function DismissibleExample() {
   const showDismissible = () => {
@@ -209,7 +217,7 @@ function DismissibleExample() {
 ### Custom Styling
 
 ```typescript
-import { toast } from '@torch-ui/components'
+import { toast } from "@/components/Toast";
 
 function CustomStyleExample() {
   const showCustom = () => {
@@ -238,7 +246,7 @@ function CustomStyleExample() {
 ### With Icon
 
 ```typescript
-import { toast } from '@torch-ui/components'
+import { toast } from "@/components/Toast";
 
 function IconExample() {
   return (
@@ -263,8 +271,9 @@ function IconExample() {
 ### Form Validation
 
 ```typescript
-import { toast } from '@torch-ui/components'
-import { InputField, Button } from '@torch-ui/components'
+import { toast } from "@/components/Toast";
+import { Button } from "@/components/Button";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function FormValidation() {
@@ -404,7 +413,7 @@ const dismissToast = (id: string): void => {
 ### API Error Handling
 
 ```typescript
-import { toast } from '@torch-ui/components'
+import { toast } from "@/components/Toast";
 
 async function fetchData() {
   try {
@@ -435,7 +444,7 @@ async function fetchData() {
 ### Multi-Step Process
 
 ```typescript
-import { toast } from '@torch-ui/components'
+import { toast } from "@/components/Toast";
 
 async function multiStepProcess() {
   const toastId = toast.loading('Step 1: Validating data...')
@@ -458,8 +467,8 @@ async function multiStepProcess() {
 ### Undo Action
 
 ```typescript
-import { toast } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { toast } from "@/components/Toast";
+import { Button } from "@/components/Button";
 
 function UndoExample() {
   const handleDelete = (item: Item) => {
@@ -496,7 +505,7 @@ function UndoExample() {
 ### Rate Limited Actions
 
 ```typescript
-import { toast } from '@torch-ui/components'
+import { toast } from "@/components/Toast";
 
 let lastToastTime = 0
 const TOAST_COOLDOWN = 2000 // 2 seconds
@@ -528,7 +537,7 @@ function SpamProtectedButton() {
 
 ```typescript
 import { render, screen, waitFor } from '@testing-library/react'
-import { Toaster, toast } from '@torch-ui/components'
+import { Toaster, toast } from "@/components/Toast";
 import userEvent from '@testing-library/user-event'
 
 describe('Toast', () => {

package/docs/components/toggle-button.md

@@ -1,6 +1,6 @@
 ---
 name: ToggleButton
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/buttons
 tags: [toggle, button, pressed, radix-ui, accessible, variants]
@@ -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 ToggleButton
 ```
 
+`add` also copies any components, hooks, and utilities that `ToggleButton` depends on.
+
 ## Import
 
-```typescript
-import { ToggleButton } from 'torch-glare/lib/components/ToggleButton'
-// or
-import { ToggleButton } from 'torch-glare/lib/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
 
-// Also available via ButtonGroup re-export
-import { ToggleButton } from 'torch-glare/lib/components/ButtonGroup'
+```tsx
+import { ToggleButton } from "@/components/ToggleButton";
 ```
 
 ## Quick Examples
@@ -37,7 +40,7 @@ import { ToggleButton } from 'torch-glare/lib/components/ButtonGroup'
 ### Basic Usage
 
 ```typescript
-import { ToggleButton } from 'torch-glare/lib/components/ToggleButton'
+import { ToggleButton } from "@/components/ButtonGroup";
 
 function Example() {
   const [pressed, setPressed] = useState(false)
@@ -57,7 +60,7 @@ function Example() {
 
 ```typescript
 <ToggleButton variant="PrimeStyle">Prime</ToggleButton>
-<ToggleButton variant="BlueSecStyle">Blue Secondary</ToggleButton>
+<ToggleButton variant="BluSecStyle">Blue Secondary</ToggleButton>
 <ToggleButton variant="BorderStyle">Border</ToggleButton>
 <ToggleButton variant="PrimeContStyle">Prime Container</ToggleButton>
 <ToggleButton variant="SystemStyle">System</ToggleButton>
@@ -110,7 +113,7 @@ function BookmarkButton() {
 
   return (
     <ToggleButton
-      variant={bookmarked ? 'BlueSecStyle' : 'BorderStyle'}
+      variant={bookmarked ? 'BluSecStyle' : 'BorderStyle'}
       pressed={bookmarked}
       onPressedChange={setBookmarked}
       buttonType="icon"
@@ -145,7 +148,7 @@ function BookmarkButton() {
   Dark Theme
 </ToggleButton>
 
-<ToggleButton theme="light" variant="BlueSecStyle">
+<ToggleButton theme="light" variant="BluSecStyle">
   Light Theme
 </ToggleButton>
 ```
@@ -172,7 +175,7 @@ function BookmarkButton() {
 | Variant | Background | Active State | Description |
 |---------|-----------|-------------|-------------|
 | `PrimeStyle` | Secondary | Hover highlight | Default primary toggle style |
-| `BlueSecStyle` | Secondary | Information blue | Blue secondary accent |
+| `BluSecStyle` | Secondary | Information blue | Blue secondary accent |
 | `BorderStyle` | Border-style bg | Hover highlight | Bordered toggle style |
 | `PrimeContStyle` | Transparent | Container hover | Minimal container style |
 | `SystemStyle` | Black alpha 20 | White alpha 20 | Dark/system UI style |
@@ -229,7 +232,7 @@ function FavoriteButton({ itemId }: { itemId: string }) {
 
   return (
     <ToggleButton
-      variant={isFavorite ? 'BlueSecStyle' : 'BorderStyle'}
+      variant={isFavorite ? 'BluSecStyle' : 'BorderStyle'}
       buttonType="icon"
       size="M"
       pressed={isFavorite}
@@ -368,7 +371,7 @@ function ThemeSwitcher() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { ToggleButton } from 'torch-glare/lib/components/ToggleButton'
+import { ToggleButton } from "@/components/ButtonGroup";
 
 describe('ToggleButton', () => {
   it('toggles pressed state on click', () => {
@@ -403,7 +406,7 @@ describe('ToggleButton', () => {
 
   it('applies variant styles', () => {
     const { container } = render(
-      <ToggleButton variant="BlueSecStyle">Blue</ToggleButton>
+      <ToggleButton variant="BluSecStyle">Blue</ToggleButton>
     )
 
     const button = container.querySelector('button')
@@ -507,7 +510,7 @@ Radix UI Toggle automatically provides:
 ### Variant Details
 
 - **PrimeStyle**: `bg-background-presentation-action-secondary` with hover/active highlight
-- **BlueSecStyle**: Same base as PrimeStyle but active state uses information blue (`bg-background-presentation-state-information-primary`)
+- **BluSecStyle**: Same base as PrimeStyle but active state uses information blue (`bg-background-presentation-state-information-primary`)
 - **BorderStyle**: `bg-background-presentation-action-borderstyle` with visible border (`border-border-presentation-action-disabled`)
 - **PrimeContStyle**: Transparent background, minimal with container-style hover
 - **SystemStyle**: `bg-black-alpha-20` with white text and `border-[#2C2D2E]`, white alpha hover/active
@@ -521,7 +524,7 @@ All variants use `data-[state=on]` for the active/pressed visual:
 data-[state=on]:bg-background-presentation-action-hover
 data-[state=on]:text-content-presentation-action-hover
 
-/* BlueSecStyle active */
+/* BluSecStyle active */
 data-[state=on]:bg-background-presentation-state-information-primary
 data-[state=on]:text-content-presentation-action-hover
 
@@ -580,8 +583,8 @@ focus-visible:ring-2 focus-visible:ring-white/50
 ```diff
 // Toggle and ToggleButton share a similar API
 // ToggleButton adds buttonType="icon" mode and slightly different variants
-- import { Toggle } from 'torch-glare/lib/components/Toggle'
-+ import { ToggleButton } from 'torch-glare/lib/components/ToggleButton'
+- import { Toggle } from "@/components/Toggle";
++ import { ToggleButton } from "@/components/ButtonGroup";
 
 - <Toggle pressed={value} onPressedChange={setValue}>
 + <ToggleButton pressed={value} onPressedChange={setValue}>
@@ -634,7 +637,7 @@ focus-visible:ring-2 focus-visible:ring-white/50
 
 ### v1.1.15
 - Initial stable release
-- 5 visual variants (PrimeStyle, BlueSecStyle, BorderStyle, PrimeContStyle, SystemStyle)
+- 5 visual variants (PrimeStyle, BluSecStyle, BorderStyle, PrimeContStyle, SystemStyle)
 - 4 size variants (S, M, L, XL)
 - Icon-only mode via buttonType="icon" with compound variants
 - Re-exported from ButtonGroup module

package/docs/components/toggle.md

@@ -1,6 +1,6 @@
 ---
 name: Toggle
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/forms
 tags: [form, toggle, button, radix-ui, accessible, variants]
@@ -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 Toggle
 ```
 
+`add` also copies any components, hooks, and utilities that `Toggle` depends on.
+
 ## Import
 
-```typescript
-import { Toggle } from 'torch-glare/lib/components/Toggle'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { Toggle } from "@/components/Toggle";
 ```
 
 ## Quick Examples
@@ -32,7 +40,7 @@ import { Toggle } from 'torch-glare/lib/components/Toggle'
 ### Basic Usage
 
 ```typescript
-import { Toggle } from 'torch-glare/lib/components/Toggle'
+import { Toggle } from '@/components/Toggle'
 
 function Example() {
   const [pressed, setPressed] = useState(false)
@@ -139,7 +147,7 @@ function VariantExamples() {
     <div className="space-y-4">
       <div className="flex gap-2">
         <Toggle variant="PrimeStyle">Prime</Toggle>
-        <Toggle variant="BlueSecStyle">Blue</Toggle>
+        <Toggle variant="BluSecStyle">Blue</Toggle>
         <Toggle variant="YelSecStyle">Yellow</Toggle>
         <Toggle variant="RedSecStyle">Red</Toggle>
       </div>
@@ -147,7 +155,7 @@ function VariantExamples() {
       <div className="flex gap-2">
         <Toggle variant="BorderStyle">Border</Toggle>
         <Toggle variant="PrimeContStyle">Prime Cont</Toggle>
-        <Toggle variant="BlueContStyle">Blue Cont</Toggle>
+        <Toggle variant="BluContStyle">Blue Cont</Toggle>
         <Toggle variant="RedContStyle">Red Cont</Toggle>
       </div>
     </div>
@@ -275,7 +283,7 @@ function FilterToggles() {
       <h4 className="font-semibold">Filters</h4>
       <div className="flex flex-wrap gap-2">
         <Toggle
-          variant="BlueSecStyle"
+          variant="BluSecStyle"
           pressed={filters.inStock}
           onPressedChange={() => toggleFilter('inStock')}
         >
@@ -350,12 +358,12 @@ function DisabledToggles() {
 ```typescript
 type VariantType =
   | 'PrimeStyle'
-  | 'BlueSecStyle'
+  | 'BluSecStyle'
   | 'YelSecStyle'
   | 'RedSecStyle'
   | 'BorderStyle'
   | 'PrimeContStyle'
-  | 'BlueContStyle'
+  | 'BluContStyle'
   | 'RedContStyle'
 ```
 
@@ -582,7 +590,7 @@ function SettingsToggles() {
           <label className="text-sm capitalize">{key.replace(/([A-Z])/g, ' $1')}</label>
           <Toggle
             size="S"
-            variant="BlueSecStyle"
+            variant="BluSecStyle"
             pressed={value}
             onPressedChange={(pressed) =>
               setSettings(prev => ({ ...prev, [key]: pressed }))
@@ -603,7 +611,7 @@ function SettingsToggles() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { Toggle } from 'torch-glare/lib/components/Toggle'
+import { Toggle } from '@/components/Toggle'
 
 describe('Toggle', () => {
   it('toggles pressed state on click', () => {
@@ -622,7 +630,7 @@ describe('Toggle', () => {
 
   it('applies variant styles', () => {
     const { container } = render(
-      <Toggle variant="BlueSecStyle">Blue</Toggle>
+      <Toggle variant="BluSecStyle">Blue</Toggle>
     )
 
     const toggle = container.querySelector('button')
@@ -736,12 +744,12 @@ Radix UI automatically provides:
 Each variant provides different visual styles:
 
 - **PrimeStyle**: Default primary style
-- **BlueSecStyle**: Blue secondary style
+- **BluSecStyle**: Blue secondary style
 - **YelSecStyle**: Yellow secondary style
 - **RedSecStyle**: Red secondary style
 - **BorderStyle**: Border-focused style
 - **PrimeContStyle**: Primary container style
-- **BlueContStyle**: Blue container style
+- **BluContStyle**: Blue container style
 - **RedContStyle**: Red container style
 
 ### Size Classes

package/docs/components/tooltip.md

@@ -11,16 +11,22 @@ keywords: [tooltip, hint, popover, radix-ui, hover, help]
 
 ## 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-tooltip
+npx torch-glare@latest init
+npx torch-glare@latest add Tooltip
 ```
 
+`add` also copies any components, hooks, and utilities that `Tooltip` depends on.
+
 ## Import
 
-```typescript
-import { Tooltip } from '@torch-ui/components'
-// Or for advanced usage:
-import { TooltipProvider, ToolTipRoot, TooltipTrigger, TooltipContent, TooltipArrow } from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { Tooltip } from "@/components/Tooltip";
 ```
 
 ## Quick Examples
@@ -28,8 +34,8 @@ import { TooltipProvider, ToolTipRoot, TooltipTrigger, TooltipContent, TooltipAr
 ### Basic Usage
 
 ```typescript
-import { Tooltip } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { Tooltip } from "@/components/Tooltip";
+import { Button } from "@/components/Button";
 
 function Example() {
   return (
@@ -43,8 +49,8 @@ function Example() {
 ### Icon with Tooltip
 
 ```typescript
-import { Tooltip } from '@torch-ui/components'
-import { ActionButton } from '@torch-ui/components'
+import { Tooltip } from "@/components/Tooltip";
+import { ActionButton } from "@/components/ActionButton";
 
 function IconTooltip() {
   return (
@@ -60,7 +66,7 @@ function IconTooltip() {
 ### Different Positions
 
 ```typescript
-import { Tooltip } from '@torch-ui/components'
+import { Tooltip } from "@/components/Tooltip";
 
 function PositionedTooltips() {
   return (
@@ -88,7 +94,7 @@ function PositionedTooltips() {
 ### Highlight Variant
 
 ```typescript
-import { Tooltip } from '@torch-ui/components'
+import { Tooltip } from "@/components/Tooltip";
 
 function HighlightTooltip() {
   return (
@@ -105,7 +111,7 @@ function HighlightTooltip() {
 ### Without Arrow
 
 ```typescript
-import { Tooltip } from '@torch-ui/components'
+import { Tooltip } from "@/components/Tooltip";
 
 function NoArrowTooltip() {
   return (
@@ -119,7 +125,7 @@ function NoArrowTooltip() {
 ### Custom Delay
 
 ```typescript
-import { Tooltip } from '@torch-ui/components'
+import { Tooltip } from "@/components/Tooltip";
 
 function CustomDelayTooltip() {
   return (
@@ -136,7 +142,7 @@ function CustomDelayTooltip() {
 ### Rich Content Tooltip
 
 ```typescript
-import { Tooltip } from '@torch-ui/components'
+import { Tooltip } from "@/components/Tooltip";
 
 function RichTooltip() {
   return (
@@ -157,7 +163,7 @@ function RichTooltip() {
 ### Controlled Tooltip
 
 ```typescript
-import { Tooltip } from '@torch-ui/components'
+import { Tooltip } from "@/components/Tooltip";
 import { useState } from 'react'
 
 function ControlledTooltip() {
@@ -178,18 +184,24 @@ function ControlledTooltip() {
 }
 ```
 
-### Disabled Tooltip
+### Conditionally Suppressing a Tooltip
+
+> **Note:** The `disabled` prop is accepted by the type but is **not implemented** — passing
+> `disabled` has no effect and will not hide the tooltip. To conditionally suppress a tooltip,
+> render the wrapped element with or without the `Tooltip` wrapper instead.
 
 ```typescript
-import { Tooltip } from '@torch-ui/components'
+import { Tooltip } from "@/components/Tooltip";
+
+function MaybeTooltip({ disabled }: { disabled: boolean }) {
+  const button = <button>Hover me</button>
+
+  // Render without the Tooltip wrapper when you don't want a tooltip.
+  if (disabled) return button
 
-function DisabledTooltip({ disabled }: { disabled: boolean }) {
   return (
-    <Tooltip
-      text="This tooltip is disabled"
-      disabled={disabled}
-    >
-      <button>Hover me</button>
+    <Tooltip text="Helpful information">
+      {button}
     </Tooltip>
   )
 }
@@ -198,8 +210,8 @@ function DisabledTooltip({ disabled }: { disabled: boolean }) {
 ### Form Field Tooltip
 
 ```typescript
-import { Tooltip } from '@torch-ui/components'
-import { Input } from '@torch-ui/components'
+import { Tooltip } from "@/components/Tooltip";
+import { Input } from "@/components/Input";
 
 function FormTooltip() {
   return (
@@ -228,7 +240,7 @@ function FormTooltip() {
 | `tip` | `boolean` | `true` | Show arrow indicator |
 | `open` | `boolean` | - | Controlled open state |
 | `onOpenChange` | `(open: boolean) => void` | - | Callback when state changes |
-| `disabled` | `boolean` | `false` | Disable tooltip |
+| `disabled` | `boolean` | `false` | **Not supported.** Accepted by the type but has no effect — the current implementation does not disable the tooltip. To conditionally suppress a tooltip, render it conditionally instead. |
 | `avoidCollisions` | `boolean` | `true` | Adjust position to stay in viewport |
 | `theme` | `'dark' \| 'light' \| 'default'` | `'dark'` | Theme variant |
 | `className` | `string` | - | Additional CSS classes |
@@ -259,7 +271,7 @@ interface TooltipProps {
   tip?: boolean
   open?: boolean
   onOpenChange?: (open: boolean) => void
-  disabled?: boolean
+  disabled?: boolean // Accepted but not implemented — has no effect
   theme?: 'dark' | 'light' | 'default'
   className?: string
 }
@@ -332,7 +344,7 @@ function ConditionalTooltip({ showTooltip, children }) {
 ```typescript
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { Tooltip } from '@torch-ui/components'
+import { Tooltip } from "@/components/Tooltip";
 
 describe('Tooltip', () => {
   it('shows tooltip on hover', async () => {
@@ -432,7 +444,7 @@ describe('Tooltip', () => {
 
 ```diff
 - import { Tooltip } from '@mui/material'
-+ import { Tooltip } from '@torch-ui/components'
++ import { Tooltip } from "@/components/Tooltip";
 
 - <Tooltip title="Help text">
 + <Tooltip text="Help text">
@@ -445,7 +457,7 @@ describe('Tooltip', () => {
 
 ```diff
 - import * as Tooltip from '@radix-ui/react-tooltip'
-+ import { Tooltip } from '@torch-ui/components'
++ import { Tooltip } from "@/components/Tooltip";
 
 - <Tooltip.Provider>
 -   <Tooltip.Root>