prime-ui-kit 0.9.0 → 0.9.2

package/src/components/select/examples/with-badge.tsx

@@ -1,47 +0,0 @@
-/** Options with Select.ItemIcon and a Select.Badge in the trigger whose color follows the picked value. Use it when the chosen option carries a status. */
-import { IconLock, IconMail, IconSearch, type PaletteColor, Select } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const STATUS: Record<string, { text: string; color: PaletteColor }> = {
-  public: { text: "Открыт", color: "green" },
-  link: { text: "По ссылке", color: "orange" },
-  private: { text: "Закрыт", color: "gray" },
-};
-
-export default function SelectWithBadgeExample() {
-  const [access, setAccess] = React.useState("public");
-  const status = STATUS[access];
-
-  return (
-    <div className={styles.narrow}>
-      <Select.Root label="Доступ к проекту" value={access} onValueChange={setAccess}>
-        <Select.Trigger>
-          <Select.Value />
-          {status ? <Select.Badge color={status.color}>{status.text}</Select.Badge> : null}
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="public">
-            <Select.ItemIcon>
-              <IconSearch />
-            </Select.ItemIcon>
-            Виден в поиске
-          </Select.Item>
-          <Select.Item value="link">
-            <Select.ItemIcon>
-              <IconMail />
-            </Select.ItemIcon>
-            Только по приглашению
-          </Select.Item>
-          <Select.Item value="private">
-            <Select.ItemIcon>
-              <IconLock />
-            </Select.ItemIcon>
-            Только участники
-          </Select.Item>
-        </Select.Content>
-      </Select.Root>
-    </div>
-  );
-}

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

@@ -1,6 +0,0 @@
-/** A single labelled slider with its value. Use it to check the track and thumb on canvas, cards and floating layers. */
-import { Slider } from "prime-ui-kit";
-
-export default function SliderBasicExample() {
-  return <Slider.Root label="Громкость" showValue defaultValue={60} />;
-}

package/src/components/slider/examples/display-settings.tsx

@@ -1,41 +0,0 @@
-/** A display settings card with formatted sliders where an «auto brightness» switch disables the brightness slider. Use it for settings panels with dependent controls. */
-import { Card, Slider, Switch } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-export default function SliderDisplaySettingsExample() {
-  const [auto, setAuto] = React.useState(false);
-
-  return (
-    <Card.Root variant="panel" className={styles.card}>
-      <Card.SectionHeader>
-        <Card.SectionTitle>Экран и звук</Card.SectionTitle>
-      </Card.SectionHeader>
-      <Card.Body>
-        <div className={styles.settings}>
-          <Switch.Root checked={auto} onCheckedChange={setAuto}>
-            <Switch.Label>Автояркость</Switch.Label>
-            <Switch.Hint>Подстраивается под освещение.</Switch.Hint>
-          </Switch.Root>
-          <Slider.Root
-            label="Яркость"
-            defaultValue={70}
-            disabled={auto}
-            showValue
-            formatValue={(v) => `${v}%`}
-          />
-          <Slider.Root
-            label="Размер текста"
-            min={12}
-            max={24}
-            defaultValue={16}
-            showValue
-            formatValue={(v) => `${v} px`}
-          />
-          <Slider.Root label="Громкость уведомлений" defaultValue={40} showValue />
-        </div>
-      </Card.Body>
-    </Card.Root>
-  );
-}

package/src/components/stepper/examples/wizard.tsx

@@ -1,62 +0,0 @@
-/** Setup wizard: a vertical stepper next to the step form with Back / Next; far steps stay disabled until the previous one is done. Use for multi-step onboarding and setup flows. */
-import { Button, Input, Stepper, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const steps = [
-  { title: "Компания", description: "Название и ИНН", field: "Название компании" },
-  { title: "Контакты", description: "Кто будет администратором", field: "Электронная почта" },
-  { title: "Тариф", description: "Можно сменить позже", field: "Промокод" },
-];
-
-export default function StepperWizardExample() {
-  const [step, setStep] = React.useState(0);
-  const last = steps.length - 1;
-  const current = steps[step];
-
-  return (
-    <div className={styles.wizard}>
-      <Stepper.Root value={step} onValueChange={setStep}>
-        {steps.map((s, i) => (
-          <Stepper.Step key={s.title} disabled={i > step + 1}>
-            <Stepper.Indicator />
-            <Stepper.Content>
-              <Stepper.Title>{s.title}</Stepper.Title>
-              <Stepper.Description>{s.description}</Stepper.Description>
-            </Stepper.Content>
-          </Stepper.Step>
-        ))}
-      </Stepper.Root>
-
-      <div className={styles.form}>
-        <Typography.Root as="h3" variant="title-m">
-          Шаг {step + 1} из {steps.length}: {current.title}
-        </Typography.Root>
-        <Input.Root
-          key={current.field}
-          label={current.field}
-          required={step < last}
-          optional={step === last}
-        >
-          <Input.Wrapper>
-            <Input.Field />
-          </Input.Wrapper>
-        </Input.Root>
-        <div className={styles.actions}>
-          <Button.Root
-            variant="outline"
-            tone="neutral"
-            disabled={step === 0}
-            onClick={() => setStep((s) => s - 1)}
-          >
-            Назад
-          </Button.Root>
-          <Button.Root onClick={() => setStep((s) => Math.min(s + 1, last))}>
-            {step === last ? "Подключить" : "Далее"}
-          </Button.Root>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/switch/examples/notification-settings.tsx

@@ -1,37 +0,0 @@
-/** A notifications card where a master switch disables the other channels and an unavailable channel explains why. Use it for dependent settings. */
-
-import { Card, Switch } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-export default function SwitchNotificationSettingsExample() {
-  const [enabled, setEnabled] = React.useState(true);
-
-  return (
-    <Card.Root variant="panel" className={styles.card}>
-      <Card.SectionHeader>
-        <Card.SectionTitle>Уведомления</Card.SectionTitle>
-      </Card.SectionHeader>
-      <Card.Body>
-        <div className={styles.column}>
-          <Switch.Root checked={enabled} onCheckedChange={setEnabled}>
-            <Switch.Label>Присылать уведомления</Switch.Label>
-            <Switch.Hint>Отключает все каналы разом.</Switch.Hint>
-          </Switch.Root>
-          <Switch.Root defaultChecked disabled={!enabled}>
-            <Switch.Label>Новые заказы</Switch.Label>
-            <Switch.Hint>Пуш и письмо сразу после оплаты.</Switch.Hint>
-          </Switch.Root>
-          <Switch.Root defaultChecked disabled={!enabled}>
-            <Switch.Label>Отзывы покупателей</Switch.Label>
-          </Switch.Root>
-          <Switch.Root disabled>
-            <Switch.Label>SMS</Switch.Label>
-            <Switch.Hint>Подтвердите номер телефона в профиле.</Switch.Hint>
-          </Switch.Root>
-        </div>
-      </Card.Body>
-    </Card.Root>
-  );
-}

package/src/components/switch/examples/on-off.tsx

@@ -1,15 +0,0 @@
-/** An off and an on switch with labels. Use it to check how the track reads on canvas, cards and floating layers. */
-import { Switch } from "prime-ui-kit";
-
-export default function SwitchOnOffExample() {
-  return (
-    <>
-      <Switch.Root>
-        <Switch.Label>Выключен</Switch.Label>
-      </Switch.Root>
-      <Switch.Root defaultChecked>
-        <Switch.Label>Включён</Switch.Label>
-      </Switch.Root>
-    </>
-  );
-}

package/src/components/switch/examples/validation.tsx

@@ -1,19 +0,0 @@
-/** A normal switch with a hint next to an invalid one with Switch.Error. Use it when turning a setting on is required to continue. */
-import { Switch } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function SwitchValidationExample() {
-  return (
-    <div className={styles.grid}>
-      <Switch.Root defaultChecked>
-        <Switch.Label>Резервное копирование</Switch.Label>
-        <Switch.Hint>Каждую ночь в 03:00.</Switch.Hint>
-      </Switch.Root>
-      <Switch.Root>
-        <Switch.Label>Согласие на обработку данных</Switch.Label>
-        <Switch.Error>Без согласия аккаунт не создать.</Switch.Error>
-      </Switch.Root>
-    </div>
-  );
-}

package/src/components/tabs/examples/horizontal.tsx

@@ -1,30 +0,0 @@
-/** Horizontal tabs: text over a hairline with a 2px accent bar under the active label that slides on change. Use to switch between panels of one screen. */
-import { Tabs, Typography } from "prime-ui-kit";
-
-const panels = [
-  { value: "overview", label: "Обзор", text: "Сводка по магазину за выбранный период." },
-  { value: "orders", label: "Заказы", text: "Последние заказы и их статусы." },
-  { value: "reviews", label: "Отзывы", text: "Новые отзывы покупателей." },
-  { value: "settings", label: "Настройки магазина", text: "Название, валюта и способы доставки." },
-];
-
-export default function TabsHorizontalExample() {
-  return (
-    <Tabs.Root defaultValue="overview">
-      <Tabs.List aria-label="Магазин">
-        {panels.map((p) => (
-          <Tabs.Trigger key={p.value} value={p.value}>
-            {p.label}
-          </Tabs.Trigger>
-        ))}
-      </Tabs.List>
-      {panels.map((p) => (
-        <Tabs.Panel key={p.value} value={p.value}>
-          <Typography.Root variant="body-m" tone="secondary">
-            {p.text}
-          </Typography.Root>
-        </Tabs.Panel>
-      ))}
-    </Tabs.Root>
-  );
-}

package/src/components/tabs/examples/vertical.tsx

@@ -1,101 +0,0 @@
-/** Vertical settings tabs inside a card: pill items on the side, section heading aligned with the first tab; stacks on top below 600px. Use for settings pages with several sections. */
-import { Bell, Trash2, UserRound } from "lucide-react";
-import { Button, Input, Switch, Tabs, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function TabsVerticalExample() {
-  return (
-    <div className={styles.card}>
-      <Tabs.Root orientation="vertical" defaultValue="notifications">
-        <Tabs.List aria-label="Настройки">
-          <Tabs.Trigger value="profile">
-            <Tabs.Icon>
-              <UserRound />
-            </Tabs.Icon>
-            <Tabs.Label>Профиль</Tabs.Label>
-          </Tabs.Trigger>
-          <Tabs.Trigger value="notifications">
-            <Tabs.Icon>
-              <Bell />
-            </Tabs.Icon>
-            <Tabs.Label>Уведомления</Tabs.Label>
-          </Tabs.Trigger>
-          <Tabs.Trigger value="danger">
-            <Tabs.Icon>
-              <Trash2 />
-            </Tabs.Icon>
-            <Tabs.Label>Удаление</Tabs.Label>
-          </Tabs.Trigger>
-        </Tabs.List>
-
-        <Tabs.Panel value="profile">
-          <div className={styles.section}>
-            <div className={styles.sectionHead}>
-              <Typography.Root as="h3" variant="title-s">
-                Профиль
-              </Typography.Root>
-            </div>
-            <div className={styles.form}>
-              <Input.Root label="Имя">
-                <Input.Wrapper>
-                  <Input.Field defaultValue="Анна Соколова" />
-                </Input.Wrapper>
-              </Input.Root>
-              <Input.Root label="Должность" optional>
-                <Input.Wrapper>
-                  <Input.Field placeholder="Например, продакт-менеджер" />
-                </Input.Wrapper>
-              </Input.Root>
-              <div>
-                <Button.Root>Сохранить</Button.Root>
-              </div>
-            </div>
-          </div>
-        </Tabs.Panel>
-
-        <Tabs.Panel value="notifications">
-          <div className={styles.section}>
-            <div className={styles.sectionHead}>
-              <Typography.Root as="h3" variant="title-s">
-                Уведомления
-              </Typography.Root>
-            </div>
-            <div className={styles.rows}>
-              <Switch.Root defaultChecked>
-                <Switch.Label>Письма о новых заказах</Switch.Label>
-                <Switch.Hint>Сразу после оформления заказа.</Switch.Hint>
-              </Switch.Root>
-              <Switch.Root>
-                <Switch.Label>Еженедельная сводка</Switch.Label>
-                <Switch.Hint>По понедельникам в 9:00.</Switch.Hint>
-              </Switch.Root>
-              <Switch.Root defaultChecked>
-                <Switch.Label>Push-уведомления</Switch.Label>
-                <Switch.Hint>В браузере, пока открыта вкладка.</Switch.Hint>
-              </Switch.Root>
-            </div>
-          </div>
-        </Tabs.Panel>
-
-        <Tabs.Panel value="danger">
-          <div className={styles.section}>
-            <div className={styles.sectionHead}>
-              <Typography.Root as="h3" variant="title-s">
-                Удаление аккаунта
-              </Typography.Root>
-            </div>
-            <Typography.Root variant="body-m" tone="secondary">
-              Аккаунт и все данные будут удалены без возможности восстановления.
-            </Typography.Root>
-            <div>
-              <Button.Root variant="outline" tone="danger">
-                Удалить аккаунт
-              </Button.Root>
-            </div>
-          </div>
-        </Tabs.Panel>
-      </Tabs.Root>
-    </div>
-  );
-}

package/src/components/tag/COMPONENT.md

@@ -1,179 +0,0 @@
-# Tag
-
-**Category:** data-display
-
-> A chip for a selected value, applied filter or keyword, with an optional remove button and a palette color.
-
-## When to use
-- Applied filters above a list or table, each one removable.
-- Selected values (cities, people, keywords) shown as chips.
-- Keywords or categories of an item, optionally colored by category.
-
-## When not to use
-- A read-only status or counter → use [Badge](../badge/COMPONENT.md).
-- Choosing several values from a list in a field → use [TagSelect](../tag-select/COMPONENT.md) (it renders tags itself).
-- A toggle or a choice between options → use [ButtonGroup](../button-group/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md) or [Checkbox](../checkbox/COMPONENT.md).
-- A keyboard shortcut → use [Kbd](../kbd/COMPONENT.md).
-
-## Import
-```tsx
-import { Tag } from "prime-ui-kit";
-```
-
-## Anatomy
-```
-Tag.Root              span: fill, tier dimensions
-├── body              text and Tag.Icon (ellipsis area)
-│   ├── Tag.Icon      optional leading icon
-│   └── text
-└── remove button     rendered only with onRemove
-```
-
-## API
-
-### Tag.Root
-Forwards `ref` to the root `<span>`. No `asChild`.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `color` | `"gray" \| "blue" \| "green" \| "orange" \| "red" \| "yellow" \| "purple" \| "sky" \| "pink" \| "teal"` (`PaletteColor`) | `"gray"` | Palette hue of the fill and text. |
-| `variant` | `"soft" \| "outline"` | `"soft"` | Treatment. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` (`ControlSize`) | — (inherited, else `"m"`) | Badge tier. Without it the tag follows the surrounding control one tier down; outside a control it is `m`. |
-| `onRemove` | `() => void` | — | Shows the remove button; called on its click. |
-| `labels` | `Partial<TagLabels>` | `{ remove: "Удалить" }` | System strings, see Accessibility. |
-| `disabled` | `boolean` | — | Muted look, `aria-disabled` on the root, remove button natively disabled. |
-| `children` | `ReactNode` | — | Text and an optional leading `Tag.Icon`. |
-| `className` | `string` | — | Extra class on the root. |
-
-+ native `<span>` props (`HTMLAttributes<HTMLSpanElement>`).
-
-### Tag.Icon
-No ref forwarding; does not accept other native props.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — (required) | The icon; inherits the tag text color, sized to the tag tier. |
-| `className` | `string` | — | Extra class on the wrapper. |
-
-### TagLabels
-| Key | Default | Description |
-|---|---|---|
-| `remove` | `"Удалить"` | Accessible name of the remove button. |
-
-## Variants
-
-### variant
-| Value | Looks like | Use when | Default |
-|---|---|---|---|
-| `soft` | Light palette fill (`palette.<hue>.soft`), hue text, no outline | Selected values and applied filters — the normal case | yes |
-| `outline` | Transparent fill, 1px inset line in the hue text at 32%, hue text | Keywords on a filled area, or secondary tags next to soft ones | |
-
-`solid` and `ghost` are not part of Tag (the type allows only `soft | outline`).
-
-### color
-| Value | Looks like | Use when | Default |
-|---|---|---|---|
-| `gray` | Neutral gray wash and text | Plain values and filters | yes |
-| `blue` | Blue | Category hue | |
-| `green` | Green | Category hue | |
-| `orange` | Orange | Category hue | |
-| `red` | Red | Category hue | |
-| `yellow` | Yellow | Category hue | |
-| `purple` | Purple | Category hue | |
-| `sky` | Sky blue | Category hue | |
-| `pink` | Pink | Category hue | |
-| `teal` | Teal | Category hue | |
-
-Use hues only to group tags by category (one hue per category, consistent across screens). Applied filters stay `gray`.
-
-### size
-| Value | Looks like | Use when | Default |
-|---|---|---|---|
-| `xs` | 16px high, padding 4, text 12, icon 12 | Inside `xs`/`s` controls | |
-| `s` | 20px high, padding 6, text 12, icon 12 | Inside `m` controls (inherited automatically), dense rows | |
-| `m` | 24px high, padding 8, text 12, icon 14 | Standalone filter rows and lists | yes (outside controls) |
-| `l` | 28px high, padding 10, text 13, icon 16 | Larger filter panels | |
-| `xl` | 32px high, padding 12, text 14, icon 16 | Large headers | |
-
-### removable (visual flag, from `onRemove`)
-| Value | Looks like | Use when | Default |
-|---|---|---|---|
-| no `onRemove` | Text only | Read-only values | yes |
-| `onRemove` set | Trailing × button the size of the tier icon, end padding reduced to 4px (`data-removable`) | The user can drop the value | |
-
-### disabled (visual flag)
-| Value | Looks like | Use when | Default |
-|---|---|---|---|
-| `false` / unset | Variant colors | Normal | yes |
-| `true` | Muted fill (`fill-muted`), disabled text, no outline; remove button disabled | The value cannot be changed right now | |
-
-**Combinations**
-- Recommended: `soft` `gray` + `onRemove` for applied filters; `soft` hue for categorized keywords.
-- Allowed but rare: `outline` hue for keywords on a tinted area.
-- Avoid: many different hues in one filter row (noise); `disabled` + `onRemove` when the value will never be removable (drop the button instead).
-
-**Sizes**
-Same tiers as Badge and Kbd. Without `size` inside a control: `xs`/`s` → `xs`, `m` → `s`, `l` → `m`, `xl` → `l`. Outside a control: `m` (24px).
-
-**Hierarchy**
-Tags are secondary content: put the "Сбросить все" action as a `ghost` `s` Button next to them, not as another tag.
-
-## States
-| State / attribute | Driven by | Notes |
-|---|---|---|
-| `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 tier | One step down from the control when inherited. Drives dimensions. |
-| `data-removable="true"` | `onRemove` | Remove button rendered. |
-| `data-disabled="true"` + `aria-disabled` | `disabled` | Muted look; remove button `disabled`. |
-| remove hover | pointer over × | `fill-subtle-active` wash under the icon. |
-| remove focus-visible | keyboard focus on × | Focus ring around the button. |
-
-Tag has no internal state: the list of tags is controlled by the parent (remove the item in `onRemove`).
-
-## Layout & spacing
-- `width: fit-content`, never stretches in a column; `max-width: 100%`, text does not wrap.
-- A row of tags: flex-wrap with `gap: var(--prime-space-2)`.
-- Filter panel: title row and tag row separated by `--prime-space-3`.
-- The × hit area extends 4px (`--prime-space-1`) beyond the visual icon.
-
-## Accessibility
-- The tag itself is static text and not focusable; only the remove `<button type="button">` takes focus.
-- The remove button needs a unique name: pass ``labels={{ remove: `Убрать фильтр «${label}»` }}`` so screen readers do not hear several identical «Удалить».
-- After removing, move focus to a neighbouring tag or to the field the filter came from.
-- `labels.remove` — default `"Удалить"`.
-
-## Examples
-| File | Scenario | When to use this pattern |
-|---|---|---|
-| [sizes.tsx](examples/sizes.tsx) | Removable tags in tiers xs–xl | Matching the density of a row |
-| [colors.tsx](examples/colors.tsx) | Ten hues in `soft` (removable) and `outline` | Categorized tags |
-| [states.tsx](examples/states.tsx) | Read-only, removable, disabled, disabled + removable | Choosing the state of a tag |
-| [with-icon.tsx](examples/with-icon.tsx) | Leading `Tag.Icon`, with and without remove | Value types (email, privacy) |
-| [surfaces.tsx](examples/surfaces.tsx) | Tags on canvas, card and floating layer | Checking contrast on any surface |
-| [applied-filters.tsx](examples/applied-filters.tsx) | Filter panel with per-tag remove and "Сбросить все" | Filters above lists and tables |
-
-```tsx
-import { Tag } from "prime-ui-kit";
-
-export function CityFilter({ onRemove }: { onRemove: () => void }) {
-  return (
-    <Tag.Root labels={{ remove: "Убрать фильтр «Москва»" }} onRemove={onRemove}>
-      Москва
-    </Tag.Root>
-  );
-}
-```
-
-## Mistakes
-- Tag as a read-only status "Оплачен" → use `Badge`.
-- Several tags with the default «Удалить» → pass `labels.remove` with the tag text.
-- A custom × button next to a tag → use `onRemove`.
-- `variant="solid"` on Tag → not supported; use `soft` or `outline`, or `Badge` for emphasis.
-- `<Tag.Root size="m">` inside a control → drop `size`, the tier is inherited one step down.
-
-## Related
-- [Badge](../badge/COMPONENT.md) — read-only labels with the same tiers.
-- [TagSelect](../tag-select/COMPONENT.md) — multi-select field built on tags.
-- [Kbd](../kbd/COMPONENT.md) — keys and shortcuts.

package/src/components/tag/examples/colors.tsx

@@ -1,49 +0,0 @@
-/** Palette hues in `soft` (default) and `outline`, with and without the remove button. Use a hue to group tags by category; keep `gray` for plain values. */
-import { type PaletteColor, Tag, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const colors: PaletteColor[] = [
-  "gray",
-  "blue",
-  "sky",
-  "teal",
-  "green",
-  "yellow",
-  "orange",
-  "red",
-  "pink",
-  "purple",
-];
-
-export default function TagColorsExample() {
-  return (
-    <div className={styles.matrix}>
-      <Typography.Root as="span" variant="caption" tone="muted">
-        soft
-      </Typography.Root>
-      <div className={styles.tags}>
-        {colors.map((color) => (
-          <Tag.Root
-            key={color}
-            color={color}
-            labels={{ remove: `Убрать «${color}»` }}
-            onRemove={() => undefined}
-          >
-            {color}
-          </Tag.Root>
-        ))}
-      </div>
-      <Typography.Root as="span" variant="caption" tone="muted">
-        outline
-      </Typography.Root>
-      <div className={styles.tags}>
-        {colors.map((color) => (
-          <Tag.Root key={color} variant="outline" color={color}>
-            {color}
-          </Tag.Root>
-        ))}
-      </div>
-    </div>
-  );
-}

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

@@ -1,47 +0,0 @@
-.sizes {
-  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);
-}
-
-.matrix {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: center;
-  column-gap: var(--prime-space-4);
-  row-gap: var(--prime-space-3);
-  width: 100%;
-}
-
-.tags {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--prime-space-2);
-}
-
-.filters {
-  display: grid;
-  gap: var(--prime-space-3);
-  width: 100%;
-  max-width: var(--prime-modal-width-m);
-  padding: var(--prime-card-padding-m);
-  border-radius: var(--prime-card-radius);
-  background: var(--prime-color-card-bg);
-}
-
-.filtersHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--prime-space-3);
-}

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

@@ -1,23 +0,0 @@
-/** Removable tags in the five badge tiers: 16 · 20 · 24 · 28 · 32 px, default `m`. Use to match a tag to the density of its row. */
-import { type ControlSize, Tag, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const sizes: ControlSize[] = ["xs", "s", "m", "l", "xl"];
-
-export default function TagSizesExample() {
-  return (
-    <div className={styles.sizes}>
-      {sizes.map((size) => (
-        <div key={size} className={styles.sizeCell}>
-          <Tag.Root labels={{ remove: "Убрать «Москва»" }} size={size} onRemove={() => undefined}>
-            Москва
-          </Tag.Root>
-          <Typography.Root as="span" variant="caption" tone="muted">
-            {size}
-          </Typography.Root>
-        </div>
-      ))}
-    </div>
-  );
-}