"use client"; import { AnimatePresence, motion, useReducedMotion } from "framer-motion"; import { ArrowRight, CornerDownLeft, FileText, LayoutDashboard, Plus, Search, Settings, UserPlus, } from "lucide-react"; import { type ReactNode, useMemo, useState } from "react"; import { twMerge } from "tailwind-merge"; import { directionalVariants, liftVariants, spring, staggerContainer, withReducedMotion, } from "@/lib/motion-tokens"; import { surfaceClasses } from "@/lib/surface-classes"; import { SurfaceProvider } from "@/lib/surface-context"; import { Elevated } from "@/components/matos-ui/elevated"; // The palette panel animates its entrance *and* sits on the elevation ladder, // so it has to be a motion element and an `Elevated` at once — wrapping one in // the other would add a layout box. Same reason for the moving highlight below. const MotionElevated = motion.create(Elevated); type Command = { id: string; label: string; hint: string; icon: ReactNode; group: "Actions" | "Go to"; }; const COMMANDS: Command[] = [ { id: "new-project", label: "Create project", hint: "P", icon: , group: "Actions", }, { id: "invite", label: "Invite teammate", hint: "I", icon: , group: "Actions", }, { id: "new-doc", label: "New document", hint: "D", icon: , group: "Actions", }, { id: "dashboard", label: "Dashboard", hint: "G D", icon: , group: "Go to", }, { id: "settings", label: "Settings", hint: "G S", icon: , group: "Go to", }, ]; /** * A command palette that spells out the Surfaces composition rule. * * The frame is the app background (level 1). The palette is an `Elevated` * `offset={4}` — the conventional dialog offset — so it resolves to surface-5 * over a dimmed scrim. The highlighted row is a second `Elevated`, `offset={1}` * *inside* the palette, so it lands at surface-6: a popover-weight surface * nested in a dialog-weight one, each reading its own substrate, in light and * dark. Hover and arrow keys slide that highlight between rows on the `fast` * tier (a shared `layoutId`, the same move `ui/motion-tabs` makes), the rows * stagger in fast on `liftVariants(2)` — a result list is a menu, not the * panel — and the panel itself enters with `directionalVariants("bottom")`. * * Under `prefers-reduced-motion` the panel crossfades, the rows crossfade in * place, and the highlight jumps rather than slides. */ export function CommandMenu01() { const reduce = !!useReducedMotion(); const [open, setOpen] = useState(true); const [query, setQuery] = useState(""); const [active, setActive] = useState(0); const results = useMemo(() => { const q = query.trim().toLowerCase(); return q ? COMMANDS.filter((command) => command.label.toLowerCase().includes(q)) : COMMANDS; }, [query]); const groups = useMemo(() => { const map = new Map(); for (const command of results) { const list = map.get(command.group) ?? []; list.push(command); map.set(command.group, list); } return [...map.entries()]; }, [results]); const clampedActive = Math.min(active, Math.max(0, results.length - 1)); const panelEnter = directionalVariants("bottom", spring.slow); function move(delta: number) { if (results.length === 0) return; setActive((current) => { const base = Math.min(current, results.length - 1); return (base + delta + results.length) % results.length; }); } return (

{/* A hint of the app underneath, so the scrim and the lift read. */}

); }

Command Menu

Installation

Matos UI components

Dependencies