h2o-library 1.7.1 → 2.0.0

package/dist/components/src/loader/loader.d.ts

@@ -0,0 +1,12 @@
+import "./loader.css";
+import type { HTMLAttributes } from "react";
+type LoaderVariant = "dots" | "bars" | "spinner";
+interface LoaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Visual style: `dots`, `bars`, or `spinner` (default). */
+    variant?: LoaderVariant;
+}
+/**
+ * Inline loading indicator. Three CSS-only variants; defaults to `spinner`.
+ */
+export declare function Loader({ variant, className, role, "aria-label": ariaLabel, ...props }: LoaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/src/logo/logo.d.ts

@@ -0,0 +1,12 @@
+/**
+ * H2O brand mark: inline SVG, inherits `color` for `currentColor` fill.
+ *
+ * @param {object} props
+ * @param {string} [props.className] - Optional classes on the root `<svg>`.
+ * @param {number} [props.size] - Width and height in pixels. Default `36`.
+ * @returns {JSX.Element} The logo `<svg>`.
+ */
+export declare function Logo({ className, size }: {
+    className?: string;
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/src/message/message.d.ts

@@ -0,0 +1,34 @@
+import "./message.css";
+/**
+ * Banner tone: drives icon, border/background, and ARIA `role` selection.
+ * @type {("info"|"muted"|"error"|"warning"|"success")}
+ */
+export type MessageVariant = "info" | "muted" | "error" | "warning" | "success";
+/**
+ * Inline alert/banner: icon, optional text or `children`, optional dismiss.
+ *
+ * @property {MessageVariant} variant - Visual and semantic style.
+ * @property {string} [message] - Shorthand body string; if omitted, use `children`.
+ * @property {React.ReactNode} [children] - Rich content; wins over `message` when both set.
+ * @property {() => void} [onDismiss] - When set, shows a close control and calls this on dismiss.
+ * @property {number} [iconSize] - Icon box in px. Default `16`.
+ * @property {number} [iconStrokeWidth] - Stroke width of the left icon. Default `1.5`.
+ */
+interface MessageProps {
+    variant: MessageVariant;
+    className?: string;
+    iconSize?: number;
+    iconStrokeWidth?: number;
+    iconClassName?: string;
+    message?: string;
+    children?: React.ReactNode;
+    onDismiss?: () => void;
+}
+/**
+ * Renders a one-line or short multi-line system message; returns `null` if neither `message` nor `children` is provided.
+ *
+ * @param {MessageProps} props - Variant, content, and optional dismiss.
+ * @returns {JSX.Element | null} The banner, or `null` when there is no content to show.
+ */
+export declare const Message: ({ variant, className, iconSize, iconStrokeWidth, iconClassName, message, children, onDismiss, }: MessageProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/src/modal/modal.d.ts

@@ -0,0 +1,35 @@
+import "./modal.css";
+import type React from "react";
+/**
+ * Modal dialog: **controlled** by `isOpen`; optional `onClose` for overlay/Escape/close button.
+ *
+ * @property {boolean} isOpen - Renders the portal and trap when `true`.
+ * @property {() => void} [onClose] - If omitted, the header close is hidden / no-op depending on design.
+ * @property {React.ReactNode} children - Primary dialog body.
+ * @property {React.ReactNode} [footer] - Sticky action row below the body.
+ * @property {"sm"|"md"|"lg"} [size] - Max width of the card. Default `"md"`.
+ */
+interface ModalProps {
+    isOpen: boolean;
+    onClose?: () => void;
+    title?: string;
+    description?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    titleContainerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    closeButtonClassName?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+}
+/**
+ * Centered overlay card with `role="dialog"`, focus trap, and optional title/description slots.
+ *
+ * @param {object} props - `isOpen` and content slots; BEM `className` parts for theming.
+ * @returns {JSX.Element | null} The dialog portal when `isOpen`, else `null`.
+ */
+export declare const Modal: ({ isOpen, onClose, title, description, children, footer, size, className, titleContainerClassName, titleClassName, descriptionClassName, closeButtonClassName, headerClassName, contentClassName, }: ModalProps) => React.ReactPortal | null;
+export {};

package/dist/components/src/month-calendar/month-calendar.d.ts

@@ -0,0 +1,28 @@
+import "./month-calendar.css";
+/**
+ * Month/year picker: grid of 12 months or a decade of years; no day-level selection.
+ *
+ * @property {Date} [value] - Optional controlled selection (month precision; only month/year are meaningful).
+ * @property {(value: Date) => void} [onChange] - Fires with the first day of the selected month.
+ * @property {Date} [minDate] - Inclusive lower bound; whole months before this are disabled.
+ * @property {Date} [maxDate] - Inclusive upper bound; months after are disabled.
+ * @property {Date[]} [disabledDates] - Extra disabled calendar days; months with only disabled coverage may be limited by implementation.
+ * @property {(year: number) => void} [onYearChange] - Fires when the user navigates to another year in month view.
+ */
+interface MonthCalendarProps {
+    value?: Date;
+    onChange?: (value: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+    onYearChange?: (year: number) => void;
+    className?: string;
+}
+/**
+ * Browses years and months in two views; enforces `minDate` / `maxDate` and optional `disabledDates`.
+ *
+ * @param {MonthCalendarProps} props - Value, change handler, and bounds.
+ * @returns {JSX.Element} The month/year navigation UI and grid.
+ */
+declare const MonthCalendar: ({ value, onChange, minDate, maxDate, onYearChange, className, }: MonthCalendarProps) => JSX.Element;
+export { MonthCalendar };

package/dist/components/src/multi-menu/multi-menu.d.ts

@@ -0,0 +1,39 @@
+import "./multi-menu.css";
+import React from "react";
+/**
+ * One node in a nested `MultiMenu` tree (siblings at the same level need unique `value`s).
+ *
+ * @property {string} label - Menu row label.
+ * @property {string} value - Stable id; must be unique among siblings.
+ * @property {() => void} [onClick] - Fires when a leaf (no `subItems`) is activated; skipped when `subItems` exist.
+ * @property {MultiMenuItem[]} [subItems] - If present, opens a sub-panel with these entries.
+ */
+export interface MultiMenuItem {
+    label: string;
+    value: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    subItems?: MultiMenuItem[];
+}
+/**
+ * Hierarchical “overflow” / actions menu: trigger button and cascading flyouts from `items`.
+ * Extends `HTMLButtonElement` attributes except `size` (use design-system `size` instead).
+ *
+ * @property {MultiMenuItem[]} items - Top-level item tree.
+ * @property {string} [label] - Trigger button text. Default `"Options"`.
+ */
+interface MultiMenuProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> {
+    size?: "sm" | "md" | "lg";
+    label?: string;
+    containerClassName?: string;
+    items: MultiMenuItem[];
+}
+/**
+ * Renders a menu trigger and nested panels; supports keyboard navigation and click-outside close.
+ *
+ * @param {MultiMenuProps} props - Tree in `items` and trigger props.
+ * @param {React.Ref<HTMLButtonElement>} ref - For the top-level menu trigger.
+ * @returns {React.ReactElement} Markup for the trigger and any open flyout(s).
+ */
+export declare const MultiMenu: React.ForwardRefExoticComponent<MultiMenuProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/src/multi-select/multi-select.d.ts

@@ -0,0 +1,49 @@
+import "./multi-select.css";
+import React from "react";
+/**
+ * A selectable item in the dropdown list; `value` must be unique across `options`.
+ * @property {string} label - Shown in the list and in selected tags.
+ * @property {string} value - Stable id stored in the selection array.
+ */
+export interface MultiSelectOption {
+    label: string;
+    value: string;
+}
+/**
+ * **Controlled** multi-select: `value` is the full set of selected `{ label, value }` objects, not just keys.
+ *
+ * @property {MultiSelectOption[]} options - Full catalog; filtered when `showSearch` is on.
+ * @property {MultiSelectOption[]} value - Current selection (order preserved for tags).
+ * @property {(options: MultiSelectOption[]) => void} onChange - Emits the new array on any change.
+ * @property {number} [maxSelectedOptions] - Hard cap; further picks are ignored when reached.
+ * @property {boolean} [showSearch] - When `true`, shows a search field in the panel. Default `true`.
+ * @property {boolean} [showSelectAll] - When `true`, exposes a select-all control in the list. Default `false`.
+ */
+interface MultiSelectProps {
+    options: MultiSelectOption[];
+    value: MultiSelectOption[];
+    onChange: (options: MultiSelectOption[]) => void;
+    placeholder?: string;
+    label?: string;
+    error?: string;
+    note?: string;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    containerClassName?: string;
+    maxSelectedOptions?: number;
+    showClear?: boolean;
+    toggleLabel?: string;
+    onToggle?: (checked: boolean) => void;
+    showSearch?: boolean;
+    showSelectAll?: boolean;
+}
+/**
+ * Field that opens a list with checkboxes, optional search, select-all, max cap, and selected rows as `Tag`s.
+ *
+ * @param {MultiSelectProps} props - Controlled `value` / `onChange` plus `options`.
+ * @param {React.Ref<HTMLDivElement>} ref - Container ref.
+ * @returns {React.ReactElement} Trigger, open panel, and tag stack.
+ */
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/src/pagination/pagination.d.ts

@@ -0,0 +1,33 @@
+import "./pagination.css";
+/**
+ * Page/limit UI: **controlled** `currentPage`, `perPage`, and `totalPages`.
+ *
+ * @property {number} currentPage - 1-based index of the active page.
+ * @property {number} totalPages - Total page count from the server or client math.
+ * @property {number} perPage - Rows per page (synced with `Dropdown` for `onPerPageChange`).
+ * @property {number} [totalItems] - Optional; shown in the summary line when provided.
+ * @property {{label: string, value: number}[]} [perPageOptions] - Dropdown entries; default presets 10–50.
+ * @property {(page: number) => void} onPageChange - Called with the new 1-based page.
+ * @property {(perPage: number) => void} onPerPageChange - Called when the user changes page size.
+ */
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    perPage: number;
+    totalItems?: number;
+    perPageOptions?: {
+        label: string;
+        value: number;
+    }[];
+    onPageChange: (page: number) => void;
+    onPerPageChange: (perPage: number) => void;
+    className?: string;
+}
+/**
+ * Renders first/prev/next/last, numeric page window, and a per-page `Dropdown` when `perPageOptions` is set.
+ *
+ * @param {PaginationProps} props - Page + limit state and handlers.
+ * @returns {JSX.Element} The pagination toolbar.
+ */
+export declare function Pagination({ currentPage, totalPages, perPage, totalItems, perPageOptions, onPageChange, onPerPageChange, className, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/src/popover/popover.d.ts

@@ -0,0 +1,53 @@
+import "./popover.css";
+import type { ReactNode } from "react";
+import type React from "react";
+/**
+ * **Controlled** headless popover: `isOpen` / `setIsOpen` and children compose with `PopOverTrigger` + `PopOverContent`.
+ *
+ * @property {boolean} isOpen - When `true`, `PopOverContent` computes position and listens for outside close.
+ * @property {(isOpen: boolean) => void} setIsOpen - Toggle or close the panel (same contract as `useState` setter).
+ * @property {React.ReactNode} children - Must include one `PopOverTrigger` and one `PopOverContent` (siblings under this provider).
+ * @property {"left"|"right"} [alignment] - Horizontal align of the panel vs the trigger. Default `"left"`.
+ * @property {number} [offset] - Gap in px between trigger bottom and panel top. Default `8`.
+ */
+interface PopOverProps {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    children: React.ReactNode;
+    alignment?: "left" | "right";
+    /** Gap in px between trigger and floating panel. Default: 8. */
+    offset?: number;
+    className?: string;
+}
+/**
+ * React context root for a floating popover: shares `isOpen` and trigger ref with trigger + content.
+ *
+ * @param {PopOverProps} props - `isOpen` / `setIsOpen` and `children` tree.
+ * @returns {JSX.Element} The provider and optional `className` on the wrapper `div`.
+ */
+export declare const PopOver: ({ children, isOpen, setIsOpen, alignment, offset, className, }: PopOverProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The toggling surface for a popover: click / Enter / Space flips `isOpen`; `ref` targets this `div` for anchoring.
+ *
+ * @param {object} props
+ * @param {ReactNode} props.children - Trigger contents (e.g. a `Button`).
+ * @param {string} [props.className] - Extra classes on the trigger `div`.
+ * @returns {JSX.Element} A `div` with `role="button"`, focusable, and `aria-expanded` bound to `isOpen`.
+ */
+export declare const PopOverTrigger: ({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Portal-mounted panel: positions under (or flips above) the trigger, closes on outside click and Escape.
+ *
+ * @param {object} props
+ * @param {ReactNode} props.children - Panel body.
+ * @param {string} [props.className] - Extra classes on the floating `div`.
+ * @returns {JSX.Element | null} The fixed panel when `isOpen`, else `null`.
+ */
+export declare const PopOverContent: ({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}) => JSX.Element | null;
+export {};

package/dist/components/src/radio/radio.d.ts

@@ -0,0 +1,31 @@
+import "./radio.css";
+import React from "react";
+import type { TooltipPosition } from "../../../types";
+/**
+ * Single radio control: extends `HTMLInputElement` except `type` and design-system `size`.
+ *
+ * @property {string} [label] - Legend next to the circle.
+ * @property {string} [description] - Subtext under the label in card mode.
+ * @property {boolean} [isCard] - Large card layout vs inline. Default `false`.
+ * @property {"sm"|"md"|"lg"} [size] - Visual scale. Default `"md"`.
+ */
+interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    label?: string;
+    description?: string;
+    containerClassName?: string;
+    error?: string;
+    note?: string;
+    size?: "sm" | "md" | "lg";
+    isCard?: boolean;
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+}
+/**
+ * Radio `input` with optional label row, validation text, and info tooltip on the label.
+ *
+ * @param {RadioProps} props - Native `checked`/`onChange` plus label and `isCard`.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded to the `<input type="radio">`.
+ * @returns {React.ReactElement} Wrapper `div` with `label` and optional error/note.
+ */
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/src/radio-group/radio-group.d.ts

@@ -0,0 +1,42 @@
+import "./radio-group.css";
+import type { IconType, TooltipPosition } from "../../../types";
+/**
+ * One entry in a `RadioGroup` `options` array.
+ * @property {string} label - Option title.
+ * @property {string} value - Emitted to `onChange` when selected.
+ * @property {import("../../../types").IconType} [icon] - Optional leading icon.
+ * @property {"active"|"inactive"} [dot] - Optional status dot style when no icon.
+ */
+export interface RadioOption {
+    label: string;
+    value: string;
+    icon?: IconType;
+    dot?: "active" | "inactive";
+    disabled?: boolean;
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+}
+/**
+ * **Controlled** radio group: `selected` is the `value` of the chosen `RadioOption`.
+ *
+ * @property {RadioOption[]} options - The full set of choices.
+ * @property {string} selected - Current `value` (must match one option, or be managed by the parent for empty state).
+ * @property {(value: string) => void} onChange - Called with the new `value` on selection.
+ */
+interface RadioGroupProps {
+    options: RadioOption[];
+    selected: string;
+    onChange: (value: string) => void;
+    ariaLabel?: string;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    optionClassName?: string;
+}
+/**
+ * Horizontal/vertical list of option “cards” with shared `role="radiogroup"` and keyboard roving.
+ *
+ * @param {RadioGroupProps} props - `options`, `selected`, and `onChange` are required.
+ * @returns {JSX.Element} The radiogroup container and one button per option.
+ */
+export declare const RadioGroup: ({ options, selected, onChange, ariaLabel, size, className, optionClassName, }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/src/segmented-toggle/segmented-toggle.d.ts

@@ -0,0 +1,50 @@
+import "./segmented-toggle.css";
+import type React from "react";
+import type { SVGProps } from "react";
+import type { IconType } from "../../../types";
+/** Extra attributes forwarded to `Icon` (per segment). */
+type SegmentedToggleIconProps = Omit<SVGProps<SVGSVGElement>, "children"> & {
+    size?: number;
+    strokeWidth?: number;
+};
+/**
+ * One segment in a `SegmentedToggle` row.
+ *
+ * @property {string} label - Button text.
+ * @property {string} value - Emitted to `onChange` when that segment is selected.
+ * @property {IconType} [icon] - Optional leading icon (per-option `iconProps` fine-tune the `Icon`).
+ */
+export type SegmentedToggleOption = {
+    label: string;
+    value: string;
+    icon?: IconType;
+    iconProps?: SegmentedToggleIconProps;
+    labelProps?: React.HTMLAttributes<HTMLSpanElement>;
+    disabled?: boolean;
+};
+/**
+ * **Controlled** `selected` + `onChange` string; `options` render as a connected button group.
+ *
+ * @property {SegmentedToggleOption[]} options - Segments; may include per-option `disabled`.
+ * @property {string} selected - Current `value` (must match an option for correct pressed state).
+ * @property {(value: string) => void} onChange - Fires with the option `value` on click or keyboard.
+ * @property {string} [ariaLabel] - Accessible name for the `role="radiogroup"` container.
+ */
+interface SegmentedToggleProps {
+    options: SegmentedToggleOption[];
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    optionClassName?: string;
+    selected: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    ariaLabel?: string;
+}
+/**
+ * Horizontal iOS-style segmented control with optional icons, keyboard roving, and `aria-pressed` sync.
+ *
+ * @param {SegmentedToggleProps} props - `options`, `selected`, and `onChange` are required.
+ * @returns {JSX.Element} The `radiogroup` container and one button per option.
+ */
+export declare function SegmentedToggle({ options, size, className, optionClassName, selected, onChange, disabled, ariaLabel, }: SegmentedToggleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/src/side-panel/side-panel.d.ts

@@ -0,0 +1,36 @@
+import "./side-panel.css";
+import type React from "react";
+/**
+ * Slide-in panel (drawer) props: **controlled** `isOpen`; focus trap and Escape close when open.
+ *
+ * @property {boolean} isOpen - When `true`, mounts the portal and traps focus.
+ * @property {() => void} onClose - Called from the close button and Escape.
+ * @property {"left"|"right"} [position] - Slide origin. Default `"right"`.
+ * @property {"sm"|"md"|"lg"} [size] - Panel width preset. Default `"md"`.
+ * @property {React.ReactNode} children - Main scrollable body between header and optional `footer`.
+ */
+interface SidePanelProps {
+    isOpen: boolean;
+    onClose: () => void;
+    position?: "left" | "right";
+    size?: "sm" | "md" | "lg";
+    title?: string;
+    description?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+    titleContainerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    closeButtonClassName?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+}
+/**
+ * Off-canvas panel with title/description, default close control, and optional `footer` slot.
+ *
+ * @param {SidePanelProps} props - `isOpen` / `onClose` plus layout BEM class overrides.
+ * @returns {JSX.Element | null} Portal content when `isOpen`, else `null`.
+ */
+export declare const SidePanel: ({ isOpen, onClose, position, size, title, description, children, footer, className, titleContainerClassName, titleClassName, descriptionClassName, closeButtonClassName, headerClassName, contentClassName, }: SidePanelProps) => JSX.Element | null;
+export {};

package/dist/components/src/skeleton/skeleton.d.ts

@@ -0,0 +1,15 @@
+import "./skeleton.css";
+import type { HTMLAttributes } from "react";
+type SkeletonVariant = "text" | "rectangular" | "circular";
+interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    variant?: SkeletonVariant;
+    width?: string | number;
+    height?: string | number;
+    size?: "sm" | "md" | "lg";
+    animate?: boolean;
+}
+/**
+ * Placeholder block with a muted surface and a subtle shimmer aligned to the design tokens.
+ */
+export declare const Skeleton: ({ variant, width, height, size, animate, className, style, role, "aria-label": ariaLabel, ...props }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/src/slider/slider.d.ts

@@ -0,0 +1,46 @@
+import "./slider.css";
+import type React from "react";
+import type { TooltipPosition } from "../../../types";
+export type SliderMark = {
+    value: number;
+    label?: string;
+};
+type BaseSliderProps = {
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    label?: string;
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+    note?: string;
+    error?: string;
+    containerClassName?: string;
+    className?: string;
+    marks?: SliderMark[];
+    showExtents?: boolean;
+    showValue?: boolean;
+    showTooltip?: boolean;
+    name?: string;
+    formatValue?: (value: number) => string;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "value">;
+type SingleSliderProps = BaseSliderProps & {
+    range?: false;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+};
+type RangeSliderProps = BaseSliderProps & {
+    range: true;
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onValueChange?: (value: [number, number]) => void;
+    minDistance?: number;
+};
+type SliderProps = SingleSliderProps | RangeSliderProps;
+/**
+ * Single-thumb or dual-thumb range slider with keyboard support, optional marks,
+ * tooltips, and field chrome (label, error, note) consistent with `Input`.
+ */
+export declare function Slider(props: SliderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/src/table/table-utils.d.ts

@@ -0,0 +1,2 @@
+export declare const isInteractiveElement: (element: HTMLElement | null) => boolean;
+export declare const hasInteractiveParent: (element: HTMLElement | null, stopAt: HTMLElement | null) => boolean;

package/dist/components/src/table/table.d.ts

@@ -0,0 +1,78 @@
+import "./table.css";
+import React from "react";
+/**
+ * Sort state for a column: ascending, descending, or unsorted.
+ * @type {("asc"|"desc"|null)}
+ */
+export type SortDirection = "asc" | "desc" | null;
+/**
+ * One column: accessor `key` maps to `row[key]`, with optional `render` for custom cells.
+ * @template T - Row type.
+ * @property {string} key - Object key on each row, or a synthetic key for custom columns.
+ * @property {boolean} [sortable] - When `true` and `onSort` is provided, header is clickable.
+ * @property {function(unknown, T): React.ReactNode} [render] - If omitted, `String(row[key])` is used.
+ */
+export interface TableColumn<T> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    minWidth?: string;
+    maxWidth?: string;
+    width?: string;
+    render?: (value: unknown, row: T) => React.ReactNode;
+}
+/**
+ * @template T - Row object type; keys should match `TableColumn.key` where possible.
+ * Full data grid: sort, optional row selection, column edit popover (drag/drop + visibility), pagination, loading.
+ *
+ * @property {TableColumn<T>[]} columns - Column defs; can include a synthetic `__selection` for checkboxes.
+ * @property {T[]} data - Rows to render; order is preserved.
+ * @property {string} [sortKey] - **Controlled** sort column; use with `sortDirection` and `onSort`.
+ * @property {SortDirection} [sortDirection] - Current direction for `sortKey`.
+ * @property {boolean} [columnsEditable] - Enables “Edit columns” popover. Default `false`.
+ * @property {string[]} [visibleColumns] - **Controlled** list of column keys to show. Pair with `onVisibleColumnsChange`.
+ * @property {T[]} [selectedRows] - **Controlled** selected rows. Pair with `onSelectionChange` and `rowKey`.
+ * @property {keyof T} [rowKey] - Unique key field on `T` for selection identity. Often `"id"`.
+ * @property {number} [currentPage] - 1-based page index when `Pagination` is used.
+ * @property {string} [maxHeight] - Max height of the scrollable table body.
+ */
+interface TableProps<T extends Record<string, unknown>> {
+    columns: TableColumn<T>[];
+    data: T[];
+    isLoading?: boolean;
+    className?: string;
+    containerClassName?: string;
+    rowHeight?: string;
+    sortKey?: string;
+    sortDirection?: SortDirection;
+    columnsEditable?: boolean;
+    currentPage?: number;
+    totalPages?: number;
+    perPage?: number;
+    perPageOptions?: {
+        label: string;
+        value: number;
+    }[];
+    onSort?: (key: string, direction: SortDirection) => void;
+    onPageChange?: (page: number) => void;
+    onPerPageChange?: (perPage: number) => void;
+    onVisibleColumnsChange?: (keys: string[]) => void;
+    maxHeight?: string;
+    visibleColumns?: string[];
+    maxVisibleColumns?: number;
+    defaultVisibleColumns?: string[];
+    trailingColumns?: string[];
+    selectedRows?: T[];
+    onSelectionChange?: (rows: T[]) => void;
+    rowKey?: keyof T;
+    onRowClick?: (row: T, rowIndex: number) => void;
+}
+/**
+ * Renders a full-featured table: headers, body, optional selection column, sort indicators, edit-columns popover, and pagination.
+ *
+ * @template T - Row record type.
+ * @param {object} props - Column definitions, data, and optional controlled sorting / pagination / selection.
+ * @returns {JSX.Element} The table shell, scroll region, and optional `Pagination` / `Loader`.
+ */
+export declare function Table<T extends Record<string, unknown>>({ columns, data, isLoading, className, rowHeight, sortKey, sortDirection, onSort, currentPage, totalPages, perPage, perPageOptions, onPageChange, onPerPageChange, maxHeight, columnsEditable, containerClassName, visibleColumns, onVisibleColumnsChange, maxVisibleColumns, defaultVisibleColumns, trailingColumns, selectedRows, onSelectionChange, rowKey, onRowClick, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/src/tabs/tabs.d.ts

@@ -0,0 +1,35 @@
+import "./tabs.css";
+/**
+ * One entry in a `Tabs` `tabs` list.
+ * @property {string} value - Emitted to `onChange` when the tab is activated.
+ */
+export type TabItem = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+/**
+ * **Controlled** tab strip: `selectedTab` must match a `TabItem.value` for the active state.
+ *
+ * @property {TabItem[]} tabs - Tab metadata; `disabled` items are skipped in keyboard nav.
+ * @property {string} selectedTab - Current `value` of the active tab.
+ * @property {(value: string) => void} onChange - Fires with the new tab `value` on click or keyboard.
+ * @property {"sm"|"md"|"lg"} [size] - Size token for the tab list. Default `"md"`.
+ */
+interface TabsProps {
+    tabs: TabItem[];
+    selectedTab: string;
+    onChange: (tab: string) => void;
+    ariaLabel?: string;
+    size?: "sm" | "md" | "lg";
+    tabClassName?: string;
+    className?: string;
+}
+/**
+ * Renders a `tablist` with one `button` per tab, roving tabindex, and arrow-key / Home / End support.
+ *
+ * @param {TabsProps} props - `tabs` / `selectedTab` / `onChange` plus `ariaLabel` for the list.
+ * @returns {JSX.Element} The horizontal tab list.
+ */
+export declare const Tabs: ({ tabs, selectedTab, onChange, ariaLabel, size, tabClassName, className, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export {};