@chakra-ui/stepper - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

dist/index.d.ts

@@ -5,5 +5,5 @@ export { Step, StepProps } from './step.js';
 export { StepIcon } from './step-icon.js';
-export { StepIndicator, StepIndicatorProps } from './step-indicator.js';
+export { StepIndicator, StepIndicatorContent, StepIndicatorProps } from './step-indicator.js';
 export { StepNumber } from './step-number.js';
-export { StepSeparator } from './step-separator.js';
+export { StepSeparator, StepSeparatorProps } from './step-separator.js';
 export { StepStatus, StepStatusProps } from './step-status.js';
@@ -10,0 +10,0 @@ export { StepTitle, StepTitleProps } from './step-title.js';

dist/index.js

@@ -27,2 +27,3 @@ "use strict";
   StepIndicator: () => StepIndicator,
+  StepIndicatorContent: () => StepIndicatorContent,
   StepNumber: () => StepNumber,
@@ -40,2 +41,3 @@ StepSeparator: () => StepSeparator,
 // src/step.tsx
+var import_shared_utils = require("@chakra-ui/shared-utils");
 var import_system2 = require("@chakra-ui/system");
@@ -54,3 +56,3 @@
 var Step = (0, import_system2.forwardRef)(function Step2(props, ref) {
-  const { orientation, status } = useStepContext();
+  const { orientation, status, showLastSeparator } = useStepContext();
   const styles = useStepperStyles();
@@ -63,4 +65,6 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "data-orientation": orientation,
+      "data-stretch": (0, import_shared_utils.dataAttr)(showLastSeparator),
       __css: styles.step,
-      ...props
+      ...props,
+      className: (0, import_shared_utils.cx)("chakra-step", props.className)
     }
@@ -71,2 +75,3 @@ );
 // src/step-description.tsx
+var import_shared_utils2 = require("@chakra-ui/shared-utils");
 var import_system3 = require("@chakra-ui/system");
@@ -83,2 +88,3 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
       ...props,
+      className: (0, import_shared_utils2.cx)("chakra-step__description", props.className),
       __css: styles.description
@@ -91,2 +97,3 @@ }
 var import_icon = require("@chakra-ui/icon");
+var import_shared_utils3 = require("@chakra-ui/shared-utils");
 
@@ -125,23 +132,27 @@ // src/icons.tsx
   const icon = status === "complete" ? CheckIcon : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icon.Icon, { as: icon, __css: styles.icon, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_icon.Icon,
+    {
+      as: icon,
+      __css: styles.icon,
+      ...props,
+      className: (0, import_shared_utils3.cx)("chakra-step__icon", props.className)
+    }
+  );
 }
 
 // src/step-indicator.tsx
+var import_shared_utils6 = require("@chakra-ui/shared-utils");
+var import_system5 = require("@chakra-ui/system");
+
+// src/step-number.tsx
+var import_shared_utils4 = require("@chakra-ui/shared-utils");
 var import_system4 = require("@chakra-ui/system");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function StepIndicator(props) {
-  const { status } = useStepContext();
-  const styles = useStepperStyles();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_system4.chakra.div, { "data-status": status, ...props, __css: styles.indicator });
-}
-
-// src/step-number.tsx
-var import_system5 = require("@chakra-ui/system");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var StepNumber = (0, import_system5.forwardRef)(function StepNumber2(props, ref) {
+var StepNumber = (0, import_system4.forwardRef)(function StepNumber2(props, ref) {
   const { children, ...restProps } = props;
   const { status, index } = useStepContext();
   const styles = useStepperStyles();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_system5.chakra.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_system4.chakra.div,
     {
@@ -152,2 +163,3 @@ ref,
       ...restProps,
+      className: (0, import_shared_utils4.cx)("chakra-step__number", props.className),
       children: children || index + 1
@@ -158,11 +170,59 @@ }
 
+// src/step-status.tsx
+var import_shared_utils5 = require("@chakra-ui/shared-utils");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function StepStatus(props) {
+  const { complete, incomplete, active } = props;
+  const context = useStepContext();
+  let render = null;
+  switch (context.status) {
+    case "complete":
+      render = (0, import_shared_utils5.runIfFn)(complete, context);
+      break;
+    case "incomplete":
+      render = (0, import_shared_utils5.runIfFn)(incomplete, context);
+      break;
+    case "active":
+      render = (0, import_shared_utils5.runIfFn)(active, context);
+      break;
+  }
+  return render ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: render }) : null;
+}
+
+// src/step-indicator.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function StepIndicator(props) {
+  const { status } = useStepContext();
+  const styles = useStepperStyles();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_system5.chakra.div,
+    {
+      "data-status": status,
+      ...props,
+      __css: styles.indicator,
+      className: (0, import_shared_utils6.cx)("chakra-step__indicator", props.className)
+    }
+  );
+}
+function StepIndicatorContent() {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    StepStatus,
+    {
+      complete: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StepIcon, {}),
+      incomplete: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StepNumber, {}),
+      active: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StepNumber, {})
+    }
+  );
+}
+
 // src/step-separator.tsx
+var import_shared_utils7 = require("@chakra-ui/shared-utils");
 var import_system6 = require("@chakra-ui/system");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var StepSeparator = (0, import_system6.forwardRef)(function StepSeparator2(props, ref) {
-  const { orientation, status, isLast } = useStepContext();
+  const { orientation, status, isLast, showLastSeparator } = useStepContext();
   const styles = useStepperStyles();
-  if (isLast)
+  if (isLast && !showLastSeparator)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_system6.chakra.div,
@@ -175,3 +235,4 @@ {
       __css: styles.separator,
-      ...props
+      ...props,
+      className: (0, import_shared_utils7.cx)("chakra-step__separator", props.className)
     }
@@ -181,23 +242,4 @@ );
 
-// src/step-status.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function StepStatus(props) {
-  const { complete, incomplete, active } = props;
-  const context = useStepContext();
-  let render = null;
-  switch (context.status) {
-    case "complete":
-      render = typeof complete === "function" ? complete(context) : complete;
-      break;
-    case "incomplete":
-      render = typeof incomplete === "function" ? incomplete(context) : incomplete;
-      break;
-    case "active":
-      render = typeof active === "function" ? active(context) : active;
-      break;
-  }
-  return render ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: render }) : null;
-}
-
 // src/step-title.tsx
+var import_shared_utils8 = require("@chakra-ui/shared-utils");
 var import_system7 = require("@chakra-ui/system");
@@ -208,6 +250,16 @@ var import_jsx_runtime9 = require("react/jsx-runtime");
   const styles = useStepperStyles();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_system7.chakra.h3, { ref, "data-status": status, ...props, __css: styles.title });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_system7.chakra.h3,
+    {
+      ref,
+      "data-status": status,
+      ...props,
+      __css: styles.title,
+      className: (0, import_shared_utils8.cx)("chakra-step__title", props.className)
+    }
+  );
 });
 
 // src/stepper.tsx
+var import_shared_utils9 = require("@chakra-ui/shared-utils");
 var import_system8 = require("@chakra-ui/system");
@@ -222,2 +274,3 @@ var import_react = require("react");
     orientation = "horizontal",
+    showLastSeparator = false,
     ...restProps
@@ -242,2 +295,3 @@ } = (0, import_system8.omitThemingProps)(props);
       __css: styles.stepper,
+      className: (0, import_shared_utils9.cx)("chakra-stepper", props.className),
       children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StepperStylesProvider, { value: styles, children: stepElements.map((child, index2) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -250,2 +304,3 @@ StepContextProvider,
             orientation,
+            showLastSeparator,
             count: stepCount,
@@ -268,8 +323,17 @@ isFirst: index2 === 0,
   const [activeStep, setActiveStep] = (0, import_react2.useState)(index);
+  const maxStep = typeof count === "number" ? count - 1 : 0;
+  const activeStepPercent = activeStep / maxStep;
   return {
     activeStep,
     setActiveStep,
+    activeStepPercent,
     isActiveStep(step) {
       return step === activeStep;
     },
+    isCompleteStep(step) {
+      return step < activeStep;
+    },
+    isIncompleteStep(step) {
+      return step > activeStep;
+    },
     getStatus(step) {
@@ -298,2 +362,3 @@ if (step < activeStep)
   StepIndicator,
+  StepIndicatorContent,
   StepNumber,
@@ -300,0 +365,0 @@ StepSeparator,

dist/step-context.d.ts

@@ -6,3 +6,3 @@ import * as _chakra_ui_system from '@chakra-ui/system';
 type Orientation = "horizontal" | "vertical";
-type StepContext = {
+interface StepContext {
     /**
@@ -33,3 +33,7 @@ * The status of the step
     isFirst: boolean;
-};
+    /**
+     * Whether to show or not the last separator while in vertical orientation
+     */
+    showLastSeparator?: boolean;
+}
 declare const StepContextProvider: react.Provider<StepContext>;
@@ -36,0 +40,0 @@ declare const useStepContext: () => StepContext;

dist/step-description.d.ts

 import * as _chakra_ui_system from '@chakra-ui/system';
 import { HTMLChakraProps } from '@chakra-ui/system';
 
-type StepDescriptionProps = HTMLChakraProps<"p">;
+interface StepDescriptionProps extends HTMLChakraProps<"p"> {
+}
 declare const StepDescription: _chakra_ui_system.ComponentWithAs<"p", {}>;
 
 export { StepDescription, StepDescriptionProps };

dist/step-description.js

@@ -26,2 +26,3 @@ "use strict";
 module.exports = __toCommonJS(step_description_exports);
+var import_shared_utils = require("@chakra-ui/shared-utils");
 var import_system2 = require("@chakra-ui/system");
@@ -48,2 +49,3 @@
       ...props,
+      className: (0, import_shared_utils.cx)("chakra-step__description", props.className),
       __css: styles.description
@@ -50,0 +52,0 @@ }

dist/step-icon.js

@@ -27,2 +27,3 @@ "use strict";
 var import_icon = require("@chakra-ui/icon");
+var import_shared_utils = require("@chakra-ui/shared-utils");
 
@@ -69,3 +70,11 @@ // src/icons.tsx
   const icon = status === "complete" ? CheckIcon : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icon.Icon, { as: icon, __css: styles.icon, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_icon.Icon,
+    {
+      as: icon,
+      __css: styles.icon,
+      ...props,
+      className: (0, import_shared_utils.cx)("chakra-step__icon", props.className)
+    }
+  );
 }
@@ -72,0 +81,0 @@ // Annotate the CommonJS export names for ESM import in node:

dist/step-indicator.d.ts

 import { HTMLChakraProps } from '@chakra-ui/system';
 
-type StepIndicatorProps = HTMLChakraProps<"div">;
+interface StepIndicatorProps extends HTMLChakraProps<"div"> {
+}
 declare function StepIndicator(props: StepIndicatorProps): JSX.Element;
+declare function StepIndicatorContent(): JSX.Element;
 
-export { StepIndicator, StepIndicatorProps };
+export { StepIndicator, StepIndicatorContent, StepIndicatorProps };

dist/step-indicator.js

@@ -23,6 +23,8 @@ "use strict";
 __export(step_indicator_exports, {
-  StepIndicator: () => StepIndicator
+  StepIndicator: () => StepIndicator,
+  StepIndicatorContent: () => StepIndicatorContent
 });
 module.exports = __toCommonJS(step_indicator_exports);
-var import_system2 = require("@chakra-ui/system");
+var import_shared_utils4 = require("@chakra-ui/shared-utils");
+var import_system3 = require("@chakra-ui/system");
 
@@ -37,12 +39,120 @@ // src/step-context.tsx
 
+// src/step-icon.tsx
+var import_icon = require("@chakra-ui/icon");
+var import_shared_utils = require("@chakra-ui/shared-utils");
+
+// src/icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function CheckIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 20 20",
+      "aria-hidden": "true",
+      height: "1em",
+      width: "1em",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+
+// src/step-icon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function StepIcon(props) {
+  const { status } = useStepContext();
+  const styles = useStepperStyles();
+  const icon = status === "complete" ? CheckIcon : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_icon.Icon,
+    {
+      as: icon,
+      __css: styles.icon,
+      ...props,
+      className: (0, import_shared_utils.cx)("chakra-step__icon", props.className)
+    }
+  );
+}
+
+// src/step-number.tsx
+var import_shared_utils2 = require("@chakra-ui/shared-utils");
+var import_system2 = require("@chakra-ui/system");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var StepNumber = (0, import_system2.forwardRef)(function StepNumber2(props, ref) {
+  const { children, ...restProps } = props;
+  const { status, index } = useStepContext();
+  const styles = useStepperStyles();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_system2.chakra.div,
+    {
+      ref,
+      "data-status": status,
+      __css: styles.number,
+      ...restProps,
+      className: (0, import_shared_utils2.cx)("chakra-step__number", props.className),
+      children: children || index + 1
+    }
+  );
+});
+
+// src/step-status.tsx
+var import_shared_utils3 = require("@chakra-ui/shared-utils");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function StepStatus(props) {
+  const { complete, incomplete, active } = props;
+  const context = useStepContext();
+  let render = null;
+  switch (context.status) {
+    case "complete":
+      render = (0, import_shared_utils3.runIfFn)(complete, context);
+      break;
+    case "incomplete":
+      render = (0, import_shared_utils3.runIfFn)(incomplete, context);
+      break;
+    case "active":
+      render = (0, import_shared_utils3.runIfFn)(active, context);
+      break;
+  }
+  return render ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: render }) : null;
+}
+
 // src/step-indicator.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function StepIndicator(props) {
   const { status } = useStepContext();
   const styles = useStepperStyles();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_system2.chakra.div, { "data-status": status, ...props, __css: styles.indicator });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_system3.chakra.div,
+    {
+      "data-status": status,
+      ...props,
+      __css: styles.indicator,
+      className: (0, import_shared_utils4.cx)("chakra-step__indicator", props.className)
+    }
+  );
 }
+function StepIndicatorContent() {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    StepStatus,
+    {
+      complete: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StepIcon, {}),
+      incomplete: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StepNumber, {}),
+      active: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StepNumber, {})
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  StepIndicator
+  StepIndicator,
+  StepIndicatorContent
 });

dist/step-number.js

@@ -26,2 +26,3 @@ "use strict";
 module.exports = __toCommonJS(step_number_exports);
+var import_shared_utils = require("@chakra-ui/shared-utils");
 var import_system2 = require("@chakra-ui/system");
@@ -50,2 +51,3 @@
       ...restProps,
+      className: (0, import_shared_utils.cx)("chakra-step__number", props.className),
       children: children || index + 1
@@ -52,0 +54,0 @@ }

dist/step-separator.d.ts

 import * as _chakra_ui_system from '@chakra-ui/system';
+import { HTMLChakraProps } from '@chakra-ui/system';
 
+interface StepSeparatorProps extends HTMLChakraProps<"div"> {
+}
 declare const StepSeparator: _chakra_ui_system.ComponentWithAs<"div", {}>;
 
-export { StepSeparator };
+export { StepSeparator, StepSeparatorProps };

dist/step-separator.js

@@ -26,2 +26,3 @@ "use strict";
 module.exports = __toCommonJS(step_separator_exports);
+var import_shared_utils = require("@chakra-ui/shared-utils");
 var import_system2 = require("@chakra-ui/system");
@@ -40,5 +41,5 @@
 var StepSeparator = (0, import_system2.forwardRef)(function StepSeparator2(props, ref) {
-  const { orientation, status, isLast } = useStepContext();
+  const { orientation, status, isLast, showLastSeparator } = useStepContext();
   const styles = useStepperStyles();
-  if (isLast)
+  if (isLast && !showLastSeparator)
     return null;
@@ -53,3 +54,4 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       __css: styles.separator,
-      ...props
+      ...props,
+      className: (0, import_shared_utils.cx)("chakra-step__separator", props.className)
     }
@@ -56,0 +58,0 @@ );

dist/step-status.d.ts

@@ -6,5 +6,6 @@ import { StepStatusType, StepContext } from './step-context.js';
 type MaybeRenderProp = React.ReactNode | ((props: StepContext) => React.ReactNode);
-type StepStatusProps = Partial<Record<StepStatusType, MaybeRenderProp>>;
+interface StepStatusProps extends Partial<Record<StepStatusType, MaybeRenderProp>> {
+}
 declare function StepStatus(props: StepStatusProps): JSX.Element | null;
 
 export { StepStatus, StepStatusProps };

dist/step-status.js

@@ -26,2 +26,3 @@ "use strict";
 module.exports = __toCommonJS(step_status_exports);
+var import_shared_utils = require("@chakra-ui/shared-utils");
 
@@ -44,9 +45,9 @@ // src/step-context.tsx
     case "complete":
-      render = typeof complete === "function" ? complete(context) : complete;
+      render = (0, import_shared_utils.runIfFn)(complete, context);
       break;
     case "incomplete":
-      render = typeof incomplete === "function" ? incomplete(context) : incomplete;
+      render = (0, import_shared_utils.runIfFn)(incomplete, context);
       break;
     case "active":
-      render = typeof active === "function" ? active(context) : active;
+      render = (0, import_shared_utils.runIfFn)(active, context);
       break;
@@ -53,0 +54,0 @@ }

dist/step-title.d.ts

 import * as _chakra_ui_system from '@chakra-ui/system';
 import { HTMLChakraProps } from '@chakra-ui/system';
 
-type StepTitleProps = HTMLChakraProps<"h3">;
+interface StepTitleProps extends HTMLChakraProps<"h3"> {
+}
 declare const StepTitle: _chakra_ui_system.ComponentWithAs<"h3", {}>;
 
 export { StepTitle, StepTitleProps };

dist/step-title.js

@@ -26,2 +26,3 @@ "use strict";
 module.exports = __toCommonJS(step_title_exports);
+var import_shared_utils = require("@chakra-ui/shared-utils");
 var import_system2 = require("@chakra-ui/system");
@@ -42,3 +43,12 @@
   const styles = useStepperStyles();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_system2.chakra.h3, { ref, "data-status": status, ...props, __css: styles.title });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_system2.chakra.h3,
+    {
+      ref,
+      "data-status": status,
+      ...props,
+      __css: styles.title,
+      className: (0, import_shared_utils.cx)("chakra-step__title", props.className)
+    }
+  );
 });
@@ -45,0 +55,0 @@ // Annotate the CommonJS export names for ESM import in node:

dist/step.d.ts

 import * as _chakra_ui_system from '@chakra-ui/system';
 import { HTMLChakraProps } from '@chakra-ui/system';
 
-type StepProps = HTMLChakraProps<"div">;
+interface StepProps extends HTMLChakraProps<"div"> {
+}
 declare const Step: _chakra_ui_system.ComponentWithAs<"div", {}>;
 
 export { Step, StepProps };

dist/step.js

@@ -26,2 +26,3 @@ "use strict";
 module.exports = __toCommonJS(step_exports);
+var import_shared_utils = require("@chakra-ui/shared-utils");
 var import_system2 = require("@chakra-ui/system");
@@ -40,3 +41,3 @@
 var Step = (0, import_system2.forwardRef)(function Step2(props, ref) {
-  const { orientation, status } = useStepContext();
+  const { orientation, status, showLastSeparator } = useStepContext();
   const styles = useStepperStyles();
@@ -49,4 +50,6 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "data-orientation": orientation,
+      "data-stretch": (0, import_shared_utils.dataAttr)(showLastSeparator),
       __css: styles.step,
-      ...props
+      ...props,
+      className: (0, import_shared_utils.cx)("chakra-step", props.className)
     }
@@ -53,0 +56,0 @@ );

dist/stepper.d.ts

@@ -6,9 +6,22 @@ import * as _chakra_ui_system from '@chakra-ui/system';
 
-type StepperProps = HTMLChakraProps<"div"> & ThemingProps<"Stepper"> & {
+interface StepperProps extends HTMLChakraProps<"div">, ThemingProps<"Stepper"> {
+    /**
+     * The active step index
+     */
     index: number;
+    /**
+     * The orientation of the stepper
+     * @default horizontal
+     */
     orientation?: Orientation;
+    /**
+     * Whether to show or not the last separator while in vertical orientation
+     */
+    showLastSeparator?: boolean;
+    /**
+     */
     children: React.ReactNode;
-};
+}
 declare const Stepper: _chakra_ui_system.ComponentWithAs<"div", StepperProps>;
 
 export { Stepper, StepperProps };

dist/stepper.js

@@ -26,2 +26,3 @@ "use strict";
 module.exports = __toCommonJS(stepper_exports);
+var import_shared_utils = require("@chakra-ui/shared-utils");
 var import_system2 = require("@chakra-ui/system");
@@ -46,2 +47,3 @@ var import_react = require("react");
     orientation = "horizontal",
+    showLastSeparator = false,
     ...restProps
@@ -66,2 +68,3 @@ } = (0, import_system2.omitThemingProps)(props);
       __css: styles.stepper,
+      className: (0, import_shared_utils.cx)("chakra-stepper", props.className),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StepperStylesProvider, { value: styles, children: stepElements.map((child, index2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -74,2 +77,3 @@ StepContextProvider,
             orientation,
+            showLastSeparator,
             count: stepCount,
@@ -76,0 +80,0 @@ isFirst: index2 === 0,

dist/use-steps.d.ts

@@ -11,3 +11,6 @@ import * as react from 'react';
     setActiveStep: react.Dispatch<react.SetStateAction<number>>;
+    activeStepPercent: number;
     isActiveStep(step: number): boolean;
+    isCompleteStep(step: number): boolean;
+    isIncompleteStep(step: number): boolean;
     getStatus(step: number): StepStatus;
@@ -14,0 +17,0 @@ goToNext(): void;

dist/use-steps.js

@@ -30,8 +30,17 @@ "use strict";
   const [activeStep, setActiveStep] = (0, import_react.useState)(index);
+  const maxStep = typeof count === "number" ? count - 1 : 0;
+  const activeStepPercent = activeStep / maxStep;
   return {
     activeStep,
     setActiveStep,
+    activeStepPercent,
     isActiveStep(step) {
       return step === activeStep;
     },
+    isCompleteStep(step) {
+      return step < activeStep;
+    },
+    isIncompleteStep(step) {
+      return step > activeStep;
+    },
     getStatus(step) {
@@ -38,0 +47,0 @@ if (step < activeStep)

package.json

 {
   "name": "@chakra-ui/stepper",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "The stepper component to create a logical sequence of steps",
@@ -35,3 +35,3 @@ "keywords": [
     "clean-package": "2.2.0",
-    "@chakra-ui/system": "2.5.6",
+    "@chakra-ui/system": "2.5.7",
     "@chakra-ui/layout": "2.1.19"
@@ -67,4 +67,5 @@ },
     "typecheck": "tsc --noEmit",
-    "build:fast": "tsup src"
+    "build:fast": "tsup src",
+    "typedocs": "tsx ../../../scripts/generate-type-docs.ts"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

61273

increased by19.88%

Lines of code

1798

increased by21.57%

No dependency changes