@heymantle/litho 0.0.1

package/dist/cjs/components/Listbox.js

@@ -0,0 +1,211 @@
+"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 _AppProvider = require("../components/AppProvider");
+var _react = require("react");
+var _polarisicons = require("@shopify/polaris-icons");
+var _tailwindvariants = require("tailwind-variants");
+var _index = require("../index");
+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-Listbox__Option rounded-md cursor-pointer min-h-8 py-1 flex items-center justify-between pl-3 focus:outline-hidden active:ring-0",
+    variants: {
+        showIcon: {
+            true: "gap-2 pr-2",
+            false: "pr-3"
+        },
+        selected: {
+            true: "text-tab-active-fg bg-tab-active-bg hover:bg-tab-active-bg-hover active:bg-tab-active-bg-active",
+            false: "text-normal hover:text-highest hover"
+        },
+        removeVisualFocus: {
+            true: "",
+            false: "focus:ring-2 focus:ring-form-accent focus:border-form-border-accent"
+        }
+    }
+});
+var containerStyles = (0, _tailwindvariants.tv)({
+    base: "flex gap-0.5",
+    variants: {
+        displayHorizontallyOnMobile: {
+            true: "flex-row overflow-x-auto max-w-full pb-3 @sm:pb-0 @sm:flex-col",
+            false: "flex-col"
+        }
+    },
+    defaultVariants: {
+        displayHorizontallyOnMobile: false
+    }
+});
+/**
+ * A customizable Listbox component for displaying a list of options with selectable states.
+ * The component supports keyboard navigation and optional icons for selected items.
+ *
+ * @component
+ * @param {Object} props - The properties object.
+ * @param {Array<Object>} props.options - Array of options to render in the listbox.
+ * Each option should be an object with the following properties:
+ *   - `label` {string}: The display label of the option.
+ *   - `value` {string | number}: The unique value of the option.
+ *   - `selected` {boolean}: Whether the option is currently selected.
+ *   - `onAction` {function}: A callback function invoked when the option is clicked or "Enter" is pressed.
+ * @param {boolean} [props.showIcon=false] - Determines whether to display an icon next to selected options.
+ * @param {React.ReactNode} [props.icon=MobileAcceptMajor] - The icon to display for selected options (default is `MobileAcceptMajor`).
+ * @param {boolean} [props.displayHorizontallyOnMobile=false] - Determines whether to display the listbox horizontally on mobile.
+ *
+ * @example
+ * const options = [
+ *   { label: "Option 1", value: "opt1", selected: false, onAction: () => console.log("Option 1 clicked") },
+ *   { label: "Option 2", value: "opt2", selected: true, onAction: () => console.log("Option 2 clicked") },
+ * ];
+ *
+ * <Listbox options={options} showIcon={true} icon={CustomIcon} />
+ *
+ * @returns {JSX.Element} The rendered Listbox component.
+ */ function Listbox() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var options = props.options, _props_showIcon = props.showIcon, showIcon = _props_showIcon === void 0 ? false : _props_showIcon, _props_displayHorizontallyOnMobile = props.displayHorizontallyOnMobile, displayHorizontallyOnMobile = _props_displayHorizontallyOnMobile === void 0 ? false : _props_displayHorizontallyOnMobile, _props_icon = props.icon, icon = _props_icon === void 0 ? _polarisicons.MobileAcceptMajor : _props_icon;
+    var screenSizes = (0, _react.useContext)(_AppProvider.FrameContext).screenSizes;
+    var _useState = _sliced_to_array((0, _react.useState)(null), 2), removeVisualFocus = _useState[0], setRemoveVisualFocus = _useState[1];
+    var handleKeyDown = function(e, index) {
+        if (!options.length) return;
+        var currentElement = e.target;
+        var siblings = currentElement.parentNode.children;
+        switch(e.key){
+            case "ArrowDown":
+                e.preventDefault();
+                var nextElement = siblings[index + 1] || siblings[0];
+                nextElement.focus();
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                var prevElement = siblings[index - 1] || siblings[siblings.length - 1];
+                prevElement.focus();
+                break;
+            case "Enter":
+                var _options_index;
+                e.preventDefault();
+                if ((_options_index = options[index]) === null || _options_index === void 0 ? void 0 : _options_index.onAction) {
+                    options[index].onAction();
+                }
+                break;
+            case "Escape":
+                e.preventDefault();
+                currentElement.blur();
+                break;
+            default:
+                break;
+        }
+    };
+    var handleClick = function(e, index) {
+        var _options_index_onAction, _options_index;
+        (_options_index = options[index]) === null || _options_index === void 0 ? void 0 : (_options_index_onAction = _options_index.onAction) === null || _options_index_onAction === void 0 ? void 0 : _options_index_onAction.call(_options_index);
+        setRemoveVisualFocus(index);
+        if (window.innerWidth <= screenSizes.sm) {
+            e.currentTarget.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "center"
+            });
+        }
+    };
+    if (!options.length) {
+        return null;
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        role: "listbox",
+        className: containerStyles({
+            displayHorizontallyOnMobile: displayHorizontallyOnMobile
+        }),
+        children: options.map(function(option, index) {
+            var selected = option.selected, label = option.label, value = option.value, onAction = option.onAction;
+            var classes = styles({
+                selected: selected,
+                showIcon: showIcon,
+                removeVisualFocus: removeVisualFocus === index
+            });
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                role: "option",
+                "aria-selected": selected,
+                className: classes,
+                tabIndex: 0,
+                onClick: function(e) {
+                    return handleClick(e, index);
+                },
+                onBlur: function() {
+                    return setRemoveVisualFocus(null);
+                },
+                onKeyDown: function(e) {
+                    return handleKeyDown(e, index);
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "whitespace-nowrap pointer-events-none w-full",
+                        children: label
+                    }),
+                    showIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "w-5 h-5 pointer-events-none",
+                        children: selected && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                            source: icon || _polarisicons.MobileAcceptMajor,
+                            color: "link"
+                        })
+                    })
+                ]
+            }, value);
+        })
+    });
+}
+var _default = Listbox;

package/dist/cjs/components/Loading.js

@@ -0,0 +1,103 @@
+"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");
+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);
+}
+/**
+ * A loading progress bar component that animates over a specified duration.
+ *
+ * @component
+ * @param {Object} props - The props object.
+ * @param {number} [props.maxDuration=10000] - The maximum duration (in milliseconds) for the loading progress bar to reach 100%.
+ * @returns {JSX.Element} A fixed progress bar displayed at the top of the page.
+ */ function Loading() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _props_maxDuration = props.maxDuration, maxDuration = _props_maxDuration === void 0 ? 10000 : _props_maxDuration;
+    var _useState = _sliced_to_array((0, _react.useState)(0), 2), progress = _useState[0], setProgress = _useState[1];
+    (0, _react.useEffect)(function() {
+        var startTime = Date.now();
+        var interval = 16;
+        var maxProgress = 100;
+        var updateProgress = function() {
+            var elapsedTime = Date.now() - startTime;
+            var fractionOfDuration = elapsedTime / maxDuration;
+            var easedProgress = maxProgress * (1 - Math.pow(1 - fractionOfDuration, 3));
+            if (elapsedTime >= maxDuration || easedProgress >= maxProgress) {
+                setProgress(maxProgress);
+                clearInterval(timer);
+            } else {
+                setProgress(easedProgress);
+            }
+        };
+        var timer = setInterval(updateProgress, interval);
+        return function() {
+            return clearInterval(timer);
+        };
+    }, [
+        maxDuration
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        className: "Litho-Loading fixed top-0 left-0 right-0 h-[3px]",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: "h-full bg-brand-saturated transition-all duration-100 ease-out",
+            style: {
+                width: "".concat(progress, "%")
+            }
+        })
+    });
+}
+var _default = Loading;