@cube-dev/ui-kit 0.0.0-canary-b3860b1 → 0.0.0-canary-5752be7

package/dist/components/content/Text.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | 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-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | 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-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | 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-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | 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-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | 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-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | 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-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | 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-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | 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-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | 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-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | 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-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | 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/fields/Checkbox/Checkbox.js

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | 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";
@@ -8,8 +8,8 @@ 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 { ColorPanel } from "../color/ColorPanel.js";
 import { ColorSwatch } from "../color/ColorSwatch.js";
+import { ColorPanel } from "../color/ColorPanel.js";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -7,12 +7,12 @@ import { ColorFormat } from "../color/color.js";
 import { ColorSpace } from "../color/channels.js";
 import { CubeColorSwatchItem } from "../ColorSwatchGroup/ColorSwatchGroup.js";
 import "../ColorSwatchGroup/index.js";
-import { BaseProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import { BaseProps, BlockStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
 import * as react from "react";
 import { ReactNode } from "react";
 
 //#region src/components/fields/ColorPicker/ColorPicker.d.ts
-interface CubeColorPickerProps extends BaseProps, OuterStyleProps, FieldBaseProps {
+interface CubeColorPickerProps extends BaseProps, OuterStyleProps, BlockStyleProps, FieldBaseProps {
   /** The selected color, as a color string. */
   value?: string | null;
   /** The initial color of an uncontrolled picker. */

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";
@@ -10,11 +10,11 @@ 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 { ColorPanel } from "../color/ColorPanel.js";
 import { ColorSwatch } from "../color/ColorSwatch.js";
+import { ColorPanel } from "../color/ColorPanel.js";
 import { ColorPopoverContext } from "../color/context.js";
 import { ColorSwatchGroup } from "../ColorSwatchGroup/ColorSwatchGroup.js";
-import { OUTER_STYLES, tasty } from "@tenphi/tasty";
+import { BLOCK_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -24,6 +24,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * 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,
@@ -54,7 +64,7 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 		})
 	});
 	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);
+	const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);
 	const [color, setColor] = useState(() => parseColor((value ?? defaultValue ?? "").toString()));
 	const [space, setSpace] = useState(defaultSpace);
 	const [isOpen, setOpen] = useState(defaultOpen ?? false);
@@ -130,7 +140,7 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 						previewFormat: format,
 						swatches: swatches?.length ? /* @__PURE__ */ jsx(ColorSwatchGroup, {
 							"aria-label": "Palette",
-							size: "small",
+							styles: PALETTE_STYLES,
 							colors: swatches,
 							columns: swatchColumns,
 							format,

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":["Text","ItemButton"],"sources":["../../../../src/components/fields/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  BaseProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { FieldBaseProps } from '../../../shared';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationIcon,\n  getValidationTheme,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorSwatch } from '../color/ColorSwatch';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorSwatchGroup, CubeColorSwatchItem } from '../ColorSwatchGroup';\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 ColorPickerWrapper = tasty({\n  qa: 'ColorPickerWrapper',\n  styles: {\n    display: 'inline-grid',\n    flow: 'column',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n  },\n});\n\nexport interface CubeColorPickerProps\n  extends BaseProps,\n    OuterStyleProps,\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 color string, or `null` when there is no color. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\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 trigger. */\n  shouldFlip?: boolean;\n  /** Replaces the color shown on the trigger. Pass `null` for a swatch on its own. */\n  children?: ReactNode;\n  /** Shown on the trigger while there is no color. */\n  placeholder?: ReactNode;\n  /** The size of the trigger. */\n  size?: CubeItemProps['size'];\n  /** The visual type of the trigger. */\n  type?: CubeItemProps['type'];\n  theme?: CubeItemProps['theme'];\n  /** Tooltip for the trigger, separate from the field tooltip. */\n  triggerTooltip?: CubeItemProps['tooltip'];\n  /** Colors to offer under the editor, for picking without dialing one in. */\n  swatches?: CubeColorSwatchItem[];\n  /** How many swatches per row. Defaults to a single row. */\n  swatchColumns?: number;\n  styles?: Styles;\n  /** Styles of the trigger button. */\n  triggerStyles?: Styles;\n  /** Styles of the color swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n}\n\n/**\n * A color swatch that opens the color popover — the same one `ColorInput`\n * uses, without the text field. Reach for it when a color is chosen but never\n * typed: a toolbar, a chart legend, a cell in a dense table.\n */\nexport const ColorPicker = forwardRef(function ColorPicker(\n  allProps: CubeColorPickerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    id,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    children,\n    placeholder = 'Pick a color',\n    size,\n    type = 'outline',\n    theme = 'default',\n    triggerTooltip,\n    swatches,\n    swatchColumns,\n    triggerStyles,\n    swatchStyles,\n    isDisabled,\n    isReadOnly,\n    isLoading,\n    isInvalid,\n    isValid,\n    autoFocus,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const styles = extractStyles(props, OUTER_STYLES);\n\n  const [color, setColor] = useState(() =>\n    parseColor((value ?? defaultValue ?? '').toString()),\n  );\n  const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n  const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n  /** What was last published, to tell our own updates from outside ones. */\n  const emitted = useRef<string | null | undefined>(value);\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    setColor(parseColor((value ?? '').toString()));\n  }, [value]);\n\n  const handleColorChange = useEvent((next: ColorValue) => {\n    const text = formatColor(next, format);\n\n    emitted.current = text;\n    setColor(next);\n    onChange?.(text);\n  });\n\n  const colorText = color ? formatColor(color, format) : null;\n\n  const handleSwatchChange = useEvent((next: string | null) => {\n    const parsed = next ? parseColor(next) : null;\n\n    if (parsed) handleColorChange(parsed);\n  });\n\n  const handleOpenChange = useEvent((next: boolean) => {\n    setOpen(next);\n    onOpenChange?.(next);\n  });\n\n  // The swatch carries the color and the label spells it out. `children`\n  // replaces that label, and `null` leaves the swatch on its own.\n  const label =\n    children !== undefined ? (\n      children\n    ) : color ? (\n      formatColor(color, format)\n    ) : (\n      // Muted, so an unset picker never reads like one holding a value —\n      // the same treatment `Picker` and `Select` give their placeholders.\n      <Text.Placeholder>{placeholder}</Text.Placeholder>\n    );\n\n  const pickerField = (\n    <ColorPickerWrapper styles={styles}>\n      <DialogTrigger\n        hideArrow\n        type=\"popover\"\n        mobileType=\"tray\"\n        placement=\"bottom start\"\n        isOpen={controlledOpen ?? isOpen}\n        shouldFlip={shouldFlip}\n        onOpenChange={handleOpenChange}\n      >\n        <ItemButton\n          data-popover-trigger\n          id={id}\n          qa={qa || 'ColorPickerTrigger'}\n          data-input-type=\"colorpicker\"\n          type={type}\n          theme={getValidationTheme(theme, { isInvalid, isValid })}\n          size={size}\n          icon={<ColorSwatch color={color} styles={swatchStyles} />}\n          rightIcon={getValidationIcon({ isInvalid, isValid })}\n          tooltip={triggerTooltip}\n          isDisabled={isDisabled || isLoading || isReadOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label=\"Color picker\"\n          width=\"max-content\"\n          styles={POPOVER_STYLES}\n        >\n          {/* Marks the subtree so a nested swatch group drops its custom-color\n              escape hatch, which is a picker and would recurse forever. */}\n          <ColorPopoverContext.Provider value={true}>\n            <ColorPanel\n              color={color ?? FALLBACK_COLOR}\n              space={space}\n              isDisabled={isDisabled || isReadOnly}\n              previewFormat={format}\n              swatches={\n                swatches?.length ? (\n                  <ColorSwatchGroup\n                    aria-label=\"Palette\"\n                    size=\"small\"\n                    colors={swatches}\n                    columns={swatchColumns}\n                    format={format}\n                    value={colorText}\n                    isDisabled={isDisabled || isReadOnly}\n                    onChange={handleSwatchChange}\n                  />\n                ) : null\n              }\n              onChange={handleColorChange}\n              onSpaceChange={setSpace}\n            />\n          </ColorPopoverContext.Provider>\n        </Dialog>\n      </DialogTrigger>\n    </ColorPickerWrapper>\n  );\n\n  return wrapWithField(pickerField, ref as any, props);\n});\n\n/**\n * Drives the legacy `<Field>` wiring: `Picker` validates on change and passes\n * the value through untouched, where `Text` would default to `onBlur` and\n * coerce `null` into an empty string.\n */\n(ColorPicker as any).cubeInputType = 'Picker';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,iBAAyB,EAAE,UAAU,QAAQ;;AAGnD,MAAM,iBAA6B;CAAE,GAAG;CAAK,GAAG;CAAK,GAAG;CAAK;AAE7D,MAAM,qBAAqB,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,UAAU;EACV,cAAc;EACd,YAAY;EACb;CACF,CAAC;;;;;;AAoDF,MAAa,cAAc,WAAW,SAAS,YAC7C,UACA,KACA;CACA,MAAM,QAAQ,cAAc,UAAU;EACpC,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GACnC;GACP;GACD;EACF,CAAC;CAEF,MAAM,EACJ,IACA,IACA,OACA,cACA,UACA,SAAS,OACT,eAAe,OACf,QAAQ,gBACR,aACA,cACA,YACA,UACA,cAAc,gBACd,MACA,OAAO,WACP,QAAQ,WACR,gBACA,UACA,eACA,eACA,cACA,YACA,YACA,WACA,WACA,SACA,WACA,cAAc,cACZ;CAEJ,MAAM,SAAS,cAAc,OAAO,aAAa;CAEjD,MAAM,CAAC,OAAO,YAAY,eACxB,YAAY,SAAS,gBAAgB,IAAI,UAAU,CAAC,CACrD;CACD,MAAM,CAAC,OAAO,YAAY,SAAqB,aAAa;CAC5D,MAAM,CAAC,QAAQ,WAAW,SAAS,eAAe,MAAM;;CAGxD,MAAM,UAAU,OAAkC,MAAM;AAIxD,iBAAgB;AACd,MAAI,UAAU,UAAa,UAAU,QAAQ,QAAS;AAEtD,UAAQ,UAAU;AAClB,WAAS,YAAY,SAAS,IAAI,UAAU,CAAC,CAAC;IAC7C,CAAC,MAAM,CAAC;CAEX,MAAM,oBAAoB,UAAU,SAAqB;EACvD,MAAM,OAAO,YAAY,MAAM,OAAO;AAEtC,UAAQ,UAAU;AAClB,WAAS,KAAK;AACd,aAAW,KAAK;GAChB;CAEF,MAAM,YAAY,QAAQ,YAAY,OAAO,OAAO,GAAG;CAEvD,MAAM,qBAAqB,UAAU,SAAwB;EAC3D,MAAM,SAAS,OAAO,WAAW,KAAK,GAAG;AAEzC,MAAI,OAAQ,mBAAkB,OAAO;GACrC;CAEF,MAAM,mBAAmB,UAAU,SAAkB;AACnD,UAAQ,KAAK;AACb,iBAAe,KAAK;GACpB;CAIF,MAAM,QACJ,aAAa,SACX,WACE,QACF,YAAY,OAAO,OAAO,GAI1B,oBAACA,MAAK,yBAAa,cAA+B;AAqEtD,QAAO,cAjEL,oBAAC;EAA2B;YAC1B,qBAAC;GACC;GACA,MAAK;GACL,YAAW;GACX,WAAU;GACV,QAAQ,kBAAkB;GACd;GACZ,cAAc;cAEd,oBAACC;IACC;IACI;IACJ,IAAI,MAAM;IACV,mBAAgB;IACV;IACN,OAAO,mBAAmB,OAAO;KAAE;KAAW;KAAS,CAAC;IAClD;IACN,MAAM,oBAAC;KAAmB;KAAO,QAAQ;MAAgB;IACzD,WAAW,kBAAkB;KAAE;KAAW;KAAS,CAAC;IACpD,SAAS;IACT,YAAY,cAAc,aAAa;IAC5B;IACX,cAAY;IACZ,MAAM,EAAE,aAAa,CAAC,OAAO;IAC7B,QAAQ;cAEP;KACU,EACb,oBAAC;IACC,cAAW;IACX,OAAM;IACN,QAAQ;cAIR,oBAAC,oBAAoB;KAAS,OAAO;eACnC,oBAAC;MACC,OAAO,SAAS;MACT;MACP,YAAY,cAAc;MAC1B,eAAe;MACf,UACE,UAAU,SACR,oBAAC;OACC,cAAW;OACX,MAAK;OACL,QAAQ;OACR,SAAS;OACD;OACR,OAAO;OACP,YAAY,cAAc;OAC1B,UAAU;QACV,GACA;MAEN,UAAU;MACV,eAAe;OACf;MAC2B;KACxB;IACK;GACG,EAGW,KAAY,MAAM;EACpD;;;;;;AAOF,AAAC,YAAoB,gBAAgB"}
+{"version":3,"file":"ColorPicker.js","names":["Text","ItemButton"],"sources":["../../../../src/components/fields/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { FieldBaseProps } from '../../../shared';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationIcon,\n  getValidationTheme,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorSwatch } from '../color/ColorSwatch';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorSwatchGroup, CubeColorSwatchItem } from '../ColorSwatchGroup';\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/**\n * The rule separating the palette from the editor. `Divider` is not used: it\n * places itself on named grid lines meant for menu layouts, which this panel\n * does not define, so it lands in the wrong row and spawns a stray column.\n */\nconst PALETTE_STYLES: Styles = {\n  border: 'top',\n  padding: '1x top',\n  width: '100%',\n};\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 ColorPickerWrapper = tasty({\n  qa: 'ColorPickerWrapper',\n  styles: {\n    display: 'inline-grid',\n    flow: 'column',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n  },\n});\n\nexport interface CubeColorPickerProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\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 color string, or `null` when there is no color. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\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 trigger. */\n  shouldFlip?: boolean;\n  /** Replaces the color shown on the trigger. Pass `null` for a swatch on its own. */\n  children?: ReactNode;\n  /** Shown on the trigger while there is no color. */\n  placeholder?: ReactNode;\n  /** The size of the trigger. */\n  size?: CubeItemProps['size'];\n  /** The visual type of the trigger. */\n  type?: CubeItemProps['type'];\n  theme?: CubeItemProps['theme'];\n  /** Tooltip for the trigger, separate from the field tooltip. */\n  triggerTooltip?: CubeItemProps['tooltip'];\n  /** Colors to offer under the editor, for picking without dialing one in. */\n  swatches?: CubeColorSwatchItem[];\n  /** How many swatches per row. Defaults to a single row. */\n  swatchColumns?: number;\n  styles?: Styles;\n  /** Styles of the trigger button. */\n  triggerStyles?: Styles;\n  /** Styles of the color swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n}\n\n/**\n * A color swatch that opens the color popover — the same one `ColorInput`\n * uses, without the text field. Reach for it when a color is chosen but never\n * typed: a toolbar, a chart legend, a cell in a dense table.\n */\nexport const ColorPicker = forwardRef(function ColorPicker(\n  allProps: CubeColorPickerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    id,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    children,\n    placeholder = 'Pick a color',\n    size,\n    type = 'outline',\n    theme = 'default',\n    triggerTooltip,\n    swatches,\n    swatchColumns,\n    triggerStyles,\n    swatchStyles,\n    isDisabled,\n    isReadOnly,\n    isLoading,\n    isInvalid,\n    isValid,\n    autoFocus,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n\n  const [color, setColor] = useState(() =>\n    parseColor((value ?? defaultValue ?? '').toString()),\n  );\n  const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n  const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n  /** What was last published, to tell our own updates from outside ones. */\n  const emitted = useRef<string | null | undefined>(value);\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    setColor(parseColor((value ?? '').toString()));\n  }, [value]);\n\n  const handleColorChange = useEvent((next: ColorValue) => {\n    const text = formatColor(next, format);\n\n    emitted.current = text;\n    setColor(next);\n    onChange?.(text);\n  });\n\n  const colorText = color ? formatColor(color, format) : null;\n\n  const handleSwatchChange = useEvent((next: string | null) => {\n    const parsed = next ? parseColor(next) : null;\n\n    if (parsed) handleColorChange(parsed);\n  });\n\n  const handleOpenChange = useEvent((next: boolean) => {\n    setOpen(next);\n    onOpenChange?.(next);\n  });\n\n  // The swatch carries the color and the label spells it out. `children`\n  // replaces that label, and `null` leaves the swatch on its own.\n  const label =\n    children !== undefined ? (\n      children\n    ) : color ? (\n      formatColor(color, format)\n    ) : (\n      // Muted, so an unset picker never reads like one holding a value —\n      // the same treatment `Picker` and `Select` give their placeholders.\n      <Text.Placeholder>{placeholder}</Text.Placeholder>\n    );\n\n  const pickerField = (\n    <ColorPickerWrapper styles={styles}>\n      <DialogTrigger\n        hideArrow\n        type=\"popover\"\n        mobileType=\"tray\"\n        placement=\"bottom start\"\n        isOpen={controlledOpen ?? isOpen}\n        shouldFlip={shouldFlip}\n        onOpenChange={handleOpenChange}\n      >\n        <ItemButton\n          data-popover-trigger\n          id={id}\n          qa={qa || 'ColorPickerTrigger'}\n          data-input-type=\"colorpicker\"\n          type={type}\n          theme={getValidationTheme(theme, { isInvalid, isValid })}\n          size={size}\n          icon={<ColorSwatch color={color} styles={swatchStyles} />}\n          rightIcon={getValidationIcon({ isInvalid, isValid })}\n          tooltip={triggerTooltip}\n          isDisabled={isDisabled || isLoading || isReadOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label=\"Color picker\"\n          width=\"max-content\"\n          styles={POPOVER_STYLES}\n        >\n          {/* Marks the subtree so a nested swatch group drops its custom-color\n              escape hatch, which is a picker and would recurse forever. */}\n          <ColorPopoverContext.Provider value={true}>\n            <ColorPanel\n              color={color ?? FALLBACK_COLOR}\n              space={space}\n              isDisabled={isDisabled || isReadOnly}\n              previewFormat={format}\n              swatches={\n                swatches?.length ? (\n                  <ColorSwatchGroup\n                    aria-label=\"Palette\"\n                    styles={PALETTE_STYLES}\n                    colors={swatches}\n                    columns={swatchColumns}\n                    format={format}\n                    value={colorText}\n                    isDisabled={isDisabled || isReadOnly}\n                    onChange={handleSwatchChange}\n                  />\n                ) : null\n              }\n              onChange={handleColorChange}\n              onSpaceChange={setSpace}\n            />\n          </ColorPopoverContext.Provider>\n        </Dialog>\n      </DialogTrigger>\n    </ColorPickerWrapper>\n  );\n\n  return wrapWithField(pickerField, ref as any, props);\n});\n\n/**\n * Drives the legacy `<Field>` wiring: `Picker` validates on change and passes\n * the value through untouched, where `Text` would default to `onBlur` and\n * coerce `null` into an empty string.\n */\n(ColorPicker as any).cubeInputType = 'Picker';\n"],"mappings":"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"}

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

@@ -2,7 +2,7 @@
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { ColorFormat } from "../color/color.js";
-import { BaseProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import { BaseProps, BlockStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
 import * as react from "react";
 
 //#region src/components/fields/ColorSwatchGroup/ColorSwatchGroup.d.ts
@@ -11,7 +11,7 @@ type CubeColorSwatchItem = string | {
   color: string;
   label?: string;
 };
-interface CubeColorSwatchGroupProps extends BaseProps, OuterStyleProps, FieldBaseProps {
+interface CubeColorSwatchGroupProps extends BaseProps, OuterStyleProps, BlockStyleProps, FieldBaseProps {
   /** The colors to offer. Duplicates of the same color are dropped. */
   colors?: CubeColorSwatchItem[];
   /** The selected color (controlled). */

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | 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";
@@ -10,7 +10,7 @@ import { HiddenInput } from "../../HiddenInput.js";
 import { formatColor, parseColor, toHex } from "../color/color.js";
 import { useIsInsideColorPopover } from "../color/context.js";
 import { ColorPicker } from "../ColorPicker/ColorPicker.js";
-import { OUTER_STYLES, tasty } from "@tenphi/tasty";
+import { BLOCK_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRadio, useRadioGroup } from "react-aria";
@@ -18,14 +18,18 @@ import { useRadioGroupState } from "react-stately";
 import { useObjectRef } from "@react-aria/utils";
 
 //#region src/components/fields/ColorSwatchGroup/ColorSwatchGroup.tsx
+/** The swatch edge in px, per size. `Item` takes an exact number. */
+const SWATCH_PX = {
+	small: 16,
+	medium: 20,
+	large: 24
+};
 /**
 * The trailing picker is a button wrapping a swatch, which would otherwise read
 * as a box inside a box. Stripping its chrome leaves just the swatch, so it
 * sits in the row as one of them.
 */
 const CUSTOM_TRIGGER_STYLES = {
-	width: "$swatch-size $swatch-size",
-	height: "$swatch-size $swatch-size",
 	padding: 0,
 	radius: "1r",
 	border: 0
@@ -33,7 +37,7 @@ const CUSTOM_TRIGGER_STYLES = {
 /** Matches the ring a selected swatch gets, for a custom color in the row. */
 const CUSTOM_TRIGGER_SELECTED_STYLES = {
 	...CUSTOM_TRIGGER_STYLES,
-	shadow: "0 0 0 1bw #surface, 0 0 0 2bw #primary"
+	shadow: "inset 0 0 0 2bw #surface-text, inset 0 0 0 4bw #surface"
 };
 /** The swatch fills the stripped button rather than keeping its own size. */
 const CUSTOM_SWATCH_STYLES = {
@@ -77,7 +81,7 @@ const SwatchElement = tasty({
 		},
 		shadow: {
 			"": "inset 0 0 0 1bw #dark.15",
-			selected: "0 0 0 1bw #surface, 0 0 0 2bw #primary, inset 0 0 0 1bw #dark.15"
+			selected: "inset 0 0 0 2bw #surface-text, inset 0 0 0 4bw #surface"
 		},
 		outline: {
 			"": "1bw #primary-text.0",
@@ -133,7 +137,7 @@ const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
 		})
 	});
 	const { qa, colors = [], value, defaultValue, onChange, format = "hex", columns, allowCustom, size = "medium", isDisabled, isInvalid, isValid, swatchStyles, "aria-label": ariaLabel } = props;
-	const styles = extractStyles(props, OUTER_STYLES);
+	const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);
 	const isInsidePopover = useIsInsideColorPopover();
 	const showCustom = allowCustom && !isInsidePopover;
 	/** Keyed by canonical hex so the same color written two ways is one swatch. */
@@ -200,7 +204,7 @@ const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
 			qa: "ColorSwatchGroupCustom",
 			format,
 			type: "clear",
-			size: "small",
+			size: SWATCH_PX[size] ?? SWATCH_PX.medium,
 			value: isCustom ? currentValue ?? null : null,
 			isDisabled,
 			isReadOnly: props.isReadOnly,

package/dist/components/fields/ColorSwatchGroup/ColorSwatchGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatchGroup.js","names":["useFocus","mergeProps"],"sources":["../../../../src/components/fields/ColorSwatchGroup/ColorSwatchGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, useMemo, useRef, useState } from 'react';\nimport { useRadio, useRadioGroup } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport { ColorFormat, formatColor, parseColor, toHex } from '../color/color';\nimport { useIsInsideColorPopover } from '../color/context';\nimport { ColorPicker } from '../ColorPicker';\n\nimport type { RadioGroupState } from 'react-stately';\n\n/** A swatch: a color, and optionally a name to announce instead of the color. */\nexport type CubeColorSwatchItem = string | { color: string; label?: string };\n\n/**\n * The trailing picker is a button wrapping a swatch, which would otherwise read\n * as a box inside a box. Stripping its chrome leaves just the swatch, so it\n * sits in the row as one of them.\n */\nconst CUSTOM_TRIGGER_STYLES: Styles = {\n  width: '$swatch-size $swatch-size',\n  height: '$swatch-size $swatch-size',\n  padding: 0,\n  radius: '1r',\n  border: 0,\n};\n\n/** Matches the ring a selected swatch gets, for a custom color in the row. */\nconst CUSTOM_TRIGGER_SELECTED_STYLES: Styles = {\n  ...CUSTOM_TRIGGER_STYLES,\n  shadow: '0 0 0 1bw #surface, 0 0 0 2bw #primary',\n};\n\n/** The swatch fills the stripped button rather than keeping its own size. */\nconst CUSTOM_SWATCH_STYLES: Styles = {\n  width: '100%',\n  height: '100%',\n  radius: '1r',\n};\n\nconst GroupElement = tasty({\n  qa: 'ColorSwatchGroup',\n  styles: {\n    display: 'grid',\n    gap: '.5x',\n    placeItems: 'stretch',\n    width: 'max-content',\n    gridColumns: 'repeat($columns, 1fr)',\n\n    // 20px, 16px and 24px — 1x is 8px.\n    '$swatch-size': {\n      '': '2.5x',\n      'size=small': '2x',\n      'size=large': '3x',\n    },\n  },\n});\n\nconst SwatchElement = tasty({\n  as: 'label',\n  qa: 'ColorSwatchOption',\n  styles: {\n    display: 'grid',\n    placeItems: 'stretch',\n    position: 'relative',\n    radius: '1r',\n    cursor: {\n      '': 'pointer',\n      disabled: 'default',\n    },\n    width: '$swatch-size $swatch-size',\n    height: '$swatch-size $swatch-size',\n    fill: '(#color-swatch, #clear)',\n    opacity: {\n      '': 1,\n      disabled: '$disabled-opacity',\n    },\n    // A ring at one border-width's distance, so the color area stays whole —\n    // the inner ring is the surface showing through as the gap. `outline` is\n    // deliberately left to the focus ring.\n    shadow: {\n      '': 'inset 0 0 0 1bw #dark.15',\n      selected:\n        '0 0 0 1bw #surface, 0 0 0 2bw #primary, inset 0 0 0 1bw #dark.15',\n    },\n    outline: {\n      '': '1bw #primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 3,\n    transition: 'theme',\n  },\n});\n\nexport interface CubeColorSwatchGroupProps\n  extends BaseProps,\n    OuterStyleProps,\n    FieldBaseProps {\n  /** The colors to offer. Duplicates of the same color are dropped. */\n  colors?: CubeColorSwatchItem[];\n  /** The selected color (controlled). */\n  value?: string | null;\n  /** The selected color (uncontrolled). */\n  defaultValue?: string | null;\n  /** Called with the chosen color, written in `format`. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\n  /** How many swatches per row. Defaults to a single row. */\n  columns?: number;\n  /**\n   * Append a `ColorPicker` for colors outside the set. Ignored inside a color\n   * popover, which is where that picker would otherwise recurse.\n   */\n  allowCustom?: boolean;\n  /** The size of each swatch. */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  styles?: Styles;\n  /** Styles of an individual swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n}\n\ninterface SwatchProps {\n  colorKey: string;\n  label: string;\n  state: RadioGroupState;\n  isDisabled?: boolean;\n  size?: string;\n  styles?: Styles;\n  mods?: Record<string, boolean | undefined>;\n}\n\nfunction Swatch({\n  colorKey,\n  label,\n  state,\n  isDisabled,\n  size,\n  styles,\n  mods,\n}: SwatchProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const {\n    inputProps,\n    isSelected,\n    isDisabled: isRadioDisabled,\n  } = useRadio(\n    { value: colorKey, 'aria-label': label, isDisabled },\n    state,\n    inputRef,\n  );\n  // `useRadio` reports selection but not focus, and the swatch is the only\n  // thing a keyboard user can see — without this the ring never appears.\n  const { isFocused, focusProps } = useFocus({ isDisabled }, true);\n\n  return (\n    <SwatchElement\n      data-size={size}\n      mods={{\n        selected: isSelected,\n        disabled: isRadioDisabled,\n        focused: isFocused,\n        ...mods,\n      }}\n      styles={styles}\n      style={{ '--color-swatch-color': colorKey }}\n    >\n      <HiddenInput\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n        qa=\"ColorSwatchInput\"\n        mods={{ button: true, disabled: isRadioDisabled }}\n      />\n    </SwatchElement>\n  );\n}\n\n/**\n * A grid of color swatches, one of which can be selected — the palette half of\n * choosing a color, where `ColorPicker` is the freeform half.\n *\n * Swatches are keyed by their canonical hex, so the same color written two ways\n * collapses into one entry. Equivalent colors would otherwise make selection\n * ambiguous.\n */\nexport const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(\n  allProps: CubeColorSwatchGroupProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    colors = [],\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    columns,\n    allowCustom,\n    size = 'medium',\n    isDisabled,\n    isInvalid,\n    isValid,\n    swatchStyles,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const styles = extractStyles(props, OUTER_STYLES);\n  const isInsidePopover = useIsInsideColorPopover();\n  // A custom picker inside a color popover would open a popover of its own.\n  const showCustom = allowCustom && !isInsidePopover;\n\n  /** Keyed by canonical hex so the same color written two ways is one swatch. */\n  const swatches = useMemo(() => {\n    const seen = new Map<string, { key: string; label: string }>();\n\n    for (const entry of colors) {\n      const raw = typeof entry === 'string' ? entry : entry.color;\n      const parsed = parseColor(raw);\n\n      if (!parsed) continue;\n\n      const key = toHex(parsed);\n\n      if (seen.has(key)) continue;\n\n      seen.set(key, {\n        key,\n        label:\n          (typeof entry === 'string' ? undefined : entry.label) ??\n          formatColor(parsed, format),\n      });\n    }\n\n    return [...seen.values()];\n  }, [colors, format]);\n\n  const [internalValue, setInternalValue] = useState<string | null>(\n    () => defaultValue ?? null,\n  );\n  const currentValue = value !== undefined ? value : internalValue;\n\n  const selectedColor = parseColor((currentValue ?? '').toString());\n  const selectedKey = selectedColor ? toHex(selectedColor) : null;\n  const isCustom =\n    !!selectedKey && !swatches.some((s) => s.key === selectedKey);\n\n  const publish = useEvent((next: string | null) => {\n    if (value === undefined) setInternalValue(next);\n\n    onChange?.(next);\n  });\n\n  const handleChange = useEvent((nextKey: string) => {\n    const parsed = parseColor(nextKey);\n\n    publish(parsed ? formatColor(parsed, format) : null);\n  });\n\n  const state = useRadioGroupState({\n    value: selectedKey ?? null,\n    isDisabled,\n    isReadOnly: props.isReadOnly,\n    onChange: handleChange,\n  });\n\n  // `useFocusableRef` wants the ref of a real focusable control to forward to,\n  // and a group of radios has no single one — `RadioGroup` takes the same\n  // approach for the same reason.\n  const domRef = useObjectRef(ref);\n  const { radioGroupProps, labelProps } = useRadioGroup(\n    {\n      ...props,\n      // Only name the group here when nothing else does: an `aria-label` set\n      // unconditionally would outrank the visible label React Aria wires up.\n      'aria-label': props.label ? undefined : ariaLabel ?? 'Colors',\n      orientation: 'horizontal',\n    },\n    state,\n  );\n\n  const group = (\n    <GroupElement\n      ref={domRef}\n      qa={qa || 'ColorSwatchGroup'}\n      data-size={size}\n      data-input-type=\"colorswatchgroup\"\n      styles={styles}\n      mods={getValidationMods({ isInvalid, isValid })}\n      style={{\n        '--columns': String(columns ?? swatches.length + (showCustom ? 1 : 0)),\n      }}\n      {...mergeProps(radioGroupProps, {})}\n    >\n      {swatches.map((swatch) => (\n        <Swatch\n          key={swatch.key}\n          colorKey={swatch.key}\n          label={swatch.label}\n          state={state}\n          isDisabled={isDisabled}\n          size={size}\n          styles={swatchStyles}\n        />\n      ))}\n      {showCustom ? (\n        <ColorPicker\n          aria-label=\"Custom color\"\n          qa=\"ColorSwatchGroupCustom\"\n          format={format}\n          type=\"clear\"\n          size=\"small\"\n          value={isCustom ? currentValue ?? null : null}\n          isDisabled={isDisabled}\n          isReadOnly={props.isReadOnly}\n          triggerStyles={\n            isCustom ? CUSTOM_TRIGGER_SELECTED_STYLES : CUSTOM_TRIGGER_STYLES\n          }\n          swatchStyles={CUSTOM_SWATCH_STYLES}\n          onChange={publish}\n        >\n          {null}\n        </ColorPicker>\n      ) : null}\n    </GroupElement>\n  );\n\n  return wrapWithField(group, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n});\n\n(ColorSwatchGroup as any).cubeInputType = 'Picker';\n"],"mappings":"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"}
+{"version":3,"file":"ColorSwatchGroup.js","names":["useFocus","mergeProps"],"sources":["../../../../src/components/fields/ColorSwatchGroup/ColorSwatchGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, useMemo, useRef, useState } from 'react';\nimport { useRadio, useRadioGroup } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport { ColorFormat, formatColor, parseColor, toHex } from '../color/color';\nimport { useIsInsideColorPopover } from '../color/context';\nimport { ColorPicker } from '../ColorPicker';\n\nimport type { RadioGroupState } from 'react-stately';\n\n/** A swatch: a color, and optionally a name to announce instead of the color. */\nexport type CubeColorSwatchItem = string | { color: string; label?: string };\n\n/** The swatch edge in px, per size. `Item` takes an exact number. */\nconst SWATCH_PX: Record<string, number> = {\n  small: 16,\n  medium: 20,\n  large: 24,\n};\n\n/**\n * The trailing picker is a button wrapping a swatch, which would otherwise read\n * as a box inside a box. Stripping its chrome leaves just the swatch, so it\n * sits in the row as one of them.\n */\nconst CUSTOM_TRIGGER_STYLES: Styles = {\n  padding: 0,\n  radius: '1r',\n  border: 0,\n};\n\n/** Matches the ring a selected swatch gets, for a custom color in the row. */\nconst CUSTOM_TRIGGER_SELECTED_STYLES: Styles = {\n  ...CUSTOM_TRIGGER_STYLES,\n  shadow: 'inset 0 0 0 2bw #surface-text, inset 0 0 0 4bw #surface',\n};\n\n/** The swatch fills the stripped button rather than keeping its own size. */\nconst CUSTOM_SWATCH_STYLES: Styles = {\n  width: '100%',\n  height: '100%',\n  radius: '1r',\n};\n\nconst GroupElement = tasty({\n  qa: 'ColorSwatchGroup',\n  styles: {\n    display: 'grid',\n    gap: '.5x',\n    placeItems: 'stretch',\n    width: 'max-content',\n    gridColumns: 'repeat($columns, 1fr)',\n\n    // 20px, 16px and 24px — 1x is 8px.\n    '$swatch-size': {\n      '': '2.5x',\n      'size=small': '2x',\n      'size=large': '3x',\n    },\n  },\n});\n\nconst SwatchElement = tasty({\n  as: 'label',\n  qa: 'ColorSwatchOption',\n  styles: {\n    display: 'grid',\n    placeItems: 'stretch',\n    position: 'relative',\n    radius: '1r',\n    cursor: {\n      '': 'pointer',\n      disabled: 'default',\n    },\n    width: '$swatch-size $swatch-size',\n    height: '$swatch-size $swatch-size',\n    fill: '(#color-swatch, #clear)',\n    opacity: {\n      '': 1,\n      disabled: '$disabled-opacity',\n    },\n    // A ring at one border-width's distance, so the color area stays whole —\n    // the inner ring is the surface showing through as the gap. `outline` is\n    // deliberately left to the focus ring.\n    shadow: {\n      '': 'inset 0 0 0 1bw #dark.15',\n      // Outer ring first: earlier shadows paint over later ones, so this reads\n      // as 2bw of `#surface-text` at the edge, then 2bw of `#surface` inside it.\n      selected: 'inset 0 0 0 2bw #surface-text, inset 0 0 0 4bw #surface',\n    },\n    outline: {\n      '': '1bw #primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 3,\n    transition: 'theme',\n  },\n});\n\nexport interface CubeColorSwatchGroupProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps {\n  /** The colors to offer. Duplicates of the same color are dropped. */\n  colors?: CubeColorSwatchItem[];\n  /** The selected color (controlled). */\n  value?: string | null;\n  /** The selected color (uncontrolled). */\n  defaultValue?: string | null;\n  /** Called with the chosen color, written in `format`. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\n  /** How many swatches per row. Defaults to a single row. */\n  columns?: number;\n  /**\n   * Append a `ColorPicker` for colors outside the set. Ignored inside a color\n   * popover, which is where that picker would otherwise recurse.\n   */\n  allowCustom?: boolean;\n  /** The size of each swatch. */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  styles?: Styles;\n  /** Styles of an individual swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n}\n\ninterface SwatchProps {\n  colorKey: string;\n  label: string;\n  state: RadioGroupState;\n  isDisabled?: boolean;\n  size?: string;\n  styles?: Styles;\n  mods?: Record<string, boolean | undefined>;\n}\n\nfunction Swatch({\n  colorKey,\n  label,\n  state,\n  isDisabled,\n  size,\n  styles,\n  mods,\n}: SwatchProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const {\n    inputProps,\n    isSelected,\n    isDisabled: isRadioDisabled,\n  } = useRadio(\n    { value: colorKey, 'aria-label': label, isDisabled },\n    state,\n    inputRef,\n  );\n  // `useRadio` reports selection but not focus, and the swatch is the only\n  // thing a keyboard user can see — without this the ring never appears.\n  const { isFocused, focusProps } = useFocus({ isDisabled }, true);\n\n  return (\n    <SwatchElement\n      data-size={size}\n      mods={{\n        selected: isSelected,\n        disabled: isRadioDisabled,\n        focused: isFocused,\n        ...mods,\n      }}\n      styles={styles}\n      style={{ '--color-swatch-color': colorKey }}\n    >\n      <HiddenInput\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n        qa=\"ColorSwatchInput\"\n        mods={{ button: true, disabled: isRadioDisabled }}\n      />\n    </SwatchElement>\n  );\n}\n\n/**\n * A grid of color swatches, one of which can be selected — the palette half of\n * choosing a color, where `ColorPicker` is the freeform half.\n *\n * Swatches are keyed by their canonical hex, so the same color written two ways\n * collapses into one entry. Equivalent colors would otherwise make selection\n * ambiguous.\n */\nexport const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(\n  allProps: CubeColorSwatchGroupProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    colors = [],\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    columns,\n    allowCustom,\n    size = 'medium',\n    isDisabled,\n    isInvalid,\n    isValid,\n    swatchStyles,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n  const isInsidePopover = useIsInsideColorPopover();\n  // A custom picker inside a color popover would open a popover of its own.\n  const showCustom = allowCustom && !isInsidePopover;\n\n  /** Keyed by canonical hex so the same color written two ways is one swatch. */\n  const swatches = useMemo(() => {\n    const seen = new Map<string, { key: string; label: string }>();\n\n    for (const entry of colors) {\n      const raw = typeof entry === 'string' ? entry : entry.color;\n      const parsed = parseColor(raw);\n\n      if (!parsed) continue;\n\n      const key = toHex(parsed);\n\n      if (seen.has(key)) continue;\n\n      seen.set(key, {\n        key,\n        label:\n          (typeof entry === 'string' ? undefined : entry.label) ??\n          formatColor(parsed, format),\n      });\n    }\n\n    return [...seen.values()];\n  }, [colors, format]);\n\n  const [internalValue, setInternalValue] = useState<string | null>(\n    () => defaultValue ?? null,\n  );\n  const currentValue = value !== undefined ? value : internalValue;\n\n  const selectedColor = parseColor((currentValue ?? '').toString());\n  const selectedKey = selectedColor ? toHex(selectedColor) : null;\n  const isCustom =\n    !!selectedKey && !swatches.some((s) => s.key === selectedKey);\n\n  const publish = useEvent((next: string | null) => {\n    if (value === undefined) setInternalValue(next);\n\n    onChange?.(next);\n  });\n\n  const handleChange = useEvent((nextKey: string) => {\n    const parsed = parseColor(nextKey);\n\n    publish(parsed ? formatColor(parsed, format) : null);\n  });\n\n  const state = useRadioGroupState({\n    value: selectedKey ?? null,\n    isDisabled,\n    isReadOnly: props.isReadOnly,\n    onChange: handleChange,\n  });\n\n  // `useFocusableRef` wants the ref of a real focusable control to forward to,\n  // and a group of radios has no single one — `RadioGroup` takes the same\n  // approach for the same reason.\n  const domRef = useObjectRef(ref);\n  const { radioGroupProps, labelProps } = useRadioGroup(\n    {\n      ...props,\n      // Only name the group here when nothing else does: an `aria-label` set\n      // unconditionally would outrank the visible label React Aria wires up.\n      'aria-label': props.label ? undefined : ariaLabel ?? 'Colors',\n      orientation: 'horizontal',\n    },\n    state,\n  );\n\n  const group = (\n    <GroupElement\n      ref={domRef}\n      qa={qa || 'ColorSwatchGroup'}\n      data-size={size}\n      data-input-type=\"colorswatchgroup\"\n      styles={styles}\n      mods={getValidationMods({ isInvalid, isValid })}\n      style={{\n        '--columns': String(columns ?? swatches.length + (showCustom ? 1 : 0)),\n      }}\n      {...mergeProps(radioGroupProps, {})}\n    >\n      {swatches.map((swatch) => (\n        <Swatch\n          key={swatch.key}\n          colorKey={swatch.key}\n          label={swatch.label}\n          state={state}\n          isDisabled={isDisabled}\n          size={size}\n          styles={swatchStyles}\n        />\n      ))}\n      {showCustom ? (\n        <ColorPicker\n          aria-label=\"Custom color\"\n          qa=\"ColorSwatchGroupCustom\"\n          format={format}\n          type=\"clear\"\n          size={SWATCH_PX[size] ?? SWATCH_PX.medium}\n          value={isCustom ? currentValue ?? null : null}\n          isDisabled={isDisabled}\n          isReadOnly={props.isReadOnly}\n          triggerStyles={\n            isCustom ? CUSTOM_TRIGGER_SELECTED_STYLES : CUSTOM_TRIGGER_STYLES\n          }\n          swatchStyles={CUSTOM_SWATCH_STYLES}\n          onChange={publish}\n        >\n          {null}\n        </ColorPicker>\n      ) : null}\n    </GroupElement>\n  );\n\n  return wrapWithField(group, domRef, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n});\n\n(ColorSwatchGroup as any).cubeInputType = 'Picker';\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | 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";

package/dist/components/fields/CommandTextArea/CommandTextArea.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/CommandTextArea/caretPosition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 //#region src/components/fields/CommandTextArea/caretPosition.ts
 const MIRROR_STYLES = [
 	"boxSizing",

package/dist/components/fields/CommandTextArea/useCaretAnchor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { getCaretRect } from "./caretPosition.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
 

package/dist/components/fields/DatePicker/DateInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/DatePicker/DateInputBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";

package/dist/components/fields/DatePicker/DatePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/DatePicker/DatePickerButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/fields/DatePicker/DatePickerElement.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";
 

package/dist/components/fields/DatePicker/DatePickerInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

package/dist/components/fields/DatePicker/DatePickerSegment.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/DateRangePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { Space } from "../../layout/Space.js";

package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/DatePicker/MonthPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/PeriodPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/DatePicker/QuarterPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/TimeInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/DatePicker/WeekPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/YearPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/parseDate.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { parseAbsolute } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/parseDate.ts

package/dist/components/fields/DatePicker/period.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { CalendarDate, startOfMonth, startOfWeek, startOfYear, toCalendarDate } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/period.ts

package/dist/components/fields/DatePicker/props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 //#region src/components/fields/DatePicker/props.ts
 const DEFAULT_DATE_PROPS = {
 	granularity: "day",

package/dist/components/fields/DatePicker/utils.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { useImperativeHandle, useRef } from "react";
 import { createDOMRef } from "@react-spectrum/utils";
 import { createFocusManager } from "@react-aria/focus";

package/dist/components/fields/FileInput/FileInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/FilterListBox/FilterListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b3860b1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-5752be7 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";