@heymantle/litho 0.0.1

package/dist/cjs/components/FrameSaveBar.js

@@ -0,0 +1,239 @@
+"use client";
+"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 _react = require("react");
+var _AppProvider = require("../components/AppProvider");
+var _tailwindvariants = require("tailwind-variants");
+var _index = require("../index");
+var _polarisicons = require("@shopify/polaris-icons");
+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 _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 _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);
+}
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-FrameSaveBar fixed top-[var(--litho-header-offset)] right-0 left-0 h-[var(--litho-header-height)] px-4 @md:px-5 flex items-center gap-2 bg-surface-alternate dark:bg-brand transition-opacity transition-transform duration-300 transform",
+    variants: {
+        visible: {
+            true: "opacity-100 pointer-events-auto",
+            false: "opacity-0 pointer-events-none"
+        },
+        tucked: {
+            true: "-translate-y-full",
+            false: "translate-y-0"
+        },
+        paneIsOpen: {
+            true: "right-[var(--litho-pane-width)]",
+            false: "right-0"
+        }
+    },
+    defaultVariants: {
+        visible: false,
+        tucked: false,
+        paneIsOpen: false
+    }
+});
+var toggleStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-FrameSaveBar__Toggle hidden @md:block bg-surface-alternate dark:bg-brand rounded-b-md fixed -translate-x-1/2 top-0 transition-transform duration-300 transform",
+    variants: {
+        tucked: {
+            true: "translate-y-0",
+            false: "-translate-y-full"
+        },
+        paneIsOpen: {
+            true: "left-[calc(50%-var(--litho-pane-width)/2)]",
+            false: "left-1/2"
+        }
+    },
+    defaultVariants: {
+        tucked: false,
+        paneIsOpen: false
+    }
+});
+/**
+ * FrameSaveBar component sisplays a save bar at the top of the screen with contextual save and discard actions.
+ * @param {Object} props.logo - Logo configuration.
+ * @returns {JSX.Element} The rendered FrameSaveBar component
+ */ function FrameSaveBar(param) {
+    var logo = param.logo;
+    var darkMode = (0, _react.useContext)(_AppProvider.DarkModeContext).darkMode;
+    var paneIsOpen = (0, _react.useContext)(_AppProvider.FrameContext).paneIsOpen;
+    var _useContext = (0, _react.useContext)(_AppProvider.FormContext), showGlobalContextualSaveBar = _useContext.showGlobalContextualSaveBar, message = _useContext.message, saveAction = _useContext.saveAction, discardAction = _useContext.discardAction;
+    var _useState = _sliced_to_array((0, _react.useState)(false), 2), visible = _useState[0], setVisible = _useState[1];
+    var _useState1 = _sliced_to_array((0, _react.useState)(false), 2), show = _useState1[0], setShow = _useState1[1];
+    var _useState2 = _sliced_to_array((0, _react.useState)(false), 2), tucked = _useState2[0], setTucked = _useState2[1];
+    (0, _react.useEffect)(function() {
+        if (showGlobalContextualSaveBar) {
+            setVisible(true);
+            var timer = setTimeout(function() {
+                return setShow(true);
+            }, 10);
+            return function() {
+                return clearTimeout(timer);
+            };
+        } else {
+            setShow(false);
+            var timer1 = setTimeout(function() {
+                return setVisible(false);
+            }, 300);
+            return function() {
+                return clearTimeout(timer1);
+            };
+        }
+    }, [
+        showGlobalContextualSaveBar
+    ]);
+    var logoSource = darkMode ? logo.source : logo.darkSource;
+    if (!visible) return null;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: toggleStyles({
+                    tucked: tucked,
+                    paneIsOpen: paneIsOpen
+                }),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+                    content: "Show save bar",
+                    position: "below",
+                    alignment: "center",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "cursor-pointer w-8 h-8 flex items-center justify-center",
+                        onClick: function() {
+                            return setTucked(false);
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                            source: _polarisicons.ChevronDownMinor,
+                            color: "FrameSaveBar"
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: styles({
+                    visible: show,
+                    tucked: tucked,
+                    paneIsOpen: paneIsOpen
+                }),
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "hidden @md:block py-1 px-0.5 w-51.5",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("img", {
+                            src: logoSource,
+                            alt: logo.accessibilityLabel,
+                            style: (logo === null || logo === void 0 ? void 0 : logo.width) ? {
+                                width: logo.width
+                            } : undefined
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "flex-1 flex items-center justify-between gap-2",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                className: "flex items-center gap-2 min-w-0",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                                        variant: "headingMd",
+                                        color: "FrameSaveBar",
+                                        truncate: true,
+                                        children: message
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: "hidden @md:block",
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+                                            content: "Hide save bar",
+                                            position: "below",
+                                            alignment: "center",
+                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                                className: "cursor-pointer w-8 h-8 flex items-center justify-center hover:bg-tint-1 active:bg-tint-2 rounded-md",
+                                                onClick: function() {
+                                                    return setTucked(true);
+                                                },
+                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                                    source: _polarisicons.ChevronUpMinor,
+                                                    color: "FrameSaveBar"
+                                                })
+                                            })
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                className: "flex items-center gap-2",
+                                children: [
+                                    discardAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                        primary: true,
+                                        onClick: discardAction.onAction,
+                                        loading: discardAction.loading,
+                                        accessibilityLabel: discardAction.accessibilityLabel,
+                                        disabled: discardAction.disabled,
+                                        className: discardAction.loading || discardAction.disabled ? "border-transparent!" : undefined,
+                                        children: discardAction.content
+                                    }),
+                                    saveAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                        highlight: true,
+                                        onClick: saveAction.onAction,
+                                        loading: saveAction.loading,
+                                        accessibilityLabel: saveAction.accessibilityLabel,
+                                        disabled: saveAction.disabled,
+                                        children: saveAction.content
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+var _default = FrameSaveBar;

package/dist/cjs/components/Grid.js

@@ -0,0 +1,151 @@
+"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");
+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 _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 _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);
+}
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-Grid grid",
+    variants: {
+        justify: {
+            stretch: "justify-stretch",
+            start: "justify-start",
+            end: "justify-end",
+            center: "justify-center"
+        },
+        align: {
+            stretch: "items-stretch",
+            start: "items-start",
+            end: "items-end",
+            center: "items-center"
+        }
+    },
+    defaultVariants: {
+        justify: "stretch",
+        align: "stretch"
+    }
+});
+/**
+ * Tailwind-based Grid component with customizable columns, gaps, alignment, and justification.
+ * 
+ * @param {object} [props={}] - Props for the Grid component.
+ * @param {React.ReactNode} [props.children] - Content to render inside the Grid.
+ * @param {number|object} [props.columns] - Defines the number of columns in the grid. Can be a single number or an object with breakpoints as keys.
+ * @param {number|object} [props.gap] - Defines the gap between grid items. Can be a single number or an object with breakpoints as keys.
+ * @param {"stretch"|"start"|"end"|"center"} [props.justify="stretch"] - Horizontal alignment of the grid items.
+ * @param {"stretch"|"start"|"end"|"center"} [props.align="stretch"] - Vertical alignment of the grid items.
+ * @param {string} [props.className] - Additional class names to apply to the grid.
+ * @returns {JSX.Element} A div element representing the grid container.
+ */ function Grid() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children, columns = props.columns, gap = props.gap, _props_justify = props.justify, justify = _props_justify === void 0 ? "stretch" : _props_justify, _props_align = props.align, align = _props_align === void 0 ? "stretch" : _props_align, className = props.className;
+    var columnClasses;
+    var gapClasses;
+    if ((typeof columns === "undefined" ? "undefined" : _type_of(columns)) === "object") {
+        columnClasses = Object.entries(columns).map(function(param) {
+            var _param = _sliced_to_array(param, 2), breakpoint = _param[0], count = _param[1];
+            return breakpoint === "default" || breakpoint === "xs" ? "grid-cols-".concat(count) : "@".concat(breakpoint, ":grid-cols-").concat(count);
+        }).join(" ");
+    } else {
+        columnClasses = "grid-cols-".concat(columns);
+    }
+    if ((typeof gap === "undefined" ? "undefined" : _type_of(gap)) === "object") {
+        gapClasses = Object.entries(gap).map(function(param) {
+            var _param = _sliced_to_array(param, 2), breakpoint = _param[0], count = _param[1];
+            return breakpoint === "default" || breakpoint === "xs" ? "gap-".concat(count) : "@".concat(breakpoint, ":gap-").concat(count);
+        }).join(" ");
+    } else {
+        gapClasses = "gap-".concat(gap);
+    }
+    var classes = styles({
+        align: align,
+        justify: justify
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        className: "".concat(classes, " ").concat(columnClasses, " ").concat(gapClasses).concat(className ? " ".concat(className) : ""),
+        children: children
+    });
+}
+/**
+ * Cell component for the Grid, allowing column span customization.
+ * 
+ * @param {object} [props={}] - Props for the Cell component.
+ * @param {number|object} [props.columnSpan] - Defines the column span for the cell. Can be a single number or an object with breakpoints as keys.
+ * @param {React.ReactNode} [props.children] - Content to render inside the cell.
+ * @param {string} [props.className] - Additional class names to apply to the cell.
+ * @returns {JSX.Element} A div element representing a grid cell.
+ */ function Cell() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var columnSpan = props.columnSpan, children = props.children, className = props.className;
+    var columnSpanClasses;
+    if ((typeof columnSpan === "undefined" ? "undefined" : _type_of(columnSpan)) === "object") {
+        columnSpanClasses = Object.entries(columnSpan).map(function(param) {
+            var _param = _sliced_to_array(param, 2), breakpoint = _param[0], count = _param[1];
+            return breakpoint === "default" || breakpoint === "xs" ? "col-span-".concat(count) : "@".concat(breakpoint, ":col-span-").concat(count);
+        }).join(" ");
+    } else {
+        columnSpanClasses = "col-span-".concat(columnSpan);
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        className: "Litho-Grid-Cell ".concat(columnSpanClasses).concat(className ? " ".concat(className) : ""),
+        children: children
+    });
+}
+Grid.Cell = Cell;
+var _default = Grid;

package/dist/cjs/components/HorizontalStack.js

@@ -0,0 +1,180 @@
+"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");
+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;
+}
+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;
+}
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-HorizontalStack flex flex-row",
+    variants: {
+        gap: {
+            none: "",
+            "0": "gap-0",
+            "px": "gap-px",
+            "0.5": "gap-0.5",
+            "1": "gap-1",
+            "2": "gap-2",
+            "3": "gap-3",
+            "4": "gap-4",
+            "6": "gap-6",
+            "8": "gap-8",
+            "10": "gap-10"
+        },
+        align: {
+            start: "justify-start",
+            center: "justify-center",
+            end: "justify-end",
+            "space-between": "justify-between",
+            "space-evenly": "justify-evenly",
+            "space-around": "justify-around"
+        },
+        blockAlign: {
+            start: "items-start",
+            center: "items-center",
+            end: "items-end"
+        },
+        wrap: {
+            true: "flex-wrap",
+            false: "flex-nowrap"
+        }
+    },
+    defaultVariants: {
+        align: "start",
+        blockAlign: "start"
+    }
+});
+/**
+ * HorizontalStack Component
+ *
+ * A flexible horizontal stack component with customizable spacing, alignment, and wrapping.
+ *
+ * @param {Object} [props={}] - Component props.
+ * @param {string} [props.as='div'] - The HTML element to render. Defaults to `div`.
+ * @param {React.ReactNode} [props.children] - Child elements to render inside the stack.
+ * @param {string} [props.gap] - Spacing between children. Options: 'none', '0', 'px', '0.5', '1', '2', '3', '4', '6', '8', '10'.
+ * @param {string} [props.id] - Optional ID for the component.
+ * @param {string} [props.className] - Additional custom class names to apply to the component.
+ * @param {string} [props.align='start'] - Horizontal alignment of children. Options: 'start', 'center', 'end'.
+ * @param {string} [props.blockAlign='start'] - Vertical alignment of children. Options: 'start', 'center', 'end'.
+ * @param {boolean} [props.wrap=true] - Whether children should wrap to the next line if necessary. Defaults to `true`.
+ * @param {Object} [restProps] - Additional props passed to the root element.
+ *
+ * @returns {JSX.Element} The rendered HorizontalStack component.
+ *
+ * @example
+ * <HorizontalStack gap="2" align="center" blockAlign="start" wrap={false}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </HorizontalStack>
+ */ function HorizontalStack() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _props_as = props.as, as = _props_as === void 0 ? 'div' : _props_as, children = props.children, gap = props.gap, id = props.id, className = props.className, align = props.align, blockAlign = props.blockAlign, _props_wrap = props.wrap, wrap = _props_wrap === void 0 ? true : _props_wrap, restProps = _object_without_properties(props, [
+        "as",
+        "children",
+        "gap",
+        "id",
+        "className",
+        "align",
+        "blockAlign",
+        "wrap"
+    ]);
+    var classes = styles({
+        gap: gap,
+        align: align,
+        blockAlign: blockAlign,
+        wrap: wrap
+    });
+    var Element = as;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, _object_spread_props(_object_spread({
+        id: id,
+        className: "".concat(classes).concat(className ? " ".concat(className) : "")
+    }, restProps), {
+        children: children
+    }));
+}
+var _default = HorizontalStack;