@apify/ui-library 0.67.5-featoutputschemacomponent-327312.64 → 0.68.1-feattabs-4feb6d.72

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.68.0](https://github.com/apify/apify-core/compare/@apify/ui-library@0.67.4...@apify/ui-library@0.68.0) (2025-05-13)
+
+
+### Features
+
+* **app, packages:** move json schema viewer to ui components [internal] ([#20885](https://github.com/apify/apify-core/issues/20885)) ([c63f456](https://github.com/apify/apify-core/commit/c63f4567d39fc8449c4ae53003ea41eca65a2316))
+
+
+
+
+
 ## [0.67.4](https://github.com/apify/apify-core/compare/@apify/ui-library@0.67.3...@apify/ui-library@0.67.4) (2025-05-07)
 
 

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { IconComponent } from '@apify/ui-icons';
 import { type MarginSpacingProps, type RegularBoxProps } from './box.js';
-import type { SharedTextSize, SharedTextType } from './text/text_shared.js';
-type BadgeSize = Exclude<SharedTextSize, 'big'>;
+import type { SharedTextType } from './text/text_shared.js';
+export type BadgeSize = 'regular' | 'small' | 'extra_small';
 export declare const BADGE_SIZES: BadgeSize[];
 export declare const BADGE_VARIANTS: readonly ["neutral", "neutral_muted", "neutral_subtle", "primary_black", "primary_blue", "success", "warning", "danger"];
 type BadgeVariant = typeof BADGE_VARIANTS[number];

package/dist/src/components/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,aAAa,EAAY,MAAM,iBAAiB,CAAC;AAI/D,OAAO,EAAO,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAE9E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5E,KAAK,SAAS,GAAG,OAAO,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;AAChD,eAAO,MAAM,WAAW,EAAE,SAAS,EAAyB,CAAC;AAO7D,eAAO,MAAM,cAAc,0HAA2H,CAAC;AACvJ,KAAK,YAAY,GAAG,OAAO,cAAc,CAAC,MAAM,CAAC,CAAC;AAElD,KAAK,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,CAAC,GAAG,kBAAkB,CAAC;AACrF,MAAM,MAAM,UAAU,GAAG,gBAAgB,GAAG;IACxC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,WAAW,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AA8EF;;GAEG;AACH,eAAO,MAAM,KAAK;SAtFT,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,GAAG,GAAG,QAAQ,CAAC;WACxC,SAAS;WACT,cAAc;cACX,YAAY;kBACR,aAAa;iCAyG9B,CAAC"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,aAAa,EAAY,MAAM,iBAAiB,CAAC;AAI/D,OAAO,EAAO,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAE9E,OAAO,KAAK,EAAkB,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5E,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAC5D,eAAO,MAAM,WAAW,EAAE,SAAS,EAAyB,CAAC;AAc7D,eAAO,MAAM,cAAc,0HAA2H,CAAC;AACvJ,KAAK,YAAY,GAAG,OAAO,cAAc,CAAC,MAAM,CAAC,CAAC;AAElD,KAAK,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,CAAC,GAAG,kBAAkB,CAAC;AACrF,MAAM,MAAM,UAAU,GAAG,gBAAgB,GAAG;IACxC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,WAAW,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAmFF;;GAEG;AACH,eAAO,MAAM,KAAK;SA3FT,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,GAAG,GAAG,QAAQ,CAAC;WACxC,SAAS;WACT,cAAc;cACX,YAAY;kBACR,aAAa;iCA8G9B,CAAC"}

package/dist/src/components/badge.js

@@ -8,6 +8,12 @@ export const BADGE_SIZES = ['regular', 'small'];
 const BADGE_ICON_SIZES = {
     regular: '16',
     small: '12',
+    extra_small: '12',
+};
+const BADGE_TEXT_SIZES = {
+    regular: 'regular',
+    small: 'small',
+    extra_small: 'small',
 };
 export const BADGE_VARIANTS = ['neutral', 'neutral_muted', 'neutral_subtle', 'primary_black', 'primary_blue', 'success', 'warning', 'danger'];
 const badgeSizeStyle = {
@@ -20,6 +26,11 @@ const badgeSizeStyle = {
         padding: ${theme.space.space2} ${theme.space.space6};
         border-radius: ${theme.radius.radius4};
     `,
+    extra_small: css `
+        height: 1.6rem;
+        padding: ${theme.space.space2} ${theme.space.space4};
+        border-radius: ${theme.radius.radius4};
+    `,
 };
 const badgeVariantStyle = {
     neutral: css `
@@ -83,7 +94,7 @@ const StyledBadge = styled(Box) `
  * Component for displaying non-interactive chip descendant.
  */
 export const Badge = forwardRef(({ size = 'small', type = 'body', variant = 'neutral', LeadingIcon, children, ...props }, ref) => {
-    return (_jsxs(StyledBadge, { ref: ref, "$size": size, "$variant": variant, ...props, children: [LeadingIcon && _jsx(LeadingIcon, { size: BADGE_ICON_SIZES[size] }), children && (_jsx(Text, { size: size, type: type, weight: "medium", children: children }))] }));
+    return (_jsxs(StyledBadge, { ref: ref, "$size": size, "$variant": variant, ...props, children: [LeadingIcon && _jsx(LeadingIcon, { size: BADGE_ICON_SIZES[size] }), children && (_jsx(Text, { size: BADGE_TEXT_SIZES[size], type: type, weight: "medium", children: children }))] }));
 });
 Badge.displayName = 'Badge';
 //# sourceMappingURL=badge.js.map

package/dist/src/components/badge.js.map

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

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

@@ -19,4 +19,5 @@ export * from './image.js';
 export * from './rating.js';
 export * from './badge.js';
 export * from './tag.js';
+export * from './tabs/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC"}

package/dist/src/components/index.js

@@ -19,4 +19,5 @@ export * from './image.js';
 export * from './rating.js';
 export * from './badge.js';
 export * from './tag.js';
+export * from './tabs/index.js';
 //# sourceMappingURL=index.js.map

package/dist/src/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from './tabs.js';
+export * from './tab.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC"}

package/dist/src/components/tabs/index.js

@@ -0,0 +1,3 @@
+export * from './tabs.js';
+export * from './tab.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC"}

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

@@ -0,0 +1,25 @@
+import type { IconComponent } from '@apify/ui-icons';
+import type { MarginSpacingProps, RegularBoxProps } from '../box.js';
+import type { RegularLinkProps } from '../link.js';
+type SharedTabProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps & Omit<RegularLinkProps, 'hideExternalIcon' | 'showExternalIcon'>;
+export type TabVariant = 'default' | 'boxed' | 'buttoned';
+export type TabData = SharedTabProps & {
+    id: string;
+    title: string;
+    Icon?: IconComponent;
+    chip?: number | string;
+    rollout?: 'alpha' | 'beta';
+    disabled?: boolean;
+};
+export type TabProps = TabData & {
+    variant?: TabVariant;
+    active?: boolean;
+    onSelect?: (data: {
+        id: string;
+        href: string;
+        event: React.MouseEvent;
+    }) => void;
+};
+export declare const Tab: ({ variant, id, to, Icon, title, chip, rollout, className, onSelect, active, disabled, ...props }: TabProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/tab.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAMrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAKnD,KAAK,cAAc,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,CAAC,GAAG,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,kBAAkB,GAAG,kBAAkB,CAAC,CAAC;AAErJ,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AAE1D,MAAM,MAAM,OAAO,GAAG,cAAc,GAAG;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG;IAC7B,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;CACpF,CAAC;AA2IF,eAAO,MAAM,GAAG,qGAAkI,QAAQ,4CAoBzJ,CAAC"}

package/dist/src/components/tabs/tab.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { createPath } from 'history';
+import styled, { css } from 'styled-components';
+import { theme } from '../../design_system/theme.js';
+import { Badge } from '../badge.js';
+import { Link } from '../link.js';
+import { Text } from '../text/index.js';
+const tabVariantTextSize = {
+    default: 'regular',
+    boxed: 'regular',
+    buttoned: 'small',
+};
+const tabVariantBadgeSize = {
+    default: 'small',
+    boxed: 'small',
+    buttoned: 'extra_small',
+};
+const tabVariantStyle = {
+    default: css `
+        height: 3.6rem;
+        padding: 0 ${theme.space.space8};
+        color: ${theme.color.neutral.textSubtle};
+
+        &:hover {
+            color: ${theme.color.primaryBlack.actionHover}
+        }
+
+        &.active {
+            color: ${theme.color.neutral.text};
+
+            &::after {
+                bottom: -${theme.space.space4};
+                right: 0;
+                left: 0;
+                height: 2px;
+                background-color: ${theme.color.primaryBlack.action};
+                border-radius: ${theme.radius.radiusFull};
+                content: '';
+                display: block;
+                pointer-events: none;
+                position: absolute;
+            }
+
+            &.disabled::after {
+                background-color: ${theme.color.neutral.textDisabled};
+            }
+        }
+    `,
+    boxed: css `
+        height: 3.6rem;
+        border: 1px solid transparent;
+        border-top-right-radius: ${theme.radius.radius6};
+        border-top-left-radius: ${theme.radius.radius6};
+        padding: 0 ${theme.space.space12};
+        color: ${theme.color.neutral.textMuted};
+
+        &::after {
+            inset: ${theme.space.space4};
+            background-color: transparent;
+            border-radius: ${theme.radius.radius6};
+            content: '';
+            display: block;
+            pointer-events: none;
+            position: absolute;
+            transition: background-color ${theme.transition.fastEaseOut};
+            z-index: -1;
+        }
+
+        &:hover {
+            color: ${theme.color.neutral.text};
+
+            &::after {
+                background-color: ${theme.color.neutral.hover};
+            }
+        }
+
+        &.active {
+            color: ${theme.color.neutral.text};
+            border-color: ${theme.color.neutral.border};
+            border-bottom-color: ${theme.color.neutral.background};
+
+            &::after {
+                background-color: transparent;
+            }
+        }
+    `,
+    buttoned: css `
+        height: 3.2rem;
+        margin: 0 ${theme.space.space4};
+        padding: 0 ${theme.space.space8};
+        background-color: transparent;
+        border: 1px solid transparent;
+        border-radius: ${theme.radius.radius8};
+        color: ${theme.color.neutral.textMuted};
+
+        &:hover {
+            background-color: ${theme.color.neutral.hover};
+            color: ${theme.color.neutral.text};
+        }
+
+        &.active {
+            background-color: transparent;
+            border-color: ${theme.color.neutral.border};
+            color: ${theme.color.neutral.text};
+        }
+    `,
+};
+const TabWrapper = styled(Link) `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: ${theme.space.space4};
+    cursor: pointer;
+    position: relative;
+    transition: background-color ${theme.transition.fastEaseOut}, border-color ${theme.transition.fastEaseOut}, color ${theme.transition.fastEaseOut};
+    z-index: 1;
+
+    
+    ${({ $variant }) => tabVariantStyle[$variant]};
+
+    &.disabled {
+        color: ${theme.color.neutral.textDisabled};
+        pointer-events: none;
+    }
+
+    .Tab-icon {
+        color: inherit;
+        flex-shrink: 0;
+        transition: color ${theme.transition.fastEaseOut};
+    }
+
+    .Tab-badge {
+        flex-shrink: 0;
+        text-transform: uppercase;
+    }
+`;
+export const Tab = ({ variant = 'default', id, to, Icon, title, chip, rollout, className, onSelect, active = false, disabled = false, ...props }) => {
+    const href = typeof (to) === 'string' ? to : createPath(to);
+    return (_jsxs(TabWrapper, { ...props, id: id, to: to, role: "tab", "data-test": "tab", className: clsx(className, { active, disabled }), onClick: onSelect ? (event) => onSelect({ id, href, event }) : undefined, "$variant": variant, children: [Icon && _jsx(Icon, { size: "16", className: "Tab-icon" }), _jsx(Text, { size: tabVariantTextSize[variant], weight: "bold", as: "div", children: title }), chip && _jsx(Badge, { size: tabVariantBadgeSize[variant], variant: active ? 'primary_black' : 'neutral_subtle', className: "Tab-badge", children: chip }), rollout && _jsx(Badge, { size: tabVariantBadgeSize[variant], variant: "primary_blue", className: "Tab-badge", children: rollout })] }));
+};
+//# sourceMappingURL=tab.js.map

package/dist/src/components/tabs/tab.js.map

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

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

@@ -0,0 +1,16 @@
+import type { MarginSpacingProps, RegularBoxProps } from '../box.js';
+import { type TabData, type TabVariant } from './tab.js';
+type SharedTabsProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps;
+type TabsProps = SharedTabsProps & {
+    variant?: TabVariant;
+    tabs: TabData[];
+    activeTab?: string;
+    onSelect?: (data: {
+        id: string;
+        href: string;
+        event: React.MouseEvent;
+    }) => void;
+};
+export declare const Tabs: ({ variant, tabs, activeTab, onSelect, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAErE,OAAO,EAAO,KAAK,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAE9D,KAAK,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,CAAC,GAAG,kBAAkB,CAAC;AACpF,KAAK,SAAS,GAAG,eAAe,GAAG;IAC/B,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;CACpF,CAAC;AAsHF,eAAO,MAAM,IAAI,qDAAkE,SAAS,4CAwB3F,CAAC"}

package/dist/src/components/tabs/tabs.js

@@ -0,0 +1,121 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useResizeObserver from '@react-hook/resize-observer';
+import { useCallback, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { theme } from '../../design_system/theme.js';
+import { Box } from '../box.js';
+import { Tab } from './tab.js';
+const tabsVariantStyle = {
+    default: css `
+        align-items: flex-start;
+        gap: ${theme.space.space8};
+
+        &::after {
+            bottom: 0;
+            right: 0;
+            left: 0;
+            height: 1px;
+            background-color: ${theme.color.neutral.separatorSubtle};
+            border-radius: ${theme.radius.radiusFull};
+            content: '';
+            display: block;
+            pointer-events: none;
+            position: absolute;
+        }
+    `,
+    boxed: css `
+        align-items: flex-end;
+
+        &::after {
+            bottom: 0;
+            right: 0;
+            left: 0;
+            height: 1px;
+            background-color: ${theme.color.neutral.border};
+            content: '';
+            display: block;
+            pointer-events: none;
+            position: absolute;
+        }
+    `,
+    buttoned: css `
+        align-items: center;
+    `,
+};
+const TabsWrapper = styled(Box) `
+    height: 4rem;
+    display: flex;
+    position: relative;
+
+    [role='tabpanel'] {
+        min-width: 0;
+        display: flex;
+        flex-grow: 1;
+        overflow-x: auto;
+        ${({ $variant }) => tabsVariantStyle[$variant]};
+    }
+
+    & > [role="cell"] {
+        position: sticky;
+        top: 0;
+        height: 100%;
+        width: 0;
+        margin-left: auto;
+        opacity: 0;
+        transition: opacity ${theme.transition.fastEaseOut};
+        z-index: 2;
+
+        &[aria-hidden="false"] {
+            opacity: 1;
+        }
+
+        &::after {
+            height: 100%;
+            width: ${theme.space.space32};
+            content: ' ';
+            pointer-events: none;
+            position: absolute;
+        }
+
+        &:first-of-type {
+            left: 0;
+            
+            &::after {
+                left: 0;
+                background: linear-gradient(90deg, ${theme.color.neutral.background} 0%, rgba(255, 255, 255, 0) 100%);
+            }
+        }
+
+        &:last-of-type {
+            right: 0;
+            
+            &::after {
+                right: 0;
+                background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, ${theme.color.neutral.background} 100%);
+            }
+        }
+    }
+`;
+const isTabsOverflowing = (node) => {
+    if (node.scrollWidth > node.clientWidth) {
+        return {
+            right: node.clientWidth + node.scrollLeft < node.scrollWidth,
+            left: node.scrollLeft > 0,
+        };
+    }
+    return {
+        right: false,
+        left: false,
+    };
+};
+export const Tabs = ({ variant = 'default', tabs, activeTab, onSelect, ...props }) => {
+    const ref = useRef(null);
+    const [overflowState, setOveflowState] = useState();
+    useResizeObserver(ref, (entry) => setOveflowState(isTabsOverflowing(entry.target)));
+    const scrollHandler = useCallback((event) => {
+        setOveflowState(isTabsOverflowing(event.currentTarget));
+    }, []);
+    return _jsxs(TabsWrapper, { ...props, role: "tablist", "data-test": "tabs-wrapper", "$variant": variant, children: [_jsx("div", { role: "cell", "aria-hidden": !overflowState?.left }), _jsx("div", { ref: ref, role: "tabpanel", onScroll: scrollHandler, children: tabs.map((tab) => (_createElement(Tab, { ...tab, key: tab.id, variant: variant, active: tab.id === activeTab, onSelect: onSelect }))) }), _jsx("div", { role: "cell", "aria-hidden": !overflowState?.right })] });
+};
+//# sourceMappingURL=tabs.js.map

package/dist/src/components/tabs/tabs.js.map

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