@trackunit/react-components 0.1.184 → 0.1.186

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 (3) hide show
  1. package/index.cjs.js +7 -7
  2. package/index.esm.js +8 -8
  3. package/package.json +1 -1
package/index.cjs.js CHANGED
@@ -840,7 +840,7 @@ const cvaCardFooterDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex
840
840
  compact: "gap-3 p-3",
841
841
  comfortable: "gap-4 p-4",
842
842
  spacious: "gap-4 p-6",
843
- auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
843
+ auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
844
844
  },
845
845
  },
846
846
  defaultVariants: {
@@ -861,7 +861,7 @@ const cvaCardHeaderDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex
861
861
  compact: "gap-3 p-3",
862
862
  comfortable: "gap-4 p-4",
863
863
  spacious: "gap-4 p-6",
864
- auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
864
+ auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
865
865
  },
866
866
  },
867
867
  defaultVariants: {
@@ -886,7 +886,7 @@ const cvaCardBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex",
886
886
  compact: "gap-3 p-3",
887
887
  comfortable: "gap-4 p-4",
888
888
  spacious: "gap-4 p-6",
889
- auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
889
+ auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
890
890
  },
891
891
  },
892
892
  defaultVariants: {
@@ -948,7 +948,7 @@ const cvaHeading = cssClassVarianceUtilities.cvaMerge(["m-0", "leading-normal",
948
948
  false: "",
949
949
  },
950
950
  size: {
951
- primary: "text-3xl font-semibold",
951
+ primary: "font-semibold [font-size:_clamp(1.2rem,5cqw,2rem)]",
952
952
  secondary: "text-lg font-semibold",
953
953
  tertiary: "text-base font-semibold",
954
954
  subtitle: "text-base font-normal",
@@ -19818,7 +19818,7 @@ const cvaPageHeaderChildContainer = cssClassVarianceUtilities.cvaMerge(["flex",
19818
19818
  * @returns {JSX.Element} PageHeader component
19819
19819
  */
19820
19820
  const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, }) => {
19821
- return (jsxRuntime.jsxs("div", { className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsxRuntime.jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft" }) })), jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsxRuntime.jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircle" }, link: link, children: description }))] }), tag && !showLoading && (jsxRuntime.jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag })), showLoading && jsxRuntime.jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }));
19821
+ return (jsxRuntime.jsxs("div", { className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsxRuntime.jsx(IconButton, { to: backTo, renderAs: reactRouterDom.Link, color: "tertiary", variant: "transparent", size: "small", icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft" }) })), jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsxRuntime.jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircle" }, link: link, children: description }))] }), tag && !showLoading && (jsxRuntime.jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag })), showLoading && jsxRuntime.jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }));
19822
19822
  };
19823
19823
 
19824
19824
  const cvaPagination = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
@@ -21570,7 +21570,7 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
21570
21570
  return (jsxRuntime.jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, children: jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { className: cvaValueBarProgress({ fill: "background" }), width: `${barWidth}%`, rx: "5" }), jsxRuntime.jsx("rect", { className: cvaValueBarProgress(), width: `${score * barWidth}%`, fill: barFillColor, rx: "5" }), showValue && size === "large" && (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), x: "12", y: "23", fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white", children: [Number(value.toFixed(1)), unit || ""] })), showValue && size === "small" && (jsxRuntime.jsxs("text", { className: cvaValueBarText({ size }), x: `${barWidth + 2}%`, y: "11", fill: valueColor !== null && valueColor !== void 0 ? valueColor : uiDesignTokens.color("NEUTRAL", 400, "CSS"), children: [Number(value.toFixed(1)), unit || ""] }))] }) }));
21571
21571
  };
21572
21572
 
21573
- const cvaWidgetBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-grow", "overflow-auto", "w-full", "h-full", "place-items-center", "overflow-hidden"], {
21573
+ const cvaWidgetBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["@container", "flex", "flex-grow", "overflow-auto", "w-full", "h-full", "place-items-center", "overflow-hidden"], {
21574
21574
  variants: {
21575
21575
  disableGap: {
21576
21576
  true: "gap-0",
@@ -21587,7 +21587,7 @@ const cvaWidgetBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex"
21587
21587
  compact: "gap-3 p-3",
21588
21588
  comfortable: "gap-4 p-4",
21589
21589
  spacious: "gap-4 p-6",
21590
- auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
21590
+ auto: "",
21591
21591
  },
21592
21592
  },
21593
21593
  defaultVariants: {
package/index.esm.js CHANGED
@@ -8,7 +8,7 @@ import IconSpriteSolid from '@trackunit/ui-icons/icons-sprite-solid.svg';
8
8
  import { cvaMerge } from '@trackunit/css-class-variance-utilities';
9
9
  import * as ReactDOM from 'react-dom';
10
10
  import ReactDOM__default, { createPortal } from 'react-dom';
11
- import { UNSAFE_NavigationContext } from 'react-router-dom';
11
+ import { Link, UNSAFE_NavigationContext } from 'react-router-dom';
12
12
 
13
13
  const docs = {
14
14
  source: {
@@ -811,7 +811,7 @@ const cvaCardFooterDensityContainer = cvaMerge(["flex border-t-2", "border-neutr
811
811
  compact: "gap-3 p-3",
812
812
  comfortable: "gap-4 p-4",
813
813
  spacious: "gap-4 p-6",
814
- auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
814
+ auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
815
815
  },
816
816
  },
817
817
  defaultVariants: {
@@ -832,7 +832,7 @@ const cvaCardHeaderDensityContainer = cvaMerge(["flex border-b-2", "border-neutr
832
832
  compact: "gap-3 p-3",
833
833
  comfortable: "gap-4 p-4",
834
834
  spacious: "gap-4 p-6",
835
- auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
835
+ auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
836
836
  },
837
837
  },
838
838
  defaultVariants: {
@@ -857,7 +857,7 @@ const cvaCardBodyDensityContainer = cvaMerge(["flex", "flex-grow", "overflow-aut
857
857
  compact: "gap-3 p-3",
858
858
  comfortable: "gap-4 p-4",
859
859
  spacious: "gap-4 p-6",
860
- auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
860
+ auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
861
861
  },
862
862
  },
863
863
  defaultVariants: {
@@ -919,7 +919,7 @@ const cvaHeading = cvaMerge(["m-0", "leading-normal", "text-black"], {
919
919
  false: "",
920
920
  },
921
921
  size: {
922
- primary: "text-3xl font-semibold",
922
+ primary: "font-semibold [font-size:_clamp(1.2rem,5cqw,2rem)]",
923
923
  secondary: "text-lg font-semibold",
924
924
  tertiary: "text-base font-semibold",
925
925
  subtitle: "text-base font-normal",
@@ -19789,7 +19789,7 @@ const cvaPageHeaderChildContainer = cvaMerge(["flex", "flex-wrap", "gap-x-6", "i
19789
19789
  * @returns {JSX.Element} PageHeader component
19790
19790
  */
19791
19791
  const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, }) => {
19792
- return (jsxs("div", { className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeft" }) })), jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircle" }, link: link, children: description }))] }), tag && !showLoading && (jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag })), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }));
19792
+ return (jsxs("div", { className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsx(IconButton, { to: backTo, renderAs: Link, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeft" }) })), jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircle" }, link: link, children: description }))] }), tag && !showLoading && (jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag })), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }));
19793
19793
  };
19794
19794
 
19795
19795
  const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);
@@ -21541,7 +21541,7 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
21541
21541
  return (jsx("svg", { className: cvaValueBar({ size, className }), "data-testid": dataTestId, children: jsxs("g", { children: [jsx("rect", { className: cvaValueBarProgress({ fill: "background" }), width: `${barWidth}%`, rx: "5" }), jsx("rect", { className: cvaValueBarProgress(), width: `${score * barWidth}%`, fill: barFillColor, rx: "5" }), showValue && size === "large" && (jsxs("text", { className: cvaValueBarText({ size }), x: "12", y: "23", fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white", children: [Number(value.toFixed(1)), unit || ""] })), showValue && size === "small" && (jsxs("text", { className: cvaValueBarText({ size }), x: `${barWidth + 2}%`, y: "11", fill: valueColor !== null && valueColor !== void 0 ? valueColor : color("NEUTRAL", 400, "CSS"), children: [Number(value.toFixed(1)), unit || ""] }))] }) }));
21542
21542
  };
21543
21543
 
21544
- const cvaWidgetBodyDensityContainer = cvaMerge(["flex", "flex-grow", "overflow-auto", "w-full", "h-full", "place-items-center", "overflow-hidden"], {
21544
+ const cvaWidgetBodyDensityContainer = cvaMerge(["@container", "flex", "flex-grow", "overflow-auto", "w-full", "h-full", "place-items-center", "overflow-hidden"], {
21545
21545
  variants: {
21546
21546
  disableGap: {
21547
21547
  true: "gap-0",
@@ -21558,7 +21558,7 @@ const cvaWidgetBodyDensityContainer = cvaMerge(["flex", "flex-grow", "overflow-a
21558
21558
  compact: "gap-3 p-3",
21559
21559
  comfortable: "gap-4 p-4",
21560
21560
  spacious: "gap-4 p-6",
21561
- auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
21561
+ auto: "",
21562
21562
  },
21563
21563
  },
21564
21564
  defaultVariants: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-components",
3
- "version": "0.1.184",
3
+ "version": "0.1.186",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {