@cube-dev/ui-kit 0.156.0 → 0.157.0

package/docs/components/fields/ColorSwatchGroup.md

@@ -0,0 +1,206 @@
+# ColorSwatchGroup
+
+A grid of color swatches, one of which can be selected. It is the palette half
+of choosing a color, where [ColorPicker](./ColorPicker.md) is the
+freeform half — and the two compose: pass `swatches` to a `ColorPicker` and the
+palette appears under the editor.
+
+Under the hood it is a radio group, so one tab stop and arrow keys move between
+swatches. The API is shaped after `Picker` rather than `RadioGroup`: colors go in
+as data, not as children.
+
+## When to Use
+
+- A brand or theme palette where freeform color would be wrong
+- Chart series, tag and label colors — a small approved set
+- Inside a `ColorPicker` popover, as a shortcut past the sliders
+
+## Component
+
+---
+
+### Properties
+
+- **`colors`** `Array<string | { color: string; label?: string }>` — The colors to offer
+- **`value`** `string | null` — The selected color (controlled)
+- **`defaultValue`** `string | null` — The selected color (uncontrolled)
+- **`onChange`** `(value: string | null) => void` — Fired with the chosen color, written in `format`
+- **`format`** `'hex' | 'rgb' | 'hsl' | 'okhsl' | 'okhst' | 'oklch'` (default: `hex`) — Notation the value is written in
+- **`columns`** `number` — Pin the swatches to a fixed grid. By default they wrap to fill the available width
+- **`allowCustom`** `boolean` (default: `false`) — Append a `ColorPicker` for colors outside the set
+- **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Size of each swatch
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md)
+
+### Field Properties
+
+Supports all [Field properties](../../FieldProperties.md)
+
+### Styling Properties
+
+#### styles
+
+Customizes the grid.
+
+#### swatchStyles
+
+Customizes an individual swatch.
+
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+
+### Style Props on the group
+
+`ColorSwatchGroup` and `ColorPicker` both take the outer and block style props,
+so `radius`, `border`, `padding` and `shadow` work directly on them.
+
+### Modifiers
+
+The `mods` property accepts the following modifiers you can override:
+
+| Modifier   | Type      | Description                        |
+| ---------- | --------- | ---------------------------------- |
+| `selected` | `boolean` | The swatch is the selected color   |
+| `empty`    | `boolean` | The swatch has no color to show    |
+| `disabled` | `boolean` | The group is disabled              |
+
+## ColorSwatch
+
+The square itself is exported, for the times you need to show a color without a
+control around it — a legend, a table cell, a summary line. It takes direct
+style props, so its shape and size are yours:
+
+```jsx
+<ColorSwatch color="#7a4dbf" radius="round" width="4x" height="4x" />
+```
+
+It is decorative on its own: pair it with the value as text, or with something
+that names it.
+
+## Swatches must be unique
+
+Equivalent colors are collapsed into one swatch, because two entries for the
+same color make selection ambiguous — there would be no way to say which one is
+selected. Matching is done on the canonical hex, so `#ff0000`, `rgb(255 0 0)`
+and `hsl(0 100% 50%)` are one swatch, not three.
+
+The same matching decides which swatch a value selects, so `value` need not be
+written in the same notation as the swatch it refers to.
+
+## Examples
+
+### Basic usage
+
+```jsx
+<ColorSwatchGroup
+  label="Brand color"
+  colors={['#7a4dbf', '#26fcb2', '#ff0000']}
+  value={color}
+  onChange={setColor}
+/>
+```
+
+### Wrapping onto rows
+
+By default the swatches wrap to fill whatever width they are given: a single row
+where there is room, more rows where there is not. `columns` pins them to a
+fixed grid instead, sized to the swatches rather than stretched across the
+container.
+
+```jsx
+<ColorSwatchGroup colors={palette} columns={4} />
+```
+
+### Naming the swatches
+
+A swatch announces its color by default, which is rarely the most useful thing
+to hear. Give the colors names when they have them.
+
+```jsx
+<ColorSwatchGroup
+  colors={[
+    { color: '#7a4dbf', label: 'Primary' },
+    { color: '#26fcb2', label: 'Success' },
+  ]}
+/>
+```
+
+### Allowing a color outside the set
+
+```jsx
+<ColorSwatchGroup colors={palette} allowCustom />
+```
+
+The trailing picker shows the current color whenever that color is not one of
+the swatches, so a custom choice stays visible.
+
+### Inside a ColorPicker
+
+```jsx
+<ColorPicker label="Brand color" swatches={palette} swatchColumns={4} />
+```
+
+`allowCustom` is ignored there, and deliberately so: the escape hatch is itself
+a `ColorPicker`, so offering it inside one would nest popovers without end. The
+group reads a context the popover provides, which means the recursion cannot be
+written even by hand.
+
+## Accessibility
+
+### Keyboard Navigation
+
+- `Tab` — moves focus into the group, landing on the selected swatch
+- `Left` / `Right`, `Up` / `Down` — move between swatches, selecting as they go
+- `Space` — selects the focused swatch
+
+### Screen Reader Support
+
+- The group announces as a radiogroup, named by its label or `aria-label`
+- Each swatch announces as a radio named by its `label`, or by its color
+- Give the group a name: "radiogroup" alone says nothing about what is chosen
+
+### ARIA Properties
+
+- `aria-label` — names the group when there is no visible label
+
+## Best Practices
+
+1. **Do**: name the colors when they mean something
+
+   ```jsx
+   <ColorSwatchGroup colors={[{ color: '#ff0000', label: 'Danger' }]} />
+   ```
+
+2. **Don't**: pass the same color twice expecting two swatches — one is dropped
+
+   ```jsx
+   <ColorSwatchGroup colors={['#ff0000', 'rgb(255 0 0)']} />
+   ```
+
+3. **Do**: reach for `allowCustom` only where a color outside the palette is
+   genuinely acceptable. A fixed set is the point of this component.
+
+## Integration with Forms
+
+This component supports all
+[Field properties](../../FieldProperties.md) when used
+within a Form. The field value is the color string.
+
+## Suggested Improvements
+
+- Sections with headings, for palettes with more than one group
+- An optional "no color" swatch that clears the value
+- Multi-selection, for palettes that build a series
+
+## Related Components
+
+- [ColorPicker](./ColorPicker.md) — freeform color behind a swatch button
+- [ColorInput](./ColorInput.md) — freeform color as editable text
+- [RadioGroup](./RadioGroup.md) — the selection primitive this is built on

package/docs/components/fields/FilterPicker.md

@@ -32,7 +32,7 @@ Choose a different component when the interaction has another shape:
 - **`allowsCustomValue`** `boolean` (default: `false`) — Whether to allow entering custom values that are not present in the predefined options
 - **`isClearable`** `boolean` (default: `false`) — Whether the filter picker is clearable using a clear button in the rightIcon slot
 - **`isLoadingItems`** `boolean` (default: `false`) — Whether items are currently loading. Shows a loading spinner in the search input suffix inside the popover. Unlike `isLoading`, does not disable the trigger.
-- **`disallowEmptySelection`** `boolean` (default: `false`) — Whether to disallow empty selection
+- **`disallowEmptySelection`** `boolean` (default: `false`) — Whether to disallow empty selection. In single selection mode, re-selecting the current item becomes a no-op: `onSelectionChange` is not fired and the popover closes
 - **`disabledKeys`** `Key[]` — Array of keys for disabled items
 - **`items`** `Iterable<T>` — Array of items to render when using the render function pattern for large datasets with dynamic content
 - **`placeholder`** `string` — Placeholder text when no selection is made

package/docs/components/fields/ListBox.md

@@ -147,6 +147,10 @@ The `mods` property accepts the following modifiers you can override:
 - When `true`, prevents the user from deselecting the last selected item
 - Ensures at least one item is always selected in single selection mode
 
+**allowDuplicateSelectionEvents** (`boolean`, default: `false`)
+- When `true`, `onSelectionChange` fires even when the new selection equals the current one (React Stately suppresses such duplicate events by default)
+- Used by popover-based wrappers (Picker, FilterPicker) together with `disallowEmptySelection` to close the popover when the user re-selects the current item
+
 **disableSelectionToggle** (`boolean`, default: `false`)
 - When `true`, clicking an already-selected item keeps it selected instead of toggling it off
 - Useful when embedding ListBox inside components like ComboBox

package/docs/components/fields/PasswordInput.md

@@ -18,6 +18,7 @@ A password input is a specialized text field that masks user input to protect se
 
 - **`value`** `string` — The password value in controlled mode
 - **`defaultValue`** `string` — The default password value in uncontrolled mode
+- **`isBuffered`** `boolean` (default: `true`) — Whether typed text is held locally until the controlled `value` catches up. This is what keeps the caret in place when the value round-trips through a store that re-renders a pass late; `onChange` still fires on every keystroke. Set to `false` for a caller that must see the field snap back to its own `value` the moment it declines a keystroke.
 - **`placeholder`** `string` — Placeholder text when input is empty
 - **`icon`** — Icon element rendered before the input
 - **`prefix`** — Input decoration before the main input

package/docs/components/fields/Picker.md

@@ -45,7 +45,7 @@ Choose a different component when the interaction has another shape:
 - **`isCheckable`** `boolean` (default: `false`) — Whether to show checkboxes for multiple selection mode
 - **`showSelectAll`** `boolean` (default: `false`) — Whether to show "Select All" option in multiple selection mode
 - **`selectAllLabel`** `ReactNode` (default: `Select All`) — Label for the "Select All" option
-- **`disallowEmptySelection`** `boolean` (default: `false`) — Whether to disallow empty selection
+- **`disallowEmptySelection`** `boolean` (default: `false`) — Whether to disallow empty selection. In single selection mode, re-selecting the current item becomes a no-op: `onSelectionChange` is not fired and the popover closes
 - **`disabledKeys`** `Key[]` — Array of keys for disabled items
 - **`isClearable`** `boolean` (default: `false`) — Whether the picker shows a clear button when a selection is made
 - **`onClear`** `() => void` — Callback called when the clear button is pressed

package/docs/components/fields/SearchInput.md

@@ -18,6 +18,7 @@ A search input provides a specialized text field for search functionality, featu
 
 - **`value`** `string` — The search value in controlled mode
 - **`defaultValue`** `string` — The default search value in uncontrolled mode
+- **`isBuffered`** `boolean` (default: `true`) — Whether typed text is held locally until the controlled `value` catches up. This is what keeps the caret in place when the value round-trips through a store that re-renders a pass late; `onChange` still fires on every keystroke. Set to `false` for a caller that must see the field snap back to its own `value` the moment it declines a keystroke.
 - **`placeholder`** `string` — Placeholder text when input is empty
 - **`icon`** `ReactElement` — Icon element rendered before the input (default: search icon)
 - **`prefix`** `ReactNode` — Content rendered before the input

package/docs/components/fields/TextArea.md

@@ -39,6 +39,7 @@ These properties allow direct style application without using the `styles` prop:
 - **`rows`** `number` (default: `3`) — Number of visible text rows
 - **`value`** `string` — The text value in controlled mode
 - **`defaultValue`** `string` — The default text value in uncontrolled mode
+- **`isBuffered`** `boolean` (default: `true`) — Whether typed text is held locally until the controlled `value` catches up. This is what keeps the caret in place when the value round-trips through a store that re-renders a pass late; `onChange` still fires on every keystroke. Set to `false` for a caller that must see the field snap back to its own `value` the moment it declines a keystroke.
 - **`placeholder`** `string` — Placeholder text when input is empty
 - **`icon`** `ReactElement` — Icon element rendered before the input
 - **`prefix`** `ReactNode` — Input decoration before the main input

package/docs/components/fields/TextInput.md

@@ -18,6 +18,7 @@ A text input component that allows users to input custom text entries with a key
 
 - **`value`** `string` — The text value in controlled mode
 - **`defaultValue`** `string` — The default text value in uncontrolled mode
+- **`isBuffered`** `boolean` (default: `true`) — Whether typed text is held locally until the controlled `value` catches up. This is what keeps the caret in place when the value round-trips through a store that re-renders a pass late; `onChange` still fires on every keystroke. Set to `false` for a caller that must see the field snap back to its own `value` the moment it declines a keystroke.
 - **`placeholder`** `string` — Placeholder text when input is empty
 - **`icon`** — Icon element rendered before the input
 - **`prefix`** — Input decoration before the main input

package/docs/components/navigation/Pagination.md

@@ -0,0 +1,245 @@
+# Pagination
+
+Pagination is the control for moving through a paged collection. It renders a
+bounded run of page buttons, optional first/last jumps, an optional page-size
+selector, and an optional item-range summary.
+
+It is a pure control: it owns no data. Client-side slicing lives in the
+companion `usePagination` hook, and `ItemTable` composes the two.
+
+## When to Use
+
+- Paging through a list, table, or grid where the user needs to jump around
+  rather than scroll.
+- Cursor pagination with an unknown total — supply `hasNextPage` and omit
+  `total`/`totalPages`, and the control degrades to prev/next.
+- Anywhere you need a page-size selector wired to the same state.
+
+Prefer infinite scroll when the collection is a feed the user skims, and
+pagination when they need stable, addressable positions.
+
+## Component
+
+### Properties
+
+- **`page`** `number` — Controlled current page, 1-based. Pair with
+  `onPageChange`.
+- **`defaultPage`** `number` (default: `1`) — Initial page for uncontrolled
+  usage.
+- **`onPageChange`** `(page: number) => void` — Never fires with a page outside
+  `1…totalPages` when the total is known.
+- **`total`** `number` — Total items across all pages. Preferred over
+  `totalPages`; it also powers the range summary and the `select` type's range
+  labels.
+- **`totalPages`** `number` — Total pages. Only needed when the item count is
+  genuinely unavailable. Wins over the value derived from `total` + `pageSize`.
+- **`pageSize`** `number` — Controlled page size.
+- **`defaultPageSize`** `number` (default: `50`) — Initial page size for
+  uncontrolled usage.
+- **`onPageSizeChange`** `(pageSize: number) => void` — Changing the size also
+  resets to page 1, because the old page index no longer refers to the same
+  items.
+- **`pageSizeOptions`** `number[]` — Supplying this **and** `onPageSizeChange`
+  renders the size selector.
+- **`type`** `'numbers' | 'select' | 'compact'` (default: `'numbers'`) — How the
+  page control is rendered. `numbers` is the default because it is the only mode
+  whose rendered element count is independent of the page count; `select`
+  materializes one entry per page, so above a safety cap the component falls
+  back to `compact` on its own.
+- **`siblingCount`** `number` (default: `1`) — Page buttons either side of the
+  current page.
+- **`boundaryCount`** `number` (default: `1`) — Page buttons pinned at each end.
+  Together with `siblingCount` this bounds the rendered count at
+  `boundaryCount * 2 + siblingCount * 2 + 3`.
+- **`size`** `'small' | 'medium'` (default: `'small'`) — Control size.
+- **`isDisabled`** `boolean` — Disable every control.
+- **`hasNextPage`** `boolean` — Keeps "next" enabled when the total is unknown.
+  Ignored once `total` or `totalPages` is supplied — a known total is always
+  authoritative.
+- **`isCompact`** `boolean` (default: `false`) — Hide the first/last jump
+  buttons.
+- **`summary`** `boolean | ((info: CubeTablePageInfo) => ReactNode)` (default:
+  `false`) — `true` renders the localized `1–50 of 1,204`, with numbers
+  formatted for the active locale. Pass a function for full control.
+- **`labelFormatter`** `(info: CubeTablePageInfo) => ReactNode` — Labels the
+  entries of `type="select"`. Receives the page info with `page` set to the
+  entry being labelled.
+- **`ariaLabel`** `string` — Labels the `<nav>` landmark. Defaults to the
+  localized "Pagination".
+
+#### `CubeTablePageInfo`
+
+Handed to `summary` and `labelFormatter`:
+
+```ts
+interface CubeTablePageInfo {
+  page: number;       // 1-based
+  pageSize: number;
+  totalPages: number;
+  total: number;      // 0 when unknown
+  from: number;       // 1-based index of the first item on this page
+  to: number;         // 1-based index of the last item on this page
+}
+```
+
+### Base Properties
+
+Supports Base Properties.
+
+### Styling Properties
+
+#### styles
+
+Customizes the root element.
+
+**Sub-elements:**
+
+- `Summary` — the range summary and the `compact` page label
+- `Controls` — the row of nav and page buttons
+- `Gap` — the `…` between two runs of page numbers
+
+#### pageSizeSelectStyles
+
+Customizes the page-size `Select`.
+
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`
+
+### Modifiers
+
+| Modifier | Type | Description |
+| -------- | ---- | ----------- |
+| `size` | `'small' \| 'medium'` | Control size |
+
+## Examples
+
+### Basic Usage
+
+```jsx
+const [page, setPage] = useState(1);
+
+<Pagination page={page} pageSize={50} total={1204} onPageChange={setPage} />;
+```
+
+### With a Summary
+
+```jsx
+<Pagination page={3} pageSize={50} total={1204} summary onPageChange={setPage} />
+```
+
+### Many Pages
+
+A million rows at 50 per page is 20 000 pages — and still ~7 buttons.
+
+```jsx
+<Pagination page={9421} pageSize={50} total={1000000} summary onPageChange={setPage} />
+```
+
+### Page Size Selector
+
+```jsx
+const [page, setPage] = useState(1);
+const [pageSize, setPageSize] = useState(50);
+
+<Pagination
+  page={page}
+  pageSize={pageSize}
+  total={1204}
+  pageSizeOptions={[10, 20, 50, 100, 500]}
+  summary
+  onPageChange={setPage}
+  onPageSizeChange={setPageSize}
+/>;
+```
+
+### Unknown Total (Cursor Pagination)
+
+```jsx
+<Pagination page={page} hasNextPage={hasNextPage} onPageChange={setPage} />
+```
+
+### Compact
+
+```jsx
+<Pagination type="compact" page={3} pageSize={50} total={1204} summary />
+```
+
+### Client-side Slicing with `usePagination`
+
+```jsx
+const { pageItems, page, pageSize, total, setPage, setPageSize } =
+  usePagination(items, { defaultPageSize: 10 });
+
+return (
+  <>
+    {pageItems.map((item) => (
+      <Text key={item}>{item}</Text>
+    ))}
+    <Pagination
+      page={page}
+      pageSize={pageSize}
+      total={total}
+      pageSizeOptions={[5, 10, 25]}
+      summary
+      onPageChange={setPage}
+      onPageSizeChange={setPageSize}
+    />
+  </>
+);
+```
+
+## Accessibility
+
+### Keyboard Navigation
+
+- `Tab` — moves through the controls in visual order.
+- `Enter` / `Space` — activates the focused button.
+
+Every control is a real `<button>`, so there is nothing bespoke to learn.
+
+### Screen Reader Support
+
+- The root is a `<nav>` landmark labelled "Pagination" (override with
+  `ariaLabel`).
+- The current page button carries `aria-current="page"`.
+- Every button has an explicit `aria-label` — "Page 3", "Next page", and so on
+  — so an icon-only button is never announced as unlabelled.
+- The `…` gap is `aria-hidden`; it conveys nothing a screen reader user needs.
+
+### ARIA Properties
+
+| Property | Applied to |
+| -------- | ---------- |
+| `aria-label` | The `<nav>` and every button |
+| `aria-current="page"` | The current page button |
+| `aria-hidden="true"` | The `…` gap |
+
+## Best Practices
+
+- Do: pass `total` rather than `totalPages` when you know the item count — the
+  summary and range labels both need it.
+- Do: use `type="numbers"` (the default) for anything that can grow. It is the
+  only mode whose cost does not scale with the page count.
+- Do: reset to page 1 whenever the underlying query changes (a new search term,
+  a new filter). A stale page index against a smaller result set shows an empty
+  page.
+- Don't: render `type="select"` over a large page count. It builds one
+  collection item per page.
+- Don't: pass both `hasNextPage` and a known total and expect the former to win
+  — it doesn't.
+
+## Suggested Improvements
+
+- A "jump to page" input for very large page counts.
+- Optional URL synchronization, so a page is linkable.
+
+## Related Components
+
+- ItemTable — composes `Pagination` in its footer
+- [Select](../fields/Select.md) — used for the page-size selector
+- [Button](../actions/Button.md) — used for every nav and page control

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.156.0",
+  "version": "0.157.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -48,6 +48,7 @@
     "@react-aria/ssr": "^3.9.10",
     "@react-aria/utils": "^3.32.0",
     "@react-spectrum/utils": "^3.12.10",
+    "@react-stately/selection": "^3.20.7",
     "@react-stately/utils": "^3.11.0",
     "@react-types/shared": "^3.32.1",
     "@tabler/icons-react": "^3.31.0",
@@ -104,7 +105,9 @@
     "@types/react-test-renderer": "^18.0.7",
     "@uiw/react-codemirror": "^4.25.4",
     "@vitejs/plugin-react": "^6.0.0",
-    "@vitest/coverage-v8": "^4.1.0",
+    "@vitest/browser": "^4.1.10",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10",
     "best-effort-json-parser": "^1.2.1",
     "bytes": "^3.1.2",
     "chromatic": "^13.1.4",
@@ -117,6 +120,7 @@
     "markdown-table": "^3.0.3",
     "npm-run-all": "^4.1.5",
     "oxlint": "^1.72.0",
+    "playwright": "^1.62.1",
     "prettier": "^3.2.5",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
@@ -131,7 +135,7 @@
     "tsdown": "^0.20.3",
     "typescript": "^5.6.3",
     "vite": "^8.0.0",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.10"
   },
   "browserslist": [
     "last 2 Chrome versions",
@@ -148,6 +152,7 @@
     "build": "tsdown",
     "watch": "tsdown --watch",
     "test": "vitest run",
+    "test:browser": "vitest run --config vitest.browser.config.ts",
     "test-cover": "vitest run --coverage",
     "test-watch": "vitest",
     "prettier": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",

package/dist/components/fields/ColorPicker/ColorPickerPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerPanel.js","names":["Slider","Radio"],"sources":["../../../../src/components/fields/ColorPicker/ColorPickerPanel.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport { useMemo } from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { Radio } from '../RadioGroup';\nimport { Slider } from '../Slider';\n\nimport {\n  CHANNELS,\n  COLOR_SPACE_HINTS,\n  COLOR_SPACE_LABELS,\n  COLOR_SPACES,\n  ColorChannel,\n  ColorSpace,\n} from './channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  getContrastingColor,\n  toHex,\n} from './color';\n\nconst PanelElement = tasty({\n  qa: 'ColorPickerPanel',\n  styles: {\n    display: 'grid',\n    flow: 'row',\n    gap: '1x',\n    padding: '1x',\n    width: '34x',\n  },\n});\n\nconst PreviewElement = tasty({\n  qa: 'ColorPreview',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    height: '6x',\n    radius: true,\n    preset: 's4',\n    fill: '(#color-picker, #clear)',\n    color: '(#color-picker-contrast, #dark)',\n    shadow: 'inset 0 0 0 1bw #dark.1',\n  },\n});\n\nconst ChannelsElement = tasty({\n  styles: {\n    display: 'grid',\n    gridColumns: 'max-content 1sf max-content',\n    placeItems: 'center stretch',\n    gap: '1x',\n  },\n});\n\nconst ChannelLabelElement = tasty({\n  styles: {\n    preset: 'c2',\n    color: '#dark-03',\n    textAlign: 'center',\n    width: '2x',\n  },\n});\n\nconst ChannelTrackElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center stretch',\n  },\n});\n\nconst ChannelValueElement = tasty({\n  styles: {\n    preset: 's4',\n    color: '#dark-02',\n    textAlign: 'right',\n    whiteSpace: 'nowrap',\n    width: '5.5x',\n  },\n});\n\n/**\n * The gradient reaches the track through a plain custom property so the track\n * keeps a single cached style rule. A color picker moves its channels\n * continuously, and a fresh `styles` object per frame would emit a fresh CSS\n * rule per frame.\n */\nconst TRACK_STYLES: Styles = {\n  height: '1x',\n  top: '.5x',\n  radius: '1r',\n  fill: '#clear',\n  image: '$channel-gradient',\n  shadow: 'inset 0 0 0 1bw #dark.1',\n  Fill: false,\n};\n\n/** A ring keeps the thumb visible wherever it sits on its own gradient. */\nconst THUMB_STYLES: Styles = {\n  shadow: '0 0 0 2bw #surface, 0 0 0 3bw #dark.2',\n};\n\nconst THUMB_TOKENS = { '#slider-thumb': '(#color-picker, #surface)' };\n\nconst SPACE_STYLES: Styles = { width: '100%' };\nconst TAB_STYLES: Styles = { flexGrow: 1 };\n\nexport interface ColorPickerPanelProps {\n  color: ColorValue;\n  space: ColorSpace;\n  isDisabled?: boolean;\n  /** Notation used for the preview caption. */\n  previewFormat: ColorFormat;\n  onChange: (color: ColorValue) => void;\n  onSpaceChange: (space: ColorSpace) => void;\n}\n\ninterface ChannelRowProps {\n  channel: ColorChannel;\n  color: ColorValue;\n  isDisabled?: boolean;\n  onChange: (color: ColorValue) => void;\n}\n\nfunction ChannelRow({ channel, color, isDisabled, onChange }: ChannelRowProps) {\n  const max = channel.max(color);\n\n  const handleChange = useEvent((value: number) => {\n    onChange(channel.apply(color, value));\n  });\n\n  return (\n    <>\n      <ChannelLabelElement aria-hidden=\"true\">\n        {channel.label}\n      </ChannelLabelElement>\n      <ChannelTrackElement\n        style={{\n          '--channel-gradient': `linear-gradient(to right, ${channel.stops(\n            color,\n          )})`,\n        }}\n      >\n        <Slider\n          aria-label={channel.title}\n          value={Math.min(channel.value(color), max)}\n          minValue={channel.min}\n          maxValue={max}\n          step={channel.step}\n          isDisabled={isDisabled}\n          trackStyles={TRACK_STYLES}\n          thumbStyles={THUMB_STYLES}\n          thumbTokens={THUMB_TOKENS}\n          onChange={handleChange}\n        />\n      </ChannelTrackElement>\n      <ChannelValueElement>{channel.display(color)}</ChannelValueElement>\n    </>\n  );\n}\n\n/**\n * The popover body of `ColorPicker`: a preview, a switch between the three\n * color concepts, and one gradient slider per channel of the active one.\n */\nexport function ColorPickerPanel(props: ColorPickerPanelProps) {\n  const { color, space, isDisabled, previewFormat, onChange, onSpaceChange } =\n    props;\n\n  const colorTokens = useMemo(\n    () => ({\n      '--color-picker-color': toHex(color),\n      '--color-picker-contrast-color': getContrastingColor(color),\n    }),\n    [color],\n  );\n\n  const handleSpaceChange = useEvent((value: string) => {\n    onSpaceChange(value as ColorSpace);\n  });\n\n  return (\n    <PanelElement style={colorTokens}>\n      <PreviewElement>{formatColor(color, previewFormat)}</PreviewElement>\n      <Radio.Tabs\n        aria-label=\"Color space\"\n        value={space}\n        isDisabled={isDisabled}\n        styles={SPACE_STYLES}\n        onChange={handleSpaceChange}\n      >\n        {COLOR_SPACES.map((item) => (\n          <Radio\n            key={item}\n            value={item}\n            aria-label={COLOR_SPACE_LABELS[item]}\n            tooltip={COLOR_SPACE_HINTS[item]}\n            styles={TAB_STYLES}\n          >\n            {COLOR_SPACE_LABELS[item]}\n          </Radio>\n        ))}\n      </Radio.Tabs>\n      <ChannelsElement>\n        {CHANNELS[space].map((channel) => (\n          <ChannelRow\n            key={`${space}-${channel.label}`}\n            channel={channel}\n            color={color}\n            isDisabled={isDisabled}\n            onChange={onChange}\n          />\n        ))}\n      </ChannelsElement>\n    </PanelElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAuBA,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,KAAK;EACL,SAAS;EACT,OAAO;EACR;CACF,CAAC;AAEF,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAEF,MAAM,kBAAkB,MAAM,EAC5B,QAAQ;CACN,SAAS;CACT,aAAa;CACb,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAM,sBAAsB,MAAM,EAChC,QAAQ;CACN,QAAQ;CACR,OAAO;CACP,WAAW;CACX,OAAO;CACR,EACF,CAAC;AAEF,MAAM,sBAAsB,MAAM,EAChC,QAAQ;CACN,SAAS;CACT,YAAY;CACb,EACF,CAAC;AAEF,MAAM,sBAAsB,MAAM,EAChC,QAAQ;CACN,QAAQ;CACR,OAAO;CACP,WAAW;CACX,YAAY;CACZ,OAAO;CACR,EACF,CAAC;;;;;;;AAQF,MAAM,eAAuB;CAC3B,QAAQ;CACR,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACP,QAAQ;CACR,MAAM;CACP;;AAGD,MAAM,eAAuB,EAC3B,QAAQ,yCACT;AAED,MAAM,eAAe,EAAE,iBAAiB,6BAA6B;AAErE,MAAM,eAAuB,EAAE,OAAO,QAAQ;AAC9C,MAAM,aAAqB,EAAE,UAAU,GAAG;AAmB1C,SAAS,WAAW,EAAE,SAAS,OAAO,YAAY,YAA6B;CAC7E,MAAM,MAAM,QAAQ,IAAI,MAAM;CAE9B,MAAM,eAAe,UAAU,UAAkB;AAC/C,WAAS,QAAQ,MAAM,OAAO,MAAM,CAAC;GACrC;AAEF,QACE;EACE,oBAAC;GAAoB,eAAY;aAC9B,QAAQ;IACW;EACtB,oBAAC;GACC,OAAO,EACL,sBAAsB,6BAA6B,QAAQ,MACzD,MACD,CAAC,IACH;aAED,oBAACA;IACC,cAAY,QAAQ;IACpB,OAAO,KAAK,IAAI,QAAQ,MAAM,MAAM,EAAE,IAAI;IAC1C,UAAU,QAAQ;IAClB,UAAU;IACV,MAAM,QAAQ;IACF;IACZ,aAAa;IACb,aAAa;IACb,aAAa;IACb,UAAU;KACV;IACkB;EACtB,oBAAC,iCAAqB,QAAQ,QAAQ,MAAM,GAAuB;KAClE;;;;;;AAQP,SAAgB,iBAAiB,OAA8B;CAC7D,MAAM,EAAE,OAAO,OAAO,YAAY,eAAe,UAAU,kBACzD;CAEF,MAAM,cAAc,eACX;EACL,wBAAwB,MAAM,MAAM;EACpC,iCAAiC,oBAAoB,MAAM;EAC5D,GACD,CAAC,MAAM,CACR;CAED,MAAM,oBAAoB,UAAU,UAAkB;AACpD,gBAAc,MAAoB;GAClC;AAEF,QACE,qBAAC;EAAa,OAAO;;GACnB,oBAAC,4BAAgB,YAAY,OAAO,cAAc,GAAkB;GACpE,oBAACC,QAAM;IACL,cAAW;IACX,OAAO;IACK;IACZ,QAAQ;IACR,UAAU;cAET,aAAa,KAAK,SACjB,oBAACA;KAEC,OAAO;KACP,cAAY,mBAAmB;KAC/B,SAAS,kBAAkB;KAC3B,QAAQ;eAEP,mBAAmB;OANf,KAOC,CACR;KACS;GACb,oBAAC,6BACE,SAAS,OAAO,KAAK,YACpB,oBAAC;IAEU;IACF;IACK;IACF;MAJL,GAAG,MAAM,GAAG,QAAQ,QAKzB,CACF,GACc;;GACL"}

package/dist/components/fields/ColorPicker/channels.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"channels.js","names":[],"sources":["../../../../src/components/fields/ColorPicker/channels.ts"],"sourcesContent":["import {\n  ColorValue,\n  fromOkhst,\n  fromOklch,\n  fromRgb,\n  isAchromatic,\n  maxChroma,\n  normalizeHue,\n  toHex,\n  toOkhst,\n  toOklch,\n  toRgb,\n} from './color';\n\n/**\n * The three color concepts the popover can be driven by. They all edit the\n * same canonical value — only the axes the user manipulates differ.\n */\nexport const COLOR_SPACES = ['hst', 'lch', 'rgb'] as const;\n\nexport type ColorSpace = (typeof COLOR_SPACES)[number];\n\nexport const COLOR_SPACE_LABELS: Record<ColorSpace, string> = {\n  hst: 'HST',\n  lch: 'LCH',\n  rgb: 'RGB',\n};\n\nexport const COLOR_SPACE_HINTS: Record<ColorSpace, string> = {\n  hst: 'OKHST — hue, saturation, tone',\n  lch: 'OKLCH — lightness, chroma, hue',\n  rgb: 'sRGB — red, green, blue',\n};\n\nexport interface ColorChannel {\n  /** Single-letter axis name shown next to the slider. */\n  label: string;\n  /** Accessible name for the slider. */\n  title: string;\n  min: number;\n  step: number;\n  /** The upper bound. Chroma is gamut-bound, so it depends on the color. */\n  max: (color: ColorValue) => number;\n  value: (color: ColorValue) => number;\n  /** The color this channel produces when moved to `value`. */\n  apply: (color: ColorValue, value: number) => ColorValue;\n  /** Comma-separated gradient stops describing the channel's whole range. */\n  stops: (color: ColorValue) => string;\n  /** Human-readable rendering of the current channel value. */\n  display: (color: ColorValue) => string;\n}\n\nconst constant = (value: number) => () => value;\n\nfunction round(value: number, precision = 2): number {\n  const factor = 10 ** precision;\n\n  return Math.round(value * factor) / factor;\n}\n\n/**\n * `count` evenly spaced gradient stops, always as hex. Perceptual channels are\n * not linear in sRGB, so a two-stop gradient would misrepresent them —\n * sampling the real conversion keeps the track honest. Hex (rather than an\n * `okhsl()` string) because the gradient reaches the DOM as a raw custom\n * property, without passing through Tasty's color functions.\n */\nfunction ramp(count: number, at: (position: number) => ColorValue): string {\n  return Array.from({ length: count }, (_, index) =>\n    toHex(at(index / (count - 1))),\n  ).join(', ');\n}\n\n/**\n * The hue strip is drawn at full saturation and a fixed OKHSL lightness, which\n * keeps it perceptually even instead of spiking at yellow the way a CSS-HSL\n * rainbow does. Its own saturation and tone stay fixed: the strip is the same\n * in HST and in LCH, where `H` means the same thing.\n */\nconst HUE_STOPS = ramp(25, (position) => ({\n  h: position * 360,\n  s: 1,\n  l: 0.6,\n}));\n\nconst hueChannel: ColorChannel = {\n  label: 'H',\n  title: 'Hue',\n  min: 0,\n  // 360° is the same angle as 0°, so the last usable stop is 359 — the range\n  // `HueSlider` exposes as well.\n  max: constant(359),\n  step: 1,\n  value: (color) => round(color.h, 1),\n  apply: (color, value) => ({ ...color, h: normalizeHue(value) }),\n  stops: () => HUE_STOPS,\n  display: (color) => `${Math.round(color.h)}°`,\n};\n\nconst saturationChannel: ColorChannel = {\n  label: 'S',\n  title: 'Saturation',\n  min: 0,\n  max: constant(100),\n  step: 1,\n  value: (color) => round(color.s * 100, 1),\n  apply: (color, value) => ({ ...color, s: value / 100 }),\n  stops: (color) => ramp(7, (position) => ({ ...color, s: position })),\n  display: (color) => `${Math.round(color.s * 100)}%`,\n};\n\nconst toneChannel: ColorChannel = {\n  label: 'T',\n  title: 'Tone',\n  min: 0,\n  max: constant(100),\n  step: 1,\n  value: (color) => round(toOkhst(color).t * 100, 1),\n  apply: (color, value) =>\n    fromOkhst({ h: color.h, s: color.s, t: value / 100 }),\n  stops: (color) =>\n    ramp(7, (position) => fromOkhst({ h: color.h, s: color.s, t: position })),\n  display: (color) => `${Math.round(toOkhst(color).t * 100)}%`,\n};\n\nconst lightnessChannel: ColorChannel = {\n  label: 'L',\n  title: 'Lightness',\n  min: 0,\n  max: constant(100),\n  step: 1,\n  value: (color) => round(toOklch(color).l * 100, 1),\n  apply: (color, value) => {\n    const { c, h } = toOklch(color);\n\n    return fromOklch({ l: value / 100, c, h });\n  },\n  stops: (color) => {\n    const { c, h } = toOklch(color);\n\n    return ramp(7, (position) => fromOklch({ l: position, c, h }));\n  },\n  display: (color) => `${Math.round(toOklch(color).l * 100)}%`,\n};\n\nconst chromaChannel: ColorChannel = {\n  label: 'C',\n  title: 'Chroma',\n  min: 0,\n  // Chroma has no fixed ceiling: how far it can go depends on how far the sRGB\n  // gamut reaches at the current lightness and hue. Never zero, so the slider\n  // always has a range to divide by.\n  max: (color) => Math.max(round(maxChroma(color.h, color.l), 4), 0.001),\n  step: 0.001,\n  value: (color) => round(toOklch(color).c, 4),\n  apply: (color, value) => {\n    const { l, h } = toOklch(color);\n\n    return fromOklch({ l, c: value, h });\n  },\n  stops: (color) => {\n    const { l, h } = toOklch(color);\n    const limit = maxChroma(color.h, color.l);\n\n    return ramp(7, (position) => fromOklch({ l, c: position * limit, h }));\n  },\n  display: (color) => toOklch(color).c.toFixed(3),\n};\n\nfunction rgbChannel(\n  key: 'r' | 'g' | 'b',\n  label: string,\n  title: string,\n): ColorChannel {\n  const at = (color: ColorValue, value: number) =>\n    fromRgb({ ...toRgb(color), [key]: value });\n\n  return {\n    label,\n    title,\n    min: 0,\n    max: constant(255),\n    step: 1,\n    value: (color) => toRgb(color)[key],\n    apply: (color, value) => {\n      const next = at(color, value);\n\n      // A gray has no hue of its own, and the conversion invents one. Keeping\n      // the authored hue means switching back to HST or LCH resumes where the\n      // user left off.\n      return isAchromatic(next) ? { ...next, h: color.h } : next;\n    },\n    // An sRGB channel is linear in the space CSS interpolates gradients in, so\n    // the two ends describe the whole ramp exactly.\n    stops: (color) => ramp(2, (position) => at(color, position * 255)),\n    display: (color) => `${toRgb(color)[key]}`,\n  };\n}\n\nexport const CHANNELS: Record<ColorSpace, ColorChannel[]> = {\n  hst: [hueChannel, saturationChannel, toneChannel],\n  lch: [lightnessChannel, chromaChannel, hueChannel],\n  rgb: [\n    rgbChannel('r', 'R', 'Red'),\n    rgbChannel('g', 'G', 'Green'),\n    rgbChannel('b', 'B', 'Blue'),\n  ],\n};\n"],"mappings":";;;;;;;;AAkBA,MAAa,eAAe;CAAC;CAAO;CAAO;CAAM;AAIjD,MAAa,qBAAiD;CAC5D,KAAK;CACL,KAAK;CACL,KAAK;CACN;AAED,MAAa,oBAAgD;CAC3D,KAAK;CACL,KAAK;CACL,KAAK;CACN;AAoBD,MAAM,YAAY,gBAAwB;AAE1C,SAAS,MAAM,OAAe,YAAY,GAAW;CACnD,MAAM,SAAS,MAAM;AAErB,QAAO,KAAK,MAAM,QAAQ,OAAO,GAAG;;;;;;;;;AAUtC,SAAS,KAAK,OAAe,IAA8C;AACzE,QAAO,MAAM,KAAK,EAAE,QAAQ,OAAO,GAAG,GAAG,UACvC,MAAM,GAAG,SAAS,QAAQ,GAAG,CAAC,CAC/B,CAAC,KAAK,KAAK;;;;;;;;AASd,MAAM,YAAY,KAAK,KAAK,cAAc;CACxC,GAAG,WAAW;CACd,GAAG;CACH,GAAG;CACJ,EAAE;AAEH,MAAM,aAA2B;CAC/B,OAAO;CACP,OAAO;CACP,KAAK;CAGL,KAAK,SAAS,IAAI;CAClB,MAAM;CACN,QAAQ,UAAU,MAAM,MAAM,GAAG,EAAE;CACnC,QAAQ,OAAO,WAAW;EAAE,GAAG;EAAO,GAAG,aAAa,MAAM;EAAE;CAC9D,aAAa;CACb,UAAU,UAAU,GAAG,KAAK,MAAM,MAAM,EAAE,CAAC;CAC5C;AAED,MAAM,oBAAkC;CACtC,OAAO;CACP,OAAO;CACP,KAAK;CACL,KAAK,SAAS,IAAI;CAClB,MAAM;CACN,QAAQ,UAAU,MAAM,MAAM,IAAI,KAAK,EAAE;CACzC,QAAQ,OAAO,WAAW;EAAE,GAAG;EAAO,GAAG,QAAQ;EAAK;CACtD,QAAQ,UAAU,KAAK,IAAI,cAAc;EAAE,GAAG;EAAO,GAAG;EAAU,EAAE;CACpE,UAAU,UAAU,GAAG,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC;CAClD;AAED,MAAM,cAA4B;CAChC,OAAO;CACP,OAAO;CACP,KAAK;CACL,KAAK,SAAS,IAAI;CAClB,MAAM;CACN,QAAQ,UAAU,MAAM,QAAQ,MAAM,CAAC,IAAI,KAAK,EAAE;CAClD,QAAQ,OAAO,UACb,UAAU;EAAE,GAAG,MAAM;EAAG,GAAG,MAAM;EAAG,GAAG,QAAQ;EAAK,CAAC;CACvD,QAAQ,UACN,KAAK,IAAI,aAAa,UAAU;EAAE,GAAG,MAAM;EAAG,GAAG,MAAM;EAAG,GAAG;EAAU,CAAC,CAAC;CAC3E,UAAU,UAAU,GAAG,KAAK,MAAM,QAAQ,MAAM,CAAC,IAAI,IAAI,CAAC;CAC3D;AAED,MAAM,mBAAiC;CACrC,OAAO;CACP,OAAO;CACP,KAAK;CACL,KAAK,SAAS,IAAI;CAClB,MAAM;CACN,QAAQ,UAAU,MAAM,QAAQ,MAAM,CAAC,IAAI,KAAK,EAAE;CAClD,QAAQ,OAAO,UAAU;EACvB,MAAM,EAAE,GAAG,MAAM,QAAQ,MAAM;AAE/B,SAAO,UAAU;GAAE,GAAG,QAAQ;GAAK;GAAG;GAAG,CAAC;;CAE5C,QAAQ,UAAU;EAChB,MAAM,EAAE,GAAG,MAAM,QAAQ,MAAM;AAE/B,SAAO,KAAK,IAAI,aAAa,UAAU;GAAE,GAAG;GAAU;GAAG;GAAG,CAAC,CAAC;;CAEhE,UAAU,UAAU,GAAG,KAAK,MAAM,QAAQ,MAAM,CAAC,IAAI,IAAI,CAAC;CAC3D;AAED,MAAM,gBAA8B;CAClC,OAAO;CACP,OAAO;CACP,KAAK;CAIL,MAAM,UAAU,KAAK,IAAI,MAAM,UAAU,MAAM,GAAG,MAAM,EAAE,EAAE,EAAE,EAAE,KAAM;CACtE,MAAM;CACN,QAAQ,UAAU,MAAM,QAAQ,MAAM,CAAC,GAAG,EAAE;CAC5C,QAAQ,OAAO,UAAU;EACvB,MAAM,EAAE,GAAG,MAAM,QAAQ,MAAM;AAE/B,SAAO,UAAU;GAAE;GAAG,GAAG;GAAO;GAAG,CAAC;;CAEtC,QAAQ,UAAU;EAChB,MAAM,EAAE,GAAG,MAAM,QAAQ,MAAM;EAC/B,MAAM,QAAQ,UAAU,MAAM,GAAG,MAAM,EAAE;AAEzC,SAAO,KAAK,IAAI,aAAa,UAAU;GAAE;GAAG,GAAG,WAAW;GAAO;GAAG,CAAC,CAAC;;CAExE,UAAU,UAAU,QAAQ,MAAM,CAAC,EAAE,QAAQ,EAAE;CAChD;AAED,SAAS,WACP,KACA,OACA,OACc;CACd,MAAM,MAAM,OAAmB,UAC7B,QAAQ;EAAE,GAAG,MAAM,MAAM;GAAG,MAAM;EAAO,CAAC;AAE5C,QAAO;EACL;EACA;EACA,KAAK;EACL,KAAK,SAAS,IAAI;EAClB,MAAM;EACN,QAAQ,UAAU,MAAM,MAAM,CAAC;EAC/B,QAAQ,OAAO,UAAU;GACvB,MAAM,OAAO,GAAG,OAAO,MAAM;AAK7B,UAAO,aAAa,KAAK,GAAG;IAAE,GAAG;IAAM,GAAG,MAAM;IAAG,GAAG;;EAIxD,QAAQ,UAAU,KAAK,IAAI,aAAa,GAAG,OAAO,WAAW,IAAI,CAAC;EAClE,UAAU,UAAU,GAAG,MAAM,MAAM,CAAC;EACrC;;AAGH,MAAa,WAA+C;CAC1D,KAAK;EAAC;EAAY;EAAmB;EAAY;CACjD,KAAK;EAAC;EAAkB;EAAe;EAAW;CAClD,KAAK;EACH,WAAW,KAAK,KAAK,MAAM;EAC3B,WAAW,KAAK,KAAK,QAAQ;EAC7B,WAAW,KAAK,KAAK,OAAO;EAC7B;CACF"}

package/dist/components/fields/ColorPicker/color.d.ts

@@ -1,15 +0,0 @@
-
-import "@tenphi/glaze";
-
-//#region src/components/fields/ColorPicker/color.d.ts
-/**
- * Every color format the picker can read and write.
- *
- * `okhsl` and `okhst` are Glaze / Tasty spaces rather than native CSS ones,
- * but Tasty parses both, so the produced strings are usable as style values.
- */
-declare const COLOR_FORMATS: readonly ["hex", "rgb", "hsl", "okhsl", "okhst", "oklch"];
-type ColorFormat = (typeof COLOR_FORMATS)[number];
-//#endregion
-export { COLOR_FORMATS, ColorFormat };
-//# sourceMappingURL=color.d.ts.map