mistui-kit
Version:
**👉 [Try MistUi Live](https://gilded-tanuki-0eb52b.netlify.app/) — interactive playground & docs**
44 lines (43 loc) • 1.86 kB
TypeScript
import { ClassValue } from 'clsx';
import { fontFamilyVariants } from '../theme/default';
import type { ElementType, ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
import { Variants } from '../theme/default';
export type BaseTypographyProps = {
children: React.ReactNode;
variant?: `h1` | `h2` | `h3` | `h4` | `h5` | `h6` | `subtitle1` | `subtitle2` | `body1` | `body2` | `caption` | `overline` | `button`;
className?: React.HTMLAttributes<HTMLElement>['className'] | ClassValue;
style?: React.CSSProperties;
fontStyle?: 'normal' | 'italic';
fontFamily?: keyof typeof fontFamilyVariants;
fontSize?: string | number;
shadow?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
colorShadow?: Variants | (string & {});
tracking?: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
color?: Variants | (string & {});
};
type AsProp<T extends ElementType> = {
as?: T;
};
type PropsToOmit<T extends ElementType, P> = keyof (AsProp<T> & P);
export type PolymorphicComponentProps<T extends ElementType, Props = {}> = Props & AsProp<T> & Omit<ComponentPropsWithoutRef<T>, PropsToOmit<T, Props>>;
export type PolymorphicRef<T extends ElementType> = ComponentPropsWithRef<T>['ref'];
export type TypographyComponent = <T extends React.ElementType = 'p'>(props: PolymorphicComponentProps<T, BaseTypographyProps> & {
ref?: PolymorphicRef<T>;
}) => React.ReactNode;
export type LinkProps = BaseTypographyProps & {
children?: string;
href?: string;
size?: 'auto' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
isHover?: boolean;
navigate?: (href: string) => void;
};
export type MarqueeTextProps = LinkProps & {
/** px second */
pxPerSecond?: number;
copies?: number;
pauseOnHover?: boolean;
gap?: number;
direction?: 'left' | 'right';
children: React.ReactNode;
};
export {};