Behive Tech

A small status label with semantic color variants.

A flexible button component with variants, sizes, loading and disabled states.

A surface container with configurable padding and an optional header (icon + title + an `action` slot).

A bare checkbox control (built on Radix's `Checkbox`) — the Radix checkbox button is this component's own root element. It has no built-in label/hint/error; wrap it in `FormField` for that chrome.

A `Card` docked to one edge of the viewport as a slide-in panel, built on [Radix `Dialog`](https://www.radix-ui.com/primitives/docs/components/dialog) for focus trapping, Escape-to-close, and outside-click-to-close. It has no opinion on what goes inside the panel — an optional `title` renders a header with a close button, otherwise just the `children` are shown.

TODO: Add component description.

A hand-authored, stroke-based SVG icon set behind a single `Icon` component — the same idea as `@ant-design/icons`/`@mui/icons-material`, but self-contained (no new dependency). Icons use `stroke="currentColor"`, so they inherit color from whatever text color is in scope.

A `Card` centered in the viewport with a dimmed backdrop that blocks interaction with the rest of the page, built on [Radix `Dialog`](https://www.radix-ui.com/primitives/docs/components/dialog) for focus trapping, Escape-to-close, and outside-click-to-close. It has no opinion on what goes inside the panel — an optional `title` renders a header with a close button, otherwise just the `children` are shown.

A single navigation link with an optional leading icon and active state. The `active` modifier is applied on the component's own root element (per BEM), so it can be dropped into any nav/sidebar layout.

A bare select control (built on Radix's `Select`) — the Radix trigger button is this component's own root element. It has no built-in label/hint/error; wrap it in `FormField` for that chrome.

A dumb, styled sidebar shell — sticky, full-height, scrollable flex container. It renders an `<aside>` and applies no internal structure; the consumer is responsible for composing whatever goes inside (logo, nav, `NavItem`s, etc.).

A loading spinner with size variants and accessible labeling.

TODO: Add component description.

A bare text input — the native `<input>` is this component's own root element. It has no built-in label/hint/error; wrap it in `FormField` for that chrome. Works standalone too — not every input needs the full form suite.

A bare multi-line text input — the native `<textarea>` is this component's own root element. It has no built-in label/hint/error; wrap it in `FormField` for that chrome. Works standalone too — not every textarea needs the full form suite.

TODO: Add component description.

A bare toggle/switch control (built on Radix's `Switch`) — the Radix switch button is this component's own root element. It has no built-in label/hint/error; wrap it in `FormField` for that chrome.

Names a control on hover and on keyboard focus, built on [`@radix-ui/react-tooltip`](https://www.radix-ui.com/primitives/docs/components/tooltip).

TODO: Add component description.

A generic centered placeholder for empty lists, grids, or search results: an optional icon, a description, and an optional action. Modeled on AntD's `Empty` — reusable anywhere something has nothing to show yet.

TODO: Add component description.

TODO: Add component description.

TODO: Add component description.

A dumb CSS Grid skeleton with sidebar, topbar, and content regions. It has no opinion on what the sidebar or topbar contain — the elements passed in are responsible for their own `grid-area: sidebar` / `grid-area: topbar` placement (e.g. via `@behivetech/atoms.sidebar`).

Dumb wrapper that provides label + hint/error + required-marker layout around any form control (`Checkbox`, `Input`, `Textarea`, `Select`, `Toggle`, ...) — the same job AntD's `Form.Item` does. The control itself owns none of this chrome; it just needs an `id` matching `htmlFor`.

`FormField` with its react-hook-form wiring already done — the control's value/onChange/onBlur/ref, the label association, and the error message.

The single place `react-hook-form` is imported directly in this repo. Everything else should import form state/control from here instead of `react-hook-form` — that keeps the underlying library swappable from one spot later.

A utility for generating BEM-style class names with support for CSS modules, modifiers, and child elements.