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:Te89,"use client"; import type { ComponentProps, ReactNode } from "react"; import * as PopoverPrimitive from "@radix-ui/react-popover"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; /** * Popover. * * A small panel anchored to the control that opened it. Fades in with a 6px * rise over 240ms, out over 180ms — and the transform origin sits at the * trigger, so it visibly grows FROM the thing you pressed. That is the whole * job of the motion: motion follows cause. * * POPOVER vs TOOLTIP vs DROPDOWN * Tooltip a hint. Hover and focus. Nothing inside it is interactive. * Popover a panel. Click to open. Anything can live inside — a form, a * summary, a date picker. * Dropdown a menu. Click to open, arrow keys to move, one choice, closes. * * Radix positions it, which is the part that was quietly broken before: the * panel is portalled so an `overflow: hidden` ancestor can't clip it, and it * flips and shifts against the viewport rather than hanging off the edge. The * origin still follows the trigger via `--radix-popover-content-transform-origin`. * * Uncontrolled by default so the common case is one line; pass `open` and * `onOpenChange` when the state belongs to the page. */ export type PopoverProps = { /** The control. Gets `aria-expanded` and `aria-haspopup` wired for you. */ trigger: ReactNode; children: ReactNode; side?: "bottom" | "top" | "left" | "right"; align?: "start" | "end" | "center"; open?: boolean; onOpenChange?: (open: boolean) => void; className?: string; /** The accessible name for the panel. */ label?: string; }; export function Popover({ trigger, children, side = "bottom", align = "start", open, onOpenChange, className, label, }: PopoverProps) { return ( {trigger} {children} ); } /* ------------------------------------------------------------ composition */ export const PopoverRoot = PopoverPrimitive.Root; export const PopoverTrigger = PopoverPrimitive.Trigger; export const PopoverAnchor = PopoverPrimitive.Anchor; export function PopoverContent({ className, side = "bottom", align = "start", sideOffset = 6, ...props }: ComponentProps) { return ( ); } export function PopoverHeader({ className, ...props }: ComponentProps<"div">) { return

; } export function PopoverTitle({ className, ...props }: ComponentProps<"p">) { return (

); } export function PopoverDescription({ className, ...props }: ComponentProps<"p">) { return (

); } 24:T71f5,

"use client";

import type { ComponentProps, ReactNode } from "react";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import { cn } from "@/registry/tier-2-primitives/lib/cn";

/**
 * Popover.
 *
 * A small panel anchored to the control that opened it. Fades in with a 6px
 * rise over 240ms, out over 180ms — and the transform origin sits at the
 * trigger, so it visibly grows FROM the thing you pressed. That is the whole
 * job of the motion: motion follows cause.
 *
 * POPOVER vs TOOLTIP vs DROPDOWN
 *   Tooltip  a hint. Hover and focus. Nothing inside it is interactive.
 *   Popover  a panel. Click to open. Anything can live inside — a form, a
 *            summary, a date picker.
 *   Dropdown a menu. Click to open, arrow keys to move, one choice, closes.
 *
 * Radix positions it, which is the part that was quietly broken before: the
 * panel is portalled so an `overflow: hidden` ancestor can't clip it, and it
 * flips and shifts against the viewport rather than hanging off the edge. The
 * origin still follows the trigger via `--radix-popover-content-transform-origin`.
 *
 * Uncontrolled by default so the common case is one line; pass `open` and
 * `onOpenChange` when the state belongs to the page.
 */
export type PopoverProps = {
  /** The control. Gets `aria-expanded` and `aria-haspopup` wired for you. */
  trigger: ReactNode;
  children: ReactNode;
  side?: "bottom" | "top" | "left" | "right";
  align?: "start" | "end" | "center";
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  className?: string;
  /** The accessible name for the panel. */
  label?: string;
};

export function Popover({
  trigger,
  children,
  side = "bottom",
  align = "start",
  open,
  onOpenChange,
  className,
  label,
}: PopoverProps) {
  return (
    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
      <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
      <PopoverContent side={side} align={align} aria-label={label} className={className}>
        {children}
      </PopoverContent>
    </PopoverPrimitive.Root>
  );
}

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

export const PopoverRoot = PopoverPrimitive.Root;
export const PopoverTrigger = PopoverPrimitive.Trigger;
export const PopoverAnchor = PopoverPrimitive.Anchor;

export function PopoverContent({
  className,
  side = "bottom",
  align = "start",
  sideOffset = 6,
  ...props
}: ComponentProps<typeof PopoverPrimitive.Content>) {
  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        data-slot="popover"
        side={side}
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "z-popover min-w-[200px] rounded-xl border border-border-subtle bg-surface-raised p-4",
          "font-ui text-body text-text-secondary shadow-e2 outline-none",
          "origin-[var(--radix-popover-content-transform-origin)] animate-woohl-rise",
          className,
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  );
}

export function PopoverHeader({ className, ...props }: ComponentProps<"div">) {
  return <div data-slot="popover-header" className={cn("mb-2", className)} {...props} />;
}

export function PopoverTitle({ className, ...props }: ComponentProps<"p">) {
  return (
    <p
      data-slot="popover-title"
      className={cn("text-label font-semibold text-text-primary", className)}
      {...props}
    />
  );
}

export function PopoverDescription({ className, ...props }: ComponentProps<"p">) {
  return (
    <p
      data-slot="popover-description"
      className={cn("mt-0.5 text-caption text-text-muted", className)}
      {...props}
    />
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Composites"}],["$","$L1e",null,{"children":"Popover"}],["$","$L1f",null,{"children":"An anchored panel that can hold anything, including a form."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"popover"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/popover","source":"$23","highlighted":"$24","npm":["@radix-ui/react-popover"],"registry":["@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]