@redis-ui/components 41.3.7 → 41.11.0

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,

package/dist/Inputs/components/Context/NumericInputValueProvider.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 { useNumericInput } from "../../hooks/numericInput/useNumericInput.js";
@@ -27,8 +27,10 @@ const NumericInputValueProvider = ({
     onChange: setInputValue,
     ...restProps
   });
+  const inputRef = useRef(null);
   const context = useMemo(() => ({
     api: {
+      inputRef,
       value: inputProps.value,
       resetValue: () => forceChange(""),
       canIncrement,
@@ -36,7 +38,10 @@ const NumericInputValueProvider = ({
       increment,
       decrement
     },
-    props: inputProps
+    props: {
+      ...inputProps,
+      ref: inputRef
+    }
   }), [inputProps, canIncrement, canDecrement, increment, decrement, forceChange]);
   return jsxRuntimeExports.jsx(ContextProvider, {
     value: context,

package/dist/Inputs/components/InputTag/InputTag.cjs

@@ -19,20 +19,25 @@ const InputTag = 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 inputProps = {
     id: sharedId,
     type,
     disabled: fieldDisabled,
     autoComplete,
     ...statusProps,
+    ...requiredProps,
     ...restProps,
     ...inputValueProps
   };
@@ -40,11 +45,9 @@ const InputTag = React.forwardRef(({
     ...inputProps,
     value: inputProps.value,
     children: (props) => jsxRuntime.jsxRuntimeExports.jsx(InputTag_style.InputTag, {
-      ref,
       ...props
     })
   }) : jsxRuntime.jsxRuntimeExports.jsx(InputTag_style.InputTag, {
-    ref,
     ...inputProps
   });
   return jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, {

package/dist/Inputs/components/InputTag/InputTag.js

@@ -5,7 +5,7 @@ import { VisuallyHidden } from "../../../node_modules/@radix-ui/react-visually-h
 import { useFieldDisabled, useErrorContent } from "../Context/Field.context.js";
 import { useInputValueProps } from "../Context/InputValue.context.js";
 import { AutoSizeInputTag, InputTag as InputTag$1 } from "./InputTag.style.js";
-import { useFieldStatus } from "../../../FormField/FormField.context.js";
+import { useFieldStatus, useFieldRequired } from "../../../FormField/FormField.context.js";
 import { useSharedId } from "../../../Helpers/contexts/SharedId.context.js";
 const InputTag = forwardRef(({
   autoSize,
@@ -17,20 +17,25 @@ const InputTag = 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 inputProps = {
     id: sharedId,
     type,
     disabled: fieldDisabled,
     autoComplete,
     ...statusProps,
+    ...requiredProps,
     ...restProps,
     ...inputValueProps
   };
@@ -38,11 +43,9 @@ const InputTag = forwardRef(({
     ...inputProps,
     value: inputProps.value,
     children: (props) => jsxRuntimeExports.jsx(InputTag$1, {
-      ref,
       ...props
     })
   }) : jsxRuntimeExports.jsx(InputTag$1, {
-    ref,
     ...inputProps
   });
   return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {

package/dist/Inputs/components/InputTag/InputTag.style.cjs

@@ -54,7 +54,7 @@ const InputStyle = _styled.css`
 const InputTag = _styled__default.default.input.withConfig({
   displayName: "InputTagstyle__InputTag",
   componentId: "RedisUI__sc-15tql6o-0"
-})(["", ";align-self:stretch;padding:0;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}"], InputStyle);
+})(["", ";align-self:stretch;padding:0;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}&[type='password']:not(:placeholder-shown){font-family:", ";font-size:", ";@supports not (-moz-appearance:none){font-size-adjust:", ";}}"], InputStyle, () => redisUiStyles.useTheme().components.input.password.fontFamily, () => redisUiStyles.useTheme().components.input.password.fontSize, () => redisUiStyles.useTheme().components.input.password.fontSizeAdjust);
 const AutoSizeInputTag = _styled__default.default(AutoSizeInput.AutoSizeInput).withConfig({
   displayName: "InputTagstyle__AutoSizeInputTag",
   componentId: "RedisUI__sc-15tql6o-1"

package/dist/Inputs/components/InputTag/InputTag.style.js

@@ -50,7 +50,7 @@ const InputStyle = css`
 const InputTag = _styled.input.withConfig({
   displayName: "InputTagstyle__InputTag",
   componentId: "RedisUI__sc-15tql6o-0"
-})(["", ";align-self:stretch;padding:0;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}"], InputStyle);
+})(["", ";align-self:stretch;padding:0;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}&[type='password']:not(:placeholder-shown){font-family:", ";font-size:", ";@supports not (-moz-appearance:none){font-size-adjust:", ";}}"], InputStyle, () => useTheme().components.input.password.fontFamily, () => useTheme().components.input.password.fontSize, () => useTheme().components.input.password.fontSizeAdjust);
 const AutoSizeInputTag = _styled(AutoSizeInput).withConfig({
   displayName: "InputTagstyle__AutoSizeInputTag",
   componentId: "RedisUI__sc-15tql6o-1"

package/dist/Inputs/components/ResetButton/ResetButton.cjs

@@ -19,7 +19,8 @@ const ResetButton = ({
   const fieldDisabled = Field_context.useFieldDisabled();
   const {
     value,
-    resetValue
+    resetValue,
+    inputRef
   } = InputValue_context.useInputValueApi();
   return !fieldReadonly && allowReset && value ? jsxRuntime.jsxRuntimeExports.jsx(ResetButton_style.ResetButton, {
     disabled: fieldDisabled,
@@ -27,10 +28,12 @@ const ResetButton = ({
     icon,
     title: "Reset",
     ...restProps,
-    onClick: react_utils.combineHandlers(resetValue, onClick),
+    onClick: react_utils.combineHandlers(() => {
+      var _a;
+      return (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.focus();
+    }, resetValue, onClick),
     // prevent focus on the buttons
-    onMouseDown: react_utils.combineHandlers((e) => e.preventDefault(), onMouseDown),
-    tabIndex: -1
+    onMouseDown: react_utils.combineHandlers((e) => e.preventDefault(), onMouseDown)
   }) : null;
 };
 exports.ResetButton = ResetButton;

package/dist/Inputs/components/ResetButton/ResetButton.js

@@ -17,7 +17,8 @@ const ResetButton = ({
   const fieldDisabled = useFieldDisabled();
   const {
     value,
-    resetValue
+    resetValue,
+    inputRef
   } = useInputValueApi();
   return !fieldReadonly && allowReset && value ? jsxRuntimeExports.jsx(ResetButton$1, {
     disabled: fieldDisabled,
@@ -25,10 +26,12 @@ const ResetButton = ({
     icon,
     title: "Reset",
     ...restProps,
-    onClick: combineHandlers(resetValue, onClick),
+    onClick: combineHandlers(() => {
+      var _a;
+      return (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.focus();
+    }, resetValue, onClick),
     // prevent focus on the buttons
-    onMouseDown: combineHandlers((e) => e.preventDefault(), onMouseDown),
-    tabIndex: -1
+    onMouseDown: combineHandlers((e) => e.preventDefault(), onMouseDown)
   }) : null;
 };
 export {

package/dist/Label/components/Optional/Optional.style.d.ts

@@ -1 +1,2 @@
-export declare const Optional: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+/// <reference types="react" />
+export declare const Optional: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Label/components/Required/Required.cjs

@@ -2,17 +2,17 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const Required_style = require("./Required.style.cjs");
+const FormField_context = require("../../../FormField/FormField.context.cjs");
 const Required = ({
   children = "*",
   show = true,
   size,
   ...restProps
-}) => {
-  return show ? jsxRuntime.jsxRuntimeExports.jsx(Required_style.Required, {
-    component: "span",
-    size: size ?? "S",
-    ...restProps,
-    children
-  }) : null;
-};
+}) => FormField_context.useFieldRequired(show) ? jsxRuntime.jsxRuntimeExports.jsx(Required_style.Required, {
+  component: "span",
+  size: size ?? "S",
+  "aria-hidden": true,
+  ...restProps,
+  children
+}) : null;
 exports.default = Required;