@heymantle/litho 0.0.15 → 0.0.16

package/dist/cjs/stories/RadioButtonCardGroup.stories.js

@@ -0,0 +1,502 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get AllowDeselect () {
+        return AllowDeselect;
+    },
+    get AppStageSelection () {
+        return AppStageSelection;
+    },
+    get Default () {
+        return Default;
+    },
+    get DisabledOptions () {
+        return DisabledOptions;
+    },
+    get HiddenRadioButtons () {
+        return HiddenRadioButtons;
+    },
+    get WithError () {
+        return WithError;
+    },
+    get WithIcons () {
+        return WithIcons;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _react = require("react");
+var _transformers = require("../utilities/transformers.js");
+var _RadioButtonCardGroup = /*#__PURE__*/ _interop_require_default(require("../components/RadioButtonCardGroup.js"));
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
+var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("../components/Icon.js"));
+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_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 _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: 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);
+}
+var _default = {
+    title: 'Litho/RadioButtonCardGroup',
+    component: _RadioButtonCardGroup.default,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A grouped radio selection component that renders options in a single bordered container with dividers between items. Similar API to ChoiceList but with RadioButtonCard-style rendering in a compact list layout."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Optional title rendered above the group.'
+        },
+        name: {
+            control: 'text',
+            description: 'Radio group name attribute.'
+        },
+        error: {
+            control: 'text',
+            description: 'Error message displayed below the group.'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable all options.'
+        },
+        hideRadioButton: {
+            control: 'boolean',
+            description: 'Hide the radio button controls.'
+        },
+        allowDeselect: {
+            control: 'boolean',
+            description: 'Allow clicking a selected option to deselect it.'
+        }
+    }
+};
+var Default = {
+    render: function(args) {
+        var _useState = _sliced_to_array((0, _react.useState)([
+            'standard'
+        ]), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            maxWidth: "500px",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_RadioButtonCardGroup.default, _object_spread_props(_object_spread({}, args), {
+                name: "plan",
+                options: [
+                    {
+                        value: 'basic',
+                        label: 'Basic',
+                        description: 'Essential features for individuals'
+                    },
+                    {
+                        value: 'standard',
+                        label: 'Standard',
+                        description: 'Everything in Basic plus team features'
+                    },
+                    {
+                        value: 'premium',
+                        label: 'Premium',
+                        description: 'Full suite for growing businesses'
+                    }
+                ],
+                selected: selected,
+                onChange: setSelected
+            }))
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Basic grouped radio selection with label and description per option.'
+            }
+        }
+    }
+};
+var WithIcons = {
+    render: function(args) {
+        var _useState = _sliced_to_array((0, _react.useState)([]), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            maxWidth: "500px",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_RadioButtonCardGroup.default, _object_spread_props(_object_spread({}, args), {
+                title: "Choose a section",
+                name: "section",
+                options: [
+                    {
+                        value: 'home',
+                        label: 'Home',
+                        description: 'Main dashboard view',
+                        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.HomeMinor,
+                            color: "subdued"
+                        })
+                    },
+                    {
+                        value: 'products',
+                        label: 'Products',
+                        description: 'Manage your product catalog',
+                        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.ProductsMinor,
+                            color: "subdued"
+                        })
+                    },
+                    {
+                        value: 'customers',
+                        label: 'Customers',
+                        description: 'View and manage customers',
+                        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                            source: _polarisicons.CustomersMinor,
+                            color: "subdued"
+                        })
+                    }
+                ],
+                selected: selected,
+                onChange: setSelected
+            }))
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Options with icons on the left for visual identification.'
+            }
+        }
+    }
+};
+var WithError = {
+    render: function(args) {
+        var _useState = _sliced_to_array((0, _react.useState)([]), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            maxWidth: "500px",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_RadioButtonCardGroup.default, _object_spread_props(_object_spread({}, args), {
+                title: "Select a plan",
+                name: "plan-error",
+                error: "Please select a plan to continue",
+                options: [
+                    {
+                        value: 'basic',
+                        label: 'Basic',
+                        description: 'For individuals'
+                    },
+                    {
+                        value: 'pro',
+                        label: 'Pro',
+                        description: 'For teams'
+                    },
+                    {
+                        value: 'enterprise',
+                        label: 'Enterprise',
+                        description: 'For organizations'
+                    }
+                ],
+                selected: selected,
+                onChange: setSelected
+            }))
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Group with an error message. The container border turns red to indicate the error state.'
+            }
+        }
+    }
+};
+var DisabledOptions = {
+    render: function(args) {
+        var _useState = _sliced_to_array((0, _react.useState)([
+            'free'
+        ]), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            maxWidth: "500px",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_RadioButtonCardGroup.default, _object_spread_props(_object_spread({}, args), {
+                title: "Select a tier",
+                name: "tier",
+                options: [
+                    {
+                        value: 'free',
+                        label: 'Free',
+                        description: 'Limited features'
+                    },
+                    {
+                        value: 'starter',
+                        label: 'Starter',
+                        description: 'Most popular for small teams'
+                    },
+                    {
+                        value: 'business',
+                        label: 'Business',
+                        description: 'Coming soon',
+                        disabled: true
+                    },
+                    {
+                        value: 'enterprise',
+                        label: 'Enterprise',
+                        description: 'Contact sales',
+                        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.'
+            }
+        }
+    }
+};
+var HiddenRadioButtons = {
+    render: function(args) {
+        var _useState = _sliced_to_array((0, _react.useState)([
+            'light'
+        ]), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            maxWidth: "500px",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_RadioButtonCardGroup.default, _object_spread_props(_object_spread({}, args), {
+                title: "Choose a theme",
+                name: "theme",
+                hideRadioButton: true,
+                options: [
+                    {
+                        value: 'light',
+                        label: 'Light',
+                        description: 'Clean and bright appearance'
+                    },
+                    {
+                        value: 'dark',
+                        label: 'Dark',
+                        description: 'Easy on the eyes'
+                    },
+                    {
+                        value: 'system',
+                        label: 'System',
+                        description: 'Match your device settings'
+                    }
+                ],
+                selected: selected,
+                onChange: setSelected
+            }))
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Radio button circles hidden. Selection is indicated only by the background highlight.'
+            }
+        }
+    }
+};
+var AllowDeselect = {
+    render: function(args) {
+        var _useState = _sliced_to_array((0, _react.useState)([
+            'weekly'
+        ]), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+            maxWidth: "500px",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_RadioButtonCardGroup.default, _object_spread_props(_object_spread({}, args), {
+                    title: "Email frequency",
+                    name: "frequency",
+                    allowDeselect: true,
+                    options: [
+                        {
+                            value: 'daily',
+                            label: 'Daily',
+                            description: 'Get updates every day'
+                        },
+                        {
+                            value: 'weekly',
+                            label: 'Weekly',
+                            description: 'A weekly digest of activity'
+                        },
+                        {
+                            value: 'monthly',
+                            label: 'Monthly',
+                            description: 'Monthly summary only'
+                        }
+                    ],
+                    selected: selected,
+                    onChange: setSelected
+                })),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    paddingBlockStart: "2",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        color: "subdued",
+                        children: selected.length === 0 ? 'No frequency selected (click an option, then click it again to deselect)' : "Selected: ".concat(selected[0])
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'With `allowDeselect`, clicking a selected option deselects it. Try clicking the selected option again.'
+            }
+        }
+    }
+};
+var AppStageSelection = {
+    render: function(args) {
+        var _useState = _sliced_to_array((0, _react.useState)([]), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            maxWidth: "500px",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_RadioButtonCardGroup.default, _object_spread_props(_object_spread({}, args), {
+                title: "What stage is this app in?",
+                name: "app-stage",
+                options: [
+                    {
+                        value: 'idea',
+                        label: 'Idea',
+                        description: "I'm still planning and haven't started building yet"
+                    },
+                    {
+                        value: 'development',
+                        label: 'In development',
+                        description: "I'm actively building the app"
+                    },
+                    {
+                        value: 'testing',
+                        label: 'Testing',
+                        description: "The app is built and I'm testing with beta users"
+                    },
+                    {
+                        value: 'live',
+                        label: 'Live',
+                        description: 'The app is published and available to users'
+                    }
+                ],
+                selected: selected,
+                onChange: setSelected
+            }))
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'A realistic onboarding example: selecting the current stage of an app in development.'
+            }
+        }
+    }
+};

package/dist/cjs/stories/RangeSlider.stories.js

@@ -438,7 +438,7 @@ var ProductFilter = {
                                         borderRadius: "1",
                                         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                             horizontal: true,
-                                            align: "space-between",
+                                            justify: "between",
                                             children: [
                                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                                     children: product.name
@@ -562,7 +562,6 @@ var BudgetPlanner = {
                                 }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
                                     columns: 2,
-                                    gap: "4",
                                     children: [
                                         /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                             gap: "xs",
@@ -794,7 +793,6 @@ var AdvancedConfiguration = {
                             children: [
                                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
                                     columns: 2,
-                                    gap: "4",
                                     children: [
                                         /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                             gap: "sm",

package/dist/cjs/stories/ResourceList.stories.js

@@ -310,8 +310,8 @@ var Default = {
                 id: "customer-".concat(customer.id),
                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
-                    align: "space-between",
-                    blockAlign: "center",
+                    justify: "between",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                             gap: "xs",
@@ -410,8 +410,8 @@ var WithSelection = {
                 accessibilityLabel: "Select ".concat(product.name),
                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
-                    align: "space-between",
-                    blockAlign: "center",
+                    justify: "between",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                             gap: "xs",
@@ -617,8 +617,8 @@ var EmptyState = {
                 id: "item-".concat(item.id),
                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
-                    align: "space-between",
-                    blockAlign: "center",
+                    justify: "between",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                             gap: "xs",
@@ -686,7 +686,7 @@ var EmptyState = {
                     paddingBlockEnd: "4",
                     children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                         horizontal: true,
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                 onClick: addItem,
@@ -705,7 +705,7 @@ var EmptyState = {
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                     horizontal: true,
                                     gap: "sm",
-                                    blockAlign: "center",
+                                    align: "center",
                                     children: [
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                             variant: "bodySm",
@@ -797,7 +797,7 @@ var WithoutDividers = {
                 id: "notification-".concat(notification.id),
                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                             borderRadius: "50%",
@@ -929,8 +929,8 @@ var ComplexItems = {
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                             horizontal: true,
-                            align: "space-between",
-                            blockAlign: "start",
+                            justify: "between",
+                            align: "start",
                             children: [
                                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                     gap: "xs",
@@ -963,8 +963,8 @@ var ComplexItems = {
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                             horizontal: true,
-                            align: "space-between",
-                            blockAlign: "center",
+                            justify: "between",
+                            align: "center",
                             children: [
                                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
                                     variant: "bodySm",

package/dist/cjs/stories/Spinner.stories.js

@@ -99,7 +99,7 @@ var Sizes = {
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                             size: "small"
@@ -112,7 +112,7 @@ var Sizes = {
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                             size: "default"
@@ -125,7 +125,7 @@ var Sizes = {
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                             size: "large"
@@ -156,7 +156,7 @@ var Colors = {
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                             color: "default"
@@ -169,7 +169,7 @@ var Colors = {
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                             color: "subdued"
@@ -182,7 +182,7 @@ var Colors = {
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                             color: "highlight"
@@ -199,7 +199,7 @@ var Colors = {
                     borderRadius: "2",
                     children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                         gap: "sm",
-                        inlineAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                                 color: "contrast"
@@ -261,7 +261,7 @@ var InCard = {
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                 paddingBlock: "8",
                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                             size: "large"
@@ -373,7 +373,7 @@ var CenteredOverlay = {
                         alignItems: "center",
                         justifyContent: "center",
                         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
-                            inlineAlign: "center",
+                            align: "center",
                             children: [
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                                     size: "large"