npm - @cube-dev/ui-kit - Versions diffs - 0.0.0-canary-b0fb187 → 0.0.0-canary-6628277 - Mend

@cube-dev/ui-kit 0.0.0-canary-b0fb187 → 0.0.0-canary-6628277

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (601) hide show

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

	@@ -1 +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 ? <> </> : 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":";;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,uBAAuB,MAAM;CACjC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,UAAU;EACV,YAAY;GACV,IAAI;GACJ,cAAc;GACf;EACD,KAAK;EACL,OAAO;EACP,OAAO;EACR;CACF,CAAC;AAEF,MAAM,gBAAgB,MAAM;CAC1B,IAAI;CACJ,QAAQ;EACN,WAAW;EACX,UAAU;EACV,eAAe;EACf,WAAW;EACX,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,qBAAqB;GACrB,mBAAmB;GACnB,UAAU;GACV,sBAAsB;GACvB;EACD,OAAO;GACL,IAAI;GACJ,SAAS;GACV;EACD,QAAQ;GACN,IAAI;GACJ,SAAS;GACT,UAAU;GACV,SAAS;GACT,OAAO;GACR;EACD,OAAO;GACL,IAAI;GACJ,eAAe;GACf,cAAc;GACf;EACD,QAAQ;GACN,IAAI;GACJ,eAAe;GACf,cAAc;GACf;EACD,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EACD,eAAe;EACf,YAAY;EACZ,QAAQ;EAER,OAAO;GACL,UAAU;GACV,OAAO;IACL,IAAI;IACJ,eAAe;IACf,cAAc;IACf;GACD,QAAQ;IACN,IAAI;IACJ,eAAe;IACf,cAAc;IACf;GACD,QAAQ;GACR,MAAM;IACJ,IAAI;IACJ,UAAU;IACV,sBAAsB;IACvB;GACD,KAAK;IACH,IAAI;IACJ,eAAe;IACf,cAAc;IACf;GACD,MAAM;IACJ,IAAI;IACJ,eAAe;IACf,cAAc;IACd,SAAS;IACT,yBAAyB;IACzB,wBAAwB;IACzB;GACD,YAAY;GACZ,QAAQ;GACT;EACF;CACF,CAAC;AAEF,MAAM,cAAc,CAAC,GAAG,cAAc,GAAG,aAAa;~~AActD~~,SAAS,OAAO,OAA8C,KAAK;AACjE,SAAQ,uBAAuB,MAAM;AACrC,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C,YAAY,SAAS,OAAO,QAAQ;GACpC,iBAAiB;GACP;GACX;EACF,CAAC;CAEF,IAAI,EACF,IACA,aAAa,OACb,UACA,OACA,YACA,WACA,eACA,aACA,WACA,SACA,OAAO,UACP,SACE;CAEJ,MAAM,KAAKA,QAAM,MAAM,GAAG;CAE1B,IAAI,SAAS,cAAc,OAAO,YAAY;CAE9C,IAAI,EAAE,WAAW,eAAeC,WAAS,EAAE,YAAY,EAAE,KAAK;CAC9D,IAAI,EAAE,YAAY,cAAc,SAAS,EAAE,YAAY,CAAC;CAExD,IAAI,WAAW,OAAO,KAAK;CAC3B,IAAI,SAAS,gBAAgB,KAAK,SAAS;CAE3C,IAAI,EAAE,eAAe,UAAU,OAAO,eAAe,MAAM,EAAE,SAAS;CAEtE,MAAM,OAAO;EACX,SAAS,WAAW;EACpB,UAAU;EACV,SAAS;EACT,SAAS;EACT,GAAG,kBAAkB;GAAE;GAAW;GAAS,CAAC;EAC5C,eAAe;EACf,cAAc,kBAAkB;EACjC;AA8BD,QAAO,cA3BL,qBAAC;EACC,IAAG;EACG;EACN,aAAW;EACH;EACR,GAAI;;GAEJ,oBAAC;IACC,IAAI,MAAM;IACV,mBAAgB;IAChB,GAAIC,aAAW,YAAY,WAAW;IACtC,KAAK;IACD;KACJ;GACF,oBAAC;IAAoB;IAAM,aAAW;IAAM,QAAQ;cAClD,oBAAC;KAAI,gBAAa;KAAQ,eAAY;MAAS;KACjC;GACf,WAAW,oBAACC;IAAK;IAAQ;KAAgB,GAAG;GAC5C,YACC,8CACG,QAAQ,4CAAE,SAAS,GAAG,MACvB,oBAAC,gBAAc,IACd,GACD;;GACiB,EAGS,QAAQ;EACxC,GAAG;EACH;EACA,YAAY;GACV,GAAG,MAAM;GACT,KAAK;GACN;EACD,UAAU;EACV;EACD,CAAC;;;;;;AAOJ,IAAI,UAAU,WAAW,OAAO;AAEhC,AAAC,QAAgB,gBAAgB;AACjC,QAAQ,cAAc"}
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 /** 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 ? <> </> : 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b0fb187 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6628277 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b0fb187 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6628277 | 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b0fb187 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6628277 | 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 CHANGED Viewed

	@@ -1 +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":";;;;;;;;;;;;;;;AAsCA,MAAM,aAAa;CACjB,GAAG;CACH,SAAS;CACT,cAAc;CACd,YAAY;CACZ,UAAU;CACV,MAAM;CACN,KAAK;CACL,QAAQ;CACR,SAAS;EACP,IAAI;EACJ,UAAU;EACX;CACF;AAED,MAAa,uBAA+B;CAC1C,SAAS;CACT,MAAM;CACN,UAAU;CACV,aAAa;EACX,IAAI;EACJ,QAAQ;EACR,QAAQ;EACR,mBAAmB;EACpB;CACD,UAAU;CACV,YAAY;CACZ,MAAM;EACJ,IAAI;EACJ,UAAU;EACX;CACD,QAAQ;EACN,IAAI;EACJ,OAAO;EACP,SAAS;EACT,SAAS;EACT,mBAAmB;EACnB,qBAAqB;EACrB,UAAU;EACX;CACD,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;EACL,IAAI;EACJ,SAAS;EACT,SAAS;EACT,UAAU;EACX;CACD,QAAQ;EACN,IAAI;EACJ,SAAS;EACV;CACD,WAAW;CACX,YAAY;CACZ,gBAAgB;CAChB,QAAQ;EACN,IAAI;EACJ,WAAW;EACZ;CAED,OAAO;EACL,IAAI;EACJ,cAAc;EACd,eAAe;EACf,cAAc;EACf;CAED,QAAQ;CAER,QAAQ;CAER,OAAO;EACL,GAAG;EACH,SAAS;EACV;CAED,WAAW;EACT,SAAS;EACT,YAAY;EACZ,OAAO;EACP,OAAO;EACP,UAAU;EACX;CAED,gBAAgB;EACd,GAAG;EACH,SAAS;EACT,YAAY;EACZ,OAAO;GACL,IAAI;GACJ,QAAQ;GACT;EACD,UAAU;EACX;CACF;AAED,MAAM,sBAAsB,MAAM;CAChC,IAAI;CACJ,QAAQ;CACT,CAAC;AAEF,MAAM,cAAc;CAClB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,MAAa,uBAA+B;CAC1C,QAAQ;CACR,WAAW;CACX,OAAO;CACP,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ;CACR,UAAU;CACV,QAAQ;EACN,IAAI;EACJ,WAAW;EACX,0BAA0B;EAC1B,0BAA0B;EAC3B;CACD,QAAQ;CACR,YAAY;CAEZ,aAAa;EACX,GAAG;EACH,QAAQ;EACT;CACD,mCAAmC,EACjC,QAAQ,8BACT;CAED,qBAAqB;CACrB,iBAAiB;EACf,IAAI;EACJ,cAAc;EACd,cAAc;EACd,eAAe;EACf,QAAQ;EACT;CACD,kBAAkB;EAChB,IAAI;EACJ,cAAc;EACd,cAAc;EACd,eAAe;EACf,QAAQ;EACT;CACF;AAED,MAAM,eAAe,MAAM;CAAE,IAAI;CAAS,QAAQ;CAAsB,CAAC;;;;;;AA6EzE,SAAS,eAAe,OAA+B,KAAK;CAC1D,IAAI,EACF,IACA,MACA,WACA,SACA,QACA,YACA,WACA,WACA,YACA,cACA,UACA,WACA,kBACA,OACA,cAAc,EAAE,EAChB,QACA,iBAAiB,UACjB,YACA,SACA,OAAO,GACP,OAAO,UACP,cACA,cACA,MACA,WACA,WACA,MACA,QACA,GAAG,eACD;CAEJ,IAAI,SAAS,cAAc,YAAY,YAAY;CACnD,IAAI,OAAO,WAAW;AAEtB,KAAI,OACF,eAAc;EAAE,GAAG;EAAa;EAAQ;CAG1C,IAAI,cAAoC,YAAY,aAAa;CACjE,IAAI,EAAE,WAAW,eAAeA,WAAS,EAAE,YAAY,CAAC;CACxD,IAAI,EAAE,YAAY,cAAc,SAAS,EAAE,YAAY,CAAC;CACxD,IAAI,SAAS,OAAO,KAAK;AAEzB,YAAW,gBAAgB,SAAS;AAGpC,qBAAoB,YAAY;EAC9B,GAAG,mBAAmB,QAAQ,SAAS;EACvC,SAAS;AACP,OAAI,UAAU,QACZ,UAAS,QAAQ,QAAQ;;EAG7B,kBAAkB;AAChB,UAAO,UAAU;;EAEpB,EAAE;CAEH,MAAM,0BAA0B,uBAAuB;EACrD;EACA;EACA;EACD,CAAC;AAGF,KAAI,CAAC,YAAY,aAAa;AAC5B,MAAI,CAAC,WACH,cAAa,EAAE;AAGjB,aAAW,cAAc;;AAG3B,KAAI,MAAM;AACR,SAAO,oBAAC;GAAI,gBAAa;aAAa;IAAW;AAEjD,MAAI,OACF,UACE,8CACG,MACA,UACA;MAGL,UAAS;;CAIb,MAAM,YAAY,eACT;EACL,GAAG,kBAAkB;GAAE;GAAW;GAAS,CAAC;EAC5C,UAAU,CAAC,CAAC;EACZ,SAAS;EACT,SAAS;EACT,UAAU;EACV,WAAW;EACX,QAAQ,CAAC,CAAC;EACV,QAAQ,2BAA2B,CAAC,CAAC;EACrC,GAAG;EACJ,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAOD,MAAM,uBACJ,gBAAgB,gBAAgB,WAAW;CAG7C,MAAM,qBADkB,aAAa,SAAS,cAEzB,WAAW,OAAO,SACjC,EACE,YAAY,sBACb,GACD,EAAE;AA2CR,QAAO,cAxCL,qBAAC;EACC,KAAK;EACL,MAAM;EACN,aAAW;EACH;EACR,GAAI;;GAEH,SAAS,oBAAC;IAAI,gBAAa;cAAU;KAAa,GAAG;GACtD,oBAAC;IACC,IAAI,MAAM;IACV,IAAI;IACJ,mBAAgB;IAChB,GAAIC,aAAW,YAAY,YAAY,WAAW;IAClD,KAAK;IACL,MAAM,YAAY,OAAO;IACzB,MAAM;IACN,OAAO;IACP,kBAAgB,YAAY,KAAK;IACtB;IACX,aAAW;IACX,cAAc;IACd,QAAQ;IACR,UAAU,CAAC,CAAC;IACD;IACA;KACX;GACD,2BAA2B,SAC1B,qBAAC;IAAI,gBAAa;;KACf,mBAAmB,WAAW,SAAS;KACxC,oBAAC;MACY;MACF;MACE;OACX;KACD,mBAAmB,UAAU,SAAS;;KACnC,GACJ;;GACgB,EAGQ,QAAQ,MAAM;;AAGhD,MAAM,gBAAgB,WAAW,eAAe"}
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' \| '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 CHANGED Viewed

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b0fb187 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6628277 | 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 CHANGED Viewed

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b0fb187 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6628277 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b0fb187 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6628277 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b0fb187 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6628277 | 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 CHANGED Viewed

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b0fb187 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6628277 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b0fb187 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6628277 | 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 CHANGED Viewed

@@ -5,10 +5,40 @@ import { FieldTypes } from "./types.js";
 import { CubeFormData, CubeFormInstance } from "./use-form.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;
+/** The root components share one signature: generic props plus a form ref. */
+type FormRootComponent = <T extends FieldTypes>(props: CubeFormProps<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 +58,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 CHANGED Viewed

@@ -1,9 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b0fb187 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6628277 | 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 { _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 +13,31 @@ 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(FormPresentationContext.Provider, {
+		value: EMPTY_PRESENTATION,
+		children: /* @__PURE__ */ jsx(FormContext.Provider, {
+			value,
+			children
+		})
+	});
+}
 const FormElement = tasty({
 	as: "form",
 	qa: "Form",
@@ -32,9 +58,17 @@ 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);
 	return {
-		...useContext(FormContext),
+		...presentation,
+		...ctx,
 		...props
 	};
 }
@@ -45,7 +79,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 +131,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 +139,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 +169,40 @@ 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(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 a modern controller — which is every
+* form today — it is the legacy root, so `<Form>` and `Form.useForm()` keep
+* their behaviour.
+*/
+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 +210,5 @@ const _Form = forwardRef(Form);
 _Form.displayName = "Form";
 //#endregion
-export { FormContext, _Form, useFormProps };
+export { FormContext, FormScopeMask, _Form, useFormProps };
 //# sourceMappingURL=Form.js.map

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

	@@ -1 +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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"}
1	+ {"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 { ModernFormRoot } from './ModernFormRoot';\nimport { FieldTypes } from './types';\nimport { CubeFormData, CubeFormInstance, useForm } from './use-form';\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 <FormPresentationContext.Provider value={EMPTY_PRESENTATION}>\n <FormContext.Provider value={value}>{children}</FormContext.Provider>\n </FormPresentationContext.Provider>\n );\n}\n\n/* The root components share one signature: generic props plus a form ref. /\nexport type FormRootComponent = <T extends FieldTypes>(\n props: CubeFormProps<T> & { ref?: Ref<HTMLFormElement> },\n) => ReactElement;\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\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\n return { ...presentation, ...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\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 <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 </FormElement>\n );\n}\n\nconst _LegacyFormRoot = forwardRef(\n LegacyFormRoot,\n) as unknown as FormRootComponent;\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 a modern controller — which is every\n * form today — it is the legacy root, so `<Form>` and `Form.useForm()` keep\n * their behaviour.\n /\nfunction Form<T extends FieldTypes>(\n props: CubeFormProps<T>,\n ref: Ref<HTMLFormElement>,\n) {\n if (isModernFormController(props.form)) {\n return <ModernFormRoot {...props} ref={ref} />;\n }\n\n return <_LegacyFormRoot {...props} 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.js ADDED Viewed

@@ -0,0 +1,20 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6628277 | Cube Dev Team */
+import { modernBackendUnavailableError } from "./backend.js";
+import { forwardRef } from "react";
+//#region src/components/form/Form/ModernFormRoot.tsx
+/**
+* The `<Form>` facade renders this root for a branded modern controller. It is
+* a boundary, not an implementation: the modern backend is not in this version,
+* so reaching it is an error rather than silent legacy behaviour (plan §9,
+* Phase 3 gate: "no modern behavior is reachable accidentally").
+*/
+function ModernFormRoot(_props, _ref) {
+	throw modernBackendUnavailableError("<Form>");
+}
+const _ModernFormRoot = forwardRef(ModernFormRoot);
+_ModernFormRoot.displayName = "ModernFormRoot";
+//#endregion
+export { _ModernFormRoot };
+//# sourceMappingURL=ModernFormRoot.js.map

package/dist/components/form/Form/ModernFormRoot.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ModernFormRoot.js","names":[],"sources":["../../../../src/components/form/Form/ModernFormRoot.tsx"],"sourcesContent":["import { forwardRef, ReactElement, Ref } from 'react';\n\nimport { modernBackendUnavailableError } from './backend';\n\nimport type { CubeFormProps, FormRootComponent } from './Form';\nimport type { FieldTypes } from './types';\n\n/**\n * The `<Form>` facade renders this root for a branded modern controller. It is\n * a boundary, not an implementation: the modern backend is not in this version,\n * so reaching it is an error rather than silent legacy behaviour (plan §9,\n * Phase 3 gate: \"no modern behavior is reachable accidentally\").\n */\nfunction ModernFormRoot<T extends FieldTypes>(\n _props: CubeFormProps<T>,\n _ref: Ref<HTMLFormElement>,\n): ReactElement {\n throw modernBackendUnavailableError('<Form>');\n}\n\nconst _ModernFormRoot = forwardRef(\n ModernFormRoot,\n) as unknown as FormRootComponent;\n\n(_ModernFormRoot as any).displayName = 'ModernFormRoot';\n\nexport { _ModernFormRoot as ModernFormRoot };\n"],"mappings":";;;;;;;;;;;AAaA,SAAS,eACP,QACA,MACc;AACd,OAAM,8BAA8B,SAAS;;AAG/C,MAAM,kBAAkB,WACtB,eACD;AAED,AAAC,gBAAwB,cAAc"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b0fb187 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6628277 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b0fb187 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6628277 | Cube Dev Team */
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";
 import { useFormProps } from "../Form.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b0fb187 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6628277 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { FormContext } from "./Form.js";
 import { Alert } from "../../content/Alert/Alert.js";

package/dist/components/form/Form/backend.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+//#region src/components/form/Form/backend.d.ts
+/**
+ * Nominal branding for the two Form backends (modernization plan §5.1).
+ *
+ * The legacy engine (`CubeFormInstance`) and the modern controller are not
+ * structurally interchangeable: each carries this symbol with its backend
+ * kind, the `<Form>` facade dispatches on it before any backend hook runs, and
+ * the legacy field adapter refuses a controller it cannot bind.
+ *
+ * Phase 3 ships the shell only. No modern creator is exported, so a modern
+ * controller cannot be constructed by consumers yet; every modern branch ends
+ * in `modernBackendUnavailableError` until the modern backend lands.
+ */
+declare const FORM_BACKEND: unique symbol;
+interface LegacyFormBrand {
+  readonly [FORM_BACKEND]: 'legacy';
+}
+//#endregion
+export { FORM_BACKEND, LegacyFormBrand };
+//# sourceMappingURL=backend.d.ts.map

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

@@ -0,0 +1,31 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-6628277 | Cube Dev Team */
+//#region src/components/form/Form/backend.ts
+/**
+* Nominal branding for the two Form backends (modernization plan §5.1).
+*
+* The legacy engine (`CubeFormInstance`) and the modern controller are not
+* structurally interchangeable: each carries this symbol with its backend
+* kind, the `<Form>` facade dispatches on it before any backend hook runs, and
+* the legacy field adapter refuses a controller it cannot bind.
+*
+* Phase 3 ships the shell only. No modern creator is exported, so a modern
+* controller cannot be constructed by consumers yet; every modern branch ends
+* in `modernBackendUnavailableError` until the modern backend lands.
+*/
+const FORM_BACKEND = Symbol.for("@cube-dev/ui-kit/form-backend");
+/**
+* Only a modern brand is ever checked. Anything else — a branded legacy
+* instance, but also an unbranded object — counts as legacy on purpose: Cloud
+* narrows form props to structural types and its tests pass plain mocks, and
+* the legacy engine has always accepted them.
+*/
+function isModernFormController(value) {
+	return !!value && typeof value === "object" && value[FORM_BACKEND] === "modern";
+}
+function modernBackendUnavailableError(receiver) {
+	return /* @__PURE__ */ new Error(`${receiver} received a modern form controller, but the modern Form backend is not available in this version of @cube-dev/ui-kit. Create forms with Form.useForm() for now.`);
+}
+//#endregion
+export { FORM_BACKEND, isModernFormController, modernBackendUnavailableError };
+//# sourceMappingURL=backend.js.map

package/dist/components/form/Form/backend.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"backend.js","names":[],"sources":["../../../../src/components/form/Form/backend.ts"],"sourcesContent":["/**\n * Nominal branding for the two Form backends (modernization plan §5.1).\n *\n * The legacy engine (`CubeFormInstance`) and the modern controller are not\n * structurally interchangeable: each carries this symbol with its backend\n * kind, the `<Form>` facade dispatches on it before any backend hook runs, and\n * the legacy field adapter refuses a controller it cannot bind.\n *\n * Phase 3 ships the shell only. No modern creator is exported, so a modern\n * controller cannot be constructed by consumers yet; every modern branch ends\n * in `modernBackendUnavailableError` until the modern backend lands.\n */\nexport const FORM_BACKEND: unique symbol = Symbol.for(\n '@cube-dev/ui-kit/form-backend',\n);\n\nexport interface LegacyFormBrand {\n readonly [FORM_BACKEND]: 'legacy';\n}\n\nexport interface ModernFormBrand {\n readonly [FORM_BACKEND]: 'modern';\n}\n\n/**\n * The modern controller as the shell knows it: the brand and nothing else.\n * The store, selectors, commands and the values type parameter arrive with\n * the modern backend.\n */\nexport type FormController = ModernFormBrand;\n\n/**\n * Only a modern brand is ever checked. Anything else — a branded legacy\n * instance, but also an unbranded object — counts as legacy on purpose: Cloud\n * narrows form props to structural types and its tests pass plain mocks, and\n * the legacy engine has always accepted them.\n */\nexport function isModernFormController(\n value: unknown,\n): value is FormController {\n return (\n !!value &&\n typeof value === 'object' &&\n (value as Record<PropertyKey, unknown>)[FORM_BACKEND] === 'modern'\n );\n}\n\nexport function modernBackendUnavailableError(receiver: string): Error {\n return new Error(\n `${receiver} received a modern form controller, but the modern Form backend is not available in this version of @cube-dev/ui-kit. Create forms with Form.useForm() for now.`,\n );\n}\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAa,eAA8B,OAAO,IAChD,gCACD;;;;;;;AAuBD,SAAgB,uBACd,OACyB;AACzB,QACE,CAAC,CAAC,SACF,OAAO,UAAU,YAChB,MAAuC,kBAAkB;;AAI9D,SAAgB,8BAA8B,UAAyB;AACrE,wBAAO,IAAI,MACT,GAAG,SAAS,iKACb"}