@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
58 lines • 2 kB
TypeScript
import React from "react";
type HeadingProps = {
variant: "h1-display" | "h1" | "h2" | "h3" | "h3-title";
asChild: true;
as?: never;
} | {
variant: "h1-display" | "h1" | "h2" | "h3" | "h3-title";
as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "div" | "label" | "p";
asChild?: never;
};
interface ParagraphProps {
variant?: "body" | "body-title" | "body-small" | "body-small-title" | "technical" | "technical-title" | "caption" | "caption-title";
}
export type TextProps = {
children: React.ReactNode;
/**
* The font-size of the component. By default it's `fluid` which means it's smaller on mobile and larger on desktop.
*
* But you can lock it to either the min or the max size.
*
* @default "fluid"
*/
size?: "min" | "max" | "fluid";
/**
* Change the default rendered element for the one passed as a child, merging their props and behavior.
*
* @default false
*/
asChild?: boolean;
/**
* Convienence prop to change the rendered element.
*
* Use {@link TextProps.asChild} if you need more control of the rendered element.
*/
as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "div" | "label" | "p";
/**
* 🚧 Experimental spacing
*/
_unstableSpacing?: boolean;
} & (HeadingProps | ParagraphProps) & React.HTMLAttributes<HTMLParagraphElement | HTMLHeadingElement>;
/**
* Text component
*
* If the variant is `h1-display`, `h1`, `h2`, `h3`, or `h3-title` the `as` or `asChild` prop is required.
*
* This is to force the consumer to consider which semantic html element to use. E.g. `<h1>` or `<h2>`
*
* @example
* ```tsx
* <Text variant="h1-display" as="h1">Hello world</Text>
* <Text variant="body">
* This is a body text
* </Text>
* ```
*/
export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLParagraphElement | HTMLHeadingElement>>;
export {};
//# sourceMappingURL=text.d.ts.map