prime-ui-kit 0.10.0 → 0.11.1

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

@@ -0,0 +1,89 @@
+/* Layout of the Skeleton scenarios: semantic tokens only. */
+
+.card {
+  width: min(100%, calc(var(--prime-space-24) * 3.5));
+}
+
+.content {
+  display: grid;
+  gap: var(--prime-space-4);
+}
+
+.cover {
+  height: calc(var(--prime-space-24) + var(--prime-space-12));
+}
+
+.author {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-space-3);
+}
+
+.form {
+  display: grid;
+  gap: var(--prime-space-5);
+  width: min(100%, calc(var(--prime-space-24) * 4));
+}
+
+.field {
+  display: grid;
+  gap: var(--prime-space-2);
+}
+
+/* A label is shorter than its field. */
+.label {
+  width: 40%;
+}
+
+/* The placeholder of the submit button: a button, not a full-width field. */
+.button {
+  width: calc(var(--prime-space-24) + var(--prime-space-8));
+}
+
+.stack {
+  display: grid;
+  justify-items: start;
+  gap: var(--prime-space-4);
+  width: min(100%, calc(var(--prime-space-24) * 5));
+}
+
+.stack > * {
+  justify-self: stretch;
+}
+
+.stack > :first-child {
+  justify-self: start;
+}
+
+.list {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* Data rows and their placeholders share one row geometry, so the swap does not move anything. */
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--prime-space-4);
+  padding-block: var(--prime-space-3);
+  border-bottom: var(--prime-border-width) solid var(--prime-color-border-subtle);
+}
+
+.row:last-child {
+  border-bottom: 0;
+}
+
+.payer {
+  width: 55%;
+}
+
+.amount {
+  width: 20%;
+}
+
+.sum {
+  font-variant-numeric: tabular-nums;
+}

package/dist/skill/reference/components/skeleton/examples/form.tsx

@@ -0,0 +1,20 @@
+/** A settings form while its values load: labels are short text lines, fields and the button are controls of the same tier — `shape`. */
+import { Skeleton } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const FIELDS = ["company", "inn", "email"];
+
+export default function SkeletonFormExample() {
+  return (
+    <div className={styles.form} aria-busy="true">
+      {FIELDS.map((field) => (
+        <div key={field} className={styles.field}>
+          <Skeleton size="s" className={styles.label} />
+          <Skeleton shape="control" />
+        </div>
+      ))}
+      <Skeleton shape="control" className={styles.button} />
+    </div>
+  );
+}

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

@@ -0,0 +1,21 @@
+/** A project card while it loads: the cover, the author and two lines of text take the room of the real content — `shape`, `lines`. */
+import { Card, Skeleton } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function SkeletonOverviewExample() {
+  return (
+    <Card.Root variant="panel" className={styles.card} aria-busy="true">
+      <Card.Body>
+        <div className={styles.content}>
+          <Skeleton shape="block" className={styles.cover} />
+          <div className={styles.author}>
+            <Skeleton shape="circle" />
+            <Skeleton />
+          </div>
+          <Skeleton lines={2} />
+        </div>
+      </Card.Body>
+    </Card.Root>
+  );
+}

package/dist/skill/reference/components/skeleton/examples/sizes.tsx

@@ -0,0 +1,24 @@
+/** Every tier of a text line, a control and an avatar circle: the placeholder matches the content of that tier — `size`, `shape`. */
+import { Skeleton, Typography } from "prime-ui-kit";
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
+const SHAPES = ["text", "control", "circle"] as const;
+
+export default function SkeletonSizesExample() {
+  return (
+    <>
+      {SHAPES.map((shape) => (
+        <div key={shape}>
+          {SIZES.map((size) => (
+            <div key={size}>
+              <Skeleton shape={shape} size={size} />
+              <Typography as="span" variant="caption" tone="muted">
+                {`${shape} · ${size}`}
+              </Typography>
+            </div>
+          ))}
+        </div>
+      ))}
+    </>
+  );
+}

package/dist/skill/reference/components/skeleton/examples/with-crossfade.tsx

@@ -0,0 +1,68 @@
+/** A list that reloads: placeholder rows of the same geometry cross-fade into the data, nothing jumps — `Crossfade`, `state`. */
+import { Button, Card, Crossfade, Icon, Skeleton, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const PAYMENTS = [
+  { id: "p1", payer: "ООО «Гранит»", amount: "94 750 ₽" },
+  { id: "p2", payer: "ИП Орлов Д. С.", amount: "18 000 ₽" },
+  { id: "p3", payer: "АО «Альфа Медиа»", amount: "380 000 ₽" },
+];
+
+const LOAD_MS = 1500;
+
+export default function SkeletonWithCrossfadeExample() {
+  const [loading, setLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    if (!loading) return;
+    const id = window.setTimeout(() => setLoading(false), LOAD_MS);
+    return () => window.clearTimeout(id);
+  }, [loading]);
+
+  return (
+    <div className={styles.stack}>
+      <Button.Root
+        variant="soft"
+        tone="neutral"
+        disabled={loading}
+        onClick={() => setLoading(true)}
+      >
+        <Button.Icon>
+          <Icon name="action.refresh" />
+        </Button.Icon>
+        Обновить
+      </Button.Root>
+
+      <Card.Root variant="panel">
+        <Card.Header>
+          <Card.Title as="h3">Поступления за сегодня</Card.Title>
+        </Card.Header>
+        <Card.Body>
+          <Crossfade state={loading ? "loading" : "ready"} aria-busy={loading}>
+            <ul className={styles.list}>
+              {PAYMENTS.map((payment) =>
+                loading ? (
+                  <li key={payment.id} className={styles.row}>
+                    <Skeleton className={styles.payer} />
+                    <Skeleton className={styles.amount} />
+                  </li>
+                ) : (
+                  <li key={payment.id} className={styles.row}>
+                    <Typography as="span" variant="body-m">
+                      {payment.payer}
+                    </Typography>
+                    <Typography as="span" variant="body-m" className={styles.sum}>
+                      {payment.amount}
+                    </Typography>
+                  </li>
+                ),
+              )}
+            </ul>
+          </Crossfade>
+        </Card.Body>
+      </Card.Root>
+    </div>
+  );
+}

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

@@ -0,0 +1,186 @@
+# Slider
+
+**Category:** selection
+**Kind:** control
+
+> A slider for picking an approximate numeric value within a range, with an optional label and value readout.
+
+## When to use
+- An approximate value where the position matters more than the exact number: volume, brightness, opacity, a price ceiling.
+- A bounded numeric setting with a coarse `step` (25%, 0.5 stars).
+- Next to a number input when users need both dragging and exact entry (controlled, shared state).
+
+## When not to use
+- An exact number that users type (quantity, amount) → use [Input](../input/COMPONENT.md) with `type="number"` instead.
+- One of a few named levels (low / medium / high) → use [SegmentedControl](../segmented-control/COMPONENT.md) or [Radio](../radio/COMPONENT.md) instead.
+- A two-handle range (from–to) → not supported; use two inputs.
+- On/off → use [Switch](../switch/COMPONENT.md) instead.
+
+## Import
+```tsx
+import { Slider } from "prime-ui-kit";
+```
+
+## Anatomy
+```
+Slider                 field frame (FieldFrame): className, ref, rest
+├─ label row (only with `label` or `showValue`)
+│  ├─ Label            from `label`, linked to the input; `required` / `optional` markers
+│  └─ <output>         from `showValue`, formatted value
+├─ control
+│  ├─ <input type="range">   transparent, on top: pointer, keyboard, a11y; `id`, `aria-label`
+│  ├─ track · fill            visual, aria-hidden
+│  └─ thumb                   visual, aria-hidden
+└─ support row         `hint` | `error` (same slot)
+```
+
+## API
+
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+### Slider
+`ref` → `HTMLDivElement` (the field frame). A framed field: the label row with the value, a native `<input type="range">` over the visual track, then the hint or the error. `id` and `aria-label` go to the range input.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `number` | — | Controlled value; clamped to `min`…`max`. |
+| `defaultValue` | `number` | `min` | Initial value when uncontrolled. |
+| `onValueChange` | `(value: number) => void` | — | Called with the new number while dragging and on every key step. |
+| `onCommit` | `(value: number) => void \| Promise<void>` | — | The value the person settled on, once after a drag or a key step. Save here, not in `onValueChange`. Return the save's promise: the thumb dims until it settles; on reject the value goes back. |
+| `name` | `string` | — | Name of the range input, submitted with a form. |
+| `min` | `number` | `0` | Lower bound. |
+| `max` | `number` | `100` | Upper bound. |
+| `step` | `number` | `1` | Step of the keyboard and of the snapping; fractions allowed. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier of the track thickness T (thumb 4.5T × 3T), the label, the value and the hint. Without it the tier of its host (a form, a panel), else `m`. |
+| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"accent"` | Color of the filled part of the track. |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | `vertical` — the track stands upright, minimum at the bottom: a level beside a button, a mixer column. |
+| `disabled` | `boolean` | — | Muted track and thumb, dimmed label and value, no interaction. |
+| `label` | `ReactNode` | — | Visible label linked to the range input (`<label htmlFor>`). Without it, set `aria-label`. |
+| `required` | `boolean` | — | Red `*` after the label (`aria-hidden`); a range always has a value, so there is no native `required`. |
+| `optional` | `boolean` | — | Muted marker right after the label text (`labels.optional`). |
+| `hint` | `ReactNode` | — | Help text under the track (`aria-describedby`). Hidden while `error` is shown. |
+| `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
+| `invalid` | `boolean` | — | `aria-invalid` on the range input and a danger focus ring on the thumb. A non-empty `error` implies it. |
+| `showValue` | `boolean` | `false` | Shows the current value at the end of the label row (tabular numbers, `aria-hidden` — the input announces it). |
+| `formatValue` | `(value: number) => string` | — | Formats the shown value and `aria-valuetext` (units, currency). |
+| `id` | `string` | — | Id of the range input (generated when omitted); hint id is `<id>-hint`, error id is `<id>-error`. |
+| `aria-label` | `string` | — | Accessible name when there is no visible `label`. |
+| `aria-describedby` | `string` | — | Merged before the hint / error ids on the range input. |
+| `labels` | `Partial<SliderLabels>` | — | Built-in strings, see Labels. |
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "id" \| "children" \| "defaultValue" \| "defaultChecked" \| "onChange">` | — | `className`, `style` and the other attributes of the field frame `<div>`. |
+
+## Variants
+No `variant` / `color`.
+
+### size
+Everything derives from the tier track thickness T (`--prime-control-<tier>-track`, shared with ProgressBar): the thumb is a 4.5T × 3T capsule, so the control scales as one shape.
+
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `xs` | 4px track, 18×12 thumb, 12/16 label | dense filter panels | |
+| `s` | 5px track, 22.5×15 thumb, 12/16 label | compact side panels | |
+| `m` | 6px track, 27×18 thumb, 13/20 label | regular forms and settings | yes |
+| `l` | 7px track, 31.5×21 thumb, 14/20 label | spacious settings pages | |
+| `xl` | 8px track, 36×24 thumb, 14/20 label | touch-first screens | |
+
+**Sizes:** the slider fills its container; the tier changes the track, the thumb and the label / value text. Use the same tier as the other fields of the form.
+
+### tone
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `accent` | `accent-default` fill | any regular setting | yes |
+| `neutral` | `text-secondary` fill | monochrome screens, editors, media controls | |
+| `success` | `success-default` fill | a value that means «safe / good» (minimum charge) | |
+| `warning` | `warning-default` fill | a warning threshold | |
+| `danger` | `danger-default` fill | a blocking or destructive threshold | |
+| `info` | `info-default` fill | informational settings next to info UI | |
+
+Tone never carries meaning alone: the label names what the value means.
+
+### orientation
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `horizontal` | the track across its container | a value in a form or a panel | yes |
+| `vertical` | the track upright, minimum at the bottom, seven thumbs long at its tier; the label row above it | a level beside a button (a video's sound), a column of a mixer | |
+
+### Flags
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `showValue` | the value at the right end of the label row, `text-secondary`, tabular nums | the number matters (price, temperature, percent) | `false` |
+| `disabled` | muted track, flat thumb, dimmed label and value | the setting is unavailable | — |
+
+**Combinations**
+- `showValue` + `formatValue` for any value with a unit; `formatValue` alone only changes `aria-valuetext`.
+- Neither `label` nor `aria-label` → forbidden (unnamed control).
+- A paired number input with `showValue` → redundant; drop `showValue`.
+- `onValueChange` for a live preview, `onCommit` to save: it fires once on pointer release or key release, only when the value differs from the last commit.
+
+## States
+| State | Driven by | DOM |
+|---|---|---|
+| default | — | `data-size`, `data-tone` (`data-orientation="vertical"` when upright); track `fill-strong`, tone pill up to the thumb centre, opaque thumb |
+| hover | pointer (fine pointers only) | light liquid glass: the thumb grows to 110%, turns translucent and slightly frosted |
+| invalid | `invalid` or a non-empty `error` | `data-invalid="true"` on the root, `aria-invalid` on the input; the error replaces the hint, danger focus ring; the control shakes once when an error arrives (`data-shake` on the frame) |
+| pressed | dragging | clear glass: the thumb grows to 125%, the rounded end of the fill shows through |
+| focus-visible | keyboard | outer focus ring around the thumb |
+| disabled | `disabled` | `data-disabled="true"` on the root, native `disabled`; muted track and fill, flat thumb, `cursor: not-allowed` |
+| saving | `onCommit` returned a pending promise | `data-pending="true"` on the root, `aria-busy` on the input; the thumb quiets to 0.6 (`fast`, both ways); the slider stays usable — only the latest commit's answer counts |
+| refused | that promise rejected | the value goes back to the last saved one (`onValueChange` when controlled); `data-settling` glides the thumb and the fill there (`base`, emphasized) |
+
+Controlled: `value` + `onValueChange`. Uncontrolled: `defaultValue` (falls back to `min`). Both are clamped to `min`…`max`. `onCommit` reports the settled value after a drag or a key step.
+
+## Layout & spacing
+- Fills its container; place it in a grid column to limit the width.
+- Label row → track: tier `label-gap`; label and value share a baseline, the value is pinned right. Track → hint / error: tier `hint-gap` (FieldFrame, like every field).
+- Between sliders in a form: `--prime-space-5`.
+- With a paired input: grid `minmax(0, 1fr)` + a fixed column, `align-items: end`, gap `--prime-space-4`.
+
+## Accessibility
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `ArrowRight` · `ArrowUp` | Increases the value by `step`. |
+| `ArrowLeft` · `ArrowDown` | Decreases the value by `step`. |
+| `PageUp` · `PageDown` | Changes the value by a larger step. |
+| `Home` · `End` | Jumps to `min` / `max`. |
+
+### ARIA
+- A native `<input type="range">` (`role="slider"`) on top of the visual layer.
+- `label` is a `<label htmlFor>`; otherwise `aria-label` is required.
+- `orientation="vertical"` turns the native range with `writing-mode`, so ↑ / ↓ and the pointer work natively; the input has `aria-orientation="vertical"`.
+- `formatValue` sets `aria-valuetext`, so screen readers announce the unit; the visual `<output>` is `aria-hidden`.
+- `aria-describedby` on the input: your ids + the hint or the error; `aria-invalid` when invalid.
+- While a commit is saved the input has `aria-busy`; say why a refused value went back with `error`.
+
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+| Key | Default | Used for |
+|---|---|---|
+| `optional` | `"необязательно"` | Marker after the label when `optional`. |
+
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | A labelled slider with its current value — `label`, `showValue`. |
+| [variants.tsx](examples/variants.tsx) | Every fill color; accent by default, semantic tones when the value carries meaning — `tone`. |
+| [sizes.tsx](examples/sizes.tsx) | Every size; the thumb, the label and the value grow with the tier — `size`. |
+| [states.tsx](examples/states.tsx) | The fill at both ends and a disabled slider — `disabled`. |
+| [orientation.tsx](examples/orientation.tsx) | Notification levels as a row of upright sliders, minimum at the bottom — `orientation`. |
+| [value-format.tsx](examples/value-format.tsx) | Units in the shown value that are also read by screen readers — `formatValue`, `showValue`. |
+| [range-step.tsx](examples/range-step.tsx) | Own bounds and a coarse or fractional step; a slider without a visible label — `min`, `max`, `step`, `aria-label`. |
+| [hint-and-error.tsx](examples/hint-and-error.tsx) | A slider framed like every field: required marker, a hint, and an error in its place — `required`, `hint`, `error`, `optional`. |
+| [autosave.tsx](examples/autosave.tsx) | A setting saved once the thumb is let go, not on every step: the thumb waits dimmed while it saves, and a value the server refuses glides back — `onCommit`, `hint`, `error`. |
+| [controlled.tsx](examples/controlled.tsx) | The parent owns the value and shares it with a number field for exact entry — `value`, `onValueChange`. |
+
+## Mistakes
+- `<Slider.Root>` → the slider is a single export: `<Slider />`.
+- A slider for an exact amount → use `Input type="number"`.
+- `tone="danger"` as the only signal of a dangerous value → say it in the label.
+- No `label` and no `aria-label` → the control has no name.
+- Saving a setting in `onValueChange` → it fires on every step of a drag; save in `onCommit`.
+
+## Related
+- **Built from:** the field frame — [Label](../label/COMPONENT.md) (`label`) and [Hint](../hint/COMPONENT.md) (`hint`, `error`)
+- **See also:** [ProgressBar](../progress-bar/COMPONENT.md) (the same track scale), [Input](../input/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md)

package/dist/skill/reference/components/slider/examples/autosave.tsx

@@ -0,0 +1,39 @@
+/** A setting saved once the thumb is let go, not on every step: the thumb waits dimmed while it saves, and a value the server refuses glides back — `onCommit`, `hint`, `error`. */
+import { Slider } from "prime-ui-kit";
+import * as React from "react";
+
+/** The server saving the reminder lead time a beat later: more than ten days is not allowed. */
+function saveLeadTime(days: number) {
+  return new Promise<void>((resolve, reject) => {
+    setTimeout(() => {
+      if (days > 10) reject(new Error("Тариф позволяет напоминать не раньше чем за 10 дней"));
+      else resolve();
+    }, 600);
+  });
+}
+
+export default function SliderAutosaveExample() {
+  const [error, setError] = React.useState<string>();
+
+  return (
+    <Slider
+      label="Напоминать об оплате счёта"
+      min={1}
+      max={14}
+      defaultValue={3}
+      showValue
+      formatValue={(days) => `за ${days} дн.`}
+      hint="Сохраняется само, когда вы отпустите ползунок"
+      error={error}
+      onCommit={async (days) => {
+        setError(undefined);
+        try {
+          await saveLeadTime(days);
+        } catch (reason) {
+          setError(reason instanceof Error ? reason.message : String(reason));
+          throw reason;
+        }
+      }}
+    />
+  );
+}

package/dist/skill/reference/components/slider/examples/controlled.tsx

@@ -0,0 +1,39 @@
+/** 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 MAX_DISCOUNT = 50;
+
+export default function SliderControlledExample() {
+  const [discount, setDiscount] = React.useState(15);
+
+  return (
+    <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/dist/skill/reference/components/slider/examples/examples.module.css

@@ -0,0 +1,24 @@
+/* Layout of the Slider scenarios: semantic tokens only. */
+
+/* hint-and-error.tsx: fields of a form column, field → field 24. */
+.column {
+  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);
+  width: min(100%, var(--prime-modal-width-s));
+}
+
+/* orientation.tsx: upright sliders side by side, a mixer row. */
+.levels {
+  display: flex;
+  gap: var(--prime-space-8);
+}

package/dist/skill/reference/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/dist/skill/reference/components/slider/examples/orientation.tsx

@@ -0,0 +1,27 @@
+/** Notification levels as a row of upright sliders, minimum at the bottom — `orientation`. */
+import { Slider } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const LEVELS = [
+  { id: "orders", label: "Заказы", value: 80 },
+  { id: "chat", label: "Чат", value: 55 },
+  { id: "system", label: "Система", value: 30 },
+];
+
+export default function SliderOrientationExample() {
+  return (
+    <div className={styles.levels}>
+      {LEVELS.map((level) => (
+        <Slider
+          key={level.id}
+          orientation="vertical"
+          label={level.label}
+          defaultValue={level.value}
+          formatValue={(value) => `${value} %`}
+          showValue
+        />
+      ))}
+    </div>
+  );
+}

package/dist/skill/reference/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/dist/skill/reference/components/slider/examples/range-step.tsx

@@ -0,0 +1,19 @@
+/** 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";
+
+export default function SliderRangeStepExample() {
+  return (
+    <>
+      <Slider label="Готовность проекта" step={25} defaultValue={50} showValue />
+      <Slider
+        label="Минимальный рейтинг поставщика"
+        min={1}
+        max={5}
+        step={0.5}
+        defaultValue={4}
+        showValue
+      />
+      <Slider defaultValue={30} aria-label="Масштаб карты складов" />
+    </>
+  );
+}

package/dist/skill/reference/components/slider/examples/sizes.tsx

@@ -0,0 +1,18 @@
+/** Every size; the thumb, the label and the value grow with the tier — `size`. */
+import { Slider } from "prime-ui-kit";
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
+
+export default function SliderSizesExample() {
+  return (
+    <>
+      {SIZES.map((size) => (
+        <div key={size}>
+          <div>
+            <Slider size={size} label={size} showValue defaultValue={40} />
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}

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

@@ -0,0 +1,18 @@
+/** The fill at both ends and a disabled slider — `disabled`. */
+import { Slider } from "prime-ui-kit";
+
+export default function SliderStatesExample() {
+  return (
+    <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>
+  );
+}