@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.
@@ -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:progress .75s linear infinite}}}
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 px-2 py-1" : "min-w-18", "flex items-center justify-center px-1 rounded overflow-hidden"),
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-64 rounded shadow-md bg-current"),
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:progress .75s linear infinite}}}
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 px-2 py-1" : "min-w-18", "flex items-center justify-center px-1 rounded overflow-hidden"),
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-64 rounded shadow-md bg-current"),
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.31",
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.31",
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": "de71c6875264d385666d0fa441785b9884951561"
59
+ "gitHead": "e8ba7088116f5ae253ed989854d6fdaef2ad7507"
60
60
  }
@@ -64,7 +64,7 @@
64
64
  background-size: 1rem 1rem;
65
65
 
66
66
  & :global {
67
- animation: progress 750ms linear infinite;
67
+ animation: bgprogress 750ms linear infinite;
68
68
  }
69
69
  }
70
70
  }
@@ -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 px-2 py-1" : "min-w-18",
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-64 rounded shadow-md bg-current",
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}