@heymantle/litho 0.0.9 → 0.0.12

package/dist/esm/components/ChoiceList.js

@@ -30,7 +30,7 @@ import Icon from "./Icon.js";
 import Label from "./Label.js";
 import RadioButton from "./RadioButton.js";
 import Text from "./Text.js";
-import VerticalStack from "./VerticalStack.js";
+import Stack from "./Stack.js";
 import { CircleAlertMajor } from "@shopify/polaris-icons";
 var styles = tv({
     base: "Litho-ChoiceList flex flex-col gap-1"
@@ -84,7 +84,8 @@ var styles = tv({
                 tooltip: tooltip,
                 children: title
             }),
-            /*#__PURE__*/ _jsx(VerticalStack, {
+            /*#__PURE__*/ _jsx(Stack, {
+                gap: "none",
                 children: choices.map(function(choice, index) {
                     return /*#__PURE__*/ _jsxs("div", {
                         children: [

package/dist/esm/components/Code.js

@@ -0,0 +1,212 @@
+"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 ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        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 _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 { useState } from "react";
+import { tv } from "tailwind-variants";
+import { ClipboardMinor, ClipboardCheckFilledMajor } from "@shopify/polaris-icons";
+import Button from "./Button.js";
+var styles = tv({
+    base: "Litho-Code p-2.5 bg-surface-normal shadow-inset rounded-md font-mono text-xs overflow-x-auto whitespace-pre"
+});
+var containerStyles = tv({
+    base: "Litho-Code-container relative group"
+});
+/**
+ * A code component that renders code blocks with consistent styling.
+ *
+ * @param {Object} props - Properties to customize the code component.
+ * @param {string} [props.className] - Additional CSS class names.
+ * @param {Function} [props.onCopy] - Function to handle copy action.
+ * @param {React.ReactNode} props.children - The code content to be displayed.
+ * @returns {JSX.Element} Rendered code block with applied styles.
+ *
+ * @example
+ * <Code>
+ *   {`const example = "code";`}
+ * </Code>
+ *
+ * @example
+ * <Code onCopy={() => {
+ *   navigator.clipboard.writeText(children);
+ * }}>
+ *   {`const example = "code";`}
+ * </Code>
+ */ function Code() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var className = props.className, onCopy = props.onCopy, children = props.children, rest = _object_without_properties(props, [
+        "className",
+        "onCopy",
+        "children"
+    ]);
+    var _useState = _sliced_to_array(useState(false), 2), copied = _useState[0], setCopied = _useState[1];
+    var classes = styles();
+    var containerClasses = containerStyles();
+    var getTextContent = function(node) {
+        var _node_props;
+        if (typeof node === "string") {
+            return node;
+        }
+        if (typeof node === "number") {
+            return String(node);
+        }
+        if (Array.isArray(node)) {
+            return node.map(getTextContent).join("");
+        }
+        if (node === null || node === void 0 ? void 0 : (_node_props = node.props) === null || _node_props === void 0 ? void 0 : _node_props.children) {
+            return getTextContent(node.props.children);
+        }
+        return "";
+    };
+    var handleCopy = function() {
+        if (onCopy) {
+            onCopy();
+            setCopied(true);
+            setTimeout(function() {
+                setCopied(false);
+            }, 2000);
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: containerClasses,
+        children: [
+            onCopy && /*#__PURE__*/ _jsx("div", {
+                className: "absolute top-1 right-1 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-200",
+                children: /*#__PURE__*/ _jsx(Button, {
+                    size: "small",
+                    icon: copied ? ClipboardCheckFilledMajor : ClipboardMinor,
+                    onClick: handleCopy,
+                    tooltip: copied ? undefined : "Copy to clipboard"
+                })
+            }),
+            /*#__PURE__*/ _jsx("pre", _object_spread_props(_object_spread({}, rest), {
+                className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+                children: children
+            }))
+        ]
+    });
+}
+export default Code;

package/dist/esm/components/Filters.js

@@ -110,7 +110,7 @@ function _unsupported_iterable_to_array(o, minLen) {
     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, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { tv } from "tailwind-variants";
 import ActionList from "./ActionList.js";
 import Button from "./Button.js";
@@ -123,7 +123,7 @@ import Tooltip from "./Tooltip.js";
 import { CancelSmallMinor, CaretDownMinor, DeleteMinor, HorizontalDotsMinor, PlusMinor, SearchMajor, ChevronLeftMinor, ChevronRightMinor } from "@shopify/polaris-icons";
 import { useDarkMode } from "./AppProvider.js";
 var styles = tv({
-    base: "Litho-Filters flex items-center",
+    base: "Litho-Filters flex items-center overflow-x-auto",
     variants: {
         showTextField: {
             true: "justify-between",

package/dist/esm/components/Frame.js

@@ -60,7 +60,7 @@ var frameStyles = tv({
     base: "Litho-Frame bg-surface-normal",
     variants: {
         paneIsOpen: {
-            true: "md:mr-[var(--litho-pane-width)]"
+            true: "mr-[var(--litho-pane-collapsed-width)] sm:mr-0 md:mr-[var(--litho-pane-width)]"
         }
     },
     defaultVariants: {
@@ -71,7 +71,7 @@ var frameHeaderStyles = tv({
     base: "Litho-Frame-Header bg-surface-normal fixed left-0 right-0 top-0",
     variants: {
         paneIsOpen: {
-            true: "md:mr-[var(--litho-pane-width)]"
+            true: "mr-[var(--litho-pane-width)] md:mr-[var(--litho-pane-width)]"
         }
     },
     defaultVariants: {

package/dist/esm/components/Layout.js

@@ -7,10 +7,14 @@ import Text from "./Text.js";
 import { useFrame } from "./Frame.js";
 export var LayoutContext = /*#__PURE__*/ createContext();
 var styles = tv({
-    base: "Litho-Layout flex flex-col gap-4 w-full max-w-full",
+    base: "Litho-Layout flex gap-4 w-full max-w-full",
     variants: {
         hasSidebarSection: {
             true: ""
+        },
+        reverseOnMobile: {
+            true: "flex-col-reverse @lg:flex-row",
+            false: "flex-col"
         }
     },
     compoundVariants: [
@@ -23,11 +27,17 @@ var styles = tv({
             hasSidebarSection: true,
             embedded: true,
             className: "@lg-embed:flex-row @lg-embed:items-start @lg-embed:gap-5"
+        },
+        {
+            reverseOnMobile: true,
+            embedded: true,
+            className: "@lg-embed:flex-row"
         }
     ],
     defaultVariants: {
         hasSidebarSection: false,
-        embedded: false
+        embedded: false,
+        reverseOnMobile: false
     }
 });
 /**
@@ -39,11 +49,12 @@ var styles = tv({
  *
  * @param {Object} props - Component props.
  * @param {React.ReactNode} props.children - The content to render inside the layout.
+ * @param {boolean} [props.reverseOnMobile] - If true, reverses the flex direction on mobile devices.
  * @returns {JSX.Element} The rendered layout component.
  */ function Layout() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var embedded = useFrame().embedded;
-    var children = props.children;
+    var children = props.children, reverseOnMobile = props.reverseOnMobile;
     var analyzeChildren = function(children) {
         var depth = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
         if (depth > 3) return {
@@ -89,7 +100,8 @@ var styles = tv({
     var hasSidebarSection = sections.length > 0;
     var classes = styles({
         hasSidebarSection: hasSidebarSection,
-        embedded: embedded
+        embedded: embedded,
+        reverseOnMobile: reverseOnMobile
     });
     var wrappedChildren = hasSection ? children : /*#__PURE__*/ _jsx(Layout.Section, {
         children: children

package/dist/esm/components/Link.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
+import Icon from "./Icon.js";
 var styles = tv({
     base: "Litho-Link cursor-pointer hover:underline",
     variants: {
@@ -17,6 +18,10 @@ var styles = tv({
         disabled: {
             true: "text-lowest hover:text-lowest cursor-default hover:no-underline",
             false: ""
+        },
+        hasIcon: {
+            true: "inline-flex items-center gap-1",
+            false: ""
         }
     },
     compoundVariants: [
@@ -62,6 +67,12 @@ var styles = tv({
             color: "highlight",
             className: "text-highlight-alt-fg dark:text-highlight-alt-fg-dark"
         },
+        {
+            disabled: false,
+            monochrome: false,
+            color: "insight",
+            className: "text-insight-text dark:text-insight-text"
+        },
         {
             disabled: false,
             monochrome: false,
@@ -85,6 +96,7 @@ var styles = tv({
  * @param {React.ReactNode} props.children - Content to display within the link.
  * @param {Function} [props.onClick] - Optional click event handler for the link.
  * @param {boolean} [props.external=false] - If true, opens the link in a new tab.
+ * @param {boolean} [props.insight=false] - If true, set the color and iconColor to insight
  * @param {string} [props.target] - Optional target attribute for specifying where to open the link.
  * @param {string} [props.id] - Optional id attribute for the link.
  * @param {boolean} [props.monochrome=false] - If true, applies monochrome color scheme.
@@ -93,19 +105,24 @@ var styles = tv({
  * @param {string} [props.dataPrimaryLink] - Optional data attribute for custom tracking.
  * @param {Function} [props.onMouseEnter] - Optional mouse enter event handler for the link.
  * @param {Function} [props.onMouseLeave] - Optional mouse leave event handler for the link.
+ * @param {React.ReactNode} [props.icon] - Optional icon to display within the link.
  *
  * @returns {JSX.Element} Rendered link element.
  */ function Link() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var url = props.url, children = props.children, onClick = props.onClick, external = props.external, target = props.target, _props_bold = props.bold, bold = _props_bold === void 0 ? false : _props_bold, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, id = props.id, monochrome = props.monochrome, removeUnderline = props.removeUnderline, accessibilityLabel = props.accessibilityLabel, dataPrimaryLink = props.dataPrimaryLink, color = props.color, className = props.className, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
+    var url = props.url, children = props.children, onClick = props.onClick, external = props.external, target = props.target, _props_bold = props.bold, bold = _props_bold === void 0 ? false : _props_bold, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_insight = props.insight, insight = _props_insight === void 0 ? false : _props_insight, id = props.id, monochrome = props.monochrome, removeUnderline = props.removeUnderline, accessibilityLabel = props.accessibilityLabel, dataPrimaryLink = props.dataPrimaryLink, _color = props.color, className = props.className, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, icon = props.icon, _iconColor = props.iconColor, _props_iconSize = props.iconSize, iconSize = _props_iconSize === void 0 ? "sm" : _props_iconSize;
+    var hasIcon = icon !== undefined;
+    var color = insight ? "insight" : _color;
+    var iconColor = insight ? "insight" : _iconColor;
     var classes = styles({
         monochrome: monochrome,
         removeUnderline: removeUnderline,
         bold: bold,
         disabled: disabled,
-        color: color
+        color: color,
+        hasIcon: hasIcon
     });
-    return /*#__PURE__*/ _jsx("a", {
+    return /*#__PURE__*/ _jsxs("a", {
         href: disabled ? undefined : url,
         className: "".concat(classes).concat(className ? " ".concat(className) : ""),
         onClick: disabled ? undefined : onClick,
@@ -115,7 +132,16 @@ var styles = tv({
         "data-primary-link": dataPrimaryLink,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
-        children: children
+        children: [
+            icon && /*#__PURE__*/ _jsx(Icon, {
+                source: icon,
+                color: iconColor,
+                size: iconSize
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                children: children
+            })
+        ]
     });
 }
 ;

package/dist/esm/components/Modal.js

@@ -60,6 +60,7 @@ import Spinner from "./Spinner.js";
 import Text from "./Text.js";
 import Tooltip from "./Tooltip.js";
 import { useFrame } from "./Frame.js";
+import { useBodyScrollLock } from "../utilities/useBodyScrollLock.js";
 export var ModalContext = /*#__PURE__*/ createContext(false);
 var containerStyles = tv({
     base: "Litho-ModalContainer fixed inset-0 block flex flex-col justify-end md:justify-center items-center pointer-events-none"
@@ -134,6 +135,7 @@ var sectionStyles = tv({
  * @param {string} [props.size="default"] - The size of the modal (default, large, or full).
  * @param {React.ReactNode} [props.leftAccessory] - Left accessory content in the footer.
  * @param {boolean} [props.hideCloseButton=false] - Whether to hide the close button.
+ * @param {Function} [props.backAction] - Callback function for the back button. When provided, displays a back button next to the title.
  * @param {number} [props.zIndexOverride=1000] - The z-index of the modal.
  * @param {boolean} [props.autoFocusFirstInput=true] - Whether to focus the first input when the modal opens.
  * @param {string} [props.bodyClassName] - Additional CSS classes to apply to the modal body.
@@ -164,6 +166,8 @@ var sectionStyles = tv({
             document.body.removeChild(div);
         };
     }, []);
+    // Lock body scroll when modal is open
+    useBodyScrollLock(open);
     useEffect(function() {
         setModalIsOpen(open);
         if (!open || !onClose) return;

package/dist/esm/components/Page.js

@@ -364,8 +364,9 @@ var contentStyles = tv({
                                                             return closePopover(index);
                                                         },
                                                         activator: /*#__PURE__*/ _jsx(Button, {
-                                                            plain: true,
+                                                            plain: !action.insight,
                                                             disclosure: true,
+                                                            insight: action.insight,
                                                             icon: action.icon,
                                                             onClick: function() {
                                                                 return togglePopover(index);
@@ -381,7 +382,7 @@ var contentStyles = tv({
                                                     }, index);
                                                 }
                                                 return /*#__PURE__*/ _jsx(Button, {
-                                                    plain: !action.destructive,
+                                                    plain: !action.destructive && !action.insight,
                                                     onClick: action.onAction || action.onClick,
                                                     disabled: action.disabled,
                                                     icon: action.icon,
@@ -389,7 +390,9 @@ var contentStyles = tv({
                                                     external: action.external,
                                                     url: action.url,
                                                     destructive: action.destructive,
+                                                    insight: action.insight,
                                                     tooltip: action.tooltip,
+                                                    className: action.insight ? "mx-0.5" : "",
                                                     children: action.content
                                                 }, index);
                                             })