# Takeat UI Kit

Accessible, themeable React components built on top of [Base UI](https://base-ui.com) and [vanilla-extract](https://vanilla-extract.style). Drop-in design system for Takeat products.

- Tree-shakeable ESM + CJS builds
- `"use client"` banners — works in Next.js App Router
- Per-icon subpath imports (zero-cost icon set)
- A11y validated with `jest-axe` on every component
- Themed via `createThemeContract` — swap brand palettes without remounting

## Install

```bash
# npm
npm install takeat-design-system-ui-kit

# yarn
yarn add takeat-design-system-ui-kit
```

Peer deps (install in the host app):

```bash
yarn add react react-dom @tanstack/react-query axios date-fns
```

## Quick start

Wrap your app with `UiKitTheme` once, then import components:

```tsx
import { UiKitTheme, Button } from "takeat-design-system-ui-kit";
import "takeat-design-system-ui-kit/dist/index.css";

export default function App() {
  return (
    <UiKitTheme>
      <Button onClick={() => console.log("hi")}>Click me</Button>
    </UiKitTheme>
  );
}
```

## Per-component imports

```tsx
import { Button } from "takeat-design-system-ui-kit/button";
```

Tree-shaking is already guaranteed by `sideEffects` declarations, but subpath imports cut parse time in large consumer apps.

## Icons

Import icons individually — each resolves to a ~1–2 KB chunk:

```tsx
import IconArrow from "takeat-design-system-ui-kit/icons/IconArrow";
```

Never import icons from the root barrel — that pulls the full set.

## Theming

```tsx
import { UiKitTheme, createTheme } from "takeat-design-system-ui-kit";

const brandTheme = createTheme({
  colors: { primary: "#FF6B00" },
});

<UiKitTheme theme={brandTheme}>{children}</UiKitTheme>
```

See [theme tokens](./src/theme/themeValues.ts) for the full contract.

## Composition — `render` / `asChild`

Every wrapper forwards Base UI's `render` prop unchanged:

```tsx
<Button render={<a href="/docs" />}>Docs</Button>
```

The `<a>` inherits all Button styling, focus ring, and a11y semantics.

## Migration from the old UI kit

- Callback props now follow Base UI naming: `onValueChange`, `onCheckedChange`, `onOpenChange`. No more `onChange` for Select/Switch.
- `Modal` uses a Context toggle — remove manual `cloneElement` wrappers.
- Icons moved to `takeat-design-system-ui-kit/icons/*` subpaths.
- See per-component MDX docs in Storybook for detailed notes.

## Storybook

Live docs: [storybook.takeat.app](https://storybook.takeat.app) (deployed on merge to `master`).

Local:

```bash
yarn storybook
```

## Contributing

See [`CONTRIBUTING.md`](./CONTRIBUTING.md). TL;DR — add a changeset, write a test, respect Base UI callback names.

## License

MIT © Takeat