@sybilion/uilib 1.3.50 → 1.3.51
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/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
|
@@ -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
|
|
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
|