@jobber/components 6.26.3 → 6.26.4

package/dist/Card/Card.d.ts

@@ -1,7 +1,10 @@
 import React from "react";
-import { XOR } from "ts-xor";
-import { CardProps } from "./types";
-interface LinkCardProps extends CardProps {
+import { CardBodyProps, CardHeaderProps, CardProps } from "./types";
+/**
+ * Props for a card that acts as a link.
+ * When url is provided, the card becomes clickable and navigates to the specified URL.
+ */
+type LinkCardProps = CardProps & {
     /**
      * URL that the card would navigate to once clicked.
      */
@@ -10,10 +13,66 @@ interface LinkCardProps extends CardProps {
      * Makes the URL open in new tab on click.
      */
     external?: boolean;
-}
-interface ClickableCardProps extends CardProps {
+    onClick?: never;
+};
+/**
+ * Props for a card that has a click handler.
+ * When onClick is provided, the card becomes clickable and triggers the handler on click.
+ */
+type ClickableCardProps = CardProps & {
+    /**
+     * Event handler that gets called when the card is clicked.
+     */
     onClick(event: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>): void;
+    url?: never;
+    readonly external?: never;
+};
+/**
+ * Props for a regular card without any click behavior.
+ */
+type RegularCardProps = CardProps & {
+    url?: never;
+    onClick?: never;
+    readonly external?: never;
+};
+type CardPropOptions = LinkCardProps | ClickableCardProps | RegularCardProps;
+/**
+ * Header component for the Card.
+ * Used in the compound component pattern to provide a consistent header layout.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Header>
+ *     <Text>Header Content</Text>
+ *   </Card.Header>
+ *   <Card.Body>
+ *     <p>Card content</p>
+ *   </Card.Body>
+ * </Card>
+ * ```
+ */
+declare function CardHeaderCompoundComponent({ children }: CardHeaderProps): JSX.Element;
+/**
+ * Body component for the Card.
+ * Used in the compound component pattern to provide a consistent content layout.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Header>
+ *     <Text>Header Content</Text>
+ *   </Card.Header>
+ *   <Card.Body>
+ *     <p>Card content</p>
+ *   </Card.Body>
+ * </Card>
+ * ```
+ */
+declare function CardBodyCompoundComponent({ children }: CardBodyProps): JSX.Element;
+export declare function Card(props: CardPropOptions): JSX.Element;
+export declare namespace Card {
+    var Header: typeof CardHeaderCompoundComponent;
+    var Body: typeof CardBodyCompoundComponent;
 }
-type CardPropOptions = XOR<CardProps, XOR<LinkCardProps, ClickableCardProps>>;
-export declare function Card({ accent, header, children, onClick, title, url, external, elevation, }: CardPropOptions): JSX.Element;
 export {};

package/dist/Card/types.d.ts

@@ -24,7 +24,6 @@ export interface CardProps {
     /**
      * @deprecated
      * Use header instead.
-     *
      */
     readonly title?: string;
     /**
@@ -33,3 +32,13 @@ export interface CardProps {
     readonly header?: string | HeaderActionProps | ReactElement;
     readonly elevation?: elevationProp;
 }
+export interface CardHeaderProps {
+    readonly children: ReactNode;
+}
+export interface CardBodyProps {
+    readonly children: ReactNode;
+}
+export interface CardCompositionProps {
+    Header: React.FC<CardHeaderProps>;
+    Body: React.FC<CardBodyProps>;
+}

package/dist/Card-cjs.js

@@ -69,20 +69,70 @@ function renderHeaderAction(action) {
     return React.createElement(React.Fragment, null);
 }
 
-function Card({ accent, header, children, onClick, title, url, external = false, elevation = "none", }) {
-    const className = classnames(styles.card, accent && styles.accent, (url || onClick) && styles.clickable, accent && colors[accent], elevation !== "none" && elevations[`${elevation}Elevation`]);
-    const cardContent = (React.createElement(React.Fragment, null,
+/**
+ * Header component for the Card.
+ * Used in the compound component pattern to provide a consistent header layout.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Header>
+ *     <Text>Header Content</Text>
+ *   </Card.Header>
+ *   <Card.Body>
+ *     <p>Card content</p>
+ *   </Card.Body>
+ * </Card>
+ * ```
+ */
+function CardHeaderCompoundComponent({ children }) {
+    return React.createElement(React.Fragment, null, children);
+}
+/**
+ * Body component for the Card.
+ * Used in the compound component pattern to provide a consistent content layout.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Header>
+ *     <Text>Header Content</Text>
+ *   </Card.Header>
+ *   <Card.Body>
+ *     <p>Card content</p>
+ *   </Card.Body>
+ * </Card>
+ * ```
+ */
+function CardBodyCompoundComponent({ children }) {
+    return React.createElement(React.Fragment, null, children);
+}
+function renderCardContent(children, title, header) {
+    return (React.createElement(React.Fragment, null,
         React.createElement(CardHeader, { title: title, header: header }),
         children));
+}
+function renderCardWrapper(className, content, onClick, url, external) {
     if (onClick) {
-        return (React.createElement(CardClickable, { className: className, onClick: onClick }, cardContent));
-    }
-    else if (url) {
-        return (React.createElement("a", Object.assign({ className: className, href: url }, (external && { target: "_blank", rel: "noopener noreferrer" })), cardContent));
+        return (React.createElement(CardClickable, { className: className, onClick: onClick }, content));
     }
-    else {
-        return React.createElement("div", { className: className }, cardContent);
+    if (url) {
+        return (React.createElement("a", Object.assign({ className: className, href: url }, (external && { target: "_blank", rel: "noopener noreferrer" })), content));
     }
+    return React.createElement("div", { className: className }, content);
+}
+function Card(props) {
+    const { accent, header, children, title, elevation = "none", onClick, url, external, } = props;
+    const className = classnames(styles.card, accent && styles.accent, (url || onClick) && styles.clickable, accent && colors[accent], elevation !== "none" && elevations[`${elevation}Elevation`]);
+    const isUsingCompoundPattern = React.Children.toArray(children).some(child => React.isValidElement(child) &&
+        (child.type === CardHeaderCompoundComponent ||
+            child.type === CardBodyCompoundComponent));
+    const content = isUsingCompoundPattern
+        ? children
+        : renderCardContent(children, title, header);
+    return renderCardWrapper(className, content, onClick, url, external);
 }
+Card.Header = CardHeaderCompoundComponent;
+Card.Body = CardBodyCompoundComponent;
 
 exports.Card = Card;

package/dist/Card-es.js

@@ -67,20 +67,70 @@ function renderHeaderAction(action) {
     return React__default.createElement(React__default.Fragment, null);
 }
 
-function Card({ accent, header, children, onClick, title, url, external = false, elevation = "none", }) {
-    const className = classnames(styles.card, accent && styles.accent, (url || onClick) && styles.clickable, accent && colors[accent], elevation !== "none" && elevations[`${elevation}Elevation`]);
-    const cardContent = (React__default.createElement(React__default.Fragment, null,
+/**
+ * Header component for the Card.
+ * Used in the compound component pattern to provide a consistent header layout.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Header>
+ *     <Text>Header Content</Text>
+ *   </Card.Header>
+ *   <Card.Body>
+ *     <p>Card content</p>
+ *   </Card.Body>
+ * </Card>
+ * ```
+ */
+function CardHeaderCompoundComponent({ children }) {
+    return React__default.createElement(React__default.Fragment, null, children);
+}
+/**
+ * Body component for the Card.
+ * Used in the compound component pattern to provide a consistent content layout.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Header>
+ *     <Text>Header Content</Text>
+ *   </Card.Header>
+ *   <Card.Body>
+ *     <p>Card content</p>
+ *   </Card.Body>
+ * </Card>
+ * ```
+ */
+function CardBodyCompoundComponent({ children }) {
+    return React__default.createElement(React__default.Fragment, null, children);
+}
+function renderCardContent(children, title, header) {
+    return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(CardHeader, { title: title, header: header }),
         children));
+}
+function renderCardWrapper(className, content, onClick, url, external) {
     if (onClick) {
-        return (React__default.createElement(CardClickable, { className: className, onClick: onClick }, cardContent));
-    }
-    else if (url) {
-        return (React__default.createElement("a", Object.assign({ className: className, href: url }, (external && { target: "_blank", rel: "noopener noreferrer" })), cardContent));
+        return (React__default.createElement(CardClickable, { className: className, onClick: onClick }, content));
     }
-    else {
-        return React__default.createElement("div", { className: className }, cardContent);
+    if (url) {
+        return (React__default.createElement("a", Object.assign({ className: className, href: url }, (external && { target: "_blank", rel: "noopener noreferrer" })), content));
     }
+    return React__default.createElement("div", { className: className }, content);
+}
+function Card(props) {
+    const { accent, header, children, title, elevation = "none", onClick, url, external, } = props;
+    const className = classnames(styles.card, accent && styles.accent, (url || onClick) && styles.clickable, accent && colors[accent], elevation !== "none" && elevations[`${elevation}Elevation`]);
+    const isUsingCompoundPattern = React__default.Children.toArray(children).some(child => React__default.isValidElement(child) &&
+        (child.type === CardHeaderCompoundComponent ||
+            child.type === CardBodyCompoundComponent));
+    const content = isUsingCompoundPattern
+        ? children
+        : renderCardContent(children, title, header);
+    return renderCardWrapper(className, content, onClick, url, external);
 }
+Card.Header = CardHeaderCompoundComponent;
+Card.Body = CardBodyCompoundComponent;
 
 export { Card as C };

package/dist/utils/meta/meta.json

@@ -18,6 +18,8 @@
     "Button.Label",
     "ButtonDismiss",
     "Card",
+    "Card.Body",
+    "Card.Header",
     "Cell",
     "CellCurrency",
     "CellNumeric",
@@ -141,4 +143,4 @@
     "Tooltip",
     "Typography"
   ]
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.26.3",
+  "version": "6.26.4",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -490,5 +490,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "c4962eacf97393ea78117f7dc77392f1a694c075"
+  "gitHead": "f0c368fc049c59b408f725d0fad344453ffd3942"
 }