60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:Tfc6,"use client" import * as React from "react" import { cn } from "./lib/utils" type KbdSize = "sm" | "default" /** How a named key shows and is read out, on an Apple keyboard and elsewhere. */ const named: Record = { mod: { mac: "⌘", other: "Ctrl", macName: "Command", otherName: "Control" }, cmd: { mac: "⌘", other: "⌘", macName: "Command", otherName: "Command" }, ctrl: { mac: "⌃", other: "Ctrl", macName: "Control", otherName: "Control" }, alt: { mac: "⌥", other: "Alt", macName: "Option", otherName: "Alt" }, shift: { mac: "⇧", other: "Shift", macName: "Shift", otherName: "Shift" }, enter: { mac: "↵", other: "Enter", macName: "Return", otherName: "Enter" }, esc: { mac: "Esc", other: "Esc", macName: "Escape", otherName: "Escape" }, tab: { mac: "⇥", other: "Tab", macName: "Tab", otherName: "Tab" }, backspace: { mac: "⌫", other: "⌫", macName: "Delete", otherName: "Backspace" }, space: { mac: "Space", other: "Space", macName: "Space", otherName: "Space" }, up: { mac: "↑", other: "↑", macName: "Up arrow", otherName: "Up arrow" }, down: { mac: "↓", other: "↓", macName: "Down arrow", otherName: "Down arrow" }, left: { mac: "←", other: "←", macName: "Left arrow", otherName: "Left arrow" }, right: { mac: "→", other: "→", macName: "Right arrow", otherName: "Right arrow" }, } const noSubscribe = () => () => {} /** Whether this is an Apple device; on the server (and for the first paint) it guesses yes, as most of the kit's readers are. */ function useAppleKeyboard() { return React.useSyncExternalStore( noSubscribe, () => /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent), () => true ) } /** A key as it shows and as it's read out. */ function describeKey(key: string, apple: boolean) { const entry = named[key.toLowerCase()] if (!entry) return { label: key.length === 1 ? key.toUpperCase() : key, name: key.length === 1 ? key.toUpperCase() : key } return { label: apple ? entry.mac : entry.other, name: apple ? entry.macName : entry.otherName } } /** The classes for one key cap. */ const kbdKeyClass = (size: KbdSize) => cn( "inline-flex min-w-5 items-center justify-center rounded border border-b-2 bg-muted px-1 font-sans font-medium text-muted-foreground", size === "sm" ? "h-5 text-[11px]" : "h-6 min-w-6 px-1.5 text-xs" ) type KbdProps = Omit, "children"> & { /** * The keys of a shortcut, e.g. ["mod", "K"]. "mod" is ⌘ on a Mac and Ctrl elsewhere; "shift", "alt", "ctrl", "enter", * "esc", "tab", "backspace", "space" and the arrows ("up"…) show as their symbols and are read out by name. */ keys?: string[] /** A single key, as text, when keys isn't given. */ children?: React.ReactNode size?: KbdSize } /** * A key, or a shortcut of several, as on a keyboard: shows ⌘ K on a Mac and Ctrl K * elsewhere, and screen readers hear "Command K". Inside a button or a menu it says what the keys do the same as. */ function Kbd({ keys, children, size = "default", className, ...props }: KbdProps) { const apple = useAppleKeyboard() if (!keys) { return ( {children} ) } const described = keys.map((key) => describeKey(key, apple)) return ( // Nested kbd for a combination, as HTML has it; read out as words ("Command K"), not symbols. key.name).join(" ")} className={cn("inline-flex items-center gap-1", className)} {...props}> {described.map((key, i) => ( {key.label} ))} ) } // Building blocks for a Kbd of your own (the motion edition uses them). export { Kbd, describeKey, useAppleKeyboard, kbdKeyClass, type KbdProps, type KbdSize } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L60",null,{"namespace":"@dashral","registryDependencies":["https://dashral.com/r/utils.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"registry/dashral/kbd.tsx","content":"$62","type":"registry:file","target":"components/dashral/kbd.tsx"}],"className":"h-[70svh] min-h-80"}]]}]