PersonByline

npx shadcn@latest add "https://designpass.dev/r/PersonByline-TS-TW.json"

/*!
 * PersonByline, a DesignPass.dev component by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/components/person-byline
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import PersonAvatar from "@/registry/ts-tailwind/layout/PersonAvatar";

export interface PersonBylineProps extends HTMLAttributes<HTMLDivElement> {
  /** Display name. Omit or pass empty to hide. */
  name?: string;
  /** Handle, role, or company line. */
  secondary?: string;
  /** Extra meta (e.g. timestamp) after a middot in inline layout. */
  meta?: string;
  /**
   * `inline`: name, secondary, and meta on one wrapping line (tweet-style).
   * `stack`: name on the first line, secondary under it, meta under that.
   */
  layout?: "inline" | "stack";
  size?: "sm" | "md" | "lg";
  /**
   * `light`: paper-ink tokens for white cards (`--dp-paper-*`).
   * `inherit`: theme tokens (`text-fg` / `text-fg-faint`).
   * `template`: marketing block tokens (`--tpl-ink` / `--tpl-ink-muted`).
   */
  tone?: "light" | "inherit" | "template";
  /** Leading face. Pass a node, or use `avatarSrc` for the default PersonAvatar. */
  avatar?: ReactNode;
  avatarSrc?: string;
  avatarAlt?: string;
  /** Trailing control (e.g. JellyButton). */
  action?: ReactNode;
}

function cx(...parts: Array<string | false | null | undefined>) {
  return parts.filter(Boolean).join(" ");
}

const AVATAR_PX: Record<"sm" | "md" | "lg", number> = {
  sm: 28,
  md: 40,
  lg: 48,
};

/**
 * Name + optional secondary line (handle, role, company) and optional meta.
 * Optional leading PersonAvatar and trailing action for dense people rows.
 * The typography atom under profile cards, tiles, and quote attributions.
 */
export default function PersonByline({
  name,
  secondary,
  meta,
  layout = "stack",
  size = "md",
  tone = "light",
  avatar,
  avatarSrc,
  avatarAlt,
  action,
  className = "",
  ...rest
}: PersonBylineProps) {
  const nameTone =
    tone === "light"
      ? "text-paper-ink"
      : tone === "template"
        ? "text-[color:var(--tpl-ink,var(--dp-paper-ink))]"
        : "text-fg";
  const mutedTone =
    tone === "light"
      ? "text-paper-muted"
      : tone === "template"
        ? "text-[color:var(--tpl-ink-muted,var(--dp-paper-muted))]"
        : "text-fg-faint";
  const metaTone =
    tone === "light"
      ? "text-paper-faint"
      : tone === "template"
        ? "text-[color:var(--tpl-ink-muted,var(--dp-paper-muted))]/70"
        : "text-fg-faint";

  const nameSize =
    size === "lg"
      ? "text-base font-semibold tracking-tight sm:text-lg"
      : size === "sm"
        ? "text-xs font-semibold"
        : "text-sm font-semibold";

  const secondarySize = size === "lg" ? "text-sm" : size === "sm" ? "text-[11px]" : "text-xs";

  const avatarPx = AVATAR_PX[size];
  const face =
    avatar !== undefined
      ? avatar
      : avatarSrc
        ? (
            <PersonAvatar
              src={avatarSrc}
              alt={avatarAlt ?? name ?? ""}
              size={avatarPx}
              placeholderClassName={tone === "light" ? "bg-paper-wash" : "bg-fg/10"}
            />
          )
        : null;

  let copy: ReactNode = null;

  if (layout === "inline") {
    if (name || secondary || meta) {
      copy = (
        <p className="flex min-w-0 flex-wrap items-baseline gap-x-1.5 text-sm leading-snug">
          {name ? <span className={cx("truncate font-semibold", nameTone)}>{name}</span> : null}
          {secondary ? <span className={cx("truncate", mutedTone)}>{secondary}</span> : null}
          {meta ? (
            <>
              {name || secondary ? (
                <span className={metaTone} aria-hidden>
                  ·
                </span>
              ) : null}
              <span className={cx("shrink-0", metaTone)}>{meta}</span>
            </>
          ) : null}
        </p>
      );
    }
  } else if (name || secondary || meta) {
    copy = (
      <>
        {name ? <p className={cx("truncate", nameSize, nameTone)}>{name}</p> : null}
        {secondary ? (
          <p
            className={cx(
              "truncate",
              secondarySize,
              mutedTone,
              name && size === "lg" ? "mt-0.5" : null,
            )}
          >
            {secondary}
          </p>
        ) : null}
        {meta ? (
          <p
            className={cx(
              "truncate",
              secondarySize,
              metaTone,
              (name || secondary) && size === "lg" ? "mt-0.5" : null,
            )}
          >
            {meta}
          </p>
        ) : null}
      </>
    );
  }

  if (!face && !copy && !action) return null;

  // Row chrome when a face or action is present; bare typography otherwise.
  if (face || action) {
    return (
      <div {...rest} className={cx("flex min-w-0 items-center gap-3", className)}>
        {face}
        {copy ? <div className="min-w-0 flex-1">{copy}</div> : null}
        {action}
      </div>
    );
  }

  return (
    <div {...rest} className={cx("min-w-0", className)}>
      {copy}
    </div>
  );
}