prime-ui-kit 0.7.13 → 0.9.1

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>
-    </>
-  );
-}

package/src/components/drawer/examples/examples-scenarios.module.css

@@ -1,79 +0,0 @@
-.intro {
-  margin: 0;
-  font-size: var(--prime-sys-typography-role-bodyDefault-fontSize);
-  line-height: var(--prime-sys-typography-role-bodyDefault-lineHeight);
-  color: var(--prime-sys-color-content-primary);
-}
-
-.nav {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-x2);
-}
-
-.muted {
-  margin: 0;
-  color: var(--prime-sys-color-content-secondary);
-  font-size: var(--prime-sys-typography-role-bodyDefault-fontSize);
-  line-height: var(--prime-sys-typography-role-bodyDefault-lineHeight);
-}
-
-.filterStack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-l);
-}
-
-.cartLine {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-x1);
-  padding-block: var(--prime-sys-spacing-m);
-  border-bottom: var(--prime-sys-unit-1px) solid var(--prime-sys-color-border-subtle);
-}
-
-.cartLine:last-child {
-  border-bottom: none;
-}
-
-.cartLineMain {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  gap: var(--prime-sys-spacing-m);
-}
-
-.cartTitle {
-  margin: 0;
-  font-size: var(--prime-sys-typography-role-bodyDefault-fontSize);
-  line-height: var(--prime-sys-typography-role-bodyDefault-lineHeight);
-  color: var(--prime-sys-color-content-primary);
-}
-
-.cartMeta {
-  margin: 0;
-  font-size: var(--prime-sys-typography-role-bodySmall-fontSize);
-  line-height: var(--prime-sys-typography-role-bodySmall-lineHeight);
-  color: var(--prime-sys-color-content-secondary);
-}
-
-.cartPrice {
-  margin: 0;
-  font-size: var(--prime-sys-typography-role-bodyDefault-fontSize);
-  line-height: var(--prime-sys-typography-role-bodyDefault-lineHeight);
-  color: var(--prime-sys-color-content-primary);
-  white-space: nowrap;
-}
-
-.footerActions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--prime-sys-spacing-m);
-  justify-content: flex-end;
-}
-
-.settingsStack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-l);
-}

package/src/components/drawer/examples/explicit-panel.tsx

@@ -1,40 +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";
-
-/**
- * Canonical new API with icon + subtitle in header and actions in footer.
- */
-export default function DrawerExampleExplicitPanel() {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <>
-      <Button.Root type="button" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
-        Open details
-      </Button.Root>
-      <Drawer
-        open={open}
-        onOpenChange={setOpen}
-        title="Details"
-        description="Only body scrolls when content overflows"
-        icon={<Icon name="nav.layoutGrid" tone="subtle" />}
-        side="right"
-        footer={
-          <Button.Root type="button" variant="neutral" mode="stroke" onClick={() => setOpen(false)}>
-            Close
-          </Button.Root>
-        }
-      >
-        <p className={styles.intro}>
-          This drawer uses the new single-component API: header with icon/title/description,
-          scrollable content area, and footer actions.
-        </p>
-      </Drawer>
-    </>
-  );
-}

package/src/components/drawer/examples/filters-panel.tsx

@@ -1,58 +0,0 @@
-import * as React from "react";
-
-import { Button } from "@/components/button/Button";
-import { Checkbox } from "@/components/checkbox/Checkbox";
-import { Drawer } from "@/components/drawer/Drawer";
-import { Icon } from "@/icons";
-
-import styles from "./examples-scenarios.module.css";
-
-/**
- * Filter drawer from the leading edge; footer keeps Apply / Reset visible while criteria scroll.
- */
-export default function DrawerExampleFiltersPanel() {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <>
-      <Button.Root type="button" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
-        Filters
-      </Button.Root>
-      <Drawer
-        open={open}
-        onOpenChange={setOpen}
-        side="left"
-        title="Filters"
-        description="Choose product visibility constraints"
-        icon={<Icon name="nav.itemDot" tone="subtle" />}
-        footer={
-          <div className={styles.footerActions}>
-            <Button.Root
-              type="button"
-              variant="neutral"
-              mode="stroke"
-              onClick={() => setOpen(false)}
-            >
-              Reset
-            </Button.Root>
-            <Button.Root type="button" variant="primary" onClick={() => setOpen(false)}>
-              Apply
-            </Button.Root>
-          </div>
-        }
-      >
-        <div className={styles.filterStack}>
-          <Checkbox.Root defaultChecked>
-            <Checkbox.Label>In stock only</Checkbox.Label>
-          </Checkbox.Root>
-          <Checkbox.Root>
-            <Checkbox.Label>On sale</Checkbox.Label>
-          </Checkbox.Root>
-          <Checkbox.Root>
-            <Checkbox.Label>Ships today</Checkbox.Label>
-          </Checkbox.Root>
-        </div>
-      </Drawer>
-    </>
-  );
-}

package/src/components/drawer/examples/mobile-nav-sheet.tsx

@@ -1,48 +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 items = ["Home", "Catalog", "Orders", "Account"] as const;
-
-/**
- * Mobile navigation surface with explicit close on item selection.
- */
-export default function DrawerExampleMobileNavSheet() {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <>
-      <Button.Root type="button" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
-        Menu
-      </Button.Root>
-      <Drawer
-        open={open}
-        onOpenChange={setOpen}
-        side="left"
-        title="Navigate"
-        description="Primary sections"
-        icon={<Icon name="nav.home" tone="subtle" />}
-      >
-        <nav className={styles.nav} aria-label="Primary">
-          {items.map((label) => (
-            <Button.Root
-              key={label}
-              type="button"
-              variant="neutral"
-              mode="ghost"
-              fullWidth
-              onClick={() => setOpen(false)}
-            >
-              {label}
-            </Button.Root>
-          ))}
-        </nav>
-        <p className={styles.muted}>In a real app, wire each action to routing and state sync.</p>
-      </Drawer>
-    </>
-  );
-}

package/src/components/drawer/examples/settings-side.tsx

@@ -1,59 +0,0 @@
-import * as React from "react";
-
-import { Button } from "@/components/button/Button";
-import { Drawer } from "@/components/drawer/Drawer";
-import { Input } from "@/components/input/Input";
-import { Icon } from "@/icons";
-
-import styles from "./examples-scenarios.module.css";
-
-/**
- * Settings on the trailing edge: form fields live in the scroll body, actions are fixed in footer.
- */
-export default function DrawerExampleSettingsSide() {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <>
-      <Button.Root type="button" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
-        Workspace settings
-      </Button.Root>
-      <Drawer
-        open={open}
-        onOpenChange={setOpen}
-        title="Workspace"
-        description="Team defaults and scheduling options"
-        icon={<Icon name="nav.layoutGrid" tone="subtle" />}
-        side="right"
-        footer={
-          <div className={styles.footerActions}>
-            <Button.Root
-              type="button"
-              variant="neutral"
-              mode="stroke"
-              onClick={() => setOpen(false)}
-            >
-              Cancel
-            </Button.Root>
-            <Button.Root type="button" variant="primary" onClick={() => setOpen(false)}>
-              Save changes
-            </Button.Root>
-          </div>
-        }
-      >
-        <div className={styles.settingsStack}>
-          <Input.Root label="Workspace name">
-            <Input.Wrapper>
-              <Input.Field defaultValue="Acme Design" />
-            </Input.Wrapper>
-          </Input.Root>
-          <Input.Root label="Default timezone" hint="Used for scheduled reports.">
-            <Input.Wrapper>
-              <Input.Field defaultValue="Europe/Berlin" />
-            </Input.Wrapper>
-          </Input.Root>
-        </div>
-      </Drawer>
-    </>
-  );
-}

package/src/components/dropdown/examples/account-menu.tsx

@@ -1,50 +0,0 @@
-import { LogOut, Settings, UserRound } from "lucide-react";
-import { Avatar } from "@/components/avatar/Avatar";
-import { Button } from "@/components/button/Button";
-import { Dropdown } from "@/components/dropdown/Dropdown";
-
-/** Меню аккаунта: шапка с идентичностью, группа настроек, выход. */
-export default function DropdownAccountMenuExample() {
-  return (
-    <Dropdown.Root>
-      <Dropdown.Trigger>
-        <Button.Root type="button" variant="neutral" mode="stroke">
-          Аккаунт
-        </Button.Root>
-      </Dropdown.Trigger>
-      <Dropdown.Content align="end" sameMinWidthAsTrigger>
-        <Dropdown.Block>
-          <Dropdown.Header>
-            <Dropdown.HeaderRow>
-              <Dropdown.HeaderLeading>
-                <Avatar.Root size="l">
-                  <Avatar.Fallback>ИП</Avatar.Fallback>
-                </Avatar.Root>
-              </Dropdown.HeaderLeading>
-              <Dropdown.HeaderMain>
-                <Dropdown.HeaderTitle>Иван Петров</Dropdown.HeaderTitle>
-                <Dropdown.HeaderDescription truncate>
-                  ivan.petrov@example.com
-                </Dropdown.HeaderDescription>
-              </Dropdown.HeaderMain>
-            </Dropdown.HeaderRow>
-            <Dropdown.Separator />
-          </Dropdown.Header>
-          <Dropdown.Item>
-            <Dropdown.ItemIcon as={UserRound} strokeWidth={2} />
-            Профиль
-          </Dropdown.Item>
-          <Dropdown.Item>
-            <Dropdown.ItemIcon as={Settings} strokeWidth={2} />
-            Настройки
-          </Dropdown.Item>
-        </Dropdown.Block>
-        <Dropdown.Separator />
-        <Dropdown.Item destructive>
-          <Dropdown.ItemIcon as={LogOut} strokeWidth={2} />
-          Выйти
-        </Dropdown.Item>
-      </Dropdown.Content>
-    </Dropdown.Root>
-  );
-}

package/src/components/dropdown/examples/actions-menu.tsx

@@ -1,36 +0,0 @@
-import { Copy, Pencil, Trash2 } from "lucide-react";
-import { Button } from "@/components/button/Button";
-import { Dropdown } from "@/components/dropdown/Dropdown";
-
-/** Меню действий над сущностью: безопасные операции и отдельный деструктивный блок. */
-export default function DropdownActionsMenuExample() {
-  return (
-    <Dropdown.Root>
-      <Dropdown.Trigger>
-        <Button.Root
-          type="button"
-          variant="neutral"
-          mode="stroke"
-          aria-label="Действия с документом"
-        >
-          ⋯
-        </Button.Root>
-      </Dropdown.Trigger>
-      <Dropdown.Content align="end">
-        <Dropdown.Item>
-          <Dropdown.ItemIcon as={Pencil} strokeWidth={2} />
-          Редактировать
-        </Dropdown.Item>
-        <Dropdown.Item>
-          <Dropdown.ItemIcon as={Copy} strokeWidth={2} />
-          Дублировать
-        </Dropdown.Item>
-        <Dropdown.Separator />
-        <Dropdown.Item destructive>
-          <Dropdown.ItemIcon as={Trash2} strokeWidth={2} />
-          Удалить
-        </Dropdown.Item>
-      </Dropdown.Content>
-    </Dropdown.Root>
-  );
-}