prime-ui-kit 0.3.1 → 0.4.0

package/src/components/data-table/examples/sorting-pagination.tsx

@@ -0,0 +1,76 @@
+import { Badge, DataTable, type DataTableColumn, Tag } from "prime-ui-kit";
+
+type InvoiceRow = {
+  id: string;
+  customer: string;
+  amount: number;
+  country: string;
+  status: "Paid" | "Pending" | "Overdue";
+};
+
+const rows: InvoiceRow[] = [
+  { id: "INV-1001", customer: "Monday Inc.", amount: 1240, country: "USA", status: "Paid" },
+  { id: "INV-1002", customer: "Pixel Lab", amount: 860, country: "Germany", status: "Pending" },
+  { id: "INV-1003", customer: "Stella Team", amount: 2910, country: "Spain", status: "Paid" },
+  { id: "INV-1004", customer: "Nordic Grid", amount: 1490, country: "Sweden", status: "Pending" },
+  { id: "INV-1005", customer: "Onboardly", amount: 480, country: "France", status: "Overdue" },
+  { id: "INV-1006", customer: "Clever Peak", amount: 3010, country: "Canada", status: "Paid" },
+  { id: "INV-1007", customer: "Nimbus", amount: 1980, country: "UK", status: "Pending" },
+  { id: "INV-1008", customer: "Solar Crest", amount: 540, country: "Italy", status: "Overdue" },
+  { id: "INV-1009", customer: "Edge Point", amount: 2270, country: "USA", status: "Paid" },
+  { id: "INV-1010", customer: "Seven Loop", amount: 1750, country: "Poland", status: "Pending" },
+  { id: "INV-1011", customer: "Mint Dash", amount: 900, country: "Japan", status: "Paid" },
+  { id: "INV-1012", customer: "Blue Stone", amount: 1425, country: "Norway", status: "Overdue" },
+];
+
+function mapStatusToColor(status: InvoiceRow["status"]) {
+  if (status === "Paid") return "green";
+  if (status === "Overdue") return "red";
+  return "yellow";
+}
+
+const columns: DataTableColumn<InvoiceRow>[] = [
+  { id: "id", header: "Invoice", accessor: "id", sortable: true, minWidth: "8rem" },
+  { id: "customer", header: "Customer", accessor: "customer", sortable: true, minWidth: "12rem" },
+  {
+    id: "amount",
+    header: "Amount",
+    accessor: "amount",
+    sortable: true,
+    align: "end",
+    cell: (row) => `$${row.amount.toLocaleString()}`,
+    minWidth: "7rem",
+  },
+  {
+    id: "country",
+    header: "Country",
+    accessor: "country",
+    sortable: true,
+    minWidth: "8rem",
+    cell: (row) => <Tag.Root>{row.country}</Tag.Root>,
+  },
+  {
+    id: "status",
+    header: "Status",
+    accessor: "status",
+    sortable: true,
+    minWidth: "8rem",
+    cell: (row) => (
+      <Badge.Root color={mapStatusToColor(row.status)} variant="light">
+        {row.status}
+      </Badge.Root>
+    ),
+  },
+];
+
+/** Соответствует `playground/snippets/data-table/sorting-pagination.tsx`. */
+export default function DataTableSortingPaginationExample() {
+  return (
+    <DataTable.Root
+      columns={columns}
+      rows={rows}
+      defaultSort={{ columnId: "amount", order: "desc" }}
+      pageSize={5}
+    />
+  );
+}

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

@@ -0,0 +1,44 @@
+import { DataTable, type DataTableColumn } from "prime-ui-kit";
+
+import styles from "./examples-demos.module.css";
+
+type Row = { id: string; label: string };
+
+const columns: DataTableColumn<Row>[] = [
+  { id: "id", header: "Код", accessor: "id", minWidth: "6rem" },
+  { id: "label", header: "Название", accessor: "label", minWidth: "12rem" },
+];
+
+/** Соответствует `playground/snippets/data-table/states.tsx`. */
+export default function DataTableStatesExample() {
+  return (
+    <div className={styles.statesStack}>
+      <div>
+        <p className={styles.leadTight}>
+          <code>loading</code> при пустом наборе строк: одна строка с <code>loadingText</code>.
+        </p>
+        <DataTable.Root
+          columns={columns}
+          rows={[]}
+          loading
+          loadingText="Загружаем справочник…"
+          showPagination={false}
+          pageSize={10}
+        />
+      </div>
+      <div>
+        <p className={styles.leadTight}>
+          Пустой список: <code>emptyText</code> вместо строк данных.
+        </p>
+        <DataTable.Root
+          columns={columns}
+          rows={[]}
+          loading={false}
+          emptyText="Пока нет ни одной записи — добавьте первую через кнопку «Создать»."
+          showPagination={false}
+          pageSize={10}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/data-table/examples/sticky-and-headers.tsx

@@ -0,0 +1,113 @@
+import { DataTable, type DataTableColumn } from "prime-ui-kit";
+
+import styles from "./examples-demos.module.css";
+
+type ForecastRow = {
+  id: string;
+  metric: string;
+  q1: number;
+  q2: number;
+  q3: number;
+  q4: number;
+  plan: number;
+  fact: number;
+};
+
+const rows: ForecastRow[] = [
+  { id: "r1", metric: "Revenue", q1: 1200, q2: 1280, q3: 1330, q4: 1410, plan: 5220, fact: 5105 },
+  { id: "r2", metric: "COGS", q1: 530, q2: 560, q3: 575, q4: 610, plan: 2275, fact: 2290 },
+  { id: "r3", metric: "Gross Profit", q1: 670, q2: 720, q3: 755, q4: 800, plan: 2945, fact: 2815 },
+  { id: "r4", metric: "Marketing", q1: 190, q2: 205, q3: 215, q4: 230, plan: 840, fact: 875 },
+  { id: "r5", metric: "R&D", q1: 160, q2: 170, q3: 180, q4: 190, plan: 700, fact: 710 },
+  { id: "r6", metric: "G&A", q1: 120, q2: 124, q3: 128, q4: 133, plan: 505, fact: 498 },
+  {
+    id: "r7",
+    metric: "Operating Profit",
+    q1: 200,
+    q2: 221,
+    q3: 232,
+    q4: 247,
+    plan: 900,
+    fact: 732,
+  },
+  { id: "r8", metric: "Tax", q1: 34, q2: 37, q3: 41, q4: 44, plan: 156, fact: 149 },
+  { id: "r9", metric: "Net Profit", q1: 166, q2: 184, q3: 191, q4: 203, plan: 744, fact: 583 },
+  {
+    id: "r10",
+    metric: "Customers",
+    q1: 1240,
+    q2: 1310,
+    q3: 1425,
+    q4: 1560,
+    plan: 5535,
+    fact: 5440,
+  },
+];
+
+const columns: DataTableColumn<ForecastRow>[] = [
+  { id: "metric", header: "Metric", accessor: "metric", sortable: true, minWidth: "13rem" },
+  { id: "q1", header: "Q1", accessor: "q1", sortable: true, align: "end", minWidth: "7rem" },
+  { id: "q2", header: "Q2", accessor: "q2", sortable: true, align: "end", minWidth: "7rem" },
+  { id: "q3", header: "Q3", accessor: "q3", sortable: true, align: "end", minWidth: "7rem" },
+  { id: "q4", header: "Q4", accessor: "q4", sortable: true, align: "end", minWidth: "7rem" },
+  { id: "plan", header: "Plan", accessor: "plan", sortable: true, align: "end", minWidth: "8rem" },
+  { id: "fact", header: "Fact", accessor: "fact", sortable: true, align: "end", minWidth: "8rem" },
+];
+
+function money(value: number): string {
+  return value.toLocaleString("en-US");
+}
+
+const formattedColumns: DataTableColumn<ForecastRow>[] = columns.map((column) => {
+  if (column.id === "metric") return column;
+  return {
+    ...column,
+    cell: (row) => money(row[column.id as keyof ForecastRow] as number),
+  };
+});
+
+function DemoBlock({
+  title,
+  showHeader,
+  stickyHeader,
+  stickyFirstColumn,
+}: {
+  title: string;
+  showHeader?: boolean;
+  stickyHeader?: boolean;
+  stickyFirstColumn?: boolean;
+}) {
+  return (
+    <>
+      <p className={styles.demoLabel}>{title}</p>
+      <DataTable.Root
+        className={styles.demoTable}
+        columns={formattedColumns}
+        rows={rows}
+        showHeader={showHeader}
+        stickyHeader={stickyHeader}
+        stickyFirstColumn={stickyFirstColumn}
+        showPagination={false}
+        scrollHeight={220}
+        infiniteScroll
+        initialVisibleRows={10}
+      />
+    </>
+  );
+}
+
+/** Соответствует `playground/snippets/data-table/sticky-and-headers.tsx`. */
+export default function DataTableStickyAndHeadersExample() {
+  return (
+    <>
+      <DemoBlock title="showHeader = false (верхняя шапка скрыта)" showHeader={false} />
+      <DemoBlock title="stickyHeader = true (липкая верхняя шапка)" stickyHeader />
+      <DemoBlock title="stickyFirstColumn = true (липкая первая колонка слева)" stickyFirstColumn />
+      <DemoBlock
+        title="stickyHeader + stickyFirstColumn (как в Excel)"
+        stickyHeader
+        stickyFirstColumn
+      />
+    </>
+  );
+}

package/src/components/data-table/examples/sticky-header-first-column.tsx

@@ -0,0 +1,55 @@
+import { DataTable, type DataTableColumn } from "prime-ui-kit";
+
+type MetricRow = {
+  id: string;
+  name: string;
+  m1: number;
+  m2: number;
+  m3: number;
+  m4: number;
+  total: number;
+};
+
+const rows: MetricRow[] = [
+  { id: "a", name: "Выручка", m1: 120, m2: 132, m3: 128, m4: 141, total: 521 },
+  { id: "b", name: "Себестоимость", m1: 54, m2: 58, m3: 56, m4: 61, total: 229 },
+  { id: "c", name: "Валовая прибыль", m1: 66, m2: 74, m3: 72, m4: 80, total: 292 },
+  { id: "d", name: "OPEX", m1: 22, m2: 23, m3: 24, m4: 25, total: 94 },
+  { id: "e", name: "EBITDA", m1: 44, m2: 51, m3: 48, m4: 55, total: 198 },
+];
+
+const columns: DataTableColumn<MetricRow>[] = [
+  { id: "name", header: "Показатель", accessor: "name", sortable: true, minWidth: "11rem" },
+  { id: "m1", header: "Янв", accessor: "m1", sortable: true, align: "end", minWidth: "5rem" },
+  { id: "m2", header: "Фев", accessor: "m2", sortable: true, align: "end", minWidth: "5rem" },
+  { id: "m3", header: "Мар", accessor: "m3", sortable: true, align: "end", minWidth: "5rem" },
+  { id: "m4", header: "Апр", accessor: "m4", sortable: true, align: "end", minWidth: "5rem" },
+  {
+    id: "total",
+    header: "Итого",
+    accessor: "total",
+    sortable: true,
+    align: "end",
+    minWidth: "6rem",
+  },
+];
+
+/**
+ * Горизонтальный скролл + `stickyHeader` и `stickyFirstColumn`: первая колонка и шапка остаются на месте.
+ * Для демо включён `infiniteScroll` с короткой высотой viewport, чтобы был вертикальный скролл внутри таблицы.
+ */
+export default function DataTableStickyHeaderFirstColumnExample() {
+  return (
+    <DataTable.Root
+      columns={columns}
+      rows={rows}
+      getRowKey={(row) => row.id}
+      stickyHeader
+      stickyFirstColumn
+      showPagination={false}
+      infiniteScroll
+      initialVisibleRows={rows.length}
+      scrollHeight={200}
+    />
+  );
+}

package/src/components/datepicker/COMPONENT.md

@@ -13,6 +13,60 @@ Composite pieces for picking a calendar date or range: a size-aware shell, a day
 - **When not to use** — always-visible full calendars as default page chrome; open the shell from a trigger in [Popover](../popover/COMPONENT.md), [Modal](../modal/COMPONENT.md), or [Drawer](../drawer/COMPONENT.md).
 - **When not to use** — month- or year-only picking without days (use a slimmer control or native inputs).
 
+## Canonical
+
+- **Exports** — `Datepicker` (`Shell`, `Calendar`, `Presets`, `Time`, `Value`), `formatTimeInputValue`, `mergeTimeIntoDate`, and types including **`DateRange`** (re-exported from react-day-picker).
+- **Hierarchy** — `Datepicker.Shell` is the panel root; **`Datepicker.Calendar` must be inside `Shell`** (directly or nested) so `size` context resolves.
+- **Selection** — `Calendar` forwards **react-day-picker** `DayPicker` props: `mode="single"` or `mode="range"`, `selected`, `onSelect`, `disabled`, `locale`, etc.
+- **Presets** — Pass `Datepicker.Presets` as **`Shell`’s `presets` prop**; `Presets` **`mode`** (`"single"` | `"range"`) must match the calendar **`mode`**.
+- **Layout** — `Calendar` supports **`responsiveMonths`** (ignores `numberOfMonths` when `true`) and **`responsiveBreakpoints.twoColumns`** (default **500** px). Default **`weekStartsOn`** is **1** (Monday).
+- **Popover** — Typical pattern: `Datepicker.Shell` inside **`Popover.Content`** with **`insetPadding="none"`**.
+- **Presets `title`** — Typed on `Datepicker.Presets` but **not rendered** in the UI.
+- **Time** — `Datepicker.Time` keeps `input type="time"` **disabled** until the anchor date exists (`value`, or `from` / `to` in range mode).
+
+## Extended
+
+### Playground snippets
+
+Demos match **`playground/sections/DatepickerSection.tsx`** (order and intent). Sources use `@/` imports under **`playground/snippets/datepicker/`**:
+
+| Block | File | What it shows |
+|-------|------|----------------|
+| **Sizes** | [`sizes.tsx`](../../../playground/snippets/datepicker/sizes.tsx) (+ [`sizes.module.css`](../../../playground/snippets/datepicker/sizes.module.css)) | Four **`Datepicker.Shell`** / **`Calendar`** **`size`** values (**`s`**–**`xl`**), each in its own **`Popover`**. |
+| **Variants and modes** | [`variants-modes.tsx`](../../../playground/snippets/datepicker/variants-modes.tsx) (+ [`sizes.module.css`](../../../playground/snippets/datepicker/sizes.module.css)) | **`mode="single"`** vs **`mode="range"`** with separate triggers. |
+| **States** | [`states.tsx`](../../../playground/snippets/datepicker/states.tsx) | **`disabled`** by day of week; **`Calendar`** + **`Datepicker.Time`** (time inputs disabled until a date exists). |
+| **Responsive months** | [`responsive-months.tsx`](../../../playground/snippets/datepicker/responsive-months.tsx) | **`responsiveMonths`**, **`responsiveBreakpoints`**; preview uses **`examplePreviewBleed`** for container width. |
+| **Controlled value** | [`controlled-value.tsx`](../../../playground/snippets/datepicker/controlled-value.tsx) | Controlled **`selected`** / **`onSelect`**; **`Datepicker.Value`**; popover closes after a date is chosen. |
+| **Composition** | [`composition.tsx`](../../../playground/snippets/datepicker/composition.tsx) | **`Shell`** **`presets`**, **`Calendar`**, **`Time`**, **`Value`** in one panel; shared parent state. |
+| **Full width** | [`full-width.tsx`](../../../playground/snippets/datepicker/full-width.tsx) | Wide **`Popover.Content`** and **`Datepicker.Shell className="min-w-0"`** with **`responsiveMonths`**. |
+| **Trigger with icon** | [`popover.tsx`](../../../playground/snippets/datepicker/popover.tsx) | Calendar icon on **`Popover.Trigger`**; close after single-date select. |
+| **Range presets + time** | [`range-presets-time.tsx`](../../../playground/snippets/datepicker/range-presets-time.tsx) | **`mode="range"`** on **`Calendar`** and **`Presets`**; **`Datepicker.Time`** with **`mode="range"`**. |
+
+### Scenarios (recipes)
+
+Runnable **`prime-ui-kit`** examples under **`examples/`** (type-checked with the library build). Copy into your app and wire spacing/theme (see [Label](../label/COMPONENT.md) for the label primitive).
+
+| Scenario | File |
+|----------|------|
+| **Booking (stay + time)** — **`mode="range"`** on **`Calendar`** and **`Presets`**, **`Datepicker.Time`** **`mode="range"`**; presets for short stays and windows | [`booking.tsx`](./examples/booking.tsx) (`BookingDateRangeExample`) |
+| **Birthdate** — **`mode="single"`**, **`disabled`** for future days, **`Datepicker.Value`**, default month near a sensible year when empty | [`birthdate.tsx`](./examples/birthdate.tsx) (`BirthdateSingleExample`) |
+| **Range (reports / filters)** — **`numberOfMonths={2}`** or **`responsiveMonths`**; presets such as this month / last month / last N days | [`range-report.tsx`](./examples/range-report.tsx) (`ReportRangeExample`) |
+| **Full-width form field** — **`Button.Root fullWidth`** as **`Popover.Trigger`**; wide **`Popover.Content`** and **`Shell className="min-w-0"`** | [`full-width-form.tsx`](./examples/full-width-form.tsx) (`FullWidthFormDateExample`) |
+
+Snippet-level demos (internal **`@/`** imports) are listed in **Playground snippets** above.
+
+## LLM note
+
+- Playground order and copy mirror **`playground/sections/DatepickerSection.tsx`**; runnable snippet sources live in **`playground/snippets/datepicker/`**.
+- Always compose **`Datepicker.Shell` → `Datepicker.Calendar`** at minimum; never use **`Calendar` without `Shell`** in real UIs if you rely on **`size`** context (default **`m`** on `Shell`).
+- For overlays, default to **[Popover](../popover/COMPONENT.md)** with **`insetPadding="none"`** on content unless the design system specifies otherwise.
+- **Controlled state:** bind **`selected`** and **`onSelect`** from react-day-picker; for range, state type is **`DateRange | undefined`**.
+- **Do not** mix **`Presets` `mode="range"`** with **`Calendar` `mode="single"`** (or the reverse) in one shell.
+- **Do not** invent a **`title`** UI for **`Datepicker.Presets`** — it is not implemented.
+- Pass **`locale`** from **date-fns** (`import { ru } from "date-fns/locale"`) into **`Calendar`** for localized month/weekday labels.
+- Month navigation **`aria-label`** strings on the kit nav buttons are **English**; override via **`Calendar` `components`** if the product language must match.
+- **Utilities:** use **`formatTimeInputValue`** / **`mergeTimeIntoDate`** only when integrating custom time inputs; **`Datepicker.Time`** already uses them.
+
 ## Composition
 
 - **`Datepicker.Shell`** — Root wrapper: sets `DatepickerSize` context, owns `requestedMonth` / `requestMonth` for syncing the grid month when presets fire. Optional **`presets`** renders a bottom row after **`children`**.
@@ -132,6 +186,7 @@ export function DatepickerMinimal() {
 - [Button](../button/COMPONENT.md)
 - [ButtonGroup](../button-group/COMPONENT.md)
 - [Input](../input/COMPONENT.md)
+- [Label](../label/COMPONENT.md)
 - [Typography](../typography/COMPONENT.md)
 - [Modal](../modal/COMPONENT.md)
 - [Drawer](../drawer/COMPONENT.md)

package/src/components/datepicker/examples/birthdate.tsx

@@ -0,0 +1,43 @@
+import { format, startOfTomorrow } from "date-fns";
+import { ru } from "date-fns/locale";
+import { Button, Datepicker, Popover } from "prime-ui-kit";
+import * as React from "react";
+
+/**
+ * Дата рождения: один день, будущие даты отключены, подпись в масштабе пикера.
+ */
+export function BirthdateSingleExample() {
+  const [value, setValue] = React.useState<Date | undefined>();
+  const [open, setOpen] = React.useState(false);
+
+  const triggerLabel = value
+    ? format(value, "d MMMM yyyy", { locale: ru })
+    : "Укажите дату рождения";
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <Button.Root mode="stroke" size="m" variant="neutral">
+          {triggerLabel}
+        </Button.Root>
+      </Popover.Trigger>
+      <Popover.Content align="start" insetPadding="none" side="bottom">
+        <Datepicker.Shell>
+          <Datepicker.Calendar
+            disabled={(date) => date >= startOfTomorrow()}
+            locale={ru}
+            mode="single"
+            month={value ?? new Date(2000, 0, 1)}
+            selected={value}
+            onSelect={(d) => {
+              setValue(d);
+            }}
+          />
+          <Datepicker.Value as="p">
+            {value ? format(value, "d MMMM yyyy", { locale: ru }) : "Выберите день в сетке."}
+          </Datepicker.Value>
+        </Datepicker.Shell>
+      </Popover.Content>
+    </Popover.Root>
+  );
+}

package/src/components/datepicker/examples/booking.tsx

@@ -0,0 +1,71 @@
+import { addDays, endOfMonth, startOfMonth, subDays } from "date-fns";
+import { ru } from "date-fns/locale";
+import {
+  Button,
+  Datepicker,
+  type DatepickerPresetRange,
+  type DateRange,
+  Popover,
+} from "prime-ui-kit";
+import * as React from "react";
+
+function stayPresets(): DatepickerPresetRange[] {
+  const today = new Date();
+  const threeNightsTo = addDays(today, 3);
+  return [
+    { label: "Сегодня", range: { from: today, to: today } },
+    { label: "3 ночи", range: { from: today, to: threeNightsTo } },
+    { label: "Неделя", range: { from: today, to: addDays(today, 7) } },
+    {
+      label: "Этот месяц",
+      range: { from: startOfMonth(today), to: endOfMonth(today) },
+    },
+    {
+      label: "Прошлая неделя",
+      range: { from: subDays(today, 7), to: subDays(today, 1) },
+    },
+  ];
+}
+
+/**
+ * Бронирование: диапазон дат, быстрые пресеты и время заезда/выезда.
+ */
+export function BookingDateRangeExample() {
+  const [range, setRange] = React.useState<DateRange | undefined>();
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <Button.Root mode="stroke" size="m" variant="neutral">
+          Заезд и выезд
+        </Button.Root>
+      </Popover.Trigger>
+      <Popover.Content align="start" insetPadding="none" side="bottom">
+        <Datepicker.Shell
+          presets={<Datepicker.Presets mode="range" presets={stayPresets()} onSelect={setRange} />}
+        >
+          <Datepicker.Calendar
+            locale={ru}
+            mode="range"
+            responsiveMonths
+            selected={range}
+            onSelect={setRange}
+          />
+          <Datepicker.Time
+            mode="range"
+            from={range?.from}
+            labels={{ from: "Заезд", to: "Выезд" }}
+            to={range?.to}
+            onFromChange={(next) => {
+              setRange((prev) => ({ from: next, to: prev?.to }));
+            }}
+            onToChange={(next) => {
+              setRange((prev) => ({ from: prev?.from, to: next }));
+            }}
+          />
+        </Datepicker.Shell>
+      </Popover.Content>
+    </Popover.Root>
+  );
+}

package/src/components/datepicker/examples/full-width-form.tsx

@@ -0,0 +1,59 @@
+import { format } from "date-fns";
+import { ru } from "date-fns/locale";
+import { Button, Datepicker, Label, Popover } from "prime-ui-kit";
+import * as React from "react";
+
+const fieldStack: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--prime-sys-spacing-s)",
+  width: "100%",
+  maxWidth: "22rem",
+  minWidth: 0,
+};
+
+/**
+ * Полноширинное поле в колонке формы: триггер на всю ширину, широкая панель поповера.
+ */
+export function FullWidthFormDateExample() {
+  const [value, setValue] = React.useState<Date | undefined>();
+  const [open, setOpen] = React.useState(false);
+
+  const triggerText = value ? format(value, "d MMMM yyyy", { locale: ru }) : "Выберите дату";
+
+  return (
+    <div style={fieldStack}>
+      <Label.Root htmlFor="fw-date-trigger" size="m">
+        Дата визита
+      </Label.Root>
+      <Popover.Root open={open} onOpenChange={setOpen}>
+        <Popover.Trigger asChild>
+          <Button.Root fullWidth id="fw-date-trigger" mode="stroke" size="m" variant="neutral">
+            {triggerText}
+          </Button.Root>
+        </Popover.Trigger>
+        <Popover.Content
+          align="start"
+          className="min-w-[min(100vw-2rem,36rem)]"
+          insetPadding="none"
+          side="bottom"
+        >
+          <Datepicker.Shell className="min-w-0">
+            <Datepicker.Calendar
+              locale={ru}
+              mode="single"
+              responsiveMonths
+              selected={value}
+              onSelect={(d) => {
+                setValue(d);
+                if (d) {
+                  setOpen(false);
+                }
+              }}
+            />
+          </Datepicker.Shell>
+        </Popover.Content>
+      </Popover.Root>
+    </div>
+  );
+}

package/src/components/datepicker/examples/range-report.tsx

@@ -0,0 +1,54 @@
+import { endOfMonth, startOfMonth, subDays, subMonths } from "date-fns";
+import { enUS } from "date-fns/locale";
+import {
+  Button,
+  Datepicker,
+  type DatepickerPresetRange,
+  type DateRange,
+  Popover,
+} from "prime-ui-kit";
+import * as React from "react";
+
+function reportPresets(): DatepickerPresetRange[] {
+  const today = new Date();
+  const startPrev = startOfMonth(subMonths(today, 1));
+  const endPrev = endOfMonth(subMonths(today, 1));
+  return [
+    { label: "This month", range: { from: startOfMonth(today), to: endOfMonth(today) } },
+    { label: "Last month", range: { from: startPrev, to: endPrev } },
+    { label: "Last 30 days", range: { from: subDays(today, 29), to: today } },
+  ];
+}
+
+/**
+ * Отчётный диапазон: только календарь и пресеты (без времени).
+ */
+export function ReportRangeExample() {
+  const [range, setRange] = React.useState<DateRange | undefined>();
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <Button.Root mode="stroke" size="m" variant="neutral">
+          Report period
+        </Button.Root>
+      </Popover.Trigger>
+      <Popover.Content align="start" insetPadding="none" side="bottom">
+        <Datepicker.Shell
+          presets={
+            <Datepicker.Presets mode="range" presets={reportPresets()} onSelect={setRange} />
+          }
+        >
+          <Datepicker.Calendar
+            locale={enUS}
+            mode="range"
+            numberOfMonths={2}
+            selected={range}
+            onSelect={setRange}
+          />
+        </Datepicker.Shell>
+      </Popover.Content>
+    </Popover.Root>
+  );
+}