18:I[37913,["/_next/static/immutable/chunks/2s06-amq9rkwi.js","/_next/static/immutable/chunks/2ucgke2alemkc.js","/_next/static/immutable/chunks/017mso6ft_bv7.js","/_next/static/immutable/chunks/31xn-gbbywnam.js","/_next/static/immutable/chunks/0vimljdwd_347.js","/_next/static/immutable/chunks/0ad3fpzgk8ug6.js"],"DocsSidebar"] 19:I[34083,["/_next/static/immutable/chunks/2s06-amq9rkwi.js","/_next/static/immutable/chunks/2ucgke2alemkc.js","/_next/static/immutable/chunks/017mso6ft_bv7.js","/_next/static/immutable/chunks/31xn-gbbywnam.js","/_next/static/immutable/chunks/0vimljdwd_347.js","/_next/static/immutable/chunks/0ad3fpzgk8ug6.js"],"CopyPage"] 1a:I[64251,["/_next/static/immutable/chunks/2s06-amq9rkwi.js","/_next/static/immutable/chunks/2ucgke2alemkc.js","/_next/static/immutable/chunks/017mso6ft_bv7.js","/_next/static/immutable/chunks/31xn-gbbywnam.js","/_next/static/immutable/chunks/0vimljdwd_347.js","/_next/static/immutable/chunks/0ad3fpzgk8ug6.js"],"ComponentGuide"] 1b:T1e24,

import { Button, IconButton } from "@/components/ui/button"

export function ButtonDemo() {
  return (
    <>
      <Button>Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Delete</Button>
      <Button loading>Saving</Button>
      <Button disabled>Disabled</Button>
      <IconButton label="Add">+</IconButton>
    </>
  )
}

1c:T1658,"use client"; import type { ButtonHTMLAttributes, HTMLAttributes, MouseEvent as ReactMouseEvent, ReactElement, ReactNode, } from "react"; import { cloneElement, createContext, isValidElement, useContext, useEffect, useId, useRef, useState, } from "react"; import { cn } from "@/lib/cn"; import { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from "../../button/react/button"; type MenuContextValue = { open: boolean; setOpen: (open: boolean) => void; triggerId: string; contentId: string; }; const MenuContext = createContext(null); function useMenuContext() { const context = useContext(MenuContext); if (!context) throw new Error("Menu components must be used within Menu."); return context; } export type MenuProps = { open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; children?: ReactNode; className?: string; }; export function Menu({ open, defaultOpen = false, onOpenChange, className, children, }: MenuProps) { const [internal, setInternal] = useState(defaultOpen); const isOpen = open ?? internal; const rootRef = useRef(null); const triggerId = useId(); const contentId = useId(); function setOpen(next: boolean) { if (open === undefined) setInternal(next); onOpenChange?.(next); } useEffect(() => { if (!isOpen) return; function onPointerDown(event: MouseEvent) { if (!rootRef.current?.contains(event.target as Node)) setOpen(false); } function onKeyDown(event: KeyboardEvent) { if (event.key === "Escape") setOpen(false); } document.addEventListener("pointerdown", onPointerDown); document.addEventListener("keydown", onKeyDown); return () => { document.removeEventListener("pointerdown", onPointerDown); document.removeEventListener("keydown", onKeyDown); }; }, [isOpen]); return (

{children}

); } export type MenuTriggerProps = Omit, "color"> & { asChild?: boolean; variant?: ButtonVariant; size?: ButtonSize; }; export function MenuTrigger({ asChild = false, className, children, onClick, variant = "outline", size = "sm", ...props }: MenuTriggerProps) { const { open, setOpen, triggerId, contentId } = useMenuContext(); function handleClick(event: ReactMouseEvent) { onClick?.(event); if (!event.defaultPrevented) setOpen(!open); } const triggerProps = { id: triggerId, type: "button" as const, "data-slot": "menu-trigger", "aria-haspopup": "menu" as const, "aria-expanded": open, "aria-controls": contentId, onClick: handleClick, ...props, }; if (asChild && isValidElement(children)) { const child = children as ReactElement>; return cloneElement(child, { ...triggerProps, className: cn( typeof child.props.className === "string" ? child.props.className : undefined, className, ), onClick: (event: ReactMouseEvent) => { const childOnClick = child.props.onClick as | ((event: ReactMouseEvent) => void) | undefined; childOnClick?.(event); handleClick(event); }, }); } return ( ); } export type MenuContentProps = HTMLAttributes & { align?: "start" | "end"; }; export function MenuContent({ align = "start", className, children, ...props }: MenuContentProps) { const { open, contentId, triggerId } = useMenuContext(); if (!open) return null; return ( ); } export type MenuItemProps = ButtonHTMLAttributes & { inset?: boolean; }; export function MenuItem({ inset = false, disabled, className, children, onClick, ...props }: MenuItemProps) { const { setOpen } = useMenuContext(); return ( ); } 1d:T12219,

"use client";

import type {
  ButtonHTMLAttributes,
  HTMLAttributes,
  MouseEvent as ReactMouseEvent,
  ReactElement,
  ReactNode,
} from "react";
import {
  cloneElement,
  createContext,
  isValidElement,
  useContext,
  useEffect,
  useId,
  useRef,
  useState,
} from "react";

import { cn } from "@/lib/cn";
import {
  Button,
  type ButtonProps,
  type ButtonSize,
  type ButtonVariant,
} from "../../button/react/button";

type MenuContextValue = {
  open: boolean;
  setOpen: (open: boolean) => void;
  triggerId: string;
  contentId: string;
};

const MenuContext = createContext<MenuContextValue | null>(null);

function useMenuContext() {
  const context = useContext(MenuContext);
  if (!context) throw new Error("Menu components must be used within Menu.");
  return context;
}

export type MenuProps = {
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  children?: ReactNode;
  className?: string;
};

export function Menu({
  open,
  defaultOpen = false,
  onOpenChange,
  className,
  children,
}: MenuProps) {
  const [internal, setInternal] = useState(defaultOpen);
  const isOpen = open ?? internal;
  const rootRef = useRef<HTMLDivElement>(null);
  const triggerId = useId();
  const contentId = useId();

  function setOpen(next: boolean) {
    if (open === undefined) setInternal(next);
    onOpenChange?.(next);
  }

  useEffect(() => {
    if (!isOpen) return;
    function onPointerDown(event: MouseEvent) {
      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
    }
    function onKeyDown(event: KeyboardEvent) {
      if (event.key === "Escape") setOpen(false);
    }
    document.addEventListener("pointerdown", onPointerDown);
    document.addEventListener("keydown", onKeyDown);
    return () => {
      document.removeEventListener("pointerdown", onPointerDown);
      document.removeEventListener("keydown", onKeyDown);
    };
  }, [isOpen]);

  return (
    <MenuContext.Provider value={{ open: isOpen, setOpen, triggerId, contentId }}>
      <div
        ref={rootRef}
        data-slot="menu"
        data-state={isOpen ? "open" : "closed"}
        className={cn("relative inline-flex", className)}
      >
        {children}
      </div>
    </MenuContext.Provider>
  );
}

export type MenuTriggerProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
  asChild?: boolean;
  variant?: ButtonVariant;
  size?: ButtonSize;
};

export function MenuTrigger({
  asChild = false,
  className,
  children,
  onClick,
  variant = "outline",
  size = "sm",
  ...props
}: MenuTriggerProps) {
  const { open, setOpen, triggerId, contentId } = useMenuContext();

  function handleClick(event: ReactMouseEvent<HTMLButtonElement>) {
    onClick?.(event);
    if (!event.defaultPrevented) setOpen(!open);
  }

  const triggerProps = {
    id: triggerId,
    type: "button" as const,
    "data-slot": "menu-trigger",
    "aria-haspopup": "menu" as const,
    "aria-expanded": open,
    "aria-controls": contentId,
    onClick: handleClick,
    ...props,
  };

  if (asChild && isValidElement(children)) {
    const child = children as ReactElement<Record<string, unknown>>;
    return cloneElement(child, {
      ...triggerProps,
      className: cn(
        typeof child.props.className === "string" ? child.props.className : undefined,
        className,
      ),
      onClick: (event: ReactMouseEvent<HTMLButtonElement>) => {
        const childOnClick = child.props.onClick as
          | ((event: ReactMouseEvent<HTMLButtonElement>) => void)
          | undefined;
        childOnClick?.(event);
        handleClick(event);
      },
    });
  }

  return (
    <Button
      variant={variant}
      size={size}
      className={className}
      {...(triggerProps as ButtonProps)}
    >
      {children}
    </Button>
  );
}

export type MenuContentProps = HTMLAttributes<HTMLDivElement> & {
  align?: "start" | "end";
};

export function MenuContent({
  align = "start",
  className,
  children,
  ...props
}: MenuContentProps) {
  const { open, contentId, triggerId } = useMenuContext();
  if (!open) return null;

  return (
    <div
      id={contentId}
      role="menu"
      data-slot="menu-content"
      aria-labelledby={triggerId}
      className={cn(
        "absolute top-full z-[var(--felicityui-zIndex-overlay)] mt-1 min-w-[10rem] overflow-hidden rounded-[length:var(--felicityui-radius-control)] border border-[var(--felicityui-color-border-default)] bg-[var(--felicityui-color-surface)] py-1 shadow-none",
        align === "end" ? "end-0" : "start-0",
        className,
      )}
      {...props}
    >
      {children}
    </div>
  );
}

export type MenuItemProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  inset?: boolean;
};

export function MenuItem({
  inset = false,
  disabled,
  className,
  children,
  onClick,
  ...props
}: MenuItemProps) {
  const { setOpen } = useMenuContext();

  return (
    <button
      type="button"
      role="menuitem"
      data-slot="menu-item"
      disabled={disabled}
      className={cn(
        "flex w-full items-center gap-2 px-3 py-2 text-start text-sm text-[var(--felicityui-color-fg-default)]",
        "transition-colors hover:bg-[var(--felicityui-color-muted)] motion-reduce:transition-none",
        "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--felicityui-color-focus-ring)]",
        "disabled:cursor-not-allowed disabled:opacity-[var(--felicityui-opacity-disabled)]",
        inset && "ps-6",
        className,
      )}
      onClick={(event) => {
        onClick?.(event);
        if (!event.defaultPrevented) setOpen(false);
      }}
      {...props}
    >
      {children}
    </button>
  );
}

1e:T477,

import { Button } from "@/components/ui/button"

<Button>Button</Button>

Menu

Installation

Usage

API Reference

Accessibility

Platform notes

React

Related