@heymantle/litho 0.0.1

package/dist/esm/components/Banner.js

@@ -0,0 +1,254 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import { Icon, Spinner, Text, Button, Link } from "../index.js";
+import { CancelMinor, CircleAlertMajor, CircleInformationMajor, TickMinor } from "@shopify/polaris-icons";
+var styles = tv({
+    base: "Litho-Banner relative rounded-md shadow-card bg-surface-highest outline outline-tint-3"
+});
+var headerStyles = 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 = 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__*/ _jsxs("div", {
+        className: classes,
+        children: [
+            title ? /*#__PURE__*/ _jsxs("div", {
+                className: headerClasses,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "Litho-Banner__Icon_Container flex-none p-3 pr-2",
+                        children: [
+                            spinner && /*#__PURE__*/ _jsx(Spinner, {
+                                size: "small"
+                            }),
+                            icon && !spinner && /*#__PURE__*/ _jsx(Icon, {
+                                source: icon,
+                                color: statusColors.icon || ""
+                            }),
+                            !icon && !spinner && /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    ![
+                                        "warning",
+                                        "attention",
+                                        "success"
+                                    ].includes(status) && /*#__PURE__*/ _jsx(Icon, {
+                                        source: CircleInformationMajor,
+                                        color: statusColors.icon
+                                    }),
+                                    [
+                                        "warning",
+                                        "attention"
+                                    ].includes(status) && /*#__PURE__*/ _jsx(Icon, {
+                                        source: CircleAlertMajor,
+                                        color: statusColors.icon
+                                    }),
+                                    status === "success" && /*#__PURE__*/ _jsx(Icon, {
+                                        source: TickMinor,
+                                        color: statusColors.icon
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "Litho-Banner__Title grow py-3",
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            color: statusColors.fg,
+                            children: title
+                        })
+                    }),
+                    onDismiss && /*#__PURE__*/ _jsx("div", {
+                        className: "Litho-Banner__Close flex-none p-2",
+                        onClick: onDismiss,
+                        children: /*#__PURE__*/ _jsx("div", {
+                            className: closeIconStyles({
+                                status: status
+                            }),
+                            children: /*#__PURE__*/ _jsx(Icon, {
+                                source: CancelMinor,
+                                color: statusColors.icon
+                            })
+                        })
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsx("div", {
+                className: headerClasses
+            }),
+            hasBodyContent && /*#__PURE__*/ _jsxs("div", {
+                className: "Litho-Banner__Body_Container p-4 ".concat(title ? " dark:border-t dark:border-t-tint-4" : ""),
+                children: [
+                    children && /*#__PURE__*/ _jsx("div", {
+                        className: "Litho-Banner__Body",
+                        children: children
+                    }),
+                    (action || secondaryAction) && /*#__PURE__*/ _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__*/ _jsx(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__*/ _jsx(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__*/ _jsx(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
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+export default Banner;

package/dist/esm/components/Box.js

@@ -0,0 +1,238 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+var styles = tv({
+    base: "Litho-Box",
+    variants: {
+        background: {
+            default: "bg-surface-highest",
+            subdued: "bg-surface-higher"
+        },
+        borderColor: {
+            default: "border-edge-default",
+            subdued: "border-edge-subdued"
+        },
+        borderRadius: {
+            default: "rounded-md",
+            sm: "rounded-sm",
+            lg: "rounded-lg",
+            full: "rounded-full"
+        },
+        borderBlockStartWidth: {
+            none: "border-t-0",
+            "0": "border-t-0",
+            "1": "border-t-1"
+        },
+        borderBlockEndWidth: {
+            none: "border-b-0",
+            "0": "border-b-0",
+            "1": "border-b-1"
+        },
+        borderInlineStartWidth: {
+            none: "border-l-0",
+            "0": "border-l-0",
+            "1": "border-l-1"
+        },
+        borderInlineEndWidth: {
+            none: "border-r-0",
+            "0": "border-r-0",
+            "1": "border-r-1"
+        },
+        padding: {
+            none: "p-0",
+            "0": "p-0",
+            "1": "p-1",
+            "2": "p-2",
+            "3": "p-3",
+            "4": "p-4",
+            "5": "p-5",
+            "6": "p-6",
+            "7": "p-7",
+            "8": "p-8",
+            "9": "p-9",
+            "10": "p-10"
+        },
+        paddingBlockStart: {
+            none: "pt-0",
+            "0": "pt-0",
+            "1": "pt-1",
+            "2": "pt-2",
+            "3": "pt-3",
+            "4": "pt-4",
+            "5": "pt-5",
+            "6": "pt-6",
+            "7": "pt-7",
+            "8": "pt-8",
+            "9": "pt-9",
+            "10": "pt-10"
+        },
+        paddingBlockEnd: {
+            none: "pb-0",
+            "0": "pb-0",
+            "1": "pb-1",
+            "2": "pb-2",
+            "3": "pb-3",
+            "4": "pb-4",
+            "5": "pb-5",
+            "6": "pb-6",
+            "7": "pb-7",
+            "8": "pb-8",
+            "9": "pb-9",
+            "10": "pb-10"
+        },
+        paddingInlineStart: {
+            none: "pl-0",
+            "0": "pl-0",
+            "1": "pl-1",
+            "2": "pl-2",
+            "3": "pl-3",
+            "4": "pl-4",
+            "5": "pl-5",
+            "6": "pl-6",
+            "7": "pl-7",
+            "8": "pl-8",
+            "9": "pl-9",
+            "10": "pl-10"
+        },
+        paddingInlineEnd: {
+            none: "pr-0",
+            "0": "pr-0",
+            "1": "pr-1",
+            "2": "pr-2",
+            "3": "pr-3",
+            "4": "pr-4",
+            "5": "pr-5",
+            "6": "pr-6",
+            "7": "pr-7",
+            "8": "pr-8",
+            "9": "pr-9",
+            "10": "pr-10"
+        },
+        overflow: {
+            hidden: "overflow-hidden",
+            scroll: "overflow-scroll"
+        },
+        overflowX: {
+            hidden: "overflow-x-hidden",
+            scroll: "overflow-x-scroll"
+        },
+        overflowY: {
+            hidden: "overflow-y-hidden",
+            scroll: "overflow-y-scroll"
+        },
+        position: {
+            relative: "relative",
+            absolute: "absolute",
+            fixed: "fixed",
+            sticky: "sticky"
+        }
+    }
+});
+/**
+ * Renders a customizable Box component with various styling options.
+ *
+ * @component
+ * @param {Object} props - Properties to configure the Box component.
+ * @param {string} [props.as='div'] - The HTML element to render as. Defaults to `div`.
+ * @param {'default' | 'subdued'} [props.background] - Background color variant.
+ * @param {'default' | 'subdued'} [props.borderColor] - Border color variant.
+ * @param {'default' | 'sm' | 'lg' | 'full'} [props.borderRadius] - Border radius variant.
+ * @param {'none' | '0' | '1'} [props.borderBlockStartWidth] - Top border width variant.
+ * @param {'none' | '0' | '1'} [props.borderBlockEndWidth] - Bottom border width variant.
+ * @param {'none' | '0' | '1'} [props.borderInlineStartWidth] - Left border width variant.
+ * @param {'none' | '0' | '1'} [props.borderInlineEndWidth] - Right border width variant.
+ * @param {'none' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10'} [props.padding] - Padding for all sides.
+ * @param {'none' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10'} [props.paddingBlockStart] - Top padding.
+ * @param {'none' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10'} [props.paddingBlockEnd] - Bottom padding.
+ * @param {'none' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10'} [props.paddingInlineStart] - Left padding.
+ * @param {'none' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10'} [props.paddingInlineEnd] - Right padding.
+ * @param {'hidden' | 'scroll'} [props.overflow] - Overflow setting for all sides.
+ * @param {'hidden' | 'scroll'} [props.overflowX] - Overflow setting for x-axis.
+ * @param {'hidden' | 'scroll'} [props.overflowY] - Overflow setting for y-axis.
+ * @param {'relative' | 'absolute' | 'fixed' | 'sticky'} [props.position] - CSS positioning of the box.
+ * @param {React.ReactNode} [props.children] - Child elements to render inside the Box.
+ * @param {string} [props.id] - ID for the Box element.
+ * @param {number | string} [props.height] - CSS height of the Box.
+ * @param {number | string} [props.width] - CSS width of the Box.
+ * @param {number | string} [props.minHeight] - Minimum CSS height.
+ * @param {number | string} [props.maxHeight] - Maximum CSS height.
+ * @param {number | string} [props.minWidth] - Minimum CSS width.
+ * @param {number | string} [props.maxWidth] - Maximum CSS width.
+ * @param {number | string} [props.zIndex] - CSS z-index.
+ * @param {Object} [props.style] - Additional inline styles for the Box.
+ * 
+ * @returns {JSX.Element} A rendered Box component with customized styling.
+*/ function Box() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _props_as = props.as, as = _props_as === void 0 ? 'div' : _props_as, background = props.background, borderColor = props.borderColor, borderBlockStartWidth = props.borderBlockStartWidth, borderBlockEndWidth = props.borderBlockEndWidth, borderInlineStartWidth = props.borderInlineStartWidth, borderInlineEndWidth = props.borderInlineEndWidth, borderRadius = props.borderRadius, children = props.children, id = props.id, height = props.height, width = props.width, minHeight = props.minHeight, maxHeight = props.maxHeight, minWidth = props.minWidth, maxWidth = props.maxWidth, overflow = props.overflow, overflowX = props.overflowX, overflowY = props.overflowY, padding = props.padding, paddingBlockStart = props.paddingBlockStart, paddingBlockEnd = props.paddingBlockEnd, paddingInlineStart = props.paddingInlineStart, paddingInlineEnd = props.paddingInlineEnd, position = props.position, zIndex = props.zIndex, onClick = props.onClick, style = props.style, className = props.className;
+    var classes = styles({
+        background: background,
+        borderColor: borderColor,
+        borderBlockStartWidth: borderBlockStartWidth,
+        borderBlockEndWidth: borderBlockEndWidth,
+        borderInlineStartWidth: borderInlineStartWidth,
+        borderInlineEndWidth: borderInlineEndWidth,
+        borderRadius: borderRadius,
+        position: position,
+        overflow: overflow,
+        overflowX: overflowX,
+        overflowY: overflowY,
+        padding: padding,
+        paddingBlockStart: paddingBlockStart,
+        paddingBlockEnd: paddingBlockEnd,
+        paddingInlineStart: paddingInlineStart,
+        paddingInlineEnd: paddingInlineEnd
+    });
+    var inlineStyles = _object_spread({}, style && _object_spread({}, style), zIndex && {
+        zIndex: zIndex
+    }, height && {
+        height: height
+    }, width && {
+        width: width
+    }, minHeight && {
+        minHeight: minHeight
+    }, maxHeight && {
+        maxHeight: maxHeight
+    }, minWidth && {
+        minWidth: minWidth
+    }, maxWidth && {
+        maxWidth: maxWidth
+    });
+    var Element = as;
+    return /*#__PURE__*/ _jsx(Element, {
+        id: id,
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        style: inlineStyles,
+        onClick: onClick,
+        children: children
+    });
+}
+;
+export default Box;