@dxos/react-input 0.8.4-main.c4373fc → 0.8.4-main.d05673bc65

package/dist/lib/browser/index.mjs

@@ -27,8 +27,8 @@ InputRoot.displayName = INPUT_NAME;
 // src/InputMeta.tsx
 var Label = /* @__PURE__ */ forwardRef(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
   const { id } = useInputContext(INPUT_NAME, __inputScope);
-  const Root = asChild ? Slot : Primitive.label;
-  return /* @__PURE__ */ React2.createElement(Root, {
+  const Comp = asChild ? Slot : Primitive.label;
+  return /* @__PURE__ */ React2.createElement(Comp, {
     ...props,
     htmlFor: id,
     ref: forwardedRef
@@ -36,8 +36,8 @@ var Label = /* @__PURE__ */ forwardRef(({ __inputScope, asChild, children, ...pr
 });
 var Description = /* @__PURE__ */ forwardRef(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
   const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  const Root = asChild ? Slot : Primitive.span;
-  return /* @__PURE__ */ React2.createElement(Root, {
+  const Comp = asChild ? Slot : Primitive.span;
+  return /* @__PURE__ */ React2.createElement(Comp, {
     ...props,
     ...validationValence === "error" && {
       id: descriptionId
@@ -47,8 +47,8 @@ var Description = /* @__PURE__ */ forwardRef(({ __inputScope, asChild, children,
 });
 var ErrorMessage = /* @__PURE__ */ forwardRef(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
   const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-  const Root = asChild ? Slot : Primitive.span;
-  return /* @__PURE__ */ React2.createElement(Root, {
+  const Comp = asChild ? Slot : Primitive.span;
+  return /* @__PURE__ */ React2.createElement(Comp, {
     ...props,
     id: errorMessageId,
     ref: forwardedRef
@@ -63,8 +63,8 @@ var Validation = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       ref: forwardedRef
     });
   } else {
-    const Root = asChild ? Slot : Primitive.span;
-    return /* @__PURE__ */ React2.createElement(Root, {
+    const Comp = asChild ? Slot : Primitive.span;
+    return /* @__PURE__ */ React2.createElement(Comp, {
       ...otherProps,
       ref: forwardedRef
     }, children);
@@ -72,8 +72,8 @@ var Validation = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
 });
 var DescriptionAndValidation = /* @__PURE__ */ forwardRef(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
   const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  const Root = asChild ? Slot : Primitive.p;
-  return /* @__PURE__ */ React2.createElement(Root, {
+  const Comp = asChild ? Slot : Primitive.p;
+  return /* @__PURE__ */ React2.createElement(Comp, {
     ...props,
     ...validationValence !== "error" && {
       id: descriptionId
@@ -83,47 +83,170 @@ var DescriptionAndValidation = /* @__PURE__ */ forwardRef(({ __inputScope, asChi
 });
 
 // src/PinInput.tsx
-import { CodeInput, getSegmentCssWidth } from "rci";
-import React3, { forwardRef as forwardRef2, useCallback } from "react";
+import React3, { forwardRef as forwardRef2, useCallback, useEffect, useMemo, useState } from "react";
 import { useForwardedRef, useIsFocused } from "@dxos/react-hooks";
-var PinInput = /* @__PURE__ */ forwardRef2(({ __inputScope, segmentClassName, inputClassName, segmentPadding = "8px", segmentHeight = "100%", ...props }, forwardedRef) => {
+var PinInput = /* @__PURE__ */ forwardRef2(({ __inputScope, className, disabled, segmentClassName, length = 6, pattern, value: controlledValue, onChange, onPaste, ...props }, forwardedRef) => {
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-  const width = getSegmentCssWidth(segmentPadding);
   const inputRef = useForwardedRef(forwardedRef);
   const inputFocused = useIsFocused(inputRef);
-  const renderSegment = useCallback(({ state, index }) => /* @__PURE__ */ React3.createElement("div", {
-    key: index,
-    className: segmentClassName?.({
-      focused: !!(inputFocused && state),
-      validationValence
-    }),
-    "data-state": state,
-    style: {
-      width,
-      height: segmentHeight
+  const [internalValue, setInternalValue] = useState("");
+  const [cursorPosition, setCursorPosition] = useState(0);
+  const value = controlledValue != null ? String(controlledValue) : internalValue;
+  const charPattern = useMemo(() => {
+    if (!pattern) {
+      return void 0;
+    }
+    try {
+      const base = pattern.replace(/[*+?]$|\{\d+,?\d*\}$/g, "");
+      return new RegExp(`^${base}$`);
+    } catch {
+      return void 0;
     }
-  }), [
-    segmentClassName,
-    inputFocused,
-    validationValence
+  }, [
+    pattern
   ]);
-  return /* @__PURE__ */ React3.createElement(CodeInput, {
-    padding: "8px",
-    spacing: "8px",
-    fontFamily: "",
-    spellCheck: false,
-    length: 6,
-    ...props,
+  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;
+    }
+    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) => {
+    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);
+        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+        nativeInputValueSetter?.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__ */ React3.createElement("div", {
+    className: `relative inline-flex items-center gap-2 ${className ?? ""}`
+  }, /* @__PURE__ */ React3.createElement("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
     },
-    inputRef,
-    renderSegment,
-    className: inputClassName
-  });
+    ...props,
+    pattern,
+    className: "absolute inset-0 opacity-0 w-full h-full",
+    style: {
+      caretColor: "transparent",
+      ...props.style
+    }
+  }), Array.from({
+    length
+  }, (_, index) => {
+    const char = value[index] || "\xA0";
+    const isCursor = !!(inputFocused && index === activeIndex);
+    return /* @__PURE__ */ React3.createElement("div", {
+      key: index,
+      className: segmentClassName,
+      ...isCursor && {
+        "data-focused": ""
+      },
+      "aria-hidden": "true"
+    }, char);
+  }));
 });
 
 // src/TextInput.tsx
@@ -166,7 +289,6 @@ export {
   InputRoot,
   Label,
   PinInput,
-  InputRoot as Root,
   TextArea,
   TextInput,
   Validation,

package/dist/lib/browser/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/InputMeta.tsx", "../../../src/Root.tsx", "../../../src/PinInput.tsx", "../../../src/TextInput.tsx", "../../../src/TextArea.tsx"],
-  "sourcesContent": ["//\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 './Root';\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 Root = asChild ? Slot : Primitive.label;\n    return (\n      <Root {...props} htmlFor={id} ref={forwardedRef}>\n        {children}\n      </Root>\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 Root = asChild ? Slot : Primitive.span;\n    return (\n      <Root {...props} {...(validationValence === 'error' && { id: descriptionId })} ref={forwardedRef}>\n        {children}\n      </Root>\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 Root = asChild ? Slot : Primitive.span;\n    return (\n      <Root {...props} id={errorMessageId} ref={forwardedRef}>\n        {children}\n      </Root>\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 Root = asChild ? Slot : Primitive.span;\n      return (\n        <Root {...otherProps} ref={forwardedRef}>\n          {children}\n        </Root>\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 Root = asChild ? Slot : Primitive.p;\n    return (\n      <Root {...props} {...(validationValence !== 'error' && { id: descriptionId })} ref={forwardedRef}>\n        {children}\n      </Root>\n    );\n  },\n);\n\nexport { Label, Validation, Description, DescriptionAndValidation, ErrorMessage };\n\nexport type { LabelProps, ValidationProps, DescriptionProps, DescriptionAndValidationProps, ErrorMessageProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Scope, createContextScope } from '@radix-ui/react-context';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { useId } from '@dxos/react-hooks';\n\nconst INPUT_NAME = 'Input';\n\ntype Valence = 'success' | 'info' | 'warning' | 'error' | 'neutral';\n\ntype InputScopedProps<P> = P & { __inputScope?: Scope };\n\ntype InputRootProps = PropsWithChildren<{\n  id?: string;\n  validationValence?: Valence;\n  descriptionId?: string;\n  errorMessageId?: string;\n}>;\n\nconst [createInputContext, createInputScope] = createContextScope(INPUT_NAME, []);\n\ntype InputContextValue = {\n  id: string;\n  descriptionId: string;\n  errorMessageId: string;\n  validationValence: Valence;\n};\n\nconst [InputProvider, useInputContext] = createInputContext<InputContextValue>(INPUT_NAME);\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, InputRoot as Root, createInputScope, useInputContext, INPUT_NAME };\n\nexport type { Valence, InputRootProps, InputScopedProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { CodeInput, getSegmentCssWidth } from 'rci';\nimport React, { type ComponentProps, type ComponentPropsWithRef, type RefObject, forwardRef, useCallback } from 'react';\n\nimport { useForwardedRef, useIsFocused } from '@dxos/react-hooks';\n\nimport { INPUT_NAME, type InputScopedProps, type Valence, useInputContext } from './Root';\n\ntype PinInputProps = Omit<\n  ComponentPropsWithRef<typeof CodeInput>,\n  'id' | 'className' | 'inputRef' | 'renderSegment'\n> & {\n  inputClassName?: string;\n  segmentClassName?: (styleProps: { focused: boolean; validationValence: Valence }) => string;\n  segmentPadding?: string;\n  segmentHeight?: string;\n};\n\nconst PinInput = forwardRef<HTMLInputElement, PinInputProps>(\n  (\n    {\n      __inputScope,\n      segmentClassName,\n      inputClassName,\n      segmentPadding = '8px',\n      segmentHeight = '100%',\n      ...props\n    }: InputScopedProps<PinInputProps>,\n    forwardedRef,\n  ) => {\n    const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n    const width = getSegmentCssWidth(segmentPadding);\n    const inputRef = useForwardedRef(forwardedRef);\n    const inputFocused = useIsFocused(inputRef);\n\n    const renderSegment = useCallback<ComponentProps<typeof CodeInput>['renderSegment']>(\n      ({ state, index }) => (\n        <div\n          key={index}\n          className={segmentClassName?.({\n            focused: !!(inputFocused && state),\n            validationValence,\n          })}\n          data-state={state}\n          style={{ width, height: segmentHeight }}\n        />\n      ),\n      [segmentClassName, inputFocused, validationValence],\n    );\n\n    return (\n      <CodeInput\n        {...{\n          padding: '8px',\n          spacing: '8px',\n          fontFamily: '',\n          spellCheck: false,\n          length: 6,\n          ...props,\n          id,\n          'aria-describedby': descriptionId,\n          ...(validationValence === 'error' && {\n            'aria-invalid': 'true' as const,\n            'aria-errormessage': errorMessageId,\n          }),\n          inputRef: inputRef as RefObject<HTMLInputElement>,\n          renderSegment,\n          className: inputClassName,\n        }}\n      />\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 './Root';\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 './Root';\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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",
-  "names": ["Primitive", "Slot", "React", "forwardRef", "createContextScope", "React", "useId", "INPUT_NAME", "createInputContext", "createInputScope", "createContextScope", "InputProvider", "useInputContext", "InputRoot", "__inputScope", "id", "propsId", "descriptionId", "propsDescriptionId", "errorMessageId", "propsErrorMessageId", "validationValence", "children", "useId", "scope", "displayName", "Label", "forwardRef", "__inputScope", "asChild", "children", "props", "forwardedRef", "id", "useInputContext", "INPUT_NAME", "Root", "Slot", "Primitive", "label", "React", "htmlFor", "ref", "Description", "descriptionId", "validationValence", "span", "ErrorMessage", "errorMessageId", "Validation", "otherProps", "DescriptionAndValidation", "p", "CodeInput", "getSegmentCssWidth", "React", "forwardRef", "useCallback", "useForwardedRef", "useIsFocused", "PinInput", "forwardRef", "__inputScope", "segmentClassName", "inputClassName", "segmentPadding", "segmentHeight", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "width", "getSegmentCssWidth", "inputRef", "useForwardedRef", "inputFocused", "useIsFocused", "renderSegment", "useCallback", "state", "index", "React", "div", "key", "className", "focused", "data-state", "style", "height", "CodeInput", "padding", "spacing", "fontFamily", "spellCheck", "length", "Primitive", "React", "forwardRef", "TextInput", "forwardRef", "__inputScope", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "React", "Primitive", "input", "ref", "React", "forwardRef", "TextArea", "forwardRef", "__inputScope", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "React", "textarea", "ref"]
+  "sourcesContent": ["//\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 './Root';\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 { Label, Validation, Description, DescriptionAndValidation, ErrorMessage };\n\nexport type { LabelProps, ValidationProps, DescriptionProps, DescriptionAndValidationProps, ErrorMessageProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Scope, createContextScope } from '@radix-ui/react-context';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { useId } from '@dxos/react-hooks';\n\nconst INPUT_NAME = 'Input';\n\ntype Valence = 'success' | 'info' | 'warning' | 'error' | 'neutral';\n\ntype InputScopedProps<P> = P & { __inputScope?: Scope };\n\ntype InputRootProps = PropsWithChildren<{\n  id?: string;\n  validationValence?: Valence;\n  descriptionId?: string;\n  errorMessageId?: string;\n}>;\n\nconst [createInputContext, createInputScope] = createContextScope(INPUT_NAME, []);\n\ntype InputContextValue = {\n  id: string;\n  descriptionId: string;\n  errorMessageId: string;\n  validationValence: Valence;\n};\n\nconst [InputProvider, useInputContext] = createInputContext<InputContextValue>(INPUT_NAME);\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, createInputScope, useInputContext, INPUT_NAME };\n\nexport type { Valence, InputRootProps, InputScopedProps };\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 './Root';\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='absolute inset-0 opacity-0 w-full h-full'\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 './Root';\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 './Root';\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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",
+  "names": ["Primitive", "Slot", "React", "forwardRef", "createContextScope", "React", "useId", "INPUT_NAME", "createInputContext", "createInputScope", "createContextScope", "InputProvider", "useInputContext", "InputRoot", "__inputScope", "id", "propsId", "descriptionId", "propsDescriptionId", "errorMessageId", "propsErrorMessageId", "validationValence", "children", "useId", "scope", "displayName", "Label", "forwardRef", "__inputScope", "asChild", "children", "props", "forwardedRef", "id", "useInputContext", "INPUT_NAME", "Comp", "Slot", "Primitive", "label", "React", "htmlFor", "ref", "Description", "descriptionId", "validationValence", "span", "ErrorMessage", "errorMessageId", "Validation", "otherProps", "DescriptionAndValidation", "p", "React", "forwardRef", "useCallback", "useEffect", "useMemo", "useState", "useForwardedRef", "useIsFocused", "PinInput", "forwardRef", "__inputScope", "className", "disabled", "segmentClassName", "length", "pattern", "value", "controlledValue", "onChange", "onPaste", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "inputRef", "useForwardedRef", "inputFocused", "useIsFocused", "internalValue", "setInternalValue", "useState", "cursorPosition", "setCursorPosition", "String", "charPattern", "useMemo", "undefined", "base", "replace", "RegExp", "filterValue", "useCallback", "input", "split", "filter", "char", "test", "join", "syncCursor", "pos", "current", "selectionStart", "Math", "min", "useEffect", "prev", "handleChange", "event", "newValue", "target", "slice", "handlePaste", "defaultPrevented", "preventDefault", "pasted", "clipboardData", "getData", "nativeInputValueSetter", "Object", "getOwnPropertyDescriptor", "HTMLInputElement", "prototype", "set", "call", "dispatchEvent", "Event", "bubbles", "handleKeyDown", "key", "requestAnimationFrame", "metaKey", "ctrlKey", "altKey", "onKeyDown", "newPos", "setSelectionRange", "currentTarget", "handleSelect", "activeIndex", "React", "div", "ref", "type", "onSelect", "maxLength", "spellCheck", "aria-describedby", "style", "caretColor", "Array", "from", "_", "index", "isCursor", "aria-hidden", "Primitive", "React", "forwardRef", "TextInput", "forwardRef", "__inputScope", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "React", "Primitive", "input", "ref", "React", "forwardRef", "TextArea", "forwardRef", "__inputScope", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "React", "textarea", "ref"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"src/Root.tsx":{"bytes":4670,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true}],"format":"esm"},"src/InputMeta.tsx":{"bytes":10082,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"src/PinInput.tsx":{"bytes":7080,"imports":[{"path":"rci","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"src/TextInput.tsx":{"bytes":3197,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"src/TextArea.tsx":{"bytes":2962,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"src/index.ts":{"bytes":811,"imports":[{"path":"src/InputMeta.tsx","kind":"import-statement","original":"./InputMeta"},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"},{"path":"src/PinInput.tsx","kind":"import-statement","original":"./PinInput"},{"path":"src/TextInput.tsx","kind":"import-statement","original":"./TextInput"},{"path":"src/TextArea.tsx","kind":"import-statement","original":"./TextArea"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":15065},"dist/lib/browser/index.mjs":{"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"rci","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["Description","DescriptionAndValidation","ErrorMessage","INPUT_NAME","InputRoot","Label","PinInput","Root","TextArea","TextInput","Validation","createInputScope","useInputContext"],"entryPoint":"src/index.ts","inputs":{"src/InputMeta.tsx":{"bytesInOutput":2282},"src/Root.tsx":{"bytesInOutput":875},"src/index.ts":{"bytesInOutput":0},"src/PinInput.tsx":{"bytesInOutput":1427},"src/TextInput.tsx":{"bytesInOutput":610},"src/TextArea.tsx":{"bytesInOutput":534}},"bytes":6104}}}
+{"inputs":{"src/Root.tsx":{"bytes":4601,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true}],"format":"esm"},"src/InputMeta.tsx":{"bytes":10088,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"src/PinInput.tsx":{"bytes":24086,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"src/TextInput.tsx":{"bytes":3203,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"src/TextArea.tsx":{"bytes":2968,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"src/index.ts":{"bytes":817,"imports":[{"path":"src/InputMeta.tsx","kind":"import-statement","original":"./InputMeta"},{"path":"src/Root.tsx","kind":"import-statement","original":"./Root"},{"path":"src/PinInput.tsx","kind":"import-statement","original":"./PinInput"},{"path":"src/TextInput.tsx","kind":"import-statement","original":"./TextInput"},{"path":"src/TextArea.tsx","kind":"import-statement","original":"./TextArea"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":23728},"dist/lib/browser/index.mjs":{"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["Description","DescriptionAndValidation","ErrorMessage","INPUT_NAME","InputRoot","Label","PinInput","TextArea","TextInput","Validation","createInputScope","useInputContext"],"entryPoint":"src/index.ts","inputs":{"src/InputMeta.tsx":{"bytesInOutput":2282},"src/Root.tsx":{"bytesInOutput":875},"src/index.ts":{"bytesInOutput":0},"src/PinInput.tsx":{"bytesInOutput":5237},"src/TextInput.tsx":{"bytesInOutput":610},"src/TextArea.tsx":{"bytesInOutput":534}},"bytes":9893}}}