@redis-ui/components 41.3.7 → 41.11.0

package/dist/FormField/FormField.context.js

@@ -1,11 +1,15 @@
 import { createPrimitiveContextState } from "../Helpers/contexts/PrimitiveContextState.js";
 const [useFieldStatus, FieldStatusProvider, FieldStatusTransProvider] = createPrimitiveContextState();
+const [useFieldRequired, FieldRequiredProvider, FieldRequiredTransProvider] = createPrimitiveContextState();
 const [useFieldReadonly, FieldReadonlyProvider, FieldReadonlyTransProvider] = createPrimitiveContextState();
 export {
   FieldReadonlyProvider,
   FieldReadonlyTransProvider,
+  FieldRequiredProvider,
+  FieldRequiredTransProvider,
   FieldStatusProvider,
   FieldStatusTransProvider,
   useFieldReadonly,
+  useFieldRequired,
   useFieldStatus
 };

package/dist/FormField/components/AdditionalText/AdditionalText.style.d.ts

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

package/dist/FormField/components/Nested/Nested.cjs

@@ -13,8 +13,10 @@ const Nested = ({
   const otherProviders = jsxRuntime.jsxRuntimeExports.jsx(SharedId_context.SharedIdProvider, {
     customId: id,
     children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldStatusProvider, {
-      children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldReadonlyProvider, {
-        children
+      children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldRequiredProvider, {
+        children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldReadonlyProvider, {
+          children
+        })
       })
     })
   });

package/dist/FormField/components/Nested/Nested.js

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { FieldStatusProvider, FieldReadonlyProvider } from "../../FormField.context.js";
+import { FieldStatusProvider, FieldRequiredProvider, FieldReadonlyProvider } from "../../FormField.context.js";
 import { FieldDisabledTransProvider, FieldDisabledProvider } from "../../../Inputs/components/Context/Field.context.js";
 import { SharedIdProvider } from "../../../Helpers/contexts/SharedId.context.js";
 const DISABLED_STATE_TO_PASS = true;
@@ -11,8 +11,10 @@ const Nested = ({
   const otherProviders = jsxRuntimeExports.jsx(SharedIdProvider, {
     customId: id,
     children: jsxRuntimeExports.jsx(FieldStatusProvider, {
-      children: jsxRuntimeExports.jsx(FieldReadonlyProvider, {
-        children
+      children: jsxRuntimeExports.jsx(FieldRequiredProvider, {
+        children: jsxRuntimeExports.jsx(FieldReadonlyProvider, {
+          children
+        })
       })
     })
   });

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/Input/Input.d.ts

@@ -8,7 +8,7 @@ declare const Input: import("react").ForwardRefExoticComponent<import("../compon
     }) => import("react/jsx-runtime").JSX.Element;
     LoadingIndicator: ({ loading, ...restProps }: import("../components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
     Tag: import("react").ForwardRefExoticComponent<import("../components/InputTag/InputTag.types").InputTagProps & import("../components/InputTag/InputTag.types").RestInputTagProps & import("react").RefAttributes<HTMLInputElement>>;
-    ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+    ReadonlyValue: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
         readOnly: boolean;
     }, "readOnly">;
     ResetButton: ({ size, icon, allowReset, onClick, onMouseDown, ...restProps }: Partial<import("../..").IconButtonProps> & import("../components/ResetButton/ResetButton.types").ResetButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Inputs/NumericInput/NumericInput.d.ts

@@ -10,7 +10,7 @@ declare const NumericInput: import("react").ForwardRefExoticComponent<import("..
     }) => import("react/jsx-runtime").JSX.Element;
     LoadingIndicator: ({ loading, ...restProps }: import("../components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
     Tag: import("react").ForwardRefExoticComponent<import("../components/InputTag/InputTag.types").InputTagProps & import("../components/InputTag/InputTag.types").RestInputTagProps & import("react").RefAttributes<HTMLInputElement>>;
-    ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+    ReadonlyValue: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
         readOnly: boolean;
     }, "readOnly">;
     ResetButton: ({ size, icon, allowReset, onClick, onMouseDown, ...restProps }: Partial<import("../..").IconButtonProps> & import("../components/ResetButton/ResetButton.types").ResetButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Inputs/QuantityCounter/QuantityCounter.d.ts

@@ -19,7 +19,7 @@ declare const QuantityCounter: import("react").ForwardRefExoticComponent<import(
         }, "aria-description" | "autoSize">;
         ValueLabel: ({ children }: import("./components/InputGroup/components/ValueLabel/ValueLabel.types").ValueLabelProps) => import("react/jsx-runtime").JSX.Element | null;
     };
-    ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+    ReadonlyValue: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
         readOnly: boolean;
     }, "readOnly">;
 };

package/dist/Inputs/QuantityCounter/components/InputGroup/components/ValueLabel/ValueLabel.style.d.ts

@@ -1 +1,2 @@
-export declare const ValueLabel: 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 ValueLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Inputs/TextArea/TextArea.d.ts

@@ -13,7 +13,7 @@ declare const TextArea: import("react").ForwardRefExoticComponent<Omit<import(".
         readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     Tag: import("react").ForwardRefExoticComponent<import("./components/TextAreaTag/TextAreaTag").RestTextAreaTagProps & import("react").RefAttributes<HTMLTextAreaElement>>;
-    ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+    ReadonlyValue: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
         readOnly: boolean;
     }, "readOnly">;
 };

package/dist/Inputs/TextArea/components/Compose/Compose.style.d.ts

@@ -7,6 +7,6 @@ export declare const TextAreaCompose: import("styled-components").StyledComponen
 } & {
     readOnly?: boolean | undefined;
 }, never>;
-export declare const ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+export declare const ReadonlyValue: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
     readOnly: boolean;
 }, "readOnly">;

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/Compose/Compose.style.d.ts

@@ -1,9 +1,10 @@
+/// <reference types="react" />
 import { InputVariant } from './CommonCompose.types';
 export declare const CommonInputCompose: import("styled-components").StyledComponent<"div", any, {
     'data-status': import("../../../FormField").FieldStatus | undefined;
 } & {
     $variant: InputVariant;
 }, "data-status">;
-export declare const ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+export declare const ReadonlyValue: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
     readOnly: boolean;
 }, "readOnly">;

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;