gantri-components 2.35.0 → 2.37.0

package/dist/components/box/box.adapters.d.ts

@@ -0,0 +1,4 @@
+import { DefaultTheme } from 'styled-components';
+import { ExtractStyleFromResolutionAwarePropEntry } from '../../types/layout';
+import { ElementSpacingProps } from './box.types';
+export declare const extractStylePropEntriesFromSpacingProps: (spacingArgs: ElementSpacingProps, theme: DefaultTheme) => ExtractStyleFromResolutionAwarePropEntry[];

package/dist/components/box/box.types.d.ts

@@ -9,7 +9,7 @@ type DeprecatedSize = 's1' | 's2' | 's3' | 's4' | 's5' | 's6';
 /**
  *
  */
-export type BoxDimension = DeprecatedSize | '.5x' | 'x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' | '11x' | '12x' | '16x' | '24x' | 'unset' | null | `${number}px` | `${number}rem`;
+export type BoxDimension = DeprecatedSize | '.5x' | 'x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' | '11x' | '12x' | '16x' | '18x' | '24x' | 'unset' | null | `${number}px` | `${number}rem` | `calc(${string})`;
 type AllowedBoxDimension<T> = T extends BoxDimension ? T : never;
 export interface ResolutionAwarePropBase<T> {
     lg?: AllowedBoxDimension<T>;
@@ -20,33 +20,38 @@ export interface BaseProps extends Omit<HTMLAttributes<any>, 'hidden'> {
     children?: any;
     className?: string;
 }
-export interface BoxProps extends BaseProps {
-    alignSelf?: ResolutionAwareProp<Property.AlignSelf>;
-    backgroundColor?: ResolutionAwareProp<Color>;
-    borderRadius?: ResolutionAwareProp<Property.BorderRadius>;
-    height?: ResolutionAwareProp<Property.Height>;
-    hidden?: ResolutionAwareProp<boolean>;
-    horizontalMargin?: ResolutionAwareProp<BoxDimension>;
+export interface PaddingProps {
     horizontalPadding?: ResolutionAwareProp<BoxDimension>;
-    justifySelf?: ResolutionAwareProp<Property.JustifySelf>;
+    padding?: ResolutionAwareProp<BoxDimension>;
+    paddingBottom?: ResolutionAwareProp<BoxDimension>;
+    paddingLeft?: ResolutionAwareProp<BoxDimension>;
+    paddingRight?: ResolutionAwareProp<BoxDimension>;
+    paddingTop?: ResolutionAwareProp<BoxDimension>;
+    verticalPadding?: ResolutionAwareProp<BoxDimension>;
+}
+export interface MarginProps {
+    horizontalMargin?: ResolutionAwareProp<BoxDimension>;
     margin?: ResolutionAwareProp<BoxDimension>;
     marginBottom?: ResolutionAwareProp<BoxDimension>;
     marginLeft?: ResolutionAwareProp<BoxDimension>;
     marginRight?: ResolutionAwareProp<BoxDimension>;
     marginTop?: ResolutionAwareProp<BoxDimension>;
+    verticalMargin?: ResolutionAwareProp<BoxDimension>;
+}
+export type ElementSpacingProps = PaddingProps & MarginProps;
+export interface BoxProps extends BaseProps, ElementSpacingProps {
+    alignSelf?: ResolutionAwareProp<Property.AlignSelf>;
+    backgroundColor?: ResolutionAwareProp<Color>;
+    borderRadius?: ResolutionAwareProp<Property.BorderRadius>;
+    height?: ResolutionAwareProp<Property.Height>;
+    hidden?: ResolutionAwareProp<boolean>;
+    justifySelf?: ResolutionAwareProp<Property.JustifySelf>;
     maxHeight?: ResolutionAwareProp<Property.MaxHeight>;
     maxWidth?: ResolutionAwareProp<string>;
     minHeight?: ResolutionAwareProp<Property.MinHeight>;
     minWidth?: ResolutionAwareProp<string>;
     overflow?: Property.Overflow;
-    padding?: ResolutionAwareProp<BoxDimension>;
-    paddingBottom?: ResolutionAwareProp<BoxDimension>;
-    paddingLeft?: ResolutionAwareProp<BoxDimension>;
-    paddingRight?: ResolutionAwareProp<BoxDimension>;
-    paddingTop?: ResolutionAwareProp<BoxDimension>;
     textAlign?: ResolutionAwareProp<string>;
-    verticalMargin?: ResolutionAwareProp<BoxDimension>;
-    verticalPadding?: ResolutionAwareProp<BoxDimension>;
     width?: ResolutionAwareProp<string>;
 }
 export type PropsWithHidden<T> = T & {

package/dist/components/line/index.d.ts

@@ -0,0 +1 @@
+export * from './line';

package/dist/components/line/line.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { LineProps } from './line.types';
+export declare const Line: FC<LineProps>;

package/dist/components/line/line.presets.d.ts

@@ -0,0 +1,2 @@
+import { LineProps } from './line.types';
+export declare const LinePresets: Partial<LineProps>;

package/dist/components/line/line.styles.d.ts

@@ -0,0 +1,2 @@
+import { LineProps } from './line.types';
+export declare const StyledLine: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, LineProps, never>;

package/dist/components/line/line.types.d.ts

@@ -0,0 +1,7 @@
+import { DefaultTheme } from 'styled-components';
+import { Property } from 'csstype';
+import { MarginProps } from '../box/box.types';
+export interface LineProps extends MarginProps {
+    color?: keyof DefaultTheme['colors']['dividers'];
+    height?: Property.Height;
+}

package/dist/components/typography/typography.types.d.ts

@@ -2,12 +2,12 @@ import { Property } from 'csstype';
 import { DefaultTheme } from 'styled-components';
 import { AriaAttributes, CSSProperties } from 'react';
 import { ResolutionAwareProp } from '../../types/resolution-aware-prop.type';
-import { BoxDimension } from '../box/box.types';
+import { ElementSpacingProps } from '../box/box.types';
 export type TextAlign = 'string' | 'left' | 'center' | 'right' | 'unset';
 export type TypographyColor = keyof DefaultTheme['colors']['typography'];
 export type TextVariant = 'p0' | 'p1' | 'p2' | 'p3' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'hero' | string;
 export type TextStyle = 'regular' | 'bold';
-export interface TypographyProps extends Partial<TypographyDefaultProps>, AriaAttributes {
+export interface TypographyProps extends Partial<TypographyDefaultProps>, AriaAttributes, ElementSpacingProps {
     align?: ResolutionAwareProp<string>;
     alignSelf?: ResolutionAwareProp<Property.AlignSelf>;
     className?: string;
@@ -15,8 +15,6 @@ export interface TypographyProps extends Partial<TypographyDefaultProps>, AriaAt
     fontSize?: ResolutionAwareProp<Property.Font>;
     fontWeight?: Property.FontWeight;
     hidden?: ResolutionAwareProp<boolean>;
-    horizontalMargin?: ResolutionAwareProp<BoxDimension>;
-    horizontalPadding?: ResolutionAwareProp<BoxDimension>;
     htmlFor?: string;
     htmlTag?: keyof HTMLElementTagNameMap;
     htmlText?: string;
@@ -24,19 +22,9 @@ export interface TypographyProps extends Partial<TypographyDefaultProps>, AriaAt
     justifySelf?: ResolutionAwareProp<Property.JustifySelf>;
     letterSpacing?: ResolutionAwareProp<Property.LetterSpacing>;
     lineHeight?: ResolutionAwareProp<Property.LineHeight>;
-    margin?: ResolutionAwareProp<BoxDimension>;
-    marginBottom?: ResolutionAwareProp<BoxDimension>;
-    marginLeft?: ResolutionAwareProp<BoxDimension>;
-    marginRight?: ResolutionAwareProp<BoxDimension>;
-    marginTop?: ResolutionAwareProp<BoxDimension>;
     maxWidth?: ResolutionAwareProp<string>;
     minWidth?: ResolutionAwareProp<string>;
     onClick?: (event: any) => void;
-    padding?: ResolutionAwareProp<BoxDimension>;
-    paddingBottom?: ResolutionAwareProp<BoxDimension>;
-    paddingLeft?: ResolutionAwareProp<BoxDimension>;
-    paddingRight?: ResolutionAwareProp<BoxDimension>;
-    paddingTop?: ResolutionAwareProp<BoxDimension>;
     style?: CSSProperties;
     text?: string | number;
     textShadow?: Property.TextShadow;
@@ -48,8 +36,6 @@ export interface TypographyProps extends Partial<TypographyDefaultProps>, AriaAt
      * use `htmlTag` instead
      * */
     type?: keyof HTMLElementTagNameMap;
-    verticalMargin?: ResolutionAwareProp<BoxDimension>;
-    verticalPadding?: ResolutionAwareProp<BoxDimension>;
 }
 export interface TypographyDefaultProps {
     color: TypographyColor;

package/dist/global/constants.d.ts

@@ -4,14 +4,52 @@ export declare const storyBookSpacingArgType: {
     };
     options: string[];
 };
-export declare const storyBookSpacingArgs: {
-    horizontalMargin: {
+export declare const storyBookPaddingArgs: {
+    horizontalPadding: {
         control: {
             type: string;
         };
         options: string[];
     };
-    horizontalPadding: {
+    padding: {
+        control: {
+            type: string;
+        };
+        options: string[];
+    };
+    paddingBottom: {
+        control: {
+            type: string;
+        };
+        options: string[];
+    };
+    paddingLeft: {
+        control: {
+            type: string;
+        };
+        options: string[];
+    };
+    paddingRight: {
+        control: {
+            type: string;
+        };
+        options: string[];
+    };
+    paddingTop: {
+        control: {
+            type: string;
+        };
+        options: string[];
+    };
+    verticalPadding: {
+        control: {
+            type: string;
+        };
+        options: string[];
+    };
+};
+export declare const storyBookMarginArgs: {
+    horizontalMargin: {
         control: {
             type: string;
         };
@@ -47,31 +85,45 @@ export declare const storyBookSpacingArgs: {
         };
         options: string[];
     };
-    padding: {
+    verticalMargin: {
         control: {
             type: string;
         };
         options: string[];
     };
-    paddingBottom: {
+};
+export declare const storyBookSpacingArgs: {
+    horizontalMargin: {
         control: {
             type: string;
         };
         options: string[];
     };
-    paddingLeft: {
+    margin: {
         control: {
             type: string;
         };
         options: string[];
     };
-    paddingRight: {
+    marginBottom: {
         control: {
             type: string;
         };
         options: string[];
     };
-    paddingTop: {
+    marginLeft: {
+        control: {
+            type: string;
+        };
+        options: string[];
+    };
+    marginRight: {
+        control: {
+            type: string;
+        };
+        options: string[];
+    };
+    marginTop: {
         control: {
             type: string;
         };
@@ -83,6 +135,42 @@ export declare const storyBookSpacingArgs: {
         };
         options: string[];
     };
+    horizontalPadding: {
+        control: {
+            type: string;
+        };
+        options: string[];
+    };
+    padding: {
+        control: {
+            type: string;
+        };
+        options: string[];
+    };
+    paddingBottom: {
+        control: {
+            type: string;
+        };
+        options: string[];
+    };
+    paddingLeft: {
+        control: {
+            type: string;
+        };
+        options: string[];
+    };
+    paddingRight: {
+        control: {
+            type: string;
+        };
+        options: string[];
+    };
+    paddingTop: {
+        control: {
+            type: string;
+        };
+        options: string[];
+    };
     verticalPadding: {
         control: {
             type: string;