Stack

import { Stack } from "@lualtek/react-components";
 
export default () => {
  return (
    <Stack columnGap={8} direction="row" hAlign="center" fill={false} wrap>
      <Select label="Label">...</Select>
      <Button>Confirm</Button>
    </Stack>
  );
};

export type StackProps = {
  /**
   * Add a gap between rows.
   */
  rowGap?: TokensTypes["space"];
 
  /**
   * Add a gap between columns.
   */
  columnGap?: TokensTypes["space"];
 
  /**
   * Display the element as inline-flex
   * @default false
   */
  inline?: boolean;
 
  /**
   * Wrap children whene there is no space for them.
   * @default false
   */
  wrap?: boolean;
 
  /**
   * Make the children grow to fill the available space instead
   * of being sized based on their content.
   * @default true
   */
  fill?: boolean;
 
  /**
   * Place the content vertically centered instead of
   * growing to fill the available space.
   * @default 'iniitial'
   */
  vAlign?: string;
 
  /**
   * Place the content horizontally centered instead of
   * growing to fill the available space.
   * @default 'iniitial'
   */
  hAlign?: string;
 
  /**
   * Set the horizontal padding (left/right)
   */
  hPadding?: TokensTypes["space"];
 
  /**
   * Set the vertical padding (top/bottom)
   */
  vPadding?: TokensTypes["space"];
 
  /**
   * Renderes children as rows or columns. The value can be one of the flex directions.
   * More info: https://developer.mozilla.org/en-US/Web/CSS/flex-direction
   * @default 'column'
   */
  direction?: "row" | "column" | "row-reverse" | "column-reverse";
 
  /**
   * Set the component to render as different element
   * @default 'div'.
   */
  as?: JSX.IntrinsicElements | React.ComponentType<unknown>;
};