import React from "react"; import { ResponsiveProp, SpacingScale } from "../utilities/types.js"; export type PrimitiveProps = { /** * Padding around children. * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space) * or an object of spacing tokens for different breakpoints. * @example * padding='space-16' * padding={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}} */ padding?: ResponsiveProp; /** * Horizontal padding around children. * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space) * or an object of spacing tokens for different breakpoints. * @example * paddingInline='space-16' * paddingInline='space-16 space-20' * paddingInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}} */ paddingInline?: ResponsiveProp; /** * Vertical padding around children. * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space) * or an object of spacing tokens for different breakpoints. * @example * paddingBlock='space-16' * paddingBlock='space-16 space-20' * paddingBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}} */ paddingBlock?: ResponsiveProp; /** * Margin around element. * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space) * or an object of spacing tokens for different breakpoints. * @example * margin='space-16' * margin={{xs: '0', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}} */ margin?: ResponsiveProp; /** * Horizontal margin around element. * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space) * or an object of spacing tokens for different breakpoints. * @example * marginInline='space-16' * marginInline='space-16 space-20' * marginInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}} */ marginInline?: ResponsiveProp; /** * Vertical margin around element. * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space) * or an object of spacing tokens for different breakpoints. * @example * marginBlock='space-16' * marginBlock='space-16 space-20' * marginBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}} */ marginBlock?: ResponsiveProp; /** * CSS `width` */ width?: ResponsiveProp; /** * CSS `min-width` */ minWidth?: ResponsiveProp; /** * CSS `max-width` */ maxWidth?: ResponsiveProp; /** * CSS `height` */ height?: ResponsiveProp; /** * CSS `min-height` */ minHeight?: ResponsiveProp; /** * CSS `max-height` */ maxHeight?: ResponsiveProp; /** * CSS `position` */ position?: ResponsiveProp<"static" | "relative" | "absolute" | "fixed" | "sticky">; /** * CSS `inset`. * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space) * or an object of spacing tokens for different breakpoints. * @example * inset='space-16' * inset='space-16 space-20' * inset={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}} */ inset?: ResponsiveProp; /** * CSS `top` * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space) * or an object of spacing tokens for different breakpoints. * @example * top='space-16' * top={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}} */ top?: ResponsiveProp; /** * CSS `right` * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space) * or an object of spacing tokens for different breakpoints. * @example * right='space-16' * right={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}} */ right?: ResponsiveProp; /** * CSS `bottom` * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space) * or an object of spacing tokens for different breakpoints. * @example * bottom='space-16' * bottom={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}} */ bottom?: ResponsiveProp; /** * CSS `left` * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space) * or an object of spacing tokens for different breakpoints. * @example * left='space-16' * left={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}} */ left?: ResponsiveProp; /** * CSS `overflow` */ overflow?: ResponsiveProp<"visible" | "hidden" | "clip" | "scroll" | "auto">; /** * CSS `overflow-x` */ overflowX?: ResponsiveProp<"visible" | "hidden" | "clip" | "scroll" | "auto">; /** * CSS `overflow-y` */ overflowY?: ResponsiveProp<"visible" | "hidden" | "clip" | "scroll" | "auto">; /** * CSS `flex-basis` */ flexBasis?: ResponsiveProp; /** * CSS `flex-shrink` */ flexShrink?: ResponsiveProp; /** * CSS `flex-grow` */ flexGrow?: ResponsiveProp; /** * CSS `grid-column` */ gridColumn?: ResponsiveProp; }; export declare const PRIMITIVE_PROPS: (keyof PrimitiveProps)[]; interface BasePrimitiveProps extends PrimitiveProps { children: React.ReactElement; /** * @private Hides prop from documentation */ className?: string; } export declare const BasePrimitive: ({ children, className, padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink, gridColumn, }: BasePrimitiveProps) => React.JSX.Element; export default BasePrimitive;