@redis-ui/components 37.0.0

package/dist/Helpers/css.utils.d.ts

@@ -0,0 +1,85 @@
+import { StyledComponent } from 'styled-components';
+/**
+ * converts pixels to rem
+ */
+export declare const pxToRem: (px?: number) => number;
+/**
+ *
+ * @param value - number to convert
+ * @param toRem  - if true, converts to rem, otherwise to pixels
+ * @returns - converted value with unit
+ */
+export declare const numToUnit: (value?: number, toRem?: boolean) => string;
+/**
+ * by default converts numeric value to pixels (10 -> "10px"),
+ * if toRem is true, converts to rem (10 -> "1rem"),
+ * falsy values replaces with defaultSize,
+ * string values keeps as is
+ */
+export declare const calcSize: (size: string | number | undefined | null, defaultSize?: string | number, toRem?: boolean) => string;
+export type TokenMap<T extends string = string> = {
+    cssProp: string;
+    token: T;
+    transformValue?: (value: never, customData?: unknown) => string | undefined;
+    attendantCss?: string;
+};
+export type ThemeTokens<T extends string> = Partial<Record<T, unknown>>;
+/**
+ * generates style entries, using tokens and token-to-css map
+ * @param tokenMaps - token-to-css map defines token, css property and optional transform function
+ * @param tokens - list of tokens (token-to-value map)
+ * @param fallbackTokens - optional list of fallback tokens. I will be used, if main tokens have falsy value
+ * @param customData - optional data, that will be passed to token value transform functions
+ */
+export declare const styleFromTokens: <T extends string>(tokenMaps: TokenMap<T>[], tokens: Partial<Record<T, unknown>> | undefined, fallbackTokens?: Partial<Record<T, unknown>> | undefined, customData?: unknown) => string[];
+export declare const tokenMaps: Record<string, TokenMap>;
+export declare const tokenMapMod: <T extends string>(tokenMap: TokenMap, token: T) => TokenMap<T>;
+/**
+ * create escaped id selector from original id
+ * @param id - original id - any valid unescaped html id
+ */
+export declare const getIdSelector: (id: string) => string;
+/**
+ * create selector, using state of associated input.
+ *
+ * it allows to style label according to the state of associated input
+ *
+ * @param inputSelector - associated input selector
+ * @param inputStateSelector - selector of the input state(s), like `:hover` or `:is(:hover, :active)`. Can be empty for default state.
+ * @param commonContainer - single container, that holds both associated input and selecting element (default - 'body')
+ * @param ownSelectorInContainer - selector of the element in container (default &&)
+ *        | Note: we use double && to allow styled-components use unique component class instead of common one
+ * @example
+ *     styled.label`
+ *       ${() => getRelatedStateSelector(CheckIndicator, ':disabled', CheckboxWrapper)} {
+ *         pointer-events: none;
+ *       }
+ *     ....
+ *     `
+ */
+export declare const getRelatedStateSelector: (inputSelector: string, inputStateSelector: string, commonContainer: StyledComponent<never, never> | string, ownSelectorInContainer?: string) => string;
+type DimensionsX2 = {
+    start?: string;
+    end?: string;
+};
+/**
+ * takes CSS 2-entry dimensions string, like padding-block and extracts start-end dimensions,
+ * if input string contains 1 entry - returns same value for both dimensions,
+ * for no entries or 3+ entries, ignores values, like in CSS
+ */
+export declare const splitDimensionsX2: (dimensions: string | undefined) => DimensionsX2;
+export type DimensionsX4 = {
+    top?: string;
+    left?: string;
+    bottom?: string;
+    right?: string;
+    inline?: string;
+    block?: string;
+};
+/**
+ * takes CSS 4-entry dimensions string, like padding and extracts 4 dimensions + inline/block values,
+ * extracts 4 dimensions from 1-4 entries input string according to rules of CSS (see `padding`),
+ * for 5+ entries, ignores values, like in CSS
+ */
+export declare const splitDimensionsX4: (dimensions: string | undefined) => DimensionsX4;
+export {};

package/dist/Helpers/css.utils.js

@@ -0,0 +1,125 @@
+const pxToRem = (px = 0) => px / 10;
+const numToUnit = (value = 0, toRem = false) => toRem ? `${pxToRem(value)}rem` : `${value}px`;
+const calcSize = (size, defaultSize = "", toRem = false) => {
+  return typeof size === "number" ? numToUnit(size, toRem) : size || (typeof defaultSize === "number" ? numToUnit(defaultSize, toRem) : defaultSize);
+};
+const styleFromTokens = (tokenMaps2, tokens, fallbackTokens, customData) => tokenMaps2.map(({
+  cssProp,
+  token,
+  transformValue,
+  attendantCss
+}) => {
+  const tokenValue = (tokens == null ? void 0 : tokens[token]) || (fallbackTokens == null ? void 0 : fallbackTokens[token]);
+  const value = transformValue ? transformValue(tokenValue, customData) : tokenValue;
+  return {
+    cssProp,
+    value,
+    attendantCss
+  };
+}).filter(({
+  value
+}) => value).map(({
+  cssProp,
+  value,
+  attendantCss
+}) => `${cssProp}: ${value};${attendantCss ? ` ${attendantCss};` : ""}`);
+const tokenMaps = {
+  display: {
+    cssProp: "display",
+    token: "display"
+  },
+  bgColor: {
+    cssProp: "background-color",
+    token: "bgColor"
+  },
+  textColor: {
+    cssProp: "color",
+    token: "textColor"
+  },
+  borderRadius: {
+    cssProp: "border-radius",
+    token: "borderRadius"
+  },
+  borderWidth: {
+    cssProp: "border-width",
+    token: "borderWidth",
+    attendantCss: "border-style: solid"
+  },
+  shadowBorder: {
+    cssProp: "box-shadow",
+    token: "borderColor",
+    transformValue: (color) => color ? `inset 0 0 0 1px ${color}` : void 0
+  },
+  borderColor: {
+    cssProp: "border-color",
+    token: "borderColor",
+    transformValue: (color) => color || "transparent"
+  },
+  padding: {
+    cssProp: "padding",
+    token: "padding"
+  },
+  margin: {
+    cssProp: "margin",
+    token: "margin"
+  },
+  height: {
+    cssProp: "height",
+    token: "height"
+  },
+  width: {
+    cssProp: "width",
+    token: "width"
+  },
+  inset: {
+    cssProp: "inset",
+    token: "inset"
+  },
+  lineHeight: {
+    cssProp: "line-height",
+    token: "lineHeight"
+  },
+  fontSize: {
+    cssProp: "font-size",
+    token: "fontSize"
+  },
+  fontWeight: {
+    cssProp: "font-weight",
+    token: "fontWeight"
+  },
+  letterSpacing: {
+    cssProp: "letter-spacing",
+    token: "letterSpacing"
+  },
+  opacity: {
+    cssProp: "opacity",
+    token: "opacity"
+  }
+};
+const tokenMapMod = (tokenMap, token) => ({
+  ...tokenMap,
+  token
+});
+const getRelatedStateSelector = (inputSelector, inputStateSelector, commonContainer, ownSelectorInContainer = ":where(&&)") => `${commonContainer}:has(:where(${inputSelector})${inputStateSelector}) ${ownSelectorInContainer}`;
+const splitDimensionsX2 = (dimensions) => {
+  const split = dimensions == null ? void 0 : dimensions.trim().split(/\s+/g);
+  if (!(split == null ? void 0 : split.length) || !split[0]) return {};
+  if (split.length > 2) {
+    console.warn('Error: splitting dimensions "', dimensions, '" contains incorrect number of entries. Expecting 2, received', split.length);
+    return {};
+  }
+  return {
+    start: split[0],
+    end: split[1] || split[0]
+  };
+};
+export {
+  calcSize,
+  getRelatedStateSelector,
+  numToUnit,
+  pxToRem,
+  splitDimensionsX2,
+  styleFromTokens,
+  tokenMapMod,
+  tokenMaps
+};

package/dist/Helpers/debounce.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const debounce = (mainFunction, timeout = 300) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      mainFunction(...args);
+    }, timeout);
+  };
+};
+exports.debounce = debounce;

package/dist/Helpers/debounce.d.ts

@@ -0,0 +1 @@
+export declare const debounce: <T extends (...args: any[]) => any>(mainFunction: T, timeout?: number) => (...args: Parameters<T>) => void;

package/dist/Helpers/debounce.js

@@ -0,0 +1,12 @@
+const debounce = (mainFunction, timeout = 300) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      mainFunction(...args);
+    }, timeout);
+  };
+};
+export {
+  debounce
+};

package/dist/Helpers/generateId.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+let notified = false;
+const getRandomValuesFallback = (arr) => {
+  if (!arr.some((n) => n)) {
+    if (!notified) {
+      notified = true;
+      console.error("window.crypto.getRandomValues doesnt work, using Math.random fallback");
+    }
+    arr.forEach((_, index) => {
+      arr[index] = Math.ceil(Math.random() * 255);
+    });
+  }
+};
+function generateId(length) {
+  for (; ; ) {
+    const arr = new Uint8Array((length || 40) / 2);
+    window.crypto.getRandomValues(arr);
+    getRandomValuesFallback(arr);
+    const index = arr.findIndex((val) => val >= 160);
+    if (index >= 0) {
+      if (index > 0) {
+        [arr[0], arr[index]] = [arr[index], arr[0]];
+      }
+      return Array.from(arr, (dec) => dec.toString(16).padStart(2, "0")).join("");
+    }
+  }
+}
+const useGeneratedId = (length = 10) => {
+  const [id, setId] = React.useState("");
+  React.useEffect(() => {
+    setId(generateId(length));
+  }, [length]);
+  return id;
+};
+exports.generateId = generateId;
+exports.useGeneratedId = useGeneratedId;

package/dist/Helpers/generateId.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Generates id, based on hex digits
+ * Based on: https://stackoverflow.com/a/27747377
+ */
+export declare function generateId(length: number): string;
+export declare const useGeneratedId: (length?: number) => string;

package/dist/Helpers/generateId.js

@@ -0,0 +1,38 @@
+import { useState, useEffect } from "react";
+let notified = false;
+const getRandomValuesFallback = (arr) => {
+  if (!arr.some((n) => n)) {
+    if (!notified) {
+      notified = true;
+      console.error("window.crypto.getRandomValues doesnt work, using Math.random fallback");
+    }
+    arr.forEach((_, index) => {
+      arr[index] = Math.ceil(Math.random() * 255);
+    });
+  }
+};
+function generateId(length) {
+  for (; ; ) {
+    const arr = new Uint8Array((length || 40) / 2);
+    window.crypto.getRandomValues(arr);
+    getRandomValuesFallback(arr);
+    const index = arr.findIndex((val) => val >= 160);
+    if (index >= 0) {
+      if (index > 0) {
+        [arr[0], arr[index]] = [arr[index], arr[0]];
+      }
+      return Array.from(arr, (dec) => dec.toString(16).padStart(2, "0")).join("");
+    }
+  }
+}
+const useGeneratedId = (length = 10) => {
+  const [id, setId] = useState("");
+  useEffect(() => {
+    setId(generateId(length));
+  }, [length]);
+  return id;
+};
+export {
+  generateId,
+  useGeneratedId
+};

package/dist/Helpers/getTextWidthByPx.d.ts

@@ -0,0 +1 @@
+export declare const getTextWidthByPx: (text: string, fontSize?: string, fontFamily?: string) => number;

package/dist/Helpers/hooks/useWindowDimensions.d.ts

@@ -0,0 +1,4 @@
+export declare const useWindowDimensions: () => {
+    screenWidth: number;
+    screenHeight: number;
+};

package/dist/Helpers/index.d.ts

@@ -0,0 +1,8 @@
+export * from './react.utils';
+export * from './generateId';
+export * from './debounce';
+export * from './contexts/SharedId.context';
+export * from './contexts/PrimitiveContextState';
+export * from './SelfContained';
+export * from './RestylableElement';
+export * from './contexts/Popper/Popper.context';

package/dist/Helpers/react.utils.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../node_modules/react-children-utilities/react-children-utilities.cjs");
+const onlyText = require("../node_modules/react-children-utilities/lib/onlyText.cjs");
+const childrenToString = onlyText.default;
+const combineHandlers = (...handlers) => {
+  const validHandlers = handlers.filter((handler) => typeof handler === "function");
+  if (!validHandlers.length) return void 0;
+  if (validHandlers.length === 1) return validHandlers[0];
+  return (...params) => validHandlers.forEach((handler) => handler(...params));
+};
+exports.childrenToString = childrenToString;
+exports.combineHandlers = combineHandlers;

package/dist/Helpers/react.utils.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const childrenToString: (children: import("react").ReactNode | import("react").ReactNode[]) => string;
+type AnyVoidFunction = (...args: never[]) => void;
+export declare const combineHandlers: <T extends AnyVoidFunction>(...handlers: (T | null | undefined)[]) => T | undefined;
+export {};

package/dist/Helpers/react.utils.js

@@ -0,0 +1,13 @@
+import "../node_modules/react-children-utilities/react-children-utilities.js";
+import onlyText from "../node_modules/react-children-utilities/lib/onlyText.js";
+const childrenToString = onlyText;
+const combineHandlers = (...handlers) => {
+  const validHandlers = handlers.filter((handler) => typeof handler === "function");
+  if (!validHandlers.length) return void 0;
+  if (validHandlers.length === 1) return validHandlers[0];
+  return (...params) => validHandlers.forEach((handler) => handler(...params));
+};
+export {
+  childrenToString,
+  combineHandlers
+};

package/dist/Helpers/test/mockBoundingRect.d.ts

@@ -0,0 +1,3 @@
+export declare const mockBoundingRect: (initialRect?: Partial<DOMRect>) => {
+    updateBoundingRectWidth: (newWidth: number) => void;
+};

package/dist/Inputs/Input/Input.cjs

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const InputTag = require("../components/InputTag/InputTag.cjs");
+const StatusIndicator = require("../components/StatusIndicator/StatusIndicator.cjs");
+const LoadingIndicator = require("../components/LoadingIndicator/LoadingIndicator.cjs");
+const Compose_style = require("../components/Compose/Compose.style.cjs");
+const ResetButton = require("../components/ResetButton/ResetButton.cjs");
+const TextCompose = require("../components/Compose/TextCompose.cjs");
+const Input = Object.assign(React.forwardRef(({
+  id,
+  className,
+  style,
+  readOnly,
+  loading,
+  variant,
+  error,
+  valid,
+  value,
+  defaultValue,
+  onChange,
+  parser,
+  formatter,
+  allowReset = false,
+  ...restProps
+}, ref) => jsxRuntime.jsxRuntimeExports.jsxs(Input.Compose, {
+  id,
+  className,
+  style,
+  readOnly,
+  variant,
+  error,
+  valid,
+  value,
+  defaultValue,
+  onChange,
+  parser,
+  formatter,
+  readonlyProps: restProps,
+  children: [jsxRuntime.jsxRuntimeExports.jsx(Input.Tag, {
+    ref,
+    ...restProps
+  }), jsxRuntime.jsxRuntimeExports.jsx(Input.ResetButton, {
+    allowReset
+  }), jsxRuntime.jsxRuntimeExports.jsx(Input.StatusIndicator, {}), jsxRuntime.jsxRuntimeExports.jsx(Input.LoadingIndicator, {
+    loading
+  })]
+})), {
+  StatusIndicator: StatusIndicator.default,
+  Compose: TextCompose.default,
+  LoadingIndicator: LoadingIndicator.default,
+  Tag: InputTag.default,
+  ReadonlyValue: Compose_style.ReadonlyValue,
+  ResetButton: ResetButton.ResetButton
+});
+const Input$1 = Input;
+exports.default = Input$1;

package/dist/Inputs/Input/Input.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { RestInputProps } from './Input.types';
+declare const Input: import("react").ForwardRefExoticComponent<import("../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../components/Context/InputValueProvider").InputValueProviderProps, "children"> & import("../components/InputTag/InputTag.types").InputTagProps & import("../components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../components/ResetButton/ResetButton.types").ResetButtonProps & RestInputProps & import("react").RefAttributes<HTMLInputElement>> & {
+    StatusIndicator: ({ className, style, size, $customTitles, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className"> & {
+        $customTitles?: boolean | undefined;
+    }) => import("react/jsx-runtime").JSX.Element | null;
+    Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("../../Helpers/common.types").ComposeElementProps<HTMLDivElement>, "defaultValue" | "onChange"> & {
+        readonlyRender?: import("../components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
+        readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
+    }) => 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, component, color, ellipsis, ...restProps }: import("../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, 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;
+};
+export default Input;

package/dist/Inputs/Input/Input.js

@@ -0,0 +1,58 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { forwardRef } from "react";
+import InputTag from "../components/InputTag/InputTag.js";
+import StatusIndicator from "../components/StatusIndicator/StatusIndicator.js";
+import LoadingIndicator from "../components/LoadingIndicator/LoadingIndicator.js";
+import { ReadonlyValue } from "../components/Compose/Compose.style.js";
+import { ResetButton } from "../components/ResetButton/ResetButton.js";
+import TextInputCompose from "../components/Compose/TextCompose.js";
+const Input = Object.assign(forwardRef(({
+  id,
+  className,
+  style,
+  readOnly,
+  loading,
+  variant,
+  error,
+  valid,
+  value,
+  defaultValue,
+  onChange,
+  parser,
+  formatter,
+  allowReset = false,
+  ...restProps
+}, ref) => jsxRuntimeExports.jsxs(Input.Compose, {
+  id,
+  className,
+  style,
+  readOnly,
+  variant,
+  error,
+  valid,
+  value,
+  defaultValue,
+  onChange,
+  parser,
+  formatter,
+  readonlyProps: restProps,
+  children: [jsxRuntimeExports.jsx(Input.Tag, {
+    ref,
+    ...restProps
+  }), jsxRuntimeExports.jsx(Input.ResetButton, {
+    allowReset
+  }), jsxRuntimeExports.jsx(Input.StatusIndicator, {}), jsxRuntimeExports.jsx(Input.LoadingIndicator, {
+    loading
+  })]
+})), {
+  StatusIndicator,
+  Compose: TextInputCompose,
+  LoadingIndicator,
+  Tag: InputTag,
+  ReadonlyValue,
+  ResetButton
+});
+const Input$1 = Input;
+export {
+  Input$1 as default
+};

package/dist/Inputs/Input/Input.types.d.ts

@@ -0,0 +1,7 @@
+import { InputHTMLAttributes } from 'react';
+import { TextInputComposeProps } from '../components/Compose/TextCompose.types';
+import { InputTagProps } from '../components/InputTag/InputTag.types';
+import { LoadingIndicatorProps } from '../components/LoadingIndicator/LoadingIndicator.types';
+import { ResetButtonProps } from '../components/ResetButton/ResetButton.types';
+export type InputProps = TextInputComposeProps & InputTagProps & LoadingIndicatorProps & ResetButtonProps;
+export type RestInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'defaultValue' | 'value' | 'onChange' | 'readOnly'>;

package/dist/Inputs/NumericInput/NumericInput.cjs

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const InputTag = require("../components/InputTag/InputTag.cjs");
+const StatusIndicator = require("../components/StatusIndicator/StatusIndicator.cjs");
+const LoadingIndicator = require("../components/LoadingIndicator/LoadingIndicator.cjs");
+const Compose_style = require("../components/Compose/Compose.style.cjs");
+const ResetButton = require("../components/ResetButton/ResetButton.cjs");
+const NumericCompose = require("../components/Compose/NumericCompose.cjs");
+const NumericInput = Object.assign(React.forwardRef(({
+  id,
+  className,
+  style,
+  readOnly,
+  loading,
+  variant,
+  error,
+  valid,
+  allowReset = false,
+  value,
+  defaultValue,
+  onChange,
+  min,
+  max,
+  step,
+  required,
+  maxDecimals,
+  autoValidate,
+  validate,
+  calcStepActionValue,
+  ...restProps
+}, ref) => jsxRuntime.jsxRuntimeExports.jsxs(NumericInput.Compose, {
+  id,
+  className,
+  style,
+  readOnly,
+  variant,
+  error,
+  valid,
+  value,
+  defaultValue,
+  onChange,
+  min,
+  max,
+  step,
+  required,
+  maxDecimals,
+  autoValidate,
+  validate,
+  calcStepActionValue,
+  readonlyProps: restProps,
+  children: [jsxRuntime.jsxRuntimeExports.jsx(NumericInput.Tag, {
+    ref,
+    ...restProps
+  }), jsxRuntime.jsxRuntimeExports.jsx(NumericInput.ResetButton, {
+    allowReset
+  }), jsxRuntime.jsxRuntimeExports.jsx(NumericInput.StatusIndicator, {}), jsxRuntime.jsxRuntimeExports.jsx(NumericInput.LoadingIndicator, {
+    loading
+  })]
+})), {
+  StatusIndicator: StatusIndicator.default,
+  Compose: NumericCompose.default,
+  LoadingIndicator: LoadingIndicator.default,
+  Tag: InputTag.default,
+  ReadonlyValue: Compose_style.ReadonlyValue,
+  ResetButton: ResetButton.ResetButton
+});
+const NumericInput$1 = NumericInput;
+exports.default = NumericInput$1;

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { RestNumericInputProps } from './NumericInput.types';
+declare const NumericInput: import("react").ForwardRefExoticComponent<import("../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../components/Context/NumericInputValueProvider").NumericInputValueProviderProps, "children"> & import("../components/InputTag/InputTag.types").InputTagProps & import("../components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../components/ResetButton/ResetButton.types").ResetButtonProps & {
+    readOnly?: boolean | undefined;
+} & RestNumericInputProps & import("react").RefAttributes<HTMLInputElement>> & {
+    StatusIndicator: ({ className, style, size, $customTitles, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className"> & {
+        $customTitles?: boolean | undefined;
+    }) => import("react/jsx-runtime").JSX.Element | null;
+    Compose: ({ value, defaultValue, onChange, min, max, step, required, maxDecimals, autoValidate, validate, calcStepActionValue, ...restProps }: import("../components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../components/Context/NumericInputValueProvider").NumericInputValueProviderProps, "children"> & Omit<import("../../Helpers/common.types").ComposeElementProps<HTMLDivElement>, "defaultValue" | "onChange"> & {
+        readonlyRender?: import("../components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
+        readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
+    }) => 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, component, color, ellipsis, ...restProps }: import("../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, 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;
+};
+export default NumericInput;