@react-fabric/core 1.0.0-beta.30 → 1.0.0-beta.32
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/cjs/components/progress/Progress.module.css +1 -1
- package/dist/cjs/components/tabpanel/Tab.js +6 -4
- package/dist/cjs/components/tabpanel/TabPanel.module.css +1 -1
- package/dist/cjs/overlays/tooltip/Tooltip.js +1 -1
- package/dist/esm/components/progress/Progress.module.css +1 -1
- package/dist/esm/components/tabpanel/Tab.js +6 -4
- package/dist/esm/components/tabpanel/TabPanel.module.css +1 -1
- package/dist/esm/overlays/tooltip/Tooltip.js +1 -1
- package/dist/types/components/tabpanel/Tab.d.ts +1 -1
- package/package.json +3 -3
- package/src/components/progress/Progress.module.css +1 -1
- package/src/components/tabpanel/Tab.tsx +5 -4
- package/src/components/tabpanel/TabPanel.module.css +41 -41
- package/src/overlays/tooltip/Tooltip.tsx +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer comp{.progressbar{box-shadow:inset 0 0 4px 0 theme(boxShadowColor.dimmed);height:1em;&>div:last-child{width:calc(var(--progress)*1%);&:after{color:var(--white);content:attr(data-label);font-size:.5em;inset-block:0;inset-inline-start:0;line-height:.5em;padding:.75em;position:absolute;text-align:center;vertical-align:middle;width:calc((100/var(--progress))*100%)}}.progressTrack{transition:width .5s;width:calc(var(--progress)*1%)}&>div:first-child{font-size:.5em;line-height:.5em;padding:.75em}}.progressAnimate{background-image:var(--progress-gradient);background-size:1rem 1rem;& :global{animation:
|
|
1
|
+
@layer comp{.progressbar{box-shadow:inset 0 0 4px 0 theme(boxShadowColor.dimmed);height:1em;&>div:last-child{width:calc(var(--progress)*1%);&:after{color:var(--white);content:attr(data-label);font-size:.5em;inset-block:0;inset-inline-start:0;line-height:.5em;padding:.75em;position:absolute;text-align:center;vertical-align:middle;width:calc((100/var(--progress))*100%)}}.progressTrack{transition:width .5s;width:calc(var(--progress)*1%)}&>div:first-child{font-size:.5em;line-height:.5em;padding:.75em}}.progressAnimate{background-image:var(--progress-gradient);background-size:1rem 1rem;& :global{animation:bgprogress .75s linear infinite}}}
|
|
@@ -18,7 +18,7 @@ require('../../types/icons.js');
|
|
|
18
18
|
var DropdownTool = require('../dropdown/DropdownTool.js');
|
|
19
19
|
var TabPanel_module = require('./TabPanel.module.css');
|
|
20
20
|
|
|
21
|
-
var _excluded = ["ref", "as", "id", "className", "label", "icon", "iconBg", "iconColor", "rtlFlip", "badge", "disabled", "onClose", "active", "
|
|
21
|
+
var _excluded = ["ref", "as", "id", "className", "label", "icon", "iconBg", "iconColor", "rtlFlip", "badge", "disabled", "onClose", "active", "onClick", "tabFlex", "color", "actions", "tooltip", "activeClassName"];
|
|
22
22
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
23
23
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
24
24
|
var Tab = function Tab(_ref) {
|
|
@@ -35,7 +35,6 @@ var Tab = function Tab(_ref) {
|
|
|
35
35
|
disabled = _ref.disabled,
|
|
36
36
|
onClose = _ref.onClose,
|
|
37
37
|
active = _ref.active,
|
|
38
|
-
minimal = _ref.minimal,
|
|
39
38
|
_onClick = _ref.onClick,
|
|
40
39
|
tabFlex = _ref.tabFlex,
|
|
41
40
|
color = _ref.color,
|
|
@@ -46,6 +45,9 @@ var Tab = function Tab(_ref) {
|
|
|
46
45
|
var badgeProps = react.useMemo(function () {
|
|
47
46
|
return Badge.getBadgeProps(badge);
|
|
48
47
|
}, [badge]);
|
|
48
|
+
var minimal = react.useMemo(function () {
|
|
49
|
+
return !label;
|
|
50
|
+
}, [label]);
|
|
49
51
|
var tooltipProps = react.useMemo(function () {
|
|
50
52
|
if (utilities.isString(tooltip)) return {
|
|
51
53
|
content: tooltip
|
|
@@ -60,7 +62,7 @@ var Tab = function Tab(_ref) {
|
|
|
60
62
|
disabled: disabled,
|
|
61
63
|
"data-color": color,
|
|
62
64
|
"data-inner-clickable": true,
|
|
63
|
-
className: classNames(TabPanel_module.tabButton, className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36 min-w-
|
|
65
|
+
className: classNames(TabPanel_module.tabButton, className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6" : "min-w-18", "flex items-center justify-center px-1 rounded overflow-hidden"),
|
|
64
66
|
onClick: function onClick() {
|
|
65
67
|
return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
|
|
66
68
|
},
|
|
@@ -71,7 +73,7 @@ var Tab = function Tab(_ref) {
|
|
|
71
73
|
bg: iconBg,
|
|
72
74
|
color: iconColor,
|
|
73
75
|
rtlFlip: rtlFlip,
|
|
74
|
-
className: "flex-content"
|
|
76
|
+
className: "flex-content p-2"
|
|
75
77
|
}), !minimal && /*#__PURE__*/jsxRuntime.jsx("label", {
|
|
76
78
|
className: "flex-initial truncate text-center px-1 py-1",
|
|
77
79
|
children: label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer comp{.tabPanel{--color:theme(colors.primary.500)
|
|
1
|
+
@layer comp{.tabPanel{--color:theme(colors.primary.500);&[data-orientation=top]{grid-template:"tablist" auto "content" 1fr/1fr;.tabHeader{box-shadow:inset 0 -1px 0 theme(borderColor.dimmed)}}&[data-orientation=bottom]{grid-template:"content" 1fr "tablist" auto/1fr;.tabHeader{box-shadow:inset 0 1px 0 theme(borderColor.dimmed);margin-top:1px}}&[data-orientation=start]{grid-template:"tablist content" 1fr/auto 1fr;.tabHeader{box-shadow:inset -1px 0 0 theme(borderColor.dimmed)}}&[data-orientation=end]{grid-template:"content tablist" 1fr/1fr auto;.tabHeader{box-shadow:inset 1px 0 0 theme(borderColor.dimmed)}}}}@layer util{.tabPanel{& .tabList>.tabButton:global(.active){pointer-events:none}&>.tabHeader{grid-area:tablist;&>.tabList>.tabButton{&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&:not(:global(.active)):hover{background-color:theme(colors.tint.100/50%);color:color-mix(in lab,var(--color) 65%,var(--fabric-text))}&:global(.active){--active-color:var(--color);color:color-mix(in lab,var(--color) 65%,var(--fabric-text));font-weight:500}}}&[data-variant=outline]{& .tabList>.tabButton:global(.active){--active-color:theme(backgroundColor.base);--active-border:0 0 0 1px theme(borderColor.base) inset;background-color:theme(backgroundColor.base)}}&[data-variant=solid]{& .tabList>.tabButton:global(.active){background-color:var(--color);color:theme(colors.white)}}&[data-variant=soft]{& .tabList>.tabButton:global(.active){background-color:color-mix(in lab,var(--color) 20%,var(--fabric-bg))}}&[data-orientation=top] .tabList{&>.tabButton:global(.active){box-shadow:0 -2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=bottom] .tabList{&>.tabButton:global(.active){box-shadow:0 2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=start] .tabList{&>.tabButton:global(.active){box-shadow:-2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=end] .tabList{&>.tabButton:global(.active){box-shadow:2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=top] .tabList>.tabButton{border-end-end-radius:0;border-end-start-radius:0;margin-top:2px;margin-inline:1px}&[data-orientation=bottom] .tabList>.tabButton{border-start-end-radius:0;border-start-start-radius:0;margin-bottom:2px;margin-inline:1px}&[data-orientation=start] .tabList>.tabButton{border-end-end-radius:0;border-start-end-radius:0;margin-block:1px;margin-inline-start:2px}&[data-orientation=end] .tabList>.tabButton{border-end-start-radius:0;border-start-start-radius:0;margin-block:1px;margin-inline-end:2px}}}
|
|
@@ -113,7 +113,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
113
113
|
children: /*#__PURE__*/jsxRuntime.jsxs("dfn", _objectSpread(_objectSpread({
|
|
114
114
|
"data-ref": "tooltip",
|
|
115
115
|
"data-color": color,
|
|
116
|
-
className: classNames(Tooltip_module.tooltip, "select-none text-sm not-italic flex py-1 px-2 !max-w-
|
|
116
|
+
className: classNames(Tooltip_module.tooltip, "select-none text-sm not-italic flex py-1 px-2 !max-w-lg rounded shadow-md bg-current"),
|
|
117
117
|
ref: refs.setFloating,
|
|
118
118
|
style: floatingStyles
|
|
119
119
|
}, getFloatingProps()), {}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer comp{.progressbar{box-shadow:inset 0 0 4px 0 theme(boxShadowColor.dimmed);height:1em;&>div:last-child{width:calc(var(--progress)*1%);&:after{color:var(--white);content:attr(data-label);font-size:.5em;inset-block:0;inset-inline-start:0;line-height:.5em;padding:.75em;position:absolute;text-align:center;vertical-align:middle;width:calc((100/var(--progress))*100%)}}.progressTrack{transition:width .5s;width:calc(var(--progress)*1%)}&>div:first-child{font-size:.5em;line-height:.5em;padding:.75em}}.progressAnimate{background-image:var(--progress-gradient);background-size:1rem 1rem;& :global{animation:
|
|
1
|
+
@layer comp{.progressbar{box-shadow:inset 0 0 4px 0 theme(boxShadowColor.dimmed);height:1em;&>div:last-child{width:calc(var(--progress)*1%);&:after{color:var(--white);content:attr(data-label);font-size:.5em;inset-block:0;inset-inline-start:0;line-height:.5em;padding:.75em;position:absolute;text-align:center;vertical-align:middle;width:calc((100/var(--progress))*100%)}}.progressTrack{transition:width .5s;width:calc(var(--progress)*1%)}&>div:first-child{font-size:.5em;line-height:.5em;padding:.75em}}.progressAnimate{background-image:var(--progress-gradient);background-size:1rem 1rem;& :global{animation:bgprogress .75s linear infinite}}}
|
|
@@ -18,7 +18,7 @@ import '../../types/icons.js';
|
|
|
18
18
|
import { DropdownTool } from '../dropdown/DropdownTool.js';
|
|
19
19
|
import classes from './TabPanel.module.css';
|
|
20
20
|
|
|
21
|
-
var _excluded = ["ref", "as", "id", "className", "label", "icon", "iconBg", "iconColor", "rtlFlip", "badge", "disabled", "onClose", "active", "
|
|
21
|
+
var _excluded = ["ref", "as", "id", "className", "label", "icon", "iconBg", "iconColor", "rtlFlip", "badge", "disabled", "onClose", "active", "onClick", "tabFlex", "color", "actions", "tooltip", "activeClassName"];
|
|
22
22
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
23
23
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
24
24
|
var Tab = function Tab(_ref) {
|
|
@@ -35,7 +35,6 @@ var Tab = function Tab(_ref) {
|
|
|
35
35
|
disabled = _ref.disabled,
|
|
36
36
|
onClose = _ref.onClose,
|
|
37
37
|
active = _ref.active,
|
|
38
|
-
minimal = _ref.minimal,
|
|
39
38
|
_onClick = _ref.onClick,
|
|
40
39
|
tabFlex = _ref.tabFlex,
|
|
41
40
|
color = _ref.color,
|
|
@@ -46,6 +45,9 @@ var Tab = function Tab(_ref) {
|
|
|
46
45
|
var badgeProps = useMemo(function () {
|
|
47
46
|
return getBadgeProps(badge);
|
|
48
47
|
}, [badge]);
|
|
48
|
+
var minimal = useMemo(function () {
|
|
49
|
+
return !label;
|
|
50
|
+
}, [label]);
|
|
49
51
|
var tooltipProps = useMemo(function () {
|
|
50
52
|
if (isString(tooltip)) return {
|
|
51
53
|
content: tooltip
|
|
@@ -60,7 +62,7 @@ var Tab = function Tab(_ref) {
|
|
|
60
62
|
disabled: disabled,
|
|
61
63
|
"data-color": color,
|
|
62
64
|
"data-inner-clickable": true,
|
|
63
|
-
className: classNames(classes.tabButton, className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36 min-w-
|
|
65
|
+
className: classNames(classes.tabButton, className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6" : "min-w-18", "flex items-center justify-center px-1 rounded overflow-hidden"),
|
|
64
66
|
onClick: function onClick() {
|
|
65
67
|
return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
|
|
66
68
|
},
|
|
@@ -71,7 +73,7 @@ var Tab = function Tab(_ref) {
|
|
|
71
73
|
bg: iconBg,
|
|
72
74
|
color: iconColor,
|
|
73
75
|
rtlFlip: rtlFlip,
|
|
74
|
-
className: "flex-content"
|
|
76
|
+
className: "flex-content p-2"
|
|
75
77
|
}), !minimal && /*#__PURE__*/jsx("label", {
|
|
76
78
|
className: "flex-initial truncate text-center px-1 py-1",
|
|
77
79
|
children: label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer comp{.tabPanel{--color:theme(colors.primary.500)
|
|
1
|
+
@layer comp{.tabPanel{--color:theme(colors.primary.500);&[data-orientation=top]{grid-template:"tablist" auto "content" 1fr/1fr;.tabHeader{box-shadow:inset 0 -1px 0 theme(borderColor.dimmed)}}&[data-orientation=bottom]{grid-template:"content" 1fr "tablist" auto/1fr;.tabHeader{box-shadow:inset 0 1px 0 theme(borderColor.dimmed);margin-top:1px}}&[data-orientation=start]{grid-template:"tablist content" 1fr/auto 1fr;.tabHeader{box-shadow:inset -1px 0 0 theme(borderColor.dimmed)}}&[data-orientation=end]{grid-template:"content tablist" 1fr/1fr auto;.tabHeader{box-shadow:inset 1px 0 0 theme(borderColor.dimmed)}}}}@layer util{.tabPanel{& .tabList>.tabButton:global(.active){pointer-events:none}&>.tabHeader{grid-area:tablist;&>.tabList>.tabButton{&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&:not(:global(.active)):hover{background-color:theme(colors.tint.100/50%);color:color-mix(in lab,var(--color) 65%,var(--fabric-text))}&:global(.active){--active-color:var(--color);color:color-mix(in lab,var(--color) 65%,var(--fabric-text));font-weight:500}}}&[data-variant=outline]{& .tabList>.tabButton:global(.active){--active-color:theme(backgroundColor.base);--active-border:0 0 0 1px theme(borderColor.base) inset;background-color:theme(backgroundColor.base)}}&[data-variant=solid]{& .tabList>.tabButton:global(.active){background-color:var(--color);color:theme(colors.white)}}&[data-variant=soft]{& .tabList>.tabButton:global(.active){background-color:color-mix(in lab,var(--color) 20%,var(--fabric-bg))}}&[data-orientation=top] .tabList{&>.tabButton:global(.active){box-shadow:0 -2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=bottom] .tabList{&>.tabButton:global(.active){box-shadow:0 2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=start] .tabList{&>.tabButton:global(.active){box-shadow:-2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=end] .tabList{&>.tabButton:global(.active){box-shadow:2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=top] .tabList>.tabButton{border-end-end-radius:0;border-end-start-radius:0;margin-top:2px;margin-inline:1px}&[data-orientation=bottom] .tabList>.tabButton{border-start-end-radius:0;border-start-start-radius:0;margin-bottom:2px;margin-inline:1px}&[data-orientation=start] .tabList>.tabButton{border-end-end-radius:0;border-start-end-radius:0;margin-block:1px;margin-inline-start:2px}&[data-orientation=end] .tabList>.tabButton{border-end-start-radius:0;border-start-start-radius:0;margin-block:1px;margin-inline-end:2px}}}
|
|
@@ -113,7 +113,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
113
113
|
children: /*#__PURE__*/jsxs("dfn", _objectSpread(_objectSpread({
|
|
114
114
|
"data-ref": "tooltip",
|
|
115
115
|
"data-color": color,
|
|
116
|
-
className: classNames(classes.tooltip, "select-none text-sm not-italic flex py-1 px-2 !max-w-
|
|
116
|
+
className: classNames(classes.tooltip, "select-none text-sm not-italic flex py-1 px-2 !max-w-lg rounded shadow-md bg-current"),
|
|
117
117
|
ref: refs.setFloating,
|
|
118
118
|
style: floatingStyles
|
|
119
119
|
}, getFloatingProps()), {}, {
|
|
@@ -42,4 +42,4 @@ export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaP
|
|
|
42
42
|
*/
|
|
43
43
|
onClick?: (id: string) => CallbackReturn;
|
|
44
44
|
}
|
|
45
|
-
export declare const Tab: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ ref, as, id, className, label, icon, iconBg, iconColor, rtlFlip, badge, disabled, onClose, active,
|
|
45
|
+
export declare const Tab: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ ref, as, id, className, label, icon, iconBg, iconColor, rtlFlip, badge, disabled, onClose, active, onClick, tabFlex, color, actions, tooltip, activeClassName, ...aria }: TabProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-fabric/core",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.32",
|
|
4
4
|
"description": "RUF: Core package",
|
|
5
5
|
"author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@floating-ui/react": "^0.26.24",
|
|
39
|
-
"@react-fabric/utilities": "^1.0.0-beta.
|
|
39
|
+
"@react-fabric/utilities": "^1.0.0-beta.32",
|
|
40
40
|
"@tailwindcss/container-queries": "^0.1.1",
|
|
41
41
|
"@tailwindcss/forms": "^0.5.7",
|
|
42
42
|
"@tailwindcss/typography": "^0.5.13",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"node": ">=18.12.0",
|
|
57
57
|
"npm": ">=8.19.0"
|
|
58
58
|
},
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "e8ba7088116f5ae253ed989854d6fdaef2ad7507"
|
|
60
60
|
}
|
|
@@ -108,8 +108,6 @@ export const Tab = <Tag extends React.ElementType = "button">({
|
|
|
108
108
|
onClose,
|
|
109
109
|
// @ts-expect-error ignore
|
|
110
110
|
active,
|
|
111
|
-
// @ts-expect-error ignore
|
|
112
|
-
minimal,
|
|
113
111
|
onClick,
|
|
114
112
|
tabFlex,
|
|
115
113
|
color,
|
|
@@ -122,6 +120,8 @@ export const Tab = <Tag extends React.ElementType = "button">({
|
|
|
122
120
|
return getBadgeProps(badge);
|
|
123
121
|
}, [badge]);
|
|
124
122
|
|
|
123
|
+
const minimal = useMemo(() => !label, [label]);
|
|
124
|
+
|
|
125
125
|
const tooltipProps = useMemo(() => {
|
|
126
126
|
if (isString(tooltip)) return { content: tooltip };
|
|
127
127
|
|
|
@@ -143,7 +143,8 @@ export const Tab = <Tag extends React.ElementType = "button">({
|
|
|
143
143
|
active && "active pointer-events-none",
|
|
144
144
|
active && activeClassName,
|
|
145
145
|
disabled && "text-tint-500 pointer-events-none",
|
|
146
|
-
tabFlex ? "flex-1" : "flex-initial max-w-36
|
|
146
|
+
tabFlex ? "flex-1" : "flex-initial max-w-36",
|
|
147
|
+
minimal ? "min-w-6" : "min-w-18",
|
|
147
148
|
"flex items-center justify-center px-1 rounded overflow-hidden",
|
|
148
149
|
)}
|
|
149
150
|
onClick={() => !active && onClick?.(id)}
|
|
@@ -156,7 +157,7 @@ export const Tab = <Tag extends React.ElementType = "button">({
|
|
|
156
157
|
bg={iconBg}
|
|
157
158
|
color={iconColor}
|
|
158
159
|
rtlFlip={rtlFlip}
|
|
159
|
-
className="flex-content"
|
|
160
|
+
className="flex-content p-2"
|
|
160
161
|
/>
|
|
161
162
|
)}
|
|
162
163
|
{!minimal && (
|
|
@@ -25,6 +25,47 @@
|
|
|
25
25
|
.tabPanel {
|
|
26
26
|
--color: theme(colors.primary.500);
|
|
27
27
|
|
|
28
|
+
&[data-orientation="top"] {
|
|
29
|
+
grid-template: "tablist" auto "content" 1fr / 1fr;
|
|
30
|
+
|
|
31
|
+
.tabHeader {
|
|
32
|
+
box-shadow: 0 -1px 0 theme(borderColor.dimmed) inset;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&[data-orientation="bottom"] {
|
|
37
|
+
grid-template: "content" 1fr "tablist" auto / 1fr;
|
|
38
|
+
|
|
39
|
+
.tabHeader {
|
|
40
|
+
margin-top: 1px;
|
|
41
|
+
box-shadow: 0 1px 0 theme(borderColor.dimmed) inset;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&[data-orientation="start"] {
|
|
46
|
+
grid-template: "tablist content" 1fr / auto 1fr;
|
|
47
|
+
|
|
48
|
+
.tabHeader {
|
|
49
|
+
box-shadow: -1px 0 0 theme(borderColor.dimmed) inset;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&[data-orientation="end"] {
|
|
54
|
+
grid-template: "content tablist" 1fr / 1fr auto;
|
|
55
|
+
|
|
56
|
+
.tabHeader {
|
|
57
|
+
box-shadow: 1px 0 0 theme(borderColor.dimmed) inset;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@layer util {
|
|
64
|
+
.tabPanel {
|
|
65
|
+
& .tabList > .tabButton:global(.active) {
|
|
66
|
+
pointer-events: none;
|
|
67
|
+
}
|
|
68
|
+
|
|
28
69
|
& > .tabHeader {
|
|
29
70
|
grid-area: tablist;
|
|
30
71
|
|
|
@@ -85,47 +126,6 @@
|
|
|
85
126
|
}
|
|
86
127
|
}
|
|
87
128
|
|
|
88
|
-
&[data-orientation="top"] {
|
|
89
|
-
grid-template: "tablist" auto "content" 1fr / 1fr;
|
|
90
|
-
|
|
91
|
-
.tabHeader {
|
|
92
|
-
box-shadow: 0 -1px 0 theme(borderColor.dimmed) inset;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
&[data-orientation="bottom"] {
|
|
97
|
-
grid-template: "content" 1fr "tablist" auto / 1fr;
|
|
98
|
-
|
|
99
|
-
.tabHeader {
|
|
100
|
-
margin-top: 1px;
|
|
101
|
-
box-shadow: 0 1px 0 theme(borderColor.dimmed) inset;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
&[data-orientation="start"] {
|
|
106
|
-
grid-template: "tablist content" 1fr / auto 1fr;
|
|
107
|
-
|
|
108
|
-
.tabHeader {
|
|
109
|
-
box-shadow: -1px 0 0 theme(borderColor.dimmed) inset;
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
&[data-orientation="end"] {
|
|
114
|
-
grid-template: "content tablist" 1fr / 1fr auto;
|
|
115
|
-
|
|
116
|
-
.tabHeader {
|
|
117
|
-
box-shadow: 1px 0 0 theme(borderColor.dimmed) inset;
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
@layer util {
|
|
124
|
-
.tabPanel {
|
|
125
|
-
& .tabList > .tabButton:global(.active) {
|
|
126
|
-
pointer-events: none;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
129
|
&[data-orientation="top"] .tabList {
|
|
130
130
|
& > .tabButton:global(.active) {
|
|
131
131
|
box-shadow:
|
|
@@ -176,7 +176,7 @@ export const Tooltip = ({
|
|
|
176
176
|
data-color={color}
|
|
177
177
|
className={classNames(
|
|
178
178
|
classes.tooltip,
|
|
179
|
-
"select-none text-sm not-italic flex py-1 px-2 !max-w-
|
|
179
|
+
"select-none text-sm not-italic flex py-1 px-2 !max-w-lg rounded shadow-md bg-current",
|
|
180
180
|
)}
|
|
181
181
|
ref={refs.setFloating}
|
|
182
182
|
style={floatingStyles}
|