1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:T1733,"use client"; import type { ComponentProps } from "react"; import * as AvatarPrimitive from "@radix-ui/react-avatar"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { CheckGlyph } from "@/registry/tier-2-primitives/glyphs"; /** * Avatar. * * A maker, a buyer, a support agent. * * The fallback is initials on a brand tint rather than a generic silhouette, * because on Woohl the person usually IS the product — a grey outline of a * head where a maker's face should be is the wrong first impression for a * marketplace whose claim is "made by people you can name". * * `name` is required and doubles as the accessible name: an avatar with no * name is a decorative circle, and if it's decorative it shouldn't be here. * * Built on Radix Avatar, which is here for one specific reason: it tracks the * image's load state rather than only its error state. A hand-rolled * `onError` fallback still renders an empty circle during the fetch, so a slow * connection shows a blank hole where a face will eventually appear. Radix * keeps the initials up until the image has actually decoded, and it can hold * them there for a beat (`delayMs`) so a fast cache hit doesn't flash. */ export type AvatarProps = Omit, "children"> & { /** Full name. Used for initials and as the accessible name. */ name: string; src?: string; size?: number; /** * The Woohl Assured tick. Only for makers who have actually been verified — * a trust mark that appears by default is not a trust mark. */ verified?: boolean; verifiedLabel?: string; }; export function Avatar({ name, src, size = 40, verified = false, verifiedLabel = "Woohl Assured", className, ...props }: AvatarProps) { const initials = name .trim() .split(/\s+/) .slice(0, 2) .map((word) => word[0]) .join("") .toUpperCase(); return ( {src && ( )} {/* No delay: the initials are the honest state until the image is decoded, and a blank beat would be worse than a swap. */} {initials} {verified && ( )} ); } /** * Overlapping avatars — "and 4 others", a maker collective, a review summary. * * The stack is one image to a screen reader, not six, so the list gets a single * accessible name and the individual avatars are hidden. */ export function AvatarGroup({ label, max = 4, size = 32, children, className, ...props }: ComponentProps<"span"> & { label: string; max?: number; size?: number }) { const items = Array.isArray(children) ? children : [children]; const shown = items.slice(0, max); const overflow = items.length - shown.length; return ( {shown} {overflow > 0 && ( +{overflow} )} ); } /* ------------------------------------------------------------ composition */ /** * The shadcn-shaped parts, for when the caller wants to own the fallback * content rather than take initials from a name — a store logo with a lettered * placeholder, an image with a spinner behind it. * * `Avatar` above is still the one to reach for: it enforces the accessible name * and the initials treatment. These exist so a shadcn call site can move over * without being rewritten. */ export function AvatarRoot({ className, ...props }: ComponentProps) { return ( ); } export function AvatarImage({ className, ...props }: ComponentProps) { return ( ); } export function AvatarFallback({ className, ...props }: ComponentProps) { return ( ); } 24:Taf68,

"use client";

import type { ComponentProps } from "react";
import * as AvatarPrimitive from "@radix-ui/react-avatar";
import { cn } from "@/registry/tier-2-primitives/lib/cn";
import { CheckGlyph } from "@/registry/tier-2-primitives/glyphs";

/**
 * Avatar.
 *
 * A maker, a buyer, a support agent.
 *
 * The fallback is initials on a brand tint rather than a generic silhouette,
 * because on Woohl the person usually IS the product — a grey outline of a
 * head where a maker's face should be is the wrong first impression for a
 * marketplace whose claim is "made by people you can name".
 *
 * `name` is required and doubles as the accessible name: an avatar with no
 * name is a decorative circle, and if it's decorative it shouldn't be here.
 *
 * Built on Radix Avatar, which is here for one specific reason: it tracks the
 * image's load state rather than only its error state. A hand-rolled
 * `onError` fallback still renders an empty circle during the fetch, so a slow
 * connection shows a blank hole where a face will eventually appear. Radix
 * keeps the initials up until the image has actually decoded, and it can hold
 * them there for a beat (`delayMs`) so a fast cache hit doesn't flash.
 */
export type AvatarProps = Omit<ComponentProps<"span">, "children"> & {
  /** Full name. Used for initials and as the accessible name. */
  name: string;
  src?: string;
  size?: number;
  /**
   * The Woohl Assured tick. Only for makers who have actually been verified —
   * a trust mark that appears by default is not a trust mark.
   */
  verified?: boolean;
  verifiedLabel?: string;
};

export function Avatar({
  name,
  src,
  size = 40,
  verified = false,
  verifiedLabel = "Woohl Assured",
  className,
  ...props
}: AvatarProps) {
  const initials = name
    .trim()
    .split(/\s+/)
    .slice(0, 2)
    .map((word) => word[0])
    .join("")
    .toUpperCase();

  return (
    <span
      data-slot="avatar"
      className={cn("relative inline-block flex-none", className)}
      style={{ width: size, height: size }}
      {...props}
    >
      <AvatarPrimitive.Root
        className="grid size-full place-items-center overflow-hidden rounded-full bg-surface-accent-subtle font-ui font-bold text-text-accent-strong"
        style={{ fontSize: size * 0.36 }}
        role="img"
        aria-label={name}
      >
        {src && (
          <AvatarPrimitive.Image src={src} alt="" className="size-full object-cover" />
        )}
        {/* No delay: the initials are the honest state until the image is
            decoded, and a blank beat would be worse than a swap. */}
        <AvatarPrimitive.Fallback delayMs={0} className="contents">
          {initials}
        </AvatarPrimitive.Fallback>
      </AvatarPrimitive.Root>

      {verified && (
        <span
          className="absolute -right-px -bottom-px grid place-items-center rounded-full border-2 border-surface-raised bg-surface-accent text-text-on-accent"
          style={{ width: size * 0.4, height: size * 0.4 }}
          role="img"
          aria-label={verifiedLabel}
        >
          <CheckGlyph size={Math.round(size * 0.2)} strokeWidth={3.5} />
        </span>
      )}
    </span>
  );
}

/**
 * Overlapping avatars — "and 4 others", a maker collective, a review summary.
 *
 * The stack is one image to a screen reader, not six, so the list gets a single
 * accessible name and the individual avatars are hidden.
 */
export function AvatarGroup({
  label,
  max = 4,
  size = 32,
  children,
  className,
  ...props
}: ComponentProps<"span"> & { label: string; max?: number; size?: number }) {
  const items = Array.isArray(children) ? children : [children];
  const shown = items.slice(0, max);
  const overflow = items.length - shown.length;

  return (
    <span
      data-slot="avatar-group"
      role="img"
      aria-label={label}
      className={cn("inline-flex items-center", className)}
      {...props}
    >
      <span aria-hidden className="flex -space-x-2 [&_[data-slot=avatar]>span:first-child]:ring-2 [&_[data-slot=avatar]>span:first-child]:ring-surface-raised">
        {shown}
      </span>
      {overflow > 0 && (
        <span
          aria-hidden
          className="-ml-2 grid place-items-center rounded-full bg-surface-sunken font-ui text-caption font-bold text-text-secondary ring-2 ring-surface-raised"
          style={{ width: size, height: size }}
        >
          +{overflow}
        </span>
      )}
    </span>
  );
}

/* ------------------------------------------------------------ composition */

/**
 * The shadcn-shaped parts, for when the caller wants to own the fallback
 * content rather than take initials from a name — a store logo with a lettered
 * placeholder, an image with a spinner behind it.
 *
 * `Avatar` above is still the one to reach for: it enforces the accessible name
 * and the initials treatment. These exist so a shadcn call site can move over
 * without being rewritten.
 */
export function AvatarRoot({
  className,
  ...props
}: ComponentProps<typeof AvatarPrimitive.Root>) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"
      className={cn(
        "relative grid size-10 flex-none place-items-center overflow-hidden rounded-full",
        "bg-surface-accent-subtle font-ui font-bold text-text-accent-strong",
        className,
      )}
      {...props}
    />
  );
}

export function AvatarImage({
  className,
  ...props
}: ComponentProps<typeof AvatarPrimitive.Image>) {
  return (
    <AvatarPrimitive.Image
      data-slot="avatar-image"
      className={cn("size-full object-cover", className)}
      {...props}
    />
  );
}

export function AvatarFallback({
  className,
  ...props
}: ComponentProps<typeof AvatarPrimitive.Fallback>) {
  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      className={cn("grid size-full place-items-center text-caption", className)}
      {...props}
    />
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Components"}],["$","$L1e",null,{"children":"Avatar"}],["$","$L1f",null,{"children":"Initials on a brand tint until the photograph decodes, with the Assured tick and stacked groups."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"avatar"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/avatar","source":"$23","highlighted":"$24","npm":["@radix-ui/react-avatar"],"registry":["@woohl/glyphs","@woohl/tokens","@woohl/utils"],"props":[{"name":"name","type":"string","note":"Required — also the accessible name"},{"name":"src","type":"string"},{"name":"size","type":"number","default":"40"},{"name":"verified","type":"boolean","default":"false"}]}]}]]}]]}]