@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
101 lines • 3.23 kB
TypeScript
import { forwardRef } from "react";
import { type ResponsiveProp } from "../responsive";
import { type SpacingSizes, type ResponsiveSpacingSizes } from "../spacing";
export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
/**
* Column span for the grid item
*
* `default` is `12`
*/
span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
/**
* Center the grid item horizontally
*
* Offsets the start position of the grid item relative to it's span so that it appears centered.
*
* assumes a span of 2, 4, 6, 8, or 10
*
* a span of `12` is 100% width and centering has no effect
*
* `default` is `false`
*/
center?: ResponsiveProp<boolean>;
/**
* Change the default rendered element for the one passed as a child, merging their props and behavior.
*/
asChild?: boolean;
}
/**
* 🚧 Grid.Item
*
* Use as the direct child of a `Grid` to override `span` and `center` for individual items.
*/
export declare const GridItem: import("react").ForwardRefExoticComponent<GridItemProps & import("react").RefAttributes<HTMLDivElement>>;
export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
/**
* Space between grid items. Both horizontal and vertical.
*
* Use the responsive shorthand `12-16` to jump a level at the `large` breakpoint.
*
* Or use the responsive object `{ initial: 40, large: 64 }` to set different values at different breakpoints.
*
* Use `gapX` and `gapY` to set different values for horizontal and vertical spacing.
*/
gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
/**
* Space between grid items horizontally
*/
gapX?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
/**
* Space between grid items vertically
*/
gapY?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
/**
* Column span for the grid items
*
* `default` is `12`
*/
span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
/**
* Center grid items horizontally
*
* Offsets the start position of the grid items relative to their span so that it appears centered.
*
* assumes a span of 2, 4, 6, 8, or 10
*
* a span of `12` is 100% width and centering has no effect
*
* `default` is `false`
*/
center?: ResponsiveProp<boolean>;
/**
* Change the default rendered element for the one passed as a child, merging their props and behavior.
*
* @default false
*/
asChild?: boolean;
}
/**
* A simple opionated abstraction over CSS Grid.
*
* The grid is always a 12 column grid.
*
* @example
* ```tsx
* <Grid gap="12-16" span={{ small: 6 }}>
* <div>6/12</div>
* <div>6/12</div>
* <Grid.Item span={{ small: 12 }}>12/12</Grid.Item>
* <div>6/12</div>
* <div>6/12</div>
* </Grid>
* ```
*/
export declare const Grid: GridType;
type GridType = ReturnType<typeof forwardRef<HTMLDivElement, GridProps>> & {
Item: typeof GridItem;
};
export {};
//# sourceMappingURL=grid.d.ts.map