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

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

@@ -0,0 +1,83 @@
+/**
+ * Props of the `Alert` root, i.e. what `Alert.tsx` passes to `S.Alert`. Value types come
+ * from that file's propTypes; all optional per §J.5.
+ */
+export interface AlertStyleProps {
+    /** `isWarning` — derived in the component from `type === 'warning'`, so `boolean`. */
+    $warning?: boolean;
+    /** `isError` — derived from `type === 'error'`. */
+    $error?: boolean;
+    /** `isInfo` — derived; the component initialises it `true`. */
+    $info?: boolean;
+    /**
+     * `verticalPadding` — `PropTypes.number`, px. `number` and not `number | string`: the
+     * template interpolates `${…}px`, so a string would already emit `padding: 17pxpx`.
+     */
+    $verticalPadding?: number;
+    /** `horizontalPadding` — `PropTypes.number`, px, interpolated the same way. */
+    $horizontalPadding?: number;
+    /**
+     * `alertMessage` — `PropTypes.string`.
+     *
+     * DECLARED BECAUSE THE COMPONENT PASSES IT, NOT BECAUSE ANYTHING READS IT. No
+     * interpolation below mentions `$alertMessage`; the message is rendered as the
+     * `<span>` child of `AlertRender` instead. `shouldForwardProp` filters it, so it
+     * reaches neither the CSS nor the DOM — a dead prop, harmless, and dropping it from
+     * `Alert.tsx` is a separate cleanup.
+     */
+    $alertMessage?: string;
+    /**
+     * `align` — `PropTypes.oneOf(['left', 'center'])`.
+     *
+     * DEFECT, DECLARED NOT FIXED: this is the prop the component passes, and NOTHING READS
+     * IT. The `text-align` rule at the bottom of this template reads the non-`$` `align`
+     * (declared below) instead, and that is never passed — so `align="center"` has never
+     * had any effect and every Alert renders `text-align: left`.
+     *
+     * The fix is to repoint that read from `props.align` to `props.$align`, which ACTIVATES
+     * A BRANCH THAT HAS NEVER FIRED and so changes rendered CSS. §J.8 lists that as C10
+     * work with a baseline re-record; it must not ride along in a type-only commit.
+     */
+    $align?: 'left' | 'center';
+    /**
+     * `width` — `PropTypes.number`, px.
+     *
+     * DEFECT, DECLARED NOT FIXED: no `$`. `Alert.tsx` passes `width={width}` and
+     * `shouldForwardProp` forwards every non-`$` prop, so whenever a caller sets `width` it
+     * also lands on the rendered `<div>`, which is not a valid attribute on a `<div>`.
+     * CONFIRMED, not inferred: `scripts/r19-harness/baseline.json` records
+     * `<div width="480" …>` for `data/Alert`. The fix is to rename it `$width` at both ends,
+     * which REMOVES a DOM attribute and so needs C10's re-record. §E.4's third case.
+     */
+    width?: number;
+    /**
+     * `align` again, in its non-`$` form — the key this template actually reads. Same
+     * defect as `$align` above, stated from the reading end: nothing passes this, so the
+     * `=== 'center'` comparison is always `false`.
+     */
+    align?: 'left' | 'center';
+}
+/** Props of `AlertRender`, i.e. what `Alert.tsx` passes to `S.AlertRender`. */
+interface AlertRenderStyleProps {
+    /** `lineHeight` — `PropTypes.number`, px, interpolated as `${…}px`. */
+    $lineHeight?: number;
+    /**
+     * `lineClamp` — `PropTypes.number`, the `-webkit-line-clamp` count. The component
+     * defaults it to `0`, which is falsy, so the clamp block is opt-in.
+     */
+    $lineClamp?: number;
+    /**
+     * `fontSize` — `PropTypes.number`, px.
+     *
+     * DEFECT, DECLARED NOT FIXED: no `$`. `Alert.tsx` passes `fontSize={fontSize}`, so
+     * whenever a caller sets it, it also leaks onto the rendered `<div>` — AS
+     * `font-size="12"`, NOT `fontSize="12"`: React maps this particular camelCase name to
+     * its hyphenated attribute form. CONFIRMED, not inferred:
+     * `scripts/r19-harness/baseline.json` records `<div font-size="12" …>` for every
+     * `data/Alert` entry. The fix is `$fontSize` at both ends — a DOM change, so C10. §E.4.
+     */
+    fontSize?: number;
+}
+export declare const Alert: 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>>, AlertStyleProps>, never>> & string;
+export declare const AlertRender: 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>>, AlertRenderStyleProps>, never>> & string;
+export {};

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

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

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

@@ -0,0 +1,128 @@
+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.
+     *
+     * NMB-3998: this is `React.ReactNode` and NOT the four-way union the propTypes
+     * codemod produced from `oneOfType([string, number, func, element])`. The `func`
+     * member was never a legal value: line 182 renders `{badgeContent}` as a child, and
+     * React THROWS "Functions are not valid as a React child" for a function. So the
+     * propTypes documented a value that cannot work, and transcribing them faithfully
+     * published that mistake as a type — which is what TS2769 on line 182 was reporting.
+     * The union was also missing `null`, used by `Badge badgeContent={null}` in
+     * Tabs.stories; that only compiled because `strictNullChecks` is off.
+     */
+    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,132 @@
+/** Props of the `Badge` root, i.e. what `Badge.tsx` passes to `S.Badge`. */
+export interface BadgeStyleProps {
+    /** `elevated` — `PropTypes.bool`; positions the label on top of the children. */
+    $elevated?: boolean;
+    /** `Boolean(children)`, derived in the component, so genuinely `boolean`. */
+    $hasChildren?: boolean;
+}
+/**
+ * Props of `BadgeLabel`. Value types from `Badge.tsx`'s propTypes; all optional per §J.5.
+ *
+ * Read the file header before adding to this list: eight of these members exist because
+ * the template and the component disagree about the key, not because they are wanted.
+ */
+interface BadgeLabelStyleProps {
+    /** `elevated` — drives border-radius, margin, position and transform below. */
+    $elevated?: boolean;
+    /** `active` — `PropTypes.bool`. */
+    $active?: boolean;
+    /** `error` — `PropTypes.bool`. Takes priority over `$warning`. */
+    $error?: boolean;
+    /** `warning` — `PropTypes.bool`. */
+    $warning?: boolean;
+    /**
+     * `lineHeight` — `PropTypes.oneOfType([number, string])`.
+     *
+     * DEFECT, DECLARED NOT FIXED: `Badge.tsx` DEFAULTS `lineHeight` TO THE STRING
+     * `'normal'`, and the template emits `${props.$lineHeight}px` whenever the value is
+     * truthy — so every Badge that does not override it renders the invalid declaration
+     * `line-height: normalpx`, which browsers drop. The effect happens to match the
+     * intended `normal`, which is why it has gone unnoticed. Fixing it (default `undefined`,
+     * or a unit-aware interpolation) changes the emitted CSS text, so it is C10 work.
+     */
+    $lineHeight?: number | string;
+    /** `horizontalPadding` — `PropTypes.number`, px. The one padding key that matches. */
+    $horizontalPadding?: number;
+    /** `minHeight` — `PropTypes.number`, px. */
+    $minHeight?: number;
+    /** `minWidth` — `PropTypes.number`, px. */
+    $minWidth?: number;
+    /** `backgroundColors` — `[darkThemeColor, lightThemeColor]`, read by index. */
+    $backgroundColors?: string[];
+    /** `colors` — font colour as `[darkThemeColor, lightThemeColor]`, read by index. */
+    $colors?: string[];
+    /** `borderColors` — `[dark, light]`; when set, a 1px solid border is applied. */
+    $borderColors?: string[];
+    /**
+     * `verticalPadding` — `PropTypes.number`, px.
+     *
+     * DEFECT, DECLARED NOT FIXED, AND IT IS THE §E.3 RUN-TOGETHER-NAME FAMILY.
+     * `Badge.tsx:85` passes `$elevatedverticalPadding={verticalPadding}` — `$elevated` and
+     * `verticalPadding` run together — while the template below reads the plain
+     * `verticalPadding`. Neither name is the other's, so BOTH sides are dead: nothing ever
+     * supplies the key this reads, and nothing ever reads the key the component supplies.
+     * `verticalPadding` has therefore never had any effect; every Badge falls through to
+     * the `$elevated ? '4px' : '6px'` default.
+     *
+     * The fix is to make both ends `$verticalPadding`, which ACTIVATES A BRANCH THAT HAS
+     * NEVER FIRED and so changes rendered padding. C10, with a re-record.
+     */
+    verticalPadding?: number;
+    /**
+     * `$elevatedverticalPadding` — the key `Badge.tsx:85` actually passes. DECLARED BECAUSE
+     * THE COMPONENT PASSES IT, NOT BECAUSE ANYTHING READS IT; see `verticalPadding` above.
+     * Harmless in the DOM (the `$` prefix means `shouldForwardProp` still filters it), so
+     * unlike the four leaks below this one is invisible rather than wrong.
+     */
+    $elevatedverticalPadding?: number;
+    /**
+     * `elevated` in its non-`$` form — read at the `font-size` block below, and NEVER
+     * PASSED (the component passes `$elevated`).
+     *
+     * DEFECT, DECLARED NOT FIXED: the ternary always takes the false arm, so an elevated
+     * Badge renders `font-size: 0.750rem` instead of the intended `0.625rem`. Fix: read
+     * `props.$elevated`, which is already declared above — a CSS change, so C10.
+     */
+    elevated?: boolean;
+    /**
+     * `error` in its non-`$` form — read inside the dark-mode `color` callback, and NEVER
+     * PASSED.
+     *
+     * DEFECT, DECLARED NOT FIXED: it makes the second disjunct of
+     * `(props.$warning && !props.$error) || (props.error && !props.$active)` permanently
+     * `false`, so an inactive error Badge never gets the `gray-900` text colour in dark
+     * mode. Fix: `props.$error` — a colour change, so C10.
+     */
+    error?: boolean;
+    /**
+     * `fontSize` — `PropTypes.oneOfType([number, string])`.
+     *
+     * DEFECT, DECLARED NOT FIXED: no `$`. `Badge.tsx:79` passes it and
+     * `shouldForwardProp` forwards every non-`$` prop, so a caller-supplied `fontSize` also
+     * lands on the rendered `<span>` — AS `font-size="15"`, NOT `fontSize="15"`: React maps
+     * this particular camelCase name to its hyphenated attribute form. CONFIRMED, not
+     * inferred: `scripts/r19-harness/baseline.json` records `<span font-size="12" …>` for
+     * every `data/Badge` entry. Note the `string` half of the propTypes union is also a
+     * trap: the template emits `${props.fontSize}px`, so `fontSize="15px"` would render
+     * `15pxpx`. Fix: `$fontSize` at both ends — removes a DOM attribute, so C10. §E.4's
+     * third case.
+     */
+    fontSize?: number | string;
+    /**
+     * `fontWeight` — `PropTypes.oneOfType([number, string])`, interpolated raw so both
+     * halves are safe. Same non-`$` DOM leak as `fontSize`, hyphenated the same way, and
+     * this is the UNCONDITIONAL one: `Badge.tsx:80` passes it and `Badge.tsx:49` defaults it
+     * to `'normal'`, so `font-weight="normal"` is on EVERY rendered label whether the caller
+     * sets anything or not. Verified by rendering `<Badge badgeContent={5} />` with no other
+     * prop. Fix: `$fontWeight` at both ends — C10.
+     */
+    fontWeight?: number | string;
+    /**
+     * `height` — `PropTypes.number`, px. Same non-`$` DOM leak; `Badge.tsx:87` passes it.
+     * `height` is not a valid attribute on a `<span>`. CONFIRMED: the baseline records
+     * `<span … height="24" …>` for every `data/Badge` entry. Fix: `$height` — C10.
+     */
+    height?: number;
+    /**
+     * `width` — `PropTypes.number`, px. Same non-`$` DOM leak; `Badge.tsx:89` passes it. No
+     * baseline fixture sets it, so it is absent there, but rendering the built `Badge` with
+     * `width={50}` puts `width="50"` on the `<span>`. Fix: `$width` — C10.
+     */
+    width?: number;
+}
+/** Props of `BadgeIcon`. */
+interface BadgeIconStyleProps {
+    /** `!!badgeContent`, derived in the component — adds the gutter between icon and text. */
+    $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,205 @@
+import React from 'react';
+import type { Middleware } from '@floating-ui/react';
+import type { PopoverPlacement } from '../../../hooks/useFloatingPopover';
+/**
+ * tippy's `appendTo`, and the three-way rule it implies. `'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;          // INLINE, next to the reference
+ * } else {
+ *   parentNode = invokeWithArgsOrReturn(appendTo, [node]);   // portal
+ * }
+ * ```
+ *
+ * ⚠️ **`Popover` DEFAULTS `interactive` TO `true`, SO ITS DEFAULT IS THE INLINE BRANCH.**
+ * `appendTo` appears in 6 files per consumer out of 30 `<Popover>` call sites across both,
+ * so a blanket `FloatingPortal` would relocate the MAJORITY of call sites out of their
+ * current DOM position — a stacking/`z-index` regression across both apps, not a
+ * preservation. Plan §A3 originally resolved C4 as "portal by default" on half the evidence
+ * and was corrected in `0ef5f71`; `Tooltip.tsx:77-97` is where the branch was first found.
+ *
+ * | `appendTo` | `interactive` | where it renders |
+ * | --- | --- | --- |
+ * | given | any | `FloatingPortal` rooted at `appendTo` |
+ * | absent | `false` | `FloatingPortal` rooted at `document.body` |
+ * | absent | `true` *(the default)* | **INLINE**, into the reference's parent |
+ *
+ * All 12 `appendTo` sites across both consumers pass `document.body`; the `'parent'` and
+ * function forms are supported because tippy supported them and the render-gate fixture
+ * uses `'parent'` to make an open popover capturable.
+ */
+export type PopoverAppendTo = 'parent' | Element | ((reference: Element) => Element);
+type PopoverOwnProps = {
+    /**
+     * The content of the `Popover`.
+     */
+    content: string | React.ReactElement<any>;
+    /**
+     * Determines if the `Popover` has interactive content inside of it, so that it can be
+     * hovered over and clicked inside without hiding.
+     *
+     * **It also decides where the popover renders** — see `PopoverAppendTo`. It defaults to
+     * `true`, so a `Popover` renders INLINE unless `appendTo` or `interactive={false}` says
+     * otherwise.
+     */
+    interactive?: boolean;
+    /**
+     * The preferred placement of the `Popover`. Note that the flip middleware can change this
+     * to the opposite placement if it has more space.
+     *
+     * The 12 concrete names are spelled identically in Popper and Floating UI, so they need no
+     * translation. The three `auto*` values have no Floating UI string — they select
+     * `autoPlacement()` instead of `flip()`; see `useFloatingPopover`.
+     */
+    placement?: PopoverPlacement;
+    /**
+     * Duration in ms of the transition animation.
+     */
+    duration?: number;
+    /**
+     * Determines the events that cause the `Popover` to show. Multiple event names are separated by
+     * spaces.
+     *
+     * *Example events:*
+     *
+     * `trigger: 'click'`
+     *
+     * `trigger: 'focusin'`
+     *
+     * `trigger: 'mouseenter click'`
+     *
+     * `''` means no triggers at all, and `undefined` means tippy's default
+     * (`'mouseenter focus'`) — though this component overrides that with its own default of
+     * `'click focus'`. See `parseTrigger`.
+     *
+     * --
+     */
+    trigger?: string;
+    /**
+     * Displaces the popover from its reference element in pixels (skidding and distance).
+     *
+     * `[skidding, distance]`
+     *
+     * `distance` is the gap between the reference and the ARROW TIP, not the box — which is
+     * what it has always meant here, because the old implementation handed tippy
+     * `offset[1] + (arrow ? 15 : 0)`. `useFloatingPopover` adds the arrow height back, so the
+     * prop keeps its meaning; see `DEFAULT_ARROW_HEIGHT` for the derivation of the 15.
+     */
+    offset?: number[];
+    /**
+     * Determines if the popover has an arrow.
+     *
+     * ⚠️ It also moves the box even when the arrow is NOT drawn — see the block comment at
+     * `arrowDrivesTheOffset` in the body. That is the existing behaviour, reproduced.
+     */
+    arrow?: boolean;
+    /**
+     * Use React's state to fully control the `Popover` instead of relying on the native trigger
+     * and `hideOnClick` props
+     *
+     * Passing a boolean — **including `false`** — switches the popover to CONTROLLED mode and
+     * its own triggers stop firing. `undefined` leaves it uncontrolled. `onClickOutside` still
+     * fires in controlled mode, which is how 12 consumer call sites close a controlled
+     * popover.
+     */
+    visible?: boolean;
+    /**
+     * @deprecated Accepted and IGNORED. This was a Popper `modifiers` array, appended to
+     * `popperOptions.modifiers`; Floating UI has middleware instead and the two are not
+     * translatable prop-for-prop. Kept so that no existing call site throws — plan C6. No
+     * consumer passes it. Pass `middleware` instead.
+     */
+    modifiers?: any[];
+    /**
+     * Extra Floating UI middleware, appended after the built-in chain
+     * (`offset` → `flip`/`autoPlacement` → `shift` → `arrow` → `size`). This is the honest
+     * replacement for `modifiers`, and it exists because one internal caller genuinely needed
+     * it: `MultiLevelCheckboxSelect` matched the popover's width to its input with a
+     * hand-written Popper `sameWidth` modifier, which C6's accept-and-ignore would have
+     * silently dropped.
+     */
+    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. Defaults to 9999, tippy's default. 10 consumer call
+     * sites pass this.
+     */
+    zIndex?: number;
+    /**
+     * A disabled popover can never open, even under a controlled `visible={true}` — tippy's
+     * semantics.
+     */
+    disabled?: boolean;
+    /**
+     * Where the popover is rendered. Omitting it means INLINE for an `interactive` popover
+     * (the default) and `document.body` otherwise. See `PopoverAppendTo`.
+     */
+    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. tippy's `onHide`, minus its instance argument.
+     *
+     * ONE INTERNAL CALLER DEPENDS ON IT: `inputs/Button` passes
+     * `onHide={handleDropdownClose}` to reset its `dropdown-is-active` class, so this is not a
+     * courtesy re-export. It fires on every close the component decides for itself —
+     * outside press, a second click on the trigger, a context-menu item click. It does NOT
+     * fire when a CONTROLLED popover is closed by its owner flipping `visible` to `false`,
+     * because nothing asks this component to close in that case; tippy did fire there. No
+     * call site pairs `onHide` with `visible`, so the difference is currently unobservable.
+     */
+    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';