open-index/open-npm huggingface dataset:
npm package: @spark-web/action-dropdown
Description: A pill-shaped button component that displays a dropdown menu of actions when clicked.
Latest version: 2.0.0

# @spark-web/action-dropdown

A pill-shaped button component that displays a dropdown menu of actions when
clicked.

## Usage

```tsx
import { ActionDropdown } from '@spark-web/action-dropdown';
import type { ActionItem } from '@spark-web/action-dropdown';

const actions: ActionItem<{ id: number }>[] = [
  {
    label: 'Edit',
    value: 'edit',
    onClick: data => console.log('Edit clicked', data),
    data: { id: 1 },
  },
  {
    label: 'Delete',
    value: 'delete',
    onClick: data => console.log('Delete clicked', data),
    data: { id: 1 },
    tone: 'critical',
  },
];

const MyComponent = () => <ActionDropdown label="Actions" actions={actions} />;
```

## ActionItem

Each action is typed as `ActionItem<T>`:

| Prop       | Type                             | Required | Description                                                                                                              |
| ---------- | -------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------ |
| `label`    | `string`                         | Yes      | Display text for the action                                                                                              |
| `value`    | `string`                         | Yes      | Unique identifier for the action                                                                                         |
| `onClick`  | `(item: T \| undefined) => void` | Yes      | Callback invoked when the action is selected                                                                             |
| `data`     | `T`                              | No       | Arbitrary data passed to `onClick`                                                                                       |
| `disabled` | `boolean`                        | No       | Disables the action                                                                                                      |
| `tone`     | `ForegroundTone`                 | No       | Affects the label color — use `'critical'` for destructive actions. `ForegroundTone` is exported from `@spark-web/text`. |
npm package: @spark-web/alert
Description: --- title: Alert storybookPath: feedback-overlays-alert--info isExperimentalPackage: true ---
Latest version: 5.2.0

---
title: Alert
storybookPath: feedback-overlays-alert--info
isExperimentalPackage: true
---

Alert displays a short and concise message to draw a users' attention without
interrupting their current task.

## Examples

### Tones

The component offers several levels of tonal severity.

```jsx live
<Stack gap="large">
  <Alert tone="caution" heading="This is a caution alert">
    Caution message
  </Alert>
  <Alert tone="positive" heading="This is a positive alert">
    Positive message
  </Alert>
  <Alert tone="info" heading="This is an info alert">
    Info message
  </Alert>
  <Alert tone="critical" heading="This is a critical alert">
    Critical message
  </Alert>
</Stack>
```

### Closing

You can also set an `onClose` prop callback function which will render a close
icon button on the alert. The callback function will be called upon the button
being pressed.

```jsx live
const [isOpen, setIsOpen] = React.useState(true);

React.useEffect(() => {
  const timeout = setTimeout(() => {
    if (!isOpen) {
      setIsOpen(true);
    }
  }, 2000);

  return () => clearTimeout(timeout);
}, [isOpen]);

if (!isOpen) {
  return null;
}

return (
  <Alert
    tone="caution"
    heading="This is a caution alert"
    onClose={() => setIsOpen(false)}
  >
    Click the button on the right to dismiss this notification
  </Alert>
);
```

### Custom icons

In rare cases, you may need to provide a custom icon. To do so, we expose an
`icon` prop. You can pass it any icon from the [Icon package](/package/icon).

```jsx live
<Alert heading="This an info alert" icon={LightBulbIcon}>
  Did you know that Alert components can have custom icons?
</Alert>
```

## Props

<PropsTable displayName="Alert" />

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

---
title: Checkbox
storybookPath: forms-checkbox--default
isExperimentalPackage: false
---

Checkboxes are used to toggle between checked and unchecked states — usually in
a form. If only one option from a list is allowed to be enable, consider using a
`RadioButton` instead.

## Examples

### Controlled

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

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

return (
  <Stack gap="large">
    <Checkbox
      checked={checked}
      onChange={event => setChecked(event.target.checked)}
    >
      <Text>{checked ? 'Hide' : 'Show'} message</Text>
    </Checkbox>
    {checked && <Text>Toggle the checkbox to hide this message</Text>}
  </Stack>
);
```

### Size

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

```jsx live
<Stack gap="large">
  <Fieldset legend="Checkbox variations (small)" gap="large">
    <Checkbox size="small" checked={false}>
      Unchecked
    </Checkbox>
    <Checkbox size="small" checked>
      Checked
    </Checkbox>
    <Checkbox size="small" disabled>
      Disabled
    </Checkbox>
    <Checkbox size="small" checked disabled>
      Checked + disabled
    </Checkbox>
  </Fieldset>
  <Divider />
  <Fieldset legend="Checkbox variations (medium)" gap="large">
    <Checkbox size="medium" checked={false}>
      Unchecked
    </Checkbox>
    <Checkbox size="medium" checked>
      Checked
    </Checkbox>
    <Checkbox size="medium" disabled>
      Disabled
    </Checkbox>
    <Checkbox size="medium" checked disabled>
      Checked + disabled
    </Checkbox>
  </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">
  <Checkbox message="Critical message" tone="critical">
    Critical
  </Checkbox>
  <Checkbox message="Positive message" tone="positive">
    Positive
  </Checkbox>
  <Checkbox message="Neutral message" tone="neutral">
    Neutral
  </Checkbox>
</Fieldset>
```

## Props

### Checkbox

<PropsTable displayName="Checkbox" />

The `Checkbox` component also extends `InputHTMLAttributes` props and are not
listed here.

### CheckboxPrimitive

<PropsTable displayName="CheckboxPrimitive" />

The `CheckboxPrimitive` component also extends `InputHTMLAttributes` props and
are not listed here.

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

---
title: Container
storybookPath: page-layout-container--default
isExperimentalPackage: false
---

The container centers and constrains the maximum width of the content it wraps.

```jsx live
<Container size="small">
  <Placeholder height={64} />
</Container>
```

## Examples

### Size

Use the `size` prop to adjust the maximum width of the container.

```jsx live
<Stack gap="large">
  <Container size="xsmall">
    <Placeholder label="xsmall" height={64} />
  </Container>
  <Container size="small">
    <Placeholder label="small" height={64} />
  </Container>
  <Container size="medium">
    <Placeholder label="medium" height={64} />
  </Container>
  <Container size="large">
    <Placeholder label="large" height={64} />
  </Container>
</Stack>
```

## Props

<PropsTable displayName="Container" />

[data-attribute-map]:
  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
[brighte-theme]:
  https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/makeTheme.ts#L158
npm package: @spark-web/core
Description: --- title: Core isExperimentalPackage: true ---
Latest version: 5.2.0

---
title: Core
isExperimentalPackage: true
---

🚧 — Under construction

## SparkProvider

The SparkProvider component is a
[Context provider](https://reactjs.org/docs/context.html#contextprovider) to
provide functionality for the following things:

- **A theme provider** allows for overriding the default theme
- **A link component provider** allows for passing in a custom link component
  (created with the `makeLinkComponent` function in `@spark-web/link`) that will
  be using internally by `Link`, `ButtonLink` and `TextLink` (useful for
  creating links that use client-side transitions instead of full page refreshes
  like [next/link](https://nextjs.org/docs/api-reference/next/link)) does. For a
  reference take a look at the source for
  [UniversalNextLink](/package/next-utils#universal-next-link)
- An id provider for generating unique ids. This will be deprecated in a future
  release once the design system has been upgraded to React 18.
- A minimal CSS reset
- Calls `useFocusVisible` which we use to show focus rings when navigating with
  keyboard, but _not_ when using a pointing device (such as a mouse or
  trackpad).

## AesteticoStylesheet

Uses Emotion's `Global` component to set a stylesheet to load the Aestetico font
from Brighte's CDN.
npm package: @spark-web/currency-input
Description: --- title: Currency Input storybookPath: forms-currency-input--default isExperimentalPackage: true ---
Latest version: 6.0.0

---
title: Currency Input
storybookPath: forms-currency-input--default
isExperimentalPackage: true
---

Currency input provides a way for inputting money values. Note that this
component is similar to the [`FloatInput`](/package/float-input) component with
the difference that this component has 2 fraction digits enforced and a currency
symbol starting adornment.

## Examples

```jsx live
const [value, setValue] = React.useState(1000);

return (
  <Stack gap="large">
    <Field label="Example controlled">
      <CurrencyInput value={value} onChange={v => setValue(v)} />
    </Field>
    <Text>The current value is: {value}</Text>
  </Stack>
);
```

### Currency Symbol Adornment

You can specify what currency type you'd like for the currency symbol adornment
at the start of the input component. If unspecified, the currency symbol
adornment will default to AUD. Note that the currency codes are references to
the respective currency's
[ISO 4217 currency codes](https://www.iso.org/iso-4217-currency-codes.html).

```jsx live
<Stack gap="large">
  <Field label="Currency symbols">
    <CurrencyInput currencyType="EUR" />
    <CurrencyInput currencyType="RMB" />
    <CurrencyInput currencyType="KRW" />
  </Field>
</Stack>
```

<PropsTable displayName="CurrencyInput" />

Note that `CurrencyInput` also extends [`FloatInput`](/package/float-input)'s
props and are not listed here.

[currency-symbol-type]:
  https://github.com/brighte-labs/spark-web/blob/56249831f3013f4e070eb7b4633447a29cea4ebb/packages/currency-input/src/currencySymbolMap.ts
[data-attribute-map]:
  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1