@nex-ui/hooks/dist/esm/useFocusRing.mjs

A collection of React Hooks for Nex UI components.

"use client";
import { useFocusRing as useFocusRing$1 } from '@react-aria/focus';

/**
 * Provides a hook to manage and determine focus ring visibility for accessibility.
 *
 * This hook wraps `@react-aria/focus`'s `useFocusRing` and returns focus state and props
 * to apply to a container element for accessible focus styling.
 *
 * @param props - Configuration options for focus ring behavior.
 * @returns An object containing focus state and props for the focus ring.
 *
 * @example
 * ```tsx
 * const { focusProps, focused, focusVisible } = useFocusRing({ within: true });
 * return <div {...focusProps} className={focusVisible ? 'ring' : ''}>...</div>;
 * ```
 */ const useFocusRing = (props)=>{
    const { isFocusVisible, isFocused, focusProps } = useFocusRing$1(props);
    return {
        focusProps,
        focused: isFocused,
        focusVisible: isFocusVisible
    };
};

export { useFocusRing };