import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { cssUtils } from "../cssUtils.js";
/**
 * **Server Component**
 *
 * @example Simple Example
 * ```tsx
 * import { SrOnly } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <>
 *       <SrOnly>
 *         I am only visible to screen readers.
 *       </SrOnly>
 *       <SrOnly focusable>
 *         I am only visible to screen readers but can be focused.
 *       </SrOnly>
 *     </>
 *   );
 * }
 * ```
 */ export const SrOnly = /*#__PURE__*/ forwardRef(function SrOnly(props, ref) {
    const { as: AsComponent = "span", className, phoneOnly, focusable, children, tabIndex, ...remaining } = props;
    // do some type-casting so ref works
    const Component = AsComponent;
    return /*#__PURE__*/ _jsx(Component, {
        ...remaining,
        ref: ref,
        tabIndex: tabIndex ?? (focusable ? 0 : undefined),
        className: cssUtils({
            srOnly: focusable ? "focusable" : phoneOnly ? "phone" : true,
            className
        }),
        children: children
    });
});

//# sourceMappingURL=SrOnly.js.map