@heymantle/litho 0.0.15 → 0.0.16

package/dist/esm/stories/CheckboxCardGroup.stories.js

@@ -0,0 +1,421 @@
+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 _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_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 _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 _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 { transformStorySource } from "../utilities/transformers.js";
+import CheckboxCardGroup from "../components/CheckboxCardGroup.js";
+import Box from "../components/Box.js";
+import Text from "../components/Text.js";
+import Icon from "../components/Icon.js";
+import { HomeMinor, ProductsMinor, CustomersMinor } from "@shopify/polaris-icons";
+export default {
+    title: 'Litho/CheckboxCardGroup',
+    component: CheckboxCardGroup,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A grouped checkbox selection component that renders options in a single bordered container with dividers between items. Supports multi-select with the same grouped layout as RadioButtonCardGroup."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Optional title rendered above the group.'
+        },
+        name: {
+            control: 'text',
+            description: 'Checkbox group name attribute.'
+        },
+        error: {
+            control: 'text',
+            description: 'Error message displayed below the group.'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable all options.'
+        },
+        hideCheckbox: {
+            control: 'boolean',
+            description: 'Hide the checkbox controls.'
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        var _useState = _sliced_to_array(useState([
+            'analytics'
+        ]), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ _jsxs(Box, {
+            maxWidth: "500px",
+            children: [
+                /*#__PURE__*/ _jsx(CheckboxCardGroup, _object_spread_props(_object_spread({}, args), {
+                    title: "Select features",
+                    name: "features",
+                    options: [
+                        {
+                            value: 'analytics',
+                            label: 'Analytics',
+                            description: 'Track user behavior and engagement'
+                        },
+                        {
+                            value: 'notifications',
+                            label: 'Notifications',
+                            description: 'Email and push notification alerts'
+                        },
+                        {
+                            value: 'api',
+                            label: 'API Access',
+                            description: 'Integrate with external tools and services'
+                        }
+                    ],
+                    selected: selected,
+                    onChange: setSelected
+                })),
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockStart: "2",
+                    children: /*#__PURE__*/ _jsxs(Text, {
+                        color: "subdued",
+                        children: [
+                            "Selected: ",
+                            selected.length === 0 ? 'None' : selected.join(', ')
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Basic grouped checkbox selection with label and description per option. Multiple options can be selected.'
+            }
+        }
+    }
+};
+export var WithIcons = {
+    render: function(args) {
+        var _useState = _sliced_to_array(useState([]), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ _jsx(Box, {
+            maxWidth: "500px",
+            children: /*#__PURE__*/ _jsx(CheckboxCardGroup, _object_spread_props(_object_spread({}, args), {
+                title: "Choose sections to display",
+                name: "sections",
+                options: [
+                    {
+                        value: 'home',
+                        label: 'Home',
+                        description: 'Main dashboard view',
+                        icon: /*#__PURE__*/ _jsx(Icon, {
+                            source: HomeMinor,
+                            color: "subdued"
+                        })
+                    },
+                    {
+                        value: 'products',
+                        label: 'Products',
+                        description: 'Product catalog section',
+                        icon: /*#__PURE__*/ _jsx(Icon, {
+                            source: ProductsMinor,
+                            color: "subdued"
+                        })
+                    },
+                    {
+                        value: 'customers',
+                        label: 'Customers',
+                        description: 'Customer management area',
+                        icon: /*#__PURE__*/ _jsx(Icon, {
+                            source: CustomersMinor,
+                            color: "subdued"
+                        })
+                    }
+                ],
+                selected: selected,
+                onChange: setSelected
+            }))
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Options with icons on the left for visual identification.'
+            }
+        }
+    }
+};
+export var WithError = {
+    render: function(args) {
+        var _useState = _sliced_to_array(useState([]), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ _jsx(Box, {
+            maxWidth: "500px",
+            children: /*#__PURE__*/ _jsx(CheckboxCardGroup, _object_spread_props(_object_spread({}, args), {
+                title: "Select at least one feature",
+                name: "features-error",
+                error: "Please select at least one feature to continue",
+                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: selected,
+                onChange: setSelected
+            }))
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Group with an error message. The container border turns red to indicate the error state.'
+            }
+        }
+    }
+};
+export var DisabledOptions = {
+    render: function(args) {
+        var _useState = _sliced_to_array(useState([
+            'basic_reports'
+        ]), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ _jsx(Box, {
+            maxWidth: "500px",
+            children: /*#__PURE__*/ _jsx(CheckboxCardGroup, _object_spread_props(_object_spread({}, args), {
+                title: "Select add-ons",
+                name: "addons",
+                options: [
+                    {
+                        value: 'basic_reports',
+                        label: 'Basic Reports',
+                        description: 'Included with your plan'
+                    },
+                    {
+                        value: 'advanced_reports',
+                        label: 'Advanced Reports',
+                        description: 'Detailed analytics and exports'
+                    },
+                    {
+                        value: 'custom_branding',
+                        label: 'Custom Branding',
+                        description: 'Coming soon',
+                        disabled: true
+                    },
+                    {
+                        value: 'white_label',
+                        label: 'White Label',
+                        description: 'Enterprise only',
+                        disabled: true
+                    }
+                ],
+                selected: selected,
+                onChange: setSelected
+            }))
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Mix of enabled and disabled options. Disabled items show muted styling and are not selectable.'
+            }
+        }
+    }
+};
+export var HiddenCheckboxes = {
+    render: function(args) {
+        var _useState = _sliced_to_array(useState([
+            'email'
+        ]), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ _jsx(Box, {
+            maxWidth: "500px",
+            children: /*#__PURE__*/ _jsx(CheckboxCardGroup, _object_spread_props(_object_spread({}, args), {
+                title: "Notification channels",
+                name: "channels",
+                hideCheckbox: true,
+                options: [
+                    {
+                        value: 'email',
+                        label: 'Email',
+                        description: 'Receive notifications via email'
+                    },
+                    {
+                        value: 'sms',
+                        label: 'SMS',
+                        description: 'Get text message alerts'
+                    },
+                    {
+                        value: 'push',
+                        label: 'Push',
+                        description: 'Browser push notifications'
+                    }
+                ],
+                selected: selected,
+                onChange: setSelected
+            }))
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Checkbox controls hidden. Selection is indicated only by the background highlight.'
+            }
+        }
+    }
+};
+export var CheckboxOnRight = {
+    render: function(args) {
+        var _useState = _sliced_to_array(useState([
+            'daily_digest'
+        ]), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ _jsx(Box, {
+            maxWidth: "500px",
+            children: /*#__PURE__*/ _jsx(CheckboxCardGroup, _object_spread_props(_object_spread({}, args), {
+                title: "Email preferences",
+                name: "email-prefs",
+                checkboxPosition: "right",
+                options: [
+                    {
+                        value: 'daily_digest',
+                        label: 'Daily Digest',
+                        description: 'A summary of daily activity'
+                    },
+                    {
+                        value: 'weekly_report',
+                        label: 'Weekly Report',
+                        description: 'Weekly performance overview'
+                    },
+                    {
+                        value: 'product_updates',
+                        label: 'Product Updates',
+                        description: 'New features and improvements'
+                    },
+                    {
+                        value: 'marketing',
+                        label: 'Marketing',
+                        description: 'Promotions and special offers'
+                    }
+                ],
+                selected: selected,
+                onChange: setSelected
+            }))
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Checkbox controls positioned on the right side of each option.'
+            }
+        }
+    }
+};

package/dist/esm/stories/Collapsible.stories.js

@@ -188,8 +188,8 @@ export var WithCard = {
                     borderColor: "border",
                     children: /*#__PURE__*/ _jsxs(Stack, {
                         horizontal: true,
-                        align: "space-between",
-                        blockAlign: "center",
+                        justify: "between",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ _jsx(Text, {
                                 variant: "headingMd",
@@ -501,7 +501,7 @@ export var NestedCollapsible = {
                                             /*#__PURE__*/ _jsxs(Stack, {
                                                 horizontal: true,
                                                 gap: "sm",
-                                                blockAlign: "center",
+                                                align: "center",
                                                 paddingBlockEnd: "1",
                                                 children: [
                                                     /*#__PURE__*/ _jsx("span", {
@@ -515,7 +515,7 @@ export var NestedCollapsible = {
                                             /*#__PURE__*/ _jsxs(Stack, {
                                                 horizontal: true,
                                                 gap: "sm",
-                                                blockAlign: "center",
+                                                align: "center",
                                                 paddingBlockEnd: "1",
                                                 children: [
                                                     /*#__PURE__*/ _jsx("span", {
@@ -529,7 +529,7 @@ export var NestedCollapsible = {
                                             /*#__PURE__*/ _jsxs(Stack, {
                                                 horizontal: true,
                                                 gap: "sm",
-                                                blockAlign: "center",
+                                                align: "center",
                                                 paddingBlockEnd: "1",
                                                 children: [
                                                     /*#__PURE__*/ _jsx("span", {
@@ -569,7 +569,7 @@ export var NestedCollapsible = {
                                             /*#__PURE__*/ _jsxs(Stack, {
                                                 horizontal: true,
                                                 gap: "sm",
-                                                blockAlign: "center",
+                                                align: "center",
                                                 paddingBlockEnd: "1",
                                                 children: [
                                                     /*#__PURE__*/ _jsx("span", {
@@ -583,7 +583,7 @@ export var NestedCollapsible = {
                                             /*#__PURE__*/ _jsxs(Stack, {
                                                 horizontal: true,
                                                 gap: "sm",
-                                                blockAlign: "center",
+                                                align: "center",
                                                 paddingBlockEnd: "1",
                                                 children: [
                                                     /*#__PURE__*/ _jsx("span", {
@@ -600,7 +600,7 @@ export var NestedCollapsible = {
                                 /*#__PURE__*/ _jsxs(Stack, {
                                     horizontal: true,
                                     gap: "sm",
-                                    blockAlign: "center",
+                                    align: "center",
                                     paddingBlockEnd: "1",
                                     children: [
                                         /*#__PURE__*/ _jsx("span", {
@@ -707,7 +707,7 @@ export var AdvancedSettings = {
                                             /*#__PURE__*/ _jsxs(Stack, {
                                                 horizontal: true,
                                                 gap: "sm",
-                                                blockAlign: "center",
+                                                align: "center",
                                                 as: "label",
                                                 children: [
                                                     /*#__PURE__*/ _jsx("input", {
@@ -725,7 +725,7 @@ export var AdvancedSettings = {
                                             /*#__PURE__*/ _jsxs(Stack, {
                                                 horizontal: true,
                                                 gap: "sm",
-                                                blockAlign: "center",
+                                                align: "center",
                                                 children: [
                                                     /*#__PURE__*/ _jsx(Text, {
                                                         children: "API Timeout (seconds):"
@@ -743,7 +743,7 @@ export var AdvancedSettings = {
                                             /*#__PURE__*/ _jsxs(Stack, {
                                                 horizontal: true,
                                                 gap: "sm",
-                                                blockAlign: "center",
+                                                align: "center",
                                                 children: [
                                                     /*#__PURE__*/ _jsx(Text, {
                                                         children: "Max Retries:"

package/dist/esm/stories/ColorField.stories.js

@@ -668,8 +668,8 @@ export var ProductCustomization = {
                         /*#__PURE__*/ _jsx(Stack, {
                             horizontal: true,
                             align: "center",
-                            blockAlign: "center",
-                            className: "min-h-[200px]",
+                            justify: "center",
+                            className: "min-h-50",
                             children: /*#__PURE__*/ _jsxs("div", {
                                 style: {
                                     position: "relative",
@@ -779,7 +779,6 @@ export var ResponsiveBehavior = {
                         xs: 1,
                         md: 3
                     },
-                    gap: "4",
                     children: [
                         /*#__PURE__*/ _jsx(Box, {
                             children: /*#__PURE__*/ _jsx(ColorField, {