import {
  Meta,
  Title,
  Subtitle,
  Canvas,
  Controls,
  Story,
  Source,
} from '@storybook/addon-docs/blocks'
import * as LabelStories from './Label.stories'
import { LifecycleTag, SourceLinks } from '../../docs/components'

<Meta title="Form/Label" of={LabelStories} />

<Title>Label</Title>
<Subtitle>
  The Label component is used to display concise text labels for UI elements,
  forms, or informational purposes. It supports different sizes and can be
  composed with other components like tooltips.
</Subtitle>

<SourceLinks
  links={[
    {
      label: 'shadcn/ui',
      href: 'https://ui.shadcn.com/docs/components/label',
    },
  ]}
/>
<LifecycleTag variant="Stable" />

<Canvas of={LabelStories.Default} layout="padded" sourceState="shown" />
<Controls />

## Usage

To use the `Label` component, import it from the `@chainlink/blocks` package and use it as follows:

```tsx
import { Label } from '@chainlink/blocks'

export const MyLabel = () => {
  return <Label>My Label</Label>
}
```

### Size

Labels can be rendered in a smaller size using `size="sm"`.

<Canvas of={LabelStories.Small} sourceState="shown" />
<Source of={LabelStories.Small} />

### Label with Information Tooltip

Labels can be composed with `InfoTooltip` to provide additional context or information. `InfoTooltip` is a wrapper around `TooltipContent` and accepts `TooltipContentProps` for customization, allowing you to control aspects like the tooltip's `side`, `align`, and whether to `hideArrow`.

<Canvas of={LabelStories.WithInfoTooltip} sourceState="shown" />

<Canvas of={LabelStories.WithCustomInfoTooltip} sourceState="shown" />

### Rendering as a different element

The `Label` component can also be used to style other elements to look like a label, without rendering a semantic `<label>` tag. This is useful for creating titles or headers that need to maintain visual consistency with form labels but are not directly associated with a form input.

To do this, use the `asChild` prop. This will cause the `Label` to render its direct child, merging its own styles and props.

<Canvas of={LabelStories.AsChild} sourceState="shown" />