@dxos/react-input 0.9.1-staging.ee54ba693a → 0.11.0

package/dist/lib/index.mjs

@@ -0,0 +1,241 @@
+import { Primitive } from "@radix-ui/react-primitive";
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef, useCallback, useEffect, useMemo, useState } from "react";
+import { createContextScope } from "@radix-ui/react-context";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useForwardedRef, useId, useIsFocused } from "@dxos/react-hooks";
+//#region src/InputContext.ts
+var INPUT_NAME = "Input";
+var [createInputContext, createInputScope] = createContextScope(INPUT_NAME, []);
+var [InputProvider, useInputContext] = createInputContext(INPUT_NAME);
+//#endregion
+//#region src/InputMeta.tsx
+var Label = forwardRef(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
+	const { id } = useInputContext(INPUT_NAME, __inputScope);
+	return /* @__PURE__ */ jsx(asChild ? Slot : Primitive.label, {
+		...props,
+		htmlFor: id,
+		ref: forwardedRef,
+		children
+	});
+});
+var Description = forwardRef(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
+	const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);
+	return /* @__PURE__ */ jsx(asChild ? Slot : Primitive.span, {
+		...props,
+		...validationValence === "error" && { id: descriptionId },
+		ref: forwardedRef,
+		children
+	});
+});
+var ErrorMessage = forwardRef(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
+	const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+	return /* @__PURE__ */ jsx(asChild ? Slot : Primitive.span, {
+		...props,
+		id: errorMessageId,
+		ref: forwardedRef,
+		children
+	});
+});
+var Validation = forwardRef((props, forwardedRef) => {
+	const { __inputScope, asChild, children, ...otherProps } = props;
+	const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+	if (validationValence === "error") return /* @__PURE__ */ jsx(ErrorMessage, {
+		...props,
+		ref: forwardedRef
+	});
+	else return /* @__PURE__ */ jsx(asChild ? Slot : Primitive.span, {
+		...otherProps,
+		ref: forwardedRef,
+		children
+	});
+});
+var DescriptionAndValidation = forwardRef(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
+	const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);
+	return /* @__PURE__ */ jsx(asChild ? Slot : Primitive.p, {
+		...props,
+		...validationValence !== "error" && { id: descriptionId },
+		ref: forwardedRef,
+		children
+	});
+});
+//#endregion
+//#region src/Root.tsx
+var InputRoot = ({ __inputScope, id: propsId, descriptionId: propsDescriptionId, errorMessageId: propsErrorMessageId, validationValence = "neutral", children }) => {
+	return /* @__PURE__ */ jsx(InputProvider, {
+		id: useId("input", propsId),
+		descriptionId: useId("input__description", propsDescriptionId),
+		errorMessageId: useId("input__error-message", propsErrorMessageId),
+		validationValence,
+		scope: __inputScope,
+		children
+	});
+};
+InputRoot.displayName = INPUT_NAME;
+//#endregion
+//#region src/PinInput.tsx
+var PinInput = forwardRef(({ __inputScope, className, disabled, segmentClassName, length = 6, pattern, value: controlledValue, onChange, onPaste, ...props }, forwardedRef) => {
+	const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+	const inputRef = useForwardedRef(forwardedRef);
+	const inputFocused = useIsFocused(inputRef);
+	const [internalValue, setInternalValue] = useState("");
+	const [cursorPosition, setCursorPosition] = useState(0);
+	const value = controlledValue != null ? String(controlledValue) : internalValue;
+	const charPattern = useMemo(() => {
+		if (!pattern) return;
+		try {
+			const base = pattern.replace(/[*+?]$|\{\d+,?\d*\}$/g, "");
+			return new RegExp(`^${base}$`);
+		} catch {
+			return;
+		}
+	}, [pattern]);
+	/** Filter a string to only characters matching the pattern. */
+	const filterValue = useCallback((input) => {
+		if (!charPattern) return input;
+		return input.split("").filter((char) => charPattern.test(char)).join("");
+	}, [charPattern]);
+	const syncCursor = useCallback(() => {
+		const pos = inputRef.current?.selectionStart ?? value.length;
+		setCursorPosition(Math.min(pos, value.length));
+	}, [inputRef, value.length]);
+	useEffect(() => {
+		setCursorPosition((prev) => Math.min(prev, value.length));
+	}, [value.length]);
+	const handleChange = useCallback((event) => {
+		const newValue = filterValue(event.target.value).slice(0, length);
+		if (controlledValue == null) setInternalValue(newValue);
+		setCursorPosition(event.target.selectionStart ?? newValue.length);
+		onChange?.(event);
+	}, [
+		length,
+		controlledValue,
+		onChange,
+		filterValue
+	]);
+	const handlePaste = useCallback((event) => {
+		onPaste?.(event);
+		if (event.defaultPrevented) return;
+		event.preventDefault();
+		const pasted = filterValue(event.clipboardData.getData("text/plain")).slice(0, length);
+		const input = inputRef.current;
+		if (!input) return;
+		(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set)?.call(input, pasted);
+		input.dispatchEvent(new Event("input", { bubbles: true }));
+	}, [
+		length,
+		inputRef,
+		onPaste,
+		filterValue
+	]);
+	const handleKeyDown = useCallback((event) => {
+		if (event.key === "ArrowLeft" || event.key === "ArrowRight") requestAnimationFrame(syncCursor);
+		else if (event.key === "Backspace" && value.length === 0) event.preventDefault();
+		else if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {
+			if (charPattern && !charPattern.test(event.key)) {
+				event.preventDefault();
+				props.onKeyDown?.(event);
+				return;
+			}
+			const input = inputRef.current;
+			const pos = input?.selectionStart ?? value.length;
+			if (pos < value.length && input) {
+				event.preventDefault();
+				const newValue = value.slice(0, pos) + event.key + value.slice(pos + 1);
+				const newPos = Math.min(pos + 1, length);
+				if (controlledValue == null) setInternalValue(newValue);
+				setCursorPosition(newPos);
+				(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set)?.call(input, newValue);
+				input.setSelectionRange(newPos, newPos);
+				onChange?.({
+					target: input,
+					currentTarget: input
+				});
+			}
+		}
+		props.onKeyDown?.(event);
+	}, [
+		value,
+		length,
+		props.onKeyDown,
+		syncCursor,
+		inputRef,
+		charPattern,
+		controlledValue,
+		onChange
+	]);
+	const handleSelect = useCallback(() => {
+		syncCursor();
+	}, [syncCursor]);
+	const activeIndex = Math.min(cursorPosition, value.length < length ? value.length : length - 1);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `relative inline-flex items-center gap-2 ${className ?? ""}`,
+		children: [/* @__PURE__ */ jsx("input", {
+			ref: inputRef,
+			id,
+			type: "text",
+			value,
+			onChange: handleChange,
+			onPaste: handlePaste,
+			onKeyDown: handleKeyDown,
+			onSelect: handleSelect,
+			maxLength: length,
+			disabled,
+			spellCheck: false,
+			"aria-describedby": descriptionId,
+			...validationValence === "error" && {
+				"aria-invalid": "true",
+				"aria-errormessage": errorMessageId
+			},
+			...props,
+			pattern,
+			className: "dx-fullscreen opacity-0",
+			style: {
+				caretColor: "transparent",
+				...props.style
+			}
+		}), Array.from({ length }, (_, index) => {
+			const char = value[index] || "\xA0";
+			return /* @__PURE__ */ jsx("div", {
+				className: segmentClassName,
+				...!!(inputFocused && index === activeIndex) && { "data-focused": "" },
+				"aria-hidden": "true",
+				children: char
+			}, index);
+		})]
+	});
+});
+//#endregion
+//#region src/TextInput.tsx
+var TextInput = forwardRef(({ __inputScope, ...props }, forwardedRef) => {
+	const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+	return /* @__PURE__ */ jsx(Primitive.input, {
+		...props,
+		id,
+		"aria-describedby": descriptionId,
+		...validationValence === "error" && {
+			"aria-invalid": "true",
+			"aria-errormessage": errorMessageId
+		},
+		"ref": forwardedRef
+	});
+});
+//#endregion
+//#region src/TextArea.tsx
+var TextArea = forwardRef(({ __inputScope, ...props }, forwardedRef) => {
+	const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+	return /* @__PURE__ */ jsx("textarea", {
+		...props,
+		id,
+		"aria-describedby": descriptionId,
+		...validationValence === "error" && {
+			"aria-invalid": "true",
+			"aria-errormessage": errorMessageId
+		},
+		"ref": forwardedRef
+	});
+});
+//#endregion
+export { Description, DescriptionAndValidation, ErrorMessage, INPUT_NAME, InputRoot, Label, PinInput, TextArea, TextInput, Validation, createInputScope, useInputContext };
+
+//# sourceMappingURL=index.mjs.map

package/dist/lib/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/InputContext.ts","../../src/InputMeta.tsx","../../src/Root.tsx","../../src/PinInput.tsx","../../src/TextInput.tsx","../../src/TextArea.tsx"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Scope, createContextScope } from '@radix-ui/react-context';\nimport { type PropsWithChildren } from 'react';\n\n// Kept out of `Root.tsx`: react-refresh only fast-refreshes a module whose exports are all\n// components, so a context and its hook exported beside them force a full page reload on every edit.\n\nexport const INPUT_NAME = 'Input';\n\nexport type Valence = 'success' | 'info' | 'warning' | 'error' | 'neutral';\n\nexport type InputScopedProps<P> = P & { __inputScope?: Scope };\n\nexport type InputRootProps = PropsWithChildren<{\n  id?: string;\n  validationValence?: Valence;\n  descriptionId?: string;\n  errorMessageId?: string;\n}>;\n\nexport const [createInputContext, createInputScope] = createContextScope(INPUT_NAME, []);\n\nexport type InputContextValue = {\n  id: string;\n  descriptionId: string;\n  errorMessageId: string;\n  validationValence: Valence;\n};\n\nexport const [InputProvider, useInputContext] = createInputContext<InputContextValue>(INPUT_NAME);\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './InputContext';\n\ntype LabelProps = ComponentPropsWithRef<typeof Primitive.label> & { asChild?: boolean };\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ __inputScope, asChild, children, ...props }: InputScopedProps<LabelProps>, forwardedRef) => {\n    const { id } = useInputContext(INPUT_NAME, __inputScope);\n    const Comp = asChild ? Slot : Primitive.label;\n    return (\n      <Comp {...props} htmlFor={id} ref={forwardedRef}>\n        {children}\n      </Comp>\n    );\n  },\n);\n\ntype DescriptionProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Description = forwardRef<HTMLSpanElement, DescriptionProps>(\n  ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionProps>, forwardedRef) => {\n    const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n    const Comp = asChild ? Slot : Primitive.span;\n    return (\n      <Comp {...props} {...(validationValence === 'error' && { id: descriptionId })} ref={forwardedRef}>\n        {children}\n      </Comp>\n    );\n  },\n);\n\ntype ErrorMessageProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst ErrorMessage = forwardRef<HTMLSpanElement, ErrorMessageProps>(\n  ({ __inputScope, asChild, children, ...props }: InputScopedProps<ErrorMessageProps>, forwardedRef) => {\n    const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n    const Comp = asChild ? Slot : Primitive.span;\n    return (\n      <Comp {...props} id={errorMessageId} ref={forwardedRef}>\n        {children}\n      </Comp>\n    );\n  },\n);\n\ntype ValidationProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Validation = forwardRef<HTMLSpanElement, ValidationProps>(\n  (props: InputScopedProps<ValidationProps>, forwardedRef) => {\n    const { __inputScope, asChild, children, ...otherProps } = props;\n    const { validationValence } = useInputContext(INPUT_NAME, __inputScope);\n    if (validationValence === 'error') {\n      return <ErrorMessage {...props} ref={forwardedRef} />;\n    } else {\n      const Comp = asChild ? Slot : Primitive.span;\n      return (\n        <Comp {...otherProps} ref={forwardedRef}>\n          {children}\n        </Comp>\n      );\n    }\n  },\n);\n\ntype DescriptionAndValidationProps = ComponentPropsWithRef<typeof Primitive.p> & { asChild?: boolean };\n\nconst DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(\n  ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionAndValidationProps>, forwardedRef) => {\n    const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n    const Comp = asChild ? Slot : Primitive.p;\n    return (\n      <Comp {...props} {...(validationValence !== 'error' && { id: descriptionId })} ref={forwardedRef}>\n        {children}\n      </Comp>\n    );\n  },\n);\n\nexport { Description, DescriptionAndValidation, ErrorMessage, Label, Validation };\n\nexport type { DescriptionAndValidationProps, DescriptionProps, ErrorMessageProps, LabelProps, ValidationProps };\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport React from 'react';\n\nimport { useId } from '@dxos/react-hooks';\n\nimport { INPUT_NAME, InputProvider, type InputRootProps, type InputScopedProps, type Valence } from './InputContext';\n\nconst InputRoot = ({\n  __inputScope,\n  id: propsId,\n  descriptionId: propsDescriptionId,\n  errorMessageId: propsErrorMessageId,\n  validationValence = 'neutral',\n  children,\n}: InputScopedProps<InputRootProps>) => {\n  const id = useId('input', propsId);\n  const descriptionId = useId('input__description', propsDescriptionId);\n  const errorMessageId = useId('input__error-message', propsErrorMessageId);\n  return (\n    <InputProvider {...{ id, descriptionId, errorMessageId, validationValence }} scope={__inputScope}>\n      {children}\n    </InputProvider>\n  );\n};\n\nInputRoot.displayName = INPUT_NAME;\n\nexport { InputRoot };\n\nexport type { InputRootProps, InputScopedProps, Valence };\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport React, {\n  type ChangeEvent,\n  type ClipboardEvent,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { useForwardedRef, useIsFocused } from '@dxos/react-hooks';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './InputContext';\n\ntype PinInputProps = Omit<ComponentPropsWithRef<'input'>, 'type' | 'maxLength'> & {\n  /** Class name applied to each segment div. */\n  segmentClassName?: string;\n  /** Number of code segments. */\n  length?: number;\n};\n\nconst PinInput = forwardRef<HTMLInputElement, PinInputProps>(\n  (\n    {\n      __inputScope,\n      className,\n      disabled,\n      segmentClassName,\n      length = 6,\n      pattern,\n      value: controlledValue,\n      onChange,\n      onPaste,\n      ...props\n    }: InputScopedProps<PinInputProps>,\n    forwardedRef,\n  ) => {\n    const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n    const inputRef = useForwardedRef(forwardedRef);\n    const inputFocused = useIsFocused(inputRef);\n    const [internalValue, setInternalValue] = useState('');\n    const [cursorPosition, setCursorPosition] = useState(0);\n\n    const value = controlledValue != null ? String(controlledValue) : internalValue;\n\n    // Derive a per-character filter from the `pattern` prop (e.g., `\\\\d*` → test each char against `\\\\d`).\n    const charPattern = useMemo(() => {\n      if (!pattern) {\n        return undefined;\n      }\n      try {\n        // Strip quantifiers (*, +, {n}) to get the base character class.\n        const base = pattern.replace(/[*+?]$|\\{\\d+,?\\d*\\}$/g, '');\n        return new RegExp(`^${base}$`);\n      } catch {\n        return undefined;\n      }\n    }, [pattern]);\n\n    /** Filter a string to only characters matching the pattern. */\n    const filterValue = useCallback(\n      (input: string) => {\n        if (!charPattern) {\n          return input;\n        }\n        return input\n          .split('')\n          .filter((char) => charPattern.test(char))\n          .join('');\n      },\n      [charPattern],\n    );\n\n    // Sync cursor position from the hidden input's selection.\n    const syncCursor = useCallback(() => {\n      const pos = inputRef.current?.selectionStart ?? value.length;\n      setCursorPosition(Math.min(pos, value.length));\n    }, [inputRef, value.length]);\n\n    // Keep cursor in sync after value changes.\n    useEffect(() => {\n      setCursorPosition((prev) => Math.min(prev, value.length));\n    }, [value.length]);\n\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        const newValue = filterValue(event.target.value).slice(0, length);\n        if (controlledValue == null) {\n          setInternalValue(newValue);\n        }\n        setCursorPosition(event.target.selectionStart ?? newValue.length);\n        onChange?.(event);\n      },\n      [length, controlledValue, onChange, filterValue],\n    );\n\n    const handlePaste = useCallback(\n      (event: ClipboardEvent<HTMLInputElement>) => {\n        onPaste?.(event);\n        if (event.defaultPrevented) {\n          return;\n        }\n        event.preventDefault();\n        const pasted = filterValue(event.clipboardData.getData('text/plain')).slice(0, length);\n        const input = inputRef.current;\n        if (!input) {\n          return;\n        }\n        // Use native setter to trigger React's synthetic onChange.\n        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;\n        nativeInputValueSetter?.call(input, pasted);\n        input.dispatchEvent(new Event('input', { bubbles: true }));\n      },\n      [length, inputRef, onPaste, filterValue],\n    );\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n          // Let the native input handle cursor movement, then sync.\n          requestAnimationFrame(syncCursor);\n        } else if (event.key === 'Backspace' && value.length === 0) {\n          event.preventDefault();\n        } else if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {\n          // Reject characters that don't match the allow pattern.\n          if (charPattern && !charPattern.test(event.key)) {\n            event.preventDefault();\n            props.onKeyDown?.(event);\n            return;\n          }\n          // Overwrite mode: replace character at cursor position instead of inserting.\n          const input = inputRef.current;\n          const pos = input?.selectionStart ?? value.length;\n          if (pos < value.length && input) {\n            event.preventDefault();\n            const newValue = value.slice(0, pos) + event.key + value.slice(pos + 1);\n            const newPos = Math.min(pos + 1, length);\n            // Update state and cursor synchronously to avoid flicker.\n            if (controlledValue == null) {\n              setInternalValue(newValue);\n            }\n            setCursorPosition(newPos);\n            // Sync the native input to match.\n            const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;\n            nativeInputValueSetter?.call(input, newValue);\n            input.setSelectionRange(newPos, newPos);\n            // Notify consumer via onChange with a synthetic-like event.\n            onChange?.({ target: input, currentTarget: input } as ChangeEvent<HTMLInputElement>);\n          }\n        }\n        props.onKeyDown?.(event);\n      },\n      [value, length, props.onKeyDown, syncCursor, inputRef, charPattern, controlledValue, onChange],\n    );\n\n    const handleSelect = useCallback(() => {\n      syncCursor();\n    }, [syncCursor]);\n\n    const activeIndex = Math.min(cursorPosition, value.length < length ? value.length : length - 1);\n\n    return (\n      <div className={`relative inline-flex items-center gap-2 ${className ?? ''}`}>\n        <input\n          ref={inputRef}\n          id={id}\n          type='text'\n          value={value}\n          onChange={handleChange}\n          onPaste={handlePaste}\n          onKeyDown={handleKeyDown}\n          onSelect={handleSelect}\n          maxLength={length}\n          disabled={disabled}\n          spellCheck={false}\n          aria-describedby={descriptionId}\n          {...(validationValence === 'error' && {\n            'aria-invalid': 'true' as const,\n            'aria-errormessage': errorMessageId,\n          })}\n          {...props}\n          pattern={pattern}\n          className='dx-fullscreen opacity-0'\n          style={{\n            caretColor: 'transparent',\n            ...props.style,\n          }}\n        />\n        {Array.from({ length }, (_, index) => {\n          const char = value[index] || '\\u00A0';\n          const isCursor = !!(inputFocused && index === activeIndex);\n          return (\n            <div key={index} className={segmentClassName} {...(isCursor && { 'data-focused': '' })} aria-hidden='true'>\n              {char}\n            </div>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nexport { PinInput };\n\nexport type { PinInputProps };\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './InputContext';\n\ntype TextInputProps = Omit<ComponentPropsWithRef<typeof Primitive.input>, 'id'>;\n\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n  ({ __inputScope, ...props }: InputScopedProps<TextInputProps>, forwardedRef) => {\n    const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n    return (\n      <Primitive.input\n        {...{\n          ...props,\n          id,\n          'aria-describedby': descriptionId,\n          ...(validationValence === 'error' && {\n            'aria-invalid': 'true' as const,\n            'aria-errormessage': errorMessageId,\n          }),\n          'ref': forwardedRef,\n        }}\n      />\n    );\n  },\n);\n\nexport { TextInput };\n\nexport type { TextInputProps };\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './InputContext';\n\ntype TextAreaProps = Omit<ComponentPropsWithRef<'textarea'>, 'id'>;\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ __inputScope, ...props }: InputScopedProps<TextAreaProps>, forwardedRef) => {\n    const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n    return (\n      <textarea\n        {...{\n          ...props,\n          id,\n          'aria-describedby': descriptionId,\n          ...(validationValence === 'error' && {\n            'aria-invalid': 'true' as const,\n            'aria-errormessage': errorMessageId,\n          }),\n          'ref': forwardedRef,\n        }}\n      />\n    );\n  },\n);\n\nexport { TextArea };\n\nexport type { TextAreaProps };\n"],"mappings":"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"}

package/dist/types/src/InputContext.d.ts

@@ -0,0 +1,28 @@
+import { type Scope } from '@radix-ui/react-context';
+import { type PropsWithChildren } from 'react';
+export declare const INPUT_NAME = "Input";
+export type Valence = 'success' | 'info' | 'warning' | 'error' | 'neutral';
+export type InputScopedProps<P> = P & {
+    __inputScope?: Scope;
+};
+export type InputRootProps = PropsWithChildren<{
+    id?: string;
+    validationValence?: Valence;
+    descriptionId?: string;
+    errorMessageId?: string;
+}>;
+export declare const createInputContext: <ContextValueType extends object | null>(rootComponentName: string, defaultContext?: ContextValueType | undefined) => readonly [React.FC<ContextValueType & {
+    scope: Scope<ContextValueType>;
+    children: import("react").ReactNode;
+}>, (consumerName: string, scope: Scope<ContextValueType | undefined>) => ContextValueType], createInputScope: import("@radix-ui/react-context").CreateScope;
+export type InputContextValue = {
+    id: string;
+    descriptionId: string;
+    errorMessageId: string;
+    validationValence: Valence;
+};
+export declare const InputProvider: import("react").FC<InputContextValue & {
+    scope: Scope<InputContextValue>;
+    children: React.ReactNode;
+}>, useInputContext: (consumerName: string, scope: Scope<InputContextValue | undefined>) => InputContextValue;
+//# sourceMappingURL=InputContext.d.ts.map

package/dist/types/src/InputContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputContext.d.ts","sourceRoot":"","sources":["../../../src/InputContext.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAsB,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/C,eAAO,MAAM,UAAU,UAAU,CAAC;AAElC,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE3E,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAAC;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC,CAAC;AAEH,eAAO,MAAO,kBAAkB;;;6FAAE,gBAAgB,+CAAsC,CAAC;AAEzF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAO,aAAa;;;IAAE,eAAe,0FAAqD,CAAC"}

package/dist/types/src/Root.d.ts

@@ -1,28 +1,9 @@
-import { type Scope } from '@radix-ui/react-context';
-import React, { type PropsWithChildren } from 'react';
-declare const INPUT_NAME = "Input";
-type Valence = 'success' | 'info' | 'warning' | 'error' | 'neutral';
-type InputScopedProps<P> = P & {
-    __inputScope?: Scope;
-};
-type InputRootProps = PropsWithChildren<{
-    id?: string;
-    validationValence?: Valence;
-    descriptionId?: string;
-    errorMessageId?: string;
-}>;
-declare const createInputScope: import("@radix-ui/react-context").CreateScope;
-type InputContextValue = {
-    id: string;
-    descriptionId: string;
-    errorMessageId: string;
-    validationValence: Valence;
-};
-declare const useInputContext: (consumerName: string, scope: Scope<InputContextValue | undefined>) => InputContextValue;
+import React from 'react';
+import { type InputRootProps, type InputScopedProps, type Valence } from './InputContext';
 declare function InputRoot({ __inputScope, id: propsId, descriptionId: propsDescriptionId, errorMessageId: propsErrorMessageId, validationValence, children }: InputScopedProps<InputRootProps>): React.JSX.Element;
 declare namespace InputRoot {
     var displayName: string;
 }
-export { INPUT_NAME, InputRoot, createInputScope, useInputContext };
+export { InputRoot };
 export type { InputRootProps, InputScopedProps, Valence };
 //# sourceMappingURL=Root.d.ts.map

package/dist/types/src/Root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../src/Root.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAsB,MAAM,yBAAyB,CAAC;AACzE,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAItD,QAAA,MAAM,UAAU,UAAU,CAAC;AAE3B,KAAK,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEpE,KAAK,gBAAgB,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAExD,KAAK,cAAc,GAAG,iBAAiB,CAAC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC,CAAC;AAEH,QAAA,MAA2B,gBAAgB,+CAAsC,CAAC;AAElF,KAAK,iBAAiB,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAsB,eAAe,0FAAqD,CAAC;2BAExE,EACjB,YAAY,EACZ,EAAE,EAAE,OAAO,EACX,aAAa,EAAE,kBAAkB,EACjC,cAAc,EAAE,mBAAmB,EACnC,iBAA6B,EAC7B,QAAQ,EACT,EAAE,gBAAgB,CAAC,cAAc,CAAC;;;;AAanC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB,EAAE,eAAe,EAAE,CAAC;AAEpE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../src/Root.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAA6B,KAAK,cAAc,EAAE,KAAK,gBAAgB,EAAE,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;2BAElG,EACjB,YAAY,EACZ,EAAE,EAAE,OAAO,EACX,aAAa,EAAE,kBAAkB,EACjC,cAAc,EAAE,mBAAmB,EACnC,iBAA6B,EAC7B,QAAQ,EACT,EAAE,gBAAgB,CAAC,cAAc,CAAC;;;;AAanC,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,OAAO,EAAE,CAAC"}

package/dist/types/src/index.d.ts

@@ -1,4 +1,5 @@
 export * from './InputMeta';
+export { INPUT_NAME, type InputScopedProps, createInputScope, useInputContext } from './InputContext';
 export * from './Root';
 export * from './PinInput';
 export * from './TextInput';

package/dist/types/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AAEvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,UAAU,EAAE,KAAK,gBAAgB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtG,cAAc,QAAQ,CAAC;AAEvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC"}