import React from "react"; import { type OverridableComponent } from "../../utils-external/index.js"; import { PrimitiveProps } from "../base/BasePrimitive.js"; import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps.js"; import { ResponsiveProp, SpacingScale } from "../utilities/types.js"; export type HGridProps = React.HTMLAttributes & { /** * Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints. * Sets `grid-template-columns`, so `fr`, `minmax` etc. works. * @example * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}} * columns={3} * columns="repeat(3, minmax(0, 1fr))" */ columns?: ResponsiveProp; /** * Spacing between columns. * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space) * or an object of spacing tokens for different breakpoints. * @example * gap="space-20" * gap="space-32 space-16" * gap={{ sm: "space-8", md: "space-12", lg: "space-20", xl: "space-24"}} */ gap?: ResponsiveProp; /** * Vertical alignment of children. Elements will by default stretch to the height of parent-element. */ align?: "start" | "center" | "end"; } & PrimitiveProps & PrimitiveAsChildProps; /** * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints. * * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hgrid) * @see 🏷️ {@link HGridProps} * * @example * *
*
*
* * @example * *
*
*
* * @example * *
*
*
* */ export declare const HGrid: OverridableComponent; export default HGrid;