@trackunit/react-components 0.1.144 → 0.1.146

package/index.cjs.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var uiIcons = require('@trackunit/ui-icons');
 var ReactDOM = require('react-dom');
@@ -351,9 +350,13 @@ const cvaIconButtonContainer = cssClassVarianceUtilities.cvaMerge(["w-5", "h-5",
  */
 const Button$1 = React__namespace.forwardRef((_a, ref) => {
     var { onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, color = "primary", variant = "filled", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, renderAs = "button", circular } = _a, rest = __rest$1(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "color", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs", "circular"]);
-    return (jsxRuntime.jsxs(StyledButton, Object.assign({ "$as": renderAs, onClick: onClick, disabled: disabled || loading, type: type, className: cvaButton({ rounded: circular, disabled, size, square, color, variant, fullWidth, className }), title: title, "aria-label": title, role: role, tabIndex: tabIndex, "data-testid": dataTestId, ref: ref }, rest, { children: [loading && jsxRuntime.jsx(Spinner, { className: cvaButtonSpinner(), centering: "vertically" }), prefix, children, suffix] })));
+    return React__namespace.createElement(renderAs, Object.assign({ ref,
+        title,
+        type,
+        role,
+        onClick,
+        tabIndex, disabled: disabled || loading, className: cvaButton({ rounded: circular, disabled, size, square, color, variant, fullWidth, className }), "aria-label": title, "data-testid": dataTestId, children: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loading && jsxRuntime.jsx(Spinner, { className: cvaButtonSpinner(), centering: "vertically" }), prefix, children, suffix] })) }, rest));
 });
-const StyledButton = tailwindStyledComponents.tw.button ``;
 
 const IconButton = React__namespace.forwardRef((_a, ref) => {
     var { icon, size = "small", square = true, loading, disabled } = _a, rest = __rest$1(_a, ["icon", "size", "square", "loading", "disabled"]);
@@ -512,11 +515,11 @@ const cvaText = cssClassVarianceUtilities.cvaMerge(["m-0", "relative", "text-sm"
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
-const Text = ({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, className, dataTestId, }) => {
+const Text = (_a) => {
+    var { children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, className, dataTestId } = _a, rest = __rest$1(_a, ["children", "type", "size", "align", "weight", "underline", "inverted", "subtle", "italicize", "uppercase", "className", "dataTestId"]);
     const color = inverted && subtle ? "subtleInverted" : inverted ? "inverted" : subtle ? "subtle" : "default";
-    return (jsxRuntime.jsx(StyledText, { "$as": type, className: cvaText({ color, uppercase, align, italic: italicize, size, underline, weight, className }), "data-testid": dataTestId, children: children }));
+    return React__namespace.createElement(type, Object.assign({ className: cvaText({ color, uppercase, align, italic: italicize, size, underline, weight, className }), "data-testid": dataTestId, children }, rest));
 };
-const StyledText = tailwindStyledComponents.tw.text ``;
 
 const cvaAlert = cssClassVarianceUtilities.cvaMerge(["flex", "relative", "p-4", "rounded"], {
     variants: {
@@ -833,16 +836,16 @@ const cvaHeading = cssClassVarianceUtilities.cvaMerge(["m-0", "leading-normal",
  * @param {HeadingProps} props - The props for the Heading component
  * @returns {JSX.Element} Heading component
  */
-const Heading = ({ children, variant = "primary", inverted = false, subtle = false, className, dataTestId, }) => {
+const Heading = (_a) => {
+    var { variant = "primary", inverted = false, subtle = false, className, dataTestId } = _a, rest = __rest$1(_a, ["variant", "inverted", "subtle", "className", "dataTestId"]);
     const semanticType = {
         primary: "h1",
         secondary: "h2",
         tertiary: "h3",
         subtitle: "h4",
     };
-    return (jsxRuntime.jsx(StyledHeading, { "$as": semanticType[variant], className: cvaHeading({ subtle, inverted, size: variant, className }), "data-testid": dataTestId, children: children }));
+    return React__namespace.createElement(semanticType[variant], Object.assign(Object.assign({}, rest), { className: cvaHeading({ subtle, inverted, size: variant, className }), "data-testid": dataTestId }));
 };
-const StyledHeading = tailwindStyledComponents.tw.div ``;
 
 /**
  * Header for Cards and Modals.

package/index.esm.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useRef, useCallback, useEffect, useState, useLayoutEffect, useMemo, createContext, forwardRef, useContext, isValidElement, cloneElement, memo, Children, useReducer, Component } from 'react';
-import { tw } from '@trackunit/tailwind-styled-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import * as ReactDOM from 'react-dom';
@@ -324,9 +323,13 @@ const cvaIconButtonContainer = cvaMerge(["w-5", "h-5", "flex", "justify-center",
  */
 const Button$1 = React.forwardRef((_a, ref) => {
     var { onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, color = "primary", variant = "filled", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, renderAs = "button", circular } = _a, rest = __rest$1(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "color", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs", "circular"]);
-    return (jsxs(StyledButton, Object.assign({ "$as": renderAs, onClick: onClick, disabled: disabled || loading, type: type, className: cvaButton({ rounded: circular, disabled, size, square, color, variant, fullWidth, className }), title: title, "aria-label": title, role: role, tabIndex: tabIndex, "data-testid": dataTestId, ref: ref }, rest, { children: [loading && jsx(Spinner, { className: cvaButtonSpinner(), centering: "vertically" }), prefix, children, suffix] })));
+    return React.createElement(renderAs, Object.assign({ ref,
+        title,
+        type,
+        role,
+        onClick,
+        tabIndex, disabled: disabled || loading, className: cvaButton({ rounded: circular, disabled, size, square, color, variant, fullWidth, className }), "aria-label": title, "data-testid": dataTestId, children: (jsxs(Fragment, { children: [loading && jsx(Spinner, { className: cvaButtonSpinner(), centering: "vertically" }), prefix, children, suffix] })) }, rest));
 });
-const StyledButton = tw.button ``;
 
 const IconButton = React.forwardRef((_a, ref) => {
     var { icon, size = "small", square = true, loading, disabled } = _a, rest = __rest$1(_a, ["icon", "size", "square", "loading", "disabled"]);
@@ -485,11 +488,11 @@ const cvaText = cvaMerge(["m-0", "relative", "text-sm", "font-normal"], {
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
-const Text = ({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, className, dataTestId, }) => {
+const Text = (_a) => {
+    var { children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, className, dataTestId } = _a, rest = __rest$1(_a, ["children", "type", "size", "align", "weight", "underline", "inverted", "subtle", "italicize", "uppercase", "className", "dataTestId"]);
     const color = inverted && subtle ? "subtleInverted" : inverted ? "inverted" : subtle ? "subtle" : "default";
-    return (jsx(StyledText, { "$as": type, className: cvaText({ color, uppercase, align, italic: italicize, size, underline, weight, className }), "data-testid": dataTestId, children: children }));
+    return React.createElement(type, Object.assign({ className: cvaText({ color, uppercase, align, italic: italicize, size, underline, weight, className }), "data-testid": dataTestId, children }, rest));
 };
-const StyledText = tw.text ``;
 
 const cvaAlert = cvaMerge(["flex", "relative", "p-4", "rounded"], {
     variants: {
@@ -806,16 +809,16 @@ const cvaHeading = cvaMerge(["m-0", "leading-normal", "text-black"], {
  * @param {HeadingProps} props - The props for the Heading component
  * @returns {JSX.Element} Heading component
  */
-const Heading = ({ children, variant = "primary", inverted = false, subtle = false, className, dataTestId, }) => {
+const Heading = (_a) => {
+    var { variant = "primary", inverted = false, subtle = false, className, dataTestId } = _a, rest = __rest$1(_a, ["variant", "inverted", "subtle", "className", "dataTestId"]);
     const semanticType = {
         primary: "h1",
         secondary: "h2",
         tertiary: "h3",
         subtitle: "h4",
     };
-    return (jsx(StyledHeading, { "$as": semanticType[variant], className: cvaHeading({ subtle, inverted, size: variant, className }), "data-testid": dataTestId, children: children }));
+    return React.createElement(semanticType[variant], Object.assign(Object.assign({}, rest), { className: cvaHeading({ subtle, inverted, size: variant, className }), "data-testid": dataTestId }));
 };
-const StyledHeading = tw.div ``;
 
 /**
  * Header for Cards and Modals.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.144",
+  "version": "0.1.146",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -10,9 +10,8 @@
     "@floating-ui/react": "0.22.2",
     "@trackunit/css-class-variance-utilities": "0.0.11",
     "@trackunit/css-core": "0.0.92",
-    "@trackunit/tailwind-styled-components": "0.0.60",
     "@trackunit/ui-design-tokens": "0.0.75",
-    "@trackunit/ui-icons": "0.0.72",
+    "@trackunit/ui-icons": "0.0.73",
     "date-fns": "2.29.3",
     "lodash": "4.17.21",
     "react": "18.2.0",

package/src/components/Heading/Heading.d.ts

@@ -25,4 +25,4 @@ export interface HeadingProps extends CommonProps {
  * @param {HeadingProps} props - The props for the Heading component
  * @returns {JSX.Element} Heading component
  */
-export declare const Heading: ({ children, variant, inverted, subtle, className, dataTestId, }: HeadingProps) => JSX.Element;
+export declare const Heading: ({ variant, inverted, subtle, className, dataTestId, ...rest }: HeadingProps) => JSX.Element;

package/src/components/Text/Text.d.ts

@@ -55,4 +55,4 @@ export interface TextProps extends CommonProps {
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
-export declare const Text: ({ children, type, size, align, weight, underline, inverted, subtle, italicize, uppercase, className, dataTestId, }: TextProps) => JSX.Element;
+export declare const Text: ({ children, type, size, align, weight, underline, inverted, subtle, italicize, uppercase, className, dataTestId, ...rest }: TextProps) => JSX.Element;