@equinor/stratus-ui 1.1.0 → 1.3.1

package/dist/types/components/Select/SelectSelectedDisplay.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode, SyntheticEvent } from "react";
+import type { SelectOptionProps } from "./Select";
+interface SelectSelectedDisplayProps {
+    tags: boolean;
+    infield: boolean;
+    selectedIds: Array<string | number>;
+    allFlat: SelectOptionProps[];
+    tagMaxCount?: number;
+    tagMaxCountPlaceholder?: string | ((numberOfSelectedOptions: number) => string);
+    selectedLabel: ReactNode | ((numberOfSelectedOptions: number, total: number) => string);
+    onTagRemove: (optId: string | number, event: SyntheticEvent) => void;
+}
+/**
+ * Renders the in-field summary of selected options for a multi-select.
+ * Switches between three modes:
+ * - `tags + infield`: chip-style tags with remove buttons (with optional
+ *   count placeholder when `tagMaxCount` is exceeded).
+ * - `infield` only: a single label like `"3/12 Selected"`.
+ * - otherwise: returns `null` (display happens outside the trigger).
+ */
+export declare function SelectSelectedDisplay({ tags, infield, selectedIds, allFlat, tagMaxCount, tagMaxCountPlaceholder, selectedLabel, onTagRemove, }: SelectSelectedDisplayProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=SelectSelectedDisplay.d.ts.map

package/dist/types/components/Select/SelectSelectedDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectSelectedDisplay.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/SelectSelectedDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAGlD,UAAU,0BAA0B;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACpC,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EACnB,MAAM,GACN,CAAC,CAAC,uBAAuB,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAClD,aAAa,EACT,SAAS,GACT,CAAC,CAAC,uBAAuB,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACjE,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CACtE;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,OAAO,EACP,WAAW,EACX,OAAO,EACP,WAAW,EACX,sBAAsB,EACtB,aAAa,EACb,WAAW,GACZ,EAAE,0BAA0B,sCAgD5B"}

package/dist/types/components/Select/selectUtils.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+import type { SelectOptionProps, SelectValueType } from "./Select";
+/**
+ * Coerces a single value or array into a flat array of selected ids,
+ * filtering out empty strings and nullish entries. Used to normalize
+ * both controlled `value` and uncontrolled `defaultValue` props into
+ * a consistent shape for internal selection state.
+ */
+export declare function normalizeValue(val: SelectValueType | undefined): Array<string | number>;
+/**
+ * Recursively flattens nested `optgroup` options into a single list of
+ * leaf options. Group nodes themselves are dropped — only their
+ * descendants are returned.
+ */
+export declare function flattenOptions(opts: SelectOptionProps[]): SelectOptionProps[];
+/**
+ * Returns the stable identifier used to compare options. Falls back to
+ * the option's label when no `value` is provided.
+ */
+export declare function getOptionId(opt: SelectOptionProps): string;
+/**
+ * Converts native `<option>` / `<optgroup>` JSX children into the
+ * `SelectOptionProps[]` shape used internally. Lets consumers write
+ * `<Select><option value="a">A</option></Select>` instead of passing
+ * an `options` prop.
+ */
+export declare function parseOptionChildren(children: ReactNode): SelectOptionProps[];
+//# sourceMappingURL=selectUtils.d.ts.map

package/dist/types/components/Select/selectUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectUtils.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/selectUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEnE;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,eAAe,GAAG,SAAS,GAC/B,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAGxB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,iBAAiB,EAAE,GACxB,iBAAiB,EAAE,CAUrB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,iBAAiB,GAAG,MAAM,CAE1D;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,SAAS,GAAG,iBAAiB,EAAE,CAsC5E"}

package/dist/types/components/Slider/Slider.d.ts

@@ -0,0 +1,62 @@
+import "./Slider.css";
+import { type HTMLAttributes, type MouseEvent as ReactMouseEvent, type ReactNode } from "react";
+import { type CSSProps } from "../../utils/cssProps";
+import type { CSSVars } from "../../utils/cssVars";
+type SliderVars = "--stratus-bg-lighten" | "--stratus-bg-nav" | "--stratus-disabled-border" | "--stratus-disabled-fill" | "--stratus-disabled-text" | "--stratus-primary" | "--stratus-primary-hover" | "--stratus-primary-hover-alt" | "--stratus-text-tertiary";
+type SliderStyle = CSSVars<SliderVars>;
+export interface SliderHandlerData {
+    index: number;
+    handle?: number;
+}
+export interface SliderEventHandlerProps {
+    onClick?: (data: SliderHandlerData, event: MouseEvent | TouchEvent) => void;
+    onMouseOver?: (data: SliderHandlerData, event: ReactMouseEvent) => void;
+    onMouseOut?: (data: SliderHandlerData, event: ReactMouseEvent) => void;
+    onDragStart?: (data: SliderHandlerData) => void;
+    onDrag?: (data: SliderHandlerData, event: MouseEvent | TouchEvent) => void;
+    onDragEnd?: (data: SliderHandlerData, event: MouseEvent | TouchEvent) => void;
+}
+export type SliderProps = Omit<HTMLAttributes<HTMLDivElement>, "value" | "defaultValue" | "onChange" | "style"> & {
+    className?: string;
+    style?: SliderStyle;
+    value?: number[];
+    min?: number;
+    max?: number;
+    step?: number;
+    marks?: {
+        [key: number]: ReactNode;
+    };
+    vertical?: boolean;
+    tooltipVisible?: boolean;
+    tooltipPlacement?: "bottom" | "top";
+    tooltipFormatter?: (value: number) => ReactNode;
+    disabled?: boolean;
+    sliderEventHandlers?: SliderEventHandlerProps;
+    onChange?: (value: number[], event: MouseEvent | TouchEvent) => void;
+} & CSSProps;
+/**
+ * @example
+ * ```tsx
+ * <Slider value={50} min={0} max={100} onChange={(val) => console.log(val)} />
+ * ```
+ */
+export declare const Slider: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "style" | "defaultValue" | "onChange" | "value"> & {
+    className?: string;
+    style?: SliderStyle;
+    value?: number[];
+    min?: number;
+    max?: number;
+    step?: number;
+    marks?: {
+        [key: number]: ReactNode;
+    };
+    vertical?: boolean;
+    tooltipVisible?: boolean;
+    tooltipPlacement?: "bottom" | "top";
+    tooltipFormatter?: (value: number) => ReactNode;
+    disabled?: boolean;
+    sliderEventHandlers?: SliderEventHandlerProps;
+    onChange?: (value: number[], event: MouseEvent | TouchEvent) => void;
+} & Partial<import("react").CSSProperties> & import("../../utils/cssProps").CSSShorthandProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Slider.d.ts.map

package/dist/types/components/Slider/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,UAAU,IAAI,eAAe,EAClC,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAKnD,KAAK,UAAU,GACX,sBAAsB,GACtB,kBAAkB,GAClB,2BAA2B,GAC3B,yBAAyB,GACzB,yBAAyB,GACzB,mBAAmB,GACnB,yBAAyB,GACzB,6BAA6B,GAC7B,yBAAyB,CAAC;AAE9B,KAAK,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAIvC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAC;IAC5E,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACxE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACvE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAC;IAC3E,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAC;CAC/E;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,OAAO,CAChD,GAAG;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACpC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,uBAAuB,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAC;CACtE,GAAG,QAAQ,CAAC;AAwEb;;;;;GAKG;AACH,eAAO,MAAM,MAAM;gBA5FL,MAAM;YACV,WAAW;YACX,MAAM,EAAE;UACV,MAAM;UACN,MAAM;WACL,MAAM;YACL;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE;eACzB,OAAO;qBACD,OAAO;uBACL,QAAQ,GAAG,KAAK;uBAChB,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS;eACpC,OAAO;0BACI,uBAAuB;eAClC,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI;8IAycrE,CAAC"}

package/dist/types/components/Switch/Switch.d.ts

@@ -0,0 +1,146 @@
+import { type ChangeEvent, type InputHTMLAttributes, type LabelHTMLAttributes, type ReactNode, type RefObject } from "react";
+import { type CSSProps } from "../../utils/cssProps";
+import type { CSSVars } from "../../utils/cssVars";
+import "./Switch.css";
+type SwitchVars = "--stratus-primary" | "--stratus-primary-light" | "--stratus-secondary" | "--stratus-secondary-light" | "--stratus-switch-thumb-off" | "--stratus-switch-track-off" | "--stratus-text-primary";
+type SwitchStyle = CSSVars<SwitchVars>;
+export type SwitchProps = Omit<LabelHTMLAttributes<HTMLLabelElement>, "onChange" | "color" | "style"> & {
+    /** Extra CSS class name on the root `<label>`. */
+    className?: string;
+    /** Inline style overrides. */
+    style?: SwitchStyle;
+    /**
+     * Ref forwarded to the hidden `<input type="checkbox">`.
+     * @default undefined
+     */
+    inputRef?: RefObject<HTMLInputElement | null>;
+    /**
+     * Additional HTML attributes spread on the hidden checkbox.
+     * @default {}
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Initial checked state (uncontrolled).
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Controlled checked state.
+     * @default undefined
+     */
+    checked?: boolean;
+    /**
+     * Switch visual variant.
+     * @default "default"
+     */
+    variant?: "default" | "small";
+    /**
+     * Label text.
+     * @default undefined
+     */
+    label?: ReactNode;
+    /**
+     * Label placement relative to the switch.
+     * @default "right"
+     */
+    labelPlacement?: "left" | "right";
+    /**
+     * Theme color.
+     * @default "primary"
+     */
+    color?: "primary" | "secondary";
+    /**
+     * Compact size (32 px wrapper instead of 48 px).
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * Disable the switch.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Disable the ripple / hover ring.
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * Callback fired when checked state changes.
+     * @default undefined
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+} & CSSProps;
+/**
+ * @example
+ * ```tsx
+ * <Switch label="Dark mode" defaultChecked />
+ * ```
+ */
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<LabelHTMLAttributes<HTMLLabelElement>, "style" | "color" | "onChange"> & {
+    /** Extra CSS class name on the root `<label>`. */
+    className?: string;
+    /** Inline style overrides. */
+    style?: SwitchStyle;
+    /**
+     * Ref forwarded to the hidden `<input type="checkbox">`.
+     * @default undefined
+     */
+    inputRef?: RefObject<HTMLInputElement | null>;
+    /**
+     * Additional HTML attributes spread on the hidden checkbox.
+     * @default {}
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Initial checked state (uncontrolled).
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Controlled checked state.
+     * @default undefined
+     */
+    checked?: boolean;
+    /**
+     * Switch visual variant.
+     * @default "default"
+     */
+    variant?: "default" | "small";
+    /**
+     * Label text.
+     * @default undefined
+     */
+    label?: ReactNode;
+    /**
+     * Label placement relative to the switch.
+     * @default "right"
+     */
+    labelPlacement?: "left" | "right";
+    /**
+     * Theme color.
+     * @default "primary"
+     */
+    color?: "primary" | "secondary";
+    /**
+     * Compact size (32 px wrapper instead of 48 px).
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * Disable the switch.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Disable the ripple / hover ring.
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * Callback fired when checked state changes.
+     * @default undefined
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+} & Partial<import("react").CSSProperties> & import("../../utils/cssProps").CSSShorthandProps & import("react").RefAttributes<HTMLLabelElement>>;
+export {};
+//# sourceMappingURL=Switch.d.ts.map

package/dist/types/components/Switch/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,cAAc,CAAC;AAMtB,KAAK,UAAU,GACX,mBAAmB,GACnB,yBAAyB,GACzB,qBAAqB,GACrB,2BAA2B,GAC3B,4BAA4B,GAC5B,4BAA4B,GAC5B,wBAAwB,CAAC;AAE7B,KAAK,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAMvC,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,UAAU,GAAG,OAAO,GAAG,OAAO,CAC/B,GAAG;IACF,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC9C;;;OAGG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACnD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC3D,GAAG,QAAQ,CAAC;AAEb;;;;;GAKG;AACH,eAAO,MAAM,MAAM;IAxEjB,kDAAkD;gBACtC,MAAM;IAClB,8BAA8B;YACtB,WAAW;IACnB;;;OAGG;eACQ,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC;IAC7C;;;OAGG;iBACU,mBAAmB,CAAC,gBAAgB,CAAC;IAClD;;;OAGG;qBACc,OAAO;IACxB;;;OAGG;cACO,OAAO;IACjB;;;OAGG;cACO,SAAS,GAAG,OAAO;IAC7B;;;OAGG;YACK,SAAS;IACjB;;;OAGG;qBACc,MAAM,GAAG,OAAO;IACjC;;;OAGG;YACK,SAAS,GAAG,WAAW;IAC/B;;;OAGG;cACO,OAAO;IACjB;;;OAGG;eACQ,OAAO;IAClB;;;OAGG;oBACa,OAAO;IACvB;;;OAGG;eACQ,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI;gJAgH1D,CAAC"}

package/dist/types/components/Table/Table.d.ts

@@ -0,0 +1,200 @@
+import React, { type CSSProperties, type ReactNode, type SyntheticEvent } from "react";
+import "./Table.css";
+/** Column definition — backwards-compatible with @equinor/opt-ui-core */
+export type TableColumn<T = Record<string, unknown>> = {
+    /** Key in row data to access cell value */
+    dataKey: string;
+    /** Unique column key (defaults to dataKey) */
+    key?: string;
+    /** Column header text or node */
+    title?: string | ReactNode;
+    /**
+     * Column width.
+     * - Fixed pixels: `200`
+     * - Percentage string: `"20%"`
+     * - Function: `(totalWidth, column) => pixels`
+     */
+    width: number | string | ((totalWidth: number, column?: TableColumn<T>) => number);
+    /** Minimum column width in px */
+    minWidth?: number;
+    /** Per‑column sortable override */
+    sortable?: boolean;
+    /** Per‑column resizable override */
+    resizable?: boolean;
+    /**
+     * Sort comparator.
+     * - `"alphanumeric"` – default string/number sort
+     * - `"datetime"` – date comparison
+     * - `(a, b, key, column) => number` – custom comparator
+     */
+    sortType?: "alphanumeric" | "datetime" | ((a: T, b: T, key: string, column: TableColumn<T>) => number);
+    /**
+     * Per‑column custom sort that returns **the entire sorted data array**.
+     * When provided, overrides TanStack's internal sorting for this column.
+     */
+    onColumnSort?: (args: {
+        data: T[];
+        sortState: Record<string, "asc" | "desc">;
+        column: TableColumn<T>;
+        key: string;
+        order: "asc" | "desc";
+    }) => T[];
+    /** Custom cell renderer */
+    cellRenderer?: (args: {
+        rowData: T;
+        rowIndex: number;
+        column: TableColumn<T>;
+        columnIndex: number;
+        cellData: unknown;
+    }) => ReactNode;
+    /** Custom header renderer */
+    headerRenderer?: (args: {
+        column: TableColumn<T>;
+        columnIndex: number;
+    }) => ReactNode;
+    /** CSS class for body cells — string or function */
+    className?: string | ((args: {
+        rowData: T;
+        rowIndex: number;
+        column: TableColumn<T>;
+    }) => string);
+    /** CSS class for the header cell */
+    headerClassName?: string;
+    /** Freeze column to the left */
+    frozen?: boolean;
+};
+/** Imperative ref returned by `getTableRef()` — compatible with the old BaseTable ref */
+export type TableBaseRef = {
+    scrollToTop: (offset: number) => void;
+    scrollToRow: (rowIndex: number) => void;
+    scrollToLeft: (offset: number) => void;
+    getDOMNode: () => HTMLDivElement | null;
+    getExpandedState: () => {
+        expandedData: unknown[];
+    };
+    getExpandedRowKeys: () => (string | number)[];
+    setExpandedRowKeys: (keys: (string | number)[]) => void;
+};
+/** Imperative handle exposed via ref */
+export type TableRef<T = unknown> = {
+    /** Reset sort state to empty */
+    clearSortState: () => void;
+    /** Programmatically sort a column */
+    setColumnSort: (args: {
+        columnKey: string;
+        order: "asc" | "desc";
+    }) => void;
+    /** Set selected row IDs (for selectable tables) */
+    setSelectedRows: (ids: string[]) => void;
+    /** Get inner table ref (backwards‑compatible with react-base-table API) */
+    getTableRef: () => TableBaseRef;
+};
+/** Table component props — backwards-compatible with @equinor/opt-ui-core */
+export type TableProps<T = Record<string, unknown>> = {
+    /** Column definitions */
+    columns: TableColumn<T>[];
+    /** Row data array */
+    data: T[];
+    /** Key from data used as unique row identifier (default: `"id"`) */
+    rowId?: string;
+    /** Key for nested child rows (default: `"children"`) */
+    childrenId?: string;
+    /** Compact mode — reduced padding and row height (32 px) */
+    compact?: boolean;
+    /** Header row height in px */
+    headerHeight?: number | number[];
+    /** Body row height in px */
+    rowHeight?: number;
+    /** Enable dynamic (auto) row height */
+    dynamicHeight?: boolean;
+    /** Enable sorting globally (default: `true`) */
+    sortable?: boolean;
+    /** Allow multi-column sorting */
+    multiSort?: boolean;
+    /** Enable column resizing globally (default: `true`) */
+    resizable?: boolean;
+    /** Enable expandable rows */
+    expandable?: boolean;
+    /** Controlled expanded row keys */
+    expandedRowKeys?: (string | number)[];
+    /** Initial expanded row keys (uncontrolled) */
+    defaultExpandedRowKeys?: (string | number)[];
+    /** Enable row drag-and-drop (requires external DnD library) */
+    draggable?: boolean;
+    /** Show checkbox selection column */
+    selectable?: boolean;
+    /** Select row when row body is clicked (default: `true`) */
+    selectRowOnClick?: boolean;
+    /** Alternate row background colors */
+    stripedRows?: boolean;
+    /** Disable all table interactions */
+    disabled?: boolean;
+    /** Box shadow elevation level */
+    elevation?: number;
+    /** Content shown when `data` is empty */
+    noDataValue?: ReactNode;
+    /** Override width of auto-generated columns (__expandable__, __selectable__) */
+    extraColumnsWidth?: (args: {
+        totalWidth: number;
+        column: {
+            key: string;
+        };
+        defaultWidth: number;
+    }) => number;
+    /** CSS class for the outermost wrapper */
+    className?: string;
+    /** CSS class (or function) applied to each body `<tr>` */
+    rowClassName?: string | ((args: {
+        rowData: T;
+        rowIndex: number;
+    }) => string);
+    /** Callback when a row body is clicked */
+    onRowClick?: (args: {
+        rowKey: string;
+        rowIndex: number;
+        rowData: T;
+        event: SyntheticEvent;
+    }) => void;
+    /** Callback when the sort state changes (table-level) */
+    onColumnSort?: (sortState: Record<string, "asc" | "desc">) => void;
+    /** Callback on checkbox row selection */
+    onRowSelect?: (args: {
+        rowIndex: number;
+        rowData: T;
+        selected: boolean;
+    }) => void;
+    /** Callback after row drag-and-drop */
+    onDragEnd?: (args: {
+        oldIndex: number;
+        newIndex: number;
+        rowData: T;
+        data: T[];
+    }) => void;
+    /** Callback when scroll reaches the end */
+    onEndReached?: () => void;
+    /** Sticky row indices */
+    stickyRowIdxs?: number[];
+    /** Initially selected row IDs */
+    defaultSelectedRowsIds?: string[];
+    /** Inline style override on the root element */
+    style?: CSSProperties;
+};
+/**
+ * Accepts the same column definitions (`dataKey`, `cellRenderer`, `width`, etc.)
+ * and table‑level props (`sortable`, `expandable`, `compact`, …) as the legacy API.
+ *
+ * @example
+ * ```tsx
+ * <Table
+ *   columns={[{ dataKey: "name", title: "Name", width: 200 }]}
+ *   data={rows}
+ *   rowId="id"
+ *   compact
+ *   noDataValue="No data"
+ * />
+ * ```
+ */
+export declare const Table: (<T extends Record<string, unknown> = Record<string, unknown>>(props: TableProps<T> & React.RefAttributes<TableRef<T>>) => React.ReactElement | null) & {
+    displayName?: string;
+};
+//# sourceMappingURL=Table.d.ts.map

package/dist/types/components/Table/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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"}

package/dist/types/components/Tabs/Tab.d.ts

@@ -0,0 +1,72 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type CSSProps } from "../../utils/cssProps";
+import type { CSSVars } from "../../utils/cssVars";
+export type TabsVars = "--stratus-divider" | "--stratus-error" | "--stratus-primary" | "--stratus-primary-hover-alt" | "--stratus-secondary" | "--stratus-success" | "--stratus-text-disabled" | "--stratus-text-tertiary" | "--stratus-warning";
+export type TabsStyle = CSSVars<TabsVars>;
+export type TabProps = Omit<HTMLAttributes<HTMLButtonElement>, "color" | "style"> & {
+    /** The tab panel content (shown when active). */
+    children?: ReactNode;
+    /** Extra CSS class name. */
+    className?: string;
+    /** Inline style overrides. */
+    style?: TabsStyle;
+    /**
+     * The label displayed on the tab button.
+     * @default undefined
+     */
+    label?: ReactNode;
+    /**
+     * An icon rendered before the label.
+     * @default undefined
+     */
+    icon?: ReactNode;
+    /**
+     * Tab label color (set by the parent Tabs).
+     * @default undefined
+     */
+    color?: string;
+    /**
+     * Disable this tab.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Disable the ripple effect.
+     * @default false
+     */
+    disableRipple?: boolean;
+} & CSSProps;
+export declare const Tab: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLButtonElement>, "style" | "color"> & {
+    /** The tab panel content (shown when active). */
+    children?: ReactNode;
+    /** Extra CSS class name. */
+    className?: string;
+    /** Inline style overrides. */
+    style?: TabsStyle;
+    /**
+     * The label displayed on the tab button.
+     * @default undefined
+     */
+    label?: ReactNode;
+    /**
+     * An icon rendered before the label.
+     * @default undefined
+     */
+    icon?: ReactNode;
+    /**
+     * Tab label color (set by the parent Tabs).
+     * @default undefined
+     */
+    color?: string;
+    /**
+     * Disable this tab.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Disable the ripple effect.
+     * @default false
+     */
+    disableRipple?: boolean;
+} & Partial<import("react").CSSProperties> & import("../../utils/cssProps").CSSShorthandProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Tab.d.ts.map

package/dist/types/components/Tabs/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGH,KAAK,cAAc,EAEnB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAOnD,MAAM,MAAM,QAAQ,GAChB,mBAAmB,GACnB,iBAAiB,GACjB,mBAAmB,GACnB,6BAA6B,GAC7B,qBAAqB,GACrB,mBAAmB,GACnB,yBAAyB,GACzB,yBAAyB,GACzB,mBAAmB,CAAC;AAExB,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;AAM1C,MAAM,MAAM,QAAQ,GAAG,IAAI,CACzB,cAAc,CAAC,iBAAiB,CAAC,EACjC,OAAO,GAAG,OAAO,CAClB,GAAG;IACF,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,QAAQ,CAAC;AAMb,eAAO,MAAM,GAAG;IArCd,iDAAiD;eACtC,SAAS;IACpB,4BAA4B;gBAChB,MAAM;IAClB,8BAA8B;YACtB,SAAS;IACjB;;;OAGG;YACK,SAAS;IACjB;;;OAGG;WACI,SAAS;IAChB;;;OAGG;YACK,MAAM;IACd;;;OAGG;eACQ,OAAO;IAClB;;;OAGG;oBACa,OAAO;iJAqDxB,CAAC"}