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:T1c61,"use client"; import { useState, type ElementType, type ImgHTMLAttributes, type ReactNode } from "react"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { IMAGE_RATIOS, type ImageRatio } from "@/registry/tier-1-tokens/lib/constants"; import { scrimGradient, type ScrimDirection, type ScrimStrength } from "./scrim"; /** * The Woohl image wrapper. * * Photography is the single biggest lever on whether Woohl looks like Woohl. * The palette and the type are easy to get right; a stock photo of a smiling * model in a studio undoes all of it. * * This component cannot enforce the shoot. What it CAN enforce is everything * around it, and it does: * * · alt text is required by the type system — `decorative` is the only way to * get an empty one, and it has to be typed on purpose * · crops come from the three approved ratios, not from whatever the source * file happened to be * · type over an image gets a scrim, automatically, because `overlay` * implies it * · a missing or broken image falls back to the hatch, so a half-built page * looks unfinished rather than looks broken * * FRAMEWORK-AGNOSTIC ON PURPOSE * It renders a plain `` by default so the folder can be copied into a * repo with no framework assumptions. In a Next.js app, pass next/image: * * import NextImage from "next/image"; * * * `as` receives everything it doesn't recognise, so `fill`, `sizes`, * `priority` and `placeholder` all pass through. The wrapper is already * `relative` with a fixed aspect ratio, which is what `fill` needs. */ type WoohlImageOwnProps = { src: string; /** * What is happening in the photograph, not what the file is. * * good "Sujata pouring wax at the Kolkata Atelier bench" * bad "product image 3" * * Required. Alt text is part of the shot, not part of the cleanup. */ alt: string; /** * The image adds nothing a screen reader needs — a texture, a repeat of an * adjacent caption. Renders `alt=""` so it is skipped. * * Never use this to silence the alt requirement on a real photograph. */ decorative?: boolean; /** * 4:5 portrait is the default — feed posts, product cards, editorial. * 1:1 for grids, thumbnails and avatars. 16:9 for video, banners and slides. * 9:16 for story and Reel covers. `bleed` for a hero, where the container * decides the height. */ ratio?: ImageRatio; /** * 16px in the product, 32px on a 1080 artboard, 0 when the image bleeds off * the edge. Never mix two radii in one image group, and never put a drop * shadow on a photograph — the radius is the containment. */ radius?: "none" | "image" | "artboard" | "pill"; /** Content laid over the image. Implies a scrim unless you turn it off. */ overlay?: ReactNode; scrim?: boolean | ScrimStrength; scrimDirection?: ScrimDirection; /** Where the overlay content sits. */ align?: "bottom" | "top" | "center"; /** `cover` fills the crop. `contain` is for catalogue cut-outs on white. */ fit?: "cover" | "contain"; /** Element rendered for the image itself. Pass next/image here. */ as?: ElementType; className?: string; imageClassName?: string; }; export type WoohlImageProps = WoohlImageOwnProps & Omit, keyof WoohlImageOwnProps | "ref">; const RADIUS_CLASS = { none: "rounded-none", image: "rounded-lg", // 16px — the product value artboard: "rounded-[var(--radius-image-artboard)]", // 32px — the 1080 artboard value pill: "rounded-pill", // avatars only } as const; const ALIGN_CLASS = { bottom: "items-end", top: "items-start", center: "items-center", } as const; export function WoohlImage({ src, alt, decorative = false, ratio = "portrait", radius = "image", overlay, scrim, scrimDirection = "bottom", align = "bottom", fit = "cover", as: ImageComponent = "img", className, imageClassName, ...props }: WoohlImageProps) { const [failed, setFailed] = useState(false); // Content over an image needs a scrim. Passing overlay without asking for one // is a forgotten scrim, not a design choice — so it defaults on. const scrimStrength: ScrimStrength | null = scrim === false ? null : scrim === true || scrim === undefined ? (overlay ? "default" : null) : scrim; const aspect = ratio === "bleed" ? undefined : IMAGE_RATIOS[ratio]; return (

{failed || !src ? ( ) : ( setFailed(true)} className={cn( "size-full", fit === "cover" ? "object-cover" : "object-contain", imageClassName, )} {...props} /> )} {scrimStrength && (

)} {overlay && (

{overlay}

)}

); } /** * The hatch. * * A 135° warm-neutral hatch stands in for any photograph not yet shot, and for * one that failed to load. It is a working device: if it reaches production, * the work isn't finished — so it deliberately does not look like a tasteful * neutral panel. */ export function ImageFallback({ alt, className }: { alt?: string; className?: string }) { return (

); } /** * A caption pill for the bottom of a hero image. * * Credit the maker and name the place — "Kochi, Kerala · est. 2021", never a * generic "made in India" caption with no specifics. */ export function ImageCaption({ children, className, }: { children: ReactNode; className?: string; }) { return ( {children} ); } /** * The bird as a watermark: 6–8% opacity, cropped by the panel edge. * * Only on ink or Woohl Orange. Never on white, never over a photograph, never * more than once per surface. It is the one graphic use of the mark that isn't * a logo placement. */ export function ImageWatermark({ children }: { children: ReactNode }) { return ( {children} ); } 24:Tcc2c,

"use client";

import { useState, type ElementType, type ImgHTMLAttributes, type ReactNode } from "react";
import { cn } from "@/registry/tier-2-primitives/lib/cn";
import { IMAGE_RATIOS, type ImageRatio } from "@/registry/tier-1-tokens/lib/constants";
import { scrimGradient, type ScrimDirection, type ScrimStrength } from "./scrim";

/**
 * The Woohl image wrapper.
 *
 * Photography is the single biggest lever on whether Woohl looks like Woohl.
 * The palette and the type are easy to get right; a stock photo of a smiling
 * model in a studio undoes all of it.
 *
 * This component cannot enforce the shoot. What it CAN enforce is everything
 * around it, and it does:
 *
 *   · alt text is required by the type system — `decorative` is the only way to
 *     get an empty one, and it has to be typed on purpose
 *   · crops come from the three approved ratios, not from whatever the source
 *     file happened to be
 *   · type over an image gets a scrim, automatically, because `overlay`
 *     implies it
 *   · a missing or broken image falls back to the hatch, so a half-built page
 *     looks unfinished rather than looks broken
 *
 * FRAMEWORK-AGNOSTIC ON PURPOSE
 *   It renders a plain `<img>` by default so the folder can be copied into a
 *   repo with no framework assumptions. In a Next.js app, pass next/image:
 *
 *       import NextImage from "next/image";
 *       <WoohlImage as={NextImage} src={src} alt="…" fill sizes="(max-width: 768px) 100vw, 33vw" />
 *
 *   `as` receives everything it doesn't recognise, so `fill`, `sizes`,
 *   `priority` and `placeholder` all pass through. The wrapper is already
 *   `relative` with a fixed aspect ratio, which is what `fill` needs.
 */

type WoohlImageOwnProps = {
  src: string;

  /**
   * What is happening in the photograph, not what the file is.
   *
   *   good  "Sujata pouring wax at the Kolkata Atelier bench"
   *   bad   "product image 3"
   *
   * Required. Alt text is part of the shot, not part of the cleanup.
   */
  alt: string;

  /**
   * The image adds nothing a screen reader needs — a texture, a repeat of an
   * adjacent caption. Renders `alt=""` so it is skipped.
   *
   * Never use this to silence the alt requirement on a real photograph.
   */
  decorative?: boolean;

  /**
   * 4:5 portrait is the default — feed posts, product cards, editorial.
   * 1:1 for grids, thumbnails and avatars. 16:9 for video, banners and slides.
   * 9:16 for story and Reel covers. `bleed` for a hero, where the container
   * decides the height.
   */
  ratio?: ImageRatio;

  /**
   * 16px in the product, 32px on a 1080 artboard, 0 when the image bleeds off
   * the edge. Never mix two radii in one image group, and never put a drop
   * shadow on a photograph — the radius is the containment.
   */
  radius?: "none" | "image" | "artboard" | "pill";

  /** Content laid over the image. Implies a scrim unless you turn it off. */
  overlay?: ReactNode;
  scrim?: boolean | ScrimStrength;
  scrimDirection?: ScrimDirection;

  /** Where the overlay content sits. */
  align?: "bottom" | "top" | "center";

  /** `cover` fills the crop. `contain` is for catalogue cut-outs on white. */
  fit?: "cover" | "contain";

  /** Element rendered for the image itself. Pass next/image here. */
  as?: ElementType;

  className?: string;
  imageClassName?: string;
};

export type WoohlImageProps = WoohlImageOwnProps &
  Omit<ImgHTMLAttributes<HTMLImageElement>, keyof WoohlImageOwnProps | "ref">;

const RADIUS_CLASS = {
  none: "rounded-none",
  image: "rounded-lg", // 16px — the product value
  artboard: "rounded-[var(--radius-image-artboard)]", // 32px — the 1080 artboard value
  pill: "rounded-pill", // avatars only
} as const;

const ALIGN_CLASS = {
  bottom: "items-end",
  top: "items-start",
  center: "items-center",
} as const;

export function WoohlImage({
  src,
  alt,
  decorative = false,
  ratio = "portrait",
  radius = "image",
  overlay,
  scrim,
  scrimDirection = "bottom",
  align = "bottom",
  fit = "cover",
  as: ImageComponent = "img",
  className,
  imageClassName,
  ...props
}: WoohlImageProps) {
  const [failed, setFailed] = useState(false);

  // Content over an image needs a scrim. Passing overlay without asking for one
  // is a forgotten scrim, not a design choice — so it defaults on.
  const scrimStrength: ScrimStrength | null =
    scrim === false ? null : scrim === true || scrim === undefined ? (overlay ? "default" : null) : scrim;

  const aspect = ratio === "bleed" ? undefined : IMAGE_RATIOS[ratio];

  return (
    <div
      className={cn(
        "relative isolate overflow-hidden bg-surface-sunken",
        ratio === "bleed" && "size-full",
        RADIUS_CLASS[radius],
        className,
      )}
      style={aspect ? { aspectRatio: aspect } : undefined}
    >
      {failed || !src ? (
        <ImageFallback alt={decorative ? "" : alt} />
      ) : (
        <ImageComponent
          src={src}
          alt={decorative ? "" : alt}
          onError={() => setFailed(true)}
          className={cn(
            "size-full",
            fit === "cover" ? "object-cover" : "object-contain",
            imageClassName,
          )}
          {...props}
        />
      )}

      {scrimStrength && (
        <div
          aria-hidden
          className="absolute inset-0 z-raised"
          style={{ background: scrimGradient(scrimDirection, scrimStrength) }}
        />
      )}

      {overlay && (
        <div className={cn("absolute inset-0 z-raised flex p-4", ALIGN_CLASS[align])}>{overlay}</div>
      )}
    </div>
  );
}

/**
 * The hatch.
 *
 * A 135° warm-neutral hatch stands in for any photograph not yet shot, and for
 * one that failed to load. It is a working device: if it reaches production,
 * the work isn't finished — so it deliberately does not look like a tasteful
 * neutral panel.
 */
export function ImageFallback({ alt, className }: { alt?: string; className?: string }) {
  return (
    <div
      role={alt ? "img" : "presentation"}
      aria-label={alt || undefined}
      aria-hidden={alt ? undefined : true}
      className={cn("size-full", className)}
      style={{ background: "var(--hatch)" }}
    />
  );
}

/**
 * A caption pill for the bottom of a hero image.
 *
 * Credit the maker and name the place — "Kochi, Kerala · est. 2021", never a
 * generic "made in India" caption with no specifics.
 */
export function ImageCaption({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-2 rounded-pill px-3 py-1.5 text-caption font-medium text-text-on-fill",
        "bg-surface-media backdrop-blur-[2px]",
        className,
      )}
    >
      {children}
    </span>
  );
}

/**
 * The bird as a watermark: 6–8% opacity, cropped by the panel edge.
 *
 * Only on ink or Woohl Orange. Never on white, never over a photograph, never
 * more than once per surface. It is the one graphic use of the mark that isn't
 * a logo placement.
 */
export function ImageWatermark({ children }: { children: ReactNode }) {
  return (
    <span aria-hidden className="pointer-events-none absolute -right-6 -bottom-8 opacity-[0.08]">
      {children}
    </span>
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Tokens & brand"}],["$","$L1e",null,{"children":"Imagery"}],["$","$L1f",null,{"children":"WoohlImage with the house aspect ratios, placeholder treatment and scrim helpers for text over photography."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"imagery"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/imagery","source":"$23","highlighted":"$24","npm":[],"registry":["@woohl/constants","@woohl/utils"],"props":"$undefined"}]}]]}]]}]