@heymantle/litho 0.0.1

package/dist/cjs/components/Badge.js

@@ -0,0 +1,234 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _tailwindvariants = require("tailwind-variants");
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-Badge inline-flex items-center gap-1.5 text-sm rounded-full leading-normal min-h-5.5",
+    variants: {
+        status: {
+            info: "bg-info-alt text-info-alt-fg",
+            success: "bg-success-alt text-success-alt-fg dark:bg-success-alt/50",
+            warning: "bg-warning-alt text-warning-alt-fg dark:bg-warning-alt/50",
+            critical: "bg-critical-alt text-critical-alt-fg dark:bg-critical-alt/50",
+            attention: "bg-attention-alt text-attention-alt-fg dark:bg-attention-alt/50",
+            highlight: "bg-highlight-alt text-highlight-alt-fg dark:bg-highlight-alt/50",
+            insight: "bg-insight-alt text-insight-alt-fg dark:bg-insight-alt/50",
+            neutral: "bg-neutral-alt text-neutral-alt-fg dark:bg-neutral-alt/50",
+            default: "bg-neutral-alt text-neutral-alt-fg dark:bg-neutral-alt/50"
+        },
+        progress: {
+            true: "pl-2 pr-2.5",
+            false: "px-2.5"
+        },
+        capitalize: {
+            true: "capitalize",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        status: "neutral",
+        progress: "null",
+        capitalize: false
+    }
+});
+var progressBadgeStyles = (0, _tailwindvariants.tv)({
+    base: "relative overflow-hidden rounded-max w-2 h-2 border",
+    variants: {
+        status: {
+            default: "border-neutral-alt-icon",
+            info: "border-info-alt-icon",
+            success: "border-success-alt-icon",
+            warning: "border-warning-alt-icon",
+            critical: "border-critical-alt-icon",
+            attention: "border-attention-alt-icon",
+            highlight: "border-highlight-alt-icon",
+            insight: "border-insight-alt-icon",
+            neutral: "border-neutral-alt-icon"
+        }
+    },
+    compoundVariants: [
+        {
+            status: "default",
+            progress: "complete",
+            class: "bg-neutral-alt-icon"
+        },
+        {
+            status: "default",
+            progress: "incomplete",
+            class: "border-neutral-alt-icon"
+        },
+        {
+            status: "default",
+            progress: "partiallyComplete",
+            class: "bg-neutral-alt"
+        },
+        {
+            status: "info",
+            progress: "complete",
+            class: "bg-info-alt-icon"
+        },
+        {
+            status: "info",
+            progress: "incomplete",
+            class: "border-info-alt-icon"
+        },
+        {
+            status: "info",
+            progress: "partiallyComplete",
+            class: "bg-info-alt"
+        },
+        {
+            status: "success",
+            progress: "complete",
+            class: "bg-success-alt-icon"
+        },
+        {
+            status: "success",
+            progress: "incomplete",
+            class: "border-success-alt-icon"
+        },
+        {
+            status: "success",
+            progress: "partiallyComplete",
+            class: "bg-success-alt"
+        },
+        {
+            status: "warning",
+            progress: "complete",
+            class: "bg-warning-alt-icon"
+        },
+        {
+            status: "warning",
+            progress: "incomplete",
+            class: "border-warning-alt-icon"
+        },
+        {
+            status: "warning",
+            progress: "partiallyComplete",
+            class: "bg-warning-alt"
+        },
+        {
+            status: "critical",
+            progress: "complete",
+            class: "bg-critical-alt-icon"
+        },
+        {
+            status: "critical",
+            progress: "incomplete",
+            class: "border-critical-alt-icon"
+        },
+        {
+            status: "critical",
+            progress: "partiallyComplete",
+            class: "bg-critical-alt"
+        },
+        {
+            status: "attention",
+            progress: "complete",
+            class: "bg-attention-alt-icon"
+        },
+        {
+            status: "attention",
+            progress: "incomplete",
+            class: "border-attention-alt-icon"
+        },
+        {
+            status: "attention",
+            progress: "partiallyComplete",
+            class: "bg-attention-alt"
+        },
+        {
+            status: "highlight",
+            progress: "complete",
+            class: "bg-highlight-alt-icon"
+        },
+        {
+            status: "highlight",
+            progress: "incomplete",
+            class: "border-highlight-alt-icon"
+        },
+        {
+            status: "highlight",
+            progress: "partiallyComplete",
+            class: "bg-highlight-alt"
+        },
+        {
+            status: "insight",
+            progress: "complete",
+            class: "bg-insight-alt-icon"
+        },
+        {
+            status: "insight",
+            progress: "incomplete",
+            class: "border-insight-alt-icon"
+        },
+        {
+            status: "insight",
+            progress: "partiallyComplete",
+            class: "bg-insight-alt"
+        },
+        {
+            status: "neutral",
+            progress: "complete",
+            class: "bg-neutral-alt-icon"
+        },
+        {
+            status: "neutral",
+            progress: "incomplete",
+            class: "border-neutral-alt-icon"
+        },
+        {
+            status: "neutral",
+            progress: "partiallyComplete",
+            class: "bg-neutral-alt"
+        }
+    ],
+    defaultVariants: {
+        status: "default",
+        progress: "null"
+    }
+});
+/**
+ * Badge component with optional progress indicator.
+ *
+ * @component
+ * @param {object} props - Component properties.
+ * @param {React.ReactNode} props.children - Content to display within the badge.
+ * @param {"complete" | "incomplete" | "partiallyComplete" | null} [props.progress] - Progress state of the badge.
+ * @param {boolean} [props.capitalize] - Capitalize the first letter of the badge.
+ * @param {"default" | "info" | "success" | "warning" | "critical" | "attention" | "highlight"} [props.status="default"] - Status variant to style the badge.
+ * @returns {JSX.Element} - Rendered Badge component with optional progress indicator.
+ */ function Badge() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children, progress = props.progress, status = props.status, capitalize = props.capitalize, className = props.className;
+    var classes = styles({
+        progress: !!progress,
+        status: status,
+        capitalize: capitalize
+    });
+    var progressBadgeClasses = progressBadgeStyles({
+        progress: progress || "null",
+        status: status
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        children: [
+            progress && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: progressBadgeClasses,
+                children: progress === "partiallyComplete" && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "absolute inset-0 top-1/2 h-1/2 bg-".concat(status, "-alt-icon")
+                })
+            }),
+            children
+        ]
+    });
+}
+var _default = Badge;

package/dist/cjs/components/Banner.js

@@ -0,0 +1,264 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _tailwindvariants = require("tailwind-variants");
+var _index = require("../index");
+var _polarisicons = require("@shopify/polaris-icons");
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-Banner relative rounded-md shadow-card bg-surface-highest outline outline-tint-3"
+});
+var headerStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-Banner__Header flex items-start justify-start min-h-3 dark:border-b",
+    variants: {
+        hasBodyContent: {
+            true: "rounded-t-md",
+            false: "rounded-md"
+        },
+        status: {
+            success: "bg-success text-success-fg dark:border-b-success-fg/5",
+            critical: "bg-critical text-critical-fg dark:border-b-critical-fg/5",
+            warning: "bg-attention text-attention-fg dark:border-b-attention-fg/5",
+            attention: "bg-attention text-attention-fg dark:border-b-attention-fg/5",
+            info: "bg-info text-info-fg dark:border-b-info-fg/5",
+            highlight: "bg-highlight text-highlight-fg dark:border-b-highlight-fg/5",
+            insight: "bg-insight text-insight-fg dark:border-b-insight-fg/5",
+            neutral: "bg-neutral text-neutral-fg dark:border-b-neutral-fg/5"
+        }
+    },
+    defaultVariants: {
+        status: "neutral"
+    }
+});
+var closeIconStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-Banner__Close_Icon p-1 cursor-pointer rounded-md",
+    variants: {
+        status: {
+            success: "hover:bg-success-low active:bg-success-lower",
+            critical: "hover:bg-critical-low active:bg-critical-lower",
+            warning: "hover:bg-attention-low active:bg-attention-lower",
+            attention: "hover:bg-attention-low active:bg-attention-lower",
+            info: "hover:bg-info-low active:bg-info-lower",
+            highlight: "hover:bg-highlight-low active:bg-highlight-lower",
+            insight: "hover:bg-insight-low active:bg-insight-lower",
+            neutral: "hover:bg-neutral-low active:bg-neutral-lower"
+        }
+    },
+    defaultVariants: {
+        status: "neutral"
+    }
+});
+var STATUS_STYLES = {
+    success: {
+        fg: "success-fg",
+        icon: "success-icon"
+    },
+    critical: {
+        fg: "critical-fg",
+        icon: "critical-icon"
+    },
+    warning: {
+        fg: "attention-fg",
+        icon: "attention-icon"
+    },
+    attention: {
+        fg: "attention-fg",
+        icon: "attention-icon"
+    },
+    info: {
+        fg: "info-fg",
+        icon: "info-icon"
+    },
+    highlight: {
+        fg: "highlight-fg",
+        icon: "highlight-icon"
+    },
+    insight: {
+        fg: "insight-fg",
+        icon: "insight-icon"
+    },
+    neutral: {
+        fg: "neutral-fg",
+        icon: "neutral-icon"
+    },
+    default: {
+        fg: "neutral-fg",
+        icon: "neutral-icon"
+    }
+};
+/**
+ * @typedef {'neutral' | 'critical' | 'highlight' | 'success' | 'warning' | 'info' | 'caution' | 'attention'} BannerStatus
+ */ /**
+ * A Banner component that displays a styled banner with customizable title, status, icon, actions, and dismiss functionality.
+ * The banner style and content change based on the provided props, allowing for various statuses and themes.
+ *
+ * @component
+ *
+ * @param {Object} props - The properties for configuring the Banner component.
+ * @param {string} [props.title=null] - The title text for the banner. If not provided, no title will be displayed.
+ * @param {BannerStatus} [props.status='neutral'] - The status of the banner, which determines its color and icon.
+ * @param {Function} [props.onDismiss=null] - Callback function to handle the banner's dismiss action.
+ * @param {React.ReactNode} [props.children=null] - Additional content to display within the banner.
+ * @param {Object} [props.action=null] - Primary action configuration object
+ * @param {string} props.action.content - The button label text
+ * @param {boolean} [props.action.primary=false] - Whether the button should have primary styling
+ * @param {boolean} [props.action.disabled=false] - Whether the button is disabled
+ * @param {boolean} [props.action.loading=false] - Whether to show a loading state
+ * @param {Function} [props.action.onAction] - Click handler for the action
+ * @param {string} [props.action.url] - URL to navigate to when clicked (opens in new tab)
+ * @param {Object} [props.secondaryAction=null] - Secondary action configuration object
+ * @param {string} props.secondaryAction.content - The action label text
+ * @param {boolean} [props.secondaryAction.link=false] - Whether to render as a link instead of a button
+ * @param {boolean} [props.secondaryAction.monochrome=false] - Whether the link should be monochrome (only applies if link=true)
+ * @param {boolean} [props.secondaryAction.disabled=false] - Whether the action is disabled
+ * @param {boolean} [props.secondaryAction.loading=false] - Whether to show a loading state
+ * @param {Function} [props.secondaryAction.onAction] - Click handler for the action
+ * @param {string} [props.secondaryAction.url] - URL to navigate to when clicked (opens in new tab)
+ * @param {FunctionComponent} [props.icon=null] - Custom icon to display on the banner. If not provided, a default icon is used based on the status.
+ * @param {boolean} [props.spinner=false] - Shows a spinner icon instead of a status icon when set to true.
+ *
+ * @returns {JSX.Element} The rendered Banner component.
+ *
+ * @example
+ * <Banner
+ *   title="Warning"
+ *   status="warning"
+ *   onDismiss={() => console.log('Dismissed')}
+ *   action={{ content: "Action", primary: true, onAction: () => console.log('Action clicked') }}
+ *   secondaryAction={{ content: "Learn more", link: true, monochrome: true, url: "https://example.com" }}
+ * />
+ */ function Banner() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _props_title = props.title, title = _props_title === void 0 ? null : _props_title, _props_status = props.status, status = _props_status === void 0 ? "neutral" : _props_status, _props_onDismiss = props.onDismiss, onDismiss = _props_onDismiss === void 0 ? null : _props_onDismiss, _props_children = props.children, children = _props_children === void 0 ? null : _props_children, _props_action = props.action, action = _props_action === void 0 ? null : _props_action, _props_secondaryAction = props.secondaryAction, secondaryAction = _props_secondaryAction === void 0 ? null : _props_secondaryAction, _props_icon = props.icon, icon = _props_icon === void 0 ? null : _props_icon, _props_spinner = props.spinner, spinner = _props_spinner === void 0 ? false : _props_spinner;
+    var statusColors = STATUS_STYLES[status];
+    var hasBodyContent = !!(children || action || secondaryAction);
+    var classes = styles({
+        status: status
+    });
+    var headerClasses = headerStyles({
+        status: status,
+        hasBodyContent: hasBodyContent
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: classes,
+        children: [
+            title ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: headerClasses,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "Litho-Banner__Icon_Container flex-none p-3 pr-2",
+                        children: [
+                            spinner && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Spinner, {
+                                size: "small"
+                            }),
+                            icon && !spinner && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                source: icon,
+                                color: statusColors.icon || ""
+                            }),
+                            !icon && !spinner && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                children: [
+                                    ![
+                                        "warning",
+                                        "attention",
+                                        "success"
+                                    ].includes(status) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                        source: _polarisicons.CircleInformationMajor,
+                                        color: statusColors.icon
+                                    }),
+                                    [
+                                        "warning",
+                                        "attention"
+                                    ].includes(status) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                        source: _polarisicons.CircleAlertMajor,
+                                        color: statusColors.icon
+                                    }),
+                                    status === "success" && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                        source: _polarisicons.TickMinor,
+                                        color: statusColors.icon
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "Litho-Banner__Title grow py-3",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                            variant: "headingSm",
+                            color: statusColors.fg,
+                            children: title
+                        })
+                    }),
+                    onDismiss && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "Litho-Banner__Close flex-none p-2",
+                        onClick: onDismiss,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: closeIconStyles({
+                                status: status
+                            }),
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                source: _polarisicons.CancelMinor,
+                                color: statusColors.icon
+                            })
+                        })
+                    })
+                ]
+            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: headerClasses
+            }),
+            hasBodyContent && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "Litho-Banner__Body_Container p-4 ".concat(title ? " dark:border-t dark:border-t-tint-4" : ""),
+                children: [
+                    children && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "Litho-Banner__Body",
+                        children: children
+                    }),
+                    (action || secondaryAction) && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "Litho-Banner__Actions flex items-center gap-2".concat((secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.link) ? " gap-3" : "").concat(children ? " pt-2" : ""),
+                        children: [
+                            action && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                primary: action.primary,
+                                disabled: action.disabled,
+                                loading: action.loading,
+                                onClick: action.onAction || function() {
+                                    if (action.url) {
+                                        window.open(action.url, "_blank");
+                                    }
+                                },
+                                children: action.content
+                            }),
+                            secondaryAction && !secondaryAction.link && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                disabled: secondaryAction.disabled,
+                                loading: secondaryAction.loading,
+                                onClick: secondaryAction.onAction || function() {
+                                    if (secondaryAction.url) {
+                                        window.open(secondaryAction.url, "_blank");
+                                    }
+                                },
+                                children: secondaryAction.content
+                            }),
+                            secondaryAction && secondaryAction.link && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Link, {
+                                monochrome: secondaryAction.monochrome,
+                                disabled: secondaryAction.disabled,
+                                loading: secondaryAction.loading,
+                                onClick: secondaryAction.onAction || function() {
+                                    if (secondaryAction.url) {
+                                        window.open(secondaryAction.url, "_blank");
+                                    }
+                                },
+                                children: secondaryAction.content
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+var _default = Banner;