torch-glare 2.4.0 → 2.4.1

package/docs/components/date-picker.md

@@ -11,15 +11,22 @@ keywords: [date-picker, calendar, time, datetime, input, popover]
 
 ## 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 torch-react-mobile-picker
+npx torch-glare@latest init
+npx torch-glare@latest add DatePicker
 ```
 
+`add` also copies any components, hooks, and utilities that `DatePicker` depends on.
+
 ## Import
 
-```typescript
-import { DatePicker } from '@torch-ui/components'
-import type { DatePickerProps } from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { DatePicker } from "@/components/DatePicker";
 ```
 
 ## Quick Examples
@@ -27,7 +34,7 @@ import type { DatePickerProps } from '@torch-ui/components'
 ### Basic Usage
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 
 function Example() {
@@ -46,7 +53,7 @@ function Example() {
 ### With Time Picker
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 
 function DateTimePicker() {
@@ -66,7 +73,7 @@ function DateTimePicker() {
 ### Range Selection
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 import { DateRange } from 'react-day-picker'
 
@@ -91,7 +98,7 @@ function RangePicker() {
 ### Multiple Date Selection
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 
 function MultipleDates() {
@@ -111,7 +118,7 @@ function MultipleDates() {
 ### Custom Date Format
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 
 function CustomFormat() {
   const [date, setDate] = useState<Date>(new Date())
@@ -129,8 +136,8 @@ function CustomFormat() {
 ### Custom Trigger Element
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
+import { Button } from "@/components/Button";
 
 function CustomTrigger() {
   const [date, setDate] = useState<Date>(new Date())
@@ -140,7 +147,7 @@ function CustomTrigger() {
       value={date}
       onChange={(e) => setDate(e.target.value)}
     >
-      <Button variant="SecondaryStyle">
+      <Button variant="BluSecStyle">
         <i className="ri-calendar-line" />
         Select Date
       </Button>
@@ -152,8 +159,8 @@ function CustomTrigger() {
 ### With Controlled Input
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function ControlledInput() {
@@ -176,7 +183,7 @@ function ControlledInput() {
 ### Date Restrictions
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 
 function RestrictedDates() {
   const [date, setDate] = useState<Date>()
@@ -201,7 +208,7 @@ function RestrictedDates() {
 ### Booking System
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 import { DateRange } from 'react-day-picker'
 
@@ -243,7 +250,7 @@ function BookingPicker() {
 ### Deadline Picker with Time
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 
 function DeadlinePicker() {
@@ -356,7 +363,7 @@ type RangeDatePicker = DatePickerProps & {
 ### Event Scheduler
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 
 function EventScheduler() {
@@ -399,7 +406,7 @@ function EventScheduler() {
 ### Birthday Picker
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 
 function BirthdayPicker() {
@@ -431,7 +438,7 @@ function BirthdayPicker() {
 ### Work Schedule Picker
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useState } from 'react'
 
 function WorkSchedule() {
@@ -462,7 +469,7 @@ function WorkSchedule() {
 
 ```typescript
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import userEvent from '@testing-library/user-event'
 
 describe('DatePicker', () => {
@@ -753,7 +760,7 @@ Reverse-engineer the implementation from the call sites in `DatePicker.tsx` unti
 ### With Form Libraries
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useForm, Controller } from 'react-hook-form'
 
 function FormExample() {
@@ -788,7 +795,7 @@ function FormExample() {
 ### With State Management
 
 ```typescript
-import { DatePicker } from '@torch-ui/components'
+import { DatePicker } from "@/components/DatePicker";
 import { useStore } from './store'
 
 function DatePickerWithStore() {

package/docs/components/dialog.md

@@ -11,24 +11,22 @@ keywords: [dialog, modal, overlay, popup, radix-ui, compound-component]
 
 ## 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-dialog
+npx torch-glare@latest init
+npx torch-glare@latest add Dialog
 ```
 
+`add` also copies any components, hooks, and utilities that `Dialog` depends on.
+
 ## Import
 
-```typescript
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-  DialogClose,
-  DialogCloseButton,
-} from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { Dialog } from "@/components/Dialog";
 ```
 
 ## Quick Examples
@@ -36,8 +34,8 @@ import {
 ### Basic Usage
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/Dialog";
+import { Button } from "@/components/Button";
 
 function Example() {
   return (
@@ -61,8 +59,8 @@ function Example() {
 ### With Header and Footer
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose } from "@/components/Dialog";
+import { Button } from "@/components/Button";
 
 function FormDialog() {
   return (
@@ -86,9 +84,9 @@ function FormDialog() {
 
         <DialogFooter>
           <DialogClose asChild>
-            <Button variant="SecondaryStyle">Cancel</Button>
+            <Button variant="BluSecStyle">Cancel</Button>
           </DialogClose>
-          <Button variant="PrimaryStyle">Save Changes</Button>
+          <Button variant="PrimeStyle">Save Changes</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
@@ -99,7 +97,7 @@ function FormDialog() {
 ### Controlled State
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "@/components/Dialog";
 import { useState } from 'react'
 
 function ControlledDialog() {
@@ -123,8 +121,8 @@ function ControlledDialog() {
 ### With Custom Close Button
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogCloseButton } from '@torch-ui/components'
-import { ActionButton } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogCloseButton } from "@/components/Dialog";
+import { ActionButton } from "@/components/ActionButton";
 
 function CustomCloseDialog() {
   return (
@@ -150,14 +148,14 @@ function CustomCloseDialog() {
 ### Confirmation Dialog
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose } from "@/components/Dialog";
+import { Button } from "@/components/Button";
 
 function ConfirmationDialog({ onConfirm }: { onConfirm: () => void }) {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button variant="DestructiveStyle">Delete Account</Button>
+        <Button variant="RedSecStyle">Delete Account</Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
@@ -170,10 +168,10 @@ function ConfirmationDialog({ onConfirm }: { onConfirm: () => void }) {
 
         <DialogFooter>
           <DialogClose asChild>
-            <Button variant="SecondaryStyle">Cancel</Button>
+            <Button variant="BluSecStyle">Cancel</Button>
           </DialogClose>
           <DialogClose asChild>
-            <Button variant="DestructiveStyle" onClick={onConfirm}>
+            <Button variant="RedSecStyle" onClick={onConfirm}>
               Delete Account
             </Button>
           </DialogClose>
@@ -187,8 +185,9 @@ function ConfirmationDialog({ onConfirm }: { onConfirm: () => void }) {
 ### Nested Form Dialog
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from '@torch-ui/components'
-import { Button, Input } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from "@/components/Dialog";
+import { Button } from "@/components/Button";
+import { Input } from "@/components/Input";
 import { useForm } from 'react-hook-form'
 
 interface FormData {
@@ -236,8 +235,9 @@ function FormDialog() {
 ### Content-Heavy Dialog
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@torch-ui/components'
-import { Button, ScrollArea } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/Dialog";
+import { Button } from "@/components/Button";
+import { ScrollArea } from "@/components/ScrollArea";
 
 function ContentDialog() {
   return (
@@ -273,8 +273,8 @@ function ContentDialog() {
 ### Multi-Step Dialog
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle } from "@/components/Dialog";
+import { Button } from "@/components/Button";
 import { useState } from 'react'
 
 function MultiStepDialog() {
@@ -298,7 +298,7 @@ function MultiStepDialog() {
 
         <DialogFooter>
           {step > 1 && (
-            <Button variant="SecondaryStyle" onClick={() => setStep(step - 1)}>
+            <Button variant="BluSecStyle" onClick={() => setStep(step - 1)}>
               Back
             </Button>
           )}
@@ -317,7 +317,7 @@ function MultiStepDialog() {
 ### Image Preview Dialog
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent } from "@/components/Dialog";
 
 function ImageDialog({ src, alt }: { src: string; alt: string }) {
   return (
@@ -340,8 +340,9 @@ function ImageDialog({ src, alt }: { src: string; alt: string }) {
 ### Loading State Dialog
 
 ```typescript
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from '@torch-ui/components'
-import { Button, SpinLoading } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from "@/components/Dialog";
+import { Button } from "@/components/Button";
+import { SpinLoading } from "@/components/SpinLoading";
 import { useState } from 'react'
 
 function LoadingDialog() {
@@ -676,8 +677,8 @@ Pick an icon that matches the entity (`ri-bank-line` for accounts, `ri-calendar-
 ### Alert/Confirmation Pattern
 
 ```typescript
-import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from "@/components/Dialog";
+import { Button } from "@/components/Button";
 
 function useConfirmDialog() {
   const [open, setOpen] = useState(false)
@@ -730,7 +731,7 @@ function useConfirmDialog() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@torch-ui/components'
+import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "@/components/Dialog";
 
 describe('Dialog', () => {
   it('opens when trigger is clicked', () => {
@@ -839,7 +840,7 @@ describe('Dialog', () => {
 
 ```diff
 - import { Dialog, DialogTitle, DialogContent } from '@mui/material'
-+ import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@torch-ui/components'
++ import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "@/components/Dialog";
 
 - <Dialog open={open} onClose={() => setOpen(false)}>
 -   <DialogTitle>Title</DialogTitle>
@@ -858,7 +859,7 @@ describe('Dialog', () => {
 
 ```diff
 - import { Dialog } from '@headlessui/react'
-+ import { Dialog, DialogContent, DialogTitle } from '@torch-ui/components'
++ import { Dialog, DialogContent, DialogTitle } from "@/components/Dialog";
 
 - <Dialog open={open} onClose={setOpen}>
 -   <Dialog.Panel>

package/docs/components/divider.md

@@ -12,10 +12,16 @@ A flexible separator component for creating visual divisions between content sec
 
 ## 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 divider
+npx torch-glare@latest init
+npx torch-glare@latest add Divider
 ```
 
+`add` also copies any components, hooks, and utilities that `Divider` depends on.
+
 ## Imports
 
 ```typescript
@@ -282,7 +288,7 @@ export function FormWithDividers() {
       <Divider />
 
       <div className="flex justify-end gap-3">
-        <Button variant="SecStyle">Cancel</Button>
+        <Button variant="BluSecStyle">Cancel</Button>
         <Button variant="PrimeStyle">Save Changes</Button>
       </div>
     </form>
@@ -317,11 +323,11 @@ export function DividerWithText() {
 
       {/* Social login */}
       <div className="space-y-2">
-        <Button className="w-full" variant="SecStyle">
+        <Button className="w-full" variant="BluSecStyle">
           <i className="ri-google-fill mr-2"></i>
           Continue with Google
         </Button>
-        <Button className="w-full" variant="SecStyle">
+        <Button className="w-full" variant="BluSecStyle">
           <i className="ri-github-fill mr-2"></i>
           Continue with GitHub
         </Button>

package/docs/components/drawer.md

@@ -14,47 +14,22 @@ keywords: [drawer, sheet, side-panel, bottom-sheet, slide, vaul, form, create, e
 
 ## 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-glare@latest init
 npx torch-glare@latest add Drawer
 ```
 
-The Drawer's only third-party dependency is [`vaul`](https://www.npmjs.com/package/vaul), which the CLI installs automatically.
-
-> [!NOTE]
-> **Building create / edit forms?** The Drawer ships on its own. The form examples on this page also use `SectionBlock`, `InputField`, and `Button`. Install them alongside it:
->
-> ```bash
-> npx torch-glare@latest add Drawer SectionBlock InputField Button
-> ```
->
-> These are *not* auto-installed by `add Drawer`, because `Drawer.tsx` does not import them — they are only needed for the form composition pattern, not for the Drawer itself.
+`add` also copies any components, hooks, and utilities that `Drawer` depends on.
 
 ## Import
 
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
 ```tsx
-import {
-  Drawer,
-  DrawerNested,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerHeaderTitle,
-  DrawerHeaderActions,
-  DrawerBadge,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-  // Notch (the tab that sticks out of the top edge)
-  DrawerNotch,
-  DrawerNotchClose,
-  DrawerNotchPill,
-  DrawerNotchDivider,
-  DrawerNotchApp,
-  // Lower-level primitives (rarely needed directly)
-  DrawerPortal,
-  DrawerOverlay,
-} from "@/components/Drawer";
+import { Drawer } from "@/components/Drawer";
 ```
 
 ## Anatomy

package/docs/components/dropdown-menu.md

@@ -11,40 +11,31 @@ keywords: [dropdown-menu, menu, radix-ui, submenu, checkbox, radio, auto-group]
 
 ## 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-dropdown-menu
+npx torch-glare@latest init
+npx torch-glare@latest add DropdownMenu
 ```
 
+`add` also copies any components, hooks, and utilities that `DropdownMenu` depends on.
+
 ## Import
 
-```typescript
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-} from '@torch-ui/components'
-```
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
 
-> **Auto-grouping:** Loose items placed directly in `DropdownMenuContent` (or `DropdownMenuSubContent`) are automatically wrapped in a boxed group, so they render inside a rounded container without you writing `DropdownMenuGroup` yourself. A `DropdownMenuLabel`, an explicit `DropdownMenuGroup`, or a `DropdownMenuRadioGroup` acts as a boundary that starts a new box. Disable this with `autoGroup={false}` on the content. (There is no `DropdownMenuSeparator` — separation comes from labels and the boxed groups.)
+```tsx
+import { DropdownMenu } from "@/components/DropdownMenu";
+```
 
 ## Quick Examples
 
 ### Basic Menu
 
 ```typescript
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/DropdownMenu";
+import { Button } from "@/components/Button";
 
 function Example() {
   return (
@@ -65,7 +56,7 @@ function Example() {
 ### With Icons
 
 ```typescript
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@torch-ui/components'
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/DropdownMenu";
 
 function IconMenu() {
   return (
@@ -97,7 +88,7 @@ function IconMenu() {
 ### With Keyboard Shortcuts
 
 ```typescript
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuShortcut } from '@torch-ui/components'
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuShortcut } from "@/components/DropdownMenu";
 
 function ShortcutMenu() {
   return (
@@ -129,7 +120,7 @@ function ShortcutMenu() {
 Labels act as section boundaries. The loose items between labels are automatically wrapped in boxed groups — no separator component needed.
 
 ```typescript
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel } from '@torch-ui/components'
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel } from "@/components/DropdownMenu";
 
 function OrganizedMenu() {
   return (
@@ -158,7 +149,7 @@ function OrganizedMenu() {
 Checkbox and radio items keep the menu **open** when toggled (the built-in `onSelect` calls `preventDefault`), so users can change several options without the menu closing each time.
 
 ```typescript
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem } from '@torch-ui/components'
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem } from "@/components/DropdownMenu";
 import { useState } from 'react'
 
 function CheckboxMenu() {
@@ -199,7 +190,7 @@ function CheckboxMenu() {
 ### With Radio Group
 
 ```typescript
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem } from '@torch-ui/components'
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem } from "@/components/DropdownMenu";
 import { useState } from 'react'
 
 function RadioMenu() {
@@ -225,7 +216,7 @@ function RadioMenu() {
 ### With Submenu
 
 ```typescript
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from '@torch-ui/components'
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from "@/components/DropdownMenu";
 
 function SubmenuExample() {
   return (
@@ -258,7 +249,7 @@ function SubmenuExample() {
 ### Disabled Items
 
 ```typescript
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@torch-ui/components'
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/DropdownMenu";
 
 function DisabledMenu() {
   return (
@@ -281,7 +272,7 @@ function DisabledMenu() {
 For a true right-click (context) menu, use the dedicated [ContextMenu](./context-menu.md) component instead of DropdownMenu — it opens at the pointer on right-click / long-press.
 
 ```typescript
-import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from '@torch-ui/components'
+import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from "@/components/ContextMenu";
 
 function Example() {
   return (
@@ -304,8 +295,8 @@ function Example() {
 Tall menus scroll instead of overflowing off-screen. The surface caps at `maxHeight` (default `320`px) and never exceeds the space available after collision handling. Pass `maxHeight` to change the cap.
 
 ```typescript
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel } from "@/components/DropdownMenu";
+import { Button } from "@/components/Button";
 
 function LongMenu() {
   return (
@@ -497,7 +488,7 @@ export const DropdownMenuRadioItem: React.ForwardRefExoticComponent<DropdownMenu
 ### With State Management
 
 ```typescript
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@torch-ui/components'
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/DropdownMenu";
 import { useState } from 'react'
 
 function useDropdownMenu() {
@@ -536,7 +527,7 @@ function StatefulMenu() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@torch-ui/components'
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/DropdownMenu";
 
 describe('DropdownMenu', () => {
   it('opens on trigger click', () => {