@ceed/ads 1.30.0 → 1.31.0

package/dist/components/navigation/Breadcrumbs.md

@@ -65,9 +65,7 @@ function MyComponent() {
 }
 ```
 
-## Features
-
-### Basic Breadcrumbs
+## Basic Breadcrumbs
 
 A simple breadcrumb trail with a few levels of hierarchy. The last item uses `type: 'text'` to indicate the current page.
 
@@ -89,7 +87,7 @@ A simple breadcrumb trail with a few levels of hierarchy. The last item uses `ty
 />
 ```
 
-### Sizes
+## Breadcrumbs Sizes
 
 Breadcrumbs are available in three sizes -- `sm`, `md`, and `lg` -- allowing you to match the surrounding layout density.
 
@@ -101,7 +99,7 @@ Breadcrumbs are available in three sizes -- `sm`, `md`, and `lg` -- allowing you
 </div>
 ```
 
-### Custom Separator
+## Breadcrumbs Custom Separator
 
 The separator character between items can be customized via the `separator` prop. Common choices include `/`, `>`, and `-`.
 
@@ -150,7 +148,7 @@ The separator character between items can be customized via the `separator` prop
 </div>
 ```
 
-### Collapsed Breadcrumbs
+## Collapsed Breadcrumbs
 
 When paths are deep, the component automatically collapses middle items behind an ellipsis. You can control how many items appear at the start and end using `startCrumbCount` and `endCrumbCount`.
 
@@ -215,7 +213,7 @@ When paths are deep, the component automatically collapses middle items behind a
 </div>
 ```
 
-### Expanded View
+## Expanded Breadcrumbs
 
 Setting `collapsed={false}` renders every item in the path without collapsing.
 
@@ -253,7 +251,7 @@ Setting `collapsed={false}` renders every item in the path without collapsing.
 />
 ```
 
-### Single Crumb
+## Single Breadcrumb
 
 The component handles the edge case of a single breadcrumb item gracefully.
 
@@ -267,7 +265,7 @@ The component handles the edge case of a single breadcrumb item gracefully.
 />
 ```
 
-### With Icons
+## Breadcrumbs with Icons
 
 Breadcrumb items can include icons alongside their labels.
 
@@ -286,9 +284,7 @@ Breadcrumb items can include icons alongside their labels.
 }]} collapsed={false} />
 ```
 
-## Common Use Cases
-
-### Admin Dashboard Navigation
+## Breadcrumbs in Admin Dashboard
 
 ```tsx
 function UserDetailPage({ user }) {
@@ -307,7 +303,7 @@ function UserDetailPage({ user }) {
 }
 ```
 
-### E-commerce Product Page
+## Breadcrumbs for E-commerce Product Page
 
 ```tsx
 function ProductPage({ product, category, subcategory }) {
@@ -332,7 +328,7 @@ function ProductPage({ product, category, subcategory }) {
 }
 ```
 
-### Dynamic Breadcrumbs from Route
+## Dynamic Breadcrumbs from Route
 
 ```tsx
 function DynamicBreadcrumbs() {
@@ -352,6 +348,19 @@ function DynamicBreadcrumbs() {
 }
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop              | Type                                                             | Default                          | Description                                          |
+| ----------------- | ---------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------- |
+| `crumbs`          | `{ type: 'text' \| 'link'; label: string; linkHref?: string }[]` | (required)                       | Breadcrumb items                                     |
+| `collapsed`       | `boolean`                                                        | `true`                           | Whether long crumb lists are collapsed with ellipsis |
+| `startCrumbCount` | `number`                                                         | `1`                              | Number of crumbs shown at the start when collapsed   |
+| `endCrumbCount`   | `number`                                                         | `3`                              | Number of crumbs shown at the end when collapsed     |
+| `slots`           | `{ link?: ElementType }`                                         | -                                | Custom component for link crumbs                     |
+| `slotProps`       | `{ link?: { color?: string } }`                                  | `{ link: { color: 'neutral' } }` | Props passed to slot components                      |
+
 ## Best Practices
 
 - **Always start with a root item.** Begin the trail with "Home" or an equivalent top-level link so users can always navigate back to the starting point.

package/dist/components/navigation/Dropdown.md

@@ -52,9 +52,7 @@ Dropdown, Menu, MenuItem, MenuButton, and IconMenuButton form a **menu component
 | `Dropdown` + `MenuButton` + `Menu`   | Custom menu content (headers, dividers, mixed elements) |
 | `Dropdown` + custom trigger + `Menu` | Fully custom trigger elements                           |
 
-## Features
-
-### Basic Dropdown
+## Dropdown Basic
 
 The simplest Dropdown pairs a MenuButton trigger with a Menu of items.
 
@@ -82,7 +80,7 @@ The simplest Dropdown pairs a MenuButton trigger with a Menu of items.
 </Stack>
 ```
 
-### Button Variants
+## Dropdown Button Variants
 
 MenuButton supports `plain`, `outlined`, `soft`, and `solid` variants to match your design context.
 
@@ -122,7 +120,7 @@ MenuButton supports `plain`, `outlined`, `soft`, and `solid` variants to match y
 </Stack>
 ```
 
-### Button Colors
+## Dropdown Button Colors
 
 Apply semantic colors to the trigger button for different emphasis levels.
 
@@ -180,7 +178,7 @@ Apply semantic colors to the trigger button for different emphasis levels.
 </Stack>
 ```
 
-### Menu Placements
+## Dropdown Menu Placements
 
 Control where the menu appears relative to the trigger using the `placement` prop on Menu.
 
@@ -226,7 +224,7 @@ Control where the menu appears relative to the trigger using the `placement` pro
 </Stack>
 ```
 
-### With Icons
+## Dropdown with Icons
 
 Add icons to menu items and decorators to the trigger button for richer visual communication.
 
@@ -259,7 +257,7 @@ Add icons to menu items and decorators to the trigger button for richer visual c
 </Dropdown>
 ```
 
-### Actions Menu
+## Dropdown Actions Menu
 
 Build action menus for edit, delete, and other operations. Use `color="danger"` on destructive items.
 
@@ -290,7 +288,7 @@ Build action menus for edit, delete, and other operations. Use `color="danger"`
 </Dropdown>
 ```
 
-### Filter Menu
+## Dropdown Filter Menu
 
 Use Dropdown as an interactive filter selector with state management.
 
@@ -308,7 +306,7 @@ Use Dropdown as an interactive filter selector with state management.
 </Dropdown>
 ```
 
-### Profile Dropdown
+## Dropdown Profile
 
 Combine custom content (user info header) with standard menu items for profile menus.
 
@@ -360,7 +358,7 @@ Combine custom content (user info header) with standard menu items for profile m
 </Dropdown>
 ```
 
-### Nested Menus
+## Dropdown Nested Menus
 
 Place multiple Dropdown instances side by side to create menu bar patterns.
 
@@ -401,7 +399,7 @@ Place multiple Dropdown instances side by side to create menu bar patterns.
 </Stack>
 ```
 
-### Controlled Dropdown
+## Dropdown Controlled State
 
 Use the `open` and `onOpenChange` props to programmatically control the menu state.
 
@@ -426,7 +424,7 @@ Use the `open` and `onOpenChange` props to programmatically control the menu sta
 </Stack>
 ```
 
-### Disabled State
+## Dropdown Disabled State
 
 Disable the entire trigger button or individual menu items.
 
@@ -450,7 +448,7 @@ Disable the entire trigger button or individual menu items.
 </Stack>
 ```
 
-### Long Menu
+## Dropdown Long Menu
 
 Apply `maxHeight` and `overflow: 'auto'` to Menu for scrollable lists with many items.
 
@@ -470,7 +468,7 @@ Apply `maxHeight` and `overflow: 'auto'` to Menu for scrollable lists with many
 </Dropdown>
 ```
 
-### Custom Styling
+## Dropdown Custom Styling
 
 Customize borders, shadows, border-radius, and gradients through the `sx` prop.
 
@@ -527,9 +525,7 @@ Customize borders, shadows, border-radius, and gradients through the `sx` prop.
 </Stack>
 ```
 
-## Common Use Cases
-
-### Navigation Menu
+## Navigation Menu
 
 ```tsx
 <Dropdown>
@@ -544,7 +540,7 @@ Customize borders, shadows, border-radius, and gradients through the `sx` prop.
 </Dropdown>
 ```
 
-### Filter Selector
+## Filter Selector
 
 ```tsx
 const [filter, setFilter] = useState('All');
@@ -565,7 +561,7 @@ const [filter, setFilter] = useState('All');
 </Dropdown>
 ```
 
-### Controlled State with External Toggle
+## Controlled State with External Toggle
 
 ```tsx
 const [open, setOpen] = useState(false);
@@ -583,6 +579,19 @@ const [open, setOpen] = useState(false);
 </Button>
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop           | Type                             | Default | Description                          |
+| -------------- | -------------------------------- | ------- | ------------------------------------ |
+| `children`     | `ReactNode`                      | -       | Dropdown content (MenuButton + Menu) |
+| `open`         | `boolean`                        | -       | Controlled open state                |
+| `defaultOpen`  | `boolean`                        | `false` | Initial open state (uncontrolled)    |
+| `onOpenChange` | `(event, open: boolean) => void` | -       | Callback when open state changes     |
+
+> **Note**: Dropdown accepts all Joy UI Dropdown props. It is a state management wrapper — style props go on Menu and MenuButton.
+
 ## Best Practices
 
 - **Use the right abstraction level.** If you only need a simple list of text items, prefer `MenuButton` or `IconMenuButton` standalone components. Use `Dropdown` + `Menu` when you need dividers, custom headers, or mixed content inside the menu.

package/dist/components/navigation/IconMenuButton.md

@@ -50,9 +50,7 @@ function RowActions({ onEdit, onDelete }) {
 }
 ```
 
-## Features
-
-### Standalone
+## IconMenuButton Standalone
 
 Icon button rendered without dropdown menu functionality, useful as a custom link trigger.
 
@@ -75,7 +73,7 @@ Icon button rendered without dropdown menu functionality, useful as a custom lin
 />
 ```
 
-### Placement: Bottom Start
+## IconMenuButton Placement Bottom Start
 
 Menu aligns to the left edge of the icon button.
 
@@ -98,7 +96,7 @@ Menu aligns to the left edge of the icon button.
 />
 ```
 
-### Placement: Bottom
+## IconMenuButton Placement Bottom
 
 Menu centers below the icon button.
 
@@ -121,7 +119,7 @@ Menu centers below the icon button.
 />
 ```
 
-### Placement: Bottom End
+## IconMenuButton Placement Bottom End
 
 Menu aligns to the right edge of the icon button. Recommended when the button is positioned on the right side of a container to prevent the menu from overflowing the viewport.
 
@@ -144,9 +142,7 @@ Menu aligns to the right edge of the icon button. Recommended when the button is
 />
 ```
 
-## Common Use Cases
-
-### Table Row Actions
+## IconMenuButton for Table Row Actions
 
 ```tsx
 function DataTableRow({ row, onEdit, onDelete, onDuplicate }) {
@@ -173,7 +169,7 @@ function DataTableRow({ row, onEdit, onDelete, onDuplicate }) {
 }
 ```
 
-### Card Actions
+## IconMenuButton for Card Actions
 
 ```tsx
 function ProductCard({ product, onAction }) {
@@ -200,7 +196,7 @@ function ProductCard({ product, onAction }) {
 }
 ```
 
-### Toolbar Overflow
+## IconMenuButton for Toolbar Overflow
 
 ```tsx
 function EditorToolbar({ onAction }) {
@@ -225,6 +221,23 @@ function EditorToolbar({ onAction }) {
 }
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop                   | Type                                                                   | Default     | Description                                  |
+| ---------------------- | ---------------------------------------------------------------------- | ----------- | -------------------------------------------- |
+| `icon`                 | `ReactNode`                                                            | (required)  | Icon element to render in the trigger button |
+| `items`                | `{ text: string; component?: ElementType; componentProps?: object }[]` | -           | Menu items                                   |
+| `size`                 | `'sm' \| 'md' \| 'lg'`                                                 | `'md'`      | Button size                                  |
+| `color`                | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'`         | `'neutral'` | Button color                                 |
+| `variant`              | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                           | `'plain'`   | Button visual style                          |
+| `disabled`             | `boolean`                                                              | `false`     | Disables the button                          |
+| `loading`              | `boolean`                                                              | `false`     | Shows loading indicator                      |
+| `placement`            | `Placement`                                                            | `'bottom'`  | Menu position                                |
+| `buttonComponent`      | `ElementType`                                                          | -           | Custom trigger element                       |
+| `buttonComponentProps` | `object`                                                               | -           | Props passed to custom trigger               |
+
 ## Best Practices
 
 - **Always provide `aria-label`.** Since IconMenuButton has no visible text, screen readers rely entirely on the `aria-label` to announce the button's purpose. Include context when possible.

package/dist/components/navigation/InsetDrawer.md

@@ -435,9 +435,7 @@ Booking options
 </Box>
 ```
 
-## Common Use Cases
-
-### Settings Drawer
+## Settings Drawer
 
 ```tsx
 function SettingsDrawer({ open, onClose }) {
@@ -487,7 +485,7 @@ function SettingsDrawer({ open, onClose }) {
 }
 ```
 
-### Detail View Drawer
+## Detail View Drawer
 
 ```tsx
 function DetailDrawer({ open, onClose, itemId }) {
@@ -515,7 +513,7 @@ function DetailDrawer({ open, onClose, itemId }) {
 }
 ```
 
-### Bottom Sheet for Mobile Actions
+## Bottom Sheet for Mobile Actions
 
 ```tsx
 function ActionSheet({ open, onClose, onAction }) {
@@ -550,6 +548,19 @@ function ActionSheet({ open, onClose, onAction }) {
 }
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop       | Type                                                           | Default     | Description    |
+| ---------- | -------------------------------------------------------------- | ----------- | -------------- |
+| `children` | `ReactNode`                                                    | -           | Drawer content |
+| `variant`  | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'plain'`   | Visual style   |
+| `color`    | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme   |
+| `sx`       | `SxProps`                                                      | -           | Custom styles  |
+
+> **Note**: InsetDrawer is a styled Sheet component designed for sidebar layouts. It accepts all Joy UI Sheet props.
+
 ## Best Practices
 
 1. **Use appropriate anchor positions**: Match the drawer position to the content type for intuitive UX.

package/dist/components/navigation/Link.md

@@ -43,9 +43,7 @@ function MyComponent() {
 }
 ```
 
-## Features
-
-### Variants
+## Link Variants
 
 Links support four visual styles through the `variant` prop: `plain`, `outlined`, `soft`, and `solid`.
 
@@ -70,7 +68,7 @@ Links support four visual styles through the `variant` prop: `plain`, `outlined`
 </div>
 ```
 
-### Colors
+## Link Colors
 
 Apply semantic colors to communicate different purposes -- `primary`, `neutral`, `success`, `warning`, and `danger`.
 
@@ -98,7 +96,7 @@ Apply semantic colors to communicate different purposes -- `primary`, `neutral`,
 </div>
 ```
 
-### Underline Styles
+## Link Underline Styles
 
 Control the underline behavior with three options: `none` (never shown), `hover` (shown on hover), and `always` (permanently visible).
 
@@ -120,7 +118,7 @@ Control the underline behavior with three options: `none` (never shown), `hover`
 </div>
 ```
 
-### Typography Levels
+## Link Typography Levels
 
 Links can adopt any typography level from the design system, enabling consistent text hierarchies when links appear alongside headings or body text.
 
@@ -158,7 +156,7 @@ Links can adopt any typography level from the design system, enabling consistent
 </div>
 ```
 
-### Disabled State
+## Disabled Link
 
 Links can be disabled to prevent interaction while remaining visible in the layout.
 
@@ -171,7 +169,7 @@ Links can be disabled to prevent interaction while remaining visible in the layo
 />
 ```
 
-### External Links
+## External Links
 
 For links that navigate away from your application, include `target="_blank"` and `rel="noopener noreferrer"` for security.
 
@@ -181,7 +179,7 @@ For links that navigate away from your application, include `target="_blank"` an
 </Link>
 ```
 
-### Inline with Text
+## Link Inline with Text
 
 Links integrate seamlessly within paragraph text, inheriting the surrounding font styles.
 
@@ -193,9 +191,7 @@ This is a paragraph with an <Link href="#">inline link</Link> that flows natural
 </p>
 ```
 
-## Common Use Cases
-
-### Inline Text Links
+## Inline Text Links
 
 ```tsx
 function ArticleContent() {
@@ -209,7 +205,7 @@ function ArticleContent() {
 }
 ```
 
-### Footer Navigation
+## Footer Navigation Links
 
 ```tsx
 function FooterLinks() {
@@ -229,7 +225,7 @@ function FooterLinks() {
 }
 ```
 
-### Router Integration
+## Link Router Integration
 
 ```tsx
 import { Link as RouterLink } from 'react-router-dom';
@@ -243,6 +239,26 @@ function AppNavigation() {
 }
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop             | Type                                                           | Default     | Description                            |
+| ---------------- | -------------------------------------------------------------- | ----------- | -------------------------------------- |
+| `children`       | `ReactNode`                                                    | -           | Link content                           |
+| `href`           | `string`                                                       | -           | Link URL                               |
+| `level`          | Typography level                                               | `'body-md'` | Text size (inherits Typography levels) |
+| `color`          | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'primary'` | Link color                             |
+| `variant`        | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | -           | Visual style                           |
+| `underline`      | `'none' \| 'hover' \| 'always'`                                | `'hover'`   | Underline behavior                     |
+| `disabled`       | `boolean`                                                      | `false`     | Disables the link                      |
+| `startDecorator` | `ReactNode`                                                    | -           | Content before link text               |
+| `endDecorator`   | `ReactNode`                                                    | -           | Content after link text                |
+| `component`      | `ElementType`                                                  | `'a'`       | Root element type (polymorphic)        |
+| `sx`             | `SxProps`                                                      | -           | Custom styles                          |
+
+> **Note**: Link also accepts all Joy UI Link props.
+
 ## Best Practices
 
 - **Use descriptive link text.** The text should clearly communicate the destination. Avoid generic labels such as "click here" or "read more".