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

A design system for building ambitious products.

// components/icons.tsx
import {
  BellSimple,
  Warning,
  WarningCircleFill,
  Domain,
  ArrowLeftLg,
  ArrowRightLg,
  ArrowUpLg,
  ArrowDownLg,
  ArrowsDownUp,
  Plus,
  Trash,
  PencilLine,
  PencilSimple,
  GithubLogoFill,
  GitlabLogoFill,
  GitBranchFill,
  Users,
  Check,
  ChevronLeft,
  ChevronRight,
  X,
  SmileySad,
  InfoFill,
  CheckCircleFill,
  WarningFill,
  WarningOctagonFill,
  LockSimple,
  XCircleFill,
  LockSimpleOpen,
  MinusCircle,
  Search,
  ArrowsCounterClockwise,
  ArrowClockwise,
  Copy,
  GearSix,
  QrCode,
  WireGuardlogo,
  ChevronUpDown,
  ChevronDown,
  Buildings,
  Project,
  InfraAsCode,
  Container,
  File,
  TreeStructure,
  CirclesFour,
  BackingServices,
  VirtualMachine,
  Database,
  ArrowsClockwise,
  Info,
  Fan,
  WarningCircle,
  ChecksFill,
  CircleNotch,
  Circle,
  CircleFill,
  Spinner,
  Globe,
  ShieldCheck,
  NoOps,
  Nodeless,
  GitMerge,
  PencilLine as PencilLine2,
  AWSlogoFill,
  GoogleCloudlogo,
  ArrowCounterClockwise,
  CopySimple,
  RecordFill,
  CheckCircle,
  ArrowLeftLg as ArrowLeftLg2,
  EyeSlash,
  Eye,
  CaretUpFill,
  CaretDownFill,
  XFill,
  HamburgerFill,
  CalendarCheckFill,
  GearFill,
  EnvelopeSimple
} from "@jengaicons/react";
import { jsx } from "react/jsx-runtime";

// components/utils.tsx
import classNames from "classnames";
import { useMemo } from "react";
import { v4 } from "uuid";
var cn = (...props) => {
  return classNames(...props);
};

// components/organisms/progress-tracker.tsx
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
function ProgressTrackerItem(props) {
  const { children, active = false, completed = false } = props;
  return /* @__PURE__ */ 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__ */ jsxs(
          "div",
          {
            className: cn(
              "kl-rounded-full kl-flex kl-items-center kl-justify-center"
            ),
            children: [
              (active || completed) && /* @__PURE__ */ jsx2(RecordFill, { size: 12, color: "currentColor" }),
              !active && !completed && /* @__PURE__ */ jsx2(Circle, { size: 12, color: "currentColor" })
            ]
          }
        ),
        /* @__PURE__ */ jsx2("div", { className: "kl-py-lg kl-select-none", children })
      ]
    }
  );
}
function Root({
  children,
  items = [],
  onClick
}) {
  return /* @__PURE__ */ jsx2("div", { className: "kl-flex kl-flex-col kl-gap-y-lg", children: items.map(({ item, value }, index) => {
    return /* @__PURE__ */ 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__ */ jsx2("div", { className: "kl-flex kl-items-center kl-justify-center kl-w-[12px] -kl-mt-[13px] -kl-mb-[21px]", children: /* @__PURE__ */ jsx2(
            "svg",
            {
              xmlns: "http://www.w3.org/2000/svg",
              width: "2",
              height: "36",
              viewBox: "0 0 2 36",
              fill: "none",
              children: /* @__PURE__ */ jsx2(
                "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;
export {
  progress_tracker_default as default
};