@ntbjs/react-components 2.0.14 → 3.0.0-rc.2

package/types/components/data/Badge/Badge.d.ts

@@ -0,0 +1,120 @@
+import React from 'react';
+import * as S from './Badge.styled';
+type BadgeOwnProps = {
+    /**
+     * An Icon to show in the badge alongside with a text
+     */
+    badgeIcon?: React.ReactNode;
+    /**
+     * Content to be showed in the badge – e.g. number of results.
+     * ReactNode, not the union — func is never valid, null was missing.
+     */
+    badgeContent?: React.ReactNode;
+    /**
+     * The element(s) for which the badge will be displayed – e.g. an icon or a text.
+     */
+    children?: React.ReactNode | string;
+    /**
+     * Whether the badge should be displayed in an elevated position on top of the child element(s) or not.
+     */
+    elevated?: boolean;
+    /**
+     * Whether the element is active or not (e.g. the currently selected menu item). This changes the color of the badge.
+     */
+    active?: boolean;
+    /**
+     * There is an error present – 'error be prioritized over warnings if both are set to `true`.
+     */
+    error?: boolean;
+    /**
+     * There is a warning present.
+     */
+    warning?: boolean;
+    /**
+     * Font size for the badge
+     */
+    fontSize?: number | string;
+    /**
+     * Font weight for the badge
+     */
+    fontWeight?: number | string;
+    /**
+     * Line weight for the badge
+     */
+    lineHeight?: number | string;
+    /**
+     * Colors of the font in the manner of [darkThemeColor, lightThemeColor]
+     */
+    colors?: string[];
+    /**
+     * Background colors for the badge in the manner of [darkThemeColor, lightThemeColor]
+     */
+    backgroundColors?: string[];
+    /**
+     * Top and bottom padding for the badge
+     */
+    verticalPadding?: number;
+    /**
+     * Left and right padding for the badge
+     */
+    horizontalPadding?: number;
+    /**
+     * Height of the badge
+     */
+    height?: number;
+    /**
+     * Minimum height of the badge
+     */
+    minHeight?: number;
+    /**
+     * Width of the badge
+     */
+    width?: number;
+    /**
+     * Minimum width of the badge
+     */
+    minWidth?: number;
+    /**
+     * Border colors in the manner of [darkThemeColor, lightThemeColor]. When provided, a 1px solid border is applied.
+     */
+    borderColors?: string[];
+};
+/**
+ * Badges show a bubble containing a `number` or a `string`. It may be used by itself or with children passed as props
+ * (to display a badge on top of an icon, for example, pass the icon as the child).
+ *
+ * If the badge content is passed as a `float`, it will be rounded up to the nearest `integer`,
+ * and if the number is higher than 1 000 or 1 000 000 it will be abbreviated to for example "1.4K" or "1.4M" respectively.
+ * If you need to display a `float` instead of a rounded `integer`, pass it as a `string` instead (e.g. "1,4").
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { Badge } from '@ntbjs/react-components/data'
+ * // or
+ * import Badge from '@ntbjs/react-components/data/Badge'
+ * ```
+ * ## Props
+ * ```
+ * Pass `badgeIcon={<svg></svg>}` to display an icon.
+ * Pass a number or string to the badgeContent to display it alongside the icon.
+ * Pass `align={"left"}`or `align={"center"}` to align content.
+ * Pass `elevated={true}` to display the badge on top of the children
+ * Pass `active={true}` to reflect the active status of the badge
+ * Pass `error={true}` to reflect the error status of the badge
+ * Pass `warning={true}` to reflect the warning status of the badge
+ * Pass `fontSize={15}` to set the font size of the badge in pixel
+ * Pass `fontWeight={500}` to set the font weight of the badge
+ * Pass `lineHeight={12}` to set the line height of the badge in pixel
+ * Pass `colors={[#ffffff, #000000]}` to set the font color of the badge
+ * Pass `backgroundColors={[#ffffff, #000000]}` to set the background color of the badge
+ * Pass `verticalPadding={15}` to set the bottom and top padding of the badge in pixel
+ * Pass `horizontalPadding={20}` to set the left and right padding of the badge in pixel
+ * Pass `height={24}` to set the height of the badge in pixel
+ * Pass `minHeight={24}` to set the minimum height of the badge in pixel
+ * Pass `width={50}` to set the width of the badge in pixel
+ * Pass `minWidth={32}` to set the minimum width of the badge in pixel
+ *  ```
+ */
+declare const Badge: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, S.BadgeStyleProps>, never>, "ref">, keyof BadgeOwnProps> & BadgeOwnProps & React.RefAttributes<any>>;
+export default Badge;

package/types/components/data/Badge/Badge.styled.d.ts

@@ -0,0 +1,33 @@
+export interface BadgeStyleProps {
+    $elevated?: boolean;
+    $hasChildren?: boolean;
+}
+interface BadgeLabelStyleProps {
+    $elevated?: boolean;
+    $active?: boolean;
+    $error?: boolean;
+    $warning?: boolean;
+    $lineHeight?: number | string;
+    $horizontalPadding?: number;
+    $minHeight?: number;
+    $minWidth?: number;
+    $backgroundColors?: string[];
+    $colors?: string[];
+    $borderColors?: string[];
+    verticalPadding?: number;
+    $elevatedverticalPadding?: number;
+    elevated?: boolean;
+    error?: boolean;
+    fontSize?: number | string;
+    fontWeight?: number | string;
+    height?: number;
+    width?: number;
+}
+interface BadgeIconStyleProps {
+    $useGutter?: boolean;
+}
+export declare const Badge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, BadgeStyleProps>, never>> & string;
+export declare const BadgeChildrenContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, never>, never>> & string;
+export declare const BadgeLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, BadgeLabelStyleProps>, never>> & string;
+export declare const BadgeIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, BadgeIconStyleProps>, never>> & string;
+export {};

package/types/components/data/Badge/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Badge';

package/types/components/data/Popover/Popover.d.ts

@@ -0,0 +1,116 @@
+import React from 'react';
+import type { Middleware } from '@floating-ui/react';
+import type { PopoverPlacement } from '../../../hooks/useFloatingPopover';
+export type PopoverAppendTo = 'parent' | Element | ((reference: Element) => Element);
+type PopoverOwnProps = {
+    /**
+     * The content of the `Popover`.
+     */
+    content: string | React.ReactElement<any>;
+    /**
+     * Whether the popover's content is interactive and where it renders (inline by default for interactive popovers).
+     */
+    interactive?: boolean;
+    /**
+     * Preferred placement; 12 concrete names need no Popper→Floating UI translation. Three `auto*` values select `autoPlacement()` instead of `flip()`.
+     */
+    placement?: PopoverPlacement;
+    /**
+     * Duration in ms of the transition animation.
+     */
+    duration?: number;
+    /**
+     * Events that cause the popover to show (space-separated). `''` means no triggers, `undefined` means `'mouseenter focus'`, component defaults to `'click focus'`.
+     */
+    trigger?: string;
+    /**
+     * `[skidding, distance]`; distance is the gap between reference and arrow tip (not box), absorbing the old `+15` offset.
+     */
+    offset?: number[];
+    /**
+     * Whether the popover has an arrow; also moves the box even when not drawn (existing behaviour, reproduced).
+     */
+    arrow?: boolean;
+    /**
+     * Pass a boolean to control visibility; both `true` and `false` disable native triggers. `onClickOutside` still fires in controlled mode.
+     */
+    visible?: boolean;
+    /**
+     * @deprecated Accepted and ignored; use `middleware` instead.
+     */
+    modifiers?: any[];
+    /**
+     * Extra Floating UI middleware, appended after the built-in chain; one internal caller needed this for width matching.
+     */
+    middleware?: Middleware[];
+    /**
+     * Max-width of the popover box, as a CSS length. Defaults to `'none'`, which is what tippy
+     * received and wrote inline on every popover in both consumers.
+     */
+    maxWidth?: string;
+    /**
+     * Whether the `Popover` contains a context menu.
+     * This will remove the default arrow, and apply styling.
+     *
+     * It also makes a click on a `ContextMenuItem` close the menu — see
+     * `handleContextMenuClick`.
+     */
+    contextMenu?: boolean;
+    /**
+     * Whether the `Popover` contains a context menu which is the sublevel of another context menu.
+     * This will automatically set placement, spacing and trigger events, add a dropdown icon, etc.
+     */
+    contextMenuSublevel?: boolean;
+    /**
+     * `z-index` of the positioned element (default: 9999, tippy's default).
+     */
+    zIndex?: number;
+    /**
+     * A disabled popover can never open, even under a controlled `visible={true}` — tippy's
+     * semantics.
+     */
+    disabled?: boolean;
+    /**
+     * Where the popover is rendered (default: inline for interactive popovers, document.body otherwise).
+     */
+    appendTo?: PopoverAppendTo;
+    /** Fired when a press lands outside both the reference and the popover. */
+    onClickOutside?: (event?: Event) => void;
+    /**
+     * Fired when the popover opens. tippy's `onShow`, minus its instance argument.
+     */
+    onShow?: () => void;
+    /**
+     * Fired when the popover closes; one internal caller (inputs/Button) depends on it to reset dropdown-is-active class.
+     */
+    onHide?: () => void;
+    /**
+     * Content of the `Popover`.
+     */
+    children: React.ReactNode;
+};
+/**
+ * The `Popover` is a transient view that shows on a content screen when a user clicks on a control button or within a defined area.
+ * A `Popover` renders a temporary context to get user’s attention and to hide unnecessary interactions.
+ *
+ * This component is used with the `Button` and `ContextMenu` components to create dropdown menus and context menus.
+ * See their documentation for usage examples.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { Popover } from '@ntbjs/react-components/data'
+ * // or
+ * import Popover from '@ntbjs/react-components/data/Popover'
+ * ```
+ *
+ * ### Usage example
+ *
+ * ``` js
+<Popover content={<img alt="Dummy content" src={dummyImage} />}>
+  <ActionButton icon={<DeleteIcon />} onClick={() => {}} />
+</Popover>
+ * ```
+ */
+declare const Popover: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>, "ref">, keyof PopoverOwnProps> & PopoverOwnProps & React.RefAttributes<any>>;
+export default Popover;

package/types/components/data/Popover/Popover.styled.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The popover box — what `.tippy-box` was.
+ *
+ * `Popover.tsx` puts the transition styles and the `max-width` on this element inline and
+ * the POSITION on its parent, matching the split tippy used (animated box inside a
+ * Popper-positioned root) and the one `Tooltip` and the three existing Floating UI sites
+ * use.
+ *
+ * `max-height: inherit` is not decorative and neither is the `.tippy-content` chain below
+ * it. `size()` writes its cap onto the POSITIONER (`elements.floating`), exactly where
+ * `popper-max-size-modifier` + `applyMaxSize` used to write `state.styles.popper.maxHeight`,
+ * so the cap has to be inherited down box → `.tippy-content` → its child to reach the
+ * element that actually scrolls.
+ */
+export declare const Popover: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;

package/types/components/data/Popover/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Popover';

package/types/components/data/SeverityBadge/SeverityBadge.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+type SeverityBadgeOwnProps = {
+    /** Severity level (1-5). 1-2 = Info, 3-4 = Limited use, 5 = Highly restricted. */
+    severity: 1 | 2 | 3 | 4 | 5;
+    /** Badge content — string or JSX node (e.g. label with remove button). */
+    label: React.ReactNode;
+    /** Override the default information icon. Pass null to suppress. */
+    icon?: React.ReactNode;
+    /** Font size in pixels. */
+    fontSize?: number;
+    /** Font weight. */
+    fontWeight?: number;
+    /** Badge height in pixels. */
+    height?: number;
+    /** Left and right padding in pixels. */
+    horizontalPadding?: number;
+    /** Top and bottom padding in pixels. */
+    verticalPadding?: number;
+};
+/**
+ * A severity-aware badge that maps a severity level (1-5) to the appropriate
+ * color scheme and icon. Thin wrapper around Badge.
+ *
+ * ### Import
+ *
+ * ```js
+ * import { SeverityBadge } from "@ntbjs/react-components/data";
+ * // named exports for advanced use
+ * ```
+ */
+declare const SeverityBadge: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, import("../Badge/Badge.styled").BadgeStyleProps>, never>, "ref">, keyof {
+    badgeIcon?: React.ReactNode;
+    badgeContent?: React.ReactNode;
+    children?: React.ReactNode | string;
+    elevated?: boolean;
+    active?: boolean;
+    error?: boolean;
+    warning?: boolean;
+    fontSize?: number | string;
+    fontWeight?: number | string;
+    lineHeight?: number | string;
+    colors?: string[];
+    backgroundColors?: string[];
+    verticalPadding?: number;
+    horizontalPadding?: number;
+    height?: number;
+    minHeight?: number;
+    width?: number;
+    minWidth?: number;
+    borderColors?: string[];
+}> & {
+    badgeIcon?: React.ReactNode;
+    badgeContent?: React.ReactNode;
+    children?: React.ReactNode | string;
+    elevated?: boolean;
+    active?: boolean;
+    error?: boolean;
+    warning?: boolean;
+    fontSize?: number | string;
+    fontWeight?: number | string;
+    lineHeight?: number | string;
+    colors?: string[];
+    backgroundColors?: string[];
+    verticalPadding?: number;
+    horizontalPadding?: number;
+    height?: number;
+    minHeight?: number;
+    width?: number;
+    minWidth?: number;
+    borderColors?: string[];
+} & React.RefAttributes<any>, "ref">, keyof SeverityBadgeOwnProps> & SeverityBadgeOwnProps & React.RefAttributes<any>>;
+export default SeverityBadge;

package/types/components/data/SeverityBadge/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SeverityBadge';

package/types/components/data/Tab/Tab.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type TabOwnProps = {
+    children?: any;
+    hidden?: boolean;
+    /**
+     * The tab's clickable header, conventionally a `Badge`. Not read by Tab itself; Tabs extracts it.
+     */
+    trigger?: React.ReactElement<any>;
+};
+/**
+ * This is a component to help you get started with development.
+ */
+declare const Tab: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>, never>, never>, "ref">, keyof TabOwnProps> & TabOwnProps & React.RefAttributes<any>>;
+export default Tab;

package/types/components/data/Tab/Tab.styled.d.ts

@@ -0,0 +1 @@
+export declare const Tab: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>, never>, never>> & string;

package/types/components/data/Tab/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Tab';

package/types/components/data/Tabs/Tabs.d.ts

@@ -0,0 +1,111 @@
+import React from 'react';
+import * as S from './Tabs.styled';
+type TabsOwnProps = {
+    children?: any[] | any;
+    /**
+     * Whether `Tabs` component has a background color
+     */
+    backgroundColor?: string;
+    /**
+     * Whether `tabs` will have a predefined min-height.
+     */
+    defaultMinHeight?: string;
+    /**
+     * Custom padding.
+     */
+    customPadding?: string;
+    /**
+     * Callback for clicked tab
+     */
+    onTabClick?: (...args: any[]) => any;
+};
+/**
+ * Tabs that let you group content
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { Tabs, Tab } from '@ntbjs/react-components/data'
+ * // or
+ * import Tabs from '@ntbjs/react-components/data/Tabs'
+ * import Tab from '@ntbjs/react-components/data/Tab'
+ * ```
+ * ### Tab - Tabs - Badge
+ * `Tab`, `Tabs` and `Badge` must be used in order to implement the component.
+ * ```
+ * <Tabs>
+ *  <Tab trigger={<Badge>Tab title</Badge>}>
+ *    Tab content
+ *  </Tab>
+ * </Tabs>
+ * ```
+ *  ## Wrapping
+ *  Content (data displayed inside the `Tab`) is wrapped by `Tab`:
+ *  ```
+ * <Tab>
+ *    Tab content
+ * </Tab>
+ * ```
+ *   ### Badge
+ * The tab title is wrapped by `Badge` (which is passed as the trigger prop inside `Tab`):
+ *
+ *Props that can be passed inside the `Badge` component are: `badgeContent`, `active`, `error`, `warning` (check out the `Badge` component documentation for props options).
+ *  ```
+ * <Tab trigger={<Badge>Tab title</Badge>}>
+ *    Tab content
+ * </Tab>
+ * ```
+ * All tabs are wrapped by `Tabs`:
+ *  ```
+ * <Tabs>
+ *  <Tab trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>
+ *  <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>
+ *  <Tab trigger={<Badge>Tab title 3</Badge>}>Tab content 3</Tab>
+ *  <Tab trigger={<Badge>Tab title 4</Badge>}>Tab content 4</Tab>
+ *  <Tab trigger={<Badge>Tab title 5</Badge>}>Tab content 5</Tab>
+ * </Tabs>
+ * ```
+ *  ## Props
+ * A `backgroundColor` prop can be passed as a string to set the `Tabs` component background color.
+ *    ```
+ *  <Tabs backgroundColor={'#bfe0d5'}>
+ *  <Tab  trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>
+ *  <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>
+ * </Tabs>
+ * ```
+ *  ### hidden
+ * A single Tab can be hidden by using the `hidden={true||false}` prop (this is useful when the tab has empty content):
+ *   ```
+ *  <Tabs>
+ *  <Tab hidden={true} trigger={<Badge>Tab title 1</Badge>}></Tab>
+ *  <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>
+ *  <Tab hidden={true} trigger={<Badge>Tab title 3</Badge>}></Tab>
+ *  <Tab trigger={<Badge>Tab title 4</Badge>}>Tab content 4</Tab>
+ *  <Tab hidden={true} trigger={<Badge>Tab title 5</Badge>}></Tab>
+ * </Tabs>
+ * ```
+ *  ### Default minHeight
+ * A `defaultMinHeight` prop can be passed to the Tabs component to set a predefined min-height.
+ *
+ * Pass `defaultMinHeight={'value px'}` on the `Tabs` component to use this feature.
+ *   ```
+ *  <Tabs defaultMinHeight={'500px'}>
+ *  <Tab  trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>
+ *  <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>
+ * </Tabs>
+ * ```
+ *
+ *   ### Custom padding
+ * A `customPadding` prop can be passed to the Tabs component to set a custom padding on the tabs. The custom padding is applied the the Tabs options,
+ * not to the content within the Tabs.
+ *
+ * Pass `customPadding={'value px'}` on the `Tabs` component to use this feature.
+ *   ```
+ *  <Tabs customPadding={'40px'}>
+ *  <Tab  trigger={<Badge>Tab title 1</Badge>}>Tab content 1</Tab>
+ *  <Tab trigger={<Badge>Tab title 2</Badge>}>Tab content 2</Tab>
+ * </Tabs>
+ * ```
+ */
+declare const Tabs: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, S.TabsStyleProps>, never>, "ref">, keyof TabsOwnProps> & TabsOwnProps & React.RefAttributes<any>>;
+export default Tabs;

package/types/components/data/Tabs/Tabs.styled.d.ts

@@ -0,0 +1,26 @@
+/** Props of the `Tabs` root, i.e. what `Tabs.tsx` passes to `S.Tabs`. */
+export interface TabsStyleProps {
+    /** `backgroundColor` — `PropTypes.string`, a CSS colour, interpolated raw. */
+    $backgroundColor?: string;
+}
+/**
+ * Shared by `TabHeaders` and `TabHeaderBorder`. Defect: `custompadding` has no `$`, leaks to DOM. Typed as `number | string` to match component default of 0.
+ */
+interface TabPaddingStyleProps {
+    /** `customPadding` — see the interface JSDoc; both the leak and the union are there. */
+    custompadding?: number | string;
+}
+/** Props of `TabHeader`, one `<li>` per tab. */
+interface TabHeaderStyleProps {
+    /**
+     * `tab.key === activeTab`, derived in the component, so genuinely `boolean`. Read both
+     * in the `$active &&` block and inside the two `themeProp()` callbacks below.
+     */
+    $active?: boolean;
+}
+export declare const Tabs: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, TabsStyleProps>, never>> & string;
+export declare const TabHeaders: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>>, TabPaddingStyleProps>, never>> & string;
+export declare const TabHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>>, TabHeaderStyleProps>, never>> & string;
+export declare const TabContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const TabHeaderBorder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, TabPaddingStyleProps>, never>> & string;
+export {};

package/types/components/data/Tabs/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Tabs';

package/types/components/data/Tooltip/Tooltip.d.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+import type { PopoverPlacement, PopperOffset } from '../../../hooks/useFloatingPopover';
+export type TooltipAppendTo = 'parent' | Element | ((reference: Element) => Element);
+type TooltipOwnProps = {
+    /**
+     * The content of the `Tooltip`.
+     *
+     * **NB!** If the content is a `string`, it should be wrapped in a tag, e.g.
+     * `<span>{content}</span>`. The requirement outlived its original cause — it was a
+     * `@tippyjs/react` quirk — but it is kept because consumers have written to it.
+     */
+    content: string | React.ReactElement<any>;
+    /**
+     * Determines if the tooltip has interactive content inside of it, so that it can be
+     * hovered over and clicked inside without hiding.
+     */
+    interactive?: boolean;
+    /**
+     * The preferred placement of the tooltip. Note that the flip middleware can change this
+     * to the opposite placement if it has more space.
+     */
+    placement?: PopoverPlacement;
+    /**
+     * Duration in ms of the transition animation.
+     */
+    duration?: number;
+    /**
+     * Events that cause the tooltip to show (space-separated). Defaults to `'mouseenter focus'`, `''` means no triggers.
+     */
+    trigger?: 'mouseenter' | 'mouseenter focus' | 'click' | 'focusin' | 'mouseenter click' | '';
+    /**
+     * Pass a boolean to control visibility; both `true` and `false` disable native triggers. `undefined` leaves uncontrolled.
+     */
+    visible?: boolean;
+    /**
+     * Whether the arrow is rendered. Defaults to `true`, which is tippy's default and was
+     * therefore already the behaviour; 6 consumer call sites pass `false`.
+     */
+    arrow?: boolean;
+    /**
+     * `z-index` of the positioned element (default: 9999, tippy's default).
+     */
+    zIndex?: number;
+    /**
+     * Disabled tooltip can never open, even under controlled `visible={true}` (tippy semantics).
+     */
+    disabled?: boolean;
+    /**
+     * `[skidding, distance]`, Popper's convention, where `distance` is the gap between the
+     * reference and the tooltip BOX. Defaults to tippy's `[0, 10]`.
+     */
+    offset?: PopperOffset;
+    /**
+     * Cap on the box's width, in px. Defaults to 350 — tippy's default, and applied to every
+     * tooltip today, so it decides where text wraps.
+     */
+    maxWidth?: number;
+    /**
+     * Where the tooltip is rendered. Defaults to `document.body`. See `TooltipAppendTo`.
+     */
+    appendTo?: TooltipAppendTo;
+    /** Fired when a press lands outside both the reference and the tooltip. */
+    onClickOutside?: (event?: Event) => void;
+    /**
+     * @deprecated Accepted and IGNORED. This was a Popper `modifiers` array; Floating UI has
+     * middleware instead and the two are not translatable prop-for-prop. Kept so that no
+     * existing call site throws — plan C6.
+     */
+    modifiers?: unknown;
+    /**
+     * @deprecated Accepted and IGNORED, for the same reason as `modifiers`.
+     */
+    popperOptions?: unknown;
+    children?: React.ReactNode;
+};
+/**
+ * Tooltips display informative text when users hover over, focus on, or tap an element.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { Tooltip } from '@ntbjs/react-components/data'
+ * // or
+ * import Tooltip from '@ntbjs/react-components/data/Tooltip'
+ * ```
+ */
+declare const Tooltip: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>, "ref">, keyof TooltipOwnProps> & TooltipOwnProps & React.RefAttributes<any>>;
+export default Tooltip;

package/types/components/data/Tooltip/Tooltip.styled.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The tooltip box — what `.tippy-box` was.
+ *
+ * `Tooltip.tsx` puts the transition styles and the `max-width` on this element inline and
+ * the POSITION on its parent, matching the split tippy used (animated box inside a
+ * Popper-positioned root) and the one the three existing Floating UI sites use.
+ */
+export declare const Tooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;

package/types/components/data/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Tooltip';