prime-ui-kit 0.9.0 → 0.9.2

package/src/components/popover/examples/composition.tsx

@@ -1,45 +0,0 @@
-/** Report filters panel: header, full-width SegmentedControl, checkboxes and reset/apply actions. Use for filters and quick settings tied to one button. */
-import { SlidersHorizontal } from "lucide-react";
-import { Button, Checkbox, Popover, SegmentedControl } from "prime-ui-kit";
-
-import preview from "./examples.module.css";
-
-export default function PopoverCompositionExample() {
-  return (
-    <Popover.Root>
-      <Popover.Trigger>
-        <Button.Root variant="soft" tone="neutral">
-          <Button.Icon>
-            <SlidersHorizontal />
-          </Button.Icon>
-          Фильтры
-        </Button.Root>
-      </Popover.Trigger>
-      <Popover.Content className={preview.panelWidth} trapFocus>
-        <Popover.Header>
-          <Popover.Title>Фильтры отчёта</Popover.Title>
-          <Popover.Description>Применяются ко всем графикам на странице.</Popover.Description>
-        </Popover.Header>
-        <SegmentedControl.Root defaultValue="month" fullWidth aria-label="Период">
-          <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
-          <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
-          <SegmentedControl.Item value="year">Год</SegmentedControl.Item>
-        </SegmentedControl.Root>
-        <div className={preview.stack}>
-          <Checkbox.Root defaultChecked>
-            <Checkbox.Label>Только активные клиенты</Checkbox.Label>
-          </Checkbox.Root>
-          <Checkbox.Root>
-            <Checkbox.Label>Скрыть нулевые строки</Checkbox.Label>
-          </Checkbox.Root>
-        </div>
-        <Popover.Actions>
-          <Button.Root variant="ghost" tone="neutral">
-            Сбросить
-          </Button.Root>
-          <Button.Root>Применить</Button.Root>
-        </Popover.Actions>
-      </Popover.Content>
-    </Popover.Root>
-  );
-}

package/src/components/popover/examples/controlled.tsx

@@ -1,39 +0,0 @@
-/** Controlled popover: `open` + `onOpenChange` held by the parent, opened from another button and closed from inside. Use when other UI must open or close the panel. */
-import { Button, Popover, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import preview from "./examples.module.css";
-
-export default function PopoverControlledExample() {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <div className={preview.column}>
-      <div className={preview.row}>
-        <Button.Root variant="ghost" tone="neutral" onClick={() => setOpen(true)}>
-          Открыть извне
-        </Button.Root>
-        <Popover.Root open={open} onOpenChange={setOpen}>
-          <Popover.Trigger>
-            <Button.Root variant="soft" tone="neutral">
-              Триггер
-            </Button.Root>
-          </Popover.Trigger>
-          <Popover.Content>
-            <Typography.Root variant="body-s" tone="secondary" className={preview.text}>
-              Состояние хранит родитель.
-            </Typography.Root>
-            <Popover.Actions>
-              <Button.Root variant="soft" tone="neutral" onClick={() => setOpen(false)}>
-                Закрыть
-              </Button.Root>
-            </Popover.Actions>
-          </Popover.Content>
-        </Popover.Root>
-      </div>
-      <Typography.Root as="p" variant="body-s" tone="secondary">
-        Панель {open ? "открыта" : "закрыта"}
-      </Typography.Root>
-    </div>
-  );
-}

package/src/components/popover/examples/features.tsx

@@ -1,56 +0,0 @@
-/** Invite form in a popover: `trapFocus`, a nested Select whose list is not an outside click, submit closes the panel. Use for short forms anchored to a button. */
-import { Button, Input, Label, Popover, Select } from "prime-ui-kit";
-import * as React from "react";
-
-import preview from "./examples.module.css";
-
-export default function PopoverFeaturesExample() {
-  const roleId = React.useId();
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <Popover.Root open={open} onOpenChange={setOpen}>
-      <Popover.Trigger>
-        <Button.Root>Пригласить</Button.Root>
-      </Popover.Trigger>
-      <Popover.Content className={preview.panelWidth} trapFocus>
-        <Popover.Header>
-          <Popover.Title>Пригласить в проект</Popover.Title>
-          <Popover.Description>Приглашение придёт на почту.</Popover.Description>
-        </Popover.Header>
-        <form
-          className={preview.stack}
-          onSubmit={(event) => {
-            event.preventDefault();
-            setOpen(false);
-          }}
-        >
-          <Input.Root label="Почта" required>
-            <Input.Wrapper>
-              <Input.Field type="email" placeholder="name@company.ru" />
-            </Input.Wrapper>
-          </Input.Root>
-          <div className={preview.field}>
-            <Label.Root id={roleId}>Роль</Label.Root>
-            <Select.Root defaultValue="editor">
-              <Select.Trigger aria-labelledby={roleId}>
-                <Select.Value />
-              </Select.Trigger>
-              <Select.Content>
-                <Select.Item value="viewer">Наблюдатель</Select.Item>
-                <Select.Item value="editor">Редактор</Select.Item>
-                <Select.Item value="admin">Администратор</Select.Item>
-              </Select.Content>
-            </Select.Root>
-          </div>
-          <Popover.Actions>
-            <Button.Root variant="ghost" tone="neutral" onClick={() => setOpen(false)}>
-              Отмена
-            </Button.Root>
-            <Button.Root type="submit">Отправить</Button.Root>
-          </Popover.Actions>
-        </form>
-      </Popover.Content>
-    </Popover.Root>
-  );
-}

package/src/components/popover/examples/inset-variants.tsx

@@ -1,58 +0,0 @@
-/** Panel density via `insetPadding` and `insetGap`: default, extra air and no gap. Use none/extra values only for custom layouts inside the panel. */
-import { Button, Popover, Typography } from "prime-ui-kit";
-
-import preview from "./examples.module.css";
-
-export default function PopoverInsetVariantsExample() {
-  return (
-    <div className={preview.row}>
-      <Popover.Root>
-        <Popover.Trigger>
-          <Button.Root variant="soft" tone="neutral">
-            По умолчанию
-          </Button.Root>
-        </Popover.Trigger>
-        <Popover.Content>
-          <Typography.Root variant="body-s" tone="secondary" className={preview.text}>
-            Отступ панели по ярусу m — 16 px.
-          </Typography.Root>
-          <Typography.Root variant="body-s" tone="secondary" className={preview.text}>
-            Зазор между блоками — 12 px.
-          </Typography.Root>
-        </Popover.Content>
-      </Popover.Root>
-
-      <Popover.Root>
-        <Popover.Trigger>
-          <Button.Root variant="soft" tone="neutral">
-            insetPadding=&quot;x3&quot;
-          </Button.Root>
-        </Popover.Trigger>
-        <Popover.Content insetPadding="x3" insetGap="x4">
-          <Typography.Root variant="body-s" tone="secondary" className={preview.text}>
-            Больше воздуха вокруг содержимого.
-          </Typography.Root>
-          <Typography.Root variant="body-s" tone="secondary" className={preview.text}>
-            И между абзацами (insetGap x4).
-          </Typography.Root>
-        </Popover.Content>
-      </Popover.Root>
-
-      <Popover.Root>
-        <Popover.Trigger>
-          <Button.Root variant="soft" tone="neutral">
-            insetGap=&quot;none&quot;
-          </Button.Root>
-        </Popover.Trigger>
-        <Popover.Content insetGap="none">
-          <Typography.Root variant="body-s" tone="secondary" className={preview.text}>
-            Строки идут вплотную —
-          </Typography.Root>
-          <Typography.Root variant="body-s" tone="secondary" className={preview.text}>
-            удобно для собственной разметки.
-          </Typography.Root>
-        </Popover.Content>
-      </Popover.Root>
-    </div>
-  );
-}

package/src/components/popover/examples/states.tsx

@@ -1,48 +0,0 @@
-/** A destructive confirm with Header, Title, Description and Actions, and a disabled trigger that never opens the panel. Use for lightweight confirmations next to the action. */
-import { Button, Popover, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import preview from "./examples.module.css";
-
-export default function PopoverStatesExample() {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <div className={preview.row}>
-      <Popover.Root open={open} onOpenChange={setOpen}>
-        <Popover.Trigger>
-          <Button.Root variant="soft" tone="danger">
-            Удалить комментарий
-          </Button.Root>
-        </Popover.Trigger>
-        <Popover.Content className={preview.panelWidth}>
-          <Popover.Header>
-            <Popover.Title>Удалить комментарий?</Popover.Title>
-            <Popover.Description>Его нельзя будет восстановить.</Popover.Description>
-          </Popover.Header>
-          <Popover.Actions>
-            <Button.Root variant="ghost" tone="neutral" onClick={() => setOpen(false)}>
-              Отмена
-            </Button.Root>
-            <Button.Root tone="danger" onClick={() => setOpen(false)}>
-              Удалить
-            </Button.Root>
-          </Popover.Actions>
-        </Popover.Content>
-      </Popover.Root>
-
-      <Popover.Root>
-        <Popover.Trigger>
-          <Button.Root variant="soft" tone="neutral" disabled>
-            Недоступно
-          </Button.Root>
-        </Popover.Trigger>
-        <Popover.Content>
-          <Typography.Root variant="body-s" tone="secondary" className={preview.text}>
-            Не откроется: триггер отключён.
-          </Typography.Root>
-        </Popover.Content>
-      </Popover.Root>
-    </div>
-  );
-}

package/src/components/progress-bar/examples/file-upload.tsx

@@ -1,52 +0,0 @@
-/** Live file uploads in a card: progress grows, finished files turn `success`, a failed one `danger`. Use it for per-item progress of background operations. */
-import { Button, ProgressBar, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-type Upload = { name: string; size: string; progress: number; failed?: boolean };
-
-const initial: Upload[] = [
-  { name: "отчёт-сентябрь.pdf", size: "2,4 МБ", progress: 100 },
-  { name: "прайс-лист.xlsx", size: "860 КБ", progress: 35 },
-  { name: "фото-склада.zip", size: "48 МБ", progress: 62, failed: true },
-];
-
-export default function ProgressBarFileUploadExample() {
-  const [files, setFiles] = React.useState(initial);
-
-  React.useEffect(() => {
-    const id = window.setInterval(() => {
-      setFiles((prev) =>
-        prev.map((f) =>
-          f.failed || f.progress >= 100 ? f : { ...f, progress: Math.min(100, f.progress + 7) },
-        ),
-      );
-    }, 500);
-    return () => window.clearInterval(id);
-  }, []);
-
-  return (
-    <div className={styles.card}>
-      <div className={styles.cardHeader}>
-        <Typography.Root as="h3" variant="title-s">
-          Загрузка файлов
-        </Typography.Root>
-        <Button.Root variant="ghost" tone="neutral" size="s" onClick={() => setFiles(initial)}>
-          Заново
-        </Button.Root>
-      </div>
-      {files.map((f) => {
-        const tone = f.failed ? "danger" : f.progress >= 100 ? "success" : "accent";
-        return (
-          <div key={f.name} className={styles.file}>
-            <ProgressBar.Root value={f.progress} tone={tone} label={f.name} showValue />
-            <Typography.Root as="span" variant="caption" tone="muted" className={styles.meta}>
-              {f.failed ? "Сбой соединения" : f.size}
-            </Typography.Root>
-          </div>
-        );
-      })}
-    </div>
-  );
-}

package/src/components/progress-bar/examples/values-and-tones.tsx

@@ -1,17 +0,0 @@
-/** 0, partial and 100; `tone` success / warning / danger; `max` for a "3 of 5 steps" scale. Use the tone to show the outcome, not the progress itself. */
-import { ProgressBar } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function ProgressBarValuesAndTonesExample() {
-  return (
-    <div className={styles.stack}>
-      <ProgressBar.Root value={0} label="Ещё не начато" showValue />
-      <ProgressBar.Root value={42} label="Загрузка" showValue />
-      <ProgressBar.Root value={100} tone="success" label="Готово" showValue />
-      <ProgressBar.Root value={86} tone="warning" label="Квота почти исчерпана" showValue />
-      <ProgressBar.Root value={30} tone="danger" label="Импорт прерван" showValue />
-      <ProgressBar.Root value={3} max={5} label="Профиль: 3 из 5 шагов" />
-    </div>
-  );
-}

package/src/components/progress-circle/examples/goals-card.tsx

@@ -1,37 +0,0 @@
-/** Quarter goals in a card: an `m` ring with the percentage inside and a caption next to it. Use it for compact KPI tiles. */
-import { ProgressCircle, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const goals = [
-  { title: "Выручка", value: 84, note: "₽ 4,2 из 5 млн", tone: "accent" },
-  { title: "Новые клиенты", value: 100, note: "312 из 300", tone: "success" },
-  { title: "Обращения", value: 61, note: "SLA 61% в срок", tone: "warning" },
-] as const;
-
-export default function ProgressCircleGoalsCardExample() {
-  return (
-    <div className={styles.card}>
-      <Typography.Root as="h3" variant="title-s">
-        Цели на IV квартал
-      </Typography.Root>
-      <div className={styles.goals}>
-        {goals.map((g) => (
-          <div key={g.title} className={styles.goal}>
-            <ProgressCircle.Root value={g.value} tone={g.tone} label={g.title}>
-              {`${g.value}%`}
-            </ProgressCircle.Root>
-            <span className={styles.goalText}>
-              <Typography.Root as="span" variant="body-s">
-                {g.title}
-              </Typography.Root>
-              <Typography.Root as="span" variant="caption" tone="muted" className={styles.meta}>
-                {g.note}
-              </Typography.Root>
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/components/progress-circle/examples/values-and-tones.tsx

@@ -1,56 +0,0 @@
-/** `tone` colors the arc; at `0` only the track remains; `max` changes the scale (7 of 12); the center holds text or an icon. Always pass `label`: it is the ring's only accessible name. */
-import { Check } from "lucide-react";
-import { ProgressCircle, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-function Caption({ children }: { children: string }) {
-  return (
-    <Typography.Root as="span" variant="caption" tone="muted">
-      {children}
-    </Typography.Root>
-  );
-}
-
-export default function ProgressCircleValuesAndTonesExample() {
-  return (
-    <div className={styles.row}>
-      <div className={styles.item}>
-        <ProgressCircle.Root size="l" value={0} label="Не начато">
-          0%
-        </ProgressCircle.Root>
-        <Caption>0</Caption>
-      </div>
-      <div className={styles.item}>
-        <ProgressCircle.Root size="l" value={45} label="В процессе">
-          45%
-        </ProgressCircle.Root>
-        <Caption>default</Caption>
-      </div>
-      <div className={styles.item}>
-        <ProgressCircle.Root size="l" value={100} tone="success" label="Готово">
-          <Check aria-hidden />
-        </ProgressCircle.Root>
-        <Caption>success</Caption>
-      </div>
-      <div className={styles.item}>
-        <ProgressCircle.Root size="l" value={88} tone="warning" label="Квота">
-          88%
-        </ProgressCircle.Root>
-        <Caption>warning</Caption>
-      </div>
-      <div className={styles.item}>
-        <ProgressCircle.Root size="l" value={20} tone="danger" label="Сбой">
-          20%
-        </ProgressCircle.Root>
-        <Caption>danger</Caption>
-      </div>
-      <div className={styles.item}>
-        <ProgressCircle.Root size="l" value={7} max={12} label="Месяцев оплачено">
-          7/12
-        </ProgressCircle.Root>
-        <Caption>max=12</Caption>
-      </div>
-    </div>
-  );
-}

package/src/components/radio/examples/examples.module.css

@@ -1,43 +0,0 @@
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  justify-content: center;
-  gap: var(--prime-space-8);
-}
-
-.cell {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--prime-space-2);
-}
-
-.card {
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
-}
-
-/* Card body: question block and summary line. */
-.content {
-  display: grid;
-  gap: var(--prime-space-4);
-  min-width: 0;
-}
-
-/* Group heading above the options. */
-.field {
-  display: grid;
-  gap: var(--prime-space-2);
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
-  min-width: 0;
-}
-
-.stack {
-  display: grid;
-  gap: var(--prime-space-4);
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-}

package/src/components/radio/examples/hint-error.tsx

@@ -1,28 +0,0 @@
-/** A required, invalid group with option descriptions and one error under the last option. Use it to validate a one-of-many choice in a form. */
-import { Radio, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-export default function RadioHintErrorExample() {
-  const labelId = React.useId();
-
-  return (
-    <div className={styles.field}>
-      <Typography.Root id={labelId} variant="body-s" weight="medium" tone="secondary">
-        Способ оплаты
-      </Typography.Root>
-      <Radio.Group name="payment" required invalid aria-labelledby={labelId}>
-        <Radio.Root value="card">
-          <Radio.Label>Банковская карта</Radio.Label>
-          <Radio.Hint>Списание сразу после подтверждения заказа.</Radio.Hint>
-        </Radio.Root>
-        <Radio.Root value="invoice">
-          <Radio.Label>Счёт для юрлица</Radio.Label>
-          <Radio.Hint>Реквизиты придут на почту в течение рабочего дня.</Radio.Hint>
-          <Radio.Error>Выберите способ оплаты, чтобы оформить заказ.</Radio.Error>
-        </Radio.Root>
-      </Radio.Group>
-    </div>
-  );
-}

package/src/components/radio/examples/horizontal.tsx

@@ -1,33 +0,0 @@
-/** Short options laid out in a wrapping row with orientation="horizontal". Use it for 2–4 short labels without descriptions. */
-import { Radio, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-export default function RadioHorizontalExample() {
-  const labelId = React.useId();
-
-  return (
-    <div className={styles.field}>
-      <Typography.Root id={labelId} variant="body-s" weight="medium" tone="secondary">
-        Период отчёта
-      </Typography.Root>
-      <Radio.Group
-        name="period"
-        defaultValue="week"
-        orientation="horizontal"
-        aria-labelledby={labelId}
-      >
-        <Radio.Root value="week">
-          <Radio.Label>Неделя</Radio.Label>
-        </Radio.Root>
-        <Radio.Root value="month">
-          <Radio.Label>Месяц</Radio.Label>
-        </Radio.Root>
-        <Radio.Root value="quarter">
-          <Radio.Label>Квартал</Radio.Label>
-        </Radio.Root>
-      </Radio.Group>
-    </div>
-  );
-}

package/src/components/radio/examples/plan-picker.tsx

@@ -1,55 +0,0 @@
-/** A controlled plan picker in a settings card: options with descriptions, a disabled option explaining why, and card actions. Use it for a one-of-many choice with consequences. */
-import { Button, Card, Radio, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const PLANS = [
-  { id: "start", label: "Старт", hint: "До 5 участников, базовые отчёты." },
-  { id: "team", label: "Команда", hint: "Общие проекты, SSO и журнал действий." },
-  { id: "business", label: "Бизнес", hint: "Выделенная поддержка и хранение данных в РФ." },
-];
-
-export default function RadioPlanPickerExample() {
-  const [plan, setPlan] = React.useState("team");
-  const current = PLANS.find((p) => p.id === plan);
-  const labelId = React.useId();
-
-  return (
-    <Card.Root variant="panel" className={styles.card}>
-      <Card.SectionHeader>
-        <Card.SectionTitle>Тариф</Card.SectionTitle>
-      </Card.SectionHeader>
-      <Card.Body>
-        <div className={styles.content}>
-          <div className={styles.field}>
-            <Typography.Root id={labelId} variant="body-s" weight="medium" tone="secondary">
-              Выберите план для рабочего пространства
-            </Typography.Root>
-            <Radio.Group name="plan" value={plan} onValueChange={setPlan} aria-labelledby={labelId}>
-              {PLANS.map((p) => (
-                <Radio.Root key={p.id} value={p.id}>
-                  <Radio.Label>{p.label}</Radio.Label>
-                  <Radio.Hint>{p.hint}</Radio.Hint>
-                </Radio.Root>
-              ))}
-              <Radio.Root value="enterprise" disabled>
-                <Radio.Label>Корпоративный</Radio.Label>
-                <Radio.Hint>Подключается через отдел продаж.</Radio.Hint>
-              </Radio.Root>
-            </Radio.Group>
-          </div>
-          <Typography.Root variant="body-s" tone="muted">
-            Будет подключён тариф «{current?.label}».
-          </Typography.Root>
-        </div>
-      </Card.Body>
-      <Card.Actions>
-        <Button.Root variant="ghost" tone="neutral">
-          Отмена
-        </Button.Root>
-        <Button.Root>Сменить тариф</Button.Root>
-      </Card.Actions>
-    </Card.Root>
-  );
-}

package/src/components/scroll-container/examples/both-axes.tsx

@@ -1,57 +0,0 @@
-/** `axis="both"` for a wide grid that scrolls in both directions, and `overscrollBehavior="auto"` that hands the scroll to the page at the end. Use for wide canvases, schedules and timetables. */
-import { ScrollContainer, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const HOURS = Array.from({ length: 12 }, (_, i) => `${String(9 + i).padStart(2, "0")}:00`);
-const ROOMS = Array.from({ length: 16 }, (_, i) => `Зал ${i + 1}`);
-
-export default function ScrollContainerBothAxesExample() {
-  return (
-    <div className={styles.layout}>
-      <section className={styles.card} aria-label="Расписание залов">
-        <Typography.Root as="h3" variant="title-s" className={styles.cardTitle}>
-          Расписание · axis=both
-        </Typography.Root>
-        <ScrollContainer
-          axis="both"
-          tabIndex={0}
-          aria-label="Сетка расписания"
-          className={styles.canvas}
-        >
-          <div className={styles.grid}>
-            {ROOMS.flatMap((room) =>
-              HOURS.map((hour) => (
-                <Typography.Root
-                  key={`${room}-${hour}`}
-                  as="div"
-                  variant="caption"
-                  tone="secondary"
-                  className={styles.cell}
-                >
-                  {room} · {hour}
-                </Typography.Root>
-              )),
-            )}
-          </div>
-        </ScrollContainer>
-      </section>
-      <section className={styles.card} aria-label="Журнал">
-        <Typography.Root as="h3" variant="title-s" className={styles.cardTitle}>
-          Журнал · overscroll auto
-        </Typography.Root>
-        <ScrollContainer overscrollBehavior="auto" tabIndex={0} aria-label="Журнал событий">
-          <ul className={styles.list}>
-            {HOURS.map((hour) => (
-              <li key={hour}>
-                <Typography.Root as="span" variant="body-m" tone="secondary">
-                  {hour} — отчёт выгружен
-                </Typography.Root>
-              </li>
-            ))}
-          </ul>
-        </ScrollContainer>
-      </section>
-    </div>
-  );
-}