@visa/nova-react
Version:
Visa Product Design System Nova React library. Compatible with React ^19.
59 lines (58 loc) • 3.69 kB
TypeScript
import { type ComponentPropsWithRef, type ElementType } from 'react';
export type BreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'desktop' | 'mobile';
export type DefaultPositions = 'center' | 'end' | 'start';
export type VPoint = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48;
export type VSpacing = VPoint | 'auto' | 'inherit';
export type UtilityFragmentProperties<ET extends ElementType = 'div'> = {
vAlignContent?: DefaultPositions | 'around' | 'between' | 'evenly';
vAlignItems?: DefaultPositions | 'baseline' | 'stretch';
vAlignSelf?: DefaultPositions | 'auto' | 'stretch';
vColGap?: VPoint;
vContainerHide?: BreakPoints;
vElevation?: 'inset' | 'large' | 'medium' | 'none' | 'small' | 'xlarge' | 'xxlarge' | 'xsmall';
vFlex?: boolean;
vFlexCol?: boolean;
vFlexColReverse?: boolean;
vFlexGrow?: boolean;
vFlexGrow0?: boolean;
vFlexInline?: boolean;
vFlexNoWrap?: boolean;
vFlexRow?: boolean;
vFlexRowReverse?: boolean;
vFlexShrink?: boolean;
vFlexShrink0?: boolean;
vFlexWrap?: boolean;
vFlexWrapReverse?: boolean;
vGap?: Omit<VSpacing, 'auto'> | 'normal';
vHide?: boolean;
vJustifyContent?: DefaultPositions | 'around' | 'between' | 'evenly';
vMargin?: VSpacing;
vMarginBottom?: VSpacing;
vMarginHorizontal?: VSpacing;
vMarginLeft?: VSpacing;
vMarginRight?: VSpacing;
vMarginTop?: VSpacing;
vMarginVertical?: VSpacing;
vMediaHide?: BreakPoints;
vPadding?: VSpacing;
vPaddingBottom?: VSpacing;
vPaddingHorizontal?: VSpacing;
vPaddingLeft?: VSpacing;
vPaddingRight?: VSpacing;
vPaddingTop?: VSpacing;
vPaddingVertical?: VSpacing;
vRowGap?: VPoint;
} & ComponentPropsWithRef<ET>;
/**
* Wraps around a component and add Nova utility classes to its direct child without adding extra elements to the DOM.
* @docs {@link https://design.visa.com/base-elements/responsive-grid-system/breakpoints/?code_library=react | See Docs}
* @vgar TODO
* @wcag TODO
*/
declare const UtilityFragment: {
<ET extends ElementType = "div">({ children, className, vAlignContent, vAlignItems, vAlignSelf, vColGap, vContainerHide, vElevation, vFlex, vFlexCol, vFlexColReverse, vFlexGrow, vFlexGrow0, vFlexInline, vFlexNoWrap, vFlexRow, vFlexRowReverse, vFlexShrink, vFlexShrink0, vFlexWrap, vFlexWrapReverse, vGap, vHide, vJustifyContent, vMargin, vMarginBottom, vMarginHorizontal, vMarginLeft, vMarginRight, vMarginTop, vMarginVertical, vMediaHide, vPadding, vPaddingBottom, vPaddingHorizontal, vPaddingLeft, vPaddingRight, vPaddingTop, vPaddingVertical, vRowGap, ...remainingProps }: UtilityFragmentProperties<ET>): import("react").DetailedReactHTMLElement<{
className: string | undefined;
} & Omit<UtilityFragmentProperties<ET>, "className" | "children" | "vAlignContent" | "vAlignItems" | "vAlignSelf" | "vColGap" | "vContainerHide" | "vElevation" | "vFlex" | "vFlexCol" | "vFlexColReverse" | "vFlexGrow" | "vFlexGrow0" | "vFlexInline" | "vFlexNoWrap" | "vFlexRow" | "vFlexRowReverse" | "vFlexShrink" | "vFlexShrink0" | "vFlexWrap" | "vFlexWrapReverse" | "vGap" | "vHide" | "vJustifyContent" | "vMargin" | "vMarginBottom" | "vMarginHorizontal" | "vMarginLeft" | "vMarginRight" | "vMarginTop" | "vMarginVertical" | "vMediaHide" | "vPadding" | "vPaddingBottom" | "vPaddingHorizontal" | "vPaddingLeft" | "vPaddingRight" | "vPaddingTop" | "vPaddingVertical" | "vRowGap">, HTMLElement>;
displayName: string;
};
export default UtilityFragment;