@heymantle/litho 0.0.1

package/dist/cjs/components/Checkbox.js

@@ -0,0 +1,175 @@
+"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 _polarisicons = require("@shopify/polaris-icons");
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-Checkbox group flex gap-2 py-1",
+    variants: {
+        disabled: {
+            false: "cursor-pointer"
+        }
+    }
+});
+var checkboxStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-Checkbox__Control w-4.5 h-4.5 pt-px rounded-sm border flex items-center justify-center",
+    variants: {
+        disabled: {
+            true: "bg-form-bg-disabled border-form-border"
+        }
+    },
+    compoundVariants: [
+        {
+            hasError: true,
+            disabled: false,
+            checked: false,
+            class: "bg-form-bg-error border-form-border-error hover:bg-form-bg-error-low hover:ring hover:ring-form-focus-error"
+        },
+        {
+            hasError: true,
+            disabled: false,
+            checked: true,
+            class: "bg-critical border-form-border-error hover:ring hover:ring-form-focus-error"
+        },
+        {
+            hasError: false,
+            disabled: false,
+            checked: false,
+            class: "bg-form-bg border-form-border hover:border-form-border-focus hover:ring hover:ring-form-focus"
+        },
+        {
+            hasError: false,
+            disabled: false,
+            checked: true,
+            class: "bg-form-accent border-form-border-focus hover:border-form-border-focus hover:ring hover:ring-form-focus"
+        }
+    ]
+});
+/**
+ * Checkbox Component
+ *
+ * A custom checkbox component with support for labels, help text, and extensive styling using Tailwind Variants (tv).
+ *
+ * @component
+ *
+ * @param {Object} props - Props for the Checkbox component.
+ * @param {string} [props.label] - The text label for the checkbox.
+ * @param {boolean} [props.labelHidden=false] - If true, hides the label visually but keeps it available for screen readers.
+ * @param {string} [props.id] - The unique identifier for the checkbox input.
+ * @param {string} [props.name] - The name attribute for the checkbox input.
+ * @param {string} [props.value] - The value attribute for the checkbox input.
+ * @param {string} [props.error] - An error message associated with the checkbox, if any.
+ * @param {boolean} [props.checked=false] - Indicates whether the checkbox is checked.
+ * @param {boolean} [props.disabled=false] - Indicates whether the checkbox is disabled.
+ * @param {string} [props.helpText] - Additional descriptive text for the checkbox.
+ * @param {function} [props.onChange] - Callback function called when the checkbox state changes.
+ * @param {function} [props.onFocus] - Callback function called when the checkbox gains focus.
+ * @param {function} [props.onBlur] - Callback function called when the checkbox loses focus.
+ *
+ * @returns {JSX.Element} The rendered Checkbox component.
+ *
+ * @example
+ * <Checkbox
+ *   label="Accept Terms"
+ *   id="accept-terms"
+ *   name="terms"
+ *   checked={true}
+ *   disabled={false}
+ *   helpText="You must accept the terms to proceed."
+ *   onChange={(e) => console.log('Checkbox changed:', e.target.checked)}
+ * />
+ */ function Checkbox() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var label = props.label, tooltip = props.tooltip, labelHidden = props.labelHidden, id = props.id, name = props.name, value = props.value, error = props.error, tmp = props.checked, _checked = tmp === void 0 ? false : tmp, _props_indeterminate = props.indeterminate, indeterminate = _props_indeterminate === void 0 ? false : _props_indeterminate, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, helpText = props.helpText, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, className = props.className;
+    var checked = !!_checked;
+    var hasError = !!error;
+    var classes = styles({
+        disabled: disabled
+    });
+    var checkboxClasses = checkboxStyles({
+        checked: checked || indeterminate,
+        disabled: disabled,
+        hasError: hasError
+    });
+    var handleChange = function() {
+        if (onChange) {
+            onChange(!checked);
+        }
+    };
+    var handleFocus = function(event) {
+        if (onFocus) {
+            onFocus(event);
+        }
+    };
+    var handleBlur = function(event) {
+        if (onBlur) {
+            onBlur(event);
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: "Litho-CheckboxContainer flex flex-col gap-0",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("label", {
+                className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                        type: "checkbox",
+                        id: id,
+                        name: name,
+                        value: value,
+                        checked: checked,
+                        disabled: disabled,
+                        onChange: handleChange,
+                        onFocus: handleFocus,
+                        onBlur: handleBlur,
+                        className: "Litho-Checkbox__Input sr-only"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "Litho-Checkbox__ControlContainer w-5 h-5 flex items-center justify-center",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                            className: checkboxClasses,
+                            children: [
+                                checked && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                    color: disabled ? "inputFgDisabled" : hasError ? "white" : "inputFg",
+                                    source: _polarisicons.TickMinor,
+                                    className: "pointer-events-none"
+                                }),
+                                !checked && indeterminate && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                    color: disabled ? "inputFgDisabled" : hasError ? "white" : "inputFg",
+                                    source: _polarisicons.MinusMajor,
+                                    className: "pointer-events-none"
+                                })
+                            ]
+                        })
+                    }),
+                    label && !labelHidden && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Label, {
+                        tooltip: tooltip,
+                        disabled: disabled,
+                        as: "p",
+                        children: label
+                    })
+                ]
+            }),
+            helpText && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                color: "subdued",
+                className: "pl-7",
+                children: helpText
+            }),
+            error && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                color: "critical",
+                className: "pl-7",
+                children: error
+            })
+        ]
+    });
+}
+var _default = Checkbox;

package/dist/cjs/components/ChoiceList.js

@@ -0,0 +1,160 @@
+"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 _Checkbox = /*#__PURE__*/ _interop_require_default(require("./Checkbox"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _Label = /*#__PURE__*/ _interop_require_default(require("./Label"));
+var _RadioButton = /*#__PURE__*/ _interop_require_default(require("./RadioButton"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("./VerticalStack"));
+var _polarisicons = require("@shopify/polaris-icons");
+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_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+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 _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);
+}
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-ChoiceList flex flex-col gap-1"
+});
+/**
+ * A ChoiceList component for rendering a list of selectable options.
+ *
+ * @component
+ *
+ * @param {Object} props - The properties object.
+ * @param {string} [props.title] - The title of the choice list.
+ * @param {boolean} [props.titleHidden=false] - Whether to hide the title visually.
+ * @param {boolean} [props.allowMultiple=false] - Whether multiple selections are allowed.
+ * @param {Array} props.choices - The available choices for selection.
+ * @param {string} props.choices[].value - The value of the choice.
+ * @param {string} props.choices[].label - The display label of the choice.
+ * @param {boolean} [props.choices[].disabled=false] - Whether the choice is disabled.
+ * @param {Array} props.selected - The currently selected values.
+ * @param {Function} props.onChange - Callback when the selection changes. Receives the updated array of selected values.
+ * @param {string} [props.error] - Error message to display, if any.
+ * @param {boolean} [props.disabled=false] - Whether the entire choice list is disabled.
+ * @param {string} [props.name] - The name attribute for the choice inputs (used for grouping radio buttons).
+ *
+ * @returns {JSX.Element} A rendered choice list component.
+ *
+ * @example
+ * <ChoiceList
+ *   title="Select your options"
+ *   allowMultiple={true}
+ *   choices={[
+ *     { value: "option1", label: "Option 1" },
+ *     { value: "option2", label: "Option 2" },
+ *   ]}
+ *   selected={["option1"]}
+ *   onChange={(selected) => console.log(selected)}
+ *   error="Please select at least one option."
+ * />
+ */ function ChoiceList() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var title = props.title, tooltip = props.tooltip, titleHidden = props.titleHidden, allowMultiple = props.allowMultiple, choices = props.choices, selected = props.selected, onChange = props.onChange, error = props.error, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, name = props.name;
+    var classes = styles();
+    var ControlElement = allowMultiple ? _Checkbox.default : _RadioButton.default;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: classes,
+        children: [
+            title && !titleHidden && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                as: "p",
+                tooltip: tooltip,
+                children: title
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+                children: choices.map(function(choice, index) {
+                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(ControlElement, {
+                                label: choice.label,
+                                tooltip: choice.tooltip,
+                                value: choice.value,
+                                disabled: choice.disabled || disabled,
+                                name: name,
+                                helpText: choice.helpText,
+                                checked: selected.includes(choice.value),
+                                onChange: function() {
+                                    if (allowMultiple) {
+                                        if (selected.includes(choice.value)) {
+                                            onChange(selected.filter(function(value) {
+                                                return value !== choice.value;
+                                            }));
+                                        } else {
+                                            if (typeof selected === "string") {
+                                                onChange([
+                                                    selected,
+                                                    choice.value
+                                                ]);
+                                            } else {
+                                                onChange(_to_consumable_array(selected).concat([
+                                                    choice.value
+                                                ]));
+                                            }
+                                        }
+                                    } else {
+                                        onChange([
+                                            choice.value
+                                        ]);
+                                    }
+                                }
+                            }),
+                            choice.renderChildren && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: "pl-7",
+                                children: choice.renderChildren()
+                            })
+                        ]
+                    }, index);
+                })
+            }),
+            error && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "flex gap-2",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                        source: _polarisicons.CircleAlertMajor,
+                        color: "critical"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        color: "critical",
+                        children: error
+                    })
+                ]
+            })
+        ]
+    });
+}
+var _default = ChoiceList;

package/dist/cjs/components/Collapsible.js

@@ -0,0 +1,42 @@
+"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 styles = (0, _tailwindvariants.tv)({
+    base: "Litho-Collapsible",
+    variants: {
+        open: {
+            true: "max-h-screen",
+            false: "max-h-0 overflow-hidden"
+        }
+    }
+});
+/**
+ * Collapsible Component
+ * 
+ * @component
+ * @param {Object} props - Properties passed to component.
+ * @param {boolean} props.open - If true, the collapsible is open (expanded); otherwise, it's closed (collapsed).
+ * @param {React.ReactNode} props.children - Content displayed inside the collapsible component.
+ * @param {string} [props.className] - Additional CSS classes to append to the generated styles.
+ * @returns {JSX.Element} A collapsible container that shows or hides its children based on the `open` state.
+ */ function Collapsible() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var open = props.open, children = props.children, className = props.className;
+    var classes = styles({
+        open: open
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        children: children
+    });
+}
+var _default = Collapsible;

package/dist/cjs/components/ColorField.js

@@ -0,0 +1,159 @@
+"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 = require("react");
+var _reactcolor = require("react-color");
+var _tailwindvariants = require("tailwind-variants");
+var _index = require("../index");
+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);
+}
+var colorContainer = (0, _tailwindvariants.tv)({
+    base: "Litho-ColorField relative flex items-center gap-2 cursor-pointer px-1 py-1 rounded-md w-full-plus-2 -left-1",
+    variants: {
+        hoverable: {
+            true: "hover"
+        }
+    }
+});
+var colorCell = (0, _tailwindvariants.tv)({
+    base: "w-8 h-8 min-w-8 min-h-8 rounded-md border border-tint-5"
+});
+/**
+ * ColorField component provides a UI for selecting colors using the SketchPicker.
+ * It displays the currently selected color and allows toggling a color picker popover.
+ * Useful for choosing solid colors in forms or design tools.
+ *
+ * @component
+ * @example
+ * <ColorField
+ *   label="Primary Color"
+ *   name="primary"
+ *   value="#ff0000"
+ *   onChange={(newColor) => setColor(newColor)}
+ *   zIndexOverride={100}
+ *   presetColors={['#ff0000', '#00ff00', '#0000ff']}
+ * />
+ *
+ * @param {Object} props - Component props
+ * @param {string} props.label - The label displayed above the color value
+ * @param {string} props.name - The name associated with the color field, used as a key
+ * @param {string} props.value - The currently selected color value; can be a hex string or CSS variable
+ * @param {function} props.onChange - Callback function that receives the new color value when changed
+ * @param {number} [props.zIndexOverride] - Optional z-index value to override the default popover z-index
+ * @param {string[]} [props.presetColors=[]] - Optional array of preset colors shown in the picker
+ *
+ * @returns {JSX.Element} A color picker field with label and current value preview
+ */ var ColorField = function(param) {
+    var label = param.label, name = param.name, _value = param.value, onChange = param.onChange, zIndexOverride = param.zIndexOverride, _param_presetColors = param.presetColors, presetColors = _param_presetColors === void 0 ? [] : _param_presetColors;
+    var value = _value.startsWith("var(--") ? getComputedStyle(document.documentElement).getPropertyValue(_value.replace("var(", "").replace(")", "")).trim() : _value;
+    var _useState = _sliced_to_array((0, _react.useState)(false), 2), displayColorPicker = _useState[0], setDisplayColorPicker = _useState[1];
+    var toggleDisplayColorPicker = function() {
+        return setDisplayColorPicker(!displayColorPicker);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: colorContainer({
+            hoverable: true
+        }),
+        onClick: function() {
+            if (!displayColorPicker) {
+                toggleDisplayColorPicker();
+            }
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: colorCell(),
+                style: {
+                    backgroundColor: value
+                },
+                onClick: toggleDisplayColorPicker
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "flex flex-col gap-0",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                        variant: "bodySm",
+                        children: label
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                        variant: "bodySm",
+                        color: "subdued",
+                        children: value ? value.toUpperCase() : value
+                    })
+                ]
+            }),
+            displayColorPicker && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "Litho-ColorField__Activator fixed inset-0",
+                onClick: toggleDisplayColorPicker
+            }),
+            displayColorPicker && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "Litho-ColorField__Popover absolute z-10 left-0 top-0",
+                style: zIndexOverride ? {
+                    zIndex: zIndexOverride
+                } : {},
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcolor.SketchPicker, {
+                    color: value,
+                    onChange: function(param) {
+                        var hex = param.hex;
+                        return onChange(hex);
+                    },
+                    disableAlpha: true,
+                    presetColors: presetColors
+                }, name)
+            })
+        ]
+    });
+};
+var _default = ColorField;

package/dist/cjs/components/ContextualSaveBar.js

@@ -0,0 +1,53 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _react = require("react");
+var _AppProvider = require("../components/AppProvider");
+/**
+ * ContextualSaveBar Component
+ *
+ * This component manages and displays a global contextual save bar with custom save and discard actions.
+ * It uses the `FormContext` to control the visibility and configuration of the save bar.
+ * When mounted, it sets the provided message, save action, and discard action.
+ * When unmounted, it cleans up by resetting these values.
+ *
+ * @component
+ * @param {Object} props - Component properties.
+ * @param {Object} [props.saveAction] - The action for the "Save" button. Contains `onAction`, `loading`, `accessibilityLabel`, and `disabled`.
+ * @param {Object} [props.discardAction] - The action for the "Discard" button. Contains `onAction`, `loading`, `accessibilityLabel`, and `disabled`.
+ * @param {string} [props.message="Unsaved changes"] - The message to display on the contextual save bar.
+ * @returns {null} This component does not render anything; it only manages the save bar state.
+ */ function ContextualSaveBar(param) {
+    var saveAction = param.saveAction, discardAction = param.discardAction, _param_message = param.message, message = _param_message === void 0 ? "Unsaved changes" : _param_message;
+    var _useContext = (0, _react.useContext)(_AppProvider.FormContext), setShowGlobalContextualSaveBar = _useContext.setShowGlobalContextualSaveBar, setMessage = _useContext.setMessage, setSaveAction = _useContext.setSaveAction, setDiscardAction = _useContext.setDiscardAction;
+    (0, _react.useEffect)(function() {
+        setSaveAction(saveAction);
+        setDiscardAction(discardAction);
+        setMessage(message);
+        setShowGlobalContextualSaveBar(true);
+        return function() {
+            setShowGlobalContextualSaveBar(false);
+            setMessage(null);
+            setSaveAction(null);
+            setDiscardAction(null);
+        };
+    }, [
+        setShowGlobalContextualSaveBar,
+        setMessage,
+        setSaveAction,
+        setDiscardAction,
+        message,
+        saveAction,
+        discardAction
+    ]);
+    return null;
+}
+var _default = ContextualSaveBar;