@trackunit/react-components 1.4.194 → 1.4.196
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/README.md
CHANGED
|
@@ -3,7 +3,7 @@ The `@trackunit/react-components` package is the home of Trackunits public UI li
|
|
|
3
3
|
|
|
4
4
|
This library is exposed publicly for use in the the Trackunit [Iris App SDK](https://www.npmjs.com/package/@trackunit/iris-app).
|
|
5
5
|
|
|
6
|
-
To browse all available components visit our [Public Storybook](https://
|
|
6
|
+
To browse all available components visit our [Public Storybook](https://design.iris.trackunit.com/).
|
|
7
7
|
|
|
8
8
|
For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).
|
|
9
9
|
|
package/index.cjs.js
CHANGED
|
@@ -246,8 +246,8 @@ const cvaTagIcon = cssClassVarianceUtilities.cvaMerge(["cursor-pointer", "transi
|
|
|
246
246
|
*
|
|
247
247
|
* How to choose between Tag, Badge and Highlight?
|
|
248
248
|
* - Use a Tag for labeling statuses, categories, or selections.
|
|
249
|
-
* - Use a [Badge](https://
|
|
250
|
-
* - Use a [Highlight](https://
|
|
249
|
+
* - Use a [Badge](https://design.iris.trackunit.com/?path=/docs/react-components-badge--docs) to indicate notifications or counts of applied elements, such as filters.
|
|
250
|
+
* - Use a [Highlight](https://design.iris.trackunit.com/?path=/docs/react-components-highlight--docs) to draw attention to values in plain text that require special attention or have crossed a threshold.
|
|
251
251
|
*
|
|
252
252
|
* @param {TagProps} props - The props for the Tag component.
|
|
253
253
|
* @returns {ReactElement} The rendered Tag component.
|
|
@@ -895,7 +895,7 @@ const cvaBadge = cssClassVarianceUtilities.cvaMerge([
|
|
|
895
895
|
*
|
|
896
896
|
* How to choose between Badge and Tag?
|
|
897
897
|
* - Use a Badge to indicate notifications or counts of applied elements.
|
|
898
|
-
* - Use a [Tag](https://
|
|
898
|
+
* - Use a [Tag](https://design.iris.trackunit.com/?path=/docs/react-components-tag--docs) for labeling statuses, categories, or selections.
|
|
899
899
|
*
|
|
900
900
|
* @param {BadgeProps} props - The props for the Badge component
|
|
901
901
|
* @returns {ReactElement} Badge component
|
|
@@ -2251,7 +2251,7 @@ const cvaHighlightText = cssClassVarianceUtilities.cvaMerge(["truncate"]);
|
|
|
2251
2251
|
*
|
|
2252
2252
|
* How to choose between Highlight and Tag?
|
|
2253
2253
|
* - Use Highlight to draw attention to values in plain text that require special attention or have crossed a threshold.
|
|
2254
|
-
* - Use a [Tag](https://
|
|
2254
|
+
* - Use a [Tag](https://design.iris.trackunit.com/?path=/docs/react-components-tag--docs) for labeling statuses, categories, or selections.
|
|
2255
2255
|
*
|
|
2256
2256
|
* @param {HighlightProps} props - The props for the highlight component
|
|
2257
2257
|
* @returns {ReactElement} highlight component
|
package/index.esm.js
CHANGED
|
@@ -244,8 +244,8 @@ const cvaTagIcon = cvaMerge(["cursor-pointer", "transition-opacity", "hover:opac
|
|
|
244
244
|
*
|
|
245
245
|
* How to choose between Tag, Badge and Highlight?
|
|
246
246
|
* - Use a Tag for labeling statuses, categories, or selections.
|
|
247
|
-
* - Use a [Badge](https://
|
|
248
|
-
* - Use a [Highlight](https://
|
|
247
|
+
* - Use a [Badge](https://design.iris.trackunit.com/?path=/docs/react-components-badge--docs) to indicate notifications or counts of applied elements, such as filters.
|
|
248
|
+
* - Use a [Highlight](https://design.iris.trackunit.com/?path=/docs/react-components-highlight--docs) to draw attention to values in plain text that require special attention or have crossed a threshold.
|
|
249
249
|
*
|
|
250
250
|
* @param {TagProps} props - The props for the Tag component.
|
|
251
251
|
* @returns {ReactElement} The rendered Tag component.
|
|
@@ -893,7 +893,7 @@ const cvaBadge = cvaMerge([
|
|
|
893
893
|
*
|
|
894
894
|
* How to choose between Badge and Tag?
|
|
895
895
|
* - Use a Badge to indicate notifications or counts of applied elements.
|
|
896
|
-
* - Use a [Tag](https://
|
|
896
|
+
* - Use a [Tag](https://design.iris.trackunit.com/?path=/docs/react-components-tag--docs) for labeling statuses, categories, or selections.
|
|
897
897
|
*
|
|
898
898
|
* @param {BadgeProps} props - The props for the Badge component
|
|
899
899
|
* @returns {ReactElement} Badge component
|
|
@@ -2249,7 +2249,7 @@ const cvaHighlightText = cvaMerge(["truncate"]);
|
|
|
2249
2249
|
*
|
|
2250
2250
|
* How to choose between Highlight and Tag?
|
|
2251
2251
|
* - Use Highlight to draw attention to values in plain text that require special attention or have crossed a threshold.
|
|
2252
|
-
* - Use a [Tag](https://
|
|
2252
|
+
* - Use a [Tag](https://design.iris.trackunit.com/?path=/docs/react-components-tag--docs) for labeling statuses, categories, or selections.
|
|
2253
2253
|
*
|
|
2254
2254
|
* @param {HighlightProps} props - The props for the highlight component
|
|
2255
2255
|
* @returns {ReactElement} highlight component
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-components",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.196",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -18,12 +18,12 @@
|
|
|
18
18
|
"@tanstack/react-router": "1.114.29",
|
|
19
19
|
"string-ts": "^2.0.0",
|
|
20
20
|
"tailwind-merge": "^2.0.0",
|
|
21
|
-
"@trackunit/ui-design-tokens": "1.3.
|
|
22
|
-
"@trackunit/css-class-variance-utilities": "1.3.
|
|
23
|
-
"@trackunit/shared-utils": "1.5.
|
|
24
|
-
"@trackunit/ui-icons": "1.3.
|
|
25
|
-
"@trackunit/react-table-pagination": "1.3.
|
|
26
|
-
"@trackunit/react-test-setup": "1.0.
|
|
21
|
+
"@trackunit/ui-design-tokens": "1.3.158",
|
|
22
|
+
"@trackunit/css-class-variance-utilities": "1.3.160",
|
|
23
|
+
"@trackunit/shared-utils": "1.5.160",
|
|
24
|
+
"@trackunit/ui-icons": "1.3.161",
|
|
25
|
+
"@trackunit/react-table-pagination": "1.3.160",
|
|
26
|
+
"@trackunit/react-test-setup": "1.0.50"
|
|
27
27
|
},
|
|
28
28
|
"module": "./index.esm.js",
|
|
29
29
|
"main": "./index.cjs.js",
|
|
@@ -37,7 +37,7 @@ export type BadgeProps = BaseBadgeProps;
|
|
|
37
37
|
*
|
|
38
38
|
* How to choose between Badge and Tag?
|
|
39
39
|
* - Use a Badge to indicate notifications or counts of applied elements.
|
|
40
|
-
* - Use a [Tag](https://
|
|
40
|
+
* - Use a [Tag](https://design.iris.trackunit.com/?path=/docs/react-components-tag--docs) for labeling statuses, categories, or selections.
|
|
41
41
|
*
|
|
42
42
|
* @param {BadgeProps} props - The props for the Badge component
|
|
43
43
|
* @returns {ReactElement} Badge component
|
|
@@ -21,7 +21,7 @@ export interface HighlightProps extends CommonProps {
|
|
|
21
21
|
*
|
|
22
22
|
* How to choose between Highlight and Tag?
|
|
23
23
|
* - Use Highlight to draw attention to values in plain text that require special attention or have crossed a threshold.
|
|
24
|
-
* - Use a [Tag](https://
|
|
24
|
+
* - Use a [Tag](https://design.iris.trackunit.com/?path=/docs/react-components-tag--docs) for labeling statuses, categories, or selections.
|
|
25
25
|
*
|
|
26
26
|
* @param {HighlightProps} props - The props for the highlight component
|
|
27
27
|
* @returns {ReactElement} highlight component
|
|
@@ -45,8 +45,8 @@ export interface TagProps extends CommonProps {
|
|
|
45
45
|
*
|
|
46
46
|
* How to choose between Tag, Badge and Highlight?
|
|
47
47
|
* - Use a Tag for labeling statuses, categories, or selections.
|
|
48
|
-
* - Use a [Badge](https://
|
|
49
|
-
* - Use a [Highlight](https://
|
|
48
|
+
* - Use a [Badge](https://design.iris.trackunit.com/?path=/docs/react-components-badge--docs) to indicate notifications or counts of applied elements, such as filters.
|
|
49
|
+
* - Use a [Highlight](https://design.iris.trackunit.com/?path=/docs/react-components-highlight--docs) to draw attention to values in plain text that require special attention or have crossed a threshold.
|
|
50
50
|
*
|
|
51
51
|
* @param {TagProps} props - The props for the Tag component.
|
|
52
52
|
* @returns {ReactElement} The rendered Tag component.
|