prime-ui-kit 0.7.11 → 0.9.0

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

@@ -1,43 +0,0 @@
-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" variant="neutral">
-          {triggerLabel}
-        </Button.Root>
-      </Popover.Trigger>
-      <Popover.Content align="start" 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

@@ -1,71 +0,0 @@
-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" variant="neutral">
-          Заезд и выезд
-        </Button.Root>
-      </Popover.Trigger>
-      <Popover.Content align="start" 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

@@ -1,52 +0,0 @@
-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">Дата визита</Label.Root>
-      <Popover.Root open={open} onOpenChange={setOpen}>
-        <Popover.Trigger asChild>
-          <Button.Root fullWidth id="fw-date-trigger" mode="stroke" variant="neutral">
-            {triggerText}
-          </Button.Root>
-        </Popover.Trigger>
-        <Popover.Content align="start" className="min-w-[min(100vw-2rem,36rem)]" 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

@@ -1,54 +0,0 @@
-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" variant="neutral">
-          Report period
-        </Button.Root>
-      </Popover.Trigger>
-      <Popover.Content align="start" 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>
-  );
-}

package/src/components/digit-input/examples/composition.tsx

@@ -1,24 +0,0 @@
-import { DigitInput, Hint, Label } from "prime-ui-kit";
-
-/**
- * Подпись и подсказка рядом с группой ячеек — типичный блок ввода кода в форме.
- * Паритет с `playground/snippets/digit-input/composition.tsx`.
- */
-export default function DigitInputCompositionExample() {
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: "var(--prime-sys-spacing-m)",
-      }}
-    >
-      <Label.Root>Код из сообщения</Label.Root>
-      <DigitInput.Root length={4} />
-      <Hint.Root variant="default">
-        Вставьте код из буфера: цифры распределятся по ячейкам с текущей позиции.
-      </Hint.Root>
-    </div>
-  );
-}

package/src/components/digit-input/examples/error-state.tsx

@@ -1,12 +0,0 @@
-import { DigitInput, Hint, Label } from "prime-ui-kit";
-
-/** Отклонённый код: визуальная ошибка на группе и текст подсказки в тоне danger. */
-export default function ErrorStateExample() {
-  return (
-    <>
-      <Label.Root>Код подтверждения</Label.Root>
-      <DigitInput.Root defaultValue="1230" hasError length={4} />
-      <Hint.Root variant="error">Неверный код. Запросите новый или проверьте ввод.</Hint.Root>
-    </>
-  );
-}

package/src/components/digit-input/examples/features.tsx

@@ -1,30 +0,0 @@
-import { DigitInput } from "prime-ui-kit";
-import * as React from "react";
-
-/**
- * Разная длина ряда, начальное значение, колбэк по завершении ввода.
- * Паритет с `playground/snippets/digit-input/features.tsx`.
- */
-export default function DigitInputFeaturesExample() {
-  const [completed, setCompleted] = React.useState<string | null>(null);
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-m)",
-        alignItems: "flex-start",
-      }}
-    >
-      <p style={{ margin: 0 }}>Пропы length и defaultValue без внешнего состояния</p>
-      <DigitInput.Root length={4} defaultValue="2184" />
-      <DigitInput.Root length={6} defaultValue="12" />
-      <p style={{ margin: 0 }}>onComplete — один раз при заполнении последней ячейки</p>
-      <DigitInput.Root length={4} onComplete={(v) => setCompleted(v)} />
-      <p style={{ margin: 0 }}>
-        {completed ? `Последний полный код: ${completed}` : "Введите четыре цифры подряд"}
-      </p>
-    </div>
-  );
-}

package/src/components/digit-input/examples/otp-login.tsx

@@ -1,17 +0,0 @@
-import { DigitInput, Hint, Label } from "prime-ui-kit";
-import * as React from "react";
-
-/** SMS / OTP: шесть ячеек, контролируемое значение, подсказка про вставку из буфера. */
-export default function OtpLoginExample() {
-  const [code, setCode] = React.useState("");
-
-  return (
-    <>
-      <Label.Root>Код из SMS</Label.Root>
-      <DigitInput.Root length={6} value={code} onChange={setCode} />
-      <Hint.Root variant="default">
-        Вставьте код из сообщения — цифры заполнят ячейки с текущей позиции.
-      </Hint.Root>
-    </>
-  );
-}

package/src/components/digit-input/examples/pin.tsx

@@ -1,11 +0,0 @@
-import { DigitInput, Label } from "prime-ui-kit";
-
-/** PIN: четыре цифры, увеличенный размер ячеек для удобного ввода на тач-экране. */
-export default function PinExample() {
-  return (
-    <>
-      <Label.Root size="l">PIN-код</Label.Root>
-      <DigitInput.Root length={4} size="l" />
-    </>
-  );
-}

package/src/components/digit-input/examples/resend-and-clear.tsx

@@ -1,17 +0,0 @@
-import { Button, DigitInput, Label } from "prime-ui-kit";
-import * as React from "react";
-
-/** Повторная отправка кода: сброс поля через родительское состояние. */
-export default function ResendAndClearExample() {
-  const [code, setCode] = React.useState("");
-
-  return (
-    <>
-      <Label.Root>Код</Label.Root>
-      <DigitInput.Root length={4} value={code} onChange={setCode} />
-      <Button.Root mode="stroke" type="button" variant="neutral" onClick={() => setCode("")}>
-        Отправить снова
-      </Button.Root>
-    </>
-  );
-}

package/src/components/divider/examples/card-splits.tsx

@@ -1,27 +0,0 @@
-import { Divider } from "prime-ui-kit";
-
-import s from "./divider-examples.module.css";
-
-/** Inside one card: horizontal rules separate header, body, and a summary footer without extra bordered panels. */
-export default function DividerCardSplitsExample() {
-  return (
-    <section className={s.card}>
-      <div className={s.stack}>
-        <div>
-          <h3 className={s.subheading}>Order summary</h3>
-          <p className={s.muted}>Ships in 2–3 business days</p>
-        </div>
-
-        <Divider.Root />
-
-        <p className={s.body}>
-          Subtotal, shipping, and tax are estimated until checkout. You can edit the cart before
-          paying.
-        </p>
-
-        <Divider.Root>Total</Divider.Root>
-        <p className={s.body}>$128.00 USD</p>
-      </div>
-    </section>
-  );
-}

package/src/components/divider/examples/divider-examples.module.css

@@ -1,137 +0,0 @@
-/* Layout shells for COMPONENT.md examples — semantic tokens only */
-
-.shell {
-  box-sizing: border-box;
-  width: 100%;
-  max-width: min(100%, 26.25rem);
-}
-
-.card {
-  composes: shell;
-  padding: var(--prime-sys-spacing-x4);
-  border: 1px solid var(--prime-sys-color-border-subtle);
-  border-radius: var(--prime-sys-shape-radius-l);
-  background-color: var(--prime-sys-color-surface-default);
-}
-
-.stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-x3);
-}
-
-.stackLoose {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-x4);
-}
-
-.heading {
-  margin: 0;
-  font-size: var(--prime-sys-typography-sizeScale-l);
-  font-weight: var(--prime-sys-typography-weight-semibold);
-}
-
-.subheading {
-  margin: 0;
-  font-size: var(--prime-sys-typography-sizeScale-m);
-  font-weight: var(--prime-sys-typography-weight-semibold);
-}
-
-.body {
-  margin: 0;
-  font-size: var(--prime-sys-typography-sizeScale-s);
-  color: var(--prime-sys-color-content-secondary);
-  line-height: var(--prime-sys-typography-lineHeightScale-s);
-}
-
-.muted {
-  margin: 0;
-  font-size: var(--prime-sys-typography-sizeScale-xs);
-  color: var(--prime-sys-color-content-muted);
-}
-
-.list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  border: 1px solid var(--prime-sys-color-border-subtle);
-  border-radius: var(--prime-sys-shape-radius-m);
-  overflow: hidden;
-  background-color: var(--prime-sys-color-surface-raised);
-}
-
-.listRow {
-  padding: var(--prime-sys-spacing-x3) var(--prime-sys-spacing-x4);
-  font-size: var(--prime-sys-typography-sizeScale-s);
-  color: var(--prime-sys-color-content-secondary);
-}
-
-.listSep {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.insetBody {
-  margin: 0;
-  padding-left: var(--prime-sys-spacing-x4);
-  font-size: var(--prime-sys-typography-sizeScale-s);
-  color: var(--prime-sys-color-content-secondary);
-}
-
-.rowWithIcon {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--prime-sys-spacing-x3);
-}
-
-.iconStub {
-  flex-shrink: 0;
-  width: 2.25rem;
-  height: 2.25rem;
-  border-radius: var(--prime-sys-shape-radius-m);
-  background-color: var(--prime-sys-color-surface-accentSoft);
-}
-
-.rowMain {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-xs);
-}
-
-.rowTitle {
-  margin: 0;
-  font-size: var(--prime-sys-typography-sizeScale-s);
-  font-weight: var(--prime-sys-typography-weight-medium);
-}
-
-.rowDesc {
-  margin: 0;
-  font-size: var(--prime-sys-typography-sizeScale-xs);
-  color: var(--prime-sys-color-content-muted);
-}
-
-.toolbar {
-  display: flex;
-  align-items: stretch;
-  gap: var(--prime-sys-spacing-x2);
-  min-height: 2.5rem;
-  padding: 0 var(--prime-sys-spacing-x3);
-  border: 1px solid var(--prime-sys-color-border-subtle);
-  border-radius: var(--prime-sys-shape-radius-m);
-  background-color: var(--prime-sys-color-surface-raised);
-  width: fit-content;
-}
-
-.toolbarBtn {
-  align-self: center;
-  padding: var(--prime-sys-spacing-xs) var(--prime-sys-spacing-m);
-  border: none;
-  background: transparent;
-  font-size: var(--prime-sys-typography-sizeScale-s);
-  font-weight: var(--prime-sys-typography-weight-medium);
-  cursor: pointer;
-}

package/src/components/divider/examples/inset-stack.tsx

@@ -1,33 +0,0 @@
-import { Divider } from "prime-ui-kit";
-
-import s from "./divider-examples.module.css";
-
-/**
- * Stack with a leading icon column: copy is inset in the text column while dividers span the full card width,
- * matching common settings / list layouts.
- */
-export default function DividerInsetStackExample() {
-  return (
-    <section className={s.card}>
-      <div className={s.stack}>
-        <div className={s.rowWithIcon}>
-          <span className={s.iconStub} aria-hidden />
-          <div className={s.rowMain}>
-            <p className={s.rowTitle}>Workspace</p>
-            <p className={s.rowDesc}>Renaming affects the sidebar and shared links.</p>
-          </div>
-        </div>
-
-        <Divider.Root />
-
-        <div className={s.rowWithIcon}>
-          <span className={s.iconStub} aria-hidden />
-          <div className={s.rowMain}>
-            <p className={s.rowTitle}>Billing</p>
-            <p className={s.insetBody}>Payment method and invoices (inset body copy).</p>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}

package/src/components/divider/examples/line-spacing-column.tsx

@@ -1,27 +0,0 @@
-import { Divider } from "prime-ui-kit";
-
-import s from "./divider-examples.module.css";
-
-/**
- * `variant="line-spacing"` between flex children: vertical rhythm comes from the parent `gap`, not from the
- * divider stretching as a spacer.
- */
-export default function DividerLineSpacingColumnExample() {
-  return (
-    <div className={`${s.shell} ${s.stack}`}>
-      <p className={s.body}>First block in a column with gap-driven spacing.</p>
-      <Divider.Root variant="line-spacing" />
-      <p className={s.body}>Second block — the divider is only a marker between siblings.</p>
-      <Divider.Root variant="line-spacing" />
-      <div className={s.toolbar}>
-        <button className={s.toolbarBtn} type="button">
-          One
-        </button>
-        <Divider.Root orientation="vertical" />
-        <button className={s.toolbarBtn} type="button">
-          Two
-        </button>
-      </div>
-    </div>
-  );
-}

package/src/components/divider/examples/list-separators.tsx

@@ -1,20 +0,0 @@
-import { Divider } from "prime-ui-kit";
-
-import s from "./divider-examples.module.css";
-
-/** Full-width horizontal dividers between rows inside a bordered list shell. */
-export default function DividerListSeparatorsExample() {
-  return (
-    <ul className={s.list}>
-      <li className={s.listRow}>Inbox</li>
-      <li className={s.listSep} aria-hidden>
-        <Divider.Root size="s" role="presentation" />
-      </li>
-      <li className={s.listRow}>Sent</li>
-      <li className={s.listSep} aria-hidden>
-        <Divider.Root size="s" role="presentation" />
-      </li>
-      <li className={s.listRow}>Archive</li>
-    </ul>
-  );
-}

package/src/components/divider/examples/section-breaks.tsx

@@ -1,23 +0,0 @@
-import { Divider } from "prime-ui-kit";
-
-import s from "./divider-examples.module.css";
-
-/** Section rhythm: `variant="text"` labels blocks; pair with real headings where structure matters for a11y. */
-export default function DividerSectionBreaksExample() {
-  return (
-    <article className={s.card}>
-      <div className={s.stackLoose}>
-        <header>
-          <h2 className={s.heading}>Account</h2>
-          <p className={s.muted}>Profile and security</p>
-        </header>
-
-        <Divider.Root variant="text">General</Divider.Root>
-        <p className={s.body}>Name, email, and language preferences apply across all workspaces.</p>
-
-        <Divider.Root variant="text">Notifications</Divider.Root>
-        <p className={s.body}>Choose channels for product updates and billing alerts.</p>
-      </div>
-    </article>
-  );
-}

package/src/components/drawer/examples/cart-preview.tsx

@@ -1,60 +0,0 @@
-import * as React from "react";
-
-import { Button } from "@/components/button/Button";
-import { Drawer } from "@/components/drawer/Drawer";
-import { Icon } from "@/icons";
-
-import styles from "./examples-scenarios.module.css";
-
-const lines = [
-  { title: "Canvas tote", meta: "Qty 1 · Navy", price: "$48.00" },
-  { title: "Studio mug", meta: "Qty 2 · Matte black", price: "$36.00" },
-] as const;
-
-/**
- * Trailing-edge preview of the cart: scroll line items; primary checkout stays in the footer.
- */
-export default function DrawerExampleCartPreview() {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <>
-      <Button.Root type="button" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
-        Cart (3)
-      </Button.Root>
-      <Drawer
-        open={open}
-        onOpenChange={setOpen}
-        side="right"
-        title="Your cart"
-        description="2 products ready for checkout"
-        icon={<Icon name="nav.itemDot" tone="subtle" />}
-        footer={
-          <div className={styles.footerActions}>
-            <Button.Root
-              type="button"
-              variant="neutral"
-              mode="stroke"
-              onClick={() => setOpen(false)}
-            >
-              View cart
-            </Button.Root>
-            <Button.Root type="button" variant="primary" onClick={() => setOpen(false)}>
-              Checkout
-            </Button.Root>
-          </div>
-        }
-      >
-        {lines.map((line) => (
-          <div key={line.title} className={styles.cartLine}>
-            <div className={styles.cartLineMain}>
-              <p className={styles.cartTitle}>{line.title}</p>
-              <p className={styles.cartPrice}>{line.price}</p>
-            </div>
-            <p className={styles.cartMeta}>{line.meta}</p>
-          </div>
-        ))}
-      </Drawer>
-    </>
-  );
-}