@heymantle/litho 0.0.15 → 0.0.16

package/dist/esm/components/CheckboxCardGroup.js

@@ -0,0 +1,370 @@
+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 _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 _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 _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+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 { tv } from "tailwind-variants";
+import Text from "./Text.js";
+import Label from "./Label.js";
+import Icon from "./Icon.js";
+import { TickMinor } from "@shopify/polaris-icons";
+import { CircleAlertMajor } from "@shopify/polaris-icons";
+/**
+ * @component CheckboxCardGroup
+ *
+ * @description A grouped checkbox selection component that renders options in a single bordered container with dividers between items, supporting multi-select.
+ *
+ * @usage
+ * - DO: Use for multi-select options that benefit from a compact grouped list layout with descriptions and icons.
+ * - DON'T: Use when each option needs its own standalone card appearance (use CheckboxCard individually).
+ *
+ * @accessibility
+ * - Each option uses a native checkbox input (sr-only) wrapped in a label for keyboard accessibility and screen reader support.
+ * - Focus-visible ring appears on keyboard navigation.
+ *
+ * @alternative
+ * - If you need standalone card-styled checkboxes, use `CheckboxCard`.
+ * - If you need single-select grouped options, use `RadioButtonCardGroup`.
+ * - If you need a simple inline radio/checkbox list, use `ChoiceList`.
+ *
+ * @param {Object} [props={}] - Component props.
+ * @param {string} [props.title] - Optional title rendered above the group.
+ * @param {React.ReactNode} [props.tooltip] - Tooltip content for the title.
+ * @param {boolean} [props.titleHidden=false] - Visually hides the title while keeping it accessible to screen readers.
+ * @param {Array<CheckboxCardGroupOption>} [props.options=[]] - Array of option objects to render.
+ * @param {string} props.options[].value - The value of the option.
+ * @param {string} props.options[].label - The display label of the option.
+ * @param {string} [props.options[].description] - A description displayed below the label.
+ * @param {React.ReactNode} [props.options[].icon] - Optional icon JSX displayed on the left.
+ * @param {boolean} [props.options[].disabled=false] - Whether this specific option is disabled.
+ * @param {string|React.ReactNode} [props.options[].helpText] - Additional descriptive text for the option.
+ * @param {React.ReactNode} [props.options[].tooltip] - Tooltip content for this option's label.
+ * @param {Array<string>} [props.selected=[]] - Currently selected values.
+ * @param {Function} [props.onChange] - Callback when selection changes. Receives updated array of selected values.
+ * @param {string} [props.name] - The name attribute for the checkbox inputs.
+ * @param {string} [props.error] - Error message displayed below the group.
+ * @param {boolean} [props.disabled=false] - Disables all options.
+ * @param {boolean} [props.hideCheckbox=false] - Hides the checkbox controls.
+ * @param {"left"|"right"} [props.checkboxPosition="left"] - Position of the checkbox control relative to the content.
+ * @param {string} [props.labelFontWeight="semibold"] - Font weight for option labels.
+ * @param {Object} [restProps] - Additional props passed to the root element.
+ *
+ * @returns {JSX.Element} The rendered CheckboxCardGroup component.
+ *
+ * @example
+ * <CheckboxCardGroup
+ *   title="Select features"
+ *   name="features"
+ *   options={[
+ *     { value: "analytics", label: "Analytics", description: "Track user behavior" },
+ *     { value: "notifications", label: "Notifications", description: "Email and push alerts" },
+ *     { value: "api", label: "API Access", description: "Integrate with other tools" },
+ *   ]}
+ *   selected={["analytics", "api"]}
+ *   onChange={(selected) => setSelected(selected)}
+ * />
+ */ var containerStyles = tv({
+    base: "Litho-CheckboxCardGroup border rounded-lg overflow-hidden",
+    variants: {
+        hasError: {
+            true: "border-form-border-error",
+            false: "border-edge-light"
+        }
+    },
+    defaultVariants: {
+        hasError: false
+    }
+});
+var itemStyles = tv({
+    base: "Litho-CheckboxCardGroup__Item p-3 pl-4 flex items-center gap-3 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-form-focus has-[:focus-visible]:ring-inset",
+    variants: {
+        checked: {
+            true: "",
+            false: ""
+        },
+        disabled: {
+            true: "bg-tint-1",
+            false: "cursor-pointer hover"
+        },
+        isLast: {
+            true: "",
+            false: "border-b border-edge-subdued"
+        },
+        checkboxPosition: {
+            right: "justify-between",
+            left: ""
+        }
+    },
+    defaultVariants: {
+        checkboxPosition: "left"
+    }
+});
+var checkboxStyles = 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"
+        }
+    ]
+});
+function CheckboxCardGroup() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var title = props.title, tooltip = props.tooltip, _props_titleHidden = props.titleHidden, titleHidden = _props_titleHidden === void 0 ? false : _props_titleHidden, _props_options = props.options, options = _props_options === void 0 ? [] : _props_options, _props_selected = props.selected, selected = _props_selected === void 0 ? [] : _props_selected, onChange = props.onChange, name = props.name, error = props.error, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_hideCheckbox = props.hideCheckbox, hideCheckbox = _props_hideCheckbox === void 0 ? false : _props_hideCheckbox, _props_checkboxPosition = props.checkboxPosition, checkboxPosition = _props_checkboxPosition === void 0 ? "left" : _props_checkboxPosition, _props_labelFontWeight = props.labelFontWeight, labelFontWeight = _props_labelFontWeight === void 0 ? "semibold" : _props_labelFontWeight, restProps = _object_without_properties(props, [
+        "title",
+        "tooltip",
+        "titleHidden",
+        "options",
+        "selected",
+        "onChange",
+        "name",
+        "error",
+        "disabled",
+        "hideCheckbox",
+        "checkboxPosition",
+        "labelFontWeight"
+    ]);
+    var hasError = !!error;
+    var containerClasses = containerStyles({
+        hasError: hasError
+    });
+    var handleOptionChange = function(optionValue) {
+        if (selected.includes(optionValue)) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(selected.filter(function(v) {
+                return v !== optionValue;
+            }));
+        } else {
+            onChange === null || onChange === void 0 ? void 0 : onChange(_to_consumable_array(selected).concat([
+                optionValue
+            ]));
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", _object_spread_props(_object_spread({
+        className: "Litho-CheckboxCardGroupContainer flex flex-col gap-1"
+    }, restProps), {
+        children: [
+            title && !titleHidden && /*#__PURE__*/ _jsx(Label, {
+                as: "p",
+                tooltip: tooltip,
+                children: title
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: containerClasses,
+                children: options.map(function(option, index) {
+                    var isChecked = selected.includes(option.value);
+                    var isDisabled = disabled || option.disabled;
+                    var isLast = index === options.length - 1;
+                    var itemClasses = itemStyles({
+                        checked: isChecked,
+                        disabled: isDisabled,
+                        isLast: isLast,
+                        checkboxPosition: checkboxPosition
+                    });
+                    var checkboxClasses = checkboxStyles({
+                        checked: isChecked,
+                        disabled: isDisabled,
+                        hasError: hasError
+                    });
+                    var checkboxControl = !hideCheckbox && /*#__PURE__*/ _jsx("div", {
+                        className: "Litho-Checkbox__ControlContainer w-5 h-5 flex items-center justify-center flex-shrink-0",
+                        children: /*#__PURE__*/ _jsx("div", {
+                            className: checkboxClasses,
+                            children: isChecked && /*#__PURE__*/ _jsx(Icon, {
+                                color: isDisabled ? "inputFgDisabled" : hasError ? "white" : "inputFg",
+                                source: TickMinor,
+                                className: "pointer-events-none"
+                            })
+                        })
+                    });
+                    return /*#__PURE__*/ _jsxs("label", {
+                        className: itemClasses,
+                        children: [
+                            checkboxPosition === "left" && checkboxControl,
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-4",
+                                children: [
+                                    option.icon && /*#__PURE__*/ _jsx("div", {
+                                        className: "flex-shrink-0",
+                                        children: option.icon
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        children: [
+                                            option.label && /*#__PURE__*/ _jsx(Label, {
+                                                tooltip: option.tooltip,
+                                                disabled: isDisabled,
+                                                fontWeight: labelFontWeight,
+                                                as: "p",
+                                                children: option.label
+                                            }),
+                                            option.description && /*#__PURE__*/ _jsx(Text, {
+                                                color: isDisabled ? "disabled" : "subdued",
+                                                children: option.description
+                                            }),
+                                            option.helpText && typeof option.helpText === "string" && /*#__PURE__*/ _jsx(Text, {
+                                                color: isDisabled ? "disabled" : "subdued",
+                                                variant: "bodySm",
+                                                children: option.helpText
+                                            }),
+                                            option.helpText && typeof option.helpText !== "string" && option.helpText
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "checkbox",
+                                name: name,
+                                value: option.value,
+                                checked: isChecked,
+                                disabled: isDisabled,
+                                onChange: function() {
+                                    return handleOptionChange(option.value);
+                                },
+                                className: "sr-only"
+                            }),
+                            checkboxPosition === "right" && checkboxControl
+                        ]
+                    }, option.value);
+                })
+            }),
+            error && /*#__PURE__*/ _jsxs("div", {
+                className: "flex gap-2 items-center",
+                children: [
+                    /*#__PURE__*/ _jsx(Icon, {
+                        source: CircleAlertMajor,
+                        color: "critical"
+                    }),
+                    /*#__PURE__*/ _jsx(Text, {
+                        color: "critical",
+                        children: error
+                    })
+                ]
+            })
+        ]
+    }));
+}
+export default CheckboxCardGroup;

package/dist/esm/components/ChoiceList.js

@@ -32,19 +32,20 @@ import RadioButton from "./RadioButton.js";
 import Text from "./Text.js";
 import Stack from "./Stack.js";
 import { CircleAlertMajor } from "@shopify/polaris-icons";
-var styles = tv({
-    base: "Litho-ChoiceList flex flex-col gap-1"
-});
 /**
- * @typedef {Object} ChoiceListItem
- * @property {string} value - The value of the choice.
- * @property {string} label - The display label of the choice.
- * @property {boolean} [disabled=false] - Whether the choice is disabled.
- * @property {React.ReactNode} [renderChildren] - A function that returns a React node to render as children of the choice.
- */ /**
- * A ChoiceList component for rendering a list of selectable options.
+ * @component ChoiceList
+ *
+ * @description A grouped set of checkboxes or radio buttons for selecting one or multiple options from a predefined list.
+ *
+ * @usage
+ * - DO: Use for presenting a labeled group of related choices (single or multi-select).
+ * - DON'T: Use for a single boolean toggle (use Checkbox).
  *
- * @component
+ * @accessibility
+ * - Renders with a fieldset and legend for proper grouping; screen readers announce the group label.
+ *
+ * @alternative
+ * - If you need a dropdown selection, use `Select`. If you need individual checkboxes, use `Checkbox`.
  *
  * @param {Object} props - The properties object.
  * @param {string} [props.title] - The title of the choice list.
@@ -71,6 +72,15 @@ var styles = tv({
  *   onChange={(selected) => console.log(selected)}
  *   error="Please select at least one option."
  * />
+ */ var styles = tv({
+    base: "Litho-ChoiceList flex flex-col gap-1"
+});
+/**
+ * @typedef {Object} ChoiceListItem
+ * @property {string} value - The value of the choice.
+ * @property {string} label - The display label of the choice.
+ * @property {boolean} [disabled=false] - Whether the choice is disabled.
+ * @property {React.ReactNode} [renderChildren] - A function that returns a React node to render as children of the choice.
  */ 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;

package/dist/esm/components/Code.js

@@ -129,14 +129,22 @@ import { useState } from "react";
 import { tv } from "tailwind-variants";
 import { ClipboardMinor, ClipboardCheckFilledMajor } from "@shopify/polaris-icons";
 import Button from "./Button.js";
-var styles = tv({
-    base: "Litho-Code p-2.5 bg-surface-normal shadow-inset rounded-md font-mono text-xs overflow-x-auto whitespace-pre"
-});
-var containerStyles = tv({
-    base: "Litho-Code-container relative group"
-});
 /**
- * A code component that renders code blocks with consistent styling.
+ * @component Code
+ *
+ * @description A monospace code block component with optional copy-to-clipboard functionality for displaying code snippets and technical values.
+ *
+ * @usage
+ * - DO: Use for displaying code snippets, API keys, or technical values with monospace font and optional copy button.
+ * - DON'T: Use for regular prose or body text; use `Text` for non-code content.
+ *
+ * @accessibility
+ * - Renders in a `<code>` element inside a `<pre>` block for proper semantic markup.
+ * - The copy button is keyboard accessible; ensure keyboard users can reach it via tab navigation.
+ *
+ * @alternative
+ * - If you need inline code within a sentence, use a native `<code>` HTML element directly.
+ * - If you need styled body text, use `Text` instead.
  *
  * @param {Object} props - Properties to customize the code component.
  * @param {string} [props.className] - Additional CSS class names.
@@ -155,7 +163,13 @@ var containerStyles = tv({
  * }}>
  *   {`const example = "code";`}
  * </Code>
- */ function Code() {
+ */ var styles = tv({
+    base: "Litho-Code p-2.5 bg-surface-normal shadow-inset rounded-md font-mono text-xs overflow-x-auto whitespace-pre"
+});
+var containerStyles = tv({
+    base: "Litho-Code-container relative group"
+});
+function Code() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var className = props.className, onCopy = props.onCopy, children = props.children, rest = _object_without_properties(props, [
         "className",

package/dist/esm/components/Collapsible.js

@@ -1,6 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-var styles = tv({
+/**
+ * @component Collapsible
+ *
+ * @description A container that shows or hides its children based on an `open` prop, used for progressive disclosure of content.
+ *
+ * @usage
+ * - DO: Use to progressively disclose content controlled by a toggle button or link.
+ * - DON'T: Use for tabbed content or navigation; use `Tabs` or `Disclosure` instead.
+ *
+ * @accessibility
+ * - Ensure the toggle element has `aria-expanded` matching the `open` prop and `aria-controls` pointing to the collapsible region.
+ * - Content inside is hidden via CSS overflow when collapsed; screen readers will not read hidden content.
+ *
+ * @alternative
+ * - If you need a styled container with disclosure styling, use `Disclosure` instead.
+ * - If you need tabbed content switching, use `Tabs` instead.
+ *
+ * @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.
+ */ var styles = tv({
     base: "Litho-Collapsible",
     variants: {
         open: {
@@ -9,16 +31,7 @@ var styles = tv({
         }
     }
 });
-/**
- * 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() {
+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({