@primer/react-brand 0.69.1-rc.0a4e5ff5 → 0.70.0-rc.11ae3568

package/docs/forms/TextInput/index.md

@@ -0,0 +1,221 @@
+---
+title: Text input
+description: Use the text input component for single-line text field.
+keywords: ['input', 'form']
+figma: 'https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=1377%3A30676'
+source: https://github.com/primer/brand/blob/main/packages/react/src/forms/TextInput/TextInput.tsx
+storybook: '/brand/storybook/?path=/story/components-forms-textinput--playground'
+---
+
+```js
+import {TextInput} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<TextInput aria-label="Demo TextInput" />
+```
+
+### Variants
+
+```jsx
+<div
+  style={{
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 290px), 1fr))',
+    gap: '20px',
+    maxWidth: '600px',
+    width: '100%',
+  }}
+>
+  <FormControl fullWidth>
+    <FormControl.Label>Text (default)</FormControl.Label>
+    <TextInput type="text" placeholder="alphanumeric" />
+  </FormControl>
+  <FormControl fullWidth>
+    <FormControl.Label>Number</FormControl.Label>
+    <TextInput type="number" placeholder="123" />
+  </FormControl>
+  <FormControl fullWidth>
+    <FormControl.Label>Email</FormControl.Label>
+    <TextInput type="email" autoComplete="email" placeholder="mona@github.com" />
+  </FormControl>
+  <FormControl fullWidth>
+    <FormControl.Label>Password</FormControl.Label>
+    <TextInput type="password" autoComplete="current-password" value="monalisa" />
+  </FormControl>
+  <FormControl fullWidth>
+    <FormControl.Label>Month</FormControl.Label>
+    <TextInput type="month" />
+  </FormControl>
+  <FormControl fullWidth>
+    <FormControl.Label>Telephone</FormControl.Label>
+    <TextInput type="tel" autoComplete="tel" />
+  </FormControl>
+  <FormControl fullWidth>
+    <FormControl.Label>Time</FormControl.Label>
+    <TextInput type="time" />
+  </FormControl>
+  <FormControl fullWidth>
+    <FormControl.Label>Date</FormControl.Label>
+    <TextInput type="date" />
+  </FormControl>
+  <FormControl fullWidth>
+    <FormControl.Label>Date (local)</FormControl.Label>
+    <TextInput type="datetime-local" />
+  </FormControl>
+  <FormControl fullWidth>
+    <FormControl.Label>URL</FormControl.Label>
+    <TextInput type="url" autoComplete="url" value="https://github.com" />
+  </FormControl>
+</div>
+```
+
+### Use with `FormControl`
+
+Use `TextInput` alongside `FormControl` to ensure the control always has a corresponding form label.
+
+[See FormControl for additional usage examples.](../FormControl/index.md)
+
+```jsx
+<FormControl>
+  <FormControl.Label>First name</FormControl.Label>
+  <TextInput autoComplete="given-name" />
+</FormControl>
+```
+
+### Placeholder
+
+```jsx
+<FormControl fullWidth>
+  <FormControl.Label>First name</FormControl.Label>
+  <TextInput placeholder="Mona" autoComplete="given-name" />
+</FormControl>
+```
+
+### Autocomplete
+
+The `autoComplete` prop should be provided wherever possible to allow browsers to autofill the input field. See MDN for [a complete list of autocomplete values](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).
+
+```jsx
+<FormControl fullWidth>
+  <FormControl.Label>First name</FormControl.Label>
+  <TextInput autoComplete="given-name" />
+</FormControl>
+```
+
+### Validation
+
+```jsx
+<div style={{display: 'inline-grid', gap: 3}}>
+  <FormControl validationStatus="error">
+    <FormControl.Label>Error</FormControl.Label>
+    <TextInput />
+    <FormControl.Validation>This is an error message</FormControl.Validation>
+  </FormControl>
+  <FormControl validationStatus="success">
+    <FormControl.Label>Success</FormControl.Label>
+    <TextInput />
+    <FormControl.Validation>This is a success message</FormControl.Validation>
+  </FormControl>
+</div>
+```
+
+### Full width
+
+```jsx
+<TextInput fullWidth aria-label="Full width TextInput" />
+```
+
+### Sizes
+
+`FormControl` can appear in `medium` (default) and `large` dimensions using the `size` prop.
+
+```jsx
+<div style={{display: 'inline-grid', gap: 3}}>
+  <TextInput size="medium" aria-label="Medium TextInput" />
+
+  <TextInput size="large" aria-label="Large TextInput" />
+</div>
+```
+
+### Required
+
+Pass the `required` prop to ensure that the input field must be filled out before submitting the form.
+
+```jsx
+<TextInput required aria-label="Required TextInput" />
+```
+
+### Using `refs`
+
+`TextInput` inputs can be used in [uncontrolled mode](https://reactjs.org/docs/uncontrolled-components.html) by forwarding a `ref` to the underlying element.
+
+```jsx filename="noinline"
+const App = () => {
+  const inputRef = React.useRef(null)
+
+  const handleSubmit = e => {
+    e.preventDefault()
+    if (!inputRef.current.value) {
+      alert(`Enter a value and try again.`)
+      return
+    }
+
+    alert(`Name: ${inputRef.current.value}`)
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div
+        style={{
+          display: 'grid',
+          gap: 'var(--base-size-16)',
+          maxWidth: 400,
+          marginX: 'auto',
+        }}
+      >
+        <FormControl fullWidth>
+          <FormControl.Label>Name</FormControl.Label>
+          <TextInput ref={inputRef} />
+        </FormControl>
+        <Button type="submit" variant="primary">
+          Submit
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+render(App)
+```
+
+## Component props
+
+`TextInput` provides a React alternative to the native HTML `<input>` in single-line mode.
+
+The component API supports all standard HTML attribute props, while providing some additional behaviour as described below.
+
+### TextInput `Required`
+
+| Name               | Type                                                                                                                | Default | Description                                                  |
+| :----------------- | :------------------------------------------------------------------------------------------------------------------ | :-----: | :----------------------------------------------------------- |
+| `children`         | `'TextInput.Option' \| 'TextInput.OptGroup'`,                                                                       |         | Valid child nodes                                            |
+| `className`        | `string`                                                                                                            |         | Sets a custom class                                          |
+| `id`               | `string`                                                                                                            |         | Sets a custom id                                             |
+| `fullWidth`        | `boolean`                                                                                                           |         | Stretches elements visually to the edges of its parent div.  |
+| `ref`              | `React.RefObject`                                                                                                   |         | Forward a Ref to the underlying DOM node                     |
+| `size`             | `'medium' \| 'large'`                                                                                               |         | Visual dimensions for the input                              |
+| `type`             | `'text' \| 'number' \| 'email' \| 'password' \| 'search' \| 'tel' \| 'url' \| 'date' \| 'time' \| 'datetime-local'` |  `text` | Alternative text inputs                                      |
+| `validationStatus` | `'error' \| 'success'`                                                                                              |         | Applies visual and semantic state to the underlying elements |
+
+Additional props can be passed to the `<input>` element. [See MDN for a list of props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) accepted by the `<input>` element.
+
+## Related components
+
+- [FormControl](../FormControl/index.md)
+- [Select](../Select/index.md)
+- [TextInput](./index.md)

package/docs/forms/index.md

@@ -0,0 +1,14 @@
+---
+title: Forms
+---
+
+## In this section
+
+- [Checkbox](Checkbox/react.md): Use the checkbox component to select one or more options of a limited number of choices.
+- [Checkbox group](CheckboxGroup/react.md): Checkbox group renders a set of checkboxes.
+- [Form control](FormControl/index.md): Use the form control component to display form inputs alongside labels, validation and more.
+- [Radio](Radio/react.md): Use the radio component when a user needs to select one option from a list.
+- [Radio group](RadioGroup/react.md): Radio group is used to render a short list of mutually exclusive options.
+- [Select](Select/index.md): Use the select component to enable selection of one option from a list.
+- [Text input](TextInput/index.md): Use the text input component for single-line text field.
+- [Textarea](TextArea/index.md): Use the textarea component for multi-line text input form fields.

package/docs/getting-started/esm.md

@@ -0,0 +1,49 @@
+---
+title: Getting started
+description: Primer Brand is open-sourced on GitHub and available on npm.
+keywords: ['accessibility', 'introduction', 'simple']
+---
+
+Using ESM, you will load only the React components and CSS you need.
+
+We recommend using ESM if your project uses compatible bundlers or frameworks like Vite or Next.js.
+
+### 1. Install Primer Brand
+
+```shell
+npm install @primer/react-brand
+```
+
+### 2. Import components from the ESM folder
+
+```js
+import {Hero, ThemeProvider} from '@primer/react-brand/esm'
+```
+
+Each component's styles are automatically included when you import the component.
+
+> Do not combine this approach with the global lib/css/main.css import.
+>
+> Choose one approach or the other to avoid loading duplicate styles.
+
+### 3. Import the font assets
+
+The Mona Sans typeface still needs to be loaded separately:
+
+```js
+import '@primer/react-brand/fonts/fonts.css'
+```
+
+### 4. Use the `ThemeProvider`
+
+```js
+import {ThemeProvider} from '@primer/react-brand/esm'
+
+function App() {
+  return (
+    <ThemeProvider>
+      <div>...</div>
+    </ThemeProvider>
+  )
+}
+```

package/docs/getting-started/index.md

@@ -0,0 +1,98 @@
+---
+title: Getting started
+description: Primer Brand is open-sourced on GitHub and available on npm.
+keywords: ['introduction', 'simple', 'get started', 'tutorials']
+---
+
+Primer Brand is [open-sourced on GitHub](https://github.com/primer/brand) and [available on npm](https://www.npmjs.com/package/@primer/react-brand).
+
+### 1. Install Primer Brand
+
+Install Primer Brand with [npm](https://www.npmjs.com/).
+
+```shell
+npm install @primer/react-brand
+```
+
+### 2. Import global stylesheets
+
+Primer Brand requires a global stylesheet to be loaded ahead-of-time.
+
+> Refer to [this separate guide if you are using an ESM-compatible bundler](./esm.md). Component styles are included
+> with the React component imports.
+
+#### a. Using an application bundler (e.g. Webpack)
+
+Import the `main` stylesheet at the earliest rendering opportunity:
+
+```js
+import '@primer/react-brand/lib/css/main.css'
+```
+
+or
+
+#### b. Using a static stylesheet
+
+Load the static stylesheet if you're unable to import stylesheets using a bundler
+
+```html
+<link href="https://unpkg.com/browse/@primer/react-brand@<version>/lib/css/main.css" rel="stylesheet" />
+```
+
+### 3. (Optional) Import the custom font assets
+
+Primer Brand references the `Mona Sans` typeface, which will need to be loaded alongside the main stylesheet.
+
+```js
+import '@primer/react-brand/fonts/fonts.css'
+```
+
+or
+
+```html
+<link href="https://unpkg.com/browse/@primer/react-brand@<version>/fonts/fonts.css" rel="stylesheet" />
+```
+
+### 4. Use the ThemeProvider
+
+You must add the `ThemeProvider` to the root of your application for theming to work correctly.
+
+E.g.
+
+```js
+import {ThemeProvider} from '@primer/react-brand'
+
+function App() {
+  return (
+    <ThemeProvider>
+      <div>...</div>
+    </ThemeProvider>
+  )
+}
+```
+
+### 5. Import components
+
+Components can be imported into any React-based application.
+
+E.g.
+
+```js
+import {Hero} from '@primer/react-brand'
+```
+
+```jsx
+<Hero>
+  <Hero.Label>Label</Hero.Label>
+  <Hero.Heading>This is my super sweet hero heading</Hero.Heading>
+  <Hero.Description>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
+    felis nam pulvinar risus elementum.
+  </Hero.Description>
+  <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+  <Hero.SecondaryAction href="#">Secondary action</Hero.SecondaryAction>
+</Hero>
+```
+
+> Building with an AI agent? Use the [Primer Brand MCP server](../introduction/mcp.md) to automatically use our
+> components, tokens and patterns correctly.

package/docs/index.md

@@ -0,0 +1,99 @@
+# Primer Brand docs (v0.70.0-rc.11ae3568)
+
+These docs are bundled with `@primer/react-brand@0.70.0-rc.11ae3568` and match your installed version.
+
+New here? Start with [Getting started](getting-started/index.md) for installation, global
+stylesheet and font setup. Component directories are named after their import (e.g.
+`components/Button`), and `react.md` holds the import line, live examples and props.
+
+## Getting started
+
+- [Getting started (ESM)](getting-started/esm.md): Primer Brand is open-sourced on GitHub and available on npm.
+- [Getting started](getting-started/index.md): Primer Brand is open-sourced on GitHub and available on npm.
+
+## Introduction
+
+- [Animation](introduction/animation.md): Use animations to add visual interest and interactivity to a web page or application.
+- [Guides](introduction/index.md): Get started with Primer Brand
+- [MCP server](introduction/mcp.md): Help AI agents use Primer Brand correctly with our Model Context Protocol server.
+- [Theming](introduction/theming.md)
+
+## Primitives
+
+- [Color](primitives/color.md)
+- [Primitives](primitives/index.md): Learn about Primer Brand Primitives
+
+## Layout
+
+- [Box](layout/Box/react.md): Use a box to simplify the process of applying one-off styles to an element
+- [Grid](layout/Grid/react.md): Use the grid component to create flexible and responsive grid-based layouts.
+- [Layout](layout/index.md)
+- [Stack](layout/Stack/react.md): Use the stack component to create a layout for its immediate children along the vertical or horizontal axis.
+
+## Typography
+
+- [Heading](typography/Heading/react.md): Use the heading component to render title or subtitle text.
+- [Text](typography/Text/react.md): Use the text component create a range of body text
+- [Typography](typography/index.md)
+
+## Components
+
+- [Action menu](components/ActionMenu/index.md): Use the action menu component to display a list of actions or selections that expand through a trigger button.
+- [Anchor nav](components/AnchorNav/index.md): Use the anchor nav component for prompt navigation to different sections of a page.
+- [Avatar](components/Avatar/react.md): Use the avatar component to display a thumbnail representation of a person.
+- [Bento](components/Bento/index.md): Use the bento to present content in a responsive grid layout.
+- [Breadcrumbs](components/Breadcrumbs/react.md): Breadcrumbs display the current page within the site's hierarchy, allowing users to easily navigate to a different level.
+- [Breakout banner](components/BreakoutBanner/react.md): Use a breakout banner to break up content on longer pages and highlight important information.
+- [Button](components/Button/react.md): Use the button component for the main actions on a page or form.
+- [Button group](components/ButtonGroup/react.md): Use the button group component to group related buttons together.
+- [Card](components/Card/react.md): Use the card component to display information in a compact way and link to other internal pages.
+- [Comparison table](components/ComparisonTable/index.md): Use the comparison table component to compare two products or features in a table format.
+- [Components](components/index.md): Primer Brand UI components
+- [CTA banner](components/CTABanner/react.md): Use the CTA banner component to highlight and create urgency around user actions.
+- [CTA form](components/CTAForm/react.md): Use the CTA form component to create a form that is used to collect minimal information from users.
+- [Eyebrow banner](components/EyebrowBanner/index.md): Use the eyebrow banner to highlight important information at the top of a page.
+- [FAQ](components/FAQ/react.md): Use the FAQ component to display content in a Q&A format.
+- [Footnotes](components/Footnotes/react.md): Use footnotes to display contextual information and cite sources in the page content.
+- [Hero](components/Hero/react.md): Use the hero component to render a full-width banner at the top of a page.
+- [Icon](components/Icon/index.md): Use the icon component to display Octicons with an optional background
+- [IDE](components/IDE/index.md): Use the IDE to showcase a simulated integrated developer environment, complete with a code editor and AI chat that's intended to enhance code representation in marketing contexts.
+- [Image](components/Image/react.md): Use the image component to display a graphical representation.
+- [Label](components/Label/react.md): Use the label component to add metadata or indicate the status of items.
+- [Logo suite](components/LogoSuite/react.md): Use a logo suite to present a list logos, such as sponsors or vendors.
+- [Media playlist](components/MediaPlaylist/index.md): Use MediaPlaylist to pair thumbnail-backed media items with a shared playback or media area.
+- [Minimal footer](components/MinimalFooter/index.md): Use the minimal footer component to provide a global footer featuring legal links, GitHub logomarks and footnotes.
+- [NavList](components/NavList/index.md): Use NavList to render vertical navigation with optional expandable groups.
+- [Ordered list](components/OrderedList/react.md): Use the ordered list component to display a list of numbered items.
+- [Pagination](components/Pagination/index.md): Use Pagination to display a sequence of links that allow navigation to discrete, related pages.
+- [Pillar](components/Pillar/react.md): Use the pillar component to group related content together.
+- [Pricing options](components/PricingOptions/index.md): Use the pricing options to display pricing plan information on a page.
+- [Prose](components/Prose/index.md): Use the prose component to apply Primer Brand styles to HTML markup.
+- [River](components/River/react.md): Use the river component to introduce a feature using a type and media pairing.
+- [River accordion](components/RiverAccordion/index.md): Use the river accordion to create expandable content panels with associated visuals.
+- [River breakout tabs](components/RiverBreakoutTabs/index.md): Use RiverBreakoutTabs to pair card-based tabs with a shared visual area on desktop and an accordion pattern on narrower viewports.
+- [Section](components/Section/react.md): Use the section component to group related content together.
+- [Section intro](components/SectionIntro/react.md): Use the section intro component to provide a title, optional description and link to a new section in the page.
+- [Section intro stacked](components/SectionIntroStacked/index.md): Use this section intro component to provide a heading, link and itemized content in a stacked layout.
+- [Statistic](components/Statistic/index.md): Use the statistic component display concise numerical information
+- [Sub nav](components/SubNav/index.md): A sub nav is a secondary navigation element, typically positioned beneath a primary navigation.
+- [Subdomain nav bar](components/SubdomainNavBar/index.md): Use the subdomain nav bar component for top level navigation for subdomain sites.
+- [Tabs](components/Tabs/index.md): Use Tabs to display a list of tabs with associated content panels.
+- [Testimonial](components/Testimonial/react.md): Use testimonial to display a quote from a customer or user.
+- [Tiles](components/Tiles/index.md): Use tiles to display a grid of logos or icons with optional links.
+- [Timeline](components/Timeline/index.md): Use the timeline component to display a list of connected items as a vertical timeline.
+- [Token](components/Token/index.md): Token is a compact representation of an object, and is typically used to show a collection of related metadata.
+- [Tooltip](components/Tooltip/index.md): Use the tooltip component to display a short message when a user hovers or focuses an interactive element.
+- [Unordered list](components/UnorderedList/react.md): Use the unordered list component to present a collection of items without specific ordering.
+- [Video player](components/VideoPlayer/index.md): Use the video player component to enable playback of self-hosted videos
+
+## Forms
+
+- [Checkbox](forms/Checkbox/react.md): Use the checkbox component to select one or more options of a limited number of choices.
+- [Checkbox group](forms/CheckboxGroup/react.md): Checkbox group renders a set of checkboxes.
+- [Form control](forms/FormControl/index.md): Use the form control component to display form inputs alongside labels, validation and more.
+- [Forms](forms/index.md)
+- [Radio](forms/Radio/react.md): Use the radio component when a user needs to select one option from a list.
+- [Radio group](forms/RadioGroup/react.md): Radio group is used to render a short list of mutually exclusive options.
+- [Select](forms/Select/index.md): Use the select component to enable selection of one option from a list.
+- [Text input](forms/TextInput/index.md): Use the text input component for single-line text field.
+- [Textarea](forms/TextArea/index.md): Use the textarea component for multi-line text input form fields.

package/docs/introduction/animation.md

@@ -0,0 +1,127 @@
+---
+title: Animation
+storybook: '/brand/storybook/?path=/story/components-animations--playground'
+description: Use animations to add visual interest and interactivity to a web page or application.
+options:
+  disablePageAnimation: true
+---
+
+### Animate component
+
+You can alternatively compose animations into your React application using the `Animate` wrapper component. This can be useful in situations where you need to animate native HTML elements, or components that don't support the `animate` prop.
+
+```js
+import {Animate} from '@primer/react-brand'
+```
+
+```js
+<AnimationProvider>
+  <Animate animate="fade-in">
+    <Text>This text will fade-in</Text>
+  </Animate>
+</AnimationProvider>
+```
+
+### AnimationProvider
+
+An `AnimationProvider` is first required to enable animations on the page. This component should wrap specific parts of your application code, or the entire app.
+The `AnimationProvider` assumes responsibility for triggering animations and automatically applying effects such as staggering.
+
+By default, the `AnimationProvider` will stagger animations in order of DOM appearance. This behavior can be turned off by setting `autoStaggerChildren` to `false`.
+
+The increment delta can also be increased or decreased using `staggerDelayIncrement`, which is set to 100ms by default.
+
+```js
+import {AnimationProvider} from '@primer/react-brand'
+```
+
+## Examples
+
+Animations should be used sparingly. The examples below demonstrate some valid use-cases.
+
+### River
+
+Apply animation to `River.Content` instead of the entire element.
+
+```jsx
+<AnimationProvider>
+  <River>
+    <River.Visual>
+      <img src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
+    </River.Visual>
+    <River.Content animate="slide-in-right">
+      <Heading>Heading</Heading>
+      <Text>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
+        felis nam pulvinar risus elementum.
+      </Text>
+      <Link href="#">Call to action</Link>
+    </River.Content>
+  </River>
+</AnimationProvider>
+```
+
+### Cards and staggering
+
+`AnimationProvider` automatically applies a delay increment to all `children` that have `animation` presets defined. Extend the duration of each delay using `staggerDelayIncrement`.
+
+Alternatively, use `delay` to stagger animations on adjacent elements if this feature is toggled off.
+
+```jsx
+<Grid>
+  <Grid.Column
+    span={{
+      xsmall: 12,
+      large: 6,
+    }}
+  >
+    <Animate animate="scale-in-up">
+      <Card href="https://github.com">
+        <Card.Icon icon={CopilotIcon} color="indigo" hasBackground />
+        <Card.Heading>Collaboration is the key to DevOps success</Card.Heading>
+        <Card.Description>Everything you need to know about getting started with GitHub Actions.</Card.Description>
+      </Card>
+    </Animate>
+  </Grid.Column>
+  <Grid.Column
+    span={{
+      xsmall: 12,
+      large: 6,
+    }}
+  >
+    <Animate animate="scale-in-up">
+      <Card href="https://github.com">
+        <Card.Icon icon={RocketIcon} hasBackground color="blue" />
+        <Card.Heading>GitHub Actions cheat sheet and more</Card.Heading>
+        <Card.Description>In a recent study, 70% of organizations reported they had adopted DevOps.</Card.Description>
+      </Card>
+    </Animate>
+  </Grid.Column>
+</Grid>
+```
+
+### Immediate animations
+
+Use `animationTrigger="immediate"` to run animations as soon as the component mounts
+
+```jsx
+<AnimationProvider animationTrigger="immediate">
+  <Heading animate="fade-in">This heading animates in immediately</Heading>
+</AnimationProvider>
+```
+
+See Storybook for more examples of animation.
+
+## Props
+
+### AnimationProvider `Required`
+
+| Name                    | Type        | Default              | Required | Description                                                                                  |
+| ----------------------- | ----------- | -------------------- | -------- | -------------------------------------------------------------------------------------------- |
+| `children`              | `ReactNode` |                      | `true`   | The children to render within the `AnimationProvider`                                        |
+| `disableAnimations`     | `boolean`   |                      | `false`  | Prevents animations from running inside the provider                                         |
+| `animationTrigger`      |             | `'on-visible'`       | `false`  | Controls the trigger method for the animation. One of `click`, `on-visible`, or `immediate`. |
+| `visibilityOptions`     |             | `'bottom-of-screen'` | `false`  | Controls the intersection observer options for the animation.                                |
+| `runOnce`               | `boolean`   | `false`              | `false`  | Will persist the animation end-state after the animation has completed.                      |
+| `autoStaggerChildren`   | `boolean`   | `true`               |          | Will stagger the animations of the children using an incrementing delay                      |
+| `staggerDelayIncrement` | `number`    | `100`                |          | Stagger delay increment. Should be used alongside `autoStaggerChildren`.                     |

package/docs/introduction/index.md

@@ -0,0 +1,10 @@
+---
+title: Guides
+description: Get started with Primer Brand
+---
+
+## In this section
+
+- [Animation](animation.md): Use animations to add visual interest and interactivity to a web page or application.
+- [MCP server](mcp.md): Help AI agents use Primer Brand correctly with our Model Context Protocol server.
+- [Theming](theming.md)