@atom-learning/components 2.32.2 → 2.33.0

package/dist/docs/Stepper.mdx

@@ -1,154 +0,0 @@
----
-title: Stepper
-component: Stepper, Stepper.StepBack, Stepper.StepForward, Stepper.Steps
-description: Stepper provides a bullet list of steps and forward/backwards navigation buttons.
-category: Navigation
----
-
-`Stepper` exports multiple components that combine to create a stepped progress view.
-
-`Stepper.StepBack` represents the backwards navigation element. It can receive either a child text node or a `label` prop as a function that receives `activeStep` as an argument in order to possibly render different labels based on the current step the user is on. It is automatically disabled while the user is viewing the first step.
-
-`Stepper.StepForward` represents the forward navigation element. It can receive either a child text node or a `label` prop as a function that receives `activeStep` as an argument in order to possibly render different labels based on the current step the user is on. It can receive an onClick prop to override its default behaviour in case some logic or validation needs to be applied before going to the next step.
-
-`Stepper.Steps` holds the actual bullet list. It can receive a `css` prop, allowing for full customization.
-
-The root `Stepper` component must be passed `stepCount` as a number in order to display the desired number of bullet steps. It also takes `onStepChange` as a function that takes `activeStep` as an argument. This can be used to determine what content to display, based on the current step. It can also take `onComplete` as a function that gets called when the user clicks the `StepForward` button while on the last step.
-
-```tsx preview
-<Stepper
-  stepCount={3}
-  css={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr' }}
->
-  <Stepper.StepBack>Back</Stepper.StepBack>
-  <Stepper.Steps />
-  <Stepper.StepForward>Next</Stepper.StepForward>
-</Stepper>
-```
-
-The root `Stepper` component can also take an `allowSkip` prop that allows the user to navigate by clicking the actual bullets. However, navigating by clicking a bullet is only possible if the user has already viewed it by using the `Next` button.
-
-Below is a more complex example that shows how to dynamically render the button labels, get the activeStep in order to potentially use it to determine what content to render based on the current position, and use an `onComplete` function to trigger custom behaviour when the user reaches the final step.
-
-```tsx preview
-<Stepper
-  stepCount={3}
-  allowSkip
-  onComplete={() => console.log('Finished')}
-  onStepChange={(activeStep) =>
-    console.log('Do something with the active step')
-  }
-  css={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr' }}
->
-  <Stepper.StepBack label={(activeStep) => 'Back'} />
-  <Stepper.Steps />
-  <Stepper.StepForward
-    label={(activeStep) => (activeStep === 2 ? 'Finish' : 'Next')}
-  />
-</Stepper>
-```
-
-Below is how to override the forward default behavior if some logic or validation need to be done before moving to the next step
-
-```tsx preview
-<Stepper
-  stepCount={3}
-  css={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr' }}
->
-  <Stepper.StepBack>Back</Stepper.StepBack>
-  <Stepper.Steps />
-  <Stepper.StepForward
-    onClick={(goToNextStep) => {
-      // do something before
-      goToNextStep()
-    }}
-  >
-    Next
-  </Stepper.StepForward>
-</Stepper>
-```
-
-The root `Stepper` component also allows the user to pass a `steps` prop in order to render step labels. When the `steps` prop is passed, the `Stepper` component will be used as a controlled component thereby taking control of its state. When used as a controlled component, navigation across steps, and identifying the state of a step would be controlled by the array of steps passed to the component.
-
-Below is an example that shows how to use the controlled component. Each object in the `steps` array must include a `label` and a `status` property to determine what content to render based on the current position.
-
-```tsx preview
-<Stepper
-  steps={[
-    {
-      label: 'Step 1',
-      status: 'viewed'
-    },
-    {
-      label: 'Step 2',
-      status: 'active'
-    },
-    {
-      label: 'Step 3',
-      status: 'default'
-    }
-  ]}
->
-  <Stepper.Steps />
-</Stepper>
-```
-
-The root `Stepper` component also allows the user to pass a `hideLabels` prop in order to hide step labels passed in the `step` object.
-
-Below is an example that shows how to hide step labels
-
-```tsx preview
-<Stepper
-  steps={[
-    {
-      label: 'Step 1',
-      status: 'viewed'
-    },
-    {
-      label: 'Step 2',
-      status: 'active'
-    },
-    {
-      label: 'Step 3',
-      status: 'default'
-    }
-  ]}
-  hideLabels={true}
->
-  <Stepper.Steps />
-</Stepper>
-```
-
-The root `Stepper` component also allows the user to pass a `showCompletedIcons` prop in order to replace step numbers with tick icons when the step has been completed. This defaults to `false`.
-
-```tsx preview
-<Stepper
-  steps={[
-    {
-      label: 'Step 1',
-      status: 'completed'
-    },
-    {
-      label: 'Step 2',
-      status: 'active'
-    },
-    {
-      label: 'Step 3',
-      status: 'default'
-    }
-  ]}
-  showCompletedIcons
->
-  <Stepper.Steps />
-</Stepper>
-```
-
-The root `Stepper` component also allows the user to pass a `direction` prop in order to the alternate the component direction .
-
-Below is an example that shows how to render steps in vertical direction.
-
-```tsx preview
-<Stepper stepCount={2} direction="vertical">
-  <Stepper.Steps />
-</Stepper>
-```

package/dist/docs/Styling.mdx

@@ -1,85 +0,0 @@
----
-title: Styling
-description: Stitches is our styling library of choice. It leans on modern CSS best practices, has near-zero runtime, and provides a great developer experience
-category: Overview
-priority: 3
----
-
-To read about Stitches in more depth you can refer to the [official documentation](https://stitches.dev/), the information provided here is mainly focused on the choices we made to configure Stitches for the component library.
-
-`@atom-learning/components` exports not only a collection of React components built with Stitches but also the full Stitches library to allow full use of `styled()` and other related methods. This enables you to write more complex components with variants, typed tokens, descendant selectors, keyframe animations and more, some of which are unavailable when using `css`.
-
-When creating a new component alongside the component library we strongly recommend that you utilise the `styled()` function to maintain a consistent component API. This will automatically provide `as` and `css` to the user without any extra configuration, in a way that `<Box />` or another generic layout component wouldn’t.
-
-## Media Queries / Conditions
-
-Stitches also has responsive styles built into its API, we've provided an initial set of mobile-first breakpoints alongside feature queries like `prefers-reduced-motion`.
-
-```ts
-export const conditions = {
-  sm: '(min-width: 550px)',
-  md: '(min-width: 800px)',
-  lg: '(min-width: 1100px)',
-  xl: '(min-width: 1350px)',
-  reducedMotion: '(prefers-reduced-motion)',
-  hover: '(hover: hover)'
-}
-```
-
-You can use these in `styled()` or `css` by prefixing the key with `@`, e.g. `@reducedMotion` or `@xl`
-
-```tsx
-const Section = styled('section', {
-  margin: '$1',
-  padding: '$2',
-  '@md': {
-    margin: '$2',
-    padding: '$3'
-  }
-})
-```
-
-```tsx
-<Text
-  css={{
-    color: '$tonal300',
-    '@md': { color: '$primary' },
-    '@lg': { color: '$primaryDark' }
-  }}
->
-  Hello World
-</Text>
-```
-
-You can also use them to switch [variants](https://stitches.dev/docs/variants)
-
-```tsx
-<Button
-  // change the 'theme' to 'success' when you trigger the 'md' breakpoint
-  theme={{
-    '@initial': 'primary',
-    '@md': 'success'
-  }}
-  // change the 'size' to 'md' when you trigger the 'sm' breakpoint
-  size: {{
-    '@initial': 'sm',
-    '@sm': 'md'
-  }}
->
-  Click me
-</Button>
-```
-
-Read more about responsive styling on the [Stitches docs](https://stitches.dev/docs/responsive-styles)
-
-## Utilities
-
-Stitches enables you to create shorthand utilities to improve the CSS authoring experience within `styled()` or `css`. We have provided an initial set of utilities that should be a useful starting point when composing components with a need to provide contextual layout or styles.
-
-A quick example using `bg` and `size` to create a little blue square.
-
-```tsx preview
-<Box css={{ bg: '$primary', size: 100 }} />
-```
-
-The full list of utilities can be found in the [component library source](https://github.com/Atom-Learning/components/blob/main/src/stitches.ts)

package/dist/docs/Switch.mdx

@@ -1,28 +0,0 @@
----
-title: Switch
-component: Switch
-description: An implementation of the Switch component from Radix with default styling and the css prop
-category: Form primitives
----
-
-The `Switch` component implements [Radix's Switch component](https://radix-ui.com/primitives/docs/components/switch).
-
-Switches are used to toggle application state between two mutually exlusive values. The `Switch` defaults to the "off" state unless it's rendered with the `defaultChecked` prop.
-
-The `Switch` component should not be used to collect form data — use checkboxes or radio buttons for that. Only use `Switch` inside a form if it is serving its primary purpose of toggling some state with immediate effect (e.g. to conditionally render a section of the form).
-
-```tsx preview
-<Switch />
-```
-
-## Disabled state
-
-The `disabled` stated can be set using the `disabled` property.
-
-```tsx preview
-<Switch disabled />
-```
-
-## Accessibility
-
-Adheres to the `switch` [role requirements](https://www.w3.org/TR/wai-aria-1.2/#switch)

package/dist/docs/Table.mdx

@@ -1,146 +0,0 @@
----
-title: Table
-component: Table, Table.Body, Table.Cell, Table.Footer, Table.FooterCell, Table.Header, Table.HeaderCell, Table.Row
-description: The Table component displays a collection of data grouped into rows
-category: Content
----
-
-The `Table` component structure mirrors that of a regular HTML table, with the smaller `Table.Body`, `Table.Cell`, `Table.Footer`, `Table.Header`, `Table.HeaderCell` and `Table Row` components corresponding to the `<tbody>`, `<td>`, `<tfoot>`, `<thead>`, `<th>` and `<tr>` tags, respectively.
-
-```jsx preview
-<Table css={{ width: '500px', mb: '100px' }}>
-  <Table.Header>
-    <Table.Row>
-      <Table.HeaderCell>First Name</Table.HeaderCell>
-      <Table.HeaderCell>Last Name</Table.HeaderCell>
-      <Table.HeaderCell>Age</Table.HeaderCell>
-    </Table.Row>
-  </Table.Header>
-  <Table.Body>
-    <Table.Row>
-      <Table.Cell>Rakim</Table.Cell>
-      <Table.Cell>Jackson</Table.Cell>
-      <Table.Cell>35</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>Evelyn</Table.Cell>
-      <Table.Cell>Smith</Table.Cell>
-      <Table.Cell>27</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>Miguel</Table.Cell>
-      <Table.Cell>Fernandez</Table.Cell>
-      <Table.Cell>52</Table.Cell>
-    </Table.Row>
-  </Table.Body>
-  <Table.Footer>
-    <Table.Row>
-      <Table.FooterCell>Footer 1</Table.FooterCell>
-      <Table.FooterCell>Footer 2</Table.FooterCell>
-      <Table.FooterCell>Footer 3</Table.FooterCell>
-    </Table.Row>
-  </Table.Footer>
-</Table>
-```
-
-## Styling
-
-The default table width is 100% of the parent container, but this and other styles can be overridden with the `css` prop on all components.
-
-Best practice: Due to rendering issues with some browsers, adding borders to `Table.Row` is possible by styling the Table component with `border-collapse: collapse`; however, this practice is generally not recommended. The preferred method for adding borders is applying styles to the `Table.Cell` and `Table.HeaderCell` components.
-
-```jsx preview
-<Table css={{ width: '500px', mt: '100px', ml: '100px' }}>
-  <Table.Header>
-    <Table.Row>
-      <Table.HeaderCell css={{ bg: '$subjectEnglish' }}>
-        First Name
-      </Table.HeaderCell>
-      <Table.HeaderCell css={{ bg: '$subjectEnglish' }}>
-        Last Name
-      </Table.HeaderCell>
-      <Table.HeaderCell css={{ bg: '$subjectEnglish' }}>Age</Table.HeaderCell>
-    </Table.Row>
-  </Table.Header>
-  <Table.Body>
-    <Table.Row>
-      <Table.Cell>Rakim</Table.Cell>
-      <Table.Cell>Jackson</Table.Cell>
-      <Table.Cell>35</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>Evelyn</Table.Cell>
-      <Table.Cell>Smith</Table.Cell>
-      <Table.Cell>27</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>Miguel</Table.Cell>
-      <Table.Cell>Fernandez</Table.Cell>
-      <Table.Cell>52</Table.Cell>
-    </Table.Row>
-  </Table.Body>
-  <Table.Footer>
-    <Table.Row>
-      <Table.FooterCell css={{ fontStyle: 'italic', color: '$subjectEnglish' }}>
-        Footer 1
-      </Table.FooterCell>
-      <Table.FooterCell css={{ fontStyle: 'italic', color: '$subjectEnglish' }}>
-        Footer 2
-      </Table.FooterCell>
-      <Table.FooterCell css={{ fontStyle: 'italic', color: '$subjectEnglish' }}>
-        Footer 3
-      </Table.FooterCell>
-    </Table.Row>
-  </Table.Footer>
-</Table>
-```
-
-## Variants
-
-The `Table` component has 2 size variants that control the row height. The two available sizes are `md`(default) and `lg` which should be used when the table needs to show more than just text, ie: `Button(s)` and `ActionIcon(s)`. The increased height helps keep the elements clickable on smaller screensizes.
-
-```jsx preview
-<Table size="lg" css={{ width: '500px', mt: '100px', ml: '100px' }}>
-  <Table.Header>
-    <Table.Row>
-      <Table.HeaderCell>First Name</Table.HeaderCell>
-      <Table.HeaderCell>Last Name</Table.HeaderCell>
-      <Table.HeaderCell>Age</Table.HeaderCell>
-    </Table.Row>
-  </Table.Header>
-  <Table.Body>
-    <Table.Row>
-      <Table.Cell>Rakim</Table.Cell>
-      <Table.Cell>Jackson</Table.Cell>
-      <Table.Cell>35</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>Evelyn</Table.Cell>
-      <Table.Cell>Smith</Table.Cell>
-      <Table.Cell>27</Table.Cell>
-    </Table.Row>
-  </Table.Body>
-</Table>
-```
-
-The `Table` component by default renders with a slight border radius. If you want to remove this, for example if you are rendering the `Table` inside another component that has border radius, you can remove this by setting `corners="square"`. The default is `corners="round"`.
-
-```tsx
-<Table corners="square">...</Table>
-```
-
-`Table.Header` accepts a theme prop, the current available options are `primary`, `primaryDark`, and `light`. The default is `primaryDark`.
-
-```tsx
-<Table>
-  <Table.Header theme="light">...</Table.Header>
-</Table>
-```
-
-`Table.Body` accepts an appearance prop, which determines whether the rows will be alternate coloured or not. The current options are `striped` and `simple`, and the default is `striped`.
-
-```tsx
-<Table>
-  <Table.Body appearance="simple">...</Table.Body>
-</Table>
-```

package/dist/docs/Tabs.mdx

@@ -1,76 +0,0 @@
----
-title: Tabs
-component: Tabs,TriggerListWrapper,TabTrigger
-description: Tabs is a component that provides different sections of content that are displayed one at a time.
-category: Layout
----
-
-Functionality based on the [`Tab`](https://www.radix-ui.com/docs/primitives/components/tabs) radix component, which already allows for: controlled/uncontrolled tabbing, disabling or partly disabling options, adds keyboard navigation and orientation and more.
-
-Implements experimental ColorScheme component to allow multiple colour setups.
-
-```tsx preview
-<Tabs defaultValue="tab2">
-  <Tabs.TriggerList>
-    <Tabs.Trigger value="tab1">
-      Nested component under the Tabs.Trigger component
-    </Tabs.Trigger>
-    <Tabs.Trigger value="tab2">Simple text</Tabs.Trigger>
-  </Tabs.TriggerList>
-  <Tabs.Content css={{ p: '$3' }} value="tab1">
-    <Text>Content for tab1.</Text>
-  </Tabs.Content>
-  <Tabs.Content css={{ p: '$3' }} value="tab2">
-    <Text>
-      Content for the second tab. It can also hold other components, like a
-    </Text>
-    <Button>Button</Button>
-  </Tabs.Content>
-</Tabs>
-```
-
-## Disabled
-
-A `Tabs.Trigger` component can take a `disabled` prop, which would make it unselectable.
-The corresponding `Tabs.Content` component's content will be, in this case, permanently hidden.
-
-```tsx preview
-<Tabs defaultValue="tab1">
-  <Tabs.TriggerList>
-    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
-    <Tabs.Trigger value="tab2" disabled>
-      Tab 2
-    </Tabs.Trigger>
-  </Tabs.TriggerList>
-  <Tabs.Content css={{ p: '$3' }} value="tab1">
-    <Text>Content for tab1.</Text>
-  </Tabs.Content>
-  <Tabs.Content css={{ p: '$3' }} value="tab2">
-    <Text>Content for tab2.</Text>
-  </Tabs.Content>
-</Tabs>
-```
-
-## Color Scheme
-
-You can pass in a `colorScheme` object to the TriggerList to customise the colours of the component.
-Defaults to `{ base: "slate", accent: "blue", interactive: "hiContrast1"}`
-ColorScheme is experimental and has been implemented only locally but you can read more about how it
-currently works and available options [on the repository's github](https://github.com/Atom-Learning/components/tree/main/lib/src/experiments/color-scheme#readme).
-
-```tsx preview live
-<Tabs defaultValue="tab2">
-  <Tabs.TriggerList
-    colorScheme={{ base: 'slate', accent: 'slate', interactive: 'hiContrast2' }}
-  >
-    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
-    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
-  </Tabs.TriggerList>
-  <Tabs.Content css={{ p: '$3' }} value="tab1">
-    <Text>Content for tab1.</Text>
-  </Tabs.Content>
-  <Tabs.Content css={{ p: '$3' }} value="tab2">
-    <Text>Content for tab2.</Text>
-  </Tabs.Content>
-</Tabs>
-```

package/dist/docs/Text.mdx

@@ -1,24 +0,0 @@
----
-title: Text
-component: Text
-description: Text is our basic component for rendering text, use it for any non-heading text
-category: Content
----
-
-## Sizes
-
-[Capsize](https://seek-oss.github.io/capsize/) is used to size the text to the height of its capital letters, trimming the space above capital letters and below the baseline.
-
-```tsx preview
-<Text size="sm">
-  Anything smaller than body text. E.g. "forgot your password?" prompts
-</Text>
-```
-
-```tsx preview
-<Text>Body text. Most text in the app will use this.</Text>
-```
-
-```tsx preview
-<Text size="lg">Large, non-heading text. E.g. a drop quote in an article</Text>
-```

package/dist/docs/Textarea.mdx

@@ -1,12 +0,0 @@
----
-title: Textarea
-component: Textarea
-description: Textarea is the lowest-level textarea component for longer text
-category: Form primitives
----
-
-Textareas should be accompanied by labels, so rather than using `Textarea` directly in a UI, it’s normally best to use a `field` component, which combines an `Textarea` with a `Label` and displays validation errors. If none of the existing field components suit your needs, it might be worth adding a new one.
-
-```tsx live
-<Textarea placeholder="Placeholder text" css={{ width: 340 }} />
-```

package/dist/docs/TextareaField.mdx

@@ -1,21 +0,0 @@
----
-title: Textarea Field
-component: TextareaField
-description: TextareaField renders a field composed of a Textarea, a Label and a InlineMessage
-category: Form fields
----
-
-TextareaField is the preferred way to render a form field for multi-line text.
-
-In addition to text `Label` (required) and a validation error (optional), TextareaField accepts all the same props as `Textarea` and will pass them on to the `textarea` it renders. However, as with all our composed components, `TextareaField`’s css prop will be applied to a containing Box — the styling of the individual components inside `TextareaField` cannot be altered.
-
-```tsx preview
-<Form>
-  <TextareaField
-    label="Write something"
-    name="example"
-    id="example"
-    css={{ width: 320 }}
-  />
-</Form>
-```

package/dist/docs/Toast.mdx

@@ -1,20 +0,0 @@
----
-title: Toast
-component: ToastProvider
-description: A toast notification that gives non-intrusive feedback to the user and times out automatically
-category: Feedback
----
-
-`Toast` has 2 exports, the `ToastProvider` component which is the container for all the notifications and the `toast` function that allows triggering the notification. It sets all the default behaviour, like pausing on hover and positioning and styles the different types of notification (`blank` (default), `error` and `success`).
-
-This is the preferred user feedback way as it is not intrusive and it simply provides some state information to the user without waiting for feedback, ie: the information was saved. When feedback is required consider using the `AlertDialog` component.
-
-```tsx preview
-<ToastProvider>
-  <Button onClick={() => toast.success('This is the toast message')}>
-    Click for toast
-  </Button>
-</ToastProvider>
-```
-
-This component can render a string message by default. However, it can be overriden to show more complex component structure [Render more than a string](https://react-hot-toast.com/docs/toast). For more information on other configuration options and props, please read about the underlying behaviour at [react-hot-toast](https://react-hot-toast.com/)

package/dist/docs/ToggleGroup.mdx

@@ -1,88 +0,0 @@
----
-title: Toggle Group
-component: ToggleGroupRoot,ToggleGroup.Button,ToggleGroup.Item
-description: Extends functionality the Toggle Group radix component
-category: Content
----
-
-Lets users toggle between a group of limited options(Suggested range is 2-6 options).
-
-Functionality based on the [`ToggleGroup`](https://www.radix-ui.com/docs/primitives/components/toggle-group) radix component, which already allows for: single/multiple select, disabling or partly disabling options, adds keyboard navigation and orientation and more.
-
-Extends visually by allowing for different sizing, vertical/horizontal display and gaps using the Stack component. When there is no gap, rounds the border for _only_ the edge/outer corners.
-
-## Orientation
-
-`orientation="vertical | horizontal"`
-
-```jsx preview live
-<ToggleGroup.Root type="multiple" orientation="vertical">
-  <ToggleGroup.Button value="a">A</ToggleGroup.Button>
-  <ToggleGroup.Button value="b">B</ToggleGroup.Button>
-</ToggleGroup.Root>
-```
-
-## Gap
-
-`gap={0 | 1 | 2 | ... | 9}`
-
-```jsx preview
-<ToggleGroup.Root type="single" gap={3}>
-  <ToggleGroup.Button value="a">A</ToggleGroup.Button>
-  <ToggleGroup.Button value="b">B</ToggleGroup.Button>
-</ToggleGroup.Root>
-```
-
-## Size
-
-`size="sm | md | lg"`
-
-```jsx preview
-<ToggleGroup.Root type="single" gap={3}>
-  <ToggleGroup.Button value="a" size="sm">
-    <Icon is={Upload} /> A
-  </ToggleGroup.Button>
-  <ToggleGroup.Button value="b" size="sm">
-    B
-  </ToggleGroup.Button>
-  <ToggleGroup.Button value="icon" size="sm">
-    <Icon is={Upload} />
-  </ToggleGroup.Button>
-</ToggleGroup.Root>
-```
-
-## Full width
-
-`isFullWidth={boolean}`
-
-```jsx preview
-<ToggleGroup.Root type="multiple" isFullWidth gap={3}>
-  <ToggleGroup.Button value="a">A</ToggleGroup.Button>
-  <ToggleGroup.Button value="b">B</ToggleGroup.Button>
-  <ToggleGroup.Button value="c">C</ToggleGroup.Button>
-</ToggleGroup.Root>
-```
-
-## Disabled
-
-### Partly
-
-```jsx preview
-<ToggleGroup.Root type="multiple" gap={3} defaultValue="a">
-  <ToggleGroup.Button value="a">A</ToggleGroup.Button>
-  <ToggleGroup.Button value="b">B</ToggleGroup.Button>
-  <ToggleGroup.Button value="c" disabled>
-    C
-  </ToggleGroup.Button>
-</ToggleGroup.Root>
-```
-
-### Fully
-
-```jsx preview
-<ToggleGroup.Root type="multiple" gap={3} defaultValue="a" disabled>
-  <ToggleGroup.Button value="a">A</ToggleGroup.Button>
-  <ToggleGroup.Button value="b">B</ToggleGroup.Button>
-  <ToggleGroup.Button value="c">C</ToggleGroup.Button>
-</ToggleGroup.Root>
-```