prime-ui-kit 0.9.0 → 0.9.1

package/src/components/avatar/examples/team-group.tsx

@@ -0,0 +1,21 @@
+/** Project members as an overlapping row with a «+N» cell; the group size goes to every member — `Avatar.Group`, `Avatar.Overflow`, `size`. */
+import { Avatar } from "prime-ui-kit";
+
+const MEMBERS = [
+  { initials: "АК", color: "blue" },
+  { initials: "ДН", color: "green" },
+  { initials: "ЖП", color: "orange" },
+] as const;
+
+export default function AvatarTeamGroupExample() {
+  return (
+    <Avatar.Group size="s" aria-label="Участники проекта: 6">
+      {MEMBERS.map((member) => (
+        <Avatar.Root key={member.initials} color={member.color}>
+          <Avatar.Fallback>{member.initials}</Avatar.Fallback>
+        </Avatar.Root>
+      ))}
+      <Avatar.Overflow aria-label="Ещё 3 участника">+3</Avatar.Overflow>
+    </Avatar.Group>
+  );
+}

package/src/components/avatar/examples/variants.tsx

@@ -0,0 +1,40 @@
+/** Every palette hue of the fallback; derive it from a stable user id — `color`. */
+import { Avatar, Typography } from "prime-ui-kit";
+
+const ROWS = [
+  [
+    { initials: "АК", color: "gray" },
+    { initials: "БС", color: "blue" },
+    { initials: "ВЛ", color: "sky" },
+    { initials: "ГМ", color: "teal" },
+    { initials: "ДН", color: "green" },
+  ],
+  [
+    { initials: "ЕО", color: "yellow" },
+    { initials: "ЖП", color: "orange" },
+    { initials: "ЗР", color: "red" },
+    { initials: "ИС", color: "pink" },
+    { initials: "КТ", color: "purple" },
+  ],
+] as const;
+
+export default function AvatarVariantsExample() {
+  return (
+    <>
+      {ROWS.map((row) => (
+        <div key={row[0].color}>
+          {row.map(({ initials, color }) => (
+            <div key={color}>
+              <Avatar.Root color={color}>
+                <Avatar.Fallback>{initials}</Avatar.Fallback>
+              </Avatar.Root>
+              <Typography as="span" variant="caption" tone="muted">
+                {color}
+              </Typography>
+            </div>
+          ))}
+        </div>
+      ))}
+    </>
+  );
+}

package/src/components/badge/COMPONENT.md

@@ -1,21 +1,23 @@
 # Badge
 
 **Category:** data-display
+**Kind:** primitive
 
-> A compact static label for a status, category or count, in a palette color.
+> The kit's one chip: a static label for a status, category or count, a removable value or applied filter, and a pressable toggle with a hover action — in a palette color.
 
 ## When to use
-- Status or category of a row in a table or list ("Оплачен", "Черновик", "Бета").
-- Environment, role or feature labels next to a heading.
-- Counters inside buttons and fields ("Входящие 12", "−25%").
+- Status or category of a row in a table or list («Оплачен», «Черновик», «Бета»).
+- Counters inside buttons and fields («Входящие 12», «−25%»).
 - A workflow state with a leading dot (`Badge.Dot`).
+- A selected value, keyword or applied filter the user can remove (`onRemove`).
+- Values in a filter panel that toggle on press and hide with a hover action (`onPress`, `Badge.Action`).
 
 ## When not to use
-- The chip can be removed, toggled or used as a filter → use [Tag](../tag/COMPONENT.md).
+- A multi-select field with chips → use [TagSelect](../tag-select/COMPONENT.md) (it renders badges itself).
 - A keyboard key or shortcut → use [Kbd](../kbd/COMPONENT.md).
-- A person's presence (online / busy) → use `Avatar.Status` from [Avatar](../avatar/COMPONENT.md).
-- The label must be clickable → use [Button](../button/COMPONENT.md) or [LinkButton](../link-button/COMPONENT.md).
-- A message about the page or a section → use [Banner](../banner/COMPONENT.md) or [Hint](../hint/COMPONENT.md).
+- A person's presence → `Avatar.Status` from [Avatar](../avatar/COMPONENT.md).
+- A command (save, open, go somewhere) → use [Button](../button/COMPONENT.md); a pressable badge toggles a value.
+- A message about the page or a section → use [Banner](../banner/COMPONENT.md).
 
 ## Import
 ```tsx
@@ -24,168 +26,157 @@ import { Badge } from "prime-ui-kit";
 
 ## Anatomy
 ```
-Badge.Root          span: fill, text, tier dimensions
-├── Badge.Dot       optional leading dot in currentColor (aria-hidden)
-├── Badge.Icon      optional icon wrapper, leading or trailing
-└── text / number
+Badge.Root          <span>: fill, tier dimensions
+├─ [start segment]  Badge.Icon or Badge.Dot at the start edge: full height, mark centred
+├─ body             text, Badge.Dot, inline Badge.Icon
+│                   (a <button> with onPress; a <span> with a trailing segment; none when read-only)
+├─ Badge.Action     optional end segment revealed on hover / focus
+└─ remove segment   with onRemove: full height, the whole end is the hit area (Icon action.close)
 ```
 
 ## API
 
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 ### Badge.Root
-Forwards `ref` to the `<span>`. No `asChild`.
+`ref` → `HTMLSpanElement`. The chip: fill, tier dimensions; a read-only badge is one `<span>`, `onPress` makes the body a `<button>`, `onRemove` adds a remove segment.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `color` | `"gray" \| "blue" \| "green" \| "orange" \| "red" \| "yellow" \| "purple" \| "sky" \| "pink" \| "teal"` (`PaletteColor`) | `"gray"` | Palette hue. Categorizes; the text carries the meaning. |
+| `color` | `"gray" \| "blue" \| "green" \| "orange" \| "red" \| "yellow" \| "purple" \| "sky" \| "pink" \| "teal"` | `"gray"` | Palette hue. Categorizes; the text carries the meaning. |
 | `variant` | `"solid" \| "soft" \| "outline"` | `"soft"` | Treatment. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` (`ControlSize`) | — (inherited, else `"m"`) | Badge tier. Without it the badge follows the surrounding control one tier down; outside a control it is `m`. An explicit value always wins. |
-| `disabled` | `boolean` | — | Muted look for every variant (visual only, no ARIA). |
-| `children` | `ReactNode` | — | Text, `Badge.Dot`, `Badge.Icon`. Only `Badge.Icon` children make a square icon-only badge. |
-| `className` | `string` | — | Extra class on the root. |
-
-+ native `<span>` props (`HTMLAttributes<HTMLSpanElement>`).
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | — | Badge tier, 16 · 20 · 24 · 28 · 32 px high. Without it the badge follows the surrounding control one tier down; outside a control it is `m`. |
+| `onRemove` | `() => void` | — | Adds the full-height remove segment at the end; called on its click. |
+| `onPress` | `(event: MouseEvent<HTMLButtonElement>) => void` | — | Makes the body a `<button>` covering the whole badge (a toggle chip, a filter value); gets the event, so Alt / Shift clicks can mean more. |
+| `pressed` | `boolean` | — | Toggle state of a pressable badge: `aria-pressed` on the body, `data-pressed` on the root. |
+| `disabled` | `boolean` | — | Muted look for every variant, `aria-disabled`; the body button, remove and action get native `disabled`. |
+| `labels` | `Partial<BadgeLabels>` | — | Built-in strings, see Labels. |
+| `children` | `ReactNode` | — | Text, `Badge.Dot`, `Badge.Icon`, one `Badge.Action`. Only `Badge.Icon` children (no remove or action) make a square icon-only badge. |
+| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `className`, `aria-label` (icon-only) and the other span attributes. |
 
 ### Badge.Icon
-No ref forwarding.
+`ref` → `HTMLSpanElement`. A `<span>` holding one icon at the tier icon size. At the first or last position it becomes a full-height edge segment.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — (required) | The icon; sized to the tier icon (12–16px). |
-| `className` | `string` | — | Extra class on the wrapper. |
-
-+ native `<span>` props except `children`.
+| `children` | `ReactNode` | — (required) | The icon (`Icon`). |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other span attributes. |
 
 ### Badge.Dot
-No ref forwarding. Always `aria-hidden="true"`.
+`ref` → `HTMLSpanElement`. An `aria-hidden` `<span>` dot in the text color; at an edge it becomes a segment like an edge icon. Also usable alone (a marker on an icon, before a label): it takes the tier of the surrounding control (6px, 8px from `l`) and the color set on it.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `className` | `string` | — | Extra class on the dot. |
+| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `className` and the other span attributes. |
 
-+ native `<span>` props.
+### Badge.Action
+`ref` → `HTMLButtonElement`. A `<button>` segment at the end, revealed on hover and focus; the badge reserves its room, so the width never changes. One per badge, not together with `onRemove`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | — (required) | Accessible name and tooltip («Скрыть billing»). |
+| `onClick` | `(event: MouseEvent<HTMLButtonElement>) => void` | — (required) | Runs the action. |
+| `persistent` | `boolean` | `false` | Keeps the action shown, not only on hover and focus (while the state it sets is on). |
+| `pressed` | `boolean` | — | Toggle state of the action: `aria-pressed`. |
+| `disabled` | `boolean` | `false` | The action is unavailable. |
+| `children` | `ReactNode` | — | A custom glyph at the tier icon size; a minus by default. |
+| `…rest` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" \| "onClick" \| "children">` | — | `className` and the other button attributes. |
 
 ## Variants
 
 ### variant
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `soft` | Light palette fill (`palette.<hue>.soft`), hue text, no outline | Status and category labels in tables, lists, headers — the normal case | yes |
-| `solid` | Saturated hue fill (`palette.<hue>.solid`), contrasting text | One label per area that must stand out ("Срочно", a single environment flag) | |
-| `outline` | Transparent fill, 1px inset line in the hue text at 32%, hue text | A quiet secondary label next to soft badges, or on a fill where a soft wash would blend in | |
-
-`variant="ghost"` is not part of Badge (the type excludes it).
+| `soft` | light palette fill, hue text | statuses and categories — the normal case | yes |
+| `solid` | saturated hue fill, contrasting text | one label per area that must stand out | |
+| `outline` | transparent, 1px inset line in the hue text at 32% | a quiet secondary label next to soft badges | |
 
 ### color
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `gray` | Neutral gray wash and text | Neutral or inactive states: draft, archived, cancelled | yes |
-| `blue` | Blue | In progress, informational categories, counters | |
-| `green` | Green | Success, paid, active, published | |
-| `orange` | Orange | Waiting, needs attention, low stock | |
-| `red` | Red | Failed, rejected, urgent | |
-| `yellow` | Yellow | Paused, under review | |
-| `purple` | Purple | Roles, private / premium categories | |
-| `sky` | Sky blue | Channel or type categories distinct from blue | |
-| `pink` | Pink | Extra category hue | |
-| `teal` | Teal | Extra category hue | |
-
-The same hue reads in both themes. Pick one hue per meaning and keep it across the product.
+| `gray` | neutral wash | draft, archived, cancelled | yes |
+| `blue` | blue | in progress, counters | |
+| `green` | green | success, paid, published | |
+| `orange` | orange | waiting, needs attention | |
+| `red` | red | failed, rejected, urgent | |
+| `yellow` | yellow | paused, under review | |
+| `purple` | purple | roles, private categories | |
+| `sky` · `pink` · `teal` | extra hues | more categories | |
 
 ### size
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `xs` | 16px high, padding 4, text 12, icon 12, radius 4 | Inside `xs`/`s` controls, very dense rows | |
-| `s` | 20px high, padding 6, text 12, icon 12, radius 6 | Inside `m` controls (inherited automatically), compact lists | |
-| `m` | 24px high, padding 8, text 12, icon 14, radius 6 | Standalone labels in tables and lists | yes (outside controls) |
-| `l` | 28px high, padding 10, text 13, icon 16, radius 8 | Next to page / section titles | |
-| `xl` | 32px high, padding 12, text 14, icon 16, radius 8 | Large headers, hero areas | |
-
-### Icon-only (structural)
-| Value | Looks like | Use when | Default |
-|---|---|---|---|
-| text (+ Dot / Icon) | Pill with horizontal padding | Any label with words | yes |
-| only `Badge.Icon` children | Square: width = height, no horizontal padding (`data-icon-only`) | A compact type marker; give it `aria-label` | |
-
-### disabled (visual flag)
+| `xs` | 16px high, text 12, icon 12 | inside `xs` / `s` controls | |
+| `s` | 20px high, text 12, icon 12 | inside `m` controls (inherited automatically) | |
+| `m` | 24px high, text 12, icon 14 | standalone labels in tables and lists | yes (outside controls) |
+| `l` | 28px high, text 13, icon 16 | next to section titles | |
+| `xl` | 32px high, text 14, icon 16 | large headers | |
+| — (omitted) | one tier below the surrounding control | inside Button, Input, Tabs | yes (inside controls) |
+
+### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `false` / unset | Variant colors | Normal | yes |
-| `true` | Muted fill (`fill-muted`), disabled text, no outline, for every variant | The labelled item is inactive or unavailable | |
-
-**Combinations**
-- Recommended: `soft` with any hue for statuses; `soft` + `Badge.Dot` for workflow states; `solid` for a single emphasized label.
-- Allowed but rare: `outline` next to soft badges for a secondary label; `solid` icon-only for a type marker.
-- Avoid: several `solid` badges in one row (they compete); color as the only signal (always keep text); explicit `size` inside a control (breaks the one-tier-down pairing).
-
-**Sizes**
-Without `size` a badge inside a control uses the tier one step down: control `xs`/`s` → `xs`, `m` → `s`, `l` → `m`, `xl` → `l`. Outside any control the default is `m` (24px), which sits well in a 36px row next to `m` buttons and inputs.
-
-**Hierarchy**
-Soft badges carry status in lists; at most one `solid` badge per area; Tag is for anything the user can act on.
+| `disabled` | muted fill, disabled text, no outline, for every variant | the labelled item is inactive | `false` |
 
 ## States
-Badge is not interactive: no hover, focus or pressed states.
-
-| State / attribute | Driven by | Notes |
+| State | Driven by | DOM |
 |---|---|---|
-| `data-color` | `color` | Always set (default `gray`). |
-| `data-variant` | `variant` | Always set (default `soft`). |
-| `data-size` | `size`, else surrounding control size, else `m` | Nominal size. |
-| `data-tier` | resolved visual tier | Equals `data-size` unless the size was inherited from a control (then one step down). Drives all dimensions. |
-| `data-icon-only="true"` | children are only `Badge.Icon` | Square badge. |
-| `data-disabled="true"` | `disabled` | Muted look. |
-
-`Badge.Root` also provides its tier to children through the control-size context, so an `Icon` inside picks the badge tier.
+| hue / treatment | `color`, `variant` | `data-color`, `data-variant` (always set) |
+| size | `size`, else the control, else `m` | `data-size`, `data-tier` (visual tier) |
+| icon segments | edge `Badge.Icon` / `Badge.Dot`, icon-only | `data-icon-start`, `data-icon-end`, `data-icon-only` |
+| plain text | read-only, text children only | `data-text-only`: the root is one block box that ellipsizes; otherwise each text run sits in its own block span |
+| removable | `onRemove` | `data-removable`; the remove segment takes a `fill-subtle-active` wash on hover |
+| pressable / pressed | `onPress`, `pressed` | `data-pressable`, `data-pressed`, `aria-pressed` on the body; `fill-subtle` wash on hover |
+| action | `Badge.Action` | `data-action="reveal" \| "persistent"`; the text slides and the segment fades in over `fast` |
+| disabled | `disabled` | `data-disabled`, `aria-disabled`; inner buttons disabled |
 
 ## Layout & spacing
-- Inline-flex, `vertical-align: middle`, never shrinks; `max-width: 100%`, text does not wrap.
+- Inline-flex, `width: fit-content`, `max-width: 100%`; text never wraps and ends in an ellipsis.
+- Segments are `mark + padding + gap` wide and full height; the mark sits with equal space to the edge and to the text.
 - Several badges in a row: `gap: var(--prime-space-2)`.
-- In a list or table row the badge is the trailing column; give the title column `min-width: 0` and ellipsis so the badge never wraps.
-- Numbers use `tabular-nums`.
+- In a list row the badge is the trailing column; the title column gets `min-width: 0` and an ellipsis.
 
 ## Accessibility
-- Plain text in a `<span>`; screen readers read its content. No role.
-- `Badge.Dot` is `aria-hidden`; the text next to it is what is announced.
-- Icon-only badges need `aria-label` (e.g. `aria-label="Почта"`).
-- Color never carries meaning alone — keep the word.
-- No `labels` keys.
 
-## Examples
-| File | Scenario | When to use this pattern |
-|---|---|---|
-| [sizes.tsx](examples/sizes.tsx) | Five tiers xs–xl | Picking a size for standalone badges |
-| [variants.tsx](examples/variants.tsx) | `soft` / `solid` / `outline` on the same hues, plus `Badge.Dot` | Choosing emphasis |
-| [palette.tsx](examples/palette.tsx) | All ten hues in `soft` and `solid` | Assigning category colors |
-| [states.tsx](examples/states.tsx) | Normal vs `disabled` for every variant and with a dot | Labels of inactive items |
-| [icons.tsx](examples/icons.tsx) | Dot, leading / trailing icon, icon-only with `aria-label` | Adding an icon to a label |
-| [in-controls.tsx](examples/in-controls.tsx) | Counter in Button s/m/l, badge in an Input affix | Badges inside controls (inherited tier) |
-| [surfaces.tsx](examples/surfaces.tsx) | Status set on canvas, card and floating layer | Checking contrast on any surface |
-| [order-list.tsx](examples/order-list.tsx) | Order list with a status column | Status columns in lists and tables |
+### Keyboard
+| Key | Action |
+|---|---|
+| `Tab` | Focuses the body of a pressable badge, then its action or remove segment. |
+| `Enter` · `Space` | Presses the focused body, remove or action button. |
 
-```tsx
-import { Badge } from "prime-ui-kit";
+### ARIA
+- A read-only badge is plain text in a `<span>`, no role.
+- `onPress` makes the body a `<button>` with `aria-pressed` when `pressed` is set; remove and `Badge.Action` are separate buttons with their own names.
+- Give every remove button a unique name with `labels.remove`; after removing, move focus to a neighbouring badge or the source field.
+- `Badge.Dot` is `aria-hidden`; icon-only badges need `aria-label`. Color never carries meaning alone.
 
-export function OrderStatus() {
-  return (
-    <Badge.Root color="green">
-      <Badge.Dot />
-      Оплачен
-    </Badge.Root>
-  );
-}
-```
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+| Key | Default | Used for |
+|---|---|---|
+| `remove` | `"Удалить"` | Accessible name of the remove segment; include the badge text («Убрать фильтр «Москва»»). |
+
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | Publication statuses: soft badges where the text carries the meaning and the hue repeats it — `color`. |
+| [variants.tsx](examples/variants.tsx) | Every palette hue in every treatment; the text must read without the color — `variant`, `color`. |
+| [sizes.tsx](examples/sizes.tsx) | Every badge tier, 16 to 32 px high — `size`. |
+| [states.tsx](examples/states.tsx) | An inactive badge, a pressable toggle off and on, and a removable one — `disabled`, `onPress`, `pressed`, `onRemove`. |
+| [with-icon.tsx](examples/with-icon.tsx) | A leading dot, a leading or trailing icon and an icon-only square with a name — `Badge.Dot`, `Badge.Icon`, `aria-label`. |
+| [in-controls.tsx](examples/in-controls.tsx) | Inside a button or a field the badge takes the tier one step down without `size`. |
+| [applied-filters.tsx](examples/applied-filters.tsx) | Applied filters: each badge drops its filter and names it for screen readers — `onRemove`, `labels`. |
+| [filter-values.tsx](examples/filter-values.tsx) | Filter values as toggles with a hide action that slides in without changing the width — `onPress`, `pressed`, `Badge.Action`, `persistent`. |
 
 ## Mistakes
-- `<Badge.Root onClick={…}>` as a filter → use `Tag` or `Button`.
-- `<Badge.Root color="red" />` with no text → keep a word ("Ошибка"); color alone is not a signal.
-- `<Button.Root><Badge.Root size="m">12</Badge.Root></Button.Root>` → drop `size`; the badge takes the tier one step down by itself.
-- `variant="light"` / `variant="filled"` → use `soft` / `solid`.
-- Icon-only badge without `aria-label` → add `aria-label`.
-- A custom `<span>` styled as a badge → use `Badge.Root`.
+- `<Badge.Root onClick={…}>` → use `onPress` for a toggle, or a `Button` for a command.
+- A custom × or hover button next to a badge → use `onRemove` or `Badge.Action`.
+- Several removable badges with the default «Удалить» → pass `labels.remove` with the badge text.
+- A colored badge with no text → keep a word; color alone is not a signal.
+- An explicit `size` inside a control → drop it; the badge takes the tier one step down.
+- `onRemove` together with `Badge.Action` → one end segment per badge.
 
 ## Related
-- [Tag](../tag/COMPONENT.md) — removable and interactive chips with the same tiers.
-- [Kbd](../kbd/COMPONENT.md) — keyboard keys, same tier rule.
-- [Avatar](../avatar/COMPONENT.md) — `Avatar.Status` for presence.
-- [DataTable](../data-table/COMPONENT.md) — status columns.
+- **Built from:** Icon
+- **See also:** [TagSelect](../tag-select/COMPONENT.md), [SmartFilter](../smart-filter/COMPONENT.md), [Kbd](../kbd/COMPONENT.md), [Avatar](../avatar/COMPONENT.md), [DataTable](../data-table/COMPONENT.md)

package/src/components/{tag → badge}/examples/applied-filters.tsx

@@ -1,22 +1,21 @@
-/** Applied filters panel: each tag removes its filter, the button clears all; `labels.remove` names the filter. Use above lists and tables with filters. */
-
-import { Button, Tag, Typography } from "prime-ui-kit";
+/** Applied filters: each badge drops its filter and names it for screen readers — `onRemove`, `labels`. */
+import { Badge, Button, Typography } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
 const INITIAL = ["Москва", "Санкт-Петербург", "Есть в наличии", "До 5 000 ₽"];
 
-export default function TagAppliedFiltersExample() {
+export default function BadgeAppliedFiltersExample() {
   const [filters, setFilters] = React.useState(INITIAL);
   const titleId = React.useId();
 
   return (
     <section className={styles.filters} aria-labelledby={titleId}>
       <div className={styles.filtersHeader}>
-        <Typography.Root as="h3" variant="title-s" id={titleId}>
+        <Typography as="h3" variant="title-s" id={titleId}>
           Фильтры
-        </Typography.Root>
+        </Typography>
         <Button.Root
           variant="ghost"
           tone="neutral"
@@ -27,21 +26,21 @@ export default function TagAppliedFiltersExample() {
         </Button.Root>
       </div>
       {filters.length > 0 ? (
-        <div className={styles.tags}>
+        <div className={styles.badges}>
           {filters.map((label) => (
-            <Tag.Root
+            <Badge.Root
               labels={{ remove: `Убрать фильтр «${label}»` }}
               key={label}
               onRemove={() => setFilters((prev) => prev.filter((item) => item !== label))}
             >
               {label}
-            </Tag.Root>
+            </Badge.Root>
           ))}
         </div>
       ) : (
-        <Typography.Root variant="body-s" tone="muted">
+        <Typography variant="body-s" tone="muted">
           Фильтры не выбраны — показаны все товары.
-        </Typography.Root>
+        </Typography>
       )}
     </section>
   );

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

@@ -1,77 +1,32 @@
-.stack {
-  display: grid;
-  gap: var(--prime-space-4);
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-}
+/* Layout of the Badge scenarios: semantic tokens only. */
 
-.sizes {
+/* in-controls.tsx: a button and a field side by side. */
+.controls {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   justify-content: center;
-  gap: var(--prime-space-6);
-}
-
-.sizeCell {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--prime-space-2);
+  gap: var(--prime-space-3);
+  width: min(100%, var(--prime-modal-width-m));
 }
 
-.matrix {
+/* applied-filters.tsx: a filter panel above a list. */
+.filters {
   display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: center;
-  column-gap: var(--prime-space-4);
-  row-gap: var(--prime-space-3);
-  width: 100%;
+  gap: var(--prime-space-3);
+  width: min(100%, var(--prime-modal-width-s));
 }
 
-.badges {
+.filtersHeader {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: var(--prime-space-2);
+  justify-content: space-between;
+  gap: var(--prime-space-3);
 }
 
-.controls {
+.badges {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--prime-space-3);
-}
-
-.field {
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
-}
-
-.list {
-  display: grid;
-  width: 100%;
-  max-width: var(--prime-modal-width-m);
-  margin: 0;
-  padding: var(--prime-card-padding-s);
-  list-style: none;
-  border-radius: var(--prime-card-radius);
-  background: var(--prime-color-card-bg);
-}
-
-.item {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
-  align-items: center;
-  gap: var(--prime-space-3);
-  padding-block: var(--prime-space-3);
-}
-
-.item + .item {
-  border-top: var(--prime-border-width) solid var(--prime-color-border-subtle);
-}
-
-.tabular {
-  font-variant-numeric: tabular-nums;
+  gap: var(--prime-space-2);
 }

package/src/components/badge/examples/filter-values.tsx

@@ -0,0 +1,39 @@
+/** Filter values as toggles with a hide action that slides in without changing the width — `onPress`, `pressed`, `Badge.Action`, `persistent`. */
+import { Badge } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Mode = "show" | "hide" | undefined;
+
+const VALUES = ["Москва", "Казань", "Новосибирск", "Сочи"];
+
+export default function BadgeFilterValuesExample() {
+  const [modes, setModes] = React.useState<Record<string, Mode>>({ Казань: "show", Сочи: "hide" });
+  const set = (value: string, mode: Exclude<Mode, undefined>) =>
+    setModes((prev) => ({ ...prev, [value]: prev[value] === mode ? undefined : mode }));
+
+  return (
+    <div className={styles.badges}>
+      {VALUES.map((value) => {
+        const mode = modes[value];
+        return (
+          <Badge.Root
+            key={value}
+            color={mode === "show" ? "blue" : mode === "hide" ? "red" : "gray"}
+            pressed={mode === "show"}
+            onPress={() => set(value, "show")}
+          >
+            {mode === "hide" ? `НЕ ${value}` : value}
+            <Badge.Action
+              label={mode === "hide" ? `Не скрывать ${value}` : `Скрыть ${value}`}
+              pressed={mode === "hide"}
+              persistent={mode === "hide"}
+              onClick={() => set(value, "hide")}
+            />
+          </Badge.Root>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/badge/examples/in-controls.tsx

@@ -1,35 +1,23 @@
-/** Without `size` a badge inside Button or Input takes the tier one step down (button m → badge s). Use for counters in buttons and affixes in fields. */
+/** Inside a button or a field the badge takes the tier one step down without `size`. */
 import { Badge, Button, Input } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
 export default function BadgeInControlsExample() {
   return (
-    <div className={styles.stack}>
-      <div className={styles.controls}>
-        <Button.Root variant="outline" tone="neutral" size="s">
-          Входящие
-          <Badge.Root color="blue">12</Badge.Root>
-        </Button.Root>
-        <Button.Root variant="outline" tone="neutral">
-          Входящие
-          <Badge.Root color="blue">12</Badge.Root>
-        </Button.Root>
-        <Button.Root variant="outline" tone="neutral" size="l">
-          Входящие
-          <Badge.Root color="blue">12</Badge.Root>
-        </Button.Root>
-      </div>
-      <div className={styles.field}>
-        <Input.Root label="Промокод">
-          <Input.Wrapper>
-            <Input.Field defaultValue="SPRING25" />
-            <Input.InlineAffix side="end">
-              <Badge.Root color="green">−25%</Badge.Root>
-            </Input.InlineAffix>
-          </Input.Wrapper>
-        </Input.Root>
-      </div>
+    <div className={styles.controls}>
+      <Button.Root variant="outline" tone="neutral">
+        Входящие
+        <Badge.Root color="blue">12</Badge.Root>
+      </Button.Root>
+      <Input.Root label="Промокод">
+        <Input.Wrapper>
+          <Input.Field defaultValue="SPRING25" />
+          <Input.InlineAffix side="end">
+            <Badge.Root color="green">−25%</Badge.Root>
+          </Input.InlineAffix>
+        </Input.Wrapper>
+      </Input.Root>
     </div>
   );
 }

package/src/components/badge/examples/overview.tsx

@@ -0,0 +1,13 @@
+/** Publication statuses: soft badges where the text carries the meaning and the hue repeats it — `color`. */
+import { Badge } from "prime-ui-kit";
+
+export default function BadgeOverviewExample() {
+  return (
+    <>
+      <Badge.Root>Черновик</Badge.Root>
+      <Badge.Root color="blue">На ревью</Badge.Root>
+      <Badge.Root color="green">Опубликован</Badge.Root>
+      <Badge.Root color="red">Ошибка</Badge.Root>
+    </>
+  );
+}