mosuk-ui 1.0.1

package/components/collections/tabs/horizontal/component/component.module.css

@@ -0,0 +1,106 @@
+@layer mosuk-ui {
+    @layer index-24 {
+        .tabs {
+            display: flex;
+            flex-direction: column;
+            gap: calc(var(--spacing, .25rem) * 4);
+        }
+
+        .head {
+            overflow-x: auto;
+            position: relative;
+            z-index: 0;
+
+            width: calc(100% + calc(var(--spacing, .25rem) * 8));
+
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            padding-inline: calc(var(--spacing, .25rem) * 4);
+            margin-left: calc(var(--spacing, .25rem) * -4);
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+
+        .tab {
+            position: relative;
+            z-index: 1;
+
+            width: fit-content;
+            height: calc(var(--spacing, .25rem) * 8);
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: calc(var(--spacing, .25rem) * 2);
+
+            background-color: transparent;
+            color: var(--color-black, #000);
+            font-size: var(--text-xs, .75rem);
+            text-wrap: nowrap;
+
+            padding-inline: calc(var(--spacing, .25rem) * 4);
+            border-radius: calc(infinity * 1px);
+            outline: none;
+
+            cursor: pointer;
+            user-select: none;
+            transition: all 200ms ease-in-out;
+
+            & svg {
+                width: calc(var(--spacing, .25rem) * 3.5);
+                height: calc(var(--spacing, .25rem) * 3.5);
+                min-width: calc(var(--spacing, .25rem) * 3.5);
+                min-height: calc(var(--spacing, .25rem) * 3.5);
+
+                color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+
+                transition: all 200ms ease-in-out;
+            }
+
+            &:hover,
+            &[data-active] {
+                color: var(--color-primary-500, #0074e7);
+
+                & svg {
+                    color: var(--color-primary-500, #0074e7);
+                }
+            }
+
+            &:not(:hover) {
+                transition: all 600ms ease-in-out;
+
+                & svg {
+                    transition: all 600ms ease-in-out;
+                }
+            }
+        }
+
+        .indicator {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            z-index: -1;
+
+            width: var(--active-tab-width);
+            height: calc(var(--spacing, .25rem) * 8);
+
+            background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
+            border-radius: calc(infinity * 1px);
+
+            translate: var(--active-tab-left) 0;
+            transition-property: translate, width;
+            transition-duration: 400ms;
+            transition-timing-function: ease;
+        }
+
+        .content {
+            &[hidden] {
+                display: none;
+            }
+        }
+    }
+}

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

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

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

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

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

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

package/components/collections/tabs/horizontal/component/content/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 TabsHorizontalContent(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(TabsComponent.Panel, __assign({}, rest, { className: classNames('mosuk-tabs-horizontal-content', styles.content, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

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

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

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

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

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

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

package/components/collections/tabs/horizontal/component/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 { 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 TabsHorizontalHead(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(TabsComponent.List, __assign({}, rest, { className: classNames('mosuk-tabs-horizontal-head', styles.head, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+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 TabsHorizontalHeadIndicator(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(TabsComponent.Indicator, { className: classNames('mosuk-tabs-horizontal-head-indicator', styles.indicator, rest === null || rest === void 0 ? void 0 : rest.className) }));
+}

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

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

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

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

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

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

package/components/collections/tabs/horizontal/component/head/tab/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 TabsHorizontalHeadTab(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(TabsComponent.Tab, __assign({}, rest, { className: classNames('mosuk-tabs-horizontal-head-tab', styles.tab, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

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

@@ -0,0 +1,32 @@
+import { TabsHorizontal as TabsHorizontalComponent } from './component';
+import { TabsHorizontalProps } from './component.interface';
+import { TabsHorizontalContent } from './content/component';
+import { TabsHorizontalContentProps } from './content/component.interface';
+import { TabsHorizontalHead } from './head/component';
+import { TabsHorizontalHeadProps } from './head/component.interface';
+import { TabsHorizontalHeadIndicator } from './head/indicator/component';
+import { TabsHorizontalHeadIndicatorProps } from './head/indicator/component.interface';
+import { TabsHorizontalHeadTab } from './head/tab/component';
+import { TabsHorizontalHeadTabProps } from './head/tab/component.interface';
+export declare const TabsHorizontal: typeof TabsHorizontalComponent & {
+    Head: typeof TabsHorizontalHead & {
+        Tab: typeof TabsHorizontalHeadTab;
+        Indicator: typeof TabsHorizontalHeadIndicator;
+    };
+    Content: typeof TabsHorizontalContent;
+};
+export declare namespace TabsHorizontal {
+    type Props = TabsHorizontalProps;
+    namespace Head {
+        type Props = TabsHorizontalHeadProps;
+        namespace Tab {
+            type Props = TabsHorizontalHeadTabProps;
+        }
+        namespace Indicator {
+            type Props = TabsHorizontalHeadIndicatorProps;
+        }
+    }
+    namespace Content {
+        type Props = TabsHorizontalContentProps;
+    }
+}

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

@@ -0,0 +1,12 @@
+import { TabsHorizontal as TabsHorizontalComponent } from './component';
+import { TabsHorizontalContent } from './content/component';
+import { TabsHorizontalHead } from './head/component';
+import { TabsHorizontalHeadIndicator } from './head/indicator/component';
+import { TabsHorizontalHeadTab } from './head/tab/component';
+export var TabsHorizontal = Object.assign(TabsHorizontalComponent, {
+    Head: Object.assign(TabsHorizontalHead, {
+        Tab: TabsHorizontalHeadTab,
+        Indicator: TabsHorizontalHeadIndicator,
+    }),
+    Content: TabsHorizontalContent,
+});

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

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { TabsHorizontalSkeletonProps } from './component.interface';
+export declare function TabsHorizontalSkeleton<C extends ElementType = 'div'>({ as, ...rest }: TabsHorizontalSkeletonProps<C>): React.JSX.Element;

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

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type TabsHorizontalSkeletonProps<C extends ElementType = 'div'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

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

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

package/components/collections/tabs/horizontal/skeleton/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 styles from './component.module.css';
+export function TabsHorizontalSkeleton(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'div');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-tabs-horizontal-skeleton', styles.tabs, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/collections/tabs/horizontal/skeleton/component.module.css

@@ -0,0 +1,64 @@
+@layer mosuk-ui {
+    @layer index-14 {
+        .tabs {
+            display: flex;
+            flex-direction: column;
+            gap: calc(var(--spacing, .25rem) * 4);
+        }
+
+        .head {
+            overflow-x: auto;
+            position: relative;
+            z-index: 0;
+
+            width: calc(100% + calc(var(--spacing, .25rem) * 8));
+
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            padding-inline: calc(var(--spacing, .25rem) * 4);
+            margin-left: calc(var(--spacing, .25rem) * -4);
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+
+        .tab {
+            position: relative;
+            z-index: 1;
+
+            width: fit-content;
+            height: calc(var(--spacing, .25rem) * 8);
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: calc(var(--spacing, .25rem) * 2);
+
+            background-color: transparent;
+            color: var(--color-black, #000);
+            font-size: var(--text-xs, .75rem);
+            text-wrap: nowrap;
+
+            padding-inline: calc(var(--spacing, .25rem) * 4);
+            border-radius: calc(infinity * 1px);
+            outline: none;
+
+            cursor: default;
+            user-select: none;
+
+            & svg {
+                width: calc(var(--spacing, .25rem) * 3.5);
+                height: calc(var(--spacing, .25rem) * 3.5);
+                min-width: calc(var(--spacing, .25rem) * 3.5);
+                min-height: calc(var(--spacing, .25rem) * 3.5);
+
+                color: var(--color-gray-500);
+
+                transition: all 200ms ease-in-out;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { TabsHorizontalContentSkeletonProps } from './component.interface';
+export declare function TabsHorizontalContentSkeleton<C extends ElementType = 'section'>({ as, ...rest }: TabsHorizontalContentSkeletonProps<C>): React.JSX.Element;

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

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type TabsHorizontalContentSkeletonProps<C extends ElementType = 'section'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

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

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

package/components/collections/tabs/horizontal/skeleton/content/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 styles from '../component.module.css';
+export function TabsHorizontalContentSkeleton(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'section');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-tabs-horizontal-content-skeleton', styles.content, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

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

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { TabsHorizontalHeadSkeletonProps } from './component.interface';
+export declare function TabsHorizontalHeadSkeleton<C extends ElementType = 'nav'>({ as, ...rest }: TabsHorizontalHeadSkeletonProps<C>): React.JSX.Element;

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

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type TabsHorizontalHeadSkeletonProps<C extends ElementType = 'nav'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

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

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

package/components/collections/tabs/horizontal/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 styles from '../component.module.css';
+export function TabsHorizontalHeadSkeleton(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'nav');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-tabs-horizontal-head-skeleton', styles.head, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/collections/tabs/horizontal/skeleton/head/tab/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { TabsHorizontalHeadTabSkeletonProps } from './component.interface';
+export declare function TabsHorizontalHeadTabSkeleton<C extends ElementType = 'span'>({ as, ...rest }: TabsHorizontalHeadTabSkeletonProps<C>): React.JSX.Element;

package/components/collections/tabs/horizontal/skeleton/head/tab/component.interface.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+export type TabsHorizontalHeadTabSkeletonProps<C extends ElementType = 'span'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/collections/tabs/horizontal/skeleton/head/tab/component.interface.js

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

package/components/collections/tabs/horizontal/skeleton/head/tab/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 styles from '../../component.module.css';
+export function TabsHorizontalHeadTabSkeleton(_a) {
+    var as = _a.as, rest = __rest(_a, ["as"]);
+    var Component = (as || 'span');
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-tabs-horizontal-head-tab-skeleton', styles.tab, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/collections/tabs/horizontal/skeleton/index.d.ts

@@ -0,0 +1,26 @@
+import { TabsHorizontalSkeleton as BaseTabsHorizontalSkeleton } from './component';
+import type { TabsHorizontalSkeletonProps } from './component.interface';
+import { TabsHorizontalContentSkeleton } from './content/component';
+import { TabsHorizontalContentSkeletonProps } from './content/component.interface';
+import { TabsHorizontalHeadSkeleton } from './head/component';
+import { TabsHorizontalHeadSkeletonProps } from './head/component.interface';
+import { TabsHorizontalHeadTabSkeleton } from './head/tab/component';
+import { TabsHorizontalHeadTabSkeletonProps } from './head/tab/component.interface';
+export declare const TabsHorizontalSkeleton: typeof BaseTabsHorizontalSkeleton & {
+    Head: typeof TabsHorizontalHeadSkeleton & {
+        Tab: typeof TabsHorizontalHeadTabSkeleton;
+    };
+    Content: typeof TabsHorizontalContentSkeleton;
+};
+export declare namespace TabsHorizontal {
+    type Props = TabsHorizontalSkeletonProps;
+    namespace Head {
+        type Props = TabsHorizontalHeadSkeletonProps;
+        namespace Tab {
+            type Props = TabsHorizontalHeadTabSkeletonProps;
+        }
+    }
+    namespace Content {
+        type Props = TabsHorizontalContentSkeletonProps;
+    }
+}

package/components/collections/tabs/horizontal/skeleton/index.js

@@ -0,0 +1,10 @@
+import { TabsHorizontalSkeleton as BaseTabsHorizontalSkeleton } from './component';
+import { TabsHorizontalContentSkeleton } from './content/component';
+import { TabsHorizontalHeadSkeleton } from './head/component';
+import { TabsHorizontalHeadTabSkeleton } from './head/tab/component';
+export var TabsHorizontalSkeleton = Object.assign(BaseTabsHorizontalSkeleton, {
+    Head: Object.assign(TabsHorizontalHeadSkeleton, {
+        Tab: TabsHorizontalHeadTabSkeleton,
+    }),
+    Content: TabsHorizontalContentSkeleton,
+});

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

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

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

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

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

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