@cube-dev/ui-kit 0.199.0 → 0.199.2

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

@@ -1 +1 @@
-{"version":3,"file":"TextInputBase.js","names":["useObjectRef","createFocusableRef","BASE_STYLES","BaseProps","BaseStyleProps","BLOCK_STYLES","BlockStyleProps","COLOR_STYLES","ColorStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","FocusEventHandler","forwardRef","MouseEvent","ReactElement","ReactNode","RefObject","useImperativeHandle","useMemo","AriaNumberFieldProps","AriaTextFieldProps","useHover","FieldBaseProps","TextFieldKeyboardProps","mergeProps","useCombinedRefs","useFocus","extractStyles","getValidationMods","hasValidationIndicator","ValidationIndicator","wrapWithField","Props","ADD_STYLES","$","display","placeContent","placeItems","gridRows","flow","gap","cursor","opacity","disabled","INPUT_WRAPPER_STYLES","position","gridColumns","prefix","suffix","fill","border","valid","invalid","focused","preset","radius","color","zIndex","boxSizing","transition","backgroundClip","height","multiline","$size","Prefix","Suffix","State","InputIcon","width","fontSize","ValidationIcon","InputWrapperElement","qa","styles","PROP_STYLES","DEFAULT_INPUT_STYLES","recipe","placeSelf","padding","textAlign","flexGrow","margin","resize","userSelect","Placeholder","InputElement","INTERACTIVE_ELEMENTS","focusInputOnBoxPress","event","HTMLElement","input","HTMLInputElement","HTMLTextAreaElement","button","defaultPrevented","box","currentTarget","target","Element","contains","interactive","closest","preventDefault","focus","CubeTextInputBaseProps","Omit","validate","onFocus","onBlur","icon","suffixPosition","actions","multiLine","autoFocus","inputProps","wrapperProps","inputRef","wrapperRef","HTMLDivElement","isLoading","loadingIndicator","inputStyles","rows","size","autoComplete","autocomplete","CubeBufferedValueProps","isBuffered","_TextInputBase","props","ref","mods","isInvalid","isValid","isDisabled","value","maxLength","minLength","form","otherProps","type","ElementType","isFocused","focusProps","hoverProps","isHovered","domRef","select","current","getInputElement","showValidationIndicator","placeholder","modifiers","loadable","hovered","resolvedAutoComplete","resolvedAutoFocus","hasTextSecurity","textSecurityStyles","length","fontFamily","textField","onMouseDown","undefined","TextInputBase","useFocus","mergeProps"],"sources":["../../../../src/components/fields/TextInput/TextInputBase.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport { createFocusableRef } from '@react-spectrum/utils';\nimport {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  COLOR_STYLES,\n  ColorStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  FocusEventHandler,\n  forwardRef,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useImperativeHandle,\n  useMemo,\n} from 'react';\nimport { AriaNumberFieldProps, AriaTextFieldProps, useHover } from 'react-aria';\n\nimport { FieldBaseProps, TextFieldKeyboardProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport {\n  getValidationMods,\n  hasValidationIndicator,\n  ValidationIndicator,\n  wrapWithField,\n} from '../../form';\n\nimport type { Props } from '../../../props';\n\nconst ADD_STYLES = {\n  $: '>',\n  display: 'grid',\n  placeContent: 'stretch',\n  placeItems: 'center',\n  gridRows: '1sf',\n  flow: 'column',\n  gap: 0,\n  cursor: 'inherit',\n  opacity: {\n    '': 1,\n    disabled: '$disabled-opacity',\n  },\n};\n\nexport const INPUT_WRAPPER_STYLES: Styles = {\n  display: 'grid',\n  flow: 'row',\n  position: 'relative',\n  gridColumns: {\n    '': '1sf',\n    prefix: 'max-content 1sf',\n    suffix: '1sf max-content',\n    'prefix & suffix': 'max-content 1sf max-content',\n  },\n  gridRows: '1sf',\n  placeItems: 'stretch',\n  fill: {\n    '': '#surface',\n    disabled: '#disabled-surface',\n  },\n  border: {\n    '': true,\n    valid: '#success-text.50',\n    invalid: '#danger-text.50',\n    focused: '#primary-text',\n    'valid & focused': '#success-text',\n    'invalid & focused': '#danger-text',\n    disabled: true,\n  },\n  preset: 't3',\n  radius: true,\n  cursor: 'text',\n  color: {\n    '': '#dark-02',\n    focused: '#dark-02',\n    invalid: '#danger-text',\n    disabled: '#dark.30',\n  },\n  zIndex: {\n    '': 'initial',\n    focused: 1,\n  },\n  boxSizing: 'border-box',\n  transition: 'theme',\n  backgroundClip: 'content-box',\n  height: {\n    '': '$size $size',\n    multiline: 'min $size',\n  },\n\n  $size: {\n    '': '$size-md',\n    'size=small': '$size-sm',\n    'size=medium': '$size-md',\n    'size=large': '$size-lg',\n  },\n\n  Prefix: ADD_STYLES,\n\n  Suffix: ADD_STYLES,\n\n  State: {\n    $: '> Suffix >',\n    display: 'flex',\n  },\n\n  InputIcon: {\n    display: 'grid',\n    placeItems: 'center',\n    width: 'min $size-sm',\n    color: 'inherit',\n    fontSize: '$icon-size',\n  },\n\n  ValidationIcon: {\n    $: '> Suffix > State >',\n    display: 'grid',\n    placeItems: 'center',\n    width: {\n      '': 'min $size-sm',\n      suffix: 'min $size-xs',\n    },\n    fontSize: '$icon-size',\n  },\n};\n\nconst InputWrapperElement = tasty({\n  qa: 'InputWrapper',\n  styles: INPUT_WRAPPER_STYLES,\n});\n\nconst PROP_STYLES = [\n  ...BASE_STYLES,\n  ...OUTER_STYLES,\n  ...BLOCK_STYLES,\n  ...COLOR_STYLES,\n];\n\nexport const DEFAULT_INPUT_STYLES: Styles = {\n  recipe: 'reset input / input-autofill',\n  placeSelf: 'stretch',\n  width: 'initial 100% 100%',\n  transition: 'theme',\n  radius: true,\n  padding: '$vertical-padding $right-padding $vertical-padding $left-padding',\n  textAlign: 'left',\n  preset: 't3',\n  flexGrow: 1,\n  margin: {\n    '': 0,\n    multiline: '((($size-md - 1lh) / 2) - 1bw) 0',\n    'multiline & size=small': '((($size-sm - 1lh) / 2) - 1bw) 0',\n    'multiline & size=large': '((($size-lg - 1lh) / 2) - 1bw) 0',\n  },\n  resize: 'none',\n  userSelect: 'auto',\n\n  Placeholder: {\n    $: '&::placeholder',\n    recipe: 'input-placeholder',\n  },\n  '&::-webkit-search-cancel-button': {\n    recipe: 'input-search-cancel-button',\n  },\n\n  '$vertical-padding': 0,\n  '$left-padding': {\n    '': '(1x - 1bw)',\n    'size=small': '(1x - 1bw)',\n    'size=large': '(1.25x - 1bw)',\n    'size=xlarge': '(1.5x - 1bw)',\n    prefix: '0',\n  },\n  '$right-padding': {\n    '': '(1x - 1bw)',\n    'size=small': '(1x - 1bw)',\n    'size=large': '(1.25x - 1bw)',\n    'size=xlarge': '(1.5x - 1bw)',\n    suffix: '0',\n  },\n};\n\nconst InputElement = tasty({ qa: 'Input', styles: DEFAULT_INPUT_STYLES });\n\nconst INTERACTIVE_ELEMENTS =\n  'a[href], button, input, select, textarea, [tabindex], [contenteditable]';\n\n/**\n * A press inside the field box but outside the input — the prefix or suffix area, an icon, a\n * textarea's margins — focuses the input, as a press anywhere in a native field does. Presses on\n * the input itself and on interactive children, such as a clear button or the steppers, stay\n * theirs.\n */\nfunction focusInputOnBoxPress(\n  event: MouseEvent<HTMLElement>,\n  input: HTMLInputElement | HTMLTextAreaElement | null | undefined,\n) {\n  if (event.button !== 0 || event.defaultPrevented) return;\n  if (!input || input.disabled) return;\n\n  const box = event.currentTarget;\n  const target = event.target as Element;\n\n  // React bubbles presses from a portal (a popover opened from a field action)\n  // through the box; those belong to the portal.\n  if (!box.contains(target)) return;\n\n  const interactive = target.closest(INTERACTIVE_ELEMENTS);\n\n  if (interactive && box.contains(interactive)) return;\n\n  // The default action would move focus to the press target first, blurring the input.\n  event.preventDefault();\n  input.focus();\n}\n\nexport interface CubeTextInputBaseProps\n  extends\n    BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    BaseStyleProps,\n    ColorStyleProps,\n    Omit<\n      AriaTextFieldProps<HTMLInputElement | HTMLTextAreaElement>,\n      | 'validate'\n      | 'form'\n      | 'name'\n      | 'errorMessage'\n      | 'onKeyDown'\n      | 'onKeyUp'\n      | 'onFocus'\n      | 'onBlur'\n    >,\n    TextFieldKeyboardProps,\n    FieldBaseProps {\n  validate?: AriaTextFieldProps['validate'] | AriaNumberFieldProps['validate'];\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /** Left input icon */\n  icon?: ReactElement | null;\n  /** Input decoration before the main input */\n  prefix?: ReactNode;\n  /** Input decoration after the main input */\n  suffix?: ReactNode;\n  /** Suffix position goes before or after the validation and loading statuses */\n  suffixPosition?: 'before' | 'after';\n  /**\n   * Controls placed last in the suffix, after the validation and loading\n   * statuses and after `suffix` whatever its position, such as a popover\n   * trigger.\n   */\n  actions?: ReactNode;\n  /** Whether the input is multiline */\n  multiLine?: boolean;\n  /** Whether the input should have autofocus */\n  autoFocus?: boolean;\n  /**\n   * Direct input props. The explicit props above (`isDisabled`, `maxLength`, `minLength`,\n   * `autoFocus`, `rows`, `autoComplete`) win over the same attributes here when they are set; an\n   * unset one leaves the value given here in place.\n   */\n  inputProps?: Props;\n  /** Direct input wrapper props */\n  wrapperProps?: Props;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;\n  /** The wrapper ref */\n  wrapperRef?: RefObject<HTMLDivElement | null>;\n  /** Whether the input has the loading status */\n  isLoading?: boolean;\n  /** Rendered in place of the default loading icon while `isLoading` is set */\n  loadingIndicator?: ReactNode;\n  /** Style map for the input */\n  inputStyles?: Styles;\n  /** The number of rows for the input. Only applies to textarea. */\n  rows?: number;\n  /** The resize CSS property sets whether an element is resizable, and if so, in which directions. */\n  resize?: Styles['resize'];\n  /** The size of the input */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  /**\n   * What kind of autofill the browser may offer for the input, as the HTML `autocomplete` token\n   * (`email`, `current-password`, `off`, …). See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).\n   */\n  autoComplete?: string;\n  /**\n   * @deprecated Use `autoComplete` instead. Kept as an alias so existing callers keep working;\n   * `autoComplete` wins when both are set.\n   */\n  autocomplete?: string;\n}\n\n/**\n * Mixed into the fields that actually buffer their value — `TextInput`, `TextArea`,\n * `PasswordInput`, `SearchInput` — rather than declared on `CubeTextInputBaseProps`. Every field\n * built on that base would otherwise inherit the prop, including `NumberInput` and\n * `CommandTextArea`, which keep their own text and ignore it: a public API that accepts a flag and\n * does nothing with it.\n */\nexport interface CubeBufferedValueProps {\n  /**\n   * Whether the typed text is held locally until the controlled `value` catches up. On by default,\n   * which is what keeps the caret in place when the value round-trips through a store that\n   * re-renders a pass late. Set to `false` for a caller that must see the value snap back to its\n   * own `value` prop the instant it declines a keystroke. See `useBufferedValue`.\n   */\n  isBuffered?: boolean;\n}\n\n/**\n * The presentational base for text-like inputs. It renders the input chrome and the field wrapper, but\n * never wires form state — that is the job of the component rendering it (`TextInput`, `TextArea`,\n * `PasswordInput`, `NumberInput`, `SearchInput`, `CommandTextArea`).\n */\nfunction _TextInputBase(props: CubeTextInputBaseProps, ref) {\n  let {\n    qa,\n    mods,\n    isInvalid,\n    isValid,\n    prefix,\n    isDisabled,\n    multiLine,\n    autoFocus,\n    inputProps,\n    wrapperProps,\n    inputRef,\n    isLoading,\n    loadingIndicator,\n    value,\n    inputStyles = {},\n    suffix,\n    suffixPosition = 'before',\n    actions,\n    wrapperRef,\n    rows,\n    size = 'medium',\n    autoComplete,\n    autocomplete,\n    icon,\n    maxLength,\n    minLength,\n    form,\n    resize,\n    ...otherProps\n  } = props;\n\n  let styles = extractStyles(otherProps, PROP_STYLES);\n  let type = otherProps.type;\n\n  if (resize) {\n    inputStyles = { ...inputStyles, resize };\n  }\n\n  let ElementType: 'textarea' | 'input' = multiLine ? 'textarea' : 'input';\n  let { isFocused, focusProps } = useFocus();\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n  // The input box, with or without the field chrome, so the field's ref never\n  // resolves to `null`; `wrapperRef` reaches the same element.\n  let domRef = useObjectRef(wrapperRef);\n\n  inputRef = useCombinedRefs(inputRef);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef?.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef?.current;\n    },\n  }));\n\n  const showValidationIndicator = hasValidationIndicator({\n    isInvalid,\n    isValid,\n    isLoading,\n  });\n\n  // Fix safari bug: https://github.com/philipwalton/flexbugs/issues/270\n  if (!inputProps?.placeholder) {\n    if (!inputProps) {\n      inputProps = {};\n    }\n\n    inputProps.placeholder = ' ';\n  }\n\n  if (icon) {\n    icon = <div data-element=\"InputIcon\">{icon}</div>;\n\n    if (prefix) {\n      prefix = (\n        <>\n          {icon}\n          {prefix}\n        </>\n      );\n    } else {\n      prefix = icon;\n    }\n  }\n\n  const modifiers = useMemo(\n    () => ({\n      ...getValidationMods({ isInvalid, isValid }),\n      loadable: !!loadingIndicator,\n      focused: isFocused,\n      hovered: isHovered,\n      disabled: isDisabled,\n      multiline: multiLine,\n      prefix: !!prefix,\n      suffix: showValidationIndicator || !!suffix || !!actions,\n      ...mods,\n    }),\n    [\n      mods,\n      isInvalid,\n      isValid,\n      showValidationIndicator,\n      loadingIndicator,\n      isFocused,\n      isDisabled,\n      isHovered,\n      multiLine,\n      prefix,\n      suffix,\n      actions,\n    ],\n  );\n\n  // The explicit props win when they are set; an unset one falls back to the merged `inputProps`\n  // instead of overwriting it with `undefined`. For `autoComplete` that keeps both a caller's\n  // `inputProps={{ autoComplete }}` and `useNumberField`'s own `off`. `autocomplete` is the\n  // deprecated alias.\n  const resolvedAutoComplete =\n    autoComplete ?? autocomplete ?? inputProps.autoComplete;\n  const resolvedAutoFocus = autoFocus ?? inputProps.autoFocus;\n\n  const hasTextSecurity = multiLine && type === 'password';\n  const textSecurityStyles =\n    hasTextSecurity && inputProps.value?.length\n      ? {\n          fontFamily: 'text-security-disc',\n        }\n      : {};\n\n  const textField = (\n    <InputWrapperElement\n      ref={domRef}\n      mods={modifiers}\n      data-size={size}\n      styles={styles}\n      {...mergeProps(wrapperProps, {\n        onMouseDown: (event: MouseEvent<HTMLElement>) =>\n          focusInputOnBoxPress(event, inputRef?.current),\n      })}\n    >\n      {prefix ? <div data-element=\"Prefix\">{prefix}</div> : null}\n      <InputElement\n        qa={qa || 'Input'}\n        as={ElementType}\n        data-input-type=\"textinput\"\n        {...mergeProps(inputProps, focusProps, hoverProps)}\n        ref={inputRef}\n        rows={multiLine ? (rows ?? inputProps.rows ?? 1) : inputProps.rows}\n        mods={modifiers}\n        style={textSecurityStyles}\n        {...(resolvedAutoFocus ? { 'data-autofocus': '' } : undefined)}\n        autoFocus={resolvedAutoFocus}\n        data-size={size}\n        autoComplete={resolvedAutoComplete}\n        styles={inputStyles}\n        disabled={!!(isDisabled ?? inputProps.disabled)}\n        maxLength={maxLength ?? inputProps.maxLength}\n        minLength={minLength ?? inputProps.minLength}\n      />\n      {showValidationIndicator || suffix || actions ? (\n        <div data-element=\"Suffix\">\n          {suffixPosition === 'before' ? suffix : null}\n          {isLoading && loadingIndicator ? (\n            <div data-element=\"State\">{loadingIndicator}</div>\n          ) : (\n            <ValidationIndicator\n              isInvalid={isInvalid}\n              isValid={isValid}\n              isLoading={isLoading}\n            />\n          )}\n          {suffixPosition === 'after' ? suffix : null}\n          {actions}\n        </div>\n      ) : null}\n    </InputWrapperElement>\n  );\n\n  return wrapWithField(textField, props);\n}\n\nconst TextInputBase = forwardRef(_TextInputBase);\n\nexport { TextInputBase };\nexport type { AriaTextFieldProps };\n"],"mappings":"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"}
+{"version":3,"file":"TextInputBase.js","names":["useObjectRef","createFocusableRef","BASE_STYLES","BaseProps","BaseStyleProps","BLOCK_STYLES","BlockStyleProps","COLOR_STYLES","ColorStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","FocusEventHandler","forwardRef","MouseEvent","ReactElement","ReactNode","RefObject","useImperativeHandle","useMemo","AriaNumberFieldProps","AriaTextFieldProps","useHover","FieldBaseProps","TextFieldKeyboardProps","mergeProps","useCombinedRefs","useFocus","extractStyles","getValidationMods","hasValidationIndicator","ValidationIndicator","wrapWithField","Props","ADD_STYLES","$","display","placeContent","placeItems","gridRows","flow","gap","cursor","opacity","disabled","INPUT_WRAPPER_STYLES","position","gridColumns","prefix","suffix","fill","border","valid","invalid","focused","preset","radius","color","zIndex","boxSizing","transition","backgroundClip","height","multiline","$size","Prefix","Suffix","State","InputIcon","width","fontSize","ValidationIcon","InputWrapperElement","qa","styles","PROP_STYLES","DEFAULT_INPUT_STYLES","recipe","placeSelf","padding","textAlign","flexGrow","margin","resize","userSelect","Placeholder","InputElement","INTERACTIVE_ELEMENTS","focusInputOnBoxPress","event","HTMLElement","input","HTMLInputElement","HTMLTextAreaElement","button","defaultPrevented","box","currentTarget","target","Element","contains","interactive","closest","preventDefault","focus","CubeTextInputBaseProps","Omit","validate","onFocus","onBlur","icon","suffixPosition","actions","multiLine","autoFocus","inputProps","wrapperProps","inputRef","wrapperRef","HTMLDivElement","isLoading","loadingIndicator","inputStyles","rows","size","autoComplete","autocomplete","CubeBufferedValueProps","isBuffered","_TextInputBase","props","ref","mods","isInvalid","isValid","isDisabled","value","maxLength","minLength","form","otherProps","type","ElementType","isFocused","focusProps","hoverProps","isHovered","domRef","select","current","getInputElement","showValidationIndicator","placeholder","modifiers","loadable","hovered","resolvedAutoComplete","resolvedAutoFocus","hasTextSecurity","textSecurityStyles","length","fontFamily","textField","onMouseDown","undefined","TextInputBase","useFocus","mergeProps"],"sources":["../../../../src/components/fields/TextInput/TextInputBase.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport { createFocusableRef } from '@react-spectrum/utils';\nimport {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  COLOR_STYLES,\n  ColorStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  FocusEventHandler,\n  forwardRef,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useImperativeHandle,\n  useMemo,\n} from 'react';\nimport { AriaNumberFieldProps, AriaTextFieldProps, useHover } from 'react-aria';\n\nimport { FieldBaseProps, TextFieldKeyboardProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport {\n  getValidationMods,\n  hasValidationIndicator,\n  ValidationIndicator,\n  wrapWithField,\n} from '../../form';\n\nimport type { Props } from '../../../props';\n\nconst ADD_STYLES = {\n  $: '>',\n  display: 'grid',\n  placeContent: 'stretch',\n  placeItems: 'center',\n  gridRows: '1sf',\n  flow: 'column',\n  gap: 0,\n  cursor: 'inherit',\n  opacity: {\n    '': 1,\n    disabled: '$disabled-opacity',\n  },\n};\n\nexport const INPUT_WRAPPER_STYLES: Styles = {\n  display: 'grid',\n  flow: 'row',\n  position: 'relative',\n  gridColumns: {\n    '': '1sf',\n    prefix: 'max-content 1sf',\n    suffix: '1sf max-content',\n    'prefix & suffix': 'max-content 1sf max-content',\n  },\n  gridRows: '1sf',\n  placeItems: 'stretch',\n  fill: {\n    '': '#surface',\n    disabled: '#disabled-surface',\n  },\n  border: {\n    '': true,\n    valid: '#success-text.50',\n    invalid: '#danger-text.50',\n    focused: '#primary-text',\n    'valid & focused': '#success-text',\n    'invalid & focused': '#danger-text',\n    disabled: true,\n  },\n  preset: 't3',\n  radius: true,\n  cursor: 'text',\n  color: {\n    '': '#dark-02',\n    focused: '#dark-02',\n    invalid: '#danger-text',\n    disabled: '#dark.30',\n  },\n  zIndex: {\n    '': 'initial',\n    focused: 1,\n  },\n  boxSizing: 'border-box',\n  transition: 'theme',\n  backgroundClip: 'content-box',\n  height: {\n    '': '$size $size',\n    multiline: 'min $size',\n  },\n\n  $size: {\n    '': '$size-md',\n    'size=small': '$size-sm',\n    'size=medium': '$size-md',\n    'size=large': '$size-lg',\n  },\n\n  Prefix: ADD_STYLES,\n\n  Suffix: ADD_STYLES,\n\n  State: {\n    $: '> Suffix >',\n    display: 'flex',\n  },\n\n  InputIcon: {\n    display: 'grid',\n    placeItems: 'center',\n    width: 'min $size-sm',\n    color: 'inherit',\n    fontSize: '$icon-size',\n  },\n\n  ValidationIcon: {\n    $: '> Suffix > State >',\n    display: 'grid',\n    placeItems: 'center',\n    width: {\n      '': 'min $size-sm',\n      suffix: 'min $size-xs',\n    },\n    fontSize: '$icon-size',\n  },\n};\n\nconst InputWrapperElement = tasty({\n  qa: 'InputWrapper',\n  styles: INPUT_WRAPPER_STYLES,\n});\n\nconst PROP_STYLES = [\n  ...BASE_STYLES,\n  ...OUTER_STYLES,\n  ...BLOCK_STYLES,\n  ...COLOR_STYLES,\n];\n\nexport const DEFAULT_INPUT_STYLES: Styles = {\n  recipe: 'reset input / input-autofill',\n  placeSelf: 'stretch',\n  width: 'initial 100% 100%',\n  transition: 'theme',\n  radius: true,\n  padding: '$vertical-padding $right-padding $vertical-padding $left-padding',\n  textAlign: 'left',\n  preset: 't3',\n  flexGrow: 1,\n  margin: {\n    '': 0,\n    multiline: '((($size-md - 1lh) / 2) - 1bw) 0',\n    'multiline & size=small': '((($size-sm - 1lh) / 2) - 1bw) 0',\n    'multiline & size=large': '((($size-lg - 1lh) / 2) - 1bw) 0',\n  },\n  resize: 'none',\n  userSelect: 'auto',\n\n  Placeholder: {\n    $: '&::placeholder',\n    recipe: 'input-placeholder',\n  },\n  '&::-webkit-search-cancel-button': {\n    recipe: 'input-search-cancel-button',\n  },\n\n  '$vertical-padding': 0,\n  '$left-padding': {\n    '': '(1x - 1bw)',\n    'size=small': '(1x - 1bw)',\n    'size=large': '(1.25x - 1bw)',\n    'size=xlarge': '(1.5x - 1bw)',\n    prefix: '0',\n  },\n  '$right-padding': {\n    '': '(1x - 1bw)',\n    'size=small': '(1x - 1bw)',\n    'size=large': '(1.25x - 1bw)',\n    'size=xlarge': '(1.5x - 1bw)',\n    suffix: '0',\n  },\n};\n\nconst InputElement = tasty({ qa: 'Input', styles: DEFAULT_INPUT_STYLES });\n\nconst INTERACTIVE_ELEMENTS =\n  'a[href], button, input, select, textarea, [tabindex], [contenteditable]';\n\n/**\n * A press inside the field box but outside the input — the prefix or suffix area, an icon, a\n * textarea's margins — focuses the input, as a press anywhere in a native field does. Presses on\n * the input itself and on interactive children, such as a clear button or the steppers, stay\n * theirs.\n */\nfunction focusInputOnBoxPress(\n  event: MouseEvent<HTMLElement>,\n  input: HTMLInputElement | HTMLTextAreaElement | null | undefined,\n) {\n  if (event.button !== 0 || event.defaultPrevented) return;\n  if (!input || input.disabled) return;\n\n  const box = event.currentTarget;\n  const target = event.target as Element;\n\n  // React bubbles presses from a portal (a popover opened from a field action)\n  // through the box; those belong to the portal.\n  if (!box.contains(target)) return;\n\n  const interactive = target.closest(INTERACTIVE_ELEMENTS);\n\n  if (interactive && box.contains(interactive)) return;\n\n  // The default action would move focus to the press target first, blurring the input.\n  event.preventDefault();\n  input.focus();\n}\n\nexport interface CubeTextInputBaseProps\n  extends\n    BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    BaseStyleProps,\n    ColorStyleProps,\n    Omit<\n      AriaTextFieldProps<HTMLInputElement | HTMLTextAreaElement>,\n      | 'validate'\n      | 'form'\n      | 'name'\n      | 'errorMessage'\n      | 'onKeyDown'\n      | 'onKeyUp'\n      | 'onFocus'\n      | 'onBlur'\n    >,\n    TextFieldKeyboardProps,\n    FieldBaseProps {\n  validate?: AriaTextFieldProps['validate'] | AriaNumberFieldProps['validate'];\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /** Left input icon */\n  icon?: ReactElement | null;\n  /** Input decoration before the main input */\n  prefix?: ReactNode;\n  /** Input decoration after the main input */\n  suffix?: ReactNode;\n  /** Suffix position goes before or after the validation and loading statuses */\n  suffixPosition?: 'before' | 'after';\n  /**\n   * Controls placed last in the suffix, after the validation and loading\n   * statuses and after `suffix` whatever its position, such as a popover\n   * trigger.\n   */\n  actions?: ReactNode;\n  /** Whether the input is multiline */\n  multiLine?: boolean;\n  /** Whether the input should have autofocus */\n  autoFocus?: boolean;\n  /**\n   * Direct input props. The explicit props above (`isDisabled`, `maxLength`, `minLength`,\n   * `autoFocus`, `rows`, `autoComplete`) win over the same attributes here when they are set; an\n   * unset one leaves the value given here in place.\n   */\n  inputProps?: Props;\n  /** Direct input wrapper props */\n  wrapperProps?: Props;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;\n  /** The wrapper ref */\n  wrapperRef?: RefObject<HTMLDivElement | null>;\n  /** Whether the input has the loading status */\n  isLoading?: boolean;\n  /** Rendered in place of the default loading icon while `isLoading` is set */\n  loadingIndicator?: ReactNode;\n  /** Style map for the input */\n  inputStyles?: Styles;\n  /** The number of rows for the input. Only applies to textarea. */\n  rows?: number;\n  /** The resize CSS property sets whether an element is resizable, and if so, in which directions. */\n  resize?: Styles['resize'];\n  /** The size of the input */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  /**\n   * What kind of autofill the browser may offer for the input, as the HTML `autocomplete` token\n   * (`email`, `current-password`, `off`, …). See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).\n   */\n  autoComplete?: string;\n  /**\n   * @deprecated Use `autoComplete` instead. Kept as an alias so existing callers keep working;\n   * `autoComplete` wins when both are set.\n   */\n  autocomplete?: string;\n}\n\n/**\n * Mixed into the fields that actually buffer their value — `TextInput`, `TextArea`,\n * `PasswordInput`, `SearchInput` — rather than declared on `CubeTextInputBaseProps`. Every field\n * built on that base would otherwise inherit the prop, including `NumberInput` and\n * `CommandTextArea`, which keep their own text and ignore it: a public API that accepts a flag and\n * does nothing with it.\n */\nexport interface CubeBufferedValueProps {\n  /**\n   * Whether the typed text is held locally until the controlled `value` catches up. On by default,\n   * which is what keeps the caret in place when the value round-trips through a store that\n   * re-renders a pass late. Set to `false` for a caller that must see the value snap back to its\n   * own `value` prop the instant it declines a keystroke. See `useBufferedValue`.\n   */\n  isBuffered?: boolean;\n}\n\n/**\n * The presentational base for text-like inputs. It renders the input chrome and the field wrapper, but\n * never wires form state — that is the job of the component rendering it (`TextInput`, `TextArea`,\n * `PasswordInput`, `NumberInput`, `SearchInput`, `CommandTextArea`).\n */\nfunction _TextInputBase(props: CubeTextInputBaseProps, ref) {\n  let {\n    qa,\n    mods,\n    isInvalid,\n    isValid,\n    prefix,\n    isDisabled,\n    multiLine,\n    autoFocus,\n    inputProps,\n    wrapperProps,\n    inputRef,\n    isLoading,\n    loadingIndicator,\n    value,\n    inputStyles = {},\n    suffix,\n    suffixPosition = 'before',\n    actions,\n    wrapperRef,\n    rows,\n    size = 'medium',\n    autoComplete,\n    autocomplete,\n    icon,\n    maxLength,\n    minLength,\n    form,\n    resize,\n    ...otherProps\n  } = props;\n\n  let styles = extractStyles(otherProps, PROP_STYLES);\n  let type = otherProps.type;\n\n  if (resize) {\n    inputStyles = { ...inputStyles, resize };\n  }\n\n  let ElementType: 'textarea' | 'input' = multiLine ? 'textarea' : 'input';\n  let { isFocused, focusProps } = useFocus();\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n  // The input box, with or without the field chrome, so the field's ref never\n  // resolves to `null`; `wrapperRef` reaches the same element.\n  let domRef = useObjectRef(wrapperRef);\n\n  inputRef = useCombinedRefs(inputRef);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef?.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef?.current;\n    },\n  }));\n\n  const showValidationIndicator = hasValidationIndicator({\n    isInvalid,\n    isValid,\n    isLoading,\n  });\n\n  // Fix safari bug: https://github.com/philipwalton/flexbugs/issues/270\n  if (!inputProps?.placeholder) {\n    if (!inputProps) {\n      inputProps = {};\n    }\n\n    inputProps.placeholder = ' ';\n  }\n\n  if (icon) {\n    icon = <div data-element=\"InputIcon\">{icon}</div>;\n\n    if (prefix) {\n      prefix = (\n        <>\n          {icon}\n          {prefix}\n        </>\n      );\n    } else {\n      prefix = icon;\n    }\n  }\n\n  const modifiers = useMemo(\n    () => ({\n      ...getValidationMods({ isInvalid, isValid }),\n      loadable: !!loadingIndicator,\n      focused: isFocused,\n      hovered: isHovered,\n      disabled: isDisabled,\n      multiline: multiLine,\n      prefix: !!prefix,\n      suffix: showValidationIndicator || !!suffix || !!actions,\n      ...mods,\n    }),\n    [\n      mods,\n      isInvalid,\n      isValid,\n      showValidationIndicator,\n      loadingIndicator,\n      isFocused,\n      isDisabled,\n      isHovered,\n      multiLine,\n      prefix,\n      suffix,\n      actions,\n    ],\n  );\n\n  // The explicit props win when they are set; an unset one falls back to the merged `inputProps`\n  // instead of overwriting it with `undefined`. For `autoComplete` that keeps both a caller's\n  // `inputProps={{ autoComplete }}` and `useNumberField`'s own `off`. `autocomplete` is the\n  // deprecated alias.\n  const resolvedAutoComplete =\n    autoComplete ?? autocomplete ?? inputProps.autoComplete;\n  const resolvedAutoFocus = autoFocus ?? inputProps.autoFocus;\n\n  const hasTextSecurity = multiLine && type === 'password';\n  const textSecurityStyles =\n    hasTextSecurity && inputProps.value?.length\n      ? {\n          fontFamily: 'text-security-disc',\n        }\n      : {};\n\n  const textField = (\n    <InputWrapperElement\n      ref={domRef}\n      mods={modifiers}\n      data-size={size}\n      styles={styles}\n      {...mergeProps(wrapperProps, {\n        onMouseDown: (event: MouseEvent<HTMLElement>) =>\n          focusInputOnBoxPress(event, inputRef?.current),\n      })}\n    >\n      {prefix ? <div data-element=\"Prefix\">{prefix}</div> : null}\n      <InputElement\n        qa={qa || 'Input'}\n        as={ElementType}\n        data-input-type=\"textinput\"\n        {...mergeProps(inputProps, focusProps, hoverProps)}\n        ref={inputRef}\n        rows={multiLine ? (rows ?? inputProps.rows ?? 1) : inputProps.rows}\n        mods={modifiers}\n        // oxlint-disable-next-line react/forbid-component-props -- `preset` owns font-family, and a `fontFamily` state map would replace the preset's in every state\n        style={textSecurityStyles}\n        {...(resolvedAutoFocus ? { 'data-autofocus': '' } : undefined)}\n        autoFocus={resolvedAutoFocus}\n        data-size={size}\n        autoComplete={resolvedAutoComplete}\n        styles={inputStyles}\n        disabled={!!(isDisabled ?? inputProps.disabled)}\n        maxLength={maxLength ?? inputProps.maxLength}\n        minLength={minLength ?? inputProps.minLength}\n      />\n      {showValidationIndicator || suffix || actions ? (\n        <div data-element=\"Suffix\">\n          {suffixPosition === 'before' ? suffix : null}\n          {isLoading && loadingIndicator ? (\n            <div data-element=\"State\">{loadingIndicator}</div>\n          ) : (\n            <ValidationIndicator\n              isInvalid={isInvalid}\n              isValid={isValid}\n              isLoading={isLoading}\n            />\n          )}\n          {suffixPosition === 'after' ? suffix : null}\n          {actions}\n        </div>\n      ) : null}\n    </InputWrapperElement>\n  );\n\n  return wrapWithField(textField, props);\n}\n\nconst TextInputBase = forwardRef(_TextInputBase);\n\nexport { TextInputBase };\nexport type { AriaTextFieldProps };\n"],"mappings":"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"}

package/dist/components/fields/TextInput/displayed-validation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { c } from "react/compiler-runtime";
 import { useState } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
 //#region src/components/fields/TextInput/useAutoSizeTextArea.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { Block } from "../../Block.js";

package/dist/components/fields/TriggerActions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { ItemActionIcon } from "../actions/ItemActionsWrapper.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsxs } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { formatColor, getContrastingColor, toHex } from "./color.js";
@@ -116,7 +116,7 @@ function ChannelRow(t0) {
 	const t5 = `linear-gradient(to right, ${t4})`;
 	let t6;
 	if ($[12] !== t5) {
-		t6 = { "--channel-gradient": t5 };
+		t6 = { "$channel-gradient": t5 };
 		$[12] = t5;
 		$[13] = t6;
 	} else t6 = $[13];
@@ -156,7 +156,7 @@ function ChannelRow(t0) {
 	let t11;
 	if ($[25] !== t10 || $[26] !== t6) {
 		t11 = /* @__PURE__ */ jsx(ChannelTrackElement, {
-			style: t6,
+			tokens: t6,
 			children: t10
 		});
 		$[25] = t10;
@@ -214,8 +214,8 @@ function ColorPanel(props) {
 	let t2;
 	if ($[4] !== t0 || $[5] !== t1) {
 		t2 = {
-			"--color-picker-color": t0,
-			"--color-picker-contrast-color": t1
+			"#color-picker": t0,
+			"#color-picker-contrast": t1
 		};
 		$[4] = t0;
 		$[5] = t1;
@@ -306,7 +306,7 @@ function ColorPanel(props) {
 	let t12;
 	if ($[35] !== colorTokens || $[36] !== input || $[37] !== swatches || $[38] !== t11 || $[39] !== t5 || $[40] !== t8) {
 		t12 = /* @__PURE__ */ jsxs(PanelElement, {
-			style: colorTokens,
+			tokens: colorTokens,
 			children: [
 				input,
 				t5,

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPanel.js","names":["Styles","tasty","ReactNode","useEvent","useI18n","Radio","Slider","CHANNELS","COLOR_SPACE_HINTS","COLOR_SPACE_LABELS","COLOR_SPACES","ColorChannel","ColorSpace","ColorFormat","ColorValue","formatColor","getContrastingColor","toHex","PanelElement","qa","styles","display","flow","gap","padding","width","PreviewElement","placeItems","height","radius","preset","fill","color","shadow","ChannelsElement","gridColumns","ChannelLabelElement","textAlign","ChannelTrackElement","ChannelValueElement","whiteSpace","TRACK_STYLES","top","image","Fill","THUMB_STYLES","THUMB_TOKENS","SPACE_STYLES","TAB_STYLES","flexGrow","ColorPanelProps","space","isDisabled","previewFormat","swatches","input","onChange","onSpaceChange","ChannelRowProps","channel","ChannelRow","t0","$","_c","t1","max","t2","value","apply","handleChange","t3","label","t4","stops","t5","t6","t7","title","t8","t9","Math","min","t10","step","t11","t12","t13","t14","ColorPanel","props","t","colorTokens","handleSpaceChange","Symbol","for","map","_temp","item","_c","Slider","Radio"],"sources":["../../../../src/components/fields/color/ColorPanel.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\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  /** Optional value field rendered above the preview. */\n  input?: 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          isBare\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    input,\n    onChange,\n    onSpaceChange,\n  } = props;\n  const { t } = useI18n();\n\n  const colorTokens = {\n    '--color-picker-color': toHex(color),\n    '--color-picker-contrast-color': getContrastingColor(color),\n  };\n\n  const handleSpaceChange = useEvent((value: string) => {\n    onSpaceChange(value as ColorSpace);\n  });\n\n  return (\n    <PanelElement style={colorTokens}>\n      {input}\n      <PreviewElement>{formatColor(color, previewFormat)}</PreviewElement>\n      <Radio.Tabs\n        isBare\n        aria-label={t('colorPicker.colorSpace', '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":"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"}
+{"version":3,"file":"ColorPanel.js","names":["Styles","tasty","ReactNode","useEvent","useI18n","Radio","Slider","CHANNELS","COLOR_SPACE_HINTS","COLOR_SPACE_LABELS","COLOR_SPACES","ColorChannel","ColorSpace","ColorFormat","ColorValue","formatColor","getContrastingColor","toHex","PanelElement","qa","styles","display","flow","gap","padding","width","PreviewElement","placeItems","height","radius","preset","fill","color","shadow","ChannelsElement","gridColumns","ChannelLabelElement","textAlign","ChannelTrackElement","ChannelValueElement","whiteSpace","TRACK_STYLES","top","image","Fill","THUMB_STYLES","THUMB_TOKENS","SPACE_STYLES","TAB_STYLES","flexGrow","ColorPanelProps","space","isDisabled","previewFormat","swatches","input","onChange","onSpaceChange","ChannelRowProps","channel","ChannelRow","t0","$","_c","t1","max","t2","value","apply","handleChange","t3","label","t4","stops","t5","t6","t7","title","t8","t9","Math","min","t10","step","t11","t12","t13","t14","ColorPanel","props","t","colorTokens","handleSpaceChange","Symbol","for","map","_temp","item","_c","Slider","Radio"],"sources":["../../../../src/components/fields/color/ColorPanel.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\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  /** Optional value field rendered above the preview. */\n  input?: 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        tokens={{\n          '$channel-gradient': `linear-gradient(to right, ${channel.stops(\n            color,\n          )})`,\n        }}\n      >\n        <Slider\n          isBare\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    input,\n    onChange,\n    onSpaceChange,\n  } = props;\n  const { t } = useI18n();\n\n  const colorTokens = {\n    '#color-picker': toHex(color),\n    '#color-picker-contrast': getContrastingColor(color),\n  };\n\n  const handleSpaceChange = useEvent((value: string) => {\n    onSpaceChange(value as ColorSpace);\n  });\n\n  return (\n    <PanelElement tokens={colorTokens}>\n      {input}\n      <PreviewElement>{formatColor(color, previewFormat)}</PreviewElement>\n      <Radio.Tabs\n        isBare\n        aria-label={t('colorPicker.colorSpace', '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":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { maxChroma, normalizeHue, oklchToOkhsl } from "../../../utils/colors.js";
 import { fromOkhst, fromRgb, isAchromatic, toHex, toOkhst, toOklch, toRgb } from "./color.js";
 //#region src/components/fields/color/channels.ts
@@ -29,9 +29,9 @@ function round(value, precision = 2) {
 /**
 * `count` evenly spaced gradient stops, always as hex. Perceptual channels are
 * not linear in sRGB, so a two-stop gradient would misrepresent them —
-* sampling the real conversion keeps the track honest. Hex (rather than an
-* `okhsl()` string) because the gradient reaches the DOM as a raw custom
-* property, without passing through Tasty's color functions.
+* sampling the real conversion keeps the track honest. Hex works in any
+* browser, and Tasty's token parser keeps each stop's literal as the fallback
+* of a `var(--<hex>-color, #<hex>)` reference.
 */
 function ramp(count, at) {
 	return Array.from({ length: count }, (_, index) => toHex(at(index / (count - 1)))).join(", ");

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

@@ -1 +1 @@
-{"version":3,"file":"channels.js","names":["ColorValue","fromOkhst","fromOklch","fromRgb","isAchromatic","maxChroma","normalizeHue","toHex","toOkhst","toOklch","toRgb","COLOR_SPACES","const","ColorSpace","COLOR_SPACE_LABELS","Record","hst","lch","rgb","COLOR_SPACE_HINTS","ColorChannel","label","title","min","step","max","color","value","apply","stops","display","constant","round","precision","factor","Math","ramp","count","at","position","Array","from","length","_","index","join","HUE_STOPS","h","s","l","hueChannel","saturationChannel","toneChannel","t","lightnessChannel","c","chromaChannel","limit","toFixed","rgbChannel","key","next","CHANNELS","fromOklch"],"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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"}
+{"version":3,"file":"channels.js","names":["ColorValue","fromOkhst","fromOklch","fromRgb","isAchromatic","maxChroma","normalizeHue","toHex","toOkhst","toOklch","toRgb","COLOR_SPACES","const","ColorSpace","COLOR_SPACE_LABELS","Record","hst","lch","rgb","COLOR_SPACE_HINTS","ColorChannel","label","title","min","step","max","color","value","apply","stops","display","constant","round","precision","factor","Math","ramp","count","at","position","Array","from","length","_","index","join","HUE_STOPS","h","s","l","hueChannel","saturationChannel","toneChannel","t","lightnessChannel","c","chromaChannel","limit","toFixed","rgbChannel","key","next","CHANNELS","fromOklch"],"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 works in any\n * browser, and Tasty's token parser keeps each stop's literal as the fallback\n * of a `var(--<hex>-color, #<hex>)` reference.\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.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { anyNaN, clamp, maxChroma, normalizeHue, oklchToOkhsl, parseColorFunction, readComponent, readHue, rgbFromSrgb } from "../../../utils/colors.js";
 import { contrastRatioFromLuminance, formatHsl, formatOkhsl, formatOkhst, formatOklch, formatRgb, hslToSrgb, okhslToLinearSrgb, okhslToOkhst, okhslToOklch, okhslToSrgb, okhstToOkhsl, parseHexAlpha, relativeLuminanceFromLinearRgb, srgbToHex, srgbToOkhsl } from "@tenphi/glaze";
 //#region src/components/fields/color/color.ts

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

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

package/dist/components/fields/option-origin-press.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 //#region src/components/fields/option-origin-press.ts
 let activePress = null;
 function isInside(rect, event) {

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { Text as _Text } from "../../content/Text.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";

package/dist/components/form/FieldWrapper/field-description.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { c } from "react/compiler-runtime";
 import { useSyncExternalStore } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | 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.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";
 import { isModernFormController } from "../backend.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { ModernControllerContext } from "./modern/context.js";
 import { FormContext } from "./Form.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 //#region src/components/form/Form/backend.ts
 /**
 * Nominal branding for the two Form backends (modernization plan §5.1).

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { useFormControllerContext } from "./modern/context.js";
 import { useForm } from "./use-form.js";
 import { Form as _Form, FormContext, FormScopeMask, useFormProps } from "./Form.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { createContext, useContext } from "react";
 //#region src/components/form/Form/modern/context.ts
 const ModernControllerContext = createContext(null);

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { FORM_BACKEND, isModernFormController } from "../backend.js";
 import { createFormField } from "./field.js";
 import { createFormStore } from "./store.js";

package/dist/components/form/Form/modern/field-binding.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { getFieldKey, hasPath, normalizePath, readPath } from "./values.js";
 import { getControllerInternals } from "./controller.js";
 //#region src/components/form/Form/modern/field-binding.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { normalizePath } from "./values.js";
 //#region src/components/form/Form/modern/field.ts
 function createFormField(form, path, options = {}) {

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../../utils/react/useLayoutEffect.js";
 import { ModernControllerContext } from "./context.js";
 import { getFieldKey, normalizePath, readPath } from "./values.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { FORM_BACKEND } from "../backend.js";
 import { createValueSnapshotter, defineValue, formValueEqual, freezeContainer, getFieldKey, hasPath, isPlainObject, normalizePath, pathValueChanged, readPath, readonlySet, sameMembers, writePath } from "./values.js";
 import { rulesSignature, runRules } from "./validation.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { applyRule } from "../validation.js";
 //#region src/components/form/Form/modern/validation.ts
 /** Compare constraints and function source; captures still need deps/rulesKey. */

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 //#region src/components/form/Form/modern/values.ts
 const ownedContainers = /* @__PURE__ */ new WeakSet();
 function freezeContainer(value) {

package/dist/components/form/Form/reset-unbound-controls.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 //#region src/components/form/Form/reset-unbound-controls.ts
 /**
 * Both form roots cancel a native reset, because the browser would put a bound

package/dist/components/form/Form/use-field/use-field-binding.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../../utils/react/useLayoutEffect.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { isModernFormController } from "../backend.js";

package/dist/components/form/Form/use-field/use-field-props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { warn } from "../../../../utils/warnings.js";

package/dist/components/form/Form/use-field/use-field.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../../utils/react/useLayoutEffect.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useIsFirstRender } from "../../../../_internal/hooks/use-is-first-render.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { FORM_BACKEND, isModernFormController, modernBackendUnavailableError } from "./backend.js";
 import { applyRules } from "./validation.js";
 import { dotizeConvert } from "../../../utils/dotize.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { validate } from "email-validator";
 import validUrl from "valid-url";
 //#region src/components/form/Form/validation.ts

package/dist/components/form/Label.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useProviderProps } from "../../provider.js";
 import { useI18n } from "../../i18n/useI18n.js";
@@ -9,18 +9,21 @@ import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useObjectRef } from "@react-aria/utils";
 //#region src/components/form/Label.tsx
-const REQUIRED_ICON = /* @__PURE__ */ jsx("svg", {
+const RequiredIconElement = tasty({
+	as: "svg",
+	element: "RequiredIcon",
+	styles: {
+		width: ".8em",
+		height: ".8em",
+		transform: "rotate(-5deg)"
+	}
+});
+const REQUIRED_ICON = /* @__PURE__ */ jsx(RequiredIconElement, {
 	xmlns: "http://www.w3.org/2000/svg",
 	version: "1.1",
 	x: "0px",
 	y: "0px",
 	viewBox: "0 0 100 125",
-	style: {
-		enableBackground: "new 0 0 100 100",
-		width: ".8em",
-		height: ".8em",
-		transform: "rotate(-5deg)"
-	},
 	children: /* @__PURE__ */ jsx("switch", { children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("polygon", {
 		fill: "currentColor",
 		points: "97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57"