torch-glare 2.4.0 → 2.4.2

package/docs/components/drawer.md

@@ -10,51 +10,41 @@ keywords: [drawer, sheet, side-panel, bottom-sheet, slide, vaul, form, create, e
 > A gesture-based sliding panel built on [Vaul](https://vaul.emilkowal.ski/). It can slide up from the **bottom**, in from the **right**, or in from the **left**. It supports drag-to-dismiss, nested/stacked drawers with an iOS-style scale-back effect, an optional "notch" tab on the top edge, and a dark framed "tray" look. It is the recommended surface for create / edit forms, filter panels, side navigation, action sheets, and full-screen editors.
 
 > [!IMPORTANT]
-> The Drawer is **composed**, not configured. There is no single `direction` style switch on `DrawerContent`. You pick the anchor on the root `<Drawer direction="...">` and then pass layout classes (`wrapperClassName`, `className`, `trayClassName`) plus a few flags (`framed`, `showHandle`, `notch`, `notchSide`) to get the bottom / right / left look. The recipes below give you exact, copy-paste class strings for each direction.
+> The Drawer is **composed**, not configured. There is no single `direction` style switch on `DrawerContent`. You pick the anchor on the root `<Drawer direction="...">` and then pass layout classes (`wrapperClassName`, `className`) plus a few flags (`framed`, `notch`, `notchSide`) to get the bottom / right / left look. The recipes below give you exact, copy-paste class strings for each direction.
+
+> [!WARNING]
+> **Changed in 3.0.** `DrawerContent` no longer paints the light content surface — wrap your
+> content in a [`DrawerPanel`](#drawerpanel). This is what lets a drawer hold a form panel and
+> a dark summary panel side by side, each with its own background. Two knock-on changes:
+> `className` now targets the **tray** (the old inner-surface meaning moves to `DrawerPanel`),
+> and `showHandle` moves to `DrawerPanel` where it defaults to `false`. `trayClassName` still
+> works as a deprecated alias for `className`.
+>
+> ```diff
+> - <DrawerContent className="rounded-[10px]">…</DrawerContent>
+> + <DrawerContent>
+> +   <DrawerPanel className="rounded-[10px]">…</DrawerPanel>
+> + </DrawerContent>
+> ```
 
 ## 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
@@ -62,20 +52,25 @@ import {
 ```tsx
 <Drawer>                      {/* root — owns open state + direction */}
   <DrawerTrigger />           {/* what opens the drawer (use asChild) */}
-  <DrawerContent>            {/* the panel; controls tray/frame/handle/notch */}
-    <DrawerHeader>
-      <DrawerHeaderTitle>    {/* dark pill holding the title + a badge */}
-        <DrawerBadge />
-        <DrawerTitle />
-      </DrawerHeaderTitle>
-      <DrawerHeaderActions /> {/* dark pill holding header buttons */}
-    </DrawerHeader>
-
-    {/* ...your body content... */}
-
-    <DrawerFooter>
-      <DrawerClose />          {/* anything that should close the drawer */}
-    </DrawerFooter>
+  <DrawerContent>             {/* the dark tray; frame / positioning / notch */}
+    <DrawerPanel>             {/* the light content surface */}
+      <DrawerHeader>
+        <DrawerHeaderTitle>   {/* dark pill holding the title + a badge */}
+          <DrawerBadge />
+          <DrawerTitle />
+        </DrawerHeaderTitle>
+        <DrawerHeaderActions /> {/* dark pill holding header buttons */}
+      </DrawerHeader>
+
+      {/* ...your body content... */}
+
+      <DrawerFooter>
+        <DrawerClose />         {/* anything that should close the drawer */}
+      </DrawerFooter>
+    </DrawerPanel>
+
+    {/* Anything else here sits BESIDE the panel, with its own background —
+        e.g. a <FormSummary />. Give the tray a `gap-*` to space them. */}
   </DrawerContent>
 </Drawer>
 ```
@@ -92,27 +87,29 @@ The default. Slides up from the bottom with a drag handle. Use `framed={false}`
     <Button variant="PrimeStyle">Open drawer</Button>
   </DrawerTrigger>
   <DrawerContent framed={false}>
-    <DrawerHeader>
-      <DrawerTitle>Basic drawer</DrawerTitle>
-      <DrawerDescription>
-        Drag the handle down or press Escape to close.
-      </DrawerDescription>
-    </DrawerHeader>
-
-    <div className="px-4 pb-4">
-      <p className="typography-body-small-regular text-content-presentation-action-light-secondary">
-        Put any content here — forms, lists, settings.
-      </p>
-    </div>
+    <DrawerPanel framed={false} showHandle>
+      <DrawerHeader>
+        <DrawerTitle>Basic drawer</DrawerTitle>
+        <DrawerDescription>
+          Drag the handle down or press Escape to close.
+        </DrawerDescription>
+      </DrawerHeader>
+
+      <div className="px-4 pb-4">
+        <p className="typography-body-small-regular text-content-presentation-action-light-secondary">
+          Put any content here — forms, lists, settings.
+        </p>
+      </div>
 
-    <DrawerFooter>
-      <DrawerClose asChild>
-        <Button variant="PrimeStyle">Done</Button>
-      </DrawerClose>
-      <DrawerClose asChild>
-        <Button variant="BorderStyle">Cancel</Button>
-      </DrawerClose>
-    </DrawerFooter>
+      <DrawerFooter>
+        <DrawerClose asChild>
+          <Button variant="PrimeStyle">Done</Button>
+        </DrawerClose>
+        <DrawerClose asChild>
+          <Button variant="BorderStyle">Cancel</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerPanel>
   </DrawerContent>
 </Drawer>
 ```
@@ -152,7 +149,6 @@ function ContactDrawer({ mode = "create", contact }) {
       </DrawerTrigger>
 
       <DrawerContent
-        showHandle={false}
         /* The top-edge notch: close button + "Open in new tab" pill. */
         notch={
           <DrawerNotch>
@@ -166,9 +162,9 @@ function ContactDrawer({ mode = "create", contact }) {
           </DrawerNotch>
         }
         wrapperClassName="top-2 right-2 bottom-2 left-auto mt-0 h-auto w-[1046px] max-w-[calc(100vw-16px)]"
-        /* With a notch, round all corners EXCEPT the top one the notch sits on. */
-        className="rounded-tr-[16px] rounded-b-[16px]"
       >
+        {/* With a notch, round all corners EXCEPT the top one the notch sits on. */}
+        <DrawerPanel className="rounded-tr-[16px] rounded-b-[16px]">
         {/* Header: badge flips New / Edit, actions live in their own dark pill */}
         <DrawerHeader>
           <DrawerHeaderTitle>
@@ -259,6 +255,7 @@ function ContactDrawer({ mode = "create", contact }) {
             />
           </SectionBlock>
         </div>
+        </DrawerPanel>
       </DrawerContent>
     </Drawer>
   );
@@ -304,38 +301,40 @@ function RowDivider() {
     <Button variant="PrimeStyle">Checkout</Button>
   </DrawerTrigger>
   <DrawerContent framed={false}>
-    <DrawerHeader>
-      <DrawerTitle>Your cart</DrawerTitle>
-      <DrawerDescription>1 item — $129.00</DrawerDescription>
-    </DrawerHeader>
-
-    <DrawerFooter>
-      <DrawerNested>
-        <DrawerTrigger asChild>
-          <Button variant="PrimeStyle">Continue to shipping</Button>
-        </DrawerTrigger>
-        <DrawerContent framed={false}>
-          <DrawerHeader>
-            <DrawerTitle>Shipping</DrawerTitle>
-          </DrawerHeader>
-          {/* ...another DrawerNested inside here for payment... */}
-        </DrawerContent>
-      </DrawerNested>
-    </DrawerFooter>
+    <DrawerPanel framed={false} showHandle>
+      <DrawerHeader>
+        <DrawerTitle>Your cart</DrawerTitle>
+        <DrawerDescription>1 item — $129.00</DrawerDescription>
+      </DrawerHeader>
+
+      <DrawerFooter>
+        <DrawerNested>
+          <DrawerTrigger asChild>
+            <Button variant="PrimeStyle">Continue to shipping</Button>
+          </DrawerTrigger>
+          <DrawerContent framed={false}>
+            <DrawerPanel framed={false} showHandle>
+              <DrawerHeader>
+                <DrawerTitle>Shipping</DrawerTitle>
+              </DrawerHeader>
+              {/* ...another DrawerNested inside here for payment... */}
+            </DrawerPanel>
+          </DrawerContent>
+        </DrawerNested>
+      </DrawerFooter>
+    </DrawerPanel>
   </DrawerContent>
 </Drawer>
 ```
 
 ### Notch (top-edge tab)
 
-The notch is an optional tab that sticks out of the top edge of the drawer — used for a close button plus an "Open in new tab" / "Open in the app" affordance. Pass it to `DrawerContent` via the `notch` prop. When a notch is present, hide the drag handle (`showHandle={false}`) and use the asymmetric corner rounding (`className="rounded-tr-[16px] rounded-b-[16px]"` for a right drawer) so the panel tucks under the notch.
+The notch is an optional tab that sticks out of the top edge of the drawer — used for a close button plus an "Open in new tab" / "Open in the app" affordance. Pass it to `DrawerContent` via the `notch` prop. When a notch is present, leave the drag handle off (`DrawerPanel`'s `showHandle` defaults to `false`) and use the asymmetric corner rounding on the panel (`className="rounded-tr-[16px] rounded-b-[16px]"` for a right drawer) so it tucks under the notch.
 
 **Simple notch** — close button + "Open in new tab" pill. This is the most common form, used on the create/edit drawer above:
 
 ```tsx
 <DrawerContent
-  showHandle={false}
-  className="rounded-tr-[16px] rounded-b-[16px]"
   notch={
     <DrawerNotch>
       <DrawerClose asChild>
@@ -348,7 +347,9 @@ The notch is an optional tab that sticks out of the top edge of the drawer — u
     </DrawerNotch>
   }
 >
-  {/* ... */}
+  <DrawerPanel className="rounded-tr-[16px] rounded-b-[16px]">
+    {/* ... */}
+  </DrawerPanel>
 </DrawerContent>
 ```
 
@@ -356,8 +357,6 @@ The notch is an optional tab that sticks out of the top edge of the drawer — u
 
 ```tsx
 <DrawerContent
-  showHandle={false}
-  className="rounded-tr-[16px] rounded-b-[16px]"
   notch={
     <DrawerNotch>
       <DrawerClose asChild>
@@ -375,7 +374,9 @@ The notch is an optional tab that sticks out of the top edge of the drawer — u
     </DrawerNotch>
   }
 >
-  {/* ... */}
+  <DrawerPanel className="rounded-tr-[16px] rounded-b-[16px]">
+    {/* ... */}
+  </DrawerPanel>
 </DrawerContent>
 ```
 
@@ -429,7 +430,7 @@ There is **no automatic per-direction styling**. The anchor is set on the root w
 |---|---|---|---|
 | Root prop | _(none)_ | `direction="right"` | `direction="left"` |
 | Sits at | full width, pinned to bottom | floating panel on the right | floating panel on the left |
-| Drag handle | **shown** (`showHandle` default `true`) | hidden (`showHandle={false}`) | hidden (`showHandle={false}`) |
+| Drag handle | on — `<DrawerPanel showHandle>` | off (the default) | off (the default) |
 | Frame / tray | usually off (`framed={false}`) for clean sheet | on (default) for the dark tray | on (default) |
 | Rounded corners | top corners only | all/left corners | top-left + bottom corners |
 | Notch side | top-left (`notchSide="left"`) | top-left | mirror to `notchSide="right"` |
@@ -445,11 +446,12 @@ No `direction` prop. Keep the drag handle; drop the frame for a clean sheet.
     <Button variant="PrimeStyle">Open bottom sheet</Button>
   </DrawerTrigger>
   <DrawerContent framed={false}>
-    {/* drag handle appears automatically */}
-    <DrawerHeader>
-      <DrawerTitle>Comments</DrawerTitle>
-    </DrawerHeader>
-    {/* ... */}
+    <DrawerPanel framed={false} showHandle>
+      <DrawerHeader>
+        <DrawerTitle>Comments</DrawerTitle>
+      </DrawerHeader>
+      {/* ... */}
+    </DrawerPanel>
   </DrawerContent>
 </Drawer>
 ```
@@ -462,7 +464,9 @@ No `direction` prop. Keep the drag handle; drop the frame for a clean sheet.
     <Button variant="PrimeStyle">Open half-screen</Button>
   </DrawerTrigger>
   <DrawerContent framed={false} wrapperClassName="h-full max-h-[97vh]">
-    {/* ... */}
+    <DrawerPanel framed={false} showHandle>
+      {/* ... */}
+    </DrawerPanel>
   </DrawerContent>
 </Drawer>
 ```
@@ -477,26 +481,26 @@ A floating panel anchored to the right edge — the canonical home for create/ed
     <Button variant="PrimeStyle">Open right drawer</Button>
   </DrawerTrigger>
   <DrawerContent
-    showHandle={false}
     wrapperClassName="top-2 right-2 bottom-2 left-auto mt-0 h-auto w-[420px] max-w-[calc(100vw-16px)]"
-    trayClassName="rounded-[16px]"
-    className="rounded-[10px]"
+    className="rounded-[16px]"
   >
-    <DrawerHeader>
-      <DrawerTitle>Filters</DrawerTitle>
-      <DrawerDescription>Status, owner, tags, priority…</DrawerDescription>
-    </DrawerHeader>
-    <div className="px-4 pb-4 space-y-3 flex-1 overflow-y-auto">
-      {/* ...filter rows... */}
-    </div>
-    <DrawerFooter>
-      <DrawerClose asChild>
-        <Button variant="PrimeStyle">Apply</Button>
-      </DrawerClose>
-      <DrawerClose asChild>
-        <Button variant="BorderStyle">Reset</Button>
-      </DrawerClose>
-    </DrawerFooter>
+    <DrawerPanel className="rounded-[10px]">
+      <DrawerHeader>
+        <DrawerTitle>Filters</DrawerTitle>
+        <DrawerDescription>Status, owner, tags, priority…</DrawerDescription>
+      </DrawerHeader>
+      <div className="px-4 pb-4 space-y-3 flex-1 overflow-y-auto">
+        {/* ...filter rows... */}
+      </div>
+      <DrawerFooter>
+        <DrawerClose asChild>
+          <Button variant="PrimeStyle">Apply</Button>
+        </DrawerClose>
+        <DrawerClose asChild>
+          <Button variant="BorderStyle">Reset</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerPanel>
   </DrawerContent>
 </Drawer>
 ```
@@ -513,10 +517,8 @@ Mirror of the right recipe: `direction="left"`, anchor to the left edge, and if
     <Button variant="PrimeStyle">Open left drawer</Button>
   </DrawerTrigger>
   <DrawerContent
-    showHandle={false}
     notchSide="right"
     wrapperClassName="top-2 left-2 bottom-2 right-auto mt-0 h-auto w-[420px] max-w-[calc(100vw-16px)]"
-    className="rounded-tl-[16px] rounded-b-[16px]"
     notch={
       <DrawerNotch>
         <DrawerClose asChild>
@@ -529,13 +531,15 @@ Mirror of the right recipe: `direction="left"`, anchor to the left edge, and if
       </DrawerNotch>
     }
   >
-    <DrawerHeader>
-      <DrawerHeaderTitle>
-        <DrawerBadge color="Purple">Menu</DrawerBadge>
-        <DrawerTitle>Navigation</DrawerTitle>
-      </DrawerHeaderTitle>
-    </DrawerHeader>
-    {/* ...nav items... */}
+    <DrawerPanel className="rounded-tl-[16px] rounded-b-[16px]">
+      <DrawerHeader>
+        <DrawerHeaderTitle>
+          <DrawerBadge color="Purple">Menu</DrawerBadge>
+          <DrawerTitle>Navigation</DrawerTitle>
+        </DrawerHeaderTitle>
+      </DrawerHeader>
+      {/* ...nav items... */}
+    </DrawerPanel>
   </DrawerContent>
 </Drawer>
 ```
@@ -553,7 +557,9 @@ Anchor a bottom drawer to every edge via `wrapperClassName`.
     framed={false}
     wrapperClassName="inset-x-0 top-0 bottom-0 m-0 h-screen w-screen max-w-none"
   >
-    {/* immersive editor / media viewer */}
+    <DrawerPanel framed={false} showHandle>
+      {/* immersive editor / media viewer */}
+    </DrawerPanel>
   </DrawerContent>
 </Drawer>
 ```
@@ -576,25 +582,45 @@ Wraps Vaul's `Drawer.Root` and defaults `shouldScaleBackground` to `true`. Accep
 
 ### `DrawerContent`
 
-The panel. This is where direction-specific styling is applied.
+The dark tray. It frames and positions, but paints nothing over its children — each child
+brings its own background. This is where direction-specific styling is applied.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `framed` | `boolean` | `true` | Show the dark "tray" frame (border + inset shadow) around the panel. Set `false` for clean bottom sheets. |
-| `showHandle` | `boolean` | `true` | Show the centered drag handle. Auto-hidden when a `notch` is present. Set `false` for side drawers. |
 | `notch` | `ReactNode` | — | A `DrawerNotch` tab rendered on the top edge. |
 | `notchSide` | `"left" \| "right"` | `"left"` | Which side the notch attaches to (and which corner stays square). Use `"right"` for left-anchored drawers. |
 | `wrapperClassName` | `string` | — | Classes on the outer positioned element — this is how you anchor/size the panel per direction. |
-| `trayClassName` | `string` | — | Classes on the dark tray frame (e.g. corner rounding). |
-| `className` | `string` | — | Classes on the inner light content surface. |
+| `className` | `string` | — | Classes on the **dark tray**. Add a `gap-*` here when the tray holds more than one child. |
+| `trayClassName` | `string` | — | **Deprecated** — an alias for `className` (merged last, so it still wins). |
 | `...props` | Vaul `Content` props | — | Forwarded to `Drawer.Content`. |
 
+### `DrawerPanel`
+
+The light `#F0F0F0` content surface. The tray paints nothing over its children, so a drawer
+can hold a panel **plus something else beside it** — a [FormSummary](./form-summary.md), say —
+with each bringing its own background.
+
+```tsx
+<DrawerContent className="gap-[6px]">
+  <DrawerPanel>…form…</DrawerPanel>
+  <FormSummary … />          {/* dark, sits beside the panel */}
+</DrawerContent>
+```
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `framed` | `boolean` | `true` | Panel border + inset shadow that pairs with the tray's frame. Match the tray's `framed`. |
+| `showHandle` | `boolean` | `false` | Show the centered drag handle. Turn on for bottom sheets; leave off when there's a `notch`. |
+| `className` | `string` | — | Classes on the surface (e.g. corner rounding). |
+
 ### Sub-components
 
 | Component | Description |
 |---|---|
 | `DrawerTrigger` | Opens the drawer. Use `asChild` to wrap your own button. |
 | `DrawerClose` | Closes the drawer. Use `asChild` to wrap any element. |
+| `DrawerPanel` | The light content surface. Wrap your body in it — see above. |
 | `DrawerNested` | A nested/stacked drawer. Must be rendered inside an open `DrawerContent`. |
 | `DrawerHeader` | Header row (space-between layout) holding title + actions. |
 | `DrawerHeaderTitle` | Dark rounded pill that groups a `DrawerBadge` + `DrawerTitle`. |

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