@heymantle/litho 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Mantle RevOps Inc. and affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# Litho
+
+A modern React component library for building Mantle extensions and web applications. Litho provides a comprehensive set of accessible, themeable, and composable UI components, designed for rapid development and seamless integration with Tailwind CSS and Shopify Polaris icons.
+
+## Installation
+
+```sh
+npm install @heymantle/litho
+```
+
+> **Note:** `tailwindcss`, `react`, and `react-dom` (v18+) are required as peer dependencies.
+
+## Usage
+
+1. **Import the CSS** (required for correct styling):
+
+```css
+// index.css paths here may differ depending on your project structure
+@source "./node_modules/@heymantle/litho";
+@import "./node_modules/@heymantle/litho/index.css";
+```
+
+2. **Wrap your app with `AppProvider`** (required for `Frame` and/or `Form` usage):
+
+```jsx
+import { AppProvider, Page, Button } from "litho";
+
+function App() {
+  return (
+    <AppProvider darkModeAvailable darkModeStorageKey="my-app-dark-mode">
+      <Page title="Welcome to Litho">
+        <Button primary onClick={() => alert("Hello!")}>
+          Click me
+        </Button>
+      </Page>
+    </AppProvider>
+  );
+}
+```
+
+3. **Use any component**:
+
+```jsx
+import { Banner, Card, ResourceList } from 'litho';
+
+<Banner status="success" title="Success!">
+  Your operation was successful.
+</Banner>
+
+<Card>
+  <ResourceList
+    items={[{ id: 1, name: 'Item 1' }]}
+    renderItem={item => <div key={item.id}>{item.name}</div>}
+  />
+</Card>
+```
+
+## Components
+
+Litho exports a wide range of components, including:
+
+- **Layout:** `Page`, `Frame`, `Layout`, `Card`, `Grid`, `HorizontalStack`, `VerticalStack`
+- **Forms:** `TextField`, `Select`, `Checkbox`, `RadioButton`, `RangeSlider`, `ChoiceList`, `DatePicker`, `ColorField`
+- **Navigation:** `Navigation`, `Tabs`, `Pagination`, `TopBar`, `Pane`
+- **Feedback:** `Banner`, `Tip`, `InlineError`, `EmptyState`, `Loading`, `SkeletonText`, `FooterHelp`
+- **Actions:** `Button`, `ButtonGroup`, `ActionList`, `Popover`, `Modal`, `ContextualSaveBar`
+- **Data Display:** `Table`, `ResourceList`, `List`, `Badge`, `Tag`, `Thumbnail`, `Image`, `Tooltip`
+- **Utilities:** `useIndexResourceState`, `useTableScrollState`, and more
+
+See the [source code](./components/) for full API documentation and JSDoc usage examples for each component.
+
+## Theming & Customization
+
+- Litho is designed to work with Tailwind CSS. You can customize themes and extend styles using your Tailwind config.
+
+```css
+// index.css paths here may differ depending on your project structure
+@source "./node_modules/@heymantle/litho";
+@import "./node_modules/@heymantle/litho/index.css";
+```
+
+## Peer Dependencies
+
+- `react` >= 18
+- `react-dom` >= 18
+- `tailwindcss` >= 4
+
+## License
+
+ISC

package/dist/cjs/components/ActionList.js

@@ -0,0 +1,267 @@
+"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 = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _tailwindvariants = require("tailwind-variants");
+var _index = require("../index");
+var _polarisicons = require("@shopify/polaris-icons");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-ActionList",
+    variants: {
+        fullWidth: {
+            true: "w-full",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        fullWidth: false
+    }
+});
+var sectionStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-ActionList__Section border-b border-edge-default last:border-b-0",
+    variants: {
+        padded: {
+            true: "p-2",
+            false: ""
+        }
+    }
+});
+var itemStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-ActionList__Item flex items-center gap-2 py-1.5 px-2.5 rounded-md truncate focus:outline-none focus:ring-2 focus:ring-inset focus:ring-transparent focus:ring-offset-2 focus:ring-offset-form-focus-active",
+    variants: {
+        disabled: {
+            true: "cursor-not-allowed hover:bg-transparent",
+            false: "cursor-pointer"
+        },
+        destructive: {
+            true: "hover:bg-form-bg-error-low",
+            false: "hover:bg-tint-2 active:bg-tint-3"
+        }
+    },
+    defaultVariants: {
+        disabled: false,
+        destructive: false
+    }
+});
+/**
+ * ActionList component renders a list of actionable items with optional sections.
+ * Supports keyboard navigation and action triggers on item selection.
+ *
+ * @component
+ * @param {Object} props - Component properties.
+ * @param {Array} [props.sections] - Sections containing items for the action list.
+ * Each section has a title and a list of items.
+ * @param {Array} [props.items] - List of items to render in the action list when no sections are provided.
+ * @param {string} [props.iconColor="subdued"] - Default color for icons in the action items.
+ * @param {function} [props.onActionAnyItem] - Callback function invoked whenever any action item is selected.
+ * @param {boolean} [props.fullWidth=false] - Whether to apply full width styling to the action list.
+ * @param {boolean} [props.showSecondaryAction=false] - Whether to show the secondary action icon.
+ * @example
+ * const items = [{ content: 'Item 1', onAction: () => {} }];
+ * <ActionList items={items} />
+ *
+ * @returns {JSX.Element} The rendered ActionList component.
+ */ function ActionList() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var sections = props.sections, _props_padded = props.padded, padded = _props_padded === void 0 ? true : _props_padded, tmp = props.items, initialItems = tmp === void 0 ? [] : tmp, tmp1 = props.iconColor, _iconColor = tmp1 === void 0 ? "subdued" : tmp1, onActionAnyItem = props.onActionAnyItem, className = props.className, _props_fullWidth = props.fullWidth, fullWidth = _props_fullWidth === void 0 ? false : _props_fullWidth;
+    var sectionTitleAsKeys = true;
+    var items = initialItems || (sections ? sections.flatMap(function(section) {
+        return section.items;
+    }) : []);
+    var actionListRef = (0, _react.useRef)(null);
+    var itemRefs = (0, _react.useRef)([]);
+    var handleKeyDown = function(e) {
+        if (!actionListRef.current.contains(e.target)) return;
+        var enabledItems = itemRefs.current.filter(function(ref) {
+            return ref && ref.getAttribute("tabIndex") !== "-1";
+        });
+        var focusedIndex = enabledItems.findIndex(function(ref) {
+            return ref === document.activeElement;
+        });
+        if (e.key === "ArrowDown") {
+            var nextIndex = (focusedIndex + 1) % enabledItems.length;
+            enabledItems[nextIndex].focus();
+            e.preventDefault();
+        } else if (e.key === "ArrowUp") {
+            var prevIndex = (focusedIndex - 1 + enabledItems.length) % enabledItems.length;
+            enabledItems[prevIndex].focus();
+            e.preventDefault();
+        } else if (e.key === "Enter") {
+            var focusedItem = enabledItems[focusedIndex];
+            if (focusedItem) {
+                focusedItem.click();
+                e.preventDefault();
+            }
+        }
+    };
+    (0, _react.useEffect)(function() {
+        window.addEventListener("keydown", handleKeyDown);
+        return function() {
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, []);
+    var classes = styles({
+        fullWidth: fullWidth
+    });
+    var sectionClasses = sectionStyles({
+        padded: padded
+    });
+    var isSectioned = sections && sections.length > 0;
+    if (isSectioned) {
+        sectionTitleAsKeys = sections.every(function(section) {
+            return Object.prototype.hasOwnProperty.call(section, "title");
+        });
+    }
+    var ActionListItem = function(param) {
+        var item = param.item, index = param.index;
+        var content = item.content, disabled = item.disabled, destructive = item.destructive, icon = item.icon, onAction = item.onAction, prefix = item.prefix, imageUrl = item.imageUrl, url = item.url, secondaryAction = item.secondaryAction;
+        var iconColor = disabled ? "disabled" : destructive ? "critical" : _iconColor;
+        var textColor = disabled ? "disabled" : destructive ? "critical" : "default";
+        var itemClasses = itemStyles({
+            disabled: disabled,
+            destructive: destructive
+        });
+        var secondaryActionContent = secondaryAction ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: "Litho-ActionList__Item__SecondaryAction rounded-sm px-1 hover:bg-tint-2 active:bg-tint-3",
+            onClick: function(e) {
+                e.stopPropagation();
+                secondaryAction.onAction();
+            },
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                source: (secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.icon) || _polarisicons.MobileHorizontalDotsMajor,
+                color: "subdued"
+            })
+        }) : null;
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("a", {
+            ref: function(el) {
+                return itemRefs.current[index] = el;
+            },
+            className: itemClasses,
+            tabIndex: disabled ? -1 : 0,
+            onClick: function(e) {
+                e.stopPropagation();
+                if (disabled) return;
+                if (onAction) onAction();
+                if (url) window.open(url, "_blank");
+                if (onActionAnyItem) onActionAnyItem();
+            },
+            children: [
+                prefix ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "Litho-ActionList__Item__Prefix w-5 h-5 flex items-center justify-center shrink-0",
+                    children: prefix
+                }) : icon ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "Litho-ActionList__Item__Icon shrink-0",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                        source: icon,
+                        color: iconColor,
+                        stroke: item === null || item === void 0 ? void 0 : item.iconStroke,
+                        display: item === null || item === void 0 ? void 0 : item.iconDisplay
+                    })
+                }) : imageUrl ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "Litho-ActionList__Item__Image shrink-0",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("img", {
+                        src: imageUrl,
+                        alt: content,
+                        className: "w-5 h-5 rounded-sm"
+                    })
+                }) : null,
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "flex-1",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                        color: textColor,
+                        truncate: true,
+                        children: content
+                    })
+                }),
+                (secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.tooltip) ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+                    content: secondaryAction.tooltip,
+                    children: secondaryActionContent
+                }) : secondaryActionContent
+            ]
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        ref: actionListRef,
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        tabIndex: -1,
+        children: isSectioned ? sections.map(function(section, sectionIndex) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: sectionClasses,
+                children: [
+                    section.title && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "Litho-ActionList__SectionTitle px-2 py-1",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                            variant: "headingSm",
+                            children: section.title
+                        })
+                    }),
+                    section.items.map(function(item, itemIndex) {
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(ActionListItem, {
+                            item: item,
+                            index: sectionIndex * section.items.length + itemIndex
+                        }, "item-".concat(sectionIndex, "-").concat(itemIndex));
+                    })
+                ]
+            }, sectionTitleAsKeys ? section.title : sectionIndex);
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: sectionClasses,
+            children: items.map(function(item, itemIndex) {
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(ActionListItem, {
+                    item: item,
+                    index: itemIndex
+                }, "item-".concat(itemIndex));
+            })
+        })
+    });
+}
+var _default = ActionList;

package/dist/cjs/components/AnnouncementBar.js

@@ -0,0 +1,73 @@
+"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");
+var _index = require("../index");
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-AnnouncementBar text-center p-2 min-h-10 flex items-center justify-center bg-brand",
+    variants: {
+        fixed: {
+            true: "fixed top-0 left-0 right-0"
+        },
+        interactive: {
+            true: "cursor-pointer hover:bg-brand-low active:bg-brand-lower",
+            false: ""
+        }
+    }
+});
+var iconContainerStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-AnnouncementBar__IconContainer",
+    variants: {
+        animateIcon: {
+            bounce: "animate-bounce"
+        }
+    }
+});
+/**
+ * AnnouncementBar Component
+ *
+ * @param {Object} props - Component properties.
+ * @param {Function} [props.onClick] - Click handler function.
+ * @param {string} props.content - Text content to be displayed.
+ * @param {string} [props.icon] - Icon source name.
+ * @param {"bounce"} [props.animateIcon] - Animation type for the icon.
+ *
+ * @returns {JSX.Element} AnnouncementBar component.
+ */ function AnnouncementBar() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var onClick = props.onClick, content = props.content, icon = props.icon, animateIcon = props.animateIcon, _props_fixed = props.fixed, fixed = _props_fixed === void 0 ? false : _props_fixed;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        className: styles({
+            fixed: fixed,
+            interactive: !!onClick
+        }),
+        onClick: onClick,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: "flex items-center justify-center gap-4",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                    fontWeight: "medium",
+                    className: "text-md",
+                    children: content
+                }),
+                icon && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: iconContainerStyles({
+                        animateIcon: animateIcon
+                    }),
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                        source: icon
+                    })
+                })
+            ]
+        })
+    });
+}
+var _default = AnnouncementBar;