Dashboard/ui/components/PasswordStrengthIndicator/PasswordStrengthIndicator.tsx

"use client";
/*
 * Documentation:
 * Password Strength Indicator — https://app.subframe.com/f023064a5ca0/library?component=Password+Strength+Indicator_7dffbe18-7e06-4e2a-bc30-1d608ceca7d8
 */

import React from "react";
import * as SubframeUtils from "../../utils";

export interface PasswordStrengthIndicatorRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  label?: React.ReactNode;
  strengthText?: React.ReactNode;
  helpText?: React.ReactNode;
  strength?: "weak" | "fair" | "good" | "strong";
  className?: string;
}

const PasswordStrengthIndicatorRoot = React.forwardRef<
  HTMLDivElement,
  PasswordStrengthIndicatorRootProps
>(function PasswordStrengthIndicatorRoot(
  {
    label,
    strengthText,
    helpText,
    strength = "weak",
    className,
    ...otherProps
  }: PasswordStrengthIndicatorRootProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/7dffbe18 flex w-full flex-col items-start gap-1.5",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      <div className="flex w-full items-center gap-1">
        <div className="flex grow shrink-0 basis-0 items-center gap-1">
          <div
            className={SubframeUtils.twClassNames(
              "flex h-1.5 grow shrink-0 basis-0 items-start rounded-round bg-surface-feedback-solid-negative-default",
              {
                "bg-surface-feedback-solid-positive-default":
                  strength === "strong",
                "bg-surface-feedback-solid-warning":
                  strength === "good" || strength === "fair",
              }
            )}
          />
          <div
            className={SubframeUtils.twClassNames(
              "flex h-1.5 grow shrink-0 basis-0 items-start rounded-round bg-surface-neutral-tertiary",
              {
                "bg-surface-feedback-solid-positive-default":
                  strength === "strong",
                "bg-surface-feedback-solid-warning":
                  strength === "good" || strength === "fair",
              }
            )}
          />
          <div
            className={SubframeUtils.twClassNames(
              "flex h-1.5 grow shrink-0 basis-0 items-start rounded-round bg-surface-neutral-tertiary",
              {
                "bg-surface-feedback-solid-positive-default":
                  strength === "strong",
                "bg-surface-feedback-solid-warning": strength === "good",
              }
            )}
          />
          <div
            className={SubframeUtils.twClassNames(
              "flex h-1.5 grow shrink-0 basis-0 items-start rounded-round bg-surface-neutral-tertiary",
              {
                "bg-surface-feedback-solid-positive-default":
                  strength === "strong",
              }
            )}
          />
        </div>
      </div>
      <div className="flex w-full flex-col items-start gap-0.5">
        <div className="flex w-full gap-1 items-baseline">
          {label ? (
            <span className="text-body-extra-small-medium-150 font-body-extra-small-medium-150 text-text-neutral-secondary">
              {label}
            </span>
          ) : null}
          {strengthText ? (
            <span
              className={SubframeUtils.twClassNames(
                "text-body-extra-small-semibold-150 font-body-extra-small-semibold-150 text-text-feedback-negative",
                {
                  "text-text-feedback-positive": strength === "strong",
                  "text-text-feedback-warning":
                    strength === "good" || strength === "fair",
                }
              )}
            >
              {strengthText}
            </span>
          ) : null}
        </div>
        {helpText ? (
          <span className="text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-text-neutral-tertiary">
            {helpText}
          </span>
        ) : null}
      </div>
    </div>
  );
});

export const PasswordStrengthIndicator = PasswordStrengthIndicatorRoot;