@react-fabric/core 1.0.0-beta.37 → 1.0.0-beta.39

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.
Files changed (17) hide show
  1. package/css/components/_button.css +2 -2
  2. package/css/components/_media.css +3 -3
  3. package/css/core/_content.css +0 -8
  4. package/css/core/_headfoot.css +0 -8
  5. package/css/core/_page.css +0 -8
  6. package/css/theme/_utilities.css +24 -10
  7. package/dist/cjs/components/media/Media.js +2 -2
  8. package/dist/cjs/components/menu/MenuItem.js +1 -1
  9. package/dist/cjs/core/responsive/Responsive.js +1 -1
  10. package/dist/esm/components/media/Media.js +2 -2
  11. package/dist/esm/components/menu/MenuItem.js +1 -1
  12. package/dist/esm/core/responsive/Responsive.js +1 -1
  13. package/dist/types/core/responsive/Responsive.d.ts +1 -1
  14. package/package.json +3 -14
  15. package/src/components/media/Media.tsx +2 -2
  16. package/src/components/menu/MenuItem.tsx +1 -1
  17. package/src/core/responsive/Responsive.tsx +4 -3
package/css/components/_button.css CHANGED
@@ -176,8 +176,8 @@
176
176
  --bg-active: color-mix(in lab, var(--color) 70%, var(--color-black));
177
177
 
178
178
  & .hotkey-label {
179
- color: var(--color-white/70%);
180
- background-color: var(--bg-color-dark/30%);
179
+ color: --alpha(var(--color-white) / 70%);
180
+ background-color: --alpha(var(--bg-color-dark) / 30%);
181
181
  }
182
182
  }
183
183
 
package/css/components/_media.css CHANGED
@@ -67,17 +67,17 @@
67
67
 
68
68
  & > :first-child {
69
69
  color: #fff;
70
- background-color: var(--color-black/50%);
70
+ background-color: --alpha(var(--color-black) / 50%);
71
71
 
72
72
  &:hover {
73
73
  color: var(--color-primary-600);
74
- background-color: var(--color-black/80%);
74
+ background-color: --alpha(var(--color-black) / 80%);
75
75
  }
76
76
  }
77
77
  }
78
78
 
79
79
  & .fabric-mediaControlAction > :first-child {
80
- background-color: var(--color-black/70%);
80
+ background-color: --alpha(var(--color-black) / 70%);
81
81
  }
82
82
 
83
83
  & .fabric-mediaControlPlaceholder {
package/css/core/_content.css CHANGED
@@ -34,11 +34,3 @@
34
34
  background-color: var(--fabric-content);
35
35
  }
36
36
  }
37
-
38
- @layer utilities {
39
- .fabric-content {
40
- width: unset;
41
- height: unset;
42
- margin: unset;
43
- }
44
- }
package/css/core/_headfoot.css CHANGED
@@ -30,11 +30,3 @@
30
30
  }
31
31
  }
32
32
  }
33
-
34
- @layer utilities {
35
- .fabric-headfoot {
36
- width: unset;
37
- height: unset;
38
- margin: unset;
39
- }
40
- }
package/css/core/_page.css CHANGED
@@ -40,11 +40,3 @@
40
40
  }
41
41
  }
42
42
  }
43
-
44
- @layer utilities {
45
- .fabric-pageTitle {
46
- width: unset;
47
- height: unset;
48
- margin: unset;
49
- }
50
- }
package/css/theme/_utilities.css CHANGED
@@ -85,10 +85,6 @@
85
85
  flex: 1 1 100%;
86
86
  }
87
87
 
88
- @utility flex-content {
89
- flex: 0 0 auto;
90
- }
91
-
92
88
  @utility rounded {
93
89
  border-radius: var(--rounding);
94
90
  }
@@ -162,20 +158,36 @@
162
158
  }
163
159
 
164
160
  @utility bg-odd {
165
- background-color: color-mix(in oklab, var(--fabric-bg) 99%, var(--color-tint));
161
+ background-color: color-mix(
162
+ in oklab,
163
+ var(--fabric-bg) 99%,
164
+ var(--color-tint)
165
+ );
166
166
  }
167
167
 
168
168
  @utility bg-even {
169
- background-color: color-mix(in oklab, var(--fabric-bg) 92%, var(--color-tint));
169
+ background-color: color-mix(
170
+ in oklab,
171
+ var(--fabric-bg) 92%,
172
+ var(--color-tint)
173
+ );
170
174
  }
171
175
 
172
176
  @utility bg-alternate {
173
177
  & > :nth-child(even) {
174
- background-color: color-mix(in oklab, var(--fabric-bg) 92%, var(--color-tint));
178
+ background-color: color-mix(
179
+ in oklab,
180
+ var(--fabric-bg) 92%,
181
+ var(--color-tint)
182
+ );
175
183
  }
176
184
 
177
185
  & > :nth-child(odd) {
178
- background-color: color-mix(in oklab, var(--fabric-bg) 99%, var(--color-tint));
186
+ background-color: color-mix(
187
+ in oklab,
188
+ var(--fabric-bg) 99%,
189
+ var(--color-tint)
190
+ );
179
191
  }
180
192
  }
181
193
 
@@ -336,9 +348,11 @@
336
348
  }
337
349
 
338
350
  @utility gap-* {
339
- --gutter: calc(var(--spacing) * --value(number));
351
+ &:where(.fabric-row) {
352
+ --gutter: calc(var(--spacing) * --value(number));
340
353
 
341
- gap: calc(var(--spacing) * --value(number));
354
+ gap: 0 !important;
355
+ }
342
356
  }
343
357
 
344
358
  @utility span-* {
package/dist/cjs/components/media/Media.js CHANGED
@@ -39,7 +39,7 @@ var Image = function Image(_ref) {
39
39
  }, [src]);
40
40
  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
41
41
  "data-ref": "image",
42
- className: classNames("fabric-mediaContainer", "relative overflow-hidden bg-gray inline-block", reel && "fabric-mediaReel", className),
42
+ className: classNames("fabric-mediaContainer", "relative overflow-hidden inline-block", reel && "fabric-mediaReel", className),
43
43
  "data-colorset": colorSet
44
44
  }, aria), {}, {
45
45
  children: [loadIndicator, /*#__PURE__*/jsxRuntime.jsx("img", {
@@ -77,7 +77,7 @@ var Video = function Video(_ref2) {
77
77
  setVolume = _useState6[1];
78
78
  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
79
79
  "data-ref": "video",
80
- className: classNames("fabric-mediaContainer", "relative overflow-hidden bg-gray inline-block", reel && "fabric-mediaReel", className),
80
+ className: classNames("fabric-mediaContainer", "relative overflow-hidden inline-block", reel && "fabric-mediaReel", className),
81
81
  onMouseEnter: function onMouseEnter() {
82
82
  var _videoRef$current;
83
83
  playOnHover && ((_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.play());
package/dist/cjs/components/menu/MenuItem.js CHANGED
@@ -109,7 +109,7 @@ var MenuItem = function MenuItem(_ref) {
109
109
  ref: utilities.mergeRefs(ref, elRef),
110
110
  "data-dropdown-dismiss": true,
111
111
  "data-color": color,
112
- className: classNames("fabric-menuItem", className, active && "active", minimal && "minimal", disabled && "disabled", "rounded-capped relative max-w-[50vw] my-0.5"),
112
+ className: classNames("fabric-menuItem cursor-pointer", className, active && "active", minimal && "minimal", disabled && "disabled", "rounded-capped relative max-w-[50vw] my-0.5"),
113
113
  "data-active": active,
114
114
  "data-open": childOpen,
115
115
  disabled: disabled,
package/dist/cjs/core/responsive/Responsive.js CHANGED
@@ -52,7 +52,7 @@ var Col = function Col(_ref3) {
52
52
  stretchContent = _ref3.stretchContent,
53
53
  aria = _objectWithoutProperties(_ref3, _excluded3);
54
54
  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
55
- className: classNames("fabric-col", className, stretchContent && "stretchContent", flex === "fill" && "flex-1", flex === "full" && "flex-full", flex === "auto" && "flex-initial", flex === "content" && "flex-content", align && "self-".concat(align))
55
+ className: classNames("fabric-col", className, stretchContent && "stretchContent", flex === "fill" && "flex-1", flex === "full" && "flex-full", flex === "auto" && "flex-auto", flex === "initial" && "flex-initial", flex === "content" && "flex-none", align && "self-".concat(align))
56
56
  }, aria), {}, {
57
57
  children: children
58
58
  }));
package/dist/esm/components/media/Media.js CHANGED
@@ -39,7 +39,7 @@ var Image = function Image(_ref) {
39
39
  }, [src]);
40
40
  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
41
41
  "data-ref": "image",
42
- className: classNames("fabric-mediaContainer", "relative overflow-hidden bg-gray inline-block", reel && "fabric-mediaReel", className),
42
+ className: classNames("fabric-mediaContainer", "relative overflow-hidden inline-block", reel && "fabric-mediaReel", className),
43
43
  "data-colorset": colorSet
44
44
  }, aria), {}, {
45
45
  children: [loadIndicator, /*#__PURE__*/jsx("img", {
@@ -77,7 +77,7 @@ var Video = function Video(_ref2) {
77
77
  setVolume = _useState6[1];
78
78
  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
79
79
  "data-ref": "video",
80
- className: classNames("fabric-mediaContainer", "relative overflow-hidden bg-gray inline-block", reel && "fabric-mediaReel", className),
80
+ className: classNames("fabric-mediaContainer", "relative overflow-hidden inline-block", reel && "fabric-mediaReel", className),
81
81
  onMouseEnter: function onMouseEnter() {
82
82
  var _videoRef$current;
83
83
  playOnHover && ((_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.play());
package/dist/esm/components/menu/MenuItem.js CHANGED
@@ -109,7 +109,7 @@ var MenuItem = function MenuItem(_ref) {
109
109
  ref: mergeRefs(ref, elRef),
110
110
  "data-dropdown-dismiss": true,
111
111
  "data-color": color,
112
- className: classNames("fabric-menuItem", className, active && "active", minimal && "minimal", disabled && "disabled", "rounded-capped relative max-w-[50vw] my-0.5"),
112
+ className: classNames("fabric-menuItem cursor-pointer", className, active && "active", minimal && "minimal", disabled && "disabled", "rounded-capped relative max-w-[50vw] my-0.5"),
113
113
  "data-active": active,
114
114
  "data-open": childOpen,
115
115
  disabled: disabled,
package/dist/esm/core/responsive/Responsive.js CHANGED
@@ -52,7 +52,7 @@ var Col = function Col(_ref3) {
52
52
  stretchContent = _ref3.stretchContent,
53
53
  aria = _objectWithoutProperties(_ref3, _excluded3);
54
54
  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
55
- className: classNames("fabric-col", className, stretchContent && "stretchContent", flex === "fill" && "flex-1", flex === "full" && "flex-full", flex === "auto" && "flex-initial", flex === "content" && "flex-content", align && "self-".concat(align))
55
+ className: classNames("fabric-col", className, stretchContent && "stretchContent", flex === "fill" && "flex-1", flex === "full" && "flex-full", flex === "auto" && "flex-auto", flex === "initial" && "flex-initial", flex === "content" && "flex-none", align && "self-".concat(align))
56
56
  }, aria), {}, {
57
57
  children: children
58
58
  }));
package/dist/types/core/responsive/Responsive.d.ts CHANGED
@@ -39,7 +39,7 @@ export interface ColProps extends AriaProps, CssProp, TestProps, Partial<Childre
39
39
  /**
40
40
  * column flex
41
41
  */
42
- flex?: "auto" | "fill" | "full" | "content";
42
+ flex?: "auto" | "fill" | "full" | "initial" | "content";
43
43
  /**
44
44
  * stretch inner content
45
45
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-fabric/core",
3
- "version": "1.0.0-beta.37",
3
+ "version": "1.0.0-beta.39",
4
4
  "description": "RUF: Core package",
5
5
  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
6
6
  "license": "MIT",
@@ -19,17 +19,6 @@
19
19
  "src",
20
20
  "dist"
21
21
  ],
22
- "exports": {
23
- ".": {
24
- "default": "./dist/esm/index.js",
25
- "import": "./dist/esm/index.js",
26
- "require": "./dist/cjs/index.js",
27
- "types": "./dist/types/index.d.ts"
28
- },
29
- "./styles": "./css/styles.css",
30
- "./flags.rect": "./css/flags.rect.css",
31
- "./flags.wavy": "./css/flags.wavy.css"
32
- },
33
22
  "publishConfig": {
34
23
  "access": "public",
35
24
  "registry": "https://registry.npmjs.org/"
@@ -47,7 +36,7 @@
47
36
  },
48
37
  "dependencies": {
49
38
  "@floating-ui/react": "^0.26.24",
50
- "@react-fabric/utilities": "^1.0.0-beta.37",
39
+ "@react-fabric/utilities": "^1.0.0-beta.39",
51
40
  "@tailwindcss/postcss": "~4.0.14",
52
41
  "boring-avatars": "^1.10.2",
53
42
  "classnames": "^2.5.1",
@@ -65,5 +54,5 @@
65
54
  "node": ">=18.12.0",
66
55
  "npm": ">=8.19.0"
67
56
  },
68
- "gitHead": "9b737229bf24ebe986540ee2c4b8904ebc4a5a9b"
57
+ "gitHead": "e528b7401ec10034422e0b0c3c6c118f3b24452c"
69
58
  }
package/src/components/media/Media.tsx CHANGED
@@ -97,7 +97,7 @@ export const Image = ({
97
97
  data-ref="image"
98
98
  className={classNames(
99
99
  "fabric-mediaContainer",
100
- "relative overflow-hidden bg-gray inline-block",
100
+ "relative overflow-hidden inline-block",
101
101
  reel && "fabric-mediaReel",
102
102
  className,
103
103
  )}
@@ -144,7 +144,7 @@ export const Video = ({
144
144
  data-ref="video"
145
145
  className={classNames(
146
146
  "fabric-mediaContainer",
147
- "relative overflow-hidden bg-gray inline-block",
147
+ "relative overflow-hidden inline-block",
148
148
  reel && "fabric-mediaReel",
149
149
  className,
150
150
  )}
package/src/components/menu/MenuItem.tsx CHANGED
@@ -145,7 +145,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
145
145
  data-dropdown-dismiss
146
146
  data-color={color}
147
147
  className={classNames(
148
- "fabric-menuItem",
148
+ "fabric-menuItem cursor-pointer",
149
149
  className,
150
150
  active && "active",
151
151
  minimal && "minimal",
package/src/core/responsive/Responsive.tsx CHANGED
@@ -80,7 +80,7 @@ export interface ColProps
80
80
  /**
81
81
  * column flex
82
82
  */
83
- flex?: "auto" | "fill" | "full" | "content";
83
+ flex?: "auto" | "fill" | "full" | "initial" | "content";
84
84
  /**
85
85
  * stretch inner content
86
86
  */
@@ -160,8 +160,9 @@ export const Col = ({
160
160
  stretchContent && "stretchContent",
161
161
  flex === "fill" && "flex-1",
162
162
  flex === "full" && "flex-full",
163
- flex === "auto" && "flex-initial",
164
- flex === "content" && "flex-content",
163
+ flex === "auto" && "flex-auto",
164
+ flex === "initial" && "flex-initial",
165
+ flex === "content" && "flex-none",
165
166
  align && `self-${align}`,
166
167
  )}
167
168
  {...aria}