rich-react-component 0.1.0 → 0.3.0

package/dist/base/AppearanceMenu.d.ts

@@ -0,0 +1,65 @@
+import { SidebarPresentation, SidebarTone, ThemeMode } from './Appearance';
+import { ColorScheme } from './appearanceSchemes';
+/**
+ * Every visible string is supplied by the caller — this component ships no
+ * built-in copy in any language, so it can be dropped into an application that
+ * owns its own localization.
+ */
+export interface AppearanceMenuLabels {
+    presentation: {
+        title: string;
+        compact: string;
+        grouped: string;
+    };
+    mode: {
+        title: string;
+        light: string;
+        dark: string;
+        system: string;
+    };
+    tone: {
+        title: string;
+        light: string;
+        dark: string;
+        auto: string;
+    };
+    /** `options` maps a registered scheme id to its display name. */
+    colorScheme: {
+        title: string;
+        options: Record<string, string>;
+    };
+}
+/** Each section is hideable on its own. Omitted entries default to visible. */
+export interface AppearanceMenuSections {
+    presentation?: boolean;
+    mode?: boolean;
+    tone?: boolean;
+    colorScheme?: boolean;
+}
+export interface AppearanceMenuProps {
+    labels: AppearanceMenuLabels;
+    sections?: AppearanceMenuSections;
+    className?: string;
+    /** Controlled values. When given, the provider is not written to for that setting. */
+    mode?: ThemeMode;
+    onModeChange?: (mode: ThemeMode) => void;
+    sidebarPresentation?: SidebarPresentation;
+    onSidebarPresentationChange?: (presentation: SidebarPresentation) => void;
+    sidebarTone?: SidebarTone;
+    onSidebarToneChange?: (tone: SidebarTone) => void;
+    colorSchemeId?: string;
+    onColorSchemeIdChange?: (id: string) => void;
+    /** Restrict/order the offered schemes. Defaults to every registered scheme. */
+    colorSchemes?: ColorScheme[];
+}
+/**
+ * Composable appearance selector. Drop it into a `Navbar` slot, a `Popover`,
+ * a `Menu` trigger's content, a settings drawer, or any application-owned
+ * container.
+ *
+ * Deliberately NOT a Metronic Layout Builder: it exposes exactly four
+ * independent settings and nothing else. It forces no persistence, mutates no
+ * global DOM, and makes no decision about who is allowed to change branding —
+ * those belong to the application.
+ */
+export declare function AppearanceMenu({ labels, sections, className, mode, onModeChange, sidebarPresentation, onSidebarPresentationChange, sidebarTone, onSidebarToneChange, colorSchemeId, onColorSchemeIdChange, colorSchemes, }: AppearanceMenuProps): import("react").JSX.Element;

package/dist/base/Badge.d.ts

@@ -1,9 +1,16 @@
 import { ReactNode } from 'react';
 export type BadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+/**
+ * How the variant colour is applied. Additive: `solid` is the existing
+ * behaviour and stays the default, so no current rendering changes.
+ */
+export type BadgeAppearance = "solid" | "light" | "outline";
 export interface BadgeProps {
     variant?: BadgeVariant;
+    /** `light` and `outline` are the restrained forms for ordinary metadata. */
+    appearance?: BadgeAppearance;
     pill?: boolean;
     className?: string;
     children: ReactNode;
 }
-export declare function Badge({ variant, pill, className, children }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ variant, appearance, pill, className, children }: BadgeProps): import("react").JSX.Element;

package/dist/base/Button.d.ts

@@ -1,5 +1,13 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
-export type ButtonVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link" | "outline-primary" | "outline-secondary";
+export type ButtonVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link" | "outline-primary" | "outline-secondary"
+/**
+ * Contextual light variants — a soft tinted surface with the contextual
+ * foreground, the Metronic Bootstrap signature for a secondary action.
+ * Added additively; Bootstrap has no `btn-light-*` rule of its own, so these
+ * render as a plain button until `rich-react-component/style.css` is
+ * imported, and no existing variant changed.
+ */
+ | "light-primary" | "light-secondary" | "light-success" | "light-danger" | "light-warning" | "light-info";
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className" | "type" | "disabled"> {
     variant?: ButtonVariant;
     size?: "sm" | "lg";

package/dist/base/Card.d.ts

@@ -1,9 +1,23 @@
 import { ReactNode } from 'react';
 export interface CardProps {
+    /** Standard header — renders an icon/avatar + title + subtitle row with a right-aligned actions slot, no manual header markup required. */
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    /** Mutually exclusive with `avatar` — `avatar` wins if both are given. */
+    icon?: ReactNode;
+    avatar?: ReactNode;
+    /** Right-aligned header slot, typically Buttons/IconButtons/Menu. */
+    actions?: ReactNode;
+    /**
+     * Escape hatch for header content the title/subtitle/icon/avatar/actions
+     * shape can't express. Wins over all of the above when provided.
+     */
     header?: ReactNode;
     footer?: ReactNode;
+    /** Replaces `children` with a generic loading skeleton (reuses `Skeleton`, doc: no bespoke shimmer). */
+    loading?: boolean;
     className?: string;
     children?: ReactNode;
 }
 /** Generic content container — the most basic layout primitive, used to group everything else. */
-export declare function Card({ header, footer, className, children }: CardProps): import("react").JSX.Element;
+export declare function Card({ title, subtitle, icon, avatar, actions, header, footer, loading, className, children }: CardProps): import("react").JSX.Element;

package/dist/base/DataGrid.d.ts

@@ -1,10 +1,34 @@
 import { ReactNode } from 'react';
+export type DataGridAlign = "start" | "center" | "end";
+/**
+ * Closed, finite formatter set — the same contract the Smart layer's
+ * `format` metadata already targeted, now owned here instead of being
+ * duplicated in a second Smart-side formatter map (doc: "Base DataGrid owns
+ * reusable presentation capability, Smart chooses a supported formatter").
+ * Never accepts an arbitrary/serialized function — that stays Smart's
+ * closed-enum contract too.
+ */
+export type DataGridFormat = "text" | "date" | "currency" | "boolean";
+export declare const dataGridFormatters: Record<DataGridFormat, (value: unknown) => ReactNode>;
 export interface DataGridColumn<TRow> {
-    key: string;
+    /** Row-identity/sort key. Defaults to `field` when omitted — required only if `field` is also omitted (a fully custom `render`-only column). */
+    key?: string;
+    /** Row property this column reads its value from — strongly typed against `TRow`. Enables the declarative `align`/`format`/`formatter` path below instead of a `render` callback. */
+    field?: keyof TRow & string;
     header: string;
-    render?: (row: TRow) => ReactNode;
-    sortable?: boolean;
+    align?: DataGridAlign;
+    /** Defaults to `align` when omitted. */
+    headerAlign?: DataGridAlign;
     width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    sortable?: boolean;
+    /** Built-in formatter selection — the normal way to display a field (see `dataGridFormatters`). */
+    format?: DataGridFormat;
+    /** Escape hatch for a computed display value that still gets the standard aligned cell wrapper. */
+    formatter?: (value: unknown, row: TRow) => ReactNode;
+    /** Escape hatch for a fully custom cell — the exception, not the default way to display a field. */
+    render?: (row: TRow) => ReactNode;
 }
 export type DataGridSort = {
     key: string;

package/dist/base/Flex.d.ts

@@ -0,0 +1,20 @@
+import { StackProps } from './Stack';
+export type FlexGap = NonNullable<StackProps["gap"]> | "xs" | "sm" | "md" | "lg" | "xl";
+export interface FlexProps extends Omit<StackProps, "gap"> {
+    gap?: FlexGap;
+    /** `flex-grow-1` on the container itself (for a Flex nested inside another flex layout). */
+    grow?: boolean;
+    /** `flex-shrink-0` on the container itself. */
+    shrink?: boolean;
+    /** `w-100`. */
+    fullWidth?: boolean;
+}
+/**
+ * Arbitrary flex layout on top of the same `d-flex` machinery Stack already
+ * owns (doc: "do not duplicate Stack") — only the defaults and the extra
+ * grow/shrink/fullWidth concerns differ. Stack defaults to a column
+ * (vertical list of children); Flex defaults to a row, matching the
+ * `<div className="d-flex align-items-center justify-content-between">`
+ * call sites it's meant to replace.
+ */
+export declare function Flex({ direction, gap, grow, shrink, fullWidth, className, ...rest }: FlexProps): import("react").JSX.Element;

package/dist/base/IconButton.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from './Button';
+import { IconProps } from './Icon';
+export interface IconButtonProps extends Omit<ButtonProps, "children"> {
+    /** Icon class name(s), passed straight through to `Icon` (icon-set agnostic — doc section 15). */
+    icon: string;
+    /** Required — an icon-only control has no visible text, so it must carry its own accessible name. */
+    "aria-label": string;
+    iconSize?: IconProps["size"];
+    /** Optional tooltip, composed from the existing `Tooltip` primitive rather than a second hover-label implementation. */
+    tooltip?: ReactNode;
+}
+/** Composes Button + Icon (doc: reuse, don't build a second button system) for the common icon-only action button. */
+export declare function IconButton({ icon, "aria-label": ariaLabel, iconSize, tooltip, variant, loading, className, ...rest }: IconButtonProps): import("react").JSX.Element;

package/dist/base/ListItem.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export interface ListItemProps {
+    /** Typically an `Avatar` or `Icon`. */
+    leading?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Typically an `IconButton`, `Badge`, or `Sparkline`. */
+    trailing?: ReactNode;
+    /** Presence makes the row an interactive `<button>` (established row-action pattern). */
+    onClick?: () => void;
+    disabled?: boolean;
+    /** Tighter vertical rhythm for dense lists (e.g. inside a DataGrid cell). */
+    dense?: boolean;
+    className?: string;
+}
+/**
+ * Generic leading/title-description/trailing row — the same shape as MUI's
+ * `ListItem` + `ListItemAvatar` + `ListItemText` or Ant Design's
+ * `List.Item.Meta`. Replaces repeated `<div className="d-flex
+ * align-items-center"><Avatar/><div><span/><span/></div></div>` markup.
+ * Intentionally has no domain-specific counterpart (no `AuthorItem`/
+ * `UserItem`) — callers pass whatever leading/title/description/trailing
+ * content their row needs.
+ */
+export declare function ListItem({ leading, title, description, trailing, onClick, disabled, dense, className }: ListItemProps): import("react").JSX.Element;

package/dist/base/Sidebar.d.ts

@@ -1,31 +1,121 @@
-import { ReactNode } from 'react';
-export interface SidebarLeafItem {
-    key: string;
-    label: ReactNode;
-    icon?: ReactNode;
-    href?: string;
-    onClick?: () => void;
-    active?: boolean;
-    disabled?: boolean;
+import { CSSProperties, MouseEvent, ReactNode } from 'react';
+import { SidebarPresentation, SidebarTone } from './Appearance';
+import { SidebarExpandMode, SidebarItem, SidebarLinkItem, SidebarSection, SidebarSelectHandler } from './sidebarModel';
+export type { SidebarActionItem, SidebarCollapsibleItem, SidebarDividerItem, SidebarExpandMode, SidebarGroup, SidebarGroupItem, SidebarItem, SidebarLeafItem, SidebarLinkItem, SidebarParentItem, SidebarSection, SidebarSelectHandler, } from './sidebarModel';
+export { isSidebarExpandable, isSidebarParent, legacyActiveKey, legacyDefaultExpandedKeys, toSidebarItems } from './sidebarModel';
+/**
+ * How the current route may change which branches are open.
+ *
+ * - `never` — the active route never touches expansion.
+ * - `on-active-change` — the active branch opens on mount and again whenever
+ *   `activeKey` changes, and the user may close it afterwards. This is what
+ *   `expandActivePath` means.
+ * - `always` — active ancestors are forced open on every render, so the active
+ *   branch cannot be closed. Kept because it was the behaviour `expandActivePath`
+ *   used to have; it is not the default and not recommended.
+ */
+export type SidebarActivePathExpansion = "never" | "on-active-change" | "always";
+/**
+ * `grouped` is the presentation this component has always rendered and stays
+ * the default. Alias of the appearance layer's `SidebarPresentation` so the
+ * two can never drift apart.
+ */
+export type SidebarVariant = SidebarPresentation;
+export interface SidebarLinkRenderProps {
+    item: SidebarLinkItem;
+    href: string;
+    className: string;
+    style: CSSProperties;
+    children: ReactNode;
+    onClick: (event: MouseEvent<HTMLAnchorElement>) => void;
+    "aria-current": "page" | undefined;
+    "aria-disabled": true | undefined;
+    "aria-label": string | undefined;
+    "data-active-ancestor": "true" | undefined;
+    target: string | undefined;
+    rel: string | undefined;
 }
-export interface SidebarGroup {
-    key: string;
+/**
+ * Lets the application swap the anchor for its own router link. Base stays
+ * routing-agnostic: no router package is imported and no route matching
+ * happens here (doc section 22).
+ */
+export type SidebarLinkRenderer = (props: SidebarLinkRenderProps) => ReactNode;
+export interface SidebarCollapseControlProps {
+    collapsed: boolean;
+    toggle: () => void;
     label: string;
-    items: SidebarLeafItem[];
-    defaultOpen?: boolean;
 }
-export type SidebarSection = SidebarLeafItem | SidebarGroup;
 export interface SidebarProps {
-    sections: SidebarSection[];
+    /** Recursive navigation model. Takes precedence over `sections` when both are given. */
+    items?: SidebarItem[];
+    /** @deprecated Legacy flat/one-level model. Still fully supported; normalized onto `items`. */
+    sections?: SidebarSection[];
+    /** `grouped` (default, the historical presentation) or the compact Metronic-style aside. */
+    variant?: SidebarVariant;
+    /** Surface tone. `auto` inherits the page theme; `light`/`dark` scope Bootstrap 5.3's own `data-bs-theme`. */
+    tone?: SidebarTone;
+    /** The one authoritative active identity. Ancestors are derived, not passed in. */
+    activeKey?: string;
+    /**
+     * Open the branch leading to `activeKey`. Off by default, so legacy rendering
+     * is unchanged. Shorthand for `activePathExpansion="on-active-change"`: the
+     * path opens on mount and whenever `activeKey` changes, and stays closable by
+     * hand in between.
+     */
+    expandActivePath?: boolean;
+    /** Explicit strategy. Wins over `expandActivePath` when both are given. */
+    activePathExpansion?: SidebarActivePathExpansion;
+    expandedKeys?: string[];
+    defaultExpandedKeys?: string[];
+    onExpandedKeysChange?: (keys: string[]) => void;
+    /** `multiple` (default) reproduces the legacy independent-groups behavior. */
+    expandMode?: SidebarExpandMode;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Render the collapse/expand control. */
+    collapsible?: boolean;
+    renderCollapseControl?: (props: SidebarCollapseControlProps) => ReactNode;
+    /** Accessible name of the control while expanded (i.e. the action it performs). */
+    collapseLabel?: string;
+    /** Accessible name of the control while collapsed. */
+    expandLabel?: string;
+    mobileOpen?: boolean;
+    defaultMobileOpen?: boolean;
+    onMobileOpenChange?: (open: boolean) => void;
+    /** Accessible name for the mobile drawer dialog. Falls back to `navLabel`. */
+    mobileLabel?: string;
+    /** Close the mobile drawer when a link or action is selected. */
+    closeMobileOnSelect?: boolean;
     header?: ReactNode;
     footer?: ReactNode;
+    /**
+     * Footer presentation while collapsed. A footer sized for the expanded aside
+     * cannot survive a ~58px rail — a select or an input would simply be clipped —
+     * and CSS alone cannot turn one control into another. Supply a compact
+     * icon-sized control here. Additive: when it is omitted the footer region is
+     * not rendered while collapsed, so nothing is clipped and no focusable
+     * control is left in a region the user cannot read.
+     */
+    collapsedFooter?: ReactNode;
     className?: string;
+    /** Accessible name of the navigation landmark. */
+    navLabel?: string;
+    onSelect?: SidebarSelectHandler;
+    renderLink?: SidebarLinkRenderer;
 }
 /**
- * Persistent vertical navigation. Leaf entries render as plain nav links;
- * grouped/collapsible sections reuse Accordion (doc section 20 — no second
- * independent collapse implementation) instead of reimplementing open/close
- * state. Active-state comes from the `active` flag the caller passes in —
- * routing/URL matching is the consuming app's job (doc section 22).
+ * Persistent vertical navigation.
+ *
+ * One recursive tree, one authoritative expansion state and one authoritative
+ * `activeKey` — no per-group Accordion instance and no per-item `active`
+ * boolean to keep in sync. The legacy `sections` shape is normalized onto the
+ * same model (`toSidebarItems`) so there is a single rendering path
+ * (doc section 20).
+ *
+ * Routing stays out of Base: real destinations render as anchors (or the
+ * consumer's `renderLink`), commands render as buttons, and URL matching
+ * remains the application's job (doc section 22).
  */
-export declare function Sidebar({ sections, header, footer, className }: SidebarProps): import("react").JSX.Element;
+export declare function Sidebar({ items, sections, variant, tone, activeKey, expandActivePath, activePathExpansion, expandedKeys, defaultExpandedKeys, onExpandedKeysChange, expandMode, collapsed, defaultCollapsed, onCollapsedChange, collapsible, renderCollapseControl, collapseLabel, expandLabel, mobileOpen, defaultMobileOpen, onMobileOpenChange, mobileLabel, closeMobileOnSelect, header, footer, collapsedFooter, className, navLabel, onSelect, renderLink, }: SidebarProps): import("react").JSX.Element;

package/dist/base/Sparkline.d.ts

@@ -0,0 +1,22 @@
+export type SparklineType = "line" | "area" | "bar";
+export type SparklineTone = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark";
+export interface SparklineProps {
+    type?: SparklineType;
+    data: number[];
+    tone?: SparklineTone;
+    width?: number;
+    height?: number;
+    strokeWidth?: number;
+    className?: string;
+    /** Accessible label — omit for a purely decorative chart (default: aria-hidden), same convention as `Icon`. */
+    label?: string;
+}
+/**
+ * Compact inline chart — the established dashboard "sparkline" concept
+ * (MUI X `SparkLineChart`, DevExtreme/Kendo Sparkline). Implemented with
+ * plain inline SVG rather than a charting dependency: this repo doesn't
+ * already depend on one, and a public API shaped around `data`/`type`/
+ * `tone` stays implementation-agnostic either way (doc: avoid unnecessary
+ * dependencies; don't leak chart-library config as the public API).
+ */
+export declare function Sparkline({ type, data, tone, width, height, strokeWidth, className, label }: SparklineProps): import("react").JSX.Element;

package/dist/base/Statistic.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export type StatisticTrend = "up" | "down" | "neutral";
+export interface StatisticProps {
+    label: ReactNode;
+    value: number | string;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    /** Decimal places applied when `value` is a number. */
+    precision?: number;
+    trend?: StatisticTrend;
+    delta?: ReactNode;
+    loading?: boolean;
+    className?: string;
+}
+/** Label/value/prefix/suffix/trend — the established dashboard "Statistic"/"Stat" pattern (MUI, Ant Design, Mantine). No dashboard business logic. */
+export declare function Statistic({ label, value, prefix, suffix, precision, trend, delta, loading, className }: StatisticProps): import("react").JSX.Element;

package/dist/base/Tabs.d.ts

@@ -1,16 +1,33 @@
 import { ReactNode } from 'react';
+export type TabsVariant = "default" | "underline" | "pill" | "card" | "button";
+export type TabsOrientation = "horizontal" | "vertical";
+export type TabsSize = "sm" | "lg";
 export interface TabItem {
     key: string;
-    label: string;
+    label: ReactNode;
+    /** Icon class name(s), passed straight through to `Icon` (icon-set agnostic — doc section 15). */
+    icon?: string;
+    badge?: ReactNode;
     disabled?: boolean;
-    content: ReactNode;
+    /**
+     * Optional — a tab can be nav-only (content driven externally, e.g. by
+     * the same `activeKey` state feeding a sibling `DataGrid`) instead of
+     * owning its panel.
+     */
+    content?: ReactNode;
 }
 export interface TabsProps {
     items: TabItem[];
     activeKey?: string;
     defaultActiveKey?: string;
     onChange?: (key: string) => void;
+    /** Generic nav look, not a Metronic widget name — express a Metronic visual as `variant="pill"` + `icon`, not a new named variant. */
+    variant?: TabsVariant;
+    orientation?: TabsOrientation;
+    size?: TabsSize;
+    /** Tab list fills its container width (`nav-fill`). */
+    stretch?: boolean;
     className?: string;
 }
 /** Tab definitions (`items`) are kept separate from rendering, per doc section 16. */
-export declare function Tabs({ items, activeKey, defaultActiveKey, onChange, className }: TabsProps): import("react").JSX.Element;
+export declare function Tabs({ items, activeKey, defaultActiveKey, onChange, variant, orientation, size, stretch, className }: TabsProps): import("react").JSX.Element;

package/dist/base/Tag.d.ts

@@ -1,7 +1,9 @@
 import { ReactNode } from 'react';
-import { BadgeVariant } from './Badge';
+import { BadgeAppearance, BadgeVariant } from './Badge';
 export interface TagProps {
     variant?: BadgeVariant;
+    /** Same additive contract as Badge; `solid` stays the default. */
+    appearance?: BadgeAppearance;
     onRemove?: () => void;
     className?: string;
     children: ReactNode;
@@ -11,4 +13,4 @@ export interface TagProps {
  * from Badge is purely behavioral: Tag is removable/interactive, Badge is
  * static.
  */
-export declare function Tag({ variant, onRemove, className, children }: TagProps): import("react").JSX.Element;
+export declare function Tag({ variant, appearance, onRemove, className, children }: TagProps): import("react").JSX.Element;

package/dist/base/Text.d.ts

@@ -0,0 +1,21 @@
+import { ElementType, ReactNode } from 'react';
+export type TextSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type TextWeight = "normal" | "medium" | "semibold" | "bold";
+export type TextTone = "default" | "muted" | "primary" | "success" | "danger" | "warning" | "info";
+export type TextAlign = "start" | "center" | "end";
+export interface TextProps {
+    /** Rendered element — defaults to `span`. Pass e.g. `"h3"`/`"p"`/`"label"` for a semantic element without losing the typography contract. */
+    as?: ElementType;
+    size?: TextSize;
+    weight?: TextWeight;
+    tone?: TextTone;
+    align?: TextAlign;
+    /** Single-line ellipsis truncation. */
+    truncate?: boolean;
+    /** `false` disables wrapping (`text-nowrap`) without truncating. */
+    wrap?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+/** Generic typography primitive — replaces ad hoc `<span className="text-gray-500 fw-semibold fs-7">` markup at call sites. */
+export declare function Text({ as, size, weight, tone, align, truncate, wrap, className, children }: TextProps): import("react").JSX.Element;

package/dist/base/Tooltip.d.ts

@@ -4,6 +4,13 @@ export interface TooltipProps {
     children: ReactNode;
     placement?: "top" | "bottom";
     className?: string;
+    /**
+     * Class for the trigger wrapper. The wrapper is inline-block by default,
+     * which is right for an inline trigger but wrong for a full-width row (e.g.
+     * a collapsed Sidebar item), so callers can override the display here
+     * instead of reimplementing a second tooltip.
+     */
+    wrapperClassName?: string;
 }
 /**
  * Reuses the existing Popup primitive (open/close, escape-to-close, outside
@@ -18,4 +25,4 @@ export interface TooltipProps {
  * conservative choice here, not less (doc section 18: "do NOT introduce
  * another positioning library unless actually necessary").
  */
-export declare function Tooltip({ content, children, placement, className }: TooltipProps): import("react").JSX.Element;
+export declare function Tooltip({ content, children, placement, className, wrapperClassName }: TooltipProps): import("react").JSX.Element;

package/dist/base/appearanceSchemes.d.ts

@@ -0,0 +1,92 @@
+/**
+ * Semantic color schemes.
+ *
+ * A scheme is deliberately NOT a single raw color. Changing only the primary
+ * hue leaves buttons, active components and menu states inconsistent, so a
+ * scheme is a complete coordinated token family that is validated before it
+ * can be registered or applied.
+ *
+ * Variable mapping (verified against the repository's real styling stack —
+ * `bootstrap@5.3.8`, which is this package's peer dependency):
+ *
+ * - `--bs-primary` and `--bs-primary-rgb` genuinely exist in Bootstrap 5.3 and
+ *   are written directly, so Bootstrap's own components follow the scheme.
+ * - `--bs-primary-active`, `--bs-primary-light`, `--bs-primary-inverse`,
+ *   `--bs-component-*` and `--bs-menu-link-color-*` do NOT exist in Bootstrap.
+ *   They are Metronic's names. They are emitted anyway so that an application
+ *   that really does ship Metronic gets a coordinated result instead of a
+ *   half-recolored theme.
+ * - `--rrc-*` are this repository's own tokens, which are what this library's
+ *   stylesheet actually consumes. Each one falls back to the Bootstrap or
+ *   Metronic variable when present, so the mapping works with Metronic, with
+ *   plain Bootstrap, and with neither.
+ */
+/** The full token family a scheme must define. */
+export interface ColorSchemeTokens {
+    primary: string;
+    primaryActive: string;
+    primaryLight: string;
+    /** Foreground placed on top of `primary` — the scheme's contrast value. */
+    primaryInverse: string;
+    /** Comma-separated channels of `primary`, e.g. "13, 110, 253". */
+    primaryRgb: string;
+    componentActiveColor: string;
+    componentActiveBg: string;
+    componentHoverColor: string;
+    componentHoverBg: string;
+    componentCheckedColor: string;
+    componentCheckedBg: string;
+    menuLinkColorHover: string;
+    menuLinkColorShow: string;
+    menuLinkColorHere: string;
+    menuLinkColorActive: string;
+}
+export interface ColorScheme {
+    id: string;
+    tokens: ColorSchemeTokens;
+    /**
+     * Optional swatch color for a selector UI. Defaults to `tokens.primary`.
+     * Never the scheme's identity — selection must be indicated by more than
+     * color alone, so the selector also renders a real label and a checked state.
+     */
+    swatch?: string;
+}
+export declare const COLOR_SCHEME_TOKEN_KEYS: readonly (keyof ColorSchemeTokens)[];
+/** True only when every required token is present and non-empty. */
+export declare function isValidColorScheme(value: unknown): value is ColorScheme;
+export interface ColorSchemeSeed {
+    id: string;
+    primary: string;
+    primaryActive: string;
+    primaryLight: string;
+    primaryInverse: string;
+    primaryRgb: string;
+    swatch?: string;
+}
+/**
+ * Derives the coordinated component/menu tokens from the four primary shades,
+ * so a scheme author cannot accidentally register a half-defined family.
+ * Callers that need full control can build a `ColorScheme` literal instead.
+ */
+export declare function createColorScheme(seed: ColorSchemeSeed): ColorScheme;
+/** The scheme applied when nothing else is selected — Bootstrap's own primary. */
+export declare const DEFAULT_COLOR_SCHEME_ID = "blue";
+/**
+ * Registers an application-owned scheme. Rejects an incomplete family rather
+ * than applying a partially recolored theme.
+ */
+export declare function registerColorScheme(scheme: ColorScheme): void;
+export declare function getColorScheme(id: string): ColorScheme | undefined;
+/** Registered schemes in registration order — built-ins first. */
+export declare function listColorSchemes(): ColorScheme[];
+/**
+ * Resolves an identifier to a scheme, falling back to the default rather than
+ * throwing, so an unknown persisted value degrades safely.
+ */
+export declare function resolveColorScheme(id: string | undefined): ColorScheme;
+/**
+ * The scheme as CSS custom properties, ready to spread into a `style` object
+ * or write onto a DOM node. Emits the real Bootstrap variables, the
+ * Metronic-compatible names, and this repository's own `--rrc-*` tokens.
+ */
+export declare function colorSchemeCssVariables(scheme: ColorScheme): Record<string, string>;

package/dist/base/index.d.ts

@@ -47,6 +47,16 @@ export * from './Icon';
 export * from './Navbar';
 export * from './Sidebar';
 export * from './PageHeader';
+export * from './Text';
+export * from './Flex';
+export * from './IconButton';
+export * from './ListItem';
+export * from './Sparkline';
+export * from './Statistic';
+export { AppearanceProvider, useAppearance, createAppearanceInitScript, THEME_MODES, SIDEBAR_PRESENTATIONS, SIDEBAR_TONES } from './Appearance';
+export type { AppearanceContextValue, AppearanceInitScriptOptions, AppearanceProviderProps, AppearanceSettings, AppearanceStorage, ResolvedTheme, SidebarPresentation, SidebarTone, ThemeMode, } from './Appearance';
+export * from './appearanceSchemes';
+export * from './AppearanceMenu';
 export { Popup } from './shared/Popup';
 export type { PopupProps } from './shared/Popup';
 export { Label } from './shared/Label';