@spark-web/hidden
Version:
--- title: Hidden storybookPath: accessibility-hidden--default isExperimentalPackage: false ---
36 lines (35 loc) • 3.38 kB
TypeScript
import type { ResponsiveRangeProps } from '@spark-web/theme';
import type { DataAttributeMap } from '@spark-web/utils/internal';
import type { ReactNode } from 'react';
export declare type HiddenProps = {
/** Children elements to be conditionally rendered. */
children: ReactNode;
/** Sets data attributes for the element. */
data?: DataAttributeMap;
/** Sets whether element should be rendered in-line or on a new line. */
inline?: boolean;
/**
* Sets on what type of device element should be hidden.
*
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types
*/
on?: 'screen' | 'print';
} & ResponsiveRangeProps;
/** Conditionally display content for different screen sizes. */
export declare const Hidden: <Comp extends import("react").ElementType<any> = "div">(props: {
as?: Comp | undefined;
ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
/** Children elements to be conditionally rendered. */
children: ReactNode;
/** Sets data attributes for the element. */
data?: DataAttributeMap | undefined;
/** Sets whether element should be rendered in-line or on a new line. */
inline?: boolean | undefined;
/**
* Sets on what type of device element should be hidden.
*
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types
*/
on?: "screen" | "print" | undefined;
} & ResponsiveRangeProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;