@cube-dev/ui-kit 0.199.1 → 0.200.0

package/dist/components/fields/TagInput/TagList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagList.js","names":["Key","Node","mergeStyles","Styles","tasty","KeyboardEvent","RefObject","useRef","useFocusRing","useId","useTag","useTagGroup","Item","ListState","useListState","useI18n","CloseIcon","mergeProps","ItemAction","CubeTagProps","Tag","TagListEntry","key","label","invalidMessage","tagProps","Partial","isDisabled","TagListProps","qa","id","tags","size","isReadOnly","onRemove","keys","styles","tagStyles","listRef","HTMLDivElement","inputRef","HTMLInputElement","TagListElement","display","flow","gap","placeItems","outline","TagRowElement","minWidth","maxWidth","radius","focused","outlineOffset","transition","cursor","TagRowProps","item","state","TagRow","t0","$","_c","t","ref","t1","rowProps","gridCellProps","removeButtonProps","allowsRemoving","isFocusVisible","focusProps","invalidId","entry","value","t2","disabledKeys","has","isTagDisabled","canRemove","t3","otherTagProps","ownTagStyles","tagChildren","tagTheme","theme","t4","t5","children","t6","_isDisabled","t7","filter","Boolean","join","undefined","describedBy","e","repeat","preventDefault","onKeyDown","handleKeyDown","t8","t9","t10","t11","color","onPress","t12","t13","t14","TagList","props","localRef","tag","map","_temp","items","_temp2","String","gridProps","onGridKeyDownCapture","otherGridProps","onKeyDownCapture","input","current","isPrintable","length","ctrlKey","metaKey","altKey","disabled","nativeEvent","isComposing","stopPropagation","focus","handleKeyDownCapture","tabIndex","collection","tag_0","_c","useId","mergeProps","Tag"],"sources":["../../../../src/components/fields/TagInput/TagList.tsx"],"sourcesContent":["import { Key, Node } from '@react-types/shared';\nimport { mergeStyles, Styles, tasty } from '@tenphi/tasty';\nimport { KeyboardEvent, RefObject, useRef } from 'react';\nimport { useFocusRing, useId, useTag, useTagGroup } from 'react-aria';\nimport { Item, ListState, useListState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { mergeProps } from '../../../utils/react';\nimport { ItemAction } from '../../actions/ItemAction/ItemAction';\nimport { CubeTagProps, Tag } from '../../content/Tag/Tag';\n\n/** One chip as the list renders it. */\nexport interface TagListEntry {\n  /** The value the chip stands for. Also its collection key. */\n  key: string;\n  /** The text shown on the chip. */\n  label: string;\n  /**\n   * Why the value failed `validateTag`, when it did. Paints the chip in the\n   * danger theme and becomes part of its description.\n   */\n  invalidMessage?: string;\n  /** Extra props for this chip's `Tag`, from the `tagProps` callback. */\n  tagProps?: Partial<CubeTagProps>;\n  /** Whether the chip is locked: it cannot be focused or removed. */\n  isDisabled?: boolean;\n}\n\nexport interface TagListProps {\n  qa?: string;\n  id?: string;\n  'aria-label': string;\n  /** The field's label, read after `aria-label`. */\n  'aria-labelledby'?: string;\n  tags: TagListEntry[];\n  size: CubeTagProps['size'];\n  isDisabled?: boolean;\n  /** Read-only chips render without a remove button and ignore Delete/Backspace. */\n  isReadOnly?: boolean;\n  onRemove: (keys: string[]) => void;\n  styles?: Styles;\n  tagStyles?: Styles;\n  listRef?: RefObject<HTMLDivElement | null>;\n  /** The field's input, which Escape and typing on a chip return to. */\n  inputRef?: RefObject<HTMLInputElement | null>;\n}\n\nconst TagListElement = tasty({\n  qa: 'TagInputTags',\n  styles: {\n    display: 'flex',\n    flow: 'row wrap',\n    gap: '.5x',\n    placeItems: 'center start',\n    outline: 0,\n  },\n});\n\n// The focusable grid row. The chip inside it keeps its own look; the row only\n// contributes the focus ring, drawn on the chip's own radius.\nconst TagRowElement = tasty({\n  qa: 'TagInputTag',\n  styles: {\n    display: 'inline-flex',\n    minWidth: 0,\n    maxWidth: '100%',\n    radius: true,\n    outline: {\n      '': '0 #primary-accent-text.0',\n      focused: '1bw #primary-accent-text',\n    },\n    outlineOffset: 1,\n    transition: 'theme',\n    cursor: 'default',\n  },\n});\n\ninterface TagRowProps {\n  item: Node<TagListEntry>;\n  state: ListState<TagListEntry>;\n  size: CubeTagProps['size'];\n  isDisabled?: boolean;\n  isReadOnly?: boolean;\n  tagStyles?: Styles;\n}\n\nfunction TagRow({\n  item,\n  state,\n  size,\n  isDisabled,\n  isReadOnly,\n  tagStyles,\n}: TagRowProps) {\n  const { t } = useI18n();\n  const ref = useRef<HTMLDivElement>(null);\n  const { rowProps, gridCellProps, removeButtonProps, allowsRemoving } = useTag(\n    { item },\n    state,\n    ref,\n  );\n  const { isFocusVisible, focusProps } = useFocusRing();\n  const invalidId = useId();\n  const entry = item.value as TagListEntry;\n  const isTagDisabled = isDisabled || state.disabledKeys.has(item.key);\n  const canRemove = allowsRemoving && !isTagDisabled && !isReadOnly;\n  const {\n    theme: tagTheme,\n    styles: ownTagStyles,\n    children: tagChildren,\n    // Locking goes through the list's disabled keys, so the tag group skips\n    // the chip too.\n    isDisabled: _isDisabled,\n    ...otherTagProps\n  } = entry.tagProps ?? {};\n  const describedBy =\n    [rowProps['aria-describedby'], entry.invalidMessage ? invalidId : null]\n      .filter(Boolean)\n      .join(' ') || undefined;\n\n  // The tag group removes on every Delete/Backspace, auto-repeat included: a\n  // key held down would clear the whole list.\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.repeat && (e.key === 'Delete' || e.key === 'Backspace')) {\n      e.preventDefault();\n\n      return;\n    }\n\n    rowProps.onKeyDown?.(e);\n  };\n\n  return (\n    <TagRowElement\n      ref={ref}\n      {...mergeProps(rowProps, focusProps)}\n      onKeyDown={handleKeyDown}\n      aria-describedby={describedBy}\n      mods={{ focused: isFocusVisible }}\n    >\n      {entry.invalidMessage ? (\n        <span hidden id={invalidId}>\n          {entry.invalidMessage}\n        </span>\n      ) : null}\n      <Tag\n        // The cell of the grid row, not the `status` live region a standalone\n        // tag is: every chip announcing itself would drown the list.\n        {...gridCellProps}\n        size={size}\n        {...otherTagProps}\n        // An invalid value shows as one whatever theme the chip asks for.\n        theme={entry.invalidMessage ? 'danger' : (tagTheme ?? 'default')}\n        styles={ownTagStyles ? mergeStyles(tagStyles, ownTagStyles) : tagStyles}\n        isDisabled={isTagDisabled}\n        // The row takes the one Tab stop and removes on Delete/Backspace, so the\n        // remove button stays out of the Tab order.\n        disableActionsFocus\n        actions={\n          canRemove ? (\n            <ItemAction\n              id={removeButtonProps.id}\n              icon={<CloseIcon />}\n              aria-label={t('tagInput.remove', 'Remove')}\n              // Reads \"Remove, <label>\": the button's own name, then the row's.\n              aria-labelledby={removeButtonProps['aria-labelledby']}\n              styles={{ color: '#current' }}\n              onPress={removeButtonProps.onPress}\n            />\n          ) : undefined\n        }\n        role=\"gridcell\"\n      >\n        {tagChildren ?? entry.label}\n      </Tag>\n    </TagRowElement>\n  );\n}\n\n/**\n * The removable chips under a `TagInput`: a React Aria tag group, so the list\n * is one Tab stop, arrow keys move between chips, and Delete or Backspace\n * removes the focused one.\n */\nexport function TagList(props: TagListProps) {\n  const {\n    qa,\n    id,\n    tags,\n    size,\n    isDisabled,\n    isReadOnly,\n    onRemove,\n    styles,\n    tagStyles,\n    listRef,\n    inputRef,\n  } = props;\n  const localRef = useRef<HTMLDivElement>(null);\n  const ref = listRef ?? localRef;\n\n  const canRemove = !isDisabled && !isReadOnly;\n\n  const state = useListState<TagListEntry>({\n    items: tags,\n    // A disabled field's chips drop out of the Tab order along with its input,\n    // and so do locked ones.\n    disabledKeys: tags\n      .filter((tag) => isDisabled || tag.isDisabled)\n      .map((tag) => tag.key),\n    children: (entry) => (\n      <Item key={entry.key} textValue={entry.label}>\n        {entry.label}\n      </Item>\n    ),\n  });\n\n  const { gridProps } = useTagGroup(\n    {\n      id,\n      'aria-label': props['aria-label'],\n      'aria-labelledby': props['aria-labelledby'],\n      onRemove: canRemove\n        ? (keys: Set<Key>) => onRemove([...keys].map(String))\n        : undefined,\n    },\n    state,\n    ref,\n  );\n\n  // The grid's type-to-select listens here, before any chip does.\n  const { onKeyDownCapture: onGridKeyDownCapture, ...otherGridProps } =\n    gridProps;\n\n  // Leaving the chips for the input they belong to: Escape, or typing, which\n  // carries on in the input. Taken before type-to-select, so a letter does not\n  // also jump to the chip it starts.\n  const handleKeyDownCapture = (e: KeyboardEvent<HTMLDivElement>) => {\n    const input = inputRef?.current;\n    const isPrintable =\n      e.key.length === 1 &&\n      e.key !== ' ' &&\n      !e.ctrlKey &&\n      !e.metaKey &&\n      !e.altKey;\n\n    if (\n      !input ||\n      input.disabled ||\n      e.nativeEvent.isComposing ||\n      (e.key !== 'Escape' && !isPrintable)\n    ) {\n      onGridKeyDownCapture?.(e);\n\n      return;\n    }\n\n    e.stopPropagation();\n    // The character itself is left to reach the input, which has focus by the\n    // time the browser inserts it.\n    if (e.key === 'Escape') e.preventDefault();\n\n    input.focus();\n  };\n\n  return (\n    <TagListElement\n      ref={ref}\n      qa={qa}\n      {...otherGridProps}\n      onKeyDownCapture={handleKeyDownCapture}\n      // With every chip disabled or locked, the grid itself would otherwise\n      // stay a Tab stop that focuses nothing.\n      tabIndex={\n        state.disabledKeys.size === tags.length ? -1 : gridProps.tabIndex\n      }\n      styles={styles}\n    >\n      {[...state.collection].map((item) => (\n        <TagRow\n          key={item.key}\n          item={item}\n          state={state}\n          size={size}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          tagStyles={tagStyles}\n        />\n      ))}\n    </TagListElement>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TagList.js","names":["Key","Node","mergeStyles","Styles","tasty","KeyboardEvent","RefObject","useRef","useFocusRing","useId","useTag","useTagGroup","Item","ListState","useListState","useI18n","CloseIcon","mergeProps","ItemAction","CubeTagProps","Tag","TagListEntry","key","label","invalidMessage","tagProps","Partial","isDisabled","TagListProps","qa","id","tags","size","isReadOnly","onRemove","keys","styles","tagStyles","listRef","HTMLDivElement","inputRef","HTMLInputElement","TagListElement","display","flow","gap","placeItems","outline","TagRowElement","minWidth","maxWidth","radius","focused","outlineOffset","transition","cursor","TagRowProps","item","state","TagRow","t0","$","_c","t","ref","t1","rowProps","gridCellProps","removeButtonProps","allowsRemoving","isFocusVisible","focusProps","invalidId","entry","value","t2","disabledKeys","has","isTagDisabled","canRemove","t3","otherTagProps","ownTagStyles","tagChildren","tagTheme","theme","t4","t5","children","t6","_isDisabled","t7","filter","Boolean","join","undefined","describedBy","e","repeat","preventDefault","onKeyDown","handleKeyDown","t8","t9","t10","t11","color","onPress","t12","t13","t14","TagList","props","localRef","tag","map","_temp","items","_temp2","String","gridProps","onGridKeyDownCapture","otherGridProps","onKeyDownCapture","input","current","isPrintable","length","ctrlKey","metaKey","altKey","disabled","nativeEvent","isComposing","stopPropagation","focus","handleKeyDownCapture","tabIndex","collection","tag_0","_c","useId","mergeProps","Tag"],"sources":["../../../../src/components/fields/TagInput/TagList.tsx"],"sourcesContent":["import { Key, Node } from '@react-types/shared';\nimport { mergeStyles, Styles, tasty } from '@tenphi/tasty';\nimport { KeyboardEvent, RefObject, useRef } from 'react';\nimport { useFocusRing, useId, useTag, useTagGroup } from 'react-aria';\nimport { Item, ListState, useListState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { mergeProps } from '../../../utils/react';\nimport { ItemAction } from '../../actions/ItemAction/ItemAction';\nimport { CubeTagProps, Tag } from '../../content/Tag/Tag';\n\n/** One chip as the list renders it. */\nexport interface TagListEntry {\n  /** The value the chip stands for. Also its collection key. */\n  key: string;\n  /** The text shown on the chip. */\n  label: string;\n  /**\n   * Why the value failed `validateTag`, when it did. Paints the chip in the\n   * danger theme and becomes part of its description.\n   */\n  invalidMessage?: string;\n  /** Extra props for this chip's `Tag`, from the `tagProps` callback. */\n  tagProps?: Partial<CubeTagProps>;\n  /** Whether the chip is locked: it cannot be focused or removed. */\n  isDisabled?: boolean;\n}\n\nexport interface TagListProps {\n  qa?: string;\n  id?: string;\n  'aria-label': string;\n  /** The field's label, read after `aria-label`. */\n  'aria-labelledby'?: string;\n  tags: TagListEntry[];\n  size: CubeTagProps['size'];\n  isDisabled?: boolean;\n  /** Read-only chips render without a remove button and ignore Delete/Backspace. */\n  isReadOnly?: boolean;\n  onRemove: (keys: string[]) => void;\n  styles?: Styles;\n  tagStyles?: Styles;\n  listRef?: RefObject<HTMLDivElement | null>;\n  /** The field's input, which Escape and typing on a chip return to. */\n  inputRef?: RefObject<HTMLInputElement | null>;\n}\n\nconst TagListElement = tasty({\n  qa: 'TagInputTags',\n  styles: {\n    display: 'flex',\n    flow: 'row wrap',\n    gap: '.5x',\n    placeItems: 'center start',\n    outline: 0,\n  },\n});\n\n// The focusable grid row. The chip inside it keeps its own look; the row only\n// contributes the focus ring, drawn on the chip's own radius.\nconst TagRowElement = tasty({\n  qa: 'TagInputTag',\n  styles: {\n    display: 'inline-flex',\n    minWidth: 0,\n    maxWidth: '100%',\n    radius: true,\n    outline: {\n      '': '0 #primary-accent-text.0',\n      focused: '$ring-width #primary-accent-text',\n    },\n    outlineOffset: '$outline-offset',\n    transition: 'theme',\n    cursor: 'default',\n  },\n});\n\ninterface TagRowProps {\n  item: Node<TagListEntry>;\n  state: ListState<TagListEntry>;\n  size: CubeTagProps['size'];\n  isDisabled?: boolean;\n  isReadOnly?: boolean;\n  tagStyles?: Styles;\n}\n\nfunction TagRow({\n  item,\n  state,\n  size,\n  isDisabled,\n  isReadOnly,\n  tagStyles,\n}: TagRowProps) {\n  const { t } = useI18n();\n  const ref = useRef<HTMLDivElement>(null);\n  const { rowProps, gridCellProps, removeButtonProps, allowsRemoving } = useTag(\n    { item },\n    state,\n    ref,\n  );\n  const { isFocusVisible, focusProps } = useFocusRing();\n  const invalidId = useId();\n  const entry = item.value as TagListEntry;\n  const isTagDisabled = isDisabled || state.disabledKeys.has(item.key);\n  const canRemove = allowsRemoving && !isTagDisabled && !isReadOnly;\n  const {\n    theme: tagTheme,\n    styles: ownTagStyles,\n    children: tagChildren,\n    // Locking goes through the list's disabled keys, so the tag group skips\n    // the chip too.\n    isDisabled: _isDisabled,\n    ...otherTagProps\n  } = entry.tagProps ?? {};\n  const describedBy =\n    [rowProps['aria-describedby'], entry.invalidMessage ? invalidId : null]\n      .filter(Boolean)\n      .join(' ') || undefined;\n\n  // The tag group removes on every Delete/Backspace, auto-repeat included: a\n  // key held down would clear the whole list.\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.repeat && (e.key === 'Delete' || e.key === 'Backspace')) {\n      e.preventDefault();\n\n      return;\n    }\n\n    rowProps.onKeyDown?.(e);\n  };\n\n  return (\n    <TagRowElement\n      ref={ref}\n      {...mergeProps(rowProps, focusProps)}\n      onKeyDown={handleKeyDown}\n      aria-describedby={describedBy}\n      mods={{ focused: isFocusVisible }}\n    >\n      {entry.invalidMessage ? (\n        <span hidden id={invalidId}>\n          {entry.invalidMessage}\n        </span>\n      ) : null}\n      <Tag\n        // The cell of the grid row, not the `status` live region a standalone\n        // tag is: every chip announcing itself would drown the list.\n        {...gridCellProps}\n        size={size}\n        {...otherTagProps}\n        // An invalid value shows as one whatever theme the chip asks for.\n        theme={entry.invalidMessage ? 'danger' : (tagTheme ?? 'default')}\n        styles={ownTagStyles ? mergeStyles(tagStyles, ownTagStyles) : tagStyles}\n        isDisabled={isTagDisabled}\n        // The row takes the one Tab stop and removes on Delete/Backspace, so the\n        // remove button stays out of the Tab order.\n        disableActionsFocus\n        actions={\n          canRemove ? (\n            <ItemAction\n              id={removeButtonProps.id}\n              icon={<CloseIcon />}\n              aria-label={t('tagInput.remove', 'Remove')}\n              // Reads \"Remove, <label>\": the button's own name, then the row's.\n              aria-labelledby={removeButtonProps['aria-labelledby']}\n              styles={{ color: '#current' }}\n              onPress={removeButtonProps.onPress}\n            />\n          ) : undefined\n        }\n        role=\"gridcell\"\n      >\n        {tagChildren ?? entry.label}\n      </Tag>\n    </TagRowElement>\n  );\n}\n\n/**\n * The removable chips under a `TagInput`: a React Aria tag group, so the list\n * is one Tab stop, arrow keys move between chips, and Delete or Backspace\n * removes the focused one.\n */\nexport function TagList(props: TagListProps) {\n  const {\n    qa,\n    id,\n    tags,\n    size,\n    isDisabled,\n    isReadOnly,\n    onRemove,\n    styles,\n    tagStyles,\n    listRef,\n    inputRef,\n  } = props;\n  const localRef = useRef<HTMLDivElement>(null);\n  const ref = listRef ?? localRef;\n\n  const canRemove = !isDisabled && !isReadOnly;\n\n  const state = useListState<TagListEntry>({\n    items: tags,\n    // A disabled field's chips drop out of the Tab order along with its input,\n    // and so do locked ones.\n    disabledKeys: tags\n      .filter((tag) => isDisabled || tag.isDisabled)\n      .map((tag) => tag.key),\n    children: (entry) => (\n      <Item key={entry.key} textValue={entry.label}>\n        {entry.label}\n      </Item>\n    ),\n  });\n\n  const { gridProps } = useTagGroup(\n    {\n      id,\n      'aria-label': props['aria-label'],\n      'aria-labelledby': props['aria-labelledby'],\n      onRemove: canRemove\n        ? (keys: Set<Key>) => onRemove([...keys].map(String))\n        : undefined,\n    },\n    state,\n    ref,\n  );\n\n  // The grid's type-to-select listens here, before any chip does.\n  const { onKeyDownCapture: onGridKeyDownCapture, ...otherGridProps } =\n    gridProps;\n\n  // Leaving the chips for the input they belong to: Escape, or typing, which\n  // carries on in the input. Taken before type-to-select, so a letter does not\n  // also jump to the chip it starts.\n  const handleKeyDownCapture = (e: KeyboardEvent<HTMLDivElement>) => {\n    const input = inputRef?.current;\n    const isPrintable =\n      e.key.length === 1 &&\n      e.key !== ' ' &&\n      !e.ctrlKey &&\n      !e.metaKey &&\n      !e.altKey;\n\n    if (\n      !input ||\n      input.disabled ||\n      e.nativeEvent.isComposing ||\n      (e.key !== 'Escape' && !isPrintable)\n    ) {\n      onGridKeyDownCapture?.(e);\n\n      return;\n    }\n\n    e.stopPropagation();\n    // The character itself is left to reach the input, which has focus by the\n    // time the browser inserts it.\n    if (e.key === 'Escape') e.preventDefault();\n\n    input.focus();\n  };\n\n  return (\n    <TagListElement\n      ref={ref}\n      qa={qa}\n      {...otherGridProps}\n      onKeyDownCapture={handleKeyDownCapture}\n      // With every chip disabled or locked, the grid itself would otherwise\n      // stay a Tab stop that focuses nothing.\n      tabIndex={\n        state.disabledKeys.size === tags.length ? -1 : gridProps.tabIndex\n      }\n      styles={styles}\n    >\n      {[...state.collection].map((item) => (\n        <TagRow\n          key={item.key}\n          item={item}\n          state={state}\n          size={size}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          tagStyles={tagStyles}\n        />\n      ))}\n    </TagListElement>\n  );\n}\n"],"mappings":"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"}

package/dist/components/fields/TagInput/useActiveOption.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { markKeyboardFocus } from "../ListBoxPopover/listNavigation.js";
 import { c } from "react/compiler-runtime";

package/dist/components/fields/TagInput/useTagError.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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";
@@ -6,7 +6,7 @@ import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { ValidationIndicator, hasValidationIndicator } from "../../form/validation/ValidationIndicator.js";
 import { wrapWithField } from "../../form/wrapper.js";
-import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
+import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, OUTER_STYLES, mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useImperativeHandle, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useHover } from "react-aria";
@@ -182,10 +182,7 @@ function _TextInputBase(props, ref) {
 	let { qa, mods, isInvalid, isValid, prefix, isDisabled, multiLine, autoFocus, inputProps, wrapperProps, inputRef, isLoading, loadingIndicator, value, inputStyles = {}, suffix, suffixPosition = "before", actions, wrapperRef, rows, size = "medium", autoComplete, autocomplete, icon, maxLength, minLength, form, resize, ...otherProps } = props;
 	let styles = extractStyles(otherProps, PROP_STYLES);
 	let type = otherProps.type;
-	if (resize) inputStyles = {
-		...inputStyles,
-		resize
-	};
+	if (resize) inputStyles = mergeStyles(inputStyles, { resize });
 	let ElementType = multiLine ? "textarea" : "input";
 	let { isFocused, focusProps } = useFocus$1();
 	let { hoverProps, isHovered } = useHover({ isDisabled });

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","mergeStyles","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  mergeStyles,\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    // oxlint-disable-next-line tasty/no-runtime-styles-mutation -- forwards the consumer's `resize` prop\n    inputStyles = mergeStyles(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 tasty/no-style-prop -- `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":";;;;;;;;;;;;;;;AAyCA,MAAMoC,aAAa;CACjBC,GAAG;CACHC,SAAS;CACTC,cAAc;CACdC,YAAY;CACZC,UAAU;CACVC,MAAM;CACNC,KAAK;CACLC,QAAQ;CACRC,SAAS;EACP,IAAI;EACJC,UAAU;CACZ;AACF;AAEA,MAAaC,uBAA+B;CAC1CT,SAAS;CACTI,MAAM;CACNM,UAAU;CACVC,aAAa;EACX,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACR,mBAAmB;CACrB;CACAV,UAAU;CACVD,YAAY;CACZY,MAAM;EACJ,IAAI;EACJN,UAAU;CACZ;CACAO,QAAQ;EACN,IAAI;EACJC,OAAO;EACPC,SAAS;EACTC,SAAS;EACT,mBAAmB;EACnB,qBAAqB;EACrBV,UAAU;CACZ;CACAW,QAAQ;CACRC,QAAQ;CACRd,QAAQ;CACRe,OAAO;EACL,IAAI;EACJH,SAAS;EACTD,SAAS;EACTT,UAAU;CACZ;CACAc,QAAQ;EACN,IAAI;EACJJ,SAAS;CACX;CACAK,WAAW;CACXC,YAAY;CACZC,gBAAgB;CAChBC,QAAQ;EACN,IAAI;EACJC,WAAW;CACb;CAEAC,OAAO;EACL,IAAI;EACJ,cAAc;EACd,eAAe;EACf,cAAc;CAChB;CAEAC,QAAQ/B;CAERgC,QAAQhC;CAERiC,OAAO;EACLhC,GAAG;EACHC,SAAS;CACX;CAEAgC,WAAW;EACThC,SAAS;EACTE,YAAY;EACZ+B,OAAO;EACPZ,OAAO;EACPa,UAAU;CACZ;CAEAC,gBAAgB;EACdpC,GAAG;EACHC,SAAS;EACTE,YAAY;EACZ+B,OAAO;GACL,IAAI;GACJpB,QAAQ;EACV;EACAqB,UAAU;CACZ;AACF;AAEA,MAAME,sBAAsB7D,MAAM;CAChC8D,IAAI;CACJC,QAAQ7B;AACV,CAAC;AAED,MAAM8B,cAAc;CAClB,GAAG3E;CACH,GAAGQ;CACH,GAAGL;CACH,GAAGE;AAAY;AAGjB,MAAauE,uBAA+B;CAC1CC,QAAQ;CACRC,WAAW;CACXT,OAAO;CACPT,YAAY;CACZJ,QAAQ;CACRuB,SAAS;CACTC,WAAW;CACXzB,QAAQ;CACR0B,UAAU;CACVC,QAAQ;EACN,IAAI;EACJnB,WAAW;EACX,0BAA0B;EAC1B,0BAA0B;CAC5B;CACAoB,QAAQ;CACRC,YAAY;CAEZC,aAAa;EACXlD,GAAG;EACH0C,QAAQ;CACV;CACA,mCAAmC,EACjCA,QAAQ,6BACV;CAEA,qBAAqB;CACrB,iBAAiB;EACf,IAAI;EACJ,cAAc;EACd,cAAc;EACd,eAAe;EACf7B,QAAQ;CACV;CACA,kBAAkB;EAChB,IAAI;EACJ,cAAc;EACd,cAAc;EACd,eAAe;EACfC,QAAQ;CACV;AACF;AAEA,MAAMqC,eAAe3E,MAAM;CAAE8D,IAAI;CAASC,QAAQE;AAAqB,CAAC;AAExE,MAAMW,uBACJ;;;;;;;AAQF,SAASC,qBACPC,OACAE,OACA;CACA,IAAIF,MAAMK,WAAW,KAAKL,MAAMM,kBAAkB;CAClD,IAAI,CAACJ,SAASA,MAAM/C,UAAU;CAE9B,MAAMoD,MAAMP,MAAMQ;CAClB,MAAMC,SAAST,MAAMS;CAIrB,IAAI,CAACF,IAAII,SAASF,MAAM,GAAG;CAE3B,MAAMG,cAAcH,OAAOI,QAAQf,oBAAoB;CAEvD,IAAIc,eAAeL,IAAII,SAASC,WAAW,GAAG;CAG9CZ,MAAMc,eAAe;CACrBZ,MAAMa,MAAM;AACd;;;;;;AAqGA,SAASyB,eAAeC,OAA+BC,KAAK;CAC1D,IAAI,EACF1D,IACA2D,MACAC,WACAC,SACAtF,QACAuF,YACAtB,WACAC,WACAC,YACAC,cACAC,UACAG,WACAC,kBACAe,OACAd,cAAc,CAAC,GACfzE,QACA8D,iBAAiB,UACjBC,SACAM,YACAK,MACAC,OAAO,UACPC,cACAC,cACAhB,MACA2B,WACAC,WACAC,MACAxD,QACA,GAAGyD,eACDV;CAEJ,IAAIxD,SAAS9C,cAAcgH,YAAYjE,WAAW;CAClD,IAAIkE,OAAOD,WAAWC;CAEtB,IAAI1D,QAEFuC,cAAcnH,YAAYmH,aAAa,EAAEvC,OAAO,CAAC;CAGnD,IAAI2D,cAAoC7B,YAAY,aAAa;CACjE,IAAI,EAAE8B,WAAWC,eAAerH,WAAS;CACzC,IAAI,EAAEsH,YAAYC,cAAc5H,SAAS,EAAEiH,WAAW,CAAC;CAGvD,IAAIY,SAASrJ,aAAawH,UAAU;CAEpCD,WAAW3F,gBAAgB2F,QAAQ;CAGnCnG,oBAAoBiH,YAAY;EAC9B,GAAGpI,mBAAmBoJ,QAAQ9B,QAAQ;EACtC+B,SAAS;GACP,IAAI/B,UAAUgC,SACZhC,SAASgC,QAAQD,OAAO;EAE5B;EACAE,kBAAkB;GAChB,OAAOjC,UAAUgC;EACnB;CACF,EAAE;CAEF,MAAME,0BAA0BzH,uBAAuB;EACrDuG;EACAC;EACAd;CACF,CAAC;CAGD,IAAI,CAACL,YAAYqC,aAAa;EAC5B,IAAI,CAACrC,YACHA,aAAa,CAAC;EAGhBA,WAAWqC,cAAc;CAC3B;CAEA,IAAI1C,MAAM;EACRA,OAAO,oBAAC,OAAD;GAAK,gBAAa;GAAaA,UAAAA;EAAU,CAAA;EAEhD,IAAI9D,QACFA,SACE,qBAAA,YAAA,EAAA,UAAA,CACG8D,MACA9D,MACH,EAAA,CAAA;OAGFA,SAAS8D;CAEb;CAEA,MAAM2C,YAAYtI,eACT;EACL,GAAGU,kBAAkB;GAAEwG;GAAWC;EAAQ,CAAC;EAC3CoB,UAAU,CAAC,CAACjC;EACZnE,SAASyF;EACTY,SAAST;EACTtG,UAAU2F;EACVxE,WAAWkD;EACXjE,QAAQ,CAAC,CAACA;EACVC,QAAQsG,2BAA2B,CAAC,CAACtG,UAAU,CAAC,CAAC+D;EACjD,GAAGoB;CACL,IACA;EACEA;EACAC;EACAC;EACAiB;EACA9B;EACAsB;EACAR;EACAW;EACAjC;EACAjE;EACAC;EACA+D;CAAO,CAEX;CAMA,MAAM4C,uBACJ/B,gBAAgBC,gBAAgBX,WAAWU;CAC7C,MAAMgC,oBAAoB3C,aAAaC,WAAWD;CAGlD,MAAM6C,qBADkB9C,aAAa4B,SAAS,cAEzB1B,WAAWqB,OAAOwB,SACjC,EACEC,YAAY,qBACd,IACA,CAAC;CAEP,MAAMC,YACJ,qBAAC,qBAAD;EACE,KAAKf;EACL,MAAMM;EACN,aAAW7B;EACHlD;EACR,GAAIjD,aAAW2F,cAAc,EAC3B+C,cAAc1E,UACZD,qBAAqBC,OAAO4B,UAAUgC,OAAO,EACjD,CAAC;EARH,UAAA;GAUGrG,SAAS,oBAAC,OAAD;IAAK,gBAAa;IAAUA,UAAAA;GAAY,CAAA,IAAI;GACtD,oBAAC,cAAD;IACE,IAAIyB,MAAM;IACV,IAAIqE;IACJ,mBAAgB;IAChB,GAAIrH,aAAW0F,YAAY6B,YAAYC,UAAU;IACjD,KAAK5B;IACL,MAAMJ,YAAaU,QAAQR,WAAWQ,QAAQ,IAAKR,WAAWQ;IAC9D,MAAM8B;IAEN,OAAOM;IACP,GAAKF,oBAAoB,EAAE,kBAAkB,GAAG,IAAIO,KAAAA;IACpD,WAAWP;IACX,aAAWjC;IACX,cAAcgC;IACd,QAAQlC;IACR,UAAU,CAAC,EAAEa,cAAcpB,WAAWvE;IACtC,WAAW6F,aAAatB,WAAWsB;IACnC,WAAWC,aAAavB,WAAWuB;GAAU,CAAA;GAE9Ca,2BAA2BtG,UAAU+D,UACpC,qBAAC,OAAD;IAAK,gBAAa;IAAlB,UAAA;KACGD,mBAAmB,WAAW9D,SAAS;KACvCuE,aAAaC,mBACZ,oBAAC,OAAD;MAAK,gBAAa;MAASA,UAAAA;KAAsB,CAAA,IAEjD,oBAAC,qBAAD;MACaY;MACFC;MACEd;KAAU,CAAA;KAGxBT,mBAAmB,UAAU9D,SAAS;KACtC+D;IACE;GACH,CAAA,IAAA;EACe;;CAGvB,OAAOhF,cAAckI,WAAWhC,KAAK;AACvC;AAEA,MAAMmC,gBAAgBxJ,WAAWoH,cAAc"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { formatColor, getContrastingColor, toHex } from "./color.js";
@@ -71,7 +71,7 @@ const TRACK_STYLES = {
 	Fill: false
 };
 /** A ring keeps the thumb visible wherever it sits on its own gradient. */
-const THUMB_STYLES = { shadow: "0 0 0 2bw #surface, 0 0 0 3bw #dark.2" };
+const THUMB_STYLES = { shadow: "0 0 0 (2 * $ring-width) #surface, 0 0 0 (3 * $ring-width) #dark.2" };
 const THUMB_TOKENS = { "#slider-thumb": "(#color-picker, #surface)" };
 const SPACE_STYLES = { width: "100%" };
 const TAB_STYLES = { flexGrow: 1 };
@@ -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 (2 * $ring-width) #surface, 0 0 0 (3 * $ring-width) #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.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | 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.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { ModernControllerContext } from "./modern/context.js";
 import { FormContext } from "./Form.js";