@redis-ui/components 43.0.2 → 43.2.1

package/dist/HighlightedIcon/HighlightedIcon.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const HighlightedIcon_style = require("./HighlightedIcon.style.cjs");
+const HighlightedIcon = ({
+  icon: IconComponent,
+  size = "M",
+  type = "primary",
+  ...restProps
+}) => {
+  const theme = redisUiStyles.useTheme();
+  const iconSize = theme.core.icon.size[size];
+  return jsxRuntime.jsxRuntimeExports.jsx(HighlightedIcon_style.HighlightedIconContainer, {
+    "$size": size,
+    "$type": type,
+    ...restProps,
+    children: jsxRuntime.jsxRuntimeExports.jsx(IconComponent, {
+      customColor: "currentColor",
+      customSize: iconSize,
+      "aria-hidden": true
+    })
+  });
+};
+const HighlightedIcon$1 = HighlightedIcon;
+exports.default = HighlightedIcon$1;

package/dist/HighlightedIcon/HighlightedIcon.d.ts

@@ -0,0 +1,3 @@
+import { HighlightedIconProps } from './HighlightedIcon.types';
+declare const HighlightedIcon: ({ icon: IconComponent, size, type, ...restProps }: HighlightedIconProps) => import("react/jsx-runtime").JSX.Element;
+export default HighlightedIcon;

package/dist/HighlightedIcon/HighlightedIcon.js

@@ -0,0 +1,26 @@
+import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { HighlightedIconContainer } from "./HighlightedIcon.style.js";
+const HighlightedIcon = ({
+  icon: IconComponent,
+  size = "M",
+  type = "primary",
+  ...restProps
+}) => {
+  const theme = useTheme();
+  const iconSize = theme.core.icon.size[size];
+  return jsxRuntimeExports.jsx(HighlightedIconContainer, {
+    "$size": size,
+    "$type": type,
+    ...restProps,
+    children: jsxRuntimeExports.jsx(IconComponent, {
+      customColor: "currentColor",
+      customSize: iconSize,
+      "aria-hidden": true
+    })
+  });
+};
+const HighlightedIcon$1 = HighlightedIcon;
+export {
+  HighlightedIcon$1 as default
+};

package/dist/HighlightedIcon/HighlightedIcon.style.cjs

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const SIZE_MAP = {
+  XS: {
+    size: "1.6rem",
+    borderRadius: "0.3rem"
+  },
+  S: {
+    size: "2rem",
+    borderRadius: "0.3rem"
+  },
+  M: {
+    size: "2.4rem",
+    borderRadius: "0.5rem"
+  },
+  L: {
+    size: "3.2rem",
+    borderRadius: "0.5rem"
+  },
+  XL: {
+    size: "4rem",
+    borderRadius: "0.8rem"
+  },
+  XXL: {
+    size: "4.4rem",
+    borderRadius: "0.8rem"
+  }
+};
+const getColors = (type) => {
+  const theme = redisUiStyles.useTheme();
+  return theme.components.highlightedIcon.variants[type];
+};
+const HighlightedIconContainer = _styled__default.default.div.withConfig({
+  displayName: "HighlightedIconstyle__HighlightedIconContainer",
+  componentId: "RedisUI__sc-o2gs2e-0"
+})(["display:inline-flex;align-items:center;justify-content:center;width:", ";aspect-ratio:1;background-color:", ";color:", ";border-radius:", ";flex-shrink:0;"], ({
+  $size
+}) => SIZE_MAP[$size].size, ({
+  $type
+}) => getColors($type).background, ({
+  $type
+}) => getColors($type).text, ({
+  $size
+}) => SIZE_MAP[$size].borderRadius);
+exports.HighlightedIconContainer = HighlightedIconContainer;

package/dist/HighlightedIcon/HighlightedIcon.style.d.ts

@@ -0,0 +1,5 @@
+import { HighlightedIconType, IconSizeType } from '@redislabsdev/redis-ui-styles';
+export declare const HighlightedIconContainer: import("styled-components").StyledComponent<"div", any, {
+    $size: IconSizeType;
+    $type: HighlightedIconType;
+}, never>;

package/dist/HighlightedIcon/HighlightedIcon.style.js

@@ -0,0 +1,47 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const SIZE_MAP = {
+  XS: {
+    size: "1.6rem",
+    borderRadius: "0.3rem"
+  },
+  S: {
+    size: "2rem",
+    borderRadius: "0.3rem"
+  },
+  M: {
+    size: "2.4rem",
+    borderRadius: "0.5rem"
+  },
+  L: {
+    size: "3.2rem",
+    borderRadius: "0.5rem"
+  },
+  XL: {
+    size: "4rem",
+    borderRadius: "0.8rem"
+  },
+  XXL: {
+    size: "4.4rem",
+    borderRadius: "0.8rem"
+  }
+};
+const getColors = (type) => {
+  const theme = useTheme();
+  return theme.components.highlightedIcon.variants[type];
+};
+const HighlightedIconContainer = _styled.div.withConfig({
+  displayName: "HighlightedIconstyle__HighlightedIconContainer",
+  componentId: "RedisUI__sc-o2gs2e-0"
+})(["display:inline-flex;align-items:center;justify-content:center;width:", ";aspect-ratio:1;background-color:", ";color:", ";border-radius:", ";flex-shrink:0;"], ({
+  $size
+}) => SIZE_MAP[$size].size, ({
+  $type
+}) => getColors($type).background, ({
+  $type
+}) => getColors($type).text, ({
+  $size
+}) => SIZE_MAP[$size].borderRadius);
+export {
+  HighlightedIconContainer
+};

package/dist/HighlightedIcon/HighlightedIcon.types.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { IconType as IconComponent } from '@redislabsdev/redis-ui-icons';
+import { HighlightedIconType, IconSizeType } from '@redislabsdev/redis-ui-styles';
+export interface HighlightedIconProps extends HTMLAttributes<HTMLDivElement> {
+    icon: IconComponent;
+    size?: IconSizeType;
+    type?: HighlightedIconType;
+}

package/dist/HighlightedIcon/index.d.ts

@@ -0,0 +1,3 @@
+export { default as HighlightedIcon } from './HighlightedIcon';
+export * from './HighlightedIcon.types';
+export * as HighlightedIconStyles from './HighlightedIcon.style';

package/dist/Stepper/Stepper.cjs

@@ -1,21 +1,30 @@
 "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 Step = require("./components/Step/Step.cjs");
 const Compose = require("./components/Compose/Compose.cjs");
+const Stepper_utils = require("./Stepper.utils.cjs");
 const Stepper = Object.assign(({
   steps,
   ...restProps
 }) => {
+  const {
+    currentStep = -1
+  } = restProps;
   return jsxRuntime.jsxRuntimeExports.jsx(Stepper.Compose, {
     ...restProps,
     children: steps.map((step, idx) => (
       // eslint-disable-next-line react/no-array-index-key
-      jsxRuntime.jsxRuntimeExports.jsxs(Step.default.Compose, {
-        children: [jsxRuntime.jsxRuntimeExports.jsx(Step.default.Icon, {
-          children: step.icon
-        }), jsxRuntime.jsxRuntimeExports.jsx(Step.default.Label, {
-          children: step.label
+      jsxRuntime.jsxRuntimeExports.jsxs(React.Fragment, {
+        children: [idx > 0 && jsxRuntime.jsxRuntimeExports.jsx(Step.default.Separator, {
+          state: Stepper_utils.getStepState(idx, currentStep)
+        }), jsxRuntime.jsxRuntimeExports.jsxs(Step.default.Compose, {
+          children: [jsxRuntime.jsxRuntimeExports.jsx(Step.default.Icon, {
+            children: step.icon
+          }), jsxRuntime.jsxRuntimeExports.jsx(Step.default.Label, {
+            children: step.label
+          })]
         })]
       }, idx)
     ))

package/dist/Stepper/Stepper.d.ts

@@ -4,6 +4,7 @@ declare const Stepper: (({ steps, ...restProps }: StepperProps) => import("react
         Compose: ({ onClick, ...restProps }: import("./components/Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
         Icon: ({ children, ...restProps }: import("./components/Step/components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
         Label: ({ children, ...restProps }: import("./components/Step/components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element | null;
+        Separator: ({ state, ...restProps }: import("./components/Step/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
         useStepContext: () => import(".").StepperStepContextType;
     };
     Compose: (({ currentStep, getIsStepInteractive, onStepChange, onKeyDown, ...restProps }: import("./components/Compose/Compose.types").StepperComposeProps) => import("react/jsx-runtime").JSX.Element) & {
@@ -11,6 +12,7 @@ declare const Stepper: (({ steps, ...restProps }: StepperProps) => import("react
             Compose: ({ onClick, ...restProps }: import("./components/Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
             Icon: ({ children, ...restProps }: import("./components/Step/components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
             Label: ({ children, ...restProps }: import("./components/Step/components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element | null;
+            Separator: ({ state, ...restProps }: import("./components/Step/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
             useStepContext: () => import(".").StepperStepContextType;
         };
     };

package/dist/Stepper/Stepper.js

@@ -1,19 +1,28 @@
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { Fragment } from "react";
 import Step from "./components/Step/Step.js";
 import StepperCompose from "./components/Compose/Compose.js";
+import { getStepState } from "./Stepper.utils.js";
 const Stepper = Object.assign(({
   steps,
   ...restProps
 }) => {
+  const {
+    currentStep = -1
+  } = restProps;
   return jsxRuntimeExports.jsx(Stepper.Compose, {
     ...restProps,
     children: steps.map((step, idx) => (
       // eslint-disable-next-line react/no-array-index-key
-      jsxRuntimeExports.jsxs(Step.Compose, {
-        children: [jsxRuntimeExports.jsx(Step.Icon, {
-          children: step.icon
-        }), jsxRuntimeExports.jsx(Step.Label, {
-          children: step.label
+      jsxRuntimeExports.jsxs(Fragment, {
+        children: [idx > 0 && jsxRuntimeExports.jsx(Step.Separator, {
+          state: getStepState(idx, currentStep)
+        }), jsxRuntimeExports.jsxs(Step.Compose, {
+          children: [jsxRuntimeExports.jsx(Step.Icon, {
+            children: step.icon
+          }), jsxRuntimeExports.jsx(Step.Label, {
+            children: step.label
+          })]
         })]
       }, idx)
     ))

package/dist/Stepper/Stepper.utils.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const getStepState = (idx, currentStep) => {
+  if (idx < currentStep) {
+    return "completed";
+  }
+  if (idx === currentStep) {
+    return "focused";
+  }
+  return "idle";
+};
+exports.getStepState = getStepState;

package/dist/Stepper/Stepper.utils.d.ts

@@ -0,0 +1,2 @@
+import { StepperStepStateType } from './components/Step/Step.types';
+export declare const getStepState: (idx: number, currentStep: number) => StepperStepStateType;

package/dist/Stepper/Stepper.utils.js

@@ -0,0 +1,12 @@
+const getStepState = (idx, currentStep) => {
+  if (idx < currentStep) {
+    return "completed";
+  }
+  if (idx === currentStep) {
+    return "focused";
+  }
+  return "idle";
+};
+export {
+  getStepState
+};

package/dist/Stepper/components/Compose/Compose.d.ts

@@ -4,6 +4,7 @@ declare const StepperCompose: (({ currentStep, getIsStepInteractive, onStepChang
         Compose: ({ onClick, ...restProps }: import("../Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
         Icon: ({ children, ...restProps }: import("../Step/components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
         Label: ({ children, ...restProps }: import("../Step/components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element | null;
+        Separator: ({ state, ...restProps }: import("../Step/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
         useStepContext: () => import("../..").StepperStepContextType;
     };
 };

package/dist/Stepper/components/Step/Step.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const Compose = require("./components/Compose/Compose.cjs");
 const Icon = require("./components/Icon/Icon.cjs");
 const Label = require("./components/Label/Label.cjs");
+const Separator = require("./components/Separator/Separator.cjs");
 const Step_context = require("./Step.context.cjs");
 const Step = Object.assign(({
   children,
@@ -17,6 +18,7 @@ const Step = Object.assign(({
   Compose: Compose.default,
   Icon: Icon.default,
   Label: Label.default,
+  Separator: Separator.default,
   useStepContext: Step_context.useStepContext
 });
 exports.default = Step;

package/dist/Stepper/components/Step/Step.d.ts

@@ -3,6 +3,7 @@ declare const Step: (({ children, ...restProps }: StepperStepProps) => import("r
     Compose: ({ onClick, ...restProps }: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
     Icon: ({ children, ...restProps }: import("./components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     Label: ({ children, ...restProps }: import("./components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element | null;
+    Separator: ({ state, ...restProps }: import("./components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
     useStepContext: () => import("./Step.types").StepperStepContextType;
 };
 export default Step;

package/dist/Stepper/components/Step/Step.js

@@ -2,6 +2,7 @@ import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.
 import Compose from "./components/Compose/Compose.js";
 import Icon from "./components/Icon/Icon.js";
 import Label from "./components/Label/Label.js";
+import Separator from "./components/Separator/Separator.js";
 import { useStepContext } from "./Step.context.js";
 const Step = Object.assign(({
   children,
@@ -15,6 +16,7 @@ const Step = Object.assign(({
   Compose,
   Icon,
   Label,
+  Separator,
   useStepContext
 });
 export {

package/dist/Stepper/components/Step/components/Compose/Compose.cjs

@@ -3,11 +3,11 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
 const React = require("react");
 const Step_context = require("../../Step.context.cjs");
-const Step_types = require("../../Step.types.cjs");
 const useStepRegistration = require("../../../../hooks/useStepRegistration.cjs");
 const Stepper_context = require("../../../../Stepper.context.cjs");
 const Compose_style = require("./Compose.style.cjs");
 const useStepperInteractive = require("../../../../hooks/useStepperInteractive.cjs");
+const Stepper_utils = require("../../../../Stepper.utils.cjs");
 const Compose = ({
   onClick,
   ...restProps
@@ -20,14 +20,7 @@ const Compose = ({
   const {
     stepIndex
   } = useStepRegistration.useStepRegistration();
-  let state = Step_types.StepperStepState.IDLE;
-  if (stepIndex >= 0) {
-    if (stepIndex < currentStep) {
-      state = Step_types.StepperStepState.COMPLETED;
-    } else if (stepIndex === currentStep) {
-      state = Step_types.StepperStepState.FOCUSED;
-    }
-  }
+  const state = stepIndex >= 0 ? Stepper_utils.getStepState(stepIndex, currentStep) : "idle";
   const contextValue = React.useMemo(() => ({
     state,
     index: stepIndex

package/dist/Stepper/components/Step/components/Compose/Compose.js

@@ -1,11 +1,11 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import { useMemo } from "react";
 import { StepContextProvider } from "../../Step.context.js";
-import { StepperStepState } from "../../Step.types.js";
 import { useStepRegistration } from "../../../../hooks/useStepRegistration.js";
 import { useStepperContext } from "../../../../Stepper.context.js";
 import { StepCompose } from "./Compose.style.js";
 import { getInteractiveStepProps } from "../../../../hooks/useStepperInteractive.js";
+import { getStepState } from "../../../../Stepper.utils.js";
 const Compose = ({
   onClick,
   ...restProps
@@ -18,14 +18,7 @@ const Compose = ({
   const {
     stepIndex
   } = useStepRegistration();
-  let state = StepperStepState.IDLE;
-  if (stepIndex >= 0) {
-    if (stepIndex < currentStep) {
-      state = StepperStepState.COMPLETED;
-    } else if (stepIndex === currentStep) {
-      state = StepperStepState.FOCUSED;
-    }
-  }
+  const state = stepIndex >= 0 ? getStepState(stepIndex, currentStep) : "idle";
   const contextValue = useMemo(() => ({
     state,
     index: stepIndex

package/dist/Stepper/components/Step/components/Separator/Separator.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const Separator_style = require("./Separator.style.cjs");
+const Separator = ({
+  state,
+  ...restProps
+}) => {
+  return jsxRuntime.jsxRuntimeExports.jsx(Separator_style.Separator, {
+    ...restProps,
+    "data-state": state,
+    "aria-hidden": true
+  });
+};
+exports.default = Separator;

package/dist/Stepper/components/Step/components/Separator/Separator.d.ts

@@ -0,0 +1,3 @@
+import { SeparatorProps } from './Separator.types';
+declare const Separator: ({ state, ...restProps }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export default Separator;

package/dist/Stepper/components/Step/components/Separator/Separator.js

@@ -0,0 +1,15 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Separator as Separator$1 } from "./Separator.style.js";
+const Separator = ({
+  state,
+  ...restProps
+}) => {
+  return jsxRuntimeExports.jsx(Separator$1, {
+    ...restProps,
+    "data-state": state,
+    "aria-hidden": true
+  });
+};
+export {
+  Separator as default
+};

package/dist/Stepper/components/Step/components/Separator/Separator.style.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Step_types = require("../../Step.types.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const Separator = _styled__default.default.div.withConfig({
+  displayName: "Separatorstyle__Separator",
+  componentId: "RedisUI__sc-89iwun-0"
+})(["width:1.6rem;height:", ";transition:background-color 0.3s ease;", ""], () => redisUiStyles.useTheme().components.stepper.step.separator.height, () => {
+  const {
+    states
+  } = redisUiStyles.useTheme().components.stepper.step;
+  return Object.values(Step_types.StepperStepState).map((state) => {
+    const theme = states[state].separator;
+    return _styled.css`
+        &[data-state='${state}'] {
+          background-color: ${theme.bgColor};
+        }
+      `;
+  });
+});
+exports.Separator = Separator;

package/dist/Stepper/components/Step/components/Separator/Separator.style.d.ts

@@ -0,0 +1 @@
+export declare const Separator: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Stepper/components/Step/components/Separator/Separator.style.js

@@ -0,0 +1,22 @@
+import _styled, { css } from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { StepperStepState } from "../../Step.types.js";
+const Separator = _styled.div.withConfig({
+  displayName: "Separatorstyle__Separator",
+  componentId: "RedisUI__sc-89iwun-0"
+})(["width:1.6rem;height:", ";transition:background-color 0.3s ease;", ""], () => useTheme().components.stepper.step.separator.height, () => {
+  const {
+    states
+  } = useTheme().components.stepper.step;
+  return Object.values(StepperStepState).map((state) => {
+    const theme = states[state].separator;
+    return css`
+        &[data-state='${state}'] {
+          background-color: ${theme.bgColor};
+        }
+      `;
+  });
+});
+export {
+  Separator
+};

package/dist/Stepper/components/Step/components/Separator/Separator.types.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+import { StepperStepStateType } from '../../Step.types';
+export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+    state?: StepperStepStateType;
+}

package/dist/index.cjs

@@ -1134,6 +1134,8 @@ const SelfContained = require("./Helpers/SelfContained.cjs");
 const RestylableElement = require("./Helpers/RestylableElement.cjs");
 const Popper_context = require("./Helpers/contexts/Popper/Popper.context.cjs");
 const useScrollable = require("./Helpers/hooks/useScrollable.cjs");
+const HighlightedIcon = require("./HighlightedIcon/HighlightedIcon.cjs");
+const HighlightedIcon_style = require("./HighlightedIcon/HighlightedIcon.style.cjs");
 const Input = require("./Inputs/Input/Input.cjs");
 const NumericInput = require("./Inputs/NumericInput/NumericInput.cjs");
 const PasswordInput = require("./Inputs/PasswordInput/PasswordInput.cjs");
@@ -1257,6 +1259,8 @@ exports.RestylableElement = RestylableElement.RestylableElement;
 exports.PopperProvider = Popper_context.PopperProvider;
 exports.usePopperContext = Popper_context.usePopperContext;
 exports.useScrollable = useScrollable.useScrollable;
+exports.HighlightedIcon = HighlightedIcon.default;
+exports.HighlightedIconStyles = HighlightedIcon_style;
 exports.Input = Input.default;
 exports.NumericInput = NumericInput.default;
 exports.PasswordInput = PasswordInput.default;

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export * from './DatePicker';
 export * from './Drawer';
 export * from './Filters';
 export * from './Helpers';
+export * from './HighlightedIcon';
 export * from './Inputs';
 export * from './FormField';
 export * from './KeyValueList';