prime-ui-kit 0.10.0 → 0.11.0

package/dist/skill/reference/components/empty-page/examples/sizes.tsx

@@ -0,0 +1,25 @@
+/** Every tier changes the icon tile, the title and the padding; buttons in Actions take the same size — `size`. */
+import { Button, EmptyPage, Icon } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
+
+export default function EmptyPageSizesExample() {
+  return (
+    <div className={styles.grid}>
+      {SIZES.map((size) => (
+        <EmptyPage.Root key={size} size={size} aria-labelledby={`empty-size-${size}`}>
+          <EmptyPage.Icon>
+            <Icon name="object.document" />
+          </EmptyPage.Icon>
+          <EmptyPage.Title id={`empty-size-${size}`}>Счетов нет · {size}</EmptyPage.Title>
+          <EmptyPage.Description>Выставленные счета появятся здесь.</EmptyPage.Description>
+          <EmptyPage.Actions>
+            <Button.Root size={size}>Выставить счёт</Button.Root>
+          </EmptyPage.Actions>
+        </EmptyPage.Root>
+      ))}
+    </div>
+  );
+}

package/{src/components/empty-page/examples/icon-tones.tsx → dist/skill/reference/components/empty-page/examples/variants.tsx}

@@ -1,13 +1,16 @@
-/** The tile tone tells why the area is empty: no data yet, a first run, or a failed load — `tone`. */
+/** The tone tells why the area is empty: no data yet, a first run, or a failed load with a retry — `tone`, `EmptyPage.RetryButton`. */
 import { Button, EmptyPage, Icon } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
-export default function EmptyPageIconTonesExample() {
+/** A retry that answers after a second, as a slow server would. */
+const retryInbox = () => new Promise<void>((resolve) => window.setTimeout(resolve, 1000));
+
+export default function EmptyPageVariantsExample() {
   return (
     <div className={styles.grid}>
       <EmptyPage.Root size="s" aria-labelledby="tone-neutral">
-        <EmptyPage.Icon tone="neutral">
+        <EmptyPage.Icon>
           <Icon name="object.inbox" />
         </EmptyPage.Icon>
         <EmptyPage.Title id="tone-neutral">Входящих нет</EmptyPage.Title>
@@ -21,20 +24,18 @@ export default function EmptyPageIconTonesExample() {
         <EmptyPage.Title id="tone-accent">Создайте первый проект</EmptyPage.Title>
         <EmptyPage.Description>Проекты объединяют задачи, файлы и команду.</EmptyPage.Description>
         <EmptyPage.Actions>
-          <Button.Root size="s">Создать проект</Button.Root>
+          <Button.Root>Создать проект</Button.Root>
         </EmptyPage.Actions>
       </EmptyPage.Root>
 
-      <EmptyPage.Root size="s" aria-labelledby="tone-danger">
-        <EmptyPage.Icon tone="danger">
+      <EmptyPage.Root size="s" tone="danger" aria-labelledby="tone-danger">
+        <EmptyPage.Icon>
           <Icon name="status.offline" />
         </EmptyPage.Icon>
         <EmptyPage.Title id="tone-danger">Не удалось загрузить</EmptyPage.Title>
         <EmptyPage.Description>Сервер не ответил. Проверьте соединение.</EmptyPage.Description>
         <EmptyPage.Actions>
-          <Button.Root variant="outline" tone="neutral" size="s">
-            Повторить
-          </Button.Root>
+          <EmptyPage.RetryButton onRetry={retryInbox} />
         </EmptyPage.Actions>
       </EmptyPage.Root>
     </div>

package/dist/skill/reference/components/example-frame/COMPONENT.md

@@ -0,0 +1,140 @@
+# ExampleFrame
+
+**Category:** infrastructure
+**Kind:** layout
+
+> A documentation frame: live preview, source code and device width in one block.
+
+## When to use
+- Documentation and design-system pages that show a live example next to its source.
+- Checking an example in light and dark themes and at desktop / tablet / phone widths.
+
+## When not to use
+- Showing code without a live preview → use [CodeBlock](../code-block/COMPONENT.md).
+- Grouping app content in a box → use [Card](../card/COMPONENT.md).
+- Switching app sections → use [Tabs](../tabs/COMPONENT.md).
+
+## Import
+```tsx
+import { ExampleFrame } from "prime-ui-kit";
+```
+
+## Anatomy
+```
+ExampleFrame               frame: toolbar + preview stage or code pane
+├─ (toolbar)               SegmentedControl Preview / Code, theme Button, copy Button, device SegmentedControl
+└─ (stage)                 children, laid out by previewLayout
+```
+
+## API
+
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+### ExampleFrame
+`ref` → `HTMLDivElement`. The documentation frame: a toolbar (pane switch, theme toggle, copy button, device switch) above the preview stage or the code pane.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `code` | `string` | — (required) | Source shown on the code pane (TS / TSX highlighting via CodeBlock) and copied by the copy button. |
+| `previewLayout` | `"default" \| "stack" \| "stack-narrow" \| "full" \| "row" \| "matrix"` | `"default"` | How the preview lays out its children, so snippets need no wrapper divs (see Variants). |
+| `viewport` | `"desktop" \| "tablet" \| "mobile"` | — | Preview width (controlled). |
+| `defaultViewport` | `"desktop" \| "tablet" \| "mobile"` | `"desktop"` | Initial preview width (uncontrolled). |
+| `onViewportChange` | `(viewport: "desktop" \| "tablet" \| "mobile") => void` | — | Called with the new width from the device switch. |
+| `colorScheme` | `"light" \| "dark"` | — | Theme of the stage and code pane (controlled); the page theme is untouched. |
+| `defaultColorScheme` | `"light" \| "dark"` | `"light"` | Initial theme (uncontrolled). |
+| `onColorSchemeChange` | `(scheme: "light" \| "dark") => void` | — | Called with the new theme from the theme toggle. |
+| `showThemeToggle` | `boolean` | `true` | Show the light / dark toggle in the toolbar. |
+| `onCopy` | `() => void` | — | Called after `code` was copied to the clipboard. |
+| `labels` | `Partial<ExampleFrameLabels>` | — | Built-in strings, see Labels. |
+| `children` | `ReactNode` | — | Preview content, laid out by `previewLayout`. |
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "onCopy">` | — | `className` and the other attributes of the frame `<div>`. |
+
+## Variants
+
+### previewLayout
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `default` | single block centered in the stage | one component | yes |
+| `stack` | centered column, gap 16, children capped at 640px (`10 × --prime-space-16`) so `width: 100%` blocks stay centered; a child with `fullWidth` or a table stretches | several blocks one under another | |
+| `stack-narrow` | column, children capped at `7 × --prime-space-16` and centered | forms and narrow columns | |
+| `full` | column, gap 16, every child takes the whole stage width | page structure: app shells, page regions | |
+| `row` | centered wrapping row, gap 12, extra vertical padding | a few buttons or controls side by side | |
+| `matrix` | centered grid of labelled cells: each direct child is a row, its children are cells (specimen above its caption); columns (up to 12) line up across rows, are never narrower than their content and grow to 320 / 160 / 128px for 1 / 2 / 3+ columns, so width-less specimens (Slider, `width: 100%` blocks) get a real cell; scrolls when wider than the stage | variant, size and state matrices | |
+
+### viewport
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `desktop` | stage takes the full frame width | default view | yes |
+| `tablet` | stage capped at 768px (`8 × --prime-space-24`), centered | checking tablet layout | |
+| `mobile` | stage capped at 384px (`4 × --prime-space-24`), centered | checking phone layout | |
+
+### colorScheme
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `light` | stage and code pane in the light theme | default | yes |
+| `dark` | stage and code pane in the dark theme (`data-theme="dark"`), switched without color transitions | checking dark mode | |
+
+Frame look: the chrome is a layer of the surface ladder (`data-depth`, one above its host) with a `border-subtle` hairline and `radius-xl`; the stage and code pane are wells with `radius-l` (16 − 4 padding = 12). Both wells carry `data-theme`, so each is a page of its own: layer 0 of its scheme, and surfaces in the example count from there.
+
+## States
+| State | Driven by | DOM |
+|---|---|---|
+| pane | toolbar switch (internal, starts at Preview) | preview stage or code pane is rendered; the device switch shows only with the preview |
+| viewport | `viewport` / `defaultViewport` | `data-viewport` on the preview viewport |
+| theme | `colorScheme` / `defaultColorScheme` | `data-theme` on the stage and code pane |
+| layout | `previewLayout` | `data-preview-layout` on the stage |
+| copy | copy button | its `aria-label` switches to `labels.copied` / `labels.copyError` for 2 s; on success the copy glyph cross-fades to a check (`data-copy-state`) |
+
+## Layout & spacing
+- The frame is `max-width: 100%`; long code lines scroll inside the code pane instead of widening the page. The code pane is at most `min(512px, 70vh)` high and scrolls both ways.
+- The stage is at least 160 high with `--prime-space-6` / `--prime-space-4` padding; content wider than it is clipped (`matrix` scrolls instead).
+- The toolbar wraps below 40rem of frame width; below 25rem the visible device labels are hidden (icons stay, each option keeps a screen-reader name).
+- The device width switches at once: `max-width` is layout, so it does not animate.
+- Stack frames one per demo block; spacing between blocks comes from the page.
+
+## Accessibility
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `Tab` | Moves through the switches, the theme and copy buttons and the code pane. |
+| `ArrowLeft` · `ArrowRight` | Choose the pane or the width inside a switch (SegmentedControl). |
+
+### ARIA
+- The pane and device switches are radio groups named by `labels.paneSwitch` and `labels.viewportSwitch`.
+- The theme and copy buttons are icon-only Buttons with `aria-label`; after copying the label becomes `labels.copied`.
+- The code pane is a focusable `section` with `aria-label` from `labels.codeRegion`, so keyboard users can scroll it.
+
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+| Key | Default | Used for |
+|---|---|---|
+| `paneSwitch` | `"Вид примера"` | `aria-label` of the Preview / Code switch. |
+| `preview` | `"Превью"` | Preview pane option. |
+| `code` | `"Код"` | Code pane option. |
+| `viewportSwitch` | `"Ширина превью"` | `aria-label` of the device switch. |
+| `desktop` | `"Десктоп"` | Desktop width option. |
+| `tablet` | `"Планшет"` | Tablet width option. |
+| `mobile` | `"Телефон"` | Phone width option. |
+| `copy` | `"Копировать код"` | Copy button `aria-label`. |
+| `copied` | `"Скопировано"` | Copy button after success. |
+| `copyError` | `"Не удалось скопировать"` | Copy button after a failure. |
+| `themeDark` | `"Включить тёмную тему"` | Theme toggle in the light theme. |
+| `themeLight` | `"Включить светлую тему"` | Theme toggle in the dark theme. |
+| `codeRegion` | `"Код примера"` | `aria-label` of the code pane. |
+
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | A live example next to its source, with the pane, width, theme and copy controls — `code`, `previewLayout`. |
+| [controlled.tsx](examples/controlled.tsx) | Frames of one page share the preview width and theme: the parent owns both — `viewport`, `colorScheme`. |
+
+## Mistakes
+- Wrapping several preview items in an extra `div` with flex styles → use `previewLayout="row"` or `"stack"`.
+- `code` that differs from the preview → import the example source (`?raw` in Vite) and render the same file.
+- Expecting `colorScheme` to change the page theme → it only themes the frame's stage and code pane.
+
+## Related
+- **Built from:** [SegmentedControl](../segmented-control/COMPONENT.md), [Button](../button/COMPONENT.md), [CodeBlock](../code-block/COMPONENT.md), Icon (`view.*`, `viewport.*`, `theme.*`, `action.copy`, `action.check`)
+- **See also:** [Card](../card/COMPONENT.md)

package/dist/skill/reference/components/example-frame/examples/controlled.tsx

@@ -0,0 +1,42 @@
+/** Frames of one page share the preview width and theme: the parent owns both — `viewport`, `colorScheme`. */
+import { Button, ExampleFrame, type ExampleFrameViewport, Input } from "prime-ui-kit";
+import * as React from "react";
+
+const BUTTON_CODE = "<Button.Root>Сохранить</Button.Root>";
+const INPUT_CODE = `<Input.Root label="Рабочая почта">
+  <Input.Wrapper>
+    <Input.Field placeholder="name@company.ru" />
+  </Input.Wrapper>
+</Input.Root>`;
+
+export default function ExampleFrameControlledExample() {
+  const [viewport, setViewport] = React.useState<ExampleFrameViewport>("desktop");
+  const [scheme, setScheme] = React.useState<"light" | "dark">("light");
+
+  return (
+    <>
+      <ExampleFrame
+        code={BUTTON_CODE}
+        viewport={viewport}
+        onViewportChange={setViewport}
+        colorScheme={scheme}
+        onColorSchemeChange={setScheme}
+      >
+        <Button.Root>Сохранить</Button.Root>
+      </ExampleFrame>
+      <ExampleFrame
+        code={INPUT_CODE}
+        viewport={viewport}
+        onViewportChange={setViewport}
+        colorScheme={scheme}
+        onColorSchemeChange={setScheme}
+      >
+        <Input.Root label="Рабочая почта">
+          <Input.Wrapper>
+            <Input.Field placeholder="name@company.ru" />
+          </Input.Wrapper>
+        </Input.Root>
+      </ExampleFrame>
+    </>
+  );
+}

package/dist/skill/reference/components/example-frame/examples/overview.tsx

@@ -0,0 +1,16 @@
+/** A live example next to its source, with the pane, width, theme and copy controls — `code`, `previewLayout`. */
+import { Button, ExampleFrame } from "prime-ui-kit";
+
+const CODE = `<Button.Root variant="soft" tone="neutral">Отмена</Button.Root>
+<Button.Root>Сохранить</Button.Root>`;
+
+export default function ExampleFrameOverviewExample() {
+  return (
+    <ExampleFrame code={CODE} previewLayout="row">
+      <Button.Root variant="soft" tone="neutral">
+        Отмена
+      </Button.Root>
+      <Button.Root>Сохранить</Button.Root>
+    </ExampleFrame>
+  );
+}

package/dist/skill/reference/components/fieldset/COMPONENT.md

@@ -0,0 +1,107 @@
+# Fieldset
+
+**Category:** inputs
+**Kind:** primitive
+
+> A frameless group of related form fields: a native `<fieldset>` with a `title-s` legend, the form rhythm between its fields and one `disabled` for all of them.
+
+## When to use
+- A long form split into groups («Реквизиты», «Контакты», «Уведомления»), each with a heading 16 above its fields.
+- Disabling every field of a form while its request runs: `disabled` on the group instead of `disabled` on each field.
+- A group that needs a native name for assistive tech (`<legend>`), e.g. a set of switches under one heading.
+
+## When not to use
+- One choice among options with a heading → [Radio](../radio/COMPONENT.md) `Radio.Group label`, a [SegmentedControl](../segmented-control/COMPONENT.md) or [ButtonGroup](../button-group/COMPONENT.md) `label`.
+- A bounded block with a surface (a settings panel) → [Card](../card/COMPONENT.md) `Card.Root`; a Fieldset inside it groups the fields.
+- A page section with a title and actions → [PageContent](../page-content/COMPONENT.md) sections.
+- A single field's label → the field's own `label`.
+
+## Import
+```tsx
+import { Fieldset } from "prime-ui-kit";
+```
+
+## Anatomy
+```
+Fieldset           <fieldset>: no border, padding or fill; native disabled + the kit's disabled context
+├─ <legend>        `label`: the heading, title-s, names the group
+├─ <p>             `description`: secondary text, aria-describedby
+└─ fields          children, field → field 20
+```
+A leaf: everything is a prop or a child. A row of two fields inside is the consumer's grid.
+
+## API
+
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+### Fieldset
+`ref` → `HTMLFieldSetElement`. A native `<fieldset>` without border, padding or fill: the `<legend>` heading, an optional description, then the children at the form rhythm. `disabled` disables every control inside.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `ReactNode` | — | Group heading in the native `<legend>` (`title-s`); it names the group for assistive tech. Without it give the fieldset an `aria-label` when the group needs a name. |
+| `description` | `ReactNode` | — | Secondary text under the heading (`body-s`, secondary), linked through `aria-describedby`. |
+| `disabled` | `boolean` | `false` | Disables every control inside, native and kit (they take their own disabled look, ARIA and keyboard); nested groups inherit it. Use it while the form's request runs. |
+| `children` | `ReactNode` | — (required) | The fields, stacked 20 apart; a row of two fields is the consumer's grid. |
+| `…rest` | `Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "children" \| "disabled">` | — | `className`, `name`, `form`, `aria-*` and the other attributes of the `<fieldset>`. |
+
+## Variants
+Fieldset has no `variant`, `tone` or `size`: fields keep their own tier (or the host's).
+
+### Flags
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `disabled` | Every control inside in its disabled look; the heading and the description keep their color | While the form's request runs; a section the person cannot edit | `false` |
+
+**Combinations**
+- Recommended: groups 32 apart in the form, a `label` on each; `disabled={saving}` on every group and `loading` on the submit button outside them.
+- Allowed but rare: no `label` — a group only for `disabled`; give it an `aria-label` when the group itself needs a name.
+- Pointless: a description without a heading.
+- Forbidden: a border, padding or fill added to the group — the group is made by proximity; use a Card when it needs a surface.
+
+## States
+| State | Driven by | DOM |
+|---|---|---|
+| disabled | `disabled` (or a disabled Fieldset around it) | native `disabled` + `data-disabled="true"` on the `<fieldset>`; native controls inside match `:disabled`; kit controls take their own disabled state (`data-disabled`, `aria-disabled`, native `disabled`) from the context |
+
+A Button inside a disabled group is disabled too (it reads the same context), so the submit button sits outside the group and shows `loading` while the request runs. `FormData` skips the controls of a disabled fieldset: read the form before disabling it.
+
+## Layout & spacing
+- Heading → fields `--prime-space-4` (16); heading → description `--prime-space-1` (4); description → fields `--prime-space-4`; field → field `--prime-space-5` (20).
+- Group → group `--prime-space-8` (32) — set by the form around the groups.
+- `width: 100%`, `min-width: 0` (the native fieldset's `min-content` minimum is reset), so long values never widen the form.
+
+## Accessibility
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `Tab` | Moves through the group's fields; the fields of a disabled group are skipped. |
+
+### ARIA
+- The native `<fieldset>` is a group (`role="group"`) named by the `<legend>` text from `label`; without a heading give it `aria-label`.
+- `description` is linked to the group through `aria-describedby`.
+- `disabled` disables the native controls inside and passes a context to kit controls: they set their own `disabled` / `aria-disabled` and drop out of the Tab order.
+
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+No `labels`.
+
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | A group of contact fields under a heading with a short description, no frame of its own — `label`, `description`. |
+| [states.tsx](examples/states.tsx) | An enabled group next to a disabled one: every kit control inside takes its disabled look — `disabled`. |
+| [in-form.tsx](examples/in-form.tsx) | A client form in two groups: while the request runs every field inside is disabled at once and the submit button shows its progress — `label`, `disabled`. |
+
+## Mistakes
+- A raw `<fieldset disabled>` around kit controls → `Fieldset disabled`; the raw one leaves choice rows, segments and triggers in their enabled look.
+- `disabled` on every field of a saving form → one `disabled` on the group.
+- A `Typography` heading + `aria-labelledby` inside a hand-reset fieldset → `label`.
+- Reading `new FormData(form)` after disabling the group → the disabled fields are missing; read it first.
+- A border or a fill around the group → none; groups are separated by air, a surface is a Card.
+
+## Related
+- **Built from:** —
+- **See also:** [Card](../card/COMPONENT.md) (a surface around the groups), [Input](../input/COMPONENT.md) (takes its disabled look from the group), [Button](../button/COMPONENT.md) (the submit with `loading`, outside the group), [LoginForm](../login-form/COMPONENT.md) (its fields wrapped in `Fieldset disabled` while signing in), [Radio](../radio/COMPONENT.md)

package/dist/skill/reference/components/fieldset/examples/examples.module.css

@@ -0,0 +1,14 @@
+/* Layout of the Fieldset scenarios: semantic tokens only. */
+
+/* in-form.tsx: group → group 32, groups → actions 32 (foundation §1); one readable column. */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-8);
+  width: min(100%, var(--prime-modal-width-s));
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+}

package/dist/skill/reference/components/fieldset/examples/in-form.tsx

@@ -0,0 +1,59 @@
+/** A client form in two groups: while the request runs every field inside is disabled at once and the submit button shows its progress — `label`, `disabled`. */
+import { Button, Fieldset, Input, Radio, Switch } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const SAVE_DELAY_MS = 1200;
+
+export default function FieldsetInFormExample() {
+  const [saving, setSaving] = React.useState(false);
+  const [saved, setSaved] = React.useState(false);
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSaving(true);
+    setSaved(false);
+    window.setTimeout(() => {
+      setSaving(false);
+      setSaved(true);
+    }, SAVE_DELAY_MS);
+  };
+
+  return (
+    <form className={styles.form} noValidate onSubmit={submit} onChange={() => setSaved(false)}>
+      <Fieldset label="Реквизиты" disabled={saving}>
+        <Radio.Group label="Тип клиента" defaultValue="company" orientation="horizontal">
+          <Radio.Root value="company">
+            <Radio.Label>Компания</Radio.Label>
+          </Radio.Root>
+          <Radio.Root value="person">
+            <Radio.Label>ИП</Radio.Label>
+          </Radio.Root>
+        </Radio.Group>
+        <Input.Root label="Название" required>
+          <Input.Wrapper>
+            <Input.Field name="name" defaultValue="ООО «Северный ветер»" />
+          </Input.Wrapper>
+        </Input.Root>
+      </Fieldset>
+      <Fieldset
+        label="Уведомления"
+        description="Письма уходят на почту для счетов."
+        disabled={saving}
+      >
+        <Switch.Root name="invoices" defaultChecked>
+          <Switch.Label>Новые счета</Switch.Label>
+        </Switch.Root>
+        <Switch.Root name="reminders">
+          <Switch.Label>Напоминания об оплате</Switch.Label>
+        </Switch.Root>
+      </Fieldset>
+      <div className={styles.actions}>
+        <Button.Root type="submit" loading={saving} tone={saved ? "success" : "accent"}>
+          {saved ? "Сохранено" : "Сохранить"}
+        </Button.Root>
+      </div>
+    </form>
+  );
+}

package/dist/skill/reference/components/fieldset/examples/overview.tsx

@@ -0,0 +1,22 @@
+/** A group of contact fields under a heading with a short description, no frame of its own — `label`, `description`. */
+import { Fieldset, Icon, Input } from "prime-ui-kit";
+
+export default function FieldsetOverviewExample() {
+  return (
+    <Fieldset label="Контакты" description="На эти адреса уйдут счета и закрывающие документы.">
+      <Input.Root label="Почта для счетов">
+        <Input.Wrapper>
+          <Input.Icon side="start">
+            <Icon name="field.email" />
+          </Input.Icon>
+          <Input.Field type="email" defaultValue="billing@severny-veter.ru" />
+        </Input.Wrapper>
+      </Input.Root>
+      <Input.Root label="Телефон бухгалтерии" optional>
+        <Input.Wrapper>
+          <Input.Field type="tel" defaultValue="+7 812 555-01-42" />
+        </Input.Wrapper>
+      </Input.Root>
+    </Fieldset>
+  );
+}

package/dist/skill/reference/components/fieldset/examples/states.tsx

@@ -0,0 +1,35 @@
+/** An enabled group next to a disabled one: every kit control inside takes its disabled look — `disabled`. */
+import { Checkbox, Fieldset, Input, SegmentedControl, Typography } from "prime-ui-kit";
+
+const STATES = [
+  { caption: "default", disabled: false },
+  { caption: "disabled", disabled: true },
+];
+
+export default function FieldsetStatesExample() {
+  return (
+    <div>
+      {STATES.map((state) => (
+        <div key={state.caption}>
+          <Fieldset label="Сделка" disabled={state.disabled}>
+            <Input.Root label="Название">
+              <Input.Wrapper>
+                <Input.Field defaultValue="Годовая лицензия, 40 мест" />
+              </Input.Wrapper>
+            </Input.Root>
+            <SegmentedControl.Root label="Тип" defaultValue="new">
+              <SegmentedControl.Item value="new">Новая</SegmentedControl.Item>
+              <SegmentedControl.Item value="renewal">Продление</SegmentedControl.Item>
+            </SegmentedControl.Root>
+            <Checkbox.Root defaultChecked>
+              <Checkbox.Label>Выставить счёт сразу</Checkbox.Label>
+            </Checkbox.Root>
+          </Fieldset>
+          <Typography as="span" variant="caption" tone="muted">
+            {state.caption}
+          </Typography>
+        </div>
+      ))}
+    </div>
+  );
+}