@jobber/components 6.26.2 → 6.26.4

package/dist/Button/ButtonProvider.d.ts

@@ -6,5 +6,5 @@ interface ButtonContextProps {
 export declare function ButtonProvider({ children, size, }: PropsWithChildren<{
     readonly size?: ButtonSize;
 }>): JSX.Element;
-export declare function useButton(): ButtonContextProps;
+export declare function useButtonContext(): ButtonContextProps;
 export {};

package/dist/Button/index.cjs

@@ -12,5 +12,5 @@ require('../Typography-cjs.js');
 
 
 exports.Button = Button.Button;
-exports.useButton = Button.useButton;
+exports.useButtonContext = Button.useButtonContext;
 exports.useButtonStyles = Button.useButtonStyles;

package/dist/Button/index.d.ts

@@ -1,4 +1,4 @@
 export { Button } from "./Button";
 export * from "./Button.types";
 export { useButtonStyles, UseButtonStylesProps } from "./useButtonStyles";
-export { useButton } from "./ButtonProvider";
+export { useButtonContext } from "./ButtonProvider";

package/dist/Button/index.mjs

@@ -1,4 +1,4 @@
-export { B as Button, a as useButton, u as useButtonStyles } from '../Button-es.js';
+export { B as Button, a as useButtonContext, u as useButtonStyles } from '../Button-es.js';
 import 'react';
 import 'react-router-dom';
 import 'classnames';

package/dist/Button-cjs.js

@@ -15,12 +15,12 @@ const ButtonContext = React.createContext({
 function ButtonProvider({ children, size = "base", }) {
     return (React.createElement(ButtonContext.Provider, { value: { size } }, children));
 }
-function useButton() {
+function useButtonContext() {
     return React.useContext(ButtonContext);
 }
 
 function useButtonStyles({ size: sizeProp, disabled, fullWidth, loading, variation = "work", type = "primary", }) {
-    const { size: contextSize } = useButton();
+    const { size: contextSize } = useButtonContext();
     const size = sizeProp || contextSize;
     const wrapper = classnames([styles.button, styles[size], styles[variation], styles[type]], {
         [styles.disabled]: disabled,
@@ -57,13 +57,13 @@ function getTypeSizes(size) {
 }
 function ButtonIcon(_a) {
     var { size: sizeProp } = _a, props = tslib_es6.__rest(_a, ["size"]);
-    const { size: contextSize } = useButton();
+    const { size: contextSize } = useButtonContext();
     const size = sizeProp || contextSize;
     return React.createElement(Icon.Icon, Object.assign({}, props, { size: size }));
 }
 function ButtonLabel(_a) {
     var { element = "span", fontWeight = "semiBold", fontFamily = "base", size: sizeProp } = _a, props = tslib_es6.__rest(_a, ["element", "fontWeight", "fontFamily", "size"]);
-    const { size: contextSize } = useButton();
+    const { size: contextSize } = useButtonContext();
     const size = sizeProp || contextSize;
     return (React.createElement(Typography.Typography, Object.assign({ element: element, fontWeight: fontWeight, fontFamily: fontFamily, size: getTypeSizes(size) }, props)));
 }
@@ -90,5 +90,5 @@ Button.Label = ButtonLabel;
 Button.Icon = ButtonIcon;
 
 exports.Button = Button;
-exports.useButton = useButton;
+exports.useButtonContext = useButtonContext;
 exports.useButtonStyles = useButtonStyles;

package/dist/Button-es.js

@@ -13,12 +13,12 @@ const ButtonContext = createContext({
 function ButtonProvider({ children, size = "base", }) {
     return (React__default.createElement(ButtonContext.Provider, { value: { size } }, children));
 }
-function useButton() {
+function useButtonContext() {
     return useContext(ButtonContext);
 }
 
 function useButtonStyles({ size: sizeProp, disabled, fullWidth, loading, variation = "work", type = "primary", }) {
-    const { size: contextSize } = useButton();
+    const { size: contextSize } = useButtonContext();
     const size = sizeProp || contextSize;
     const wrapper = classnames([styles.button, styles[size], styles[variation], styles[type]], {
         [styles.disabled]: disabled,
@@ -55,13 +55,13 @@ function getTypeSizes(size) {
 }
 function ButtonIcon(_a) {
     var { size: sizeProp } = _a, props = __rest(_a, ["size"]);
-    const { size: contextSize } = useButton();
+    const { size: contextSize } = useButtonContext();
     const size = sizeProp || contextSize;
     return React__default.createElement(Icon, Object.assign({}, props, { size: size }));
 }
 function ButtonLabel(_a) {
     var { element = "span", fontWeight = "semiBold", fontFamily = "base", size: sizeProp } = _a, props = __rest(_a, ["element", "fontWeight", "fontFamily", "size"]);
-    const { size: contextSize } = useButton();
+    const { size: contextSize } = useButtonContext();
     const size = sizeProp || contextSize;
     return (React__default.createElement(Typography, Object.assign({ element: element, fontWeight: fontWeight, fontFamily: fontFamily, size: getTypeSizes(size) }, props)));
 }
@@ -87,4 +87,4 @@ function ButtonWrapper(props) {
 Button.Label = ButtonLabel;
 Button.Icon = ButtonIcon;
 
-export { Button as B, useButton as a, useButtonStyles as u };
+export { Button as B, useButtonContext as a, useButtonStyles as u };

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/index.cjs

@@ -197,7 +197,7 @@ exports.Avatar = Avatar.Avatar;
 exports.Banner = Banner.Banner;
 exports.Box = Box.Box;
 exports.Button = Button.Button;
-exports.useButton = Button.useButton;
+exports.useButtonContext = Button.useButtonContext;
 exports.useButtonStyles = Button.useButtonStyles;
 exports.ButtonDismiss = ButtonDismiss.ButtonDismiss;
 exports.Card = Card.Card;

package/dist/index.mjs

@@ -16,7 +16,7 @@ import 'react-dom';
 export { A as Avatar } from './Avatar-es.js';
 export { B as Banner } from './Banner-es.js';
 export { B as Box } from './Box-es.js';
-export { B as Button, a as useButton, u as useButtonStyles } from './Button-es.js';
+export { B as Button, a as useButtonContext, u as useButtonStyles } from './Button-es.js';
 export { B as ButtonDismiss } from './ButtonDismiss-es.js';
 export { C as Card } from './Card-es.js';
 export { Checkbox } from './Checkbox/index.mjs';

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.2",
+  "version": "6.26.4",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -490,5 +490,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "95ecce985fdf89b0a31c3942280a94257d6c2c56"
+  "gitHead": "f0c368fc049c59b408f725d0fad344453ffd3942"
 }