Dashboard/ui/components/StepperVertical/StepperVertical.tsx

"use client";
/*
 * Documentation:
 * Stepper Vertical — https://app.subframe.com/f023064a5ca0/library?component=Stepper+Vertical_bdc0291d-b5be-40c5-ae2f-527a868488b2
 */

import React from "react";
import { FeatherCheck } from "@subframe/core";
import * as SubframeUtils from "../../utils";

export interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "default" | "completed" | "active";
  stepNumber?: React.ReactNode;
  label?: React.ReactNode;
  firstStep?: boolean;
  lastStep?: boolean;
  children?: React.ReactNode;
  className?: string;
}

const Step = React.forwardRef<HTMLDivElement, StepProps>(function Step(
  {
    variant = "default",
    stepNumber,
    label,
    firstStep = false,
    lastStep = false,
    children,
    className,
    ...otherProps
  }: StepProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/b094efab flex h-full w-full items-start gap-3",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      <div
        className={SubframeUtils.twClassNames(
          "flex flex-col items-center gap-1 self-stretch",
          { "flex-none self-auto": lastStep }
        )}
      >
        <div
          className={SubframeUtils.twClassNames(
            "flex h-2 w-0.5 flex-none flex-col items-center gap-2 bg-[#e5e5e5]",
            { hidden: firstStep }
          )}
        />
        <div
          className={SubframeUtils.twClassNames(
            "flex h-7 w-7 flex-none items-center justify-center overflow-hidden rounded-round bg-[#f5f5f5]",
            { "bg-[#dbeafe]": variant === "active" || variant === "completed" }
          )}
        >
          {stepNumber ? (
            <span
              className={SubframeUtils.twClassNames(
                "font-['Inter'] text-[14px] font-[500] leading-[20px] text-text-neutral-tertiary text-center",
                {
                  "text-[#1d4ed8]": variant === "active",
                  hidden: variant === "completed",
                }
              )}
            >
              {stepNumber}
            </span>
          ) : null}
          <FeatherCheck
            className={SubframeUtils.twClassNames(
              "hidden font-['Inter'] text-[16px] font-[600] leading-[20px] text-[#1d4ed8]",
              { "inline-flex": variant === "completed" }
            )}
          />
        </div>
        <div
          className={SubframeUtils.twClassNames(
            "flex min-h-[8px] w-0.5 grow shrink-0 basis-0 flex-col items-center gap-2 bg-[#e5e5e5]",
            { hidden: lastStep }
          )}
        />
      </div>
      <div
        className={SubframeUtils.twClassNames(
          "flex grow shrink-0 basis-0 flex-col items-center gap-1 py-4",
          { "pb-1": lastStep, "pt-1": firstStep }
        )}
      >
        {label ? (
          <span
            className={SubframeUtils.twClassNames(
              "line-clamp-2 w-full font-['Inter'] text-[14px] font-[400] leading-[20px] text-text-neutral-tertiary",
              {
                "font-[500] tracking-normal text-[#171717]":
                  variant === "active",
                "text-[#171717]": variant === "completed",
              }
            )}
          >
            {label}
          </span>
        ) : null}
        {children ? (
          <div className="flex w-full flex-col items-start gap-2">
            {children}
          </div>
        ) : null}
      </div>
    </div>
  );
});

export interface StepperVerticalRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
  className?: string;
}

const StepperVerticalRoot = React.forwardRef<
  HTMLDivElement,
  StepperVerticalRootProps
>(function StepperVerticalRoot(
  { children, className, ...otherProps }: StepperVerticalRootProps,
  ref
) {
  return children ? (
    <div
      className={SubframeUtils.twClassNames(
        "flex flex-col items-start",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      {children}
    </div>
  ) : null;
});

export const StepperVertical = Object.assign(StepperVerticalRoot, {
  Step,
});