UNPKG

@amsterdam/design-system-react

Version:

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

71 lines (70 loc) 1.96 kB
/** * @license EUPL-1.2+ * Copyright Gemeente Amsterdam */ import type { HTMLAttributes, PropsWithChildren } from 'react'; import type { CrossAlign, MainAlign } from '../common/types'; export declare const rowTags: readonly ["article", "div", "section"]; type RowTag = (typeof rowTags)[number]; export declare const rowGapSizes: readonly ["none", "x-small", "small", "large", "x-large"]; type RowGap = (typeof rowGapSizes)[number]; export type RowProps = { /** * The horizontal alignment of the items in the row. * @default start */ align?: MainAlign; /** * The vertical alignment of the items in the row. * @default stretch */ alignVertical?: CrossAlign; /** * The HTML element to use. * @default div */ as?: RowTag; /** * The amount of space between items. * @default medium */ gap?: RowGap; /** * Whether items of the row can wrap onto multiple lines. * @default false */ wrap?: boolean; } & PropsWithChildren<HTMLAttributes<HTMLElement>>; /** * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-row--docs Row docs at Amsterdam Design System} */ export declare const Row: import("react").ForwardRefExoticComponent<{ /** * The horizontal alignment of the items in the row. * @default start */ align?: MainAlign; /** * The vertical alignment of the items in the row. * @default stretch */ alignVertical?: CrossAlign; /** * The HTML element to use. * @default div */ as?: RowTag; /** * The amount of space between items. * @default medium */ gap?: RowGap; /** * Whether items of the row can wrap onto multiple lines. * @default false */ wrap?: boolean; } & HTMLAttributes<HTMLElement> & { children?: import("react").ReactNode | undefined; } & import("react").RefAttributes<unknown>>; export {};