@accelint/design-toolkit
Version:
An open-source component library to serve as part of the entire ecosystem of UX for Accelint.
57 lines (54 loc) • 1.9 kB
TypeScript
import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import { ContextValue } from 'react-aria-components';
import { ProviderProps } from '../../lib/types.js';
import { HotkeyProps, HotkeySetProps } from './types.js';
import 'tailwind-variants';
import './styles.js';
declare const HotkeyContext: react.Context<ContextValue<HotkeyProps, HTMLElement>>;
declare function HotkeyProvider({ children, ...props }: ProviderProps<HotkeyProps>): react_jsx_runtime.JSX.Element;
declare namespace HotkeyProvider {
var displayName: string;
}
/**
* Hotkey - A visual representation of keyboard shortcuts and key combinations
*
* Displays keyboard keys and shortcuts in a consistent, accessible format.
* Perfect for documentation, help systems, or UI elements that need to show
* keyboard shortcuts. Supports multiple visual styles including outlined keys,
* flat presentation, and icon-specific formatting.
*
* @example
* // Basic hotkey display
* <Hotkey>Ctrl</Hotkey>
*
* @example
* // Hotkey combination with different variants
* <Hotkey.Set>
* <Hotkey variant="outline">Cmd</Hotkey>
* <span>+</span>
* <Hotkey variant="outline">K</Hotkey>
* </Hotkey.Set>
*
* @example
* // Flat style for inline text
* <p>Press <Hotkey variant="flat">Enter</Hotkey> to submit</p>
*
* @example
* // Icon variant for special keys
* <Hotkey.Set>
* <Hotkey variant="icon">⌘</Hotkey>
* <Hotkey>Space</Hotkey>
* </Hotkey.Set>
*/
declare function Hotkey({ ref, children, ...props }: HotkeyProps): react_jsx_runtime.JSX.Element;
declare namespace Hotkey {
var displayName: string;
var Set: typeof HotkeySet;
var Provider: typeof HotkeyProvider;
}
declare function HotkeySet({ children, ...props }: HotkeySetProps): react_jsx_runtime.JSX.Element;
declare namespace HotkeySet {
var displayName: string;
}
export { Hotkey, HotkeyContext };