/**
 * `@shalecss/react` is a React component library that provides a thin wrapper
 * around `@shalecss/core` CSS styles.
 *
 * @packageDocumentation
 */

import type { ComponentPropsWithoutRef } from 'react';
import type { ElementType } from 'react';
import type { FC } from 'react';

/** @alpha */
export declare interface BaseButtonProps {
    /** The variant of the button */
    variant?: "primary" | "secondary";
    /** The initial state of the button (if you want to force a specific state) */
    state?: StateVariant;
}

/** @alpha */
export declare interface BaseCommandBarProps {
    /** Whether to make the command bar grow to fill available space */
    flexGrow?: boolean;
    /** Whether to add padding around the command bar */
    gutter?: boolean;
}

/** @alpha */
export declare interface BaseFlexContainerProps {
    /** The flex layout variant */
    variant?: "space-between" | "center" | "align-center";
}

/** @alpha */
export declare interface BaseHeaderProps {
    /** The initial state of the header (if you want to force a specific state) */
    state?: StateVariant;
    /** Move the border to the top instead of the bottom */
    invertBorder?: boolean;
    /** More compact styles for use in a titlebar */
    compact?: boolean;
}

/** @alpha */
export declare interface BaseLinkProps {
    /** The initial state of the link (if you want to force a specific state) */
    state?: StateVariant;
    /** Shows an external link icon */
    isExternal?: boolean;
}

/** @alpha */
export declare interface BaseMenuBarButtonProps {
    /** Whether this menu item is the current page */
    current?: boolean;
    /**
     * The initial state of the menu button (if you want to force a specific
     * state)
     */
    state?: StateVariant;
}

/**
 * The `Button` component is based off of the HTML `<button>` element and can be
 * used to trigger actions when clicked.
 *
 * @example Simple Button
 *
 * ```tsx
 * <Button variant="primary">Click Me</Button>;
 * ```
 *
 * @example With icon
 *
 * ```tsx
 * <Button state="active">
 *   <Icon icon="download" />
 *   Download
 * </Button>;
 * ```
 *
 * @alpha
 */
export declare const Button: PolymorphicComponent<"button", BaseButtonProps>;

/**
 * `CaptionButton` component provide specialized button and menu styling,
 * typically used for window controls or the header.
 *
 * Must be used within a {@link CaptionMenu} component.
 *
 * @alpha
 */
export declare const CaptionButton: PolymorphicComponent<"button", CaptionButtonProps>;

/** @alpha */
export declare interface CaptionButtonProps {
    /** The content of the `CaptionButton`. */
    children?: React.ReactNode;
    /** Props for the wrapper element. */
    wrapperProps?: React.HTMLAttributes<HTMLLIElement>;
}

/**
 * A `CaptionMenu` component serves as a container for {@link CaptionButton},
 * arranging them in a horizontal layout suitable for window controls.
 *
 * @example Window controls
 *
 * ```tsx
 * <Header>
 *   <HeaderTitle>
 *     My Application
 *     <CaptionMenu>
 *       <CaptionButton>−</CaptionButton>
 *       <CaptionButton>□</CaptionButton>
 *       <CaptionButton>×</CaptionButton>
 *     </CaptionMenu>
 *   </HeaderTitle>
 * </Header>;
 * ```
 *
 * @alpha
 */
export declare const CaptionMenu: PolymorphicComponent<"span", {}>;

/**
 * `Card` is a flexible container based on {@link FlexItem} that provides a
 * card-like visual presentation with optional shadow variants.
 *
 * @example Basic usage
 *
 * ```tsx
 * <Card shadow="moderate">This is a card with a moderate shadow</Card>;
 * ```
 *
 * @example With different shadows
 *
 * ```tsx
 * <FlexContainer variant="space-between">
 *   <Card flex="third" shadow="subtle">
 *     subtle shadows
 *   </Card>
 *   <Card flex="third" shadow="moderate">
 *     moderate shadows
 *   </Card>
 *   <Card flex="third" shadow="puffy">
 *     puffy shadows
 *   </Card>
 * </FlexContainer>;
 * ```
 *
 * @alpha
 */
export declare const Card: PolymorphicComponent<typeof FlexItem, CardProps>;

/** @alpha */
export declare interface CardProps {
    /** The type of shadow to apply to the card */
    shadow?: ShadowVariant;
}

/**
 * An inline code component.
 *
 * @example Basic usage
 *
 * ```tsx
 * <P>
 *   Use the <Code>npm install</Code> command to install dependencies.
 * </P>;
 * ```
 *
 * @example Block code
 *
 * ```tsx
 * <Code Component="pre">
 *   def get_a_million_dollars(): return P == NP
 *   print(get_a_million_dollars())
 * </Code>;
 * ```
 *
 * @alpha
 */
export declare const Code: PolymorphicComponent<"code">;

/**
 * The `CommandBar` component provides a container for command-based UI
 * elements, typically used for toolbars or action bars.
 *
 * @example Basic usage
 *
 * ```tsx
 * <CommandBar>
 *   <Button variant="secondary">Save</Button>
 *   <Button variant="secondary">Edit</Button>
 *   <Button variant="secondary">Delete</Button>
 * </CommandBar>;
 * ```
 *
 * @alpha
 */
export declare const CommandBar: PolymorphicComponent<typeof FlexContainer, BaseCommandBarProps>;

/** @alpha */
export declare type ComponentProp<C extends ElementType> = {
    /**
     * Overrides the base React component / HTML element that is used for this
     * component
     */
    Component?: C;
};

/**
 * Container components provide layout structure and organization.
 *
 * @example Basic usage
 *
 * ```tsx
 * <Container>Content goes here</Container>;
 * ```
 *
 * @alpha
 */
export declare const Container: PolymorphicComponent<"div", {}>;

/**
 * The Dialog component is a modal dialog box that overlays the current page. It
 * is based on the native HTML `<dialog>` element and cannot be moved or
 * resized.
 *
 * @example Basic usage with actions
 *
 * ```tsx
 * <>
 *   <Button
 *     type="button"
 *     command="show-modal"
 *     commandfor="my-dialog"
 *     aria-haspopup="dialog"
 *   >
 *     Open Dialog
 *   </Button>
 *
 *   <Dialog id="my-dialog" style={{ minWidth: "400px" }}>
 *     <Header compact>
 *       <HeaderTitle>
 *         <HeaderText>This is a dialog</HeaderText>
 *       </HeaderTitle>
 *       <CaptionMenu>
 *         <CaptionButton
 *           title="Close"
 *           type="button"
 *           commandfor="my-dialog"
 *           command="close"
 *         >
 *           ×
 *         </CaptionButton>
 *       </CaptionMenu>
 *     </Header>
 *     <FlexContainer variant="center">
 *       <P>Here, have some actions to choose from.</P>
 *     </FlexContainer>
 *     <CommandBar variant="space-between" gutter>
 *       <Button className="shale-v1-flex-grow">Nothing</Button>
 *       <Button className="shale-v1-flex-grow">Nothing</Button>
 *       <Button
 *         className="shale-v1-flex-grow"
 *         commandfor="my-dialog"
 *         command="close"
 *       >
 *         Close
 *       </Button>
 *     </CommandBar>
 *   </Dialog>
 * </>;
 * ```
 *
 * @alpha
 */
export declare const Dialog: FC<DialogProps>;

/** @alpha */
export declare interface DialogProps extends React.HTMLAttributes<HTMLDialogElement> {
}

/**
 * A flexible container with built-in flexbox layout variants.
 *
 * @example Space between
 *
 * ```tsx
 * <FlexContainer variant="space-between">
 *   <FlexItem>Left</FlexItem>
 *   <FlexItem>Right</FlexItem>
 * </FlexContainer>;
 * ```
 *
 * @example Center
 *
 * ```tsx
 * <FlexContainer variant="center">
 *   <FlexItem>Centered Content</FlexItem>
 * </FlexContainer>;
 * ```
 *
 * @example Align center
 *
 * ```tsx
 * <FlexContainer variant="align-center">
 *   <FlexItem>Vertically Centered Content</FlexItem>
 * </FlexContainer>;
 * ```
 *
 * @alpha
 */
export declare const FlexContainer: PolymorphicComponent<"div", BaseFlexContainerProps>;

/**
 * A flex form component that aligns all form items in a single line.
 *
 * @example Basic usage
 *
 * ```tsx
 * <FlexForm
 *   onSubmit={(e) => {
 *     e.preventDefault();
 *     alert("Form submitted!");
 *   }}
 * >
 *   <Input type="text" placeholder="Name" />
 *   <Input type="email" placeholder="Email" />
 *   <Select>
 *     <option value="option1">Option 1</option>
 *     <option value="option2">Option 2</option>
 *   </Select>
 *   <Button type="submit">Submit</Button>
 * </FlexForm>;
 * ```
 *
 * @alpha
 */
export declare const FlexForm: PolymorphicComponent<"form", {}>;

/**
 * A flex item component. Components like {@link Card} are based on this.
 *
 * @example Flex grow
 *
 * ```tsx
 * <Card flex="grow">This item will grow to fill space</Card>;
 * ```
 *
 * @example Half flex
 *
 * ```tsx
 * <FlexContainer variant="center">
 *   <Card flex="half">half</Card>
 *   <Card flex="half">half</Card>
 * </FlexContainer>;
 * ```
 *
 * @example Third flex
 *
 * ```tsx
 * <FlexContainer variant="center">
 *   <Card flex="third">third</Card>
 *   <Card flex="third">third</Card>
 *   <Card flex="third">third</Card>
 * </FlexContainer>;
 * ```
 *
 * @example Quarter flex
 *
 * ```tsx
 * <FlexContainer variant="center">
 *   <Card flex="quarter">quarter</Card>
 *   <Card flex="quarter">quarter</Card>
 *   <Card flex="quarter">quarter</Card>
 *   <Card flex="quarter">quarter</Card>
 * </FlexContainer>;
 * ```
 *
 * @example Fractional flex
 *
 * ```tsx
 * <div style={{ display: "flex" }}>
 *   <Card flex="half">Half width</Card>
 *   <Card flex="half">Half width</Card>
 * </div>;
 * ```
 *
 * @example Weird flex but ok
 *
 * ```tsx
 * <div style={{ display: "flex" }}>
 *   <Card flex="custom" flexAmount="2">
 *     Grows twice as much
 *   </Card>
 *   <Card flex="custom" flexAmount="1">
 *     Grows once
 *   </Card>
 * </div>;
 * ```
 *
 * @alpha
 */
export declare const FlexItem: PolymorphicComponent<"div", FlexItemProps>;

/** @alpha */
export declare type FlexItemProps = {
    /** The flex grow value */
    flex?: "grow" | "half" | "third" | "quarter";
} | {
    /** The flex grow value as a CSS value */
    flex: "custom";
    /** The custom flex grow value */
    flexAmount: string;
};

/**
 * A footer component for displaying stuff at the so-called "foot".
 *
 * @example Basic usage
 *
 * ```tsx
 * <Footer>
 *   <Container>
 *     <P>(c) [current year] banana farmers LLC. All rights reserved</P>
 *   </Container>
 * </Footer>;
 * ```
 *
 * @alpha
 */
export declare const Footer: PolymorphicComponent<"footer", {}>;

/**
 * A heading level 1 component.
 *
 * @example Basic usage
 *
 * ```tsx
 * <H1>Main Page Title</H1>;
 * ```
 *
 * @alpha
 */
export declare const H1: PolymorphicComponent<"h1">;

/**
 * A heading level 2 component.
 *
 * @example Basic usage
 *
 * ```tsx
 * <H2>Section Title</H2>;
 * ```
 *
 * @alpha
 */
export declare const H2: PolymorphicComponent<"h2">;

/**
 * A heading level 3 component.
 *
 * @example Basic usage
 *
 * ```tsx
 * <H3>Subsection Title</H3>;
 * ```
 *
 * @alpha
 */
export declare const H3: PolymorphicComponent<"h3">;

/**
 * A heading level 4 component.
 *
 * @example Basic usage
 *
 * ```tsx
 * <H4>Minor Heading</H4>;
 * ```
 *
 * @alpha
 */
export declare const H4: PolymorphicComponent<"h4">;

/**
 * A heading level 5 component.
 *
 * @example Basic usage
 *
 * ```tsx
 * <H5>Small Heading</H5>;
 * ```
 *
 * @alpha
 */
export declare const H5: PolymorphicComponent<"h5">;

/**
 * A heading level 6 component.
 *
 * @example Basic usage
 *
 * ```tsx
 * <H6>Smallest Heading</H6>;
 * ```
 *
 * @alpha
 */
export declare const H6: PolymorphicComponent<"h6">;

/**
 * A header component.
 *
 * @example Simple example
 *
 * ```tsx
 * <Header>
 *   <HeaderTitle>
 *     <HeaderText>example header bar (just the header)</HeaderText>
 *   </HeaderTitle>
 * </Header>;
 * ```
 *
 * @example With disabled state
 *
 * ```tsx
 * <Header state="disabled">
 *   <HeaderTitle>
 *     <HeaderText>example header bar (disabled)</HeaderText>
 *   </HeaderTitle>
 *   <Nav>
 *     <MenuBarButton href="#" current>
 *       current option
 *     </MenuBarButton>
 *     <MenuBarButton href="#" state="hover">
 *       hovered over
 *     </MenuBarButton>
 *     <MenuBarButton href="#" state="active">
 *       clicked on
 *     </MenuBarButton>
 *     <MenuBarButton href="#">idle</MenuBarButton>
 *     <MenuBarButton state="disabled">disabled</MenuBarButton>
 *   </Nav>
 * </Header>;
 * ```
 *
 * @example With all the bells and whistles
 *
 * ```tsx
 * <Header>
 *   <HeaderTitle>
 *     <HeaderText>
 *       example header bar with all the bells and whistles
 *     </HeaderText>
 *     <CaptionMenu>
 *       <CaptionButton title="Toggle text size">
 *         <Icon
 *           icon="a-lowercase"
 *           className="shale-v1-bigger-text-enabled"
 *         />
 *         <Icon
 *           icon="a-uppercase"
 *           className="shale-v1-bigger-text-disabled"
 *         />
 *       </CaptionButton>
 *       <CaptionButton title="Toggle contrast">
 *         <Icon icon="contrast" className="shale-v1-contrast-enabled" />
 *         <Icon
 *           icon="contrast"
 *           flipX
 *           className="shale-v1-contrast-disabled"
 *         />
 *       </CaptionButton>
 *       <CaptionButton title="Toggle dark mode">
 *         <Icon icon="moon-stroke" className="shale-v1-dark-enabled" />
 *         <Icon icon="moon-fill" className="shale-v1-dark-disabled" />
 *       </CaptionButton>
 *     </CaptionMenu>
 *   </HeaderTitle>
 *   <Nav>
 *     <MenuBarButton href="#" current>
 *       current option
 *     </MenuBarButton>
 *     <MenuBarButton href="#" state="hover">
 *       hovered over
 *     </MenuBarButton>
 *     <MenuBarButton href="#" state="active">
 *       clicked on
 *     </MenuBarButton>
 *     <MenuBarButton href="#">idle</MenuBarButton>
 *     <MenuBarButton state="disabled">disabled</MenuBarButton>
 *   </Nav>
 *   <CommandBar>
 *     <Button Component="a" href="#" variant="secondary">
 *       😂 Live
 *     </Button>
 *     <Button Component="a" href="#" variant="secondary">
 *       🤔 Laugh
 *     </Button>
 *     <Button Component="a" href="#" variant="secondary">
 *       🥰 Love
 *     </Button>
 *     (command bar for optional actions)
 *   </CommandBar>
 * </Header>;
 * ```
 *
 * @alpha
 */
export declare const Header: PolymorphicComponent<"header", BaseHeaderProps>;

/**
 * Text for the header component, for use in {@link HeaderTitle}.
 *
 * @example Basic usage
 *
 * ```tsx
 * <HeaderText>A description or subtitle for the header.</HeaderText>;
 * ```
 *
 * @alpha
 */
export declare const HeaderText: PolymorphicComponent<"p", {}>;

/**
 * A header title component, for use in {@link Header}.
 *
 * @example Basic usage
 *
 * ```tsx
 * <HeaderTitle>My Application</HeaderTitle>;
 * ```
 *
 * @alpha
 */
export declare const HeaderTitle: PolymorphicComponent<"div", {}>;

/**
 * The `Icon` component displays SVG icons from an icon sprite sheet using SVG's
 * `<use>` element.
 *
 * @example Basic icon
 *
 * ```tsx
 * <Icon icon="search" />;
 * ```
 *
 * @example Flipped icon
 *
 * ```tsx
 * <Icon icon="search" flipX flipY />;
 * ```
 *
 * @example All icons provided by default
 *
 * ```tsx
 * <FlexContainer variant="space-between">
 *   <Icon icon="a-lowercase" />
 *   <Icon icon="a-uppercase" />
 *   <Icon icon="accessibility" />
 *   <Icon icon="blocked" />
 *   <Icon icon="brightness-contrast" />
 *   <Icon icon="bubbles" />
 *   <Icon icon="contrast" />
 *   <Icon icon="danger" />
 *   <Icon icon="discord" />
 *   <Icon icon="download" />
 *   <Icon icon="earth" />
 *   <Icon icon="embed" />
 *   <Icon icon="enlarge" />
 *   <Icon icon="github" />
 *   <Icon icon="hashtag" />
 *   <Icon icon="info" />
 *   <Icon icon="lightbulb" />
 *   <Icon icon="link" />
 *   <Icon icon="minus-circle" />
 *   <Icon icon="minus" />
 *   <Icon icon="moon-fill" />
 *   <Icon icon="moon-stroke" />
 *   <Icon icon="newtab" />
 *   <Icon icon="notification" />
 *   <Icon icon="plus-circle" />
 *   <Icon icon="plus" />
 *   <Icon icon="power" />
 *   <Icon icon="quotes-left" />
 *   <Icon icon="quotes-right" />
 *   <Icon icon="reddit" />
 *   <Icon icon="rss" />
 *   <Icon icon="search" />
 *   <Icon icon="shrink" />
 *   <Icon icon="stackoverflow" />
 *   <Icon icon="star-empty" />
 *   <Icon icon="sun" />
 *   <Icon icon="upload" />
 *   <Icon icon="warning" />
 *   <Icon icon="windows" />
 *   <Icon icon="windows8" />
 *   <Icon icon="youtube" />
 * </FlexContainer>;
 * ```
 *
 * @alpha
 */
export declare const Icon: React.FC<IconProps>;

/** @alpha */
export declare interface IconProps extends React.SVGAttributes<SVGSVGElement> {
    /** The icon ID from the icons.svg sprite */
    icon: string;
    /** Whether to flip the icon horizontally */
    flipX?: boolean;
    /** Whether to flip the icon vertically */
    flipY?: boolean;
    /** The path to the icons.svg file */
    iconPath?: string;
}

/**
 * An input component. The `type` prop is required if you want styling.
 *
 * @example Basic inputs
 *
 * ```tsx
 * <FlexForm>
 *   <Input id="input-text" placeholder="text" type="text" />
 *   <Input id="input-password" placeholder="password" type="password" />
 *   <Input id="input-email" placeholder="email" type="email" />
 *   <Input id="input-url" placeholder="url" type="url" />
 *   <Input id="input-tel" placeholder="tel" type="tel" />
 *   <Input id="input-number" placeholder="number" type="number" />
 *   <Input id="input-search" placeholder="search" type="search" />
 *   <Input id="input-date" placeholder="date" type="date" />
 *   <Input id="input-time" placeholder="time" type="time" />
 *   <Input
 *     id="input-datetime"
 *     placeholder="datetime-local"
 *     type="datetime-local"
 *   />
 *   <Input id="input-month" placeholder="month" type="month" />
 *   <Input id="input-week" placeholder="week" type="week" />
 *   <Input id="input-color" placeholder="color" type="color" />
 *   <Input id="input-file" placeholder="file" type="file" />
 * </FlexForm>;
 * ```
 *
 * @example Disabled inputs
 *
 * ```tsx
 * <FlexForm>
 *   <Input
 *     id="input-text-disabled"
 *     disabled
 *     placeholder="text"
 *     type="text"
 *   />
 *   <Input
 *     id="input-password-disabled"
 *     disabled
 *     placeholder="password"
 *     type="password"
 *   />
 *   <Input
 *     id="input-email-disabled"
 *     disabled
 *     placeholder="email"
 *     type="email"
 *   />
 *   <Input id="input-url-disabled" disabled placeholder="url" type="url" />
 *   <Input id="input-tel-disabled" disabled placeholder="tel" type="tel" />
 *   <Input
 *     id="input-number-disabled"
 *     disabled
 *     placeholder="number"
 *     type="number"
 *   />
 *   <Input
 *     id="input-search-disabled"
 *     disabled
 *     placeholder="search"
 *     type="search"
 *   />
 *   <Input
 *     id="input-date-disabled"
 *     disabled
 *     placeholder="date"
 *     type="date"
 *   />
 *   <Input
 *     id="input-time-disabled"
 *     disabled
 *     placeholder="time"
 *     type="time"
 *   />
 *   <Input
 *     id="input-datetime-disabled"
 *     disabled
 *     placeholder="datetime-local"
 *     type="datetime-local"
 *   />
 *   <Input
 *     id="input-month-disabled"
 *     disabled
 *     placeholder="month"
 *     type="month"
 *   />
 *   <Input
 *     id="input-week-disabled"
 *     disabled
 *     placeholder="week"
 *     type="week"
 *   />
 *   <Input
 *     id="input-color-disabled"
 *     disabled
 *     placeholder="color"
 *     type="color"
 *   />
 *   <Input
 *     id="input-file-disabled"
 *     disabled
 *     placeholder="file"
 *     type="file"
 *   />
 * </FlexForm>;
 * ```
 *
 * @example Input with label
 *
 * ```tsx
 * <Input id="email" label="Email Address" type="email" />;
 * ```
 *
 * @example Checkboxes and radios
 *
 * ```tsx
 * <FlexForm
 *   onReset={() =>
 *     (document.getElementById("checkbox2").indeterminate = true)
 *   }
 * >
 *   <Input type="radio" name="demo-radio" id="radio1" label="Radio1" />
 *   <Input
 *     type="radio"
 *     name="demo-radio"
 *     id="radio2"
 *     label="Radio2"
 *     defaultChecked
 *   />
 *   <Input
 *     type="checkbox"
 *     name="checkbox1"
 *     id="checkbox1"
 *     label="Checkbox1"
 *     defaultChecked
 *   />
 *   <Input
 *     type="checkbox"
 *     name="checkbox2"
 *     id="checkbox2"
 *     label="Checkbox2"
 *   />
 *   <Input
 *     type="checkbox"
 *     name="checkbox3"
 *     id="checkbox3"
 *     label="Checkbox3"
 *   />
 *   <Button Component="button" type="reset">
 *     Add indeterminate
 *   </Button>
 * </FlexForm>;
 * ```
 *
 * @example Disabled checkboxes and radios
 *
 * ```tsx
 * <FlexForm
 *   onReset={() =>
 *     (document.getElementById("checkbox5").indeterminate = true)
 *   }
 * >
 *   <Input
 *     disabled
 *     type="radio"
 *     name="demo-radio"
 *     id="radio3"
 *     label="Radio3"
 *   />
 *   <Input
 *     disabled
 *     type="radio"
 *     name="demo-radio"
 *     id="radio4"
 *     label="Radio4"
 *     defaultChecked
 *   />
 *   <Input
 *     disabled
 *     type="checkbox"
 *     name="checkbox1"
 *     id="checkbox4"
 *     label="Checkbox4"
 *     defaultChecked
 *   />
 *   <Input
 *     disabled
 *     type="checkbox"
 *     name="checkbox2"
 *     id="checkbox5"
 *     label="Checkbox5"
 *   />
 *   <Input
 *     disabled
 *     type="checkbox"
 *     name="checkbox3"
 *     id="checkbox6"
 *     label="Checkbox6"
 *   />
 *   <Button Component="button" type="reset">
 *     Add indeterminate
 *   </Button>
 * </FlexForm>;
 * ```
 *
 * @alpha
 */
export declare const Input: React.FC<InputProps>;

/** @alpha */
export declare interface InputProps extends React.ComponentProps<"input"> {
    /** The label text for the input */
    label?: string;
    /** The id for the input (used with label) */
    id?: string;
}

/**
 * A link component.
 *
 * External links (links with `target="_blank"`) will automatically show an
 * external link icon, but you can also explicitly set `isExternal` to `true` to
 * show the icon, or set it to `false` to hide the icon.
 *
 * @example Basic link
 *
 * ```tsx
 * <Link href="https://example.com">Visit Example</Link>;
 * ```
 *
 * @example Link with forced state
 *
 * ```tsx
 * <Link href="/" state="hover">
 *   Hovered Link
 * </Link>;
 * ```
 *
 * @example External link
 *
 * ```tsx
 * <Link
 *   href="https://example.com"
 *   state="hover"
 *   target="_blank"
 *   rel="noopener noreferrer"
 * >
 *   Go to Example
 * </Link>;
 * ```
 *
 * @alpha
 */
export declare const Link: PolymorphicComponent<"a", BaseLinkProps>;

/**
 * A menu bar button component.
 *
 * @example Basic menu button
 *
 * ```tsx
 * <MenuBarButton href="/page">Page Link</MenuBarButton>;
 * ```
 *
 * @example Current page indicator
 *
 * ```tsx
 * <MenuBarButton href="/current" current>
 *   Current Page
 * </MenuBarButton>;
 * ```
 *
 * @alpha
 */
export declare const MenuBarButton: PolymorphicComponent<"a", BaseMenuBarButtonProps>;

/**
 * The navigation component. We expect you to use {@link MenuBarButton} inside as
 * well as wrap this in a Header.
 *
 * @example Basic navigation
 *
 * ```tsx
 * <Nav>
 *   <MenuBarButton href="/">Home</MenuBarButton>
 *   <MenuBarButton href="/about">About</MenuBarButton>
 *   <MenuBarButton href="/contact" current>
 *     Contact
 *   </MenuBarButton>
 * </Nav>;
 * ```
 *
 * @alpha
 */
export declare const Nav: PolymorphicComponent<"nav", {}>;

/**
 * A note component to highlight important information.
 *
 * @example Info note
 *
 * ```tsx
 * <Note variant="info">
 *   <Icon icon="info" /> <strong>Note</strong>
 *   <NoteText>This is an informational note.</NoteText>
 * </Note>;
 * ```
 *
 * @example Alert note
 *
 * ```tsx
 * <Note variant="alert">
 *   <Icon icon="warning" /> <strong>Alert</strong>
 *   <NoteText>This is an alert message!</NoteText>
 * </Note>;
 * ```
 *
 * @example Warning note
 *
 * ```tsx
 * <Note variant="warn">
 *   <Icon icon="danger" /> <strong>Warning</strong>
 *   <NoteText>This is a warning message.</NoteText>
 * </Note>;
 * ```
 *
 * @example Tip note
 *
 * ```tsx
 * <Note variant="tip">
 *   <Icon icon="lightbulb" /> <strong>Tip</strong>
 *   <NoteText>This is a helpful tip.</NoteText>
 * </Note>;
 * ```
 *
 * @alpha
 */
export declare const Note: PolymorphicComponent<typeof FlexItem, NoteProps>;

/** @alpha */
export declare interface NoteProps {
    /** The variant/type of note */
    variant: "info" | "alert" | "warn" | "tip";
}

/**
 * A text component for the content inside a Note.
 *
 * @example Basic usage
 *
 * ```tsx
 * <NoteText>Content inside a note.</NoteText>;
 * ```
 *
 * @alpha
 */
export declare const NoteText: PolymorphicComponent<"p", {}>;

/**
 * A paragraph component.
 *
 * @example Basic usage
 *
 * ```tsx
 * <P>This is a paragraph of text.</P>;
 * ```
 *
 * @alpha
 */
export declare const P: PolymorphicComponent<"p">;

/**
 * A helper type for a component which allows any HTML element to be used as the
 * base component
 *
 * @alpha
 */
export declare type PolymorphicComponent<DefaultElement extends ElementType, P = {}> = <C extends ElementType = DefaultElement>(props: PolymorphicComponentProp<C, Readonly<P>>) => ReturnType<FC<P>>;

/** @alpha */
export declare type PolymorphicComponentProp<C extends ElementType, Props = {}> = Props & Omit<ComponentPropsWithoutRef<C>, keyof (ComponentProp<C> & Props)> & ComponentProp<C>;

/**
 * A select component.
 *
 * @example Basic select
 *
 * ```tsx
 * <Select>
 *   <option value="1">Option 1</option>
 *   <option value="2">Option 2</option>
 *   <option value="3">Option 3</option>
 * </Select>;
 * ```
 *
 * @alpha
 */
export declare const Select: React.FC<SelectProps>;

/** @alpha */
export declare interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
    /** The initial state of the select (if you want to force a specific state) */
    state?: StateVariant;
}

/** @alpha */
export declare type ShadowVariant = "subtle" | "moderate" | "puffy";

/**
 * A skip to content link component for accessibility. This link becomes visible
 * when focused, allowing keyboard users to skip navigation and jump directly to
 * main content.
 *
 * @alpha
 */
export declare const SkipToContent: PolymorphicComponent<"a">;

/** @alpha */
export declare type StateVariant = "hover" | "active" | "focus" | "disabled";

/**
 * A textarea component.
 *
 * @example Basic textarea
 *
 * ```tsx
 * <Textarea placeholder="Enter your message..." rows={4} />;
 * ```
 *
 * @alpha
 */
export declare const Textarea: React.FC<TextareaProps>;

/** @alpha */
export declare interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
}

export { }