@trackunit/react-components 0.1.246 → 0.1.247

package/index.cjs.js

@@ -999,12 +999,12 @@ const Heading = (_a) => {
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {JSX.Element} CardHeader component
  */
-const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
+const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, actions, density, hideSeparator = false, }) => {
     return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaCardHeaderDensityContainer({
             density,
             border: hideSeparator ? "borderless" : "default",
             className,
-        }), children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { className: extraClassName, children: [jsxRuntime.jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsxRuntime.jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading ? (jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), onClose ? (jsxRuntime.jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), className: "!h-min" })) : null] }) }));
+        }), children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsxRuntime.jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading ? (jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxRuntime.jsxs("div", { className: "flex gap-x-2 gap-y-1", children: [actions, onClose ? (jsxRuntime.jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), className: "!h-min" })) : null] })] }) }));
 };
 
 const cvaCollapse = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -968,12 +968,12 @@ const Heading = (_a) => {
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {JSX.Element} CardHeader component
  */
-const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
+const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, actions, density, hideSeparator = false, }) => {
     return (jsx("div", { "data-testid": dataTestId, className: cvaCardHeaderDensityContainer({
             density,
             border: hideSeparator ? "borderless" : "default",
             className,
-        }), children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { className: extraClassName, children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), onClose ? (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), className: "!h-min" })) : null] }) }));
+        }), children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxs("div", { className: "flex gap-x-2 gap-y-1", children: [actions, onClose ? (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), className: "!h-min" })) : null] })] }) }));
 };
 
 const cvaCollapse = cvaMerge([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.246",
+  "version": "0.1.247",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Card/CardHeader.d.ts

@@ -24,7 +24,7 @@ export interface CardHeaderProps extends CommonProps {
      */
     density?: Density;
     /**
-     * Wether or not a seperator line should be rendered
+     * Whether or not a separator line should be rendered
      */
     hideSeparator?: boolean;
     /** Function to call when the close button is clicked */
@@ -34,9 +34,9 @@ export interface CardHeaderProps extends CommonProps {
      */
     children?: React.ReactNode | null;
     /**
-     * Extra className for div container
+     * For buttons or other actions to render in the header
      */
-    extraClassName?: string | undefined;
+    actions?: React.ReactNode | null;
 }
 /**
  * Header for Cards and Modals.
@@ -44,4 +44,4 @@ export interface CardHeaderProps extends CommonProps {
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {JSX.Element} CardHeader component
  */
-export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator, }: CardHeaderProps) => JSX.Element;
+export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, dataTestId, className, children, accessories, actions, density, hideSeparator, }: CardHeaderProps) => JSX.Element;

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

@@ -15,7 +15,7 @@ export interface HeadingProps extends CommonProps {
      */
     inverted?: boolean;
     /**
-     * Whether the heading is a subtitle or not.
+     * Whether the heading uses neutral color by default or not.
      */
     subtle?: boolean;
 }