prime-ui-kit 0.9.0 → 0.9.2

package/src/components/banner/examples/placement.tsx

@@ -1,92 +0,0 @@
-/** `placement="page"` is an edge-to-edge strip above a page, `placement="inset"` (default) a rounded block in the flow or in a card; below 36rem of its own width the actions move under the text. Use `page` for account-wide notices, `inset` for section messages. */
-import { CreditCard, TriangleAlert } from "lucide-react";
-import { Banner, Button, Card, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-function TrialBanner({ placement }: { placement?: "inset" | "page" }) {
-  return (
-    <Banner.Root
-      tone="warning"
-      placement={placement}
-      role="region"
-      aria-label="Пробный период"
-      onDismiss={() => {}}
-    >
-      <Banner.Content>
-        <Banner.Icon as={TriangleAlert} aria-hidden />
-        <Banner.Title>Пробный период закончится 12 октября</Banner.Title>
-        <Banner.Description>
-          Выберите тариф, чтобы сохранить отчёты и настройки команды. Данные останутся доступны ещё
-          30 дней.
-        </Banner.Description>
-        <Banner.Actions>
-          <Button.Root variant="outline" tone="neutral">
-            Сравнить тарифы
-          </Button.Root>
-          <Button.Root>Выбрать тариф</Button.Root>
-        </Banner.Actions>
-      </Banner.Content>
-    </Banner.Root>
-  );
-}
-
-export default function BannerPlacementExample() {
-  return (
-    <div className={styles.sections}>
-      <div className={styles.group}>
-        <Typography.Root variant="caption" tone="muted">
-          <Typography.Root as="span" variant="code" tone="muted">
-            placement="page"
-          </Typography.Root>{" "}
-          — над страницей
-        </Typography.Root>
-        <div className={styles.pageFrame}>
-          <TrialBanner placement="page" />
-          <div className={styles.pageBody}>
-            <Typography.Root as="h3" variant="heading-s">
-              Отчёты
-            </Typography.Root>
-          </div>
-        </div>
-      </div>
-
-      <div className={styles.group}>
-        <Typography.Root variant="caption" tone="muted">
-          <Typography.Root as="span" variant="code" tone="muted">
-            placement="inset"
-          </Typography.Root>{" "}
-          — внутри карточки
-        </Typography.Root>
-        <Card.Root variant="panel">
-          <Card.SectionHeader>
-            <Card.SectionTitle>Оплата</Card.SectionTitle>
-          </Card.SectionHeader>
-          <Card.Body>
-            <Banner.Root tone="danger">
-              <Banner.Content>
-                <Banner.Icon as={CreditCard} aria-hidden />
-                <Banner.Title>Не удалось списать оплату</Banner.Title>
-                <Banner.Description>
-                  Карта •••• 4242 отклонена банком. Обновите способ оплаты до 15 октября.
-                </Banner.Description>
-                <Banner.Actions>
-                  <Button.Root tone="danger">Обновить карту</Button.Root>
-                </Banner.Actions>
-              </Banner.Content>
-            </Banner.Root>
-          </Card.Body>
-        </Card.Root>
-      </div>
-
-      <div className={styles.group}>
-        <Typography.Root variant="caption" tone="muted">
-          320px — действия под текстом
-        </Typography.Root>
-        <div className={styles.narrow}>
-          <TrialBanner />
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/breadcrumb/examples/collapse.tsx

@@ -1,56 +0,0 @@
-/** Long path: segments truncate, from five children the middle collapses into «…» below 30rem (still announced), plus a manual `Breadcrumb.Ellipsis`. Use for deep catalogs and long page names. */
-import { Breadcrumb, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-function Path() {
-  return (
-    <Breadcrumb.Root>
-      <Breadcrumb.Item href="#">Каталог</Breadcrumb.Item>
-      <Breadcrumb.Separator />
-      <Breadcrumb.Item href="#">Мебель</Breadcrumb.Item>
-      <Breadcrumb.Separator />
-      <Breadcrumb.Item href="#">Офисные кресла</Breadcrumb.Item>
-      <Breadcrumb.Separator />
-      <Breadcrumb.Item current>
-        Эргономичное кресло с подголовником и поддержкой поясницы
-      </Breadcrumb.Item>
-    </Breadcrumb.Root>
-  );
-}
-
-export default function BreadcrumbCollapseExample() {
-  return (
-    <div className={styles.stack}>
-      <div className={styles.group}>
-        <Typography.Root variant="caption" tone="muted">
-          Полная ширина
-        </Typography.Root>
-        <Path />
-      </div>
-      <div className={styles.group}>
-        <Typography.Root variant="caption" tone="muted">
-          320px — автосворачивание
-        </Typography.Root>
-        <div className={styles.narrow}>
-          <Path />
-        </div>
-      </div>
-      <div className={styles.group}>
-        <Typography.Root variant="caption" tone="muted">
-          Вручную:{" "}
-          <Typography.Root as="span" variant="code" tone="muted">
-            Breadcrumb.Ellipsis
-          </Typography.Root>
-        </Typography.Root>
-        <Breadcrumb.Root>
-          <Breadcrumb.Item href="#">Каталог</Breadcrumb.Item>
-          <Breadcrumb.Separator />
-          <Breadcrumb.Ellipsis />
-          <Breadcrumb.Separator />
-          <Breadcrumb.Item current>Кресло «Оптима»</Breadcrumb.Item>
-        </Breadcrumb.Root>
-      </div>
-    </div>
-  );
-}

package/src/components/breadcrumb/examples/page-header.tsx

@@ -1,31 +0,0 @@
-/** Page header: an `s` breadcrumb above the title and actions, the first link is a home icon with `aria-label`. Use at the top of detail pages. */
-import { Breadcrumb, Button, Icon, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function BreadcrumbPageHeaderExample() {
-  return (
-    <header className={styles.header}>
-      <Breadcrumb.Root size="s">
-        <Breadcrumb.Item href="#" aria-label="Главная">
-          <Icon name="nav.home" />
-        </Breadcrumb.Item>
-        <Breadcrumb.Separator />
-        <Breadcrumb.Item href="#">Клиенты</Breadcrumb.Item>
-        <Breadcrumb.Separator />
-        <Breadcrumb.Item current>ООО «Северный ветер»</Breadcrumb.Item>
-      </Breadcrumb.Root>
-      <div className={styles.titleRow}>
-        <Typography.Root as="h2" variant="heading-m">
-          ООО «Северный ветер»
-        </Typography.Root>
-        <div className={styles.actions}>
-          <Button.Root variant="outline" tone="neutral">
-            Изменить
-          </Button.Root>
-          <Button.Root>Новый счёт</Button.Root>
-        </div>
-      </div>
-    </header>
-  );
-}

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

@@ -1,46 +0,0 @@
-/** Editor toolbar and form footer: secondary actions ghost/outline/soft, one solid accent primary, the destructive action set apart. Use as the hierarchy template for a screen area. */
-import { Button, Icon } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function ButtonCompositionExample() {
-  return (
-    <div className={`${styles.stack} ${styles.composition}`}>
-      <div role="toolbar" aria-label="Действия с документом" className={styles.editorBar}>
-        <Button.Root variant="ghost" tone="neutral" aria-label="Копировать ссылку">
-          <Button.Icon>
-            <Icon name="action.copy" />
-          </Button.Icon>
-        </Button.Root>
-        <Button.Root variant="ghost" tone="neutral" aria-label="Доступ">
-          <Button.Icon>
-            <Icon name="status.locked" />
-          </Button.Icon>
-        </Button.Root>
-        <Button.Root variant="ghost" tone="neutral">
-          Предпросмотр
-        </Button.Root>
-        <span className={styles.spacer} aria-hidden />
-        <Button.Root variant="outline" tone="neutral">
-          Черновик
-        </Button.Root>
-        <Button.Root>
-          <Button.Icon>
-            <Icon name="action.upload" />
-          </Button.Icon>
-          Опубликовать
-        </Button.Root>
-      </div>
-      <div className={styles.footer}>
-        <Button.Root variant="ghost" tone="danger">
-          Удалить проект
-        </Button.Root>
-        <span className={styles.spacer} aria-hidden />
-        <Button.Root variant="soft" tone="neutral">
-          Отмена
-        </Button.Root>
-        <Button.Root type="submit">Сохранить изменения</Button.Root>
-      </div>
-    </div>
-  );
-}

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

@@ -1,18 +0,0 @@
-/** `loading` driven by parent state while a request runs. Use for async actions: the spinner appears by itself and clicks are blocked. */
-import { Button } from "prime-ui-kit";
-import { useState } from "react";
-
-export default function ButtonControlledExample() {
-  const [loading, setLoading] = useState(false);
-
-  function handleClick() {
-    setLoading(true);
-    window.setTimeout(() => setLoading(false), 1600);
-  }
-
-  return (
-    <Button.Root loading={loading} onClick={handleClick}>
-      Отправить отчёт
-    </Button.Root>
-  );
-}

package/src/components/button/examples/full-width.tsx

@@ -1,15 +0,0 @@
-/** `fullWidth` stretches buttons to the column width. Use in narrow forms, cards and mobile footers. */
-import { Button } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function ButtonFullWidthExample() {
-  return (
-    <div className={styles.stack}>
-      <Button.Root fullWidth>Продолжить</Button.Root>
-      <Button.Root variant="outline" tone="neutral" fullWidth>
-        Войти другим способом
-      </Button.Root>
-    </div>
-  );
-}

package/src/components/button/examples/icon-only.tsx

@@ -1,42 +0,0 @@
-/** Square icon-only buttons in a toolbar at every size. Use for compact toolbars; always give each button an `aria-label`. */
-import { Button, Icon, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const sizes = ["xs", "s", "m", "l", "xl"] as const;
-
-export default function ButtonIconOnlyExample() {
-  return (
-    <div className={styles.sizeRow}>
-      {sizes.map((size) => (
-        <div key={size} className={styles.sizeCell}>
-          <div role="toolbar" aria-label={`Действия, размер ${size}`} className={styles.toolbar}>
-            <Button.Root variant="ghost" tone="neutral" size={size} aria-label="Копировать">
-              <Button.Icon>
-                <Icon name="action.copy" />
-              </Button.Icon>
-            </Button.Root>
-            <Button.Root variant="ghost" tone="neutral" size={size} aria-label="Загрузить">
-              <Button.Icon>
-                <Icon name="action.upload" />
-              </Button.Icon>
-            </Button.Root>
-            <Button.Root variant="ghost" tone="neutral" size={size} aria-label="Скрыть">
-              <Button.Icon>
-                <Icon name="field.password.hide" />
-              </Button.Icon>
-            </Button.Root>
-            <Button.Root variant="outline" tone="neutral" size={size} aria-label="Закрыть">
-              <Button.Icon>
-                <Icon name="action.close" />
-              </Button.Icon>
-            </Button.Root>
-          </div>
-          <Typography.Root as="span" variant="caption" tone="muted">
-            {size}
-          </Typography.Root>
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/components/button/examples/surfaces.tsx

@@ -1,18 +0,0 @@
-/** Neutral solid, soft and ghost buttons for checking contrast on canvas, card, raised layer and accent backgrounds. Use when buttons sit on a non-default surface. */
-import { Button } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function ButtonSurfacesExample() {
-  return (
-    <div className={styles.row}>
-      <Button.Root tone="neutral">Отмена</Button.Root>
-      <Button.Root variant="soft" tone="neutral">
-        Фильтры
-      </Button.Root>
-      <Button.Root variant="ghost" tone="neutral">
-        Ещё
-      </Button.Root>
-    </div>
-  );
-}

package/src/components/button/examples/variants-tones.tsx

@@ -1,39 +0,0 @@
-/** Every `tone` × `variant` combination as a matrix. Use to choose the treatment (variant) and the meaning (tone) of an action. */
-import { Button, Typography } from "prime-ui-kit";
-import { Fragment } from "react";
-
-import styles from "./examples.module.css";
-
-const tones = [
-  { tone: "accent", label: "Сохранить" },
-  { tone: "neutral", label: "Отмена" },
-  { tone: "danger", label: "Удалить" },
-] as const;
-const variants = ["solid", "soft", "outline", "ghost"] as const;
-
-export default function ButtonVariantsTonesExample() {
-  return (
-    <div className={styles.matrixScroll}>
-      <div className={styles.matrix}>
-        <span />
-        {variants.map((variant) => (
-          <Typography.Root key={variant} as="span" variant="caption" tone="muted">
-            {variant}
-          </Typography.Root>
-        ))}
-        {tones.map(({ tone, label }) => (
-          <Fragment key={tone}>
-            <Typography.Root as="span" variant="caption" tone="muted">
-              {tone}
-            </Typography.Root>
-            {variants.map((variant) => (
-              <Button.Root key={variant} variant={variant} tone={tone}>
-                {label}
-              </Button.Root>
-            ))}
-          </Fragment>
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/components/button-group/examples/composition.tsx

@@ -1,99 +0,0 @@
-/** Editor toolbar: history, independent format toggles, one-of-three alignment and a primary Button of the same size. Use for formatting toolbars; icon-only segments need `aria-label`. */
-import {
-  AlignCenter,
-  AlignLeft,
-  AlignRight,
-  Bold,
-  Italic,
-  Redo2,
-  Underline,
-  Undo2,
-} from "lucide-react";
-import { Button, ButtonGroup } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-type Align = "left" | "center" | "right";
-
-export default function ButtonGroupCompositionExample() {
-  const [marks, setMarks] = React.useState({ bold: true, italic: false, underline: false });
-  const [align, setAlign] = React.useState<Align>("left");
-  const toggle = (mark: keyof typeof marks) => setMarks((m) => ({ ...m, [mark]: !m[mark] }));
-
-  return (
-    <div role="toolbar" aria-label="Форматирование" className={styles.toolbar}>
-      <ButtonGroup.Root aria-label="История">
-        <ButtonGroup.Item aria-label="Отменить">
-          <ButtonGroup.Icon>
-            <Undo2 />
-          </ButtonGroup.Icon>
-        </ButtonGroup.Item>
-        <ButtonGroup.Item aria-label="Повторить" disabled>
-          <ButtonGroup.Icon>
-            <Redo2 />
-          </ButtonGroup.Icon>
-        </ButtonGroup.Item>
-      </ButtonGroup.Root>
-
-      <ButtonGroup.Root aria-label="Начертание">
-        <ButtonGroup.Item aria-label="Жирный" pressed={marks.bold} onClick={() => toggle("bold")}>
-          <ButtonGroup.Icon>
-            <Bold />
-          </ButtonGroup.Icon>
-        </ButtonGroup.Item>
-        <ButtonGroup.Item
-          aria-label="Курсив"
-          pressed={marks.italic}
-          onClick={() => toggle("italic")}
-        >
-          <ButtonGroup.Icon>
-            <Italic />
-          </ButtonGroup.Icon>
-        </ButtonGroup.Item>
-        <ButtonGroup.Item
-          aria-label="Подчёркнутый"
-          pressed={marks.underline}
-          onClick={() => toggle("underline")}
-        >
-          <ButtonGroup.Icon>
-            <Underline />
-          </ButtonGroup.Icon>
-        </ButtonGroup.Item>
-      </ButtonGroup.Root>
-
-      <ButtonGroup.Root aria-label="Выравнивание">
-        <ButtonGroup.Item
-          aria-label="По левому краю"
-          pressed={align === "left"}
-          onClick={() => setAlign("left")}
-        >
-          <ButtonGroup.Icon>
-            <AlignLeft />
-          </ButtonGroup.Icon>
-        </ButtonGroup.Item>
-        <ButtonGroup.Item
-          aria-label="По центру"
-          pressed={align === "center"}
-          onClick={() => setAlign("center")}
-        >
-          <ButtonGroup.Icon>
-            <AlignCenter />
-          </ButtonGroup.Icon>
-        </ButtonGroup.Item>
-        <ButtonGroup.Item
-          aria-label="По правому краю"
-          pressed={align === "right"}
-          onClick={() => setAlign("right")}
-        >
-          <ButtonGroup.Icon>
-            <AlignRight />
-          </ButtonGroup.Icon>
-        </ButtonGroup.Item>
-      </ButtonGroup.Root>
-
-      <span className={styles.spacer} aria-hidden />
-      <Button.Root>Сохранить</Button.Root>
-    </div>
-  );
-}

package/src/components/card/examples/mini-media.tsx

@@ -1,55 +0,0 @@
-/** `mini-media`: the `mini` row plus a bottom `Card.Media` slot with a sparkline or a ProgressBar. Use when a KPI needs a small trend or a fill level. */
-
-import { Activity, HardDrive } from "lucide-react";
-import { Card, ProgressBar } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-/** The SVG stretches to the card width; CSS sets its height, not the viewBox. */
-function Sparkline() {
-  return (
-    <svg
-      className={styles.spark}
-      viewBox="0 0 120 40"
-      preserveAspectRatio="none"
-      aria-hidden="true"
-    >
-      <path
-        d="M0 32 L15 28 L30 30 L45 18 L60 22 L75 12 L90 16 L105 8 L120 4"
-        className={styles.chartLine}
-      />
-    </svg>
-  );
-}
-
-export default function CardMiniMediaExample() {
-  return (
-    <div className={styles.grid}>
-      <Card.Root variant="mini-media">
-        <Card.IconBox>
-          <Activity aria-hidden />
-        </Card.IconBox>
-        <Card.Stack>
-          <Card.Label>Запросы в минуту</Card.Label>
-          <Card.Value>12 840</Card.Value>
-        </Card.Stack>
-        <Card.Media>
-          <Sparkline />
-        </Card.Media>
-      </Card.Root>
-
-      <Card.Root variant="mini-media">
-        <Card.IconBox>
-          <HardDrive aria-hidden />
-        </Card.IconBox>
-        <Card.Stack>
-          <Card.Label>Хранилище</Card.Label>
-          <Card.Value>72 из 100 ГБ</Card.Value>
-        </Card.Stack>
-        <Card.Media>
-          <ProgressBar.Root value={72} size="s" label="Занято" showValue />
-        </Card.Media>
-      </Card.Root>
-    </div>
-  );
-}

package/src/components/card/examples/responsive.tsx

@@ -1,72 +0,0 @@
-/** The card is a size container: `split` stacks its cells below 22rem, the `stat-trend` value shrinks below 20rem and grows to display-s above 36rem. Use `split` for two related metrics in one card. */
-
-import { ShoppingCart, Wallet } from "lucide-react";
-import { Card, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-function SplitCard() {
-  return (
-    <Card.Root variant="split">
-      <Card.Split>
-        <Card.SplitCell>
-          <Card.IconBox>
-            <ShoppingCart aria-hidden />
-          </Card.IconBox>
-          <Card.Stack>
-            <Card.Label>Конверсия</Card.Label>
-            <Card.Value>3,8%</Card.Value>
-          </Card.Stack>
-        </Card.SplitCell>
-        <Card.SplitCell>
-          <Card.IconBox>
-            <Wallet aria-hidden />
-          </Card.IconBox>
-          <Card.Stack>
-            <Card.Label>Средний чек</Card.Label>
-            <Card.Value>₽ 2 450</Card.Value>
-          </Card.Stack>
-        </Card.SplitCell>
-      </Card.Split>
-    </Card.Root>
-  );
-}
-
-function TrendCard() {
-  return (
-    <Card.Root variant="stat-trend">
-      <Card.Label>Выручка</Card.Label>
-      <Card.Value>₽ 4,2 млн</Card.Value>
-      <Card.Delta tone="success">+18% к прошлому месяцу</Card.Delta>
-    </Card.Root>
-  );
-}
-
-export default function CardResponsiveExample() {
-  return (
-    <div className={styles.stack}>
-      <Typography.Root variant="caption" tone="muted">
-        Ширина 18rem
-      </Typography.Root>
-      <div className={styles.gridWide}>
-        <div className={styles.w18}>
-          <SplitCard />
-        </div>
-        <div className={styles.w18}>
-          <TrendCard />
-        </div>
-      </div>
-      <Typography.Root variant="caption" tone="muted">
-        Ширина 40rem
-      </Typography.Root>
-      <div className={styles.stack}>
-        <div className={styles.w40}>
-          <SplitCard />
-        </div>
-        <div className={styles.w40}>
-          <TrendCard />
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,22 +0,0 @@
-/** A description under the label and a validation error that marks the field invalid. Use it for consents and options that need an explanation. */
-import { Checkbox } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function CheckboxHintErrorExample() {
-  return (
-    <div className={styles.column}>
-      <Checkbox.Root name="marketing">
-        <Checkbox.Label>Получать новости продукта</Checkbox.Label>
-        <Checkbox.Hint>
-          Не чаще одного письма в неделю, отписаться можно в любой момент.
-        </Checkbox.Hint>
-      </Checkbox.Root>
-      <Checkbox.Root name="terms" required>
-        <Checkbox.Label>Принимаю условия оферты</Checkbox.Label>
-        <Checkbox.Hint>Без этого мы не сможем оформить заказ.</Checkbox.Hint>
-        <Checkbox.Error>Отметьте пункт, чтобы продолжить.</Checkbox.Error>
-      </Checkbox.Root>
-    </div>
-  );
-}

package/src/components/checkbox/examples/select-all.tsx

@@ -1,40 +0,0 @@
-/** A controlled «select all» checkbox that turns indeterminate on a partial selection. Use it above lists and table rows with bulk actions. */
-
-import { Checkbox } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const FILES = ["Договор.pdf", "Счёт-фактура.pdf", "Акт сверки.xlsx"];
-
-export default function CheckboxSelectAllExample() {
-  const [selected, setSelected] = React.useState<string[]>([FILES[0]]);
-
-  const all = selected.length === FILES.length;
-  const some = selected.length > 0 && !all;
-
-  return (
-    <div className={styles.list}>
-      <Checkbox.Root
-        onCheckedChange={(checked) => setSelected(checked ? FILES : [])}
-        checked={all}
-        indeterminate={some}
-      >
-        <Checkbox.Label>
-          Выбрать все ({selected.length} из {FILES.length})
-        </Checkbox.Label>
-      </Checkbox.Root>
-      {FILES.map((file) => (
-        <Checkbox.Root
-          onCheckedChange={(checked) =>
-            setSelected((prev) => (checked ? [...prev, file] : prev.filter((f) => f !== file)))
-          }
-          key={file}
-          checked={selected.includes(file)}
-        >
-          <Checkbox.Label>{file}</Checkbox.Label>
-        </Checkbox.Root>
-      ))}
-    </div>
-  );
-}