open-index/open-npm huggingface dataset:
npm package: @spark-web/stepper
Description: --- title: Stepper ---
Latest version: 0.0.0

---
title: Stepper
---

## Example

```jsx live
<Stepper label="New finance application" activeIndex={2}>
  <Step heading="Product details" />
  <Step heading="Contact details" />
  <Step heading="Confirm your eligibility" />
  <Step heading="Household details" />
  <Step heading="Payment details" />
</Stepper>
```

## Props

### Stepper

| Prop        | Type                                   | Default | Description                                                                   |
| ----------- | -------------------------------------- | ------- | ----------------------------------------------------------------------------- |
| activeIndex | number                                 |         | Sets the index of the active step.                                            |
| children    | Array\<ReactElement\<StepProps>>       |         | Children elements to be rendered within the component. Expected to be `Step`. |
| data?       | [DataAttributeMap][data-attribute-map] |         | Sets data attributes on the component.                                        |
| label?      | string                                 |         | Describes the purpose of the navigation to users of assistive technology.     |

### Step

| Prop              | Type                                   | Default | Description                                            |
| ----------------- | -------------------------------------- | ------- | ------------------------------------------------------ |
| children          | ReactNode                              |         | Children elements to be rendered within the component. |
| data?             | [DataAttributeMap][data-attribute-map] |         | Sets data attributes on the component.                 |
| status?           | "active" \| "waiting" \| "declined"    |         | Status of the step (when active).                      |
| heading           | string                                 |         | Heading of the step.                                   |
| secondaryHeading? | string                                 |         | Secondary heading of the step.                         |

[data-attribute-map]:
  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
npm package: @spark-web/switch
Description: --- title: Switch storybookPath: forms-switch--default isExperimentalPackage: false ---
Latest version: 5.0.3

---
title: Switch
storybookPath: forms-switch--default
isExperimentalPackage: false
---

A Switch is a binary toggle control that represents on/off states. Built on top
of `@radix-ui/react-switch` for full accessibility support including keyboard
navigation, ARIA attributes, and screen reader announcements.

## Examples

### Controlled

Switches can be both controlled and uncontrolled. To control a switch provide
the `checked` state with a value you control, as well as an `onCheckedChange`
function to set the new value when the switch is toggled.

```jsx live
const [checked, setChecked] = React.useState(false);

return (
  <Stack gap="large">
    <Switch checked={checked} onCheckedChange={setChecked}>
      <Text>Enable feature</Text>
    </Switch>
    {checked && <Text>Feature is enabled</Text>}
  </Stack>
);
```

### Size

Switches are available in two sizes: `small` and `medium`.

```jsx live
<Stack gap="large">
  <Fieldset legend="Switch variations (small)" gap="large">
    <Switch size="small" checked={false}>
      Unchecked
    </Switch>
    <Switch size="small" checked>
      Checked
    </Switch>
    <Switch size="small" disabled>
      Disabled
    </Switch>
    <Switch size="small" checked disabled>
      Checked + disabled
    </Switch>
  </Fieldset>
  <Divider />
  <Fieldset legend="Switch variations (medium)" gap="large">
    <Switch size="medium" checked={false}>
      Unchecked
    </Switch>
    <Switch size="medium" checked>
      Checked
    </Switch>
    <Switch size="medium" disabled>
      Disabled
    </Switch>
    <Switch size="medium" checked disabled>
      Checked + disabled
    </Switch>
  </Fieldset>
</Stack>
```

### Message and tone

The `message` is used to communicate the status of a field, such as an error
message. This will be announced on focus and can be combined with a `tone` to
illustrate intent. The supported tones are: `critical`, `positive` and
`neutral`.

```jsx live
<Fieldset legend="Message and tone" gap="large">
  <Switch message="Critical message" tone="critical">
    Critical
  </Switch>
  <Switch message="Positive message" tone="positive">
    Positive
  </Switch>
  <Switch message="Neutral message" tone="neutral">
    Neutral
  </Switch>
</Fieldset>
```

## Props

### Switch

<PropsTable displayName="Switch" />

[data-attribute-map]:
  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1