@ceed/ads 1.30.0 → 1.30.1

package/dist/components/navigation/Menu.md

@@ -57,9 +57,7 @@ Dropdown          -- state container (open/close)
 
 See the [Dropdown](?path=/docs/components-navigation-dropdown--docs) documentation for guidance on when to use the composition pattern versus the standalone MenuButton/IconMenuButton components.
 
-## Features
-
-### Basic Menu
+## Menu Basic
 
 A standard menu with simple text items, optionally separated by dividers.
 
@@ -90,7 +88,7 @@ A standard menu with simple text items, optionally separated by dividers.
 </Stack>
 ```
 
-### Menu Sizes
+## Menu Sizes
 
 Menu supports `sm`, `md`, and `lg` sizes that affect the padding and font size of all items.
 
@@ -131,7 +129,7 @@ Menu supports `sm`, `md`, and `lg` sizes that affect the padding and font size o
 </Stack>
 ```
 
-### MenuItem States
+## Menu Item States
 
 MenuItems can be `selected`, `disabled`, or colored with semantic colors like `primary`, `danger`, `success`, and `warning`.
 
@@ -150,7 +148,7 @@ MenuItems can be `selected`, `disabled`, or colored with semantic colors like `p
 </Dropdown>
 ```
 
-### MenuItem with Icons
+## Menu Items with Icons
 
 Add icons before item text to improve scannability. Use consistent icon sizing with `sx={{ mr: 1.5, fontSize: 'lg' }}`.
 
@@ -193,7 +191,7 @@ Add icons before item text to improve scannability. Use consistent icon sizing w
 </Dropdown>
 ```
 
-### Actions Menu
+## Menu Actions
 
 Build action menus for CRUD operations. Use `color="danger"` to highlight destructive actions.
 
@@ -236,7 +234,7 @@ Build action menus for CRUD operations. Use `color="danger"` to highlight destru
 </Dropdown>
 ```
 
-### Clickable Menu Items
+## Menu Clickable Items
 
 Attach `onClick` handlers to menu items to respond to user selections.
 
@@ -255,7 +253,7 @@ Attach `onClick` handlers to menu items to respond to user selections.
 </Stack>
 ```
 
-### Menu as Links
+## Menu Links
 
 Use the `component="a"` prop on MenuItem to render items as anchor links for navigation.
 
@@ -279,7 +277,7 @@ Use the `component="a"` prop on MenuItem to render items as anchor links for nav
 </Dropdown>
 ```
 
-### Profile Menu
+## Menu Profile
 
 Combine custom Box content (user info header) with standard MenuItem entries for rich profile menus.
 
@@ -349,7 +347,7 @@ Combine custom Box content (user info header) with standard MenuItem entries for
 </Dropdown>
 ```
 
-### Menu Placements
+## Menu Placements
 
 Control the position of the menu panel relative to the trigger using the `placement` prop. Supported values include `top-start`, `top`, `top-end`, `bottom-start`, `bottom`, and `bottom-end`.
 
@@ -418,7 +416,7 @@ Control the position of the menu panel relative to the trigger using the `placem
 </Stack>
 ```
 
-### Long Scrollable Menu
+## Menu Scrollable
 
 For menus with many items, apply `maxHeight` and `overflow: 'auto'` through the `sx` prop.
 
@@ -436,7 +434,7 @@ For menus with many items, apply `maxHeight` and `overflow: 'auto'` through the
 </Dropdown>
 ```
 
-### Custom Styled Menu
+## Menu Custom Styling
 
 Customize the menu panel appearance with border-radius, shadows, borders, and custom item spacing.
 
@@ -500,7 +498,7 @@ Customize the menu panel appearance with border-radius, shadows, borders, and cu
 </Stack>
 ```
 
-### Menu in Card
+## Menu in Card
 
 Embed a Dropdown menu inside cards or other container components for contextual actions.
 
@@ -560,7 +558,7 @@ Embed a Dropdown menu inside cards or other container components for contextual
 </Sheet>
 ```
 
-### Nested Content
+## Menu Nested Content
 
 Menu can contain non-MenuItem elements like Box, Typography, and progress indicators alongside standard items.
 
@@ -646,9 +644,7 @@ Menu can contain non-MenuItem elements like Box, Typography, and progress indica
 </Dropdown>
 ```
 
-## Common Use Cases
-
-### Action Menu with Icons
+## Action Menu with Icons
 
 ```tsx
 <Dropdown>
@@ -671,7 +667,7 @@ Menu can contain non-MenuItem elements like Box, Typography, and progress indica
 </Dropdown>
 ```
 
-### Navigation Menu
+## Navigation Menu
 
 ```tsx
 <Dropdown>
@@ -686,7 +682,7 @@ Menu can contain non-MenuItem elements like Box, Typography, and progress indica
 </Dropdown>
 ```
 
-### User Profile Menu
+## User Profile Menu
 
 ```tsx
 <Dropdown>
@@ -719,6 +715,23 @@ Menu can contain non-MenuItem elements like Box, Typography, and progress indica
 </Dropdown>
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop        | Type                                                           | Default          | Description                              |
+| ----------- | -------------------------------------------------------------- | ---------------- | ---------------------------------------- |
+| `children`  | `ReactNode`                                                    | -                | Menu items (MenuItem, ListDivider, etc.) |
+| `open`      | `boolean`                                                      | -                | Controlled open state                    |
+| `onClose`   | `() => void`                                                   | -                | Callback when the menu closes            |
+| `placement` | `Placement`                                                    | `'bottom-start'` | Menu position relative to trigger        |
+| `size`      | `'sm' \| 'md' \| 'lg'`                                         | `'md'`           | Menu size                                |
+| `variant`   | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'outlined'`     | Visual style                             |
+| `color`     | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'`      | Color scheme                             |
+| `sx`        | `SxProps`                                                      | -                | Custom styles                            |
+
+> **Note**: Menu also accepts all Joy UI Menu props and Framer Motion props.
+
 ## Best Practices
 
 - **Use ListDivider to group related items.** Logical grouping helps users scan the menu faster. Place destructive actions (like Delete) in their own group at the bottom.

package/dist/components/navigation/MenuButton.md

@@ -61,9 +61,7 @@ function UserMenu() {
 | **IconMenuButton**  | Icon button | Simple item list | Space is limited (tables, cards, toolbars)                   |
 | **Dropdown + Menu** | Any element | Rich content     | You need dividers, headers, icons in items, or custom layout |
 
-## Features
-
-### Standalone (Without Dropdown Icon)
+## Standalone MenuButton Without Dropdown Icon
 
 Use `showIcon={false}` and a custom `buttonComponent` to render MenuButton as a standalone navigation link without the dropdown indicator.
 
@@ -87,7 +85,7 @@ Use `showIcon={false}` and a custom `buttonComponent` to render MenuButton as a
 />
 ```
 
-### With End Decorator
+## MenuButton with End Decorator
 
 Add badges, chips, or icons after the button text using `endDecorator`.
 
@@ -108,7 +106,7 @@ Add badges, chips, or icons after the button text using `endDecorator`.
 />
 ```
 
-### Placement: Bottom Start
+## MenuButton Placement Bottom Start
 
 Menu aligns to the left edge of the trigger button.
 
@@ -129,7 +127,7 @@ Menu aligns to the left edge of the trigger button.
 />
 ```
 
-### Placement: Bottom
+## MenuButton Placement Bottom
 
 Menu centers below the trigger button.
 
@@ -150,7 +148,7 @@ Menu centers below the trigger button.
 />
 ```
 
-### Placement: Bottom End
+## MenuButton Placement Bottom End
 
 Menu aligns to the right edge of the trigger button.
 
@@ -171,9 +169,7 @@ Menu aligns to the right edge of the trigger button.
 />
 ```
 
-## Common Use Cases
-
-### User Account Menu
+## User Account Menu
 
 ```tsx
 function AccountMenu({ user, onLogout }) {
@@ -193,7 +189,7 @@ function AccountMenu({ user, onLogout }) {
 }
 ```
 
-### Export Options
+## Export Options Menu
 
 ```tsx
 function ExportMenu({ onExport }) {
@@ -212,7 +208,7 @@ function ExportMenu({ onExport }) {
 }
 ```
 
-### Toolbar Actions
+## Toolbar Actions Menu
 
 ```tsx
 function ToolbarActions({ selectedItems, onAction }) {
@@ -233,6 +229,24 @@ function ToolbarActions({ selectedItems, onAction }) {
 }
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop              | Type                                                           | Default          | Description                          |
+| ----------------- | -------------------------------------------------------------- | ---------------- | ------------------------------------ |
+| `buttonText`      | `string`                                                       | (required)       | Text displayed in the trigger button |
+| `items`           | `{ text: string; onClick?: () => void }[]`                     | (required)       | Menu item list                       |
+| `variant`         | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'outlined'`     | Button visual style                  |
+| `size`            | `'sm' \| 'md' \| 'lg'`                                         | `'md'`           | Button size                          |
+| `color`           | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'`      | Button color                         |
+| `disabled`        | `boolean`                                                      | `false`          | Disables the button                  |
+| `startDecorator`  | `ReactNode`                                                    | -                | Content before button text           |
+| `endDecorator`    | `ReactNode`                                                    | -                | Content after button text            |
+| `showIcon`        | `boolean`                                                      | `true`           | Show dropdown arrow icon             |
+| `placement`       | `Placement`                                                    | `'bottom-start'` | Menu position                        |
+| `buttonComponent` | `ElementType`                                                  | -                | Custom trigger element               |
+
 ## Best Practices
 
 - **Use descriptive button text.** The button label should clearly indicate what kind of options the menu contains. Avoid vague labels like "More" or "Options" -- prefer specific labels like "Export Options" or "User Actions".

package/dist/components/navigation/NavigationGroup.md

@@ -32,9 +32,7 @@ function Sidebar() {
 }
 ```
 
-## Examples
-
-### Default
+## NavigationGroup Default
 
 Basic navigation group with a title and content.
 
@@ -42,7 +40,7 @@ Basic navigation group with a title and content.
 // Unable to derive source for Default
 ```
 
-### Nesting Levels
+## NavigationGroup Nesting Levels
 
 NavigationGroup supports different indentation levels for nested hierarchies.
 
@@ -54,7 +52,7 @@ NavigationGroup supports different indentation levels for nested hierarchies.
 // Unable to derive source for Level2
 ```
 
-### With Start Decorator
+## NavigationGroup with Start Decorator
 
 Add an icon before the group title.
 
@@ -62,7 +60,7 @@ Add an icon before the group title.
 // Unable to derive source for WithStartDecorator
 ```
 
-### Levels with Icons
+## NavigationGroup Levels with Icons
 
 Icons work at any nesting level.
 
@@ -92,9 +90,7 @@ Icons work at any nesting level.
 - **Modal dialogs**: Use proper modal patterns instead
 - **Accordion content**: For non-navigation accordions, use Accordion directly
 
-## Common Use Cases
-
-### Admin Module Navigation
+## Admin Module Navigation with NavigationGroup
 
 ```tsx
 function AdminNavigation() {
@@ -150,7 +146,7 @@ function AdminNavigation() {
 }
 ```
 
-### Nested Groups
+## Nested NavigationGroups
 
 ```tsx
 function NestedNavigation() {
@@ -199,7 +195,7 @@ function NestedNavigation() {
 }
 ```
 
-### Documentation Sidebar
+## Documentation Sidebar with NavigationGroup
 
 ```tsx
 function DocsSidebar({ sections, currentPath }) {

package/dist/components/navigation/NavigationItem.md

@@ -31,9 +31,7 @@ function Sidebar() {
 }
 ```
 
-## Examples
-
-### Default
+## NavigationItem Default
 
 Basic navigation item with text content.
 
@@ -41,7 +39,7 @@ Basic navigation item with text content.
 // Unable to derive source for Default
 ```
 
-### Selected State
+## NavigationItem Selected State
 
 Shows the visual indicator for the currently active navigation item.
 
@@ -49,7 +47,7 @@ Shows the visual indicator for the currently active navigation item.
 // Unable to derive source for Selected
 ```
 
-### With Start Decorator
+## NavigationItem with Icon
 
 Add an icon before the navigation item text.
 
@@ -57,7 +55,7 @@ Add an icon before the navigation item text.
 // Unable to derive source for WithStartDecorator
 ```
 
-### Nesting Levels
+## NavigationItem Nesting Levels
 
 NavigationItem supports different indentation levels for hierarchical navigation.
 
@@ -69,7 +67,7 @@ NavigationItem supports different indentation levels for hierarchical navigation
 // Unable to derive source for Level2
 ```
 
-### Levels with Icons
+## NavigationItem Levels with Icons
 
 Icons work at any nesting level.
 
@@ -98,9 +96,7 @@ Icons work at any nesting level.
 - **Breadcrumbs**: Use Breadcrumbs component for path navigation
 - **Dropdown menus**: Use Dropdown with Menu for popup menus
 
-## Common Use Cases
-
-### Sidebar with Selection State
+## Sidebar Navigation with NavigationItem
 
 ```tsx
 function Sidebar({ currentPath }) {
@@ -139,7 +135,7 @@ function Sidebar({ currentPath }) {
 }
 ```
 
-### Nested Navigation Items
+## Nested NavigationItems
 
 ```tsx
 function NestedNavigation() {
@@ -163,7 +159,7 @@ function NestedNavigation() {
 }
 ```
 
-### Dynamic Navigation from Data
+## Dynamic Navigation from Data
 
 ```tsx
 function DynamicNavigation({ menuItems, selectedId, onSelect }) {

package/dist/components/navigation/Navigator.md

@@ -41,9 +41,7 @@ function Sidebar() {
 }
 ```
 
-## Examples
-
-### Basic Navigation
+## Basic Navigation
 
 A simple navigation with items and a collapsible group.
 
@@ -51,7 +49,7 @@ A simple navigation with items and a collapsible group.
 // Unable to derive source for Playground
 ```
 
-### Default Expanded
+## Default Expanded Navigation
 
 Groups can be expanded by default using the `expanded` property.
 
@@ -77,9 +75,7 @@ Groups can be expanded by default using the `expanded` property.
 - **Flat navigation**: When all items are at the same level, use simple list
 - **Wizard/step flows**: Use Stepper for sequential processes
 
-## Common Use Cases
-
-### Admin Dashboard Sidebar
+## Admin Dashboard Sidebar
 
 ```tsx
 function AdminSidebar() {
@@ -130,7 +126,7 @@ function AdminSidebar() {
 }
 ```
 
-### File Browser Navigation
+## File Browser Navigation
 
 ```tsx
 function FileBrowser({ folders, onFolderSelect }) {
@@ -170,7 +166,7 @@ function FileBrowser({ folders, onFolderSelect }) {
 }
 ```
 
-### Multi-level Documentation Navigation
+## Multi-level Documentation Navigation
 
 ```tsx
 function DocsNavigation({ sections, currentPath }) {

package/dist/components/navigation/Pagination.md

@@ -46,9 +46,7 @@ function DataList() {
 }
 ```
 
-## Features
-
-### Sizes
+## Pagination Sizes
 
 Pagination is available in three sizes -- `sm`, `md`, and `lg` -- for both the standard and compact variants.
 
@@ -69,7 +67,7 @@ Pagination is available in three sizes -- `sm`, `md`, and `lg` -- for both the s
 </Stack>
 ```
 
-### Page Positions
+## Pagination Page Positions
 
 The component correctly handles the visual presentation when the user is at the beginning, middle, or end of the page range, adjusting ellipsis buttons and disabled states accordingly.
 
@@ -108,7 +106,7 @@ The component correctly handles the visual presentation when the user is at the
 </Stack>
 ```
 
-### Uncontrolled Mode
+## Uncontrolled Pagination
 
 In uncontrolled mode the component manages its own page state internally. Pass `defaultPaginationModel` to set the initial state and use `onPageChange` to react to changes.
 
@@ -116,7 +114,7 @@ In uncontrolled mode the component manages its own page state internally. Pass `
 <Pagination {...args} />
 ```
 
-### Controlled Mode
+## Controlled Pagination
 
 In controlled mode the parent component owns the page state via `paginationModel` and updates it through `onPageChange`. This gives full control over navigation behavior.
 
@@ -124,7 +122,7 @@ In controlled mode the parent component owns the page state via `paginationModel
 <Pagination {...args} paginationModel={paginationModel} onPageChange={handlePageChange} />
 ```
 
-### Dynamic Row Count
+## Pagination with Dynamic Row Count
 
 Pagination automatically adjusts when the total number of items changes. If the current page exceeds the new page count, the component clamps to the last available page.
 
@@ -138,9 +136,7 @@ Pagination automatically adjusts when the total number of items changes. If the
 </Stack>
 ```
 
-## Common Use Cases
-
-### Data Table Pagination
+## Pagination for Data Table
 
 ```tsx
 function DataTable({ columns }) {
@@ -167,7 +163,7 @@ function DataTable({ columns }) {
 }
 ```
 
-### Search Results with Compact Variant
+## Compact Pagination
 
 ```tsx
 function SearchResults({ query }) {
@@ -193,7 +189,7 @@ function SearchResults({ query }) {
 }
 ```
 
-### URL-Synchronized Pagination
+## URL-Synchronized Pagination
 
 ```tsx
 function URLPaginatedList() {
@@ -214,6 +210,19 @@ function URLPaginatedList() {
 }
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop                     | Type                                 | Default                     | Description                |
+| ------------------------ | ------------------------------------ | --------------------------- | -------------------------- |
+| `paginationModel`        | `{ page: number; pageSize: number }` | (required)                  | Current page and page size |
+| `defaultPaginationModel` | `{ page: number; pageSize: number }` | `{ page: 1, pageSize: 25 }` | Initial pagination state   |
+| `rowCount`               | `number`                             | (required)                  | Total number of rows       |
+| `onPageChange`           | `(newPage: number) => void`          | (required)                  | Callback when page changes |
+| `size`                   | `'sm' \| 'md' \| 'lg'`               | `'md'`                      | Pagination control size    |
+| `variant`                | `'standard' \| 'compact'`            | `'standard'`                | Pagination display mode    |
+
 ## Best Practices
 
 - **Always show context.** Display the total item count and current range (for example "Showing 1--25 of 250") alongside the pagination controls so users understand the scope of the data.

package/dist/components/navigation/ProfileMenu.md

@@ -289,9 +289,7 @@ Use `defaultOpen` to set the initial state, then let the component manage its ow
 />
 ```
 
-## Common Use Cases
-
-### Header Navigation
+## Header Navigation
 
 ```tsx
 function AppHeader() {
@@ -319,7 +317,7 @@ function AppHeader() {
 }
 ```
 
-### Multi-Role User
+## Multi-Role User
 
 ```tsx
 function RoleBasedProfileMenu({ user, currentRole, switchRole, signOut }) {
@@ -348,7 +346,7 @@ function RoleBasedProfileMenu({ user, currentRole, switchRole, signOut }) {
 }
 ```
 
-### Organization Context
+## Organization Context
 
 ```tsx
 function OrgProfileMenu({ user, organization }) {
@@ -371,6 +369,20 @@ function OrgProfileMenu({ user, organization }) {
 }
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop           | Type                                                                   | Default         | Description                                      |
+| -------------- | ---------------------------------------------------------------------- | --------------- | ------------------------------------------------ |
+| `profile`      | `{ name: string; image?: string; caption?: string; chip?: ReactNode }` | (required)      | User profile data                                |
+| `menuItems`    | `{ label: string; [key: string]: any }[]`                              | (required)      | Dropdown menu items (accepts all MenuItem props) |
+| `open`         | `boolean`                                                              | -               | Controlled open state                            |
+| `defaultOpen`  | `boolean`                                                              | `false`         | Initial open state (uncontrolled)                |
+| `onOpenChange` | `(open: boolean) => void`                                              | -               | Callback when open state changes                 |
+| `getInitial`   | `(name: string) => string`                                             | First character | Custom function to extract initials from name    |
+| `size`         | `'sm' \| 'md'`                                                         | `'md'`          | Component size                                   |
+
 ## Best Practices
 
 1. **Always include essential actions**: At minimum, provide access to profile viewing and sign-out.

package/dist/components/navigation/Stepper.md

@@ -125,9 +125,7 @@ When `activeStep` is set to `0`, all steps are displayed in the inactive state.
 // Unable to derive source for WithAllInactive
 ```
 
-## Common Use Cases
-
-### Form Wizard
+## Form Wizard
 
 ```tsx
 function FormWizard() {
@@ -162,7 +160,7 @@ function FormWizard() {
 }
 ```
 
-### Order Tracking
+## Order Tracking
 
 ```tsx
 function OrderTracking({ currentStatus }) {
@@ -185,7 +183,7 @@ function OrderTracking({ currentStatus }) {
 }
 ```
 
-### Compact Progress Indicator
+## Compact Progress Indicator
 
 ```tsx
 function CompactProgress({ currentStep, totalSteps }) {
@@ -204,6 +202,21 @@ function CompactProgress({ currentStep, totalSteps }) {
 }
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop                | Type                                                                              | Default         | Description                                  |
+| ------------------- | --------------------------------------------------------------------------------- | --------------- | -------------------------------------------- |
+| `steps`             | `{ indicatorContent?: ReactNode; label?: ReactNode; extraContent?: ReactNode }[]` | (required)      | Step definitions                             |
+| `activeStep`        | `number`                                                                          | (required)      | Currently active step index (0-based)        |
+| `orientation`       | `'horizontal' \| 'vertical'`                                                      | `'horizontal'`  | Stepper layout direction                     |
+| `stepOrientation`   | `'horizontal' \| 'vertical'`                                                      | `'horizontal'`  | Individual step content orientation          |
+| `activeColor`       | `string`                                                                          | `'primary.500'` | Color for active/completed step indicators   |
+| `inactiveColor`     | `string`                                                                          | `'neutral.400'` | Color for inactive step indicators           |
+| `activeLineColor`   | `string`                                                                          | `'primary.500'` | Color for connector lines of completed steps |
+| `inactiveLineColor` | `string`                                                                          | `'neutral.300'` | Color for connector lines of future steps    |
+
 ## Best Practices
 
 1. **Keep step count manageable**: Limit the number of steps to 3-7 for optimal user comprehension. If more steps are needed, consider grouping them.