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:T2201,"use client"; import type { ComponentProps, ReactElement, ReactNode } from "react"; import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { CheckGlyph, ChevronRightGlyph } from "@/registry/tier-2-primitives/glyphs"; import { IconSlot } from "@/registry/tier-2-primitives/icon-slot"; /** * Dropdown. * * A menu of actions. Radix DropdownMenu underneath, so the keyboard contract is * the full one rather than the half the hand-rolled version managed: arrows * move, Home/End jump, typing a letter jumps to the item starting with it, * Escape closes and returns focus to the trigger, and only the active item is * in the tab order. * * It is also portalled and collision-aware, so a menu on the last row of a * table no longer opens off the bottom of the screen. * * If you find yourself wanting a form inside this, you want a `Popover`. */ export type DropdownItem = { label: string; onSelect?: () => void; /** Leading icon as a node: `icon={}`. */ icon?: ReactElement; /** Right-aligned hint — a shortcut, a count. */ meta?: string; disabled?: boolean; /** Renders the item in the danger tone. Destructive actions go last. */ destructive?: boolean; }; export type DropdownProps = { trigger: ReactNode; /** `null` inserts a separator. */ items: (DropdownItem | null)[]; align?: "start" | "end"; label?: string; className?: string; }; export function Dropdown({ trigger, items, align = "start", label, className }: DropdownProps) { return ( {trigger} {items.map((item, index) => item === null ? ( ) : ( {item.label} ), )} ); } /* ------------------------------------------------------------ composition */ export const DropdownMenu = DropdownMenuPrimitive.Root; export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger; export const DropdownMenuPortal = DropdownMenuPrimitive.Portal; export const DropdownMenuGroup = DropdownMenuPrimitive.Group; export const DropdownMenuSub = DropdownMenuPrimitive.Sub; export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; export function DropdownMenuContent({ className, align = "start", sideOffset = 6, ...props }: ComponentProps) { return ( ); } export function DropdownMenuItem({ className, destructive = false, variant, icon, meta, children, ...props }: ComponentProps & { destructive?: boolean; /** shadcn's spelling. `variant="destructive"` is `destructive`. */ variant?: "default" | "destructive"; icon?: ReactElement; meta?: string; }) { const isDestructive = destructive || variant === "destructive"; return ( {icon && } {children} {meta && {meta}} ); } export function DropdownMenuSeparator({ className, ...props }: ComponentProps) { return ( ); } export function DropdownMenuLabel({ className, ...props }: ComponentProps) { return ( ); } export function DropdownMenuCheckboxItem({ className, children, ...props }: ComponentProps) { return ( {children} ); } export function DropdownMenuRadioItem({ className, children, ...props }: ComponentProps) { return ( {children} ); } /** A keyboard shortcut, right-aligned and quiet. Not interactive. */ export function DropdownMenuShortcut({ className, ...props }: ComponentProps<"span">) { return ( ); } export function DropdownMenuSubTrigger({ className, children, ...props }: ComponentProps) { return ( {children} ); } export function DropdownMenuSubContent({ className, ...props }: ComponentProps) { return ( ); } 24:Tffa0,

"use client";

import type { ComponentProps, ReactElement, ReactNode } from "react";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { cn } from "@/registry/tier-2-primitives/lib/cn";
import { CheckGlyph, ChevronRightGlyph } from "@/registry/tier-2-primitives/glyphs";
import { IconSlot } from "@/registry/tier-2-primitives/icon-slot";

/**
 * Dropdown.
 *
 * A menu of actions. Radix DropdownMenu underneath, so the keyboard contract is
 * the full one rather than the half the hand-rolled version managed: arrows
 * move, Home/End jump, typing a letter jumps to the item starting with it,
 * Escape closes and returns focus to the trigger, and only the active item is
 * in the tab order.
 *
 * It is also portalled and collision-aware, so a menu on the last row of a
 * table no longer opens off the bottom of the screen.
 *
 * If you find yourself wanting a form inside this, you want a `Popover`.
 */
export type DropdownItem = {
  label: string;
  onSelect?: () => void;
  /** Leading icon as a node: `icon={<Icon name="pencil" />}`. */
  icon?: ReactElement;
  /** Right-aligned hint — a shortcut, a count. */
  meta?: string;
  disabled?: boolean;
  /** Renders the item in the danger tone. Destructive actions go last. */
  destructive?: boolean;
};

export type DropdownProps = {
  trigger: ReactNode;
  /** `null` inserts a separator. */
  items: (DropdownItem | null)[];
  align?: "start" | "end";
  label?: string;
  className?: string;
};

export function Dropdown({ trigger, items, align = "start", label, className }: DropdownProps) {
  return (
    <DropdownMenuPrimitive.Root>
      <DropdownMenuPrimitive.Trigger asChild>{trigger}</DropdownMenuPrimitive.Trigger>
      <DropdownMenuContent align={align} aria-label={label} className={className}>
        {items.map((item, index) =>
          item === null ? (
            <DropdownMenuSeparator key={`separator-${index}`} />
          ) : (
            <DropdownMenuItem
              key={item.label}
              disabled={item.disabled}
              destructive={item.destructive}
              onSelect={item.onSelect}
              icon={item.icon}
              meta={item.meta}
            >
              {item.label}
            </DropdownMenuItem>
          ),
        )}
      </DropdownMenuContent>
    </DropdownMenuPrimitive.Root>
  );
}

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

export const DropdownMenu = DropdownMenuPrimitive.Root;
export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;

export function DropdownMenuContent({
  className,
  align = "start",
  sideOffset = 6,
  ...props
}: ComponentProps<typeof DropdownMenuPrimitive.Content>) {
  return (
    <DropdownMenuPrimitive.Portal>
      <DropdownMenuPrimitive.Content
        data-slot="dropdown"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "z-popover min-w-[200px] overflow-hidden rounded-xl border border-border-subtle",
          "bg-surface-raised py-1.5 font-ui shadow-e2 outline-none",
          "origin-[var(--radix-dropdown-menu-content-transform-origin)] animate-woohl-rise",
          className,
        )}
        {...props}
      />
    </DropdownMenuPrimitive.Portal>
  );
}

export function DropdownMenuItem({
  className,
  destructive = false,
  variant,
  icon,
  meta,
  children,
  ...props
}: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
  destructive?: boolean;
  /** shadcn's spelling. `variant="destructive"` is `destructive`. */
  variant?: "default" | "destructive";
  icon?: ReactElement;
  meta?: string;
}) {
  const isDestructive = destructive || variant === "destructive";
  return (
    <DropdownMenuPrimitive.Item
      data-slot="dropdown-item"
      className={cn(
        "flex w-full cursor-pointer items-center gap-2.5 px-3.5 py-2 text-left text-body outline-none",
        "transition-colors motion-instant",
        /* Radix drives hover and keyboard focus through one attribute, so the
           highlight can't disagree with what the arrow keys think is active. */
        "data-[highlighted]:bg-surface-sunken",
        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45",
        isDestructive ? "text-danger" : "text-text-primary",
        className,
      )}
      {...props}
    >
      {icon && <IconSlot icon={icon} size={16} className="text-text-muted" />}
      <span className="flex-1">{children}</span>
      {meta && <span className="text-caption text-text-muted">{meta}</span>}
    </DropdownMenuPrimitive.Item>
  );
}

export function DropdownMenuSeparator({
  className,
  ...props
}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
  return (
    <DropdownMenuPrimitive.Separator
      className={cn("my-1.5 h-px bg-border-subtle", className)}
      {...props}
    />
  );
}

export function DropdownMenuLabel({
  className,
  ...props
}: ComponentProps<typeof DropdownMenuPrimitive.Label>) {
  return (
    <DropdownMenuPrimitive.Label
      className={cn("px-3.5 py-1.5 font-ui text-caption text-text-muted", className)}
      {...props}
    />
  );
}

export function DropdownMenuCheckboxItem({
  className,
  children,
  ...props
}: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
  return (
    <DropdownMenuPrimitive.CheckboxItem
      data-slot="dropdown-checkbox-item"
      className={cn(
        "flex cursor-pointer items-center gap-2.5 py-2 pr-3.5 pl-8 text-body outline-none",
        "relative text-text-primary transition-colors motion-instant",
        "data-[highlighted]:bg-surface-sunken",
        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45",
        className,
      )}
      {...props}
    >
      <span className="absolute left-3 grid place-items-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CheckGlyph size={14} className="text-text-accent" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.CheckboxItem>
  );
}

export function DropdownMenuRadioItem({
  className,
  children,
  ...props
}: ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
  return (
    <DropdownMenuPrimitive.RadioItem
      data-slot="dropdown-radio-item"
      className={cn(
        "flex cursor-pointer items-center gap-2.5 py-2 pr-3.5 pl-8 text-body outline-none",
        "relative text-text-primary transition-colors motion-instant",
        "data-[highlighted]:bg-surface-sunken",
        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45",
        className,
      )}
      {...props}
    >
      <span className="absolute left-3 grid place-items-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <span className="size-[7px] rounded-full bg-surface-accent" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.RadioItem>
  );
}

/** A keyboard shortcut, right-aligned and quiet. Not interactive. */
export function DropdownMenuShortcut({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      data-slot="dropdown-shortcut"
      className={cn("ml-auto text-caption tracking-wide text-text-muted", className)}
      {...props}
    />
  );
}

export function DropdownMenuSubTrigger({
  className,
  children,
  ...props
}: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>) {
  return (
    <DropdownMenuPrimitive.SubTrigger
      data-slot="dropdown-sub-trigger"
      className={cn(
        "flex cursor-pointer items-center gap-2.5 px-3.5 py-2 text-body outline-none",
        "text-text-primary transition-colors motion-instant",
        "data-[highlighted]:bg-surface-sunken data-[state=open]:bg-surface-sunken",
        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightGlyph size={14} className="ml-auto text-text-muted" />
    </DropdownMenuPrimitive.SubTrigger>
  );
}

export function DropdownMenuSubContent({
  className,
  ...props
}: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
  return (
    <DropdownMenuPrimitive.SubContent
      data-slot="dropdown-sub-content"
      className={cn(
        "z-popover min-w-[180px] overflow-hidden rounded-xl border border-border-subtle",
        "bg-surface-raised py-1.5 font-ui shadow-e2 outline-none",
        "origin-[var(--radix-dropdown-menu-content-transform-origin)] animate-woohl-rise",
        className,
      )}
      {...props}
    />
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Composites"}],["$","$L1e",null,{"children":"Dropdown menu"}],["$","$L1f",null,{"children":"Typeahead, arrow keys, submenus, checkbox and radio items."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"dropdown"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/dropdown","source":"$23","highlighted":"$24","npm":["@radix-ui/react-dropdown-menu"],"registry":["@woohl/glyphs","@woohl/icon-slot","@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]