open-index/open-npm huggingface dataset:
npm package: @spark-web/text-area
Description: --- title: Text Area storybookPath: forms-textarea--default isExperimentalPackage: false ---
Latest version: 6.0.0

---
title: Text Area
storybookPath: forms-textarea--default
isExperimentalPackage: false
---

Allows the user to input plain text spanning multiple lines.

## Usage

### Field

Each text area input must be accompanied by a Field with a label. Effective form
labeling helps inform users the context and information required of the text
area.

## Examples

### Controlled

```jsx live
const [textInput, setTextInput] = React.useState('');

return (
  <Stack gap="large">
    <Field label="Add some text">
      <TextArea
        value={textInput}
        onChange={event => setTextInput(event.target.value)}
      />
    </Field>
    {textInput && (
      <Text>
        You have inputted: “<Strong>{textInput}</Strong>”
      </Text>
    )}
  </Stack>
);
```

### Uncontrolled

```jsx live
const textAreaRef = React.useRef(null);
const [, setKey] = React.useState(0);

return (
  <Stack gap="large">
    <Field label="Add some text">
      <TextArea ref={textAreaRef} placeholder="Add some text" />
    </Field>
    <Button onClick={() => setKey(currentKey => currentKey + 1)}>Submit</Button>
    {textAreaRef.current?.value && (
      <Text>
        You have inputted: “<Strong>{textAreaRef.current.value}</Strong>”
      </Text>
    )}
  </Stack>
);
```

### Disabled

```jsx live
<Stack gap="large">
  <Field label="Disabled" disabled>
    <TextArea placeholder="This textarea is disabled" />
  </Field>
</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
<Stack gap="large">
  <Field label="Critical" message="Critical message" tone="critical">
    <TextArea placeholder="Critical" />
  </Field>
  <Field label="Positive" message="Positive message" tone="positive">
    <TextArea placeholder="Positive" />
  </Field>
  <Field label="Neutral" message="Neutral message" tone="neutral">
    <TextArea placeholder="Neutral" />
  </Field>
</Stack>
```

## Props

<PropsTable displayName="TextArea" />

[data-attribute-map]:
  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
npm package: @spark-web/text-link
Description: --- title: Text Link storybookPath: navigation-textlink--default isExperimentalPackage: true ---
Latest version: 5.4.0

---
title: Text Link
storybookPath: navigation-textlink--default
isExperimentalPackage: true
---

**NOTE:** These components must be nested within a [Text](/package/text) or
[Heading](/package/heading) component.

## TextLink

Text links take users to another place in the application, and usually appear
within or directly following a sentence. Styled to resemble a hyperlink.

```jsx live
<Text>
  This is some text containing a <TextLink href="#">text link</TextLink>
</Text>
```

### Examples

#### Size

The font-size is inherited from the parent [Text](/package/text) component.

```jsx live
<Text size="small">
  A <TextLink href="#">text link</TextLink> inheriting the parent's “small”
  font-size
</Text>
```

#### Custom link

This component renders a native anchor element by default, which can be
customised via the `linkComponent` prop on the [SparkProvider](#todo) component.

### Props

<PropsTable displayName="TextLink" />

The `TextLink` component also extends native HTML `a` anchor props and are not
listed here.

## TextLinkButton

Even though it looks like a text link, this is actually a semantic button.

```jsx live
<Text>
  <TextLinkButton>Visually a link, with button semantics</TextLinkButton>
</Text>
```

### Props

<PropsTable displayName="TextLinkButton" />

The `TextLinkButton` component also extends native HTML `span` 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/text-list
Description: --- title: Text List storybookPath: data-display-textlist--default isExperimentalPackage: false ---
Latest version: 5.1.0

---
title: Text List
storybookPath: data-display-textlist--default
isExperimentalPackage: false
---

List semantics are handled automatically, including the use of ordered lists
where appropriate.

```jsx live
<Columns gap="large">
  <TextList>
    <Text>Bullet</Text>
    <Text>Bullet</Text>
    <Text>Bullet</Text>
  </TextList>
  <TextList type="number">
    <Text>Number</Text>
    <Text>Number</Text>
    <Text>Number</Text>
  </TextList>
  <TextList icon={<CheckCircleIcon size="xxsmall" />}>
    <Text>Icon</Text>
    <Text>Icon</Text>
    <Text>Icon</Text>
  </TextList>
</Columns>
```

## Examples

### Color, size and gap

Lists support the same sizes and colors as [Text](/package/text), and the same
gap as [Stack](/package/stack).

```jsx live
<Columns gap="large">
  <TextList tone="muted" size="large" gap="large">
    <Text>Large</Text>
    <Text>Large</Text>
    <Text>Large</Text>
  </TextList>
  <TextList tone="muted" size="standard" gap="medium">
    <Text>Standard</Text>
    <Text>Standard</Text>
    <Text>Standard</Text>
  </TextList>
  <TextList tone="muted" size="small" gap="small">
    <Text>Small</Text>
    <Text>Small</Text>
    <Text>Small</Text>
  </TextList>
</Columns>
```

### Rich content

Use the [Stack](/package/stack) as a list item to display multiple lines of
text.

```jsx live
<TextList gap="large">
  <Stack gap="medium">
    <Text weight="semibold">This is a paragraph.</Text>
    <Text>This is another paragraph.</Text>
  </Stack>
  <Stack gap="medium">
    <Text weight="semibold">This is a paragraph.</Text>
    <Text>This is another paragraph.</Text>
  </Stack>
</TextList>
```

### Nested lists

Lists of varying types can be nested within each other.

```jsx live
<TextList gap="large" type="number">
  <Stack gap="medium">
    <Text>Number list</Text>
    <TextList>
      <Text>Bullet list</Text>
      <Text>Bullet list</Text>
      <Text>Bullet list</Text>
    </TextList>
  </Stack>
  <Stack gap="medium">
    <Text>Number list</Text>
    <TextList>
      <Text>Bullet list</Text>
      <Text>Bullet list</Text>
      <Text>Bullet list</Text>
    </TextList>
  </Stack>
</TextList>
```

## Props

<PropsTable displayName="TextList" />

The `TextList` component also passes extra props into the component's nested
[`Stack`](/package/stack) component.

[data-attribute-map]:
  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
[stack-props]: /package/stack
[text-props]: /package/text
npm package: @spark-web/theme
Description: --- title: Theme isExperimentalPackage: true ---
Latest version: 5.13.1

---
title: Theme
isExperimentalPackage: true
---

🚧 — Under construction

The theme packages exports a set of objects and utilities that are used
internally to create Spark Web components as well as for consumers to be able to
override

## useGlobalTheme

The `useGlobalTheme` hook returns the name of the theme set in the
`GlobalThemeProvider`. It defaults to _`brighte`_ if there's no value provided.

## useTheme

The `useTheme` hook returns an object with our theme tokens along with a set of
styling utilities.

The theme will always be in the same shape, but the values can be overridden by
[passing in a custom theme to the SparkProvider](/package/core).

Theme tokens differ slightly from the values passed into the provider (or the
defaultTokens if you don't provide a theme) as they are run through the
[decorateTokens](https://github.com/brighte-labs/spark-web/blob/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5/packages/theme/src/make-theme.ts#L101)
function which add some extra values that should never change (and therefore
aren't themeable) as well as using
[Capsize](https://seek-oss.github.io/capsize/) to add tokens we need to trim
space above capital letters and below the baseline so spacing between elements
is consistent and doesn't vary depending on line-height, font-size etc.

For more documentation about our tokens, please see the
[tokens reference page](/reference/tokens).

#### mapResponsiveProp

Returns either the string value of the token provided to it, or an array which
maps to [our breakpoints](/reference/tokens#breakpoint) (where index 0 refers to
the mobile breakpoint, 1 is the tablet breakpoint and so on).

### Theme utils

#### mapResponsiveScale

Helper for mapping keys/breakpoint map to a theme scale e.g.

```jsx
mapResponsiveProp('small', { small: 8, large: 16 }); // 8
mapResponsiveProp(
  { mobile: 'small', tablet: 'large' },
  { small: 8, medium: 12, large: 16 }
); // [8, 16]
```

#### optimizeResponsiveArray

TODO

#### responsiveRange

Designed to be used alongside `optimizeResponsiveArray`.

#### responsiveStyles

TODO

#### resolveResponsiveProps

TODO

## defaultTokens

This is the default tokens for the Brighte theme _before_ they've been
decorated.

## makeSparkTheme

This function

- decorates to passed in tokens
- decorates them
- works out if the background tokens are dark or light
- adds the [theme utils](#theme-utils)

Pass the result of this function into the
[SparkProvider](/package/core#sparkprovider) if you want to override the default
theme.