@sybilion/uilib 1.3.50 → 1.3.52
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.
- package/dist/esm/components/ui/Page/PageTabs/PageTabs.js +1 -1
- package/dist/esm/components/ui/Page/PageTabs/PageTabs.styl.js +2 -2
- package/dist/esm/components/ui/Tabs/Tabs.styl.js +1 -1
- package/dist/esm/components/ui/Tooltip/Tooltip.js +2 -0
- package/package.json +1 -1
- package/src/components/ui/Page/PageTabs/PageTabs.styl +5 -0
- package/src/components/ui/Page/PageTabs/PageTabs.styl.d.ts +3 -0
- package/src/components/ui/Page/PageTabs/PageTabs.tsx +6 -2
- package/src/components/ui/Tabs/Tabs.styl +3 -3
- package/src/components/ui/Tooltip/Tooltip.tsx +2 -0
- package/src/docs/pages/TooltipPage.tsx +31 -0
|
@@ -16,7 +16,7 @@ function hasTabPanelContent(content) {
|
|
|
16
16
|
return true;
|
|
17
17
|
}
|
|
18
18
|
function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, variant = 'link', ...props }) {
|
|
19
|
-
return (jsxs(Tabs, { className: cn(S.root, className), variant: variant, ...props, children: [jsx(TabsList, { ...tabsListProps, className: cn(S.list, tabsListProps?.withPaddings && S.withPaddings), children: jsx(PageXScroll, { size: "sm", scrollbarClassName: cn(S.scrollbar, scrollbarClassName), innerClassName: innerClassName, children: items.map((item, index) => (jsx(TabsTrigger, { value: item.value, children: item.label }, item.key ?? `${item.value}-${index}`))) }) }), items.map(item => hasTabPanelContent(item.content) ? (jsx(TabsContent, { value: item.value, className: cn(S.content, contentClassName), children: item.content }, item.value)) : null)] }));
|
|
19
|
+
return (jsxs(Tabs, { className: cn(S.root, S[`variant-${variant}`], className), variant: variant, ...props, children: [jsx(TabsList, { ...tabsListProps, className: cn(S.list, tabsListProps?.withPaddings && S.withPaddings), children: jsx(PageXScroll, { size: "sm", scrollbarClassName: cn(S.scrollbar, scrollbarClassName), innerClassName: cn(innerClassName, S.listInner), children: items.map((item, index) => (jsx(TabsTrigger, { value: item.value, children: item.label }, item.key ?? `${item.value}-${index}`))) }) }), items.map(item => hasTabPanelContent(item.content) ? (jsx(TabsContent, { value: item.value, className: cn(S.content, contentClassName), children: item.content }, item.value)) : null)] }));
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
export { PageTabs };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from 'style-inject';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".PageTabs_root__0c-ao{gap:var(--p-6);margin-bottom:var(--p-10);max-width:100%;width:var(--page-width)}.PageTabs_scrollbar__-2Uze{max-height:12px}.PageTabs_list__fNzQB{max-width:100%}.PageTabs_list__fNzQB.PageTabs_withPaddings__pt93u{padding-left:var(--page-x-padding);padding-right:var(--page-x-padding)}.PageTabs_content__6XOr3{display:flex;flex-direction:column;position:relative}";
|
|
4
|
-
var S = {"root":"PageTabs_root__0c-ao","scrollbar":"PageTabs_scrollbar__-2Uze","list":"PageTabs_list__fNzQB","withPaddings":"PageTabs_withPaddings__pt93u","content":"PageTabs_content__6XOr3"};
|
|
3
|
+
var css_248z = ".PageTabs_root__0c-ao{gap:var(--p-6);margin-bottom:var(--p-10);max-width:100%;width:var(--page-width)}.PageTabs_scrollbar__-2Uze{max-height:12px}.PageTabs_list__fNzQB{max-width:100%}.PageTabs_list__fNzQB.PageTabs_withPaddings__pt93u{padding-left:var(--page-x-padding);padding-right:var(--page-x-padding)}.PageTabs_variant-button__3oueI .PageTabs_listInner__cZ4lf,.PageTabs_variant-outline__vdIR7 .PageTabs_listInner__cZ4lf{gap:var(--p-2)}.PageTabs_content__6XOr3{display:flex;flex-direction:column;position:relative}";
|
|
4
|
+
var S = {"root":"PageTabs_root__0c-ao","scrollbar":"PageTabs_scrollbar__-2Uze","list":"PageTabs_list__fNzQB","withPaddings":"PageTabs_withPaddings__pt93u","variant-button":"PageTabs_variant-button__3oueI","listInner":"PageTabs_listInner__cZ4lf","variant-outline":"PageTabs_variant-outline__vdIR7","content":"PageTabs_content__6XOr3"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { S as default };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from 'style-inject';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".Tabs_root__cB9Au{display:flex;flex-direction:column;gap:.5rem}.Tabs_list__9Hs22{align-items:center;color:var(--muted-foreground);display:inline-flex;height:48px;justify-content:center;width:-moz-fit-content;width:fit-content}.Tabs_list__9Hs22.Tabs_fullWidth__Lj2Dd{width:100%}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22{background-color:transparent!important}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22,.Tabs_variant-outline__2CJJg .Tabs_list__9Hs22{border-radius:1.5rem;box-shadow:none;gap:.25rem;height:auto}.Tabs_variant-outline__2CJJg .Tabs_list__9Hs22{background-color:transparent!important;gap:var(--p-2)}.Tabs_trigger__uzdqH{align-items:center;border:1px solid transparent;border-radius:.375rem;color:var(--muted-foreground);cursor:pointer;display:inline-flex;flex:1;font-size:var(--text-sm);font-weight:500;gap:.375rem;height:calc(100% - 1px);justify-content:center;padding:.25rem .5rem;transition:color .2s,box-shadow .2s;white-space:nowrap}.Tabs_trigger__uzdqH:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px var(--ring-50);outline:1px solid var(--ring);outline-offset:0}.Tabs_trigger__uzdqH:disabled{opacity:.5;pointer-events:none}.Tabs_trigger__uzdqH[data-state=active]{background-color:var(--background);box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.Tabs_trigger__uzdqH:hover,.Tabs_trigger__uzdqH[data-state=active]{color:var(--foreground)!important}.Tabs_darker__l-R0I .Tabs_trigger__uzdqH{background-color:var(--muted)}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{border:none;border-radius:var(--p-4);box-shadow:none;color:var(--muted-foreground);flex-shrink:0;font-weight:600;padding:var(--p-1) var(--p-3);transition:all .15s ease-in-out}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-6);box-shadow:0 1px 2px 0 rgba(0,0,0,.05);color:var(--foreground)}.Tabs_variant-outline__2CJJg .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{background-color:var(--background);border-radius:var(--p-6);color:var(--muted-foreground);flex-shrink:0;font-weight:
|
|
3
|
+
var css_248z = ".Tabs_root__cB9Au{display:flex;flex-direction:column;gap:.5rem}.Tabs_list__9Hs22{align-items:center;color:var(--muted-foreground);display:inline-flex;height:48px;justify-content:center;width:-moz-fit-content;width:fit-content}.Tabs_list__9Hs22.Tabs_fullWidth__Lj2Dd{width:100%}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22{background-color:transparent!important}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22,.Tabs_variant-outline__2CJJg .Tabs_list__9Hs22{border-radius:1.5rem;box-shadow:none;gap:.25rem;height:auto}.Tabs_variant-outline__2CJJg .Tabs_list__9Hs22{background-color:transparent!important;gap:var(--p-2)}.Tabs_trigger__uzdqH{align-items:center;border:1px solid transparent;border-radius:.375rem;color:var(--muted-foreground);cursor:pointer;display:inline-flex;flex:1;font-size:var(--text-sm);font-weight:500;gap:.375rem;height:calc(100% - 1px);justify-content:center;padding:.25rem .5rem;transition:color .2s,box-shadow .2s;white-space:nowrap}.Tabs_trigger__uzdqH:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px var(--ring-50);outline:1px solid var(--ring);outline-offset:0}.Tabs_trigger__uzdqH:disabled{opacity:.5;pointer-events:none}.Tabs_trigger__uzdqH[data-state=active]{background-color:var(--background);box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.Tabs_trigger__uzdqH:hover,.Tabs_trigger__uzdqH[data-state=active]{color:var(--foreground)!important}.Tabs_darker__l-R0I .Tabs_trigger__uzdqH{background-color:var(--muted)}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{border:none;border-radius:var(--p-4);box-shadow:none;color:var(--muted-foreground);flex-shrink:0;font-weight:600;padding:var(--p-1) var(--p-3);transition:all .15s ease-in-out}.Tabs_variant-button__wtc8k .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-6);box-shadow:0 1px 2px 0 rgba(0,0,0,.05);color:var(--foreground)}.Tabs_variant-outline__2CJJg .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{background-color:var(--background);border-radius:var(--p-6);color:var(--muted-foreground);flex-shrink:0;font-weight:500;padding:var(--p-1) var(--p-4);transition:box-shadow .15s ease-in-out,color .15s ease-in-out}.Tabs_variant-outline__2CJJg .Tabs_list__9Hs22 .Tabs_trigger__uzdqH:hover{color:var(--foreground)}.Tabs_variant-outline__2CJJg .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{background-color:var(--background);box-shadow:inset 0 0 0 1px var(--selected-tab-outline-color,var(--brand-color-400));color:var(--foreground)}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH{background-color:transparent!important;border:0!important;border-radius:0!important;box-shadow:0!important;font-size:16px;padding:12px 16px}.Tabs_variant-link__xOMDg>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{box-shadow:inset 0 -3px 0 -1px var(--selected-tab-outline-color,var(--brand-color-400))!important}.Tabs_trigger__uzdqH svg{flex-shrink:0;pointer-events:none}.Tabs_trigger__uzdqH svg:not([class*=size-]){height:1rem;width:1rem}.dark .Tabs_trigger__uzdqH{color:var(--muted-foreground)}.dark .Tabs_trigger__uzdqH[data-state=active]{background-color:var(--input-30);border-color:var(--input);color:var(--foreground)}.dark .Tabs_variant-outline__2CJJg .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{background-color:var(--background);box-shadow:inset 0 0 0 1px var(--selected-tab-outline-color,var(--brand-color-400));color:var(--foreground)}.Tabs_content__K27Vl{flex:1;outline:none}.Tabs_root__cB9Au.Tabs_variant-button__wtc8k.Tabs_sizeSm__gfpc6 .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{font-size:var(--text-xs);padding:var(--p-1) var(--p-2)}.Tabs_root__cB9Au.Tabs_variant-button__wtc8k.Tabs_sizeSm__gfpc6 .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-4)}.Tabs_root__cB9Au.Tabs_variant-button__wtc8k.Tabs_sizeLg__CcRFZ .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{font-size:var(--text-base);padding:var(--p-2) var(--p-4)}.Tabs_root__cB9Au.Tabs_variant-button__wtc8k.Tabs_sizeLg__CcRFZ .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-8)}.Tabs_root__cB9Au.Tabs_variant-outline__2CJJg.Tabs_sizeSm__gfpc6 .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{border-radius:var(--p-4);font-size:var(--text-xs);padding:var(--p-1) var(--p-3)}.Tabs_root__cB9Au.Tabs_variant-outline__2CJJg.Tabs_sizeSm__gfpc6 .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-4)}.Tabs_root__cB9Au.Tabs_variant-outline__2CJJg.Tabs_sizeLg__CcRFZ .Tabs_list__9Hs22 .Tabs_trigger__uzdqH{border-radius:var(--p-8);font-size:var(--text-base);padding:var(--p-2) var(--p-5)}.Tabs_root__cB9Au.Tabs_variant-outline__2CJJg.Tabs_sizeLg__CcRFZ .Tabs_list__9Hs22 .Tabs_trigger__uzdqH[data-state=active]{border-radius:var(--p-8)}.Tabs_root__cB9Au.Tabs_variant-link__xOMDg.Tabs_sizeSm__gfpc6>.Tabs_list__9Hs22{height:auto;min-height:36px}.Tabs_root__cB9Au.Tabs_variant-link__xOMDg.Tabs_sizeSm__gfpc6>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH{font-size:14px;padding:8px 12px}.Tabs_root__cB9Au.Tabs_variant-link__xOMDg.Tabs_sizeLg__CcRFZ>.Tabs_list__9Hs22{height:auto;min-height:56px}.Tabs_root__cB9Au.Tabs_variant-link__xOMDg.Tabs_sizeLg__CcRFZ>.Tabs_list__9Hs22 .Tabs_trigger__uzdqH{font-size:18px;padding:16px 24px}";
|
|
4
4
|
var S = {"root":"Tabs_root__cB9Au","list":"Tabs_list__9Hs22","fullWidth":"Tabs_fullWidth__Lj2Dd","variant-link":"Tabs_variant-link__xOMDg","variant-button":"Tabs_variant-button__wtc8k","variant-outline":"Tabs_variant-outline__2CJJg","trigger":"Tabs_trigger__uzdqH","darker":"Tabs_darker__l-R0I","content":"Tabs_content__K27Vl","sizeSm":"Tabs_sizeSm__gfpc6","sizeLg":"Tabs_sizeLg__CcRFZ"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -85,6 +85,7 @@ function applyOverTriggerStyles(contentEl, triggerEl) {
|
|
|
85
85
|
wrapper.style.setProperty('left', `${rect.left - paddingLeft - borderLeft}px`, 'important');
|
|
86
86
|
wrapper.style.setProperty('top', `${rect.top - paddingTop - borderTop}px`, 'important');
|
|
87
87
|
wrapper.style.setProperty('transform', 'none', 'important');
|
|
88
|
+
wrapper.style.setProperty('pointer-events', 'none');
|
|
88
89
|
wrapper.style.setProperty('min-width', '0', 'important');
|
|
89
90
|
wrapper.style.setProperty('width', `${rect.width + paddingLeft + paddingRight + borderLeft + borderRight}px`, 'important');
|
|
90
91
|
contentEl.style.width = '100%';
|
|
@@ -101,6 +102,7 @@ function clearOverTriggerStyles(contentEl) {
|
|
|
101
102
|
wrapper.style.removeProperty('left');
|
|
102
103
|
wrapper.style.removeProperty('top');
|
|
103
104
|
wrapper.style.removeProperty('transform');
|
|
105
|
+
wrapper.style.removeProperty('pointer-events');
|
|
104
106
|
wrapper.style.removeProperty('min-width');
|
|
105
107
|
wrapper.style.removeProperty('width');
|
|
106
108
|
contentEl.style.removeProperty('width');
|
package/package.json
CHANGED
|
@@ -51,7 +51,11 @@ export function PageTabs({
|
|
|
51
51
|
scrollbarClassName?: string;
|
|
52
52
|
}) {
|
|
53
53
|
return (
|
|
54
|
-
<Tabs
|
|
54
|
+
<Tabs
|
|
55
|
+
className={cn(S.root, S[`variant-${variant}`], className)}
|
|
56
|
+
variant={variant}
|
|
57
|
+
{...props}
|
|
58
|
+
>
|
|
55
59
|
<TabsList
|
|
56
60
|
{...tabsListProps}
|
|
57
61
|
className={cn(S.list, tabsListProps?.withPaddings && S.withPaddings)}
|
|
@@ -59,7 +63,7 @@ export function PageTabs({
|
|
|
59
63
|
<PageXScroll
|
|
60
64
|
size="sm"
|
|
61
65
|
scrollbarClassName={cn(S.scrollbar, scrollbarClassName)}
|
|
62
|
-
innerClassName={innerClassName}
|
|
66
|
+
innerClassName={cn(innerClassName, S.listInner)}
|
|
63
67
|
>
|
|
64
68
|
{items.map((item, index) => (
|
|
65
69
|
<TabsTrigger
|
|
@@ -94,14 +94,14 @@
|
|
|
94
94
|
padding var(--p-1) var(--p-4)
|
|
95
95
|
border-radius var(--p-6)
|
|
96
96
|
transition box-shadow 0.15s ease-in-out, color 0.15s ease-in-out
|
|
97
|
-
font-weight
|
|
97
|
+
font-weight 500
|
|
98
98
|
color var(--muted-foreground)
|
|
99
99
|
|
|
100
100
|
&:hover
|
|
101
101
|
color var(--foreground)
|
|
102
102
|
|
|
103
103
|
&[data-state="active"]
|
|
104
|
-
box-shadow inset 0 0 0
|
|
104
|
+
box-shadow inset 0 0 0 1px var(--selected-tab-outline-color, var(--brand-color-400))
|
|
105
105
|
background-color var(--background)
|
|
106
106
|
color var(--foreground)
|
|
107
107
|
|
|
@@ -136,7 +136,7 @@
|
|
|
136
136
|
:global(.dark) .variant-outline .list &
|
|
137
137
|
&[data-state="active"]
|
|
138
138
|
background-color var(--background)
|
|
139
|
-
box-shadow inset 0 0 0
|
|
139
|
+
box-shadow inset 0 0 0 1px var(--selected-tab-outline-color, var(--brand-color-400))
|
|
140
140
|
color var(--foreground)
|
|
141
141
|
|
|
142
142
|
.content
|
|
@@ -126,6 +126,7 @@ function applyOverTriggerStyles(
|
|
|
126
126
|
'important',
|
|
127
127
|
);
|
|
128
128
|
wrapper.style.setProperty('transform', 'none', 'important');
|
|
129
|
+
wrapper.style.setProperty('pointer-events', 'none');
|
|
129
130
|
wrapper.style.setProperty('min-width', '0', 'important');
|
|
130
131
|
wrapper.style.setProperty(
|
|
131
132
|
'width',
|
|
@@ -148,6 +149,7 @@ function clearOverTriggerStyles(contentEl: HTMLElement | null) {
|
|
|
148
149
|
wrapper.style.removeProperty('left');
|
|
149
150
|
wrapper.style.removeProperty('top');
|
|
150
151
|
wrapper.style.removeProperty('transform');
|
|
152
|
+
wrapper.style.removeProperty('pointer-events');
|
|
151
153
|
wrapper.style.removeProperty('min-width');
|
|
152
154
|
wrapper.style.removeProperty('width');
|
|
153
155
|
|
|
@@ -11,6 +11,9 @@ import { DocsHeaderActions } from '../docsHeaderActions';
|
|
|
11
11
|
|
|
12
12
|
const TOOLTIP_SIDES = ['left', 'top', 'bottom', 'right'] as const;
|
|
13
13
|
|
|
14
|
+
const LONG_TEXT =
|
|
15
|
+
'This is a long text that should overflow and show a tooltip on hover.';
|
|
16
|
+
|
|
14
17
|
export default function TooltipPage() {
|
|
15
18
|
return (
|
|
16
19
|
<>
|
|
@@ -33,6 +36,34 @@ export default function TooltipPage() {
|
|
|
33
36
|
</Tooltip>
|
|
34
37
|
))}
|
|
35
38
|
</div>
|
|
39
|
+
|
|
40
|
+
<div
|
|
41
|
+
style={{
|
|
42
|
+
display: 'inline-block',
|
|
43
|
+
padding: 'var(--p-4)',
|
|
44
|
+
marginTop: 'var(--p-4)',
|
|
45
|
+
}}
|
|
46
|
+
>
|
|
47
|
+
<h3>Tooltip over trigger:</h3>
|
|
48
|
+
<br />
|
|
49
|
+
<Tooltip>
|
|
50
|
+
<TooltipTrigger asChild>
|
|
51
|
+
<div
|
|
52
|
+
style={{
|
|
53
|
+
maxWidth: '200px',
|
|
54
|
+
textOverflow: 'ellipsis',
|
|
55
|
+
overflow: 'hidden',
|
|
56
|
+
whiteSpace: 'nowrap',
|
|
57
|
+
}}
|
|
58
|
+
>
|
|
59
|
+
{LONG_TEXT}
|
|
60
|
+
</div>
|
|
61
|
+
</TooltipTrigger>
|
|
62
|
+
<TooltipContent side="bottom" overTrigger>
|
|
63
|
+
{LONG_TEXT}
|
|
64
|
+
</TooltipContent>
|
|
65
|
+
</Tooltip>
|
|
66
|
+
</div>
|
|
36
67
|
</PageContentSection>
|
|
37
68
|
</>
|
|
38
69
|
);
|