@cube-dev/ui-kit 0.0.0-canary-5cdeec5 → 0.0.0-canary-055298f

package/dist/utils/is-dev-env.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 //#region src/utils/is-dev-env.ts
 function isDevEnv() {
 	if (typeof window !== "undefined" && window.localStorage) try {

package/dist/utils/modules.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 //#region src/utils/modules.ts
 function extractModule(promise) {
 	return promise.then((module) => module.default || module);

package/dist/utils/promise.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 //#region src/utils/promise.ts
 function timeout(ms = 30) {
 	return new Promise((resolve) => {

package/dist/utils/raf.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 //#region src/utils/raf.ts
 /**
 * Chains N requestAnimationFrame calls and returns a cancel function.

package/dist/utils/random.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { Children, cloneElement, createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import { chain } from "./chain.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
 import { isTextOnly } from "./isTextOnly.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import { Children, isValidElement } from "react";
 
 //#region src/utils/react/isTextOnly.ts

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props) {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v));

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.d.ts

@@ -2,7 +2,7 @@
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.d.ts
-declare const useLayoutEffect$1: typeof React$1.useLayoutEffect;
+declare const useLayoutEffect$1: typeof React$1.useEffect;
 //#endregion
 export { useLayoutEffect$1 as useLayoutEffect };
 //# sourceMappingURL=useLayoutEffect.d.ts.map

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5cdeec5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-055298f | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-5cdeec5";
+const VERSION = "0.0.0-canary-055298f";
 const TASTY_VERSION = "3.0.1";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/components/fields/ColorPicker.md

@@ -34,6 +34,8 @@ readable and pasteable as text.
 - **`theme`** `CubeItemProps['theme']` (default: `default`) — Theme of the trigger
 - **`size`** `CubeItemProps['size']` — Size of the trigger
 - **`triggerTooltip`** `CubeItemProps['tooltip']` — Tooltip for the trigger, separate from the field tooltip
+- **`swatches`** `Array<string | { color: string; label?: string }>` — Colors to offer under the editor, as a [ColorSwatchGroup](./ColorSwatchGroup.md)
+- **`swatchColumns`** `number` — How many swatches per row. Defaults to a single row
 - **`isOpen`** `boolean` — Whether the popover is open (controlled)
 - **`defaultOpen`** `boolean` (default: `false`) — Whether the popover is open initially
 - **`onOpenChange`** `(isOpen: boolean) => void` — Fired when the popover opens or closes
@@ -84,6 +86,18 @@ The `mods` property accepts the following modifiers you can override:
 
 The swatch carries its own `empty` modifier while there is no color to show.
 
+### A palette under the editor
+
+Pass `swatches` and a [ColorSwatchGroup](./ColorSwatchGroup.md)
+appears below the channels, so a common color is one press away.
+
+```jsx
+<ColorPicker label="Brand color" swatches={palette} swatchColumns={4} />
+```
+
+That group never offers its own custom-color escape hatch, since the escape
+hatch is a `ColorPicker` and would nest popovers without end.
+
 ## Examples
 
 ### Basic usage

package/docs/components/fields/ColorSwatchGroup.md

@@ -0,0 +1,184 @@
+# 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` — How many swatches per row. Defaults to a single row
+- **`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`
+
+### Modifiers
+
+The `mods` property accepts the following modifiers you can override:
+
+| Modifier   | Type      | Description                        |
+| ---------- | --------- | ---------------------------------- |
+| `selected` | `boolean` | The swatch is the selected color   |
+| `disabled` | `boolean` | The group is disabled              |
+
+## 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
+
+Without `columns` the swatches sit on a single row.
+
+```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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-5cdeec5",
+  "version": "0.0.0-canary-055298f",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {

package/dist/components/fields/ListBoxPopover/useCompositeFocus.d.ts

@@ -1,2 +0,0 @@
-
-import React, { RefObject } from "react";

package/dist/components/portal/PortalProvider.d.ts

@@ -1,2 +0,0 @@
-
-import { RefObject } from "react";