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

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

@@ -0,0 +1,27 @@
+import React from 'react';
+type TabOwnProps = {
+    children?: any;
+    hidden?: boolean;
+    /**
+     * The tab's clickable header, conventionally a `Badge`:
+     * `<Tab trigger={<Badge>Tab title</Badge>}>`.
+     *
+     * NOT DECLARED BY THE OLD propTypes AND NOT READ BY THIS COMPONENT — which is why
+     * neither the codemod nor the widening pass could produce it, and why it is
+     * hand-written here. `Tab` is a data carrier: `Tabs.tsx` walks its children with
+     * `child.type === Tab` and lifts `child.props?.trigger` out, then renders it inside
+     * `S.TabHeader`. The `<Tab>` element itself is never mounted, so `trigger` never
+     * reaches the DOM and there is no attribute leak to fix.
+     *
+     * `ReactElement`, not `ReactNode`: `Tabs.handleTabClick` reads
+     * `tab.trigger.props.children` to build the `triggerText` it passes to `onTabClick`.
+     * A string trigger would compile under `ReactNode` and silently produce an empty
+     * `triggerText`. All 44 call sites in `src` pass a `<Badge>`.
+     */
+    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,42 @@
+/** 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`, the two components `Tabs.tsx` hands
+ * `custompadding` to. One interface rather than two because the key, the value and the
+ * defect are the same at both sites; a change here is a change to both, which is the
+ * point of naming them together.
+ *
+ * DEFECT, DECLARED NOT FIXED: `custompadding` HAS NO `$`, so `shouldForwardProp` forwards
+ * it and it lands on the rendered `<ul>` and `<div>`. This is not inferred — it is in
+ * `scripts/r19-harness/baseline.json` as `<ul custompadding="40px" …>`. The fix is to
+ * rename it `$customPadding` at both ends, which REMOVES a DOM attribute and so belongs to
+ * C10 with its baseline re-record. §E.4's third case.
+ *
+ * `number | string`, not the `PropTypes.string` the propTypes claim: `Tabs.tsx` DEFAULTS
+ * `customPadding` to the NUMBER `0`, and that default is what reaches these templates in
+ * the common case. It is falsy, so the `!props.custompadding` arm wins and the padding
+ * shorthand is emitted as `padding: 0` / `margin: -2px 0` — correct by accident. A
+ * caller-supplied number would emit a unitless `padding: 0 8`, which is why the union is
+ * worth stating rather than tidying away.
+ */
+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,134 @@
+import React from 'react';
+import type { PopoverPlacement, PopperOffset } from '../../../hooks/useFloatingPopover';
+/**
+ * tippy's `appendTo`. `'parent'` and an implicit-parent case are real tippy behaviours, not
+ * inventions — measured in `tippy.js/dist/tippy.cjs.js`:
+ *
+ * ```js
+ * if (instance.props.interactive && appendTo === TIPPY_DEFAULT_APPEND_TO || appendTo === 'parent') {
+ *   parentNode = node.parentNode;
+ * } else {
+ *   parentNode = invokeWithArgsOrReturn(appendTo, [node]);
+ * }
+ * ```
+ *
+ * ⚠️ THIS IS A CORRECTION TO PLAN §A3, WHICH RESOLVED C4 ON HALF THE EVIDENCE. §A3 quotes
+ * `TIPPY_DEFAULT_APPEND_TO = () => document.body` and concludes that portalling by default
+ * is behaviour-preserving. The line above is the other half: when `interactive` is true AND
+ * `appendTo` is left at its default, tippy does NOT use that default — it renders INLINE,
+ * into the reference's parent. So "portal by default" is behaviour-preserving only for
+ * non-interactive instances. It is safe for `Tooltip`, whose `interactive` defaults to
+ * `false` and which no consumer passes it to (measured across both apps), and it is a rule
+ * `Popover` will have to honour, since `Popover` does have interactive call sites.
+ */
+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;
+    /**
+     * Determines the events that cause the tooltip to show. Multiple event names are separated
+     * by spaces.
+     *
+     * *Example events:*
+     *
+     * `trigger: 'click'`
+     *
+     * `trigger: 'focusin'`
+     *
+     * `trigger: 'mouseenter click'`
+     *
+     * `trigger: 'mouseenter'`
+     *
+     * Omitting it means `'mouseenter focus'`, and `''` means no triggers at all — both are
+     * relied on by consumer code. See `parseTrigger`.
+     *
+     * --
+     */
+    trigger?: 'mouseenter' | 'mouseenter focus' | 'click' | 'focusin' | 'mouseenter click' | '';
+    /**
+     * Determines if the tooltip is visible without trigger.
+     *
+     * Passing a boolean — **including `false`** — switches the tooltip to CONTROLLED mode and
+     * its own triggers stop firing. `undefined` leaves it uncontrolled. `useTooltipAutoShow`
+     * depends on that distinction and its `toolTipVisible` is `true | undefined` for exactly
+     * this reason.
+     */
+    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. Defaults to 9999, tippy's default. 30 consumer call
+     * sites pass this, which is why it is declared here even though it was never in the old
+     * prop type — it used to typecheck only because the published `Props` widened to
+     * `TippyProps`, and that widening disappears with tippy.
+     */
+    zIndex?: number;
+    /**
+     * A disabled tooltip can never open, even under a controlled `visible={true}` — tippy's
+     * semantics, and what `useTooltipAutoShow`'s `toolTipDisabled` relies on.
+     */
+    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';

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import * as S from './VerificationStatusIcon.styled';
+type VerificationStatusIconOwnProps = {
+    /**
+     * Status of the verification
+     */
+    status: 'verified' | 'pending' | 'rejected' | 'mixed';
+    /**
+     * Custom height of the icon
+     */
+    iconHeight?: number;
+    /**
+     * If Icon has background
+     */
+    background?: boolean;
+};
+/**
+ * A compact icon showing verification status with color coding.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { VerificationStatusIcon } from '@ntbjs/react-components/data'
+ * // or
+ * import VerificationStatusIcon from '@ntbjs/react-components/data/VerificationStatusIcon'
+ * ```
+ *
+ * ### Props
+ * ```
+ * Pass one of "verified", "pending" or "rejected" to `status` to display the correct verification status.
+ * Pass `iconHeight={15}` to set the height of the icon in pixel
+ * ```
+ */
+declare const VerificationStatusIcon: 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.VerificationStatusIconStyleProps>, never>, "ref">, keyof VerificationStatusIconOwnProps> & VerificationStatusIconOwnProps & React.RefAttributes<any>>;
+export default VerificationStatusIcon;

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

@@ -0,0 +1,46 @@
+/**
+ * Shared by all three components: `VerificationStatusIcon.tsx` passes `$background` to
+ * every one of them. Only `VerificationIconWrapper` and `VerificationStatusIcon` read it;
+ * on `VerificationStatusColor` it is passed and never read, which is harmless because the
+ * `$` means `shouldForwardProp` filters it before both the CSS and the DOM.
+ */
+interface VerificationBackgroundStyleProps {
+    /** `background` — `PropTypes.bool`; swaps in the black pill and the light icon colour. */
+    $background?: boolean;
+}
+/**
+ * Props of the `VerificationStatusIcon` element.
+ *
+ * DEFECT, DECLARED NOT FIXED: `iconHeight` in its non-`$` form is what the `svg` rule
+ * below reads, and NOTHING PASSES IT — `VerificationStatusIcon.tsx` passes `$iconHeight`,
+ * which this component never reads. So the `?? 15` fallback is unconditional and the icon
+ * is 15px tall no matter what a caller asks for, WHILE `VerificationStatusColor` does read
+ * `$iconHeight` and scales correctly. Pass `iconHeight={30}` today and the status dot grows
+ * but the icon it sits on does not.
+ *
+ * The fix is to repoint the read to `props.$iconHeight`, which ACTIVATES A BRANCH THAT HAS
+ * NEVER FIRED and changes the emitted height for every non-default `iconHeight`. §J.8 puts
+ * that in C10 with its baseline re-record.
+ */
+export interface VerificationStatusIconStyleProps extends VerificationBackgroundStyleProps {
+    /** `iconHeight` — `PropTypes.number`, px. Read, never passed; see the JSDoc above. */
+    iconHeight?: number;
+}
+/** Props of `VerificationStatusColor`, the small status dot. */
+interface VerificationStatusColorStyleProps extends VerificationBackgroundStyleProps {
+    /** `iconHeight` — `PropTypes.number`, px. This site reads the `$` form, correctly. */
+    $iconHeight?: number;
+    /**
+     * `status` — `PropTypes.oneOf(['verified', 'pending', 'rejected', 'mixed'])`, and
+     * `.isRequired` on the component but still OPTIONAL here per §J.5.
+     *
+     * Closed on purpose rather than widened to `string`: the block below compares this value
+     * four times, and with a closed union a mistyped status name is TS2367 instead of a
+     * branch that silently never fires. §J.6.
+     */
+    $status?: 'verified' | 'pending' | 'rejected' | 'mixed';
+}
+export declare const VerificationIconWrapper: 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>>, VerificationBackgroundStyleProps>, never>> & string;
+export declare const VerificationStatusIcon: 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>>, VerificationStatusIconStyleProps>, never>> & string;
+export declare const VerificationStatusColor: 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>>, VerificationStatusColorStyleProps>, never>> & string;
+export {};

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

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

package/types/components/data/_shared/FloatingArrow.styled.d.ts

@@ -0,0 +1,129 @@
+import type { NtbTheme } from '../../../utils/defaultTheme';
+/**
+ * Which surface the arrow is pointing away from, i.e. which fill/border pair it uses.
+ *
+ * - `popover` — the `Popover` box and the summary-card overlay: `gray-700` on dark,
+ *   `white` on light, with a 1px border that continues the box's own.
+ * - `tooltip` — the `Tooltip` box: `gray-700` in BOTH themes and no border, because
+ *   `Tooltip.styled.ts` sets `background: gray-700` unconditionally and has no border.
+ */
+export type FloatingArrowSurface = 'popover' | 'tooltip';
+/**
+ * THE ARROW'S GEOMETRY, PER SURFACE — and the numbers are derived, not chosen.
+ *
+ * `height` is how far the arrow protrudes from the floating element, because
+ * `FloatingArrow` positions its `<svg>` at `[side]: '100%'`. It is therefore the term
+ * `useFloatingPopover` adds to the main-axis offset, which is why the popover height is
+ * IMPORTED from there rather than written twice: the offset maths and the rendered
+ * triangle must be the same number or the arrow sits at the wrong gap.
+ *
+ * `popover` — from `Popover.styled.ts`'s override, `border-width: 15px 13px 0`: a triangle
+ * 15px tall on a 13+13 = **26px** base. The full derivation, including why the `+15` in
+ * `Popover.tsx` was never a fudge, is on `DEFAULT_ARROW_HEIGHT`.
+ *
+ * `tooltip` — `Tooltip.styled.ts` never overrode the geometry, so the numbers come from
+ * `tippy.js/dist/tippy.css`, and they are the **VISIBLE** triangle rather than the declared
+ * one. THE ONE PIXEL THE FIRST DRAFT OF THIS COMMENT CALLED UNAVOIDABLE IS NOT: it
+ * disappears once the hidden part of tippy's triangle is subtracted instead of being
+ * carried. The measurement, from the four rules that describe a top-placed tooltip arrow:
+ *
+ *   .tippy-arrow                                  { width: 16px; height: 16px }
+ *   .tippy-box[data-placement^=top] > .tippy-arrow { bottom: 0 }
+ *   .tippy-box[data-placement^=top] > .tippy-arrow:before {
+ *       bottom: -7px; border-width: 8px 8px 0 }
+ *
+ * 1. The 16x16 arrow box sits with its bottom edge ON the box's bottom edge.
+ * 2. The `:before` border-triangle is 8px tall on a 16px base, positioned `bottom: -7px`,
+ *    so its apex is 7px OUTSIDE the box and its 16px-wide base is 1px INSIDE it.
+ * 3. Therefore only 7 of the 8px are ever visible, and at the box edge — 1px down from a
+ *    16px base on an 8px triangle — the triangle has already narrowed to
+ *    16 x (1 - 1/8) = **14px**.
+ * 4. So the triangle a user sees is **14px wide at the box edge and 7px tall**, which is
+ *    `FloatingArrow`'s own default geometry, and `FloatingArrow` overlapping nothing is
+ *    exactly right: there is nothing to overlap. The 1px tippy hides is the same
+ *    `gray-700` as the box behind it (this surface has no border), so it was never
+ *    contributing a pixel.
+ *
+ * The offset that goes with it is tippy's own default `[0, 10]` passed straight through,
+ * with `arrowHeight: 0` handed to `useFloatingPopover` — see the block comment at
+ * `TOOLTIP_OFFSET` in `Tooltip.tsx`, which is where the reason that `Tooltip` does NOT add
+ * the arrow height while `Popover` does is written down. Box 10px out, tip 3px out, in both
+ * implementations.
+ *
+ * `strokeWidth` is `FloatingArrow`'s border width in px. `0` means the outline `<path>` is
+ * not rendered at all, which is why the `tooltip` surface needs no `stroke` rule.
+ */
+export declare const POPOVER_ARROW: {
+    readonly width: 26;
+    readonly height: 15;
+    readonly strokeWidth: 1;
+};
+/**
+ * See `POPOVER_ARROW` — same derivation, from tippy's unmodified default geometry, reduced
+ * to the part of it that is visible. 14x7 and not 16x8; the numbers coincide with
+ * `FloatingArrow`'s own defaults, which is a result rather than a shortcut and is why they
+ * are written out anyway.
+ */
+export declare const TOOLTIP_ARROW: {
+    readonly width: 14;
+    readonly height: 7;
+    readonly strokeWidth: 0;
+};
+/**
+ * Props of `SharedFloatingArrow`, i.e. what this file's `.attrs()` callback reads and what
+ * a call site may set. Both optional per §J.5 — every wrapper spreads `{...props}` onto its
+ * styled root, and a required transient prop manufactures TS2769 there.
+ */
+interface FloatingArrowStyleProps {
+    /**
+     * styled-components' theme. Declared for the same reason `Popover.styled.ts` declares
+     * it — this is `styled(ThirdPartyComponent)`, so the outer props are
+     * `FloatingArrowProps extends React.ComponentPropsWithRef<'svg'>` and nothing in there
+     * is `theme`. `.attrs(applyDefaultTheme)` fills it in for the interpolations below.
+     */
+    theme?: NtbTheme;
+    /**
+     * Which colour pair to use. NOT `$`-prefixed on purpose: it has to REACH THE DOM,
+     * because the rules below select on it. `shouldForwardProp` forwards it precisely
+     * because it does not start with `$`.
+     *
+     * Hyphenated, so a call site could pass it without this declaration — TypeScript does
+     * not excess-property-check JSX attribute names that are not valid identifiers. It is
+     * declared anyway because the `.attrs()` callback READS it, and a read does need the
+     * declaration.
+     */
+    'data-arrow-surface'?: FloatingArrowSurface;
+}
+/**
+ * The themed arrow. Render it inside the floating element with `context`, `ref` and the
+ * geometry from `POPOVER_ARROW` / `TOOLTIP_ARROW`:
+ *
+ * ```tsx
+ * <S.SharedFloatingArrow ref={arrowRef} context={context} {...POPOVER_ARROW} />
+ * ```
+ *
+ * `ref` IS REQUIRED BY `FloatingArrow` ITSELF — it warns in development without one and
+ * the `arrow()` middleware has nothing to measure. `useFloatingPopover` returns the
+ * matching `arrowRef`.
+ *
+ * ================== THE THREE-PATH STRUCTURE, WHICH THE CSS DEPENDS ON ==================
+ *
+ * `FloatingArrow` renders, in order (measured in
+ * `@floating-ui/react/dist/floating-ui.react.esm.js`):
+ *
+ *   1. an OUTLINE `<path>`, ONLY when `strokeWidth > 0`, with `fill="none"` and
+ *      `stroke-width: strokeWidth * 2 + 1`;
+ *   2. the FILL `<path>`, whose `stroke` attribute it sets to the value of the `fill`
+ *      PROP — its way of covering the inner half of (1)'s stroke so a `strokeWidth: 1`
+ *      renders as a 1px border rather than 1.5px;
+ *   3. a `<clipPath>`, which is not a `<path>`.
+ *
+ * We colour by CSS rather than by the `fill`/`stroke` PROPS because the theme is chosen by
+ * a `body` class at runtime and a prop would have to be computed in JS, which cannot see
+ * which class is set. That leaves (2)'s `stroke` attribute unset, so the rules below set it
+ * explicitly — `& > path:last-of-type`, which is (2) whether or not (1) is present.
+ * Without that rule (2) would INHERIT the CSS `stroke` and the border would read ~1.5px
+ * instead of the 1px it replaces.
+ */
+export declare const SharedFloatingArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<Omit<import("@floating-ui/react").FloatingArrowProps, "ref"> & import("react").RefAttributes<SVGSVGElement>, Omit<import("@floating-ui/react").FloatingArrowProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>, FloatingArrowStyleProps>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("@floating-ui/react").FloatingArrowProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;
+export default SharedFloatingArrow;

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

@@ -0,0 +1,8 @@
+export { default as Alert } from './Alert';
+export { default as Badge } from './Badge';
+export { default as Popover } from './Popover';
+export { default as SeverityBadge } from './SeverityBadge';
+export { default as Tab } from './Tab';
+export { default as Tabs } from './Tabs';
+export { default as Tooltip } from './Tooltip';
+export { default as VerificationStatusIcon } from './VerificationStatusIcon';

package/types/components/index.d.ts

@@ -0,0 +1,3 @@
+import * as Form from './inputs';
+import * as Widget from './widgets';
+export { Form, Widget };

package/types/components/inputs/ActionButton/ActionButton.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import * as S from './ActionButton.styled';
+type ActionButtonOwnProps = {
+    /**
+     * Icon element – e.g: `icon={<SvgAddCircle />}`
+     */
+    icon: React.ReactElement<any>;
+    /**
+     * Disable the action button
+     */
+    disabled?: boolean;
+    /**
+     * Locks the hover state of the `ActionButton` – this prop only affects the visual appearance of the
+     * `ActionButton`
+     */
+    active?: boolean;
+    /**
+     * On-click effect for the action button
+     */
+    onClick?: (...args: any[]) => any;
+    /**
+     * Color of the button background as an array of [darkThemeColor, lightThemeColor]
+     */
+    backgroundColors?: string[];
+    /**
+     * Width and Height of the Action Button [50, 50]
+     */
+    actionWidthHeight?: any[];
+    /**
+     *Use shadow for the action button
+     */
+    useShadow?: boolean;
+};
+/**
+ * An action button.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { ActionButton } from '@ntbjs/react-components/inputs'
+ * // or
+ * import ActionButton from '@ntbjs/react-components/inputs/ActionButton'
+ * ```
+ *
+ * ### Props
+ * ```
+ * Pass `icon={<svg></svg>}` to display an icon.
+ * Pass `disabled={true}` to disable the button.
+ * Pass `active={true}` to lock the hover state of the button.
+ * Pass `onClick={() => {}}` to add an on-click effect.
+ * Pass `backgroundColors={[#ffffff, #000000]}` to set the background color of the button
+ * ```
+ */
+declare const ActionButton: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, S.ActionButtonStyleProps>, never>, "ref">, keyof ActionButtonOwnProps> & ActionButtonOwnProps & React.RefAttributes<any>>;
+export default ActionButton;