@heymantle/litho 0.0.1

package/dist/esm/components/TopBar.js

@@ -0,0 +1,200 @@
+"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 _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);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from "react";
+import { FrameContext } from "./AppProvider.js";
+import { MobileHamburgerMajor } from "@shopify/polaris-icons";
+import { tv } from "tailwind-variants";
+import { ActionList, Button, Popover, Text } from "../index.js";
+var styles = tv({
+    base: "Litho-TopBar flex items-center h-[var(--litho-header-height)] border-b border-edge-subdued dark:border-edge-alt-subdued"
+});
+/**
+ * TopBar component that displays a top navigation bar with a search trigger and a user menu.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} [props.userMenu] - The user menu element.
+ * @param {React.ReactNode} [props.searchTrigger] - The search trigger element.
+ * @param {boolean} [props.hasNavigation] - Whether the navigation is present.
+ * @param {boolean} [props.alwaysShowUserMenuInTopBar] - Whether to always show the user menu in the top bar.
+ * @param {React.ReactNode} [props.headerAccessory] - Accessory to render in the header.
+ * @returns {JSX.Element} The rendered TopBar component.
+ */ function TopBar() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var hasNavigation = props.hasNavigation, userMenu = props.userMenu, searchTrigger = props.searchTrigger, alwaysShowUserMenuInTopBar = props.alwaysShowUserMenuInTopBar, headerAccessory = props.headerAccessory;
+    var setShowMobileNavigation = useContext(FrameContext).setShowMobileNavigation;
+    var classes = styles();
+    return /*#__PURE__*/ _jsxs("div", {
+        className: classes,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "pl-4 @md:hidden",
+                children: hasNavigation && /*#__PURE__*/ _jsx(Button, {
+                    icon: MobileHamburgerMajor,
+                    onClick: function() {
+                        return setShowMobileNavigation(true);
+                    },
+                    children: "Menu"
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex-1 flex items-center justify-between gap-2 pl-3 pr-3 ".concat(alwaysShowUserMenuInTopBar ? "" : "@md:hidden"),
+                children: [
+                    searchTrigger ? /*#__PURE__*/ _jsx("div", {
+                        className: "relative flex-1 @md:hidden",
+                        children: searchTrigger
+                    }) : /*#__PURE__*/ _jsx("div", {
+                        className: "relative flex-1"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: alwaysShowUserMenuInTopBar ? "" : "flex items-center gap-0.5 @md:hidden",
+                        children: [
+                            headerAccessory && /*#__PURE__*/ _jsx("div", {
+                                children: headerAccessory
+                            }),
+                            userMenu && /*#__PURE__*/ _jsx("div", {
+                                children: userMenu
+                            })
+                        ]
+                    })
+                ]
+            }),
+            headerAccessory && /*#__PURE__*/ _jsx("div", {
+                className: "hidden @md:flex items-center justify-end w-[var(--litho-nav-width)] pr-3",
+                children: /*#__PURE__*/ _jsx("div", {
+                    children: headerAccessory
+                })
+            })
+        ]
+    });
+}
+var activatorStyles = tv({
+    base: "flex items-center gap-2 p-1.5 pr-2 rounded-md max-w-full truncate",
+    variants: {
+        interactive: {
+            true: "cursor-pointer bg-btn-plain hover:bg-btn-plain-low active:bg-btn-plain-lower text-btn-plain-fg hover:text-btn-plain-fg-alt border-btn-plain-border hover:border-btn-plain-border-low active:border-btn-plain-border-low",
+            false: ""
+        }
+    }
+});
+/**
+ * UserMenu component that displays a user menu with an optional popover.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {string} [props.title] - The title displayed in the user menu.
+ * @param {string} [props.subtitle] - The subtitle displayed in the user menu.
+ * @param {React.ReactNode} [props.image] - An image element displayed in the user menu.
+ * @param {Array} [props.popoverSections] - Sections to display inside the popover.
+ * @param {Array} [props.popoverActions] - Actions to display inside the popover.
+ * @returns {JSX.Element} The rendered UserMenu component.
+ */ function UserMenu() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var title = props.title, subtitle = props.subtitle, image = props.image, popoverSections = props.popoverSections, popoverActions = props.popoverActions;
+    var _useState = _sliced_to_array(useState(false), 2), showPopover = _useState[0], setShowPopover = _useState[1];
+    var hasPopover = !!popoverActions || !!popoverSections;
+    var handleActivatorClick = function() {
+        if (!hasPopover) return;
+        setShowPopover(!showPopover);
+    };
+    var activator = /*#__PURE__*/ _jsxs("div", {
+        className: activatorStyles({
+            interactive: hasPopover
+        }),
+        onClick: handleActivatorClick,
+        children: [
+            image && /*#__PURE__*/ _jsx("div", {
+                className: "flex items-center justify-center shrink-0 w-8 h-8 rounded-md font-semibold text-xs",
+                children: image
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "".concat(image ? "hidden" : "flex", " @sm:flex flex-col pr-1 truncate"),
+                children: [
+                    /*#__PURE__*/ _jsx(Text, {
+                        variant: "bodySm",
+                        fontWeight: "medium",
+                        truncate: true,
+                        children: title || subtitle
+                    }),
+                    title && subtitle ? /*#__PURE__*/ _jsx(Text, {
+                        variant: "bodySm",
+                        color: "subdued",
+                        truncate: true,
+                        children: subtitle
+                    }) : null
+                ]
+            })
+        ]
+    });
+    if (!hasPopover) {
+        return activator;
+    }
+    return /*#__PURE__*/ _jsx(Popover, {
+        active: showPopover,
+        activator: activator,
+        fixed: true,
+        onClose: function() {
+            return setShowPopover(false);
+        },
+        activatorDisplayType: "block",
+        preferredAlignment: "right",
+        preferredPosition: "below",
+        children: /*#__PURE__*/ _jsx(Popover.Section, {
+            children: /*#__PURE__*/ _jsx(ActionList, {
+                items: popoverActions,
+                sections: popoverSections,
+                onActionAnyItem: function() {
+                    return setShowPopover(false);
+                }
+            })
+        })
+    });
+}
+TopBar.UserMenu = UserMenu;
+export default TopBar;

package/dist/esm/components/VerticalStack.js

@@ -0,0 +1,152 @@
+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;
+}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+var styles = tv({
+    base: "Litho-VerticalStack flex flex-col",
+    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",
+            "5": "gap-5",
+            "6": "gap-6",
+            "8": "gap-8",
+            "10": "gap-10"
+        },
+        inlineAlign: {
+            start: "items-start",
+            end: "items-end",
+            center: "items-center",
+            stretch: "items-stretch"
+        },
+        align: {
+            start: "justify-start",
+            end: "justify-end",
+            center: "justify-center",
+            spaceBetween: "justify-between"
+        }
+    }
+});
+/**
+ * A flexible vertical stack component for consistent layout styling.
+ *
+ * @param {object} props - The properties for the VerticalStack component.
+ * @param {string} [props.as="div"] - The HTML tag or component to render as the root element.
+ * @param {React.ReactNode} [props.children] - The child elements to render within the stack.
+ * @param {string} [props.align] - Vertical alignment of the stack content. Options: "start", "end", "center", "spaceBetween".
+ * @param {string} [props.inlineAlign] - Horizontal alignment of the stack content. Options: "start", "end", "center", "spaceBetween".
+ * @param {string} [props.gap="none"] - Spacing between child elements. Options: "none", "0", "px", "0.5", "1", "2", "3", "4", "6", "8", "10".
+ * @param {string} [props.id] - The id for the root element of the stack.
+ * @param {string} [props.className] - Additional CSS classes to append to the generated styles.
+ * @param {object} [props.restProps] - Any additional properties to spread onto the root element.
+ *
+ * @returns {JSX.Element} The rendered `VerticalStack` component.
+ */ function VerticalStack() {
+    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, align = props.align, inlineAlign = props.inlineAlign, gap = props.gap, id = props.id, className = props.className, restProps = _object_without_properties(props, [
+        "as",
+        "children",
+        "align",
+        "inlineAlign",
+        "gap",
+        "id",
+        "className"
+    ]);
+    var classes = styles({
+        align: align,
+        inlineAlign: inlineAlign,
+        gap: gap
+    });
+    var Element = as;
+    return /*#__PURE__*/ _jsx(Element, _object_spread_props(_object_spread({
+        id: id,
+        className: "".concat(classes).concat(className ? " ".concat(className) : "")
+    }, restProps), {
+        children: children
+    }));
+}
+;
+export default VerticalStack;

package/dist/esm/index.js

@@ -0,0 +1,61 @@
+export { default as ActionList } from "./components/ActionList.js";
+export { default as AnnouncementBar } from "./components/AnnouncementBar.js";
+export { default as AppProvider, useDarkMode } from "./components/AppProvider.js";
+export { default as Autocomplete } from "./components/Autocomplete.js";
+export { default as Badge } from "./components/Badge.js";
+export { default as Banner } from "./components/Banner.js";
+export { default as Box } from "./components/Box.js";
+export { default as Button } from "./components/Button.js";
+export { default as ButtonGroup } from "./components/ButtonGroup.js";
+export { default as Card } from "./components/Card.js";
+export { default as Checkbox } from "./components/Checkbox.js";
+export { default as ChoiceList } from "./components/ChoiceList.js";
+export { default as Collapsible } from "./components/Collapsible.js";
+export { default as ColorField } from "./components/ColorField.js";
+export { default as ContextualSaveBar } from "./components/ContextualSaveBar.js";
+export { default as DatePicker } from "./components/DatePicker.js";
+export { default as Divider } from "./components/Divider.js";
+export { default as DropZone } from "./components/DropZone.js";
+export { default as EmptyState } from "./components/EmptyState.js";
+export { default as Filters } from "./components/Filters.js";
+export { default as FooterHelp } from "./components/FooterHelp.js";
+export { default as Form } from "./components/Form.js";
+export { default as Frame } from "./components/Frame.js";
+export { default as FrameSaveBar } from "./components/FrameSaveBar.js";
+export { default as Grid } from "./components/Grid.js";
+export { default as HorizontalStack } from "./components/HorizontalStack.js";
+export { default as Icon } from "./components/Icon.js";
+export { default as Image } from "./components/Image.js";
+export { default as InlineError } from "./components/InlineError.js";
+export { default as Label } from "./components/Label.js";
+export { default as Layout } from "./components/Layout.js";
+export { default as LayoutSection } from "./components/LayoutSection.js";
+export { default as Link } from "./components/Link.js";
+export { default as List } from "./components/List.js";
+export { default as Listbox } from "./components/Listbox.js";
+export { default as Loading } from "./components/Loading.js";
+export { default as Modal } from "./components/Modal.js";
+export { default as Navigation } from "./components/Navigation.js";
+export { default as Page } from "./components/Page.js";
+export { default as Pagination } from "./components/Pagination.js";
+export { default as Pane } from "./components/Pane.js";
+export { default as Popover } from "./components/Popover.js";
+export { default as ProgressBar } from "./components/ProgressBar.js";
+export { default as RadioButton } from "./components/RadioButton.js";
+export { default as RangeSlider } from "./components/RangeSlider.js";
+export { default as ResourceList } from "./components/ResourceList.js";
+export { default as Select } from "./components/Select.js";
+export { default as SkeletonText } from "./components/SkeletonText.js";
+export { default as Spinner } from "./components/Spinner.js";
+export { default as Table } from "./components/Table.js";
+export { default as Tabs } from "./components/Tabs.js";
+export { default as Tag } from "./components/Tag.js";
+export { default as Text } from "./components/Text.js";
+export { default as TextField } from "./components/TextField.js";
+export { default as Thumbnail } from "./components/Thumbnail.js";
+export { default as TimePicker } from "./components/TimePicker.js";
+export { default as Tip } from "./components/Tip.js";
+export { default as Tooltip } from "./components/Tooltip.js";
+export { default as TopBar } from "./components/TopBar.js";
+export { default as VerticalStack } from "./components/VerticalStack.js";
+export { SelectionType, useIndexResourceState } from "./utilities/useIndexResourceState.js";