@chakra-ui/stepper - npm Package Compare versions

Comparing version 0.0.0-dev-20230424225650 to 0.0.0-dev-20230427153620

dist/index.js

@@ -39,2 +39,3 @@ "use strict";
 // src/step.tsx
+var import_shared_utils = require("@chakra-ui/shared-utils");
 var import_system2 = require("@chakra-ui/system");
@@ -62,3 +63,4 @@
       __css: styles.step,
-      ...props
+      ...props,
+      className: (0, import_shared_utils.cx)("chakra-step", props.className)
     }
@@ -69,2 +71,3 @@ );
 // src/step-description.tsx
+var import_shared_utils2 = require("@chakra-ui/shared-utils");
 var import_system3 = require("@chakra-ui/system");
@@ -81,2 +84,3 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
       ...props,
+      className: (0, import_shared_utils2.cx)("chakra-step__description", props.className),
       __css: styles.description
@@ -89,2 +93,3 @@ }
 var import_icon = require("@chakra-ui/icon");
+var import_shared_utils3 = require("@chakra-ui/shared-utils");
 
@@ -123,6 +128,15 @@ // 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_utils4 = require("@chakra-ui/shared-utils");
 var import_system4 = require("@chakra-ui/system");
@@ -133,6 +147,15 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
   const styles = useStepperStyles();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_system4.chakra.div, { "data-status": status, ...props, __css: styles.indicator });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_system4.chakra.div,
+    {
+      "data-status": status,
+      ...props,
+      __css: styles.indicator,
+      className: (0, import_shared_utils4.cx)("chakra-step__indicator", props.className)
+    }
+  );
 }
 
 // src/step-number.tsx
+var import_shared_utils5 = require("@chakra-ui/shared-utils");
 var import_system5 = require("@chakra-ui/system");
@@ -151,2 +174,3 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
       ...restProps,
+      className: (0, import_shared_utils5.cx)("chakra-step__number", props.className),
       children: children || index + 1
@@ -158,2 +182,3 @@ }
 // src/step-separator.tsx
+var import_shared_utils6 = require("@chakra-ui/shared-utils");
 var import_system6 = require("@chakra-ui/system");
@@ -174,3 +199,4 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
       __css: styles.separator,
-      ...props
+      ...props,
+      className: (0, import_shared_utils6.cx)("chakra-step__separator", props.className)
     }
@@ -181,2 +207,3 @@ );
 // src/step-status.tsx
+var import_shared_utils7 = require("@chakra-ui/shared-utils");
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -189,9 +216,9 @@ function StepStatus(props) {
     case "complete":
-      render = typeof complete === "function" ? complete(context) : complete;
+      render = (0, import_shared_utils7.runIfFn)(complete, context);
       break;
     case "incomplete":
-      render = typeof incomplete === "function" ? incomplete(context) : incomplete;
+      render = (0, import_shared_utils7.runIfFn)(incomplete, context);
       break;
     case "active":
-      render = typeof active === "function" ? active(context) : active;
+      render = (0, import_shared_utils7.runIfFn)(active, context);
       break;
@@ -203,2 +230,3 @@ }
 // src/step-title.tsx
+var import_shared_utils8 = require("@chakra-ui/shared-utils");
 var import_system7 = require("@chakra-ui/system");
@@ -209,6 +237,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");
@@ -242,2 +280,3 @@ var import_react = require("react");
       __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)(
@@ -267,8 +306,17 @@ StepContextProvider,
   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) {
@@ -275,0 +323,0 @@ if (step < activeStep)

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.js

@@ -26,2 +26,3 @@ "use strict";
 module.exports = __toCommonJS(step_indicator_exports);
+var import_shared_utils = require("@chakra-ui/shared-utils");
 var import_system2 = require("@chakra-ui/system");
@@ -42,3 +43,11 @@
   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_runtime.jsx)(
+    import_system2.chakra.div,
+    {
+      "data-status": status,
+      ...props,
+      __css: styles.indicator,
+      className: (0, import_shared_utils.cx)("chakra-step__indicator", props.className)
+    }
+  );
 }
@@ -45,0 +54,0 @@ // Annotate the CommonJS export names for ESM import in node:

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.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");
@@ -52,3 +53,4 @@
       __css: styles.separator,
-      ...props
+      ...props,
+      className: (0, import_shared_utils.cx)("chakra-step__separator", props.className)
     }
@@ -55,0 +57,0 @@ );

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.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.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");
@@ -49,3 +50,4 @@
       __css: styles.step,
-      ...props
+      ...props,
+      className: (0, import_shared_utils.cx)("chakra-step", props.className)
     }
@@ -52,0 +54,0 @@ );

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");
@@ -65,2 +66,3 @@ var import_react = require("react");
       __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)(
@@ -67,0 +69,0 @@ StepContextProvider,

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": "0.0.0-dev-20230424225650",
+  "version": "0.0.0-dev-20230427153620",
   "description": "The stepper component to create a logical sequence of steps",
@@ -35,7 +35,7 @@ "keywords": [
     "clean-package": "2.2.0",
-    "@chakra-ui/system": "0.0.0-dev-20230424225650",
-    "@chakra-ui/layout": "0.0.0-dev-20230424225650"
+    "@chakra-ui/system": "2.5.6",
+    "@chakra-ui/layout": "2.1.19"
   },
   "peerDependencies": {
-    "@chakra-ui/system": "0.0.0-dev-20230424225650",
+    "@chakra-ui/system": ">=2.0.0",
     "react": ">=18"
@@ -42,0 +42,0 @@ },

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

55616

increased by8.65%

Lines of code

1626

increased by9.94%

No dependency changes