@dxos/react-input 0.8.3-staging.0fa589b → 0.8.4-main.03d5cd7b56

package/package.json

@@ -1,15 +1,20 @@
 {
   "name": "@dxos/react-input",
-  "version": "0.8.3-staging.0fa589b",
+  "version": "0.8.4-main.03d5cd7b56",
   "description": "Input primitive components for React.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -21,25 +26,22 @@
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
     "@radix-ui/react-compose-refs": "1.1.1",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-primitive": "2.0.2",
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "lodash.omit": "^4.5.0",
-    "rci": "^0.1.0",
-    "@dxos/react-hooks": "0.8.3-staging.0fa589b"
+    "@dxos/react-hooks": "0.8.4-main.03d5cd7b56"
   },
   "devDependencies": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3"
   },
   "publishConfig": {
     "access": "public"

package/src/InputMeta.tsx

@@ -13,11 +13,11 @@ type LabelProps = ComponentPropsWithRef<typeof Primitive.label> & { asChild?: bo
 const Label = forwardRef<HTMLLabelElement, LabelProps>(
   ({ __inputScope, asChild, children, ...props }: InputScopedProps<LabelProps>, forwardedRef) => {
     const { id } = useInputContext(INPUT_NAME, __inputScope);
-    const Root = asChild ? Slot : Primitive.label;
+    const Comp = asChild ? Slot : Primitive.label;
     return (
-      <Root {...props} htmlFor={id} ref={forwardedRef}>
+      <Comp {...props} htmlFor={id} ref={forwardedRef}>
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
@@ -27,11 +27,11 @@ type DescriptionProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'>
 const Description = forwardRef<HTMLSpanElement, DescriptionProps>(
   ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionProps>, forwardedRef) => {
     const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);
-    const Root = asChild ? Slot : Primitive.span;
+    const Comp = asChild ? Slot : Primitive.span;
     return (
-      <Root {...props} {...(validationValence === 'error' && { id: descriptionId })} ref={forwardedRef}>
+      <Comp {...props} {...(validationValence === 'error' && { id: descriptionId })} ref={forwardedRef}>
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
@@ -41,11 +41,11 @@ type ErrorMessageProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'
 const ErrorMessage = forwardRef<HTMLSpanElement, ErrorMessageProps>(
   ({ __inputScope, asChild, children, ...props }: InputScopedProps<ErrorMessageProps>, forwardedRef) => {
     const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-    const Root = asChild ? Slot : Primitive.span;
+    const Comp = asChild ? Slot : Primitive.span;
     return (
-      <Root {...props} id={errorMessageId} ref={forwardedRef}>
+      <Comp {...props} id={errorMessageId} ref={forwardedRef}>
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
@@ -59,11 +59,11 @@ const Validation = forwardRef<HTMLSpanElement, ValidationProps>(
     if (validationValence === 'error') {
       return <ErrorMessage {...props} ref={forwardedRef} />;
     } else {
-      const Root = asChild ? Slot : Primitive.span;
+      const Comp = asChild ? Slot : Primitive.span;
       return (
-        <Root {...otherProps} ref={forwardedRef}>
+        <Comp {...otherProps} ref={forwardedRef}>
           {children}
-        </Root>
+        </Comp>
       );
     }
   },
@@ -74,11 +74,11 @@ type DescriptionAndValidationProps = ComponentPropsWithRef<typeof Primitive.p> &
 const DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(
   ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionAndValidationProps>, forwardedRef) => {
     const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);
-    const Root = asChild ? Slot : Primitive.p;
+    const Comp = asChild ? Slot : Primitive.p;
     return (
-      <Root {...props} {...(validationValence !== 'error' && { id: descriptionId })} ref={forwardedRef}>
+      <Comp {...props} {...(validationValence !== 'error' && { id: descriptionId })} ref={forwardedRef}>
         {children}
-      </Root>
+      </Comp>
     );
   },
 );

package/src/PinInput.tsx

@@ -2,75 +2,206 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CodeInput, getSegmentCssWidth } from 'rci';
-import React, { type ComponentProps, type ComponentPropsWithRef, forwardRef, useCallback } from 'react';
+import React, {
+  type ChangeEvent,
+  type ClipboardEvent,
+  type ComponentPropsWithRef,
+  type KeyboardEvent,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 
 import { useForwardedRef, useIsFocused } from '@dxos/react-hooks';
 
-import { INPUT_NAME, type InputScopedProps, useInputContext, type Valence } from './Root';
+import { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';
 
-type PinInputProps = Omit<
-  ComponentPropsWithRef<typeof CodeInput>,
-  'id' | 'className' | 'inputRef' | 'renderSegment'
-> & {
-  inputClassName?: string;
-  segmentClassName?: (styleProps: { focused: boolean; validationValence: Valence }) => string;
-  segmentPadding?: string;
-  segmentHeight?: string;
+type PinInputProps = Omit<ComponentPropsWithRef<'input'>, 'type' | 'maxLength'> & {
+  /** Class name applied to each segment div. */
+  segmentClassName?: string;
+  /** Number of code segments. */
+  length?: number;
 };
 
 const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
   (
     {
       __inputScope,
+      className,
+      disabled,
       segmentClassName,
-      inputClassName,
-      segmentPadding = '8px',
-      segmentHeight = '100%',
+      length = 6,
+      pattern,
+      value: controlledValue,
+      onChange,
+      onPaste,
       ...props
     }: InputScopedProps<PinInputProps>,
     forwardedRef,
   ) => {
     const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-    const width = getSegmentCssWidth(segmentPadding);
     const inputRef = useForwardedRef(forwardedRef);
     const inputFocused = useIsFocused(inputRef);
+    const [internalValue, setInternalValue] = useState('');
+    const [cursorPosition, setCursorPosition] = useState(0);
 
-    const renderSegment = useCallback<ComponentProps<typeof CodeInput>['renderSegment']>(
-      ({ state, index }) => (
-        <div
-          key={index}
-          className={segmentClassName?.({
-            focused: !!(inputFocused && state),
-            validationValence,
-          })}
-          data-state={state}
-          style={{ width, height: segmentHeight }}
-        />
-      ),
-      [segmentClassName, inputFocused, validationValence],
+    const value = controlledValue != null ? String(controlledValue) : internalValue;
+
+    // Derive a per-character filter from the `pattern` prop (e.g., `\\d*` → test each char against `\\d`).
+    const charPattern = useMemo(() => {
+      if (!pattern) {
+        return undefined;
+      }
+      try {
+        // Strip quantifiers (*, +, {n}) to get the base character class.
+        const base = pattern.replace(/[*+?]$|\{\d+,?\d*\}$/g, '');
+        return new RegExp(`^${base}$`);
+      } catch {
+        return undefined;
+      }
+    }, [pattern]);
+
+    /** Filter a string to only characters matching the pattern. */
+    const filterValue = useCallback(
+      (input: string) => {
+        if (!charPattern) {
+          return input;
+        }
+        return input
+          .split('')
+          .filter((char) => charPattern.test(char))
+          .join('');
+      },
+      [charPattern],
+    );
+
+    // Sync cursor position from the hidden input's selection.
+    const syncCursor = useCallback(() => {
+      const pos = inputRef.current?.selectionStart ?? value.length;
+      setCursorPosition(Math.min(pos, value.length));
+    }, [inputRef, value.length]);
+
+    // Keep cursor in sync after value changes.
+    useEffect(() => {
+      setCursorPosition((prev) => Math.min(prev, value.length));
+    }, [value.length]);
+
+    const handleChange = useCallback(
+      (event: ChangeEvent<HTMLInputElement>) => {
+        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: ClipboardEvent<HTMLInputElement>) => {
+        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;
+        }
+        // Use native setter to trigger React's synthetic onChange.
+        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+        nativeInputValueSetter?.call(input, pasted);
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+      },
+      [length, inputRef, onPaste, filterValue],
+    );
+
+    const handleKeyDown = useCallback(
+      (event: KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+          // Let the native input handle cursor movement, then sync.
+          requestAnimationFrame(syncCursor);
+        } else if (event.key === 'Backspace' && value.length === 0) {
+          event.preventDefault();
+        } else if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {
+          // Reject characters that don't match the allow pattern.
+          if (charPattern && !charPattern.test(event.key)) {
+            event.preventDefault();
+            props.onKeyDown?.(event);
+            return;
+          }
+          // Overwrite mode: replace character at cursor position instead of inserting.
+          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);
+            // Update state and cursor synchronously to avoid flicker.
+            if (controlledValue == null) {
+              setInternalValue(newValue);
+            }
+            setCursorPosition(newPos);
+            // Sync the native input to match.
+            const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+            nativeInputValueSetter?.call(input, newValue);
+            input.setSelectionRange(newPos, newPos);
+            // Notify consumer via onChange with a synthetic-like event.
+            onChange?.({ target: input, currentTarget: input } as ChangeEvent<HTMLInputElement>);
+          }
+        }
+        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 (
-      <CodeInput
-        {...{
-          padding: '8px',
-          spacing: '8px',
-          fontFamily: '',
-          spellCheck: false,
-          length: 6,
-          ...props,
-          id,
-          'aria-describedby': descriptionId,
-          ...(validationValence === 'error' && {
+      <div className={`relative inline-flex items-center gap-2 ${className ?? ''}`}>
+        <input
+          ref={inputRef}
+          id={id}
+          type='text'
+          value={value}
+          onChange={handleChange}
+          onPaste={handlePaste}
+          onKeyDown={handleKeyDown}
+          onSelect={handleSelect}
+          maxLength={length}
+          disabled={disabled}
+          spellCheck={false}
+          aria-describedby={descriptionId}
+          {...(validationValence === 'error' && {
             'aria-invalid': 'true' as const,
             'aria-errormessage': errorMessageId,
-          }),
-          inputRef,
-          renderSegment,
-          className: inputClassName,
-        }}
-      />
+          })}
+          {...props}
+          pattern={pattern}
+          className='dx-fullscreen opacity-0'
+          style={{
+            caretColor: 'transparent',
+            ...props.style,
+          }}
+        />
+        {Array.from({ length }, (_, index) => {
+          const char = value[index] || '\u00A0';
+          const isCursor = !!(inputFocused && index === activeIndex);
+          return (
+            <div key={index} className={segmentClassName} {...(isCursor && { 'data-focused': '' })} aria-hidden='true'>
+              {char}
+            </div>
+          );
+        })}
+      </div>
     );
   },
 );

package/src/Root.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { createContextScope, type Scope } from '@radix-ui/react-context';
+import { type Scope, createContextScope } from '@radix-ui/react-context';
 import React, { type PropsWithChildren } from 'react';
 
 import { useId } from '@dxos/react-hooks';
@@ -51,6 +51,6 @@ const InputRoot = ({
 
 InputRoot.displayName = INPUT_NAME;
 
-export { InputRoot, InputRoot as Root, createInputScope, useInputContext, INPUT_NAME };
+export { InputRoot, createInputScope, useInputContext, INPUT_NAME };
 
 export type { Valence, InputRootProps, InputScopedProps };

package/dist/lib/node/index.cjs

@@ -1,261 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var node_exports = {};
-__export(node_exports, {
-  Description: () => Description,
-  DescriptionAndValidation: () => DescriptionAndValidation,
-  ErrorMessage: () => ErrorMessage,
-  INPUT_NAME: () => INPUT_NAME,
-  InputRoot: () => InputRoot,
-  Label: () => Label,
-  PinInput: () => PinInput,
-  Root: () => InputRoot,
-  TextArea: () => TextArea,
-  TextInput: () => TextInput,
-  Validation: () => Validation,
-  createInputScope: () => createInputScope,
-  useInputContext: () => useInputContext
-});
-module.exports = __toCommonJS(node_exports);
-var import_tracking = require("@preact-signals/safe-react/tracking");
-var import_react_primitive = require("@radix-ui/react-primitive");
-var import_react_slot = require("@radix-ui/react-slot");
-var import_react = __toESM(require("react"));
-var import_tracking2 = require("@preact-signals/safe-react/tracking");
-var import_react_context = require("@radix-ui/react-context");
-var import_react2 = __toESM(require("react"));
-var import_react_hooks = require("@dxos/react-hooks");
-var import_tracking3 = require("@preact-signals/safe-react/tracking");
-var import_rci = require("rci");
-var import_react3 = __toESM(require("react"));
-var import_react_hooks2 = require("@dxos/react-hooks");
-var import_tracking4 = require("@preact-signals/safe-react/tracking");
-var import_react_primitive2 = require("@radix-ui/react-primitive");
-var import_react4 = __toESM(require("react"));
-var import_tracking5 = require("@preact-signals/safe-react/tracking");
-var import_react5 = __toESM(require("react"));
-var INPUT_NAME = "Input";
-var [createInputContext, createInputScope] = (0, import_react_context.createContextScope)(INPUT_NAME, []);
-var [InputProvider, useInputContext] = createInputContext(INPUT_NAME);
-var InputRoot = ({ __inputScope, id: propsId, descriptionId: propsDescriptionId, errorMessageId: propsErrorMessageId, validationValence = "neutral", children }) => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    const id = (0, import_react_hooks.useId)("input", propsId);
-    const descriptionId = (0, import_react_hooks.useId)("input__description", propsDescriptionId);
-    const errorMessageId = (0, import_react_hooks.useId)("input__error-message", propsErrorMessageId);
-    return /* @__PURE__ */ import_react2.default.createElement(InputProvider, {
-      id,
-      descriptionId,
-      errorMessageId,
-      validationValence,
-      scope: __inputScope
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-InputRoot.displayName = INPUT_NAME;
-var Label = /* @__PURE__ */ (0, import_react.forwardRef)(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const { id } = useInputContext(INPUT_NAME, __inputScope);
-    const Root = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.label;
-    return /* @__PURE__ */ import_react.default.createElement(Root, {
-      ...props,
-      htmlFor: id,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var Description = /* @__PURE__ */ (0, import_react.forwardRef)(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);
-    const Root = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.span;
-    return /* @__PURE__ */ import_react.default.createElement(Root, {
-      ...props,
-      ...validationValence === "error" && {
-        id: descriptionId
-      },
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var ErrorMessage = /* @__PURE__ */ (0, import_react.forwardRef)(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-    const Root = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.span;
-    return /* @__PURE__ */ import_react.default.createElement(Root, {
-      ...props,
-      id: errorMessageId,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var Validation = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const { __inputScope, asChild, children, ...otherProps } = props;
-    const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-    if (validationValence === "error") {
-      return /* @__PURE__ */ import_react.default.createElement(ErrorMessage, {
-        ...props,
-        ref: forwardedRef
-      });
-    } else {
-      const Root = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.span;
-      return /* @__PURE__ */ import_react.default.createElement(Root, {
-        ...otherProps,
-        ref: forwardedRef
-      }, children);
-    }
-  } finally {
-    _effect.f();
-  }
-});
-var DescriptionAndValidation = /* @__PURE__ */ (0, import_react.forwardRef)(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);
-    const Root = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.p;
-    return /* @__PURE__ */ import_react.default.createElement(Root, {
-      ...props,
-      ...validationValence !== "error" && {
-        id: descriptionId
-      },
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var PinInput = /* @__PURE__ */ (0, import_react3.forwardRef)(({ __inputScope, segmentClassName, inputClassName, segmentPadding = "8px", segmentHeight = "100%", ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking3.useSignals)();
-  try {
-    const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-    const width = (0, import_rci.getSegmentCssWidth)(segmentPadding);
-    const inputRef = (0, import_react_hooks2.useForwardedRef)(forwardedRef);
-    const inputFocused = (0, import_react_hooks2.useIsFocused)(inputRef);
-    const renderSegment = (0, import_react3.useCallback)(({ state, index }) => /* @__PURE__ */ import_react3.default.createElement("div", {
-      key: index,
-      className: segmentClassName?.({
-        focused: !!(inputFocused && state),
-        validationValence
-      }),
-      "data-state": state,
-      style: {
-        width,
-        height: segmentHeight
-      }
-    }), [
-      segmentClassName,
-      inputFocused,
-      validationValence
-    ]);
-    return /* @__PURE__ */ import_react3.default.createElement(import_rci.CodeInput, {
-      padding: "8px",
-      spacing: "8px",
-      fontFamily: "",
-      spellCheck: false,
-      length: 6,
-      ...props,
-      id,
-      "aria-describedby": descriptionId,
-      ...validationValence === "error" && {
-        "aria-invalid": "true",
-        "aria-errormessage": errorMessageId
-      },
-      inputRef,
-      renderSegment,
-      className: inputClassName
-    });
-  } finally {
-    _effect.f();
-  }
-});
-var TextInput = /* @__PURE__ */ (0, import_react4.forwardRef)(({ __inputScope, ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking4.useSignals)();
-  try {
-    const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-    return /* @__PURE__ */ import_react4.default.createElement(import_react_primitive2.Primitive.input, {
-      ...props,
-      id,
-      "aria-describedby": descriptionId,
-      ...validationValence === "error" && {
-        "aria-invalid": "true",
-        "aria-errormessage": errorMessageId
-      },
-      ref: forwardedRef
-    });
-  } finally {
-    _effect.f();
-  }
-});
-var TextArea = /* @__PURE__ */ (0, import_react5.forwardRef)(({ __inputScope, ...props }, forwardedRef) => {
-  var _effect = (0, import_tracking5.useSignals)();
-  try {
-    const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-    return /* @__PURE__ */ import_react5.default.createElement("textarea", {
-      ...props,
-      id,
-      "aria-describedby": descriptionId,
-      ...validationValence === "error" && {
-        "aria-invalid": "true",
-        "aria-errormessage": errorMessageId
-      },
-      ref: forwardedRef
-    });
-  } finally {
-    _effect.f();
-  }
-});
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Description,
-  DescriptionAndValidation,
-  ErrorMessage,
-  INPUT_NAME,
-  InputRoot,
-  Label,
-  PinInput,
-  Root,
-  TextArea,
-  TextInput,
-  Validation,
-  createInputScope,
-  useInputContext
-});
-//# sourceMappingURL=index.cjs.map