1 | import * as React from "react";
|
2 | import { BoxProps } from "../Box";
|
3 | import { FlexProps } from "../Flex";
|
4 | import { PseudoBoxProps } from "../PseudoBox";
|
5 | import { Omit } from "../common-types";
|
6 |
|
7 | export interface ITabs {
|
8 | /**
|
9 | * The alignment of the tabs
|
10 | */
|
11 | align?: "start" | "center" | "end";
|
12 | /**
|
13 | * The style of the tabs to use
|
14 | */
|
15 | variant?:
|
16 | | "line"
|
17 | | "enclosed"
|
18 | | "enclosed-colored"
|
19 | | "soft-rounded"
|
20 | | "solid-rounded"
|
21 | | "unstyled";
|
22 | /**
|
23 | * If `true`, tabs will stretch to width of the tablist.
|
24 | */
|
25 | isFitted?: boolean;
|
26 | /**
|
27 | * The orientation of the <TabList/>.
|
28 | */
|
29 | orientation?: "vertical" | "horizontal";
|
30 | /**
|
31 | * The size of the tab (affects the font-size and padding).
|
32 | */
|
33 | size?: "sm" | "md" | "lg";
|
34 | /**
|
35 | * If `true`, the tabs will be manually activated and
|
36 | * display its panel by pressing Space or Enter.
|
37 | *
|
38 | * If `false`, the tabs will be automatically activated
|
39 | * and their panel is displayed when they receive focus.
|
40 | */
|
41 | isManual?: boolean;
|
42 | /**
|
43 | * The children of the tabs should be `TabPanel` and `TabList`.
|
44 | */
|
45 | children: React.ReactNode;
|
46 | /**
|
47 | * Callback when the index (controlled or un-controlled) changes.
|
48 | */
|
49 | onChange?: (index: number) => void;
|
50 | /**
|
51 | * The index of the activated tab
|
52 | */
|
53 | index?: number;
|
54 | /**
|
55 | * The index of the tab that should be activated initially
|
56 | */
|
57 | defaultIndex?: number;
|
58 | /**
|
59 | * The color scheme of the tabs
|
60 | *
|
61 | * 🚨Note: This should be one of the color keys in the theme that has `100` - `900` color values (e.g.`green`, `red`).
|
62 | * @see http://chakra-ui.com/theme#colors
|
63 | */
|
64 | variantColor?: string;
|
65 | }
|
66 |
|
67 | export type TabsProps = ITabs & Omit<BoxProps, "onChange" | "size">;
|
68 |
|
69 | declare const Tabs: React.FC<TabsProps>;
|
70 | export default Tabs;
|
71 |
|
72 | ////////////////////////////////////////////////////////////////////////
|
73 |
|
74 | export interface ITabList {
|
75 | /**
|
76 | * The children of the tab list should be `Tab`.
|
77 | */
|
78 | children: React.ReactNode;
|
79 | }
|
80 |
|
81 | export type TabListProps = ITabList & FlexProps;
|
82 | export const TabList: React.FC<TabListProps>;
|
83 |
|
84 | ////////////////////////////////////////////////////////////////////////
|
85 |
|
86 | export interface ITabPanel {
|
87 | /**
|
88 | * The id of the tab panel.
|
89 | * @private Used during `cloneElement`
|
90 | */
|
91 | id?: string;
|
92 | /**
|
93 | * If `true`, indicates that the panel is selected.
|
94 | * @private Used during `cloneElement`
|
95 | */
|
96 | isSelected?: boolean;
|
97 | /**
|
98 | * The children of the tab panel.
|
99 | */
|
100 | children: React.ReactNode;
|
101 | /**
|
102 | * The ref of the panel if it is selected.
|
103 | * @private Used during `cloneElement`
|
104 | */
|
105 | selectedPanelRef?: React.RefObject<HTMLElement>;
|
106 | }
|
107 | export type TabPanelProps = ITabPanel & BoxProps;
|
108 | export const TabPanel: React.FC<TabPanelProps>;
|
109 |
|
110 | ////////////////////////////////////////////////////////////////////////
|
111 |
|
112 | export interface ITabPanels {
|
113 | /**
|
114 | * The children of the tab panels should be `TabPanel`.
|
115 | */
|
116 | children: React.ReactNode;
|
117 | }
|
118 |
|
119 | export type TabPanelsProps = ITabPanels & BoxProps;
|
120 | export const TabPanels: React.FC<TabPanelsProps>;
|
121 |
|
122 | ////////////////////////////////////////////////////////////////////////
|
123 | type TabProps = PseudoBoxProps & React.ButtonHTMLAttributes<any>;
|
124 | export const Tab: React.FC<TabProps>;
|