import { Meta, Story, Canvas, Controls } from "@storybook/blocks";
import * as BpAwarePropsStories from "./use-bp-aware-prop.stories";

<Meta of={BpAwarePropsStories} />

# useBpAwareProp

This hook extracts the correct value from a `BpAware` typed property. If such a value has not been defined it will return a user supplied default value.

```typescript
import { useBpAwareProp } from "@chromia/ui-kit";
import type { BpAware } from "@chromia/ui-kit";
```

The generic `BpAware<T>` type allows a primitive (`string | number | boolean`) to be expressed as an object where the
keys are the breakpoints defined in the configuration of `createStitches`. Together with `useBpAwareProp` it essentially
allows non-stitches props to become “Breakpoint aware”. However, it is currently not as flexible as the same
functionality provided by stitches as it will not find the nearest smaller breakpoint and use the configuration
related to it.

## Usage

```typescript
const propValue = useBpAwareProp(bpAwareProp, "default value");
```

### Return Value

<Controls />

## Demo

In this example we have a component that has a `BpAware` prop called `content`. The component is used as shown in the code block below.
Since the `content` for `@s` and `@m` has been defined it will change according to the current breakpoint. For all other breakpoints
the component will show the `defaultContent`.

```typescript
<UiKitComponent
  content={{ "@s": "small bp prop", "@m": "medium bp prop" }}
  defaultContent="default prop"
/>
```

<Canvas style={{ background: "#1F1A23" }}>
  <Story id="hooks-usebpawareprop--default" />
</Canvas>