@react-fabric/core 1.0.0-beta.31 → 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 +2 -2
- 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 +2 -2
- package/dist/esm/overlays/tooltip/Tooltip.js +1 -1
- package/package.json +3 -3
- package/src/components/progress/Progress.module.css +1 -1
- package/src/components/tabpanel/Tab.tsx +2 -2
- 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}}}
|
|
@@ -62,7 +62,7 @@ var Tab = function Tab(_ref) {
|
|
|
62
62
|
disabled: disabled,
|
|
63
63
|
"data-color": color,
|
|
64
64
|
"data-inner-clickable": true,
|
|
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
|
|
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"),
|
|
66
66
|
onClick: function onClick() {
|
|
67
67
|
return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
|
|
68
68
|
},
|
|
@@ -73,7 +73,7 @@ var Tab = function Tab(_ref) {
|
|
|
73
73
|
bg: iconBg,
|
|
74
74
|
color: iconColor,
|
|
75
75
|
rtlFlip: rtlFlip,
|
|
76
|
-
className: "flex-content"
|
|
76
|
+
className: "flex-content p-2"
|
|
77
77
|
}), !minimal && /*#__PURE__*/jsxRuntime.jsx("label", {
|
|
78
78
|
className: "flex-initial truncate text-center px-1 py-1",
|
|
79
79
|
children: label
|
|
@@ -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}}}
|
|
@@ -62,7 +62,7 @@ var Tab = function Tab(_ref) {
|
|
|
62
62
|
disabled: disabled,
|
|
63
63
|
"data-color": color,
|
|
64
64
|
"data-inner-clickable": true,
|
|
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
|
|
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"),
|
|
66
66
|
onClick: function onClick() {
|
|
67
67
|
return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
|
|
68
68
|
},
|
|
@@ -73,7 +73,7 @@ var Tab = function Tab(_ref) {
|
|
|
73
73
|
bg: iconBg,
|
|
74
74
|
color: iconColor,
|
|
75
75
|
rtlFlip: rtlFlip,
|
|
76
|
-
className: "flex-content"
|
|
76
|
+
className: "flex-content p-2"
|
|
77
77
|
}), !minimal && /*#__PURE__*/jsx("label", {
|
|
78
78
|
className: "flex-initial truncate text-center px-1 py-1",
|
|
79
79
|
children: label
|
|
@@ -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()), {}, {
|
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
|
}
|
|
@@ -144,7 +144,7 @@ export const Tab = <Tag extends React.ElementType = "button">({
|
|
|
144
144
|
active && activeClassName,
|
|
145
145
|
disabled && "text-tint-500 pointer-events-none",
|
|
146
146
|
tabFlex ? "flex-1" : "flex-initial max-w-36",
|
|
147
|
-
minimal ? "min-w-6
|
|
147
|
+
minimal ? "min-w-6" : "min-w-18",
|
|
148
148
|
"flex items-center justify-center px-1 rounded overflow-hidden",
|
|
149
149
|
)}
|
|
150
150
|
onClick={() => !active && onClick?.(id)}
|
|
@@ -157,7 +157,7 @@ export const Tab = <Tag extends React.ElementType = "button">({
|
|
|
157
157
|
bg={iconBg}
|
|
158
158
|
color={iconColor}
|
|
159
159
|
rtlFlip={rtlFlip}
|
|
160
|
-
className="flex-content"
|
|
160
|
+
className="flex-content p-2"
|
|
161
161
|
/>
|
|
162
162
|
)}
|
|
163
163
|
{!minimal && (
|
|
@@ -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}
|