prime-ui-kit 0.3.2 → 0.4.0

package/src/components/command-menu/examples/controlled-open-search.tsx

@@ -0,0 +1,76 @@
+import { Search } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+import { Typography } from "@/components/typography/Typography";
+
+const inputIconStyle: React.CSSProperties = {
+  width: "var(--prime-sys-size-control-m-icon)",
+  height: "var(--prime-sys-size-control-m-icon)",
+  color: "var(--prime-sys-color-content-muted)",
+  flexShrink: 0,
+};
+
+const toolbarStyle: React.CSSProperties = {
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "var(--prime-sys-spacing-x3)",
+  alignItems: "center",
+};
+
+/**
+ * Controlled `Dialog` and controlled `Input` value synced with parent state (playground `controlled-open-search.tsx`).
+ */
+export default function CommandMenuExampleControlledOpenSearch() {
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+
+  return (
+    <>
+      <div style={toolbarStyle}>
+        <Typography.Root variant="body-small" tone="muted">
+          External query: «{query || "…"}»
+        </Typography.Root>
+        <Button.Root size="m" variant="primary" onClick={() => setOpen(true)}>
+          Open with external search string
+        </Button.Root>
+      </div>
+
+      <CommandMenu.Dialog
+        open={open}
+        onOpenChange={(next) => {
+          setOpen(next);
+          if (!next) setQuery("");
+        }}
+      >
+        <CommandMenu.InputRow
+          leading={<Search style={inputIconStyle} strokeWidth={2} aria-hidden />}
+        >
+          <CommandMenu.Input
+            placeholder="Search synced with parent…"
+            aria-label="Search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading="Commands">
+            <CommandMenu.Item
+              value="clear filter"
+              keywords="clear reset"
+              onSelect={() => {
+                setQuery("");
+              }}
+            >
+              Clear filter
+            </CommandMenu.Item>
+            <CommandMenu.Item value="done" onSelect={() => setOpen(false)}>
+              Close palette
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+        </CommandMenu.List>
+      </CommandMenu.Dialog>
+    </>
+  );
+}

package/src/components/command-menu/examples/disabled-items.tsx

@@ -17,8 +17,8 @@ const footerStyle: React.CSSProperties = {
 };
 
 /**
- * Items with `disabled` are omitted from the filtered list and keyboard order (not shown as gray rows).
- * Use conditional rendering instead if you need a visible “locked” row.
+ * Disabled items, empty `value` (always visible in results), and notes on empty filter UX.
+ * `disabled` rows are omitted from the list and keyboard order — not grayed in place.
  */
 export default function CommandMenuExampleDisabledItems() {
   const [open, setOpen] = React.useState(false);
@@ -48,6 +48,9 @@ export default function CommandMenuExampleDisabledItems() {
             >
               Publish
             </CommandMenu.Item>
+            <CommandMenu.Item value="" keywords="" onSelect={() => setOpen(false)}>
+              Always visible — empty value ignores the filter query
+            </CommandMenu.Item>
           </CommandMenu.Group>
           {/* `disabled` items are excluded from visible options — this row never appears in the listbox */}
           <CommandMenu.Group heading="Hidden when disabled">
@@ -64,7 +67,8 @@ export default function CommandMenuExampleDisabledItems() {
         <CommandMenu.Footer style={footerStyle}>
           <Typography.Root variant="body-compact" tone="muted">
             Searching “delete” finds no option: the dangerous action is disabled and removed from
-            the palette, not listed as inactive.
+            the palette, not listed as inactive. If nothing matches, groups collapse — add your own
+            empty state below the list if needed.
           </Typography.Root>
         </CommandMenu.Footer>
       </CommandMenu.Dialog>

package/src/components/command-menu/examples/full-width-panel.tsx

@@ -0,0 +1,52 @@
+import { Search } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+import commandMenuStyles from "@/components/command-menu/CommandMenu.module.css";
+
+const inputIconStyle: React.CSSProperties = {
+  width: "var(--prime-sys-size-control-m-icon)",
+  height: "var(--prime-sys-size-control-m-icon)",
+  color: "var(--prime-sys-color-content-muted)",
+  flexShrink: 0,
+};
+
+/**
+ * Wider panel via `dialogContentWide` from the CommandMenu CSS module on `Dialog` `className`
+ * (playground `full-width-panel.tsx` uses a local demo class with the same width token).
+ */
+export default function CommandMenuExampleFullWidthPanel() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button.Root size="m" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+        Wide panel
+      </Button.Root>
+
+      <CommandMenu.Dialog
+        open={open}
+        onOpenChange={setOpen}
+        className={commandMenuStyles.dialogContentWide}
+      >
+        <CommandMenu.InputRow
+          leading={<Search style={inputIconStyle} strokeWidth={2} aria-hidden />}
+        >
+          <CommandMenu.Input placeholder="Wider than default max-width…" aria-label="Search" />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading="Layout">
+            <CommandMenu.Item
+              value="dialog content wide class"
+              keywords="layout"
+              onSelect={() => setOpen(false)}
+            >
+              Panel className from CommandMenu.module.css
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+        </CommandMenu.List>
+      </CommandMenu.Dialog>
+    </>
+  );
+}

package/src/components/command-menu/examples/item-icon-as.tsx

@@ -0,0 +1,48 @@
+import { Circle, Square, Triangle } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+
+/**
+ * `ItemIcon` `as` prop: SVG components or native `span` (playground `item-icon-as.tsx`).
+ */
+export default function CommandMenuExampleItemIconAs() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button.Root size="m" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+        ItemIcon polymorphism
+      </Button.Root>
+
+      <CommandMenu.Dialog open={open} onOpenChange={setOpen}>
+        <CommandMenu.InputRow>
+          <CommandMenu.Input placeholder="Icons as components…" aria-label="Search" />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading="Polymorphic ItemIcon">
+            <CommandMenu.Item value="circle" onSelect={() => setOpen(false)}>
+              <CommandMenu.ItemIcon as={Circle} strokeWidth={2} aria-hidden />
+              Circle
+            </CommandMenu.Item>
+            <CommandMenu.Item value="square" onSelect={() => setOpen(false)}>
+              <CommandMenu.ItemIcon as={Square} strokeWidth={2} aria-hidden />
+              Square
+            </CommandMenu.Item>
+            <CommandMenu.Item value="triangle" onSelect={() => setOpen(false)}>
+              <CommandMenu.ItemIcon as={Triangle} strokeWidth={2} aria-hidden />
+              Triangle
+            </CommandMenu.Item>
+            <CommandMenu.Item value="label" onSelect={() => setOpen(false)}>
+              <CommandMenu.ItemIcon as="span" aria-hidden>
+                ●
+              </CommandMenu.ItemIcon>
+              Text mark in span
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+        </CommandMenu.List>
+      </CommandMenu.Dialog>
+    </>
+  );
+}

package/src/components/command-menu/examples/variants-density-items.tsx

@@ -0,0 +1,85 @@
+import { Search } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+
+const inputIconStyle: React.CSSProperties = {
+  width: "var(--prime-sys-size-control-m-icon)",
+  height: "var(--prime-sys-size-control-m-icon)",
+  color: "var(--prime-sys-color-content-muted)",
+  flexShrink: 0,
+};
+
+const triggerRowStyle: React.CSSProperties = {
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "var(--prime-sys-spacing-x3)",
+  alignItems: "center",
+};
+
+type DensityDemo = "compact" | "comfortable";
+
+/**
+ * `InputRow` `density` and list row scale via `Item` `size` (playground `variants-density-items.tsx`).
+ */
+export default function CommandMenuExampleVariantsDensityItems() {
+  const [open, setOpen] = React.useState(false);
+  const [density, setDensity] = React.useState<DensityDemo>("compact");
+
+  return (
+    <>
+      <div style={triggerRowStyle}>
+        <Button.Root
+          size="m"
+          variant="neutral"
+          mode="stroke"
+          onClick={() => {
+            setDensity("compact");
+            setOpen(true);
+          }}
+        >
+          Compact density
+        </Button.Root>
+        <Button.Root
+          size="m"
+          variant="neutral"
+          mode="stroke"
+          onClick={() => {
+            setDensity("comfortable");
+            setOpen(true);
+          }}
+        >
+          Comfortable density
+        </Button.Root>
+      </div>
+
+      <CommandMenu.Dialog open={open} onOpenChange={setOpen}>
+        <CommandMenu.InputRow
+          density={density}
+          leading={<Search style={inputIconStyle} strokeWidth={2} aria-hidden />}
+        >
+          <CommandMenu.Input placeholder="Search…" aria-label="Search" />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading='Items size="s"'>
+            <CommandMenu.Item value="short list" size="s" onSelect={() => setOpen(false)}>
+              Compact row
+            </CommandMenu.Item>
+            <CommandMenu.Item value="another s" size="s" onSelect={() => setOpen(false)}>
+              Second compact row
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+          <CommandMenu.Group heading='Items size="m"'>
+            <CommandMenu.Item value="tall row" size="m" onSelect={() => setOpen(false)}>
+              Taller list row
+            </CommandMenu.Item>
+            <CommandMenu.Item value="another m" size="m" onSelect={() => setOpen(false)}>
+              Another size m item
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+        </CommandMenu.List>
+      </CommandMenu.Dialog>
+    </>
+  );
+}

package/src/components/data-table/COMPONENT.md

@@ -18,7 +18,31 @@
 - **Public API** — a single compound entry: `DataTable` with `Root` (`DataTableRoot`). There are no other exported subcomponents.
 - **Structure** — `ControlSizeProvider` wraps a root `div` (data attributes for size, dividers, header visibility, stickiness, table width mode, hover highlights, zebra). Inside: `ScrollContainer` viewport → `<table>`, optional `<thead>` (`<th>` per column), `<tbody>` with rows, and an `aria-hidden` sentinel at the bottom when `infiniteScroll` is on (for `IntersectionObserver` or scroll fallback).
 - **Footer** — always shows a “shown range / total” line; if not `infiniteScroll` and `showPagination` and there is more than one page, it renders `Pagination.Root`; in infinite mode it may show a short status when more rows can be revealed or loaded.
-- **Reference examples** — longer patterns (full column set, controlled sort/page, row selection with `Checkbox`, infinite `onLoadMore`, sticky header and first column) live under [`examples/`](./examples/) as copy-ready `tsx` modules that import from `"prime-ui-kit"`.
+
+### Playground snippets
+
+Demos match **`playground/sections/DataTableSection.tsx`** (order and intent). Snippets under **`playground/snippets/data-table/`** use `@/` imports; runnable twins under **`examples/`** use **`prime-ui-kit`** (shared layout tokens in [`examples/examples-demos.module.css`](./examples/examples-demos.module.css) where needed).
+
+| Block | Snippet | Runnable example |
+| --- | --- | --- |
+| **Sizes** | [`sizes.tsx`](../../../playground/snippets/data-table/sizes.tsx) | [`examples/sizes.tsx`](./examples/sizes.tsx) — `size` `s`–`xl`; `Tag` / `Badge` inherit `ControlSizeProvider`; `paginationSize` follows table `size`. |
+| **Divider styles** | [`divider-styles.tsx`](../../../playground/snippets/data-table/divider-styles.tsx) | [`examples/divider-styles.tsx`](./examples/divider-styles.tsx) — `dividerStyle` `standard` / `dashed` / `dotted` / `none`. |
+| **States** | [`states.tsx`](../../../playground/snippets/data-table/states.tsx) | [`examples/states.tsx`](./examples/states.tsx) — `loading` + `loadingText` vs `emptyText`. |
+| **Sticky + headers** | [`sticky-and-headers.tsx`](../../../playground/snippets/data-table/sticky-and-headers.tsx) | [`examples/sticky-and-headers.tsx`](./examples/sticky-and-headers.tsx) — `showHeader`, `stickyHeader`, `stickyFirstColumn` with `infiniteScroll` + `scrollHeight`. |
+| **Controlled** | [`controlled.tsx`](../../../playground/snippets/data-table/controlled.tsx) | [`examples/controlled-sort-and-page.tsx`](./examples/controlled-sort-and-page.tsx) — `sort` / `onSortChange` / `page` / `onPageChange` (parent resets page on sort). |
+| **Composition** | [`composition.tsx`](../../../playground/snippets/data-table/composition.tsx) | [`examples/composition.tsx`](./examples/composition.tsx) — rich `header` / `cell`, `getRowKey`, `onRowClick`, `onCellClick` (+ keyboard). |
+| **Full width** | [`full-width.tsx`](../../../playground/snippets/data-table/full-width.tsx) | [`examples/full-width.tsx`](./examples/full-width.tsx) — narrow parent; default `fillWidth`. |
+| **Highlight + striped** | [`highlight-and-striped.tsx`](../../../playground/snippets/data-table/highlight-and-striped.tsx) | [`examples/highlight-and-striped.tsx`](./examples/highlight-and-striped.tsx) — toggles for `highlightRowOnHover`, `highlightColumnOnHover`, `striped`. |
+| **Infinite scroll** | [`infinite-scroll.tsx`](../../../playground/snippets/data-table/infinite-scroll.tsx) | [`examples/infinite-scroll-load-more.tsx`](./examples/infinite-scroll-load-more.tsx) — `infiniteScroll`, `hasMore`, `loadingMore`, `onLoadMore`, `scrollHeight` (snippet uses a larger generated dataset; same props). |
+| **Sort + pagination (uncontrolled)** | [`sorting-pagination.tsx`](../../../playground/snippets/data-table/sorting-pagination.tsx) | [`examples/sorting-pagination.tsx`](./examples/sorting-pagination.tsx) — `defaultSort` and built-in `Pagination`. |
+
+### Extra recipes (`examples/`)
+
+| Recipe | File | Notes |
+| --- | --- | --- |
+| Sticky header + first column (compact) | [`sticky-header-first-column.tsx`](./examples/sticky-header-first-column.tsx) | Russian copy; one combined sticky demo (subset of the snippet tour above). |
+| Orders + row open affordance | [`canonical-orders.tsx`](./examples/canonical-orders.tsx) | `defaultSort`, `pageSize`, `onRowClick`, `Tag` / `Badge` cells. |
+| Row selection with `Checkbox` | [`row-selection.tsx`](./examples/row-selection.tsx) | No built-in multi-select; header + row checkboxes in column definitions. |
 
 ### Minimal example
 

package/src/components/data-table/examples/composition.tsx

@@ -0,0 +1,91 @@
+import { ExternalLink, Mail } from "lucide-react";
+import { DataTable, type DataTableColumn, LinkButton } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples-demos.module.css";
+
+type ContactRow = {
+  id: string;
+  name: string;
+  email: string;
+  channel: string;
+};
+
+const rows: ContactRow[] = [
+  { id: "c1", name: "Ирина Соколова", email: "i.sokolova@example.com", channel: "Email" },
+  { id: "c2", name: "Павел Орлов", email: "p.orlov@example.com", channel: "Личный кабинет" },
+  { id: "c3", name: "Марина Волкова", email: "m.volkova@example.com", channel: "Телеграм-бот" },
+];
+
+const columns: DataTableColumn<ContactRow>[] = [
+  {
+    id: "name",
+    header: (
+      <span className={styles.inlineIconRow}>
+        <Mail size={14} strokeWidth={2} aria-hidden />
+        Контакт
+      </span>
+    ),
+    accessor: "name",
+    sortable: true,
+    minWidth: "11rem",
+  },
+  {
+    id: "email",
+    header: "Адрес",
+    accessor: "email",
+    sortable: true,
+    minWidth: "14rem",
+    align: "center",
+    cell: (row) => (
+      <LinkButton.Root size="s" href={`mailto:${row.email}`}>
+        {row.email}
+      </LinkButton.Root>
+    ),
+  },
+  {
+    id: "channel",
+    header: "Канал",
+    accessor: "channel",
+    sortable: true,
+    minWidth: "10rem",
+  },
+  {
+    id: "open",
+    header: "",
+    sortable: false,
+    align: "end",
+    minWidth: "7rem",
+    onCellClick: (row) => {
+      window.open(`mailto:${row.email}`, "_blank", "noopener,noreferrer");
+    },
+    cell: () => (
+      <span className={styles.inlineIconRowTight}>
+        <ExternalLink size={14} strokeWidth={2} aria-hidden />
+        Написать
+      </span>
+    ),
+  },
+];
+
+/** Соответствует `playground/snippets/data-table/composition.tsx`. */
+export default function DataTableCompositionExample() {
+  const [last, setLast] = React.useState<string | null>(null);
+
+  return (
+    <div>
+      <p className={styles.lead}>
+        {last ? `Последний клик по строке: ${last}` : "Клик по строке обновляет подпись ниже."}
+      </p>
+      <DataTable.Root
+        columns={columns}
+        rows={rows}
+        getRowKey={(row) => row.id}
+        onRowClick={(row) => setLast(row.name)}
+        showPagination={false}
+        pageSize={10}
+        highlightRowOnHover
+      />
+    </div>
+  );
+}

package/src/components/data-table/examples/divider-styles.tsx

@@ -0,0 +1,67 @@
+import { Badge, DataTable, type DataTableColumn, type DataTableDividerStyle } from "prime-ui-kit";
+
+import styles from "./examples-demos.module.css";
+
+type Row = {
+  id: string;
+  member: string;
+  role: string;
+  status: "Online" | "Busy" | "Offline";
+};
+
+const rows: Row[] = [
+  { id: "r1", member: "James Brown", role: "Product Manager", status: "Online" },
+  { id: "r2", member: "Sophia Williams", role: "Designer", status: "Busy" },
+  { id: "r3", member: "Arthur Taylor", role: "Frontend Engineer", status: "Offline" },
+];
+
+function mapStatus(status: Row["status"]): "online" | "busy" | "offline" {
+  if (status === "Online") return "online";
+  if (status === "Busy") return "busy";
+  return "offline";
+}
+
+const columns: DataTableColumn<Row>[] = [
+  { id: "member", header: "Member", accessor: "member", sortable: true, minWidth: "11rem" },
+  { id: "role", header: "Role", accessor: "role", sortable: true, minWidth: "12rem" },
+  {
+    id: "status",
+    header: "Status",
+    accessor: "status",
+    sortable: true,
+    minWidth: "8rem",
+    cell: (row) => (
+      <Badge.Root variant="status" status={mapStatus(row.status)} label={row.status}>
+        {row.status}
+      </Badge.Root>
+    ),
+  },
+];
+
+function DividerRow({ divider }: { divider: DataTableDividerStyle }) {
+  return (
+    <>
+      <p className={styles.demoLabel}>dividerStyle = {divider}</p>
+      <DataTable.Root
+        className={styles.demoTable}
+        columns={columns}
+        rows={rows}
+        dividerStyle={divider}
+        pageSize={3}
+        showPagination={false}
+      />
+    </>
+  );
+}
+
+/** Соответствует `playground/snippets/data-table/divider-styles.tsx`. */
+export default function DataTableDividerStylesExample() {
+  return (
+    <>
+      <DividerRow divider="standard" />
+      <DividerRow divider="dashed" />
+      <DividerRow divider="dotted" />
+      <DividerRow divider="none" />
+    </>
+  );
+}

package/src/components/data-table/examples/examples-demos.module.css

@@ -0,0 +1,78 @@
+/* Layout helpers for runnable examples (mirrors playground/snippets/data-table/*.module.css). */
+
+.demoLabel {
+  margin: var(--prime-sys-spacing-x4) 0 var(--prime-sys-spacing-x2);
+  font-size: var(--prime-sys-size-control-s-supportText);
+  font-weight: var(--prime-sys-typography-weight-medium);
+  color: var(--prime-sys-color-content-secondary);
+}
+
+.demoLabel:first-child {
+  margin-top: 0;
+}
+
+.demoTable {
+  margin-bottom: var(--prime-sys-spacing-x3);
+}
+
+.narrowCard {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 28rem;
+  padding: var(--prime-sys-spacing-x3);
+  border-radius: var(--prime-sys-shape-radius-m);
+  border: 1px dashed var(--prime-sys-color-border-subtle);
+}
+
+.lead {
+  margin: 0 0 var(--prime-sys-spacing-x3);
+  font-size: var(--prime-sys-size-control-s-supportText);
+  color: var(--prime-sys-color-content-secondary);
+}
+
+.leadTight {
+  margin: 0 0 var(--prime-sys-spacing-x2);
+  font-size: var(--prime-sys-size-control-s-supportText);
+  color: var(--prime-sys-color-content-secondary);
+}
+
+.statesStack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-x6);
+  width: 100%;
+}
+
+.inlineIconRow {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--prime-sys-spacing-x2);
+}
+
+.inlineIconRowTight {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--prime-sys-spacing-x1);
+}
+
+.optionsFieldset {
+  margin: 0 0 var(--prime-sys-spacing-x4);
+  padding: var(--prime-sys-spacing-x3) var(--prime-sys-spacing-x4);
+  border: 1px solid var(--prime-sys-color-border-subtle);
+  border-radius: var(--prime-sys-shape-radius-m);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--prime-sys-spacing-x4) var(--prime-sys-spacing-x6);
+}
+
+.optionsLegend {
+  padding: 0 var(--prime-sys-spacing-x2);
+  font-size: var(--prime-sys-typography-support-xs);
+}
+
+.optionLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--prime-sys-spacing-x3);
+  cursor: pointer;
+}

package/src/components/data-table/examples/full-width.tsx

@@ -0,0 +1,39 @@
+import { DataTable, type DataTableColumn } from "prime-ui-kit";
+
+import styles from "./examples-demos.module.css";
+
+type Row = { id: string; task: string; hours: number };
+
+const rows: Row[] = [
+  { id: "T-12", task: "Сверстать отчёт по спринту", hours: 3 },
+  { id: "T-13", task: "Проверить миграции БД", hours: 1.5 },
+  { id: "T-14", task: "Обновить подсказки в форме входа", hours: 2 },
+];
+
+const columns: DataTableColumn<Row>[] = [
+  { id: "id", header: "Задача", accessor: "id", sortable: true, minWidth: "6rem" },
+  { id: "task", header: "Описание", accessor: "task", sortable: true, minWidth: "12rem" },
+  {
+    id: "hours",
+    header: "Часы",
+    accessor: "hours",
+    sortable: true,
+    align: "end",
+    minWidth: "5rem",
+    cell: (row) =>
+      row.hours.toLocaleString("ru-RU", { minimumFractionDigits: 0, maximumFractionDigits: 1 }),
+  },
+];
+
+/** Соответствует `playground/snippets/data-table/full-width.tsx`. */
+export default function DataTableFullWidthExample() {
+  return (
+    <div className={styles.narrowCard}>
+      <p className={styles.lead}>
+        Узкий контейнер: корень таблицы тянется на 100% ширины родителя (сетка карточки, колонка
+        формы).
+      </p>
+      <DataTable.Root columns={columns} rows={rows} showPagination={false} pageSize={10} />
+    </div>
+  );
+}

package/src/components/data-table/examples/highlight-and-striped.tsx

@@ -0,0 +1,71 @@
+import { DataTable, type DataTableColumn } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples-demos.module.css";
+
+type Row = { id: string; product: string; qty: number; price: number };
+
+const rows: Row[] = [
+  { id: "1", product: "Notebook", qty: 2, price: 1200 },
+  { id: "2", product: "Mouse", qty: 5, price: 45 },
+  { id: "3", product: "Keyboard", qty: 1, price: 180 },
+  { id: "4", product: "Display", qty: 1, price: 420 },
+];
+
+const columns: DataTableColumn<Row>[] = [
+  { id: "product", header: "Товар", accessor: "product", sortable: true, minWidth: "10rem" },
+  { id: "qty", header: "Кол-во", accessor: "qty", sortable: true, align: "end", minWidth: "6rem" },
+  {
+    id: "price",
+    header: "Цена",
+    accessor: "price",
+    sortable: true,
+    align: "end",
+    minWidth: "7rem",
+  },
+];
+
+/** Соответствует `playground/snippets/data-table/highlight-and-striped.tsx`. */
+export default function DataTableHighlightAndStripedExample() {
+  const [highlightRowOnHover, setHighlightRowOnHover] = React.useState(true);
+  const [highlightColumnOnHover, setHighlightColumnOnHover] = React.useState(false);
+  const [striped, setStriped] = React.useState(false);
+
+  return (
+    <div>
+      <fieldset className={styles.optionsFieldset}>
+        <legend className={styles.optionsLegend}>Опции таблицы</legend>
+        <label className={styles.optionLabel}>
+          <input
+            type="checkbox"
+            checked={highlightRowOnHover}
+            onChange={(e) => setHighlightRowOnHover(e.target.checked)}
+          />
+          Подсветка строки при наведении
+        </label>
+        <label className={styles.optionLabel}>
+          <input
+            type="checkbox"
+            checked={highlightColumnOnHover}
+            onChange={(e) => setHighlightColumnOnHover(e.target.checked)}
+          />
+          Подсветка колонки при наведении
+        </label>
+        <label className={styles.optionLabel}>
+          <input type="checkbox" checked={striped} onChange={(e) => setStriped(e.target.checked)} />
+          Чередование строк (зебра)
+        </label>
+      </fieldset>
+
+      <DataTable.Root
+        columns={columns}
+        rows={rows}
+        pageSize={10}
+        showPagination={false}
+        highlightRowOnHover={highlightRowOnHover}
+        highlightColumnOnHover={highlightColumnOnHover}
+        striped={striped}
+      />
+    </div>
+  );
+}