@redsift/design-system 6.0.0 → 6.1.0

package/index.d.ts

@@ -0,0 +1,830 @@
+import React, { Ref, ReactElement, ComponentProps, RefObject, MutableRefObject, ChangeEvent } from 'react';
+import { PressEvent } from '@react-types/shared';
+import * as styled_components from 'styled-components';
+
+/** Component Type. */
+declare type Comp<P, T = HTMLElement> = {
+    (props: P & {
+        ref?: Ref<T>;
+    }): ReactElement | null;
+    /** React component type. */
+    readonly $$typeof: symbol;
+    /** Component default props. */
+    defaultProps?: Partial<P>;
+    /** Component name. */
+    displayName?: string;
+    /** Component base class name. */
+    className?: string;
+};
+/**
+ * JS falsy values.
+ * (excluding `NaN` as it can't be distinguished from `number`)
+ */
+declare type Falsy = false | undefined | null | 0 | '';
+/** Get types of the values of a record. */
+declare type ValueOf<T extends Record<any, any>> = T[keyof T];
+/**
+ * Color palette.
+ */
+declare const ColorPalette: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+    readonly error: "error";
+    readonly warning: "warning";
+    readonly info: "info";
+    readonly success: "success";
+};
+declare type ColorPalette = ValueOf<typeof ColorPalette>;
+declare type Color = ColorPalette | string;
+/**
+ * Theme
+ */
+declare const Theme: {
+    readonly dark: "dark";
+    readonly light: "light";
+};
+declare type Theme = ValueOf<typeof Theme>;
+
+/**
+ * Component size.
+ */
+declare const IconButtonSize: {
+    readonly large: "large";
+    readonly medium: "medium";
+    readonly small: "small";
+};
+declare type IconButtonSize = ValueOf<typeof IconButtonSize>;
+/**
+ * Component props.
+ */
+interface IconButtonProps extends ComponentProps<'button'> {
+    /** Color variant. */
+    color?: ColorPalette;
+    /**
+     * Icon path data (`d` property of the `path` SVG element).<br />
+     * See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />
+     * Recommended path data come from mdi/js.<br />
+     * See <a href="https://www.npmjs.com/package/@mdi/js">https://www.npmjs.com/package/@mdi/js</a>.
+     */
+    icon: string;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Preferred method to handle click, press and touch. */
+    onPress?: (e: PressEvent) => void;
+    /** IconButton size. */
+    size?: IconButtonSize;
+}
+declare type StyledIconButtonProps = Omit<IconButtonProps, 'isDisabled' | 'color' | 'size' | 'icon'> & {
+    $isDisabled: IconButtonProps['isDisabled'];
+    $color: IconButtonProps['color'];
+};
+
+/**
+ * The Icon Button is a component that contains only one icon as a child, without text.
+ *
+ * This component should use aria-label, aria-labelledby or aria-describedby to make this
+ * component usable with a screen reader.
+ */
+declare const IconButton: Comp<IconButtonProps, HTMLButtonElement>;
+
+/**
+ * Component props.
+ */
+interface AppBarProps extends Omit<ComponentProps<'header'>, 'title'> {
+    /** Title of the page if no one provided automatically */
+    fallbackTitle?: string;
+    /** Custom props to pass to the IconButton used to expand the side panel. */
+    iconButtonProps?: Omit<IconButtonProps, 'icon'>;
+    /** Custom ref to pass to the IconButton used to expand the side panel. */
+    iconButtonRef?: RefObject<HTMLButtonElement>;
+    /** Title of the page */
+    title?: string | ReactElement;
+}
+declare type StyledAppBarProps = AppBarProps & {
+    $isLoaded: boolean;
+    $isSidePanelCollapsed: boolean;
+};
+
+/**
+ * The AppBar component.
+ */
+declare const AppBar: Comp<AppBarProps, HTMLHeadingElement>;
+
+/**
+ * Context props.
+ */
+declare type AppContainerState = {
+    /** Collapses the side panel. */
+    collapseSidePanel(): void;
+    /** Expandes the side panel. */
+    expandSidePanel(): void;
+    /** Whether the side panel is collapsed. */
+    readonly isSidePanelCollapsed: boolean;
+    /** Set title of the page. */
+    setTitle(title?: string): void;
+    /** Page title. */
+    readonly title?: string;
+};
+/**
+ * Component props.
+ */
+interface AppContainerProps extends ComponentProps<'div'> {
+}
+
+declare const AppContainerContext: React.Context<AppContainerState | null>;
+
+/**
+ * The AppContainer component.
+ */
+declare const AppContainer: Comp<AppContainerProps, HTMLDivElement>;
+
+/**
+ * Component props.
+ */
+interface AppContentProps extends ComponentProps<'main'> {
+}
+declare type StyledAppContentProps = AppContentProps & {
+    $isLoaded: boolean;
+    $isSidePanelCollapsed: boolean;
+};
+
+/**
+ * The AppContent component.
+ */
+declare const AppContent: Comp<AppContentProps, HTMLElement>;
+
+/**
+ * Component props.
+ */
+interface AppSidePanelProps extends ComponentProps<'div'> {
+    /** Elements to display on top of the navigation menu. Usually a button.  */
+    featuredElements?: ReactElement | ReactElement[];
+    /** Custom props to pass to the IconButton used to collapse the side panel. */
+    iconButtonProps?: Omit<IconButtonProps, 'icon'>;
+    /** Custom ref to pass to the IconButton used to collapse the side panel. */
+    iconButtonRef?: RefObject<HTMLButtonElement>;
+    /** Whether the component is collapsed or not. */
+    isCollapsed?: boolean;
+    /** Place to display the logo app.  */
+    logo?: ReactElement | ComponentProps<'img'>;
+    /** Method called when a click occurs on the top-right close button - which is displayed only if the method is defined. */
+    onClose?: (e: PressEvent) => void;
+}
+declare type StyledAppSidePanelProps = Omit<AppSidePanelProps, 'isCollapsed'> & {
+    $isCollapsed: boolean;
+};
+
+/**
+ * The AppSidePanel component.
+ */
+declare const AppSidePanel: Comp<AppSidePanelProps, HTMLDivElement>;
+
+/**
+ * Component size.
+ */
+declare const IconSize: {
+    readonly large: "large";
+    readonly medium: "medium";
+    readonly small: "small";
+};
+declare type IconSize = ValueOf<typeof IconSize>;
+/**
+ * Component props.
+ */
+interface IconProps extends ComponentProps<'i'> {
+    /** Indicates whether the element is exposed to an accessibility API. */
+    'aria-hidden'?: boolean | 'false' | 'true';
+    /** A screen reader only label for the Icon. */
+    'aria-label'?: string;
+    /** Color variant. Either from color palette or hex or rgb strings. */
+    color?: Color | string;
+    /** Whether the icon has a badge attached to it. */
+    badge?: ReactElement;
+    /**
+     * Icon path data (`d` property of the `path` SVG element).<br />
+     * See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />
+     * Recommended path data come from mdi/js.<br />
+     * See <a href="https://www.npmjs.com/package/@mdi/js">https://www.npmjs.com/package/@mdi/js</a>.
+     */
+    icon: string;
+    /** Icon size. */
+    size?: IconSize;
+    /** Additional properties to forward to the SVG tag. */
+    svgProps?: ComponentProps<'svg'>;
+}
+declare type StyledIconProps = Omit<IconProps, 'color' | 'size' | 'icon' | 'svgProps'> & {
+    $color: IconProps['color'];
+    $size: IconProps['size'];
+};
+
+/**
+ * The Icon component.
+ */
+declare const Icon: Comp<IconProps, HTMLSpanElement>;
+
+/**
+ * Context props.
+ */
+declare type SideNavigationMenuContextProps = {
+    menuItems: Set<HTMLAnchorElement | HTMLButtonElement>;
+};
+/**
+ * Reducer props.
+ */
+declare type SideNavigationMenuReducerState = {
+    isExpanded: boolean;
+    currentIndex: number;
+    previousIndex: number;
+};
+declare enum SideNavigationMenuReducerActionType {
+    Expand = "expand",
+    Collapse = "collapse",
+    Move = "move"
+}
+declare type SideNavigationMenuReducerAction = {
+    type: SideNavigationMenuReducerActionType;
+    index?: number;
+};
+/**
+ * Component props.
+ */
+interface SideNavigationMenuProps extends ComponentProps<'div'> {
+    /** Custom props to pass to the button. */
+    buttonProps?: ComponentProps<'button'>;
+    /** Custom ref to pass to the button. */
+    buttonRef?: MutableRefObject<HTMLButtonElement>;
+    /** Whether or not the menu contains children that have a badge. */
+    hasBadge?: boolean;
+    /**
+     * Icon path data (`d` property of the `path` SVG element).<br />
+     * See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />
+     * Recommended path data come from mdi/js.<br />
+     * See <a href="https://www.npmjs.com/package/@mdi/js">https://www.npmjs.com/package/@mdi/js</a>.
+     */
+    icon?: string;
+    /** Custom props to pass to the Icon component. */
+    iconProps?: Omit<IconProps, 'icon'>;
+    /** Custom ref to pass to the Icon component. */
+    iconRef?: MutableRefObject<HTMLElement>;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the menu is expanded or not. */
+    isExpanded?: boolean;
+    /** Custom props to pass to the menu. */
+    menuProps?: ComponentProps<'ul'>;
+    /** Custom ref to pass to the menu. */
+    menuRef?: MutableRefObject<HTMLUListElement>;
+    /** Whether the component should hide icons or not. */
+    withoutIcons?: boolean;
+}
+declare type StyledSideNavigationMenuProps = Omit<SideNavigationMenuProps, 'isDisabled' | 'isExpanded' | 'withoutIcons'> & {
+    $isDisabled: SideNavigationMenuProps['isDisabled'];
+    $isExpanded: SideNavigationMenuProps['isExpanded'];
+    $withoutIcons: SideNavigationMenuProps['withoutIcons'];
+};
+
+/**
+ * The SideNavigationMenu component.
+ */
+declare const SideNavigationMenu: Comp<SideNavigationMenuProps, HTMLDivElement>;
+
+/**
+ * Component variant.
+ */
+declare const BadgeVariant: {
+    readonly dot: "dot";
+    readonly standard: "standard";
+};
+declare type BadgeVariant = ValueOf<typeof BadgeVariant>;
+/**
+ * Component props.
+ */
+interface BadgeProps extends ComponentProps<'div'> {
+    /** Whether the badge should automatically break content. */
+    autoBreak?: boolean;
+    /** Color variant. Either from color palette or hex or rgb strings. */
+    color?: Color | string;
+    /** Badge variant. */
+    variant?: BadgeVariant;
+}
+declare type StyledBadgeProps = Omit<BadgeProps, 'color' | 'variant' | 'autoBreak'> & {
+    $autoBreak: BadgeProps['autoBreak'];
+    $color: BadgeProps['color'];
+    $variant: BadgeProps['variant'];
+};
+
+/**
+ * The Badge component.
+ */
+declare const Badge: Comp<BadgeProps, HTMLDivElement>;
+
+/**
+ * Component props.
+ */
+interface SideNavigationMenuItemProps extends ComponentProps<'a'> {
+    /** Prop to pass a custom react component instead of a simple HTML anchor (useful for Nextjs or React Router Link component). */
+    as?: 'a' | any;
+    /** Text or number that should be displayed inside a badge next to the menu item text. */
+    badge?: number | string;
+    /** @deprecated Number that should be displayed inside a badge next to the menu item text. */
+    badgeNumber?: number;
+    /** Custom props to pass to the Badge component, if any. */
+    badgeProps?: Omit<BadgeProps, 'ref'>;
+    /** Href is required for this component. */
+    href: ComponentProps<'a'>['href'];
+    /**
+     * Icon path data (`d` property of the `path` SVG element).<br />
+     * See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />
+     * Recommended path data come from mdi/js.<br />
+     * See <a href="https://www.npmjs.com/package/@mdi/js">https://www.npmjs.com/package/@mdi/js</a>.
+     */
+    icon?: string;
+    /** Custom props to pass to the Icon component. */
+    iconProps?: Omit<IconProps, 'icon'>;
+    /** Custom ref to pass to the Icon component. */
+    iconRef?: RefObject<HTMLElement>;
+    /** Whether the component is active or not. */
+    isCurrent?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the component is a second-level menu item. */
+    isSecondLevel?: boolean;
+    /** Whether the component should hide icons or not. */
+    withoutIcons?: boolean;
+}
+declare type StyledSideNavigationMenuItemProps = Omit<SideNavigationMenuItemProps, 'isCurrent' | 'isDisabled' | 'isSecondLevel' | 'withoutIcons'> & {
+    $isCurrent: SideNavigationMenuItemProps['isCurrent'];
+    $isDisabled: SideNavigationMenuItemProps['isDisabled'];
+    $isSecondLevel: SideNavigationMenuItemProps['isSecondLevel'];
+    $withoutIcons: SideNavigationMenuItemProps['withoutIcons'];
+};
+
+/**
+ * The SideNavigationMenuItem component.
+ */
+declare const SideNavigationMenuItem: Comp<SideNavigationMenuItemProps, HTMLAnchorElement>;
+
+/**
+ * Context props.
+ */
+declare type SideNavigationMenuBarContextProps = {
+    menuItems: Set<HTMLAnchorElement | HTMLButtonElement>;
+};
+/**
+ * Component props.
+ */
+interface SideNavigationMenuBarProps extends ComponentProps<'nav'> {
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Custom props to pass to the menubar. */
+    menubarProps?: ComponentProps<'ul'>;
+    /** Custom ref to pass to the menubar. */
+    menubarRef?: MutableRefObject<HTMLUListElement>;
+    /** Whether the component should hide icons or not. */
+    withoutIcons?: boolean;
+}
+declare type StyledSideNavigationMenuBarProps = Omit<SideNavigationMenuBarProps, 'isDisabled' | 'withoutIcons'> & {
+    $isDisabled: SideNavigationMenuBarProps['isDisabled'];
+    $marginTop?: number;
+    $withoutIcons: SideNavigationMenuBarProps['withoutIcons'];
+};
+/**
+ * Hook props.
+ */
+interface MenuItem extends Omit<SideNavigationMenuItemProps, 'children'> {
+    title: string;
+}
+interface Menu extends Omit<SideNavigationMenuProps, 'children'> {
+    title: string;
+    children: MenuItem[];
+}
+declare type MenuBarItems = (Menu | MenuItem)[];
+
+/**
+ * The SideNavigationMenuBar component.
+ */
+declare const SideNavigationMenuBar: Comp<SideNavigationMenuBarProps, HTMLElement>;
+
+interface UseSideNavigationMenuBarProps {
+    items: MenuBarItems;
+    isActive?: (href: string) => boolean;
+}
+declare const useSideNavigationMenuBar: ({ items, isActive, }: UseSideNavigationMenuBarProps) => Omit<SideNavigationMenuBarProps, 'ref'>;
+
+declare const useAppSidePanel: ({ items, isActive, }: UseSideNavigationMenuBarProps) => Omit<AppSidePanelProps, 'ref'>;
+
+/**
+ * Component props.
+ */
+interface BreadcrumbItemProps extends ComponentProps<'a'> {
+    /** Prop to pass a custom react component instead of a simple HTML anchor (useful for Nextjs or React Router Link component). */
+    as?: 'a' | any;
+    /**
+     * Icon path data (`d` property of the `path` SVG element).<br />
+     * See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />
+     * Recommended path data come from mdi/js.<br />
+     * See <a href="https://www.npmjs.com/package/@mdi/js">https://www.npmjs.com/package/@mdi/js</a>.
+     */
+    icon?: string;
+    /** Whether the breadcrumb item is the current page. */
+    isCurrent?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Theme. */
+    theme?: Theme;
+}
+declare type StyledBreadcrumbItemProps = Omit<BreadcrumbItemProps, 'isDisabled' | 'isCurrent'> & {
+    $isCurrent: BreadcrumbItemProps['isCurrent'];
+    $isDisabled: BreadcrumbItemProps['isDisabled'];
+    $theme: BreadcrumbItemProps['theme'];
+};
+
+/**
+ * The BreadcrumbItem components is a list of links to the parent pages of the current page in hierarchical order.
+ */
+declare const BreadcrumbItem: Comp<BreadcrumbItemProps, HTMLAnchorElement>;
+
+/**
+ * Component props.
+ */
+interface BreadcrumbsProps extends ComponentProps<'nav'> {
+    /**
+     * Icon path data (`d` property of the `path` SVG element).<br />
+     * See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />
+     * Recommended path data come from mdi/js.<br />
+     * See <a href="https://www.npmjs.com/package/@mdi/js">https://www.npmjs.com/package/@mdi/js</a>.
+     */
+    icon?: string;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Separator. */
+    separator?: ReactElement | string;
+    /** Theme. */
+    theme?: Theme;
+}
+declare type StyledBreadcrumbsProps = Omit<BreadcrumbsProps, 'isDisabled'> & {
+    $isDisabled: BreadcrumbsProps['isDisabled'];
+    $theme: BreadcrumbsProps['theme'];
+};
+
+/**
+ * The Breadcrumbs components is a list of links to the parent pages of the current page in hierarchical order.
+ */
+declare const Breadcrumbs: Comp<BreadcrumbsProps, HTMLElement>;
+
+/**
+ * Component variant.
+ */
+declare const ButtonVariant: {
+    readonly contained: "contained";
+    readonly outlined: "outlined";
+    readonly text: "text";
+};
+declare type ButtonVariant = ValueOf<typeof ButtonVariant>;
+/**
+ * Component size.
+ */
+declare const ButtonSize: {
+    readonly large: "large";
+    readonly medium: "medium";
+    readonly small: "small";
+};
+declare type ButtonSize = ValueOf<typeof ButtonSize>;
+/**
+ * Component props.
+ */
+interface ButtonProps extends ComponentProps<'button'> {
+    /** Color variant. */
+    color?: ColorPalette;
+    /** Whether the component take the full width or not. */
+    fullWidth?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /**
+     * Icon path data (`d` property of the `path` SVG element).<br />
+     * See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />
+     * Recommended path data come from mdi/js.<br />
+     * See <a href="https://www.npmjs.com/package/@mdi/js">https://www.npmjs.com/package/@mdi/js</a>.
+     */
+    leftIcon?: string;
+    /** Preferred method to handle click, press and touch. */
+    onPress?: (e: PressEvent) => void;
+    /**
+     * Icon path data (`d` property of the `path` SVG element).<br />
+     * See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />
+     * Recommended path data come from mdi/js.<br />
+     * See <a href="https://www.npmjs.com/package/@mdi/js">https://www.npmjs.com/package/@mdi/js</a>.
+     */
+    rightIcon?: string;
+    /** Button size. */
+    size?: ButtonSize;
+    /** Button variant. */
+    variant?: ButtonVariant;
+}
+declare type StyledButtonProps = Omit<ButtonProps, 'isDisabled' | 'variant' | 'color' | 'size' | 'fullWidth'> & {
+    $isDisabled: ButtonProps['isDisabled'];
+    $variant: ButtonProps['variant'];
+    $color: ButtonProps['color'];
+    $size: ButtonProps['size'];
+    $fullWidth: ButtonProps['fullWidth'];
+};
+
+/**
+ * Component style.
+ */
+declare const StyledButton: styled_components.StyledComponent<"button", any, Omit<ButtonProps, "color" | "isDisabled" | "size" | "variant" | "fullWidth"> & {
+    $isDisabled: boolean | undefined;
+    $variant: ButtonVariant | undefined;
+    $color: ColorPalette | undefined;
+    $size: ButtonSize | undefined;
+    $fullWidth: boolean | undefined;
+}, never>;
+
+/**
+ * The Button is a semantic button that looks like a button.
+ *
+ * For a semantic link that looks like a button, please use the ButtonLink component.
+ * For a semantic link that looks like a link, please use the Link component.
+ * For a semantic button that looks like a link, please use the LinkButton component.
+ */
+declare const Button: Comp<ButtonProps, HTMLButtonElement>;
+
+/**
+ * Component props.
+ */
+interface LinkProps extends ComponentProps<'a'> {
+    /** Prop to pass a custom react component instead of a simple HTML anchor (useful for Nextjs or React Router Link component). */
+    as?: 'a' | any;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+}
+declare type StyledLinkProps = Omit<LinkProps, 'isDisabled'> & {
+    $isDisabled: LinkProps['isDisabled'];
+};
+
+/**
+ * Component style.
+ */
+declare const StyledLink: styled_components.StyledComponent<"a", any, Omit<LinkProps, "isDisabled"> & {
+    $isDisabled: boolean | undefined;
+}, never>;
+
+/**
+ * The Link is a semantic link that looks like a link.
+ * Shoud be used for internal and external navigation only.
+ *
+ * For a semantic link that looks like a button, please use the ButtonLink component.
+ * For a semantic button that looks like a button, please use the Button component.
+ * For a semantic button that looks like a link, please use the LinkButton component.
+ */
+declare const Link: Comp<LinkProps, HTMLAnchorElement>;
+
+/**
+ * Component props.
+ */
+interface ButtonLinkProps extends Omit<LinkProps, 'color'>, Pick<ButtonProps, 'color' | 'leftIcon' | 'rightIcon' | 'size' | 'variant'> {
+}
+declare type StyledButtonLinkProps = Omit<ButtonLinkProps, 'isDisabled' | 'variant' | 'color' | 'size'> & {
+    $isDisabled: ButtonLinkProps['isDisabled'];
+    $variant: ButtonLinkProps['variant'];
+    $color: ButtonLinkProps['color'];
+    $size: ButtonLinkProps['size'];
+};
+
+/**
+ * The ButtonLink is a semantic link that looks like a button.
+ *
+ * For a semantic button that looks like a button, please use the Button component.
+ * For a semantic link that looks like a link, please use the Link component.
+ * For a semantic button that looks like a link, please use the LinkButton component.
+ */
+declare const ButtonLink: Comp<ButtonLinkProps, HTMLAnchorElement>;
+
+/**
+ * Context props.
+ */
+declare type CheckboxGroupState = {
+    /** Adds a value to the set of selected values. */
+    addValue(value: string): void;
+    /** Whether the checkbox group is disabled or not. */
+    readonly isDisabled: boolean;
+    /** Whether the checkbox group is read only or not. */
+    readonly isReadOnly: boolean;
+    /** Removes a value from the set of selected values. */
+    removeValue(value: string): void;
+    /** Sets the selected values. */
+    setValue(value: string[]): void;
+    /** Current selected values. */
+    readonly value: readonly string[];
+};
+/**
+ * Component orientation.
+ */
+declare const CheckboxGroupOrientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+declare type CheckboxGroupOrientation = ValueOf<typeof CheckboxGroupOrientation>;
+/**
+ * Component props.
+ */
+interface CheckboxGroupProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /**
+     * Default selected values.
+     * Used for uncontrolled version.
+     */
+    defaultValues?: string[];
+    /** Description of the checkbox group. */
+    description?: string;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the component is invalid or not. */
+    isInvalid?: boolean;
+    /** Whether the component is read only or not. */
+    isReadOnly?: boolean;
+    /** Whether the component is required or not. */
+    isRequired?: boolean;
+    /** Label of the checkbox group. */
+    label?: string;
+    /** Method to handle component change. */
+    onChange?(values: string[]): void;
+    /** Method to handle component change. */
+    orientation?: CheckboxGroupOrientation;
+    /** List of possible values. Useful to select all. */
+    possibleValues?: string[];
+    /**
+     * Currently selected values.
+     * Used for controlled version.
+     */
+    value?: string[];
+}
+declare type StyledCheckboxGroupProps = Omit<CheckboxGroupProps, 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'orientation' | 'isRequired'> & {
+    $isDisabled: CheckboxGroupProps['isDisabled'];
+    $isInvalid: CheckboxGroupProps['isInvalid'];
+    $isReadOnly: CheckboxGroupProps['isReadOnly'];
+    $isRequired: CheckboxGroupProps['isRequired'];
+    $orientation: CheckboxGroupProps['orientation'];
+};
+
+/**
+ * The CheckboxGroup component.
+ * Can be used as controlled or uncontrolled.
+ */
+declare const CheckboxGroup: Comp<CheckboxGroupProps, HTMLDivElement>;
+
+/**
+ * Component size.
+ */
+declare const CheckboxSize: {
+    readonly large: "large";
+    readonly small: "small";
+};
+declare type CheckboxSize = ValueOf<typeof CheckboxSize>;
+/**
+ * Component props.
+ */
+interface CheckboxProps extends Omit<ComponentProps<'label'>, 'onChange'> {
+    /** Whether the component can be autofocused. */
+    autoFocus?: boolean;
+    /** Color variant. */
+    color?: ColorPalette;
+    /**
+     * Default select status.
+     * Used for uncontrolled version.
+     * Shouldn't be used inside a group unless isControlled is force to true.
+     */
+    defaultSelected?: boolean;
+    /** Custom props to pass to the input element. */
+    inputProps?: ComponentProps<'input'>;
+    /** Custom ref object to pass to the input element. */
+    inputRef?: MutableRefObject<HTMLInputElement>;
+    /** Indicates that the component is forced to be controlled. */
+    isControlled?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the checkbox status is indeterminate or not. */
+    isIndeterminate?: boolean;
+    /** Whether the component is invalid or not. */
+    isInvalid?: boolean;
+    /** Whether the component is read only or not. */
+    isReadOnly?: boolean;
+    /** Whether the component is required or not. */
+    isRequired?: boolean;
+    /**
+     * Whether the component is selected or not.
+     * Used for controlled version.
+     * Shouldn't be used inside a group unless isControlled is force to true.
+     */
+    isSelected?: boolean;
+    /** Name to pass to the input element. */
+    name?: HTMLInputElement['name'];
+    /** Method to handle component change. */
+    onChange?(isChecked: boolean, value?: string, name?: string, event?: ChangeEvent<HTMLInputElement>, state?: CheckboxGroupState): void;
+    /** Size of the checkbox. */
+    size?: CheckboxSize;
+    /**
+     * Value to pass to the input element.
+     * Required within a group.
+     */
+    value?: HTMLInputElement['value'];
+}
+declare type StyledCheckboxProps = Omit<CheckboxProps, 'color' | 'isDisabled' | 'isInvalid' | 'isSelected' | 'isRequired' | 'size'> & {
+    $color: CheckboxProps['color'];
+    $isDisabled: CheckboxProps['isDisabled'];
+    $isInvalid: CheckboxProps['isInvalid'];
+    $isFocusVisible: boolean;
+    $isRequired: CheckboxProps['isRequired'];
+    $isSelected: CheckboxProps['isSelected'];
+    $size: CheckboxProps['size'];
+};
+
+/**
+ * The Checkbox component.
+ * Works both inside a CheckboxGroup or as standalone.
+ * Can be used as controlled or uncontrolled.
+ */
+declare const Checkbox: Comp<CheckboxProps, HTMLLabelElement>;
+
+/**
+ * Component variant.
+ */
+declare const FloatingActionButtonVariant: {
+    readonly round: "round";
+    readonly extended: "extended";
+};
+declare type FloatingActionButtonVariant = ValueOf<typeof FloatingActionButtonVariant>;
+/**
+ * Component size.
+ */
+declare const FloatingActionButtonSize: {
+    readonly large: "large";
+    readonly medium: "medium";
+    readonly small: "small";
+};
+declare type FloatingActionButtonSize = ValueOf<typeof FloatingActionButtonSize>;
+/**
+ * Component color.
+ */
+declare const FloatingActionButtonColor: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+};
+declare type FloatingActionButtonColor = ValueOf<typeof FloatingActionButtonColor>;
+/**
+ * Component props.
+ */
+interface FloatingActionButtonProps extends ComponentProps<'button'> {
+    /** Color variant. */
+    color?: FloatingActionButtonColor;
+    /**
+     * Icon path data (`d` property of the `path` SVG element).<br />
+     * See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />
+     * Recommended path data come from mdi/js.<br />
+     * See <a href="https://www.npmjs.com/package/@mdi/js">https://www.npmjs.com/package/@mdi/js</a>.
+     */
+    icon: string;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Preferred method to handle click, press and touch. */
+    onPress?: (e: PressEvent) => void;
+    /** FloatingActionButton size. */
+    size?: FloatingActionButtonSize;
+    /** Additional text for extended variant. */
+    text?: string;
+    /** FloatingActionButton variant. */
+    variant?: FloatingActionButtonVariant;
+}
+declare type StyledFloatingActionButtonProps = Omit<FloatingActionButtonProps, 'isDisabled' | 'variant' | 'color' | 'size' | 'icon'> & {
+    $isDisabled: FloatingActionButtonProps['isDisabled'];
+    $variant: FloatingActionButtonProps['variant'];
+    $color: FloatingActionButtonProps['color'];
+    $size: FloatingActionButtonProps['size'];
+};
+
+/**
+ * The Floating Action Button is a specific button which has an icon and can have a text or not.
+ *
+ * This component should use aria-label, aria-labelledby or aria-describedby to make this
+ * component usable with a screen reader in its Round variant (without text).
+ */
+declare const FloatingActionButton: Comp<FloatingActionButtonProps, HTMLButtonElement>;
+
+/**
+ * Component props.
+ */
+interface LinkButtonProps extends Omit<ButtonProps, 'color' | 'fullWidth' | 'leftIcon' | 'rightIcon' | 'size' | 'variant'> {
+}
+declare type StyledLinkButtonProps = Omit<LinkButtonProps, 'isDisabled'> & {
+    $isDisabled: LinkButtonProps['isDisabled'];
+};
+
+/**
+ * The LinkButton is a semantic button that looks like a link.
+ *
+ * For a semantic button that looks like a button, please use the Button component.
+ * For a semantic link that looks like a link, please use the Link component.
+ * For a semantic link that looks like a button, please use the ButtonLink component.
+ */
+declare const LinkButton: Comp<LinkButtonProps, HTMLButtonElement>;
+
+export { AppBar, AppBarProps, AppContainer, AppContainerContext, AppContainerProps, AppContainerState, AppContent, AppContentProps, AppSidePanel, AppSidePanelProps, Badge, BadgeProps, BadgeVariant, BreadcrumbItem, BreadcrumbItemProps, Breadcrumbs, BreadcrumbsProps, Button, ButtonLink, ButtonLinkProps, ButtonProps, ButtonSize, ButtonVariant, Checkbox, CheckboxGroup, CheckboxGroupOrientation, CheckboxGroupProps, CheckboxGroupState, CheckboxProps, CheckboxSize, Color, ColorPalette, Comp, Falsy, FloatingActionButton, FloatingActionButtonColor, FloatingActionButtonProps, FloatingActionButtonSize, FloatingActionButtonVariant, Icon, IconButton, IconButtonProps, IconButtonSize, IconProps, IconSize, Link, LinkButton, LinkButtonProps, LinkProps, Menu, MenuBarItems, MenuItem, SideNavigationMenu, SideNavigationMenuBar, SideNavigationMenuBarContextProps, SideNavigationMenuBarProps, SideNavigationMenuContextProps, SideNavigationMenuItem, SideNavigationMenuItemProps, SideNavigationMenuProps, SideNavigationMenuReducerAction, SideNavigationMenuReducerActionType, SideNavigationMenuReducerState, StyledAppBarProps, StyledAppContentProps, StyledAppSidePanelProps, StyledBadgeProps, StyledBreadcrumbItemProps, StyledBreadcrumbsProps, StyledButton, StyledButtonLinkProps, StyledButtonProps, StyledCheckboxGroupProps, StyledCheckboxProps, StyledFloatingActionButtonProps, StyledIconButtonProps, StyledIconProps, StyledLink, StyledLinkButtonProps, StyledLinkProps, StyledSideNavigationMenuBarProps, StyledSideNavigationMenuItemProps, StyledSideNavigationMenuProps, Theme, UseSideNavigationMenuBarProps, ValueOf, useAppSidePanel, useSideNavigationMenuBar };