@maxio-com/react-ui-components 9.21.0 → 9.22.1

package/dist/skills/maxio-react/SKILL.md

@@ -31,6 +31,7 @@ Use this skill to build React components using `@maxio-com/react-ui-components`.
 - [Components / Buttons / IconButton](references/components-buttons-iconbutton.md)
 - [Components / Card](references/components-card.md)
 - [Components / Chip](references/components-chip.md)
+- [Components / Copy To Clipboard](references/components-copy-to-clipboard.md)
 - [Components / Data Table](references/components-data-table.md)
 - [Components / Drawer](references/components-drawer.md)
 - [Components / Empty State](references/components-empty-state.md)

package/dist/skills/maxio-react/references/components-action-menu.md

@@ -4,7 +4,9 @@
 
 ### Overview
 
-ActionMenu groups related contextual actions behind a trigger. Use it for secondary row, toolbar, or page actions that should stay available without occupying persistent space.
+ActionMenu groups related contextual actions behind a trigger. Use it for
+secondary row, toolbar, or page actions that should stay available without
+occupying persistent space.
 
 #### When to Use
 
@@ -90,7 +92,9 @@ No props were emitted by reactDocgenTypescript for this component.
 
 ### Default
 
-Use the default action menu for a small set of related actions behind a visible text trigger. The trigger needs an accessible name and controls the menu list through generated `aria-controls` and `aria-labelledby` values.
+Use the default action menu for a small set of related actions behind a
+visible text trigger. The trigger needs an accessible name and controls the
+menu list through generated `aria-controls` and `aria-labelledby` values.
 
 ```tsx
 const Default = () => (
@@ -103,7 +107,9 @@ const Default = () => (
 
 ### Button Classes
 
-Use MenuButton size and variant props when the trigger needs to match nearby button hierarchy. Keep the menu behavior the same; only the trigger styling changes.
+Use MenuButton size and variant props when the trigger needs to match nearby
+button hierarchy. Keep the menu behavior the same; only the trigger styling
+changes.
 
 ```tsx
 const ButtonClasses = () => (
@@ -118,7 +124,9 @@ const ButtonClasses = () => (
 
 ### Internal State
 
-Use the render-prop state when the trigger label, adjacent controls, or custom content must react to the open state. Call `onClose` when custom content dismisses the menu.
+Use the render-prop state when the trigger label, adjacent controls, or
+custom content must react to the open state. Call `onClose` when custom
+content dismisses the menu.
 
 ```tsx
 const InternalState = () => (
@@ -137,7 +145,9 @@ const InternalState = () => (
 
 ### Content Align End
 
-Use end alignment when the trigger sits near the right edge of a container or in a table row action area, so the menu stays visually connected to the trigger without overflowing nearby content.
+Use end alignment when the trigger sits near the right edge of a container or
+in a table row action area, so the menu stays visually connected to the
+trigger without overflowing nearby content.
 
 ```tsx
 const ContentAlignEnd = () => (
@@ -150,7 +160,8 @@ const ContentAlignEnd = () => (
 
 ### Icon Menu
 
-Use an icon-only action menu in dense toolbars or repeated rows. Always provide an `aria-label` that describes the actions available in the menu.
+Use an icon-only action menu in dense toolbars or repeated rows. Always
+provide an `aria-label` that describes the actions available in the menu.
 
 ```tsx
 const IconMenu = () => (

package/dist/skills/maxio-react/references/components-avatar.md

@@ -59,7 +59,9 @@ import { AvatarComponent } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use Avatar to show a known user's profile image in account menus, headers, activity rows, or other identity-focused UI. Provide alt text that names the person when the image identifies them.
+Use Avatar to show a known user's profile image in account menus, headers,
+activity rows, or other identity-focused UI. Provide alt text that names the
+person when the image identifies them.
 
 ```tsx
 const Default = () => <AvatarComponent src={avatarSrc} alt="Profile photo for Alex Morgan" />;

package/dist/skills/maxio-react/references/components-breadcrumbs.md

@@ -68,7 +68,8 @@ No props were emitted by reactDocgenTypescript for this component.
 
 ### Default
 
-Use Breadcrumbs when the current page sits inside a clear hierarchy. Link parent pages and keep the final item as plain text for the current page.
+Use Breadcrumbs when the current page sits inside a clear hierarchy.
+Link parent pages and keep the final item as plain text for the current page.
 
 ```tsx
 const Default = () => <Breadcrumbs>{[

package/dist/skills/maxio-react/references/components-buttons-button.md

@@ -4,7 +4,9 @@
 
 ### Overview
 
-Button helps users complete a task, move through a workflow, or make a clear choice. Use it for page actions by default, and provide `href` only when the button needs to navigate with button-level emphasis.
+Button helps users complete a task, move through a workflow, or make a clear choice.
+Use it for page actions by default, and provide `href` only when the button
+needs to navigate with button-level emphasis.
 
 #### When to Use
 
@@ -96,7 +98,9 @@ import { Button, Icon } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use Button for actions that happen on the current page. Prefer visible labels that describe the result of the action, and use native button behavior for actions.
+Use Button for actions that happen on the current page.
+Prefer visible labels that describe the result of the action, and use
+native button behavior for actions.
 
 ```tsx
 const Default = () => <Button onClick={action('Clicked')}>Create invoice</Button>;
@@ -104,7 +108,9 @@ const Default = () => <Button onClick={action('Clicked')}>Create invoice</Button
 
 ### As Link
 
-Use Button as navigation only when the destination still needs button-level emphasis, such as a prominent next step in a workflow. Use Link for plain text navigation.
+Use Button as navigation only when the destination still needs button-level
+emphasis, such as a prominent next step in a workflow. Use Link for plain
+text navigation.
 
 ```tsx
 const AsLink = () => <Button href="/customers/123" variant="secondary">View customer</Button>;
@@ -112,7 +118,9 @@ const AsLink = () => <Button href="/customers/123" variant="secondary">View cust
 
 ### Destructive
 
-Use danger variant for actions that remove data, cancel service, or are difficult to reverse. Pair destructive actions with confirmation or recovery guidance when the consequence is not obvious.
+Use danger variant for actions that remove data, cancel service, or are
+difficult to reverse. Pair destructive actions with confirmation or
+recovery guidance when the consequence is not obvious.
 
 ```tsx
 const Destructive = () => <Button onClick={action('Deleted')} variant="danger">Delete invoice</Button>;
@@ -120,7 +128,8 @@ const Destructive = () => <Button onClick={action('Deleted')} variant="danger">D
 
 ### Loading
 
-Use a loading button after the user starts an action and repeated activation should be prevented. Keep the label connected to the action that is running.
+Use a loading button after the user starts an action and repeated activation
+should be prevented. Keep the label connected to the action that is running.
 
 ```tsx
 const Loading = () => <Button loading onClick={action('Submitted')} type="submit">Saving changes</Button>;
@@ -139,7 +148,8 @@ const WithElements = () => <Button
 
 ### Full Width
 
-Use full-width buttons in constrained layouts where the action should align to the container width.
+Use full-width buttons in constrained layouts where the action should align
+to the container width.
 
 ```tsx
 const FullWidth = () => <div style={{ maxWidth: '20rem' }}>
@@ -150,7 +160,8 @@ const FullWidth = () => <div style={{ maxWidth: '20rem' }}>
 
 ### Variants
 
-Use variants to set visual emphasis and action tone. Choose the lowest emphasis that still makes the action easy to find.
+Use variants to set visual emphasis and action tone. Choose the lowest
+emphasis that still makes the action easy to find.
 
 ```tsx
 const Variants = () => <>

package/dist/skills/maxio-react/references/components-buttons-iconbutton.md

@@ -91,7 +91,9 @@ import { Icon, IconButton } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use IconButton for compact icon-only actions when surrounding context or an accessible name makes the action clear. Every IconButton must include an `aria-label` that describes the action outcome.
+Use IconButton for compact icon-only actions when surrounding context or an
+accessible name makes the action clear. Every IconButton must include an
+`aria-label` that describes the action outcome.
 
 ```tsx
 const Default = () => <IconButton

package/dist/skills/maxio-react/references/components-card.md

@@ -68,7 +68,9 @@ import { Body, Button, Card, Flex, Heading } from "@maxio-com/react-ui-component
 
 ### Default
 
-Use Default for a simple static content group. Always wrap the main content in Card.Body so spacing remains consistent if header or footer sections are added later.
+Use Default for a simple static content group. Always wrap the main content
+in Card.Body so spacing remains consistent if header or footer sections are
+added later.
 
 ```tsx
 const Default = () => <Card>
@@ -82,7 +84,8 @@ const Default = () => <Card>
 
 ### With Header
 
-Use WithHeader when the card needs a visible title or section label. The heading level should fit the surrounding page hierarchy.
+Use WithHeader when the card needs a visible title or section label.
+The heading level should fit the surrounding page hierarchy.
 
 ```tsx
 const WithHeader = () => <Card>
@@ -99,7 +102,8 @@ const WithHeader = () => <Card>
 
 ### With Footer
 
-Use WithFooter when the card includes actions that apply to the grouped content. Keep footer actions specific to this card.
+Use WithFooter when the card includes actions that apply to the grouped
+content. Keep footer actions specific to this card.
 
 ```tsx
 const WithFooter = () => <Card>
@@ -116,7 +120,8 @@ const WithFooter = () => <Card>
 
 ### Secondary
 
-Use Secondary for supporting panels that should sit behind the primary card hierarchy while still grouping related content.
+Use Secondary for supporting panels that should sit behind the primary card
+hierarchy while still grouping related content.
 
 ```tsx
 const Secondary = () => <Card variant="secondary">
@@ -130,7 +135,8 @@ const Secondary = () => <Card variant="secondary">
 
 ### Full
 
-Use Full when the card has a title, primary content, and local actions. Header, body, and footer sections should remain in that order.
+Use Full when the card has a title, primary content, and local actions.
+Header, body, and footer sections should remain in that order.
 
 ```tsx
 const Full = () => <Card>
@@ -153,7 +159,8 @@ const Full = () => <Card>
 
 ### Full Secondary
 
-Use FullSecondary for lower-emphasis sections that still need the complete header, body, and footer composition.
+Use FullSecondary for lower-emphasis sections that still need the complete
+header, body, and footer composition.
 
 ```tsx
 const FullSecondary = () => <Card variant="secondary">

package/dist/skills/maxio-react/references/components-chip.md

@@ -4,7 +4,8 @@
 
 ### Overview
 
-Chip is used for compact, interactive values such as applied filters that can be selected, toggled, or dismissed without leaving the current context.
+Chip is used for compact, interactive values such as applied filters that can
+be selected, toggled, or dismissed without leaving the current context.
 
 #### When to Use
 
@@ -82,7 +83,9 @@ import { Chip } from "@maxio-com/react-ui-components";
 
 ### Default
 
-Use Chip for a selected, actionable value such as an applied filter. Include a dismiss button when users can remove that value from the current context.
+Use Chip for a selected, actionable value such as an applied filter.
+Include a dismiss button when users can remove that value from the current
+context.
 
 ```tsx
 const Default = (args: any) => {
@@ -97,7 +100,9 @@ const Default = (args: any) => {
 
 ### Selected
 
-Use the selected state when the chip represents an active toggle, filter, or segmented choice. Keep `aria-pressed` synchronized with the visual selected state in static HTML.
+Use the selected state when the chip represents an active toggle, filter, or
+segmented choice. Keep `aria-pressed` synchronized with the visual selected
+state in static HTML.
 
 ```tsx
 const Selected = (args: any) => {
@@ -114,7 +119,8 @@ const Selected = (args: any) => {
 
 ### With Icons
 
-Use icons only when they help identify the chip value faster. Icons are supporting visuals; the visible label still provides the accessible name.
+Use icons only when they help identify the chip value faster. Icons are
+supporting visuals; the visible label still provides the accessible name.
 
 ```tsx
 const WithIcons = (args: any) => {
@@ -131,7 +137,9 @@ const WithIcons = (args: any) => {
 
 ### Controlled
 
-Use controlled state when another component owns the selection, such as a filter menu, table toolbar, or saved view. Update `isSelected` from `onChange` so visual and announced state stay in sync.
+Use controlled state when another component owns the selection, such as a
+filter menu, table toolbar, or saved view. Update `isSelected` from
+`onChange` so visual and announced state stay in sync.
 
 ```tsx
 const Controlled = (args: any) => {

package/dist/skills/maxio-react/references/components-copy-to-clipboard.md

@@ -0,0 +1,193 @@
+# CopyToClipboard
+
+## Usage Guidelines
+
+### Overview
+
+CopyToClipboard writes a value to the clipboard and confirms it, so users can take
+an identifier, key, or URL out of the interface without selecting text by
+hand. It swaps to a check mark once copied, confirms in the tooltip, and
+announces the result to screen readers.
+
+Place the button directly beside the value it copies. It is ghost by default,
+but accepts primary, secondary, and tertiary variants when more emphasis is
+needed.
+
+#### When to Use
+
+- Use CopyToClipboard for values users need to move elsewhere but should not have to
+  select by hand: API keys, tokens, IDs, commit SHAs, clone URLs, invoice
+  numbers.
+- Use the icon-only button inline, directly beside the value it copies. The
+  adjacent value says what will be copied and the control stays out of the way.
+
+#### When Not to Use
+
+- Do not use CopyToClipboard for actions that duplicate a record, such as
+  "Duplicate invoice". Use a [Button](components-buttons-button.md)
+  with explicit wording.
+- Do not use CopyToClipboard to copy long prose or whole page regions; let users
+  select that text themselves.
+- Do not use it as the only way to obtain a value. Keep the value visible or
+  otherwise reachable, since clipboard access can fail.
+
+### Variants
+
+| Variants           | Purpose                        | Usage notes                                                                 |
+| :----------------- | :----------------------------- | :-------------------------------------------------------------------------- |
+| Icon-only (inline) | Sits beside the value.         | `copyLabel` supplies the accessible name; the tooltip is only a hover hint. |
+| `sm` size          | Table rows and dense metadata. | Pair with `Body size="sm"` so the icon matches the line height.             |
+| `lg` size          | Larger copy actions.           | Largest target area; use where the button is not crowded by other controls. |
+
+The button is ghost by default so it does not compete with the value beside it.
+Use `variant` to increase its emphasis when needed:
+
+| `variant`   | When to use                                                    |
+| :---------- | :------------------------------------------------------------- |
+| `ghost`     | Default. Suits inline use beside the value being copied.       |
+| `tertiary`  | Use when the copy control needs slightly more emphasis.        |
+| `secondary` | Copying is one of the main actions on the surface.             |
+| `primary`   | Rare. Only when copying is _the_ action users came to perform. |
+
+### Behavior
+
+- **Mouse and touch**: pressing the button writes `value` to the clipboard and
+  the icon swaps to a check mark and the tooltip shows `copiedLabel`.
+- **Keyboard**: the button is reachable with Tab and activates with Enter or
+  Space. Focus also opens the icon-only button's tooltip.
+- **Callbacks**: a native `onClick` observes activation without replacing the
+  copy behavior. Use `onCopy` and `onCopyError` for the asynchronous result.
+- **Copied state**: reverts automatically after `resetAfterMs` (2000 ms by
+  default). Pressing again restarts the timer. Changing `value` clears feedback
+  immediately so a new value is never presented as already copied.
+- **Failure**: if the clipboard write is rejected — an insecure context, or
+  denied permission — the icon and tooltip show the failure,
+  `copyErrorLabel` is announced, and `onCopyError` fires. It never claims a copy
+  that did not happen.
+- **Async values**: keep the button `disabled` until `value` is populated so
+  users cannot copy a placeholder.
+- **Sizing**: `size` uses the shared IconButton sizing. Target areas are 28px,
+  32px, and 40px; the glyph remains 16px, consistent with
+  other icon buttons in the system.
+
+### Accessibility
+
+- The button takes its accessible name from `copyLabel`. A tooltip is
+  not an accessible name, so the label is always applied to the button itself.
+- Success and failure are announced through a `role="status"`
+  `aria-live="polite"` region rather than the tooltip, because a tooltip is not
+  announced on press and may not be open when the user activates the button by
+  keyboard.
+- The live region is rendered up front and filled after the copy, so the change
+  is announced. A region inserted together with its text is unreliable.
+- Each attempt refreshes the live region, so repeated successful copies are
+  announced as separate actions.
+- Icon changes are paired with announcement text and tooltip feedback, so
+  success and failure are never conveyed by the glyph alone.
+
+### Content
+
+- Keep `copyLabel` specific about what is copied — "Copy API key" beats "Copy"
+  when several copyable values sit near each other.
+- Keep `copiedLabel` short; it is announced verbatim.
+- Keep `copyErrorLabel` actionable and concise; "Copy failed" is the default.
+- When showing a truncated value, keep `value` set to the full string so users
+  get the complete text.
+
+### Related
+
+- **[Button](components-buttons-button.md)**: use for actions
+  that are not clipboard copies.
+- **[IconButton](components-buttons-iconbutton.md)**: use for
+  other icon-only actions; CopyToClipboard is a purpose-built wrapper around it.
+- **[TooltipTrigger](components-tooltip.md)**: supplies the hover
+  and focus hint used here.
+
+## React
+
+```tsx
+import { CopyToClipboard } from '@maxio-com/react-ui-components';
+```
+
+### Handling Failures
+
+Clipboard writes reject in insecure contexts and when the user denies
+permission. CopyToClipboard shows and announces `copyErrorLabel` in that case
+and calls `onCopyError`, so consumers can also surface application-level
+feedback when needed.
+
+```tsx
+<CopyToClipboard
+  value={apiKey}
+  copyLabel="Copy API key"
+  copyErrorLabel="API key could not be copied"
+  onCopyError={() => addToast({ sentiment: 'error', title: 'Could not copy' })}
+/>
+```
+
+### Asynchronous Values
+
+Keep the button disabled until the value exists, so users cannot copy a
+placeholder.
+
+```tsx
+<CopyToClipboard value={token ?? ''} disabled={!token} copyLabel="Copy token" />
+```
+
+## Imports
+
+```tsx
+import { Body, CopyToClipboard, Flex } from "@maxio-com/react-ui-components";
+```
+
+## Prop Types
+
+### CopyToClipboard
+
+| Prop | Type | Required | Default | Description | Source |
+| --- | --- | --- | --- | --- | --- |
+| `copiedLabel` | `string` | no | `Copied!` | Success feedback after a copy, shown in the tooltip and announced to screen readers. | TypeLiteral |
+| `copyErrorLabel` | `string` | no | `Copy failed` | Failure feedback after a copy, shown and announced like `copiedLabel`. | TypeLiteral |
+| `copyLabel` | `string` | no | `Copy` | Accessible name for the button, and the idle tooltip text. | TypeLiteral |
+| `disabled` | `boolean` | no | - | Prevents interaction, such as while the value is still loading. | TypeLiteral, ButtonHTMLAttributes |
+| `onCopy` | `((value: string) => void)` | no | - | Called with the copied value once the clipboard write succeeds. | TypeLiteral |
+| `onCopyError` | `((error: unknown) => void)` | no | - | Called when the clipboard write fails, such as in an insecure context or when permission is denied. The copied state is not entered. | TypeLiteral |
+| `resetAfterMs` | `number` | no | `2000` | How long the copied state lasts before reverting, in milliseconds. | TypeLiteral |
+| `size` | `"sm" \| "md" \| "lg"` | no | `md` | Changes the size of the button. | TypeLiteral |
+| `tooltipPlacement` | `"top" \| "right" \| "bottom" \| "left" \| "top-start" \| "top-end" \| "right-start" \| "right-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end"` | no | `top` | Where the tooltip is positioned relative to the button. | TypeLiteral |
+| `value` | `string` | yes | - | Text written to the clipboard when the button is pressed. | TypeLiteral |
+| `variant` | `"primary" \| "secondary" \| "tertiary" \| "ghost"` | no | `ghost` | Button variant. | TypeLiteral |
+
+## Stories
+
+### Default
+
+An icon-only button sitting directly beside the value it copies. `copyLabel`
+carries the accessible name.
+
+```tsx
+const Default = () => <Flex alignItems="center" gap={1}>
+    <Body size="sm" as="span">
+        {args.value}
+    </Body>
+    <CopyToClipboard
+        value={API_KEY}
+        onCopy={action('Copied')}
+        onCopyError={action('Copy failed')}
+        size="sm"
+        copyLabel="Copy API key" />
+</Flex>;
+```
+
+### Disabled
+
+Disable the button while there is nothing to copy yet, such as before a
+generated secret has loaded.
+
+```tsx
+const Disabled = () => <CopyToClipboard
+    value={API_KEY}
+    onCopy={action('Copied')}
+    onCopyError={action('Copy failed')}
+    disabled />;
+```

package/dist/skills/maxio-react/references/components-data-table.md

@@ -4,7 +4,9 @@
 
 ### Overview
 
-Displays TanStack Table data with Maxio table semantics, styling, and common interactions such as sorting, row selection, expansion, row actions, and pinned columns.
+Displays TanStack Table data with Maxio table semantics, styling, and common
+interactions such as sorting, row selection, expansion, row actions, and
+pinned columns.
 
 DataTable uses TanStack Table for column, row, sorting, selection, expansion,
 and pinning state while rendering Maxio table markup and classes.
@@ -243,7 +245,7 @@ import {
 | `actions` | `((row: Row<TData>, table: Table<TData>) => ReactNode)` | no | - | render custom actions cell content | TypeLiteral |
 | `actionsColumnSize` | `number` | no | - | width (in px) of the actions column; defaults to 40 | TypeLiteral |
 | `aggregationFns` | `Record<string, AggregationFn<any>>` | no | - | - | TypeLiteral |
-| `align` | `"left" \| "right"` | no | - | - | TypeLiteral |
+| `align` | `"right" \| "left"` | no | - | - | TypeLiteral |
 | `enableExpanding` | `boolean \| "rowsOnly"` | no | - | Enable nested row expansion. Include `'rowsOnly'` for row-level toggles without group expand/collapse header control. | TypeLiteral |
 | `enableRowReordering` | `boolean` | no | `false` | Enable controlled row reordering for small, non-paginated tables. Intended for approximately 100 total rows or fewer, including nested and collapsed rows. Nested row data must use the `subRows` property; custom `getSubRows` accessors are unsupported. | TypeLiteral |
 | `enableSorting` | `boolean` | no | `false` | - | TypeLiteral |
@@ -266,7 +268,9 @@ import {
 
 ### Default
 
-Use DataTable when a data set needs table semantics plus common interactions such as sorting, row selection, nested expansion, custom row actions, and pinned action or control columns.
+Use DataTable when a data set needs table semantics plus common interactions
+such as sorting, row selection, nested expansion, custom row actions, and
+pinned action or control columns.
 
 ```tsx
 const Default = () => <DataTable
@@ -281,7 +285,8 @@ const Default = () => <DataTable
 
 ### Sorting
 
-Use sorting when users need to compare rows by one or more column values. Sortable headers cycle through ascending, descending, and unsorted states.
+Use sorting when users need to compare rows by one or more column values.
+Sortable headers cycle through ascending, descending, and unsorted states.
 
 ```tsx
 const Sorting = () => <DataTable enableSorting />;
@@ -289,7 +294,8 @@ const Sorting = () => <DataTable enableSorting />;
 
 ### Selecting
 
-Use row selection when users need to choose individual rows or select all rows in the current table state for a follow-up action.
+Use row selection when users need to choose individual rows or select all
+rows in the current table state for a follow-up action.
 
 ```tsx
 const Selecting = () => <DataTable enableRowSelection />;
@@ -297,7 +303,8 @@ const Selecting = () => <DataTable enableRowSelection />;
 
 ### Nested Rows
 
-Use nested rows when child records share the same shape as their parent row. Include `subRows` on the data and enable expansion controls.
+Use nested rows when child records share the same shape as their parent row.
+Include `subRows` on the data and enable expansion controls.
 
 ```tsx
 const NestedRows = () => <DataTable enableExpanding />;
@@ -305,7 +312,9 @@ const NestedRows = () => <DataTable enableExpanding />;
 
 ### Row Reordering
 
-Row reordering is controlled. Update the table data from `onRowReorder`. Choose a row reorder mode to limit movement to siblings, preserve tree depth while changing parents, or allow every valid destination.
+Row reordering is controlled. Update the table data from `onRowReorder`.
+Choose a row reorder mode to limit movement to siblings, preserve tree depth
+while changing parents, or allow every valid destination.
 
 ```tsx
 const RowReordering = () => {
@@ -339,7 +348,8 @@ const RowReordering = () => {
 
 ### Custom Rows
 
-Use custom rows when an expanded row needs richer content than the standard column layout while remaining connected to the parent row.
+Use custom rows when an expanded row needs richer content than the standard
+column layout while remaining connected to the parent row.
 
 ```tsx
 const CustomRows = () => <DataTable
@@ -352,7 +362,8 @@ const CustomRows = () => <DataTable
 
 ### Actions
 
-Use row actions for controls scoped to a single row. The actions cell is pinned to the right so those controls remain available while scrolling.
+Use row actions for controls scoped to a single row. The actions cell is
+pinned to the right so those controls remain available while scrolling.
 
 ```tsx
 const Actions = () => <DataTable data={customerData} columns={customerColumns} actions={rowActions()} />;
@@ -360,7 +371,8 @@ const Actions = () => <DataTable data={customerData} columns={customerColumns} a
 
 ### Row Action
 
-Use row action behavior when the whole row should activate a primary row destination or action while preserving keyboard access.
+Use row action behavior when the whole row should activate a primary row
+destination or action while preserving keyboard access.
 
 ```tsx
 const RowAction = () => <DataTable data={customerData} columns={customerColumns} onRowAction={logRowAction} />;
@@ -368,7 +380,8 @@ const RowAction = () => <DataTable data={customerData} columns={customerColumns}
 
 ### Components
 
-Use component cells when mapped values need Maxio components such as links, tags, or other inline display elements.
+Use component cells when mapped values need Maxio components such as links,
+tags, or other inline display elements.
 
 ```tsx
 const Components = () => <DataTable pattern size="lg" />;
@@ -376,7 +389,8 @@ const Components = () => <DataTable pattern size="lg" />;
 
 ### Header Groups
 
-Use header groups when related columns need a shared parent heading above their individual column headers.
+Use header groups when related columns need a shared parent heading above
+their individual column headers.
 
 ```tsx
 const HeaderGroups = () => <DataTable />;
@@ -384,7 +398,8 @@ const HeaderGroups = () => <DataTable />;
 
 ### Column Pinning
 
-Use column pinning when important identifying columns or action columns must stay visible while the table scrolls horizontally.
+Use column pinning when important identifying columns or action columns must
+stay visible while the table scrolls horizontally.
 
 ```tsx
 const ColumnPinning = () => <div style={{ overflowX: 'auto' }}>
@@ -404,7 +419,8 @@ const ColumnPinning = () => <div style={{ overflowX: 'auto' }}>
 
 ### Custom
 
-Use the primitive table components only for simple static tables that do not need sorting, selection, expansion, pinning, or TanStack Table state.
+Use the primitive table components only for simple static tables that do not
+need sorting, selection, expansion, pinning, or TanStack Table state.
 
 ```tsx
 const Custom = () => (

package/dist/skills/maxio-react/references/components-drawer.md

@@ -69,7 +69,7 @@ import { Body, Button, DialogTrigger, Drawer } from "@maxio-com/react-ui-compone
 | `footer` | `ReactNode` | no | - | - | DrawerProps |
 | `onOpenChange` | `((open: boolean) => void)` | no | - | - | DrawerProps |
 | `open` | `boolean` | no | - | - | DrawerProps |
-| `placement` | `"left" \| "right" \| "top" \| "bottom"` | no | `right` | - | DrawerProps |
+| `placement` | `"top" \| "right" \| "bottom" \| "left"` | no | `right` | - | DrawerProps |
 | `size` | `"sm" \| "md" \| "lg" \| "xl" \| "full"` | no | `md` | - | DrawerProps |
 | `title` | `string` | yes | - | - | DrawerProps |