@kloudlite/design-system/cjs/organisms/progress-tracker.js

A design system for building ambitious products.

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// components/organisms/progress-tracker.tsx
var progress_tracker_exports = {};
__export(progress_tracker_exports, {
  default: () => progress_tracker_default
});
module.exports = __toCommonJS(progress_tracker_exports);

// components/icons.tsx
var import_react = require("@jengaicons/react");
var import_jsx_runtime = require("react/jsx-runtime");

// components/utils.tsx
var import_classnames = __toESM(require("classnames"), 1);
var import_react2 = require("react");
var import_uuid = require("uuid");
var cn = (...props) => {
  return (0, import_classnames.default)(...props);
};

// components/organisms/progress-tracker.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
function ProgressTrackerItem(props) {
  const { children, active = false, completed = false } = props;
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
    "div",
    {
      className: cn(
        "kl-flex kl-flex-row kl-gap-x-xl kl-items-center kl-headingMd kl-select-none",
        {
          "kl-text-text-default": active,
          "kl-text-text-disabled": !active || !active && completed
        }
      ),
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
          "div",
          {
            className: cn(
              "kl-rounded-full kl-flex kl-items-center kl-justify-center"
            ),
            children: [
              (active || completed) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.RecordFill, { size: 12, color: "currentColor" }),
              !active && !completed && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Circle, { size: 12, color: "currentColor" })
            ]
          }
        ),
        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "kl-py-lg kl-select-none", children })
      ]
    }
  );
}
function Root({
  children,
  items = [],
  onClick
}) {
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "kl-flex kl-flex-col kl-gap-y-lg", children: items.map(({ item, value }, index) => {
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
      "div",
      {
        className: cn("kl-flex kl-flex-col kl-select-none", {
          "kl-cursor-pointer": !!onClick
        }),
        onClick: () => {
          if (onClick)
            onClick(value);
        },
        children: [
          children(item),
          index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "kl-flex kl-items-center kl-justify-center kl-w-[12px] -kl-mt-[13px] -kl-mb-[21px]", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
            "svg",
            {
              xmlns: "http://www.w3.org/2000/svg",
              width: "2",
              height: "36",
              viewBox: "0 0 2 36",
              fill: "none",
              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                "path",
                {
                  d: "M1 1.18723V34.9972",
                  stroke: "#9CA3AF",
                  strokeLinecap: "round",
                  strokeDasharray: "2 2"
                }
              )
            }
          ) })
        ]
      },
      JSON.stringify(value)
    );
  }) });
}
var ProgressTracker = {
  Root,
  Item: ProgressTrackerItem
};
var progress_tracker_default = ProgressTracker;