@cube-dev/ui-kit 0.0.0-canary-e76eb3e → 0.0.0-canary-01fea9d

package/dist/components/fields/RadioGroup/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["Item","useFocus","mergeProps","RadioGroup"],"sources":["../../../../src/components/fields/RadioGroup/Radio.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport {\n  BaseProps,\n  filterBaseProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef } from 'react';\nimport { useHover, useRadio } from 'react-aria';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemProps, Item } from '../../content/Item/Item';\nimport {\n  getValidationMods,\n  getValidationTheme,\n  INLINE_LABEL_STYLES,\n  useFieldProps,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport { RADIO_SIZE_MAP } from '../../navigation/Tabs/types';\n\nimport { useRadioProvider } from './context';\nimport { RadioGroup } from './RadioGroup';\n\nimport type { AriaRadioProps } from 'react-aria';\n\nexport { AriaRadioProps };\nexport { useRadio };\n\nconst RadioButtonElement = tasty(Item, {\n  qa: 'RadioButton',\n  as: 'label',\n  styles: {\n    preset: 't3m',\n    lineHeight: '1em',\n    flexGrow: 1,\n    gridTemplate:\n      '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content',\n    placeContent: 'center',\n    shadow: {\n      '': false,\n      'tabs & selected': '$item-shadow',\n      'tabs & selected & disabled': false,\n    },\n    fill: {\n      'selected & tabs': '#surface',\n      'selected & tabs & disabled': '#surface.6',\n    },\n    color: {\n      'selected & tabs': '#dark',\n      'selected & tabs & disabled': '#dark.3',\n    },\n\n    // Mirror the ButtonSplit grouping: the corner radius is shared so the\n    // first/last items keep only their outer-side radius and middle items go\n    // square; a -1bw left margin overlaps adjacent borders into a single\n    // continuous edge. The selected button is bumped above its siblings so its\n    // brand-tinted border is visible from all four sides — without the bump\n    // the right edge of an adjacent sibling would paint over the selected\n    // button's left edge (and vice-versa). Hover / focus-visible bump higher\n    // still so they always read on top of the selected highlight.\n    radius: {\n      '': true,\n      '!tabs & !:last-child': '1r left',\n      '!tabs & !:first-child': '1r right',\n      '!tabs & !:first-child & !:last-child': 0,\n    },\n    margin: {\n      '': 0,\n      '!tabs & !:first-child': '-1bw left',\n    },\n    zIndex: {\n      '!tabs & selected': 1,\n    },\n\n    Label: {\n      placeSelf: {\n        '': 'center start',\n        '!has-prefix & !has-suffix & !has-icon & !has-right-icon': 'center',\n      },\n    },\n  },\n});\n\nconst RadioWrapperElement = tasty({\n  as: 'label',\n  qa: 'RadioWrapper',\n  styles: {\n    position: 'relative',\n    display: 'grid',\n    placeItems: 'center start',\n    placeContent: 'center start',\n    gap: '1x',\n    flow: 'column',\n    preset: 'default',\n    width: 'min-content',\n    radius: true,\n    margin: {\n      '': '1x right',\n      button: '0',\n    },\n    zIndex: {\n      '': 'initial',\n      checked: 1,\n    },\n    flexGrow: 1,\n  },\n});\n\nconst RadioNormalElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: 'round',\n    fill: {\n      '': '#surface',\n      disabled: '#disabled-surface',\n    },\n    color: {\n      '': '#clear',\n      checked: '#primary-text',\n      'invalid & checked': '#danger-text',\n      'valid & checked': '#success-text',\n      'disabled | !checked': '#clear',\n      'disabled & checked': '#dark.12',\n    },\n    border: {\n      '': '#dark-04',\n      checked: '#primary-text',\n      invalid: '#danger-text.50',\n      valid: '#success-text.50',\n      disabled: '#dark.12',\n    },\n    width: '2x',\n    height: '2x',\n    outline: {\n      '': '#primary-text.0 / 1bw',\n      focused: '1bw #primary-text / 1bw',\n    },\n    transition: 'theme',\n    whiteSpace: 'nowrap',\n\n    RadioCircle: {\n      display: 'block',\n      radius: 'round',\n      width: '1x',\n      height: '1x',\n      fill: '#current',\n    },\n  },\n});\n\nconst RadioCircleElement = <div data-element=\"RadioCircle\" />;\n\nconst RadioLabelElement = tasty({\n  qa: 'RadioLabel',\n  styles: INLINE_LABEL_STYLES,\n});\n\nexport interface CubeRadioProps\n  extends BaseProps,\n    AriaRadioProps,\n    Omit<FieldBaseProps, 'tooltip'>,\n    OuterStyleProps {\n  'aria-label'?: string;\n  /* The visual type of the radio button */\n  type?: 'button' | 'radio';\n  buttonType?: CubeItemProps['type'];\n  value?: string;\n  /* Size of the button (for button type only) */\n  size?: Omit<CubeItemProps['size'], 'inline'>;\n  /* Icon to display (for button type only) */\n  icon?: CubeItemProps['icon'];\n  /* Icon to display on the right (for button type only) */\n  rightIcon?: CubeItemProps['rightIcon'];\n  /* Prefix element (for button type only) */\n  prefix?: CubeItemProps['prefix'];\n  /* Suffix element (for button type only) */\n  suffix?: CubeItemProps['suffix'];\n  /* Description text (for button type only) */\n  description?: CubeItemProps['description'];\n  /* Tooltip configuration (for button type only) */\n  tooltip?: CubeItemProps['tooltip'];\n  /* Keyboard shortcut (for button type only) */\n  hotkeys?: CubeItemProps['hotkeys'];\n}\n\nfunction Radio(props: CubeRadioProps, ref) {\n  props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });\n\n  let {\n    qa,\n    isDisabled,\n    isInvalid,\n    isValid,\n    children,\n    label,\n    autoFocus,\n    labelStyles,\n    labelProps,\n    type,\n    buttonType,\n    size,\n    icon,\n    rightIcon,\n    prefix,\n    suffix,\n    description,\n    tooltip,\n    hotkeys,\n    'aria-label': ariaLabel,\n    form,\n    ...otherProps\n  } = props;\n\n  label = label || children;\n\n  let styles = extractStyles(otherProps, OUTER_STYLES);\n\n  labelStyles = {\n    ...INLINE_LABEL_STYLES,\n    ...labelStyles,\n  };\n\n  let radioGroupProps = useRadioProvider();\n\n  let state = radioGroupProps && radioGroupProps.state;\n  let name = radioGroupProps && radioGroupProps.name;\n  let contextSize = radioGroupProps?.size;\n  let contextButtonType = radioGroupProps?.buttonType;\n  let contextType = radioGroupProps?.type;\n  let contextIsDisabled = radioGroupProps?.isDisabled;\n\n  if (!state) {\n    throw new Error('CubeUI: The Radio button is used outside the RadioGroup.');\n  }\n\n  // Determine effective type from props or context\n  let effectiveType = type ?? contextType ?? 'radio';\n  let isButton = effectiveType === 'button' || effectiveType === 'tabs';\n\n  // Determine effective size with priority: prop > context > default\n  let effectiveSize: CubeItemProps['size'] = (size ??\n    contextSize ??\n    'medium') as CubeItemProps['size'];\n\n  // Apply size mapping for tabs mode button radios.\n  // API sizes mapped to Item button sizes: large -> medium (40px), medium -> xsmall (32px).\n  if (effectiveType === 'tabs' && isButton) {\n    effectiveSize =\n      RADIO_SIZE_MAP[effectiveSize === 'large' ? 'large' : 'medium'];\n  }\n\n  // Determine effective button type\n  // In tabs mode, always use 'clear' and ignore buttonType prop.\n  let effectiveButtonType: string;\n  // When buttonType is 'primary', non-selected radios use 'outline' with a\n  // visual-only `selected` mod (mods.selected=true) to render the brand-tinted\n  // outline+selected look — this is the only place mods.selected intentionally\n  // decouples from the aria/isSelected state.\n  let forceSelectedMod = false;\n  if (effectiveType === 'tabs') {\n    effectiveButtonType = 'clear';\n  } else {\n    const baseButtonType = buttonType ?? contextButtonType ?? 'outline';\n    if (baseButtonType === 'primary') {\n      if (state.selectedValue === props.value) {\n        effectiveButtonType = 'primary';\n      } else {\n        effectiveButtonType = 'outline';\n        forceSelectedMod = true;\n      }\n    } else {\n      effectiveButtonType = baseButtonType;\n    }\n  }\n\n  // Use context isDisabled if prop isDisabled is not explicitly set\n  let effectiveIsDisabled = isDisabled ?? contextIsDisabled ?? false;\n\n  let { isFocused, focusProps } = useFocus(\n    { isDisabled: effectiveIsDisabled },\n    true,\n  );\n  let { hoverProps, isHovered } = useHover({ isDisabled: effectiveIsDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let {\n    inputProps,\n    isDisabled: isRadioDisabled,\n    isSelected: isRadioSelected,\n  } = useRadio(\n    {\n      name,\n      ...props,\n      isDisabled: effectiveIsDisabled,\n    },\n    state,\n    inputRef,\n  );\n\n  const mods = useMemo(\n    () => ({\n      checked: isRadioSelected,\n      ...getValidationMods({ isInvalid, isValid }),\n      disabled: isRadioDisabled,\n      hovered: isHovered,\n      button: isButton,\n      focused: isFocused,\n      tabs: effectiveType === 'tabs',\n    }),\n    [\n      isRadioSelected,\n      isInvalid,\n      isValid,\n      isRadioDisabled,\n      isHovered,\n      isButton,\n      isFocused,\n      effectiveType,\n    ],\n  );\n\n  // Render button type using Item\n  if (isButton) {\n    return (\n      <RadioButtonElement\n        ref={domRef}\n        type={effectiveButtonType}\n        theme={getValidationTheme(\n          'default',\n          { isInvalid, isValid },\n          { includeValid: true },\n        )}\n        size={effectiveSize}\n        icon={icon}\n        rightIcon={rightIcon}\n        prefix={prefix}\n        suffix={suffix}\n        description={description}\n        tooltip={tooltip}\n        hotkeys={hotkeys}\n        isSelected={isRadioSelected}\n        isDisabled={isRadioDisabled}\n        mods={{ ...mods, ...(forceSelectedMod ? { selected: true } : {}) }}\n        styles={styles}\n        {...mergeProps(hoverProps, focusProps)}\n      >\n        <HiddenInput\n          qa={qa || 'Radio'}\n          data-input-type=\"radio\"\n          aria-label={ariaLabel}\n          {...inputProps}\n          ref={inputRef}\n          form={null}\n          mods={{ button: isButton, disabled: isRadioDisabled }}\n        />\n        {label}\n      </RadioButtonElement>\n    );\n  }\n\n  // Render classic radio type\n  return (\n    <RadioWrapperElement\n      styles={styles}\n      {...hoverProps}\n      ref={domRef}\n      mods={mods}\n      data-type={type}\n    >\n      <HiddenInput\n        qa={qa || 'Radio'}\n        data-input-type=\"radio\"\n        aria-label={ariaLabel}\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n        mods={{ button: isButton }}\n      />\n      <RadioNormalElement data-element=\"Input\" mods={mods} data-type={type}>\n        {RadioCircleElement}\n      </RadioNormalElement>\n      {label && (\n        <RadioLabelElement\n          mods={mods}\n          styles={labelStyles}\n          {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n        >\n          {label}\n        </RadioLabelElement>\n      )}\n    </RadioWrapperElement>\n  );\n}\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _Radio = forwardRef(Radio);\n\nconst Tabs = tasty(RadioGroup, {\n  type: 'tabs',\n});\n\nconst ButtonGroup = tasty(RadioGroup, {\n  type: 'button',\n});\n\nconst __Radio = Object.assign(\n  _Radio as typeof _Radio & {\n    Group: typeof RadioGroup;\n    Tabs: typeof Tabs;\n    ButtonGroup: typeof ButtonGroup;\n    Button: typeof _Radio;\n  },\n  {\n    Group: RadioGroup,\n    Tabs,\n    ButtonGroup,\n    Button: _Radio,\n  },\n);\n\n__Radio.displayName = 'Radio';\n\nexport { __Radio as Radio };\n"],"mappings":"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"}
+{"version":3,"file":"Radio.js","names":["Item","useFocus","useRadio","mergeProps","RadioGroup"],"sources":["../../../../src/components/fields/RadioGroup/Radio.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport {\n  BaseProps,\n  filterBaseProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef } from 'react';\nimport { useHover, useRadio } from 'react-aria';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemProps, Item } from '../../content/Item/Item';\nimport {\n  getValidationMods,\n  getValidationTheme,\n  INLINE_LABEL_STYLES,\n  useFieldProps,\n} from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport { RADIO_SIZE_MAP } from '../../navigation/Tabs/types';\n\nimport { useRadioProvider } from './context';\nimport { RadioGroup } from './RadioGroup';\n\nimport type { AriaRadioProps } from 'react-aria';\n\nexport { AriaRadioProps };\nexport { useRadio };\n\nconst RadioButtonElement = tasty(Item, {\n  qa: 'RadioButton',\n  as: 'label',\n  styles: {\n    preset: 't3m',\n    lineHeight: '1em',\n    flexGrow: 1,\n    gridTemplate:\n      '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content',\n    placeContent: 'center',\n    shadow: {\n      '': false,\n      'tabs & selected': '$item-shadow',\n      'tabs & selected & disabled': false,\n    },\n    fill: {\n      'selected & tabs': '#surface',\n      'selected & tabs & disabled': '#surface.6',\n    },\n    color: {\n      'selected & tabs': '#dark',\n      'selected & tabs & disabled': '#dark.3',\n    },\n\n    // Mirror the ButtonSplit grouping: the corner radius is shared so the\n    // first/last items keep only their outer-side radius and middle items go\n    // square; a -1bw left margin overlaps adjacent borders into a single\n    // continuous edge. The selected button is bumped above its siblings so its\n    // brand-tinted border is visible from all four sides — without the bump\n    // the right edge of an adjacent sibling would paint over the selected\n    // button's left edge (and vice-versa). Hover / focus-visible bump higher\n    // still so they always read on top of the selected highlight.\n    radius: {\n      '': true,\n      '!tabs & !:last-child': '1r left',\n      '!tabs & !:first-child': '1r right',\n      '!tabs & !:first-child & !:last-child': 0,\n    },\n    margin: {\n      '': 0,\n      '!tabs & !:first-child': '-1bw left',\n    },\n    zIndex: {\n      '!tabs & selected': 1,\n    },\n\n    Label: {\n      placeSelf: {\n        '': 'center start',\n        '!has-prefix & !has-suffix & !has-icon & !has-right-icon': 'center',\n      },\n    },\n  },\n});\n\nconst RadioWrapperElement = tasty({\n  as: 'label',\n  qa: 'RadioWrapper',\n  styles: {\n    position: 'relative',\n    display: 'grid',\n    placeItems: 'center start',\n    placeContent: 'center start',\n    gap: '1x',\n    flow: 'column',\n    preset: 'default',\n    width: 'min-content',\n    radius: true,\n    margin: {\n      '': '1x right',\n      button: '0',\n    },\n    zIndex: {\n      '': 'initial',\n      checked: 1,\n    },\n    flexGrow: 1,\n  },\n});\n\nconst RadioNormalElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    radius: 'round',\n    fill: {\n      '': '#surface',\n      disabled: '#disabled-surface',\n    },\n    color: {\n      '': '#clear',\n      checked: '#primary-text',\n      'invalid & checked': '#danger-text',\n      'valid & checked': '#success-text',\n      'disabled | !checked': '#clear',\n      'disabled & checked': '#dark.12',\n    },\n    border: {\n      '': '#dark-04',\n      checked: '#primary-text',\n      invalid: '#danger-text.50',\n      valid: '#success-text.50',\n      disabled: '#dark.12',\n    },\n    width: '2x',\n    height: '2x',\n    outline: {\n      '': '#primary-text.0 / 1bw',\n      focused: '1bw #primary-text / 1bw',\n    },\n    transition: 'theme',\n    whiteSpace: 'nowrap',\n\n    RadioCircle: {\n      display: 'block',\n      radius: 'round',\n      width: '1x',\n      height: '1x',\n      fill: '#current',\n    },\n  },\n});\n\nconst RadioCircleElement = <div data-element=\"RadioCircle\" />;\n\nconst RadioLabelElement = tasty({\n  qa: 'RadioLabel',\n  styles: INLINE_LABEL_STYLES,\n});\n\nexport interface CubeRadioProps\n  extends BaseProps,\n    AriaRadioProps,\n    Omit<FieldBaseProps, 'tooltip'>,\n    OuterStyleProps {\n  'aria-label'?: string;\n  /* The visual type of the radio button */\n  type?: 'button' | 'radio';\n  buttonType?: CubeItemProps['type'];\n  value?: string;\n  /* Size of the button (for button type only) */\n  size?: Omit<CubeItemProps['size'], 'inline'>;\n  /* Icon to display (for button type only) */\n  icon?: CubeItemProps['icon'];\n  /* Icon to display on the right (for button type only) */\n  rightIcon?: CubeItemProps['rightIcon'];\n  /* Prefix element (for button type only) */\n  prefix?: CubeItemProps['prefix'];\n  /* Suffix element (for button type only) */\n  suffix?: CubeItemProps['suffix'];\n  /* Description text (for button type only) */\n  description?: CubeItemProps['description'];\n  /* Tooltip configuration (for button type only) */\n  tooltip?: CubeItemProps['tooltip'];\n  /* Keyboard shortcut (for button type only) */\n  hotkeys?: CubeItemProps['hotkeys'];\n}\n\nfunction Radio(props: CubeRadioProps, ref) {\n  props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });\n\n  let {\n    qa,\n    isDisabled,\n    isInvalid,\n    isValid,\n    children,\n    label,\n    autoFocus,\n    labelStyles,\n    labelProps,\n    type,\n    buttonType,\n    size,\n    icon,\n    rightIcon,\n    prefix,\n    suffix,\n    description,\n    tooltip,\n    hotkeys,\n    'aria-label': ariaLabel,\n    form,\n    ...otherProps\n  } = props;\n\n  label = label || children;\n\n  let styles = extractStyles(otherProps, OUTER_STYLES);\n\n  labelStyles = {\n    ...INLINE_LABEL_STYLES,\n    ...labelStyles,\n  };\n\n  let radioGroupProps = useRadioProvider();\n\n  let state = radioGroupProps && radioGroupProps.state;\n  let name = radioGroupProps && radioGroupProps.name;\n  let contextSize = radioGroupProps?.size;\n  let contextButtonType = radioGroupProps?.buttonType;\n  let contextType = radioGroupProps?.type;\n  let contextIsDisabled = radioGroupProps?.isDisabled;\n\n  if (!state) {\n    throw new Error('CubeUI: The Radio button is used outside the RadioGroup.');\n  }\n\n  // Determine effective type from props or context\n  let effectiveType = type ?? contextType ?? 'radio';\n  let isButton = effectiveType === 'button' || effectiveType === 'tabs';\n\n  // Determine effective size with priority: prop > context > default\n  let effectiveSize: CubeItemProps['size'] = (size ??\n    contextSize ??\n    'medium') as CubeItemProps['size'];\n\n  // Apply size mapping for tabs mode button radios.\n  // API sizes mapped to Item button sizes: large -> medium (40px), medium -> xsmall (32px).\n  if (effectiveType === 'tabs' && isButton) {\n    effectiveSize =\n      RADIO_SIZE_MAP[effectiveSize === 'large' ? 'large' : 'medium'];\n  }\n\n  // Determine effective button type\n  // In tabs mode, always use 'clear' and ignore buttonType prop.\n  let effectiveButtonType: string;\n  // When buttonType is 'primary', non-selected radios use 'outline' with a\n  // visual-only `selected` mod (mods.selected=true) to render the brand-tinted\n  // outline+selected look — this is the only place mods.selected intentionally\n  // decouples from the aria/isSelected state.\n  let forceSelectedMod = false;\n  if (effectiveType === 'tabs') {\n    effectiveButtonType = 'clear';\n  } else {\n    const baseButtonType = buttonType ?? contextButtonType ?? 'outline';\n    if (baseButtonType === 'primary') {\n      if (state.selectedValue === props.value) {\n        effectiveButtonType = 'primary';\n      } else {\n        effectiveButtonType = 'outline';\n        forceSelectedMod = true;\n      }\n    } else {\n      effectiveButtonType = baseButtonType;\n    }\n  }\n\n  // Use context isDisabled if prop isDisabled is not explicitly set\n  let effectiveIsDisabled = isDisabled ?? contextIsDisabled ?? false;\n\n  let { isFocused, focusProps } = useFocus(\n    { isDisabled: effectiveIsDisabled },\n    true,\n  );\n  let { hoverProps, isHovered } = useHover({ isDisabled: effectiveIsDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let {\n    inputProps,\n    isDisabled: isRadioDisabled,\n    isSelected: isRadioSelected,\n  } = useRadio(\n    {\n      name,\n      ...props,\n      isDisabled: effectiveIsDisabled,\n    },\n    state,\n    inputRef,\n  );\n\n  const mods = useMemo(\n    () => ({\n      checked: isRadioSelected,\n      ...getValidationMods({ isInvalid, isValid }),\n      disabled: isRadioDisabled,\n      hovered: isHovered,\n      button: isButton,\n      focused: isFocused,\n      tabs: effectiveType === 'tabs',\n    }),\n    [\n      isRadioSelected,\n      isInvalid,\n      isValid,\n      isRadioDisabled,\n      isHovered,\n      isButton,\n      isFocused,\n      effectiveType,\n    ],\n  );\n\n  // Render button type using Item\n  if (isButton) {\n    return (\n      <RadioButtonElement\n        ref={domRef}\n        type={effectiveButtonType}\n        theme={getValidationTheme(\n          'default',\n          { isInvalid, isValid },\n          { includeValid: true },\n        )}\n        size={effectiveSize}\n        icon={icon}\n        rightIcon={rightIcon}\n        prefix={prefix}\n        suffix={suffix}\n        description={description}\n        tooltip={tooltip}\n        hotkeys={hotkeys}\n        isSelected={isRadioSelected}\n        isDisabled={isRadioDisabled}\n        mods={{ ...mods, ...(forceSelectedMod ? { selected: true } : {}) }}\n        styles={styles}\n        {...mergeProps(hoverProps, focusProps)}\n      >\n        <HiddenInput\n          qa={qa || 'Radio'}\n          data-input-type=\"radio\"\n          aria-label={ariaLabel}\n          {...inputProps}\n          ref={inputRef}\n          form={null}\n          mods={{ button: isButton, disabled: isRadioDisabled }}\n        />\n        {label}\n      </RadioButtonElement>\n    );\n  }\n\n  // Render classic radio type\n  return (\n    <RadioWrapperElement\n      styles={styles}\n      {...hoverProps}\n      ref={domRef}\n      mods={mods}\n      data-type={type}\n    >\n      <HiddenInput\n        qa={qa || 'Radio'}\n        data-input-type=\"radio\"\n        aria-label={ariaLabel}\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n        mods={{ button: isButton }}\n      />\n      <RadioNormalElement data-element=\"Input\" mods={mods} data-type={type}>\n        {RadioCircleElement}\n      </RadioNormalElement>\n      {label && (\n        <RadioLabelElement\n          mods={mods}\n          styles={labelStyles}\n          {...(labelProps ? filterBaseProps(labelProps) : undefined)}\n        >\n          {label}\n        </RadioLabelElement>\n      )}\n    </RadioWrapperElement>\n  );\n}\n\n/**\n * Radio buttons allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _Radio = forwardRef(Radio);\n\nconst Tabs = tasty(RadioGroup, {\n  type: 'tabs',\n});\n\nconst ButtonGroup = tasty(RadioGroup, {\n  type: 'button',\n});\n\nconst __Radio = Object.assign(\n  _Radio as typeof _Radio & {\n    Group: typeof RadioGroup;\n    Tabs: typeof Tabs;\n    ButtonGroup: typeof ButtonGroup;\n    Button: typeof _Radio;\n  },\n  {\n    Group: RadioGroup,\n    Tabs,\n    ButtonGroup,\n    Button: _Radio,\n  },\n);\n\n__Radio.displayName = 'Radio';\n\nexport { __Radio as Radio };\n"],"mappings":"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"}

package/dist/components/fields/RadioGroup/RadioGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { FormContext } from "../../form/Form/Form.js";

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

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

package/dist/components/fields/SearchComboBox/SearchComboBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";

package/dist/components/fields/SearchInput/SearchInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";

package/dist/components/fields/Select/Select.js

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

package/dist/components/fields/Slider/Gradation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
 import { SliderGradationElement, SliderGradeElement } from "./elements.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/fields/Slider/HueSlider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
 import { __Slider } from "./Slider.js";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/Slider/RangeSlider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
 import { Gradation } from "./Gradation.js";
 import { _SliderBase } from "./SliderBase.js";
 import { SliderThumb } from "./SliderThumb.js";

package/dist/components/fields/Slider/Slider.js

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

package/dist/components/fields/Slider/SliderBase.js

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

package/dist/components/fields/Slider/SliderThumb.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { SliderThumbElement } from "./elements.js";

package/dist/components/fields/Slider/SliderTrack.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { SliderTrackContainerElement } from "./elements.js";
 import { useMemo } from "react";

package/dist/components/fields/Slider/elements.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 
 //#region src/components/fields/Slider/elements.ts

package/dist/components/fields/Slider/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
 import { __RangeSlider } from "./RangeSlider.js";
 import { __Slider } from "./Slider.js";
 import { __HueSlider } from "./HueSlider.js";

package/dist/components/fields/Switch/Switch.js

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

package/dist/components/fields/TextArea/TextArea.js

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

package/dist/components/fields/TextInput/TextInput.js

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

package/dist/components/fields/TextInput/TextInputBase.js

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

package/dist/components/fields/TextInputMapper/TextInputMapper.js

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

package/dist/components/fields/{ColorPicker/ColorPickerPanel.js → color/ColorPanel.js}

@@ -1,16 +1,16 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { formatColor, getContrastingColor, toHex } from "./color.js";
+import { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS } from "./channels.js";
 import { __Radio } from "../RadioGroup/Radio.js";
 import { __Slider } from "../Slider/Slider.js";
-import { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS } from "./channels.js";
 import { tasty } from "@tenphi/tasty";
 import { useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/components/fields/ColorPicker/ColorPickerPanel.tsx
+//#region src/components/fields/color/ColorPanel.tsx
 const PanelElement = tasty({
-	qa: "ColorPickerPanel",
+	qa: "ColorPanel",
 	styles: {
 		display: "grid",
 		flow: "row",
@@ -104,11 +104,12 @@ function ChannelRow({ channel, color, isDisabled, onChange }) {
 	] });
 }
 /**
-* The popover body of `ColorPicker`: a preview, a switch between the three
-* color concepts, and one gradient slider per channel of the active one.
+* The popover body shared by `ColorInput` and `ColorPicker`: a preview, a
+* switch between the three color concepts, and one gradient slider per channel
+* of the active one.
 */
-function ColorPickerPanel(props) {
-	const { color, space, isDisabled, previewFormat, onChange, onSpaceChange } = props;
+function ColorPanel(props) {
+	const { color, space, isDisabled, previewFormat, swatches, onChange, onSpaceChange } = props;
 	const colorTokens = useMemo(() => ({
 		"--color-picker-color": toHex(color),
 		"--color-picker-contrast-color": getContrastingColor(color)
@@ -139,11 +140,12 @@ function ColorPickerPanel(props) {
 				color,
 				isDisabled,
 				onChange
-			}, `${space}-${channel.label}`)) })
+			}, `${space}-${channel.label}`)) }),
+			swatches
 		]
 	});
 }
 
 //#endregion
-export { ColorPickerPanel };
-//# sourceMappingURL=ColorPickerPanel.js.map
+export { ColorPanel };
+//# sourceMappingURL=ColorPanel.js.map

package/dist/components/fields/color/ColorPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPanel.js","names":["Slider","Radio"],"sources":["../../../../src/components/fields/color/ColorPanel.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport { ReactNode, useMemo } from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { Radio } from '../RadioGroup';\nimport { Slider } from '../Slider';\n\nimport {\n  CHANNELS,\n  COLOR_SPACE_HINTS,\n  COLOR_SPACE_LABELS,\n  COLOR_SPACES,\n  ColorChannel,\n  ColorSpace,\n} from './channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  getContrastingColor,\n  toHex,\n} from './color';\n\nconst PanelElement = tasty({\n  qa: 'ColorPanel',\n  styles: {\n    display: 'grid',\n    flow: 'row',\n    gap: '1x',\n    padding: '1x',\n    width: '34x',\n  },\n});\n\nconst PreviewElement = tasty({\n  qa: 'ColorPreview',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    height: '6x',\n    radius: true,\n    preset: 's4',\n    fill: '(#color-picker, #clear)',\n    color: '(#color-picker-contrast, #dark)',\n    shadow: 'inset 0 0 0 1bw #dark.1',\n  },\n});\n\nconst ChannelsElement = tasty({\n  styles: {\n    display: 'grid',\n    gridColumns: 'max-content 1sf max-content',\n    placeItems: 'center stretch',\n    gap: '1x',\n  },\n});\n\nconst ChannelLabelElement = tasty({\n  styles: {\n    preset: 'c2',\n    color: '#dark-03',\n    textAlign: 'center',\n    width: '2x',\n  },\n});\n\nconst ChannelTrackElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center stretch',\n  },\n});\n\nconst ChannelValueElement = tasty({\n  styles: {\n    preset: 's4',\n    color: '#dark-02',\n    textAlign: 'right',\n    whiteSpace: 'nowrap',\n    width: '5.5x',\n  },\n});\n\n/**\n * The gradient reaches the track through a plain custom property so the track\n * keeps a single cached style rule. A color picker moves its channels\n * continuously, and a fresh `styles` object per frame would emit a fresh CSS\n * rule per frame.\n */\nconst TRACK_STYLES: Styles = {\n  height: '1x',\n  top: '.5x',\n  radius: '1r',\n  fill: '#clear',\n  image: '$channel-gradient',\n  shadow: 'inset 0 0 0 1bw #dark.1',\n  Fill: false,\n};\n\n/** A ring keeps the thumb visible wherever it sits on its own gradient. */\nconst THUMB_STYLES: Styles = {\n  shadow: '0 0 0 2bw #surface, 0 0 0 3bw #dark.2',\n};\n\nconst THUMB_TOKENS = { '#slider-thumb': '(#color-picker, #surface)' };\n\nconst SPACE_STYLES: Styles = { width: '100%' };\nconst TAB_STYLES: Styles = { flexGrow: 1 };\n\nexport interface ColorPanelProps {\n  color: ColorValue;\n  space: ColorSpace;\n  isDisabled?: boolean;\n  /** Notation used for the preview caption. */\n  previewFormat: ColorFormat;\n  /** Optional palette rendered under the channels. */\n  swatches?: ReactNode;\n  onChange: (color: ColorValue) => void;\n  onSpaceChange: (space: ColorSpace) => void;\n}\n\ninterface ChannelRowProps {\n  channel: ColorChannel;\n  color: ColorValue;\n  isDisabled?: boolean;\n  onChange: (color: ColorValue) => void;\n}\n\nfunction ChannelRow({ channel, color, isDisabled, onChange }: ChannelRowProps) {\n  const max = channel.max(color);\n\n  const handleChange = useEvent((value: number) => {\n    onChange(channel.apply(color, value));\n  });\n\n  return (\n    <>\n      <ChannelLabelElement aria-hidden=\"true\">\n        {channel.label}\n      </ChannelLabelElement>\n      <ChannelTrackElement\n        style={{\n          '--channel-gradient': `linear-gradient(to right, ${channel.stops(\n            color,\n          )})`,\n        }}\n      >\n        <Slider\n          aria-label={channel.title}\n          value={Math.min(channel.value(color), max)}\n          minValue={channel.min}\n          maxValue={max}\n          step={channel.step}\n          isDisabled={isDisabled}\n          trackStyles={TRACK_STYLES}\n          thumbStyles={THUMB_STYLES}\n          thumbTokens={THUMB_TOKENS}\n          onChange={handleChange}\n        />\n      </ChannelTrackElement>\n      <ChannelValueElement>{channel.display(color)}</ChannelValueElement>\n    </>\n  );\n}\n\n/**\n * The popover body shared by `ColorInput` and `ColorPicker`: a preview, a\n * switch between the three color concepts, and one gradient slider per channel\n * of the active one.\n */\nexport function ColorPanel(props: ColorPanelProps) {\n  const {\n    color,\n    space,\n    isDisabled,\n    previewFormat,\n    swatches,\n    onChange,\n    onSpaceChange,\n  } = props;\n\n  const colorTokens = useMemo(\n    () => ({\n      '--color-picker-color': toHex(color),\n      '--color-picker-contrast-color': getContrastingColor(color),\n    }),\n    [color],\n  );\n\n  const handleSpaceChange = useEvent((value: string) => {\n    onSpaceChange(value as ColorSpace);\n  });\n\n  return (\n    <PanelElement style={colorTokens}>\n      <PreviewElement>{formatColor(color, previewFormat)}</PreviewElement>\n      <Radio.Tabs\n        aria-label=\"Color space\"\n        value={space}\n        isDisabled={isDisabled}\n        styles={SPACE_STYLES}\n        onChange={handleSpaceChange}\n      >\n        {COLOR_SPACES.map((item) => (\n          <Radio\n            key={item}\n            value={item}\n            aria-label={COLOR_SPACE_LABELS[item]}\n            tooltip={COLOR_SPACE_HINTS[item]}\n            styles={TAB_STYLES}\n          >\n            {COLOR_SPACE_LABELS[item]}\n          </Radio>\n        ))}\n      </Radio.Tabs>\n      <ChannelsElement>\n        {CHANNELS[space].map((channel) => (\n          <ChannelRow\n            key={`${space}-${channel.label}`}\n            channel={channel}\n            color={color}\n            isDisabled={isDisabled}\n            onChange={onChange}\n          />\n        ))}\n      </ChannelsElement>\n      {swatches}\n    </PanelElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAuBA,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,KAAK;EACL,SAAS;EACT,OAAO;EACR;CACF,CAAC;AAEF,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAEF,MAAM,kBAAkB,MAAM,EAC5B,QAAQ;CACN,SAAS;CACT,aAAa;CACb,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAM,sBAAsB,MAAM,EAChC,QAAQ;CACN,QAAQ;CACR,OAAO;CACP,WAAW;CACX,OAAO;CACR,EACF,CAAC;AAEF,MAAM,sBAAsB,MAAM,EAChC,QAAQ;CACN,SAAS;CACT,YAAY;CACb,EACF,CAAC;AAEF,MAAM,sBAAsB,MAAM,EAChC,QAAQ;CACN,QAAQ;CACR,OAAO;CACP,WAAW;CACX,YAAY;CACZ,OAAO;CACR,EACF,CAAC;;;;;;;AAQF,MAAM,eAAuB;CAC3B,QAAQ;CACR,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACP,QAAQ;CACR,MAAM;CACP;;AAGD,MAAM,eAAuB,EAC3B,QAAQ,yCACT;AAED,MAAM,eAAe,EAAE,iBAAiB,6BAA6B;AAErE,MAAM,eAAuB,EAAE,OAAO,QAAQ;AAC9C,MAAM,aAAqB,EAAE,UAAU,GAAG;AAqB1C,SAAS,WAAW,EAAE,SAAS,OAAO,YAAY,YAA6B;CAC7E,MAAM,MAAM,QAAQ,IAAI,MAAM;CAE9B,MAAM,eAAe,UAAU,UAAkB;AAC/C,WAAS,QAAQ,MAAM,OAAO,MAAM,CAAC;GACrC;AAEF,QACE;EACE,oBAAC;GAAoB,eAAY;aAC9B,QAAQ;IACW;EACtB,oBAAC;GACC,OAAO,EACL,sBAAsB,6BAA6B,QAAQ,MACzD,MACD,CAAC,IACH;aAED,oBAACA;IACC,cAAY,QAAQ;IACpB,OAAO,KAAK,IAAI,QAAQ,MAAM,MAAM,EAAE,IAAI;IAC1C,UAAU,QAAQ;IAClB,UAAU;IACV,MAAM,QAAQ;IACF;IACZ,aAAa;IACb,aAAa;IACb,aAAa;IACb,UAAU;KACV;IACkB;EACtB,oBAAC,iCAAqB,QAAQ,QAAQ,MAAM,GAAuB;KAClE;;;;;;;AASP,SAAgB,WAAW,OAAwB;CACjD,MAAM,EACJ,OACA,OACA,YACA,eACA,UACA,UACA,kBACE;CAEJ,MAAM,cAAc,eACX;EACL,wBAAwB,MAAM,MAAM;EACpC,iCAAiC,oBAAoB,MAAM;EAC5D,GACD,CAAC,MAAM,CACR;CAED,MAAM,oBAAoB,UAAU,UAAkB;AACpD,gBAAc,MAAoB;GAClC;AAEF,QACE,qBAAC;EAAa,OAAO;;GACnB,oBAAC,4BAAgB,YAAY,OAAO,cAAc,GAAkB;GACpE,oBAACC,QAAM;IACL,cAAW;IACX,OAAO;IACK;IACZ,QAAQ;IACR,UAAU;cAET,aAAa,KAAK,SACjB,oBAACA;KAEC,OAAO;KACP,cAAY,mBAAmB;KAC/B,SAAS,kBAAkB;KAC3B,QAAQ;eAEP,mBAAmB;OANf,KAOC,CACR;KACS;GACb,oBAAC,6BACE,SAAS,OAAO,KAAK,YACpB,oBAAC;IAEU;IACF;IACK;IACF;MAJL,GAAG,MAAM,GAAG,QAAQ,QAKzB,CACF,GACc;GACjB;;GACY"}

package/dist/components/fields/color/ColorSwatch.d.ts

@@ -0,0 +1,22 @@
+
+import { ColorValue } from "./color.js";
+import { BaseProps, BaseStyleProps, BlockStyleProps, DimensionStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import * as react from "react";
+
+//#region src/components/fields/color/ColorSwatch.d.ts
+interface CubeColorSwatchProps extends BaseProps, BaseStyleProps, OuterStyleProps, BlockStyleProps, DimensionStyleProps {
+  /** The color to show. Anything the color inputs accept; `null` shows the empty state. */
+  color?: string | ColorValue | null;
+  styles?: Styles;
+}
+/**
+ * A square of color. Decorative on its own — pair it with the value as text, or
+ * with a control that names it.
+ *
+ * The color travels as an inline custom property rather than through `styles`,
+ * so the swatch keeps a single cached style rule however often it changes.
+ */
+declare const ColorSwatch: react.ForwardRefExoticComponent<CubeColorSwatchProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ColorSwatch, CubeColorSwatchProps };
+//# sourceMappingURL=ColorSwatch.d.ts.map

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

@@ -0,0 +1,58 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
+import { parseColor, toHex } from "./color.js";
+import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/fields/color/ColorSwatch.tsx
+const STYLE_PROPS = [
+	...BASE_STYLES,
+	...OUTER_STYLES,
+	...BLOCK_STYLES,
+	...DIMENSION_STYLES
+];
+const SwatchElement = tasty({
+	qa: "ColorSwatch",
+	styles: {
+		display: "block",
+		width: "2.5x",
+		height: "2.5x",
+		radius: "1r",
+		fill: {
+			"": "(#color-picker, #clear)",
+			empty: "#clear"
+		},
+		shadow: "inset 0 0 0 1bw #dark.15",
+		image: {
+			"": false,
+			empty: "linear-gradient(to bottom right, #clear 46%, #danger 46%, #danger 54%, #clear 54%)"
+		}
+	}
+});
+/**
+* A square of color. Decorative on its own — pair it with the value as text, or
+* with a control that names it.
+*
+* The color travels as an inline custom property rather than through `styles`,
+* so the swatch keeps a single cached style rule however often it changes.
+*/
+const ColorSwatch = forwardRef(function ColorSwatch(props, ref) {
+	const { color, mods, qa } = props;
+	const styles = extractStyles(props, STYLE_PROPS);
+	const resolved = typeof color === "string" ? parseColor(color) : color ?? null;
+	return /* @__PURE__ */ jsx(SwatchElement, {
+		ref,
+		qa,
+		mods: {
+			empty: !resolved,
+			...mods
+		},
+		styles,
+		style: resolved ? { "--color-picker-color": toHex(resolved) } : void 0
+	});
+});
+
+//#endregion
+export { ColorSwatch };
+//# sourceMappingURL=ColorSwatch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.js","names":[],"sources":["../../../../src/components/fields/color/ColorSwatch.tsx"],"sourcesContent":["import {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  DIMENSION_STYLES,\n  DimensionStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef } from 'react';\n\nimport { extractStyles } from '../../../utils/styles';\n\nimport { ColorValue, parseColor, toHex } from './color';\n\nconst STYLE_PROPS = [\n  ...BASE_STYLES,\n  ...OUTER_STYLES,\n  ...BLOCK_STYLES,\n  ...DIMENSION_STYLES,\n];\n\nconst SwatchElement = tasty({\n  qa: 'ColorSwatch',\n  styles: {\n    display: 'block',\n    width: '2.5x',\n    height: '2.5x',\n    radius: '1r',\n    fill: {\n      '': '(#color-picker, #clear)',\n      empty: '#clear',\n    },\n    shadow: 'inset 0 0 0 1bw #dark.15',\n    // A single diagonal stroke is the conventional \"no color\" swatch.\n    image: {\n      '': false,\n      empty:\n        'linear-gradient(to bottom right, #clear 46%, #danger 46%, #danger 54%, #clear 54%)',\n    },\n  },\n});\n\nexport interface CubeColorSwatchProps\n  extends BaseProps,\n    BaseStyleProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    DimensionStyleProps {\n  /** The color to show. Anything the color inputs accept; `null` shows the empty state. */\n  color?: string | ColorValue | null;\n  styles?: Styles;\n}\n\n/**\n * A square of color. Decorative on its own — pair it with the value as text, or\n * with a control that names it.\n *\n * The color travels as an inline custom property rather than through `styles`,\n * so the swatch keeps a single cached style rule however often it changes.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(\n  props: CubeColorSwatchProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { color, mods, qa } = props;\n  const styles = extractStyles(props, STYLE_PROPS);\n\n  const resolved =\n    typeof color === 'string' ? parseColor(color) : color ?? null;\n\n  return (\n    <SwatchElement\n      ref={ref}\n      qa={qa}\n      mods={{ empty: !resolved, ...mods }}\n      styles={styles}\n      style={resolved ? { '--color-picker-color': toHex(resolved) } : undefined}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AAmBA,MAAM,cAAc;CAClB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,MAAM,gBAAgB,MAAM;CAC1B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,OAAO;GACR;EACD,QAAQ;EAER,OAAO;GACL,IAAI;GACJ,OACE;GACH;EACF;CACF,CAAC;;;;;;;;AAoBF,MAAa,cAAc,WAAW,SAAS,YAC7C,OACA,KACA;CACA,MAAM,EAAE,OAAO,MAAM,OAAO;CAC5B,MAAM,SAAS,cAAc,OAAO,YAAY;CAEhD,MAAM,WACJ,OAAO,UAAU,WAAW,WAAW,MAAM,GAAG,SAAS;AAE3D,QACE,oBAAC;EACM;EACD;EACJ,MAAM;GAAE,OAAO,CAAC;GAAU,GAAG;GAAM;EAC3B;EACR,OAAO,WAAW,EAAE,wBAAwB,MAAM,SAAS,EAAE,GAAG;GAChE;EAEJ"}

package/dist/components/fields/{ColorPicker → color}/channels.d.ts

@@ -1,7 +1,7 @@
 
 import "./color.js";
 
-//#region src/components/fields/ColorPicker/channels.d.ts
+//#region src/components/fields/color/channels.d.ts
 /**
  * The three color concepts the popover can be driven by. They all edit the
  * same canonical value — only the axes the user manipulates differ.

package/dist/components/fields/{ColorPicker → color}/channels.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
 import { fromOkhst, fromOklch, fromRgb, isAchromatic, maxChroma, normalizeHue, toHex, toOkhst, toOklch, toRgb } from "./color.js";
 
-//#region src/components/fields/ColorPicker/channels.ts
+//#region src/components/fields/color/channels.ts
 /**
 * The three color concepts the popover can be driven by. They all edit the
 * same canonical value — only the axes the user manipulates differ.

package/dist/components/fields/color/channels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"channels.js","names":[],"sources":["../../../../src/components/fields/color/channels.ts"],"sourcesContent":["import {\n  ColorValue,\n  fromOkhst,\n  fromOklch,\n  fromRgb,\n  isAchromatic,\n  maxChroma,\n  normalizeHue,\n  toHex,\n  toOkhst,\n  toOklch,\n  toRgb,\n} from './color';\n\n/**\n * The three color concepts the popover can be driven by. They all edit the\n * same canonical value — only the axes the user manipulates differ.\n */\nexport const COLOR_SPACES = ['hst', 'lch', 'rgb'] as const;\n\nexport type ColorSpace = (typeof COLOR_SPACES)[number];\n\nexport const COLOR_SPACE_LABELS: Record<ColorSpace, string> = {\n  hst: 'HST',\n  lch: 'LCH',\n  rgb: 'RGB',\n};\n\nexport const COLOR_SPACE_HINTS: Record<ColorSpace, string> = {\n  hst: 'OKHST — hue, saturation, tone',\n  lch: 'OKLCH — lightness, chroma, hue',\n  rgb: 'sRGB — red, green, blue',\n};\n\nexport interface ColorChannel {\n  /** Single-letter axis name shown next to the slider. */\n  label: string;\n  /** Accessible name for the slider. */\n  title: string;\n  min: number;\n  step: number;\n  /** The upper bound. Chroma is gamut-bound, so it depends on the color. */\n  max: (color: ColorValue) => number;\n  value: (color: ColorValue) => number;\n  /** The color this channel produces when moved to `value`. */\n  apply: (color: ColorValue, value: number) => ColorValue;\n  /** Comma-separated gradient stops describing the channel's whole range. */\n  stops: (color: ColorValue) => string;\n  /** Human-readable rendering of the current channel value. */\n  display: (color: ColorValue) => string;\n}\n\nconst constant = (value: number) => () => value;\n\nfunction round(value: number, precision = 2): number {\n  const factor = 10 ** precision;\n\n  return Math.round(value * factor) / factor;\n}\n\n/**\n * `count` evenly spaced gradient stops, always as hex. Perceptual channels are\n * not linear in sRGB, so a two-stop gradient would misrepresent them —\n * sampling the real conversion keeps the track honest. Hex (rather than an\n * `okhsl()` string) because the gradient reaches the DOM as a raw custom\n * property, without passing through Tasty's color functions.\n */\nfunction ramp(count: number, at: (position: number) => ColorValue): string {\n  return Array.from({ length: count }, (_, index) =>\n    toHex(at(index / (count - 1))),\n  ).join(', ');\n}\n\n/**\n * The hue strip is drawn at full saturation and a fixed OKHSL lightness, which\n * keeps it perceptually even instead of spiking at yellow the way a CSS-HSL\n * rainbow does. Its own saturation and tone stay fixed: the strip is the same\n * in HST and in LCH, where `H` means the same thing.\n */\nconst HUE_STOPS = ramp(25, (position) => ({\n  h: position * 360,\n  s: 1,\n  l: 0.6,\n}));\n\nconst hueChannel: ColorChannel = {\n  label: 'H',\n  title: 'Hue',\n  min: 0,\n  // 360° is the same angle as 0°, so the last usable stop is 359 — the range\n  // `HueSlider` exposes as well.\n  max: constant(359),\n  step: 1,\n  value: (color) => round(color.h, 1),\n  apply: (color, value) => ({ ...color, h: normalizeHue(value) }),\n  stops: () => HUE_STOPS,\n  display: (color) => `${Math.round(color.h)}°`,\n};\n\nconst saturationChannel: ColorChannel = {\n  label: 'S',\n  title: 'Saturation',\n  min: 0,\n  max: constant(100),\n  step: 1,\n  value: (color) => round(color.s * 100, 1),\n  apply: (color, value) => ({ ...color, s: value / 100 }),\n  stops: (color) => ramp(7, (position) => ({ ...color, s: position })),\n  display: (color) => `${Math.round(color.s * 100)}%`,\n};\n\nconst toneChannel: ColorChannel = {\n  label: 'T',\n  title: 'Tone',\n  min: 0,\n  max: constant(100),\n  step: 1,\n  value: (color) => round(toOkhst(color).t * 100, 1),\n  apply: (color, value) =>\n    fromOkhst({ h: color.h, s: color.s, t: value / 100 }),\n  stops: (color) =>\n    ramp(7, (position) => fromOkhst({ h: color.h, s: color.s, t: position })),\n  display: (color) => `${Math.round(toOkhst(color).t * 100)}%`,\n};\n\nconst lightnessChannel: ColorChannel = {\n  label: 'L',\n  title: 'Lightness',\n  min: 0,\n  max: constant(100),\n  step: 1,\n  value: (color) => round(toOklch(color).l * 100, 1),\n  apply: (color, value) => {\n    const { c, h } = toOklch(color);\n\n    return fromOklch({ l: value / 100, c, h });\n  },\n  stops: (color) => {\n    const { c, h } = toOklch(color);\n\n    return ramp(7, (position) => fromOklch({ l: position, c, h }));\n  },\n  display: (color) => `${Math.round(toOklch(color).l * 100)}%`,\n};\n\nconst chromaChannel: ColorChannel = {\n  label: 'C',\n  title: 'Chroma',\n  min: 0,\n  // Chroma has no fixed ceiling: how far it can go depends on how far the sRGB\n  // gamut reaches at the current lightness and hue. Never zero, so the slider\n  // always has a range to divide by.\n  max: (color) => Math.max(round(maxChroma(color.h, color.l), 4), 0.001),\n  step: 0.001,\n  value: (color) => round(toOklch(color).c, 4),\n  apply: (color, value) => {\n    const { l, h } = toOklch(color);\n\n    return fromOklch({ l, c: value, h });\n  },\n  stops: (color) => {\n    const { l, h } = toOklch(color);\n    const limit = maxChroma(color.h, color.l);\n\n    return ramp(7, (position) => fromOklch({ l, c: position * limit, h }));\n  },\n  display: (color) => toOklch(color).c.toFixed(3),\n};\n\nfunction rgbChannel(\n  key: 'r' | 'g' | 'b',\n  label: string,\n  title: string,\n): ColorChannel {\n  const at = (color: ColorValue, value: number) =>\n    fromRgb({ ...toRgb(color), [key]: value });\n\n  return {\n    label,\n    title,\n    min: 0,\n    max: constant(255),\n    step: 1,\n    value: (color) => toRgb(color)[key],\n    apply: (color, value) => {\n      const next = at(color, value);\n\n      // A gray has no hue of its own, and the conversion invents one. Keeping\n      // the authored hue means switching back to HST or LCH resumes where the\n      // user left off.\n      return isAchromatic(next) ? { ...next, h: color.h } : next;\n    },\n    // An sRGB channel is linear in the space CSS interpolates gradients in, so\n    // the two ends describe the whole ramp exactly.\n    stops: (color) => ramp(2, (position) => at(color, position * 255)),\n    display: (color) => `${toRgb(color)[key]}`,\n  };\n}\n\nexport const CHANNELS: Record<ColorSpace, ColorChannel[]> = {\n  hst: [hueChannel, saturationChannel, toneChannel],\n  lch: [lightnessChannel, chromaChannel, hueChannel],\n  rgb: [\n    rgbChannel('r', 'R', 'Red'),\n    rgbChannel('g', 'G', 'Green'),\n    rgbChannel('b', 'B', 'Blue'),\n  ],\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,21 @@
+
+import { OkhslColor } from "@tenphi/glaze";
+
+//#region src/components/fields/color/color.d.ts
+/**
+ * Every color format the picker can read and write.
+ *
+ * `okhsl` and `okhst` are Glaze / Tasty spaces rather than native CSS ones,
+ * but Tasty parses both, so the produced strings are usable as style values.
+ */
+declare const COLOR_FORMATS: readonly ["hex", "rgb", "hsl", "okhsl", "okhst", "oklch"];
+type ColorFormat = (typeof COLOR_FORMATS)[number];
+/**
+ * OKHSL is the canonical space of the picker: it is Glaze's authoring space,
+ * every channel is bounded, and — unlike OKLCh — every value inside those
+ * bounds is inside the sRGB gamut, so no state can be unrepresentable.
+ */
+type ColorValue = OkhslColor;
+//#endregion
+export { COLOR_FORMATS, ColorFormat, ColorValue };
+//# sourceMappingURL=color.d.ts.map

package/dist/components/fields/{ColorPicker → color}/color.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
 import { contrastRatioFromLuminance, formatHsl, formatOkhsl, formatOkhst, formatOklch, formatRgb, hslToSrgb, okhslToLinearSrgb, okhslToOkhst, okhslToOklch, okhslToSrgb, okhstToOkhsl, oklabToOkhsl, parseHexAlpha, relativeLuminanceFromLinearRgb, srgbToHex, srgbToOkhsl } from "@tenphi/glaze";
 
-//#region src/components/fields/ColorPicker/color.ts
+//#region src/components/fields/color/color.ts
 /**
 * Every color format the picker can read and write.
 *

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

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":[],"sources":["../../../../src/components/fields/color/color.ts"],"sourcesContent":["import {\n  contrastRatioFromLuminance,\n  formatHsl,\n  formatOkhsl,\n  formatOkhst,\n  formatOklch,\n  formatRgb,\n  hslToSrgb,\n  okhslToLinearSrgb,\n  okhslToOkhst,\n  okhslToOklch,\n  okhslToSrgb,\n  okhstToOkhsl,\n  oklabToOkhsl,\n  parseHexAlpha,\n  relativeLuminanceFromLinearRgb,\n  srgbToHex,\n  srgbToOkhsl,\n} from '@tenphi/glaze';\n\nimport type {\n  OkhslColor,\n  OkhstColor,\n  OklchColor,\n  RgbColor,\n} from '@tenphi/glaze';\n\nexport type { OkhslColor, OkhstColor, OklchColor, RgbColor };\n\n/**\n * Every color format the picker can read and write.\n *\n * `okhsl` and `okhst` are Glaze / Tasty spaces rather than native CSS ones,\n * but Tasty parses both, so the produced strings are usable as style values.\n */\nexport const COLOR_FORMATS = [\n  'hex',\n  'rgb',\n  'hsl',\n  'okhsl',\n  'okhst',\n  'oklch',\n] as const;\n\nexport type ColorFormat = (typeof COLOR_FORMATS)[number];\n\n/**\n * OKHSL is the canonical space of the picker: it is Glaze's authoring space,\n * every channel is bounded, and — unlike OKLCh — every value inside those\n * bounds is inside the sRGB gamut, so no state can be unrepresentable.\n */\nexport type ColorValue = OkhslColor;\n\nconst FUNCTION_RE = /^([a-z]+)\\(([^()]+)\\)$/;\n/**\n * A number with an optional `%` or `deg` unit.\n *\n * The integer and fraction parts are deliberately written so that no two\n * quantifiers can consume the same digit — `\\d+(?:\\.\\d*)?` rather than\n * `\\d+\\.?\\d*`, whose `\\d+` and `\\d*` can split a digit run n ways and make\n * rejecting a long one quadratic. This runs on whatever the user types.\n */\nconst NUMBER_RE = /^[+-]?(?:\\d+(?:\\.\\d*)?|\\.\\d+)(?:e[+-]?\\d+)?(?:%|deg)?$/;\n\n/**\n * Saturation below this rounds to `0%` in every output notation, so the color\n * is achromatic for display purposes even when the conversion left a residue.\n */\nconst ACHROMATIC_SATURATION = 5e-5;\n\nfunction clamp(value: number, min: number, max: number): number {\n  return value < min ? min : value > max ? max : value;\n}\n\nexport function normalizeHue(hue: number): number {\n  if (!Number.isFinite(hue)) return 0;\n\n  return ((hue % 360) + 360) % 360;\n}\n\n/**\n * The color carries no meaningful hue: every conversion out of it invents an\n * angle, so callers that need one should keep the hue they already had.\n */\nexport function isAchromatic(color: ColorValue): boolean {\n  return color.s < ACHROMATIC_SATURATION;\n}\n\n/** Both channel objects describe the same color, within display precision. */\nexport function isSameColor(a?: ColorValue | null, b?: ColorValue | null) {\n  if (!a || !b) return a === b;\n\n  return (\n    Math.abs(a.h - b.h) < 1e-6 &&\n    Math.abs(a.s - b.s) < 1e-6 &&\n    Math.abs(a.l - b.l) < 1e-6\n  );\n}\n\n/**\n * Split a color-function body into its numeric arguments, dropping the alpha\n * component. Both the modern space-separated and the legacy comma-separated\n * syntaxes are accepted.\n *\n * Each argument keeps its unit so the caller can tell `50%` from `50`.\n */\nfunction splitArguments(body: string): string[] | null {\n  const [values, ...rest] = body.split('/');\n\n  // More than one slash is never valid syntax.\n  if (rest.length > 1) return null;\n\n  const args = values\n    .trim()\n    .split(values.includes(',') ? ',' : /\\s+/)\n    .map((part) => part.trim())\n    .filter(Boolean);\n\n  // Legacy `rgba(r, g, b, a)` / `hsla(h, s, l, a)` carry alpha as a fourth\n  // argument. Alpha is not part of the value, so it is dropped either way.\n  if (args.length === 4) args.pop();\n\n  return args.every((arg) => NUMBER_RE.test(arg)) ? args : null;\n}\n\n/** Parse an argument that may carry a `%` unit. `scale` is the 100% value. */\nfunction scalar(arg: string, scale: number): number {\n  return arg.endsWith('%') ? (parseFloat(arg) / 100) * scale : parseFloat(arg);\n}\n\nfunction hueArgument(arg: string): number {\n  // A percentage is not a valid hue angle.\n  return arg.endsWith('%') ? NaN : normalizeHue(parseFloat(arg));\n}\n\nexport function fromRgb(color: RgbColor): ColorValue {\n  const [h, s, l] = srgbToOkhsl([\n    clamp(color.r, 0, 255) / 255,\n    clamp(color.g, 0, 255) / 255,\n    clamp(color.b, 0, 255) / 255,\n  ]);\n\n  return { h: normalizeHue(h), s: clamp(s, 0, 1), l: clamp(l, 0, 1) };\n}\n\nexport function toRgb(color: ColorValue): RgbColor {\n  const [r, g, b] = okhslToSrgb(color.h, color.s, color.l);\n\n  return {\n    r: Math.round(clamp(r, 0, 1) * 255),\n    g: Math.round(clamp(g, 0, 1) * 255),\n    b: Math.round(clamp(b, 0, 1) * 255),\n  };\n}\n\nexport function fromOkhst(color: OkhstColor): ColorValue {\n  const { h, s, l } = okhstToOkhsl({\n    h: normalizeHue(color.h),\n    s: clamp(color.s, 0, 1),\n    t: clamp(color.t, 0, 1),\n  });\n\n  return { h: normalizeHue(h), s: clamp(s, 0, 1), l: clamp(l, 0, 1) };\n}\n\nexport function toOkhst(color: ColorValue): OkhstColor {\n  const { t } = okhslToOkhst(color);\n\n  return { h: color.h, s: color.s, t: clamp(t, 0, 1) };\n}\n\n/**\n * The largest OKLCh chroma that stays inside the sRGB gamut for the given hue\n * and OKHSL lightness — that is exactly what OKHSL saturation `1` means.\n */\nexport function maxChroma(hue: number, lightness: number): number {\n  return okhslToOklch(normalizeHue(hue), 1, clamp(lightness, 0, 1))[1];\n}\n\nexport function toOklch(color: ColorValue): OklchColor {\n  const [l, c, h] = okhslToOklch(color.h, color.s, color.l);\n\n  return { l, c, h: normalizeHue(h) };\n}\n\n/**\n * OKLCh addresses colors outside the sRGB gamut, so chroma is clipped to the\n * gamut boundary at the requested lightness before it is stored. Hue is taken\n * from the input rather than from the conversion, which loses it at zero\n * chroma.\n */\nexport function fromOklch(color: OklchColor): ColorValue {\n  const h = normalizeHue(color.h);\n  const c = Math.max(color.c, 0);\n  const radians = (h * Math.PI) / 180;\n  const [, s, l] = oklabToOkhsl([\n    clamp(color.l, 0, 1),\n    c * Math.cos(radians),\n    c * Math.sin(radians),\n  ]);\n  const limit = maxChroma(h, l);\n\n  return {\n    h,\n    s: limit > 0 ? (c >= limit ? 1 : clamp(s, 0, 1)) : 0,\n    l: clamp(l, 0, 1),\n  };\n}\n\nexport function toHex(color: ColorValue): string {\n  return srgbToHex(okhslToSrgb(color.h, color.s, color.l));\n}\n\n/**\n * Read any supported color notation into the canonical space. Returns `null`\n * for anything that is not a real color — that is what lets the picker reject\n * partial input instead of guessing.\n *\n * Named CSS colors (`red`, `rebeccapurple`) are intentionally not supported,\n * matching `glaze.color()`.\n */\nexport function parseColor(input: string): ColorValue | null {\n  const text = input.trim().toLowerCase();\n\n  if (!text) return null;\n\n  if (text.startsWith('#')) {\n    const parsed = parseHexAlpha(text);\n\n    return parsed ? fromRgb(rgbFromSrgb(parsed.rgb)) : null;\n  }\n\n  const match = FUNCTION_RE.exec(text);\n\n  if (!match) return null;\n\n  const [, name, body] = match;\n  const args = splitArguments(body);\n\n  if (!args || args.length !== 3) return null;\n\n  switch (name) {\n    case 'rgb':\n    case 'rgba': {\n      const [r, g, b] = args.map((arg) => scalar(arg, 255));\n\n      return anyNaN(r, g, b) ? null : fromRgb({ r, g, b });\n    }\n    case 'hsl':\n    case 'hsla': {\n      const h = hueArgument(args[0]);\n      const s = scalar(args[1], 100) / 100;\n      const l = scalar(args[2], 100) / 100;\n\n      if (anyNaN(h, s, l)) return null;\n\n      return fromRgb(rgbFromSrgb(hslToSrgb(h, clamp(s, 0, 1), clamp(l, 0, 1))));\n    }\n    case 'okhsl': {\n      const h = hueArgument(args[0]);\n      const s = scalar(args[1], 100) / 100;\n      const l = scalar(args[2], 100) / 100;\n\n      if (anyNaN(h, s, l)) return null;\n\n      return { h, s: clamp(s, 0, 1), l: clamp(l, 0, 1) };\n    }\n    case 'okhst': {\n      const h = hueArgument(args[0]);\n      const s = scalar(args[1], 100) / 100;\n      const t = scalar(args[2], 100) / 100;\n\n      if (anyNaN(h, s, t)) return null;\n\n      return fromOkhst({ h, s, t });\n    }\n    case 'oklch': {\n      // In `oklch()` a percentage means 1 for lightness and 0.4 for chroma.\n      const l = scalar(args[0], 1);\n      const c = scalar(args[1], 0.4);\n      const h = hueArgument(args[2]);\n\n      return anyNaN(l, c, h) ? null : fromOklch({ l, c, h });\n    }\n    default:\n      return null;\n  }\n}\n\nfunction anyNaN(...values: number[]): boolean {\n  return values.some((value) => !Number.isFinite(value));\n}\n\nfunction rgbFromSrgb([r, g, b]: [number, number, number]): RgbColor {\n  return { r: r * 255, g: g * 255, b: b * 255 };\n}\n\n/** Serialize the canonical color into one of the supported notations. */\nexport function formatColor(color: ColorValue, format: ColorFormat): string {\n  // An achromatic color has no meaningful hue, and the conversions leave\n  // whatever angle the source happened to carry. Zero reads better.\n  const gray = isAchromatic(color);\n  const hue = gray ? 0 : color.h;\n  const saturation = color.s * 100;\n  const lightness = color.l * 100;\n\n  switch (format) {\n    case 'rgb':\n      return formatRgb(hue, saturation, lightness);\n    case 'hsl': {\n      const text = formatHsl(hue, saturation, lightness);\n\n      // CSS HSL derives its hue from the sRGB channels, which is undefined\n      // when they are equal — Glaze emits whatever the formula produces. Every\n      // other notation carries the hue through, so only HSL needs this.\n      return gray ? text.replace(/\\(-?[\\d.]+/, '(0') : text;\n    }\n    case 'okhsl':\n      return formatOkhsl(hue, saturation, lightness);\n    case 'okhst':\n      return formatOkhst(hue, saturation, toOkhst(color).t * 100);\n    case 'oklch':\n      return formatOklch(hue, saturation, lightness);\n    default:\n      return toHex(color);\n  }\n}\n\n/**\n * Which notation a string is written in, or `null` when it is not a color.\n * Used to keep the user's own notation while still normalizing the value.\n */\nexport function detectFormat(input: string): ColorFormat | null {\n  const text = input.trim().toLowerCase();\n\n  if (!parseColor(text)) return null;\n\n  if (text.startsWith('#')) return 'hex';\n\n  const name = FUNCTION_RE.exec(text)?.[1];\n\n  switch (name) {\n    case 'rgb':\n    case 'rgba':\n      return 'rgb';\n    case 'hsl':\n    case 'hsla':\n      return 'hsl';\n    case 'okhsl':\n      return 'okhsl';\n    case 'okhst':\n      return 'okhst';\n    case 'oklch':\n      return 'oklch';\n    default:\n      return null;\n  }\n}\n\n/**\n * Black or white — whichever the WCAG contrast ratio favors on the given\n * color. Keeps the popover preview label readable at any lightness. Returns a\n * literal hex rather than a token, because the answer is measured against this\n * exact fill and must not adapt with the color scheme.\n */\nexport function getContrastingColor(color: ColorValue): '#000000' | '#ffffff' {\n  const luminance = relativeLuminanceFromLinearRgb(\n    okhslToLinearSrgb(color.h, color.s, color.l),\n  );\n\n  return contrastRatioFromLuminance(luminance, 0) >=\n    contrastRatioFromLuminance(1, luminance)\n    ? '#000000'\n    : '#ffffff';\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
+import { createContext, useContext } from "react";
+
+//#region src/components/fields/color/context.ts
+/**
+* Marks the subtree inside a color popover.
+*
+* A `ColorSwatchGroup` offers a custom-color escape hatch, and that escape
+* hatch is a `ColorPicker` — which opens a popover that may itself contain a
+* swatch group. Reading this flag lets the group drop the escape hatch when it
+* is already inside one, so the recursion cannot be written even by accident.
+*/
+const ColorPopoverContext = createContext(false);
+function useIsInsideColorPopover() {
+	return useContext(ColorPopoverContext);
+}
+
+//#endregion
+export { ColorPopoverContext, useIsInsideColorPopover };
+//# sourceMappingURL=context.js.map

package/dist/components/fields/color/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/components/fields/color/context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\n/**\n * Marks the subtree inside a color popover.\n *\n * A `ColorSwatchGroup` offers a custom-color escape hatch, and that escape\n * hatch is a `ColorPicker` — which opens a popover that may itself contain a\n * swatch group. Reading this flag lets the group drop the escape hatch when it\n * is already inside one, so the recursion cannot be written even by accident.\n */\nexport const ColorPopoverContext = createContext(false);\n\nexport function useIsInsideColorPopover(): boolean {\n  return useContext(ColorPopoverContext);\n}\n"],"mappings":";;;;;;;;;;;;AAUA,MAAa,sBAAsB,cAAc,MAAM;AAEvD,SAAgB,0BAAmC;AACjD,QAAO,WAAW,oBAAoB"}

package/dist/components/fields/color/index.d.ts

@@ -0,0 +1,4 @@
+
+import { COLOR_FORMATS, ColorFormat } from "./color.js";
+import { ColorSwatch, CubeColorSwatchProps } from "./ColorSwatch.js";
+import { COLOR_SPACES, ColorSpace } from "./channels.js";

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

@@ -18,9 +18,15 @@ import "./CommandTextArea/index.js";
 import { CubeCheckboxGroupProps, _CheckboxGroup } from "./Checkbox/CheckboxGroup.js";
 import { AriaCheckboxProps, CubeCheckboxProps, __Checkbox, useCheckbox } from "./Checkbox/Checkbox.js";
 import "./Checkbox/index.js";
-import { COLOR_FORMATS, ColorFormat } from "./ColorPicker/color.js";
-import { COLOR_SPACES, ColorSpace } from "./ColorPicker/channels.js";
-import { ColorPicker, ColorPickerFormatMode, CubeColorPickerProps } from "./ColorPicker/ColorPicker.js";
+import { COLOR_FORMATS, ColorFormat } from "./color/color.js";
+import { ColorSwatch, CubeColorSwatchProps } from "./color/ColorSwatch.js";
+import { COLOR_SPACES, ColorSpace } from "./color/channels.js";
+import "./color/index.js";
+import { ColorInput, ColorInputFormatMode, CubeColorInputProps } from "./ColorInput/ColorInput.js";
+import "./ColorInput/index.js";
+import { ColorSwatchGroup, CubeColorSwatchGroupProps, CubeColorSwatchItem } from "./ColorSwatchGroup/ColorSwatchGroup.js";
+import "./ColorSwatchGroup/index.js";
+import { ColorPicker, CubeColorPickerProps } from "./ColorPicker/ColorPicker.js";
 import "./ColorPicker/index.js";
 import { DateFieldBase, Granularity } from "./DatePicker/types.js";
 import { CubeTimeInputProps, _TimeInput } from "./DatePicker/TimeInput.js";

package/dist/components/form/FieldWrapper/FieldWrapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/form/Form/Field.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { warn } from "../../../utils/warnings.js";
 import { useValidationProps } from "../validation/use-validation-props.js";

package/dist/components/form/Form/Form.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { Provider, useProviderProps } from "../../../provider.js";

package/dist/components/form/Form/ResetButton/ResetButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e76eb3e | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-01fea9d | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useProviderProps } from "../../../../provider.js";