@heymantle/litho 0.0.1

package/dist/esm/components/Select.js

@@ -0,0 +1,285 @@
+"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 { useState } from "react";
+import { tv } from "tailwind-variants";
+import Icon from "./Icon.js";
+import Label from "./Label.js";
+import Link from "./Link.js";
+import Text from "./Text.js";
+import { CaretDownMinor, CircleAlertMajor } from "@shopify/polaris-icons";
+var styles = tv({
+    base: "Litho-Select relative border border-form-border rounded-md",
+    variants: {
+        disabled: {
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            focused: true,
+            hasError: false,
+            class: "ring ring-form-focus border-form-border-focus"
+        },
+        {
+            focused: true,
+            hasError: true,
+            class: "ring ring-form-focus-error border-form-border-error"
+        },
+        {
+            disabled: false,
+            focused: false,
+            class: "hover:border-form-border-hover"
+        },
+        {
+            disabled: true,
+            hasError: true,
+            class: "bg-surface-higher"
+        },
+        {
+            disabled: true,
+            hasError: false,
+            class: "bg-form-bg-disabled"
+        },
+        {
+            disabled: false,
+            hasError: true,
+            class: "border-form-border-error focus:ring-form-focus-error bg-form-bg-error hover:border-form-border-error-hover"
+        },
+        {
+            disabled: false,
+            hasError: false,
+            class: "bg-form-bg"
+        }
+    ]
+});
+var contentStyles = tv({
+    base: "Litho-Select__Content min-h-7.5 pl-3 pr-2 flex items-center justify-between gap-2"
+});
+/**
+ * @function Select
+ * @description A dropdown component that allows users to select an option from a list.
+ * @param {Object} props - The properties for the Select component.
+ * @param {Array} props.options - Array of option objects for the select dropdown. Options can include groups.
+ * @param {string} [props.label] - Label for the select input.
+ * @param {Object} [props.labelAction] - An action object for the label. Includes `onAction` and `content`.
+ * @param {boolean} [props.labelHidden] - Whether to hide the label visually.
+ * @param {boolean} [props.labelInline] - Whether to display the label inline with the select.
+ * @param {boolean} [props.disabled=false] - Whether the select is disabled.
+ * @param {string} [props.helpText] - Optional help text displayed below the select.
+ * @param {string} [props.placeholder] - Placeholder text for the select input.
+ * @param {string} props.id - The ID for the select input.
+ * @param {string} props.name - The name for the select input.
+ * @param {string} props.value - The selected value.
+ * @param {React.ReactNode|import("./Tooltip").TooltipContentObject} props.tooltip - Tooltip content for the select.
+ * @param {string|boolean} [props.error] - Error message or flag indicating the select has an error.
+ * @param {function} props.onChange - Callback for when the selected value changes.
+ * @param {function} props.onFocus - Callback for when the select gains focus.
+ * @param {function} props.onBlur - Callback for when the select loses focus.
+ * @param {boolean} [props.requiredIndicator] - Whether to show a required indicator next to the label.
+ * @returns {JSX.Element} The rendered Select component.
+ */ function Select() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var options = props.options, label = props.label, tooltip = props.tooltip, labelAction = props.labelAction, labelHidden = props.labelHidden, labelInline = props.labelInline, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, helpText = props.helpText, placeholder = props.placeholder, id = props.id, name = props.name, value = props.value, error = props.error, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, requiredIndicator = props.requiredIndicator, className = props.className, contentClassName = props.contentClassName;
+    var _useState = _sliced_to_array(useState(false), 2), focused = _useState[0], setFocused = _useState[1];
+    var handleFocus = function(event) {
+        setFocused(true);
+        if (onFocus) {
+            onFocus(event);
+        }
+    };
+    var handleBlur = function(event) {
+        setFocused(false);
+        if (onBlur) {
+            onBlur(event);
+        }
+    };
+    var hasError = !!error;
+    var classes = styles({
+        disabled: disabled,
+        hasError: hasError,
+        focused: focused
+    });
+    var contentClasses = contentStyles();
+    var selectedOption = options.reduce(function(found, option) {
+        if (found) return found;
+        if (option.options) {
+            return option.options.find(function(subOption) {
+                return subOption.value === value;
+            });
+        } else {
+            return option.value === value ? option : null;
+        }
+    }, null);
+    var firstOption = options.reduce(function(found, option) {
+        if (found) return found;
+        if (option.options) {
+            return option.options[0];
+        } else {
+            return option;
+        }
+    }, null);
+    var handleContentClick = function(e) {
+        e.preventDefault();
+        var selectElement = e.currentTarget.previousElementSibling;
+        selectElement === null || selectElement === void 0 ? void 0 : selectElement.focus();
+        selectElement === null || selectElement === void 0 ? void 0 : selectElement.click();
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "Litho-SelectContainer flex flex-col gap-1",
+        children: [
+            label && !labelHidden && !labelInline && /*#__PURE__*/ _jsxs("div", {
+                className: "flex justify-between items-end",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        id: id,
+                        hidden: labelHidden,
+                        disabled: disabled,
+                        requiredIndicator: requiredIndicator,
+                        tooltip: tooltip,
+                        children: label
+                    }),
+                    labelAction && /*#__PURE__*/ _jsx(Link, {
+                        onClick: labelAction.onAction,
+                        removeUnderline: true,
+                        children: labelAction.content
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+                children: [
+                    /*#__PURE__*/ _jsxs("select", {
+                        className: "Litho-Select__Input opacity-0 absolute inset-0",
+                        name: name,
+                        id: id,
+                        value: value || "",
+                        onChange: function(e) {
+                            return onChange(e.target.value);
+                        },
+                        onFocus: handleFocus,
+                        onBlur: handleBlur,
+                        placeholder: placeholder,
+                        disabled: disabled,
+                        children: [
+                            placeholder && /*#__PURE__*/ _jsx("option", {
+                                value: "",
+                                disabled: focused,
+                                children: placeholder
+                            }),
+                            options.map(function(option) {
+                                if (option.options) {
+                                    return /*#__PURE__*/ _jsx("optgroup", {
+                                        label: option.title,
+                                        children: option.options.map(function(subOption) {
+                                            return /*#__PURE__*/ _jsx("option", {
+                                                value: subOption.value,
+                                                disabled: subOption.disabled,
+                                                children: subOption.label
+                                            }, subOption.value);
+                                        })
+                                    }, option.title);
+                                } else {
+                                    return /*#__PURE__*/ _jsx("option", {
+                                        value: option.value,
+                                        disabled: option.disabled,
+                                        children: option.label
+                                    }, option.value);
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "".concat(contentClasses).concat(contentClassName ? " ".concat(contentClassName) : ""),
+                        onClick: handleContentClick,
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex gap-2",
+                                children: [
+                                    label && !labelHidden && labelInline && /*#__PURE__*/ _jsx(Text, {
+                                        color: disabled ? "disabled" : "subdued",
+                                        className: "line-clamp-1!",
+                                        children: label
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        color: disabled ? "disabled" : "default",
+                                        className: "line-clamp-1!",
+                                        children: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || placeholder || (firstOption === null || firstOption === void 0 ? void 0 : firstOption.label)
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Icon, {
+                                source: CaretDownMinor,
+                                color: disabled ? "disabled" : "subdued",
+                                className: "pointer-events-none"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            error && /*#__PURE__*/ _jsxs("div", {
+                className: "flex gap-2",
+                children: [
+                    /*#__PURE__*/ _jsx(Icon, {
+                        source: CircleAlertMajor,
+                        color: "critical"
+                    }),
+                    /*#__PURE__*/ _jsx(Text, {
+                        color: "critical",
+                        children: error
+                    })
+                ]
+            }),
+            helpText && /*#__PURE__*/ _jsx(Text, {
+                color: "subdued",
+                children: helpText
+            })
+        ]
+    });
+}
+export default Select;

package/dist/esm/components/SkeletonText.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import { useMemo } from "react";
+var styles = tv({
+    base: "Litho-SkeletonText flex flex-col",
+    variants: {
+        gap: {
+            small: "gap-2",
+            medium: "gap-3",
+            large: "gap-4"
+        },
+        align: {
+            start: "items-start",
+            center: "items-center",
+            end: "items-end"
+        }
+    }
+});
+var lineStyles = tv({
+    base: "Litho-SkeletonText__Line rounded-sm bg-tint-4 dark:bg-tint-alt-4",
+    variants: {
+        type: {
+            body: "h-3"
+        }
+    },
+    compoundVariants: [
+        {
+            type: "body",
+            size: "md",
+            class: "h-3"
+        },
+        {
+            type: "body",
+            size: "lg",
+            class: "h-4"
+        },
+        {
+            type: "body",
+            size: "xl",
+            class: "h-5"
+        },
+        {
+            type: "heading",
+            size: "xs",
+            class: "h-5"
+        },
+        {
+            type: "heading",
+            size: "sm",
+            class: "h-7"
+        },
+        {
+            type: "heading",
+            size: "md",
+            class: "h-8"
+        },
+        {
+            type: "heading",
+            size: "lg",
+            class: "h-9"
+        }
+    ]
+});
+/**
+ * SkeletonText component for displaying placeholder text content.
+ * 
+ * @param {Object} props - The component properties.
+ * @param {number} [props.lines=3] - The number of lines to render. Defaults to 3 for body text.
+ * @param {"body"|"heading"} [props.type="body"] - The type of skeleton text
+ * @param {"xs"|"sm"|"md"|"lg"|"xl"} [props.size="md"] - The size of the skeleton text
+ * @param {number} [props.width] - The width of the skeleton text lines. If not provided, random widths are generated.
+ * @param {boolean} [props.fullWidth=false] - Whether the skeleton text lines should be full width.
+ * @param {"start"|"center"|"end"} [props.align="start"] - The alignment of the skeleton text lines.
+ * @param {string} [props.className] - Additional class names to apply to the root element.
+ * 
+ * @returns {JSX.Element} A JSX element rendering a skeleton placeholder text block.
+ * 
+ * @example
+ * <SkeletonText lines={5} type="heading" size="lg" width={80} className="custom-class" />
+ */ function SkeletonText() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var tmp = props.lines, _lines = tmp === void 0 ? 3 : tmp, _props_type = props.type, type = _props_type === void 0 ? "body" : _props_type, _props_size = props.size, size = _props_size === void 0 ? "md" : _props_size, _width = props.width, _props_fullWidth = props.fullWidth, fullWidth = _props_fullWidth === void 0 ? false : _props_fullWidth, className = props.className, _props_gap = props.gap, gap = _props_gap === void 0 ? "medium" : _props_gap, _props_align = props.align, align = _props_align === void 0 ? "start" : _props_align;
+    var lines = type === "heading" ? 1 : _lines;
+    var classes = styles({
+        lines: lines,
+        type: type,
+        size: size,
+        gap: gap,
+        align: align
+    });
+    var lineClasses = lineStyles({
+        type: type,
+        size: size
+    });
+    var randomWidths = useMemo(function() {
+        return Array.from({
+            length: lines
+        }, function() {
+            return Math.floor(Math.random() * (70 - 40 + 1)) + 40;
+        });
+    }, [
+        lines
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        children: Array.from({
+            length: lines
+        }, function(_, i) {
+            var lastLine = i === lines - 1;
+            var width = _width || ((type === "heading" || lastLine) && !fullWidth ? "".concat(randomWidths[i], "%") : "100%");
+            return /*#__PURE__*/ _jsx("div", {
+                className: lineClasses,
+                style: {
+                    width: width
+                }
+            }, i);
+        })
+    });
+}
+export default SkeletonText;

package/dist/esm/components/Spinner.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+var styles = tv({
+    base: "Litho-Spinner",
+    variants: {
+        size: {
+            small: "w-4 h-4",
+            medium: "w-5 h-5",
+            large: "w-7 h-7"
+        }
+    }
+});
+var svgStyles = tv({
+    base: "Litho-Spinner__Svg animate-spin-fast",
+    variants: {
+        color: {
+            default: "fill-brand",
+            subdued: "fill-tint-10"
+        }
+    }
+});
+/**
+ * Spinner Component
+ *
+ * This component renders a loading spinner with customizable size, color, and accessibility label.
+ *
+ * @param {Object} props - The props object.
+ * @param {('small'|'large')} [props.size='large'] - The size of the spinner, either "small" or "large".
+ * @param {('default'|'subdued')} [props.color='default'] - The color variant of the spinner.
+ * @param {string} [props.accessibilityLabel='Loading...'] - The accessible label for screen readers, describing the spinner's purpose.
+ * @returns {JSX.Element} The rendered Spinner component.
+ */ function Spinner() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _props_size = props.size, size = _props_size === void 0 ? "large" : _props_size, _props_color = props.color, color = _props_color === void 0 ? "default" : _props_color, _props_accessibilityLabel = props.accessibilityLabel, accessibilityLabel = _props_accessibilityLabel === void 0 ? "Loading..." : _props_accessibilityLabel;
+    var classes = styles({
+        size: size
+    });
+    var svgClasses = svgStyles({
+        color: color
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        className: classes,
+        "aria-label": accessibilityLabel,
+        role: "status",
+        children: size === 'large' ? /*#__PURE__*/ _jsx("svg", {
+            className: svgClasses,
+            viewBox: "0 0 44 44",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /*#__PURE__*/ _jsx("path", {
+                d: "M15.542 1.487A21.507 21.507 0 00.5 22c0 11.874 9.626 21.5 21.5 21.5 9.847 0 18.364-6.675 20.809-16.072a1.5 1.5 0 00-2.904-.756C37.803 34.755 30.473 40.5 22 40.5 11.783 40.5 3.5 32.217 3.5 22c0-8.137 5.3-15.247 12.942-17.65a1.5 1.5 0 10-.9-2.863z"
+            })
+        }) : /*#__PURE__*/ _jsx("svg", {
+            className: svgClasses,
+            viewBox: "0 0 20 20",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /*#__PURE__*/ _jsx("path", {
+                d: "M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"
+            })
+        })
+    });
+}
+;
+export default Spinner;