prime-ui-kit 0.15.0 → 0.16.0

package/dist/skill/reference/components/color-field/COMPONENT.md

@@ -50,9 +50,9 @@ ColorField                       field frame: label · field button · hint | er
 | `onValueChange` | `(value: string) => void` | — | Called with the new color as hex: `#RRGGBB`, or `#RRGGBBAA` when `alpha` lowers the opacity. A controlled field that does not take the value keeps its color. |
 | `presets` | `readonly ColorPreset[]` | — | Ready colors under the channels (`{ value, label }`), picked in one click; none by default. |
 | `alpha` | `boolean` | `false` | Adds the opacity slider; the value then carries alpha. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Field tier (height 28 · 32 · 36 · 40 · 48); the panel uses the same tier. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Field tier (height 28 · 32 · 36 · 40 · 48); the panel uses the same tier. Without it the tier of its host, else `m`. |
 | `label` | `ReactNode` | — | Field label above; with the hex it names the field button. |
-| `required` | `boolean` | `false` | Red `*` after the label. |
+| `required` | `boolean` | `false` | Red `*` after the label; the field button is described by `labels.required` (a button takes no `aria-required`). |
 | `optional` | `boolean` | — | Muted marker right after the label text (`labels.optional`). |
 | `hint` | `ReactNode` | — | Help text under the field. Hidden while `error` is shown. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
@@ -85,6 +85,8 @@ ColorField                       field frame: label · field button · hint | er
 | `alpha` | an opacity slider under the hue; the hex gets two more digits | the color may be translucent (overlays, shadows) | `false` |
 | `disabled` | disabled fill, the color shown at half opacity, does not open | not editable now | `false` |
 | `invalid` / `error` | danger ring (+ the message) | validation failed | — |
+| `required` / `optional` | red `*` / muted «необязательно» after the label; a required field reads `labels.required` after its name | mark the minority of the form | `false` / — |
+| `focusRing` | `false`: no focus ring on the field button; the focus fill stays | a single color control where focus is obvious; never in a regular form (WCAG 2.4.7) | `true` |
 
 **Combinations**
 - Recommended: `label` + `name` inside a form; `presets` with the brand palette; `alpha` only where transparency means something.
@@ -109,6 +111,8 @@ Controlled with `value` + `onValueChange`; uncontrolled with `defaultValue`. A c
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Enter` · `Space` | Open the panel from the field; in a channel cell, apply the value. |
@@ -118,6 +122,8 @@ Controlled with `value` + `onValueChange`; uncontrolled with `defaultValue`. A c
 | `Escape` | Closes the panel and returns focus to the field. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - The field is a `<button>` with `aria-haspopup="dialog"` and `aria-expanded`; it is named by the label and the current hex (`aria-labelledby`), or by `aria-label` plus the hex.
 - The panel is `role="dialog"` named by the field; the area and the sliders are React Aria `role="slider"`, the sliders named by `labels.hue` and `labels.alpha`.
 - The ready colors are a `role="radiogroup"` named by `labels.presets`.
@@ -128,18 +134,18 @@ Controlled with `value` + `onValueChange`; uncontrolled with `defaultValue`. A c
 
 | Key | Default | Used for |
 |---|---|---|
-| `optional` | `"необязательно"` | Marker after the label when `optional`. |
-| `presets` | `"Готовые цвета"` | Accessible name of the preset swatches in the panel. |
-| `hue` | `"Оттенок, градусы"` | Hue slider and the hue cell of the channels. |
-| `alpha` | `"Непрозрачность, проценты"` | Opacity slider (`alpha`) and the opacity cell. |
-| `hex` | `"Hex"` | Hex cell of the channels. |
 | `eyeDropper` | `"Пипетка"` | Eyedropper button of the channels. |
-| `format` | `"Формат значений цвета"` | Value format select (the ColorPicker labels are shared). |
+| `hex` | `"Hex"` | Hex cell of the channels. |
+| `hue` | `"Оттенок, градусы"` | Hue slider and the hue cell of the channels. |
 | `saturation` | `"Насыщенность, проценты"` | Saturation cell. |
 | `lightness` | `"Яркость, проценты"` | Lightness cell. |
+| `alpha` | `"Непрозрачность, проценты"` | Opacity slider (`alpha`) and the opacity cell. |
 | `red` | `"Красный, 0–255"` | Red cell. |
 | `green` | `"Зелёный, 0–255"` | Green cell. |
 | `blue` | `"Синий, 0–255"` | Blue cell. |
+| `optional` | `"необязательно"` | Marker after the label when `optional`. |
+| `required` | `"обязательное поле"` | Read after the field name of a `required` field: its trigger is a button, which takes no `aria-required`. |
+| `presets` | `"Готовые цвета"` | Accessible name of the preset swatches in the panel. |
 
 ## Examples
 | Example | Shows |
@@ -159,5 +165,5 @@ Controlled with `value` + `onValueChange`; uncontrolled with `defaultValue`. A c
 - Expecting a `Color` object in `onValueChange` → the field speaks hex strings; use ColorPicker parts for `Color`.
 
 ## Related
-- **Built from:** [ColorPicker](../color-picker/COMPONENT.md) (area, sliders, channel strip, swatches), [Popover](../popover/COMPONENT.md), [ColorSwatches](../color-swatches/COMPONENT.md) (`presets`), [Button](../button/COMPONENT.md) (eyedropper), `Icon` (chevron), [Label](../label/COMPONENT.md) and [Hint](../hint/COMPONENT.md) (field frame)
+- **Built from:** [ColorPicker](../color-picker/COMPONENT.md) (area, sliders, channel strip with the eyedropper, the `presets` swatches), [Popover](../popover/COMPONENT.md), `Icon` (chevron), [Label](../label/COMPONENT.md) and [Hint](../hint/COMPONENT.md) (field frame), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [ColorSwatches](../color-swatches/COMPONENT.md), [ColorPicker](../color-picker/COMPONENT.md), [Datepicker](../datepicker/COMPONENT.md)

package/dist/skill/reference/components/color-field/examples/examples.module.css

@@ -2,14 +2,13 @@
 
 /* in-form.tsx: a form in a Card. */
 .formCard {
-  width: min(100%, var(--prime-modal-width-s));
+  width: min(100%, var(--prime-layout-form-width-s));
 }
 
-/* Field → field 20. */
+/* The fields (a Fieldset), then the actions — group → actions 32. */
 .form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-5);
+  display: grid;
+  gap: var(--prime-space-8);
 }
 
 /* A row of actions at the end. */

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

@@ -1,5 +1,5 @@
 /** A pipeline stage form: the color goes with the form by `name`, a calm note confirms the save — `name`, `required`. */
-import { Button, Card, Input, Typography } from "prime-ui-kit";
+import { Button, Card, Fieldset, Input, Typography } from "prime-ui-kit";
 import { ColorField } from "prime-ui-kit/color-picker";
 import * as React from "react";
 
@@ -18,18 +18,20 @@ export default function ColorFieldInFormExample() {
     <Card.Root className={styles.formCard}>
       <Card.Body>
         <form className={styles.form} noValidate onSubmit={submit}>
-          <Input.Root label="Название этапа" required>
-            <Input.Wrapper>
-              <Input.Field name="stage" defaultValue="Переговоры" />
-            </Input.Wrapper>
-          </Input.Root>
-          <ColorField
-            label="Цвет этапа"
-            required
-            name="stageColor"
-            defaultValue="#F76B15"
-            onValueChange={() => setSaved(undefined)}
-          />
+          <Fieldset>
+            <Input.Root label="Название этапа" required>
+              <Input.Wrapper>
+                <Input.Field name="stage" defaultValue="Переговоры" />
+              </Input.Wrapper>
+            </Input.Root>
+            <ColorField
+              label="Цвет этапа"
+              required
+              name="stageColor"
+              defaultValue="#F76B15"
+              onValueChange={() => setSaved(undefined)}
+            />
+          </Fieldset>
           <div className={styles.actions}>
             {saved ? (
               <Typography as="p" variant="body-s" tone="secondary" role="status">

package/dist/skill/reference/components/color-field/examples/sizes.tsx

@@ -7,7 +7,11 @@ export default function ColorFieldSizesExample() {
   return (
     <>
       {SIZES.map((size) => (
-        <ColorField key={size} size={size} label={size} defaultValue="#0090ff" />
+        <div key={size}>
+          <div>
+            <ColorField size={size} label={size} defaultValue="#0090ff" />
+          </div>
+        </div>
       ))}
     </>
   );

package/dist/skill/reference/components/color-field/examples/states.tsx

@@ -4,9 +4,21 @@ import { ColorField } from "prime-ui-kit/color-picker";
 export default function ColorFieldStatesExample() {
   return (
     <>
-      <ColorField label="default" defaultValue="#30a46c" />
-      <ColorField label="invalid" defaultValue="#f5f5f5" invalid />
-      <ColorField label="disabled" defaultValue="#30a46c" disabled />
+      <div>
+        <div>
+          <ColorField label="default" defaultValue="#30a46c" />
+        </div>
+      </div>
+      <div>
+        <div>
+          <ColorField label="invalid" defaultValue="#f5f5f5" invalid />
+        </div>
+      </div>
+      <div>
+        <div>
+          <ColorField label="disabled" defaultValue="#30a46c" disabled />
+        </div>
+      </div>
     </>
   );
 }

package/dist/skill/reference/components/color-picker/COMPONENT.md

@@ -35,7 +35,7 @@ ColorPicker.Root                 shared Color + value format (no DOM)
 └─ ColorPicker.Panel             vertical stack, optional raised surface
    ├─ ColorPicker.FormatSelect   kit Select: HSL / RGB / Hex
    ├─ ColorPicker.Area           2D area (4:3)
-   │  └─ ColorPicker.AreaThumb
+   │  └─ ColorPicker.Thumb
    ├─ ColorPicker.Slider         one channel
    │  ├─ ColorPicker.SliderMeta  label + value row
    │  └─ ColorPicker.SliderTrack
@@ -63,7 +63,10 @@ No DOM. Holds the color (React Aria `ColorPicker`) and the value format for ever
 | `value` | `string \| Color` | — | Controlled color: a CSS color string or a `Color` from `parseColor`. |
 | `defaultValue` | `string \| Color` | — | Initial color when uncontrolled. |
 | `onValueChange` | `(color: Color) => void` | — | Called with the new `Color` (`color.toString("hex")` for a string). |
-| `defaultFormat` | `"hsl" \| "rgb" \| "hex"` | `"hsl"` | Initial value format of `FormatSelect` and `ChannelStrip`. |
+| `format` | `"hsl" \| "rgb" \| "hex"` | — | Controlled value format of `FormatSelect` and `ChannelStrip`. |
+| `defaultFormat` | `"hsl" \| "rgb" \| "hex"` | `"hsl"` | Initial value format, uncontrolled. |
+| `onFormatChange` | `(format: "hsl" \| "rgb" \| "hex") => void` | — | Called with the format picked in `FormatSelect`. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of the fields inside (`HexInput`, `FormatSelect`); without it the tier of its host (a panel, a popover), else `m`. |
 | `labels` | `Partial<ColorPickerLabels>` | — | Built-in strings, see Labels. |
 | `children` | `ReactNode` | — (required) | The parts. |
 
@@ -73,6 +76,7 @@ No DOM. Holds the color (React Aria `ColorPicker`) and the value format for ever
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `surface` | `"none" \| "raised"` | `"none"` | `none` — layout only (inside a Popover or Card). `raised` — a standalone floating panel: raised background, panel radius and padding, overlay shadow. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (the parts), `className` and the other div attributes. |
 
 ### ColorPicker.HexInput
 `ref` → `HTMLDivElement` (the field frame). The hex value as a kit Input field (label, hint, error); commits on blur / Enter and reverts invalid text.
@@ -82,7 +86,6 @@ No DOM. Holds the color (React Aria `ColorPicker`) and the value format for ever
 | `label` | `ReactNode` | — | Field label; defaults to `labels.hex`. |
 | `hint` | `ReactNode` | — | Help text under the field. Hidden while `error` is shown. |
 | `error` | `ReactNode` | — | Error message in the hint slot; marks the field invalid. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Field tier. Without it the tier of its host (a panel, a popover), else `m`. |
 | `focusRing` | `boolean` | `true` | `false` hides only the visual focus ring of the fields (`data-focus-ring="false"`); focus, keyboard and ARIA stay. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "id" \| "children" \| "defaultValue" \| "defaultChecked" \| "onChange">` | — | `className`, `data-*` and the other attributes of the field frame `<div>` (field-root rule: `className`, `ref` and the rest → frame, `id` → control). |
 
@@ -109,15 +112,15 @@ No DOM. Holds the color (React Aria `ColorPicker`) and the value format for ever
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className` and the other attributes of the row `<div>`. |
 
 ### ColorPicker.Area
-`ref` → `HTMLDivElement`. React Aria `ColorArea`: a two-channel square (e.g. saturation × lightness). Holds `ColorPicker.AreaThumb`.
+`ref` → `HTMLDivElement`. React Aria `ColorArea`: a two-channel square (e.g. saturation × lightness). Holds a `ColorPicker.Thumb`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `disabled` | `boolean` | — | Shows the color but takes no input (grayscale). |
 | `…rest` | `ColorAreaProps (react-aria-components)` | — | The other props of the React Aria `ColorArea` (`channel`, `colorSpace`, `aria-label`…). |
 
-### ColorPicker.AreaThumb · ColorPicker.Thumb
-`ref` → `HTMLDivElement`. React Aria `ColorThumb` of the area / of a slider track: a thumb-colored ring with the overlay shadow and a focus ring.
+### ColorPicker.Thumb
+`ref` → `HTMLDivElement`. React Aria `ColorThumb` of the area or of a slider track: a thumb-colored ring with the overlay shadow and a focus ring, sized by its host.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -152,7 +155,8 @@ No DOM. Holds the color (React Aria `ColorPicker`) and the value format for ever
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `presets` | `readonly ColorPreset[]` | `COLOR_PRESETS` | Swatches `{ value, label }`; the label names the swatch. |
-| `…rest` | `Omit<ColorSwatchesProps, "value" \| "defaultValue" \| "onValueChange" \| "allowEmpty" \| "name">` | — | `label`, `size`, `aria-label`, `disabled`… |
+| `label · hint · error · invalid · required · optional · disabled · size · id · labels · aria-label · aria-labelledby · aria-describedby` | `ColorSwatchesProps` | — | As on `ColorSwatches`. |
+| `…rest` | `Omit<ColorSwatchesProps, "value" \| "defaultValue" \| "onValueChange" \| "allowEmpty" \| "name">` | — | `className` and the other attributes of the field frame. |
 
 ### ColorPicker.EyeDropperButton
 `ref` → `HTMLButtonElement`. A square soft kit Button that opens the native EyeDropper, named by `labels.eyeDropper`; without browser support it is disabled and hidden from assistive tech.
@@ -160,10 +164,11 @@ No DOM. Holds the color (React Aria `ColorPicker`) and the value format for ever
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `children` | `ReactNode` | — | Custom content; default is the pipette icon. |
-| `…rest` | `Omit<ButtonRootProps, "variant" \| "tone" \| "size" \| "aria-label">` | — | The other Button props. |
+| `fullWidth · loading · pressed · defaultPressed · onPressedChange · current · density · align · progress · holdToConfirm · onConfirm · labels` | `ButtonRootProps` | — | As on `Button.Root`. |
+| `…rest` | `Omit<ButtonRootProps, "variant" \| "tone" \| "size" \| "aria-label" \| "shape" \| "asChild">` | — | `onClick`, `className` and the other button attributes. |
 
 ### ColorPresets.Root
-A quick color from a fixed palette: a square trigger and a popover grid of presets. No DOM, except a field frame in a FieldList cell (the column heading as its label).
+No DOM and no ref, except a field frame in a FieldList cell (the column heading as its label). A quick color from a fixed palette: a square trigger and a popover grid of presets.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -173,13 +178,16 @@ A quick color from a fixed palette: a square trigger and a popover grid of prese
 | `open` | `boolean` | — | Controlled open state of the panel. |
 | `defaultOpen` | `boolean` | `false` | Initial open state. |
 | `onOpenChange` | `(open: boolean) => void` | — | Called when the panel opens or closes. |
+| `closeOnEscape` | `boolean` | `true` | Escape closes the panel and returns focus to the trigger. |
+| `closeOnOutsideClick` | `boolean` | `true` | A press outside the panel and its trigger closes it; focus follows the pointer. |
 | `presets` | `readonly ColorPreset[]` | `COLOR_PRESETS` | Swatches in panel order. |
 | `columns` | `number` | — | Grid columns; default one row for up to 8 presets (+ «no color»), else 8. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier of the trigger, the swatches and the panel. Without it the tier of its host, else `m`. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of the trigger, the swatches and the panel. Without it the tier of its host, else `m`. |
 | `disabled` | `boolean` | `false` | The trigger is disabled and does not open the panel. A disabled `Fieldset` around it sets it too. |
 | `allowEmpty` | `boolean` | `false` | Adds the «no color» swatch after the presets (value `null`). |
 | `closeOnSelect` | `boolean` | `true` | Close the panel after a pick (focus returns to the trigger). |
 | `labels` | `Partial<ColorPresetsLabels>` | — | Built-in strings, see Labels. |
+| `children` | `ReactNode` | — (required) | `ColorPresets.Trigger` and `ColorPresets.Content`. |
 
 ### ColorPresets.Trigger
 No DOM: clones the single child into the panel's trigger, merges `ref` and `onClick` (toggles), names it «`labels.trigger`: <color name>», sets `disabled` from the root and opens the panel on ArrowDown / ArrowUp. The child's own `aria-label`, `disabled` and handlers win.
@@ -221,14 +229,14 @@ No `variant` / `tone` / `color`.
 | `none` | parts stacked with a 12px gap, no own background | inside a Popover or a Card | yes |
 | `raised` | the floating layer of the ladder (`data-depth="floating"`), panel radius and padding, `shadow-overlay`; fields take that layer's fill | a standalone panel on the page | |
 
-### defaultFormat (ColorPicker.Root)
+### format (ColorPicker.Root)
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `hsl` | hue °, saturation %, lightness %, alpha % fields | designers tuning a hue | yes |
 | `rgb` | red, green, blue (0–255), alpha % | developer-facing tools | |
 | `hex` | one hex field | brand colors copied from guidelines | |
 
-### size (HexInput, ColorPresets)
+### size (ColorPicker.Root, ColorPresets)
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `xs` | 28px field / trigger, 16px preset swatches | dense tables | |
@@ -244,6 +252,8 @@ No `variant` / `tone` / `color`.
 |---|---|---|---|
 | `allowEmpty` (ColorPresets) | checkerboard «Без цвета» swatch at the end | the color is optional | `false` |
 | `closeOnSelect={false}` (ColorPresets) | panel stays open after a pick | trying several colors in a row | `true` |
+| `closeOnOutsideClick={false}` (ColorPresets) | a press beside the panel keeps it open | comparing presets with the page | `true` |
+| `closeOnEscape={false}` (ColorPresets) | Escape leaves the panel open | the panel closes only by a pick or the trigger | `true` |
 | `disabled` (Area, Slider) | grayscale, no input | the part is locked | — |
 
 **Combinations**
@@ -266,15 +276,17 @@ No `variant` / `tone` / `color`.
 There is no `disabled` on `ColorPicker.Root` — disable parts individually. Controlled: `value` + `onValueChange` (both components), `open` + `onOpenChange` (ColorPresets). Uncontrolled: `defaultValue`, `defaultOpen`.
 
 ## Layout & spacing
-- Panel width comes from the layout (e.g. `calc(var(--prime-panel-min-width) * 1.5)` fits the area and four channel fields).
-- Field + trigger row: gap `--prime-space-2`, `align-items: flex-end` so the trigger aligns with the field box under a label.
+- Panel width comes from the layout: a popover or a column wide enough for the area and four channel fields.
+- Field + trigger row: a small gap, `align-items: flex-end` so the trigger aligns with the field box under a label.
 - Panel parts gap: 12px (`--prime-space-3`) from `ColorPicker.Panel`.
 - ColorPresets.Content `align="auto"`: a trigger near the end of the screen lines up the panel's end edge and the panel grows toward the start, and the other way near the start; a fixed `align` still flips at the screen edge.
-- ColorPresets grid: one row for up to 8 presets (+ «no color»), else rows of 8 (`columns` overrides); below 480px viewport width the `l` / `xl` grids wrap to half the columns. On a coarse pointer every swatch grows to the 44 px touch target and the grid takes at most 5 columns, so it still fits a 320px panel; the arrow keys walk the same columns.
+- ColorPresets grid: one row for up to 8 presets (+ «no color»), else rows of 8 (`columns` overrides); a panel narrower than the row wraps the swatches into balanced rows (16 → 8 + 8, never 14 + 2). On a coarse pointer every swatch grows to the 44 px touch target and the grid wraps into more rows, so it still fits a 320px panel; the arrow keys walk the rows on screen.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `ArrowLeft` · `ArrowRight` · `ArrowUp` · `ArrowDown` | Move the area thumb or a slider; in the ColorPresets grid, move between swatches. |
@@ -285,8 +297,10 @@ There is no `disabled` on `ColorPicker.Root` — disable parts individually. Con
 | `Escape` | Closes the ColorPresets panel. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - Area and sliders are React Aria primitives with their own `role="slider"` names.
-- `TriggerSwatch` and `ColorPresets.Swatch` are `aria-hidden` — give the trigger button an `aria-label` (ColorPresets.Trigger names its element «`labels.trigger`: <color name>» unless the element has its own `aria-label`).
+- `TriggerSwatch` and `ColorPresets.Swatch` are `aria-hidden` — give the trigger button an `aria-label` (`ColorPresets.Trigger` names its element «`labels.trigger`: <color name>» unless the element has its own `aria-label`).
 - `ColorPicker.Swatches` is a `role="radiogroup"` (ColorSwatches): name it with `label` or `aria-label`.
 - The ColorPresets grid is `role="listbox"` with `role="option"` swatches (roving tabindex), named by the Content `label` or `labels.list`.
 - Channel fields are named by `labels` (`hue`, `red`…); HexInput by its label (`labels.hex` by default).
@@ -294,6 +308,8 @@ There is no `disabled` on `ColorPicker.Root` — disable parts individually. Con
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
+#### ColorPicker.Root
+
 | Key | Default | Used for |
 |---|---|---|
 | `format` | `"Формат значений цвета"` | Name of `ColorPicker.FormatSelect`. |
@@ -306,6 +322,26 @@ There is no `disabled` on `ColorPicker.Root` — disable parts individually. Con
 | `red` | `"Красный, 0–255"` | Red channel field. |
 | `green` | `"Зелёный, 0–255"` | Green channel field. |
 | `blue` | `"Синий, 0–255"` | Blue channel field. |
+
+#### ColorPicker.Swatches
+
+| Key | Default | Used for |
+|---|---|---|
+| `group` | `"Цвет"` | Name of the swatch group without a visible `label` and `aria-label`. |
+| `empty` | `"Без цвета"` | Name of the «no color» swatch (never shown here: the picker has no `allowEmpty`). |
+| `optional` | `"необязательно"` | Marker after the label when `optional`. |
+| `colorNames` | `"Серый · Красный · Оранжевый · Жёлтый · Зелёный · Бирюзовый · Голубой · Синий · Фиолетовый · Розовый"` | Names of the palette hues (unused here: the picker swatches are colors). |
+
+#### ColorPicker.EyeDropperButton
+
+| Key | Default | Used for |
+|---|---|---|
+| `holdHint` | `"Удерживайте, чтобы подтвердить"` | Description of the button with `holdToConfirm`. |
+
+#### ColorPresets.Root
+
+| Key | Default | Used for |
+|---|---|---|
 | `trigger` | `"Цвет"` | ColorPresets trigger name prefix: «<trigger>: <color name>»; in a FieldList cell the column heading. |
 | `list` | `"Цвета"` | ColorPresets swatch list name when `Content` has no `label`. |
 | `empty` | `"Без цвета"` | ColorPresets «no color» swatch and the trigger name for an empty value. |
@@ -314,14 +350,14 @@ There is no `disabled` on `ColorPicker.Root` — disable parts individually. Con
 | Example | Shows |
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A color field: a hex value and a swatch button that opens the picker panel — `ColorPicker.HexInput`, `ColorPicker.TriggerSwatch`. |
-| [sizes.tsx](examples/sizes.tsx) | Every size of the hex field with a swatch button of the same tier — `size`. |
+| [sizes.tsx](examples/sizes.tsx) | Every tier of the picker: the hex field and a swatch button inside take it from the root — `size`. |
 | [states.tsx](examples/states.tsx) | A disabled area, hue slider and preset trigger keep showing the color but take no input — `disabled`. |
 | [validation.tsx](examples/validation.tsx) | A button color checked live: a too light color shakes in an error that leaves once the color is darker; a hint under the other field, invalid text reverts on blur — `hint`, `error`. |
 | [panel.tsx](examples/panel.tsx) | The full raised panel and its part order: format, area, hue and alpha sliders, channels, brand swatches — `ColorPicker.Panel`, `surface`, `ColorPicker.Swatches`. |
 | [formats.tsx](examples/formats.tsx) | The channel strip in each value format; three pickers edit one color — `defaultFormat`, `ColorPicker.ChannelStrip`. |
 | [presets.tsx](examples/presets.tsx) | A quick color from the palette: a square trigger with «no color» and a Button trigger whose grid of four columns stays open after a pick — `ColorPresets`, `allowEmpty`, `ColorPresets.Trigger`, `columns`, `closeOnSelect`. |
 | [presets-sizes.tsx](examples/presets-sizes.tsx) | The preset trigger in every size, a square of the control height next to an input of the same tier — `ColorPresets`, `size`. |
-| [controlled.tsx](examples/controlled.tsx) | The parent owns the color: brand swatches and the hex field edit it, a button resets it — `value`, `onValueChange`. |
+| [controlled.tsx](examples/controlled.tsx) | The parent owns the color and its format: brand swatches and the channels edit it, the format stays as picked, a button resets both — `value`, `onValueChange`, `format`, `onFormatChange`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent opens the preset palette from its own button and keeps the chosen color — `open`, `onOpenChange`, `value`, `onValueChange`. |
 | [in-form.tsx](examples/in-form.tsx) | Theme settings: the color goes with the form, a too light color shakes in an error on save that leaves once the color changes — `value`, `error`. |
 
@@ -336,5 +372,5 @@ There is no `disabled` on `ColorPicker.Root` — disable parts individually. Con
 - `<ColorPresets.Trigger />` with no child → put `ColorPresets.SwatchButton` (or your Button) inside it.
 
 ## Related
-- **Built from:** [Input](../input/COMPONENT.md) (`HexInput`), [Select](../select/COMPONENT.md) (`FormatSelect`), [Button](../button/COMPONENT.md) (`EyeDropperButton`), [ColorSwatches](../color-swatches/COMPONENT.md) (`Swatches`), [Popover](../popover/COMPONENT.md) (`ColorPresets.Root`, `ColorPresets.Content`), `Icon` (pipette)
+- **Built from:** [Input](../input/COMPONENT.md) (`HexInput`), [Label](../label/COMPONENT.md) and [Hint](../hint/COMPONENT.md) (the `HexInput` label, hint and error), [Select](../select/COMPONENT.md) (`FormatSelect`), [Button](../button/COMPONENT.md) (`EyeDropperButton`), [ColorSwatches](../color-swatches/COMPONENT.md) (`Swatches`), [Popover](../popover/COMPONENT.md) (`ColorPresets.Root`, `ColorPresets.Content`), `Icon` (pipette), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [ColorField](../color-field/COMPONENT.md), [ColorSwatches](../color-swatches/COMPONENT.md), [TagSelect](../tag-select/COMPONENT.md)

package/dist/skill/reference/components/color-picker/examples/controlled.tsx

@@ -1,11 +1,12 @@
-/** The parent owns the color: brand swatches and the hex field edit it, a button resets it — `value`, `onValueChange`. */
+/** The parent owns the color and its format: brand swatches and the channels edit it, the format stays as picked, a button resets both — `value`, `onValueChange`, `format`, `onFormatChange`. */
 import { Button } from "prime-ui-kit";
-import { ColorPicker, parseColor } from "prime-ui-kit/color-picker";
+import { ColorPicker, type ColorValueFormat, parseColor } from "prime-ui-kit/color-picker";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
 const DEFAULT_COLOR = "#5b5bd6";
+const DEFAULT_FORMAT: ColorValueFormat = "hex";
 const BRAND_COLORS = [
   { value: "#5b5bd6", label: "Индиго" },
   { value: "#0090ff", label: "Синий" },
@@ -16,18 +17,28 @@ const BRAND_COLORS = [
 
 export default function ColorPickerControlledExample() {
   const [color, setColor] = React.useState(() => parseColor(DEFAULT_COLOR));
+  const [format, setFormat] = React.useState<ColorValueFormat>(DEFAULT_FORMAT);
 
   return (
     <div className={styles.panel}>
-      <ColorPicker.Root value={color} onValueChange={setColor}>
-        <ColorPicker.HexInput label="Цвет витрины" hint={`Сейчас: ${color.toString("hex")}`} />
+      <ColorPicker.Root
+        value={color}
+        onValueChange={setColor}
+        format={format}
+        onFormatChange={setFormat}
+      >
+        <ColorPicker.FormatSelect />
+        <ColorPicker.ChannelStrip />
         <ColorPicker.Swatches aria-label="Цвета бренда" presets={BRAND_COLORS} />
       </ColorPicker.Root>
       <div>
         <Button.Root
           variant="soft"
           tone="neutral"
-          onClick={() => setColor(parseColor(DEFAULT_COLOR))}
+          onClick={() => {
+            setColor(parseColor(DEFAULT_COLOR));
+            setFormat(DEFAULT_FORMAT);
+          }}
         >
           Сбросить
         </Button.Root>

package/dist/skill/reference/components/color-picker/examples/examples.module.css

@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--prime-space-4);
-  width: calc(var(--prime-panel-min-width) * 1.5);
+  width: var(--prime-layout-min-width);
   max-width: 100%;
 }
 
@@ -14,7 +14,7 @@
   display: flex;
   align-items: flex-end;
   gap: var(--prime-space-2);
-  width: calc(var(--prime-panel-min-width) * 1.5);
+  width: var(--prime-layout-min-width);
   max-width: 100%;
 }
 
@@ -23,7 +23,7 @@
   display: flex;
   align-items: center;
   gap: var(--prime-space-2);
-  width: calc(var(--prime-panel-min-width) * 1.5);
+  width: var(--prime-layout-min-width);
   max-width: 100%;
 }
 
@@ -34,15 +34,14 @@
   gap: var(--prime-space-3);
 }
 
-/* in-form.tsx: field → field 20, group → actions 32. */
+/* in-form.tsx: the field column (a Fieldset, fields 20 apart) → actions 32. */
 .form {
   display: flex;
   flex-direction: column;
-  gap: var(--prime-space-5);
-  width: min(100%, var(--prime-modal-width-s));
+  gap: var(--prime-space-8);
+  width: min(100%, var(--prime-layout-form-width-s));
 }
 
 .actions {
   display: flex;
-  margin-top: var(--prime-space-3);
 }

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

@@ -1,5 +1,5 @@
 /** Theme settings: the color goes with the form, a too light color shakes in an error on save that leaves once the color changes — `value`, `error`. */
-import { Button, Input, Typography } from "prime-ui-kit";
+import { Button, Fieldset, Input, Typography } from "prime-ui-kit";
 import { ColorPicker, parseColor } from "prime-ui-kit/color-picker";
 import * as React from "react";
 
@@ -23,27 +23,29 @@ export default function ColorPickerInFormExample() {
 
   return (
     <form className={styles.form} noValidate onSubmit={submit}>
-      <Input.Root label="Название темы" required>
-        <Input.Wrapper>
-          <Input.Field name="theme" defaultValue="Осенняя распродажа" />
-        </Input.Wrapper>
-      </Input.Root>
-      <ColorPicker.Root
-        value={color}
-        onValueChange={(next) => {
-          setColor(next);
-          setError(undefined);
-          setSaved(false);
-        }}
-      >
-        <ColorPicker.HexInput label="Цвет кнопок" error={error} />
-      </ColorPicker.Root>
-      <input type="hidden" name="buttonColor" value={color.toString("hex")} />
-      {saved ? (
-        <Typography as="p" variant="body-s" tone="secondary" role="status">
-          Тема сохранена.
-        </Typography>
-      ) : null}
+      <Fieldset>
+        <Input.Root label="Название темы" required>
+          <Input.Wrapper>
+            <Input.Field name="theme" defaultValue="Осенняя распродажа" />
+          </Input.Wrapper>
+        </Input.Root>
+        <ColorPicker.Root
+          value={color}
+          onValueChange={(next) => {
+            setColor(next);
+            setError(undefined);
+            setSaved(false);
+          }}
+        >
+          <ColorPicker.HexInput label="Цвет кнопок" error={error} />
+        </ColorPicker.Root>
+        <input type="hidden" name="buttonColor" value={color.toString("hex")} />
+        {saved ? (
+          <Typography as="p" variant="body-s" tone="secondary" role="status">
+            Тема сохранена.
+          </Typography>
+        ) : null}
+      </Fieldset>
       <div className={styles.actions}>
         <Button.Root type="submit">Сохранить тему</Button.Root>
       </div>

package/dist/skill/reference/components/color-picker/examples/overview.tsx

@@ -20,7 +20,7 @@ export default function ColorPickerOverviewExample() {
           <Popover.Content>
             <ColorPicker.Panel className={styles.panel}>
               <ColorPicker.Area colorSpace="hsl" xChannel="saturation" yChannel="lightness">
-                <ColorPicker.AreaThumb />
+                <ColorPicker.Thumb />
               </ColorPicker.Area>
               <ColorPicker.Slider channel="hue" colorSpace="hsl">
                 <ColorPicker.SliderTrack>

package/dist/skill/reference/components/color-picker/examples/panel.tsx

@@ -19,7 +19,7 @@ export default function ColorPickerPanelExample() {
       <ColorPicker.Panel surface="raised" className={styles.panel}>
         <ColorPicker.FormatSelect />
         <ColorPicker.Area colorSpace="hsl" xChannel="saturation" yChannel="lightness">
-          <ColorPicker.AreaThumb />
+          <ColorPicker.Thumb />
         </ColorPicker.Area>
         <ColorPicker.Slider channel="hue" colorSpace="hsl">
           <ColorPicker.SliderMeta label="Оттенок" />

package/dist/skill/reference/components/color-picker/examples/sizes.tsx

@@ -1,26 +1,24 @@
-/** Every size of the hex field with a swatch button of the same tier — `size`. */
+/** Every tier of the picker: the hex field and a swatch button inside take it from the root — `size`. */
 import { Button } from "prime-ui-kit";
 import { ColorPicker } from "prime-ui-kit/color-picker";
 
-import styles from "./examples.module.css";
-
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function ColorPickerSizesExample() {
   return (
-    <>
+    <div>
       {SIZES.map((size) => (
-        <ColorPicker.Root key={size} defaultValue="#0090ff">
-          <div className={styles.fieldRow}>
-            <ColorPicker.HexInput label={size} size={size} />
-            <Button.Root variant="soft" tone="neutral" size={size} aria-label="Открыть палитру">
+        <div key={size}>
+          <ColorPicker.Root defaultValue="#0090ff" size={size}>
+            <ColorPicker.HexInput label={size} />
+            <Button.Root variant="soft" tone="neutral" aria-label="Открыть палитру">
               <Button.Icon>
                 <ColorPicker.TriggerSwatch />
               </Button.Icon>
             </Button.Root>
-          </div>
-        </ColorPicker.Root>
+          </ColorPicker.Root>
+        </div>
       ))}
-    </>
+    </div>
   );
 }