Merge pull request #46 from grapp-dev/fix/export-props

fix: 🐛 Export all components props

Author: mobily

src/components/Bleed.tsx

@@ -17,7 +17,7 @@ type BoxProps = Omit<
   | 'marginEnd'
 >;
 
-type Props = BoxProps & {
+export type BleedProps = BoxProps & {
   readonly space?: ResponsiveProp<number>;
   readonly horizontal?: ResponsiveProp<number>;
   readonly vertical?: ResponsiveProp<number>;
@@ -29,7 +29,7 @@ type Props = BoxProps & {
   readonly end?: ResponsiveProp<number>;
 };
 
-export const Bleed = (props: Props) => {
+export const Bleed = (props: BleedProps) => {
   const { children, space, horizontal, vertical, start, end, top, right, bottom, left, ...rest } =
     props;
 

src/components/FloatBox.tsx

@@ -7,15 +7,15 @@ import { Box } from './Box';
 
 type BoxProps = React.ComponentProps<typeof Box>;
 
-type Props = Omit<BoxProps, 'flex'> & {
+export type FloatBoxProps = Omit<BoxProps, 'flex'> & {
   readonly top?: ResponsiveProp<DimensionValue>;
   readonly right?: ResponsiveProp<DimensionValue>;
   readonly bottom?: ResponsiveProp<DimensionValue>;
   readonly left?: ResponsiveProp<DimensionValue>;
   readonly offset?: ResponsiveProp<DimensionValue>;
 };
 
-export const FloatBox = (props: Props) => {
+export const FloatBox = (props: FloatBoxProps) => {
   const { children, top, right, bottom, left, offset, style, ...rest } = props;
 
   const resolveResponsiveProp = useResponsiveProp();

src/components/Grid.tsx

@@ -8,7 +8,7 @@ import { makeWithIndex } from '../utils';
 import { Box } from './Box';
 import { FloatBox } from './FloatBox';
 
-type Props = {
+export type GridProps = {
   readonly gutter?: ResponsiveProp<number>;
   readonly margin?: ResponsiveProp<number>;
   readonly columns?: ResponsiveProp<number>;
@@ -35,7 +35,7 @@ const calculateGridWidth = (options: Options) => {
   return options.width * columns + gutterCount * options.gutter + options.margin * 2;
 };
 
-export const Grid = (props: Props) => {
+export const Grid = (props: GridProps) => {
   const { gutter = 2, margin = 2, opacity = 0.2, columns = 8, color = 'red' } = props;
 
   const { multiply } = useSpacingHelpers();

src/components/Hidden.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 
 import type { Breakpoint } from '../types';
 
-type Props = React.PropsWithChildren<{
+export type HiddenProps = React.PropsWithChildren<{
   readonly above?: Breakpoint;
   readonly below?: Breakpoint;
 }>;
 
-export const Hidden = (_props: Props): JSX.Element => {
+export const Hidden = (_props: HiddenProps): JSX.Element => {
   throw new Error(
     '[Stacks] Logical expression for the `Hidden` component could not be handled. Open a new issue and provide reproduction code.',
   );

src/components/Inline.tsx

@@ -9,7 +9,7 @@ type BoxProps = Omit<
   'gap' | 'rowGap' | 'columnGap' | 'alignX' | 'alignY' | 'direction' | 'wrap'
 >;
 
-type Props = BoxProps & {
+export type InlineProps = BoxProps & {
   readonly space?: ResponsiveProp<number>;
   readonly spaceX?: ResponsiveProp<number>;
   readonly spaceY?: ResponsiveProp<number>;
@@ -18,7 +18,7 @@ type Props = BoxProps & {
   readonly collapseBelow?: Breakpoint;
 };
 
-export const Inline = (props: Props) => {
+export const Inline = (props: InlineProps) => {
   const { space, children, spaceX, spaceY, alignX, alignY, collapseBelow, ...rest } = props;
   const breakpoint = useBreakpointComparators();
 

src/components/Inset.tsx

@@ -16,7 +16,7 @@ type BoxProps = Omit<
   | 'paddingEnd'
 >;
 
-type Props = BoxProps & {
+export type InsetProps = BoxProps & {
   readonly space?: ResponsiveProp<number>;
   readonly horizontal?: ResponsiveProp<number>;
   readonly vertical?: ResponsiveProp<number>;
@@ -28,7 +28,7 @@ type Props = BoxProps & {
   readonly end?: ResponsiveProp<number>;
 };
 
-export const Inset = (props: Props) => {
+export const Inset = (props: InsetProps) => {
   const { children, space, horizontal, vertical, start, end, top, right, bottom, left, ...rest } =
     props;
 

src/components/Stack.tsx

@@ -10,14 +10,14 @@ type BoxProps = Omit<
   'direction' | 'alignX' | 'alignY' | 'rowGap' | 'columnGap'
 >;
 
-type Props = BoxProps & {
+export type StackProps = BoxProps & {
   readonly space?: ResponsiveProp<number>;
   readonly horizontal?: ResponsiveProp<boolean>;
   readonly align?: ResponsiveProp<AxisX | AxisY>;
   readonly divider?: React.ReactElement;
 };
 
-export const Stack = (props: Props) => {
+export const Stack = (props: StackProps) => {
   const { children, flex = 'content', space, horizontal, align, divider, ...rest } = props;
 
   const resolveResponsiveProp = useResponsiveProp();

src/components/Tiles.tsx

@@ -10,7 +10,7 @@ type BoxProps = Omit<
   'gap' | 'rowGap' | 'columnGap' | 'direction' | 'alignX' | 'alignY'
 >;
 
-type Props = BoxProps & {
+export type TilesProps = BoxProps & {
   readonly columns?: ResponsiveProp<number>;
   readonly space?: ResponsiveProp<number>;
   readonly spaceX?: ResponsiveProp<number>;
@@ -19,7 +19,7 @@ type Props = BoxProps & {
   readonly alignY?: ResponsiveProp<AxisY | Space>;
 };
 
-export const Tiles = (props: Props) => {
+export const Tiles = (props: TilesProps) => {
   const { children, columns = 1, space, spaceX, spaceY, fill = false, reverse, ...rest } = props;
 
   const resolveResponsiveProp = useResponsiveProp();