xertica-ui 2.2.0 → 2.3.0

package/docs/components/dropdown-menu.md

@@ -1,127 +1,127 @@
-# DropdownMenu
-
-## Overview
-
-A triggered contextual menu that appears anchored below (or beside) a trigger element. Used for row actions in tables, secondary navigation options, and grouped control menus. Built on Radix UI with full keyboard navigation.
-
----
-
-## When to Use
-
-- Row-level action menus in tables (`MoreHorizontal` icon trigger)
-- User profile menus in the Header
-- Grouped options that don't warrant a full dialog
-
-## When NOT to Use
-
-- Select-one-from-list inputs — use `<Select>` instead.
-- Right-click menus — use `<ContextMenu>` instead.
-- Top-level application navigation — use `<NavigationMenu>` or `<Sidebar>`.
-
----
-
-## Anatomy
-
-```
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button />
-  </DropdownMenuTrigger>
-  <DropdownMenuContent>
-    <DropdownMenuLabel />
-    <DropdownMenuSeparator />
-    <DropdownMenuItem />
-    <DropdownMenuSub>
-      <DropdownMenuSubTrigger />
-      <DropdownMenuSubContent>
-        <DropdownMenuItem />
-      </DropdownMenuSubContent>
-    </DropdownMenuSub>
-  </DropdownMenuContent>
-</DropdownMenu>
-```
-
----
-
-## Props
-
-### DropdownMenu
-
-| Prop           | Type                      | Description           |
-| -------------- | ------------------------- | --------------------- |
-| `open`         | `boolean`                 | Controlled open state |
-| `onOpenChange` | `(open: boolean) => void` | State handler         |
-
-### DropdownMenuContent
-
-| Prop         | Type                           | Default   | Description                     |
-| ------------ | ------------------------------ | --------- | ------------------------------- |
-| `align`      | `'start' \| 'center' \| 'end'` | `'start'` | Horizontal alignment to trigger |
-| `sideOffset` | `number`                       | `4`       | Vertical offset from trigger    |
-| `className`  | `string`                       | —         | Width and style overrides       |
-
-### DropdownMenuItem
-
-| Prop        | Type         | Description                                                  |
-| ----------- | ------------ | ------------------------------------------------------------ |
-| `onClick`   | `() => void` | Action handler                                               |
-| `className` | `string`     | Additional classes (use `text-destructive` for danger items) |
-| `disabled`  | `boolean`    | Disables the item                                            |
-
----
-
-## Examples
-
-### Table Row Actions
-
-```tsx
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  Button,
-} from 'xertica-ui/ui';
-import { MoreHorizontal } from 'lucide-react';
-
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button variant="ghost" size="icon" className="size-8">
-      <MoreHorizontal className="size-4" />
-    </Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent align="end">
-    <DropdownMenuLabel>Actions</DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem onClick={() => handleEdit(record)}>Edit</DropdownMenuItem>
-    <DropdownMenuItem onClick={() => handleDuplicate(record)}>Duplicate</DropdownMenuItem>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem
-      className="text-destructive focus:text-destructive"
-      onClick={() => handleDelete(record)}
-    >
-      Delete
-    </DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>;
-```
-
----
-
-## AI Rules
-
-- **Always** use `<DropdownMenuTrigger asChild>` — never without `asChild` when the trigger is a `<Button>`.
-- **Destructive menu items** (Delete, Revoke, Disable) must use `className="text-destructive focus:text-destructive"`.
-- When a destructive item is clicked, it should open an `<AlertDialog>` — never execute the action directly.
-- Use `<DropdownMenuSeparator>` to visually group items. Destructive items are always separated from safe items.
-- `align="end"` is standard for table row menus (aligns to the right side of the trigger button).
-
----
-
-## Related Components
-
-- [`ContextMenu`](./context-menu.md) — Right-click variant
-- [`AlertDialog`](./alert-dialog.md) — For destructive confirmations from menu items
-- [`Button`](./button.md) — The trigger element
+# DropdownMenu
+
+## Overview
+
+A triggered contextual menu that appears anchored below (or beside) a trigger element. Used for row actions in tables, secondary navigation options, and grouped control menus. Built on Radix UI with full keyboard navigation.
+
+---
+
+## When to Use
+
+- Row-level action menus in tables (`MoreHorizontal` icon trigger)
+- User profile menus in the Header
+- Grouped options that don't warrant a full dialog
+
+## When NOT to Use
+
+- Select-one-from-list inputs — use `<Select>` instead.
+- Right-click menus — use `<ContextMenu>` instead.
+- Top-level application navigation — use `<NavigationMenu>` or `<Sidebar>`.
+
+---
+
+## Anatomy
+
+```
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button />
+  </DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuLabel />
+    <DropdownMenuSeparator />
+    <DropdownMenuItem />
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger />
+      <DropdownMenuSubContent>
+        <DropdownMenuItem />
+      </DropdownMenuSubContent>
+    </DropdownMenuSub>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+---
+
+## Props
+
+### DropdownMenu
+
+| Prop           | Type                      | Description           |
+| -------------- | ------------------------- | --------------------- |
+| `open`         | `boolean`                 | Controlled open state |
+| `onOpenChange` | `(open: boolean) => void` | State handler         |
+
+### DropdownMenuContent
+
+| Prop         | Type                           | Default   | Description                     |
+| ------------ | ------------------------------ | --------- | ------------------------------- |
+| `align`      | `'start' \| 'center' \| 'end'` | `'start'` | Horizontal alignment to trigger |
+| `sideOffset` | `number`                       | `4`       | Vertical offset from trigger    |
+| `className`  | `string`                       | —         | Width and style overrides       |
+
+### DropdownMenuItem
+
+| Prop        | Type         | Description                                                  |
+| ----------- | ------------ | ------------------------------------------------------------ |
+| `onClick`   | `() => void` | Action handler                                               |
+| `className` | `string`     | Additional classes (use `text-destructive` for danger items) |
+| `disabled`  | `boolean`    | Disables the item                                            |
+
+---
+
+## Examples
+
+### Table Row Actions
+
+```tsx
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Button,
+} from 'xertica-ui/ui';
+import { MoreHorizontal } from 'lucide-react';
+
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="ghost" size="icon" className="size-8">
+      <MoreHorizontal className="size-4" />
+    </Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent align="end">
+    <DropdownMenuLabel>Actions</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem onClick={() => handleEdit(record)}>Edit</DropdownMenuItem>
+    <DropdownMenuItem onClick={() => handleDuplicate(record)}>Duplicate</DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem
+      className="text-destructive focus:text-destructive"
+      onClick={() => handleDelete(record)}
+    >
+      Delete
+    </DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>;
+```
+
+---
+
+## AI Rules
+
+- **Always** use `<DropdownMenuTrigger asChild>` — never without `asChild` when the trigger is a `<Button>`.
+- **Destructive menu items** (Delete, Revoke, Disable) must use `className="text-destructive focus:text-destructive"`.
+- When a destructive item is clicked, it should open an `<AlertDialog>` — never execute the action directly.
+- Use `<DropdownMenuSeparator>` to visually group items. Destructive items are always separated from safe items.
+- `align="end"` is standard for table row menus (aligns to the right side of the trigger button).
+
+---
+
+## Related Components
+
+- [`ContextMenu`](./context-menu.md) — Right-click variant
+- [`AlertDialog`](./alert-dialog.md) — For destructive confirmations from menu items
+- [`Button`](./button.md) — The trigger element

package/docs/components/empty.md

@@ -1,127 +1,127 @@
-# Empty
-
-## Overview
-
-A structured zero-state container rendered when a list, table, or search returns no results. Uses a composable primitive pattern (`Empty + EmptyIcon + EmptyTitle + EmptyDescription + EmptyAction`) to provide a flexible, consistent empty-state experience.
-
----
-
-## When to Use
-
-- A table or list with zero records
-- A search query that returns no results
-- A page section with no data yet ("No projects created yet")
-
-## When NOT to Use
-
-- Loading states — use `<Skeleton>` while fetching.
-- Error states — use `<Alert variant="destructive">` when a fetch fails.
-
----
-
-## Anatomy
-
-```
-<Empty>
-  <EmptyIcon>
-    <SearchX className="size-10 text-muted-foreground" />
-  </EmptyIcon>
-  <EmptyTitle>No results found</EmptyTitle>
-  <EmptyDescription>Try adjusting your search or filters.</EmptyDescription>
-  <EmptyAction>
-    <Button>Clear filters</Button>
-  </EmptyAction>
-</Empty>
-```
-
----
-
-## Sub-Components
-
-| Component          | Description                                                                    |
-| ------------------ | ------------------------------------------------------------------------------ |
-| `Empty`            | Root container with dashed border, centered flex layout, and fade-in animation |
-| `EmptyIcon`        | Circular muted-background icon container                                       |
-| `EmptyImage`       | Optional image element with muted opacity                                      |
-| `EmptyTitle`       | Main heading (`<h3>`) with semibold foreground text                            |
-| `EmptyDescription` | Muted supplementary text (`<p>`)                                               |
-| `EmptyAction`      | CTA button area — renders as flex row on desktop, stacked on mobile            |
-
-All sub-components accept `className` and forward all HTML div/p/h3 attributes.
-
----
-
-## Examples
-
-### Standard No-Data Empty State
-
-```tsx
-import { Empty, EmptyIcon, EmptyTitle, EmptyDescription, EmptyAction, Button } from 'xertica-ui/ui';
-import { Users } from 'lucide-react';
-
-<Empty>
-  <EmptyIcon>
-    <Users className="size-10 text-muted-foreground" />
-  </EmptyIcon>
-  <EmptyTitle>No members yet</EmptyTitle>
-  <EmptyDescription>Get started by adding your first team member.</EmptyDescription>
-  <EmptyAction>
-    <Button onClick={() => setDialogOpen(true)}>Add Member</Button>
-  </EmptyAction>
-</Empty>;
-```
-
-### Empty Search Results
-
-```tsx
-import { SearchX } from 'lucide-react';
-
-<Empty>
-  <EmptyIcon>
-    <SearchX className="size-10 text-muted-foreground" />
-  </EmptyIcon>
-  <EmptyTitle>No results found</EmptyTitle>
-  <EmptyDescription>
-    No records matching "{searchQuery}". Try a different search term.
-  </EmptyDescription>
-</Empty>;
-```
-
-### In Table Body
-
-```tsx
-<TableBody>
-  {records.length === 0 ? (
-    <TableRow>
-      <TableCell colSpan={5} className="h-48 p-0">
-        <Empty>
-          <EmptyIcon>
-            <FileX className="size-8 text-muted-foreground" />
-          </EmptyIcon>
-          <EmptyTitle>No records found</EmptyTitle>
-        </Empty>
-      </TableCell>
-    </TableRow>
-  ) : (
-    records.map(r => <RecordRow key={r.id} record={r} />)
-  )}
-</TableBody>
-```
-
----
-
-## AI Rules
-
-- **Always use the composable sub-component pattern** — `Empty > EmptyIcon > EmptyTitle`. Do not pass flat props like `title=""` or `icon={}`.
-- Icons inside `<EmptyIcon>` always use `className="size-10 text-muted-foreground"` (or `size-8` for compact table contexts).
-- `<EmptyAction>` is optional — only include it when there is a clear next action for the user.
-- When used inside a table, wrap it in `<TableCell colSpan={totalColumns}>` to span the full table width.
-- `Empty` renders with `min-h-[400px]` — in compact table rows, override with `className="min-h-[200px]"`.
-
----
-
-## Related Components
-
-- [`Skeleton`](./skeleton.md) — Loading state before data arrives
-- [`Alert`](./alert.md) — Error state when fetching fails
-- [`Table`](./table.md) — Primary context for empty states
+# Empty
+
+## Overview
+
+A structured zero-state container rendered when a list, table, or search returns no results. Uses a composable primitive pattern (`Empty + EmptyIcon + EmptyTitle + EmptyDescription + EmptyAction`) to provide a flexible, consistent empty-state experience.
+
+---
+
+## When to Use
+
+- A table or list with zero records
+- A search query that returns no results
+- A page section with no data yet ("No projects created yet")
+
+## When NOT to Use
+
+- Loading states — use `<Skeleton>` while fetching.
+- Error states — use `<Alert variant="destructive">` when a fetch fails.
+
+---
+
+## Anatomy
+
+```
+<Empty>
+  <EmptyIcon>
+    <SearchX className="size-10 text-muted-foreground" />
+  </EmptyIcon>
+  <EmptyTitle>No results found</EmptyTitle>
+  <EmptyDescription>Try adjusting your search or filters.</EmptyDescription>
+  <EmptyAction>
+    <Button>Clear filters</Button>
+  </EmptyAction>
+</Empty>
+```
+
+---
+
+## Sub-Components
+
+| Component          | Description                                                                    |
+| ------------------ | ------------------------------------------------------------------------------ |
+| `Empty`            | Root container with dashed border, centered flex layout, and fade-in animation |
+| `EmptyIcon`        | Circular muted-background icon container                                       |
+| `EmptyImage`       | Optional image element with muted opacity                                      |
+| `EmptyTitle`       | Main heading (`<h3>`) with semibold foreground text                            |
+| `EmptyDescription` | Muted supplementary text (`<p>`)                                               |
+| `EmptyAction`      | CTA button area — renders as flex row on desktop, stacked on mobile            |
+
+All sub-components accept `className` and forward all HTML div/p/h3 attributes.
+
+---
+
+## Examples
+
+### Standard No-Data Empty State
+
+```tsx
+import { Empty, EmptyIcon, EmptyTitle, EmptyDescription, EmptyAction, Button } from 'xertica-ui/ui';
+import { Users } from 'lucide-react';
+
+<Empty>
+  <EmptyIcon>
+    <Users className="size-10 text-muted-foreground" />
+  </EmptyIcon>
+  <EmptyTitle>No members yet</EmptyTitle>
+  <EmptyDescription>Get started by adding your first team member.</EmptyDescription>
+  <EmptyAction>
+    <Button onClick={() => setDialogOpen(true)}>Add Member</Button>
+  </EmptyAction>
+</Empty>;
+```
+
+### Empty Search Results
+
+```tsx
+import { SearchX } from 'lucide-react';
+
+<Empty>
+  <EmptyIcon>
+    <SearchX className="size-10 text-muted-foreground" />
+  </EmptyIcon>
+  <EmptyTitle>No results found</EmptyTitle>
+  <EmptyDescription>
+    No records matching "{searchQuery}". Try a different search term.
+  </EmptyDescription>
+</Empty>;
+```
+
+### In Table Body
+
+```tsx
+<TableBody>
+  {records.length === 0 ? (
+    <TableRow>
+      <TableCell colSpan={5} className="h-48 p-0">
+        <Empty>
+          <EmptyIcon>
+            <FileX className="size-8 text-muted-foreground" />
+          </EmptyIcon>
+          <EmptyTitle>No records found</EmptyTitle>
+        </Empty>
+      </TableCell>
+    </TableRow>
+  ) : (
+    records.map(r => <RecordRow key={r.id} record={r} />)
+  )}
+</TableBody>
+```
+
+---
+
+## AI Rules
+
+- **Always use the composable sub-component pattern** — `Empty > EmptyIcon > EmptyTitle`. Do not pass flat props like `title=""` or `icon={}`.
+- Icons inside `<EmptyIcon>` always use `className="size-10 text-muted-foreground"` (or `size-8` for compact table contexts).
+- `<EmptyAction>` is optional — only include it when there is a clear next action for the user.
+- When used inside a table, wrap it in `<TableCell colSpan={totalColumns}>` to span the full table width.
+- `Empty` renders with `min-h-[400px]` — in compact table rows, override with `className="min-h-[200px]"`.
+
+---
+
+## Related Components
+
+- [`Skeleton`](./skeleton.md) — Loading state before data arrives
+- [`Alert`](./alert.md) — Error state when fetching fails
+- [`Table`](./table.md) — Primary context for empty states