import React$1 from 'react';

type Override<T, U> = Omit<U, keyof T> & T

interface AsideProps {
  /**
   * Components or elements to be rendered inside the Aside.
   */
  children: React.ReactNode
  /**
   * Render element as an HTML semantic.
   */
  semantic?: boolean
}

declare function Aside(
  props: Override<AsideProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface SlotProps {
  /**
   * Components or elements to be rendered inside the Slot
   */
  children: React.ReactNode
  /**
   * Assign the layout area name to the slot
   */
  area?: string
  /**
   * Control the order of the slot in the layout
   */
  order?:
    | number
    | {
        s?: number
        m?: number
        l?: number
      }
}

declare function Slot(
  props: Override<SlotProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface SectionProps {
  /**
   * Components or elements to be rendered inside the Section.
   */
  children: React.ReactNode
  /**
   * Assigns grid area to section.
   */
  area?: "main" | "aside" | "header" | "footer"
  /**
   * Renders element as an HTML semantic.
   */
  semantic?: boolean
  /**
   * className
   */
  className?: string
}

declare function Section(
  props: Override<SectionProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface MainProps {
  /**
   * Components or elements to be rendered inside the Main.
   */
  children: React.ReactNode
  /**
   * Render element as an HTML semantic.
   */
  semantic?: boolean
  /**
   * Adds padding around the Main content.
   */
  bezel?: boolean
}

declare function Main(
  props: Override<MainProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface HeaderProps {
  /**
   * Components or elements to be rendered inside the Header.
   */
  children: React.ReactNode
  /**
   * Render element as an HTML semantic.
   */
  semantic?: boolean
}

declare function Header(
  props: Override<HeaderProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

interface FooterProps {
  /**
   * Components or elements to be rendered inside the Footer.
   */
  children: React.ReactNode
  /**
   * Render element as an HTML semantic.
   */
  semantic?: boolean
}

declare function Footer(
  props: Override<FooterProps, React.HTMLAttributes<HTMLElement>>
): JSX.Element

// loom:ignore


interface PageProps {
  /**
   * Components or elements to be rendered inside the Page.
   */
  children: React$1.ReactNode
  /**
   * Aligns Aside component to the end of the container.
   */
  asideEnd?: boolean
}

declare const Page: React$1.FC<
  Override<PageProps, React$1.HTMLAttributes<HTMLElement>>
> & {
  Main: React$1.FC<MainProps>
  Header: React$1.FC<HeaderProps>
  Footer: React$1.FC<FooterProps>
  Aside: React$1.FC<AsideProps>
}

// loom:ignore



type TemplateObject = { s?: string; m?: string; l?: string }

type BaseProps = {
  /**
   * React node(s) to render inside the layout container.
   */
  children?: React$1.ReactNode
  /**
   * The gap size between layout items. Accepts 'xs', 's', 'm', 'l', 'xl', '2xl', or '3xl'. The default is 'm'.
   */
  gap?: "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl"
  /**
   * Applies responsive gap values on small screens. The default is false.
   * Set `responsive=true` in ThemeProvider to enable the responsive tokens.
   */
  responsiveGap?: PropTypes.bool
  /**
   * Align of items along cross-axis: 'start', 'end', 'center', or 'stretch'. Equivalent to CSS align-items.
   */
  align?: "start" | "end" | "center" | "stretch"
  /**
   * Placement of items along the main axis: 'start', 'end', or 'center'. Equivalent to CSS justify-content.
   */
  placement?: "start" | "end" | "center"
  /**
   * Enables responsive Layout which auto adjusts layout based on screen size.
   */
  responsiveLayout?: boolean
}

type FillProps = {
  /**
   * Fill available space equally.
   */
  fill: true
  /**
   * Number of columns for small screens (used with fill).
   */
  s?: number
  /**
   * Number of columns for medium screens (used with fill).
   */
  m?: number
  /**
   * Number of columns for large screens (used with fill).
   */
  l?: number
}

type NoFillProps = {
  fill?: false
  s?: never
  m?: never
  l?: never
}
type DefaultFluidProps = {
  /**
   * Adds equal spacing between items.
   */
  spread?: boolean
  /**
   * Applies vertical layout. Only works on default Layout and Spread.
   */
  vertical?: boolean
  /**
   * Enables wrapping of items. Default is true. Only works on default Layout and Spread.
   */
  wrap?: boolean
  /**
   * Reverses the order of children items. Only works on default Layout and Spread.
   */
  reverseOrder?: boolean
}

type NoFluidProps = {
  spread?: false
  vertical?: never
  wrap?: never
  reverseOrder?: never
}

type NoTemplateProps = {
  template?: never
}

type FillLayoutProps = BaseProps & NoFluidProps & NoTemplateProps & FillProps

type DefaultFluidLayoutProps = BaseProps &
  NoFillProps &
  NoTemplateProps &
  DefaultFluidProps

type TemplateLayoutProps = BaseProps &
  NoFillProps &
  NoFluidProps & {
    /**
     * Sets layout template areas, as a string or an object with s/m/l keys.
     * Use a line break to indicate new rows.
     * For example: `slot1 slot2 \n slot1 slot2` or
     * `{ s: `slot1 \n slot2`, m: `slot1 slot2 \n slot1 slot2` }`
     */
    template?: string | TemplateObject
  }

type LayoutProps =
  | FillLayoutProps
  | DefaultFluidLayoutProps
  | TemplateLayoutProps

declare const Layout: React$1.FC<
  Override<LayoutProps, React$1.HTMLAttributes<HTMLElement>>
> & {
  Slot: React$1.FC<SlotProps>
}

export { Aside, Footer, Header, Layout, Main, Page, Section, Slot };
export type { AsideProps, BaseProps, DefaultFluidLayoutProps, DefaultFluidProps, FillLayoutProps, FillProps, FooterProps, HeaderProps, LayoutProps, MainProps, NoFillProps, NoFluidProps, NoTemplateProps, PageProps, SectionProps, SlotProps, TemplateLayoutProps, TemplateObject };