@cube-dev/ui-kit 0.0.0-canary-850df32 → 0.0.0-canary-cfad381

package/dist/components/content/PrismCode/prismSetup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { Prism as RendererPrism } from "prism-react-renderer";
 
 //#region src/components/content/PrismCode/prismSetup.tsx

package/dist/components/content/PrismDiffCode/PrismDiffCode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { _PrismCode } from "../PrismCode/PrismCode.js";
 import { jsx } from "react/jsx-runtime";
 import { diffLines } from "diff";

package/dist/components/content/Result/Result.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";

package/dist/components/content/Skeleton/Skeleton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { Grid } from "../../layout/Grid.js";
 import { Flow } from "../../layout/Flow.js";

package/dist/components/content/Tag/Tag.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";

package/dist/components/content/Text.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/content/TextItem/TextItem.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { TEXT_PROP_MAP, _Text } from "../Text.js";
 import { highlightText } from "../highlightText.js";

package/dist/components/content/Title.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { TEXT_PROP_MAP } from "./Text.js";

package/dist/components/content/Tree/Tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/content/Tree/TreeNode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/content/Tree/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { Action } from "../../actions/Action/Action.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Tree/tree-index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 //#region src/components/content/Tree/tree-index.ts
 function buildTreeIndex(treeData) {
 	const byKey = /* @__PURE__ */ new Map();

package/dist/components/content/Tree/use-checkbox-tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useMemo, useState } from "react";
 

package/dist/components/content/Tree/use-load-data.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useRef, useState } from "react";
 

package/dist/components/content/highlightText.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { _Text } from "./Text.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/content/use-auto-tooltip.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { TooltipProvider } from "../overlays/Tooltip/TooltipProvider.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/data/DataTable/DataTable.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/data/ItemTable/ItemTable.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/data/ItemTable/ItemTableBulkBar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";

package/dist/components/data/ItemTable/ItemTableDragPreview.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { _Text } from "../../content/Text.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/data/ItemTable/ItemTableFooter.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { _Pagination } from "../../navigation/Pagination/Pagination.js";
 import { tasty } from "@tenphi/tasty";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/data/ItemTable/ItemTableToolbar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { ReloadIcon } from "../../../icons/ReloadIcon.js";
 import { Button } from "../../actions/index.js";

package/dist/components/data/TableBase/ColumnResizer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useRef } from "react";

package/dist/components/data/TableBase/RowCollection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 //#region src/components/data/TableBase/RowCollection.ts
 /**
 * A `Collection<Node<T>>` over a plain row array.

package/dist/components/data/TableBase/TableRow.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/data/TableBase/TableView.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
 import { TextItem } from "../../content/TextItem/TextItem.js";

package/dist/components/data/TableBase/row-menu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { Children } from "react";
 
 //#region src/components/data/TableBase/row-menu.ts

package/dist/components/data/TableBase/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { _Item } from "../../content/Item/Item.js";
 import { keyframes, tasty } from "@tenphi/tasty";
 

package/dist/components/data/TableBase/types.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 //#region src/components/data/TableBase/types.ts
 /**
 * `asc | desc` rather than React Aria's `ascending | descending`: we do not use

package/dist/components/data/TableBase/use-container-width.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { useLayoutEffect, useState } from "react";
 
 //#region src/components/data/TableBase/use-container-width.ts

package/dist/components/data/TableBase/use-row-move-animation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { useLayoutEffect, useRef } from "react";
 
 //#region src/components/data/TableBase/use-row-move-animation.ts

package/dist/components/data/TableBase/use-scrollability.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { useLayoutEffect, useState } from "react";
 
 //#region src/components/data/TableBase/use-scrollability.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { useMemo } from "react";
 
 //#region src/components/data/TableBase/use-table-columns.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useDebouncedValue } from "../../../_internal/hooks/use-debounced-value.js";
 import { getColumnText } from "./use-table-columns.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { RowCollection } from "./RowCollection.js";
 import { useCallback, useMemo, useRef } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { getColumnText, getColumnValue } from "./use-table-columns.js";
 import { useMemo } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { compareByColumn } from "./use-table-sort.js";
 import { useMemo } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { useCallback, useRef, useState } from "react";
 
 //#region src/components/data/TableBase/use-table-storage.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | 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-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | 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-850df32 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
 import { createContext } from "react";
 
 //#region src/components/fields/Checkbox/context.ts

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

@@ -0,0 +1,67 @@
+
+import { FieldBaseProps } from "../../../shared/form.js";
+import "../../../shared/index.js";
+import { ColorFormat } from "../color/color.js";
+import { ColorSpace } from "../color/channels.js";
+import { BaseProps, BaseStyleProps, BlockStyleProps, ColorStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import * as react from "react";
+import { FocusEvent } from "react";
+
+//#region src/components/fields/ColorInput/ColorInput.d.ts
+/**
+ * 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 ColorInputFormatMode = 'forced' | 'derive' | 'free';
+interface CubeColorInputProps 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 normalized color string, or `null` when the field is cleared. */
+  onChange?: (value: string | null) => void;
+  /** Notation the value is written in, and the one `forced` mode displays. */
+  format?: ColorFormat;
+  /** How strictly the input text is tied to `format`. */
+  formatMode?: ColorInputFormatMode;
+  /** Color concept the popover opens with. */
+  defaultSpace?: ColorSpace;
+  /** Whether the popover is open. Makes the disclosure controlled. */
+  isOpen?: boolean;
+  /** Whether the popover is open initially. */
+  defaultOpen?: boolean;
+  /** Called when the popover opens or closes. */
+  onOpenChange?: (isOpen: boolean) => void;
+  /** Whether the popover may flip to the other side of the input. */
+  shouldFlip?: boolean;
+  /** 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 text input element. */
+  inputStyles?: Styles;
+  /** Styles of the popover trigger button. */
+  triggerStyles?: Styles;
+  /** Styles of the color swatch shown inside the input. */
+  swatchStyles?: Styles;
+}
+/**
+ * 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 ColorInput: react.ForwardRefExoticComponent<CubeColorInputProps & react.RefAttributes<HTMLElement>>;
+//#endregion
+export { ColorInput, ColorInputFormatMode, CubeColorInputProps };
+//# sourceMappingURL=ColorInput.d.ts.map

package/dist/components/fields/ColorInput/ColorInput.js

@@ -0,0 +1,230 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-cfad381 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useEvent } from "../../../_internal/hooks/use-event.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 { Dialog } from "../../overlays/Dialog/Dialog.js";
+import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
+import { TextInputBase } from "../TextInput/TextInputBase.js";
+import { detectFormat, formatColor, parseColor } from "../color/color.js";
+import { ColorSwatch } from "../color/ColorSwatch.js";
+import { ColorPanel } from "../color/ColorPanel.js";
+import { useIsInsideColorPopover } from "../color/context.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/ColorInput/ColorInput.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" };
+/** What the popover starts from when there is no color to edit yet. */
+const FALLBACK_COLOR = {
+	h: 264,
+	s: .8,
+	l: .6
+};
+const ColorInputTrigger = tasty(ItemAction, {
+	qa: "ColorInputTrigger",
+	icon: /* @__PURE__ */ jsx(PipetteIcon, {})
+});
+/**
+* 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 ColorInput = forwardRef(function ColorInput(allProps, ref) {
+	const props = useFieldProps(allProps, {
+		defaultValidationTrigger: "onBlur",
+		valuePropsMapper: ({ value, onChange }) => ({
+			value,
+			onChange
+		})
+	});
+	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 isInsidePopover = useIsInsideColorPopover();
+	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);
+	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;
+		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));
+	});
+	/**
+	* 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 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 { 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 || "ColorInput",
+		size,
+		autocomplete: "off",
+		icon: /* @__PURE__ */ jsx(ColorSwatch, {
+			color,
+			styles: swatchStyles
+		}),
+		inputRef,
+		inputProps: {
+			...inputProps,
+			spellCheck: false,
+			onMouseDown: handleMouseDown
+		},
+		inputStyles,
+		labelProps: mergeProps$1(labelProps, userLabelProps),
+		wrapperRef: targetRef,
+		isDisabled,
+		isReadOnly,
+		isInvalid,
+		isValid,
+		isLoading,
+		suffixPosition: "after",
+		suffix: isInsidePopover ? null : /* @__PURE__ */ jsxs(DialogTrigger, {
+			hideArrow: true,
+			type: "popover",
+			mobileType: "tray",
+			placement: "bottom right",
+			targetRef,
+			isOpen: controlledOpen ?? isOpen,
+			shouldFlip,
+			onOpenChange: handleOpenChange,
+			children: [/* @__PURE__ */ jsx(ColorInputTrigger, {
+				size,
+				"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(ColorPanel, {
+					color: color ?? FALLBACK_COLOR,
+					space,
+					isDisabled: isDisabled || isReadOnly,
+					previewFormat: outputFormat(text),
+					onChange: handleColorChange,
+					onSpaceChange: setSpace
+				})
+			})]
+		})
+	});
+});
+ColorInput.cubeInputType = "Text";
+
+//#endregion
+export { ColorInput };
+//# sourceMappingURL=ColorInput.js.map