laif-ds 0.2.74 → 0.2.76

package/dist/agent-docs/components/DataTable.md

@@ -8,26 +8,31 @@ Powerful table built on TanStack Table v8. Supports client-side and server-side
 
 ## Props
 
-| Prop                   | Type                                  | Default                | Description                                                           |
-| ---------------------- | ------------------------------------- | ---------------------- | --------------------------------------------------------------------- |
-| `columns`              | `ColumnDef<TData, TValue>[]`          | —                      | TanStack column definitions. Use `meta` to enable features.           |
-| `data`                 | `TData[]`                             | —                      | Table data.                                                           |
-| `loading`              | `boolean`                             | `false`                | Show skeleton rows.                                                   |
-| `emptyComponent`       | `ReactNode`                           | `undefined`            | Rendered when no rows.                                                |
-| `className`            | `string`                              | `undefined`            | Wrapper classes.                                                      |
-| `checkable`            | `boolean`                             | `false`                | Adds a left checkbox column for row selection.                        |
-| `rowSelection`         | `Record<string, boolean>`             | `{}`                   | Controlled selection map.                                             |
-| `onRowSelectionChange` | `OnChangeFn<Record<string, boolean>>` | `undefined`            | Selection change handler (controlled selection).                      |
-| `onCheckedRowsChange`  | `(checkedRows: TData[]) => void`      | `undefined`            | Returns selected row values (requires `checkable`).                   |
-| `actions`              | `DataTableActions[]`                  | `[]`                   | Actions for the actions row.                                          |
-| `hidePagination`       | `boolean`                             | `false`                | Hide pagination UI.                                                   |
-| `hideActionsRow`       | `boolean`                             | `false`                | Hide actions row.                                                     |
-| `i18n`                 | `DataTableI18n`                       | `defaultDataTableI18n` | Internationalization strings.                                         |
-| `maxSortedColumns`     | `number`                              | `2`                    | Max number of sorted columns.                                         |
-| `initialState`         | `DataTableState<TData>`               | `undefined`            | Initial filters, sorting, pagination and optional `columnVisibility`. |
-| `serverMode`           | `boolean`                             | `false`                | Enable server-side mode.                                              |
-| `serverConfig`         | `DataTableServerConfig`               | `undefined`            | `{ totalItems, onStateChange }` handler for server mode.              |
-| `disableAutoPageSize`  | `boolean`                             | `false`                | Disable auto pageSize (still updates pageIndex).                      |
+| Prop                    | Type                                  | Default                | Description                                                                             |
+| ----------------------- | ------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------- |
+| `columns`               | `ColumnDef<TData, TValue>[]`          | —                      | TanStack column definitions. Use `meta` to enable features.                             |
+| `data`                  | `TData[]`                             | —                      | Table data.                                                                             |
+| `loading`               | `boolean`                             | `false`                | Show skeleton rows.                                                                     |
+| `emptyComponent`        | `ReactNode`                           | `undefined`            | Rendered when no rows.                                                                  |
+| `className`             | `string`                              | `undefined`            | Wrapper classes.                                                                        |
+| `checkable`             | `boolean`                             | `false`                | Adds a left checkbox column for row selection.                                          |
+| `rowSelection`          | `Record<string, boolean>`             | `{}`                   | Controlled selection map.                                                               |
+| `onRowSelectionChange`  | `OnChangeFn<Record<string, boolean>>` | `undefined`            | Selection change handler (controlled selection).                                        |
+| `onCheckedRowsChange`   | `(checkedRows: TData[]) => void`      | `undefined`            | Returns selected row values (requires `checkable`).                                     |
+| `actions`               | `DataTableActions[]`                  | `[]`                   | Actions for the actions row.                                                            |
+| `customComponentsLeft`  | `ReactNode`                           | `undefined`            | Custom components rendered on the left of the actions row.                              |
+| `customComponentsRight` | `ReactNode`                           | `undefined`            | Custom components rendered on the right of the actions row.                             |
+| `hidePagination`        | `boolean`                             | `false`                | Hide pagination UI.                                                                     |
+| `hideActionsRow`        | `boolean`                             | `false`                | Hide actions row.                                                                       |
+| `i18n`                  | `DataTableI18n`                       | `defaultDataTableI18n` | Internationalization strings (sorting/filtering popovers included).                     |
+| `maxSortedColumns`      | `number`                              | `2`                    | Max number of sorted columns.                                                           |
+| `initialState`          | `DataTableState<TData>`               | `undefined`            | Initial filters, sorting, pagination, optional `columnVisibility`, and searchbar value. |
+| `serverMode`            | `boolean`                             | `false`                | Enable server-side mode (client-side filtering/sorting when `false`).                   |
+| `serverConfig`          | `DataTableServerConfig`               | `undefined`            | `{ totalItems, onStateChange, serverDebounceTime? }` handler for server mode.           |
+| `disableAutoPageSize`   | `boolean`                             | `false`                | Disable auto pageSize (still updates pageIndex).                                        |
+| `id`                    | `string`                              | `undefined`            | Test/accessibility hook for the root element.                                           |
+| `data-testid`           | `string`                              | `undefined`            | Test identifier forwarded to the root element.                                          |
+| `rowClassName`          | `string \| ((row) => string)`         | `undefined`            | Add custom CSS classes to table rows based on row data or state.                        |
 
 ---
 
@@ -52,6 +57,8 @@ type ColumnMeta = {
   searchable?: boolean;
   pinned?: "left" | "right";
   listOptions?: { value: string; label: string }[];
+  cellClassName?: string | ((value: any, row: TData) => string);
+  headerClassName?: string;
 };
 ```
 
@@ -65,10 +72,10 @@ Notes:
 
 ## Behavior
 
-- **Filtering**: Badge filters + advanced builder with logical `_and`/`_or`.
-- **Global search**: Across `meta.searchable` columns; strings use `like`, arrays use `array_overlap` (mapped automatically).
+- **Filtering**: Badge filters + advanced builder with logical `_and`/`_or`; client-side application when `serverMode=false`, state emission when `serverMode=true`.
+- **Global search**: Across `meta.searchable` columns; strings use `like`, arrays use `array_overlap` (mapped automatically for list single select).
 - **Operators**: Full operator set per type, including `eq_null`/`n_eq_null`, list operators (`array_overlap`, `n_array_overlap`), date/time before/after, checked/unchecked.
-- **Sorting**: Multi-column (limited by `maxSortedColumns`).
+- **Sorting**: Multi-column (limited by `maxSortedColumns`); client-side when `serverMode=false`, emitted to server otherwise.
 - **Selection**: Integrated checkbox column when `checkable`.
 - **Column visibility**: Columns can start hidden via `initialState.columnVisibility` and be toggled from the eye icon popover in the toolbar (supports drag-and-drop reordering).
 - **Non-hideable columns**: Set `enableHiding: false` on a column to prevent it from being hidden.
@@ -94,7 +101,8 @@ type ServerState = {
 };
 ```
 
-The table manages debounced emissions and preserves computed values across updates.
+- `computedFilter`/`computedSorting` are auto-generated from the UI and preserved across updates.
+- Debounced emissions are configurable via `serverConfig.serverDebounceTime`.
 
 ---
 

package/dist/agent-docs/components/Dialog.md

@@ -1,125 +1,130 @@
- # Dialog
- 
- ## Overview
- 
- Accessible modal dialog built on Radix. Includes overlay, content with size variants, header/footer layout, title/description, trigger and close controls.
- 
- ---
- 
- ## Props
- 
- ### Dialog (Root)
- 
- | Prop           | Type                | Default     | Description                              |
- | -------------- | ------------------- | ----------- | ---------------------------------------- |
- | `open`         | `boolean`           | `undefined` | Controlled open state.                    |
- | `defaultOpen`  | `boolean`           | `false`     | Uncontrolled initial open state.          |
- | `onOpenChange` | `(open: boolean) => void` | `undefined` | Called when open state changes.      |
- | `modal`        | `boolean`           | `true`      | Modal behavior (trap focus, background).  |
- 
- ### DialogContent
- 
- Additional prop:
- 
- | Prop     | Type                          | Default     | Description                           |
- | -------- | ----------------------------- | ----------- | ------------------------------------- |
- | `size`   | `"sm" | "default" | "lg" | "xl"` | `"default"` | Max-width preset for the content.     |
- | `className` | `string`                    | `""`        | Additional classes for the panel.     |
- 
- ### Subcomponents
- 
- - `DialogTrigger`: Element that opens the dialog (supports `asChild`).
- - `DialogPortal` / `DialogOverlay`: Portal root and backdrop.
- - `DialogContent`: Centered panel with animations and close button.
- - `DialogHeader` / `DialogFooter`: Layout helpers for content.
- - `DialogTitle` / `DialogDescription`: Accessible title and description.
- - `DialogClose`: Close button (already included inside `DialogContent`).
- 
- ---
- 
- ## Behavior
- 
- - **Focus management**: Traps focus while open; returns on close.
- - **Pointer outside exception**: Clicks inside elements marked `data-command-portal` are ignored to prevent unintended close.
- - **Sizes**: `size` controls the max-width (`sm`, `default`, `lg`, `xl`).
- 
- ---
- 
- ## Examples
- 
- ### Basic
- 
- ```tsx
- import { Button } from "laif-ds";
- import {
-   Dialog,
-   DialogTrigger,
-   DialogContent,
-   DialogHeader,
-   DialogTitle,
-   DialogDescription,
-   DialogFooter,
- } from "laif-ds";
- 
- export function BasicDialog() {
-   return (
-     <Dialog>
-       <DialogTrigger asChild>
-         <Button variant="outline">Open Dialog</Button>
-       </DialogTrigger>
-       <DialogContent>
-         <DialogHeader>
-           <DialogTitle>Basic Dialog</DialogTitle>
-           <DialogDescription>
-             This is a basic dialog with title and description.
-           </DialogDescription>
-         </DialogHeader>
-         <div className="py-4">
-           <p className="text-d-secondary-foreground text-sm">
-             Dialog content goes here.
-           </p>
-         </div>
-         <DialogFooter>
-           <Button type="submit">Save changes</Button>
-         </DialogFooter>
-       </DialogContent>
-     </Dialog>
-   );
- }
- ```
- 
- ### Size Variants
- 
- ```tsx
- import { Button } from "laif-ds";
- import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from "laif-ds";
- 
- export function SizeVariants() {
-   return (
-     <div className="flex flex-wrap gap-3">
-       {["sm", "default", "lg", "xl"].map((sz) => (
-         <Dialog key={sz as string}>
-           <DialogTrigger asChild>
-             <Button variant="outline">Open {String(sz)}</Button>
-           </DialogTrigger>
-           <DialogContent size={sz as any}>
-             <DialogHeader>
-               <DialogTitle>Size: {String(sz)}</DialogTitle>
-             </DialogHeader>
-             <div className="text-sm">Content for {String(sz)}</div>
-           </DialogContent>
-         </Dialog>
-       ))}
-     </div>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Accessibility**: Use `DialogTitle` and `DialogDescription` for screen readers.
- - **Styling**: Customize panel via `className` on `DialogContent`.
- - **Closing**: A close button is rendered in the top-right of `DialogContent`.
- 
+# Dialog
+
+## Overview
+
+Accessible modal dialog built on Radix. Includes overlay, content with size variants, header/footer layout, title/description, trigger and close controls.
+
+---
+
+## Props
+
+### Dialog (Root)
+
+| Prop           | Type                      | Default     | Description                              |
+| -------------- | ------------------------- | ----------- | ---------------------------------------- |
+| `open`         | `boolean`                 | `undefined` | Controlled open state.                   |
+| `defaultOpen`  | `boolean`                 | `false`     | Uncontrolled initial open state.         |
+| `onOpenChange` | `(open: boolean) => void` | `undefined` | Called when open state changes.          |
+| `modal`        | `boolean`                 | `true`      | Modal behavior (trap focus, background). |
+
+### DialogContent
+
+Additional prop:
+
+| Prop        | Type     | Default   | Description                       |
+| ----------- | -------- | --------- | --------------------------------- | ----- | ----------- | --------------------------------- |
+| `size`      | `"sm"    | "default" | "lg"                              | "xl"` | `"default"` | Max-width preset for the content. |
+| `className` | `string` | `""`      | Additional classes for the panel. |
+
+### Subcomponents
+
+- `DialogTrigger`: Element that opens the dialog (supports `asChild`).
+- `DialogPortal` / `DialogOverlay`: Portal root and backdrop.
+- `DialogContent`: Centered panel with animations and close button.
+- `DialogHeader` / `DialogFooter`: Layout helpers for content.
+- `DialogTitle` / `DialogDescription`: Accessible title and description.
+- `DialogClose`: Close button (already included inside `DialogContent`).
+
+---
+
+## Behavior
+
+- **Focus management**: Traps focus while open; returns on close.
+- **Pointer outside exception**: Clicks inside elements marked `data-command-portal` are ignored to prevent unintended close.
+- **Sizes**: `size` controls the max-width (`sm`, `default`, `lg`, `xl`).
+
+---
+
+## Examples
+
+### Basic
+
+```tsx
+import { Button } from "laif-ds";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "laif-ds";
+
+export function BasicDialog() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Basic Dialog</DialogTitle>
+          <DialogDescription>
+            This is a basic dialog with title and description.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <p className="text-d-secondary-foreground text-sm">
+            Dialog content goes here.
+          </p>
+        </div>
+        <DialogFooter>
+          <Button type="submit">Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+### Size Variants
+
+```tsx
+import { Button } from "laif-ds";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "laif-ds";
+
+export function SizeVariants() {
+  return (
+    <div className="flex flex-wrap gap-3">
+      {["sm", "default", "lg", "xl"].map((sz) => (
+        <Dialog key={sz as string}>
+          <DialogTrigger asChild>
+            <Button variant="outline">Open {String(sz)}</Button>
+          </DialogTrigger>
+          <DialogContent size={sz as any}>
+            <DialogHeader>
+              <DialogTitle>Size: {String(sz)}</DialogTitle>
+            </DialogHeader>
+            <div className="text-sm">Content for {String(sz)}</div>
+          </DialogContent>
+        </Dialog>
+      ))}
+    </div>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Accessibility**: Use `DialogTitle` and `DialogDescription` for screen readers.
+- **Styling**: Customize panel via `className` on `DialogContent`.
+- **Closing**: A close button is rendered in the top-right of `DialogContent`.

package/dist/agent-docs/components/Drawer.md

@@ -1,127 +1,141 @@
- # Drawer
- 
- ## Overview
- 
- Sliding panel component (top/right/bottom/left) built on Vaul. Supports modal behavior, background scaling, snap points, and full keyboard accessibility.
- 
- ---
- 
- ## Props
- 
- ### Drawer (Root)
- 
- | Prop                 | Type                                  | Default     | Description                                                        |
- | -------------------- | ------------------------------------- | ----------- | ------------------------------------------------------------------ |
- | `open`               | `boolean`                              | `undefined` | Controlled open state.                                             |
- | `onOpenChange`       | `(open: boolean) => void`              | `undefined` | Called when open state changes.                                    |
- | `direction`          | `"top" | "right" | "bottom" | "left"` | `"bottom"`  | Drawer opening direction.                                          |
- | `modal`              | `boolean`                              | `true`      | Modal behavior (trap focus, block background interaction).         |
- | `shouldScaleBackground` | `boolean`                           | `true`      | Scales the background when the drawer is open.                     |
- | `snapPoints`         | `number[]`                             | `[]`        | Optional snap points (fractions of viewport: e.g., `0.4`, `0.6`).  |
- | `activeSnapPoint`    | `number | string`                      | `undefined` | The active snap point index/value.                                  |
- | `closeThreshold`     | `number`                               | `undefined` | Threshold to trigger close on drag.                                 |
- 
- ### Subcomponents
- 
- - `DrawerTrigger`: Element that opens the drawer (supports `asChild`).
- - `DrawerPortal` / `DrawerOverlay`: Portal root and backdrop.
- - `DrawerContent`: Panel container; includes a grab handle in bottom direction.
- - `DrawerHeader` / `DrawerFooter`: Layout helpers for content.
- - `DrawerTitle` / `DrawerDescription`: Header title and description.
- - `DrawerClose`: Close button helper to wrap an element.
- 
- ---
- 
- ## Behavior
- 
- - **Directions**: Open from any side via `direction` prop.
- - **Snap points**: Provide a list of fractional heights; control active point via `activeSnapPoint`.
- - **Modal**: When `modal` is true, interaction outside is blocked and overlay is shown.
- - **Accessibility**: Focus trapping and keyboard navigation handled by the underlying library.
- 
- ---
- 
- ## Examples
- 
- ### Interactive Drawer
- 
- ```tsx
- import { Button } from "laif-ds";
- import {
-   Drawer,
-   DrawerTrigger,
-   DrawerContent,
-   DrawerHeader,
-   DrawerTitle,
-   DrawerDescription,
-   DrawerFooter,
-   DrawerClose,
- } from "laif-ds";
- import { Input } from "laif-ds";
- 
- export function InteractiveDrawer() {
-   return (
-     <Drawer direction="bottom" modal shouldScaleBackground>
-       <DrawerTrigger asChild>
-         <Button variant="outline">Apri Drawer</Button>
-       </DrawerTrigger>
-       <DrawerContent>
-         <DrawerHeader>
-           <DrawerTitle>Drawer di Esempio</DrawerTitle>
-           <DrawerDescription>
-             Personalizza contenuti e comportamento tramite le props.
-           </DrawerDescription>
-         </DrawerHeader>
-         <div className="space-y-4 p-4">
-           <Input label="Nome" placeholder="Inserisci il tuo nome" />
-           <Input label="Email" type="email" placeholder="Inserisci la tua email" />
-         </div>
-         <DrawerFooter>
-           <Button>Salva modifiche</Button>
-           <DrawerClose asChild>
-             <Button variant="outline">Annulla</Button>
-           </DrawerClose>
-         </DrawerFooter>
-       </DrawerContent>
-     </Drawer>
-   );
- }
- ```
- 
- ### With Snap Points
- 
- ```tsx
- import { Button } from "laif-ds";
- import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose } from "laif-ds";
- 
- export function DrawerWithSnapPoints() {
-   const snapPoints = [0.4, 0.6, 0.9];
-   return (
-     <Drawer snapPoints={snapPoints} activeSnapPoint={0}>
-       <DrawerTrigger asChild>
-         <Button variant="outline">Drawer con Snap Points</Button>
-       </DrawerTrigger>
-       <DrawerContent>
-         <DrawerHeader>
-           <DrawerTitle>Drawer con Snap Points</DrawerTitle>
-           <DrawerDescription>Snap a 40%, 60% e 90% dell'altezza.</DrawerDescription>
-         </DrawerHeader>
-         <DrawerFooter>
-           <DrawerClose asChild>
-             <Button variant="outline">Chiudi</Button>
-           </DrawerClose>
-         </DrawerFooter>
-       </DrawerContent>
-     </Drawer>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Handle**: A grab handle is visible for bottom direction.
- - **Layout**: Use `DrawerHeader`/`DrawerFooter` and your own content in between.
- - **Styling**: Customize via `className` on `DrawerContent`.
- 
+# Drawer
+
+## Overview
+
+Sliding panel component (top/right/bottom/left) built on Vaul. Supports modal behavior, background scaling, snap points, and full keyboard accessibility.
+
+---
+
+## Props
+
+### Drawer (Root)
+
+| Prop                    | Type                      | Default     | Description                                                       |
+| ----------------------- | ------------------------- | ----------- | ----------------------------------------------------------------- | ---------------------------------- | ---------- | ------------------------- |
+| `open`                  | `boolean`                 | `undefined` | Controlled open state.                                            |
+| `onOpenChange`          | `(open: boolean) => void` | `undefined` | Called when open state changes.                                   |
+| `direction`             | `"top"                    | "right"     | "bottom"                                                          | "left"`                            | `"bottom"` | Drawer opening direction. |
+| `modal`                 | `boolean`                 | `true`      | Modal behavior (trap focus, block background interaction).        |
+| `shouldScaleBackground` | `boolean`                 | `true`      | Scales the background when the drawer is open.                    |
+| `snapPoints`            | `number[]`                | `[]`        | Optional snap points (fractions of viewport: e.g., `0.4`, `0.6`). |
+| `activeSnapPoint`       | `number                   | string`     | `undefined`                                                       | The active snap point index/value. |
+| `closeThreshold`        | `number`                  | `undefined` | Threshold to trigger close on drag.                               |
+
+### Subcomponents
+
+- `DrawerTrigger`: Element that opens the drawer (supports `asChild`).
+- `DrawerPortal` / `DrawerOverlay`: Portal root and backdrop.
+- `DrawerContent`: Panel container; includes a grab handle in bottom direction.
+- `DrawerHeader` / `DrawerFooter`: Layout helpers for content.
+- `DrawerTitle` / `DrawerDescription`: Header title and description.
+- `DrawerClose`: Close button helper to wrap an element.
+
+---
+
+## Behavior
+
+- **Directions**: Open from any side via `direction` prop.
+- **Snap points**: Provide a list of fractional heights; control active point via `activeSnapPoint`.
+- **Modal**: When `modal` is true, interaction outside is blocked and overlay is shown.
+- **Accessibility**: Focus trapping and keyboard navigation handled by the underlying library.
+
+---
+
+## Examples
+
+### Interactive Drawer
+
+```tsx
+import { Button } from "laif-ds";
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerClose,
+} from "laif-ds";
+import { Input } from "laif-ds";
+
+export function InteractiveDrawer() {
+  return (
+    <Drawer direction="bottom" modal shouldScaleBackground>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Apri Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Drawer di Esempio</DrawerTitle>
+          <DrawerDescription>
+            Personalizza contenuti e comportamento tramite le props.
+          </DrawerDescription>
+        </DrawerHeader>
+        <div className="space-y-4 p-4">
+          <Input label="Nome" placeholder="Inserisci il tuo nome" />
+          <Input
+            label="Email"
+            type="email"
+            placeholder="Inserisci la tua email"
+          />
+        </div>
+        <DrawerFooter>
+          <Button>Salva modifiche</Button>
+          <DrawerClose asChild>
+            <Button variant="outline">Annulla</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+```
+
+### With Snap Points
+
+```tsx
+import { Button } from "laif-ds";
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerClose,
+} from "laif-ds";
+
+export function DrawerWithSnapPoints() {
+  const snapPoints = [0.4, 0.6, 0.9];
+  return (
+    <Drawer snapPoints={snapPoints} activeSnapPoint={0}>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Drawer con Snap Points</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Drawer con Snap Points</DrawerTitle>
+          <DrawerDescription>
+            Snap a 40%, 60% e 90% dell'altezza.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button variant="outline">Chiudi</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Handle**: A grab handle is visible for bottom direction.
+- **Layout**: Use `DrawerHeader`/`DrawerFooter` and your own content in between.
+- **Styling**: Customize via `className` on `DrawerContent`.