@redis-ui/components 41.4.1 → 41.11.0

package/dist/Helpers/css.utils.cjs

@@ -81,6 +81,10 @@ const tokenMaps = {
     cssProp: "line-height",
     token: "lineHeight"
   },
+  gap: {
+    cssProp: "gap",
+    token: "gap"
+  },
   fontSize: {
     cssProp: "font-size",
     token: "fontSize"

package/dist/Helpers/css.utils.js

@@ -79,6 +79,10 @@ const tokenMaps = {
     cssProp: "line-height",
     token: "lineHeight"
   },
+  gap: {
+    cssProp: "gap",
+    token: "gap"
+  },
   fontSize: {
     cssProp: "font-size",
     token: "fontSize"

package/dist/Inputs/TextArea/components/TextAreaTag/TextAreaTag.cjs

@@ -17,14 +17,18 @@ const TextAreaTag = React.forwardRef(({
 }, ref) => {
   const fieldDisabled = Field_context.useFieldDisabled(disabled);
   const sharedId = SharedId_context.useSharedId(id);
-  const inputValueProps = InputValue_context.useInputValueProps(restProps);
+  const inputValueProps = InputValue_context.useInputValueProps(restProps, ref);
   const status = FormField_context.useFieldStatus();
+  const required = FormField_context.useFieldRequired();
   const errorContent = Field_context.useErrorContent();
   const errorId = index.useId();
   const statusProps = status === "error" ? {
     "aria-invalid": true,
     "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
   } : null;
+  const requiredProps = required ? {
+    "aria-required": true
+  } : null;
   const errorAlert = status === "error" ? jsxRuntime.jsxRuntimeExports.jsx(index$1.VisuallyHidden, {
     id: errorId,
     role: "alert",
@@ -32,11 +36,11 @@ const TextAreaTag = React.forwardRef(({
   }) : null;
   return jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, {
     children: [jsxRuntime.jsxRuntimeExports.jsx(TextAreaTag_style.TextAreaTag, {
-      ref,
       id: sharedId,
       disabled: fieldDisabled,
       autoComplete,
       ...statusProps,
+      ...requiredProps,
       ...restProps,
       ...inputValueProps
     }), errorAlert]

package/dist/Inputs/TextArea/components/TextAreaTag/TextAreaTag.js

@@ -6,7 +6,7 @@ import { useFieldDisabled, useErrorContent } from "../../../components/Context/F
 import { useInputValueProps } from "../../../components/Context/InputValue.context.js";
 import { TextAreaTag as TextAreaTag$1 } from "./TextAreaTag.style.js";
 import { useSharedId } from "../../../../Helpers/contexts/SharedId.context.js";
-import { useFieldStatus } from "../../../../FormField/FormField.context.js";
+import { useFieldStatus, useFieldRequired } from "../../../../FormField/FormField.context.js";
 const TextAreaTag = forwardRef(({
   id,
   autoComplete = "off",
@@ -15,14 +15,18 @@ const TextAreaTag = forwardRef(({
 }, ref) => {
   const fieldDisabled = useFieldDisabled(disabled);
   const sharedId = useSharedId(id);
-  const inputValueProps = useInputValueProps(restProps);
+  const inputValueProps = useInputValueProps(restProps, ref);
   const status = useFieldStatus();
+  const required = useFieldRequired();
   const errorContent = useErrorContent();
   const errorId = useId();
   const statusProps = status === "error" ? {
     "aria-invalid": true,
     "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
   } : null;
+  const requiredProps = required ? {
+    "aria-required": true
+  } : null;
   const errorAlert = status === "error" ? jsxRuntimeExports.jsx(VisuallyHidden, {
     id: errorId,
     role: "alert",
@@ -30,11 +34,11 @@ const TextAreaTag = forwardRef(({
   }) : null;
   return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
     children: [jsxRuntimeExports.jsx(TextAreaTag$1, {
-      ref,
       id: sharedId,
       disabled: fieldDisabled,
       autoComplete,
       ...statusProps,
+      ...requiredProps,
       ...restProps,
       ...inputValueProps
     }), errorAlert]

package/dist/Inputs/components/Compose/CommonCompose.cjs

@@ -42,20 +42,22 @@ const CommonInputCompose = ({
     ) : jsxRuntime.jsxRuntimeExports.jsx(Field_context.FieldDisabledTransProvider, {
       children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldStatusTransProvider, {
         value: error && "error" || valid && "success" || "none",
-        children: jsxRuntime.jsxRuntimeExports.jsx(Field_context.ErrorContentProvider, {
-          value: error ?? "",
-          children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.CommonInputCompose, {
-            "$variant": variant,
-            ...restProps,
-            "data-editable": "",
-            onPointerUp: react_utils.combineHandlers((e) => {
-              var _a;
-              const target = e.target;
-              if (target.tagName !== "INPUT" && target.tagName !== "TEXTAREA") {
-                (_a = e.currentTarget.querySelector(`input${InputTag_style.InputTag}`) ?? e.currentTarget.querySelector("textarea")) == null ? void 0 : _a.focus();
-              }
-            }, onPointerUp),
-            children
+        children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldRequiredTransProvider, {
+          children: jsxRuntime.jsxRuntimeExports.jsx(Field_context.ErrorContentProvider, {
+            value: error ?? "",
+            children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.CommonInputCompose, {
+              "$variant": variant,
+              ...restProps,
+              "data-editable": "",
+              onPointerUp: react_utils.combineHandlers((e) => {
+                var _a;
+                const target = e.target;
+                if (target.tagName !== "INPUT" && target.tagName !== "TEXTAREA") {
+                  (_a = e.currentTarget.querySelector(`input${InputTag_style.InputTag}`) ?? e.currentTarget.querySelector("textarea")) == null ? void 0 : _a.focus();
+                }
+              }, onPointerUp),
+              children
+            })
           })
         })
       })

package/dist/Inputs/components/Compose/CommonCompose.js

@@ -4,7 +4,7 @@ import { ReadonlyRenderWrapper } from "../ReadonlyRender/ReadonlyRenderWrapper.j
 import { InputTag } from "../InputTag/InputTag.style.js";
 import { CommonInputCompose as CommonInputCompose$1, ReadonlyValue } from "./Compose.style.js";
 import { SharedIdTransProvider } from "../../../Helpers/contexts/SharedId.context.js";
-import { useFieldReadonly, FieldStatusTransProvider } from "../../../FormField/FormField.context.js";
+import { useFieldReadonly, FieldStatusTransProvider, FieldRequiredTransProvider } from "../../../FormField/FormField.context.js";
 import { combineHandlers } from "../../../Helpers/react.utils.js";
 const DefaultReadonlyRender = ({
   value,
@@ -40,20 +40,22 @@ const CommonInputCompose = ({
     ) : jsxRuntimeExports.jsx(FieldDisabledTransProvider, {
       children: jsxRuntimeExports.jsx(FieldStatusTransProvider, {
         value: error && "error" || valid && "success" || "none",
-        children: jsxRuntimeExports.jsx(ErrorContentProvider, {
-          value: error ?? "",
-          children: jsxRuntimeExports.jsx(CommonInputCompose$1, {
-            "$variant": variant,
-            ...restProps,
-            "data-editable": "",
-            onPointerUp: combineHandlers((e) => {
-              var _a;
-              const target = e.target;
-              if (target.tagName !== "INPUT" && target.tagName !== "TEXTAREA") {
-                (_a = e.currentTarget.querySelector(`input${InputTag}`) ?? e.currentTarget.querySelector("textarea")) == null ? void 0 : _a.focus();
-              }
-            }, onPointerUp),
-            children
+        children: jsxRuntimeExports.jsx(FieldRequiredTransProvider, {
+          children: jsxRuntimeExports.jsx(ErrorContentProvider, {
+            value: error ?? "",
+            children: jsxRuntimeExports.jsx(CommonInputCompose$1, {
+              "$variant": variant,
+              ...restProps,
+              "data-editable": "",
+              onPointerUp: combineHandlers((e) => {
+                var _a;
+                const target = e.target;
+                if (target.tagName !== "INPUT" && target.tagName !== "TEXTAREA") {
+                  (_a = e.currentTarget.querySelector(`input${InputTag}`) ?? e.currentTarget.querySelector("textarea")) == null ? void 0 : _a.focus();
+                }
+              }, onPointerUp),
+              children
+            })
           })
         })
       })

package/dist/Inputs/components/Context/InputValue.context.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const index = require("../../../node_modules/@radix-ui/react-compose-refs/dist/index.cjs");
 const react_utils = require("../../../Helpers/react.utils.cjs");
 const Context = React.createContext(null);
 const ContextProvider = Context.Provider;
@@ -11,20 +12,23 @@ const useInputValue = () => {
   }
   return context;
 };
-const useInputValueProps = (customProps) => {
+const useInputValueProps = (customProps, inputRef) => {
   const {
     props
   } = useInputValue();
-  if (!customProps) return props;
+  const ref = index.useComposedRefs(inputRef, props.ref);
   const mergedProps = {
-    ...props
+    ...props,
+    ref
   };
-  const keys = Object.keys(props);
-  keys.forEach((key) => {
-    if (typeof props[key] === "function" && key in customProps) {
-      mergedProps[key] = react_utils.combineHandlers(props[key], customProps[key]);
-    }
-  });
+  if (customProps) {
+    const keys = Object.keys(props);
+    keys.forEach((key) => {
+      if (key !== "ref" && typeof props[key] === "function" && key in customProps) {
+        mergedProps[key] = react_utils.combineHandlers(props[key], customProps[key]);
+      }
+    });
+  }
   return mergedProps;
 };
 const useInputValueApi = () => useInputValue().api;

package/dist/Inputs/components/Context/InputValue.context.d.ts

@@ -1,8 +1,9 @@
-import { ChangeEventHandler, HTMLAttributes } from 'react';
-import { ChildFree } from '../../../Helpers/common.types';
+import { ChangeEventHandler, ForwardedRef, HTMLAttributes, Ref, RefObject } from 'react';
+import { ChildFree } from '../../../Helpers';
 export type InputValueApi = {
     value: string | undefined;
     resetValue: () => void;
+    inputRef: RefObject<HTMLElement>;
 } & Record<string, unknown>;
 export type NumericValueApi = InputValueApi & {
     canIncrement: boolean;
@@ -15,11 +16,276 @@ export type InputValueContext = {
     props: Partial<ChildFree<HTMLAttributes<HTMLElement>>> & {
         value?: string | undefined;
         onChange?: ChangeEventHandler<HTMLElement> | undefined;
+        ref: Ref<HTMLElement>;
     };
 };
 export declare const ContextProvider: import("react").Provider<InputValueContext | null>;
-export declare const useInputValueProps: (customProps?: Partial<ChildFree<HTMLAttributes<HTMLElement>>>) => Partial<ChildFree<HTMLAttributes<HTMLElement>>> & {
+export declare const useInputValueProps: <T extends HTMLElement>(customProps?: Partial<ChildFree<HTMLAttributes<HTMLElement>>>, inputRef?: ForwardedRef<T> | undefined) => {
+    ref: (node: T) => void;
+    slot?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+    title?: string | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    translate?: "no" | "yes" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "step" | "date" | "true" | "false" | "page" | "location" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLElement> | undefined;
+    onChange?: (import("react").FormEventHandler<HTMLElement> & ChangeEventHandler<HTMLElement>) | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onResize?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
     value?: string | undefined;
-    onChange?: ChangeEventHandler<HTMLElement> | undefined;
 };
 export declare const useInputValueApi: <T extends InputValueApi = InputValueApi>() => T;

package/dist/Inputs/components/Context/InputValue.context.js

@@ -1,4 +1,5 @@
 import { createContext, useContext } from "react";
+import { useComposedRefs } from "../../../node_modules/@radix-ui/react-compose-refs/dist/index.js";
 import { combineHandlers } from "../../../Helpers/react.utils.js";
 const Context = createContext(null);
 const ContextProvider = Context.Provider;
@@ -9,20 +10,23 @@ const useInputValue = () => {
   }
   return context;
 };
-const useInputValueProps = (customProps) => {
+const useInputValueProps = (customProps, inputRef) => {
   const {
     props
   } = useInputValue();
-  if (!customProps) return props;
+  const ref = useComposedRefs(inputRef, props.ref);
   const mergedProps = {
-    ...props
+    ...props,
+    ref
   };
-  const keys = Object.keys(props);
-  keys.forEach((key) => {
-    if (typeof props[key] === "function" && key in customProps) {
-      mergedProps[key] = combineHandlers(props[key], customProps[key]);
-    }
-  });
+  if (customProps) {
+    const keys = Object.keys(props);
+    keys.forEach((key) => {
+      if (key !== "ref" && typeof props[key] === "function" && key in customProps) {
+        mergedProps[key] = combineHandlers(props[key], customProps[key]);
+      }
+    });
+  }
   return mergedProps;
 };
 const useInputValueApi = () => useInputValue().api;

package/dist/Inputs/components/Context/InputValueProvider.cjs

@@ -25,12 +25,17 @@ const InputValueProvider = ({
     onChange: setInputValue,
     ...restProps
   });
+  const inputRef = React.useRef(null);
   const context = React.useMemo(() => ({
     api: {
       value: inputProps.value,
-      resetValue: () => forceChange("")
+      resetValue: () => forceChange(""),
+      inputRef
     },
-    props: inputProps
+    props: {
+      ...inputProps,
+      ref: inputRef
+    }
   }), [forceChange, inputProps]);
   return jsxRuntime.jsxRuntimeExports.jsx(InputValue_context.ContextProvider, {
     value: context,

package/dist/Inputs/components/Context/InputValueProvider.js

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { useMemo } from "react";
+import { useRef, useMemo } from "react";
 import { useControllableState } from "../../../node_modules/@radix-ui/react-use-controllable-state/dist/index.js";
 import { ContextProvider } from "./InputValue.context.js";
 import { useFormatInput } from "../../hooks/formatInput/useFormatInput.js";
@@ -23,12 +23,17 @@ const InputValueProvider = ({
     onChange: setInputValue,
     ...restProps
   });
+  const inputRef = useRef(null);
   const context = useMemo(() => ({
     api: {
       value: inputProps.value,
-      resetValue: () => forceChange("")
+      resetValue: () => forceChange(""),
+      inputRef
     },
-    props: inputProps
+    props: {
+      ...inputProps,
+      ref: inputRef
+    }
   }), [forceChange, inputProps]);
   return jsxRuntimeExports.jsx(ContextProvider, {
     value: context,

package/dist/Inputs/components/Context/NumericInputValueProvider.cjs

@@ -29,8 +29,10 @@ const NumericInputValueProvider = ({
     onChange: setInputValue,
     ...restProps
   });
+  const inputRef = React.useRef(null);
   const context = React.useMemo(() => ({
     api: {
+      inputRef,
       value: inputProps.value,
       resetValue: () => forceChange(""),
       canIncrement,
@@ -38,7 +40,10 @@ const NumericInputValueProvider = ({
       increment,
       decrement
     },
-    props: inputProps
+    props: {
+      ...inputProps,
+      ref: inputRef
+    }
   }), [inputProps, canIncrement, canDecrement, increment, decrement, forceChange]);
   return jsxRuntime.jsxRuntimeExports.jsx(InputValue_context.ContextProvider, {
     value: context,