@heymantle/litho 0.0.3 → 0.0.5

package/dist/cjs/tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _default = {
+    content: [
+        "./components/**/*.{js,jsx,ts,tsx}",
+        "./stories/**/*.{js,jsx,ts,tsx,mdx}",
+        "./.storybook/**/*.{js,jsx,ts,tsx}"
+    ]
+};

package/dist/cjs/utilities/transformers.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get extractComponents () {
+        return extractComponents;
+    },
+    get extractRenderContent () {
+        return extractRenderContent;
+    },
+    get transformStorySource () {
+        return transformStorySource;
+    }
+});
+var transformStorySource = function(code) {
+    // Look for render function and extract its content
+    // This regex looks for render: () => and captures everything until the next comma or end of string
+    var renderMatch = code.match(/render:\s*\(\)\s*=>\s*([\s\S]*?)(?=,\s*parameters|,\s*args|$)/);
+    if (renderMatch) {
+        var jsxContent = renderMatch[1].trim();
+        // Handle different ways the JSX might end
+        // Remove trailing semicolon only if it's the very last character
+        if (jsxContent.endsWith(';')) {
+            jsxContent = jsxContent.slice(0, -1).trim();
+        }
+        // If the content is wrapped in parentheses, remove them
+        if (jsxContent.startsWith('(') && jsxContent.endsWith(')')) {
+            jsxContent = jsxContent.slice(1, -1).trim();
+        }
+        return jsxContent;
+    }
+    return code;
+};
+var extractComponents = function(componentName) {
+    return function(code) {
+        var componentRegex = new RegExp("<".concat(componentName, "[^>]*>[\\s\\S]*?<\\/").concat(componentName, ">"), 'g');
+        var matches = code.match(componentRegex);
+        if (matches) {
+            return matches.join('\n\n');
+        }
+        return code;
+    };
+};
+var extractRenderContent = function(code) {
+    var renderMatch = code.match(/render:\s*\(\)\s*=>\s*([\s\S]*?)(?=,\s*parameters|,\s*args|$)/);
+    if (renderMatch) {
+        var jsxContent = renderMatch[1].trim();
+        // Remove trailing semicolon
+        if (jsxContent.endsWith(';')) {
+            jsxContent = jsxContent.slice(0, -1).trim();
+        }
+        // Remove wrapper parentheses
+        if (jsxContent.startsWith('(') && jsxContent.endsWith(')')) {
+            jsxContent = jsxContent.slice(1, -1).trim();
+        }
+        return jsxContent;
+    }
+    return code;
+};

package/dist/cjs/vite.config.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _vite = require("vite");
+var _pluginreact = /*#__PURE__*/ _interop_require_default(require("@vitejs/plugin-react"));
+var _postcss = /*#__PURE__*/ _interop_require_default(require("@tailwindcss/postcss"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var _default = (0, _vite.defineConfig)({
+    plugins: [
+        (0, _pluginreact.default)()
+    ],
+    esbuild: {
+        loader: 'jsx',
+        include: /src\/.*\.[jt]sx?$/,
+        exclude: []
+    },
+    optimizeDeps: {
+        esbuildOptions: {
+            loader: {
+                '.js': 'jsx'
+            }
+        }
+    }
+});

package/dist/esm/components/ActionList.js

@@ -2,7 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef } from "react";
 import { tv } from "tailwind-variants";
-import { Icon, Text, Tooltip } from "../index.js";
+import Icon from "./Icon.js";
+import Text from "./Text.js";
+import Tooltip from "./Tooltip.js";
 import { MobileHorizontalDotsMajor } from "@shopify/polaris-icons";
 var styles = tv({
     base: "Litho-ActionList",
@@ -43,18 +45,38 @@ var itemStyles = tv({
     }
 });
 /**
+ * @typedef {Object} SecondaryAction
+ * @property {React.FunctionComponent<React.SVGProps<SVGSVGElement>>} icon - The icon to display for the secondary action.
+ * @property {string} tooltip - The tooltip to display for the secondary action.
+ * @property {function} onAction - The function to call when the secondary action is selected.
+ */ /**
+ * @typedef {Object} ActionListSection
+ * @property {string} title - The title of the section.
+ * @property {Array<ActionListItem>} items - The items to display in the section.
+ */ /**
+ * @typedef {Object} ActionListItem - An object representing an item in the action list.
+ * @property {string} content - The text content of the action item.
+ * @property {boolean} disabled - Whether the action item is disabled.
+ * @property {boolean} destructive - Whether the action item is destructive.
+ * @property {React.FunctionComponent<React.SVGProps<SVGSVGElement>>} icon - The icon to display for the action item.
+ * @property {function} onAction - The function to call when the action item is selected.
+ * @property {React.ReactNode} prefix - The prefix to display for the action item.
+ * @property {string} imageUrl - The image to display for the action item.
+ * @property {string} url - The URL to navigate to when the action item is selected.
+ * @property {SecondaryAction} secondaryAction - The secondary action to display for the action item.
+ */ /**
  * 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 {Array<{title: string, items: Array<ActionListItem>}>} [props.sections] - Sections containing items for the action list.
+ * @param {Array<ActionListItem>} [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.
+ * @param {boolean} [props.padded=true] - Whether to apply padding to the action list.
+ * @param {string} [props.className] - Additional CSS classes to apply to the action list.
  * @example
  * const items = [{ content: 'Item 1', onAction: () => {} }];
  * <ActionList items={items} />
@@ -113,7 +135,7 @@ var itemStyles = tv({
     }
     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 content = item.content, description = item.description, 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({
@@ -164,13 +186,20 @@ var itemStyles = tv({
                         className: "w-5 h-5 rounded-sm"
                     })
                 }) : null,
-                /*#__PURE__*/ _jsx("div", {
+                /*#__PURE__*/ _jsxs("div", {
                     className: "flex-1",
-                    children: /*#__PURE__*/ _jsx(Text, {
-                        color: textColor,
-                        truncate: true,
-                        children: content
-                    })
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            color: textColor,
+                            truncate: true,
+                            children: content
+                        }),
+                        description && /*#__PURE__*/ _jsx(Text, {
+                            color: "subdued",
+                            variant: "bodySm",
+                            children: description
+                        })
+                    ]
                 }),
                 (secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.tooltip) ? /*#__PURE__*/ _jsx(Tooltip, {
                     content: secondaryAction.tooltip,

package/dist/esm/components/AnnouncementBar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { Text, Icon } from "../index.js";
+import Text from "./Text.js";
+import Icon from "./Icon.js";
 var styles = tv({
     base: "Litho-AnnouncementBar text-center p-2 min-h-10 flex items-center justify-center bg-brand",
     variants: {
@@ -29,6 +30,7 @@ var iconContainerStyles = tv({
  * @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.
+ * @param {boolean} [props.fixed] - Whether to fix the announcement bar to the top of the page.
  *
  * @returns {JSX.Element} AnnouncementBar component.
  */ function AnnouncementBar() {

package/dist/esm/components/AppProvider.js

@@ -57,7 +57,16 @@ import React, { createContext, useState, useEffect, useContext } from "react";
 /**
  * @returns {DarkModeContextType}
  */ export var useDarkMode = function() {
-    return useContext(DarkModeContext);
+    var context = useContext(DarkModeContext);
+    if (!context) {
+        return {
+            darkModeAvailable: false,
+            darkMode: false,
+            toggleDarkMode: function() {},
+            setDarkModeAvailable: function() {}
+        };
+    }
+    return context;
 };
 export var FrameContext = /*#__PURE__*/ createContext({
     embedded: false,

package/dist/esm/components/Autocomplete.js

@@ -112,7 +112,12 @@ function _unsupported_iterable_to_array(o, minLen) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { cloneElement, isValidElement, useState } from "react";
 import { tv } from "tailwind-variants";
-import { Popover, TextField, Checkbox, Spinner, Text, Icon } from "../index.js";
+import Popover from "./Popover.js";
+import TextField from "./TextField.js";
+import Checkbox from "./Checkbox.js";
+import Spinner from "./Spinner.js";
+import Text from "./Text.js";
+import Icon from "./Icon.js";
 import { SearchMinor } from "@shopify/polaris-icons";
 var styles = tv({
     base: "Litho-Autocomplete flex flex-col"
@@ -134,18 +139,30 @@ function attachPropToTextField(children, prop) {
     });
 }
 /**
+ * @typedef {Object} AutocompleteOption
+ * @property {string} label - The label to display for the option.
+ * @property {string} value - The value to associate with the option.
+ * @property {string} [title] - An optional title to display for the option.
+ * @property {boolean} [allowMultiple] - Whether multiple options can be selected.
+ * @property {string} [selected] - The value of the option that is currently selected.
+ * @property {function} [onSelect] - The function to call when the option is selected.
+ * @property {Array<AutocompleteOption>} [options] - An optional array of sub-options to display for the option.
+ */ /**
+ * @typedef {Object} AutocompleteEmptyState
+ * @property {string} content - The content to display in the empty state.
+ * @property {React.ReactNode} icon - An optional icon to display in the empty state.
+ */ /**
  * Autocomplete component that provides a flexible dropdown menu with search and selection capabilities.
  *
  * @component
  * @param {Object} props - The props for the Autocomplete component.
- * @param {Array<Object>} props.options - The options to display in the dropdown. Each option should have a `label` and a `value`.
+ * @param {Array<AutocompleteOption>} props.options - The options to display in the dropdown.
  * @param {Array<string>} props.selected - The currently selected option values.
  * @param {"below"|"above"} [props.preferredPosition="below"] - The preferred position of the dropdown relative to the activator.
  * @param {"left"|"center"|"right"} [props.preferredAlignment="left"] - The preferred alignment of the dropdown.
  * @param {boolean} [props.allowMultiple=false] - Whether multiple options can be selected.
  * @param {boolean} [props.loading=false] - Whether to show a loading spinner in the dropdown.
- * @param {Object} [props.emptyState] - The content to display when there are no options.
- * @param {React.ReactNode} [props.emptyState.icon] - An optional icon to display in the empty state.
+ * @param {AutocompleteEmptyState} [props.emptyState] - The content to display when there are no options.
  * @param {function(Array<string>)} props.onSelect - Callback fired when the selection changes. Receives the new selected values.
  * @param {React.ReactNode} props.textField - The activator for the dropdown, typically a `TextField` component.
  * @param {string} [props.className] - Additional class names to apply to the component.
@@ -175,17 +192,25 @@ function attachPropToTextField(children, prop) {
         var option = param.option, allowMultiple = param.allowMultiple, selected = param.selected, onSelect = param.onSelect, setShowOptionsPopover = param.setShowOptionsPopover;
         var isChecked = selected.includes(option.value);
         if (allowMultiple) {
-            return /*#__PURE__*/ _jsx(Checkbox, {
-                label: option.label,
-                checked: isChecked,
-                onChange: function() {
-                    onSelect(isChecked ? selected.filter(function(v) {
-                        return v !== option.value;
-                    }) : _to_consumable_array(selected).concat([
-                        option.value
-                    ]));
+            return /*#__PURE__*/ _jsx("div", {
+                onMouseDown: function(e) {
+                    e.preventDefault();
                 },
-                className: "px-2 py-1.5 cursor-pointer rounded-md hover-dark"
+                onClick: function(e) {
+                    e.stopPropagation();
+                },
+                children: /*#__PURE__*/ _jsx(Checkbox, {
+                    label: option.label,
+                    checked: isChecked,
+                    onChange: function() {
+                        onSelect(isChecked ? selected.filter(function(v) {
+                            return v !== option.value;
+                        }) : _to_consumable_array(selected).concat([
+                            option.value
+                        ]));
+                    },
+                    className: "px-2 py-1.5 cursor-pointer rounded-md hover-dark"
+                })
             });
         }
         return /*#__PURE__*/ _jsx("div", {
@@ -276,6 +301,8 @@ Autocomplete.displayName = "Autocomplete";
  * @param {function} [props.onFocus] - Callback fired when the TextField gains focus (native TextField event).
  * @param {string} [props.placeholder] - Placeholder text for the TextField.
  * @param {string} [props.value] - The current value of the TextField.
+ * @param {string} [props.label] - The label for the TextField.
+ * @param {string} [props.labelHidden] - Whether to hide the label.
  * @param {function} [props.onChange] - Callback fired when the TextField value changes.
  *
  * @example
@@ -283,7 +310,7 @@ Autocomplete.displayName = "Autocomplete";
  *   placeholder="Search..."
  *   onTextFieldFocus={() => console.log("Focused")}
  * />
- */ Autocomplete.TextField = function AutocompleteTextField() {
+ */ var AutocompleteTextField = function() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     return /*#__PURE__*/ _jsx(TextField, _object_spread_props(_object_spread({}, props), {
         onFocus: function() {
@@ -296,5 +323,6 @@ Autocomplete.displayName = "Autocomplete";
         }
     }));
 };
-Autocomplete.TextField.displayName = "Autocomplete.TextField";
+Autocomplete.TextField = AutocompleteTextField;
+AutocompleteTextField.displayName = "Autocomplete.TextField";
 export default Autocomplete;

package/dist/esm/components/Badge.js

@@ -187,7 +187,7 @@ var progressBadgeStyles = tv({
     }
 });
 /**
- * Badge component with optional progress indicator.
+ * A Badge component that renders a small, colored label with a status or progress indicator. The badge can be configured with different statuses, progress states, and sizes.
  *
  * @component
  * @param {object} props - Component properties.
@@ -195,6 +195,7 @@ var progressBadgeStyles = tv({
  * @param {"complete" | "incomplete" | "partiallyComplete" | null} [props.progress] - Progress state of the badge.
  * @param {boolean} [props.capitalize] - Capitalize the first letter of the badge.
  * @param {"default" | "info" | "success" | "warning" | "critical" | "attention" | "highlight"} [props.status="default"] - Status variant to style the badge.
+ * @param {string} [props.className] - Additional CSS classes to apply to the badge.
  * @returns {JSX.Element} - Rendered Badge component with optional progress indicator.
  */ function Badge() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -221,5 +222,4 @@ var progressBadgeStyles = tv({
         ]
     });
 }
-;
 export default Badge;

package/dist/esm/components/Banner.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { Icon, Spinner, Text, Button, Link } from "../index.js";
+import Icon from "./Icon.js";
+import Spinner from "./Spinner.js";
+import Text from "./Text.js";
+import Button from "./Button.js";
+import Link from "./Link.js";
 import { CancelMinor, CircleAlertMajor, CircleInformationMajor, TickMinor } from "@shopify/polaris-icons";
 var styles = tv({
     base: "Litho-Banner relative rounded-md shadow-card bg-surface-highest outline outline-tint-3"
@@ -86,33 +90,28 @@ var STATUS_STYLES = {
 /**
  * @typedef {'neutral' | 'critical' | 'highlight' | 'success' | 'warning' | 'info' | 'caution' | 'attention'} BannerStatus
  */ /**
+ * @typedef BannerAction
+ * @property {string} content - The button label text
+ * @property {boolean} [primary=false] - Whether the button should have primary styling
+ * @property {boolean} [disabled=false] - Whether the button is disabled
+ * @property {boolean} [loading=false] - Whether to show a loading state
+ * @property {Function} [onAction] - Click handler for the action
+ * @property {string} [url] - URL to navigate to when clicked (opens in new tab)
+ */ /**
  * A Banner component that displays a styled banner with customizable title, status, icon, actions, and dismiss functionality.
  * The banner style and content change based on the provided props, allowing for various statuses and themes.
  *
  * @component
  *
  * @param {Object} props - The properties for configuring the Banner component.
- * @param {string} [props.title=null] - The title text for the banner. If not provided, no title will be displayed.
+ * @param {string} [props.title] - The title text for the banner. If not provided, no title will be displayed.
  * @param {BannerStatus} [props.status='neutral'] - The status of the banner, which determines its color and icon.
- * @param {Function} [props.onDismiss=null] - Callback function to handle the banner's dismiss action.
- * @param {React.ReactNode} [props.children=null] - Additional content to display within the banner.
- * @param {Object} [props.action=null] - Primary action configuration object
- * @param {string} props.action.content - The button label text
- * @param {boolean} [props.action.primary=false] - Whether the button should have primary styling
- * @param {boolean} [props.action.disabled=false] - Whether the button is disabled
- * @param {boolean} [props.action.loading=false] - Whether to show a loading state
- * @param {Function} [props.action.onAction] - Click handler for the action
- * @param {string} [props.action.url] - URL to navigate to when clicked (opens in new tab)
- * @param {Object} [props.secondaryAction=null] - Secondary action configuration object
- * @param {string} props.secondaryAction.content - The action label text
- * @param {boolean} [props.secondaryAction.link=false] - Whether to render as a link instead of a button
- * @param {boolean} [props.secondaryAction.monochrome=false] - Whether the link should be monochrome (only applies if link=true)
- * @param {boolean} [props.secondaryAction.disabled=false] - Whether the action is disabled
- * @param {boolean} [props.secondaryAction.loading=false] - Whether to show a loading state
- * @param {Function} [props.secondaryAction.onAction] - Click handler for the action
- * @param {string} [props.secondaryAction.url] - URL to navigate to when clicked (opens in new tab)
- * @param {FunctionComponent} [props.icon=null] - Custom icon to display on the banner. If not provided, a default icon is used based on the status.
- * @param {boolean} [props.spinner=false] - Shows a spinner icon instead of a status icon when set to true.
+ * @param {Function} [props.onDismiss] - Callback function to handle the banner's dismiss action.
+ * @param {React.ReactNode} [props.children] - Additional content to display within the banner.
+ * @param {BannerAction} [props.action] - Primary action configuration object
+ * @param {BannerAction} [props.secondaryAction] - Secondary action configuration object
+ * @param {FunctionComponent} [props.icon] - Custom icon to display on the banner. If not provided, a default icon is used based on the status.
+ * @param {boolean} [props.spinner] - Shows a spinner icon instead of a status icon when set to true.
  *
  * @returns {JSX.Element} The rendered Banner component.
  *

package/dist/esm/components/Box.js

@@ -187,9 +187,11 @@ var styles = tv({
  * @param {number | string} [props.maxWidth] - Maximum CSS width.
  * @param {number | string} [props.zIndex] - CSS z-index.
  * @param {Object} [props.style] - Additional inline styles for the Box.
+ * @param {string} [props.className] - Additional CSS classes to apply to the Box.
+ * @param {Function} [props.onClick] - Click handler for the Box.
  * 
  * @returns {JSX.Element} A rendered Box component with customized styling.
-*/ function Box() {
+*/ var Box = function() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var _props_as = props.as, as = _props_as === void 0 ? 'div' : _props_as, background = props.background, borderColor = props.borderColor, borderBlockStartWidth = props.borderBlockStartWidth, borderBlockEndWidth = props.borderBlockEndWidth, borderInlineStartWidth = props.borderInlineStartWidth, borderInlineEndWidth = props.borderInlineEndWidth, borderRadius = props.borderRadius, children = props.children, id = props.id, height = props.height, width = props.width, minHeight = props.minHeight, maxHeight = props.maxHeight, minWidth = props.minWidth, maxWidth = props.maxWidth, overflow = props.overflow, overflowX = props.overflowX, overflowY = props.overflowY, padding = props.padding, paddingBlockStart = props.paddingBlockStart, paddingBlockEnd = props.paddingBlockEnd, paddingInlineStart = props.paddingInlineStart, paddingInlineEnd = props.paddingInlineEnd, position = props.position, zIndex = props.zIndex, onClick = props.onClick, style = props.style, className = props.className;
     var classes = styles({
@@ -226,13 +228,12 @@ var styles = tv({
         maxWidth: maxWidth
     });
     var Element = as;
-    return /*#__PURE__*/ _jsx(Element, {
+    return /*#__PURE__*/ _jsx("div", {
         id: id,
         className: "".concat(classes).concat(className ? " ".concat(className) : ""),
         style: inlineStyles,
         onClick: onClick,
         children: children
     });
-}
-;
+};
 export default Box;