@cube-dev/ui-kit 0.0.0-canary-e530064 → 0.0.0-canary-52c46a3

package/dist/components/data/TableBase/use-table-storage.js

@@ -0,0 +1,58 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-52c46a3 | Cube Dev Team */
+import { useCallback, useRef, useState } from "react";
+
+//#region src/components/data/TableBase/use-table-storage.ts
+/**
+* Namespaced so a `storageKey` cannot collide with whatever else the host app
+* keeps in `localStorage`, and so the kit's own stored shape can be migrated or
+* cleared as a group later.
+*/
+const PREFIX = "cube-ui-kit:table:";
+const DEFAULT_PERSIST_KEYS = ["pageSize", "columnWidths"];
+function read(storageKey) {
+	if (!storageKey || typeof window === "undefined") return {};
+	try {
+		const raw = window.localStorage.getItem(PREFIX + storageKey);
+		if (!raw) return {};
+		const parsed = JSON.parse(raw);
+		return parsed && typeof parsed === "object" ? parsed : {};
+	} catch {
+		return {};
+	}
+}
+/**
+* Persists the parts of the table's own state that a user expects to survive a
+* reload. Only state the table *owns* is stored: a controlled `pageSize` or
+* `sort` belongs to the page, so restoring it would fight the page's own source
+* of truth.
+*
+* Returns the state read at mount — a one-shot snapshot, deliberately, so a
+* second table sharing the key cannot yank this one's page size mid-session.
+*/
+function useTableStorage(storageKey, persist = DEFAULT_PERSIST_KEYS) {
+	const [initial] = useState(() => read(storageKey));
+	const persistRef = useRef(persist);
+	persistRef.current = persist;
+	const write = useCallback((patch) => {
+		if (!storageKey || typeof window === "undefined") return;
+		const allowed = persistRef.current;
+		const entries = Object.entries(patch).filter(([key]) => allowed.includes(key));
+		if (!entries.length) return;
+		try {
+			const next = {
+				...read(storageKey),
+				...Object.fromEntries(entries)
+			};
+			window.localStorage.setItem(PREFIX + storageKey, JSON.stringify(next));
+		} catch {}
+	}, [storageKey]);
+	return {
+		initial: storageKey ? initial : {},
+		has: (key) => !!storageKey && persist.includes(key),
+		write
+	};
+}
+
+//#endregion
+export { useTableStorage };
+//# sourceMappingURL=use-table-storage.js.map

package/dist/components/data/TableBase/use-table-storage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-table-storage.js","names":[],"sources":["../../../../src/components/data/TableBase/use-table-storage.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport type { CubeTableSort } from './types';\n\n/**\n * Namespaced so a `storageKey` cannot collide with whatever else the host app\n * keeps in `localStorage`, and so the kit's own stored shape can be migrated or\n * cleared as a group later.\n */\nconst PREFIX = 'cube-ui-kit:table:';\n\nexport type CubeTablePersistKey = 'pageSize' | 'columnWidths' | 'sort';\n\nexport interface CubeTableStoredState {\n  pageSize?: number;\n  sort?: CubeTableSort | null;\n  columnWidths?: Record<string, number>;\n}\n\nexport const DEFAULT_PERSIST_KEYS: CubeTablePersistKey[] = [\n  'pageSize',\n  'columnWidths',\n];\n\nfunction read(storageKey: string | undefined): CubeTableStoredState {\n  // No `storageKey` means the feature is off; no `window` means SSR. Both are\n  // normal, not errors.\n  if (!storageKey || typeof window === 'undefined') return {};\n\n  try {\n    const raw = window.localStorage.getItem(PREFIX + storageKey);\n\n    if (!raw) return {};\n\n    const parsed = JSON.parse(raw);\n\n    // Anything could be under that key — a hand-edited value, a stale shape\n    // from an older version. A non-object is simply ignored.\n    return parsed && typeof parsed === 'object' ? parsed : {};\n  } catch {\n    // Private mode, a disabled store, or malformed JSON. Persistence is a\n    // convenience; losing it must never take the table down with it.\n    return {};\n  }\n}\n\n/**\n * Persists the parts of the table's own state that a user expects to survive a\n * reload. Only state the table *owns* is stored: a controlled `pageSize` or\n * `sort` belongs to the page, so restoring it would fight the page's own source\n * of truth.\n *\n * Returns the state read at mount — a one-shot snapshot, deliberately, so a\n * second table sharing the key cannot yank this one's page size mid-session.\n */\nexport function useTableStorage(\n  storageKey: string | undefined,\n  persist: CubeTablePersistKey[] = DEFAULT_PERSIST_KEYS,\n) {\n  const [initial] = useState(() => read(storageKey));\n  const persistRef = useRef(persist);\n\n  persistRef.current = persist;\n\n  const write = useCallback(\n    (patch: CubeTableStoredState) => {\n      if (!storageKey || typeof window === 'undefined') return;\n\n      const allowed = persistRef.current;\n      const entries = Object.entries(patch).filter(([key]) =>\n        allowed.includes(key as CubeTablePersistKey),\n      );\n\n      if (!entries.length) return;\n\n      try {\n        const next = {\n          ...read(storageKey),\n          ...Object.fromEntries(entries),\n        };\n\n        window.localStorage.setItem(PREFIX + storageKey, JSON.stringify(next));\n      } catch {\n        // Quota exceeded or a disabled store — nothing to do but carry on.\n      }\n    },\n    [storageKey],\n  );\n\n  return {\n    initial: storageKey ? initial : {},\n    /** `true` when this key is persisted, so callers can skip the work. */\n    has: (key: CubeTablePersistKey) => !!storageKey && persist.includes(key),\n    write,\n  };\n}\n"],"mappings":";;;;;;;;;AASA,MAAM,SAAS;AAUf,MAAa,uBAA8C,CACzD,YACA,eACD;AAED,SAAS,KAAK,YAAsD;AAGlE,KAAI,CAAC,cAAc,OAAO,WAAW,YAAa,QAAO,EAAE;AAE3D,KAAI;EACF,MAAM,MAAM,OAAO,aAAa,QAAQ,SAAS,WAAW;AAE5D,MAAI,CAAC,IAAK,QAAO,EAAE;EAEnB,MAAM,SAAS,KAAK,MAAM,IAAI;AAI9B,SAAO,UAAU,OAAO,WAAW,WAAW,SAAS,EAAE;SACnD;AAGN,SAAO,EAAE;;;;;;;;;;;;AAab,SAAgB,gBACd,YACA,UAAiC,sBACjC;CACA,MAAM,CAAC,WAAW,eAAe,KAAK,WAAW,CAAC;CAClD,MAAM,aAAa,OAAO,QAAQ;AAElC,YAAW,UAAU;CAErB,MAAM,QAAQ,aACX,UAAgC;AAC/B,MAAI,CAAC,cAAc,OAAO,WAAW,YAAa;EAElD,MAAM,UAAU,WAAW;EAC3B,MAAM,UAAU,OAAO,QAAQ,MAAM,CAAC,QAAQ,CAAC,SAC7C,QAAQ,SAAS,IAA2B,CAC7C;AAED,MAAI,CAAC,QAAQ,OAAQ;AAErB,MAAI;GACF,MAAM,OAAO;IACX,GAAG,KAAK,WAAW;IACnB,GAAG,OAAO,YAAY,QAAQ;IAC/B;AAED,UAAO,aAAa,QAAQ,SAAS,YAAY,KAAK,UAAU,KAAK,CAAC;UAChE;IAIV,CAAC,WAAW,CACb;AAED,QAAO;EACL,SAAS,aAAa,UAAU,EAAE;EAElC,MAAM,QAA6B,CAAC,CAAC,cAAc,QAAQ,SAAS,IAAI;EACxE;EACD"}

package/dist/components/data/index.d.ts

@@ -0,0 +1,10 @@
+
+import { CubeTableAlign, CubeTableCellContext, CubeTableColumn, CubeTableColumnHeader, CubeTableHeaderContext, CubeTableRowContext, CubeTableRowSection, CubeTableSort, CubeTableSortDirection } from "./TableBase/types.js";
+import { CubeDataTableColumn, CubeDataTableProps } from "./DataTable/types.js";
+import { _DataTable } from "./DataTable/DataTable.js";
+import "./DataTable/index.js";
+import { CubeTableRowRenderProps } from "./TableBase/TableView.js";
+import { CubeItemTableColumn, CubeItemTableProps } from "./ItemTable/types.js";
+import { _ItemTable } from "./ItemTable/ItemTable.js";
+import "./ItemTable/index.js";
+import "./TableBase/index.js";

package/dist/components/fields/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e530064 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-52c46a3 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/Checkbox/CheckboxGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e530064 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-52c46a3 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { FormContext } from "../../form/Form/Form.js";

package/dist/components/fields/Checkbox/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e530064 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-52c46a3 | Cube Dev Team */
 import { createContext } from "react";
 
 //#region src/components/fields/Checkbox/context.ts

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

@@ -1,26 +1,35 @@
 
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
-import "../../content/Item/index.js";
-import { CubeItemProps } from "../../content/Item/Item.js";
-import { ColorFormat } from "../color/color.js";
-import { ColorSpace } from "../color/channels.js";
-import { CubeColorSwatchItem } from "../ColorSwatchGroup/ColorSwatchGroup.js";
-import "../ColorSwatchGroup/index.js";
-import { BaseProps, BlockStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import { ColorFormat } from "./color.js";
+import { ColorSpace } from "./channels.js";
+import { BaseProps, BaseStyleProps, BlockStyleProps, ColorStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
 import * as react from "react";
-import { ReactNode } from "react";
+import { FocusEvent } from "react";
 
 //#region src/components/fields/ColorPicker/ColorPicker.d.ts
-interface CubeColorPickerProps extends BaseProps, OuterStyleProps, BlockStyleProps, FieldBaseProps {
+/**
+ * How the text in the input relates to the committed value.
+ *
+ * - `forced` — the text is rewritten in `format` whenever it is not mid-edit,
+ *   and the value is always written in `format`.
+ * - `derive` — the user's own notation is left alone, and the value is
+ *   normalized in whichever notation the text is written in.
+ * - `free` — the text *is* the value, verbatim. It is still verified, so an
+ *   unparsable entry falls back to the last valid one.
+ */
+type ColorPickerFormatMode = 'forced' | 'derive' | 'free';
+interface CubeColorPickerProps extends BaseProps, BaseStyleProps, OuterStyleProps, BlockStyleProps, ColorStyleProps, FieldBaseProps {
   /** The selected color, as a color string. */
   value?: string | null;
   /** The initial color of an uncontrolled picker. */
   defaultValue?: string | null;
-  /** Called with the color string, or `null` when there is no color. */
+  /** Called with the normalized color string, or `null` when the field is cleared. */
   onChange?: (value: string | null) => void;
-  /** Notation the value is written in. */
+  /** Notation the value is written in, and the one `forced` mode displays. */
   format?: ColorFormat;
+  /** How strictly the input text is tied to `format`. */
+  formatMode?: ColorPickerFormatMode;
   /** Color concept the popover opens with. */
   defaultSpace?: ColorSpace;
   /** Whether the popover is open. Makes the disclosure controlled. */
@@ -29,36 +38,30 @@ interface CubeColorPickerProps extends BaseProps, OuterStyleProps, BlockStylePro
   defaultOpen?: boolean;
   /** Called when the popover opens or closes. */
   onOpenChange?: (isOpen: boolean) => void;
-  /** Whether the popover may flip to the other side of the trigger. */
+  /** Whether the popover may flip to the other side of the input. */
   shouldFlip?: boolean;
-  /** Replaces the color shown on the trigger. Pass `null` for a swatch on its own. */
-  children?: ReactNode;
-  /** Shown on the trigger while there is no color. */
-  placeholder?: ReactNode;
-  /** The size of the trigger. */
-  size?: CubeItemProps['size'];
-  /** The visual type of the trigger. */
-  type?: CubeItemProps['type'];
-  theme?: CubeItemProps['theme'];
-  /** Tooltip for the trigger, separate from the field tooltip. */
-  triggerTooltip?: CubeItemProps['tooltip'];
-  /** Colors to offer under the editor, for picking without dialing one in. */
-  swatches?: CubeColorSwatchItem[];
-  /** How many swatches per row. Defaults to a single row. */
-  swatchColumns?: number;
+  /** Text shown while the field is empty. */
+  placeholder?: string;
+  /** The size of the input. */
+  size?: 'small' | 'medium' | 'large' | (string & {});
+  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
   styles?: Styles;
-  /** Styles of the trigger button. */
+  /** Styles of the text input element. */
+  inputStyles?: Styles;
+  /** Styles of the popover trigger button. */
   triggerStyles?: Styles;
-  /** Styles of the color swatch. */
+  /** Styles of the color swatch shown inside the input. */
   swatchStyles?: Styles;
-  'aria-label'?: string;
 }
 /**
- * A color swatch that opens the color popover — the same one `ColorInput`
- * uses, without the text field. Reach for it when a color is chosen but never
- * typed: a toolbar, a chart legend, a cell in a dense table.
+ * A color field: the color as text, a swatch of the current value, and a
+ * popover to dial it in across OKHST, OKLCH and RGB.
  */
 declare const ColorPicker: react.ForwardRefExoticComponent<CubeColorPickerProps & react.RefAttributes<HTMLElement>>;
 //#endregion
-export { ColorPicker, CubeColorPickerProps };
+export { ColorPicker, ColorPickerFormatMode, CubeColorPickerProps };
 //# sourceMappingURL=ColorPicker.d.ts.map

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

@@ -1,188 +1,239 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e530064 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-52c46a3 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { _Text } from "../../content/Text.js";
-import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
-import { getValidationTheme } from "../../form/validation/resolve-validation-props.js";
-import { getValidationIcon } from "../../form/validation/ValidationIndicator.js";
+import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
+import { PipetteIcon } from "../../../icons/PipetteIcon.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
-import { wrapWithField } from "../../form/wrapper.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
-import { formatColor, parseColor } from "../color/color.js";
-import { ColorSwatch } from "../color/ColorSwatch.js";
-import { ColorPanel } from "../color/ColorPanel.js";
-import { ColorPopoverContext } from "../color/context.js";
-import { ColorInput } from "../ColorInput/ColorInput.js";
-import { ColorSwatchGroup } from "../ColorSwatchGroup/ColorSwatchGroup.js";
-import { BLOCK_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
+import { TextInputBase } from "../TextInput/TextInputBase.js";
+import { detectFormat, formatColor, parseColor, toHex } from "./color.js";
+import { ColorPickerPanel } from "./ColorPickerPanel.js";
+import { tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useTextField } from "react-aria";
 
 //#region src/components/fields/ColorPicker/ColorPicker.tsx
-/**
-* A popover caps its height at half the viewport. The panel can exceed that on
-* a short screen, and would otherwise spill outside the popover's own border.
-*/
-const POPOVER_STYLES = { overflow: "auto" };
-/**
-* The rule separating the palette from the editor. `Divider` is not used: it
-* places itself on named grid lines meant for menu layouts, which this panel
-* does not define, so it lands in the wrong row and spawns a stray column.
-*/
-const PALETTE_STYLES = {
-	border: "top",
-	padding: "1x top",
-	width: "100%"
-};
 /** What the popover starts from when there is no color to edit yet. */
 const FALLBACK_COLOR = {
 	h: 264,
 	s: .8,
 	l: .6
 };
-const ColorPickerWrapper = tasty({
-	qa: "ColorPickerWrapper",
+const SwatchElement = tasty({
+	qa: "ColorSwatch",
 	styles: {
-		display: "inline-grid",
-		flow: "column",
-		gridRows: "1sf",
-		placeContent: "stretch",
-		placeItems: "stretch"
+		display: "block",
+		width: "2.5x",
+		height: "2.5x",
+		radius: "1r",
+		fill: {
+			"": "(#color-picker, #clear)",
+			empty: "#clear"
+		},
+		shadow: "inset 0 0 0 1bw #dark.15",
+		image: {
+			"": false,
+			empty: "linear-gradient(to bottom right, #clear 46%, #danger 46%, #danger 54%, #clear 54%)"
+		}
 	}
 });
+const ColorPickerButton = tasty(ItemAction, {
+	qa: "ColorPickerButton",
+	icon: /* @__PURE__ */ jsx(PipetteIcon, {})
+});
 /**
-* A color swatch that opens the color popover — the same one `ColorInput`
-* uses, without the text field. Reach for it when a color is chosen but never
-* typed: a toolbar, a chart legend, a cell in a dense table.
+* A color field: the color as text, a swatch of the current value, and a
+* popover to dial it in across OKHST, OKLCH and RGB.
 */
 const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 	const props = useFieldProps(allProps, {
-		defaultValidationTrigger: "onChange",
+		defaultValidationTrigger: "onBlur",
 		valuePropsMapper: ({ value, onChange }) => ({
 			value,
 			onChange
 		})
 	});
-	const { qa, id, value, defaultValue, onChange, format = "hex", defaultSpace = "hst", isOpen: controlledOpen, defaultOpen, onOpenChange, shouldFlip, children, placeholder = "Pick a color", size, type = "outline", theme = "default", triggerTooltip, swatches, swatchColumns, triggerStyles, swatchStyles, isDisabled, isReadOnly, isLoading, isInvalid, isValid, autoFocus, "aria-label": ariaLabel } = props;
-	const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);
-	/**
-	* Loading locks the trigger, but the popover can outlive that — it may be
-	* controlled, or opened before the load began — so the editor inside has to
-	* refuse edits on the same terms.
-	*/
-	const isEditingDisabled = isDisabled || isLoading;
-	const [color, setColor] = useState(() => parseColor((value ?? defaultValue ?? "").toString()));
+	const { qa, value, defaultValue, onChange, format = "hex", formatMode = "forced", defaultSpace = "hst", isOpen: controlledOpen, defaultOpen, onOpenChange, shouldFlip, placeholder = "Pick a color", size, isDisabled, isReadOnly, isInvalid, isValid, isLoading, autoFocus, inputStyles, triggerStyles, swatchStyles, labelProps: userLabelProps, onBlur: userOnBlur, onFocus, label, description, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, id } = props;
+	const initialText = (value ?? defaultValue ?? "").toString();
+	const [text, setText] = useState(() => {
+		const parsed = parseColor(initialText);
+		return parsed && formatMode === "forced" ? formatColor(parsed, format) : initialText;
+	});
+	const [color, setColor] = useState(() => parseColor(initialText));
 	const [space, setSpace] = useState(defaultSpace);
 	const [isOpen, setOpen] = useState(defaultOpen ?? false);
-	/** What was last published, to tell our own updates from outside ones. */
+	const targetRef = useRef(null);
+	const inputRef = useRef(null);
+	/** The last text that parsed, so an invalid entry has something to fall back to. */
+	const validText = useRef(parseColor(initialText) ? text : "");
+	/** What was last handed to `onChange`, to tell our own updates from outside ones. */
 	const emitted = useRef(value);
+	const emit = useEvent((next) => {
+		emitted.current = next;
+		onChange?.(next);
+	});
+	/** The notation a value should be written in, given the current text. */
+	const outputFormat = (source) => formatMode === "forced" ? format : detectFormat(source) ?? format;
 	useEffect(() => {
 		if (value === void 0 || value === emitted.current) return;
 		emitted.current = value;
-		setColor(parseColor((value ?? "").toString()));
-	}, [value]);
-	const handleColorChange = useEvent((next) => {
-		const text = formatColor(next, format);
-		emitted.current = text;
-		setColor(next);
-		onChange?.(text);
+		const raw = (value ?? "").toString();
+		const parsed = parseColor(raw);
+		const nextText = parsed && formatMode === "forced" ? formatColor(parsed, format) : raw;
+		setColor(parsed);
+		setText(nextText);
+		validText.current = parsed ? nextText : "";
+	}, [
+		value,
+		format,
+		formatMode
+	]);
+	const handleTextChange = useEvent((nextText) => {
+		setText(nextText);
+		if (!nextText.trim()) {
+			setColor(null);
+			validText.current = "";
+			emit(null);
+			return;
+		}
+		const parsed = parseColor(nextText);
+		if (!parsed) return;
+		setColor(parsed);
+		validText.current = nextText;
+		emit(formatMode === "free" ? nextText.trim() : formatColor(parsed, outputFormat(nextText)));
+	});
+	/** Resolve whatever is in the input into a real color, or undo it. */
+	const settle = useEvent(() => {
+		if (!text.trim()) return;
+		const parsed = parseColor(text);
+		if (!parsed) {
+			setText(validText.current);
+			return;
+		}
+		if (formatMode === "forced") setText(formatColor(parsed, format));
 	});
-	const colorText = color ? formatColor(color, format) : null;
 	/**
-	* The palette and the value field both speak in strings, and the field can
-	* hand back `null` when it is cleared — which has to reach the picker, or the
-	* text empties while the preview and trigger keep the old color.
+	* Focusing offers the whole value up for replacement, the way a hex field
+	* does. The string is the unit of editing here: a single channel is tuned
+	* with the sliders, not by hand-editing one number inside `oklch(…)`.
+	*
+	* Read off the event rather than `inputRef`, which `TextInputBase` re-points
+	* through `useCombinedRefs`.
 	*/
-	const handleValueChange = useEvent((next) => {
-		emitted.current = next;
-		setColor(next ? parseColor(next) : null);
-		onChange?.(next);
+	const handleFocus = useEvent((event) => {
+		event.currentTarget.select();
+		onFocus?.(event);
+	});
+	/**
+	* A click would otherwise drop a caret and undo that selection — the browser
+	* applies it after the focus handler has run. Suppressing the default action
+	* of the focusing press means no caret is ever placed; focus is then moved
+	* here instead, which selects.
+	*
+	* Only the press that *takes* focus is suppressed, so clicking a field that
+	* already has focus still positions the caret, and dragging still selects a
+	* range.
+	*/
+	const handleMouseDown = useEvent((event) => {
+		if (document.activeElement === event.currentTarget) return;
+		event.preventDefault();
+		event.currentTarget.focus();
+	});
+	const handleBlur = useEvent((event) => {
+		settle();
+		userOnBlur?.(event);
+	});
+	const handleKeyDown = useEvent((event) => {
+		if (event.key === "Enter") settle();
+	});
+	const handleColorChange = useEvent((nextColor) => {
+		const nextText = formatColor(nextColor, outputFormat(text));
+		setColor(nextColor);
+		setText(nextText);
+		validText.current = nextText;
+		emit(nextText);
 	});
 	const handleOpenChange = useEvent((next) => {
 		setOpen(next);
 		onOpenChange?.(next);
 	});
-	const label = children !== void 0 ? children : color ? formatColor(color, format) : /* @__PURE__ */ jsx(_Text.Placeholder, { children: placeholder });
-	return wrapWithField(/* @__PURE__ */ jsx(ColorPickerWrapper, {
-		styles,
-		children: /* @__PURE__ */ jsxs(DialogTrigger, {
+	const { labelProps, inputProps } = useTextField({
+		id,
+		label,
+		description,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledby,
+		"aria-describedby": ariaDescribedby,
+		isDisabled,
+		isReadOnly,
+		isInvalid,
+		autoFocus,
+		placeholder,
+		value: text,
+		type: "text",
+		onChange: handleTextChange,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		onKeyDown: handleKeyDown
+	}, inputRef);
+	return /* @__PURE__ */ jsx(TextInputBase, {
+		...props,
+		ref,
+		qa: qa || "ColorPicker",
+		size,
+		autocomplete: "off",
+		icon: /* @__PURE__ */ jsx(SwatchElement, {
+			mods: { empty: !color },
+			styles: swatchStyles,
+			style: color ? { "--color-picker-color": toHex(color) } : void 0
+		}),
+		inputRef,
+		inputProps: {
+			...inputProps,
+			spellCheck: false,
+			onMouseDown: handleMouseDown
+		},
+		inputStyles,
+		labelProps: mergeProps$1(labelProps, userLabelProps),
+		wrapperRef: targetRef,
+		isDisabled,
+		isReadOnly,
+		isInvalid,
+		isValid,
+		isLoading,
+		suffixPosition: "after",
+		suffix: /* @__PURE__ */ jsxs(DialogTrigger, {
 			hideArrow: true,
 			type: "popover",
 			mobileType: "tray",
-			placement: "bottom start",
+			placement: "bottom right",
+			targetRef,
 			isOpen: controlledOpen ?? isOpen,
 			shouldFlip,
 			onOpenChange: handleOpenChange,
-			children: [/* @__PURE__ */ jsx(_ItemButton, {
-				"data-popover-trigger": true,
-				id,
-				qa: qa || "ColorPickerTrigger",
-				"data-input-type": "colorpicker",
-				type,
-				theme: getValidationTheme(theme, {
-					isInvalid,
-					isValid
-				}),
+			children: [/* @__PURE__ */ jsx(ColorPickerButton, {
 				size,
-				icon: /* @__PURE__ */ jsx(ColorSwatch, {
-					color,
-					styles: swatchStyles
-				}),
-				rightIcon: getValidationIcon({
-					isInvalid,
-					isValid
-				}),
-				tooltip: triggerTooltip,
-				isDisabled: isEditingDisabled || isReadOnly,
-				autoFocus,
-				"aria-label": ariaLabel,
-				mods: { placeholder: !color },
-				styles: triggerStyles,
-				children: label
+				"aria-label": "Open the color picker",
+				isDisabled: isDisabled || isReadOnly,
+				styles: triggerStyles
 			}), /* @__PURE__ */ jsx(Dialog, {
 				"aria-label": "Color picker",
 				width: "max-content",
-				styles: POPOVER_STYLES,
-				children: /* @__PURE__ */ jsx(ColorPopoverContext.Provider, {
-					value: true,
-					children: /* @__PURE__ */ jsx(ColorPanel, {
-						color: color ?? FALLBACK_COLOR,
-						space,
-						isDisabled: isEditingDisabled || isReadOnly,
-						previewFormat: format,
-						input: /* @__PURE__ */ jsx(ColorInput, {
-							"aria-label": "Color value",
-							format,
-							value: colorText,
-							isDisabled: isEditingDisabled,
-							isReadOnly,
-							onChange: handleValueChange
-						}),
-						swatches: swatches?.length ? /* @__PURE__ */ jsx(ColorSwatchGroup, {
-							"aria-label": "Palette",
-							styles: PALETTE_STYLES,
-							colors: swatches,
-							columns: swatchColumns,
-							format,
-							value: colorText,
-							isDisabled: isEditingDisabled || isReadOnly,
-							onChange: handleValueChange
-						}) : null,
-						onChange: handleColorChange,
-						onSpaceChange: setSpace
-					})
+				children: /* @__PURE__ */ jsx(ColorPickerPanel, {
+					color: color ?? FALLBACK_COLOR,
+					space,
+					isDisabled: isDisabled || isReadOnly,
+					previewFormat: outputFormat(text),
+					onChange: handleColorChange,
+					onSpaceChange: setSpace
 				})
 			})]
 		})
-	}), ref, props);
+	});
 });
-/**
-* Drives the legacy `<Field>` wiring: `Picker` validates on change and passes
-* the value through untouched, where `Text` would default to `onBlur` and
-* coerce `null` into an empty string.
-*/
-ColorPicker.cubeInputType = "Picker";
+ColorPicker.cubeInputType = "Text";
 
 //#endregion
 export { ColorPicker };