@cube-dev/ui-kit 0.201.0 → 0.202.0

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":["BaseProps","BLOCK_STYLES","BlockStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","RefObject","useEffect","useRef","useState","Placement","useEvent","useI18n","FieldBaseProps","extractStyles","ItemButton","CubeItemProps","Text","getValidationIcon","getValidationTheme","useFieldProps","wrapWithField","Dialog","DialogTrigger","ColorSpace","ColorFormat","ColorValue","formatColor","parseColor","ColorPanel","ColorPopoverContext","ColorInput","ColorSwatch","ColorSwatchGroup","CubeColorSwatchItem","POPOVER_STYLES","overflow","PALETTE_STYLES","border","padding","width","FALLBACK_COLOR","h","s","l","ColorPickerWrapper","qa","styles","display","flow","gridRows","placeContent","placeItems","CubeColorPickerProps","value","defaultValue","onChange","format","defaultSpace","isOpen","defaultOpen","onOpenChange","shouldFlip","targetRef","HTMLElement","placement","children","placeholder","size","type","theme","triggerTooltip","swatches","swatchColumns","triggerStyles","swatchStyles","ColorPicker","allProps","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","id","value_0","onChange_0","t1","t2","controlledOpen","t3","t4","t5","t6","isDisabled","isReadOnly","isLoading","isInvalid","isValid","autoFocus","ariaLabel","ariaDescribedBy","undefined","t7","isEditingDisabled","t8","toString","color","setColor","space","setSpace","setOpen","emitted","t10","t9","current","t11","next","text","handleColorChange","t12","colorText","t13","next_0","handleValueChange","t14","next_1","handleOpenChange","t15","label","t16","t17","t18","t19","t20","t21","t22","t23","t24","t25","t26","t27","t28","t29","t30","length","t31","t32","t33","t34","pickerField","t35","cubeInputType","_c","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  RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Placement } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\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 } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorInput } from '../ColorInput';\nimport { ColorSwatch } from '../ColorSwatch';\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\n    BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps<string | null | undefined> {\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  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the trigger button.\n   *\n   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n   * dismissal treats as the trigger.\n   */\n  targetRef?: RefObject<HTMLElement | null>;\n  /**\n   * Placement of the popover relative to the anchor.\n   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n   * `'top start'`, `'right top'`, `'left top'`).\n   * @default 'bottom start'\n   */\n  placement?: Placement;\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 `labelTooltip`. */\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  /** Ids of elements that also describe the trigger, beside the field's own description and message. */\n  'aria-describedby'?: 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 { t } = useI18n();\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    targetRef,\n    placement = 'bottom start',\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    'aria-describedby': ariaDescribedBy,\n  } = props;\n\n  const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n\n  /**\n   * Loading locks the trigger, but the popover can outlive that — it may be\n   * controlled, or opened before the load began — so the editor inside has to\n   * refuse edits on the same terms.\n   */\n  const isEditingDisabled = isDisabled || isLoading;\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  /**\n   * The palette and the value field both speak in strings, and the field can\n   * hand back `null` when it is cleared — which has to reach the picker, or the\n   * text empties while the preview and trigger keep the old color.\n   */\n  const handleValueChange = useEvent((next: string | null) => {\n    emitted.current = next;\n    setColor(next ? parseColor(next) : null);\n    onChange?.(next);\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 ref={ref} styles={styles}>\n      <DialogTrigger\n        hideArrow\n        type=\"popover\"\n        placement={placement}\n        targetRef={targetRef}\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          // Fixed 20px rather than tracking the trigger, same as `ColorInput`\n          // and same as this has always rendered.\n          icon={\n            <ColorSwatch size=\"small\" color={color} styles={swatchStyles} />\n          }\n          rightIcon={getValidationIcon({ isInvalid, isValid })}\n          tooltip={triggerTooltip}\n          isDisabled={isEditingDisabled || isReadOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          // The trigger is the control, so the field's description and\n          // message describe it.\n          aria-describedby={ariaDescribedBy}\n          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label={t('colorPicker.colorPicker', '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={isEditingDisabled || isReadOnly}\n              previewFormat={format}\n              input={\n                <ColorInput\n                  isBare\n                  aria-label={t('colorPicker.colorValue', 'Color value')}\n                  format={format}\n                  value={colorText}\n                  isDisabled={isEditingDisabled}\n                  isReadOnly={isReadOnly}\n                  onChange={handleValueChange}\n                />\n              }\n              swatches={\n                swatches?.length ? (\n                  <ColorSwatchGroup\n                    isBare\n                    aria-label={t('colorPicker.palette', 'Palette')}\n                    styles={PALETTE_STYLES}\n                    colors={swatches}\n                    columns={swatchColumns}\n                    format={format}\n                    value={colorText}\n                    isDisabled={isEditingDisabled || isReadOnly}\n                    onChange={handleValueChange}\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, 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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"}
+{"version":3,"file":"ColorPicker.js","names":["BaseProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","RefObject","useEffect","useRef","useState","Placement","useEvent","useWarn","useI18n","FieldBaseProps","ItemButton","CubeItemProps","Text","getValidationIcon","getValidationTheme","useFieldProps","wrapWithField","FieldLayoutStyleProps","splitFieldLayout","TRIGGER_TOOLTIP_WARNING","Dialog","DialogTrigger","ColorSpace","ColorFormat","ColorValue","formatColor","parseColor","ColorPanel","ColorPopoverContext","ColorInput","ColorSwatch","ColorSwatchGroup","CubeColorSwatchItem","POPOVER_STYLES","overflow","PALETTE_STYLES","border","padding","width","FALLBACK_COLOR","h","s","l","ColorPickerWrapper","qa","styles","display","flow","gridRows","placeContent","placeItems","CubeColorPickerProps","value","defaultValue","onChange","format","defaultSpace","isOpen","defaultOpen","onOpenChange","shouldFlip","targetRef","HTMLElement","placement","children","placeholder","size","type","theme","tooltip","triggerTooltip","swatches","swatchColumns","triggerStyles","swatchStyles","ColorPicker","allProps","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","id","value_0","onChange_0","t1","t2","controlledOpen","t3","t4","t5","t6","isDisabled","isReadOnly","isLoading","isInvalid","isValid","autoFocus","ariaLabel","ariaDescribedBy","undefined","field","isEditingDisabled","t7","toString","color","setColor","space","setSpace","setOpen","emitted","t8","t9","current","t10","next","text","handleColorChange","t11","colorText","t12","next_0","handleValueChange","t13","next_1","handleOpenChange","t14","label","t15","t16","t17","t18","t19","t20","t21","t22","t23","t24","t25","t26","t27","t28","t29","t30","length","t31","t32","t33","pickerField","cubeInputType","_c","Text","ItemButton"],"sources":["../../../../src/components/fields/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { BaseProps, Styles, tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Placement } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { useWarn } from '../../../_internal/hooks/use-warn';\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\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 {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { TRIGGER_TOOLTIP_WARNING } from '../../form/legacy-tooltip';\nimport { Dialog } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorInput } from '../ColorInput';\nimport { ColorSwatch } from '../ColorSwatch';\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/** The rule separating the palette from the editor. */\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\n    BaseProps,\n    FieldLayoutStyleProps,\n    FieldBaseProps<string | null | undefined> {\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  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the trigger button.\n   *\n   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n   * dismissal treats as the trigger.\n   */\n  targetRef?: RefObject<HTMLElement | null>;\n  /**\n   * Placement of the popover relative to the anchor.\n   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n   * `'top start'`, `'right top'`, `'left top'`).\n   * @default 'bottom start'\n   */\n  placement?: Placement;\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  /**\n   * Tooltip for the trigger. The info badge next to the field's label is\n   * `labelTooltip`.\n   */\n  tooltip?: CubeItemProps['tooltip'];\n  /** @deprecated Use `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  /** Ids of elements that also describe the trigger, beside the field's own description and message. */\n  'aria-describedby'?: 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 { t } = useI18n();\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    targetRef,\n    placement = 'bottom start',\n    children,\n    placeholder = 'Pick a color',\n    size,\n    type = 'outline',\n    theme = 'default',\n    tooltip,\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    'aria-describedby': ariaDescribedBy,\n  } = props;\n\n  const { styles, field } = splitFieldLayout(props);\n\n  useWarn(triggerTooltip !== undefined, TRIGGER_TOOLTIP_WARNING);\n\n  /**\n   * Loading locks the trigger, but the popover can outlive that — it may be\n   * controlled, or opened before the load began — so the editor inside has to\n   * refuse edits on the same terms.\n   */\n  const isEditingDisabled = isDisabled || isLoading;\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  /**\n   * The palette and the value field both speak in strings, and the field can\n   * hand back `null` when it is cleared — which has to reach the picker, or the\n   * text empties while the preview and trigger keep the old color.\n   */\n  const handleValueChange = useEvent((next: string | null) => {\n    emitted.current = next;\n    setColor(next ? parseColor(next) : null);\n    onChange?.(next);\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 ref={ref} styles={styles}>\n      <DialogTrigger\n        hideArrow\n        type=\"popover\"\n        placement={placement}\n        targetRef={targetRef}\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          // Fixed 20px rather than tracking the trigger, same as `ColorInput`\n          // and same as this has always rendered.\n          icon={\n            <ColorSwatch size=\"small\" color={color} styles={swatchStyles} />\n          }\n          rightIcon={getValidationIcon({ isInvalid, isValid })}\n          tooltip={tooltip ?? triggerTooltip}\n          isDisabled={isEditingDisabled || isReadOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          // The trigger is the control, so the field's description and\n          // message describe it.\n          aria-describedby={ariaDescribedBy}\n          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label={t('colorPicker.colorPicker', '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={isEditingDisabled || isReadOnly}\n              previewFormat={format}\n              input={\n                <ColorInput\n                  isBare\n                  aria-label={t('colorPicker.colorValue', 'Color value')}\n                  format={format}\n                  value={colorText}\n                  isDisabled={isEditingDisabled}\n                  isReadOnly={isReadOnly}\n                  onChange={handleValueChange}\n                />\n              }\n              swatches={\n                swatches?.length ? (\n                  <ColorSwatchGroup\n                    isBare\n                    aria-label={t('colorPicker.palette', 'Palette')}\n                    styles={PALETTE_STYLES}\n                    colors={swatches}\n                    columns={swatchColumns}\n                    format={format}\n                    value={colorText}\n                    isDisabled={isEditingDisabled || isReadOnly}\n                    onChange={handleValueChange}\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, {\n    ...props,\n    ...field,\n    // The trigger's own. Handed on, it read as the legacy field `tooltip`.\n    tooltip: undefined,\n  });\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/ColorSwatch/ColorSwatch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { parseColor, toHex } from "../color/color.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,15 +1,16 @@
 
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
 import { ColorFormat } from "../color/color.js";
-import { BaseProps, BlockStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import { BaseProps, Styles } from "@tenphi/tasty";
 //#region src/components/fields/ColorSwatchGroup/ColorSwatchGroup.d.ts
 /** A swatch: a color, and optionally a name to announce instead of the color. */
 export type CubeColorSwatchItem = string | {
   color: string;
   label?: string;
 };
-export interface CubeColorSwatchGroupProps extends BaseProps, OuterStyleProps, BlockStyleProps, FieldBaseProps<string | null | undefined> {
+export interface CubeColorSwatchGroupProps extends BaseProps, FieldLayoutStyleProps, FieldBaseProps<string | null | undefined> {
   /** 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,5 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
@@ -7,12 +6,13 @@ import { useI18n } from "../../../i18n/useI18n.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
+import { splitFieldLayout } from "../../form/field-layout.js";
 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 { c } from "react/compiler-runtime";
-import { BLOCK_STYLES, OUTER_STYLES, mergeStyles, tasty } from "@tenphi/tasty";
+import { mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRadio, useRadioGroup } from "react-aria";
@@ -221,7 +221,7 @@ function Swatch(t0) {
 * ambiguous.
 */
 const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
-	const $ = c(74);
+	const $ = c(59);
 	const { t } = useI18n();
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -242,17 +242,11 @@ const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
 	const colors = t4;
 	const format = t2 === void 0 ? "hex" : t2;
 	const size = t3 === void 0 ? "medium" : t3;
-	let t5;
-	if ($[3] !== props) {
-		t5 = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);
-		$[3] = props;
-		$[4] = t5;
-	} else t5 = $[4];
-	const styles = t5;
+	const { styles, field } = splitFieldLayout(props);
 	const isInsidePopover = useIsInsideColorPopover();
 	const showCustom = allowCustom && !isInsidePopover;
-	let t6;
-	if ($[5] !== colors || $[6] !== format) {
+	let t5;
+	if ($[3] !== colors || $[4] !== format) {
 		const seen = /* @__PURE__ */ new Map();
 		for (const entry of colors) {
 			const raw = typeof entry === "string" ? entry : entry.color;
@@ -265,129 +259,128 @@ const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
 				label: (typeof entry === "string" ? void 0 : entry.label) ?? formatColor(parsed, format)
 			});
 		}
-		t6 = [...seen.values()];
-		$[5] = colors;
-		$[6] = format;
+		t5 = [...seen.values()];
+		$[3] = colors;
+		$[4] = format;
+		$[5] = t5;
+	} else t5 = $[5];
+	const swatches = t5;
+	let t6;
+	if ($[6] !== defaultValue) {
+		t6 = () => defaultValue ?? null;
+		$[6] = defaultValue;
 		$[7] = t6;
 	} else t6 = $[7];
-	const swatches = t6;
+	const [internalValue, setInternalValue] = useState(t6);
+	const currentValue = value_0 !== void 0 ? value_0 : internalValue;
 	let t7;
-	if ($[8] !== defaultValue) {
-		t7 = () => defaultValue ?? null;
-		$[8] = defaultValue;
+	if ($[8] !== currentValue) {
+		const selectedColor = parseColor((currentValue ?? "").toString());
+		t7 = selectedColor ? toHex(selectedColor) : null;
+		$[8] = currentValue;
 		$[9] = t7;
 	} else t7 = $[9];
-	const [internalValue, setInternalValue] = useState(t7);
-	const currentValue = value_0 !== void 0 ? value_0 : internalValue;
+	const selectedKey = t7;
 	let t8;
-	if ($[10] !== currentValue) {
-		const selectedColor = parseColor((currentValue ?? "").toString());
-		t8 = selectedColor ? toHex(selectedColor) : null;
-		$[10] = currentValue;
-		$[11] = t8;
-	} else t8 = $[11];
-	const selectedKey = t8;
+	if ($[10] !== selectedKey || $[11] !== swatches) {
+		t8 = !!selectedKey && !swatches.some((s) => s.key === selectedKey);
+		$[10] = selectedKey;
+		$[11] = swatches;
+		$[12] = t8;
+	} else t8 = $[12];
+	const isCustom = t8;
 	let t9;
-	if ($[12] !== selectedKey || $[13] !== swatches) {
-		t9 = !!selectedKey && !swatches.some((s) => s.key === selectedKey);
-		$[12] = selectedKey;
-		$[13] = swatches;
-		$[14] = t9;
-	} else t9 = $[14];
-	const isCustom = t9;
-	let t10;
-	if ($[15] !== onChange_0 || $[16] !== value_0) {
-		t10 = (next) => {
+	if ($[13] !== onChange_0 || $[14] !== value_0) {
+		t9 = (next) => {
 			if (value_0 === void 0) setInternalValue(next);
 			onChange_0?.(next);
 		};
-		$[15] = onChange_0;
-		$[16] = value_0;
-		$[17] = t10;
-	} else t10 = $[17];
-	const publish = useEvent(t10);
-	let t11;
-	if ($[18] !== format || $[19] !== publish) {
-		t11 = (nextKey) => {
+		$[13] = onChange_0;
+		$[14] = value_0;
+		$[15] = t9;
+	} else t9 = $[15];
+	const publish = useEvent(t9);
+	let t10;
+	if ($[16] !== format || $[17] !== publish) {
+		t10 = (nextKey) => {
 			const parsed_0 = nextKey == null ? null : parseColor(nextKey);
 			publish(parsed_0 ? formatColor(parsed_0, format) : null);
 		};
-		$[18] = format;
-		$[19] = publish;
-		$[20] = t11;
-	} else t11 = $[20];
-	const handleChange = useEvent(t11);
-	const t12 = selectedKey ?? null;
-	let t13;
-	if ($[21] !== handleChange || $[22] !== isDisabled || $[23] !== isInvalid || $[24] !== props.isReadOnly || $[25] !== t12) {
-		t13 = {
-			value: t12,
+		$[16] = format;
+		$[17] = publish;
+		$[18] = t10;
+	} else t10 = $[18];
+	const handleChange = useEvent(t10);
+	const t11 = selectedKey ?? null;
+	let t12;
+	if ($[19] !== handleChange || $[20] !== isDisabled || $[21] !== isInvalid || $[22] !== props.isReadOnly || $[23] !== t11) {
+		t12 = {
+			value: t11,
 			isDisabled,
 			isReadOnly: props.isReadOnly,
 			isInvalid,
 			onChange: handleChange
 		};
-		$[21] = handleChange;
-		$[22] = isDisabled;
-		$[23] = isInvalid;
-		$[24] = props.isReadOnly;
-		$[25] = t12;
-		$[26] = t13;
-	} else t13 = $[26];
-	const state = useRadioGroupState(t13);
+		$[19] = handleChange;
+		$[20] = isDisabled;
+		$[21] = isInvalid;
+		$[22] = props.isReadOnly;
+		$[23] = t11;
+		$[24] = t12;
+	} else t12 = $[24];
+	const state = useRadioGroupState(t12);
 	const domRef = useObjectRef(ref);
+	let t13;
+	if ($[25] !== ariaLabel || $[26] !== props.label || $[27] !== t) {
+		t13 = props.label ? void 0 : ariaLabel ?? t("colorSwatchGroup.colors", "Colors");
+		$[25] = ariaLabel;
+		$[26] = props.label;
+		$[27] = t;
+		$[28] = t13;
+	} else t13 = $[28];
 	let t14;
-	if ($[27] !== ariaLabel || $[28] !== props.label || $[29] !== t) {
-		t14 = props.label ? void 0 : ariaLabel ?? t("colorSwatchGroup.colors", "Colors");
-		$[27] = ariaLabel;
-		$[28] = props.label;
-		$[29] = t;
-		$[30] = t14;
-	} else t14 = $[30];
-	let t15;
-	if ($[31] !== props || $[32] !== t14) {
-		t15 = {
+	if ($[29] !== props || $[30] !== t13) {
+		t14 = {
 			...props,
 			form: void 0,
-			"aria-label": t14,
+			"aria-label": t13,
 			orientation: "horizontal"
 		};
-		$[31] = props;
-		$[32] = t14;
-		$[33] = t15;
-	} else t15 = $[33];
-	const { radioGroupProps, labelProps } = useRadioGroup(t15, state);
-	const t16 = qa || "ColorSwatchGroup";
-	let t17;
-	if ($[34] !== isInvalid || $[35] !== isValid) {
-		t17 = getValidationMods({
+		$[29] = props;
+		$[30] = t13;
+		$[31] = t14;
+	} else t14 = $[31];
+	const { radioGroupProps, labelProps } = useRadioGroup(t14, state);
+	let t15;
+	if ($[32] !== isInvalid || $[33] !== isValid) {
+		t15 = getValidationMods({
 			isInvalid,
 			isValid
 		});
-		$[34] = isInvalid;
-		$[35] = isValid;
-		$[36] = t17;
-	} else t17 = $[36];
-	const t18 = !!columns;
-	let t19;
-	if ($[37] !== t17 || $[38] !== t18) {
-		t19 = {
-			...t17,
-			columns: t18
+		$[32] = isInvalid;
+		$[33] = isValid;
+		$[34] = t15;
+	} else t15 = $[34];
+	const t16 = !!columns;
+	let t17;
+	if ($[35] !== t15 || $[36] !== t16) {
+		t17 = {
+			...t15,
+			columns: t16
 		};
+		$[35] = t15;
+		$[36] = t16;
 		$[37] = t17;
-		$[38] = t18;
-		$[39] = t19;
-	} else t19 = $[39];
-	let t20;
-	if ($[40] !== columns) {
-		t20 = columns ? { $columns: columns } : void 0;
-		$[40] = columns;
-		$[41] = t20;
-	} else t20 = $[41];
-	let t21;
-	if ($[42] !== isDisabled || $[43] !== size || $[44] !== state || $[45] !== swatchStyles || $[46] !== swatches) {
-		t21 = swatches.map((swatch) => /* @__PURE__ */ jsx(Swatch, {
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== columns) {
+		t18 = columns ? { $columns: columns } : void 0;
+		$[38] = columns;
+		$[39] = t18;
+	} else t18 = $[39];
+	let t19;
+	if ($[40] !== isDisabled || $[41] !== size || $[42] !== state || $[43] !== swatchStyles || $[44] !== swatches) {
+		t19 = swatches.map((swatch) => /* @__PURE__ */ jsx(Swatch, {
 			colorKey: swatch.key,
 			label: swatch.label,
 			state,
@@ -395,26 +388,26 @@ const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
 			size,
 			styles: swatchStyles
 		}, swatch.key));
-		$[42] = isDisabled;
-		$[43] = size;
-		$[44] = state;
-		$[45] = swatchStyles;
-		$[46] = swatches;
-		$[47] = t21;
-	} else t21 = $[47];
-	let t22;
-	if ($[48] !== radioGroupProps || $[49] !== t21) {
-		t22 = /* @__PURE__ */ jsx(RadiosElement, {
+		$[40] = isDisabled;
+		$[41] = size;
+		$[42] = state;
+		$[43] = swatchStyles;
+		$[44] = swatches;
+		$[45] = t19;
+	} else t19 = $[45];
+	let t20;
+	if ($[46] !== radioGroupProps || $[47] !== t19) {
+		t20 = /* @__PURE__ */ jsx(RadiosElement, {
 			...radioGroupProps,
-			children: t21
+			children: t19
 		});
-		$[48] = radioGroupProps;
-		$[49] = t21;
-		$[50] = t22;
-	} else t22 = $[50];
-	let t23;
-	if ($[51] !== currentValue || $[52] !== format || $[53] !== isCustom || $[54] !== isDisabled || $[55] !== props.isReadOnly || $[56] !== publish || $[57] !== showCustom || $[58] !== size || $[59] !== t) {
-		t23 = showCustom ? /* @__PURE__ */ jsx(ColorPicker, {
+		$[46] = radioGroupProps;
+		$[47] = t19;
+		$[48] = t20;
+	} else t20 = $[48];
+	let t21;
+	if ($[49] !== currentValue || $[50] !== format || $[51] !== isCustom || $[52] !== isDisabled || $[53] !== props.isReadOnly || $[54] !== publish || $[55] !== showCustom || $[56] !== size || $[57] !== t) {
+		t21 = showCustom ? /* @__PURE__ */ jsx(ColorPicker, {
 			isBare: true,
 			"aria-label": t("colorSwatchGroup.customColor", "Custom color"),
 			qa: "ColorSwatchGroupCustom",
@@ -429,52 +422,31 @@ const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
 			onChange: publish,
 			children: null
 		}) : null;
-		$[51] = currentValue;
-		$[52] = format;
-		$[53] = isCustom;
-		$[54] = isDisabled;
-		$[55] = props.isReadOnly;
-		$[56] = publish;
-		$[57] = showCustom;
-		$[58] = size;
-		$[59] = t;
-		$[60] = t23;
-	} else t23 = $[60];
-	let t24;
-	if ($[61] !== domRef || $[62] !== size || $[63] !== styles || $[64] !== t16 || $[65] !== t19 || $[66] !== t20 || $[67] !== t22 || $[68] !== t23) {
-		t24 = /* @__PURE__ */ jsxs(GroupElement, {
-			ref: domRef,
-			qa: t16,
-			"data-size": size,
-			"data-input-type": "colorswatchgroup",
-			styles,
-			mods: t19,
-			tokens: t20,
-			children: [t22, t23]
-		});
-		$[61] = domRef;
-		$[62] = size;
-		$[63] = styles;
-		$[64] = t16;
-		$[65] = t19;
-		$[66] = t20;
-		$[67] = t22;
-		$[68] = t23;
-		$[69] = t24;
-	} else t24 = $[69];
-	const group = t24;
-	let t25;
-	if ($[70] !== group || $[71] !== labelProps || $[72] !== props) {
-		t25 = wrapWithField(group, {
-			...props,
-			labelProps: mergeProps$1(props.labelProps, labelProps)
-		});
-		$[70] = group;
-		$[71] = labelProps;
-		$[72] = props;
-		$[73] = t25;
-	} else t25 = $[73];
-	return t25;
+		$[49] = currentValue;
+		$[50] = format;
+		$[51] = isCustom;
+		$[52] = isDisabled;
+		$[53] = props.isReadOnly;
+		$[54] = publish;
+		$[55] = showCustom;
+		$[56] = size;
+		$[57] = t;
+		$[58] = t21;
+	} else t21 = $[58];
+	return wrapWithField(/* @__PURE__ */ jsxs(GroupElement, {
+		ref: domRef,
+		qa: qa || "ColorSwatchGroup",
+		"data-size": size,
+		"data-input-type": "colorswatchgroup",
+		styles,
+		mods: t17,
+		tokens: t18,
+		children: [t20, t21]
+	}), {
+		...props,
+		...field,
+		labelProps: mergeProps$1(props.labelProps, labelProps)
+	});
 });
 ColorSwatchGroup.cubeInputType = "Picker";
 function _temp(t0) {