@cube-dev/ui-kit 0.113.1 → 0.115.0

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

@@ -0,0 +1,195 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { BLOCK_STYLES, OUTER_STYLES } from "../../../tasty/styles/list.js";
+import { tasty } from "../../../tasty/tasty.js";
+import { useId as useId$2 } from "../../../utils/react/useId.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { _Text } from "../../content/Text.js";
+import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
+import { LoadingIcon } from "../../../icons/LoadingIcon.js";
+import { useProviderProps } from "../../../provider.js";
+import { useFormProps } from "../../form/Form/Form.js";
+import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
+import { wrapWithField } from "../../form/wrapper.js";
+import { castNullableIsSelected } from "../../../utils/react/nullableValue.js";
+import { HiddenInput } from "../../HiddenInput.js";
+import { forwardRef, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useHover, useSwitch } from "react-aria";
+import { useFocusableRef } from "@react-spectrum/utils";
+import { useToggleState } from "react-stately";
+
+//#region src/components/fields/Switch/Switch.tsx
+const SwitchWrapperElement = tasty({
+	as: "label",
+	styles: {
+		display: "flex",
+		position: "relative",
+		placeItems: {
+			"": "center stretch",
+			"side-label": "baseline stretch"
+		},
+		gap: "1x",
+		width: "max max-content",
+		color: "#dark-02"
+	}
+});
+const SwitchElement = tasty({
+	qa: "Switch",
+	styles: {
+		boxSizing: "border-box",
+		position: "relative",
+		verticalAlign: "baseline",
+		placeSelf: "center",
+		radius: "round",
+		fill: {
+			"": "#white",
+			checked: "#primary",
+			disabled: "#border.5",
+			"disabled & checked": "#border"
+		},
+		color: {
+			"": "#dark-03",
+			checked: "#white"
+		},
+		border: {
+			"": "#dark-05",
+			checked: "#primary-text",
+			disabled: "#dark-05.5",
+			invalid: "#danger"
+		},
+		width: {
+			"": "5x 5x",
+			"size=medium": "4x 4x",
+			"size=small": "3x 3x"
+		},
+		height: {
+			"": "3x 3x",
+			"size=medium": "2.5x 2.5x",
+			"size=small": "2x 2x"
+		},
+		outline: {
+			"": "#primary-text.0",
+			focused: "1bw #primary-text"
+		},
+		outlineOffset: 1,
+		transition: "theme",
+		cursor: "$pointer",
+		Thumb: {
+			position: "absolute",
+			width: {
+				"": "2x 2x",
+				"size=medium": "1.5x 1.5x",
+				"size=small": "1.25x 1.25x"
+			},
+			height: {
+				"": "2x 2x",
+				"size=medium": "1.5x 1.5x",
+				"size=small": "1.25x 1.25x"
+			},
+			radius: "round",
+			fill: {
+				"": "currentColor",
+				disabled: "#current.5",
+				"disabled & checked": "#white.8"
+			},
+			top: {
+				"": ".375x",
+				"size=medium": ".375x",
+				"size=small": ".25x"
+			},
+			left: {
+				"": ".375x",
+				"size=medium": ".375x",
+				"size=small": ".25x",
+				checked: "2.25x",
+				"checked & size=medium": "1.75x",
+				"checked & size=small": "1.25x"
+			},
+			transition: "left, theme",
+			cursor: "$pointer"
+		}
+	}
+});
+function Switch(props, ref) {
+	props = castNullableIsSelected(props);
+	props = useProviderProps(props);
+	props = useFormProps(props);
+	props = useFieldProps(props, {
+		defaultValidationTrigger: "onChange",
+		valuePropsMapper: ({ value, onChange }) => ({
+			isSelected: value != null ? value : false,
+			isIndeterminate: false,
+			onChange
+		})
+	});
+	let { qa, isDisabled = false, children, label, labelStyles, insideForm, isLoading, labelPosition, inputStyles, validationState, size = "medium", form } = props;
+	const id = useId$2(props.id);
+	let styles = extractStyles(props, OUTER_STYLES);
+	inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles, void 0, ["styles"]);
+	let { isFocused, focusProps } = useFocus$1({ isDisabled }, true);
+	let { hoverProps, isHovered } = useHover({ isDisabled });
+	let inputRef = useRef(null);
+	let domRef = useFocusableRef(ref, inputRef);
+	let { inputProps } = useSwitch(props, useToggleState(props), inputRef);
+	const mods = {
+		checked: inputProps.checked,
+		disabled: isDisabled,
+		hovered: isHovered,
+		focused: isFocused,
+		invalid: validationState === "invalid",
+		valid: validationState === "valid",
+		"inside-form": insideForm,
+		"side-label": labelPosition === "side"
+	};
+	return wrapWithField(/* @__PURE__ */ jsxs(SwitchWrapperElement, {
+		qa: "SwitchWrapper",
+		mods,
+		"data-size": size,
+		styles,
+		...hoverProps,
+		children: [
+			/* @__PURE__ */ jsx(HiddenInput, {
+				qa: qa || "Switch",
+				"data-input-type": "switch",
+				...mergeProps$1(inputProps, focusProps),
+				ref: inputRef,
+				id
+			}),
+			/* @__PURE__ */ jsx(SwitchElement, {
+				mods,
+				"data-size": size,
+				styles: inputStyles,
+				children: /* @__PURE__ */ jsx("div", {
+					"data-element": "Thumb",
+					"aria-hidden": "true"
+				})
+			}),
+			children ? /* @__PURE__ */ jsx(_Text, {
+				nowrap: true,
+				children
+			}) : null,
+			isLoading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [label ? /* @__PURE__ */ jsx(Fragment$1, { children: "\xA0" }) : null, /* @__PURE__ */ jsx(LoadingIcon, {})] }) : null
+		]
+	}), domRef, {
+		...props,
+		id,
+		labelProps: {
+			...props.labelProps,
+			for: id
+		},
+		children: null,
+		inputStyles
+	});
+}
+/**
+* Switches allow users to turn an individual option on or off.
+* They are usually used to activate or deactivate a specific setting.
+*/
+let _Switch = forwardRef(Switch);
+_Switch.cubeInputType = "Checkbox";
+_Switch.displayName = "Switch";
+
+//#endregion
+export { _Switch, useSwitch };
+//# sourceMappingURL=Switch.js.map

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

@@ -0,0 +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 { forwardRef, useRef } from 'react';\nimport { AriaSwitchProps, useHover, useSwitch } from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons';\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps } from '../../../shared';\nimport {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  extractStyles,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '../../../tasty';\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 { Text } from '../../content/Text';\nimport { useFieldProps, useFormProps, 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      '': '#white',\n      checked: '#primary',\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    },\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        '': 'currentColor',\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\nexport interface CubeSwitchProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps,\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 = useProviderProps(props);\n  props = useFormProps(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    labelStyles,\n    insideForm,\n    isLoading,\n    labelPosition,\n    inputStyles,\n    validationState,\n    size = 'medium',\n    form,\n  } = props;\n\n  const id = useId(props.id);\n\n  let styles = extractStyles(props, OUTER_STYLES);\n\n  inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles, undefined, [\n    'styles',\n  ]);\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    invalid: validationState === 'invalid',\n    valid: validationState === 'valid',\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.d.ts

@@ -0,0 +1,25 @@
+
+import { WithNullableValue } from "../../../utils/react/nullableValue.js";
+import { CubeTextInputBaseProps } from "../TextInput/TextInputBase.js";
+import "../TextInput/index.js";
+import * as react from "react";
+
+//#region src/components/fields/TextArea/TextArea.d.ts
+interface CubeTextAreaProps extends CubeTextInputBaseProps {
+  /** Whether the textarea should change its size depends on the content */
+  autoSize?: boolean;
+  /** Max number of visible rows when autoSize is `true`. Defaults to 10  */
+  maxRows?: number;
+  /** The `rows` attribute in HTML is used to specify the number of visible text lines for the
+   * control i.e. the number of rows to display. Defaults to 3 */
+  rows?: number;
+}
+/**
+ * TextInputs are text inputs that allow users to input custom text entries
+ * with a keyboard. Various decorations can be displayed around the field to
+ * communicate the entry requirements.
+ */
+declare const _TextArea: react.ForwardRefExoticComponent<Omit<WithNullableValue<CubeTextAreaProps>, "ref"> & react.RefAttributes<HTMLElement>>;
+//#endregion
+export { CubeTextAreaProps, _TextArea };
+//# sourceMappingURL=TextArea.d.ts.map

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

@@ -0,0 +1,92 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { chain } from "../../../utils/react/chain.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { useProviderProps } from "../../../provider.js";
+import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
+import { TextInputBase } from "../TextInput/TextInputBase.js";
+import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
+import { forwardRef, useEffect, useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useTextField } from "react-aria";
+
+//#region src/components/fields/TextArea/TextArea.tsx
+function TextArea(props, ref) {
+	props = castNullableStringValue(props);
+	props = useProviderProps(props);
+	props = useFieldProps(props, {
+		defaultValidationTrigger: "onBlur",
+		valuePropsMapper: ({ value, onChange }) => ({
+			onChange,
+			value: value?.toString() ?? ""
+		})
+	});
+	let { autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, maxRows = 10, rows = 3, mods, labelProps: userLabelProps, inputRef: propsInputRef, value, ...otherProps } = props;
+	rows = Math.max(rows, 1);
+	maxRows = Math.max(maxRows, rows);
+	let localInputRef = useRef(null);
+	let inputRef = propsInputRef ?? localInputRef;
+	const adjustHeight = useEvent(() => {
+		const textarea = inputRef.current;
+		if (!textarea || !autoSize) return;
+		textarea.style.height = "auto";
+		const computedStyle = getComputedStyle(textarea);
+		const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
+		const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
+		const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;
+		const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;
+		const lineHeight = parseInt(computedStyle.lineHeight) || 20;
+		const contentHeight = textarea.scrollHeight - paddingTop - paddingBottom;
+		const computedRows = Math.ceil(contentHeight / lineHeight);
+		const totalHeight = Math.max(Math.min(computedRows, maxRows), rows) * lineHeight + paddingTop + paddingBottom + borderTop + borderBottom;
+		textarea.style.height = `${totalHeight}px`;
+	});
+	let { labelProps, inputProps } = useTextField({
+		...otherProps,
+		value,
+		isDisabled,
+		isReadOnly,
+		isRequired,
+		onChange: chain(onChange, adjustHeight),
+		inputElementType: "textarea"
+	}, inputRef);
+	const mergedLabelProps = mergeProps$1(labelProps, userLabelProps);
+	const useEnvironmentalEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+	useEnvironmentalEffect(() => {
+		if (!autoSize || !inputRef.current) return;
+		adjustHeight();
+		const resizeObserver = new ResizeObserver(adjustHeight);
+		resizeObserver.observe(inputRef?.current);
+		return () => resizeObserver.disconnect();
+	}, [autoSize, inputRef?.current]);
+	useEnvironmentalEffect(() => {
+		if (autoSize && inputRef.current) adjustHeight();
+	}, [value]);
+	return /* @__PURE__ */ jsx(TextInputBase, {
+		ref,
+		...otherProps,
+		multiLine: true,
+		inputRef,
+		labelProps: mergedLabelProps,
+		inputProps: {
+			...inputProps,
+			"data-input-type": "textarea"
+		},
+		isDisabled,
+		isReadOnly,
+		isRequired,
+		rows
+	});
+}
+/**
+* TextInputs are text inputs that allow users to input custom text entries
+* with a keyboard. Various decorations can be displayed around the field to
+* communicate the entry requirements.
+*/
+const _TextArea = forwardRef(TextArea);
+_TextArea.cubeInputType = "Text";
+_TextArea.displayName = "TextArea";
+
+//#endregion
+export { _TextArea };
+//# sourceMappingURL=TextArea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","names":["mergeProps"],"sources":["../../../../src/components/fields/TextArea/TextArea.tsx"],"sourcesContent":["import {\n  ForwardedRef,\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n} from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/index';\nimport { useProviderProps } from '../../../provider';\nimport { chain, mergeProps } from '../../../utils/react';\nimport {\n  castNullableStringValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { useFieldProps } from '../../form';\nimport { CubeTextInputBaseProps, TextInputBase } from '../TextInput';\n\nexport interface CubeTextAreaProps extends CubeTextInputBaseProps {\n  /** Whether the textarea should change its size depends on the content */\n  autoSize?: boolean;\n  /** Max number of visible rows when autoSize is `true`. Defaults to 10  */\n  maxRows?: number;\n  /** The `rows` attribute in HTML is used to specify the number of visible text lines for the\n   * control i.e. the number of rows to display. Defaults to 3 */\n  rows?: number;\n}\n\nfunction TextArea(\n  props: WithNullableValue<CubeTextAreaProps>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  props = castNullableStringValue(props);\n  props = useProviderProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      onChange,\n      value: value?.toString() ?? '',\n    }),\n  });\n  let {\n    autoSize = false,\n    isDisabled = false,\n    isReadOnly = false,\n    isRequired = false,\n    onChange,\n    maxRows = 10,\n    rows = 3,\n    mods,\n    labelProps: userLabelProps,\n    inputRef: propsInputRef,\n    value,\n    ...otherProps\n  } = props;\n\n  rows = Math.max(rows, 1);\n  maxRows = Math.max(maxRows, rows);\n\n  let localInputRef = useRef<HTMLTextAreaElement>(null);\n  let inputRef = propsInputRef ?? localInputRef;\n\n  const adjustHeight = useEvent(() => {\n    const textarea = inputRef.current;\n\n    if (!textarea || !autoSize) return;\n\n    // Reset height to get the correct scrollHeight\n    textarea.style.height = 'auto';\n\n    // Get computed styles to account for padding\n    const computedStyle = getComputedStyle(textarea);\n    const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n    const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;\n    const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;\n    const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;\n\n    // Calculate line height (approximately)\n    const lineHeight = parseInt(computedStyle.lineHeight) || 20;\n\n    // Calculate content height (excluding padding and border)\n    const contentHeight = textarea.scrollHeight - paddingTop - paddingBottom;\n\n    // Calculate rows based on content height\n    const computedRows = Math.ceil(contentHeight / lineHeight);\n\n    // Apply min/max constraints\n    const targetRows = Math.max(Math.min(computedRows, maxRows), rows);\n\n    // Set the height including padding and border\n    const totalHeight =\n      targetRows * lineHeight +\n      paddingTop +\n      paddingBottom +\n      borderTop +\n      borderBottom;\n\n    textarea.style.height = `${totalHeight}px`;\n  });\n\n  let { labelProps, inputProps } = useTextField(\n    {\n      ...otherProps,\n      value,\n      isDisabled,\n      isReadOnly,\n      isRequired,\n      onChange: chain(onChange, adjustHeight),\n      inputElementType: 'textarea',\n    },\n    inputRef,\n  );\n\n  // Merge user-provided labelProps with aria labelProps\n  const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n  const useEnvironmentalEffect =\n    typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\n  // Also call adjustHeight on element resize as that can affect wrapping\n  useEnvironmentalEffect(() => {\n    if (!autoSize || !inputRef.current) return;\n\n    adjustHeight();\n\n    const resizeObserver = new ResizeObserver(adjustHeight);\n\n    resizeObserver.observe(inputRef?.current);\n\n    return () => resizeObserver.disconnect();\n  }, [autoSize, inputRef?.current]);\n\n  // Adjust height when value changes programmatically (controlled mode with autoSize)\n  useEnvironmentalEffect(() => {\n    if (autoSize && inputRef.current) {\n      adjustHeight();\n    }\n  }, [value]);\n\n  return (\n    <TextInputBase\n      ref={ref}\n      {...otherProps}\n      multiLine\n      inputRef={inputRef}\n      labelProps={mergedLabelProps}\n      inputProps={{ ...inputProps, 'data-input-type': 'textarea' }}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isRequired={isRequired}\n      rows={rows}\n    />\n  );\n}\n\n/**\n * TextInputs are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nconst _TextArea = forwardRef(TextArea);\n\n(_TextArea as any).cubeInputType = 'Text';\n_TextArea.displayName = 'TextArea';\n\nexport { _TextArea as TextArea };\n"],"mappings":";;;;;;;;;;;;;AA6BA,SAAS,SACP,OACA,KACA;AACA,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C;GACA,OAAO,OAAO,UAAU,IAAI;GAC7B;EACF,CAAC;CACF,IAAI,EACF,WAAW,OACX,aAAa,OACb,aAAa,OACb,aAAa,OACb,UACA,UAAU,IACV,OAAO,GACP,MACA,YAAY,gBACZ,UAAU,eACV,OACA,GAAG,eACD;AAEJ,QAAO,KAAK,IAAI,MAAM,EAAE;AACxB,WAAU,KAAK,IAAI,SAAS,KAAK;CAEjC,IAAI,gBAAgB,OAA4B,KAAK;CACrD,IAAI,WAAW,iBAAiB;CAEhC,MAAM,eAAe,eAAe;EAClC,MAAM,WAAW,SAAS;AAE1B,MAAI,CAAC,YAAY,CAAC,SAAU;AAG5B,WAAS,MAAM,SAAS;EAGxB,MAAM,gBAAgB,iBAAiB,SAAS;EAChD,MAAM,aAAa,WAAW,cAAc,WAAW,IAAI;EAC3D,MAAM,gBAAgB,WAAW,cAAc,cAAc,IAAI;EACjE,MAAM,YAAY,WAAW,cAAc,eAAe,IAAI;EAC9D,MAAM,eAAe,WAAW,cAAc,kBAAkB,IAAI;EAGpE,MAAM,aAAa,SAAS,cAAc,WAAW,IAAI;EAGzD,MAAM,gBAAgB,SAAS,eAAe,aAAa;EAG3D,MAAM,eAAe,KAAK,KAAK,gBAAgB,WAAW;EAM1D,MAAM,cAHa,KAAK,IAAI,KAAK,IAAI,cAAc,QAAQ,EAAE,KAAK,GAInD,aACb,aACA,gBACA,YACA;AAEF,WAAS,MAAM,SAAS,GAAG,YAAY;GACvC;CAEF,IAAI,EAAE,YAAY,eAAe,aAC/B;EACE,GAAG;EACH;EACA;EACA;EACA;EACA,UAAU,MAAM,UAAU,aAAa;EACvC,kBAAkB;EACnB,EACD,SACD;CAGD,MAAM,mBAAmBA,aAAW,YAAY,eAAe;CAE/D,MAAM,yBACJ,OAAO,WAAW,cAAc,kBAAkB;AAGpD,8BAA6B;AAC3B,MAAI,CAAC,YAAY,CAAC,SAAS,QAAS;AAEpC,gBAAc;EAEd,MAAM,iBAAiB,IAAI,eAAe,aAAa;AAEvD,iBAAe,QAAQ,UAAU,QAAQ;AAEzC,eAAa,eAAe,YAAY;IACvC,CAAC,UAAU,UAAU,QAAQ,CAAC;AAGjC,8BAA6B;AAC3B,MAAI,YAAY,SAAS,QACvB,eAAc;IAEf,CAAC,MAAM,CAAC;AAEX,QACE,oBAAC;EACM;EACL,GAAI;EACJ;EACU;EACV,YAAY;EACZ,YAAY;GAAE,GAAG;GAAY,mBAAmB;GAAY;EAChD;EACA;EACA;EACN;GACN;;;;;;;AASN,MAAM,YAAY,WAAW,SAAS;AAEtC,AAAC,UAAkB,gBAAgB;AACnC,UAAU,cAAc"}

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

@@ -0,0 +1,2 @@
+
+import { CubeTextAreaProps, _TextArea } from "./TextArea.js";

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

@@ -0,0 +1,12 @@
+
+import { WithNullableValue } from "../../../utils/react/nullableValue.js";
+import { CubeTextInputBaseProps } from "./TextInputBase.js";
+import * as react from "react";
+import { useTextField as useTextField$1 } from "react-aria";
+
+//#region src/components/fields/TextInput/TextInput.d.ts
+type CubeTextInputProps = WithNullableValue<CubeTextInputBaseProps>;
+declare const TextInput: react.ForwardRefExoticComponent<Omit<CubeTextInputProps, "ref"> & react.RefAttributes<HTMLElement>>;
+//#endregion
+export { CubeTextInputProps, TextInput, useTextField$1 as useTextField };
+//# sourceMappingURL=TextInput.d.ts.map

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

@@ -0,0 +1,44 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useProviderProps } from "../../../provider.js";
+import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
+import { TextInputBase } from "./TextInputBase.js";
+import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
+import { forwardRef, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useTextField as useTextField$1 } from "react-aria";
+
+//#region src/components/fields/TextInput/TextInput.tsx
+const TextInput = forwardRef(function TextInput(props, ref) {
+	props = castNullableStringValue(props);
+	props = useProviderProps(props);
+	props = useFieldProps(props, {
+		defaultValidationTrigger: "onBlur",
+		valuePropsMapper: ({ value, onChange }) => ({
+			onChange,
+			value: value?.toString() ?? ""
+		})
+	});
+	let { labelProps: userLabelProps, inputRef: propsInputRef, form, ...restProps } = props;
+	let localInputRef = useRef(null);
+	let inputRef = propsInputRef ?? localInputRef;
+	let { labelProps, inputProps } = useTextField$1(restProps, inputRef);
+	const mergedLabelProps = mergeProps$1(labelProps, userLabelProps);
+	return /* @__PURE__ */ jsx(TextInputBase, {
+		...restProps,
+		ref,
+		labelProps: mergedLabelProps,
+		inputProps,
+		inputRef
+	});
+});
+/**
+* TextInputs are text inputs that allow users to input custom text entries
+* with a keyboard. Various decorations can be displayed around the field to
+* communicate the entry requirements.
+*/
+TextInput.cubeInputType = "Text";
+
+//#endregion
+export { TextInput, useTextField$1 as useTextField };
+//# sourceMappingURL=TextInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","names":["useTextField","mergeProps"],"sources":["../../../../src/components/fields/TextInput/TextInput.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useRef } from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { useProviderProps } from '../../../provider';\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableStringValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { useFieldProps } from '../../form';\n\nimport { CubeTextInputBaseProps, TextInputBase } from './TextInputBase';\n\nexport type CubeTextInputProps = WithNullableValue<CubeTextInputBaseProps>;\n\nexport { useTextField };\n\nexport const TextInput = forwardRef(function TextInput(\n  props: CubeTextInputProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  props = castNullableStringValue(props);\n  props = useProviderProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      onChange,\n      value: value?.toString() ?? '',\n    }),\n  });\n\n  let {\n    labelProps: userLabelProps,\n    inputRef: propsInputRef,\n    form,\n    ...restProps\n  } = props;\n  let localInputRef = useRef<HTMLTextAreaElement | HTMLInputElement>(null);\n  let inputRef = propsInputRef ?? localInputRef;\n\n  let { labelProps, inputProps } = useTextField(restProps, inputRef);\n\n  // Merge user-provided labelProps with aria labelProps\n  const mergedLabelProps = mergeProps(labelProps, userLabelProps);\n\n  return (\n    <TextInputBase\n      {...restProps}\n      ref={ref}\n      labelProps={mergedLabelProps}\n      inputProps={inputProps}\n      inputRef={inputRef}\n    />\n  );\n});\n\n/**\n * TextInputs are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\n\n(TextInput as any).cubeInputType = 'Text';\n"],"mappings":";;;;;;;;;;;AAiBA,MAAa,YAAY,WAAW,SAAS,UAC3C,OACA,KACA;AACA,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C;GACA,OAAO,OAAO,UAAU,IAAI;GAC7B;EACF,CAAC;CAEF,IAAI,EACF,YAAY,gBACZ,UAAU,eACV,MACA,GAAG,cACD;CACJ,IAAI,gBAAgB,OAA+C,KAAK;CACxE,IAAI,WAAW,iBAAiB;CAEhC,IAAI,EAAE,YAAY,eAAeA,eAAa,WAAW,SAAS;CAGlE,MAAM,mBAAmBC,aAAW,YAAY,eAAe;AAE/D,QACE,oBAAC;EACC,GAAI;EACC;EACL,YAAY;EACA;EACF;GACV;EAEJ;;;;;;AAQF,AAAC,UAAkB,gBAAgB"}

package/dist/components/fields/TextInput/TextInputBase.d.ts

@@ -0,0 +1,53 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps, BlockStyleProps, OuterStyleProps, Props } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { FieldBaseProps } from "../../../shared/form.js";
+import "../../../shared/index.js";
+import * as react from "react";
+import { ReactElement, ReactNode, RefObject } from "react";
+import { AriaNumberFieldProps, AriaTextFieldProps as AriaTextFieldProps$1 } from "react-aria";
+
+//#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, Omit<AriaTextFieldProps$1, 'validate'>, FieldBaseProps {
+  validate?: AriaTextFieldProps$1['validate'] | AriaNumberFieldProps['validate'];
+  /** Left input icon */
+  icon?: ReactElement | null;
+  /** Input decoration before the main input */
+  prefix?: ReactNode;
+  /** Input decoration after the main input */
+  suffix?: ReactNode;
+  /** Suffix position goes before or after the validation and loading statuses */
+  suffixPosition?: 'before' | 'after';
+  /** Whether the input is multiline */
+  multiLine?: boolean;
+  /** Whether the input should have autofocus */
+  autoFocus?: boolean;
+  /** Direct input props */
+  inputProps?: Props;
+  /** Direct input wrapper props */
+  wrapperProps?: Props;
+  /** The input ref */
+  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>;
+  /** The wrapper ref */
+  wrapperRef?: RefObject<HTMLDivElement>;
+  /** Whether the input has the loading status */
+  isLoading?: boolean;
+  /** The loading status indicator */
+  loadingIndicator?: ReactNode;
+  /** Style map for the input */
+  inputStyles?: Styles;
+  /** The number of rows for the input. Only applies to textarea. */
+  rows?: number;
+  /** The resize CSS property sets whether an element is resizable, and if so, in which directions. */
+  resize?: Styles['resize'];
+  /** The size of the input */
+  size?: 'small' | 'medium' | 'large' | (string & {});
+  autocomplete?: string;
+}
+declare const TextInputBase: react.ForwardRefExoticComponent<Omit<CubeTextInputBaseProps, "ref"> & react.RefAttributes<unknown>>;
+//#endregion
+export { type AriaTextFieldProps$1 as AriaTextFieldProps, CubeTextInputBaseProps, DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, TextInputBase };
+//# sourceMappingURL=TextInputBase.d.ts.map