@spark-web/columns/dist/declarations/src/columns.d.ts

--- title: Columns storybookPath: page-layout-columns--default isExperimentalPackage: false ---

import type { BoxProps } from '@spark-web/box';
import type { BrighteTheme, ResponsiveProp, ResponsiveRangeProps } from '@spark-web/theme';
import type { DataAttributeMap } from '@spark-web/utils/internal';
import type { ReactNode } from 'react';
import type { AlignY } from './alignment';
declare type Gap = ResponsiveProp<keyof Omit<BrighteTheme['spacing'], 'none'>>;
declare type ValidBoxProps = Omit<BoxProps, 'display' | 'alignItems' | 'gap' | 'flexDirection' | 'justifyContent' | 'flexWrap' | 'dangerouslySetInnerHTML'>;
export declare type ColumnsProps = {
    /** Vertically align items within the container. */
    alignY?: ResponsiveProp<AlignY>;
    /** Elements representing each column. */
    children: ReactNode;
    /** At which breakpoint, if any, should the columns collapse. */
    collapseBelow?: ResponsiveRangeProps['below'];
    /** Sets data attributes on the component. */
    data?: DataAttributeMap;
    /** The size of the gap between each column. */
    gap?: Gap;
    /** Define the relative width of each column. By default each column is the same width. */
    template?: number[];
} & ValidBoxProps;
export declare const Columns: <Comp extends import("react").ElementType<any> = "div">(props: {
    as?: Comp | undefined;
    ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
    /** Vertically align items within the container. */
    alignY?: ResponsiveProp<"bottom" | "top" | "center" | "stretch"> | undefined;
    /** Elements representing each column. */
    children: ReactNode;
    /** At which breakpoint, if any, should the columns collapse. */
    collapseBelow?: ResponsiveRangeProps['below'];
    /** Sets data attributes on the component. */
    data?: DataAttributeMap | undefined;
    /** The size of the gap between each column. */
    gap?: Gap | undefined;
    /** Define the relative width of each column. By default each column is the same width. */
    template?: number[] | undefined;
} & ValidBoxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export {};