mosuk-ui 1.0.1

package/components/collections/table/(pagination)/component/head/column/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/collections/table/(pagination)/component/head/column/component.js

@@ -0,0 +1,49 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { ChevronUp } from 'lucide-react';
+import React, { useContext } from 'react';
+import { Icon } from '../../../../../../actions/icon/component/component';
+import { P } from '../../../../../../texts/p/component/component';
+import { PaginationTableContext } from '../../component';
+import styles from '../../component.module.css';
+export function PaginationTableHeadColumn(_a) {
+    var _b;
+    var props = __rest(_a, []);
+    var context = useContext(PaginationTableContext);
+    if (!context) {
+        throw new Error('PaginationTableHeadColumn must be used within PaginationTable');
+    }
+    var params = context.params, updateParams = context.updateParams;
+    var currentSort = (params === null || params === void 0 ? void 0 : params.sort) || 'id';
+    var currentOrder = (params === null || params === void 0 ? void 0 : params.order) || 'asc';
+    return (React.createElement("button", { type: "button", className: "  \n          ".concat(styles.column, "          \n          ").concat(currentOrder === 'asc' ? styles.asc : styles.desc, "\n          ").concat((props === null || props === void 0 ? void 0 : props.sort) === currentSort ? styles.active : '', " \n          ").concat(!(props === null || props === void 0 ? void 0 : props.sort) ? styles.disabled : '', "\n          ").concat((_b = props === null || props === void 0 ? void 0 : props.className) !== null && _b !== void 0 ? _b : '', "\n      "), title: props === null || props === void 0 ? void 0 : props.title, onClick: function () {
+            return updateParams(__assign(__assign({}, params), { sort: props === null || props === void 0 ? void 0 : props.sort, order: currentSort === (props === null || props === void 0 ? void 0 : props.sort)
+                    ? currentOrder === 'asc'
+                        ? 'desc'
+                        : 'asc'
+                    : 'asc' }));
+        } },
+        React.createElement(P, { className: styles.text }, props === null || props === void 0 ? void 0 : props.children),
+        (props === null || props === void 0 ? void 0 : props.sort) && (React.createElement(Icon, { as: 'span', className: styles.icon },
+            React.createElement(ChevronUp, null)))));
+}

package/components/collections/table/(pagination)/component/head/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PaginationTableHeadProps } from './component.interface';
+export declare function PaginationTableHead({ ...props }: PaginationTableHeadProps): React.JSX.Element;

package/components/collections/table/(pagination)/component/head/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export interface PaginationTableHeadProps extends HTMLAttributes<HTMLDivElement> {
+}

package/components/collections/table/(pagination)/component/head/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/collections/table/(pagination)/component/head/component.js

@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useContext } from 'react';
+import { Row } from '../../../../../display/row/component';
+import { PaginationTableContext } from '../component';
+import styles from '../component.module.css';
+export function PaginationTableHead(_a) {
+    var _b;
+    var props = __rest(_a, []);
+    var context = useContext(PaginationTableContext);
+    if (!context) {
+        throw new Error('PaginationTableHead must be used within PaginationTable');
+    }
+    return (React.createElement(Row, __assign({}, props, { className: "".concat(styles.head, " ").concat((_b = props === null || props === void 0 ? void 0 : props.className) !== null && _b !== void 0 ? _b : '') }), props === null || props === void 0 ? void 0 : props.children));
+}

package/components/collections/table/(pagination)/component/index.d.ts

@@ -0,0 +1,33 @@
+import { PaginationTableBody } from './body/component';
+import { PaginationTableBodyProps } from './body/component.interface';
+import { PaginationTableBodyRow } from './body/row/component';
+import { PaginationTableBodyRowProps } from './body/row/component.interface';
+import { PaginationTable as Component } from './component';
+import { PaginationTableProps } from './component.interface';
+import { PaginationTableHeadColumn } from './head/column/component';
+import { PaginationTableHeadColumnProps } from './head/column/component.interface';
+import { PaginationTableHead } from './head/component';
+import { PaginationTableHeadProps } from './head/component.interface';
+export declare const PaginationTable: typeof Component & {
+    Head: typeof PaginationTableHead & {
+        Column: typeof PaginationTableHeadColumn;
+    };
+    Body: typeof PaginationTableBody & {
+        Row: typeof PaginationTableBodyRow;
+    };
+};
+export declare namespace PaginationTable {
+    type Props = PaginationTableProps;
+    namespace Head {
+        type Props = PaginationTableHeadProps;
+        namespace Column {
+            type Props = PaginationTableHeadColumnProps;
+        }
+    }
+    namespace Body {
+        type Props = PaginationTableBodyProps;
+        namespace Row {
+            type Props = PaginationTableBodyRowProps;
+        }
+    }
+}

package/components/collections/table/(pagination)/component/index.js

@@ -0,0 +1,13 @@
+import { PaginationTableBody } from './body/component';
+import { PaginationTableBodyRow } from './body/row/component';
+import { PaginationTable as Component } from './component';
+import { PaginationTableHeadColumn } from './head/column/component';
+import { PaginationTableHead } from './head/component';
+export var PaginationTable = Object.assign(Component, {
+    Head: Object.assign(PaginationTableHead, {
+        Column: PaginationTableHeadColumn,
+    }),
+    Body: Object.assign(PaginationTableBody, {
+        Row: PaginationTableBodyRow,
+    }),
+});

package/components/collections/table/(pagination)/skeleton/body/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PaginationTableSkeletonBodyProps } from './component.interface';
+export declare function PaginationTableSkeletonBody({ ...props }: PaginationTableSkeletonBodyProps): React.JSX.Element;

package/components/collections/table/(pagination)/skeleton/body/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export interface PaginationTableSkeletonBodyProps extends HTMLAttributes<HTMLDivElement> {
+}

package/components/collections/table/(pagination)/skeleton/body/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/collections/table/(pagination)/skeleton/body/component.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import styles from '../component.module.css';
+export function PaginationTableSkeletonBody(_a) {
+    var props = __rest(_a, []);
+    return (React.createElement("div", __assign({ className: classNames(styles.body, props === null || props === void 0 ? void 0 : props.className) }, props), props === null || props === void 0 ? void 0 : props.children));
+}

package/components/collections/table/(pagination)/skeleton/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PaginationTableSkeletonProps } from './component.interface';
+export declare function PaginationTableSkeleton({ ...props }: PaginationTableSkeletonProps): React.JSX.Element;

package/components/collections/table/(pagination)/skeleton/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export interface PaginationTableSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+}

package/components/collections/table/(pagination)/skeleton/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/collections/table/(pagination)/skeleton/component.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styles from './component.module.css';
+export function PaginationTableSkeleton(_a) {
+    var _b, _c;
+    var props = __rest(_a, []);
+    return (React.createElement("section", __assign({ className: ((_b = styles.table) !== null && _b !== void 0 ? _b : '') + ' ' + ((_c = props.className) !== null && _c !== void 0 ? _c : '') }, props), props === null || props === void 0 ? void 0 : props.children));
+}

package/components/collections/table/(pagination)/skeleton/component.module.css

@@ -0,0 +1,37 @@
+@layer mosuk-ui {
+    @layer index-14 {
+        @media (max-width: 1024px) {
+            .head {
+                display: none;
+            }
+        }
+    }
+
+    @media (min-width: 1025px) {
+        .head {
+            .column {
+                display: flex;
+                align-items: center;
+                gap: 0.375rem;
+
+                font-size: var(--text-sm, 0.875rem);
+
+                .icon {
+                    width: calc(var(--spacing, .25rem) * 4);
+                    height: calc(var(--spacing, .25rem) * 4);
+                    min-width: calc(var(--spacing, .25rem) * 4);
+                    min-height: calc(var(--spacing, .25rem) * 4);
+
+                    border-radius: var(--radius-md, 0.375rem);
+                }
+
+                .text {
+                    height: calc(var(--spacing, 0.25rem) * 3);
+                    min-height: calc(var(--spacing, 0.25rem) * 3);
+
+                    border-radius: var(--radius-md, 0.375rem);
+                }
+            }
+        }
+    }
+}

package/components/collections/table/(pagination)/skeleton/head/column/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PaginationTableSkeletonHeadColumnProps } from './component.interface';
+export declare function PaginationTableSkeletonHeadColumn({ ...props }: PaginationTableSkeletonHeadColumnProps): React.JSX.Element;

package/components/collections/table/(pagination)/skeleton/head/column/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { RowProps } from '../../../../../../display/row/component/component.interface';
+export interface PaginationTableSkeletonHeadColumnProps extends RowProps {
+}

package/components/collections/table/(pagination)/skeleton/head/column/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/collections/table/(pagination)/skeleton/head/column/component.js

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import { Skeleton } from '../../../../../../display/skeleton/component/component';
+import styles from '../../component.module.css';
+export function PaginationTableSkeletonHeadColumn(_a) {
+    var _b, _c;
+    var props = __rest(_a, []);
+    return (React.createElement("div", __assign({}, props, { className: classNames(styles.column, props === null || props === void 0 ? void 0 : props.className) }),
+        React.createElement(Skeleton, { className: (_b = styles.icon) !== null && _b !== void 0 ? _b : '' }),
+        React.createElement(Skeleton, { className: (_c = styles.text) !== null && _c !== void 0 ? _c : '' })));
+}

package/components/collections/table/(pagination)/skeleton/head/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PaginationTableSkeletonHeadProps } from './component.interface';
+export declare function PaginationTableSkeletonHead({ ...props }: PaginationTableSkeletonHeadProps): React.JSX.Element;

package/components/collections/table/(pagination)/skeleton/head/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { RowProps } from '../../../../../display/row/component/component.interface';
+export interface PaginationTableSkeletonHeadProps extends RowProps {
+}

package/components/collections/table/(pagination)/skeleton/head/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/collections/table/(pagination)/skeleton/head/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import { Row } from '../../../../../display/row/component/component';
+import styles from '../component.module.css';
+export function PaginationTableSkeletonHead(_a) {
+    var props = __rest(_a, []);
+    return (React.createElement(Row, __assign({}, props, { className: classNames(styles.head, props === null || props === void 0 ? void 0 : props.className) }), props === null || props === void 0 ? void 0 : props.children));
+}

package/components/collections/table/(pagination)/skeleton/index.d.ts

@@ -0,0 +1,33 @@
+import { Row } from '../../../../display/row/component';
+import { RowProps } from '../../../../display/row/component/component.interface';
+import { PaginationTableHeadColumnProps } from '../component/head/column/component.interface';
+import { PaginationTableSkeletonBody } from './body/component';
+import { PaginationTableSkeletonBodyProps } from './body/component.interface';
+import { PaginationTableSkeleton as Component } from './component';
+import { PaginationTableSkeletonProps } from './component.interface';
+import { PaginationTableSkeletonHeadColumn } from './head/column/component';
+import { PaginationTableSkeletonHead } from './head/component';
+import { PaginationTableSkeletonHeadProps } from './head/component.interface';
+export declare const PaginationTableSkeleton: typeof Component & {
+    Head: typeof PaginationTableSkeletonHead & {
+        Column: typeof PaginationTableSkeletonHeadColumn;
+    };
+    Body: typeof PaginationTableSkeletonBody & {
+        Row: typeof Row;
+    };
+};
+export declare namespace PaginationTableSkeleton {
+    type Props = PaginationTableSkeletonProps;
+    namespace Head {
+        type Props = PaginationTableSkeletonHeadProps;
+        namespace Column {
+            type Props = PaginationTableHeadColumnProps;
+        }
+    }
+    namespace Body {
+        type Props = PaginationTableSkeletonBodyProps;
+        namespace Row {
+            type Props = RowProps;
+        }
+    }
+}

package/components/collections/table/(pagination)/skeleton/index.js

@@ -0,0 +1,13 @@
+import { Row } from '../../../../display/row/component';
+import { PaginationTableSkeletonBody } from './body/component';
+import { PaginationTableSkeleton as Component } from './component';
+import { PaginationTableSkeletonHeadColumn } from './head/column/component';
+import { PaginationTableSkeletonHead } from './head/component';
+export var PaginationTableSkeleton = Object.assign(Component, {
+    Head: Object.assign(PaginationTableSkeletonHead, {
+        Column: PaginationTableSkeletonHeadColumn,
+    }),
+    Body: Object.assign(PaginationTableSkeletonBody, {
+        Row: Row,
+    }),
+});

package/components/collections/table/(stacked)/component/component.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TableStackedProps, TableStackedRowProps } from './component.interface';
+export declare function TableStacked({ ...props }: TableStackedProps): React.JSX.Element;
+export declare namespace TableStacked {
+    var Row: typeof TableStackedRow;
+}
+export declare function TableStackedRow({ index, ...props }: TableStackedRowProps): React.JSX.Element;

package/components/collections/table/(stacked)/component/component.interface.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, Ref } from 'react';
+export interface TableStackedProps extends HTMLAttributes<HTMLUListElement> {
+}
+export interface TableStackedRowProps extends HTMLAttributes<HTMLLIElement> {
+    ref?: Ref<HTMLLIElement>;
+    index?: number;
+}

package/components/collections/table/(stacked)/component/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/collections/table/(stacked)/component/component.js

@@ -0,0 +1,79 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { Children, cloneElement, isValidElement, useEffect, useRef, useState } from 'react';
+import styles from './component.module.css';
+export function TableStacked(_a) {
+    var _b;
+    var props = __rest(_a, []);
+    var ref = useRef(null);
+    var _c = useState(0), progress = _c[0], setProgress = _c[1];
+    useEffect(function () {
+        var el = ref.current;
+        if (!el)
+            return;
+        var remInPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
+        var triggerPx = 4 * remInPx;
+        var frameId;
+        var handleScroll = function () {
+            var rect = el.getBoundingClientRect();
+            var bottomDistance = window.innerHeight - rect.top;
+            var tableHeight = rect.height;
+            var progressValue = Math.min(Math.max((bottomDistance - triggerPx) / tableHeight, 0), 1);
+            frameId = window.requestAnimationFrame(function () {
+                setProgress(progressValue);
+            });
+        };
+        window.addEventListener('scroll', handleScroll);
+        window.addEventListener('resize', handleScroll);
+        handleScroll();
+        return function () {
+            window.removeEventListener('scroll', handleScroll);
+            window.removeEventListener('resize', handleScroll);
+            if (frameId)
+                window.cancelAnimationFrame(frameId);
+        };
+    }, []);
+    var combinedStyle = {
+        '--rows': Children.count(props === null || props === void 0 ? void 0 : props.children),
+        '--table-progress': progress,
+    };
+    var mappedChildren = Children.map(props === null || props === void 0 ? void 0 : props.children, function (child, idx) {
+        if (isValidElement(child)) {
+            return cloneElement(child, {
+                index: idx + 1,
+            });
+        }
+        return child;
+    });
+    return (React.createElement("ul", __assign({}, props, { ref: ref, className: "mosuk-table-stacked ".concat(styles['table'], " ").concat((_b = props === null || props === void 0 ? void 0 : props.className) !== null && _b !== void 0 ? _b : ''), style: __assign(__assign({}, combinedStyle), props === null || props === void 0 ? void 0 : props.style) }), mappedChildren));
+}
+export function TableStackedRow(_a) {
+    var _b;
+    var index = _a.index, props = __rest(_a, ["index"]);
+    var ref = useRef(null);
+    var combinedStyle = {
+        '--index': "".concat(index !== null && index !== void 0 ? index : 1),
+    };
+    return (React.createElement("li", __assign({}, props, { ref: ref, className: "mosuk-table-stacked-row ".concat(styles['row'], " ").concat((_b = props === null || props === void 0 ? void 0 : props.className) !== null && _b !== void 0 ? _b : '', " "), style: __assign(__assign({}, combinedStyle), props === null || props === void 0 ? void 0 : props.style) }), props === null || props === void 0 ? void 0 : props.children));
+}
+TableStacked.Row = TableStackedRow;

package/components/collections/table/(stacked)/component/component.module.css

@@ -0,0 +1,23 @@
+@layer mosuk-ui {
+  @layer index-14 {
+    .table {
+      display: flex;
+      flex-direction: column;
+
+      padding-bottom: calc((var(--rows) - 1) * 1rem);
+
+      .row {
+        position: sticky;
+        bottom: calc(var(--spacing, 0.25rem) * 8);
+        z-index: calc(1 + (var(--rows) - var(--index)));
+
+        scale: calc(100% - (var(--index) * 1%) + ((var(--index) * 1%) * var(--table-progress)));
+        transform: translateY(calc((var(--index) - 1) * 1rem));
+
+        &:nth-child(1) {
+          scale: 1;
+        }
+      }
+    }
+  }
+}

package/components/collections/table/(stacked)/component/index.d.ts

@@ -0,0 +1,13 @@
+import { TableStackedRow as BaseTableStackedRow } from './component';
+import type { TableStackedProps, TableStackedRowProps } from './component.interface';
+export declare function TableStacked(props: TableStackedProps): import("react").JSX.Element;
+export declare namespace TableStacked {
+    var Row: typeof BaseTableStackedRow;
+}
+export declare namespace TableStacked {
+    type Props = TableStackedProps;
+    const Row: typeof BaseTableStackedRow;
+    namespace Row {
+        type Props = TableStackedRowProps;
+    }
+}

package/components/collections/table/(stacked)/component/index.js

@@ -0,0 +1,7 @@
+import { TableStacked as BaseTableStacked, TableStackedRow as BaseTableStackedRow, } from './component';
+export function TableStacked(props) {
+    return BaseTableStacked(props);
+}
+TableStacked.Row = BaseTableStackedRow;
+(function (TableStacked) {
+})(TableStacked || (TableStacked = {}));

package/components/collections/tabs/horizontal/component/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TabsHorizontalProps } from './component.interface';
+export declare function TabsHorizontal({ ...rest }: TabsHorizontalProps): React.JSX.Element;

package/components/collections/tabs/horizontal/component/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { Tabs } from '@base-ui-components/react';
+export interface TabsHorizontalProps extends Tabs.Root.Props {
+}

package/components/collections/tabs/horizontal/component/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/collections/tabs/horizontal/component/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Tabs as TabsComponent } from '@base-ui-components/react/tabs';
+import classNames from 'classnames';
+import React from 'react';
+import styles from './component.module.css';
+export function TabsHorizontal(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(TabsComponent.Root, __assign({}, rest, { className: classNames('mosuk-tabs-horizontal', styles.tabs, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}