@react-fabric/data 1.0.0-beta.35 → 1.0.0-beta.37

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.
@@ -21,14 +21,9 @@
21
21
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
22
22
  */
23
23
 
24
- @layer comp {
25
- .histogram {
26
- .histoLabel {
27
- --tw-gradient-from: var(--color) var(--tw-gradient-from-position);
28
- --tw-gradient-to: color-mix(in lab, var(--color) 20%, var(--fabric-bg))
29
- var(--tw-gradient-to-position);
30
- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
31
-
24
+ @layer components {
25
+ .fabric-histogram {
26
+ .fabric-histoLabel {
32
27
  background-color: color(from var(--color) srgb r g b / 5%);
33
28
 
34
29
  &:hover {
@@ -36,21 +31,29 @@
36
31
  }
37
32
 
38
33
  &[data-disabled="true"] {
39
- --color: theme(colors.tint.300);
34
+ --color: var(--color-tint-300);
40
35
 
41
- color: theme(colors.tint.600);
36
+ color: var(--color-tint-600);
42
37
  }
43
38
  }
44
39
 
45
- .histoBar {
40
+ .fabric-histoBar {
41
+ --tw-gradient-stops: var(
42
+ --tw-gradient-via-stops,
43
+ var(--tw-gradient-position)
44
+ ),
45
+ var(--color) var(--tw-gradient-from-position),
46
+ color-mix(in lab, var(--color) 20%, var(--fabric-bg))
47
+ var(--tw-gradient-to-position);
48
+
46
49
  box-shadow: -2px 0 0 var(--color) inset;
47
50
 
48
- :global([dir="rtl"]) & {
51
+ @variant rtl {
49
52
  box-shadow: 2px 0 0 var(--color) inset;
50
53
  }
51
54
  }
52
55
 
53
- .histoBadge {
56
+ .fabric-histoBadge {
54
57
  background-color: color(from var(--color) srgb r g b / 15%);
55
58
  }
56
59
  }
package/css/styles.css ADDED
@@ -0,0 +1,24 @@
1
+ /*
2
+ * React Fabric
3
+ * @version: 1.0.0
4
+ *
5
+ *
6
+ * The MIT License (MIT)
7
+ * Copyright (c) 2025 Adarsh Pastakia
8
+ *
9
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
10
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
11
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
12
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
13
+ * subject to the following conditions:
14
+ *
15
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
16
+ * portions of the Software.
17
+ *
18
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
19
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
20
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
21
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
22
+ */
23
+
24
+ @import "./_histogram.css";
@@ -8,7 +8,6 @@ var utilities = require('@react-fabric/utilities');
8
8
  var classNames = require('classnames');
9
9
  var react = require('react');
10
10
  var reactI18next = require('react-i18next');
11
- var Histogram_module = require('./Histogram.module.css');
12
11
  var jsxRuntime = require('react/jsx-runtime');
13
12
 
14
13
  var _excluded = ["items", "total", "color", "sortBy", "emptyTitle", "emptyMessage", "onClick"];
@@ -20,7 +19,7 @@ var Histogram = function Histogram(_ref) {
20
19
  items = _ref$items === void 0 ? [] : _ref$items,
21
20
  total = _ref.total,
22
21
  _ref$color = _ref.color,
23
- color = _ref$color === void 0 ? "primary" : _ref$color,
22
+ color = _ref$color === void 0 ? "primary-500" : _ref$color,
24
23
  _ref$sortBy = _ref.sortBy,
25
24
  sortBy = _ref$sortBy === void 0 ? "count" : _ref$sortBy,
26
25
  emptyTitle = _ref.emptyTitle,
@@ -39,10 +38,10 @@ var Histogram = function Histogram(_ref) {
39
38
  return items.sort(utilities.compareValues(sortBy === "label" ? "asc" : "desc", sortBy));
40
39
  }, [items, sortBy]);
41
40
  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
42
- className: Histogram_module.histogram
41
+ className: "fabric-histogram from-0% to-100%"
43
42
  }, aria), {}, {
44
43
  style: {
45
- "--color": "var(--".concat(color, ")")
44
+ "--color": utilities.isColor(color) ? color : "var(--color-".concat(color, ")")
46
45
  },
47
46
  children: [sorted.length === 0 && /*#__PURE__*/jsxRuntime.jsx(core.EmptyContent, {
48
47
  icon: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
@@ -56,13 +55,13 @@ var Histogram = function Histogram(_ref) {
56
55
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
57
56
  role: "none",
58
57
  "data-disabled": item.count === 0 || item.disabled,
59
- className: classNames("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px", Histogram_module.histoLabel, (((_item$total = item.total) !== null && _item$total !== void 0 ? _item$total : item.count) === 0 || item.disabled) && "pointer-events-none"),
58
+ className: classNames("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px", "fabric-histoLabel", (((_item$total = item.total) !== null && _item$total !== void 0 ? _item$total : item.count) === 0 || item.disabled) && "pointer-events-none"),
60
59
  "data-testid": item.id,
61
60
  onClick: function onClick(e) {
62
61
  return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id), e.stopPropagation()];
63
62
  },
64
63
  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
65
- className: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l from-0% to-100%", Histogram_module.histoBar),
64
+ className: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l", "fabric-histoBar"),
66
65
  style: {
67
66
  width: "".concat(Math.min(item.count / maxTotal, 1) * 100, "%")
68
67
  }
@@ -89,7 +88,7 @@ var Histogram = function Histogram(_ref) {
89
88
  }, "positive")],
90
89
  children: item.label
91
90
  }), /*#__PURE__*/jsxRuntime.jsx("span", {
92
- className: classNames("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none", Histogram_module.histoBadge),
91
+ className: classNames("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none", "fabric-histoBadge"),
93
92
  children: utilities.Format.number(item.count)
94
93
  })]
95
94
  }, item.id);
@@ -125,7 +125,7 @@ var Table = function Table(_ref) {
125
125
  ref: scrollerRef,
126
126
  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
127
127
  "data-ref": "tableHeader",
128
- className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2",
128
+ className: "bg-base font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-5",
129
129
  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
130
130
  className: wrapperStart,
131
131
  children: [canExpand && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -176,7 +176,7 @@ var Table = function Table(_ref) {
176
176
  return "__GROUP__" in data ? /*#__PURE__*/jsxRuntime.jsxs("div", {
177
177
  ref: measureElement,
178
178
  "data-index": index,
179
- className: classNames("px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1", isActiveSticky(index) && "sticky top-8 z-30"),
179
+ className: classNames("px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1 z-3", isActiveSticky(index) && "sticky top-8"),
180
180
  role: "none",
181
181
  onClick: function onClick() {
182
182
  return toggleGroupExpand(data.key);
@@ -4,11 +4,10 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
4
4
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
5
5
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
6
6
  import { EmptyContent, Icon, ActionLabel, Button, CoreIcons } from '@react-fabric/core';
7
- import { compareValues, Format } from '@react-fabric/utilities';
7
+ import { compareValues, isColor, Format } from '@react-fabric/utilities';
8
8
  import classNames from 'classnames';
9
9
  import { useMemo } from 'react';
10
10
  import { useTranslation } from 'react-i18next';
11
- import classes from './Histogram.module.css';
12
11
  import { jsxs, jsx } from 'react/jsx-runtime';
13
12
 
14
13
  var _excluded = ["items", "total", "color", "sortBy", "emptyTitle", "emptyMessage", "onClick"];
@@ -20,7 +19,7 @@ var Histogram = function Histogram(_ref) {
20
19
  items = _ref$items === void 0 ? [] : _ref$items,
21
20
  total = _ref.total,
22
21
  _ref$color = _ref.color,
23
- color = _ref$color === void 0 ? "primary" : _ref$color,
22
+ color = _ref$color === void 0 ? "primary-500" : _ref$color,
24
23
  _ref$sortBy = _ref.sortBy,
25
24
  sortBy = _ref$sortBy === void 0 ? "count" : _ref$sortBy,
26
25
  emptyTitle = _ref.emptyTitle,
@@ -39,10 +38,10 @@ var Histogram = function Histogram(_ref) {
39
38
  return items.sort(compareValues(sortBy === "label" ? "asc" : "desc", sortBy));
40
39
  }, [items, sortBy]);
41
40
  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
42
- className: classes.histogram
41
+ className: "fabric-histogram from-0% to-100%"
43
42
  }, aria), {}, {
44
43
  style: {
45
- "--color": "var(--".concat(color, ")")
44
+ "--color": isColor(color) ? color : "var(--color-".concat(color, ")")
46
45
  },
47
46
  children: [sorted.length === 0 && /*#__PURE__*/jsx(EmptyContent, {
48
47
  icon: /*#__PURE__*/jsx(Icon, {
@@ -56,13 +55,13 @@ var Histogram = function Histogram(_ref) {
56
55
  return /*#__PURE__*/jsxs("div", {
57
56
  role: "none",
58
57
  "data-disabled": item.count === 0 || item.disabled,
59
- className: classNames("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px", classes.histoLabel, (((_item$total = item.total) !== null && _item$total !== void 0 ? _item$total : item.count) === 0 || item.disabled) && "pointer-events-none"),
58
+ className: classNames("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px", "fabric-histoLabel", (((_item$total = item.total) !== null && _item$total !== void 0 ? _item$total : item.count) === 0 || item.disabled) && "pointer-events-none"),
60
59
  "data-testid": item.id,
61
60
  onClick: function onClick(e) {
62
61
  return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id), e.stopPropagation()];
63
62
  },
64
63
  children: [/*#__PURE__*/jsx("div", {
65
- className: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l from-0% to-100%", classes.histoBar),
64
+ className: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l", "fabric-histoBar"),
66
65
  style: {
67
66
  width: "".concat(Math.min(item.count / maxTotal, 1) * 100, "%")
68
67
  }
@@ -89,7 +88,7 @@ var Histogram = function Histogram(_ref) {
89
88
  }, "positive")],
90
89
  children: item.label
91
90
  }), /*#__PURE__*/jsx("span", {
92
- className: classNames("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none", classes.histoBadge),
91
+ className: classNames("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none", "fabric-histoBadge"),
93
92
  children: Format.number(item.count)
94
93
  })]
95
94
  }, item.id);
@@ -125,7 +125,7 @@ var Table = function Table(_ref) {
125
125
  ref: scrollerRef,
126
126
  children: [/*#__PURE__*/jsxs("div", {
127
127
  "data-ref": "tableHeader",
128
- className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2",
128
+ className: "bg-base font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-5",
129
129
  children: [/*#__PURE__*/jsxs("div", {
130
130
  className: wrapperStart,
131
131
  children: [canExpand && /*#__PURE__*/jsx("div", {
@@ -176,7 +176,7 @@ var Table = function Table(_ref) {
176
176
  return "__GROUP__" in data ? /*#__PURE__*/jsxs("div", {
177
177
  ref: measureElement,
178
178
  "data-index": index,
179
- className: classNames("px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1", isActiveSticky(index) && "sticky top-8 z-30"),
179
+ className: classNames("px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1 z-3", isActiveSticky(index) && "sticky top-8"),
180
180
  role: "none",
181
181
  onClick: function onClick() {
182
182
  return toggleGroupExpand(data.key);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-fabric/data",
3
- "version": "1.0.0-beta.35",
3
+ "version": "1.0.0-beta.37",
4
4
  "description": "RUF: Data package",
5
5
  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
6
6
  "license": "MIT",
@@ -11,12 +11,23 @@
11
11
  "types": "dist/types/index.d.ts",
12
12
  "directories": {
13
13
  "src": "src",
14
+ "styles": "css",
14
15
  "test": "tests"
15
16
  },
16
17
  "files": [
18
+ "css",
17
19
  "src",
18
20
  "dist"
19
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
+ },
20
31
  "publishConfig": {
21
32
  "access": "public",
22
33
  "registry": "https://registry.npmjs.org/"
@@ -33,10 +44,10 @@
33
44
  "watch": "npm-run-all -p watch:rollup watch:dts"
34
45
  },
35
46
  "dependencies": {
36
- "@react-fabric/core": "^1.0.0-beta.35",
37
- "@react-fabric/date": "^1.0.0-beta.35",
38
- "@react-fabric/form": "^1.0.0-beta.35",
39
- "@react-fabric/utilities": "^1.0.0-beta.35",
47
+ "@react-fabric/core": "^1.0.0-beta.37",
48
+ "@react-fabric/date": "^1.0.0-beta.37",
49
+ "@react-fabric/form": "^1.0.0-beta.37",
50
+ "@react-fabric/utilities": "^1.0.0-beta.37",
40
51
  "@tanstack/react-virtual": "^3.8.6",
41
52
  "classnames": "^2.5.1",
42
53
  "color": "^4.2.3",
@@ -52,5 +63,5 @@
52
63
  "node": ">=18.12.0",
53
64
  "npm": ">=8.19.0"
54
65
  },
55
- "gitHead": "4a5cb87557f8c7c88cac937e3bd71fd6eeb07113"
66
+ "gitHead": "9b737229bf24ebe986540ee2c4b8904ebc4a5a9b"
56
67
  }
@@ -33,11 +33,10 @@ import {
33
33
  type PaletteType,
34
34
  type TestProps,
35
35
  } from "@react-fabric/core/dist/types/types";
36
- import { compareValues, Format } from "@react-fabric/utilities";
36
+ import { compareValues, Format, isColor } from "@react-fabric/utilities";
37
37
  import classNames from "classnames";
38
38
  import { useMemo } from "react";
39
39
  import { useTranslation } from "react-i18next";
40
- import classes from "./Histogram.module.css";
41
40
 
42
41
  const emptyIcon =
43
42
  "M20.84 22.73L11.11 13H3V11H9.11L6.11 8H3V6H4.11L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M15 11H14.2L15 11.8V11M21 8V6H9.2L11.2 8H21M3 18H9V16H3V18Z";
@@ -84,7 +83,7 @@ export interface HistogramProps extends TestProps {
84
83
  export const Histogram = ({
85
84
  items = [],
86
85
  total,
87
- color = "primary",
86
+ color = "primary-500",
88
87
  sortBy = "count",
89
88
  emptyTitle,
90
89
  emptyMessage,
@@ -105,11 +104,11 @@ export const Histogram = ({
105
104
 
106
105
  return (
107
106
  <div
108
- className={classes.histogram}
107
+ className={"fabric-histogram from-0% to-100%"}
109
108
  {...aria}
110
109
  style={
111
110
  {
112
- "--color": `var(--${color})`,
111
+ "--color": isColor(color) ? color : `var(--color-${color})`,
113
112
  } as AnyObject
114
113
  }
115
114
  >
@@ -127,7 +126,7 @@ export const Histogram = ({
127
126
  data-disabled={item.count === 0 || item.disabled}
128
127
  className={classNames(
129
128
  "relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px",
130
- classes.histoLabel,
129
+ "fabric-histoLabel",
131
130
  ((item.total ?? item.count) === 0 || item.disabled) &&
132
131
  "pointer-events-none",
133
132
  )}
@@ -136,8 +135,8 @@ export const Histogram = ({
136
135
  >
137
136
  <div
138
137
  className={classNames(
139
- "absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l from-0% to-100%",
140
- classes.histoBar,
138
+ "absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l",
139
+ "fabric-histoBar",
141
140
  )}
142
141
  style={{
143
142
  width: `${Math.min(item.count / maxTotal, 1) * 100}%`,
@@ -171,7 +170,7 @@ export const Histogram = ({
171
170
  <span
172
171
  className={classNames(
173
172
  "z-1 rounded-full text-xs font-medium px-2 py-1 leading-none",
174
- classes.histoBadge,
173
+ "fabric-histoBadge",
175
174
  )}
176
175
  >
177
176
  {Format.number(item.count)}
@@ -165,7 +165,7 @@ export const Table = <T extends KeyValue = KeyValue>({
165
165
  >
166
166
  <div
167
167
  data-ref="tableHeader"
168
- className="bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2"
168
+ className="bg-base font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-5"
169
169
  >
170
170
  <div className={wrapperStart}>
171
171
  {canExpand && <div className="w-6" />}
@@ -215,8 +215,8 @@ export const Table = <T extends KeyValue = KeyValue>({
215
215
  ref={measureElement}
216
216
  data-index={index}
217
217
  className={classNames(
218
- "px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1",
219
- isActiveSticky(index) && "sticky top-8 z-30",
218
+ "px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1 z-3",
219
+ isActiveSticky(index) && "sticky top-8",
220
220
  )}
221
221
  role="none"
222
222
  onClick={() => toggleGroupExpand(data.key)}
@@ -1 +0,0 @@
1
- @layer comp{.histogram{.histoLabel{--tw-gradient-from:var(--color) var(--tw-gradient-from-position);--tw-gradient-to:color-mix(in lab,var(--color) 20%,var(--fabric-bg)) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);background-color:color(from var(--color) srgb r g b/5%);&:hover{background-color:color(from var(--color) srgb r g b/15%)}&[data-disabled=true]{--color:theme(colors.tint.300);color:theme(colors.tint.600)}}.histoBar{box-shadow:-2px 0 0 var(--color) inset;:global([dir=rtl]) &{box-shadow:2px 0 0 var(--color) inset}}.histoBadge{background-color:color(from var(--color) srgb r g b/15%)}}}
@@ -1 +0,0 @@
1
- @layer comp{.histogram{.histoLabel{--tw-gradient-from:var(--color) var(--tw-gradient-from-position);--tw-gradient-to:color-mix(in lab,var(--color) 20%,var(--fabric-bg)) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);background-color:color(from var(--color) srgb r g b/5%);&:hover{background-color:color(from var(--color) srgb r g b/15%)}&[data-disabled=true]{--color:theme(colors.tint.300);color:theme(colors.tint.600)}}.histoBar{box-shadow:-2px 0 0 var(--color) inset;:global([dir=rtl]) &{box-shadow:2px 0 0 var(--color) inset}}.histoBadge{background-color:color(from var(--color) srgb r g b/15%)}}}