);
}
```
### Drawer + nested Menu
```tsx
import { Button, Drawer, Menu } from "takeat-design-system-ui-kit";
import { IconMenu } from "takeat-design-system-ui-kit/icons";
import { useState } from "react";
const navItems = [
{ label: "Dashboard", path: "/dashboard" },
{ label: "Orders", path: "/orders" },
{ label: "Products", path: "/products" },
];
export function AppShell() {
const [open, setOpen] = useState(false);
return (
<>
setOpen(false)} side="left">
);
}
```
### Dashboard layout — Grid + CollapsableMenu + Toolbar
```tsx
import {
CollapsableMenu,
ColumnsGrid,
Grid,
GridArea,
Toolbar,
} from "takeat-design-system-ui-kit";
export function DashboardShell({ children }: { children: React.ReactNode }) {
return (
FilterExport{children}
);
}
```
## Composition
Most components accept standard HTML props and forward refs. Compound components use dot-notation:
```tsx
// Drawer sub-components
......
// Modal sub-components
......
// Toolbar sub-components
Action
```
## Migration notes
- v1.1+: `Button` accepts `icon` + `aria-label` for icon-only buttons (no `children` required).
- v1.1+: `Drawer` side prop locks direction during close animation — reset on close is safe.
- `FieldInfo` is deprecated — use `Field.Error` / `Field.Description` from `@base-ui/react/field`.
## Don'ts
- **Don't import icons from the root barrel** — use `takeat-design-system-ui-kit/icons/IconName` or the icons namespace export.
- **Don't use `onChange` on Switch or Select** — use `onCheckedChange` (Switch) or `onValueChange` (Select, RadioGroup).
- **Don't wrap Modal trigger with `cloneElement`** — use the `open`/`toggle` props directly.
- **Don't pass hex literals as color props** — use `vars.colors.*` from the theme (e.g. `vars.colors.primary.default`).
- **Don't use `style={{ color: "#c8131b" }}`** — prefer theme tokens so dark mode / beta theme work.
- **Don't forget `UiKitTheme` wrapper** — components render without styles if the theme class is absent.
- **Don't set `size` on `Spinner` as a string** — it takes a `number` (pixels).