diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index 7106d5eedb..3878443bcd 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -10,7 +10,34 @@ import { JSXElementConstructor } from 'react'; import { default as React_2 } from 'react'; import { ReactElement } from 'react'; import { ReactNode } from 'react'; -import { ResponsiveArray } from '@vanilla-extract/sprinkles'; + +// @public (undocumented) +export type AlignItems = + | 'stretch' + | 'flex-start' + | 'center' + | 'flex-end' + | Partial< + Record + >; + +// @public (undocumented) +export type Background = + | 'background' + | 'elevation1' + | 'elevation2' + | 'transparent' + | Partial< + Record + >; + +// @public (undocumented) +export type BorderRadius = + | 'none' + | 'small' + | 'medium' + | 'full' + | Partial>; // @public (undocumented) export const Box: (props: BoxProps) => ReactElement< @@ -21,1450 +48,85 @@ export const Box: (props: BoxProps) => ReactElement< string | JSXElementConstructor >; -// @public -export type BoxProps = Parameters[0] & - Omit< - React.AllHTMLAttributes, - keyof Parameters[0] - > & { - as?: keyof JSX.IntrinsicElements; - }; +// @public (undocumented) +export interface BoxProps { + // (undocumented) + alignItems?: AlignItems; + // (undocumented) + as?: keyof JSX.IntrinsicElements; + // (undocumented) + background?: Background; + // (undocumented) + borderRadius?: BorderRadius; + // (undocumented) + children?: React.ReactNode; + // (undocumented) + className?: string; + // (undocumented) + color?: Color; + // (undocumented) + display?: Display; + // (undocumented) + flexDirection?: FlexDirection; + // (undocumented) + flexWrap?: FlexWrap; + // (undocumented) + gap?: Gap; + // (undocumented) + justifyContent?: JustifyContent; + // (undocumented) + margin?: Margin; + // (undocumented) + marginBottom?: MarginBottom; + // (undocumented) + marginLeft?: MarginLeft; + // (undocumented) + marginRight?: MarginRight; + // (undocumented) + marginTop?: MarginTop; + // (undocumented) + marginX?: MarginX; + // (undocumented) + marginY?: MarginY; + // (undocumented) + padding?: Padding; + // (undocumented) + paddingBottom?: PaddingBottom; + // (undocumented) + paddingLeft?: PaddingLeft; + // (undocumented) + paddingRight?: PaddingRight; + // (undocumented) + paddingTop?: PaddingTop; + // (undocumented) + paddingX?: PaddingX; + // (undocumented) + paddingY?: PaddingY; + // (undocumented) + style?: React.CSSProperties; +} // @public (undocumented) -export const boxSprinkles: (( - props: { - flexDirection?: - | ( - | 'column' - | 'row' - | { - xs?: 'column' | 'row' | undefined; - sm?: 'column' | 'row' | undefined; - md?: 'column' | 'row' | undefined; - lg?: 'column' | 'row' | undefined; - xl?: 'column' | 'row' | undefined; - '2xl'?: 'column' | 'row' | undefined; - } - | undefined - ) - | ResponsiveArray<2 | 1 | 3 | 4 | 5 | 6, 'column' | 'row' | null>; - justifyContent?: - | ( - | 'center' - | 'space-around' - | 'space-between' - | 'stretch' - | 'flex-end' - | 'flex-start' - | { - xs?: - | 'center' - | 'space-around' - | 'space-between' - | 'stretch' - | 'flex-end' - | 'flex-start' - | undefined; - sm?: - | 'center' - | 'space-around' - | 'space-between' - | 'stretch' - | 'flex-end' - | 'flex-start' - | undefined; - md?: - | 'center' - | 'space-around' - | 'space-between' - | 'stretch' - | 'flex-end' - | 'flex-start' - | undefined; - lg?: - | 'center' - | 'space-around' - | 'space-between' - | 'stretch' - | 'flex-end' - | 'flex-start' - | undefined; - xl?: - | 'center' - | 'space-around' - | 'space-between' - | 'stretch' - | 'flex-end' - | 'flex-start' - | undefined; - '2xl'?: - | 'center' - | 'space-around' - | 'space-between' - | 'stretch' - | 'flex-end' - | 'flex-start' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - | 'center' - | 'space-around' - | 'space-between' - | 'stretch' - | 'flex-end' - | 'flex-start' - | null - >; - alignItems?: - | ( - | 'center' - | 'stretch' - | 'flex-end' - | 'flex-start' - | { - xs?: 'center' | 'stretch' | 'flex-end' | 'flex-start' | undefined; - sm?: 'center' | 'stretch' | 'flex-end' | 'flex-start' | undefined; - md?: 'center' | 'stretch' | 'flex-end' | 'flex-start' | undefined; - lg?: 'center' | 'stretch' | 'flex-end' | 'flex-start' | undefined; - xl?: 'center' | 'stretch' | 'flex-end' | 'flex-start' | undefined; - '2xl'?: - | 'center' - | 'stretch' - | 'flex-end' - | 'flex-start' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'center' | 'stretch' | 'flex-end' | 'flex-start' | null - >; - borderRadius?: - | ( - | 'small' - | 'none' - | 'medium' - | 'full' - | { - xs?: 'small' | 'none' | 'medium' | 'full' | undefined; - sm?: 'small' | 'none' | 'medium' | 'full' | undefined; - md?: 'small' | 'none' | 'medium' | 'full' | undefined; - lg?: 'small' | 'none' | 'medium' | 'full' | undefined; - xl?: 'small' | 'none' | 'medium' | 'full' | undefined; - '2xl'?: 'small' | 'none' | 'medium' | 'full' | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'small' | 'none' | 'medium' | 'full' | null - >; - boxShadow?: - | ( - | 'small' - | 'medium' - | 'large' - | { - xs?: 'small' | 'medium' | 'large' | undefined; - sm?: 'small' | 'medium' | 'large' | undefined; - md?: 'small' | 'medium' | 'large' | undefined; - lg?: 'small' | 'medium' | 'large' | undefined; - xl?: 'small' | 'medium' | 'large' | undefined; - '2xl'?: 'small' | 'medium' | 'large' | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'small' | 'medium' | 'large' | null - >; - border?: - | ( - | 'none' - | 'error' - | 'thin' - | { - xs?: 'none' | 'error' | 'thin' | undefined; - sm?: 'none' | 'error' | 'thin' | undefined; - md?: 'none' | 'error' | 'thin' | undefined; - lg?: 'none' | 'error' | 'thin' | undefined; - xl?: 'none' | 'error' | 'thin' | undefined; - '2xl'?: 'none' | 'error' | 'thin' | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'error' | 'thin' | null - >; - display?: - | ( - | 'flex' - | 'inline' - | 'none' - | 'block' - | { - xs?: 'flex' | 'inline' | 'none' | 'block' | undefined; - sm?: 'flex' | 'inline' | 'none' | 'block' | undefined; - md?: 'flex' | 'inline' | 'none' | 'block' | undefined; - lg?: 'flex' | 'inline' | 'none' | 'block' | undefined; - xl?: 'flex' | 'inline' | 'none' | 'block' | undefined; - '2xl'?: 'flex' | 'inline' | 'none' | 'block' | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'flex' | 'inline' | 'none' | 'block' | null - >; - paddingTop?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - paddingBottom?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - paddingLeft?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - paddingRight?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - marginTop?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - marginBottom?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - marginLeft?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - marginRight?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - gap?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - flexWrap?: - | ( - | 'nowrap' - | 'wrap' - | { - xs?: 'nowrap' | 'wrap' | undefined; - sm?: 'nowrap' | 'wrap' | undefined; - md?: 'nowrap' | 'wrap' | undefined; - lg?: 'nowrap' | 'wrap' | undefined; - xl?: 'nowrap' | 'wrap' | undefined; - '2xl'?: 'nowrap' | 'wrap' | undefined; - } - | undefined - ) - | ResponsiveArray<2 | 1 | 3 | 4 | 5 | 6, 'nowrap' | 'wrap' | null>; - padding?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - paddingX?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - paddingY?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - margin?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - marginX?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - marginY?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - } & { - color?: - | 'error' - | 'primary' - | 'secondary' - | { - light?: 'error' | 'primary' | 'secondary' | undefined; - dark?: 'error' | 'primary' | 'secondary' | undefined; - } - | undefined; - background?: - | 'transparent' - | 'background' - | 'elevation1' - | 'elevation2' - | { - light?: - | 'transparent' - | 'background' - | 'elevation1' - | 'elevation2' - | undefined; - dark?: - | 'transparent' - | 'background' - | 'elevation1' - | 'elevation2' - | undefined; - } - | undefined; - }, -) => string) & { - properties: Set< - | 'alignItems' - | 'background' - | 'border' - | 'borderRadius' - | 'boxShadow' - | 'color' - | 'display' - | 'flexDirection' - | 'flexWrap' - | 'gap' - | 'justifyContent' - | 'margin' - | 'marginBottom' - | 'marginLeft' - | 'marginRight' - | 'marginTop' - | 'padding' - | 'paddingBottom' - | 'paddingLeft' - | 'paddingRight' - | 'paddingTop' - | 'marginX' - | 'marginY' - | 'paddingX' - | 'paddingY' - >; +export type Breakpoint = keyof typeof breakpoints; + +// @public (undocumented) +export const breakpoints: { + xs: {}; + sm: { + '@media': string; + }; + md: { + '@media': string; + }; + lg: { + '@media': string; + }; + xl: { + '@media': string; + }; + '2xl': { + '@media': string; + }; }; // @public (undocumented) @@ -1494,6 +156,36 @@ export interface ButtonProps { variant?: 'primary' | 'secondary'; } +// @public (undocumented) +export type Color = + | 'primary' + | 'secondary' + | 'error' + | Partial>; + +// @public (undocumented) +export type Display = + | 'flex' + | 'none' + | 'inline' + | 'block' + | Partial>; + +// @public (undocumented) +export type FlexDirection = + | 'row' + | 'column' + | Partial>; + +// @public (undocumented) +export type FlexWrap = + | 'wrap' + | 'nowrap' + | Partial>; + +// @public (undocumented) +export type Gap = Space | Partial>; + // @public (undocumented) export const Icon: ({ name }: { name: IconNames }) => React_2.JSX.Element; @@ -1514,4 +206,94 @@ export const IconProvider: ({ children: ReactNode; overrides: Partial>; }) => React_2.JSX.Element; + +// @public (undocumented) +export type JustifyContent = + | 'stretch' + | 'flex-start' + | 'center' + | 'flex-end' + | 'space-around' + | 'space-between' + | Partial< + Record< + Breakpoint, + | 'stretch' + | 'flex-start' + | 'center' + | 'flex-end' + | 'space-around' + | 'space-between' + > + >; + +// @public (undocumented) +export type Margin = Space | Partial>; + +// @public (undocumented) +export type MarginBottom = Space | Partial>; + +// @public (undocumented) +export type MarginLeft = Space | Partial>; + +// @public (undocumented) +export type MarginRight = Space | Partial>; + +// @public (undocumented) +export type MarginTop = Space | Partial>; + +// @public (undocumented) +export type MarginX = Space | Partial>; + +// @public (undocumented) +export type MarginY = Space | Partial>; + +// @public (undocumented) +export type Padding = Space | Partial>; + +// @public (undocumented) +export type PaddingBottom = Space | Partial>; + +// @public (undocumented) +export type PaddingLeft = Space | Partial>; + +// @public (undocumented) +export type PaddingRight = Space | Partial>; + +// @public (undocumented) +export type PaddingTop = Space | Partial>; + +// @public (undocumented) +export type PaddingX = Space | Partial>; + +// @public (undocumented) +export type PaddingY = Space | Partial>; + +// @public (undocumented) +export type Space = keyof typeof space; + +// @public (undocumented) +export const space: { + none: number; + xxs: string; + xs: string; + sm: string; + md: string; + lg: string; + xl: string; + xxl: string; +}; + +// @public (undocumented) +export type Theme = keyof typeof themes; + +// @public (undocumented) +export const themes: { + light: { + selector: string; + }; + dark: { + selector: string; + }; +}; ``` diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx index d1cb289506..4febc5c0e0 100644 --- a/packages/canon/src/components/Box/Box.tsx +++ b/packages/canon/src/components/Box/Box.tsx @@ -17,19 +17,20 @@ import { createElement } from 'react'; import { boxSprinkles } from './sprinkles.css'; import { base } from './box.css'; +import { BoxProps } from './types'; -/** - * Properties for {@link Box} - * - * @public - */ -export type BoxProps = Parameters[0] & - Omit< - React.AllHTMLAttributes, - keyof Parameters[0] - > & { - as?: keyof JSX.IntrinsicElements; - }; +// /** +// * Properties for {@link Box} +// * +// * @public +// */ +// export type BoxProps = Parameters[0] & +// Omit< +// React.AllHTMLAttributes, +// keyof Parameters[0] +// > & { +// as?: keyof JSX.IntrinsicElements; +// }; /** @public */ export const Box = (props: BoxProps) => { diff --git a/packages/canon/src/components/Box/index.tsx b/packages/canon/src/components/Box/index.tsx index 589528cd1d..f275aa352c 100644 --- a/packages/canon/src/components/Box/index.tsx +++ b/packages/canon/src/components/Box/index.tsx @@ -14,5 +14,5 @@ * limitations under the License. */ export { Box } from './Box'; -export type { BoxProps } from './Box'; -export { boxSprinkles } from './sprinkles.css'; +export type * from './types'; +export { breakpoints, space, themes } from './properties'; diff --git a/packages/canon/src/components/Box/properties.ts b/packages/canon/src/components/Box/properties.ts index ccf6849976..37cb53666c 100644 --- a/packages/canon/src/components/Box/properties.ts +++ b/packages/canon/src/components/Box/properties.ts @@ -14,6 +14,7 @@ * limitations under the License. */ +/** @public */ export const breakpoints = { xs: {}, sm: { '@media': 'screen and (min-width: 640px)' }, @@ -23,6 +24,13 @@ export const breakpoints = { '2xl': { '@media': 'screen and (min-width: 1536px)' }, }; +/** @public */ +export const themes = { + light: { selector: '[data-theme="light"] &' }, + dark: { selector: '[data-theme="dark"] &' }, +}; + +/** @public */ export const space = { none: 0, xxs: 'var(--canon-space-xxs)', diff --git a/packages/canon/src/components/Box/sprinkles.css.ts b/packages/canon/src/components/Box/sprinkles.css.ts index 12a8118316..3d7086c296 100644 --- a/packages/canon/src/components/Box/sprinkles.css.ts +++ b/packages/canon/src/components/Box/sprinkles.css.ts @@ -21,8 +21,30 @@ import { ConditionalValue, createMapValueFn, } from '@vanilla-extract/sprinkles'; -import { breakpoints, space } from './properties'; +/** @public */ +export const breakpoints = { + xs: {}, + sm: { '@media': 'screen and (min-width: 640px)' }, + md: { '@media': 'screen and (min-width: 768px)' }, + lg: { '@media': 'screen and (min-width: 1024px)' }, + xl: { '@media': 'screen and (min-width: 1280px)' }, + '2xl': { '@media': 'screen and (min-width: 1536px)' }, +}; + +/** @public */ +export const space = { + none: 0, + xxs: 'var(--canon-space-xxs)', + xs: 'var(--canon-space-xs)', + sm: 'var(--canon-space-sm)', + md: 'var(--canon-space-md)', + lg: 'var(--canon-space-lg)', + xl: 'var(--canon-space-xl)', + xxl: 'var(--canon-space-xxl)', +}; + +/** @public */ export const responsiveProperties = defineProperties({ conditions: breakpoints, defaultCondition: 'xs', @@ -54,7 +76,7 @@ export const responsiveProperties = defineProperties({ thin: '1px solid var(--canon-outline)', error: '1px solid var(--canon-error)', }, - display: ['none', 'flex', 'block', 'inline'], + display: ['flex', 'none', 'inline', 'block'], paddingTop: space, paddingBottom: space, paddingLeft: space, @@ -76,6 +98,7 @@ export const responsiveProperties = defineProperties({ }, }); +/** @public */ export const colorProperties = defineProperties({ conditions: { light: { selector: '[data-theme="light"] &' }, diff --git a/packages/canon/src/components/Box/types.ts b/packages/canon/src/components/Box/types.ts new file mode 100644 index 0000000000..3f307bf2eb --- /dev/null +++ b/packages/canon/src/components/Box/types.ts @@ -0,0 +1,176 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { breakpoints, space, themes } from './properties'; + +/** @public */ +export type Breakpoint = keyof typeof breakpoints; + +/** @public */ +export type Space = keyof typeof space; + +/** @public */ +export type Theme = keyof typeof themes; + +/** @public */ +export type Display = + | 'flex' + | 'none' + | 'inline' + | 'block' + | Partial>; + +/** @public */ +export type FlexDirection = + | 'row' + | 'column' + | Partial>; + +/** @public */ +export type FlexWrap = + | 'wrap' + | 'nowrap' + | Partial>; + +/** @public */ +export type JustifyContent = + | 'stretch' + | 'flex-start' + | 'center' + | 'flex-end' + | 'space-around' + | 'space-between' + | Partial< + Record< + Breakpoint, + | 'stretch' + | 'flex-start' + | 'center' + | 'flex-end' + | 'space-around' + | 'space-between' + > + >; + +/** @public */ +export type AlignItems = + | 'stretch' + | 'flex-start' + | 'center' + | 'flex-end' + | Partial< + Record + >; + +/** @public */ +export type BorderRadius = + | 'none' + | 'small' + | 'medium' + | 'full' + | Partial>; + +/** @public */ +export type Gap = Space | Partial>; + +/** @public */ +export type PaddingLeft = Space | Partial>; + +/** @public */ +export type PaddingRight = Space | Partial>; + +/** @public */ +export type PaddingTop = Space | Partial>; + +/** @public */ +export type PaddingBottom = Space | Partial>; + +/** @public */ +export type Padding = Space | Partial>; + +/** @public */ +export type PaddingX = Space | Partial>; + +/** @public */ +export type PaddingY = Space | Partial>; + +/** @public */ +export type MarginLeft = Space | Partial>; + +/** @public */ +export type MarginRight = Space | Partial>; + +/** @public */ +export type MarginTop = Space | Partial>; + +/** @public */ +export type MarginBottom = Space | Partial>; + +/** @public */ +export type Margin = Space | Partial>; + +/** @public */ +export type MarginX = Space | Partial>; + +/** @public */ +export type MarginY = Space | Partial>; + +/** @public */ +export type Background = + | 'background' + | 'elevation1' + | 'elevation2' + | 'transparent' + | Partial< + Record + >; + +/** @public */ +export type Color = + | 'primary' + | 'secondary' + | 'error' + | Partial>; + +/** @public */ +export interface BoxProps { + as?: keyof JSX.IntrinsicElements; + background?: Background; + children?: React.ReactNode; + color?: Color; + display?: Display; + flexDirection?: FlexDirection; + flexWrap?: FlexWrap; + justifyContent?: JustifyContent; + alignItems?: AlignItems; + borderRadius?: BorderRadius; + gap?: Gap; + padding?: Padding; + paddingLeft?: PaddingLeft; + paddingRight?: PaddingRight; + paddingTop?: PaddingTop; + paddingBottom?: PaddingBottom; + paddingX?: PaddingX; + paddingY?: PaddingY; + margin?: Margin; + marginLeft?: MarginLeft; + marginRight?: MarginRight; + marginTop?: MarginTop; + marginBottom?: MarginBottom; + marginX?: MarginX; + marginY?: MarginY; + className?: string; + style?: React.CSSProperties; +} diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx index 16a6beade5..50600c0b30 100644 --- a/packages/canon/src/components/Button/Button.tsx +++ b/packages/canon/src/components/Button/Button.tsx @@ -16,7 +16,6 @@ import React from 'react'; import { button } from './button.css'; -import { Box } from '../Box/Box'; import { Icon } from '../Icon/Icon'; import { IconNames } from '../Icon/context'; @@ -45,16 +44,15 @@ export const Button = ({ ...props }: ButtonProps) => { return ( - {iconStart && } {children} {iconEnd && } - + ); }; diff --git a/packages/canon/src/components/Inline/Inline.tsx b/packages/canon/src/components/Inline/Inline.tsx index 48b0a14eb5..db9f4bd9c3 100644 --- a/packages/canon/src/components/Inline/Inline.tsx +++ b/packages/canon/src/components/Inline/Inline.tsx @@ -15,8 +15,9 @@ */ import React from 'react'; -import { Box, BoxProps } from '../Box/Box'; +import { Box } from '../Box/Box'; import { alignToFlexAlign } from '../../utils/align'; +import type { BoxProps } from '../Box/types'; export const validInlineComponents = [ 'div', diff --git a/packages/canon/src/components/Stack/Stack.tsx b/packages/canon/src/components/Stack/Stack.tsx index a2bc74d4c8..121ab1b176 100644 --- a/packages/canon/src/components/Stack/Stack.tsx +++ b/packages/canon/src/components/Stack/Stack.tsx @@ -15,9 +15,9 @@ */ import React from 'react'; -import { Box, BoxProps } from '../Box/Box'; +import { Box } from '../Box/Box'; import { alignToFlexAlign } from '../../utils/align'; - +import type { BoxProps } from '../Box/types'; const validStackComponents = [ 'div', 'span',