@apify/ui-library 0.68.0 → 0.68.1-feattabs-4feb6d.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
2
  import type { IconComponent } from '@apify/ui-icons';
3
3
  import { type MarginSpacingProps, type RegularBoxProps } from './box.js';
4
- import type { SharedTextSize, SharedTextType } from './text/text_shared.js';
5
- type BadgeSize = Exclude<SharedTextSize, 'big'>;
4
+ import type { SharedTextType } from './text/text_shared.js';
5
+ export type BadgeSize = 'regular' | 'small' | 'extra_small';
6
6
  export declare const BADGE_SIZES: BadgeSize[];
7
7
  export declare const BADGE_VARIANTS: readonly ["neutral", "neutral_muted", "neutral_subtle", "primary_black", "primary_blue", "success", "warning", "danger"];
8
8
  type BadgeVariant = typeof BADGE_VARIANTS[number];
@@ -1 +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"}
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,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"}
@@ -8,6 +8,12 @@ export const BADGE_SIZES = ['regular', 'small'];
8
8
  const BADGE_ICON_SIZES = {
9
9
  regular: '16',
10
10
  small: '12',
11
+ extra_small: '12',
12
+ };
13
+ const BADGE_TEXT_SIZES = {
14
+ regular: 'regular',
15
+ small: 'small',
16
+ extra_small: 'small',
11
17
  };
12
18
  export const BADGE_VARIANTS = ['neutral', 'neutral_muted', 'neutral_subtle', 'primary_black', 'primary_blue', 'success', 'warning', 'danger'];
13
19
  const badgeSizeStyle = {
@@ -20,6 +26,11 @@ const badgeSizeStyle = {
20
26
  padding: ${theme.space.space2} ${theme.space.space6};
21
27
  border-radius: ${theme.radius.radius4};
22
28
  `,
29
+ extra_small: css `
30
+ height: 1.6rem;
31
+ padding: ${theme.space.space2} ${theme.space.space4};
32
+ border-radius: ${theme.radius.radius4};
33
+ `,
23
34
  };
24
35
  const badgeVariantStyle = {
25
36
  neutral: css `
@@ -83,7 +94,7 @@ const StyledBadge = styled(Box) `
83
94
  * Component for displaying non-interactive chip descendant.
84
95
  */
85
96
  export const Badge = forwardRef(({ size = 'small', type = 'body', variant = 'neutral', LeadingIcon, children, ...props }, ref) => {
86
- 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 }))] }));
97
+ 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 }))] }));
87
98
  });
88
99
  Badge.displayName = 'Badge';
89
100
  //# sourceMappingURL=badge.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge.tsx"],"names":[],"mappings":"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"}
@@ -19,4 +19,5 @@ export * from './image.js';
19
19
  export * from './rating.js';
20
20
  export * from './badge.js';
21
21
  export * from './tag.js';
22
+ export * from './tabs/index.js';
22
23
  //# sourceMappingURL=index.d.ts.map
@@ -1 +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"}
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;AACzB,cAAc,iBAAiB,CAAC"}
@@ -19,4 +19,5 @@ export * from './image.js';
19
19
  export * from './rating.js';
20
20
  export * from './badge.js';
21
21
  export * from './tag.js';
22
+ export * from './tabs/index.js';
22
23
  //# sourceMappingURL=index.js.map
@@ -1 +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"}
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;AACzB,cAAc,iBAAiB,CAAC"}
@@ -0,0 +1,3 @@
1
+ export * from './tabs.js';
2
+ export * from './tab.js';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC"}
@@ -0,0 +1,3 @@
1
+ export * from './tabs.js';
2
+ export * from './tab.js';
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC"}
@@ -0,0 +1,25 @@
1
+ import type { IconComponent } from '@apify/ui-icons';
2
+ import type { MarginSpacingProps, RegularBoxProps } from '../box.js';
3
+ import type { RegularLinkProps } from '../link.js';
4
+ type SharedTabProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps & Omit<RegularLinkProps, 'hideExternalIcon' | 'showExternalIcon'>;
5
+ export type TabVariant = 'default' | 'boxed' | 'buttoned';
6
+ export type TabData = SharedTabProps & {
7
+ id: string;
8
+ title: string;
9
+ Icon?: IconComponent;
10
+ chip?: number | string;
11
+ rollout?: 'alpha' | 'beta';
12
+ disabled?: boolean;
13
+ };
14
+ export type TabProps = TabData & {
15
+ variant?: TabVariant;
16
+ active?: boolean;
17
+ onSelect?: (data: {
18
+ id: string;
19
+ href: string;
20
+ event: React.MouseEvent;
21
+ }) => void;
22
+ };
23
+ export declare const Tab: ({ variant, id, to, Icon, title, chip, rollout, className, onSelect, active, disabled, ...props }: TabProps) => import("react/jsx-runtime").JSX.Element;
24
+ export {};
25
+ //# sourceMappingURL=tab.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,142 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import clsx from 'clsx';
3
+ import { createPath } from 'history';
4
+ import styled, { css } from 'styled-components';
5
+ import { theme } from '../../design_system/theme.js';
6
+ import { Badge } from '../badge.js';
7
+ import { Link } from '../link.js';
8
+ import { Text } from '../text/index.js';
9
+ const tabVariantTextSize = {
10
+ default: 'regular',
11
+ boxed: 'regular',
12
+ buttoned: 'small',
13
+ };
14
+ const tabVariantBadgeSize = {
15
+ default: 'small',
16
+ boxed: 'small',
17
+ buttoned: 'extra_small',
18
+ };
19
+ const tabVariantStyle = {
20
+ default: css `
21
+ height: 3.6rem;
22
+ padding: 0 ${theme.space.space8};
23
+ color: ${theme.color.neutral.textSubtle};
24
+
25
+ &:hover {
26
+ color: ${theme.color.primaryBlack.actionHover}
27
+ }
28
+
29
+ &.active {
30
+ color: ${theme.color.neutral.text};
31
+
32
+ &::after {
33
+ bottom: -${theme.space.space4};
34
+ right: 0;
35
+ left: 0;
36
+ height: 2px;
37
+ background-color: ${theme.color.primaryBlack.action};
38
+ border-radius: ${theme.radius.radiusFull};
39
+ content: '';
40
+ display: block;
41
+ pointer-events: none;
42
+ position: absolute;
43
+ }
44
+
45
+ &.disabled::after {
46
+ background-color: ${theme.color.neutral.textDisabled};
47
+ }
48
+ }
49
+ `,
50
+ boxed: css `
51
+ height: 3.6rem;
52
+ border: 1px solid transparent;
53
+ border-top-right-radius: ${theme.radius.radius6};
54
+ border-top-left-radius: ${theme.radius.radius6};
55
+ padding: 0 ${theme.space.space12};
56
+ color: ${theme.color.neutral.textMuted};
57
+
58
+ &::after {
59
+ inset: ${theme.space.space4};
60
+ background-color: transparent;
61
+ border-radius: ${theme.radius.radius6};
62
+ content: '';
63
+ display: block;
64
+ pointer-events: none;
65
+ position: absolute;
66
+ transition: background-color ${theme.transition.fastEaseOut};
67
+ z-index: -1;
68
+ }
69
+
70
+ &:hover {
71
+ color: ${theme.color.neutral.text};
72
+
73
+ &::after {
74
+ background-color: ${theme.color.neutral.hover};
75
+ }
76
+ }
77
+
78
+ &.active {
79
+ color: ${theme.color.neutral.text};
80
+ border-color: ${theme.color.neutral.border};
81
+ border-bottom-color: ${theme.color.neutral.background};
82
+
83
+ &::after {
84
+ background-color: transparent;
85
+ }
86
+ }
87
+ `,
88
+ buttoned: css `
89
+ height: 3.2rem;
90
+ margin: 0 ${theme.space.space4};
91
+ padding: 0 ${theme.space.space8};
92
+ background-color: transparent;
93
+ border: 1px solid transparent;
94
+ border-radius: ${theme.radius.radius8};
95
+ color: ${theme.color.neutral.textMuted};
96
+
97
+ &:hover {
98
+ background-color: ${theme.color.neutral.hover};
99
+ color: ${theme.color.neutral.text};
100
+ }
101
+
102
+ &.active {
103
+ background-color: transparent;
104
+ border-color: ${theme.color.neutral.border};
105
+ color: ${theme.color.neutral.text};
106
+ }
107
+ `,
108
+ };
109
+ const TabWrapper = styled(Link) `
110
+ display: inline-flex;
111
+ align-items: center;
112
+ justify-content: center;
113
+ gap: ${theme.space.space4};
114
+ cursor: pointer;
115
+ position: relative;
116
+ transition: background-color ${theme.transition.fastEaseOut}, border-color ${theme.transition.fastEaseOut}, color ${theme.transition.fastEaseOut};
117
+ z-index: 1;
118
+
119
+
120
+ ${({ $variant }) => tabVariantStyle[$variant]};
121
+
122
+ &.disabled {
123
+ color: ${theme.color.neutral.textDisabled};
124
+ pointer-events: none;
125
+ }
126
+
127
+ .Tab-icon {
128
+ color: inherit;
129
+ flex-shrink: 0;
130
+ transition: color ${theme.transition.fastEaseOut};
131
+ }
132
+
133
+ .Tab-badge {
134
+ flex-shrink: 0;
135
+ text-transform: uppercase;
136
+ }
137
+ `;
138
+ export const Tab = ({ variant = 'default', id, to, Icon, title, chip, rollout, className, onSelect, active = false, disabled = false, ...props }) => {
139
+ const href = typeof (to) === 'string' ? to : createPath(to);
140
+ 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 })] }));
141
+ };
142
+ //# sourceMappingURL=tab.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../../src/components/tabs/tab.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,16 @@
1
+ import type { MarginSpacingProps, RegularBoxProps } from '../box.js';
2
+ import { type TabData, type TabVariant } from './tab.js';
3
+ type SharedTabsProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps;
4
+ type TabsProps = SharedTabsProps & {
5
+ variant?: TabVariant;
6
+ tabs: TabData[];
7
+ activeTab?: string;
8
+ onSelect?: (data: {
9
+ id: string;
10
+ href: string;
11
+ event: React.MouseEvent;
12
+ }) => void;
13
+ };
14
+ export declare const Tabs: ({ variant, tabs, activeTab, onSelect, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
15
+ export {};
16
+ //# sourceMappingURL=tabs.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,121 @@
1
+ import { createElement as _createElement } from "react";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import useResizeObserver from '@react-hook/resize-observer';
4
+ import { useCallback, useRef, useState } from 'react';
5
+ import styled, { css } from 'styled-components';
6
+ import { theme } from '../../design_system/theme.js';
7
+ import { Box } from '../box.js';
8
+ import { Tab } from './tab.js';
9
+ const tabsVariantStyle = {
10
+ default: css `
11
+ align-items: flex-start;
12
+ gap: ${theme.space.space8};
13
+
14
+ &::after {
15
+ bottom: 0;
16
+ right: 0;
17
+ left: 0;
18
+ height: 1px;
19
+ background-color: ${theme.color.neutral.separatorSubtle};
20
+ border-radius: ${theme.radius.radiusFull};
21
+ content: '';
22
+ display: block;
23
+ pointer-events: none;
24
+ position: absolute;
25
+ }
26
+ `,
27
+ boxed: css `
28
+ align-items: flex-end;
29
+
30
+ &::after {
31
+ bottom: 0;
32
+ right: 0;
33
+ left: 0;
34
+ height: 1px;
35
+ background-color: ${theme.color.neutral.border};
36
+ content: '';
37
+ display: block;
38
+ pointer-events: none;
39
+ position: absolute;
40
+ }
41
+ `,
42
+ buttoned: css `
43
+ align-items: center;
44
+ `,
45
+ };
46
+ const TabsWrapper = styled(Box) `
47
+ height: 4rem;
48
+ display: flex;
49
+ position: relative;
50
+
51
+ [role='tabpanel'] {
52
+ min-width: 0;
53
+ display: flex;
54
+ flex-grow: 1;
55
+ overflow-x: auto;
56
+ ${({ $variant }) => tabsVariantStyle[$variant]};
57
+ }
58
+
59
+ & > [role="cell"] {
60
+ position: sticky;
61
+ top: 0;
62
+ height: 100%;
63
+ width: 0;
64
+ margin-left: auto;
65
+ opacity: 0;
66
+ transition: opacity ${theme.transition.fastEaseOut};
67
+ z-index: 2;
68
+
69
+ &[aria-hidden="false"] {
70
+ opacity: 1;
71
+ }
72
+
73
+ &::after {
74
+ height: 100%;
75
+ width: ${theme.space.space32};
76
+ content: ' ';
77
+ pointer-events: none;
78
+ position: absolute;
79
+ }
80
+
81
+ &:first-of-type {
82
+ left: 0;
83
+
84
+ &::after {
85
+ left: 0;
86
+ background: linear-gradient(90deg, ${theme.color.neutral.background} 0%, rgba(255, 255, 255, 0) 100%);
87
+ }
88
+ }
89
+
90
+ &:last-of-type {
91
+ right: 0;
92
+
93
+ &::after {
94
+ right: 0;
95
+ background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, ${theme.color.neutral.background} 100%);
96
+ }
97
+ }
98
+ }
99
+ `;
100
+ const isTabsOverflowing = (node) => {
101
+ if (node.scrollWidth > node.clientWidth) {
102
+ return {
103
+ right: node.clientWidth + node.scrollLeft < node.scrollWidth,
104
+ left: node.scrollLeft > 0,
105
+ };
106
+ }
107
+ return {
108
+ right: false,
109
+ left: false,
110
+ };
111
+ };
112
+ export const Tabs = ({ variant = 'default', tabs, activeTab, onSelect, ...props }) => {
113
+ const ref = useRef(null);
114
+ const [overflowState, setOveflowState] = useState();
115
+ useResizeObserver(ref, (entry) => setOveflowState(isTabsOverflowing(entry.target)));
116
+ const scrollHandler = useCallback((event) => {
117
+ setOveflowState(isTabsOverflowing(event.currentTarget));
118
+ }, []);
119
+ 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 })] });
120
+ };
121
+ //# sourceMappingURL=tabs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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"}