"use client"; import * as React from "react"; import { Tooltip as TooltipPrimitive } from "radix-ui"; import { motion } from "motion/react"; import { cn, useControllableState } from "@kineticui/core"; export type CommandBarItem = | { type?: "tool"; id: string; label: string; icon: React.ReactNode; shortcut?: string; onSelect?: () => void; disabled?: boolean } | { type: "separator"; id: string }; export type CommandBarProps = { items: CommandBarItem[]; /** Tools with a persistent selection (like Figma's toolbar). */ value?: string; defaultValue?: string; onValueChange?: (id: string) => void; /** Pin to the bottom centre of the viewport. */ fixed?: boolean; /** Bind single-key shortcuts (V, R, T…) to select tools. */ hotkeys?: boolean; className?: string; }; /** Floating tool dock: a sliding active indicator, tooltips with shortcuts and single-key tool switching. */ export function CommandBar({ items, value, defaultValue, onValueChange, fixed, hotkeys = true, className }: CommandBarProps) { const tools = items.filter((i): i is Extract => i.type !== "separator"); const [current, setCurrent] = useControllableState({ value, defaultValue: defaultValue ?? tools[0]?.id ?? "", onChange: onValueChange }); const id = React.useId(); React.useEffect(() => { if (!hotkeys) return; const onKey = (e: KeyboardEvent) => { if (e.metaKey || e.ctrlKey || e.altKey || /^(INPUT|TEXTAREA|SELECT)$/.test((e.target as HTMLElement).tagName) || (e.target as HTMLElement).isContentEditable) return; const t = tools.find((x) => x.shortcut?.toLowerCase() === e.key.toLowerCase() && !x.disabled); if (t) { setCurrent(t.id); t.onSelect?.(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [hotkeys, tools, setCurrent]); return ( ); }

Command Bar

Installation

Exports