prime-ui-kit 0.9.0 → 0.9.1

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

@@ -1,43 +1,39 @@
-/** A controlled slider sharing one value with a number input. Use it when users need both rough dragging and exact keyboard entry. */
+/** The parent owns the value and shares it with a number field for exact entry — `value`, `onValueChange`. */
 import { Input, Slider } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
-const MIN = 0;
-const MAX = 100;
+const MAX_DISCOUNT = 50;
 
 export default function SliderControlledExample() {
   const [discount, setDiscount] = React.useState(15);
 
   return (
-    <div className={styles.column}>
-      <div className={styles.withInput}>
-        <Slider.Root
-          label="Скидка"
-          min={MIN}
-          max={MAX}
-          value={discount}
-          onValueChange={setDiscount}
-          formatValue={(v) => `${v}%`}
-        />
-        <Input.Root>
-          <Input.Wrapper>
-            <Input.Field
-              type="number"
-              min={MIN}
-              max={MAX}
-              aria-label="Скидка, %"
-              value={discount}
-              onChange={(e) => {
-                const next = Number(e.target.value);
-                if (!Number.isNaN(next)) setDiscount(Math.min(MAX, Math.max(MIN, next)));
-              }}
-            />
-            <Input.InlineAffix side="end">%</Input.InlineAffix>
-          </Input.Wrapper>
-        </Input.Root>
-      </div>
+    <div className={styles.withInput}>
+      <Slider
+        label="Скидка для клиента"
+        max={MAX_DISCOUNT}
+        value={discount}
+        onValueChange={setDiscount}
+        formatValue={(value) => `${value}%`}
+      />
+      <Input.Root>
+        <Input.Wrapper>
+          <Input.Field
+            type="number"
+            min={0}
+            max={MAX_DISCOUNT}
+            aria-label="Скидка для клиента, %"
+            value={discount}
+            onValueChange={(text) => {
+              const next = Number(text);
+              if (!Number.isNaN(next)) setDiscount(Math.min(MAX_DISCOUNT, Math.max(0, next)));
+            }}
+          />
+          <Input.InlineAffix side="end">%</Input.InlineAffix>
+        </Input.Wrapper>
+      </Input.Root>
     </div>
   );
 }

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

@@ -1,42 +1,18 @@
-/* Example layout: semantic tokens only. */
-
-.sizesGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-16) * 2)), 1fr));
-  align-items: end;
-  gap: var(--prime-space-6) var(--prime-space-5);
-  width: 100%;
-}
+/* Layout of the Slider scenarios: semantic tokens only. */
 
+/* hint-and-error.tsx: fields of a form column, field → field 24. */
 .column {
-  display: grid;
-  gap: var(--prime-space-5);
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
-}
-
-.pair {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--prime-panel-min-width)), 1fr));
-  align-items: end;
-  gap: var(--prime-space-6) var(--prime-space-5);
-  width: 100%;
-  max-width: var(--prime-modal-width-m);
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-6);
+  width: min(100%, var(--prime-modal-width-s));
 }
 
+/* controlled.tsx: the slider takes the row, the number field a fixed column. */
 .withInput {
   display: grid;
   grid-template-columns: minmax(0, 1fr) var(--prime-space-24);
   align-items: end;
   gap: var(--prime-space-4);
-}
-
-.card {
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
-}
-
-.settings {
-  display: grid;
-  gap: var(--prime-space-6);
+  width: min(100%, var(--prime-modal-width-s));
 }

package/src/components/slider/examples/hint-and-error.tsx

@@ -0,0 +1,33 @@
+/** A slider framed like every field: required marker, a hint, and an error in its place — `required`, `hint`, `error`, `optional`. */
+import { Slider } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function SliderHintAndErrorExample() {
+  const [budget, setBudget] = React.useState(80);
+
+  return (
+    <div className={styles.column}>
+      <Slider
+        label="Бюджет кампании, тыс. ₽"
+        required
+        showValue
+        min={0}
+        max={200}
+        step={10}
+        value={budget}
+        onValueChange={setBudget}
+        hint="Не больше 150 тыс. ₽ без согласования"
+        error={budget > 150 ? "Нужно согласование финансового отдела" : undefined}
+      />
+      <Slider
+        label="Доля показов в выходные, %"
+        optional
+        showValue
+        defaultValue={30}
+        hint="По умолчанию показы распределяются равномерно"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,6 @@
+/** A labelled slider with its current value — `label`, `showValue`. */
+import { Slider } from "prime-ui-kit";
+
+export default function SliderOverviewExample() {
+  return <Slider label="Громкость уведомлений" showValue defaultValue={60} />;
+}

package/src/components/slider/examples/range-step.tsx

@@ -1,29 +1,19 @@
-/** Custom min, max and step (including a fractional step) and a slider named only by aria-label. Use it for bounded numeric settings. */
+/** Own bounds and a coarse or fractional step; a slider without a visible label — `min`, `max`, `step`, `aria-label`. */
 import { Slider } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 export default function SliderRangeStepExample() {
   return (
-    <div className={styles.column}>
-      <Slider.Root label="Этаж" min={1} max={25} defaultValue={7} showValue />
-      <Slider.Root
-        label="Готовность, шаг 25"
-        step={25}
-        defaultValue={50}
-        showValue
-        formatValue={(v) => `${v}%`}
-      />
-      <Slider.Root
-        label="Рейтинг от"
+    <>
+      <Slider label="Готовность проекта" step={25} defaultValue={50} showValue />
+      <Slider
+        label="Минимальный рейтинг поставщика"
         min={1}
         max={5}
         step={0.5}
         defaultValue={4}
         showValue
-        formatValue={(v) => `★ ${v.toFixed(1)}`}
       />
-      <Slider.Root min={0} max={100} defaultValue={30} aria-label="Масштаб карты" />
-    </div>
+      <Slider defaultValue={30} aria-label="Масштаб карты складов" />
+    </>
   );
 }

package/src/components/slider/examples/sizes.tsx

@@ -1,16 +1,18 @@
-/** All five size tiers with a label and value: thumb, label and value text grow with the tier. Use it to match the slider to the form's control size. */
+/** Every size; the thumb, the label and the value grow with the tier — `size`. */
 import { Slider } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function SliderSizesExample() {
   return (
-    <div className={styles.sizesGrid}>
+    <>
       {SIZES.map((size) => (
-        <Slider.Root key={size} size={size} label={`Размер ${size}`} showValue defaultValue={40} />
+        <div key={size}>
+          <div>
+            <Slider size={size} label={size} showValue defaultValue={40} />
+          </div>
+        </div>
       ))}
-    </div>
+    </>
   );
 }

package/src/components/slider/examples/states.tsx

@@ -1,15 +1,18 @@
-/** Sliders at the minimum, in the middle, at the maximum and disabled. Use it as a reference for the fill and the disabled look. */
+/** The fill at both ends and a disabled slider — `disabled`. */
 import { Slider } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 export default function SliderStatesExample() {
   return (
-    <div className={styles.pair}>
-      <Slider.Root label="Минимум" showValue defaultValue={0} />
-      <Slider.Root label="Середина" showValue defaultValue={50} />
-      <Slider.Root label="Максимум" showValue defaultValue={100} />
-      <Slider.Root label="Отключено" showValue defaultValue={35} disabled />
+    <div>
+      <div>
+        <Slider label="min" showValue defaultValue={0} />
+      </div>
+      <div>
+        <Slider label="max" showValue defaultValue={100} />
+      </div>
+      <div>
+        <Slider label="disabled" showValue defaultValue={35} disabled />
+      </div>
     </div>
   );
 }

package/src/components/slider/examples/value-format.tsx

@@ -1,9 +1,7 @@
-/** showValue in the label row and formatValue for units (°C, ₽, %) that also become aria-valuetext. Use it whenever the number needs a unit. */
+/** Units in the shown value that are also read by screen readers — `formatValue`, `showValue`. */
 import { Slider } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
-const rub = new Intl.NumberFormat("ru-RU", {
+const RUB = new Intl.NumberFormat("ru-RU", {
   style: "currency",
   currency: "RUB",
   maximumFractionDigits: 0,
@@ -11,34 +9,24 @@ const rub = new Intl.NumberFormat("ru-RU", {
 
 export default function SliderValueFormatExample() {
   return (
-    <div className={styles.column}>
-      <Slider.Root label="Громкость" showValue defaultValue={64} />
-      <Slider.Root
-        label="Температура"
-        min={16}
-        max={30}
-        defaultValue={22}
+    <>
+      <Slider
+        label="Температура на складе"
+        min={2}
+        max={25}
+        defaultValue={8}
         showValue
-        formatValue={(v) => `${v} °C`}
+        formatValue={(value) => `${value} °C`}
       />
-      <Slider.Root
-        label="Бюджет в месяц"
+      <Slider
+        label="Бюджет кампании в месяц"
         min={0}
         max={200000}
         step={5000}
         defaultValue={45000}
         showValue
-        formatValue={(v) => rub.format(v)}
-      />
-      <Slider.Root
-        label="Прозрачность слоя"
-        min={0}
-        max={1}
-        step={0.05}
-        defaultValue={0.8}
-        showValue
-        formatValue={(v) => `${Math.round(v * 100)}%`}
+        formatValue={(value) => RUB.format(value)}
       />
-    </div>
+    </>
   );
 }

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

@@ -0,0 +1,23 @@
+/** Every fill color; accent by default, semantic tones when the value carries meaning — `tone`. */
+import { Slider } from "prime-ui-kit";
+
+const TONE_ROWS = [
+  ["accent", "neutral", "success"],
+  ["warning", "danger", "info"],
+] as const;
+
+export default function SliderVariantsExample() {
+  return (
+    <>
+      {TONE_ROWS.map((row) => (
+        <div key={row[0]}>
+          {row.map((tone) => (
+            <div key={tone}>
+              <Slider tone={tone} label={tone} showValue defaultValue={60} />
+            </div>
+          ))}
+        </div>
+      ))}
+    </>
+  );
+}

package/src/components/smart-filter/COMPONENT.md

@@ -0,0 +1,182 @@
+# SmartFilter
+
+**Category:** selection
+**Kind:** composite
+
+> A filter bar for lists and tables: a filter button and a search with a panel of values, applied filters as removable tags, and a "show / hide" choice for every value.
+
+## When to use
+- Narrowing a list, table or log by several fields at once (service, method, status), where the user also types free text.
+- Filters where "everything except this" matters as much as "only this": every value can be shown or hidden.
+- Many values per field (dozens of services): the panel collapses them to «Ещё N» and narrows as the user types.
+
+## When not to use
+- One field with a few options → use [SegmentedControl](../segmented-control/COMPONENT.md), [Select](../select/COMPONENT.md) or [TagSelect](../tag-select/COMPONENT.md) in the toolbar.
+- Only a text search → use [Input](../input/COMPONENT.md) with a search icon.
+- Choosing values for a form field → use [TagSelect](../tag-select/COMPONENT.md).
+- Filtering by a range (dates, price) → use [Datepicker](../datepicker/COMPONENT.md) or [Slider](../slider/COMPONENT.md); SmartFilter works on discrete values.
+
+## Import
+```tsx
+import { SmartFilter, matchesSmartFilter, resolveSmartFilterValues } from "prime-ui-kit";
+```
+
+## Anatomy
+```
+SmartFilter.Root                  state + context (flex column)
+├─ SmartFilter.Toolbar            [filter Button (count Badge)] [search Input] — the anchor of the panel
+│  └─ panel                       flush Popover as wide as the toolbar; sections split by Dividers
+│     ├─ query row                ghost Button «Искать «text»» + Kbd ↵, while typing
+│     ├─ field rows               field label · value Badges with a «−» Badge.Action · «Ещё N» Badge
+│     ├─ no matches               compact EmptyPage naming the fields with nothing found
+│     └─ footer                   hint · count · Reset Button
+└─ SmartFilter.Chips              applied filters as removable Badges · add / clear all Buttons
+```
+The toolbar and the chips are separate parts so a page can put them in different places; both only need to be inside `Root`.
+
+## API
+
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+### SmartFilter.Root
+`ref` → `HTMLDivElement`. A `<div>` (flex column) with the state and the context; sets `data-size`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `fields` | `readonly SmartFilterField[]` | — (required) | Fields of this screen, in display order; empty — only the search. Pass a stable reference. |
+| `value` | `SmartFilterValue` | — | Selection per field key, controlled: `{ include, exclude }` per field. |
+| `defaultValue` | `SmartFilterValue` | `{}` | Initial selection, uncontrolled. |
+| `onValueChange` | `(value: SmartFilterValue) => void` | — | The whole next value; keys of fields this root does not show are kept. |
+| `search` | `string` | — | Search text, controlled. |
+| `defaultSearch` | `string` | `""` | Initial search text, uncontrolled. |
+| `onSearchChange` | `(search: string) => void` | — | Every keystroke; debounce in the owner when it asks a server. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Tier of the filter button, the search, the tags and the panel. |
+| `collapsedLimit` | `number` | `12` | Values of one field shown before «Ещё N» (not while searching). |
+| `labels` | `Partial<SmartFilterLabels>` | — | Built-in strings, see Labels. |
+| `className` | `string` | — | Class on the root. |
+| `children` | `ReactNode` | — (required) | `SmartFilter.Toolbar` and `SmartFilter.Chips`, anywhere inside. |
+
+### SmartFilter.Toolbar
+`ref` → `HTMLDivElement`. A `<div>`: the filter Button (a count Badge while filters apply) and a search Input; the anchor of the panel, a flush Popover.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className` and the other attributes of the toolbar. |
+
+### SmartFilter.Chips
+`ref` → `HTMLDivElement`. A `<div>` of applied filters as removable Badges with «Добавить фильтр» and «Сбросить все»; renders nothing without filters.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className` and the other attributes of the chips row. |
+
+### SmartFilterField
+One entry of `fields`: data, not a part. Selected values missing from `options` stay visible so they can be removed.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `key` | `string` | — (required) | Key of the field in the value. |
+| `label` | `string` | — (required) | Field name in the panel and the chips. |
+| `options` | `{ value: string; label: string; icon?: ReactNode }[]` | — (required) | Values; `icon` is a decorative kit Icon before the label. |
+| `finite` | `boolean` | `true` | A fixed set: hiding every value is refused. `false` for an open set (services, users). |
+
+### matchesSmartFilter · resolveSmartFilterValues
+Helpers. `matchesSmartFilter(selection, value)` checks one value on the client (`include` empty = any, `exclude` rejects). `resolveSmartFilterValues(selection, all)` turns a fixed field into the list to ask a server for: «hide» becomes «all except», `[]` — no filter.
+
+## Variants
+
+### size
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `xs` | toolbar 28; value and filter tags 20 (tags never go below `s`) | dense table toolbars | |
+| `s` | toolbar 32; tags 20 | compact toolbars | |
+| `m` | toolbar 36; tags 24 | most pages | yes |
+| `l` | toolbar 40; tags 28 | roomier pages | |
+| `xl` | toolbar 48; tags 32 | hero search | |
+
+In the tag row «Добавить фильтр» is a pressable gray Badge of the tag tier and «Сбросить все» a
+neutral LinkButton with the tags' text size, at the end of the row: every element of the row has the
+same height and type.
+
+### field `finite`
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `true` | the «−» of the last shown value is disabled | fixed sets (method, status) | yes |
+| `false` | every value can be hidden | open sets (services, users) | |
+
+## States
+| State | Driven by | DOM |
+|---|---|---|
+| closed / open | filter button, search focus | button `aria-expanded`; the panel is a Popover below the toolbar |
+| value neutral | no selection | gray Badge |
+| value shown | press | blue Badge, `aria-pressed="true"`, `data-mode="include"` |
+| value hidden | «−», Alt+click, Shift+Enter | red Badge with «НЕ», `data-mode="exclude"`; its «−» stays visible and unhides |
+| cannot hide | last value of a `finite` field | the «−» is disabled |
+| searching | `search` | only matching values, the match in `accent-text` (a `<mark>`); fields with nothing found in a compact EmptyPage; the «Искать» row closes the panel |
+| no filters | empty value | no count on the button, no Chips |
+
+## Layout & spacing
+- The panel is a flush Popover as wide as the toolbar; every section is a full-width row with its own padding (`--prime-space-3` × `--prime-space-4`, footer `--prime-space-2` × `--prime-space-4`), Dividers run edge to edge, the field label column is `--prime-space-24`.
+- Values and chips wrap with `--prime-space-2` gaps; «Сбросить все» is pushed to the end.
+- The root is a flex column (`--prime-space-3`): Toolbar, then Chips.
+
+## Accessibility
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `Tab` | Moves through the panel values and their «−» (shown on focus). |
+| `Enter` · `Space` | Shows only this value; pressing again clears it. |
+| `Shift + Enter` | Hides the value. |
+| `Enter` · `Escape` | In the search, close the panel. |
+
+### ARIA
+- The filter button has `aria-expanded` and `aria-haspopup="dialog"`; the panel is a non-modal `role="dialog"` named by a visually hidden `labels.filter` title.
+- Values are toggle buttons with `aria-pressed`; the «−» has its own name (`labels.hideValue` / `labels.unhideValue`); a hidden value carries the «НЕ» text, so meaning is never in color alone.
+- Fields with nothing found are announced through `role="status"`.
+- Every filter tag has a remove button named by `labels.remove`.
+
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+| Key | Default | Used for |
+|---|---|---|
+| `filter` | `"Фильтр"` | Filter button and panel name. |
+| `searchPlaceholder` | `"Поиск"` | Placeholder and name of the search. |
+| `clearSearch` | `"Очистить поиск"` | Name of the search clear button. |
+| `searchText` | `"Искать «{query}»"` | The text search row while typing. |
+| `noMatches` | `"{fields} — нет совпадений"` | Fields with nothing found while typing (compact EmptyPage). |
+| `hint` | `"Нажмите значение, чтобы показать только его; «−» справа — скрыть"` | Panel footer hint. |
+| `count` | `"Фильтров: {count}"` | Panel footer counter. |
+| `reset` | `"Сбросить"` | Panel footer reset. |
+| `more` | `"Ещё {count}"` | Collapsed values of a field. |
+| `add` | `"Добавить фильтр"` | Chips row: opens the panel. |
+| `clearAll` | `"Сбросить все"` | Chips row: clears every field. |
+| `showValue` | `"Показать только {value}"` | Title of a value. |
+| `hideValue` | `"Скрыть {value}"` | Name of the «−» of a value. |
+| `unhideValue` | `"Не скрывать {value}"` | Name of the «−» of a hidden value. |
+| `not` | `"НЕ"` | Prefix of a hidden value. |
+| `chipInclude` | `"{field}: {value}"` | Text of a «show» tag. |
+| `chipExclude` | `"{field}: не {value}"` | Text of a «hide» tag. |
+| `remove` | `"Убрать фильтр «{value}»"` | Name of a tag's remove button. |
+
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | Filters above a request list: the filter button and the search, applied filters as tags, rows narrowed by the value and the text — `fields`, `value`, `search`, `matchesSmartFilter`. |
+| [sizes.tsx](examples/sizes.tsx) | Every size tier: the filter button, the search, the tags and the panel follow one tier — `size`. |
+| [many-values.tsx](examples/many-values.tsx) | An open set of twenty services, degraded ones marked with an icon, collapsed after eight; typing narrows the panel and marks the match in accent — `finite`, `icon`, `collapsedLimit`. |
+| [controlled.tsx](examples/controlled.tsx) | A saved view sets the value from outside; the selection is read back as the list to ask the server for — `value`, `onValueChange`, `resolveSmartFilterValues`. |
+| [narrow.tsx](examples/narrow.tsx) | A 320 px column: the search shrinks next to the filter button and the tags wrap under them — `size`. |
+
+## Mistakes
+- Creating `fields` inline on every render → pass a stable array (a module constant or `useMemo`).
+- A fixed field marked `finite: false` → the user can hide every value and get an empty list.
+- Filtering the list with `includes` → use `matchesSmartFilter` (empty `include` is "any", `exclude` rejects).
+- Sending `include` to a server for a hidden value of a fixed field → use `resolveSmartFilterValues`.
+- Putting `Chips` outside `SmartFilter.Root` → every part needs the root.
+- A second row of filter buttons next to the toolbar → fields belong in `fields`.
+
+## Related
+- **Built from:** [Button](../button/COMPONENT.md), [Badge](../badge/COMPONENT.md), [Input](../input/COMPONENT.md), [Popover](../popover/COMPONENT.md), [Divider](../divider/COMPONENT.md), [Kbd](../kbd/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [Typography](../typography/COMPONENT.md)
+- **See also:** [TagSelect](../tag-select/COMPONENT.md), [DataTable](../data-table/COMPONENT.md)

package/src/components/smart-filter/examples/controlled.tsx

@@ -0,0 +1,48 @@
+/** A saved view sets the value from outside; the selection is read back as the list to ask the server for — `value`, `onValueChange`, `resolveSmartFilterValues`. */
+import {
+  Button,
+  resolveSmartFilterValues,
+  SmartFilter,
+  type SmartFilterField,
+  type SmartFilterValue,
+  Typography,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const METHODS = ["GET", "POST", "PUT", "PATCH", "DELETE"];
+
+const FIELDS: SmartFilterField[] = [
+  { key: "method", label: "Метод", options: METHODS.map((v) => ({ value: v, label: v })) },
+];
+
+const ONLY_PUT: SmartFilterValue = { method: { include: ["PUT"], exclude: [] } };
+const NO_READS: SmartFilterValue = { method: { include: [], exclude: ["GET", "POST"] } };
+
+export default function SmartFilterControlledExample() {
+  const [value, setValue] = React.useState<SmartFilterValue>({});
+
+  return (
+    <div className={styles.stack}>
+      <SmartFilter.Root fields={FIELDS} value={value} onValueChange={setValue}>
+        <SmartFilter.Toolbar />
+        <SmartFilter.Chips />
+      </SmartFilter.Root>
+      <div className={styles.views}>
+        <Button.Root variant="soft" tone="neutral" size="s" onClick={() => setValue(ONLY_PUT)}>
+          Только PUT
+        </Button.Root>
+        <Button.Root variant="soft" tone="neutral" size="s" onClick={() => setValue(NO_READS)}>
+          Без GET и POST
+        </Button.Root>
+        <Button.Root variant="ghost" tone="neutral" size="s" onClick={() => setValue({})}>
+          Сбросить
+        </Button.Root>
+      </div>
+      <Typography as="span" variant="code" tone="secondary">
+        {`method: ${JSON.stringify(resolveSmartFilterValues(value.method, METHODS))}`}
+      </Typography>
+    </div>
+  );
+}

package/src/components/smart-filter/examples/examples.module.css

@@ -0,0 +1,56 @@
+/* Layout of the SmartFilter scenarios: semantic tokens only. */
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-4);
+  width: 100%;
+  min-width: 0;
+}
+
+/* sizes.tsx: one tier per block, its caption right under it, blocks apart. */
+.sizes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-8);
+  width: 100%;
+  min-width: 0;
+}
+
+.size {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--prime-space-2);
+  min-width: 0;
+}
+
+.size > :first-child {
+  align-self: stretch;
+}
+
+/* A request row in the list: method, route (takes the room), service. */
+.request {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-space-3);
+  width: 100%;
+  min-width: 0;
+}
+
+.route {
+  flex: 1;
+  min-width: 0;
+}
+
+.views {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--prime-space-2);
+}
+
+/* 320 px: the smallest supported viewport. */
+.narrow {
+  width: min(100%, calc(var(--prime-space-20) * 4));
+  min-width: 0;
+}