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:Td8e,import type { ReactElement, ReactNode } from "react"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { AlertGlyph } from "@/registry/tier-2-primitives/glyphs"; /** * EmptyState. * * AN EMPTY STATE IS A BRIEF, NOT AN APOLOGY * "Nothing under ₹500 in Apparel" tells a person what happened and implies * what to change. "No results found" tells them nothing and leaves them to * guess whether the site is broken. * * So the title states the specific situation, the body offers the way out, and * the action is the way out made pressable. If you can't write a title with a * noun from the person's own query in it, the empty state isn't finished. * * The icon sits in a quiet tile rather than a big illustration. Woohl is a * photographic brand — a blob-people illustration for an empty bag is the * wrong voice, and the imagery rules rule it out explicitly. */ export type EmptyStateProps = { /** State the situation, with specifics. */ title: string; /** The way out, in one or two sentences. */ body?: string; /** The tile glyph, from the app's own set: `icon={}`. */ icon?: ReactElement; /** Usually one Button. Two at most, and the second should be `secondary`. */ action?: ReactNode; /** `page` for a whole view; `inline` inside a card or a panel. */ variant?: "page" | "inline"; className?: string; }; export function EmptyState({ title, body, icon, action, variant = "page", className, }: EmptyStateProps) { return (

{icon && ( {icon} )}

{title}

{body && (

{body}

)} {action &&

{action}

}

); } /** * The error state. * * Same shape, different job: say what failed, and give a way to try again. The * retry is the point — an error screen with no action is a dead end, and "an * error occurred" with a reload button the person has to find themselves is * the most common version of it. */ export function ErrorState({ title = "That didn't load", body = "Something went wrong on our side. It's usually temporary.", action, className, }: { title?: string; body?: string; action?: ReactNode; className?: string; }) { return (

{title}

{body}

{action &&

{action}

}

); } 24:T629d,

import type { ReactElement, ReactNode } from "react";
import { cn } from "@/registry/tier-2-primitives/lib/cn";
import { AlertGlyph } from "@/registry/tier-2-primitives/glyphs";

/**
 * EmptyState.
 *
 * AN EMPTY STATE IS A BRIEF, NOT AN APOLOGY
 *   "Nothing under ₹500 in Apparel" tells a person what happened and implies
 *   what to change. "No results found" tells them nothing and leaves them to
 *   guess whether the site is broken.
 *
 * So the title states the specific situation, the body offers the way out, and
 * the action is the way out made pressable. If you can't write a title with a
 * noun from the person's own query in it, the empty state isn't finished.
 *
 * The icon sits in a quiet tile rather than a big illustration. Woohl is a
 * photographic brand — a blob-people illustration for an empty bag is the
 * wrong voice, and the imagery rules rule it out explicitly.
 */
export type EmptyStateProps = {
  /** State the situation, with specifics. */
  title: string;
  /** The way out, in one or two sentences. */
  body?: string;
  /** The tile glyph, from the app's own set: `icon={<Icon name="search" />}`. */
  icon?: ReactElement;
  /** Usually one Button. Two at most, and the second should be `secondary`. */
  action?: ReactNode;
  /** `page` for a whole view; `inline` inside a card or a panel. */
  variant?: "page" | "inline";
  className?: string;
};

export function EmptyState({
  title,
  body,
  icon,
  action,
  variant = "page",
  className,
}: EmptyStateProps) {
  return (
    <div
      data-slot="empty-state"
      className={cn(
        "font-ui flex flex-col items-center text-center",
        variant === "page" ? "px-6 py-12" : "px-4 py-8",
        className
      )}
    >
      {icon && (
        <span
          aria-hidden
          className="bg-surface-sunken text-text-muted grid size-14 place-items-center rounded-xl [&>svg]:size-6"
        >
          {icon}
        </span>
      )}

      <h3
        className={cn(
          "text-text-primary mt-5 font-bold",
          variant === "page" ? "text-h3" : "text-body-lg"
        )}
      >
        {title}
      </h3>

      {body && (
        <p className="text-body text-text-secondary mt-2 max-w-[42ch] leading-[1.6]">{body}</p>
      )}

      {action && <div className="mt-6 flex flex-wrap justify-center gap-2.5">{action}</div>}
    </div>
  );
}

/**
 * The error state.
 *
 * Same shape, different job: say what failed, and give a way to try again. The
 * retry is the point — an error screen with no action is a dead end, and "an
 * error occurred" with a reload button the person has to find themselves is
 * the most common version of it.
 */
export function ErrorState({
  title = "That didn't load",
  body = "Something went wrong on our side. It's usually temporary.",
  action,
  className,
}: {
  title?: string;
  body?: string;
  action?: ReactNode;
  className?: string;
}) {
  return (
    <div
      data-slot="error-state"
      role="alert"
      className={cn("font-ui flex flex-col items-center px-6 py-12 text-center", className)}
    >
      <span className="bg-danger-subtle text-danger grid size-14 place-items-center rounded-xl">
        <AlertGlyph size={24} />
      </span>
      <h3 className="text-h3 text-text-primary mt-5 font-bold">{title}</h3>
      <p className="text-body text-text-secondary mt-2 max-w-[42ch] leading-[1.6]">{body}</p>
      {action && <div className="mt-6">{action}</div>}
    </div>
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Blocks"}],["$","$L1e",null,{"children":"Empty & error states"}],["$","$L1f",null,{"children":"Say what happened and offer the way out."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"empty-state"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/empty-state","source":"$23","highlighted":"$24","npm":[],"registry":["@woohl/glyphs","@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]