@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
50 lines • 1.52 kB
TypeScript
import * as React from "react";
/**
* Represents the focus handlers returned by {@link useFocusVisible}.
*
* @remarks
* Spread these handlers onto the interactive element that should respond to keyboard
* focus visibility. They coordinate transient focus styling without owning rendering.
*/
interface FocusVisibleProps {
/**
* Called when the target receives focus.
*/
onFocus: (event: React.FocusEvent) => void;
/**
* Called when the target loses focus.
*/
onBlur: () => void;
}
/**
* Detects whether the current focus originated from keyboard navigation.
*
* @remarks
* Tracks global keyboard and pointer input so consumers can render focus rings only when
* users are tabbing through the interface. This mirrors the intent of `:focus-visible`
* while remaining available to JavaScript-driven components and custom states.
*
* @returns An object containing the current focus-visible state and focus handlers to spread on the target element.
*
* @example
* ```tsx
* const {isFocusVisible, focusProps} = useFocusVisible();
*
* return (
* <button
* type="button"
* {...focusProps}
* className={isFocusVisible ? "ring" : undefined}>
* Click
* </button>
* );
* ```
*
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible | MDN :focus-visible}
*/
export declare function useFocusVisible(): {
isFocusVisible: boolean;
focusProps: FocusVisibleProps;
};
export {};
//# sourceMappingURL=useFocusVisible.d.ts.map