@cube-dev/ui-kit 0.179.0 → 0.180.0

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

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

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

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

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

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

package/dist/components/fields/Slider/types.d.ts

@@ -5,7 +5,7 @@ import { BasePropsWithoutChildren, BlockStyleProps, OuterStyleProps, Styles } fr
 import { AriaSliderProps } from "react-aria";
 
 //#region src/components/fields/Slider/types.d.ts
-interface CubeSliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'label'>, BasePropsWithoutChildren, OuterStyleProps, FieldBaseProps, BlockStyleProps {
+interface CubeSliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'label' | 'form'>, BasePropsWithoutChildren, OuterStyleProps, FieldBaseProps, BlockStyleProps {
   inputStyles?: Styles;
   gradation?: string[];
   inputWidth?: string;

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

@@ -7,6 +7,8 @@ import { AriaSwitchProps, useSwitch } from "react-aria";
 
 //#region src/components/fields/Switch/Switch.d.ts
 interface CubeSwitchProps extends BaseProps, OuterStyleProps, BlockStyleProps, FieldBaseProps, ToggleSelectionProps, AriaSwitchProps {
+  /** The form instance; redeclared for the same reason as in `Checkbox`. */
+  form?: FieldBaseProps['form'];
   inputStyles?: Styles;
   isLoading?: boolean;
   size?: 'large' | 'medium' | 'small';

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["useId","useFocus","mergeProps","Text"],"sources":["../../../../src/components/fields/Switch/Switch.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport { AriaSwitchProps, useHover, useSwitch } from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { useId } from '../../../utils/react/useId';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nconst SwitchWrapperElement = tasty({\n  as: 'label',\n  styles: {\n    display: 'flex',\n    position: 'relative',\n    placeItems: {\n      '': 'center stretch',\n      'side-label': 'baseline stretch',\n    },\n    gap: '1x',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst SwitchElement = tasty({\n  qa: 'Switch',\n  styles: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    verticalAlign: 'baseline',\n    placeSelf: 'center',\n    radius: 'round',\n    fill: {\n      '': '#surface',\n      checked: '#primary',\n      'invalid & checked': '#danger',\n      'valid & checked': '#success',\n      disabled: '#border.5',\n      'disabled & checked': '#border',\n    },\n    color: {\n      '': '#dark-03',\n      checked: '#white',\n    },\n    border: {\n      '': '#dark-05',\n      checked: '#primary-text',\n      disabled: '#dark-05.5',\n      invalid: '#danger',\n      valid: '#success',\n    },\n    width: {\n      '': '5x 5x',\n      'size=medium': '4x 4x',\n      'size=small': '3x 3x',\n    },\n    height: {\n      '': '3x 3x',\n      'size=medium': '2.5x 2.5x',\n      'size=small': '2x 2x',\n    },\n    outline: {\n      '': '#primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 1,\n    transition: 'theme',\n    cursor: '$pointer',\n\n    Thumb: {\n      position: 'absolute',\n      width: {\n        '': '2x 2x',\n        'size=medium': '1.5x 1.5x',\n        'size=small': '1.25x 1.25x',\n      },\n      height: {\n        '': '2x 2x',\n        'size=medium': '1.5x 1.5x',\n        'size=small': '1.25x 1.25x',\n      },\n      radius: 'round',\n      fill: {\n        '': '#current',\n        disabled: '#current.5',\n        'disabled & checked': '#white.8',\n      },\n      top: {\n        '': '.375x',\n        'size=medium': '.375x',\n        'size=small': '.25x',\n      },\n      left: {\n        '': '.375x',\n        'size=medium': '.375x',\n        'size=small': '.25x',\n        checked: '2.25x',\n        'checked & size=medium': '1.75x',\n        'checked & size=small': '1.25x',\n      },\n      transition: 'left, theme',\n      cursor: '$pointer',\n    },\n  },\n});\n\nconst PROP_STYLES = [...OUTER_STYLES, ...BLOCK_STYLES];\n\nexport interface CubeSwitchProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps,\n    ToggleSelectionProps,\n    AriaSwitchProps {\n  inputStyles?: Styles;\n  isLoading?: boolean;\n  size?: 'large' | 'medium' | 'small';\n}\n\nfunction Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {\n  props = castNullableIsSelected(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value != null ? value : false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n  });\n\n  let {\n    qa,\n    isDisabled = false,\n    children,\n    label,\n    insideForm,\n    isLoading,\n    labelPosition,\n    inputStyles,\n    isInvalid,\n    isValid,\n    size = 'medium',\n    form,\n  } = props;\n\n  const id = useId(props.id);\n\n  let styles = extractStyles(props, PROP_STYLES);\n\n  let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let { inputProps } = useSwitch(props, useToggleState(props), inputRef);\n\n  const mods = {\n    checked: inputProps.checked,\n    disabled: isDisabled,\n    hovered: isHovered,\n    focused: isFocused,\n    ...getValidationMods({ isInvalid, isValid }),\n    'inside-form': insideForm,\n    'side-label': labelPosition === 'side',\n  };\n\n  const switchField = (\n    <SwitchWrapperElement\n      qa=\"SwitchWrapper\"\n      mods={mods}\n      data-size={size}\n      styles={styles}\n      {...hoverProps}\n    >\n      <HiddenInput\n        qa={qa || 'Switch'}\n        data-input-type=\"switch\"\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n        id={id}\n      />\n      <SwitchElement mods={mods} data-size={size} styles={inputStyles}>\n        <div data-element=\"Thumb\" aria-hidden=\"true\" />\n      </SwitchElement>\n      {children ? <Text nowrap>{children}</Text> : null}\n      {isLoading ? (\n        <>\n          {label ? <>&nbsp;</> : null}\n          <LoadingIcon />\n        </>\n      ) : null}\n    </SwitchWrapperElement>\n  );\n\n  return wrapWithField(switchField, domRef, {\n    ...props,\n    id,\n    labelProps: {\n      ...props.labelProps,\n      for: id,\n    },\n    children: null,\n    inputStyles,\n  });\n}\n\n/**\n * Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = forwardRef(Switch);\n\n(_Switch as any).cubeInputType = 'Checkbox';\n_Switch.displayName = 'Switch';\n\nexport { _Switch as Switch };\nexport type { AriaSwitchProps };\nexport { useSwitch };\n"],"mappings":"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"}
+{"version":3,"file":"Switch.js","names":["useId","useFocus","mergeProps","Text"],"sources":["../../../../src/components/fields/Switch/Switch.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport { AriaSwitchProps, useHover, useSwitch } from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { useId } from '../../../utils/react/useId';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nconst SwitchWrapperElement = tasty({\n  as: 'label',\n  styles: {\n    display: 'flex',\n    position: 'relative',\n    placeItems: {\n      '': 'center stretch',\n      'side-label': 'baseline stretch',\n    },\n    gap: '1x',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst SwitchElement = tasty({\n  qa: 'Switch',\n  styles: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    verticalAlign: 'baseline',\n    placeSelf: 'center',\n    radius: 'round',\n    fill: {\n      '': '#surface',\n      checked: '#primary',\n      'invalid & checked': '#danger',\n      'valid & checked': '#success',\n      disabled: '#border.5',\n      'disabled & checked': '#border',\n    },\n    color: {\n      '': '#dark-03',\n      checked: '#white',\n    },\n    border: {\n      '': '#dark-05',\n      checked: '#primary-text',\n      disabled: '#dark-05.5',\n      invalid: '#danger',\n      valid: '#success',\n    },\n    width: {\n      '': '5x 5x',\n      'size=medium': '4x 4x',\n      'size=small': '3x 3x',\n    },\n    height: {\n      '': '3x 3x',\n      'size=medium': '2.5x 2.5x',\n      'size=small': '2x 2x',\n    },\n    outline: {\n      '': '#primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 1,\n    transition: 'theme',\n    cursor: '$pointer',\n\n    Thumb: {\n      position: 'absolute',\n      width: {\n        '': '2x 2x',\n        'size=medium': '1.5x 1.5x',\n        'size=small': '1.25x 1.25x',\n      },\n      height: {\n        '': '2x 2x',\n        'size=medium': '1.5x 1.5x',\n        'size=small': '1.25x 1.25x',\n      },\n      radius: 'round',\n      fill: {\n        '': '#current',\n        disabled: '#current.5',\n        'disabled & checked': '#white.8',\n      },\n      top: {\n        '': '.375x',\n        'size=medium': '.375x',\n        'size=small': '.25x',\n      },\n      left: {\n        '': '.375x',\n        'size=medium': '.375x',\n        'size=small': '.25x',\n        checked: '2.25x',\n        'checked & size=medium': '1.75x',\n        'checked & size=small': '1.25x',\n      },\n      transition: 'left, theme',\n      cursor: '$pointer',\n    },\n  },\n});\n\nconst PROP_STYLES = [...OUTER_STYLES, ...BLOCK_STYLES];\n\nexport interface CubeSwitchProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps,\n    ToggleSelectionProps,\n    AriaSwitchProps {\n  /** The form instance; redeclared for the same reason as in `Checkbox`. */\n  form?: FieldBaseProps['form'];\n  inputStyles?: Styles;\n  isLoading?: boolean;\n  size?: 'large' | 'medium' | 'small';\n}\n\nfunction Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {\n  props = castNullableIsSelected(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value != null ? value : false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n  });\n\n  let {\n    qa,\n    isDisabled = false,\n    children,\n    label,\n    insideForm,\n    isLoading,\n    labelPosition,\n    inputStyles,\n    isInvalid,\n    isValid,\n    size = 'medium',\n    form,\n  } = props;\n\n  const id = useId(props.id);\n\n  let styles = extractStyles(props, PROP_STYLES);\n\n  let { isFocused, focusProps } = useFocus({ isDisabled }, true);\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let { inputProps } = useSwitch(props, useToggleState(props), inputRef);\n\n  const mods = {\n    checked: inputProps.checked,\n    disabled: isDisabled,\n    hovered: isHovered,\n    focused: isFocused,\n    ...getValidationMods({ isInvalid, isValid }),\n    'inside-form': insideForm,\n    'side-label': labelPosition === 'side',\n  };\n\n  const switchField = (\n    <SwitchWrapperElement\n      qa=\"SwitchWrapper\"\n      mods={mods}\n      data-size={size}\n      styles={styles}\n      {...hoverProps}\n    >\n      <HiddenInput\n        qa={qa || 'Switch'}\n        data-input-type=\"switch\"\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n        id={id}\n      />\n      <SwitchElement mods={mods} data-size={size} styles={inputStyles}>\n        <div data-element=\"Thumb\" aria-hidden=\"true\" />\n      </SwitchElement>\n      {children ? <Text nowrap>{children}</Text> : null}\n      {isLoading ? (\n        <>\n          {label ? <>&nbsp;</> : null}\n          <LoadingIcon />\n        </>\n      ) : null}\n    </SwitchWrapperElement>\n  );\n\n  return wrapWithField(switchField, domRef, {\n    ...props,\n    id,\n    labelProps: {\n      ...props.labelProps,\n      for: id,\n    },\n    children: null,\n    inputStyles,\n  });\n}\n\n/**\n * Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = forwardRef(Switch);\n\n(_Switch as any).cubeInputType = 'Checkbox';\n_Switch.displayName = 'Switch';\n\nexport { _Switch as Switch };\nexport type { AriaSwitchProps };\nexport { useSwitch };\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.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.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.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.d.ts

@@ -10,7 +10,7 @@ import { AriaNumberFieldProps, AriaTextFieldProps as AriaTextFieldProps$1 } from
 //#region src/components/fields/TextInput/TextInputBase.d.ts
 declare const INPUT_WRAPPER_STYLES: Styles;
 declare const DEFAULT_INPUT_STYLES: Styles;
-interface CubeTextInputBaseProps extends BaseProps, OuterStyleProps, BlockStyleProps, BaseStyleProps, ColorStyleProps, Omit<AriaTextFieldProps$1, 'validate'>, FieldBaseProps {
+interface CubeTextInputBaseProps extends BaseProps, OuterStyleProps, BlockStyleProps, BaseStyleProps, ColorStyleProps, Omit<AriaTextFieldProps$1, 'validate' | 'form'>, FieldBaseProps {
   validate?: AriaTextFieldProps$1['validate'] | AriaNumberFieldProps['validate'];
   /** Left input icon */
   icon?: ReactElement | null;

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.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";

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

@@ -1 +1 @@
-{"version":3,"file":"TextInputBase.js","names":["useFocus","mergeProps"],"sources":["../../../../src/components/fields/TextInput/TextInputBase.tsx"],"sourcesContent":["import { 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  forwardRef,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { AriaNumberFieldProps, AriaTextFieldProps, useHover } from 'react-aria';\n\nimport { FieldBaseProps } 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\nexport interface CubeTextInputBaseProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    BaseStyleProps,\n    ColorStyleProps,\n    Omit<AriaTextFieldProps, 'validate'>,\n    FieldBaseProps {\n  validate?: AriaTextFieldProps['validate'] | AriaNumberFieldProps['validate'];\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  /** Whether the input is multiline */\n  multiLine?: boolean;\n  /** Whether the input should have autofocus */\n  autoFocus?: boolean;\n  /** Direct input props */\n  inputProps?: Props;\n  /** Direct input wrapper props */\n  wrapperProps?: Props;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>;\n  /** The wrapper ref */\n  wrapperRef?: RefObject<HTMLDivElement>;\n  /** Whether the input has the loading status */\n  isLoading?: boolean;\n  /** The loading status indicator */\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    wrapperRef,\n    tooltip,\n    rows = 1,\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({ isDisabled });\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n  let domRef = useRef(null);\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,\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    ],\n  );\n\n  // `autoComplete` is the prop; `autocomplete` is the deprecated alias. Falling back to\n  // `inputProps` matters as much as the aliasing: this attribute is applied after the merge, so a\n  // bare `autoComplete={resolved}` would overwrite whatever the React Aria hook put there —\n  // `useNumberField`'s own `off`, or an `inputProps={{ autoComplete }}` passed by the caller — with\n  // `undefined` whenever neither prop is set.\n  const resolvedAutoComplete =\n    autoComplete ?? autocomplete ?? inputProps.autoComplete;\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={wrapperRef}\n      mods={modifiers}\n      data-size={size}\n      styles={styles}\n      {...wrapperProps}\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 : undefined}\n        mods={modifiers}\n        style={textSecurityStyles}\n        data-autofocus={autoFocus ? '' : undefined}\n        autoFocus={autoFocus}\n        data-size={size}\n        autoComplete={resolvedAutoComplete}\n        styles={inputStyles}\n        disabled={!!isDisabled}\n        maxLength={maxLength}\n        minLength={minLength}\n      />\n      {showValidationIndicator || suffix ? (\n        <div data-element=\"Suffix\">\n          {suffixPosition === 'before' ? suffix : null}\n          <ValidationIndicator\n            isInvalid={isInvalid}\n            isValid={isValid}\n            isLoading={isLoading}\n          />\n          {suffixPosition === 'after' ? suffix : null}\n        </div>\n      ) : null}\n    </InputWrapperElement>\n  );\n\n  return wrapWithField(textField, domRef, 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":["useFocus","mergeProps"],"sources":["../../../../src/components/fields/TextInput/TextInputBase.tsx"],"sourcesContent":["import { 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  forwardRef,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { AriaNumberFieldProps, AriaTextFieldProps, useHover } from 'react-aria';\n\nimport { FieldBaseProps } 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\nexport interface CubeTextInputBaseProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    BaseStyleProps,\n    ColorStyleProps,\n    Omit<AriaTextFieldProps, 'validate' | 'form'>,\n    FieldBaseProps {\n  validate?: AriaTextFieldProps['validate'] | AriaNumberFieldProps['validate'];\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  /** Whether the input is multiline */\n  multiLine?: boolean;\n  /** Whether the input should have autofocus */\n  autoFocus?: boolean;\n  /** Direct input props */\n  inputProps?: Props;\n  /** Direct input wrapper props */\n  wrapperProps?: Props;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>;\n  /** The wrapper ref */\n  wrapperRef?: RefObject<HTMLDivElement>;\n  /** Whether the input has the loading status */\n  isLoading?: boolean;\n  /** The loading status indicator */\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    wrapperRef,\n    tooltip,\n    rows = 1,\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({ isDisabled });\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n  let domRef = useRef(null);\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,\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    ],\n  );\n\n  // `autoComplete` is the prop; `autocomplete` is the deprecated alias. Falling back to\n  // `inputProps` matters as much as the aliasing: this attribute is applied after the merge, so a\n  // bare `autoComplete={resolved}` would overwrite whatever the React Aria hook put there —\n  // `useNumberField`'s own `off`, or an `inputProps={{ autoComplete }}` passed by the caller — with\n  // `undefined` whenever neither prop is set.\n  const resolvedAutoComplete =\n    autoComplete ?? autocomplete ?? inputProps.autoComplete;\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={wrapperRef}\n      mods={modifiers}\n      data-size={size}\n      styles={styles}\n      {...wrapperProps}\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 : undefined}\n        mods={modifiers}\n        style={textSecurityStyles}\n        data-autofocus={autoFocus ? '' : undefined}\n        autoFocus={autoFocus}\n        data-size={size}\n        autoComplete={resolvedAutoComplete}\n        styles={inputStyles}\n        disabled={!!isDisabled}\n        maxLength={maxLength}\n        minLength={minLength}\n      />\n      {showValidationIndicator || suffix ? (\n        <div data-element=\"Suffix\">\n          {suffixPosition === 'before' ? suffix : null}\n          <ValidationIndicator\n            isInvalid={isInvalid}\n            isValid={isValid}\n            isLoading={isLoading}\n          />\n          {suffixPosition === 'after' ? suffix : null}\n        </div>\n      ) : null}\n    </InputWrapperElement>\n  );\n\n  return wrapWithField(textField, domRef, props);\n}\n\nconst TextInputBase = forwardRef(_TextInputBase);\n\nexport { TextInputBase };\nexport type { AriaTextFieldProps };\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
 

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

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

package/dist/components/fields/TriggerActions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { ItemActionIcon } from "../actions/ItemActionsWrapper.js";
 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.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { formatColor, getContrastingColor, toHex } from "./color.js";
 import { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS } from "./channels.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { maxChroma, normalizeHue, oklchToOkhsl } from "../../../utils/colors.js";
 import { fromOkhst, fromRgb, isAchromatic, toHex, toOkhst, toOklch, toRgb } from "./color.js";
 

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.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";
 

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
 import { isDevEnv } from "../../../utils/is-dev-env.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.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.d.ts

@@ -3,12 +3,48 @@ import { FormBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { FieldTypes } from "./types.js";
 import { CubeFormData, CubeFormInstance } from "./use-form.js";
+import { ModernFormProps } from "./ModernFormRoot.js";
 import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
 import * as react from "react";
-import { FormHTMLAttributes, ReactElement, Ref } from "react";
+import { ContextType, FormHTMLAttributes, ReactElement, ReactNode, Ref } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/form/Form/Form.d.ts
+/**
+ * Public legacy context. Its value is the full legacy scope (presentation
+ * props, the instance, `submitError`, `idPrefix`) and is part of the exported
+ * contract: wrappers outside the kit read it and Radio/Checkbox groups mask it.
+ */
 declare const FormContext: react.Context<{}>;
+/**
+ * Scope the inputs below to a new form context. Radio/Checkbox groups use it
+ * for their options: they see the group's validation state, but neither the
+ * surrounding form's presentation props nor its instance, so a nested `name`
+ * never registers as an independent field. Wrappers that used to override
+ * `FormContext` directly for the same purpose should render this instead — a
+ * bare `FormContext.Provider` no longer masks the presentation context.
+ */
+declare function FormScopeMask({
+  value,
+  children
+}: {
+  value: ContextType<typeof FormContext>;
+  children?: ReactNode;
+}): react_jsx_runtime0.JSX.Element;
+/** Separate overloads retain contextual callback typing for each backend. */
+interface FormRootComponent {
+  <T extends FieldTypes = FieldTypes>(props: CubeFormProps<T> & {
+    ref?: Ref<HTMLFormElement>;
+  }): ReactElement;
+  <T extends FieldTypes = FieldTypes>(props: ModernFormProps<T> & {
+    ref?: Ref<HTMLFormElement>;
+  }): ReactElement;
+}
+/**
+ * Merge order: presentation context, then the legacy `FormContext`, then the
+ * props. Under a legacy root the two contexts carry the same presentation
+ * values, so the result is exactly `{ ...FormContext, ...props }` as before.
+ */
 declare function useFormProps(props: any): any;
 interface CubeFormProps<T extends FieldTypes = FieldTypes> extends FormBaseProps, BaseProps, ContainerStyleProps, Pick<FormHTMLAttributes<HTMLFormElement>, 'action' | 'autoComplete' | 'encType' | 'method' | 'target'> {
   /** Form name */
@@ -28,5 +64,5 @@ interface CubeFormProps<T extends FieldTypes = FieldTypes> extends FormBaseProps
   orientation?: 'vertical' | 'horizontal';
 }
 //#endregion
-export { CubeFormProps, FormContext, useFormProps };
+export { CubeFormProps, FormContext, FormRootComponent, FormScopeMask, useFormProps };
 //# sourceMappingURL=Form.d.ts.map

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

@@ -1,9 +1,12 @@
-/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { Provider, useProviderProps } from "../../../provider.js";
 import { useValidationProps } from "../validation/use-validation-props.js";
 import { timeout } from "../../../utils/promise.js";
+import { isModernFormController } from "./backend.js";
+import { ModernControllerContext } from "./modern/context.js";
+import { _ModernFormRoot } from "./ModernFormRoot.js";
 import { useForm } from "./use-form.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { createContext, forwardRef, useContext, useRef } from "react";
@@ -11,7 +14,34 @@ import { jsx } from "react/jsx-runtime";
 import { useObjectRef } from "@react-aria/utils";
 
 //#region src/components/form/Form/Form.tsx
+/**
+* Public legacy context. Its value is the full legacy scope (presentation
+* props, the instance, `submitError`, `idPrefix`) and is part of the exported
+* contract: wrappers outside the kit read it and Radio/Checkbox groups mask it.
+*/
 const FormContext = createContext({});
+const EMPTY_PRESENTATION = {};
+const FormPresentationContext = createContext(EMPTY_PRESENTATION);
+/**
+* Scope the inputs below to a new form context. Radio/Checkbox groups use it
+* for their options: they see the group's validation state, but neither the
+* surrounding form's presentation props nor its instance, so a nested `name`
+* never registers as an independent field. Wrappers that used to override
+* `FormContext` directly for the same purpose should render this instead — a
+* bare `FormContext.Provider` no longer masks the presentation context.
+*/
+function FormScopeMask({ value, children }) {
+	return /* @__PURE__ */ jsx(ModernControllerContext.Provider, {
+		value: null,
+		children: /* @__PURE__ */ jsx(FormPresentationContext.Provider, {
+			value: EMPTY_PRESENTATION,
+			children: /* @__PURE__ */ jsx(FormContext.Provider, {
+				value,
+				children
+			})
+		})
+	});
+}
 const FormElement = tasty({
 	as: "form",
 	qa: "Form",
@@ -32,9 +62,19 @@ const FormElement = tasty({
 		"$label-width": "25x"
 	}
 });
+/**
+* Merge order: presentation context, then the legacy `FormContext`, then the
+* props. Under a legacy root the two contexts carry the same presentation
+* values, so the result is exactly `{ ...FormContext, ...props }` as before.
+*/
 function useFormProps(props) {
+	const presentation = useContext(FormPresentationContext);
+	const ctx = useContext(FormContext);
+	const modern = useContext(ModernControllerContext);
 	return {
-		...useContext(FormContext),
+		...presentation,
+		...modern ? { form: modern } : {},
+		...ctx,
 		...props
 	};
 }
@@ -45,7 +85,11 @@ const formPropNames = new Set([
 	"method",
 	"target"
 ]);
-function Form(props, ref) {
+/**
+* The legacy backend's root: the current engine under an internal name. Its
+* role is compatibility; see `legacy-contract/README.md` for what is frozen.
+*/
+function LegacyFormRoot(props, ref) {
 	props = useValidationProps(useProviderProps(props));
 	let { qa, name, children, labelPosition, orientation, necessityIndicator, isDisabled, isReadOnly, isInvalid, isValid, labelStyles, validateTrigger, showValid, defaultValues, onValuesChange, requiredMark = true, form, labelWidth, onSubmit, onSubmitFailed, ...otherProps } = props;
 	const defaultValuesRef = useRef(defaultValues);
@@ -93,7 +137,7 @@ function Form(props, ref) {
 	let styles = extractStyles(otherProps, CONTAINER_STYLES);
 	if (labelWidth) styles["$label-width"] = labelWidth;
 	let domRef = useObjectRef(ref);
-	let ctx = {
+	const presentation = {
 		labelPosition,
 		labelStyles,
 		orientation,
@@ -101,10 +145,13 @@ function Form(props, ref) {
 		validateTrigger,
 		requiredMark,
 		showValid,
-		form,
-		submitError: form.submitError,
 		idPrefix: name
 	};
+	let ctx = {
+		...presentation,
+		form,
+		submitError: form.submitError
+	};
 	if (firstRunRef.current && form) {
 		if (defaultValues) {
 			form.setInitialFieldsValue(defaultValues);
@@ -128,19 +175,42 @@ function Form(props, ref) {
 			horizontal: isHorizontal
 		},
 		onSubmit: onSubmitCallback,
-		children: /* @__PURE__ */ jsx(FormContext.Provider, {
-			value: ctx,
-			children: /* @__PURE__ */ jsx(Provider, {
-				insideForm: true,
-				isDisabled,
-				isReadOnly,
-				isInvalid,
-				isValid,
-				children
+		children: /* @__PURE__ */ jsx(ModernControllerContext.Provider, {
+			value: null,
+			children: /* @__PURE__ */ jsx(FormPresentationContext.Provider, {
+				value: presentation,
+				children: /* @__PURE__ */ jsx(FormContext.Provider, {
+					value: ctx,
+					children: /* @__PURE__ */ jsx(Provider, {
+						insideForm: true,
+						isDisabled,
+						isReadOnly,
+						isInvalid,
+						isValid,
+						children
+					})
+				})
 			})
 		})
 	});
 }
+const _LegacyFormRoot = forwardRef(LegacyFormRoot);
+_LegacyFormRoot.displayName = "LegacyFormRoot";
+/**
+* The `<Form>` facade. It chooses the root by the brand of the `form` prop
+* before any backend hook runs. Without an explicit modern controller it is
+* the legacy root, so existing `<Form>` and `Form.useForm()` keep their behavior.
+*/
+function Form(props, ref) {
+	if (isModernFormController(props.form)) return /* @__PURE__ */ jsx(_ModernFormRoot, {
+		...props,
+		ref
+	});
+	return /* @__PURE__ */ jsx(_LegacyFormRoot, {
+		...props,
+		ref
+	});
+}
 /**
 * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
 */
@@ -148,5 +218,5 @@ const _Form = forwardRef(Form);
 _Form.displayName = "Form";
 
 //#endregion
-export { FormContext, _Form, useFormProps };
+export { FormContext, FormElement, FormPresentationContext, FormScopeMask, _Form, formPropNames, useFormProps };
 //# sourceMappingURL=Form.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Form.js","names":[],"sources":["../../../../src/components/form/Form/Form.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  createContext,\n  FormHTMLAttributes,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Provider, useProviderProps } from '../../../provider';\nimport { FormBaseProps } from '../../../shared/index';\nimport { timeout } from '../../../utils/promise';\nimport { useCombinedRefs } from '../../../utils/react/index';\nimport { extractStyles } from '../../../utils/styles';\nimport { useValidationProps } from '../validation/index';\n\nimport { FieldTypes } from './types';\nimport { CubeFormData, CubeFormInstance, useForm } from './use-form';\n\nexport const FormContext = createContext({});\n\nconst FormElement = tasty({\n  as: 'form',\n  qa: 'Form',\n  styles: {\n    display: {\n      '': 'block',\n      horizontal: 'flex',\n    },\n    flow: {\n      '': 'column',\n      horizontal: 'row',\n    },\n    placeItems: {\n      '': 'initial',\n      horizontal: 'center',\n    },\n    gap: '2x',\n    '$label-width': '25x',\n  },\n});\n\nexport function useFormProps(props) {\n  const ctx = useContext(FormContext);\n\n  return { ...ctx, ...props };\n}\n\nconst formPropNames = new Set([\n  'action',\n  'autoComplete',\n  'encType',\n  'method',\n  'target',\n]);\n\nexport interface CubeFormProps<T extends FieldTypes = FieldTypes>\n  extends FormBaseProps,\n    BaseProps,\n    ContainerStyleProps,\n    Pick<\n      FormHTMLAttributes<HTMLFormElement>,\n      'action' | 'autoComplete' | 'encType' | 'method' | 'target'\n    > {\n  /** Form name */\n  name?: string;\n  /** Default field values */\n  defaultValues?: Partial<T>;\n  /** Trigger when any value of the Field is changed */\n  onValuesChange?: CubeFormInstance<T>['onValuesChange'];\n  /** Trigger on form submit and success */\n  onSubmit?: CubeFormInstance<T>['onSubmit'];\n  /** Trigger on form submit and failed */\n  onSubmitFailed?: (any?) => void | Promise<any>;\n  /** Set form instance created by useForm */\n  form?: CubeFormInstance<T, CubeFormData<T>>;\n  /** The size of the side area with labels. Only for `labelPosition=\"side\"` */\n  labelWidth?: Styles['width'];\n  orientation?: 'vertical' | 'horizontal';\n}\n\nfunction Form<T extends FieldTypes>(\n  props: CubeFormProps<T>,\n  ref: Ref<HTMLFormElement>,\n) {\n  props = useValidationProps(useProviderProps(props));\n  let {\n    qa,\n    name,\n    children,\n    labelPosition,\n    orientation,\n    necessityIndicator,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isValid,\n    labelStyles,\n    validateTrigger,\n    showValid,\n    defaultValues,\n    onValuesChange,\n    requiredMark = true,\n    form,\n    labelWidth,\n    onSubmit,\n    onSubmitFailed,\n    ...otherProps\n  } = props;\n  const defaultValuesRef = useRef(defaultValues);\n  const firstRunRef = useRef(true);\n  const isHorizontal = orientation === 'horizontal';\n\n  if (!orientation) {\n    orientation = 'vertical';\n  }\n\n  if (!labelPosition) {\n    labelPosition = isHorizontal ? 'side' : 'top';\n  }\n\n  if (!labelWidth) {\n    labelWidth = isHorizontal ? 'auto' : undefined;\n  }\n\n  ref = useCombinedRefs(ref);\n\n  let onSubmitCallback;\n\n  if ((onSubmit || onSubmitFailed) && !otherProps.action) {\n    onSubmitCallback = async (e) => {\n      if (e && e?.preventDefault) {\n        e && e?.preventDefault && e?.preventDefault();\n        e && e?.stopPropagation && e?.stopPropagation();\n\n        if (e.nativeEvent) {\n          const evt = e.nativeEvent;\n\n          if (\n            evt.submitter &&\n            evt.submitter.getAttribute('type') !== 'submit'\n          ) {\n            return;\n          }\n        }\n      }\n\n      if (!form || form.isSubmitting) return;\n\n      form.submitError = null;\n      form.setSubmitting(true);\n\n      try {\n        try {\n          await form.validateFields();\n        } catch (e) {\n          form?.setSubmitting(false);\n\n          return;\n        }\n\n        await timeout();\n        await onSubmit?.(form.getFormData());\n      } catch (e) {\n        await timeout();\n\n        // errors are shown\n        form.submitError = e as ReactNode;\n        // transfer errors to the callback\n        onSubmitFailed?.(e);\n\n        if (e instanceof Error) {\n          throw e;\n        }\n      } finally {\n        form?.setSubmitting(false);\n      }\n\n      // output data from form directly\n      // onSubmit(Object.fromEntries(new FormData(e.target).entries()));\n    };\n  }\n\n  [form] = useForm<T>(form, ref && ref.current, {\n    onSubmit: onSubmitCallback,\n    onValuesChange,\n  });\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  if (labelWidth) {\n    styles['$label-width'] = labelWidth;\n  }\n\n  let domRef = useObjectRef(ref);\n\n  let ctx = {\n    labelPosition,\n    labelStyles,\n    orientation,\n    necessityIndicator,\n    validateTrigger,\n    requiredMark,\n    showValid,\n    form,\n    submitError: form.submitError,\n    idPrefix: name,\n  };\n\n  if (firstRunRef.current && form) {\n    if (defaultValues) {\n      form.setInitialFieldsValue(defaultValues);\n      form.resetFields(undefined, true);\n      firstRunRef.current = false;\n    }\n  }\n\n  if (defaultValuesRef.current !== defaultValues) {\n    form?.setInitialFieldsValue(defaultValues ?? {});\n    defaultValuesRef.current = defaultValues;\n  }\n\n  return (\n    <FormElement\n      {...filterBaseProps(otherProps, { propNames: formPropNames })}\n      ref={domRef}\n      noValidate\n      qa={qa}\n      styles={styles}\n      mods={{\n        'has-sider': labelPosition === 'side',\n        'has-split': labelPosition === 'split',\n        horizontal: isHorizontal,\n      }}\n      onSubmit={onSubmitCallback}\n    >\n      <FormContext.Provider value={ctx}>\n        <Provider\n          insideForm={true}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isInvalid={isInvalid}\n          isValid={isValid}\n        >\n          {children}\n        </Provider>\n      </FormContext.Provider>\n    </FormElement>\n  );\n}\n\n/**\n * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.\n */\nconst _Form = forwardRef(Form) as unknown as <T extends FieldTypes>(\n  props: CubeFormProps<T> & { ref?: Ref<HTMLFormElement> },\n) => ReactElement;\n\n(_Form as any).displayName = 'Form';\n\nexport { _Form as Form };\n"],"mappings":"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"}
+{"version":3,"file":"Form.js","names":["ModernFormRoot"],"sources":["../../../../src/components/form/Form/Form.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ContextType,\n  createContext,\n  FormHTMLAttributes,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Provider, useProviderProps } from '../../../provider';\nimport { FormBaseProps } from '../../../shared/index';\nimport { timeout } from '../../../utils/promise';\nimport { useCombinedRefs } from '../../../utils/react/index';\nimport { extractStyles } from '../../../utils/styles';\nimport { useValidationProps } from '../validation/index';\n\nimport { isModernFormController } from './backend';\nimport { ModernControllerContext } from './modern/context';\nimport { ModernFormRoot } from './ModernFormRoot';\nimport { FieldTypes } from './types';\nimport { CubeFormData, CubeFormInstance, useForm } from './use-form';\n\nimport type { ModernFormProps } from './ModernFormRoot';\n\n/**\n * Public legacy context. Its value is the full legacy scope (presentation\n * props, the instance, `submitError`, `idPrefix`) and is part of the exported\n * contract: wrappers outside the kit read it and Radio/Checkbox groups mask it.\n */\nexport const FormContext = createContext({});\n\n/**\n * Presentation and configuration that any root — legacy or modern — hands to\n * the fields below it. Backend-neutral by construction: no instance in here.\n */\nexport interface FormPresentationContextValue {\n  labelPosition?: FormBaseProps['labelPosition'];\n  labelStyles?: FormBaseProps['labelStyles'];\n  orientation?: 'vertical' | 'horizontal';\n  necessityIndicator?: FormBaseProps['necessityIndicator'];\n  validateTrigger?: FormBaseProps['validateTrigger'];\n  requiredMark?: boolean;\n  showValid?: boolean;\n  idPrefix?: string;\n}\n\nconst EMPTY_PRESENTATION: FormPresentationContextValue = {};\n\nexport const FormPresentationContext =\n  createContext<FormPresentationContextValue>(EMPTY_PRESENTATION);\n\n/**\n * Scope the inputs below to a new form context. Radio/Checkbox groups use it\n * for their options: they see the group's validation state, but neither the\n * surrounding form's presentation props nor its instance, so a nested `name`\n * never registers as an independent field. Wrappers that used to override\n * `FormContext` directly for the same purpose should render this instead — a\n * bare `FormContext.Provider` no longer masks the presentation context.\n */\nexport function FormScopeMask({\n  value,\n  children,\n}: {\n  value: ContextType<typeof FormContext>;\n  children?: ReactNode;\n}) {\n  return (\n    <ModernControllerContext.Provider value={null}>\n      <FormPresentationContext.Provider value={EMPTY_PRESENTATION}>\n        <FormContext.Provider value={value}>{children}</FormContext.Provider>\n      </FormPresentationContext.Provider>\n    </ModernControllerContext.Provider>\n  );\n}\n\n/** Separate overloads retain contextual callback typing for each backend. */\nexport interface FormRootComponent {\n  <T extends FieldTypes = FieldTypes>(\n    props: CubeFormProps<T> & { ref?: Ref<HTMLFormElement> },\n  ): ReactElement;\n  <T extends FieldTypes = FieldTypes>(\n    props: ModernFormProps<T> & { ref?: Ref<HTMLFormElement> },\n  ): ReactElement;\n}\n\nexport const FormElement = tasty({\n  as: 'form',\n  qa: 'Form',\n  styles: {\n    display: {\n      '': 'block',\n      horizontal: 'flex',\n    },\n    flow: {\n      '': 'column',\n      horizontal: 'row',\n    },\n    placeItems: {\n      '': 'initial',\n      horizontal: 'center',\n    },\n    gap: '2x',\n    '$label-width': '25x',\n  },\n});\n\n/**\n * Merge order: presentation context, then the legacy `FormContext`, then the\n * props. Under a legacy root the two contexts carry the same presentation\n * values, so the result is exactly `{ ...FormContext, ...props }` as before.\n */\nexport function useFormProps(props) {\n  const presentation = useContext(FormPresentationContext);\n  const ctx = useContext(FormContext);\n  const modern = useContext(ModernControllerContext);\n\n  return {\n    ...presentation,\n    ...(modern ? { form: modern } : {}),\n    ...ctx,\n    ...props,\n  };\n}\n\nexport const formPropNames = new Set([\n  'action',\n  'autoComplete',\n  'encType',\n  'method',\n  'target',\n]);\n\nexport interface CubeFormProps<T extends FieldTypes = FieldTypes>\n  extends FormBaseProps,\n    BaseProps,\n    ContainerStyleProps,\n    Pick<\n      FormHTMLAttributes<HTMLFormElement>,\n      'action' | 'autoComplete' | 'encType' | 'method' | 'target'\n    > {\n  /** Form name */\n  name?: string;\n  /** Default field values */\n  defaultValues?: Partial<T>;\n  /** Trigger when any value of the Field is changed */\n  onValuesChange?: CubeFormInstance<T>['onValuesChange'];\n  /** Trigger on form submit and success */\n  onSubmit?: CubeFormInstance<T>['onSubmit'];\n  /** Trigger on form submit and failed */\n  onSubmitFailed?: (any?) => void | Promise<any>;\n  /** Set form instance created by useForm */\n  form?: CubeFormInstance<T, CubeFormData<T>>;\n  /** The size of the side area with labels. Only for `labelPosition=\"side\"` */\n  labelWidth?: Styles['width'];\n  orientation?: 'vertical' | 'horizontal';\n}\n\n/**\n * The legacy backend's root: the current engine under an internal name. Its\n * role is compatibility; see `legacy-contract/README.md` for what is frozen.\n */\nfunction LegacyFormRoot<T extends FieldTypes>(\n  props: CubeFormProps<T>,\n  ref: Ref<HTMLFormElement>,\n) {\n  props = useValidationProps(useProviderProps(props));\n  let {\n    qa,\n    name,\n    children,\n    labelPosition,\n    orientation,\n    necessityIndicator,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isValid,\n    labelStyles,\n    validateTrigger,\n    showValid,\n    defaultValues,\n    onValuesChange,\n    requiredMark = true,\n    form,\n    labelWidth,\n    onSubmit,\n    onSubmitFailed,\n    ...otherProps\n  } = props;\n  const defaultValuesRef = useRef(defaultValues);\n  const firstRunRef = useRef(true);\n  const isHorizontal = orientation === 'horizontal';\n\n  if (!orientation) {\n    orientation = 'vertical';\n  }\n\n  if (!labelPosition) {\n    labelPosition = isHorizontal ? 'side' : 'top';\n  }\n\n  if (!labelWidth) {\n    labelWidth = isHorizontal ? 'auto' : undefined;\n  }\n\n  ref = useCombinedRefs(ref);\n\n  let onSubmitCallback;\n\n  if ((onSubmit || onSubmitFailed) && !otherProps.action) {\n    onSubmitCallback = async (e) => {\n      if (e && e?.preventDefault) {\n        e && e?.preventDefault && e?.preventDefault();\n        e && e?.stopPropagation && e?.stopPropagation();\n\n        if (e.nativeEvent) {\n          const evt = e.nativeEvent;\n\n          if (\n            evt.submitter &&\n            evt.submitter.getAttribute('type') !== 'submit'\n          ) {\n            return;\n          }\n        }\n      }\n\n      if (!form || form.isSubmitting) return;\n\n      form.submitError = null;\n      form.setSubmitting(true);\n\n      try {\n        try {\n          await form.validateFields();\n        } catch (e) {\n          form?.setSubmitting(false);\n\n          return;\n        }\n\n        await timeout();\n        await onSubmit?.(form.getFormData());\n      } catch (e) {\n        await timeout();\n\n        // errors are shown\n        form.submitError = e as ReactNode;\n        // transfer errors to the callback\n        onSubmitFailed?.(e);\n\n        if (e instanceof Error) {\n          throw e;\n        }\n      } finally {\n        form?.setSubmitting(false);\n      }\n\n      // output data from form directly\n      // onSubmit(Object.fromEntries(new FormData(e.target).entries()));\n    };\n  }\n\n  [form] = useForm<T>(form, ref && ref.current, {\n    onSubmit: onSubmitCallback,\n    onValuesChange,\n  });\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  if (labelWidth) {\n    styles['$label-width'] = labelWidth;\n  }\n\n  let domRef = useObjectRef(ref);\n\n  const presentation: FormPresentationContextValue = {\n    labelPosition,\n    labelStyles,\n    orientation,\n    necessityIndicator,\n    validateTrigger,\n    requiredMark,\n    showValid,\n    idPrefix: name,\n  };\n\n  let ctx = {\n    ...presentation,\n    form,\n    submitError: form.submitError,\n  };\n\n  if (firstRunRef.current && form) {\n    if (defaultValues) {\n      form.setInitialFieldsValue(defaultValues);\n      form.resetFields(undefined, true);\n      firstRunRef.current = false;\n    }\n  }\n\n  if (defaultValuesRef.current !== defaultValues) {\n    form?.setInitialFieldsValue(defaultValues ?? {});\n    defaultValuesRef.current = defaultValues;\n  }\n\n  return (\n    <FormElement\n      {...filterBaseProps(otherProps, { propNames: formPropNames })}\n      ref={domRef}\n      noValidate\n      qa={qa}\n      styles={styles}\n      mods={{\n        'has-sider': labelPosition === 'side',\n        'has-split': labelPosition === 'split',\n        horizontal: isHorizontal,\n      }}\n      onSubmit={onSubmitCallback}\n    >\n      <ModernControllerContext.Provider value={null}>\n        <FormPresentationContext.Provider value={presentation}>\n          <FormContext.Provider value={ctx}>\n            <Provider\n              insideForm={true}\n              isDisabled={isDisabled}\n              isReadOnly={isReadOnly}\n              isInvalid={isInvalid}\n              isValid={isValid}\n            >\n              {children}\n            </Provider>\n          </FormContext.Provider>\n        </FormPresentationContext.Provider>\n      </ModernControllerContext.Provider>\n    </FormElement>\n  );\n}\n\nconst _LegacyFormRoot = forwardRef(LegacyFormRoot) as unknown as <\n  T extends FieldTypes,\n>(\n  props: CubeFormProps<T> & { ref?: Ref<HTMLFormElement> },\n) => ReactElement;\n\n(_LegacyFormRoot as any).displayName = 'LegacyFormRoot';\n\n/**\n * The `<Form>` facade. It chooses the root by the brand of the `form` prop\n * before any backend hook runs. Without an explicit modern controller it is\n * the legacy root, so existing `<Form>` and `Form.useForm()` keep their behavior.\n */\nfunction Form<T extends FieldTypes>(\n  props: CubeFormProps<T> | ModernFormProps<T>,\n  ref: Ref<HTMLFormElement>,\n) {\n  if (isModernFormController(props.form)) {\n    return <ModernFormRoot {...(props as ModernFormProps<T>)} ref={ref} />;\n  }\n\n  return <_LegacyFormRoot {...(props as CubeFormProps<T>)} ref={ref} />;\n}\n\n/**\n * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.\n */\nconst _Form = forwardRef(Form) as unknown as FormRootComponent;\n\n(_Form as any).displayName = 'Form';\n\nexport { _Form as Form, _LegacyFormRoot as LegacyFormRoot };\n"],"mappings":"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"}

package/dist/components/form/Form/ModernFormRoot.d.ts

@@ -0,0 +1,19 @@
+
+import { FormCallbacks } from "./modern/types.js";
+import { FormController } from "./modern/controller.js";
+import { CubeFormProps } from "./Form.js";
+import { FormEvent, ReactElement, Ref } from "react";
+
+//#region src/components/form/Form/ModernFormRoot.d.ts
+/** Modern root owns callback bindings; subscriptions stay in descendants. */
+interface ModernFormProps<T extends object = Record<string, unknown>> extends Omit<CubeFormProps<T>, 'form' | 'defaultValues' | 'onSubmit' | 'onSubmitFailed' | 'onValuesChange'> {
+  form: FormController<T>;
+  defaultValues?: never;
+  onReset?: (event: FormEvent<HTMLFormElement>) => void;
+  onSubmit?: FormCallbacks<T>['onSubmit'];
+  onSubmitFailed?: FormCallbacks<T>['onSubmitFailed'];
+  onValuesChange?: FormCallbacks<T>['onValuesChange'];
+}
+//#endregion
+export { ModernFormProps };
+//# sourceMappingURL=ModernFormRoot.d.ts.map