prime-ui-kit 0.10.0 → 0.11.0

package/dist/skill/reference/components/chat/examples/search.tsx

@@ -0,0 +1,61 @@
+/** Search and pinned messages: the search bar marks every match in the texts and transcripts, counts them and steps between them while the others step back; a pinned message's press jumps to it and blinks the others — `Chat.SearchButton`, `Chat.Search`, `defaultSearch`, `Chat.Pinned`. */
+import { Card, Chat, Message, VoicePlayer } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const AUDIO = "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3";
+const WAVE = [0.3, 0.6, 0.4, 0.8, 0.5, 0.9, 0.6, 0.35, 0.7, 0.5, 0.3, 0.6, 0.8, 0.45, 0.25, 0.5];
+
+const PINNED = [{ value: "p1", text: "Реквизиты склада для накладных" }];
+
+const LINES = [
+  "Счёт INV-3010 выставлен, проверьте реквизиты.",
+  "Склад подтвердил отгрузку по заказу №3011.",
+  "Бухгалтерия закрыла акт сверки за неделю.",
+  "Счёт INV-3013 оплачен, закрываю заказ.",
+  "Поставщик прислал новые цены.",
+  "Заказ №3015 собран, ждём курьера.",
+];
+
+export default function ChatSearchExample() {
+  return (
+    <Card.Root className={styles.short}>
+      <Chat.Root defaultSearch="счёт">
+        <Chat.Header>
+          <Chat.Title>Склад и бухгалтерия</Chat.Title>
+          <Chat.Description>4 участника</Chat.Description>
+          <Chat.Actions>
+            <Chat.SearchButton />
+          </Chat.Actions>
+        </Chat.Header>
+        <Chat.Search />
+        <Chat.Pinned items={PINNED} />
+        <Chat.Messages>
+          <Message.Root value="p1" time="09:00">
+            <Message.Text>
+              Реквизиты склада для накладных: ИНН 7701234567, КПП 770101001.
+            </Message.Text>
+          </Message.Root>
+          {LINES.map((line, index) => (
+            <Message.Root
+              key={line}
+              value={`l${index}`}
+              direction={index % 3 === 2 ? "outgoing" : "incoming"}
+              time={`10:${String(10 + index).padStart(2, "0")}`}
+            >
+              <Message.Text>{line}</Message.Text>
+            </Message.Root>
+          ))}
+          <Message.Root value="v1" time="11:02">
+            <VoicePlayer
+              src={AUDIO}
+              waveform={WAVE}
+              duration={12}
+              transcript="Счёт на доставку пришлю после обеда."
+            />
+          </Message.Root>
+        </Chat.Messages>
+      </Chat.Root>
+    </Card.Root>
+  );
+}

package/dist/skill/reference/components/chat/examples/structure.tsx

@@ -0,0 +1,28 @@
+/** The list alone, written as parts: `Chat.Root` with only `Chat.Messages`, a date that stays on top while its day scrolls, an event of the chat and the unread band — `Chat.Messages`, `Chat.Separator`, `Chat.Service`, `Chat.Unread`. */
+import { Card, Chat, Message } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function ChatStructureExample() {
+  return (
+    <Card.Root className={styles.short}>
+      <Chat.Root>
+        <Chat.Messages aria-label="Чат проекта «Интеграция с 1С»">
+          <Chat.Separator>12 марта</Chat.Separator>
+          <Chat.Service>Анна Котова добавила Олега Смирнова в чат</Chat.Service>
+          <Message.Root value="row-1" time="10:00">
+            <Message.Text>Олег, добро пожаловать! Вводная — в закреплённом.</Message.Text>
+          </Message.Root>
+          <Message.Root value="row-2" direction="outgoing" time="10:04" status="read">
+            <Message.Text>Спасибо, изучу до обеда.</Message.Text>
+          </Message.Root>
+          <Chat.Separator>Сегодня</Chat.Separator>
+          <Chat.Unread />
+          <Message.Root value="row-3" time="09:41">
+            <Message.Text>Обмен справочниками заработал на тестовой базе.</Message.Text>
+          </Message.Root>
+        </Chat.Messages>
+      </Chat.Root>
+    </Card.Root>
+  );
+}

package/dist/skill/reference/components/checkbox/COMPONENT.md

@@ -0,0 +1,171 @@
+# Checkbox
+
+**Category:** selection
+**Kind:** control
+
+> A checkbox for an independent yes/no choice that submits with a form: checked, indeterminate, with a hint or an error.
+
+## When to use
+- Independent on/off options that are saved together with a form (consents, sets of options).
+- Multi-select in lists and table rows, with a parent «select all» that becomes `indeterminate` on a partial selection.
+- Accepting terms with a required validation message.
+
+## When not to use
+- One choice out of several mutually exclusive options → use [Radio](../radio/COMPONENT.md) or [SegmentedControl](../segmented-control/COMPONENT.md) instead.
+- A setting that applies immediately, without a submit → use [Switch](../switch/COMPONENT.md) instead.
+- Picking several values from a long list in a compact field → use [TagSelect](../tag-select/COMPONENT.md) or [Select](../select/COMPONENT.md) with `multiple` instead.
+- A checkbox look inside an option or menu row that carries `aria-selected` itself → `Checkbox.Indicator`, never a nested `Checkbox.Root`.
+
+## Import
+```tsx
+import { Checkbox } from "prime-ui-kit";
+```
+
+## Anatomy
+```
+Checkbox.Root          field grid; ref and input props go to the native input
+├─ <label> row         the native input, the box and the text (rendered by Root)
+│  └─ Checkbox.Label   the visible text (optional)
+└─ hint | error        support text under the text column (`hint`, `error`)
+
+Checkbox.Indicator     the box alone, no input — a mark inside option / menu rows (used without Root)
+```
+`<Checkbox.Root aria-label="…" />` without `Checkbox.Label` is a valid bare control (table rows).
+
+## API
+
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+### Checkbox.Root
+`ref` → `HTMLInputElement` (the native checkbox). Renders the field `<div>`, the `<label>` row with the input and the box, and the support row. Field-root rule for a leaf: `className` goes to the field `<div>`; `id`, `ref` and native input props to the input.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `checked` | `boolean` | — | Controlled checked state. |
+| `defaultChecked` | `boolean` | `false` | Initial state when uncontrolled. |
+| `onCheckedChange` | `(checked: boolean) => void` | — | Called with the new state on every toggle (not while `readOnly`). |
+| `indeterminate` | `boolean` | `false` | Mixed state (a partial «select all»): a bar instead of the check; wins over `checked` visually and sets the native `indeterminate`. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier of the box, the text and the gap. Without it the tier of its host (a form, a panel, a table), else `m`. |
+| `shape` | `"square" \| "circle"` | `"square"` | Outline of the box: `square` is the rounded square; `circle` is a full circle (a selection mark in lists and chats). Size, the check draw-in, the indeterminate bar and states are the same. |
+| `hint` | `ReactNode` | — | Help text under the label text. Hidden while `error` is shown. |
+| `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
+| `invalid` | `boolean` | `false` | Danger ring on the unchecked box and `aria-invalid`. A non-empty `error` implies it. |
+| `disabled` | `boolean` | `false` | Disabled fill, dimmed label and hint, no toggling. |
+| `readOnly` | `boolean` | `false` | The state is shown and focusable but does not change (`aria-readonly`); no hover or press. The native checkbox ignores `readOnly`, so the root guards the toggle. |
+| `id` | `string` | — | Id of the input (auto-generated when omitted); hint id is `<id>-hint`, error id is `<id>-error`. |
+| `aria-describedby` | `string` | — | Merged before the hint/error ids. |
+| `children` | `ReactNode` | — | `Checkbox.Label`. Without it only the box renders — give the root an `aria-label`. |
+| `className` | `string` | — | Class on the field `<div>`. |
+| `…rest` | `Omit<InputHTMLAttributes<HTMLInputElement>, "type" \| "size" \| "checked" \| "defaultChecked" \| "onChange">` | — | `name`, `value`, `required`, `aria-label`, `onBlur`… on the native input. |
+
+### Checkbox.Label
+`ref` → `HTMLSpanElement`. The visible text in the text column of the label row. Native `<span>` props.
+
+### Checkbox.Indicator
+`ref` → `HTMLSpanElement`. The box alone, without an input (`aria-hidden`, no focus or clicks) for rows that carry the state themselves: `role="option"` + `aria-selected`, `role="menuitemcheckbox"` + `aria-checked`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `checked` | `boolean` | `false` | Shows the check. |
+| `indeterminate` | `boolean` | `false` | Shows the bar; wins over `checked`. |
+| `disabled` | `boolean` | `false` | Disabled fill. |
+| `shape` | `"square" \| "circle"` | `"square"` | Outline of the box: `square` is the rounded square; `circle` is a full circle (a selection mark in lists and chats). The rest is the same. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | — | Box tier; without it the nearest control size (the Select or menu it sits in), else `m`. |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className`, `data-*` and the other span attributes. |
+
+## Variants
+Checkbox has no `variant` / `tone` / `color`.
+
+### shape
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `square` | rounded square (radius from the tier) | forms, settings, tables | yes |
+| `circle` | full circle, the same size, check and states | selection marks in lists and chat messages | |
+
+The circle changes only the outline (`--prime-radius-full`); the check draw-in, the indeterminate bar, focus ring and touch target are the square's. `Checkbox.Indicator` takes the same `shape`.
+
+### size
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `xs` | 14px box, 4px gap, 12/16 text | dense tables, filters in a 28px toolbar | |
+| `s` | 16px box, 8px gap, 13/20 text | compact forms and side panels | |
+| `m` | 18px box, 8px gap, 14/20 text | regular forms and settings | yes |
+| `l` | 20px box, 8px gap, 16/24 text | spacious forms, onboarding | |
+| `xl` | 24px box (radius 6), 12px gap, 16/24 text | touch-first screens | |
+
+**Sizes:** the box is optically centred on the first text line; the text follows the tier text size (12 · 13 · 14 · 16 · 16). Match the checkbox `size` to the fields and buttons of the same form.
+
+### Flags
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `indeterminate` | accent box with a horizontal bar | a parent checkbox over a partially selected group | `false` |
+| `invalid` | danger ring on the unchecked box | the message is shown elsewhere; otherwise pass `error` | `false` |
+| `disabled` | muted box, dimmed text and hint | the option is unavailable | `false` |
+
+**Combinations**
+- `indeterminate` only on a parent checkbox that controls a group; leaf options never use it.
+- `invalid` together with `error` is redundant — the error already sets it.
+- Nested options are indented by the box width plus the gap so they align with the parent text.
+
+## States
+| State | Driven by | DOM |
+|---|---|---|
+| unchecked | `checked={false}` / default | `data-state="unchecked"`; box `fill-strong`, hover `fill-strong-hover` |
+| checked | `checked` / `defaultChecked` | `data-state="checked"`; accent box, the check draws in |
+| indeterminate | `indeterminate` | `data-state="indeterminate"`, `input.indeterminate`; accent box with a bar |
+| invalid | `invalid` or a non-empty `error` | `data-invalid="true"`, `aria-invalid` on the input; danger ring on the unchecked box and on focus; the row shakes once when an error arrives (`data-shake`) |
+| disabled | `disabled` | `data-disabled="true"` on the root; `fill-muted` box, disabled text, `cursor: not-allowed` |
+| read-only | `readOnly` | `aria-readonly="true"` on the input, `data-readonly="true"` on the root; the state stays, no hover or press, default cursor |
+| pressed | pointer press | the box scales to the compact press scale |
+| focus-visible | keyboard focus | outer focus ring around the box |
+
+Root also carries `data-size`; the box carries `data-shape`. Controlled: `checked` + `onCheckedChange`. Uncontrolled: `defaultChecked` (+ optional `onCheckedChange`). There is no native `onChange` prop.
+
+## Layout & spacing
+- Grid `[box][text]`; the hint or error sits under the text column, not under the box.
+- Checkboxes in a vertical list: gap `--prime-space-3`; separate fields: `--prime-space-5`; group → actions `--prime-space-8`.
+- Long labels wrap (`overflow-wrap: anywhere`); the field shrinks to its content with `max-width: 100%`.
+
+## Accessibility
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `Tab` | Moves focus to the checkbox. |
+| `Space` | Toggles it. |
+
+### ARIA
+- A native `<input type="checkbox">` (visually hidden over the box, so validation bubbles point at it), wrapped by the `<label>` row.
+- `aria-invalid` is set when invalid; `aria-describedby` = your ids + the hint or the error id.
+- Without visible text, pass `aria-label` on `Checkbox.Root` (it lands on the input).
+- `required` goes to the native input; no asterisk is drawn — state it in the text or the hint.
+- `Checkbox.Indicator` is `aria-hidden`; the host row carries `aria-selected` / `aria-checked`.
+
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+No `labels`.
+
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | A checkbox with its label; a click anywhere on the row toggles it. |
+| [variants.tsx](examples/variants.tsx) | The rounded square next to the circle, in three states — `shape`. |
+| [sizes.tsx](examples/sizes.tsx) | Every size; the box and the text follow the control tier — `size`. |
+| [states.tsx](examples/states.tsx) | Every state side by side, each labelled by its prop — `checked`, `indeterminate`, `invalid`, `disabled`. |
+| [without-label.tsx](examples/without-label.tsx) | Bare boxes in table rows, named by `aria-label` and submitted with `name` and `value`. |
+| [indicator.tsx](examples/indicator.tsx) | The box alone in a multi-select list: the option row carries `aria-selected`, the box only shows it — `Checkbox.Indicator`. |
+| [controlled.tsx](examples/controlled.tsx) | The parent owns the selection; «select all» turns indeterminate on a partial one — `checked`, `onCheckedChange`, `indeterminate`. |
+| [in-form.tsx](examples/in-form.tsx) | Consent in a sign-up form: a hint under the text, an error after a submit without the tick — `required`, `hint`, `error`. |
+
+## Mistakes
+- `<Checkbox.Root onChange={…}>` → use `onCheckedChange={(checked) => …}`.
+- `<Checkbox.Root>Текст</Checkbox.Root>` → wrap the text in `Checkbox.Label`, so it sits in the text column.
+- `invalid` plus `error` → just pass `error`.
+- Several checkboxes for one-of-many → use `Radio.Group`.
+- A checkbox that saves instantly («Тёмная тема») → use `Switch`.
+- `style` on `Checkbox.Root` expecting to style the field → it goes to the hidden input; use `className`.
+
+## Related
+- **Built from:** [Hint](../hint/COMPONENT.md) (`hint`, `error`); the row is a native `<label>`
+- **See also:** [Radio](../radio/COMPONENT.md), [Switch](../switch/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md); `Checkbox.Indicator` inside [Select](../select/COMPONENT.md) and [TagSelect](../tag-select/COMPONENT.md) rows

package/dist/skill/reference/components/checkbox/examples/controlled.tsx

@@ -0,0 +1,41 @@
+/** The parent owns the selection; «select all» turns indeterminate on a partial one — `checked`, `onCheckedChange`, `indeterminate`. */
+import { Checkbox } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const DOCUMENTS = ["Договор поставки.pdf", "Счёт-фактура №418.pdf", "Акт сверки.xlsx"];
+
+export default function CheckboxControlledExample() {
+  const [selected, setSelected] = React.useState<string[]>([DOCUMENTS[0]]);
+  const all = selected.length === DOCUMENTS.length;
+
+  return (
+    <div className={styles.list}>
+      <Checkbox.Root
+        checked={all}
+        indeterminate={selected.length > 0 && !all}
+        onCheckedChange={(checked) => setSelected(checked ? DOCUMENTS : [])}
+      >
+        <Checkbox.Label>
+          Выбрать все ({selected.length} из {DOCUMENTS.length})
+        </Checkbox.Label>
+      </Checkbox.Root>
+      <div className={styles.nested}>
+        {DOCUMENTS.map((document) => (
+          <Checkbox.Root
+            key={document}
+            checked={selected.includes(document)}
+            onCheckedChange={(checked) =>
+              setSelected((current) =>
+                checked ? [...current, document] : current.filter((item) => item !== document),
+              )
+            }
+          >
+            <Checkbox.Label>{document}</Checkbox.Label>
+          </Checkbox.Root>
+        ))}
+      </div>
+    </div>
+  );
+}

package/dist/skill/reference/components/checkbox/examples/examples.module.css

@@ -0,0 +1,69 @@
+/* Layout of the Checkbox scenarios: semantic tokens only. */
+
+/* without-label.tsx: boxes in one row. */
+.row {
+  display: flex;
+  gap: var(--prime-space-3);
+}
+
+/* controlled.tsx: «select all» above its options. */
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-3);
+}
+
+/* Child options sit under the parent's text column. */
+.nested {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-3);
+  padding-inline-start: calc(var(--prime-control-m-choice) + var(--prime-control-m-gap));
+}
+
+/* in-form.tsx: choices, then actions (group → actions 32). */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-4);
+  width: min(100%, var(--prime-modal-width-s));
+}
+
+.formActions {
+  display: flex;
+  margin-top: var(--prime-space-4);
+}
+
+/* indicator.tsx: a listbox panel with full-width option rows (panel tokens, row hover wash). */
+.optionList {
+  box-sizing: border-box;
+  display: grid;
+  width: min(100%, var(--prime-panel-min-width));
+  padding: var(--prime-panel-padding);
+  border-radius: var(--prime-panel-radius);
+  background: var(--prime-color-layer-floating-bg);
+  box-shadow: var(--prime-shadow-overlay);
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-control-m-gap);
+  min-height: var(--prime-control-m-item-height);
+  padding-inline: var(--prime-control-m-field-padding-x);
+  border-radius: var(--prime-panel-item-radius);
+  cursor: pointer;
+  transition: background-color var(--prime-motion-duration-xfast)
+    var(--prime-motion-easing-standard);
+}
+
+@media (hover: hover) {
+  .option:hover {
+    background: var(--prime-color-fill-subtle);
+  }
+}
+
+.option:focus-visible {
+  outline: var(--prime-focus-width) solid var(--prime-color-focus-ring);
+  outline-offset: var(--prime-focus-offset-inset);
+}

package/dist/skill/reference/components/checkbox/examples/in-form.tsx

@@ -0,0 +1,34 @@
+/** Consent in a sign-up form: a hint under the text, an error after a submit without the tick — `required`, `hint`, `error`. */
+import { Button, Checkbox } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function CheckboxInFormExample() {
+  const [error, setError] = React.useState<string>();
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const accepted = new FormData(event.currentTarget).get("terms") === "on";
+    setError(accepted ? undefined : "Без согласия мы не сможем создать аккаунт");
+  };
+
+  return (
+    <form className={styles.form} noValidate onSubmit={submit}>
+      <Checkbox.Root
+        name="terms"
+        required
+        error={error}
+        onCheckedChange={(checked) => checked && setError(undefined)}
+      >
+        <Checkbox.Label>Принимаю условия оферты</Checkbox.Label>
+      </Checkbox.Root>
+      <Checkbox.Root name="news" hint="Не чаще раза в месяц, отписаться можно в профиле">
+        <Checkbox.Label>Получать новости продукта</Checkbox.Label>
+      </Checkbox.Root>
+      <div className={styles.formActions}>
+        <Button.Root type="submit">Создать аккаунт</Button.Root>
+      </div>
+    </form>
+  );
+}

package/dist/skill/reference/components/checkbox/examples/indicator.tsx

@@ -0,0 +1,54 @@
+/** The box alone in a multi-select list: the option row carries `aria-selected`, the box only shows it — `Checkbox.Indicator`. */
+import { Checkbox, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const CITIES = [
+  { value: "msk", label: "Москва" },
+  { value: "spb", label: "Санкт-Петербург" },
+  { value: "kzn", label: "Казань" },
+];
+
+export default function CheckboxIndicatorExample() {
+  const [selected, setSelected] = React.useState<string[]>(["msk"]);
+
+  const toggle = (value: string) =>
+    setSelected((current) =>
+      current.includes(value) ? current.filter((item) => item !== value) : [...current, value],
+    );
+
+  return (
+    <div
+      role="listbox"
+      aria-label="Города доставки"
+      aria-multiselectable
+      className={styles.optionList}
+    >
+      {CITIES.map((city) => {
+        const isSelected = selected.includes(city.value);
+        return (
+          <div
+            key={city.value}
+            role="option"
+            aria-selected={isSelected}
+            tabIndex={0}
+            className={styles.option}
+            onClick={() => toggle(city.value)}
+            onKeyDown={(event) => {
+              if (event.key === " " || event.key === "Enter") {
+                event.preventDefault();
+                toggle(city.value);
+              }
+            }}
+          >
+            <Checkbox.Indicator checked={isSelected} />
+            <Typography as="span" variant="body-m">
+              {city.label}
+            </Typography>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/dist/skill/reference/components/checkbox/examples/overview.tsx

@@ -0,0 +1,10 @@
+/** A checkbox with its label; a click anywhere on the row toggles it. */
+import { Checkbox } from "prime-ui-kit";
+
+export default function CheckboxOverviewExample() {
+  return (
+    <Checkbox.Root defaultChecked>
+      <Checkbox.Label>Присылать счета на почту</Checkbox.Label>
+    </Checkbox.Root>
+  );
+}

package/dist/skill/reference/components/checkbox/examples/sizes.tsx

@@ -0,0 +1,18 @@
+/** Every size; the box and the text follow the control tier — `size`. */
+import { Checkbox } from "prime-ui-kit";
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
+
+export default function CheckboxSizesExample() {
+  return (
+    <div>
+      {SIZES.map((size) => (
+        <div key={size}>
+          <Checkbox.Root size={size} defaultChecked>
+            <Checkbox.Label>{size}</Checkbox.Label>
+          </Checkbox.Root>
+        </div>
+      ))}
+    </div>
+  );
+}

package/dist/skill/reference/components/checkbox/examples/states.tsx

@@ -0,0 +1,48 @@
+/** Every state side by side, each labelled by its prop — `checked`, `indeterminate`, `invalid`, `disabled`. */
+import { Checkbox } from "prime-ui-kit";
+
+export default function CheckboxStatesExample() {
+  return (
+    <>
+      <div>
+        <div>
+          <Checkbox.Root>
+            <Checkbox.Label>unchecked</Checkbox.Label>
+          </Checkbox.Root>
+        </div>
+        <div>
+          <Checkbox.Root defaultChecked>
+            <Checkbox.Label>checked</Checkbox.Label>
+          </Checkbox.Root>
+        </div>
+        <div>
+          <Checkbox.Root indeterminate>
+            <Checkbox.Label>indeterminate</Checkbox.Label>
+          </Checkbox.Root>
+        </div>
+        <div>
+          <Checkbox.Root invalid>
+            <Checkbox.Label>invalid</Checkbox.Label>
+          </Checkbox.Root>
+        </div>
+      </div>
+      <div>
+        <div>
+          <Checkbox.Root disabled>
+            <Checkbox.Label>disabled</Checkbox.Label>
+          </Checkbox.Root>
+        </div>
+        <div>
+          <Checkbox.Root disabled defaultChecked>
+            <Checkbox.Label>disabled · checked</Checkbox.Label>
+          </Checkbox.Root>
+        </div>
+        <div>
+          <Checkbox.Root disabled indeterminate>
+            <Checkbox.Label>disabled · indeterminate</Checkbox.Label>
+          </Checkbox.Root>
+        </div>
+      </div>
+    </>
+  );
+}

package/dist/skill/reference/components/checkbox/examples/variants.tsx

@@ -0,0 +1,30 @@
+/** The rounded square next to the circle, in three states — `shape`. */
+import { Checkbox } from "prime-ui-kit";
+
+const SHAPES = ["square", "circle"] as const;
+
+export default function CheckboxVariantsExample() {
+  return (
+    <>
+      {SHAPES.map((shape) => (
+        <div key={shape}>
+          <div>
+            <Checkbox.Root shape={shape}>
+              <Checkbox.Label>{shape}</Checkbox.Label>
+            </Checkbox.Root>
+          </div>
+          <div>
+            <Checkbox.Root shape={shape} defaultChecked>
+              <Checkbox.Label>{shape} · checked</Checkbox.Label>
+            </Checkbox.Root>
+          </div>
+          <div>
+            <Checkbox.Root shape={shape} indeterminate>
+              <Checkbox.Label>{shape} · indeterminate</Checkbox.Label>
+            </Checkbox.Root>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}

package/dist/skill/reference/components/checkbox/examples/without-label.tsx

@@ -0,0 +1,13 @@
+/** Bare boxes in table rows, named by `aria-label` and submitted with `name` and `value`. */
+import { Checkbox } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function CheckboxWithoutLabelExample() {
+  return (
+    <div className={styles.row}>
+      <Checkbox.Root aria-label="Выбрать заказ №1042" name="orders" value="1042" />
+      <Checkbox.Root aria-label="Выбрать заказ №1043" name="orders" value="1043" defaultChecked />
+    </div>
+  );
+}