51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T5754,"use client"; import * as React from "react"; import { motion, useReducedMotion, type Variants } from "motion/react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; type ButtonProps = React.ComponentProps; type ButtonClickEvent = Parameters>[0]; type ButtonKeyDownEvent = Parameters< NonNullable >[0]; export type FloatingShortcutTriggerProps = Omit< ButtonProps, | "aria-controls" | "aria-expanded" | "aria-haspopup" | "aria-label" | "children" | "ref" | "role" | "size" | "style" | "type" | "variant" >; export type FloatingShortcutButtonSize = "sm" | "md" | "lg"; export type FloatingShortcutMetrics = { triggerSize: number; openTriggerSize: number; actionSize: number; triggerIconSize: number; closeIconSize: number; actionIconSize: number; stackGap: number; triggerGap: number; rowGap: number; captionGap: number; }; export type FloatingShortcutMotion = { /** Total duration in milliseconds. Delay and stagger preserve their ratios. */ duration: number; /** Vertical travel used by action rows. */ distance: number; /** Scale applied while an action is pressed. */ pressScale: number; }; export type FloatingShortcutButtonClassNames = { root?: string; menu?: string; triggerSlot?: string; trigger?: string; triggerSurface?: string; triggerFace?: string; triggerIcon?: string; caption?: string; closeFace?: string; actionRow?: string; actionButton?: string; actionIcon?: string; actionLabel?: string; }; export const floatingShortcutSizePresets = { sm: { triggerSize: 48, openTriggerSize: 36, actionSize: 40, triggerIconSize: 18, closeIconSize: 24, actionIconSize: 18, stackGap: 6, triggerGap: 6, rowGap: 6, captionGap: 2, }, md: { triggerSize: 56, openTriggerSize: 40, actionSize: 48, triggerIconSize: 20, closeIconSize: 28, actionIconSize: 20, stackGap: 8, triggerGap: 8, rowGap: 8, captionGap: 2, }, lg: { triggerSize: 64, openTriggerSize: 44, actionSize: 56, triggerIconSize: 24, closeIconSize: 32, actionIconSize: 24, stackGap: 10, triggerGap: 10, rowGap: 10, captionGap: 3, }, } satisfies Record; export const floatingShortcutMotionDefault = { duration: 170, distance: 8, pressScale: 0.97, } satisfies FloatingShortcutMotion; const ICON_SWAP_DELAY_RATIO = 0.5; const ACTION_STAGGER_RATIO = 0.2; const PRESS_DURATION_RATIO = 130 / 170; function resolvePositive(value: number | undefined, fallback: number) { return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : fallback; } function resolveNonNegative(value: number | undefined, fallback: number) { return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : fallback; } function resolveMetrics( size: FloatingShortcutButtonSize, overrides?: Partial, ): FloatingShortcutMetrics { const preset = floatingShortcutSizePresets[size]; return { triggerSize: resolvePositive(overrides?.triggerSize, preset.triggerSize), openTriggerSize: resolvePositive( overrides?.openTriggerSize, preset.openTriggerSize, ), actionSize: resolvePositive(overrides?.actionSize, preset.actionSize), triggerIconSize: resolvePositive( overrides?.triggerIconSize, preset.triggerIconSize, ), closeIconSize: resolvePositive( overrides?.closeIconSize, preset.closeIconSize, ), actionIconSize: resolvePositive( overrides?.actionIconSize, preset.actionIconSize, ), stackGap: resolveNonNegative(overrides?.stackGap, preset.stackGap), triggerGap: resolveNonNegative(overrides?.triggerGap, preset.triggerGap), rowGap: resolveNonNegative(overrides?.rowGap, preset.rowGap), captionGap: resolveNonNegative(overrides?.captionGap, preset.captionGap), }; } function resolveMotion( overrides?: Partial, ): FloatingShortcutMotion { return { duration: resolvePositive( overrides?.duration, floatingShortcutMotionDefault.duration, ), distance: resolveNonNegative( overrides?.distance, floatingShortcutMotionDefault.distance, ), pressScale: resolvePositive( overrides?.pressScale, floatingShortcutMotionDefault.pressScale, ), }; } function createActionItemVariants( motionConfig: FloatingShortcutMotion, reduceMotion: boolean, ) { const duration = motionConfig.duration / 1000; return { open: { opacity: 1, y: 0, transition: { duration, ease: "easeOut" }, }, closed: { opacity: 0, y: reduceMotion ? 0 : motionConfig.distance, transition: { duration, ease: "easeOut" }, }, } satisfies Variants; } function createActionListVariants(duration: number) { return { open: { transition: { staggerChildren: (duration * ACTION_STAGGER_RATIO) / 1000, staggerDirection: -1, }, }, closed: { transition: { staggerChildren: 0 }, }, } satisfies Variants; } const fallbackActionItemVariants = createActionItemVariants( floatingShortcutMotionDefault, false, ); type FloatingShortcutContextValue = { close: () => void; closeOnAction: boolean; metrics: FloatingShortcutMetrics; motion: FloatingShortcutMotion; actionItemVariants: Variants; classNames?: FloatingShortcutButtonClassNames; }; const FloatingShortcutContext = React.createContext< FloatingShortcutContextValue | undefined >(undefined); function ShortcutGridIcon() { return ( ); } function ShortcutCloseIcon() { return ( ); } export type FloatingShortcutButtonProps = Omit< React.ComponentProps<"div">, "onChange" > & { /** FloatingShortcutAction elements revealed above the trigger. */ children: React.ReactNode; /** Controlled open state. */ open?: boolean; /** Initial open state for uncontrolled usage. */ defaultOpen?: boolean; /** Called after the menu requests an open-state change. */ onOpenChange?: (open: boolean) => void; /** Icon shown while the shortcut menu is closed. */ triggerIcon?: React.ReactNode; /** Short caption shown under the trigger icon. Set to null to hide it. */ triggerCaption?: React.ReactNode; /** Accessible name for the closed trigger. */ triggerLabel?: string; /** Accessible name for the open trigger. */ closeLabel?: string; /** Coordinated geometry preset. @default "md" */ size?: FloatingShortcutButtonSize; /** Advanced geometry overrides. Invalid values fall back to the size preset. */ metrics?: Partial; /** Motion overrides. Related delay and stagger values keep their ratios. */ motion?: Partial; /** Classes for styling individual component slots. */ classNames?: FloatingShortcutButtonClassNames; /** Props forwarded to the trigger button. */ triggerProps?: FloatingShortcutTriggerProps; /** Close the menu after an action runs. @default true */ closeOnAction?: boolean; }; export type FloatingShortcutActionProps = Omit< ButtonProps, | "aria-label" | "children" | "role" | "size" | "style" | "type" | "variant" > & { /** Visible action label and accessible name. */ label: string; /** Icon rendered inside the circular action button. */ icon: React.ReactNode; /** Classes applied to the label-and-button row. */ rowClassName?: string; /** Classes applied to this action's icon wrapper. */ iconClassName?: string; /** Classes applied to this action's visible label. */ labelClassName?: string; /** Inline styles that do not replace geometry controlled by metrics. */ style?: React.CSSProperties; }; export function FloatingShortcutButton({ children, open: openProp, defaultOpen = false, onOpenChange, triggerIcon, triggerCaption = "Quick", triggerLabel, closeLabel = "Close shortcuts", size = "md", metrics: metricsOverrides, motion: motionOverrides, classNames, triggerProps, closeOnAction = true, className, style, onKeyDown, ref, ...props }: FloatingShortcutButtonProps) { const [internalOpen, setInternalOpen] = React.useState(defaultOpen); const triggerRef = React.useRef(null); const rootRef = React.useRef(null); const pendingFocusRef = React.useRef<"first" | "last" | null>(null); const menuId = React.useId(); const shouldReduceMotion = useReducedMotion() ?? false; const resolvedMetrics = React.useMemo( () => resolveMetrics(size, metricsOverrides), [metricsOverrides, size], ); const resolvedMotion = React.useMemo( () => resolveMotion(motionOverrides), [motionOverrides], ); const actionListVariants = React.useMemo( () => createActionListVariants(resolvedMotion.duration), [resolvedMotion.duration], ); const actionItemVariants = React.useMemo( () => createActionItemVariants(resolvedMotion, shouldReduceMotion), [resolvedMotion, shouldReduceMotion], ); const iconDelay = resolvedMotion.duration * ICON_SWAP_DELAY_RATIO; const openScale = resolvedMetrics.openTriggerSize / resolvedMetrics.triggerSize; const controlled = openProp !== undefined; const open = controlled ? openProp : internalOpen; const resolvedTriggerLabel = triggerLabel ?? (typeof triggerCaption === "string" ? triggerCaption : "Open shortcuts"); const { className: triggerClassName, disabled: triggerDisabled, onClick: onTriggerClick, onKeyDown: onTriggerKeyDown, ...restTriggerProps } = triggerProps ?? {}; const setOpen = React.useCallback( (nextOpen: boolean) => { if (!controlled) { setInternalOpen(nextOpen); } onOpenChange?.(nextOpen); }, [controlled, onOpenChange], ); // The root node is needed internally (menu-item queries, outside-click) *and* // by consumers, so the consumer's ref is merged in rather than overwritten. const setRootRef = React.useCallback( (node: HTMLDivElement | null) => { rootRef.current = node; if (typeof ref === "function") { ref(node); } else if (ref) { ref.current = node; } }, [ref], ); const getEnabledItems = React.useCallback( () => Array.from( rootRef.current?.querySelectorAll( "[role='menuitem']:not(:disabled)", ) ?? [], ), [], ); const close = React.useCallback(() => { setOpen(false); triggerRef.current?.focus(); }, [setOpen]); React.useEffect(() => { if (!open) return; // The ARIA menu-button pattern dismisses on outside interaction. Focus is // intentionally left where the user clicked (unlike Escape, which returns // it to the trigger). const handlePointerDown = (event: PointerEvent) => { const root = rootRef.current; if (!root || !(event.target instanceof Node)) return; if (root.contains(event.target)) return; setOpen(false); }; document.addEventListener("pointerdown", handlePointerDown); return () => document.removeEventListener("pointerdown", handlePointerDown); }, [open, setOpen]); React.useEffect(() => { if (!open || !pendingFocusRef.current) return; const items = getEnabledItems(); const pendingFocus = pendingFocusRef.current; pendingFocusRef.current = null; const item = pendingFocus === "first" ? items[0] : items.at(-1); item?.focus(); }, [getEnabledItems, open]); const handleTriggerClick = (event: ButtonClickEvent) => { onTriggerClick?.(event); if (event.defaultPrevented || triggerDisabled) return; setOpen(!open); }; const handleTriggerKeyDown = (event: ButtonKeyDownEvent) => { onTriggerKeyDown?.(event); if (event.defaultPrevented || triggerDisabled) return; if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return; event.preventDefault(); pendingFocusRef.current = event.key === "ArrowDown" ? "first" : "last"; if (open) { const items = getEnabledItems(); const item = event.key === "ArrowDown" ? items[0] : items.at(-1); pendingFocusRef.current = null; item?.focus(); return; } setOpen(true); }; const handleKeyDown = (event: React.KeyboardEvent) => { onKeyDown?.(event); if (event.defaultPrevented || !open) return; if (event.key === "Escape") { event.preventDefault(); close(); return; } const items = getEnabledItems(); const activeIndex = items.indexOf(document.activeElement as HTMLButtonElement); if (activeIndex === -1) return; let nextIndex: number | undefined; if (event.key === "ArrowDown") { nextIndex = (activeIndex + 1) % items.length; } else if (event.key === "ArrowUp") { nextIndex = (activeIndex - 1 + items.length) % items.length; } else if (event.key === "Home") { nextIndex = 0; } else if (event.key === "End") { nextIndex = items.length - 1; } if (nextIndex !== undefined) { event.preventDefault(); items[nextIndex]?.focus(); } }; return (

); } export function FloatingShortcutAction({ label, icon, rowClassName, iconClassName, labelClassName, className, style, onClick, ...props }: FloatingShortcutActionProps) { const context = React.useContext(FloatingShortcutContext); const metrics = context?.metrics ?? floatingShortcutSizePresets.md; const motionConfig = context?.motion ?? floatingShortcutMotionDefault; const actionOffset = (metrics.triggerSize - metrics.actionSize) / 2; const pressDuration = motionConfig.duration * PRESS_DURATION_RATIO; const resolvedStyle: React.CSSProperties & { "--floating-shortcut-press-scale": number; } = { ...style, width: metrics.actionSize, height: metrics.actionSize, marginInlineEnd: actionOffset, transitionDuration: `${pressDuration}ms`, "--floating-shortcut-press-scale": motionConfig.pressScale, }; const handleClick = (event: ButtonClickEvent) => { onClick?.(event); if (!event.defaultPrevented && context?.closeOnAction) { context?.close(); } }; return ( {label} ); } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"registryDependencies":["button"]}]]}],["$","$L52",null,{"sourceUrl":"https://ui.ericts.com/r/floating-shortcut-button.json","proxyUrl":"https://shadcnregistry.com/r/ericts/floating-shortcut-button","itemId":"@ericts/floating-shortcut-button"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/base/ui/floating-shortcut-button.tsx","content":"$54","type":"registry:ui","target":"components/ui/floating-shortcut-button.tsx"}]}]]}],"$L55"]}]

Floating Shortcut Button

Installation

Files

components

Styles