prime-ui-kit 0.7.11 → 0.9.0

package/src/components/kbd/examples/composition-chord-icon.tsx

@@ -1,34 +0,0 @@
-import { Icon, Kbd } from "prime-ui-kit";
-import type * as React from "react";
-
-const row: React.CSSProperties = {
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  gap: "var(--prime-sys-spacing-x1)",
-};
-
-const stack: React.CSSProperties = {
-  display: "flex",
-  flexDirection: "column",
-  gap: "var(--prime-sys-spacing-m)",
-};
-
-/** Сочетание из нескольких `Kbd.Root` и один бейдж с иконкой внутри (parity with `playground/snippets/kbd/composition.tsx`). */
-export default function KbdCompositionChordIconExample() {
-  return (
-    <div style={stack}>
-      <div style={row}>
-        <Kbd.Root>⌘</Kbd.Root>
-        <span aria-hidden="true">+</span>
-        <Kbd.Root>K</Kbd.Root>
-      </div>
-      <div style={row}>
-        <Kbd.Root>
-          <Icon name="action.close" aria-hidden />
-          <span>Esc</span>
-        </Kbd.Root>
-      </div>
-    </div>
-  );
-}

package/src/components/kbd/examples/context-inherit-size.tsx

@@ -1,46 +0,0 @@
-import { ControlSizeProvider, Kbd } from "prime-ui-kit";
-import type * as React from "react";
-
-const row: React.CSSProperties = {
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  gap: "var(--prime-sys-spacing-x1)",
-};
-
-const stack: React.CSSProperties = {
-  display: "flex",
-  flexDirection: "column",
-  gap: "var(--prime-sys-spacing-m)",
-};
-
-/**
- * Без `size` — масштаб из ближайшего `ControlSizeProvider`; явный `size` перекрывает контекст.
- * Контекст `xs` на поверхности контрола маппится в эффективный `s` на kbd (parity with `playground/snippets/kbd/inherit-size.tsx`).
- */
-export default function KbdContextInheritSizeExample() {
-  return (
-    <div style={stack}>
-      <ControlSizeProvider value="xl">
-        <div style={row}>
-          <Kbd.Root>Ctrl</Kbd.Root>
-          <span aria-hidden="true">+</span>
-          <Kbd.Root>B</Kbd.Root>
-        </div>
-      </ControlSizeProvider>
-      <ControlSizeProvider value="s">
-        <div style={row}>
-          <Kbd.Root>Tab</Kbd.Root>
-        </div>
-      </ControlSizeProvider>
-      <ControlSizeProvider value="xs">
-        <div style={row}>
-          <Kbd.Root>xs→s</Kbd.Root>
-        </div>
-      </ControlSizeProvider>
-      <ControlSizeProvider value="xl">
-        <Kbd.Root size="s">Явный s</Kbd.Root>
-      </ControlSizeProvider>
-    </div>
-  );
-}

package/src/components/kbd/examples/docs-legend.tsx

@@ -1,44 +0,0 @@
-import { Kbd } from "prime-ui-kit";
-import type * as React from "react";
-
-const grid: React.CSSProperties = {
-  display: "grid",
-  gridTemplateColumns: "1fr auto",
-  alignItems: "center",
-  columnGap: "var(--prime-sys-spacing-l)",
-  rowGap: "var(--prime-sys-spacing-s)",
-  maxWidth: "calc(var(--prime-sys-unit-1rem) * 24)",
-};
-
-const chord: React.CSSProperties = {
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  gap: "var(--prime-sys-spacing-x1)",
-};
-
-/** Легенда в документации: пары «действие → комбинация». */
-export default function DocsLegendExample() {
-  return (
-    <dl style={grid}>
-      <dt>Copy</dt>
-      <dd style={chord}>
-        <Kbd.Root>⌘</Kbd.Root>
-        <span aria-hidden="true">+</span>
-        <Kbd.Root>C</Kbd.Root>
-      </dd>
-      <dt>Command palette</dt>
-      <dd style={chord}>
-        <Kbd.Root>⌘</Kbd.Root>
-        <span aria-hidden="true">+</span>
-        <Kbd.Root>K</Kbd.Root>
-      </dd>
-      <dt>Undo</dt>
-      <dd style={chord}>
-        <Kbd.Root>⌘</Kbd.Root>
-        <span aria-hidden="true">+</span>
-        <Kbd.Root>Z</Kbd.Root>
-      </dd>
-    </dl>
-  );
-}

package/src/components/kbd/examples/inline-doc-hint.tsx

@@ -1,18 +0,0 @@
-import { Kbd } from "prime-ui-kit";
-import type * as React from "react";
-
-const paragraph: React.CSSProperties = {
-  maxWidth: "calc(var(--prime-sys-unit-1rem) * 32)",
-  margin: 0,
-  font: "inherit",
-  color: "var(--prime-sys-color-content-primary)",
-};
-
-/** Встроенная подсказка в тексте: `Kbd` в потоке абзаца. */
-export default function InlineDocHintExample() {
-  return (
-    <p style={paragraph}>
-      To cancel, press <Kbd.Root>Esc</Kbd.Root>. To confirm, press <Kbd.Root>Enter</Kbd.Root>.
-    </p>
-  );
-}

package/src/components/kbd/examples/shortcut-row.tsx

@@ -1,21 +0,0 @@
-import { Kbd } from "prime-ui-kit";
-import type * as React from "react";
-
-const shortcutRow: React.CSSProperties = {
-  boxSizing: "border-box",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gap: "var(--prime-sys-spacing-m)",
-  maxWidth: "calc(var(--prime-sys-unit-1rem) * 22)",
-};
-
-/** Строка меню или списка команд: действие слева, шорткат справа (`size="s"` — плотный хром). */
-export default function ShortcutRowExample() {
-  return (
-    <div style={shortcutRow}>
-      <span>Save</span>
-      <Kbd.Root size="s">⌘S</Kbd.Root>
-    </div>
-  );
-}

package/src/components/kbd/examples/sizes-ladder.tsx

@@ -1,21 +0,0 @@
-import { Kbd } from "prime-ui-kit";
-import type * as React from "react";
-
-const row: React.CSSProperties = {
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  gap: "var(--prime-sys-spacing-x1)",
-};
-
-/** Номинальные размеры `s`–`xl` (parity with `playground/snippets/kbd/sizes.tsx`). */
-export default function KbdSizesLadderExample() {
-  return (
-    <div style={row}>
-      <Kbd.Root size="s">Kbd s</Kbd.Root>
-      <Kbd.Root size="m">Kbd m</Kbd.Root>
-      <Kbd.Root size="l">Kbd l</Kbd.Root>
-      <Kbd.Root size="xl">Kbd xl</Kbd.Root>
-    </div>
-  );
-}

package/src/components/kbd/examples/states-title.tsx

@@ -1,19 +0,0 @@
-import { Kbd } from "prime-ui-kit";
-import type * as React from "react";
-
-const row: React.CSSProperties = {
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  gap: "var(--prime-sys-spacing-x1)",
-};
-
-/** Обычный `Kbd` и вариант с нативной подсказкой через `title` (parity with `playground/snippets/kbd/states.tsx`). */
-export default function KbdStatesTitleExample() {
-  return (
-    <div style={row}>
-      <Kbd.Root>Enter</Kbd.Root>
-      <Kbd.Root title="Сохранить и закрыть">Ctrl+Enter</Kbd.Root>
-    </div>
-  );
-}

package/src/components/kbd/examples/toolbar-hints.tsx

@@ -1,31 +0,0 @@
-import { Button, Kbd } from "prime-ui-kit";
-import type * as React from "react";
-
-const toolbar: React.CSSProperties = {
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  gap: "var(--prime-sys-spacing-m)",
-};
-
-const hintCluster: React.CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--prime-sys-spacing-x2)",
-};
-
-/** Подсказки у тулбара: основное действие и рядом компактные клавиши того же визуального ряда. */
-export default function ToolbarHintsExample() {
-  return (
-    <div role="toolbar" aria-label="Formatting" style={toolbar}>
-      <div style={hintCluster}>
-        <Button.Root>Bold</Button.Root>
-        <Kbd.Root size="s">⌘B</Kbd.Root>
-      </div>
-      <div style={hintCluster}>
-        <Button.Root>Italic</Button.Root>
-        <Kbd.Root size="s">⌘I</Kbd.Root>
-      </div>
-    </div>
-  );
-}

package/src/components/label/examples/accessibility-pattern.tsx

@@ -1,28 +0,0 @@
-import { Icon, Label } from "prime-ui-kit";
-
-/**
- * Accessibility checklist: `htmlFor`/`id` link; decorative icon `aria-hidden`;
- * `required` on the input; short sub-line stays inside the label (long copy → Hint below field).
- */
-export function AccessibilityPatternExample() {
-  return (
-    <>
-      <Label.Root htmlFor="example-label-a11y-email" id="example-label-a11y-email-label">
-        <Label.Icon>
-          <Icon aria-hidden name="field.email" />
-        </Label.Icon>
-        Billing contact email
-        <Label.Asterisk />
-        <Label.Sub>invoices and receipts</Label.Sub>
-      </Label.Root>
-      <input
-        id="example-label-a11y-email"
-        type="email"
-        name="billingEmail"
-        required
-        aria-required="true"
-        autoComplete="email"
-      />
-    </>
-  );
-}

package/src/components/label/examples/grouped-labels.tsx

@@ -1,30 +0,0 @@
-import { Label } from "prime-ui-kit";
-
-/**
- * Grouped fields: `fieldset` + `legend` names the group; each control keeps its own
- * `Label.Root` + unique `id` / `htmlFor` pair.
- */
-export function GroupedLabelsExample() {
-  return (
-    <fieldset>
-      <legend>Billing address</legend>
-      <div>
-        <Label.Root htmlFor="example-label-group-line1">Address line 1</Label.Root>
-        <input id="example-label-group-line1" type="text" name="line1" required />
-      </div>
-      <div>
-        <Label.Root htmlFor="example-label-group-line2">
-          Address line 2<Label.Sub>optional</Label.Sub>
-        </Label.Root>
-        <input id="example-label-group-line2" type="text" name="line2" />
-      </div>
-      <div>
-        <Label.Root htmlFor="example-label-group-postal">
-          Postal code
-          <Label.Asterisk />
-        </Label.Root>
-        <input id="example-label-group-postal" type="text" name="postal" required />
-      </div>
-    </fieldset>
-  );
-}

package/src/components/label/examples/mixed-required-optional.tsx

@@ -1,17 +0,0 @@
-import { Label } from "prime-ui-kit";
-
-/** Mirrors `playground/snippets/label/mixed-required-optional.tsx`: asterisk vs optional `Label.Sub`. */
-export function LabelMixedRequiredOptionalExample() {
-  return (
-    <>
-      <Label.Root htmlFor="example-label-mx-1">
-        Contract number
-        <Label.Asterisk />
-      </Label.Root>
-      <Label.Root htmlFor="example-label-mx-2">
-        Order note
-        <Label.Sub>optional</Label.Sub>
-      </Label.Root>
-    </>
-  );
-}

package/src/components/label/examples/optional-field.tsx

@@ -1,14 +0,0 @@
-import { Label } from "prime-ui-kit";
-
-/** Optional field: clarify in `Label.Sub` without a required marker on the control. */
-export function OptionalFieldExample() {
-  return (
-    <>
-      <Label.Root htmlFor="example-label-optional-note">
-        Internal comment
-        <Label.Sub>optional</Label.Sub>
-      </Label.Root>
-      <input id="example-label-optional-note" type="text" name="note" />
-    </>
-  );
-}

package/src/components/label/examples/required-field.tsx

@@ -1,20 +0,0 @@
-import { Label } from "prime-ui-kit";
-
-/** Required field: visual marker via `Label.Asterisk`; semantics via `required` on the control. */
-export function RequiredFieldExample() {
-  return (
-    <>
-      <Label.Root htmlFor="example-label-required-email">
-        Work email
-        <Label.Asterisk />
-      </Label.Root>
-      <input
-        id="example-label-required-email"
-        type="email"
-        name="email"
-        required
-        autoComplete="email"
-      />
-    </>
-  );
-}

package/src/components/label/examples/sub-line.tsx

@@ -1,11 +0,0 @@
-import { Label } from "prime-ui-kit";
-
-/** Mirrors `playground/snippets/label/sub-line.tsx`: short secondary line via `Label.Sub`. */
-export function LabelSubLineExample() {
-  return (
-    <Label.Root htmlFor="example-label-sub-budget">
-      Campaign budget
-      <Label.Sub>in RUB, excluding VAT</Label.Sub>
-    </Label.Root>
-  );
-}

package/src/components/link-button/examples/disabled.tsx

@@ -1,17 +0,0 @@
-import { LinkButton } from "prime-ui-kit";
-
-/**
- * Active vs <code>disabled</code> — same intent as [`playground/snippets/link-button/states.tsx`](../../../../playground/snippets/link-button/states.tsx).
- * Disabled link is a <code>span</code> with <code>role="link"</code> — no <code>href</code>, anchor props are not applied.
- * Do not use for “still focusable”; use <code>aria-disabled</code> on a real control pattern if that is required.
- */
-export default function LinkButtonDisabledExample() {
-  return (
-    <div>
-      <LinkButton.Root href="/available">Available route</LinkButton.Root>
-      <LinkButton.Root href="/ignored-when-disabled" disabled>
-        Coming soon
-      </LinkButton.Root>
-    </div>
-  );
-}

package/src/components/link-button/examples/external.tsx

@@ -1,13 +0,0 @@
-import { LinkButton } from "prime-ui-kit";
-
-/** External URL in a new tab — mirrors [`playground/snippets/link-button/external-link.tsx`](../../../../playground/snippets/link-button/external-link.tsx); always set <code>rel="noopener noreferrer"</code> with <code>target="_blank"</code>. */
-export default function LinkButtonExternalExample() {
-  return (
-    <p>
-      Documentation in a separate tab:{" "}
-      <LinkButton.Root href="https://example.com/docs" target="_blank" rel="noopener noreferrer">
-        Open help
-      </LinkButton.Root>
-    </p>
-  );
-}

package/src/components/link-button/examples/footer-legal.tsx

@@ -1,22 +0,0 @@
-import { LinkButton } from "prime-ui-kit";
-
-/** Dense footer legal row: smaller control tier keeps the strip compact. */
-export default function LinkButtonFooterLegalExample() {
-  return (
-    <footer>
-      <nav aria-label="Legal">
-        <LinkButton.Root href="/privacy" size="s">
-          Privacy
-        </LinkButton.Root>
-        <span aria-hidden> · </span>
-        <LinkButton.Root href="/terms" size="s">
-          Terms
-        </LinkButton.Root>
-        <span aria-hidden> · </span>
-        <LinkButton.Root href="/cookies" size="s">
-          Cookie policy
-        </LinkButton.Root>
-      </nav>
-    </footer>
-  );
-}

package/src/components/link-button/examples/inline-text-link.tsx

@@ -1,12 +0,0 @@
-import { LinkButton } from "prime-ui-kit";
-
-/** Inline link inside body copy: same line as surrounding text, default control tier. */
-export default function LinkButtonInlineTextLinkExample() {
-  return (
-    <p>
-      Need more detail? See{" "}
-      <LinkButton.Root href="/docs/billing">billing documentation</LinkButton.Root> for proration
-      rules.
-    </p>
-  );
-}

package/src/components/link-button/examples/navigation-cluster.tsx

@@ -1,16 +0,0 @@
-import { LinkButton } from "prime-ui-kit";
-
-/** Horizontal cluster of primary nav targets; named <code>nav</code> + text separators (layout can move to page grid/flex). */
-export default function LinkButtonNavigationClusterExample() {
-  return (
-    <nav aria-label="Product sections">
-      <LinkButton.Root href="/product/overview">Overview</LinkButton.Root>
-      <span aria-hidden> · </span>
-      <LinkButton.Root href="/product/pricing">Pricing</LinkButton.Root>
-      <span aria-hidden> · </span>
-      <LinkButton.Root href="/product/security">Security</LinkButton.Root>
-      <span aria-hidden> · </span>
-      <LinkButton.Root href="/product/changelog">Changelog</LinkButton.Root>
-    </nav>
-  );
-}

package/src/components/modal/examples/canonical-maximal.tsx

@@ -1,47 +0,0 @@
-import { Button } from "@/components/button/Button";
-import { Input } from "@/components/input/Input";
-import { Modal } from "@/components/modal/Modal";
-import { Icon } from "@/icons";
-
-/**
- * Maximal shell: `title`, `description`, `icon`, body field, `footer` with `Modal.Close` plus primary action.
- * Copy this structure when you need the full header/body/footer pattern.
- */
-export default function ModalCanonicalMaximalExample() {
-  return (
-    <Modal.Root>
-      <Modal.Trigger>
-        <Button.Root variant="neutral" mode="stroke">
-          Open workspace invite
-        </Button.Root>
-      </Modal.Trigger>
-      <Modal.Panel
-        description="We will send one invitation email. The recipient can accept or decline."
-        footer={
-          <Modal.Footer
-            primary={
-              <Button.Root variant="primary" type="button">
-                Send invite
-              </Button.Root>
-            }
-            secondary={
-              <Modal.Close>
-                <Button.Root variant="neutral" mode="stroke">
-                  Cancel
-                </Button.Root>
-              </Modal.Close>
-            }
-          />
-        }
-        icon={<Icon name="field.email" tone="subtle" />}
-        title="Invite teammate"
-      >
-        <Input.Root label="Email address" hint="Work email preferred">
-          <Input.Wrapper>
-            <Input.Field autoComplete="email" placeholder="name@company.com" type="email" />
-          </Input.Wrapper>
-        </Input.Root>
-      </Modal.Panel>
-    </Modal.Root>
-  );
-}

package/src/components/modal/examples/pattern-close-behavior.tsx

@@ -1,56 +0,0 @@
-import { Button } from "@/components/button/Button";
-import { Modal } from "@/components/modal/Modal";
-import { Icon } from "@/icons";
-
-/** Default dismiss vs `closeOnEscape` / `closeOnOverlayClick` disabled; mirrors `playground/snippets/modal/states.tsx`. */
-export default function ModalPatternCloseBehaviorExample() {
-  return (
-    <>
-      <Modal.Root>
-        <Modal.Trigger>
-          <Button.Root variant="neutral" mode="stroke">
-            Standard dismiss
-          </Button.Root>
-        </Modal.Trigger>
-        <Modal.Panel
-          closeAriaLabel="Close"
-          description="Escape and a direct backdrop click close the dialog (click target must be the overlay)."
-          icon={<Icon name="field.email" />}
-          title="Default behavior"
-        >
-          <p>Try Escape and clicking the dimmed area outside the panel.</p>
-        </Modal.Panel>
-      </Modal.Root>
-
-      <Modal.Root closeOnEscape={false} closeOnOverlayClick={false}>
-        <Modal.Trigger>
-          <Button.Root variant="error" mode="lighter">
-            <Button.Icon>
-              <Icon name="status.locked" />
-            </Button.Icon>
-            Explicit actions only
-          </Button.Root>
-        </Modal.Trigger>
-        <Modal.Panel
-          description="With both flags false, only buttons dismiss the dialog."
-          footer={
-            <Modal.Footer
-              primary={
-                <Modal.Close>
-                  <Button.Root variant="neutral" mode="stroke">
-                    OK
-                  </Button.Root>
-                </Modal.Close>
-              }
-            />
-          }
-          icon={<Icon name="status.locked" />}
-          showClose={false}
-          title="Strict mode"
-        >
-          <p>Escape and backdrop clicks do nothing.</p>
-        </Modal.Panel>
-      </Modal.Root>
-    </>
-  );
-}

package/src/components/modal/examples/pattern-controlled.tsx

@@ -1,41 +0,0 @@
-import * as React from "react";
-
-import { Button } from "@/components/button/Button";
-import { Modal } from "@/components/modal/Modal";
-import { Icon } from "@/icons";
-
-/** Controlled `open` / `onOpenChange` without `Modal.Trigger`; mirrors `playground/snippets/modal/controlled.tsx`. */
-export default function ModalPatternControlledExample() {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--prime-sys-spacing-x2)" }}>
-      <Button.Root variant="primary" onClick={() => setOpen(true)}>
-        Open from outside
-      </Button.Root>
-      <Button.Root mode="stroke" variant="neutral" onClick={() => setOpen(false)}>
-        Close from outside
-      </Button.Root>
-
-      <Modal.Root open={open} onOpenChange={setOpen}>
-        <Modal.Panel
-          closeAriaLabel="Close"
-          description="Open and close are driven by `open` and `onOpenChange` on the root."
-          footer={
-            <Modal.Footer
-              primary={
-                <Modal.Close>
-                  <Button.Root variant="primary">Done</Button.Root>
-                </Modal.Close>
-              }
-            />
-          }
-          icon={<Icon name="action.copy" />}
-          title="Externally controlled"
-        >
-          <p>No in-tree trigger is required: the parent owns visibility.</p>
-        </Modal.Panel>
-      </Modal.Root>
-    </div>
-  );
-}

package/src/components/modal/examples/pattern-full-width-footer.tsx

@@ -1,46 +0,0 @@
-import { Button } from "@/components/button/Button";
-import { Modal } from "@/components/modal/Modal";
-import { Typography } from "@/components/typography/Typography";
-import { Icon } from "@/icons";
-
-/** Full-width footer actions via `Button.Root` `fullWidth`; mirrors `playground/snippets/modal/full-width.tsx`. */
-export default function ModalPatternFullWidthFooterExample() {
-  return (
-    <Modal.Root>
-      <Modal.Trigger>
-        <Button.Root variant="neutral" mode="stroke">
-          Checkout
-        </Button.Root>
-      </Modal.Trigger>
-      <Modal.Panel
-        description="Stack full-width buttons so the footer column matches the panel width on narrow layouts."
-        footer={
-          <div
-            style={{
-              display: "grid",
-              gap: "var(--prime-sys-spacing-x2)",
-              width: "100%",
-            }}
-          >
-            <Modal.Close>
-              <Button.Root variant="primary" fullWidth>
-                Pay now
-              </Button.Root>
-            </Modal.Close>
-            <Modal.Close>
-              <Button.Root variant="neutral" mode="stroke" fullWidth>
-                Back to cart
-              </Button.Root>
-            </Modal.Close>
-          </div>
-        }
-        icon={<Icon name="action.upload" />}
-        title="Confirm order"
-      >
-        <Typography.Root as="p" variant="body-default">
-          Review your cart before continuing to payment.
-        </Typography.Root>
-      </Modal.Panel>
-    </Modal.Root>
-  );
-}