@clement_lores/admin-design-system 1.0.0

package/types/src/atoms/label/label.d.ts

@@ -0,0 +1,79 @@
+import { SpaceProps, TypographyProps } from 'styled-system';
+import { NewColorProps as ColorProps } from '../../utils/color-props.js';
+import type { VariantType } from '../../theme.js';
+export type LabelVariantType = VariantType;
+/**
+ * Prop Types of a Label component.
+ * Apart from those explicitly specified below it extends all {@link ColorProps},
+ * {@link SpaceProps} and {@link TypographyProps}
+ *
+ * @memberof Label
+ * @alias LabelProps
+ * @property {string} [...] All props default to _label_ html component like `htmlFor`,
+ *                          `id` etc.
+ * @property {string} [...] Other props from {@link ColorProps}, {@link SpaceProps}
+ *                          and {@link TypographyProps}
+ */
+export type LabelProps = ColorProps & SpaceProps & TypographyProps & {
+    /** If label represents required field - appends star (*) */
+    required?: boolean;
+    /** If label should be in uppercase version */
+    uppercase?: boolean;
+    /** By default labels are displayed as a block. You can override this by setting `inline` */
+    inline?: boolean;
+    /** If label represents disabled field (dimmed version) */
+    disabled?: boolean;
+    /** Color variant */
+    variant?: LabelVariantType;
+    /** Label size */
+    size?: 'default' | 'lg';
+};
+/**
+ * @classdesc
+ *
+ * <img src="components/label.png" />
+ *
+ * Styled form of **label** element.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Label, LabelProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see LabelProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-label--default Storybook}
+ * @hideconstructor
+ * @example <caption>2 Different versions</caption>
+ * return (
+ * <Box p="xl">
+ *   <Text>
+ *     <Label uppercase>Some uppercase label</Label>
+ *   </Text>
+ *   <Text mt="default">
+ *     <Label required>Label for required field</Label>
+ *   </Text>
+ * </Box>
+ * )
+ * @section design-system
+ */
+declare const Label: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+} & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    /** If label represents required field - appends star (*) */
+    required?: boolean | undefined;
+    /** If label should be in uppercase version */
+    uppercase?: boolean | undefined;
+    /** By default labels are displayed as a block. You can override this by setting `inline` */
+    inline?: boolean | undefined;
+    /** If label represents disabled field (dimmed version) */
+    disabled?: boolean | undefined;
+    /** Color variant */
+    variant?: VariantType | undefined;
+    /** Label size */
+    size?: "default" | "lg" | undefined;
+}, never>;
+export { Label };
+export default Label;

package/types/src/atoms/label/label.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Label } from './index.js';
+export declare const Default: StoryObj;
+declare const meta: Meta<typeof Label>;
+export default meta;

package/types/src/atoms/link/index.d.ts

@@ -0,0 +1 @@
+export * from './link.jsx';

package/types/src/atoms/link/link.d.ts

@@ -0,0 +1,74 @@
+import { PropsWithChildren } from 'react';
+import { SpaceProps } from 'styled-system';
+import { NewColorProps as ColorProps } from '../../utils/color-props.js';
+/**
+ * Prop Types of a Link component.
+ * Apart from those explicitly specified below it extends all {@link ColorProps},
+ * and {@link SpaceProps}
+ *
+ * @memberof Link
+ * @alias LinkProps
+ * @property {string} [...] All props default to _a_ html component like `href`,
+ *                          `onClick` etc.
+ * @property {string} [...] Other props from {@link ColorProps} and {@link SpaceProps}
+ */
+export type LinkProps = ColorProps & SpaceProps & {
+    /** Defines if link should be uppercase */
+    uppercase?: boolean;
+    /** Color variant */
+    variant?: 'primary' | 'danger' | 'success' | 'info' | 'secondary';
+    /** Size variant */
+    size?: 'sm' | 'lg';
+} & PropsWithChildren;
+/**
+ * @classdesc
+ *
+ * <img src="components/link.png" />
+ *
+ * Styled form of Link element.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Link, LinkProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see LinkProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-link--default Storybook}
+ * @hideconstructor
+ * @example <caption>All color variants</caption>
+ * const variants = ['primary', 'danger', 'success', 'info', 'secondary']
+ * return (
+ * <Box py="xl">
+ *   {variants.map(variant => (
+ *      <Link href="#" variant={variant} mr="xl">{variant}</Link>
+ *   ))}
+ * </Box>
+ * )
+ * @example <caption>With icons</caption>
+ * return (
+ * <Box py="xl">
+ *   <Link href="#" mr="xl">
+ *     <Icon icon="Plus" />
+ *     With an icon
+ *   </Link>
+ * </Box>
+ * )
+ * @section design-system
+ */
+declare const Link: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+} & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    /** Defines if link should be uppercase */
+    uppercase?: boolean | undefined;
+    /** Color variant */
+    variant?: "success" | "info" | "primary" | "secondary" | "danger" | undefined;
+    /** Size variant */
+    size?: "sm" | "lg" | undefined;
+} & {
+    children?: import("react").ReactNode;
+}, never>;
+export { Link };
+export default Link;

package/types/src/atoms/link/link.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Link } from './index.js';
+export declare const Default: StoryObj;
+declare const meta: Meta<typeof Link>;
+export default meta;

package/types/src/atoms/loader/index.d.ts

@@ -0,0 +1 @@
+export * from './loader.jsx';

package/types/src/atoms/loader/loader.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+/**
+ * @classdesc
+ *
+ * <img src="components/loader.png" />
+ *
+ * Simple loader
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Loader } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-loader--default Storybook}
+ * @hideconstructor
+ * @subcategory Atoms
+ * @example
+ * return (
+ *   <Loader/>
+ * )
+ * @section design-system
+ */
+declare const Loader: React.FC;
+export { Loader };
+export default Loader;

package/types/src/atoms/loader/loader.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Loader } from './index.js';
+export declare const Default: StoryObj;
+declare const meta: Meta<typeof Loader>;
+export default meta;

package/types/src/atoms/overlay/index.d.ts

@@ -0,0 +1 @@
+export * from './overlay.jsx';

package/types/src/atoms/overlay/overlay.d.ts

@@ -0,0 +1,3 @@
+import { ZIndexProps } from 'styled-system';
+export declare const Overlay: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, ZIndexProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
+export default Overlay;

package/types/src/atoms/overlay/overlay.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Overlay } from './index.js';
+export declare const Default: StoryObj;
+declare const meta: Meta<typeof Overlay>;
+export default meta;

package/types/src/atoms/phone-input/index.d.ts

@@ -0,0 +1 @@
+export * from './phone-input.jsx';

package/types/src/atoms/phone-input/phone-input.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { PhoneInputProps as ReactPhoneInputProps } from 'react-phone-input-2';
+import { TypographyProps } from 'styled-system';
+import { InputProps } from '../input/index.js';
+/**
+ * Prop Types of a PhoneInput component.
+ * CurrencyInput is based on `react-currency-input-field` @see {@link https://github.com/bl00mber/react-phone-input-2 React Phone Input Field Component}
+ * It extends all {@link SpaceProps}, {@link TypographyProps} and {@link LayoutProps} and {@link https://github.com/bl00mber/react-phone-input-2#options React Phone Input Field Component Props}
+ * @memberof PhoneInput
+ * @alias PhoneInputProps
+ * @property {string} [...] All props default to _phoneinput_ html component like `onChange`,
+ *                          `value` etc.
+ * @property {string} [...] Props from {@link SpaceProps}, {@link TypographyProps}
+ *                          and {@link LayoutProps} + they extend {@link InputProps}
+ */
+export type PhoneInputProps = ReactPhoneInputProps & TypographyProps & InputProps & React.HTMLAttributes<HTMLDivElement>;
+/**
+ * @classdesc
+ *
+ * Wrapped `phoneinput` html element.
+ *
+ * ### Usage
+ *
+ * ```ts
+ * import { PhoneInput, PhoneInputProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-phoneinput--default Storybook}
+ * @see PhoneInputProps
+ * @hideconstructor
+ * @example
+ * return (
+ *   <Box p="xl">
+ *      <Label htmlFor="phoneinput1">Some example label</Label>
+ *      <PhoneInput id="phoneinput1" onChange={...} />;
+ *   </Box>
+ * )
+ * @section design-system
+ */
+declare const PhoneInput: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, object & ReactPhoneInputProps & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    borderless?: boolean | undefined;
+    variant?: "default" | "sm" | "lg" | "xl" | "xxl" | undefined;
+} & React.HTMLAttributes<HTMLDivElement>, string | number | symbol>;
+export { PhoneInput };
+export default PhoneInput;

package/types/src/atoms/phone-input/phone-input.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { PhoneInput } from './index.js';
+export declare const Default: StoryObj;
+export declare const Examples: StoryFn;
+declare const meta: Meta<typeof PhoneInput>;
+export default meta;

package/types/src/atoms/placeholder/index.d.ts

@@ -0,0 +1 @@
+export * from './placeholder.jsx';

package/types/src/atoms/placeholder/placeholder.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { LayoutProps } from 'styled-system';
+/**
+ * Prop Types of a Placeholder component.
+ * Apart from standard html props it extends {@link LayoutProps}
+ * @typedef {object} PlaceholderProps
+ * @memberof Placeholder
+ * @alias PlaceholderProps
+ * @property {string} [...] All props default to _div_ html component like `style`,
+ *                          `id` etc.
+ * @property {string} [...] Props from {@link LayoutProps}
+ */
+export type PlaceholderProps = LayoutProps & React.HTMLProps<HTMLDivElement> & {
+    as?: 'div' | 'span';
+};
+/**
+ * @classdesc
+ *
+ * <img src="components/placeholder.png" />
+ *
+ * Renders placeholder
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Placeholder, PlaceholderProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see PlaceholderProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-placeholder--default Storybook}
+ * @hideconstructor
+ * @example <caption>Image placeholder</caption>
+ * return (
+ *   <Box>
+ *     <Placeholder width={100} height={200} />
+ *   </Box>
+ * )
+ *
+ * @example <caption>Text placeholder</caption>
+ * return (
+ *   <Box>
+ *     <Label>Some name</Label>
+ *     <Placeholder width={400} height={14} />
+ *   </Box>
+ * )
+ * @section design-system
+ */
+declare const Placeholder: React.FC<PlaceholderProps>;
+export { Placeholder };
+export default Placeholder;

package/types/src/atoms/placeholder/placeholder.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { Placeholder } from './index.js';
+export declare const Default: StoryObj;
+export declare const textPlaceholder: StoryFn;
+declare const meta: Meta<typeof Placeholder>;
+export default meta;

package/types/src/atoms/radio/index.d.ts

@@ -0,0 +1 @@
+export * from './radio.jsx';

package/types/src/atoms/radio/radio.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+export type RadioProps = React.HTMLProps<HTMLInputElement>;
+/**
+ * @typedef {object} RadioProps
+ * @alias RadioProps
+ * @memberof Radio
+ * @property {string} [...] All props default to _radio_ html input like `onChange`,
+ *                          `checked` etc.
+ */
+/**
+ /**
+ * @classdesc
+ *
+ * <img src="components/radio.png" />
+ *
+ * HTML Radio
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Radio, RadioProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @see RadioProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-radio--default StoryBook}
+ * @hideconstructor
+ * @subcategory Atoms
+ * @example
+ * return (
+ *   <Box p="xl">
+ *      <Radio id="radio1"/>
+ *      <Label inline htmlFor="radio1" ml="default">Some example label</Label>
+ *   </Box>
+ * )
+ * @section design-system
+ */
+declare const Radio: React.FC<RadioProps>;
+export { Radio };
+export default Radio;

package/types/src/atoms/radio/radio.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { Radio } from './index.js';
+export declare const Default: StoryFn;
+declare const meta: Meta<typeof Radio>;
+export default meta;

package/types/src/atoms/section/index.d.ts

@@ -0,0 +1 @@
+export * from './section.jsx';

package/types/src/atoms/section/section.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @classdesc
+ *
+ * <img src="components/section.png" />
+ *
+ * Marks group of fields as a section. Has the same props as [Box]{@link BoxProps}
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Section } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-section--default Storybook}
+ * @hideconstructor
+ * @example
+ * return (
+ *   <Section>
+ *     <Text>Some text within a section</Text>
+ *     <Section>
+ *       <Text>Section can be nested</Text>
+ *     </Section>
+ *   </Section>
+ * )
+ * @section design-system
+ */
+declare const Section: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, object, string | number | symbol>;
+export { Section };
+export default Section;

package/types/src/atoms/section/section.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { Section } from './index.js';
+export declare const Default: StoryFn;
+declare const meta: Meta<typeof Section>;
+export default meta;

package/types/src/atoms/table/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Table } from './table.jsx';
+export { default as TableHead } from './table-head.jsx';
+export { default as TableBody } from './table-body.jsx';
+export { default as TableCell } from './table-cell.jsx';
+export { default as TableRow } from './table-row.jsx';
+export { default as TableCaption } from './table-caption.jsx';

package/types/src/atoms/table/table-body.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @component
+ * @private
+ */
+declare const TableBody: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {}, never>;
+export default TableBody;

package/types/src/atoms/table/table-caption.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @component
+ * @private
+ */
+declare const TableCaption: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {}, never>;
+export default TableCaption;

package/types/src/atoms/table/table-cell.d.ts

@@ -0,0 +1,9 @@
+import { LayoutProps, SpaceProps } from 'styled-system';
+/**
+ * @component
+ * @private
+ */
+declare const TableCell: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | (Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+}), never>;
+export default TableCell;

package/types/src/atoms/table/table-head.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @component
+ * @private
+ */
+declare const TableHead: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {}, never>;
+export default TableHead;

package/types/src/atoms/table/table-row.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @component
+ * @private
+ */
+declare const TableRow: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {}, never>;
+export default TableRow;

package/types/src/atoms/table/table.d.ts

@@ -0,0 +1,90 @@
+import { LayoutProps } from 'styled-system';
+/**
+ * @classdesc
+ *
+ * <img src="components/table.png" />
+ *
+ * Main Table wrapper. Along with _TableRow_, _TableCell_, _TableCaption_,
+ * _TableHead_ and _TableBody_ gives you the powerful tool for building tables.
+ *
+ * ### Related Components
+ *
+ * - _Table_: {@link LayoutProps} & standard table html props
+ * - _TableBody_: standard tbody html props
+ * - _TableCell_: {@link SpaceProps} & {@link ColorProps} & standard td html props
+ * - _TableHead_: standard thead html props
+ * - _TableRow_:  standard tr html props
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import {
+ *   Table,
+ *   TableRow,
+ *   TableCell,
+ *   TableCaption,
+ *   TableHead,
+ *   TableBody,
+ * } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @hideconstructor
+ * @subcategory Atoms
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-table--default Storybook}
+ * @example
+ * return (
+ * <Box pt="x4">
+ * <Table>
+ *   <TableCaption>
+ *     <Text as="span">Monthly savings</Text>
+ *     <Button variant="text" size="sm">
+ *       <Icon icon="Trash" />
+ *       Remove
+ *     </Button>
+ *   </TableCaption>
+ *   <TableHead>
+ *     <TableRow>
+ *       <TableCell><CheckBox /></TableCell>
+ *       <TableCell>
+ *         <Link href="#">
+ *           Name
+ *           <Icon icon="ChevronUp" />
+ *         </Link>
+ *       </TableCell>
+ *       <TableCell>
+ *         <Link href="#">
+ *           Last
+ *           <Icon icon="ChevronDown" />
+ *         </Link>
+ *       </TableCell>
+ *       <TableCell>Surname</TableCell>
+ *       <TableCell>Gender</TableCell>
+ *       <TableCell>Age</TableCell>
+ *     </TableRow>
+ *   </TableHead>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell><CheckBox /></TableCell>
+ *       <TableCell>Value 1</TableCell>
+ *       <TableCell>Value 2</TableCell>
+ *       <TableCell>Value 2</TableCell>
+ *       <TableCell>Value 2</TableCell>
+ *       <TableCell>Value 2</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell><CheckBox /></TableCell>
+ *       <TableCell>Value 1</TableCell>
+ *       <TableCell>Value 2</TableCell>
+ *       <TableCell>Value 2</TableCell>
+ *       <TableCell>Value 2</TableCell>
+ *       <TableCell>Value 2</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ * </Box>
+ * )
+ * @section design-system
+ */
+declare const Table: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
+export default Table;

package/types/src/atoms/table/table.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Table } from './index.js';
+export declare const Default: StoryObj<{
+    onClick: (e: any) => void;
+}>;
+declare const meta: Meta<typeof Table>;
+export default meta;

package/types/src/atoms/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tab.jsx';
+export * from './tabs.jsx';

package/types/src/atoms/tabs/tab.d.ts

@@ -0,0 +1,17 @@
+import React, { PropsWithChildren } from 'react';
+export interface TabProps extends PropsWithChildren {
+    /**
+     * ID of the Tab. It has to be a unique string
+     */
+    id: string;
+    /**
+     * Title of the Tab that will be shown on the tab navigation bar.
+     */
+    label: string;
+}
+/**
+ * Renders children inside Tabs component. Each Tab will add a single tab in
+ * the navigation bar.
+ */
+export declare const Tab: React.FC<TabProps>;
+export default Tab;

package/types/src/atoms/tabs/tabs.d.ts

@@ -0,0 +1,49 @@
+import React, { PropsWithChildren, ComponentType } from 'react';
+export interface TabsProps extends PropsWithChildren {
+    /**
+     * Controls which Tab is currently displayed. It should be the same as an ID
+     * of one of the tabs.
+     */
+    currentTab: string;
+    /**
+     * Called with Tab ID when the user clicks on a tab navigation button.
+     */
+    onChange?: (tabId: string) => void;
+    /**
+     * Whether tabs container should fill remaining space
+     */
+    fullWidth?: boolean;
+    /**
+     * Custom component to use as the Tabs header instead of default 'div'.
+     */
+    headerComponent?: ComponentType<PropsWithChildren<any>>;
+    /**
+     * Custom component to use as the Tab button instead of default 'button'.
+     */
+    buttonComponent?: ComponentType<PropsWithChildren<{
+        onClick: () => void;
+        active: boolean;
+        tabId: string;
+        role?: string;
+    }>>;
+    /**
+     * Custom component to use as the Tabs content container instead of default 'div'.
+     */
+    contentComponent?: ComponentType<PropsWithChildren<{
+        role?: string;
+    }>>;
+}
+interface TabContextType {
+    registerTab: (id: string, title: string) => void;
+    unregisterTab: (id: string) => void;
+    currentTab: string;
+}
+/**
+ * Tabs component renders a tab navigation bar that lets the user select a Tab
+ * to display below. Children of the selected Tab are then rendered below the
+ * navigation bar.
+ */
+export declare const Tabs: React.FC<TabsProps>;
+export declare const TabContext: React.Context<TabContextType>;
+export declare const useTabs: () => TabContextType;
+export default Tabs;