npm - @cube-dev/ui-kit - Versions diffs - 0.0.0-canary-8d2d39d → 0.0.0-canary-a87b080 - Mend

@cube-dev/ui-kit 0.0.0-canary-8d2d39d → 0.0.0-canary-a87b080

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (560) hide show

package/dist/components/content/Text.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

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

package/dist/components/content/highlightText.js CHANGED Viewed

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";
 import { useI18n } from "../../../i18n/useI18n.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

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

package/dist/components/data/TableBase/TableHeaderCell.js CHANGED Viewed

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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/column-menu.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | Cube Dev Team */
 import { __Menu } from "../../actions/Menu/Menu.js";
 import { normalizeMenuAction } from "./row-menu.js";
 import { Children, cloneElement, isValidElement } from "react";

package/dist/components/data/TableBase/column-tint.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | Cube Dev Team */
 import { getPaletteConfig } from "../../../tokens/palette-config.js";
 import { hashString } from "../../../tokens/color-theme.js";

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

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

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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-cell-selection.js CHANGED Viewed

Binary file

package/dist/components/data/TableBase/use-column-order.js CHANGED Viewed

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | 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 CHANGED Viewed

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

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

@@ -1,7 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { ItemActionProvider } from "../../actions/ItemActionContext.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";
@@ -203,14 +202,11 @@ const ColorInput = forwardRef(function ColorInput(allProps, ref) {
 			isOpen: controlledOpen ?? isOpen,
 			shouldFlip,
 			onOpenChange: handleOpenChange,
-			children: [/* @__PURE__ */ jsx(ItemActionProvider, {
-				isDisabled,
-				children: /* @__PURE__ */ jsx(ColorInputTrigger, {
-					size,
-					"aria-label": "Open the color picker",
-					isDisabled: isReadOnly && !isDisabled ? true : void 0,
-					styles: triggerStyles
-				})
+			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",

package/dist/components/fields/ColorInput/ColorInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorInput.js","names":["mergeProps"],"sources":["../../../../src/components/fields/ColorInput/ColorInput.tsx"],"sourcesContent":["import {\n BaseProps,\n BaseStyleProps,\n BlockStyleProps,\n ColorStyleProps,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n FocusEvent,\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { PipetteIcon } from '../../../icons';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { ItemAction, ItemActionProvider } from '../../actions';\nimport { useFieldProps } from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport { ColorSpace } from '../color/channels';\nimport {\n ColorFormat,\n ColorValue,\n detectFormat,\n formatColor,\n parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorSwatch } from '../color/ColorSwatch';\nimport { useIsInsideColorPopover } from '../color/context';\nimport { TextInputBase } from '../TextInput/TextInputBase';\n\n/*\n How the text in the input relates to the committed value.\n \n - `forced` — the text is rewritten in `format` whenever it is not mid-edit,\n * and the value is always written in `format`.\n * - `derive` — the user's own notation is left alone, and the value is\n * normalized in whichever notation the text is written in.\n * - `free` — the text is the value, verbatim. It is still verified, so an\n * unparsable entry falls back to the last valid one.\n /\nexport type ColorInputFormatMode = 'forced' \| 'derive' \| 'free';\n\n/\n A popover caps its height at half the viewport. The panel can exceed that on\n * a short screen, and would otherwise spill outside the popover's own border.\n /\nconst POPOVER_STYLES: Styles = { overflow: 'auto' };\n\n/* What the popover starts from when there is no color to edit yet. /\nconst FALLBACK_COLOR: ColorValue = { h: 264, s: 0.8, l: 0.6 };\n\nconst ColorInputTrigger = tasty(ItemAction, {\n qa: 'ColorInputTrigger',\n icon: <PipetteIcon />,\n});\n\nexport interface CubeColorInputProps\n extends BaseProps,\n BaseStyleProps,\n OuterStyleProps,\n BlockStyleProps,\n ColorStyleProps,\n FieldBaseProps {\n /* The selected color, as a color string. /\n value?: string \| null;\n /* The initial color of an uncontrolled picker. /\n defaultValue?: string \| null;\n /* Called with the normalized color string, or `null` when the field is cleared. /\n onChange?: (value: string \| null) => void;\n /* Notation the value is written in, and the one `forced` mode displays. /\n format?: ColorFormat;\n /* How strictly the input text is tied to `format`. /\n formatMode?: ColorInputFormatMode;\n /* Color concept the popover opens with. /\n defaultSpace?: ColorSpace;\n /* Whether the popover is open. Makes the disclosure controlled. /\n isOpen?: boolean;\n /* Whether the popover is open initially. /\n defaultOpen?: boolean;\n /* Called when the popover opens or closes. /\n onOpenChange?: (isOpen: boolean) => void;\n /* Whether the popover may flip to the other side of the input. /\n shouldFlip?: boolean;\n /* Text shown while the field is empty. /\n placeholder?: string;\n /* The size of the input. /\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n 'aria-describedby'?: string;\n styles?: Styles;\n /* Styles of the text input element. /\n inputStyles?: Styles;\n /* Styles of the popover trigger button. /\n triggerStyles?: Styles;\n /* Styles of the color swatch shown inside the input. /\n swatchStyles?: Styles;\n}\n\n/\n A color field: the color as text, a swatch of the current value, and a\n * popover to dial it in across OKHST, OKLCH and RGB.\n /\nexport const ColorInput = forwardRef(function ColorInput(\n allProps: CubeColorInputProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const props = useFieldProps(allProps, {\n defaultValidationTrigger: 'onBlur',\n valuePropsMapper: ({ value, onChange }) => ({\n value: value as string \| null \| undefined,\n onChange,\n }),\n });\n\n const {\n qa,\n value,\n defaultValue,\n onChange,\n format = 'hex',\n formatMode = 'forced',\n defaultSpace = 'hst',\n isOpen: controlledOpen,\n defaultOpen,\n onOpenChange,\n shouldFlip,\n placeholder = 'Pick a color',\n size,\n isDisabled,\n isReadOnly,\n isInvalid,\n isValid,\n isLoading,\n autoFocus,\n inputStyles,\n triggerStyles,\n swatchStyles,\n labelProps: userLabelProps,\n onBlur: userOnBlur,\n onFocus,\n label,\n description,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n id,\n } = props;\n\n // Already inside a color popover: this is the value field for that popover,\n // so it must not offer a popover of its own.\n const isInsidePopover = useIsInsideColorPopover();\n\n const initialText = (value ?? defaultValue ?? '').toString();\n const [text, setText] = useState(() => {\n const parsed = parseColor(initialText);\n\n return parsed && formatMode === 'forced'\n ? formatColor(parsed, format)\n : initialText;\n });\n const [color, setColor] = useState(() => parseColor(initialText));\n const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n const targetRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n /* The last text that parsed, so an invalid entry has something to fall back to. /\n const validText = useRef(parseColor(initialText) ? text : '');\n /* What was last handed to `onChange`, to tell our own updates from outside ones. /\n const emitted = useRef<string \| null \| undefined>(value);\n\n const emit = useEvent((next: string \| null) => {\n emitted.current = next;\n onChange?.(next);\n });\n\n /* The notation a value should be written in, given the current text. /\n const outputFormat = (source: string): ColorFormat =>\n formatMode === 'forced' ? format : detectFormat(source) ?? format;\n\n // Adopt values that did not come from here — a form reset, or a parent that\n // overrides what the user picked.\n useEffect(() => {\n if (value === undefined \|\| value === emitted.current) return;\n\n emitted.current = value;\n\n const raw = (value ?? '').toString();\n const parsed = parseColor(raw);\n const nextText =\n parsed && formatMode === 'forced' ? formatColor(parsed, format) : raw;\n\n setColor(parsed);\n setText(nextText);\n validText.current = parsed ? nextText : '';\n }, [value, format, formatMode]);\n\n const handleTextChange = useEvent((nextText: string) => {\n setText(nextText);\n\n if (!nextText.trim()) {\n setColor(null);\n validText.current = '';\n emit(null);\n\n return;\n }\n\n const parsed = parseColor(nextText);\n\n // Half-typed input keeps the last valid color, so the value stays a real\n // color at every keystroke.\n if (!parsed) return;\n\n setColor(parsed);\n validText.current = nextText;\n emit(\n formatMode === 'free'\n ? nextText.trim()\n : formatColor(parsed, outputFormat(nextText)),\n );\n });\n\n /* Resolve whatever is in the input into a real color, or undo it. /\n const settle = useEvent(() => {\n if (!text.trim()) return;\n\n const parsed = parseColor(text);\n\n if (!parsed) {\n setText(validText.current);\n\n return;\n }\n\n if (formatMode === 'forced') setText(formatColor(parsed, format));\n });\n\n /\n Focusing offers the whole value up for replacement, the way a hex field\n * does. The string is the unit of editing here: a single channel is tuned\n * with the sliders, not by hand-editing one number inside `oklch(…)`.\n \n Read off the event rather than `inputRef`, which `TextInputBase` re-points\n * through `useCombinedRefs`.\n /\n const handleFocus = useEvent((event: FocusEvent<HTMLInputElement>) => {\n event.currentTarget.select();\n onFocus?.(event);\n });\n\n /\n A click would otherwise drop a caret and undo that selection — the browser\n * applies it after the focus handler has run. Suppressing the default action\n * of the focusing press means no caret is ever placed; focus is then moved\n * here instead, which selects.\n \n Only the press that takes focus is suppressed, so clicking a field that\n * already has focus still positions the caret, and dragging still selects a\n * range.\n /\n const handleMouseDown = useEvent((event: MouseEvent<HTMLInputElement>) => {\n if (document.activeElement === event.currentTarget) return;\n\n event.preventDefault();\n event.currentTarget.focus();\n });\n\n const handleBlur = useEvent((event: FocusEvent<HTMLInputElement>) => {\n settle();\n userOnBlur?.(event);\n });\n\n const handleKeyDown = useEvent((event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') settle();\n });\n\n const handleColorChange = useEvent((nextColor: ColorValue) => {\n const nextText = formatColor(nextColor, outputFormat(text));\n\n setColor(nextColor);\n setText(nextText);\n validText.current = nextText;\n emit(nextText);\n });\n\n const handleOpenChange = useEvent((next: boolean) => {\n setOpen(next);\n onOpenChange?.(next);\n });\n\n const { labelProps, inputProps } = useTextField(\n {\n id,\n label,\n description,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n isDisabled,\n isReadOnly,\n isInvalid,\n autoFocus,\n placeholder,\n value: text,\n type: 'text',\n onChange: handleTextChange,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n },\n inputRef,\n );\n\n return (\n <TextInputBase\n {...props}\n ref={ref}\n qa={qa \|\| 'ColorInput'}\n size={size}\n autocomplete=\"off\"\n icon={<ColorSwatch color={color} styles={swatchStyles} />}\n inputRef={inputRef}\n inputProps={{\n ...inputProps,\n spellCheck: false,\n onMouseDown: handleMouseDown,\n }}\n inputStyles={inputStyles}\n labelProps={mergeProps(labelProps, userLabelProps)}\n wrapperRef={targetRef}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isInvalid={isInvalid}\n isValid={isValid}\n isLoading={isLoading}\n // The validation state reads left of the trigger, the way `DateInputBase`\n // orders it for the date pickers.\n suffixPosition=\"after\"\n suffix={\n isInsidePopover ? null : (\n <DialogTrigger\n hideArrow\n type=\"popover\"\n mobileType=\"tray\"\n placement=\"bottom right\"\n targetRef={targetRef}\n isOpen={controlledOpen ?? isOpen}\n shouldFlip={shouldFlip}\n onOpenChange={handleOpenChange}\n >\n {/\n The trigger is disabled by either flag, but the two arrive through\n different channels on purpose. A disabled FIELD travels through the\n provider so `current` treats the state as inherited: the field has\n already faded the colour the trigger paints from, and fading again\n multiplies the two (measured `.12` — all but invisible). Read-only\n alone leaves the field's text opaque, so there the trigger really is\n disabled on its own and should fade itself.\n */}\n <ItemActionProvider isDisabled={isDisabled}>\n <ColorInputTrigger\n size={size}\n aria-label=\"Open the color picker\"\n isDisabled={isReadOnly && !isDisabled ? true : undefined}\n styles={triggerStyles}\n />\n </ItemActionProvider>\n <Dialog\n aria-label=\"Color picker\"\n width=\"max-content\"\n styles={POPOVER_STYLES}\n >\n <ColorPanel\n color={color ?? FALLBACK_COLOR}\n space={space}\n isDisabled={isDisabled \|\| isReadOnly}\n previewFormat={outputFormat(text)}\n onChange={handleColorChange}\n onSpaceChange={setSpace}\n />\n </Dialog>\n </DialogTrigger>\n )\n }\n />\n );\n});\n\n(ColorInput as any).cubeInputType = 'Text';\n"],"mappings":"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"}
1	+ {"version":3,"file":"ColorInput.js","names":["mergeProps"],"sources":["../../../../src/components/fields/ColorInput/ColorInput.tsx"],"sourcesContent":["import {\n BaseProps,\n BaseStyleProps,\n BlockStyleProps,\n ColorStyleProps,\n OuterStyleProps,\n Styles,\n tasty,\n} from '@tenphi/tasty';\nimport {\n FocusEvent,\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { PipetteIcon } from '../../../icons';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { ItemAction } from '../../actions';\nimport { useFieldProps } from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport { ColorSpace } from '../color/channels';\nimport {\n ColorFormat,\n ColorValue,\n detectFormat,\n formatColor,\n parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorSwatch } from '../color/ColorSwatch';\nimport { useIsInsideColorPopover } from '../color/context';\nimport { TextInputBase } from '../TextInput/TextInputBase';\n\n/*\n How the text in the input relates to the committed value.\n \n - `forced` — the text is rewritten in `format` whenever it is not mid-edit,\n * and the value is always written in `format`.\n * - `derive` — the user's own notation is left alone, and the value is\n * normalized in whichever notation the text is written in.\n * - `free` — the text is the value, verbatim. It is still verified, so an\n * unparsable entry falls back to the last valid one.\n /\nexport type ColorInputFormatMode = 'forced' \| 'derive' \| 'free';\n\n/\n A popover caps its height at half the viewport. The panel can exceed that on\n * a short screen, and would otherwise spill outside the popover's own border.\n /\nconst POPOVER_STYLES: Styles = { overflow: 'auto' };\n\n/* What the popover starts from when there is no color to edit yet. /\nconst FALLBACK_COLOR: ColorValue = { h: 264, s: 0.8, l: 0.6 };\n\nconst ColorInputTrigger = tasty(ItemAction, {\n qa: 'ColorInputTrigger',\n icon: <PipetteIcon />,\n});\n\nexport interface CubeColorInputProps\n extends BaseProps,\n BaseStyleProps,\n OuterStyleProps,\n BlockStyleProps,\n ColorStyleProps,\n FieldBaseProps {\n /* The selected color, as a color string. /\n value?: string \| null;\n /* The initial color of an uncontrolled picker. /\n defaultValue?: string \| null;\n /* Called with the normalized color string, or `null` when the field is cleared. /\n onChange?: (value: string \| null) => void;\n /* Notation the value is written in, and the one `forced` mode displays. /\n format?: ColorFormat;\n /* How strictly the input text is tied to `format`. /\n formatMode?: ColorInputFormatMode;\n /* Color concept the popover opens with. /\n defaultSpace?: ColorSpace;\n /* Whether the popover is open. Makes the disclosure controlled. /\n isOpen?: boolean;\n /* Whether the popover is open initially. /\n defaultOpen?: boolean;\n /* Called when the popover opens or closes. /\n onOpenChange?: (isOpen: boolean) => void;\n /* Whether the popover may flip to the other side of the input. /\n shouldFlip?: boolean;\n /* Text shown while the field is empty. /\n placeholder?: string;\n /* The size of the input. /\n size?: 'small' \| 'medium' \| 'large' \| (string & {});\n onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n 'aria-describedby'?: string;\n styles?: Styles;\n /* Styles of the text input element. /\n inputStyles?: Styles;\n /* Styles of the popover trigger button. /\n triggerStyles?: Styles;\n /* Styles of the color swatch shown inside the input. /\n swatchStyles?: Styles;\n}\n\n/\n A color field: the color as text, a swatch of the current value, and a\n * popover to dial it in across OKHST, OKLCH and RGB.\n /\nexport const ColorInput = forwardRef(function ColorInput(\n allProps: CubeColorInputProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const props = useFieldProps(allProps, {\n defaultValidationTrigger: 'onBlur',\n valuePropsMapper: ({ value, onChange }) => ({\n value: value as string \| null \| undefined,\n onChange,\n }),\n });\n\n const {\n qa,\n value,\n defaultValue,\n onChange,\n format = 'hex',\n formatMode = 'forced',\n defaultSpace = 'hst',\n isOpen: controlledOpen,\n defaultOpen,\n onOpenChange,\n shouldFlip,\n placeholder = 'Pick a color',\n size,\n isDisabled,\n isReadOnly,\n isInvalid,\n isValid,\n isLoading,\n autoFocus,\n inputStyles,\n triggerStyles,\n swatchStyles,\n labelProps: userLabelProps,\n onBlur: userOnBlur,\n onFocus,\n label,\n description,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n id,\n } = props;\n\n // Already inside a color popover: this is the value field for that popover,\n // so it must not offer a popover of its own.\n const isInsidePopover = useIsInsideColorPopover();\n\n const initialText = (value ?? defaultValue ?? '').toString();\n const [text, setText] = useState(() => {\n const parsed = parseColor(initialText);\n\n return parsed && formatMode === 'forced'\n ? formatColor(parsed, format)\n : initialText;\n });\n const [color, setColor] = useState(() => parseColor(initialText));\n const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n const targetRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n /* The last text that parsed, so an invalid entry has something to fall back to. /\n const validText = useRef(parseColor(initialText) ? text : '');\n /* What was last handed to `onChange`, to tell our own updates from outside ones. /\n const emitted = useRef<string \| null \| undefined>(value);\n\n const emit = useEvent((next: string \| null) => {\n emitted.current = next;\n onChange?.(next);\n });\n\n /* The notation a value should be written in, given the current text. /\n const outputFormat = (source: string): ColorFormat =>\n formatMode === 'forced' ? format : detectFormat(source) ?? format;\n\n // Adopt values that did not come from here — a form reset, or a parent that\n // overrides what the user picked.\n useEffect(() => {\n if (value === undefined \|\| value === emitted.current) return;\n\n emitted.current = value;\n\n const raw = (value ?? '').toString();\n const parsed = parseColor(raw);\n const nextText =\n parsed && formatMode === 'forced' ? formatColor(parsed, format) : raw;\n\n setColor(parsed);\n setText(nextText);\n validText.current = parsed ? nextText : '';\n }, [value, format, formatMode]);\n\n const handleTextChange = useEvent((nextText: string) => {\n setText(nextText);\n\n if (!nextText.trim()) {\n setColor(null);\n validText.current = '';\n emit(null);\n\n return;\n }\n\n const parsed = parseColor(nextText);\n\n // Half-typed input keeps the last valid color, so the value stays a real\n // color at every keystroke.\n if (!parsed) return;\n\n setColor(parsed);\n validText.current = nextText;\n emit(\n formatMode === 'free'\n ? nextText.trim()\n : formatColor(parsed, outputFormat(nextText)),\n );\n });\n\n /* Resolve whatever is in the input into a real color, or undo it. /\n const settle = useEvent(() => {\n if (!text.trim()) return;\n\n const parsed = parseColor(text);\n\n if (!parsed) {\n setText(validText.current);\n\n return;\n }\n\n if (formatMode === 'forced') setText(formatColor(parsed, format));\n });\n\n /\n Focusing offers the whole value up for replacement, the way a hex field\n * does. The string is the unit of editing here: a single channel is tuned\n * with the sliders, not by hand-editing one number inside `oklch(…)`.\n \n Read off the event rather than `inputRef`, which `TextInputBase` re-points\n * through `useCombinedRefs`.\n /\n const handleFocus = useEvent((event: FocusEvent<HTMLInputElement>) => {\n event.currentTarget.select();\n onFocus?.(event);\n });\n\n /\n A click would otherwise drop a caret and undo that selection — the browser\n * applies it after the focus handler has run. Suppressing the default action\n * of the focusing press means no caret is ever placed; focus is then moved\n * here instead, which selects.\n \n Only the press that takes focus is suppressed, so clicking a field that\n * already has focus still positions the caret, and dragging still selects a\n * range.\n */\n const handleMouseDown = useEvent((event: MouseEvent<HTMLInputElement>) => {\n if (document.activeElement === event.currentTarget) return;\n\n event.preventDefault();\n event.currentTarget.focus();\n });\n\n const handleBlur = useEvent((event: FocusEvent<HTMLInputElement>) => {\n settle();\n userOnBlur?.(event);\n });\n\n const handleKeyDown = useEvent((event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') settle();\n });\n\n const handleColorChange = useEvent((nextColor: ColorValue) => {\n const nextText = formatColor(nextColor, outputFormat(text));\n\n setColor(nextColor);\n setText(nextText);\n validText.current = nextText;\n emit(nextText);\n });\n\n const handleOpenChange = useEvent((next: boolean) => {\n setOpen(next);\n onOpenChange?.(next);\n });\n\n const { labelProps, inputProps } = useTextField(\n {\n id,\n label,\n description,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n isDisabled,\n isReadOnly,\n isInvalid,\n autoFocus,\n placeholder,\n value: text,\n type: 'text',\n onChange: handleTextChange,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n },\n inputRef,\n );\n\n return (\n <TextInputBase\n {...props}\n ref={ref}\n qa={qa \|\| 'ColorInput'}\n size={size}\n autocomplete=\"off\"\n icon={<ColorSwatch color={color} styles={swatchStyles} />}\n inputRef={inputRef}\n inputProps={{\n ...inputProps,\n spellCheck: false,\n onMouseDown: handleMouseDown,\n }}\n inputStyles={inputStyles}\n labelProps={mergeProps(labelProps, userLabelProps)}\n wrapperRef={targetRef}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isInvalid={isInvalid}\n isValid={isValid}\n isLoading={isLoading}\n // The validation state reads left of the trigger, the way `DateInputBase`\n // orders it for the date pickers.\n suffixPosition=\"after\"\n suffix={\n isInsidePopover ? null : (\n <DialogTrigger\n hideArrow\n type=\"popover\"\n mobileType=\"tray\"\n placement=\"bottom right\"\n targetRef={targetRef}\n isOpen={controlledOpen ?? isOpen}\n shouldFlip={shouldFlip}\n onOpenChange={handleOpenChange}\n >\n <ColorInputTrigger\n size={size}\n aria-label=\"Open the color picker\"\n isDisabled={isDisabled \|\| isReadOnly}\n styles={triggerStyles}\n />\n <Dialog\n aria-label=\"Color picker\"\n width=\"max-content\"\n styles={POPOVER_STYLES}\n >\n <ColorPanel\n color={color ?? FALLBACK_COLOR}\n space={space}\n isDisabled={isDisabled \|\| isReadOnly}\n previewFormat={outputFormat(text)}\n onChange={handleColorChange}\n onSpaceChange={setSpace}\n />\n </Dialog>\n </DialogTrigger>\n )\n }\n />\n );\n});\n\n(ColorInput as any).cubeInputType = 'Text';\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/ColorSwatchGroup/ColorSwatchGroup.js CHANGED Viewed

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

package/dist/components/fields/ComboBox/ComboBox.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8d2d39d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a87b080 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -11,7 +11,7 @@ import { useI18n } from "../../../i18n/useI18n.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { generateRandomId } from "../../../utils/random.js";
-import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
+import { getValidationMods, getValidationTheme } from "../../form/validation/resolve-validation-props.js";
 import { getValidationIcon } from "../../form/validation/ValidationIndicator.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
@@ -612,6 +612,10 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 					showClearButton && /* @__PURE__ */ jsx(_CollectionItem.Action, {
 						icon: /* @__PURE__ */ jsx(CloseIcon, {}),
 						size,
+						theme: getValidationTheme(void 0, {
+							isInvalid,
+							isValid
+						}),
 						qa: "ComboBoxClearButton",
 						"data-no-trigger": hideTrigger ? "" : void 0,
 						"data-popover-dismiss": "",