@spark-web/box

import type { ResponsiveProp, SparkTheme } from '@spark-web/theme'; declare type ValidGapKeys = keyof Omit<SparkTheme['spacing'], 'none' | 'full'>; declare type ResponsiveSpacing = ResponsiveProp<keyof SparkTheme['spacing']>; declare type ResponsiveSizing = ResponsiveProp<keyof SparkTheme['sizing']>; export declare type ResponsiveBoxProps = { /** * The `margin` shorthand property sets the margin area on all four sides of * an element at once. */ margin?: ResponsiveSpacing; /** * The `marginTop` property sets the margin area on the top side of an * element. */ marginTop?: ResponsiveSpacing; /** * The `marginRight` property sets the margin area on the right side of an * element. */ marginRight?: ResponsiveSpacing; /** * The `marginBottom` property sets the margin area on the bottom side of an * element. */ marginBottom?: ResponsiveSpacing; /** * The `marginLeft` property sets the margin area on the left side of an * element. */ marginLeft?: ResponsiveSpacing; /** * The `marginY` shorthand property sets the margin area on the top and * bottom of the element. */ marginY?: ResponsiveSpacing; /** * The `marginY` shorthand property sets the margin area on the left and * right of the element. */ marginX?: ResponsiveSpacing; /** * The `padding` shorthand property sets the padding area on all four sides * of an element at once. */ padding?: ResponsiveSpacing; /** * The `paddingTop` property sets the height of the padding area on the top * of an element. */ paddingTop?: ResponsiveSpacing; /** * The `paddingRight` property sets the width of the padding area on the * right of an element. */ paddingRight?: ResponsiveSpacing; /** * The `paddingBottom` property sets the height of the padding area on the * bottom of an element. */ paddingBottom?: ResponsiveSpacing; /** * The `paddingLeft` property sets the width of the padding area on the left * of an element. */ paddingLeft?: ResponsiveSpacing; /** * The `paddingY` shorthand property sets the padding area on the top and * bottom of the element. */ paddingY?: ResponsiveSpacing; /** * The `paddingX` shorthand property sets the padding area on the left and * right of the element. */ paddingX?: ResponsiveSpacing; /** The `border` property sets the color of an element's border. */ border?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>; /** The `border` property sets the color of an element's border on the top side. */ borderTop?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>; /** The `border` property sets the color of an element's border on the bottom side. */ borderBottom?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>; /** The `border` property sets the color of an element's border on the left side. */ borderLeft?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>; /** The `border` property sets the color of an element's border on the right side. */ borderRight?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>; /** * The `borderRadius` property rounds the corners of an element's outer * border edge. */ borderRadius?: ResponsiveProp<keyof SparkTheme['border']['radius']> | number; /** * The `borderWidth` property sets the width of an element's border. */ borderWidth?: ResponsiveProp<keyof SparkTheme['border']['width']>; /** Sets the element's height. */ height?: ResponsiveSizing; /** Sets the element's width. */ width?: ResponsiveSizing; /** Controls the alignment of items on the cross axis. */ alignItems?: ResponsiveProp<keyof typeof flexMap.alignItems>; /** The size of the gap between each child element. */ gap?: ResponsiveProp<ValidGapKeys>; /** Defines the main axis, or how the children are placed. */ flexDirection?: ResponsiveProp<keyof typeof flexMap.flexDirection>; /** * defines how the browser distributes space between and around content items * along the main-axis. */ justifyContent?: ResponsiveProp<keyof typeof flexMap.justifyContent>; /** Allow flex items to flow onto multiple lines. */ flexWrap?: ResponsiveProp<'nowrap' | 'wrap'>; /** * Overrides the parent's `align-items` value. Controls the alignment of * item's on the cross axis. */ alignSelf?: ResponsiveProp<keyof typeof flexMap.alignItems>; /** * The `flex` shorthand property sets how a flex item will grow or shrink to * fit the space available in its flex container. */ flex?: ResponsiveProp<0 | 1>; /** The `flexGrow` property sets the flex grow factor of a flex item main size. */ flexGrow?: ResponsiveProp<0 | 1>; /** * The `flexShrink` property sets the flex shrink factor of a flex item. If * the size of all flex items is larger than the flex container, items shrink * to fit according to `flex-shrink`. */ flexShrink?: ResponsiveProp<0 | 1>; /** * The `position` property sets how an element is positioned in a document. * The `top`, `right`, `bottom`, and `left` properties determine the final * location of positioned elements. */ position?: ResponsiveProp<'absolute' | 'fixed' | 'relative' | 'sticky'>; /** * The `top` property participates in specifying the vertical position of a * positioned element. It has no effect on non-positioned elements. */ top?: ResponsiveProp<0>; /** * The `right` property participates in specifying the horizontal position of * a positioned element. It has no effect on non-positioned elements. */ right?: ResponsiveProp<0>; /** * The `bottom` property participates in setting the vertical position of a * positioned element. It has no effect on non-positioned elements. */ bottom?: ResponsiveProp<0>; /** * The `left` property participates in specifying the horizontal position of a * positioned element. It has no effect on non-positioned elements. */ left?: ResponsiveProp<0>; /** * The `zIndex` property sets the "z-order" of a positioned element and its * descendants or flex items. Overlapping elements with a larger z-index cover * those with a smaller one. */ zIndex?: ResponsiveProp<keyof SparkTheme['elevation']>; /** * Sets whether an element is treated as a block or inline element and the * layout used for its children. */ display?: ResponsiveProp<'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex' | 'none'>; /** * Sets the opacity of the element. Opacity is the degree to which content * behind an element is hidden, and is the opposite of transparency. */ opacity?: ResponsiveProp<number>; }; declare type UnresponsiveBoxProps = { /** The `background` property sets the background color of an element. */ background?: keyof SparkTheme['color']['background']; /** * The `cursor` property sets the type of mouse cursor, if any, to show when * the mouse pointer is over an element. */ cursor?: 'default' | 'pointer'; /** * The `minHeight` property sets the minimum height of an element. It prevents * the used value of the height property from becoming smaller than the value * specified for `minHeight`. */ minHeight?: 0; /** * The `minWidth` property sets the minimum width of an element. It prevents * the used value of the width property from becoming smaller than the value * specified for `minWidth`. */ minWidth?: 0; /** * The `overflow` shorthand property sets the desired behavior for an * element's overflow — i.e. when an element's content is too big to fit in * its block formatting context — in both directions. */ overflow?: 'hidden' | 'scroll' | 'visible' | 'auto'; /** The `boxShadow` property adds shadow effects around an element's frame. */ shadow?: keyof SparkTheme['shadow'] | string | null; /** The `userSelect` property controls whether the user can select text. */ userSelect?: 'none'; }; export declare type BoxStyleProps = UnresponsiveBoxProps & ResponsiveBoxProps; export declare const useBoxStyles: ({ alignItems, alignSelf, background, border, borderTop, borderBottom, borderLeft, borderRight, borderRadius, borderWidth, bottom, cursor, display, flex, flexDirection, flexGrow, flexShrink, flexWrap, gap, height, justifyContent, left, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, minHeight, minWidth, opacity, overflow, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, position, right, shadow, top, userSelect, width, zIndex, }: BoxStyleProps) => import("facepaint").DynamicStyle[]; declare const flexMap: { readonly alignItems: { readonly start: "flex-start"; readonly center: "center"; readonly end: "flex-end"; readonly stretch: "stretch"; }; readonly justifyContent: { readonly start: "flex-start"; readonly center: "center"; readonly end: "flex-end"; readonly spaceBetween: "space-between"; readonly stretch: "stretch"; }; readonly flexDirection: { readonly row: "row"; readonly rowReverse: "row-reverse"; readonly column: "column"; readonly columnReverse: "column-reverse"; }; }; export {};