@utilitywarehouse/hearth-react 0.28.6 → 0.29.0

package/public/llms/components/pagination.md

@@ -0,0 +1,138 @@
+# Pagination
+
+Use the `Pagination` component to help users navigate through multiple pages of content.
+
+## Table of Contents
+
+- [Usage Guidelines](#usage-guidelines)
+- [Examples](#examples)
+  - [Condensed](#condensed)
+  - [Without Skip Buttons](#without-skip-buttons)
+  - [Few Pages](#few-pages)
+  - [Many Pages](#many-pages)
+  - [Edge Cases](#edge-cases)
+- [API](#api)
+
+```tsx
+<Pagination {...args} currentPage={currentPage} onPageChange={setCurrentPage} />
+```
+
+## Usage Guidelines
+
+- Handle the `onPageChange` callback to update your data
+- The component automatically shows a maximum of 7 items (including ellipses)
+- When using `as="nav"`, you must provide an `id` prop for proper accessibility
+
+## Examples
+
+The Pagination component provides flexible options for navigation through multiple pages of content.
+
+### Basic Usage
+
+```ts
+const [currentPage, setCurrentPage] = useState(5);
+
+const handlePageChange = (newPage: number) => {
+  // Tracking, loading new data...
+  setCurrentPage(newPage)
+}
+
+return (
+  <Pagination
+    currentPage={currentPage}
+    totalPages={100}
+    onPageChange={handlePageChange}
+  />
+);
+```
+
+### Condensed
+
+Use the `condensed` prop to display a more compact pagination with just "Page X of Y" text and navigation arrows.
+
+```tsx
+<Pagination currentPage={currentPage} totalPages={10} onPageChange={setCurrentPage} condensed />
+```
+
+### Without Skip Buttons
+
+Set `hideSkipButtons` to hide the first/last page skip buttons.
+
+```tsx
+<Pagination
+  currentPage={currentPage}
+  totalPages={10}
+  onPageChange={setCurrentPage}
+  hideSkipButtons
+/>
+```
+
+### Few Pages
+
+When there are 7 or fewer pages, all page numbers are displayed.
+
+```tsx
+<Pagination currentPage={currentPage} totalPages={7} onPageChange={setCurrentPage} />
+```
+
+### Many Pages
+
+When there are many pages (more than 8), ellipsis (...) are shown to condense the pagination. The component shows:
+
+- First and last pages always visible
+- When near the start: first 5 pages, ellipsis, last page
+- When in the middle: first page, ellipsis, current page with neighbours, ellipsis, last page
+- When near the end: first page, ellipsis, last 5 pages
+
+```tsx
+<Pagination currentPage={currentPage} totalPages={100} onPageChange={setCurrentPage} />
+```
+
+### Edge Cases
+
+Examples showing different positions in a large page set:
+
+```tsx
+<Flex direction="column" gap="400">
+  <Flex direction="column" gap="100">
+    <BodyText size="sm" color="secondary">
+      Near start (page 2 of 100):
+    </BodyText>
+    <Pagination currentPage={nearStartPage} totalPages={100} onPageChange={setNearStartPage} />
+  </Flex>
+  <Flex direction="column" gap="100">
+    <BodyText size="sm" color="secondary">
+      In middle (page 50 of 100):
+    </BodyText>
+    <Pagination currentPage={middlePage} totalPages={100} onPageChange={setMiddlePage} />
+  </Flex>
+  <Flex direction="column" gap="100">
+    <BodyText size="sm" color="secondary">
+      Near end (page 98 of 100):
+    </BodyText>
+    <Pagination currentPage={nearEndPage} totalPages={100} onPageChange={setNearEndPage} />
+  </Flex>
+</Flex>
+```
+
+## API
+
+This component is based on the `div` element by default and supports the following common props:
+
+- Margin
+
+| Prop              | Type                                                                                                                                                                                                       | Default | Description                                                                                      |
+| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `as`              | `"div" \| "nav"`                                                                                                                                                                                           | `div`   | Shorthand for changing the default rendered element into a semantically appropriate alternative. |
+| `currentPage`     | `number`                                                                                                                                                                                                   | —       | The current active page number (1-indexed)                                                       |
+| `totalPages`      | `number`                                                                                                                                                                                                   | —       | The total number of pages                                                                        |
+| `onPageChange`    | `(page: number) => void`                                                                                                                                                                                   | —       | Callback when page changes                                                                       |
+| `condensed`       | `boolean`                                                                                                                                                                                                  | `false` | Whether to show condensed version with only "Page X of Y" text                                   |
+| `hideSkipButtons` | `boolean`                                                                                                                                                                                                  | `false` | Whether to hide the skip to first/last page buttons                                              |
+| `margin`          | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                  |
+| `marginTop`       | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                  |
+| `marginRight`     | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                  |
+| `marginBottom`    | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                  |
+| `marginLeft`      | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                  |
+| `marginX`         | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                  |
+| `marginY`         | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                                                  |

package/public/llms/components/password-input.md

@@ -0,0 +1,93 @@
+# PasswordInput
+
+`PasswordInput` is an interactive field that is used to securely collect users passwords.
+
+```tsx
+<PasswordInput {...args} />
+```
+
+## Alternatives
+
+- TextInput - For text
+- SearchInput - For search
+- CurrencyInput - For money
+
+## Label
+
+A label is required, this should be clear and descriptive to guide the user.
+
+## Disabled and Read-only
+
+Read-only inputs can not be edited, but remain focusable, and should only be
+used readonly when presenting already submitted information. They differ from
+disabled inputs, as there may be actions a user can take to activate a disabled
+input, but read-only fields should stay undeditable in the same view.
+
+```tsx
+<Flex direction="column" gap="400">
+  <PasswordInput {...args} label="Disabled" disabled helperText="Please enter you username first" />
+  <PasswordInput {...args} label="Read only" readOnly value="password123" />
+</Flex>
+```
+
+## Validation
+
+The input `validationStatus` can be set to either `"valid"` or `"invalid"` to
+indicate the status. This status must be accompanied by a validation text to
+explain the reason for the status.
+
+```tsx
+<Flex direction="column" gap="400">
+  <PasswordInput
+    {...args}
+    label="Password"
+    value="password123"
+    validationStatus="valid"
+    validationText="Strong password"
+  />
+  <PasswordInput
+    {...args}
+    label="Password"
+    value="short"
+    validationStatus="invalid"
+    validationText="Please enter a password with at least 73 characters"
+  />
+</Flex>
+```
+
+## Autocomplete
+
+Use the `autocomplete` attribute on password inputs to help users complete forms
+faster.
+
+Autocomplete indicates to browsers and password managers what kind of password
+is needed so it can be entered for the user.
+
+Set the autocomplete attribute to `new-password` if the user is creating a
+password. Otherwise, use `current-password`.
+
+## API
+
+This component is based on the `TextInput` component and supports the following common props:
+
+- Margin
+
+| Prop               | Type                                                                                                                                                                                                       | Default | Description                                                                 |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------- |
+| `label`            | `string`                                                                                                                                                                                                   | —       | The label for the form field, describing its purpose.                       |
+| `defaultValue`     | `string \| number`                                                                                                                                                                                         | —       | The initial value of the input when rendered.                               |
+| `value`            | `string \| number`                                                                                                                                                                                         | —       | The controlled value of the input. Must be used with an `onChange` handler. |
+| `labelId`          | `string`                                                                                                                                                                                                   | —       |                                                                             |
+| `helperTextId`     | `string`                                                                                                                                                                                                   | —       |                                                                             |
+| `validationTextId` | `string`                                                                                                                                                                                                   | —       |                                                                             |
+| `labelVariant`     | `"body" \| "heading"`                                                                                                                                                                                      | —       | Change the label variant                                                    |
+| `helperText`       | `string`                                                                                                                                                                                                   | —       | Optional helper text to provide additional context or instructions.         |
+| `validationText`   | `string`                                                                                                                                                                                                   | —       | Text to display when the `validationStatus` is set.                         |
+| `validationStatus` | `"valid" \| "invalid"`                                                                                                                                                                                     | —       | Indicates the validation status.                                            |
+| `margin`           | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                             |
+| `marginTop`        | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                             |
+| `marginRight`      | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                             |
+| `marginBottom`     | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                             |
+| `marginLeft`       | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                             |
+| `marginX`          | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                             |
+| `marginY`          | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                                                                             |

package/public/llms/components/progress-bar.md

@@ -0,0 +1,139 @@
+# ProgressBar
+
+`ProgressBar` displays the progress of a task or process in a linear bar format, with support for different visual states.
+
+```tsx
+<Flex direction="column" gap="400" width="600px">
+  <ProgressBar {...args} variant="linear" value={args.value || value} />
+  <Flex gap="400">
+    <ProgressBar {...args} variant="circular" value={args.value || value} size="md" />
+    <ProgressBar {...args} variant="circular" value={args.value || value} size="sm" />
+  </Flex>
+</Flex>
+```
+
+## Label
+
+A label is required, this should be clear and descriptive to guide the user.
+
+The `hideLabel` prop will visually hide the label but keep it available for screen readers.
+
+## Variants
+
+Use the `variant` prop to display either a `linear` or `circular` progress bar.
+
+```tsx
+<Flex gap="800" backgroundColor="secondary" padding="300" alignItems="center">
+  <ProgressBar variant="linear" label="Linear progress bar" value={30} />
+  <ProgressBar variant="circular" label="circular" value={30} />
+</Flex>
+```
+
+## Color scheme
+
+The `colorScheme` prop controls the visual appearance of the progress bar.
+
+- `default` - Use to communicate general progress - This is the most common use case.
+- `danger` - Use to alert the user of a negative status, like exceeding a data limit or running out of time.
+- `success` - Use to indicate that a goal has been reached or a task is complete. This will also automatically set the value to the maximum.
+
+```tsx
+<Flex direction="column" gap="400">
+  <ProgressBar variant="linear" label="Upload progress" value={90} />
+  <ProgressBar variant="linear" label="Completed tasks" colorScheme="success" value={100} />
+  <ProgressBar variant="linear" label="Storage usage" colorScheme="danger" value={10} />
+  <Flex gap="400">
+    <ProgressBar variant="circular" label="Upload" value={90} />
+    <ProgressBar variant="circular" label="Completed" colorScheme="success" value={100} />
+    <ProgressBar variant="circular" label="Storage" colorScheme="danger" value={10} />
+  </Flex>
+</Flex>
+```
+
+## Size
+
+The `circular` variant offers a responsive size prop. The label will only be
+displayed with the `md` size, with the `sm` size only displaying the value
+text.
+
+```tsx
+<Flex gap="400" alignItems="center" padding="300" backgroundColor="secondary">
+  <ProgressBar variant="circular" label="circular" value={30} />
+  <ProgressBar variant="circular" size="sm" label="circular" value={30} />
+  <ProgressBar
+    variant="circular"
+    size={{ mobile: 'sm', desktop: 'md' }}
+    label="responsive"
+    value={30}
+  />
+</Flex>
+```
+
+## Value
+
+The `value` prop accepts a number between the `min` (default is 0) and the
+`max` (default is 100). Values outside this range will be automatically
+clamped.
+
+## Value text
+
+The value will also be rendered in a user-friendly format, a percentage by
+default. You can override this by passing a function to the `formatValueText`
+prop.
+
+```tsx
+<ProgressBar
+  label="Storage usage"
+  value={value}
+  max={max}
+  formatValueText={(value: number) => `${value / max}GB / ${max}GB`}
+/>
+```
+
+```tsx
+<Flex direction="column" gap="400">
+  <ProgressBar
+    variant="linear"
+    label="Storage usage"
+    value={87}
+    formatValueText={(value: number) => `${value / 10}GB / 10GB`}
+  />
+
+  <ProgressBar
+    variant="circular"
+    label="files"
+    value={15}
+    max={50}
+    formatValueText={(value: number) => `${value}/50`}
+  />
+</Flex>
+```
+
+For screenreaders, you can also use the `aria-valuetext` prop to provide a
+user-friendly name for `aria-valuenow`, the current value of the meter.
+
+## API
+
+This component is based on the `div` element and supports the following common props:
+
+- Margin
+
+| Prop              | Type                                                                                                                                                                                                       | Default     | Description                                                                           |
+| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------- |
+| `label`           | `string`                                                                                                                                                                                                   | —           | The required text label. Can be visually hidden with the `hideLabel` prop.            |
+| `variant`         | `"linear" \| "circular"`                                                                                                                                                                                   | —           |                                                                                       |
+| `colorScheme`     | `"default" \| "success" \| "danger"`                                                                                                                                                                       | `'default'` | Set the visual apearance.                                                             |
+| `size`            | `Responsive<"sm" \| "md">`                                                                                                                                                                                 | `md`        | Sets the circular variant size. Does not affect the appearance of the linear variant. |
+| `value`           | `number`                                                                                                                                                                                                   | —           | The current progress value.                                                           |
+| `min`             | `number`                                                                                                                                                                                                   | `0`         | The minimum value.                                                                    |
+| `max`             | `number`                                                                                                                                                                                                   | `100`       | The maximum value.                                                                    |
+| `hideLabel`       | `boolean`                                                                                                                                                                                                  | —           | Visually hide the label.                                                              |
+| `formatValueText` | `((value: number) => string)`                                                                                                                                                                              | —           | Override the default percentage value label formatting                                |
+| `aria-valuetext`  | `string`                                                                                                                                                                                                   | —           | A human-readable text alternative for the current value (`aria-valuenow`).            |
+| `margin`          | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —           |                                                                                       |
+| `marginTop`       | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —           |                                                                                       |
+| `marginRight`     | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —           |                                                                                       |
+| `marginBottom`    | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —           |                                                                                       |
+| `marginLeft`      | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —           |                                                                                       |
+| `marginX`         | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —           |                                                                                       |
+| `marginY`         | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —           |                                                                                       |

package/public/llms/components/progress-stepper.md

@@ -0,0 +1,147 @@
+# ProgressStepper
+
+Use the `ProgressStepper` component to show users their progress through a multi-step process.
+
+- [Usage](#usage)
+- [Step states](#step-states)
+- [Accessability](#accessability)
+- [API](#api)
+
+```tsx
+<Flex direction="column" gap="400">
+  <BodyText weight="bold">Step {currentStep + 1} Content</BodyText>
+  <ProgressStepper {...args}>
+    <ProgressStep status={getStatus(0)} label="Customer data" />
+    <ProgressStep status={getStatus(1)} label="Shipping data" />
+    <ProgressStep status={getStatus(2)} label="Payment data" />
+    <ProgressStep status={getStatus(3)} label="Summary" />
+  </ProgressStepper>
+  <Flex gap="200">
+    <Button
+      disabled={currentStep === 0}
+      onClick={() => {
+        if (currentStep > 0) setCurrentStep(s => s - 1);
+      }}
+    >
+      Prev
+    </Button>
+    <Button
+      disabled={currentStep === 3}
+      onClick={() => {
+        if (currentStep < 3) setCurrentStep(s => s + 1);
+      }}
+    >
+      Next
+    </Button>
+  </Flex>
+</Flex>
+```
+
+## Usage
+
+There are 3 step components for different scenarios. Do not mix these step
+types, they should not be used together.
+
+- `ProgressStep` is a static step
+- `ProgressStepButton` is an interactive step for use when the step requires an action
+- `ProgressStepLink` is an interactive step for use when the step requires navigation
+
+Wrap the steps in a `ProgressStepper` components.
+
+```tsx
+<ProgressStepper>
+  <ProgressStep status="complete" label="Customer data"/>
+  <ProgressStep status="complete" label="Shipping data"/>
+  <ProgressStep status="active" label="Payment data"/>
+  <ProgressStep status="incomplete" label="Summary"/>
+</ProgressStepper>
+
+[...]
+
+<ProgressStepper>
+  <ProgressStepLink status="complete" href="#customer-data" label="Customer data" />
+  <ProgressStepLink status="complete" href="#shipping-data" label="Shipping data" />
+  <ProgressStepLink status="active" href="#payment-data" label="Payment data" />
+  <ProgressStepLink status="incomplete" label="Summary" />
+</ProgressStepper>
+
+[...]
+
+<ProgressStepper >
+  <ProgressStepButton status="complete" label="Customer data" onClick={setStep('shipping')} />
+  <ProgressStepButton status="complete" label="Shipping data" onClick={setStep('payment')} />
+  <ProgressStepButton status="active" label="Payment data" onClick={setStep('summary')} />
+  <ProgressStepButton status="incomplete" label="Summary" />
+</ProgressStepper>
+```
+
+## Step states
+
+Each step can have one of three states:
+
+- `complete`
+- `active`
+- `incomplete`
+
+The `ProgressStepButton` and `ProgressStepLink` components will render a static
+step when they have an `active` status.
+
+To prevent users interacting with a `ProgressStepButton` or `ProgressStepLink`
+component, use the `disabled` prop. This will prevent click events and remove
+the href attribute.
+
+## Step Labels
+
+Each step requires a label, this should be clear and descriptive to guide the user.
+
+The `hideLabels` prop will visually hide the step labels but keep them available for screen readers.
+
+## Accessability
+
+- Use the `as` prop to render the stepper as `nav` when it represents site/app navigation; otherwise use the default `div`.
+- Add `name` to `ProgressStepper` when using `nav` as element and having multiple navigations on the page.
+- Any `aria-label` value passed to a progress step will be appended to the default `aria-label`.
+
+## API
+
+This component is based on the `div` element and supports the following common props:
+
+- Margin
+
+| Prop           | Type                                                                                                                                                                                                       | Default | Description                 |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------- |
+| `hideLabels`   | `boolean`                                                                                                                                                                                                  | `false` | Whether to hide step labels |
+| `margin`       | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                             |
+| `marginTop`    | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                             |
+| `marginRight`  | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                             |
+| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                             |
+| `marginLeft`   | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                             |
+| `marginX`      | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                             |
+| `marginY`      | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | —       |                             |
+| `as`           | `"div" \| "nav"`                                                                                                                                                                                           | —       |                             |
+
+### ProgressStep API
+
+| Prop     | Type                                     | Default | Description                            |
+| -------- | ---------------------------------------- | ------- | -------------------------------------- |
+| `label`  | `string`                                 | —       | The label text to display for the step |
+| `status` | `"complete" \| "active" \| "incomplete"` | —       | The current status of the step         |
+
+### ProgressStepLink API
+
+This component is based on the `a` element.
+
+| Prop      | Type                                     | Default | Description                                                                                          |
+| --------- | ---------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| `label`   | `string`                                 | —       | The label text to display for the step                                                               |
+| `status`  | `"complete" \| "active" \| "incomplete"` | —       | The current status of the step                                                                       |
+| `asChild` | `boolean`                                | —       | Change the default rendered element for the one passed as a child, merging their props and behavior. |
+
+### ProgressStepButton API
+
+This component is based on the `button` element.
+
+| Prop     | Type                                     | Default | Description                            |
+| -------- | ---------------------------------------- | ------- | -------------------------------------- |
+| `label`  | `string`                                 | —       | The label text to display for the step |
+| `status` | `"complete" \| "active" \| "incomplete"` | —       | The current status of the step         |