@cube-dev/ui-kit 0.207.0 → 0.208.0

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["useFocusableRef","IconCheck","IconMinus","BaseProps","Element","filterBaseProps","Styles","tasty","forwardRef","ReactElement","RefObject","useContext","useMemo","useRef","AriaCheckboxProps","useCheckbox","useCheckboxGroupItem","useHover","useToggleState","Icon","FieldBaseProps","ToggleSelectionProps","mergeProps","mergeRefs","getDisabledElementProps","getInertInputProps","useFocus","castNullableIsSelected","WithNullableSelected","useAutoTooltip","getValidationMods","INLINE_LABEL_STYLES","LABEL_STYLES","resolveValidationProps","useFieldProps","wrapWithField","FieldLayoutStyleProps","splitFieldLayout","HiddenInput","mergeTooltipFocusProps","splitTooltipTriggerProps","TooltipFocusProps","CheckboxGroup","CheckboxGroupContext","FocusableRef","CubeTooltipProviderProps","CubeCheckboxProps","Omit","inputStyles","isIndeterminate","value","tooltip","CheckboxWrapperElement","as","qa","styles","position","display","placeItems","placeContent","gap","flow","preset","cursor","width","color","CheckboxElement","radius","fill","readonly","disabled","border","invalid","valid","height","outline","focused","outlineOffset","transition","Checkbox","allProps","ref","groupState","originalProps","props","defaultValidationTrigger","valuePropsMapper","onChange","isSelected","unsafe__isDisabled","isDisabled","insideForm","children","label","isInvalid","isValid","labelProps","labelRef","labelStyles","labelPosition","isHidden","field","hasChrome","undefined","isFocused","focusProps","inputRef","domRef","renderWithTooltip","isTooltipActive","toggleState","ariaProps","form","inputProps","isInputDisabled","isReadOnly","isRequired","hoverProps","isHovered","keepEvents","isInert","excludeFromTabOrder","markIcon","key","console","warn","mods","checked","indeterminate","hovered","wrapperProps","className","style","qaVal","wrapperRefWith","tooltipRef","HTMLElement","renderCheckbox","tooltipFocusProps","autoFocus","checkboxField","tooltipTriggerProps","pointerProps","for","id","_Checkbox","cubeInputType","__Checkbox","Object","assign","Group","displayName","useFocus","mergeProps","CheckboxGroup"],"sources":["../../../../src/components/fields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\nimport {\n  BaseProps,\n  Element,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  ReactElement,\n  RefObject,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem,\n  useHover,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { Icon } from '../../../icons/Icon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps, mergeRefs } from '../../../utils/react';\nimport {\n  getDisabledElementProps,\n  getInertInputProps,\n} from '../../../utils/react/disabledProps';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { useAutoTooltip } from '../../content/use-auto-tooltip';\nimport {\n  getValidationMods,\n  INLINE_LABEL_STYLES,\n  LABEL_STYLES,\n  resolveValidationProps,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { HiddenInput } from '../../HiddenInput';\nimport {\n  mergeTooltipFocusProps,\n  splitTooltipTriggerProps,\n  TooltipFocusProps,\n} from '../../overlays/Tooltip/split-trigger-props';\n\nimport { CheckboxGroup } from './CheckboxGroup';\nimport { CheckboxGroupContext } from './context';\n\nimport type { FocusableRef } from '@react-types/shared';\nimport type { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\n\nexport interface CubeCheckboxProps\n  extends\n    BaseProps,\n    FieldLayoutStyleProps,\n    Omit<AriaCheckboxProps, 'form' | 'name'>,\n    ToggleSelectionProps,\n    FieldBaseProps<boolean | null | undefined> {\n  inputStyles?: Styles;\n  isIndeterminate?: boolean;\n  value?: string;\n  /**\n   * The checkbox's own tooltip, shown on hover over the box and its inline\n   * label — also while the checkbox is disabled — and on keyboard focus. A string, or `TooltipProvider` props\n   * (`title`, `placement`, …). The info badge next to a field label is\n   * `labelTooltip`.\n   */\n  tooltip?: string | Omit<CubeTooltipProviderProps, 'children'>;\n}\n\nconst CheckboxWrapperElement = tasty({\n  as: 'label',\n  qa: 'CheckboxWrapper',\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    placeItems: 'center start',\n    placeContent: 'baseline',\n    gap: '1x',\n    flow: 'row',\n    preset: 'default',\n    cursor: '$pointer',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst CheckboxElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: '.5r',\n    fill: {\n      '': '#surface',\n      'checked | indeterminate': '#primary',\n      'invalid & !checked': '#surface',\n      'invalid & checked': '#danger',\n      'valid & !checked': '#surface',\n      'valid & checked': '#success',\n      readonly: '#surface-2',\n      disabled: '#dark.12',\n    },\n    // The check / minus icon is always rendered inside the box, so the\n    // default color must be transparent when the checkbox is neither\n    // checked nor indeterminate — otherwise the white stroke shows through\n    // the dark `#surface` fill in dark schemes (it used to be hidden\n    // accidentally by the legacy white-on-white `fill: '#white'`).\n    color: {\n      '': '#clear',\n      'checked | indeterminate': '#white',\n      'readonly & !disabled & (checked | indeterminate)': '#dark-02',\n    },\n    border: {\n      '': '#dark.30',\n      invalid: '#danger',\n      valid: '#success',\n      'disabled | ((indeterminate | checked) & !invalid & !valid & !readonly)':\n        '#clear',\n    },\n    width: '(2x - 2bw)',\n    height: '(2x - 2bw)',\n    outline: {\n      '': '#primary-text.0',\n      focused: '$ring-width #primary-text',\n    },\n    outlineOffset: '$outline-offset',\n    transition: 'theme',\n  },\n});\n\nfunction Checkbox(\n  allProps: WithNullableSelected<CubeCheckboxProps>,\n  ref: FocusableRef,\n) {\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n\n  const originalProps = castNullableIsSelected(allProps);\n\n  const props = useFieldProps(originalProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value ?? false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n    unsafe__isDisabled: !!groupState,\n  });\n\n  let {\n    qa,\n    isIndeterminate = false,\n    isDisabled = false,\n    insideForm,\n    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelRef,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    tooltip,\n  } = props;\n\n  // A grouped checkbox is an option of its group's field and never wraps.\n  const { styles, field } = splitFieldLayout(\n    props,\n    groupState ? { hasChrome: false } : undefined,\n  );\n\n  labelStyles = useMemo(\n    () => ({\n      ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),\n      ...labelStyles,\n    }),\n    [groupState, labelStyles],\n  );\n\n  let { isFocused, focusProps } = useFocus(true);\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let { renderWithTooltip, isTooltipActive } = useAutoTooltip({\n    tooltip,\n    children: null,\n  });\n\n  const toggleState = useToggleState(props);\n\n  // React Aria writes `form` onto the input as the id of its `<form>`, so the\n  // form instance would render as `form=\"[object Object]\"` and detach it. It\n  // reads `children` only to warn about a checkbox with no visible label; a\n  // field `label` is one, named through its `<label for>`. Writing it into\n  // `aria-label` instead used to drop the inline text from the name and\n  // replace the caller's own `aria-label`.\n  let ariaProps = { ...props, form: undefined, children: children ?? label };\n  // `isReadOnly` is React Aria's: the checkbox's own or its group's.\n  let {\n    inputProps,\n    isDisabled: isInputDisabled,\n    isReadOnly,\n  } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...ariaProps,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).\n          value: props.value || '',\n          // Only pass isRequired and the validation state to react-aria if they came from\n          // the props for this individual checkbox, and not from the group via context.\n          isRequired: originalProps.isRequired,\n          isInvalid: resolveValidationProps(originalProps).isInvalid,\n        },\n        groupState,\n        inputRef,\n      )\n    : useCheckbox(ariaProps, toggleState, inputRef);\n\n  // A read-only checkbox takes no hover state: a press would change nothing.\n  let { hoverProps, isHovered } = useHover({\n    isDisabled: isDisabled || isReadOnly,\n  });\n\n  // A disabled checkbox with a tooltip to show keeps its focus, as a disabled\n  // `Button` or `Radio` does: the tooltip is usually the reason it is disabled,\n  // and focus is how the keyboard opens it. It is `aria-disabled` and inert\n  // instead. React Aria's own result covers a disabled group too.\n  if (\n    getDisabledElementProps({\n      isDisabled: isInputDisabled,\n      keepEvents: isTooltipActive,\n      as: 'input',\n    }).isInert\n  ) {\n    inputProps = getInertInputProps(inputProps, {\n      excludeFromTabOrder: props.excludeFromTabOrder,\n    });\n  }\n\n  // Decorative: the input already announces checked, unchecked and mixed.\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3} aria-hidden=\"true\">\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3} aria-hidden=\"true\">\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      // The raw props: `castNullableIsSelected` turns `null` into `false`.\n      if (allProps[key] != null) {\n        console.warn(\n          `CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`,\n        );\n      }\n    }\n    if (props.value == null) {\n      console.warn(\n        'CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.',\n      );\n    }\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    indeterminate: isIndeterminate,\n    ...getValidationMods({ isInvalid, isValid }),\n    disabled: isDisabled,\n    readonly: isReadOnly,\n    hovered: isHovered,\n    focused: isFocused,\n    'side-label': labelPosition === 'side',\n    'inside-form': insideForm,\n  };\n\n  // The wrapper's props, the same in both branches. React Aria puts `id`,\n  // `aria-*` and `data-*` on the input, so they stay off the `<label>`: the\n  // grouped one used to copy them, and `#id`, `for` and `aria-labelledby`\n  // resolved to it. A caller's own `mods` stay, under the state ones.\n  const wrapperProps = {\n    className: props.className,\n    style: props.style,\n    qaVal: props.qaVal,\n    styles,\n    isHidden,\n    mods: { ...props.mods, ...mods },\n  };\n\n  // The wrapper is the checkbox's element in both branches, so the field's ref\n  // reaches it with or without the field chrome; a tooltip's ref shares it.\n  const wrapperRefWith = (tooltipRef?: RefObject<HTMLElement>) =>\n    tooltipRef ? mergeRefs(domRef, tooltipRef) : domRef;\n\n  // The input, where keyboard focus lands, takes the tooltip's focus-side\n  // trigger props; the wrapper keeps the hover side and positions the tooltip.\n  const renderCheckbox = (tooltipFocusProps?: TooltipFocusProps) => (\n    <>\n      <HiddenInput\n        qa={qa || 'Checkbox'}\n        data-input-type=\"checkbox\"\n        // For a dialog kept mounted while closed, as on `Button`.\n        {...(props.autoFocus ? { 'data-autofocus': '' } : undefined)}\n        {...mergeTooltipFocusProps(\n          mergeProps(inputProps, focusProps),\n          tooltipFocusProps,\n        )}\n        ref={inputRef}\n        // Not left to the native `disabled`, which an inert input drops.\n        mods={{ disabled: isInputDisabled }}\n      />\n      <CheckboxElement data-element=\"Input\" mods={mods} styles={inputStyles}>\n        {markIcon}\n      </CheckboxElement>\n    </>\n  );\n\n  if (!groupState) {\n    const checkboxField = renderWithTooltip(\n      (tooltipTriggerProps, tooltipRef) => {\n        const { pointerProps, focusProps: tooltipFocusProps } =\n          splitTooltipTriggerProps(tooltipTriggerProps);\n\n        return (\n          // `styles` is forwarded here as well as in the in-group branch\n          // below — it used to be extracted from props and then dropped on\n          // this path, so `<Checkbox styles={{ … }}>` outside a group was a\n          // silent no-op.\n          <CheckboxWrapperElement\n            {...wrapperProps}\n            {...mergeProps(hoverProps, pointerProps)}\n            ref={wrapperRefWith(tooltipRef)}\n          >\n            {renderCheckbox(tooltipFocusProps)}\n            {children ? (\n              // Same element and preset as the in-group branch. This path used\n              // to force children through `<Text nowrap>`: `white-space:\n              // nowrap` inherits, so a label longer than a few words — or any\n              // custom node with two lines in it — could not wrap at all, and\n              // the label also missed the preset a grouped one picks up.\n              <Element\n                styles={INLINE_LABEL_STYLES}\n                mods={{\n                  ...getValidationMods({ isInvalid, isValid }),\n                  disabled: isDisabled,\n                }}\n              >\n                {children}\n              </Element>\n            ) : null}\n          </CheckboxWrapperElement>\n        );\n      },\n      'top',\n    );\n\n    // `tooltip` is the checkbox's own here, not a legacy label badge.\n    // `renderWithTooltip` is typed for any node; here it returns an element.\n    // The field label names the input through `for`, which `useFieldProps`\n    // leaves unset for a caller's own `id` and inside the legacy `<Field>`, as\n    // `Switch` does.\n    return wrapWithField(checkboxField as ReactElement, {\n      ...props,\n      ...field,\n      tooltip: undefined,\n      labelProps: { ...props.labelProps, for: props.id },\n    });\n  }\n\n  return renderWithTooltip((tooltipTriggerProps, tooltipRef) => {\n    const { pointerProps, focusProps: tooltipFocusProps } =\n      splitTooltipTriggerProps(tooltipTriggerProps);\n\n    return (\n      <CheckboxWrapperElement\n        {...wrapperProps}\n        {...mergeProps(hoverProps, pointerProps)}\n        ref={wrapperRefWith(tooltipRef)}\n      >\n        {renderCheckbox(tooltipFocusProps)}\n        {(label ?? children) ? (\n          <Element\n            // Before `labelProps`, so a `ref` passed there still wins.\n            ref={labelRef}\n            styles={labelStyles}\n            mods={{\n              ...getValidationMods({ isInvalid, isValid }),\n              disabled: isDisabled,\n            }}\n            {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n          >\n            {label ?? children}\n          </Element>\n        ) : null}\n      </CheckboxWrapperElement>\n    );\n  }, 'top');\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\n\n(_Checkbox as any).cubeInputType = 'Checkbox';\nlet __Checkbox = Object.assign(\n  _Checkbox as typeof _Checkbox & { Group: typeof CheckboxGroup },\n  { Group: CheckboxGroup },\n);\n\n__Checkbox.displayName = 'Checkbox';\n\nexport { __Checkbox as Checkbox };\nexport type { AriaCheckboxProps };\nexport { useCheckbox };\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["useFocusableRef","IconCheck","IconMinus","BaseProps","Element","filterBaseProps","Styles","tasty","forwardRef","ReactElement","RefObject","useContext","useMemo","useRef","AriaCheckboxProps","useCheckbox","useCheckboxGroupItem","useHover","useToggleState","Icon","FieldBaseProps","ToggleSelectionProps","getDisabledElementProps","getInertInputProps","useFocus","mergeProps","castNullableIsSelected","WithNullableSelected","mergeRefs","useAutoTooltip","FieldLayoutStyleProps","splitFieldLayout","useFieldProps","INLINE_LABEL_STYLES","LABEL_STYLES","getValidationMods","resolveValidationProps","wrapWithField","HiddenInput","mergeTooltipFocusProps","splitTooltipTriggerProps","TooltipFocusProps","CheckboxGroup","CheckboxGroupContext","FocusableRef","CubeTooltipProviderProps","CubeCheckboxProps","Omit","inputStyles","isIndeterminate","value","tooltip","CheckboxWrapperElement","as","qa","styles","position","display","placeItems","placeContent","gap","flow","preset","cursor","width","color","CheckboxElement","radius","fill","readonly","disabled","border","invalid","valid","height","outline","focused","outlineOffset","transition","Checkbox","allProps","ref","groupState","originalProps","props","defaultValidationTrigger","valuePropsMapper","onChange","isSelected","unsafe__isDisabled","isDisabled","insideForm","children","label","isInvalid","isValid","labelProps","labelRef","labelStyles","labelPosition","isHidden","field","hasChrome","undefined","isFocused","focusProps","inputRef","domRef","renderWithTooltip","isTooltipActive","toggleState","ariaProps","form","inputProps","isInputDisabled","isReadOnly","isRequired","hoverProps","isHovered","keepEvents","isInert","excludeFromTabOrder","markIcon","key","console","warn","mods","checked","indeterminate","hovered","wrapperProps","className","style","qaVal","wrapperRefWith","tooltipRef","HTMLElement","renderCheckbox","tooltipFocusProps","autoFocus","checkboxField","tooltipTriggerProps","pointerProps","for","id","_Checkbox","cubeInputType","__Checkbox","Object","assign","Group","displayName","useFocus","mergeProps","CheckboxGroup"],"sources":["../../../../src/components/fields/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\nimport {\n  BaseProps,\n  Element,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  ReactElement,\n  RefObject,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  AriaCheckboxProps,\n  useCheckbox,\n  useCheckboxGroupItem,\n  useHover,\n} from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { Icon } from '../../../icons/Icon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared/form';\nimport {\n  getDisabledElementProps,\n  getInertInputProps,\n} from '../../../utils/react/disabledProps';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { mergeProps } from '../../../utils/react/mergeProps';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { mergeRefs } from '../../../utils/react/useCombinedRefs';\nimport { useAutoTooltip } from '../../content/use-auto-tooltip';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { useFieldProps } from '../../form/Form/use-field/use-field-props';\nimport { INLINE_LABEL_STYLES, LABEL_STYLES } from '../../form/Label';\nimport {\n  getValidationMods,\n  resolveValidationProps,\n} from '../../form/validation/resolve-validation-props';\nimport { wrapWithField } from '../../form/wrapper';\nimport { HiddenInput } from '../../HiddenInput';\nimport {\n  mergeTooltipFocusProps,\n  splitTooltipTriggerProps,\n  TooltipFocusProps,\n} from '../../overlays/Tooltip/split-trigger-props';\n\nimport { CheckboxGroup } from './CheckboxGroup';\nimport { CheckboxGroupContext } from './context';\n\nimport type { FocusableRef } from '@react-types/shared';\nimport type { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\n\nexport interface CubeCheckboxProps\n  extends\n    BaseProps,\n    FieldLayoutStyleProps,\n    Omit<AriaCheckboxProps, 'form' | 'name'>,\n    ToggleSelectionProps,\n    FieldBaseProps<boolean | null | undefined> {\n  inputStyles?: Styles;\n  isIndeterminate?: boolean;\n  value?: string;\n  /**\n   * The checkbox's own tooltip, shown on hover over the box and its inline\n   * label — also while the checkbox is disabled — and on keyboard focus. A string, or `TooltipProvider` props\n   * (`title`, `placement`, …). The info badge next to a field label is\n   * `labelTooltip`.\n   */\n  tooltip?: string | Omit<CubeTooltipProviderProps, 'children'>;\n}\n\nconst CheckboxWrapperElement = tasty({\n  as: 'label',\n  qa: 'CheckboxWrapper',\n  styles: {\n    position: 'relative',\n    display: 'flex',\n    placeItems: 'center start',\n    placeContent: 'baseline',\n    gap: '1x',\n    flow: 'row',\n    preset: 'default',\n    cursor: '$pointer',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst CheckboxElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: '.5r',\n    fill: {\n      '': '#surface',\n      'checked | indeterminate': '#primary',\n      'invalid & !checked': '#surface',\n      'invalid & checked': '#danger',\n      'valid & !checked': '#surface',\n      'valid & checked': '#success',\n      readonly: '#surface-2',\n      disabled: '#dark.12',\n    },\n    // The check / minus icon is always rendered inside the box, so the\n    // default color must be transparent when the checkbox is neither\n    // checked nor indeterminate — otherwise the white stroke shows through\n    // the dark `#surface` fill in dark schemes (it used to be hidden\n    // accidentally by the legacy white-on-white `fill: '#white'`).\n    color: {\n      '': '#clear',\n      'checked | indeterminate': '#white',\n      'readonly & !disabled & (checked | indeterminate)': '#dark-02',\n    },\n    border: {\n      '': '#dark.30',\n      invalid: '#danger',\n      valid: '#success',\n      'disabled | ((indeterminate | checked) & !invalid & !valid & !readonly)':\n        '#clear',\n    },\n    width: '(2x - 2bw)',\n    height: '(2x - 2bw)',\n    outline: {\n      '': '#primary-text.0',\n      focused: '$ring-width #primary-text',\n    },\n    outlineOffset: '$outline-offset',\n    transition: 'theme',\n  },\n});\n\nfunction Checkbox(\n  allProps: WithNullableSelected<CubeCheckboxProps>,\n  ref: FocusableRef,\n) {\n  // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.\n  // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,\n  // but since the checkbox won't move in and out of a group, it should be safe.\n  let groupState = useContext(CheckboxGroupContext);\n\n  const originalProps = castNullableIsSelected(allProps);\n\n  const props = useFieldProps(originalProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value ?? false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n    unsafe__isDisabled: !!groupState,\n  });\n\n  let {\n    qa,\n    isIndeterminate = false,\n    isDisabled = false,\n    insideForm,\n    children,\n    label,\n    isInvalid,\n    isValid,\n    labelProps,\n    labelRef,\n    labelStyles,\n    labelPosition,\n    inputStyles,\n    isHidden,\n    tooltip,\n  } = props;\n\n  // A grouped checkbox is an option of its group's field and never wraps.\n  const { styles, field } = splitFieldLayout(\n    props,\n    groupState ? { hasChrome: false } : undefined,\n  );\n\n  labelStyles = useMemo(\n    () => ({\n      ...(!groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),\n      ...labelStyles,\n    }),\n    [groupState, labelStyles],\n  );\n\n  let { isFocused, focusProps } = useFocus(true);\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let { renderWithTooltip, isTooltipActive } = useAutoTooltip({\n    tooltip,\n    children: null,\n  });\n\n  const toggleState = useToggleState(props);\n\n  // React Aria writes `form` onto the input as the id of its `<form>`, so the\n  // form instance would render as `form=\"[object Object]\"` and detach it. It\n  // reads `children` only to warn about a checkbox with no visible label; a\n  // field `label` is one, named through its `<label for>`. Writing it into\n  // `aria-label` instead used to drop the inline text from the name and\n  // replace the caller's own `aria-label`.\n  let ariaProps = { ...props, form: undefined, children: children ?? label };\n  // `isReadOnly` is React Aria's: the checkbox's own or its group's.\n  let {\n    inputProps,\n    isDisabled: isInputDisabled,\n    isReadOnly,\n  } = groupState\n    ? useCheckboxGroupItem(\n        {\n          ...ariaProps,\n          // Value is optional for standalone checkboxes, but required for CheckboxGroup items;\n          // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).\n          value: props.value || '',\n          // Only pass isRequired and the validation state to react-aria if they came from\n          // the props for this individual checkbox, and not from the group via context.\n          isRequired: originalProps.isRequired,\n          isInvalid: resolveValidationProps(originalProps).isInvalid,\n        },\n        groupState,\n        inputRef,\n      )\n    : useCheckbox(ariaProps, toggleState, inputRef);\n\n  // A read-only checkbox takes no hover state: a press would change nothing.\n  let { hoverProps, isHovered } = useHover({\n    isDisabled: isDisabled || isReadOnly,\n  });\n\n  // A disabled checkbox with a tooltip to show keeps its focus, as a disabled\n  // `Button` or `Radio` does: the tooltip is usually the reason it is disabled,\n  // and focus is how the keyboard opens it. It is `aria-disabled` and inert\n  // instead. React Aria's own result covers a disabled group too.\n  if (\n    getDisabledElementProps({\n      isDisabled: isInputDisabled,\n      keepEvents: isTooltipActive,\n      as: 'input',\n    }).isInert\n  ) {\n    inputProps = getInertInputProps(inputProps, {\n      excludeFromTabOrder: props.excludeFromTabOrder,\n    });\n  }\n\n  // Decorative: the input already announces checked, unchecked and mixed.\n  let markIcon = isIndeterminate ? (\n    <Icon size={12} stroke={3} aria-hidden=\"true\">\n      <IconMinus />\n    </Icon>\n  ) : (\n    <Icon size={12} stroke={3} aria-hidden=\"true\">\n      <IconCheck />\n    </Icon>\n  );\n\n  if (groupState) {\n    for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {\n      // The raw props: `castNullableIsSelected` turns `null` into `false`.\n      if (allProps[key] != null) {\n        console.warn(\n          `CubeUIKit: ${key} is unsupported on individual <Checkbox> elements within a <CheckboxGroup>. Please apply these props to the group instead.`,\n        );\n      }\n    }\n    if (props.value == null) {\n      console.warn(\n        'CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.',\n      );\n    }\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    indeterminate: isIndeterminate,\n    ...getValidationMods({ isInvalid, isValid }),\n    disabled: isDisabled,\n    readonly: isReadOnly,\n    hovered: isHovered,\n    focused: isFocused,\n    'side-label': labelPosition === 'side',\n    'inside-form': insideForm,\n  };\n\n  // The wrapper's props, the same in both branches. React Aria puts `id`,\n  // `aria-*` and `data-*` on the input, so they stay off the `<label>`: the\n  // grouped one used to copy them, and `#id`, `for` and `aria-labelledby`\n  // resolved to it. A caller's own `mods` stay, under the state ones.\n  const wrapperProps = {\n    className: props.className,\n    style: props.style,\n    qaVal: props.qaVal,\n    styles,\n    isHidden,\n    mods: { ...props.mods, ...mods },\n  };\n\n  // The wrapper is the checkbox's element in both branches, so the field's ref\n  // reaches it with or without the field chrome; a tooltip's ref shares it.\n  const wrapperRefWith = (tooltipRef?: RefObject<HTMLElement>) =>\n    tooltipRef ? mergeRefs(domRef, tooltipRef) : domRef;\n\n  // The input, where keyboard focus lands, takes the tooltip's focus-side\n  // trigger props; the wrapper keeps the hover side and positions the tooltip.\n  const renderCheckbox = (tooltipFocusProps?: TooltipFocusProps) => (\n    <>\n      <HiddenInput\n        qa={qa || 'Checkbox'}\n        data-input-type=\"checkbox\"\n        // For a dialog kept mounted while closed, as on `Button`.\n        {...(props.autoFocus ? { 'data-autofocus': '' } : undefined)}\n        {...mergeTooltipFocusProps(\n          mergeProps(inputProps, focusProps),\n          tooltipFocusProps,\n        )}\n        ref={inputRef}\n        // Not left to the native `disabled`, which an inert input drops.\n        mods={{ disabled: isInputDisabled }}\n      />\n      <CheckboxElement data-element=\"Input\" mods={mods} styles={inputStyles}>\n        {markIcon}\n      </CheckboxElement>\n    </>\n  );\n\n  if (!groupState) {\n    const checkboxField = renderWithTooltip(\n      (tooltipTriggerProps, tooltipRef) => {\n        const { pointerProps, focusProps: tooltipFocusProps } =\n          splitTooltipTriggerProps(tooltipTriggerProps);\n\n        return (\n          // `styles` is forwarded here as well as in the in-group branch\n          // below — it used to be extracted from props and then dropped on\n          // this path, so `<Checkbox styles={{ … }}>` outside a group was a\n          // silent no-op.\n          <CheckboxWrapperElement\n            {...wrapperProps}\n            {...mergeProps(hoverProps, pointerProps)}\n            ref={wrapperRefWith(tooltipRef)}\n          >\n            {renderCheckbox(tooltipFocusProps)}\n            {children ? (\n              // Same element and preset as the in-group branch. This path used\n              // to force children through `<Text nowrap>`: `white-space:\n              // nowrap` inherits, so a label longer than a few words — or any\n              // custom node with two lines in it — could not wrap at all, and\n              // the label also missed the preset a grouped one picks up.\n              <Element\n                styles={INLINE_LABEL_STYLES}\n                mods={{\n                  ...getValidationMods({ isInvalid, isValid }),\n                  disabled: isDisabled,\n                }}\n              >\n                {children}\n              </Element>\n            ) : null}\n          </CheckboxWrapperElement>\n        );\n      },\n      'top',\n    );\n\n    // `tooltip` is the checkbox's own here, not a legacy label badge.\n    // `renderWithTooltip` is typed for any node; here it returns an element.\n    // The field label names the input through `for`, which `useFieldProps`\n    // leaves unset for a caller's own `id` and inside the legacy `<Field>`, as\n    // `Switch` does.\n    return wrapWithField(checkboxField as ReactElement, {\n      ...props,\n      ...field,\n      tooltip: undefined,\n      labelProps: { ...props.labelProps, for: props.id },\n    });\n  }\n\n  return renderWithTooltip((tooltipTriggerProps, tooltipRef) => {\n    const { pointerProps, focusProps: tooltipFocusProps } =\n      splitTooltipTriggerProps(tooltipTriggerProps);\n\n    return (\n      <CheckboxWrapperElement\n        {...wrapperProps}\n        {...mergeProps(hoverProps, pointerProps)}\n        ref={wrapperRefWith(tooltipRef)}\n      >\n        {renderCheckbox(tooltipFocusProps)}\n        {(label ?? children) ? (\n          <Element\n            // Before `labelProps`, so a `ref` passed there still wins.\n            ref={labelRef}\n            styles={labelStyles}\n            mods={{\n              ...getValidationMods({ isInvalid, isValid }),\n              disabled: isDisabled,\n            }}\n            {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n          >\n            {label ?? children}\n          </Element>\n        ) : null}\n      </CheckboxWrapperElement>\n    );\n  }, 'top');\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\n\n(_Checkbox as any).cubeInputType = 'Checkbox';\nlet __Checkbox = Object.assign(\n  _Checkbox as typeof _Checkbox & { Group: typeof CheckboxGroup },\n  { Group: CheckboxGroup },\n);\n\n__Checkbox.displayName = 'Checkbox';\n\nexport { __Checkbox as Checkbox };\nexport type { AriaCheckboxProps };\nexport { useCheckbox };\n"],"mappings":"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"}

package/dist/components/fields/Checkbox/CheckboxGroup.d.ts

@@ -1,6 +1,5 @@
 
 import { FieldBaseProps } from "../../../shared/form.js";
-import "../../../shared/index.js";
 import { FieldLayoutStyleProps } from "../../form/field-layout.js";
 import { BaseProps, Styles } from "@tenphi/tasty";
 import { AriaCheckboxGroupProps } from "react-aria";

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

@@ -1,11 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { Provider } from "../../../provider.js";
 import { castNullableArrayValue } from "../../../utils/react/nullableValue.js";
-import { FormScopeMask } from "../../form/Form/Form.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 { FormScopeMask } from "../../form/Form/FormContext.js";
+import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { CheckboxGroupContext } from "./context.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","names":["useObjectRef","BaseProps","Styles","tasty","forwardRef","AriaCheckboxGroupProps","useCheckboxGroup","useCheckboxGroupState","Provider","FieldBaseProps","mergeProps","castNullableArrayValue","WithNullableValue","FormScopeMask","useFieldProps","wrapWithField","FieldLayoutStyleProps","splitFieldLayout","CheckboxGroupContext","CheckGroupElement","qa","styles","display","placeItems","placeContent","flow","horizontal","gap","CubeCheckboxGroupProps","Omit","orientation","inputStyles","CheckboxGroup","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","id","isDisabled","isReadOnly","isInvalid","isValid","children","t2","labelProps","baseLabelProps","undefined","domRef","field","defaultStyles","state","t3","form","groupProps","t4","t5","t6","t7","t8","t9","radioGroup","value","onChange","_CheckboxGroup","cubeInputType","displayName","_c","mergeProps"],"sources":["../../../../src/components/fields/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport { BaseProps, Styles, tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\nimport { AriaCheckboxGroupProps, useCheckboxGroup } from 'react-aria';\nimport { useCheckboxGroupState } from 'react-stately';\n\nimport { Provider } from '../../../provider';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableArrayValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { FormScopeMask, useFieldProps, wrapWithField } from '../../form';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\n\nimport { CheckboxGroupContext } from './context';\n\nconst CheckGroupElement = tasty({\n  qa: 'CheckboxGroup',\n  styles: {\n    display: 'flex',\n    placeItems: 'start',\n    placeContent: 'start',\n    flow: {\n      '': 'column',\n      horizontal: 'row wrap',\n    },\n    gap: {\n      '': '1x',\n      horizontal: '1x 2x',\n    },\n  },\n});\n\nexport interface CubeCheckboxGroupProps\n  extends\n    BaseProps,\n    Omit<AriaCheckboxGroupProps, 'errorMessage' | 'form' | 'name'>,\n    FieldBaseProps<readonly string[] | null | undefined>,\n    FieldLayoutStyleProps {\n  orientation?: 'vertical' | 'horizontal';\n  inputStyles?: Styles;\n}\n\nfunction CheckboxGroup(\n  rawProps: WithNullableValue<CubeCheckboxGroupProps>,\n  ref,\n) {\n  rawProps = castNullableArrayValue(rawProps);\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value != null ? value : [],\n      onChange: onChange,\n    }),\n  });\n\n  let {\n    id,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    necessityIndicator,\n    label,\n    extra,\n    isInvalid,\n    isValid,\n    children,\n    orientation = 'vertical',\n    message,\n    description,\n    labelStyles,\n    labelProps: baseLabelProps,\n    labelSuffix,\n    inputStyles,\n    form,\n  } = props;\n  let domRef = useObjectRef(ref);\n\n  // `inputStyles` styles the group too; `styles` goes over it.\n  const { styles, field } = splitFieldLayout(props, {\n    defaultStyles: inputStyles,\n  });\n\n  let state = useCheckboxGroupState(props);\n  // React Aria hands `form` to every item's input as the id of its `<form>`,\n  // so the form instance would render as `form=\"[object Object]\"` on each.\n  let { groupProps, labelProps } = useCheckboxGroup(\n    { ...props, form: undefined },\n    state,\n  );\n\n  // The group owns its semantics in both presentations: `isBare` omits the\n  // field wrapper, so putting them there would lose its role and name.\n  let radioGroup = (\n    <CheckGroupElement\n      ref={domRef}\n      {...groupProps}\n      id={id}\n      styles={styles}\n      mods={{\n        horizontal: orientation === 'horizontal',\n      }}\n    >\n      <FormScopeMask\n        value={{\n          isDisabled,\n          isInvalid,\n          isValid,\n        }}\n      >\n        {/* Each checkbox is a field that reads the provider before the form\n            context, so the group's own state has to reach it here to beat an\n            enclosing disabled or read-only form. `<Provider>` skips\n            `undefined`, so a group that sets nothing keeps the form's state. */}\n        <Provider isDisabled={isDisabled} isReadOnly={isReadOnly}>\n          <CheckboxGroupContext.Provider value={state}>\n            {children}\n          </CheckboxGroupContext.Provider>\n        </Provider>\n      </FormScopeMask>\n    </CheckGroupElement>\n  );\n\n  return wrapWithField(radioGroup, {\n    ...props,\n    ...field,\n    labelProps: mergeProps(baseLabelProps, labelProps),\n  });\n}\n\n/**\n * Checkbox groups allow users to select any number of options from a list.\n * All possible options are exposed up front for users to compare.\n */\nconst _CheckboxGroup = forwardRef(CheckboxGroup);\n\n(_CheckboxGroup as any).cubeInputType = 'CheckboxGroup';\n_CheckboxGroup.displayName = 'CheckboxGroup';\n\nexport { _CheckboxGroup as CheckboxGroup };\n"],"mappings":"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"}
+{"version":3,"file":"CheckboxGroup.js","names":["useObjectRef","BaseProps","Styles","tasty","forwardRef","AriaCheckboxGroupProps","useCheckboxGroup","useCheckboxGroupState","Provider","FieldBaseProps","mergeProps","castNullableArrayValue","WithNullableValue","FieldLayoutStyleProps","splitFieldLayout","FormScopeMask","useFieldProps","wrapWithField","CheckboxGroupContext","CheckGroupElement","qa","styles","display","placeItems","placeContent","flow","horizontal","gap","CubeCheckboxGroupProps","Omit","orientation","inputStyles","CheckboxGroup","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","id","isDisabled","isReadOnly","isInvalid","isValid","children","t2","labelProps","baseLabelProps","undefined","domRef","field","defaultStyles","state","t3","form","groupProps","t4","t5","t6","t7","t8","t9","radioGroup","value","onChange","_CheckboxGroup","cubeInputType","displayName","_c","mergeProps"],"sources":["../../../../src/components/fields/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport { BaseProps, Styles, tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\nimport { AriaCheckboxGroupProps, useCheckboxGroup } from 'react-aria';\nimport { useCheckboxGroupState } from 'react-stately';\n\nimport { Provider } from '../../../provider';\nimport { FieldBaseProps } from '../../../shared/form';\nimport { mergeProps } from '../../../utils/react/mergeProps';\nimport {\n  castNullableArrayValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { FormScopeMask } from '../../form/Form/FormContext';\nimport { useFieldProps } from '../../form/Form/use-field/use-field-props';\nimport { wrapWithField } from '../../form/wrapper';\n\nimport { CheckboxGroupContext } from './context';\n\nconst CheckGroupElement = tasty({\n  qa: 'CheckboxGroup',\n  styles: {\n    display: 'flex',\n    placeItems: 'start',\n    placeContent: 'start',\n    flow: {\n      '': 'column',\n      horizontal: 'row wrap',\n    },\n    gap: {\n      '': '1x',\n      horizontal: '1x 2x',\n    },\n  },\n});\n\nexport interface CubeCheckboxGroupProps\n  extends\n    BaseProps,\n    Omit<AriaCheckboxGroupProps, 'errorMessage' | 'form' | 'name'>,\n    FieldBaseProps<readonly string[] | null | undefined>,\n    FieldLayoutStyleProps {\n  orientation?: 'vertical' | 'horizontal';\n  inputStyles?: Styles;\n}\n\nfunction CheckboxGroup(\n  rawProps: WithNullableValue<CubeCheckboxGroupProps>,\n  ref,\n) {\n  rawProps = castNullableArrayValue(rawProps);\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value != null ? value : [],\n      onChange: onChange,\n    }),\n  });\n\n  let {\n    id,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    necessityIndicator,\n    label,\n    extra,\n    isInvalid,\n    isValid,\n    children,\n    orientation = 'vertical',\n    message,\n    description,\n    labelStyles,\n    labelProps: baseLabelProps,\n    labelSuffix,\n    inputStyles,\n    form,\n  } = props;\n  let domRef = useObjectRef(ref);\n\n  // `inputStyles` styles the group too; `styles` goes over it.\n  const { styles, field } = splitFieldLayout(props, {\n    defaultStyles: inputStyles,\n  });\n\n  let state = useCheckboxGroupState(props);\n  // React Aria hands `form` to every item's input as the id of its `<form>`,\n  // so the form instance would render as `form=\"[object Object]\"` on each.\n  let { groupProps, labelProps } = useCheckboxGroup(\n    { ...props, form: undefined },\n    state,\n  );\n\n  // The group owns its semantics in both presentations: `isBare` omits the\n  // field wrapper, so putting them there would lose its role and name.\n  let radioGroup = (\n    <CheckGroupElement\n      ref={domRef}\n      {...groupProps}\n      id={id}\n      styles={styles}\n      mods={{\n        horizontal: orientation === 'horizontal',\n      }}\n    >\n      <FormScopeMask\n        value={{\n          isDisabled,\n          isInvalid,\n          isValid,\n        }}\n      >\n        {/* Each checkbox is a field that reads the provider before the form\n            context, so the group's own state has to reach it here to beat an\n            enclosing disabled or read-only form. `<Provider>` skips\n            `undefined`, so a group that sets nothing keeps the form's state. */}\n        <Provider isDisabled={isDisabled} isReadOnly={isReadOnly}>\n          <CheckboxGroupContext.Provider value={state}>\n            {children}\n          </CheckboxGroupContext.Provider>\n        </Provider>\n      </FormScopeMask>\n    </CheckGroupElement>\n  );\n\n  return wrapWithField(radioGroup, {\n    ...props,\n    ...field,\n    labelProps: mergeProps(baseLabelProps, labelProps),\n  });\n}\n\n/**\n * Checkbox groups allow users to select any number of options from a list.\n * All possible options are exposed up front for users to compare.\n */\nconst _CheckboxGroup = forwardRef(CheckboxGroup);\n\n(_CheckboxGroup as any).cubeInputType = 'CheckboxGroup';\n_CheckboxGroup.displayName = 'CheckboxGroup';\n\nexport { _CheckboxGroup as CheckboxGroup };\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
 import { createContext } from "react";
 //#region src/components/fields/Checkbox/context.ts
 const CheckboxGroupContext = createContext(null);

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

@@ -1,6 +1,5 @@
 
 import { FieldBaseProps } from "../../../shared/form.js";
-import "../../../shared/index.js";
 import { FieldLayoutStyleProps } from "../../form/field-layout.js";
 import { ColorFormat } from "../color/color.js";
 import { ColorSpace } from "../color/channels.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemActionProvider } from "../../actions/ItemActionContext.js";

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

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

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

@@ -1,13 +1,10 @@
 
 import { FieldBaseProps } from "../../../shared/form.js";
-import "../../../shared/index.js";
-import "../../content/Item/index.js";
 import { CubeItemBaseProps as CubeItemProps } from "../../content/Item/Item.js";
 import { FieldLayoutStyleProps } from "../../form/field-layout.js";
 import { ColorFormat } from "../color/color.js";
 import { ColorSpace } from "../color/channels.js";
 import { CubeColorSwatchItem } from "../ColorSwatchGroup/ColorSwatchGroup.js";
-import "../ColorSwatchGroup/index.js";
 import { BaseProps, Styles } from "@tenphi/tasty";
 import { ReactNode, RefObject } from "react";
 import { Placement } from "react-aria";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.208.0 | Cube Dev Team */
 import { Text as _Text } from "../../content/Text.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
@@ -6,11 +6,11 @@ import { useI18n } from "../../../i18n/useI18n.js";
 import { ItemButton as _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { getValidationTheme } from "../../form/validation/resolve-validation-props.js";
-import { getValidationIcon } from "../../form/validation/ValidationIndicator.js";
 import { TRIGGER_TOOLTIP_WARNING } from "../../form/legacy-tooltip.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 { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
+import { getValidationIcon } from "../../form/validation/ValidationIndicator.js";
 import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
 import { formatColor, parseColor } from "../color/color.js";
 import { ColorPanel } from "../color/ColorPanel.js";

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"ColorPicker.js","names":["BaseProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","RefObject","useEffect","useRef","useState","Placement","useEvent","useWarn","useI18n","FieldBaseProps","ItemButton","CubeItemProps","Text","FieldLayoutStyleProps","splitFieldLayout","useFieldProps","TRIGGER_TOOLTIP_WARNING","getValidationTheme","getValidationIcon","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","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/hooks/use-event';\nimport { useWarn } from '../../../_internal/hooks/use-warn';\nimport { useI18n } from '../../../i18n/useI18n';\nimport { FieldBaseProps } from '../../../shared/form';\nimport { ItemButton } from '../../actions/ItemButton/ItemButton';\nimport { CubeItemProps } from '../../content/Item/Item';\nimport { Text } from '../../content/Text';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { useFieldProps } from '../../form/Form/use-field/use-field-props';\nimport { TRIGGER_TOOLTIP_WARNING } from '../../form/legacy-tooltip';\nimport { getValidationTheme } from '../../form/validation/resolve-validation-props';\nimport { getValidationIcon } from '../../form/validation/ValidationIndicator';\nimport { wrapWithField } from '../../form/wrapper';\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/ColorInput';\nimport { ColorSwatch } from '../ColorSwatch/ColorSwatch';\n// ColorPicker shows a ColorSwatchGroup palette, and a ColorSwatchGroup can\n// append a ColorPicker. Each renders the other only inside render, never at\n// module scope, so the cycle cannot change initialization order.\n// oxlint-disable-next-line import/no-cycle -- mutual composition used only at render time; see above\nimport { ColorSwatchGroup } from '../ColorSwatchGroup/ColorSwatchGroup';\n\nimport type { CubeColorSwatchItem } from '../ColorSwatchGroup/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,MAAMsC,iBAAyB,EAAEC,UAAU,OAAO;;AAGlD,MAAMC,iBAAyB;CAC7BC,QAAQ;CACRC,SAAS;CACTC,OAAO;AACT;;AAGA,MAAMC,iBAA6B;CAAEC,GAAG;CAAKC,GAAG;CAAKC,GAAG;AAAI;AAE5D,MAAMC,qBAAqB9C,MAAM;CAC/B+C,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTC,MAAM;EACNC,UAAU;EACVC,cAAc;EACdC,YAAY;CACd;AACF,CAAC;;;;;;AA2ED,MAAayB,cAAc5E,WAAW,SAAA4E,YAAAC,UAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAIpC,MAAA,EAAAC,MAAcxE,QAAQ;CAAE,IAAAyE;CAAA,IAAAH,EAAA,OAAAI,OAAAC,IAAA,2BAAA,GAAA;EACcF,KAAA;GAAAG,0BACV;GAAUC,kBAClBC;EAIpB;EAACR,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAND,MAAAS,QAAcxE,cAAc6D,UAAUK,EAMrC;CAED,MAAA,EAAArC,IAAA4C,IAAApC,OAAAqC,SAAApC,cAAAC,UAAAoC,YAAAnC,QAAAoC,IAAAnC,cAAAoC,IAAAnC,QAAAoC,gBAAAnC,aAAAC,cAAAC,YAAAC,WAAAE,WAAA+B,IAAA9B,UAAAC,aAAA8B,IAAA7B,MAAAC,MAAA6B,IAAA5B,OAAA6B,IAAA5B,SAAAC,gBAAAC,UAAAC,eAAAC,eAAAC,cAAAwB,YAAAC,YAAAC,WAAAC,WAAAC,SAAAC,WAAA,cAAAC,WAAA,oBAAAC,oBAiCIlB;CA3BF,MAAAhC,SAAAoC,OAAAe,KAAAA,IAAA,QAAAf;CACA,MAAAnC,eAAAoC,OAAAc,KAAAA,IAAA,QAAAd;CAMA,MAAA7B,YAAA+B,OAAAY,KAAAA,IAAA,iBAAAZ;CAEA,MAAA7B,cAAA8B,OAAAW,KAAAA,IAAA,iBAAAX;CAEA,MAAA5B,OAAA6B,OAAAU,KAAAA,IAAA,YAAAV;CACA,MAAA5B,QAAA6B,OAAAS,KAAAA,IAAA,YAAAT;CAiBF,MAAA,EAAApD,QAAA8D,UAA0B7F,iBAAiByE,KAAK;CAEhDhF,QAAQ+D,mBAAmBoC,KAAAA,GAAW1F,uBAAuB;CAO7D,MAAA4F,oBAA0BV,cAAAE;CAAwB,IAAAS;CAAA,IAAA/B,EAAA,OAAAzB,gBAAAyB,EAAA,OAAAW,SAAA;EAEfoB,WACjCnF,YAAY+D,WAAApC,gBAAA,GAAA,CAA2ByD,SAAW,CAAC;EAAChC,EAAA,KAAAzB;EAAAyB,EAAA,KAAAW;EAAAX,EAAA,KAAA+B;CAAA,OAAAA,KAAA/B,EAAA;CADtD,MAAA,CAAAiC,OAAAC,YAA0B5G,SAASyG,EAEnC;CACA,MAAA,CAAAI,OAAAC,YAA0B9G,SAAqBoD,YAAY;CAC3D,MAAA,CAAAC,QAAA0D,WAA0B/G,SAASsD,eAAA,KAAoB;CAGvD,MAAA0D,UAAgBjH,OAAkCiD,OAAK;CAAE,IAAAiE;CAAA,IAAAC;CAAA,IAAAxC,EAAA,OAAAW,SAAA;EAI/C4B,WAAA;GACR,IAAIjE,YAAUsD,KAAAA,KAAatD,YAAUgE,QAAOG,SAAQ;GAEpDH,QAAOG,UAAWnE;GAClB4D,SAAStF,YAAY+D,WAAA,GAAA,CAAWqB,SAAW,CAAC,CAAC;EAAC;EAC7CQ,KAAA,CAAClE,OAAK;EAAC0B,EAAA,KAAAW;EAAAX,EAAA,KAAAuC;EAAAvC,EAAA,KAAAwC;CAAA,OAAA;EAAAD,KAAAvC,EAAA;EAAAwC,KAAAxC,EAAA;CAAA;CALV5E,UAAUmH,IAKPC,EAAO;CAAC,IAAAE;CAAA,IAAA1C,EAAA,OAAAvB,UAAAuB,EAAA,OAAAY,YAAA;EAEwB8B,OAAAC,SAAA;GACjC,MAAAC,OAAajG,YAAYgG,MAAMlE,MAAM;GAErC6D,QAAOG,UAAWG;GAClBV,SAASS,IAAI;GACbnE,aAAWoE,IAAI;EAAC;EACjB5C,EAAA,KAAAvB;EAAAuB,EAAA,KAAAY;EAAAZ,EAAA,KAAA0C;CAAA,OAAAA,MAAA1C,EAAA;CAND,MAAA6C,oBAA0BrH,SAASkH,GAMlC;CAAE,IAAAI;CAAA,IAAA9C,EAAA,QAAAiC,SAAAjC,EAAA,QAAAvB,QAAA;EAEeqE,MAAAb,QAAQtF,YAAYsF,OAAOxD,MAAa,IAAxC;EAAyCuB,EAAA,MAAAiC;EAAAjC,EAAA,MAAAvB;EAAAuB,EAAA,MAAA8C;CAAA,OAAAA,MAAA9C,EAAA;CAA3D,MAAA+C,YAAkBD;CAA0C,IAAAE;CAAA,IAAAhD,EAAA,QAAAY,YAAA;EAOzBoC,OAAAC,WAAA;GACjCX,QAAOG,UAAWE;GAClBT,SAASS,SAAO/F,WAAW+F,MAAW,IAA7B,IAA8B;GACvCnE,aAAWmE,MAAI;EAAC;EACjB3C,EAAA,MAAAY;EAAAZ,EAAA,MAAAgD;CAAA,OAAAA,MAAAhD,EAAA;CAJD,MAAAkD,oBAA0B1H,SAASwH,GAIlC;CAAE,IAAAG;CAAA,IAAAnD,EAAA,QAAAnB,cAAA;EAE+BsE,OAAAC,WAAA;GAChCf,QAAQM,MAAI;GACZ9D,eAAe8D,MAAI;EAAC;EACrB3C,EAAA,MAAAnB;EAAAmB,EAAA,MAAAmD;CAAA,OAAAA,MAAAnD,EAAA;CAHD,MAAAqD,mBAAyB7H,SAAS2H,GAGjC;CAAE,IAAAG;CAAA,IAAAtD,EAAA,QAAAd,YAAAc,EAAA,QAAAiC,SAAAjC,EAAA,QAAAvB,UAAAuB,EAAA,QAAAb,aAAA;EAKDmE,MAAApE,aAAa0C,KAAAA,IAAb1C,WAEI+C,QACFtF,YAAYsF,OAAOxD,MAKrB,IADE,oBAAAsG,MAAA,aAAA,EAAA,UAAmB5F,YAAY,CAAA;EAChCa,EAAA,MAAAd;EAAAc,EAAA,MAAAiC;EAAAjC,EAAA,MAAAvB;EAAAuB,EAAA,MAAAb;EAAAa,EAAA,MAAAsD;CAAA,OAAAA,MAAAtD,EAAA;CATH,MAAAuD,QACED;CAiBY,MAAAE,MAAAzC,kBAAApC;CAOF,MAAA8E,MAAA3F,MAAA;CAA0B,IAAA4F;CAAA,IAAA1D,EAAA,QAAAuB,aAAAvB,EAAA,QAAAwB,WAAAxB,EAAA,QAAAV,OAAA;EAGvBoE,MAAAvH,mBAAmBmD,OAAO;GAAAiC;GAAAC;EAAqB,CAAC;EAACxB,EAAA,MAAAuB;EAAAvB,EAAA,MAAAwB;EAAAxB,EAAA,MAAAV;EAAAU,EAAA,MAAA0D;CAAA,OAAAA,MAAA1D,EAAA;CAAA,IAAA2D;CAAA,IAAA3D,EAAA,QAAAiC,SAAAjC,EAAA,QAAAJ,cAAA;EAKtD+D,MAAA,oBAAC,aAAD;GAAkB,MAAA;GAAe1B;GAAerC,QAAAA;EAAY,CAAA;EAAII,EAAA,MAAAiC;EAAAjC,EAAA,MAAAJ;EAAAI,EAAA,MAAA2D;CAAA,OAAAA,MAAA3D,EAAA;CAAA,IAAA4D;CAAA,IAAA5D,EAAA,QAAAuB,aAAAvB,EAAA,QAAAwB,SAAA;EAEvDoC,MAAAxH,kBAAkB;GAAAmF;GAAAC;EAAqB,CAAC;EAACxB,EAAA,MAAAuB;EAAAvB,EAAA,MAAAwB;EAAAxB,EAAA,MAAA4D;CAAA,OAAAA,MAAA5D,EAAA;CAC3C,MAAA6D,MAAAtE,WAAAC;CACG,MAAAsE,MAAAhC,qBAAAT;CAMS,MAAA0C,MAAA,CAAC9B;CAAK,IAAA+B;CAAA,IAAAhE,EAAA,QAAA+D,KAAA;EAArBC,MAAA,EAAA7E,aAAe4E,IAAO;EAAC/D,EAAA,MAAA+D;EAAA/D,EAAA,MAAAgE;CAAA,OAAAA,MAAAhE,EAAA;CAAA,IAAAiE;CAAA,IAAAjE,EAAA,QAAA2B,mBAAA3B,EAAA,QAAA0B,aAAA1B,EAAA,QAAAyB,aAAAzB,EAAA,QAAAU,MAAAV,EAAA,QAAAuD,SAAAvD,EAAA,QAAAZ,QAAAY,EAAA,QAAAyD,OAAAzD,EAAA,QAAA0D,OAAA1D,EAAA,QAAA2D,OAAA3D,EAAA,QAAA4D,OAAA5D,EAAA,QAAA6D,OAAA7D,EAAA,QAAA8D,OAAA9D,EAAA,QAAAgE,OAAAhE,EAAA,QAAAL,iBAAAK,EAAA,QAAAX,MAAA;EArB/B4E,MAAA,oBAACe,aAAD;GACE,wBAAA;GACItE;GACA,IAAA+C;GACY,mBAAA;GACVpE;GACC,OAAAqE;GACDtE;GAIJ,MAAAuE;GAES,WAAAC;GACF,SAAAC;GACG,YAAAC;GACDrC;GACCC,cAAAA;GAGMC,oBAAAA;GACZ,MAAAqC;GACErE,QAAAA;GAEP4D,UAAAA;EAxBQ,CAAA;EAyBEvD,EAAA,MAAA2B;EAAA3B,EAAA,MAAA0B;EAAA1B,EAAA,MAAAyB;EAAAzB,EAAA,MAAAU;EAAAV,EAAA,MAAAuD;EAAAvD,EAAA,MAAAZ;EAAAY,EAAA,MAAAyD;EAAAzD,EAAA,MAAA0D;EAAA1D,EAAA,MAAA2D;EAAA3D,EAAA,MAAA4D;EAAA5D,EAAA,MAAA6D;EAAA7D,EAAA,MAAA8D;EAAA9D,EAAA,MAAAgE;EAAAhE,EAAA,MAAAL;EAAAK,EAAA,MAAAX;EAAAW,EAAA,MAAAiE;CAAA,OAAAA,MAAAjE,EAAA;CAAA,IAAAkE;CAAA,IAAAlE,EAAA,QAAAE,GAAA;EAECgE,MAAAhE,EAAE,2BAA2B,cAAc;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAkE;CAAA,OAAAA,MAAAlE,EAAA;CAQ7C,MAAAmE,MAAAlC,SAAAxE;CAEK,MAAA2G,MAAAtC,qBAAAT;CAA+B,IAAAgD;CAAA,IAAArE,EAAA,QAAAE,GAAA;EAK3BmE,MAAAnE,EAAE,0BAA0B,aAAa;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAqE;CAAA,OAAAA,MAAArE,EAAA;CAAA,IAAAsE;CAAA,IAAAtE,EAAA,QAAA+C,aAAA/C,EAAA,QAAAvB,UAAAuB,EAAA,QAAAkD,qBAAAlD,EAAA,QAAA8B,qBAAA9B,EAAA,QAAAqB,cAAArB,EAAA,QAAAqE,KAAA;EAFxDC,MAAA,oBAAC,YAAD;GACE,QAAA;GACY,cAAAD;GACJ5F;GACDsE,OAAAA;GACKjB,YAAAA;GACAT;GACF6B,UAAAA;EAAiB,CAAA;EAC3BlD,EAAA,MAAA+C;EAAA/C,EAAA,MAAAvB;EAAAuB,EAAA,MAAAkD;EAAAlD,EAAA,MAAA8B;EAAA9B,EAAA,MAAAqB;EAAArB,EAAA,MAAAqE;EAAArE,EAAA,MAAAsE;CAAA,OAAAA,MAAAtE,EAAA;CAAA,IAAAuE;CAAA,IAAAvE,EAAA,QAAA+C,aAAA/C,EAAA,QAAAvB,UAAAuB,EAAA,QAAAkD,qBAAAlD,EAAA,QAAA8B,qBAAA9B,EAAA,QAAAqB,cAAArB,EAAA,QAAAN,iBAAAM,EAAA,QAAAP,YAAAO,EAAA,QAAAE,GAAA;EAGFqE,MAAA9E,UAAQ+E,SACN,oBAAC,kBAAD;GACE,QAAA;GACY,cAAAtE,EAAE,uBAAuB,SAAS;GACtC7C,QAAAA;GACAoC,QAAAA;GACCC,SAAAA;GACDjB;GACDsE,OAAAA;GACK,YAAAjB,qBAAAT;GACF6B,UAAAA;EAAiB,CAAA,IAV/B;EAYQlD,EAAA,MAAA+C;EAAA/C,EAAA,MAAAvB;EAAAuB,EAAA,MAAAkD;EAAAlD,EAAA,MAAA8B;EAAA9B,EAAA,MAAAqB;EAAArB,EAAA,MAAAN;EAAAM,EAAA,MAAAP;EAAAO,EAAA,MAAAE;EAAAF,EAAA,MAAAuE;CAAA,OAAAA,MAAAvE,EAAA;CAAA,IAAAyE;CAAA,IAAAzE,EAAA,QAAAvB,UAAAuB,EAAA,QAAA6C,qBAAA7C,EAAA,QAAAmC,SAAAnC,EAAA,QAAAmE,OAAAnE,EAAA,QAAAoE,OAAApE,EAAA,QAAAsE,OAAAtE,EAAA,QAAAuE,KAAA;EA9BdE,MAAA,oBAAA,oBAAA,UAAA;GAAqC,OAAA;GACnC,UAAA,oBAAC,YAAD;IACS,OAAAN;IACAhC;IACK,YAAAiC;IACG3F,eAAAA;IAEb,OAAA6F;IAWA,UAAAC;IAcQ1B,UAAAA;IACKT,eAAAA;GAAQ,CAAA;EAE3B,CAAA;EAA+BpC,EAAA,MAAAvB;EAAAuB,EAAA,MAAA6C;EAAA7C,EAAA,MAAAmC;EAAAnC,EAAA,MAAAmE;EAAAnE,EAAA,MAAAoE;EAAApE,EAAA,MAAAsE;EAAAtE,EAAA,MAAAuE;EAAAvE,EAAA,MAAAyE;CAAA,OAAAA,MAAAzE,EAAA;CAAA,IAAA0E;CAAA,IAAA1E,EAAA,QAAAkE,OAAAlE,EAAA,QAAAyE,KAAA;EA1CjCC,MAAA,oBAAC,QAAD;GACc,cAAAR;GACN,OAAA;GACE/G,QAAAA;GAIRsH,UAAAA;EAPK,CAAA;EA2CEzE,EAAA,MAAAkE;EAAAlE,EAAA,MAAAyE;EAAAzE,EAAA,MAAA0E;CAAA,OAAAA,MAAA1E,EAAA;CAAA,IAAA2E;CAAA,IAAA3E,EAAA,QAAAqD,oBAAArD,EAAA,QAAAf,aAAAe,EAAA,QAAAlB,cAAAkB,EAAA,QAAAwD,OAAAxD,EAAA,QAAAiE,OAAAjE,EAAA,QAAA0E,OAAA1E,EAAA,QAAAjB,WAAA;EA9EX4F,MAAA,qBAAC,eAAD;GACE,WAAA;GACK,MAAA;GACM1F;GACAF;GACH,QAAAyE;GACI1E;GACEuE,cAAAA;GAPhB,UAAA,CASEY,KA0BAS,GAnCY;;EA+EE1E,EAAA,MAAAqD;EAAArD,EAAA,MAAAf;EAAAe,EAAA,MAAAlB;EAAAkB,EAAA,MAAAwD;EAAAxD,EAAA,MAAAiE;EAAAjE,EAAA,MAAA0E;EAAA1E,EAAA,MAAAjB;EAAAiB,EAAA,MAAA2E;CAAA,OAAAA,MAAA3E,EAAA;CAElB,OAEK3D,cAAcuI,oBApFlB,oBAAD;EAAyB7E;EAAahC;EACpC4G,UAAAA;CADiB,CAoFAC,GAAa;EAAA,GAC7BnE;EAAK,GACLoB;EAAKtC,SAECqC,KAAAA;CACX,CAAC;AAAC,CACH;;;;;;AAOD,YAAqBiD,gBAAgB;AAtNC,SAAArE,MAAAL,IAAA;CAOf,MAAA,EAAA7B,OAAAE,aAAA2B;CAAmB,OAAM;EACnC7B;EAAkCE;CAE3C;AAAC"}

package/dist/components/fields/ColorSwatch/ColorSwatch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.208.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,6 +1,5 @@
 
 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, Styles } from "@tenphi/tasty";

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

@@ -1,12 +1,12 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.208.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";
 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 { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { HiddenInput } from "../../HiddenInput.js";
 import { formatColor, parseColor, toHex } from "../color/color.js";
 import { useIsInsideColorPopover } from "../color/context.js";