@heymantle/litho 0.0.1

package/dist/esm/components/Autocomplete.js

@@ -0,0 +1,300 @@
+"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 _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+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 _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+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 _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+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 _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 _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+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 React, { cloneElement, isValidElement, useState } from "react";
+import { tv } from "tailwind-variants";
+import { Popover, TextField, Checkbox, Spinner, Text, Icon } from "../index.js";
+import { SearchMinor } from "@shopify/polaris-icons";
+var styles = tv({
+    base: "Litho-Autocomplete flex flex-col"
+});
+function attachPropToTextField(children, prop) {
+    return React.Children.map(children, function(child) {
+        if (/*#__PURE__*/ isValidElement(child)) {
+            var _child_type, _child_props;
+            if (((_child_type = child.type) === null || _child_type === void 0 ? void 0 : _child_type.displayName) === "Autocomplete.TextField") {
+                return /*#__PURE__*/ cloneElement(child, prop);
+            }
+            if ((_child_props = child.props) === null || _child_props === void 0 ? void 0 : _child_props.children) {
+                return /*#__PURE__*/ cloneElement(child, {
+                    children: attachPropToTextField(child.props.children, prop)
+                });
+            }
+        }
+        return child;
+    });
+}
+/**
+ * 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<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 {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.
+ * @param {function} [props.onClose] - Callback fired when the dropdown closes.
+ * @param {number} [props.zIndexOverride] - Custom z-index for the dropdown.
+ *
+ * @example
+ * <Autocomplete
+ *   options={[{ label: "Option 1", value: "1" }, { label: "Option 2", value: "2" }]}
+ *   selected={["1"]}
+ *   allowMultiple
+ *   onSelect={(selected) => console.log(selected)}
+ *   textField={<Autocomplete.TextField placeholder="Search..." />}
+ * />
+ */ function Autocomplete() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var options = props.options, selected = props.selected, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_preferredAlignment = props.preferredAlignment, preferredAlignment = _props_preferredAlignment === void 0 ? "left" : _props_preferredAlignment, allowMultiple = props.allowMultiple, loading = props.loading, emptyState = props.emptyState, onSelect = props.onSelect, textField = props.textField, className = props.className, zIndexOverride = props.zIndexOverride;
+    var classes = styles();
+    var _useState = _sliced_to_array(useState(false), 2), showOptionsPopover = _useState[0], setShowOptionsPopover = _useState[1];
+    var onTextFieldFocus = function() {
+        if (!showOptionsPopover) {
+            setShowOptionsPopover(true);
+        }
+    };
+    var showEmptyState = options.length === 0 && !!(emptyState === null || emptyState === void 0 ? void 0 : emptyState.content);
+    var OptionItem = function(param) {
+        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
+                    ]));
+                },
+                className: "px-2 py-1.5 cursor-pointer rounded-md hover-dark"
+            });
+        }
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex py-1.5 px-3 cursor-pointer rounded-md hover-dark",
+            onClick: function() {
+                onSelect([
+                    option.value
+                ]);
+                setShowOptionsPopover && setShowOptionsPopover(false);
+            },
+            children: option.label
+        });
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        children: /*#__PURE__*/ _jsx(Popover, {
+            active: showOptionsPopover,
+            preferredPosition: preferredPosition,
+            preferredAlignment: preferredAlignment,
+            activator: attachPropToTextField(textField, {
+                onTextFieldFocus: onTextFieldFocus
+            }),
+            activatorDisplayType: "block",
+            matchActivatorWidth: true,
+            onClose: function() {
+                setShowOptionsPopover(false);
+                if (props.onClose) {
+                    props.onClose();
+                }
+            },
+            zIndexOverride: zIndexOverride,
+            children: loading ? /*#__PURE__*/ _jsx("div", {
+                className: "py-4 flex justify-center items-center",
+                children: /*#__PURE__*/ _jsx(Spinner, {
+                    size: "small"
+                })
+            }) : showEmptyState ? /*#__PURE__*/ _jsxs("div", {
+                className: "py-4 flex flex-col gap-1 justify-center items-center",
+                children: [
+                    emptyState.icon && /*#__PURE__*/ _jsx(Icon, {
+                        source: SearchMinor,
+                        color: "subdued"
+                    }),
+                    /*#__PURE__*/ _jsx(Text, {
+                        children: emptyState.content
+                    })
+                ]
+            }) : options.length > 0 ? /*#__PURE__*/ _jsx("div", {
+                className: "p-2",
+                children: options.map(function(option, index) {
+                    return /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            option.title && /*#__PURE__*/ _jsx(Text, {
+                                variant: "bodyMd",
+                                color: "subdued",
+                                className: "pb-1",
+                                children: option.title
+                            }),
+                            option.options ? option.options.map(function(subOption, subIndex) {
+                                return /*#__PURE__*/ _jsx(OptionItem, {
+                                    option: subOption,
+                                    allowMultiple: allowMultiple,
+                                    selected: selected,
+                                    onSelect: onSelect,
+                                    setShowOptionsPopover: setShowOptionsPopover
+                                }, "".concat(index, "-").concat(subIndex));
+                            }) : /*#__PURE__*/ _jsx(OptionItem, {
+                                option: option,
+                                allowMultiple: allowMultiple,
+                                selected: selected,
+                                onSelect: onSelect,
+                                setShowOptionsPopover: setShowOptionsPopover
+                            }, index)
+                        ]
+                    }, index);
+                })
+            }) : undefined
+        })
+    });
+}
+Autocomplete.displayName = "Autocomplete";
+/**
+ * Autocomplete TextField component used as an activator for the Autocomplete dropdown.
+ *
+ * @component
+ * @param {Object} props - The props for the AutocompleteTextField component.
+ * @param {function} [props.onTextFieldFocus] - Callback fired when the TextField gains focus.
+ * @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 {function} [props.onChange] - Callback fired when the TextField value changes.
+ *
+ * @example
+ * <Autocomplete.TextField
+ *   placeholder="Search..."
+ *   onTextFieldFocus={() => console.log("Focused")}
+ * />
+ */ Autocomplete.TextField = function AutocompleteTextField() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return /*#__PURE__*/ _jsx(TextField, _object_spread_props(_object_spread({}, props), {
+        onFocus: function() {
+            if (props.onTextFieldFocus) {
+                props.onTextFieldFocus();
+            }
+            if (props.onFocus) {
+                props.onFocus();
+            }
+        }
+    }));
+};
+Autocomplete.TextField.displayName = "Autocomplete.TextField";
+export default Autocomplete;

package/dist/esm/components/Badge.js

@@ -0,0 +1,225 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+var styles = tv({
+    base: "Litho-Badge inline-flex items-center gap-1.5 text-sm rounded-full leading-normal min-h-5.5",
+    variants: {
+        status: {
+            info: "bg-info-alt text-info-alt-fg",
+            success: "bg-success-alt text-success-alt-fg dark:bg-success-alt/50",
+            warning: "bg-warning-alt text-warning-alt-fg dark:bg-warning-alt/50",
+            critical: "bg-critical-alt text-critical-alt-fg dark:bg-critical-alt/50",
+            attention: "bg-attention-alt text-attention-alt-fg dark:bg-attention-alt/50",
+            highlight: "bg-highlight-alt text-highlight-alt-fg dark:bg-highlight-alt/50",
+            insight: "bg-insight-alt text-insight-alt-fg dark:bg-insight-alt/50",
+            neutral: "bg-neutral-alt text-neutral-alt-fg dark:bg-neutral-alt/50",
+            default: "bg-neutral-alt text-neutral-alt-fg dark:bg-neutral-alt/50"
+        },
+        progress: {
+            true: "pl-2 pr-2.5",
+            false: "px-2.5"
+        },
+        capitalize: {
+            true: "capitalize",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        status: "neutral",
+        progress: "null",
+        capitalize: false
+    }
+});
+var progressBadgeStyles = tv({
+    base: "relative overflow-hidden rounded-max w-2 h-2 border",
+    variants: {
+        status: {
+            default: "border-neutral-alt-icon",
+            info: "border-info-alt-icon",
+            success: "border-success-alt-icon",
+            warning: "border-warning-alt-icon",
+            critical: "border-critical-alt-icon",
+            attention: "border-attention-alt-icon",
+            highlight: "border-highlight-alt-icon",
+            insight: "border-insight-alt-icon",
+            neutral: "border-neutral-alt-icon"
+        }
+    },
+    compoundVariants: [
+        {
+            status: "default",
+            progress: "complete",
+            class: "bg-neutral-alt-icon"
+        },
+        {
+            status: "default",
+            progress: "incomplete",
+            class: "border-neutral-alt-icon"
+        },
+        {
+            status: "default",
+            progress: "partiallyComplete",
+            class: "bg-neutral-alt"
+        },
+        {
+            status: "info",
+            progress: "complete",
+            class: "bg-info-alt-icon"
+        },
+        {
+            status: "info",
+            progress: "incomplete",
+            class: "border-info-alt-icon"
+        },
+        {
+            status: "info",
+            progress: "partiallyComplete",
+            class: "bg-info-alt"
+        },
+        {
+            status: "success",
+            progress: "complete",
+            class: "bg-success-alt-icon"
+        },
+        {
+            status: "success",
+            progress: "incomplete",
+            class: "border-success-alt-icon"
+        },
+        {
+            status: "success",
+            progress: "partiallyComplete",
+            class: "bg-success-alt"
+        },
+        {
+            status: "warning",
+            progress: "complete",
+            class: "bg-warning-alt-icon"
+        },
+        {
+            status: "warning",
+            progress: "incomplete",
+            class: "border-warning-alt-icon"
+        },
+        {
+            status: "warning",
+            progress: "partiallyComplete",
+            class: "bg-warning-alt"
+        },
+        {
+            status: "critical",
+            progress: "complete",
+            class: "bg-critical-alt-icon"
+        },
+        {
+            status: "critical",
+            progress: "incomplete",
+            class: "border-critical-alt-icon"
+        },
+        {
+            status: "critical",
+            progress: "partiallyComplete",
+            class: "bg-critical-alt"
+        },
+        {
+            status: "attention",
+            progress: "complete",
+            class: "bg-attention-alt-icon"
+        },
+        {
+            status: "attention",
+            progress: "incomplete",
+            class: "border-attention-alt-icon"
+        },
+        {
+            status: "attention",
+            progress: "partiallyComplete",
+            class: "bg-attention-alt"
+        },
+        {
+            status: "highlight",
+            progress: "complete",
+            class: "bg-highlight-alt-icon"
+        },
+        {
+            status: "highlight",
+            progress: "incomplete",
+            class: "border-highlight-alt-icon"
+        },
+        {
+            status: "highlight",
+            progress: "partiallyComplete",
+            class: "bg-highlight-alt"
+        },
+        {
+            status: "insight",
+            progress: "complete",
+            class: "bg-insight-alt-icon"
+        },
+        {
+            status: "insight",
+            progress: "incomplete",
+            class: "border-insight-alt-icon"
+        },
+        {
+            status: "insight",
+            progress: "partiallyComplete",
+            class: "bg-insight-alt"
+        },
+        {
+            status: "neutral",
+            progress: "complete",
+            class: "bg-neutral-alt-icon"
+        },
+        {
+            status: "neutral",
+            progress: "incomplete",
+            class: "border-neutral-alt-icon"
+        },
+        {
+            status: "neutral",
+            progress: "partiallyComplete",
+            class: "bg-neutral-alt"
+        }
+    ],
+    defaultVariants: {
+        status: "default",
+        progress: "null"
+    }
+});
+/**
+ * Badge component with optional progress indicator.
+ *
+ * @component
+ * @param {object} props - Component properties.
+ * @param {React.ReactNode} props.children - Content to display within the badge.
+ * @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.
+ * @returns {JSX.Element} - Rendered Badge component with optional progress indicator.
+ */ function Badge() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var children = props.children, progress = props.progress, status = props.status, capitalize = props.capitalize, className = props.className;
+    var classes = styles({
+        progress: !!progress,
+        status: status,
+        capitalize: capitalize
+    });
+    var progressBadgeClasses = progressBadgeStyles({
+        progress: progress || "null",
+        status: status
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        children: [
+            progress && /*#__PURE__*/ _jsx("div", {
+                className: progressBadgeClasses,
+                children: progress === "partiallyComplete" && /*#__PURE__*/ _jsx("div", {
+                    className: "absolute inset-0 top-1/2 h-1/2 bg-".concat(status, "-alt-icon")
+                })
+            }),
+            children
+        ]
+    });
+}
+;
+export default Badge;