@heymantle/litho 0.0.1

package/dist/esm/components/Tip.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { cloneElement, isValidElement, useMemo } from "react";
+import { tv } from "tailwind-variants";
+import { Icon } from "../index.js";
+import { AlertMinor, CancelMinor, InfoMinor } from "@shopify/polaris-icons";
+var styles = tv({
+    base: "Litho-Tip relative flex rounded-md p-2",
+    variants: {
+        status: {
+            success: "bg-success-alt text-success-alt-fg",
+            critical: "bg-critical-alt text-critical-alt-fg",
+            warning: "bg-attention-alt text-attention-alt-fg",
+            attention: "bg-attention-alt text-attention-alt-fg",
+            highlight: "bg-highlight-alt text-highlight-alt-fg",
+            insight: "bg-insight-alt text-insight-alt-fg",
+            info: "bg-info-alt text-info-alt-fg",
+            plain: "bg-transparent text-subdued px-0!"
+        },
+        dismissible: {
+            true: "pr-8"
+        },
+        clickable: {
+            true: "cursor-pointer"
+        },
+        border: {
+            true: "border border-tint-2"
+        }
+    },
+    defaultVariants: {
+        status: "info",
+        dismissible: false,
+        clickable: false,
+        border: false
+    },
+    compoundVariants: [
+        {
+            clickable: true,
+            status: "info",
+            className: "hover:outline hover:outline-info-alt-lower"
+        }
+    ]
+});
+var innerStyles = tv({
+    base: "flex gap-2 items-start flex-1",
+    variants: {
+        align: {
+            left: "justify-start",
+            right: "justify-end",
+            center: "justify-center"
+        }
+    },
+    defaultVariants: {
+        align: "left"
+    }
+});
+var dismissButtonStyles = tv({
+    base: "absolute top-1 right-1 p-1 rounded-md bg-transparent",
+    variants: {
+        status: {
+            success: "hover:bg-success-alt-lower",
+            critical: "hover:bg-critical-alt-lower",
+            warning: "hover:bg-attention-alt-lower",
+            attention: "hover:bg-attention-alt-lower",
+            info: "hover:bg-info-alt-lower",
+            highlight: "hover:bg-highlight-alt-lower",
+            insight: "hover:bg-insight-alt-lower"
+        }
+    }
+});
+var statusHelpers = {
+    info: {},
+    critical: {
+        icon: AlertMinor
+    },
+    success: {},
+    warning: {
+        icon: AlertMinor
+    },
+    attention: {},
+    highlight: {},
+    neutral: {}
+};
+/**
+ * Tip component for displaying informational messages with optional dismiss functionality.
+ *
+ * @param {Object} props - The component props.
+ * @param {"info" | "critical" | "success" | "warning" | "attention" | "highlight" | "neutral"} [props.status="info"] - The status type of the tip.
+ * @param {Function} [props.onDismiss] - Function to call when the dismiss button is clicked.
+ * @param {Function} [props.onClick] - Function to call when the tip is clicked.
+ * @param {React.ReactNode} props.children - The content of the tip.
+ * @param {React.ElementType} [props.icon] - Custom icon for the tip.
+ * @param {"left" | "right" | "center"} [props.align="left"] - The alignment of the tip.
+ * @returns {JSX.Element} The rendered Tip component.
+ */ function Tip() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _statusHelpers_status;
+    var _props_status = props.status, status = _props_status === void 0 ? "info" : _props_status, onClick = props.onClick, onDismiss = props.onDismiss, children = props.children, _icon = props.icon, _props_align = props.align, align = _props_align === void 0 ? "left" : _props_align, border = props.border;
+    var icon = _icon === null ? null : _icon || ((_statusHelpers_status = statusHelpers[status]) === null || _statusHelpers_status === void 0 ? void 0 : _statusHelpers_status.icon) || InfoMinor;
+    var classes = styles({
+        status: status,
+        dismissible: !!onDismiss,
+        clickable: !!onClick,
+        border: border
+    });
+    var base = "-alt-icon";
+    var iconColorMap = {
+        critical: "critical".concat(base),
+        success: "success".concat(base),
+        warning: "warning".concat(base),
+        attention: "attention".concat(base),
+        info: "info".concat(base),
+        highlight: "highlight".concat(base),
+        insight: "insight".concat(base),
+        neutral: "neutral".concat(base),
+        default: "info".concat(base)
+    };
+    var iconColor = iconColorMap[status] || iconColorMap.default;
+    var processedChildren = useMemo(function() {
+        var processChildren = function(children) {
+            return React.Children.toArray(children).map(function(child) {
+                if (!/*#__PURE__*/ isValidElement(child)) return child;
+                if (child.type.displayName === "Link") {
+                    return /*#__PURE__*/ cloneElement(child, {
+                        color: status
+                    });
+                }
+                if (!child.props.children) return child;
+                return /*#__PURE__*/ cloneElement(child, {
+                    children: processChildren(child.props.children)
+                });
+            });
+        };
+        return processChildren(children);
+    }, [
+        children,
+        status
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: classes,
+        onClick: onClick,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: innerStyles({
+                    align: align
+                }),
+                children: [
+                    icon && /*#__PURE__*/ _jsx(Icon, {
+                        source: icon,
+                        color: iconColor
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        children: processedChildren
+                    })
+                ]
+            }),
+            onDismiss && /*#__PURE__*/ _jsx("button", {
+                onClick: onDismiss,
+                className: dismissButtonStyles({
+                    status: status
+                }),
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    source: CancelMinor,
+                    color: iconColor
+                })
+            })
+        ]
+    });
+}
+export default Tip;

package/dist/esm/components/Tooltip.js

@@ -0,0 +1,380 @@
+"use client";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+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 _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+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;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { tv } from "tailwind-variants";
+import { Text, VerticalStack, List, Icon } from "../index.js";
+import { CircleInformationMajor } from "@shopify/polaris-icons";
+var styles = tv({
+    base: "Litho-TooltipContainer relative w-auto h-auto",
+    variants: {
+        display: {
+            inline: "inline",
+            "inline-block": "inline-block",
+            block: "block"
+        },
+        hasUnderline: {
+            true: "Litho-TooltipContainer--HasUnderline border-b border-dotted",
+            false: ""
+        }
+    }
+});
+var wrapperStyles = tv({
+    base: "Litho-TooltipWrapper absolute w-60 flex",
+    variants: {
+        preferredPosition: {
+            above: "bottom-full pb-2",
+            below: "top-full pt-2"
+        },
+        alignment: {
+            center: "left-1/2 -translate-x-1/2 justify-center",
+            left: "left-0 justify-start",
+            right: "right-0 justify-end"
+        },
+        dismissOnMouseOut: {
+            true: "pointer-events-none",
+            false: "pointer-events-auto"
+        }
+    },
+    defaultVariants: {
+        preferredPosition: "below",
+        alignment: "center",
+        dismissOnMouseOut: true
+    }
+});
+var tooltipStyles = tv({
+    base: "Litho-Tooltip inline-block w-auto max-w-60 whitespace-normal overflow-hidden bg-surface-alternate text-alternate dark:text-highest py-1.5 px-3 rounded-md",
+    variants: {
+        alignment: {
+            center: "text-center",
+            left: "text-left",
+            right: "text-right"
+        }
+    },
+    defaultVariants: {
+        alignment: "center"
+    }
+});
+var arrowStyles = tv({
+    base: "Litho-TooltipArrow absolute w-0 h-0 border-l-transparent border-r-transparent border-l-6 border-r-6",
+    variants: {
+        preferredPosition: {
+            above: "Litho-TooltipArrow--Above mb-0.5 bottom-full border-b-0 border-t-6 border-t-surface-alternate",
+            below: "Litho-TooltipArrow--Below mt-0.5 top-full border-t-0 border-b-6 border-b-surface-alternate"
+        },
+        alignment: {
+            center: "left-1/2 -translate-x-1/2",
+            left: "left-2.5",
+            right: "right-2.5"
+        }
+    },
+    defaultVariants: {
+        preferredPosition: "below",
+        alignment: "center"
+    }
+});
+/**
+ * @typedef {Object} TooltipContentItem
+ * @property {'paragraph' | 'heading' | 'list'} type - The type of content item
+ * @property {string | string[]} content - The content of the item. For 'list' type, this should be an array of strings
+ */ /**
+ * @typedef {Object} TooltipContentObject
+ * @property {string} [heading] - Optional heading text for the tooltip
+ * @property {TooltipContentItem[]} content - Array of content items to display in the tooltip
+ */ /**
+ * Tooltip component for displaying contextual information when hovering over an element.
+ * The tooltip can be positioned above or below the activator with customizable alignment.
+ * It includes optional underline styling and supports dynamic z-index overrides.
+ *
+ * @component
+ *
+ * @param {Object} props - The props for the Tooltip component.
+ * @param {React.ReactNode} props.children - The content that triggers the tooltip on hover.
+ * @param {React.ReactNode | TooltipContentObject} props.content - The content displayed inside the tooltip. Can be either a React node or a structured content object.
+ * @param {boolean} [props.dismissOnMouseOut=true] - Whether the tooltip should be dismissed when the mouse leaves the activator.
+ * @param {boolean} [props.dismissOnActivatorClick=true] - Whether the tooltip should be dismissed when clicking the activator.
+ * @param {"above" | "below"} [props.preferredPosition="below"] - The preferred position of the tooltip relative to the activator.
+ * @param {"center" | "left" | "right"} [props.alignment="center"] - The alignment of the tooltip content.
+ * @param {number} [props.hoverDelay=0] - The delay (in milliseconds) before showing the tooltip on hover.
+ * @param {boolean} [props.hasUnderline=false] - Whether the activator should have an underline.
+ * @param {number | boolean} [props.zIndexOverride] - Override for the z-index of the tooltip.
+ * @param {"inline" | "inline-block" | "block"} [props.display="inline-block"] - The display property of the tooltip container.
+ *
+ * @returns {React.ReactElement} The rendered Tooltip component.
+ *
+ * @example
+ * // Basic usage with string content
+ * <Tooltip content="This is a tooltip">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * // Using structured content object
+ * <Tooltip content={{
+ *   heading: "Important Information",
+ *   content: [
+ *     { type: "paragraph", content: "This is a paragraph." },
+ *     { type: "list", content: ["Item 1", "Item 2", "Item 3"] }
+ *   ]
+ * }}>
+ *   <span>Hover for structured content</span>
+ * </Tooltip>
+ */ function Tooltip() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _props_display = props.display, display = _props_display === void 0 ? "inline-block" : _props_display, children = props.children, content = props.content, _props_dismissOnMouseOut = props.dismissOnMouseOut, dismissOnMouseOut = _props_dismissOnMouseOut === void 0 ? true : _props_dismissOnMouseOut, _props_dismissOnActivatorClick = props.dismissOnActivatorClick, dismissOnActivatorClick = _props_dismissOnActivatorClick === void 0 ? true : _props_dismissOnActivatorClick, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_alignment = props.alignment, alignment = _props_alignment === void 0 ? "center" : _props_alignment, _props_hoverDelay = props.hoverDelay, hoverDelay = _props_hoverDelay === void 0 ? 0 : _props_hoverDelay, _props_hasUnderline = props.hasUnderline, hasUnderline = _props_hasUnderline === void 0 ? false : _props_hasUnderline, zIndexOverride = props.zIndexOverride;
+    var activatorRef = useRef(null);
+    var tooltipRef = useRef(null);
+    var _useState = _sliced_to_array(useState({
+        top: 0,
+        left: 0
+    }), 2), tooltipStyle = _useState[0], setTooltipStyle = _useState[1];
+    var _useState1 = _sliced_to_array(useState(false), 2), isVisible = _useState1[0], setIsVisible = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(preferredPosition), 2), actualPosition = _useState2[0], setActualPosition = _useState2[1];
+    var classes = styles({
+        hasUnderline: hasUnderline,
+        display: display,
+        alignment: alignment
+    });
+    var wrapperClasses = wrapperStyles({
+        preferredPosition: actualPosition,
+        alignment: alignment,
+        dismissOnMouseOut: dismissOnMouseOut
+    });
+    var tooltipClasses = tooltipStyles({
+        alignment: alignment
+    });
+    var arrowClasses = arrowStyles({
+        preferredPosition: actualPosition,
+        alignment: alignment
+    });
+    var STYLE_OVERRIDES = _object_spread({}, zIndexOverride && {
+        zIndex: zIndexOverride
+    });
+    var hoverTimeoutRef = useRef(null);
+    useEffect(function() {
+        if (isVisible && tooltipRef.current && activatorRef.current) {
+            var tooltipRect = tooltipRef.current.getBoundingClientRect();
+            var activatorRect = activatorRef.current.getBoundingClientRect();
+            var viewportHeight = window.innerHeight;
+            var spaceAbove = activatorRect.top;
+            var spaceBelow = viewportHeight - activatorRect.bottom;
+            if (preferredPosition === "below" && spaceBelow < tooltipRect.height) {
+                setActualPosition("above");
+            } else if (preferredPosition === "above" && spaceAbove < tooltipRect.height) {
+                setActualPosition("below");
+            } else {
+                setActualPosition(preferredPosition);
+            }
+        }
+    }, [
+        isVisible,
+        preferredPosition
+    ]);
+    useEffect(function() {
+        if (isVisible) {
+            var activatorRect = activatorRef.current.getBoundingClientRect();
+            setTooltipStyle({
+                top: activatorRect.top + window.scrollY,
+                left: activatorRect.left + window.scrollX,
+                width: activatorRect.width,
+                height: activatorRect.height
+            });
+        }
+    }, [
+        isVisible
+    ]);
+    var handleMouseEnter = function() {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+        if (hoverDelay > 0) {
+            hoverTimeoutRef.current = setTimeout(function() {
+                setIsVisible(true);
+            }, hoverDelay);
+        } else {
+            setIsVisible(true);
+        }
+    };
+    var handleMouseLeave = function() {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+        setTimeout(function() {
+            var _tooltipRef_current;
+            if (!((_tooltipRef_current = tooltipRef.current) === null || _tooltipRef_current === void 0 ? void 0 : _tooltipRef_current.contains(document.activeElement))) {
+                setIsVisible(false);
+            }
+        }, 10);
+    };
+    var blockForItem = function(param) {
+        var item = param.item, key = param.key;
+        if (item.type == "paragraph") {
+            return /*#__PURE__*/ _jsx(Text, {
+                variant: "bodySm",
+                alignment: "start",
+                children: item.content
+            }, key);
+        } else if (item.type === "heading") {
+            return /*#__PURE__*/ _jsx(Text, {
+                variant: "headingSm",
+                alignment: "start",
+                children: item.content
+            }, key);
+        } else if (item.type == "list") {
+            return /*#__PURE__*/ _jsx(VerticalStack, {
+                inlineAlign: "start",
+                align: "start",
+                children: /*#__PURE__*/ _jsx(List, {
+                    type: "bullet",
+                    children: item.content.map(function(item) {
+                        return /*#__PURE__*/ _jsx(List.Item, {
+                            children: /*#__PURE__*/ _jsx(Text, {
+                                alignment: "start",
+                                variant: "bodySm",
+                                children: item
+                            })
+                        }, item);
+                    })
+                })
+            }, key);
+        }
+    };
+    var tooltipContent = (typeof content === "undefined" ? "undefined" : _type_of(content)) === "object" && (content.heading || content.content) ? /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col gap-1.5 py-1",
+        children: [
+            content.heading && blockForItem({
+                item: {
+                    type: "heading",
+                    content: content.heading
+                },
+                key: "heading"
+            }),
+            content.content.map(function(item, index) {
+                return blockForItem({
+                    item: item,
+                    key: index
+                });
+            })
+        ]
+    }) : content;
+    var handleActivatorClick = function() {
+        if (isVisible) {
+            setIsVisible(false);
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: classes,
+        ref: activatorRef,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onClick: dismissOnActivatorClick ? handleActivatorClick : undefined,
+        children: [
+            children ? children : /*#__PURE__*/ _jsx(Icon, {
+                source: CircleInformationMajor,
+                color: "subdued"
+            }),
+            isVisible && /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsxs("div", {
+                className: "Litho-TooltipPortal absolute pointer-events-none",
+                style: tooltipStyle,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        ref: tooltipRef,
+                        className: wrapperClasses,
+                        style: STYLE_OVERRIDES,
+                        onMouseEnter: dismissOnMouseOut ? undefined : handleMouseEnter,
+                        onMouseLeave: dismissOnMouseOut ? undefined : handleMouseLeave,
+                        children: /*#__PURE__*/ _jsx("div", {
+                            className: tooltipClasses,
+                            children: tooltipContent
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: arrowClasses,
+                        style: STYLE_OVERRIDES
+                    })
+                ]
+            }), document.body)
+        ]
+    });
+}
+export default Tooltip;