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:T4f4,import type { ReactElement } from "react"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; /** * The seam where an app's icon enters a primitive. * * This folder has no icon set of its own: buyer draws Phosphor, seller and admin * draw Lucide, and a component here must not care which. Consumers pass a * rendered node (`icon={}`) and this slot decides the one * thing the component still owns — optical size, so a 15px icon in a small * button stays 15px whatever library drew it. * * The `[&>svg]:size-full` override is what makes that work across libraries: * both Phosphor and Lucide render an `svg]:size-full", className )} style={{ width: size, height: size }} > {icon} ); } 24:T206a,

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

/**
 * The seam where an app's icon enters a primitive.
 *
 * This folder has no icon set of its own: buyer draws Phosphor, seller and admin
 * draw Lucide, and a component here must not care which. Consumers pass a
 * rendered node (`icon={<Icon name="search" />}`) and this slot decides the one
 * thing the component still owns — optical size, so a 15px icon in a small
 * button stays 15px whatever library drew it.
 *
 * The `[&>svg]:size-full` override is what makes that work across libraries:
 * both Phosphor and Lucide render an `<svg>` root carrying its own width and
 * height, and this overrules them without the component knowing either API.
 */
export function IconSlot({
  icon,
  size,
  className,
}: {
  icon: ReactElement | null | undefined;
  /** Optical size in px. Set by the component, not the call site. */
  size: number;
  className?: string;
}) {
  if (!icon) return null;

  return (
    <span
      aria-hidden
      data-slot="icon"
      className={cn(
        "inline-grid flex-none place-items-center [&>svg]:size-full",
        className
      )}
      style={{ width: size, height: size }}
    >
      {icon}
    </span>
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Primitives"}],["$","$L1e",null,{"children":"IconSlot"}],["$","$L1f",null,{"children":"The seam where your app's icon enters a Woohl component. Owns optical size so a 15px icon stays 15px whichever library drew it."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"icon-slot"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/icon-slot","source":"$23","highlighted":"$24","npm":[],"registry":["@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]