import { Canvas, Controls, Meta } from '@storybook/blocks'
import { KAIOInstallation, ResourceLinks } from '~storybook/components'
import * as exampleStories from './Focusable.stories'

<Meta title="Components/Focusable/API Specification" />

# Focusable API Specification

Updated June 25, 2024

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Focusable"
  className="mt-16 !mb-8"
/>

<KAIOInstallation exportNames={['Focusable']} />

## Overview

Focusable is a utility wrapper to allow users to add focus to a non-focusable element.

The main use case is for non semantic components like `Tag` that need a [Tooltip](/docs/components-tooltip-usage-guidelines--docs).

<Canvas className="mb-24" of={exampleStories.Playground} />

Be aware that this does not negate the need to meet A11Y standards and best practices. Use this
utility wrapper with caution.

## API

<Controls of={exampleStories.Playground} />