@chakra-ui/stepper - npm Package Compare versions

Comparing version 0.0.0-dev-20230427153620 to 0.0.0-dev-20230427154951

dist/index.d.ts

@@ -5,3 +5,3 @@ 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';
@@ -8,0 +8,0 @@ export { StepSeparator } from './step-separator.js';

dist/index.js

@@ -27,2 +27,3 @@ "use strict";
   StepIndicator: () => StepIndicator,
+  StepIndicatorContent: () => StepIndicatorContent,
   StepNumber: () => StepNumber,
@@ -136,7 +137,12 @@ StepSeparator: () => StepSeparator,
 // 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();
+var StepNumber = (0, import_system4.forwardRef)(function StepNumber2(props, ref) {
+  const { children, ...restProps } = props;
+  const { status, index } = useStepContext();
   const styles = useStepperStyles();
@@ -146,35 +152,63 @@ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     {
+      ref,
       "data-status": status,
-      ...props,
-      __css: styles.indicator,
-      className: (0, import_shared_utils4.cx)("chakra-step__indicator", props.className)
+      __css: styles.number,
+      ...restProps,
+      className: (0, import_shared_utils4.cx)("chakra-step__number", props.className),
+      children: children || index + 1
     }
   );
-}
+});
 
-// src/step-number.tsx
+// src/step-status.tsx
 var import_shared_utils5 = require("@chakra-ui/shared-utils");
-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) {
-  const { children, ...restProps } = props;
-  const { status, index } = useStepContext();
+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_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_system5.chakra.div,
     {
-      ref,
       "data-status": status,
-      __css: styles.number,
-      ...restProps,
-      className: (0, import_shared_utils5.cx)("chakra-step__number", props.className),
-      children: children || index + 1
+      ...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_utils6 = require("@chakra-ui/shared-utils");
+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) {
@@ -185,3 +219,3 @@ const { orientation, status, isLast } = useStepContext();
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_system6.chakra.div,
@@ -195,3 +229,3 @@ {
       ...props,
-      className: (0, import_shared_utils6.cx)("chakra-step__separator", props.className)
+      className: (0, import_shared_utils7.cx)("chakra-step__separator", props.className)
     }
@@ -201,23 +235,2 @@ );
 
-// src/step-status.tsx
-var import_shared_utils7 = require("@chakra-ui/shared-utils");
-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 = (0, import_shared_utils7.runIfFn)(complete, context);
-      break;
-    case "incomplete":
-      render = (0, import_shared_utils7.runIfFn)(incomplete, context);
-      break;
-    case "active":
-      render = (0, import_shared_utils7.runIfFn)(active, context);
-      break;
-  }
-  return render ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: render }) : null;
-}
-
 // src/step-title.tsx
@@ -335,2 +348,3 @@ var import_shared_utils8 = require("@chakra-ui/shared-utils");
   StepIndicator,
+  StepIndicatorContent,
   StepNumber,
@@ -337,0 +351,0 @@ StepSeparator,

dist/step-indicator.d.ts

@@ -5,3 +5,4 @@ import { HTMLChakraProps } from '@chakra-ui/system';
 declare function StepIndicator(props: StepIndicatorProps): JSX.Element;
+declare function StepIndicatorContent(): JSX.Element;
 
-export { StepIndicator, StepIndicatorProps };
+export { StepIndicator, StepIndicatorContent, StepIndicatorProps };

dist/step-indicator.js

@@ -23,7 +23,8 @@ "use strict";
 __export(step_indicator_exports, {
-  StepIndicator: () => StepIndicator
+  StepIndicator: () => StepIndicator,
+  StepIndicatorContent: () => StepIndicatorContent
 });
 module.exports = __toCommonJS(step_indicator_exports);
-var import_shared_utils = require("@chakra-ui/shared-utils");
-var import_system2 = require("@chakra-ui/system");
+var import_shared_utils4 = require("@chakra-ui/shared-utils");
+var import_system3 = require("@chakra-ui/system");
 
@@ -38,20 +39,120 @@ // src/step-context.tsx
 
-// src/step-indicator.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 StepIndicator(props) {
+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();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  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_runtime5 = require("react/jsx-runtime");
+function StepIndicator(props) {
+  const { status } = useStepContext();
+  const styles = useStepperStyles();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_system3.chakra.div,
+    {
+      "data-status": status,
       ...props,
       __css: styles.indicator,
-      className: (0, import_shared_utils.cx)("chakra-step__indicator", props.className)
+      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/stepper.d.ts

@@ -7,4 +7,14 @@ import * as _chakra_ui_system from '@chakra-ui/system';
 type StepperProps = HTMLChakraProps<"div"> & ThemingProps<"Stepper"> & {
+    /**
+     * The active step index
+     */
     index: number;
+    /**
+     * The orientation of the stepper
+     * @default horizontal
+     */
     orientation?: Orientation;
+    /**
+     * The children of the stepper. Must be `Step` components
+     */
     children: React.ReactNode;
@@ -11,0 +21,0 @@ };

package.json

 {
   "name": "@chakra-ui/stepper",
-  "version": "0.0.0-dev-20230427153620",
+  "version": "0.0.0-dev-20230427154951",
   "description": "The stepper component to create a logical sequence of steps",
@@ -5,0 +5,0 @@ "keywords": [

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

60221

increased by8.28%

Lines of code

1774

increased by9.1%

No dependency changes