@geneui/components 3.0.0-next-b458115-12022025 → 3.0.0-next-9bedd8e-12022025

package/Checkbox.js

@@ -4,7 +4,8 @@ import { _ as _objectWithoutProperties, a as _extends } from './ArrowLeft-b88e2b
 import HelperText from './HelperText.js';
 import Label from './Label.js';
 import { s as styleInject } from './style-inject.es-746bb8ed.js';
-import './WarningFill-fb50593e.js';
+import './ErrorAlertFill-a0afebbf.js';
+import './WarningFill-143d0870.js';
 import './Tooltip.js';
 import 'react-dom';
 import './GeneUIProvider.js';
@@ -50,7 +51,7 @@ var SvgMinusOutline = function SvgMinusOutline(_ref) {
   }));
 };
 
-var css_248z = ".checkbox{display:inline-flex;flex-direction:column;max-width:100%;min-width:0}.checkbox__input{-webkit-appearance:none;appearance:none;background:none;border:none;border-radius:var(--guit-ref-radius-4xsmall);height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.checkbox__input:checked+.checkbox__imitation,.checkbox__input:indeterminate+.checkbox__imitation{background-color:var(--guit-sem-color-background-selected-2);border-color:var(--guit-sem-color-background-selected-2)}.checkbox__input:checked+.checkbox__imitation:hover,.checkbox__input:indeterminate+.checkbox__imitation:hover{background-color:var(--guit-sem-color-background-selected-2-hover);border-color:var(--guit-sem-color-background-selected-2-hover)}.checkbox__input:checked+.checkbox__imitation:active,.checkbox__input:indeterminate+.checkbox__imitation:active{background-color:var(--guit-sem-color-background-selected-2-pressed);border-color:var(--guit-sem-color-background-selected-2-pressed)}.checkbox__input:checked+.checkbox__imitation .checkbox__icon,.checkbox__input:indeterminate+.checkbox__imitation .checkbox__icon{opacity:1}.checkbox__label{display:flex}.checkbox__imitationHolder{align-items:center;display:flex;flex:0 0 auto;height:var(--guit-sem-dimension-height-small);justify-content:center;width:var(--guit-sem-dimension-width-small)}.checkbox__imitationHolder .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}.checkbox__imitationHolder .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.checkbox__imitationHolderInner{align-items:center;display:flex;flex:0 0 auto;height:var(--guit-sem-dimension-height-xsmall);justify-content:center;position:relative;width:var(--guit-sem-dimension-width-xsmall)}.checkbox__imitation{border:var(--guit-ref-border-width-thin) solid var(--guit-sem-color-border-neutral-3);border-radius:var(--guit-ref-radius-4xsmall);height:100%;width:100%}.checkbox__icon{color:var(--guit-sem-color-foreground-inverse);left:0;opacity:0;position:absolute;top:0}.checkbox__infoContainer{display:flex}.checkbox:not(.checkbox_labelTop){gap:var(--guit-ref-spacing-4xsmall)}.checkbox:not(.checkbox_labelTop) .checkbox__infoContainer{-webkit-padding-start:var(--guit-ref-spacing-4xlarge);padding-inline-start:var(--guit-ref-spacing-4xlarge)}.checkbox:not(.checkbox_labelTop) .checkbox__label{gap:var(--guit-ref-spacing-xsmall)}.checkbox_labelTop{gap:var(--guit-ref-spacing-3xsmall)}.checkbox_labelTop .checkbox__label{align-items:normal;flex-direction:column-reverse;gap:var(--guit-ref-spacing-3xsmall)}.checkbox_error .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation{border-color:var(--guit-sem-color-border-error)}.checkbox_disabled{pointer-events:none;-webkit-user-select:none;user-select:none}.checkbox_disabled .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation{background-color:var(--guit-sem-color-background-disabled);border-color:var(--guit-sem-color-border-disabled-1)}.checkbox_disabled .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation .checkbox__icon{color:var(--guit-sem-color-foreground-disabled)}.checkbox_disabled .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation{background-color:var(--guit-sem-color-background-transparent-1)}.checkbox_readOnly{pointer-events:none}.checkbox_readOnly .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation{background-color:var(--guit-sem-color-background-neutral-3);border-color:#0000}.checkbox_readOnly .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation .checkbox__icon{color:var(--guit-sem-color-foreground-neutral-1)}.checkbox_readOnly .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation{border-color:var(--guit-sem-color-border-neutral-2)}";
+var css_248z = ".checkbox{display:inline-flex;flex-direction:column;max-width:100%;min-width:0}.checkbox__input{-webkit-appearance:none;appearance:none;background:none;border:none;border-radius:var(--guit-ref-radius-4xsmall);height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.checkbox__input:checked+.checkbox__imitation,.checkbox__input:indeterminate+.checkbox__imitation{background-color:var(--guit-sem-color-background-selected-2);border-color:var(--guit-sem-color-background-selected-2)}.checkbox__input:checked+.checkbox__imitation:hover,.checkbox__input:indeterminate+.checkbox__imitation:hover{background-color:var(--guit-sem-color-background-selected-2-hover);border-color:var(--guit-sem-color-background-selected-2-hover)}.checkbox__input:checked+.checkbox__imitation:active,.checkbox__input:indeterminate+.checkbox__imitation:active{background-color:var(--guit-sem-color-background-selected-2-pressed);border-color:var(--guit-sem-color-background-selected-2-pressed)}.checkbox__input:checked+.checkbox__imitation .checkbox__icon,.checkbox__input:indeterminate+.checkbox__imitation .checkbox__icon{opacity:1}.checkbox__label{display:flex;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content}.checkbox__imitationHolder{align-items:center;display:flex;flex:0 0 auto;height:var(--guit-sem-dimension-height-small);justify-content:center;width:var(--guit-sem-dimension-width-small)}.checkbox__imitationHolder .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}.checkbox__imitationHolder .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.checkbox__imitationHolderInner{align-items:center;display:flex;flex:0 0 auto;height:var(--guit-sem-dimension-height-xsmall);justify-content:center;position:relative;width:var(--guit-sem-dimension-width-xsmall)}.checkbox__imitation{border:var(--guit-ref-border-width-thin) solid var(--guit-sem-color-border-neutral-3);border-radius:var(--guit-ref-radius-4xsmall);height:100%;width:100%}.checkbox__icon{color:var(--guit-sem-color-foreground-inverse);left:0;opacity:0;position:absolute;top:0}.checkbox__infoContainer{display:flex}.checkbox:not(.checkbox_labelTop){gap:var(--guit-ref-spacing-4xsmall)}.checkbox:not(.checkbox_labelTop) .checkbox__infoContainer{-webkit-padding-start:var(--guit-ref-spacing-4xlarge);padding-inline-start:var(--guit-ref-spacing-4xlarge)}.checkbox:not(.checkbox_labelTop) .checkbox__label{gap:var(--guit-ref-spacing-xsmall)}.checkbox_labelTop{gap:var(--guit-ref-spacing-3xsmall)}.checkbox_labelTop .checkbox__label{align-items:normal;flex-direction:column-reverse;gap:var(--guit-ref-spacing-3xsmall)}.checkbox_error .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation{border-color:var(--guit-sem-color-border-error)}.checkbox_disabled{pointer-events:none;-webkit-user-select:none;user-select:none}.checkbox_disabled .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation{background-color:var(--guit-sem-color-background-disabled);border-color:var(--guit-sem-color-border-disabled-1)}.checkbox_disabled .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation .checkbox__icon{color:var(--guit-sem-color-foreground-disabled)}.checkbox_disabled .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation{background-color:var(--guit-sem-color-background-transparent-1)}.checkbox_readOnly{pointer-events:none}.checkbox_readOnly .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation{background-color:var(--guit-sem-color-background-neutral-3);border-color:#0000}.checkbox_readOnly .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation .checkbox__icon{color:var(--guit-sem-color-foreground-neutral-1)}.checkbox_readOnly .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation{border-color:var(--guit-sem-color-border-neutral-2)}";
 styleInject(css_248z);
 
 /**

package/ErrorAlertFill-a0afebbf.js

@@ -0,0 +1,23 @@
+import { _ as _objectWithoutProperties, a as _extends } from './ArrowLeft-b88e2ba8.js';
+import React__default from 'react';
+
+var _excluded = ["size", "color"];
+var SvgErrorAlertFill = function SvgErrorAlertFill(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "currentColor" : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-.75 5.758a.75.75 0 1 1 1.5 0v5.243a.75.75 0 1 1-1.5 0v-5.243Zm.75 9.235a.915.915 0 1 1 0-1.83.915.915 0 0 1 0 1.83Z",
+    fill: color
+  }));
+};
+
+export { SvgErrorAlertFill as S };

package/HelperText.js

@@ -1,6 +1,7 @@
 import React__default from 'react';
 import { c as classNames } from './index-ce02421b.js';
-import { S as SvgErrorAlertFill, a as SvgWarningFill } from './WarningFill-fb50593e.js';
+import { S as SvgErrorAlertFill } from './ErrorAlertFill-a0afebbf.js';
+import { S as SvgWarningFill } from './WarningFill-143d0870.js';
 import { s as styleInject } from './style-inject.es-746bb8ed.js';
 import './ArrowLeft-b88e2ba8.js';
 

package/ProgressBar.js

@@ -3,8 +3,9 @@ import { c as classNames } from './index-ce02421b.js';
 import HelperText from './HelperText.js';
 import Label from './Label.js';
 import { s as styleInject } from './style-inject.es-746bb8ed.js';
-import './WarningFill-fb50593e.js';
+import './ErrorAlertFill-a0afebbf.js';
 import './ArrowLeft-b88e2ba8.js';
+import './WarningFill-143d0870.js';
 import './Tooltip.js';
 import 'react-dom';
 import './GeneUIProvider.js';

package/Steps.js

@@ -0,0 +1,119 @@
+import React__default, { createContext, useMemo, Children, isValidElement, useContext } from 'react';
+import { c as classNames } from './index-ce02421b.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import { S as SvgErrorAlertFill } from './ErrorAlertFill-a0afebbf.js';
+import { _ as _objectWithoutProperties, a as _extends } from './ArrowLeft-b88e2ba8.js';
+import Divider from './Divider.js';
+import Loader from './Loader.js';
+
+var _excluded$1 = ["size", "color"];
+var SvgSuccessFill = function SvgSuccessFill(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "currentColor" : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.139 8.192-5.18 6.083a.74.74 0 0 1-.555.259h-.005a.73.73 0 0 1-.551-.25l-2.55-2.897a.735.735 0 0 1 1.101-.97l1.99 2.26 4.63-5.437a.735.735 0 1 1 1.12.952Z",
+    fill: color
+  }));
+};
+
+var _excluded = ["size", "color"];
+var SvgUnavailableOutline = function SvgUnavailableOutline(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "currentColor" : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18.5a8.5 8.5 0 1 1 8.5-8.5 8.51 8.51 0 0 1-8.5 8.5Z",
+    fill: color
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "m14.47 8.47-6 6a.75.75 0 1 0 1.06 1.06l6-6a.75.75 0 0 0-1.06-1.06Z",
+    fill: color
+  }));
+};
+
+var css_248z = ".steps{display:flex}.steps_direction_horizontal{flex-direction:row}.steps_direction_horizontal .steps__step{grid-template-rows:2.4rem 1fr}.steps_direction_horizontal .steps__status{flex-direction:row}.steps_direction_horizontal .steps__content{-webkit-padding-end:var(--guit-ref-spacing-medium);max-width:20rem;padding-inline-end:var(--guit-ref-spacing-medium)}.steps_direction_vertical{flex-direction:column}.steps_direction_vertical .steps__step{grid-template-columns:2.4rem 1fr}.steps_direction_vertical .steps__status{flex-direction:column}.steps_linear .steps__label{pointer-events:none}.steps_linear .steps__label:focus-visible{outline:none}.steps:not(.steps_linear) .steps__label:hover{background-color:var(--guit-sem-color-background-neutral-1-hover)}.steps:not(.steps_linear) .steps__label:active{background-color:var(--guit-sem-color-background-neutral-1-pressed)}.steps__step{grid-gap:var(--guit-ref-spacing-xsmall);display:inline-grid;min-height:var(--guit-sem-dimension-height-3xlarge);min-width:var(--guit-sem-dimension-width-3xlarge)}.steps__step:not(:last-child){flex:1}.steps__step:last-child{flex:0 0 auto}.steps__step:last-child .steps__status_divider{display:none}.steps__step.steps__step_disabled .steps__description,.steps__step.steps__step_disabled .steps__label,.steps__step.steps__step_disabled .steps__status_icon{color:var(--guit-sem-color-foreground-disabled)}.steps__step .steps__label[disabled]{pointer-events:none}.steps__step .steps__label[disabled]:focus-visible{outline:none}.steps__step:not(.steps__step_disabled) .steps__description,.steps__step:not(.steps__step_disabled) .steps__label{color:var(--guit-sem-color-foreground-neutral-2)}.steps__step:not(.steps__step_disabled):not(.steps__step_current,.steps__step_success,.steps__step_error) .steps__status_icon{color:var(--guit-sem-color-foreground-neutral-1)}.steps__step:not(.steps__step_disabled).steps__step_current .steps__status_icon,.steps__step:not(.steps__step_disabled).steps__step_success .steps__status_icon{color:var(--guit-sem-color-foreground-selected)}.steps__step:not(.steps__step_disabled).steps__step_error .steps__status_icon{color:var(--guit-sem-color-foreground-error)}.steps__content,.steps__status{max-width:100%}.steps__status{display:flex}.steps__status_icon{flex:0 0 auto}.steps__status_divider{flex:1}.steps__status_numeric{align-items:center;border-radius:var(--guit-ref-radius-full);border-style:var(--guit-ref-border-style-solid);border-width:var(--guit-ref-border-width-thin);display:flex;font-family:var(--guit-sem-font-body-medium-default-semibold-font-family),sans-serif;font-size:var(--guit-sem-font-body-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-body-medium-default-semibold-font-weight);height:2rem;justify-content:center;line-height:var(--guit-sem-font-body-medium-default-semibold-line-height);margin:.2rem;width:2rem}.steps__content{align-items:flex-start;border-radius:var(--guit-ref-radius-3xsmall);display:flex;flex-direction:column}.steps__description,.steps__label{padding-block:var(--guit-ref-spacing-4xsmall);padding-inline:var(--guit-ref-spacing-3xsmall);text-align:left;word-break:break-word}.steps__label{border-radius:var(--guit-ref-radius-3xsmall);font-family:var(--guit-sem-font-label-medium-default-semibold-font-family),sans-serif;font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.steps__description{font-family:var(--guit-sem-font-body-medium-default-regular-font-family),sans-serif;font-size:var(--guit-sem-font-body-medium-default-regular-font-size);font-weight:var(--guit-sem-font-body-medium-default-regular-font-weight);line-height:var(--guit-sem-font-body-medium-default-regular-line-height)}";
+styleInject(css_248z);
+
+const StepsContext = createContext({});
+/**
+ * Step component is used to guide users through a sequential process by breaking it down into distinct steps. It is commonly employed in multi-step forms, checkout processes, or workflows that require users to complete tasks in a specific order.
+ */
+const Steps = ({ direction = "horizontal", type = "dot", isLinear, className, children, onChange }) => {
+    const memoizedStepsContextValue = useMemo(() => ({
+        direction,
+        onChange,
+        type
+    }), [direction, type]);
+    return (React__default.createElement(StepsContext.Provider, { value: memoizedStepsContextValue },
+        React__default.createElement("div", { className: classNames(`steps steps_direction_${direction}`, { steps_linear: isLinear }, className) }, Children.toArray(children).map((child, i) => {
+            var _a, _b;
+            if (!isValidElement(child))
+                return child;
+            const stepProps = {
+                stepNumber: (_a = child.props.stepNumber) !== null && _a !== void 0 ? _a : i + 1,
+                id: (_b = child.props.id) !== null && _b !== void 0 ? _b : i + 1
+            };
+            return React__default.createElement(child.type, Object.assign({}, child.props, stepProps, { key: child.props.id || i }));
+        }))));
+};
+
+const PointTypes = ({ stepNumber = 1, error, isLoading, state }) => {
+    const { type } = useContext(StepsContext);
+    const stepCount = (num) => {
+        if (!num || num <= 0)
+            return 1;
+        if (num > 9)
+            return 9;
+        return num;
+    };
+    if (isLoading) {
+        return React__default.createElement(Loader, { size: "small" });
+    }
+    if (error) {
+        return React__default.createElement(SvgErrorAlertFill, { size: 24, className: "steps__status_icon" });
+    }
+    if (type === "dot") {
+        if (state === "current") {
+            return React__default.createElement(SvgUnavailableOutline, { size: 24, className: "step_type steps__status_icon steps__status_dot" });
+        }
+        if (state === "complete") {
+            return React__default.createElement(SvgSuccessFill, { size: 24, className: "step_type steps__status_icon steps__status_dot" });
+        }
+        return React__default.createElement(SvgUnavailableOutline, { size: 24, className: "step_type steps__status_icon" });
+    }
+    return React__default.createElement("span", { className: "step_type steps__status_icon steps__status_numeric" }, stepCount(stepNumber));
+};
+const Step = ({ description, label, id, isLoading, stepNumber, disabled, error, state = "incomplete" }) => {
+    const { direction, onChange } = useContext(StepsContext);
+    const changeHandler = () => onChange === null || onChange === void 0 ? void 0 : onChange(id);
+    return (React__default.createElement("div", { className: classNames("steps__step", {
+            steps__step_disabled: disabled && !error && !isLoading,
+            steps__step_error: error,
+            steps__step_success: state === "complete",
+            steps__step_current: state === "current"
+        }) },
+        React__default.createElement("div", { className: "steps__status" },
+            React__default.createElement(PointTypes, { stepNumber: stepNumber !== null && stepNumber !== void 0 ? stepNumber : 1, error: error, isLoading: isLoading, state: state }),
+            React__default.createElement(Divider, { className: "steps__status_divider", vertical: direction === "vertical", appearance: state === "complete" && !disabled ? "brand" : "default" })),
+        React__default.createElement("div", { className: "steps__content" },
+            label && (React__default.createElement("button", { type: "button", className: "steps__label", onClick: changeHandler, disabled: disabled || isLoading }, label)),
+            React__default.createElement("p", { className: "steps__description" }, description))));
+};
+
+export { Step, Steps };

package/Tag.js

@@ -1,7 +1,8 @@
 import React__default, { useRef } from 'react';
 import { c as classNames } from './index-ce02421b.js';
 import { _ as _objectWithoutProperties, a as _extends } from './ArrowLeft-b88e2ba8.js';
-import { a as SvgWarningFill, S as SvgErrorAlertFill } from './WarningFill-fb50593e.js';
+import { S as SvgErrorAlertFill } from './ErrorAlertFill-a0afebbf.js';
+import { S as SvgWarningFill } from './WarningFill-143d0870.js';
 import Button from './Button.js';
 import { u as useEllipsisDetection } from './useEllipsisDetection-e545ae62.js';
 import { s as styleInject } from './style-inject.es-746bb8ed.js';

package/{WarningFill-fb50593e.js → WarningFill-143d0870.js}

@@ -1,25 +1,6 @@
 import { _ as _objectWithoutProperties, a as _extends } from './ArrowLeft-b88e2ba8.js';
 import React__default from 'react';
 
-var _excluded$1 = ["size", "color"];
-var SvgErrorAlertFill = function SvgErrorAlertFill(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 24 : _ref$size,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "currentColor" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$1);
-  return /*#__PURE__*/React__default.createElement("svg", _extends({
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: color,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-.75 5.758a.75.75 0 1 1 1.5 0v5.243a.75.75 0 1 1-1.5 0v-5.243Zm.75 9.235a.915.915 0 1 1 0-1.83.915.915 0 0 1 0 1.83Z",
-    fill: color
-  }));
-};
-
 var _excluded = ["size", "color"];
 var SvgWarningFill = function SvgWarningFill(_ref) {
   var _ref$size = _ref.size,
@@ -41,4 +22,4 @@ var SvgWarningFill = function SvgWarningFill(_ref) {
   }));
 };
 
-export { SvgErrorAlertFill as S, SvgWarningFill as a };
+export { SvgWarningFill as S };

package/components/molecules/Steps/Step.d.ts

@@ -0,0 +1,41 @@
+import { FC } from "react";
+interface IPointTypesProps {
+    /**
+     * If type is numeric you can provide the number.<br>
+     * By default starts with 1.
+     */
+    stepNumber?: number;
+    /**
+     * Error state for Step.
+     */
+    error?: boolean;
+    /**
+     * Loading state for Step.
+     */
+    isLoading?: boolean;
+    /**
+     * Change the icon for step to mention the Step state.
+     */
+    state?: "incomplete" | "current" | "complete";
+}
+interface IStepProps extends IPointTypesProps {
+    /**
+     * The text displayed as the label for the Step, describing its purpose.<br>
+     * The Label can be clickable on not. For more information see the isLinear prop.
+     */
+    label?: string;
+    /**
+     * Extra information displayed with the label of step for clarity or guidance.
+     */
+    description?: string;
+    /**
+     * Unique id for Step.
+     */
+    id: string | number;
+    /**
+     * Disable state for Steps.
+     */
+    disabled?: boolean;
+}
+declare const Step: FC<IStepProps>;
+export { IStepProps, Step as default };

package/components/molecules/Steps/Steps.d.ts

@@ -0,0 +1,39 @@
+import React, { FC, ReactNode } from "react";
+import "./Steps.scss";
+interface IStepsContextProps {
+    /**
+     * Steps direction <br/>
+     * Possible values: `vertical | horizontal`
+     */
+    direction?: "vertical" | "horizontal";
+    /**
+     * Fires when the user interact with Step label. Provides the Step id as a callback's argument.
+     */
+    onChange?: (e: string | number) => void;
+    /**
+     * Steps type <br/>
+     * Possible values: `dot | numeric`
+     */
+    type?: "dot" | "numeric";
+}
+interface IStepsProps extends IStepsContextProps {
+    /**
+     * Provide `<Step/>` components to be rendered in the `<Steps/>`
+     */
+    children: ReactNode;
+    /**
+     * Additional class for the parent element.
+     * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
+     */
+    className?: string;
+    /**
+     * This prop for label click ability. If true the labels are interactive else informative.
+     */
+    isLinear?: boolean;
+}
+export declare const StepsContext: React.Context<IStepsContextProps>;
+/**
+ * Step component is used to guide users through a sequential process by breaking it down into distinct steps. It is commonly employed in multi-step forms, checkout processes, or workflows that require users to complete tasks in a specific order.
+ */
+declare const Steps: FC<IStepsProps>;
+export { IStepsProps, Steps as default };

package/components/molecules/Steps/index.d.ts

@@ -0,0 +1,2 @@
+export { IStepsProps, default as Steps } from "./Steps";
+export { IStepProps, default as Step } from "./Step";

package/index.d.ts

@@ -9,8 +9,9 @@ export { default as Button, IButtonProps } from "./components/atoms/Button";
 export { default as Badge, IBadgeProps } from "./components/atoms/Badge";
 export { default as Scrollbar, IScrollbarProps } from "./components/atoms/Scrollbar";
 export { Grid, Col, Row, IColProps, IRowProps } from "./components/atoms/Grid";
-export { default as Tooltip, ITooltipProps } from "./components/molecules/Tooltip";
-export { default as ProgressBar, IProgressBarProps } from "./components/molecules/ProgressBar";
+export { default as Tooltip } from "./components/molecules/Tooltip";
+export { default as ProgressBar } from "./components/molecules/ProgressBar";
+export { Steps, Step, IStepProps, IStepsProps } from "./components/molecules/Steps";
 export { default as Tag, ITagProps } from "./components/molecules/Tag";
 export { default as GeneUIProvider, GeneUIDesignSystemContext, IGeneUIDesignSystemContext, IGeneUIProviderProps } from "./components/providers/GeneUIProvider";
 export { default as useDebounce } from "./hooks/useDebounceCallback";

package/index.js

@@ -11,6 +11,7 @@ export { default as Scrollbar } from './Scrollbar.js';
 export { Col, Grid, Row } from './Grid.js';
 export { default as Tooltip } from './Tooltip.js';
 export { default as ProgressBar } from './ProgressBar.js';
+export { Step, Steps } from './Steps.js';
 export { default as Tag } from './Tag.js';
 export { GeneUIDesignSystemContext, default as GeneUIProvider } from './GeneUIProvider.js';
 export { u as useDebounce } from './useDebounceCallback-999deae7.js';
@@ -19,7 +20,8 @@ import { useState, useEffect } from 'react';
 import './index-ce02421b.js';
 import './ArrowLeft-b88e2ba8.js';
 import './style-inject.es-746bb8ed.js';
-import './WarningFill-fb50593e.js';
+import './ErrorAlertFill-a0afebbf.js';
+import './WarningFill-143d0870.js';
 import 'prop-types';
 import 'react-dom';
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@geneui/components",
     "description": "The Gene UI components library designed for BI tools",
-    "version": "3.0.0-next-b458115-12022025",
+    "version": "3.0.0-next-9bedd8e-12022025",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {