@heymantle/litho 0.0.3 → 0.0.5

package/dist/cjs/stories/ContextualSaveBar.stories.js

@@ -0,0 +1,971 @@
+"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 CustomMessages () {
+        return CustomMessages;
+    },
+    get Default () {
+        return Default;
+    },
+    get DisabledActions () {
+        return DisabledActions;
+    },
+    get LoadingStates () {
+        return LoadingStates;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _react = require("react");
+var _ContextualSaveBar = /*#__PURE__*/ _interop_require_default(require("../components/ContextualSaveBar.js"));
+var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
+var _TextField = /*#__PURE__*/ _interop_require_default(require("../components/TextField.js"));
+var _Page = /*#__PURE__*/ _interop_require_default(require("../components/Page.js"));
+var _Frame = /*#__PURE__*/ _interop_require_default(require("../components/Frame.js"));
+var _AppProvider = /*#__PURE__*/ _interop_require_default(require("../components/AppProvider.js"));
+var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
+var _transformers = require("../utilities/transformers.js");
+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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+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);
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+var _default = {
+    title: "Litho/ContextualSaveBar",
+    component: _ContextualSaveBar.default,
+    parameters: {
+        layout: "fullscreen",
+        docs: {
+            description: {
+                component: "A ContextualSaveBar component that manages a global save bar state. It doesn't render anything itself but controls the visibility and configuration of a contextual save bar through the FormContext. This component is typically used in forms to provide save/discard actions when there are unsaved changes."
+            }
+        }
+    },
+    tags: [
+        "autodocs"
+    ],
+    decorators: [
+        function(Story) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_AppProvider.default, {
+                darkModeAvailable: true,
+                darkModeStorageKey: "storybook-dark-mode",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Frame.default, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        padding: "4",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})
+                    })
+                })
+            });
+        }
+    ],
+    argTypes: {
+        saveAction: {
+            control: "object",
+            description: "Action configuration for the save button"
+        },
+        discardAction: {
+            control: "object",
+            description: "Action configuration for the discard button"
+        },
+        message: {
+            control: "text",
+            description: "Message to display in the contextual save bar"
+        }
+    }
+};
+var Default = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)(false), 2), showSaveBar = _useState[0], setShowSaveBar = _useState[1];
+        var _useState1 = _sliced_to_array((0, _react.useState)({
+            title: "Product Title",
+            description: "Product description"
+        }), 2), formData = _useState1[0], setFormData = _useState1[1];
+        var _useState2 = _sliced_to_array((0, _react.useState)({
+            title: "Product Title",
+            description: "Product description"
+        }), 2), originalData = _useState2[0], setOriginalData = _useState2[1];
+        var _useState3 = _sliced_to_array((0, _react.useState)(false), 2), saving = _useState3[0], setSaving = _useState3[1];
+        var hasChanges = JSON.stringify(formData) !== JSON.stringify(originalData);
+        var handleSave = function() {
+            return _async_to_generator(function() {
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            setSaving(true);
+                            // Simulate API call
+                            return [
+                                4,
+                                new Promise(function(resolve) {
+                                    return setTimeout(resolve, 1500);
+                                })
+                            ];
+                        case 1:
+                            _state.sent();
+                            setOriginalData(_object_spread({}, formData));
+                            setSaving(false);
+                            setShowSaveBar(false);
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        var handleDiscard = function() {
+            setFormData(_object_spread({}, originalData));
+            setShowSaveBar(false);
+        };
+        var handleFieldChange = function(field, value) {
+            setFormData(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, field, value));
+            });
+            if (!showSaveBar && !hasChanges) {
+                setShowSaveBar(true);
+            }
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Page.default, {
+            title: "Product Management",
+            children: [
+                showSaveBar && hasChanges && /*#__PURE__*/ (0, _jsxruntime.jsx)(_ContextualSaveBar.default, {
+                    message: "You have unsaved changes",
+                    saveAction: {
+                        accessibilityLabel: "Save changes",
+                        content: "Save changes",
+                        onAction: handleSave,
+                        loading: saving,
+                        disabled: saving
+                    },
+                    discardAction: {
+                        onAction: handleDiscard,
+                        disabled: saving
+                    }
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    title: "Product Information",
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        gap: "md",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                label: "Product Title",
+                                value: formData.title,
+                                onChange: function(value) {
+                                    return handleFieldChange("title", value);
+                                }
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                label: "Description",
+                                value: formData.description,
+                                onChange: function(value) {
+                                    return handleFieldChange("description", value);
+                                },
+                                multiline: 3
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                                padding: "4",
+                                background: "subdued",
+                                borderRadius: "default",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingSm",
+                                        children: "Instructions"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                        paddingBlockStart: "2",
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "bodySm",
+                                            children: "Make changes to the fields above to see the contextual save bar appear. The save bar will show when there are unsaved changes and hide when changes are saved or discarded."
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: _transformers.transformStorySource
+            },
+            description: {
+                story: "Basic contextual save bar that appears when form data changes."
+            }
+        }
+    }
+};
+var CustomMessages = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)(null), 2), activeForm = _useState[0], setActiveForm = _useState[1];
+        var _useState1 = _sliced_to_array((0, _react.useState)({
+            name: "John Doe",
+            email: "john@example.com"
+        }), 2), profileData = _useState1[0], setProfileData = _useState1[1];
+        var _useState2 = _sliced_to_array((0, _react.useState)({
+            notifications: true,
+            theme: "light"
+        }), 2), settingsData = _useState2[0], setSettingsData = _useState2[1];
+        var scenarios = [
+            {
+                key: "profile",
+                title: "Profile Form",
+                message: "Your profile changes haven't been saved",
+                data: profileData,
+                setData: setProfileData,
+                fields: [
+                    {
+                        key: "name",
+                        label: "Full Name",
+                        type: "text"
+                    },
+                    {
+                        key: "email",
+                        label: "Email Address",
+                        type: "email"
+                    }
+                ]
+            },
+            {
+                key: "settings",
+                title: "Settings Form",
+                message: "Settings modifications are pending",
+                data: settingsData,
+                setData: setSettingsData,
+                fields: [
+                    {
+                        key: "notifications",
+                        label: "Enable Notifications",
+                        type: "checkbox"
+                    },
+                    {
+                        key: "theme",
+                        label: "Theme",
+                        type: "select",
+                        options: [
+                            "light",
+                            "dark"
+                        ]
+                    }
+                ]
+            }
+        ];
+        var handleSave = function(formKey) {
+            return _async_to_generator(function() {
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            return [
+                                4,
+                                new Promise(function(resolve) {
+                                    return setTimeout(resolve, 1000);
+                                })
+                            ];
+                        case 1:
+                            _state.sent();
+                            setActiveForm(null);
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        var handleDiscard = function(formKey) {
+            setActiveForm(null);
+        // Reset to original values in real implementation
+        };
+        var activateForm = function(formKey) {
+            setActiveForm(formKey);
+        };
+        var activeScenario = scenarios.find(function(s) {
+            return s.key === activeForm;
+        });
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Page.default, {
+            title: "Multiple Forms Demo",
+            children: [
+                activeScenario && /*#__PURE__*/ (0, _jsxruntime.jsx)(_ContextualSaveBar.default, {
+                    message: activeScenario.message,
+                    saveAction: {
+                        onAction: function() {
+                            return handleSave(activeForm);
+                        },
+                        accessibilityLabel: "Save changes",
+                        content: "Save changes"
+                    },
+                    discardAction: {
+                        onAction: function() {
+                            return handleDiscard(activeForm);
+                        },
+                        accessibilityLabel: "Discard changes",
+                        content: "Discard changes"
+                    }
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
+                    gap: "lg",
+                    children: scenarios.map(function(scenario) {
+                        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+                            title: scenario.title,
+                            padded: true,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
+                                    gap: "md",
+                                    children: scenario.fields.map(function(field) {
+                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                            children: field.type === "checkbox" ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                                horizontal: true,
+                                                gap: "sm",
+                                                blockAlign: "center",
+                                                as: "label",
+                                                children: [
+                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                                                        type: "checkbox",
+                                                        checked: scenario.data[field.key],
+                                                        onChange: function(e) {
+                                                            scenario.setData(function(prev) {
+                                                                return _object_spread_props(_object_spread({}, prev), _define_property({}, field.key, e.target.checked));
+                                                            });
+                                                            activateForm(scenario.key);
+                                                        }
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                        children: field.label
+                                                    })
+                                                ]
+                                            }) : field.type === "select" ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                                                children: [
+                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                                        paddingBlockEnd: "2",
+                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                            variant: "bodySm",
+                                                            children: field.label
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("select", {
+                                                        value: scenario.data[field.key],
+                                                        onChange: function(e) {
+                                                            scenario.setData(function(prev) {
+                                                                return _object_spread_props(_object_spread({}, prev), _define_property({}, field.key, e.target.value));
+                                                            });
+                                                            activateForm(scenario.key);
+                                                        },
+                                                        style: {
+                                                            padding: "0.5rem",
+                                                            borderRadius: "4px",
+                                                            border: "1px solid #ccc"
+                                                        },
+                                                        children: field.options.map(function(option) {
+                                                            return /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                                                value: option,
+                                                                children: option.charAt(0).toUpperCase() + option.slice(1)
+                                                            }, option);
+                                                        })
+                                                    })
+                                                ]
+                                            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                                label: field.label,
+                                                type: field.type,
+                                                value: scenario.data[field.key],
+                                                onChange: function(value) {
+                                                    scenario.setData(function(prev) {
+                                                        return _object_spread_props(_object_spread({}, prev), _define_property({}, field.key, value));
+                                                    });
+                                                    activateForm(scenario.key);
+                                                }
+                                            })
+                                        }, field.key);
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                    paddingBlockStart: "4",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                        variant: "bodySm",
+                                        tone: "subdued",
+                                        children: [
+                                            'Make changes to see: "',
+                                            scenario.message,
+                                            '"'
+                                        ]
+                                    })
+                                })
+                            ]
+                        }, scenario.key);
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: _transformers.transformStorySource
+            },
+            description: {
+                story: "Different contextual save bars with custom messages for various forms."
+            }
+        }
+    }
+};
+var LoadingStates = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)({
+            content: "Some content here"
+        }), 2), formData = _useState[0], setFormData = _useState[1];
+        var _useState1 = _sliced_to_array((0, _react.useState)(false), 2), saving = _useState1[0], setSaving = _useState1[1];
+        var _useState2 = _sliced_to_array((0, _react.useState)(false), 2), discarding = _useState2[0], setDiscarding = _useState2[1];
+        var _useState3 = _sliced_to_array((0, _react.useState)(false), 2), showSaveBar = _useState3[0], setShowSaveBar = _useState3[1];
+        var handleSave = function() {
+            return _async_to_generator(function() {
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            setSaving(true);
+                            return [
+                                4,
+                                new Promise(function(resolve) {
+                                    return setTimeout(resolve, 2000);
+                                })
+                            ];
+                        case 1:
+                            _state.sent();
+                            setSaving(false);
+                            setShowSaveBar(false);
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        var handleDiscard = function() {
+            return _async_to_generator(function() {
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            setDiscarding(true);
+                            return [
+                                4,
+                                new Promise(function(resolve) {
+                                    return setTimeout(resolve, 1000);
+                                })
+                            ];
+                        case 1:
+                            _state.sent();
+                            setDiscarding(false);
+                            setFormData({
+                                content: "Some content here"
+                            });
+                            setShowSaveBar(false);
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Page.default, {
+            title: "Loading States Demo",
+            children: [
+                showSaveBar && /*#__PURE__*/ (0, _jsxruntime.jsx)(_ContextualSaveBar.default, {
+                    message: saving ? "Saving changes..." : discarding ? "Discarding changes..." : "Unsaved changes",
+                    saveAction: {
+                        onAction: handleSave,
+                        loading: saving,
+                        disabled: saving || discarding,
+                        accessibilityLabel: saving ? "Saving in progress" : "Save changes",
+                        content: saving ? "Saving..." : "Save changes"
+                    },
+                    discardAction: {
+                        onAction: handleDiscard,
+                        loading: discarding,
+                        disabled: saving || discarding,
+                        accessibilityLabel: discarding ? "Discarding in progress" : "Discard changes",
+                        content: discarding ? "Discarding..." : "Discard changes"
+                    }
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+                    title: "Document Editor",
+                    padded: true,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                            label: "Content",
+                            value: formData.content,
+                            onChange: function(value) {
+                                setFormData({
+                                    content: value
+                                });
+                                setShowSaveBar(true);
+                            },
+                            multiline: 5
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                            paddingBlockStart: "8",
+                            padding: "4",
+                            background: "subdued",
+                            borderRadius: "default",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: "Demo Controls"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                    paddingBlockStart: "2",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                        horizontal: true,
+                                        gap: "md",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                onClick: function() {
+                                                    return setShowSaveBar(true);
+                                                },
+                                                disabled: showSaveBar,
+                                                size: "slim",
+                                                children: "Show Save Bar"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                onClick: function() {
+                                                    return setShowSaveBar(false);
+                                                },
+                                                disabled: !showSaveBar,
+                                                size: "slim",
+                                                children: "Hide Save Bar"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                    paddingBlockStart: "4",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                        variant: "bodySm",
+                                        children: [
+                                            "Status:",
+                                            " ",
+                                            saving ? "Saving..." : discarding ? "Discarding..." : showSaveBar ? "Changes pending" : "No changes"
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: _transformers.transformStorySource
+            },
+            description: {
+                story: "Contextual save bar with loading states for save and discard actions."
+            }
+        }
+    }
+};
+var DisabledActions = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)({
+            title: "",
+            content: "",
+            category: ""
+        }), 2), formData = _useState[0], setFormData = _useState[1];
+        var _useState1 = _sliced_to_array((0, _react.useState)(false), 2), showSaveBar = _useState1[0], setShowSaveBar = _useState1[1];
+        var isFormValid = formData.title.trim() && formData.content.trim() && formData.category;
+        var handleSave = function() {
+            if (isFormValid) {
+                alert("Form saved successfully!");
+                setShowSaveBar(false);
+            }
+        };
+        var handleDiscard = function() {
+            setFormData({
+                title: "",
+                content: "",
+                category: ""
+            });
+            setShowSaveBar(false);
+        };
+        var handleFieldChange = function(field, value) {
+            setFormData(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, field, value));
+            });
+            setShowSaveBar(true);
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Page.default, {
+            title: "Form Validation Demo",
+            children: [
+                showSaveBar && /*#__PURE__*/ (0, _jsxruntime.jsx)(_ContextualSaveBar.default, {
+                    message: isFormValid ? "Ready to save changes" : "Please complete all required fields before saving",
+                    saveAction: {
+                        onAction: handleSave,
+                        disabled: !isFormValid,
+                        accessibilityLabel: isFormValid ? "Save form" : "Cannot save - form incomplete",
+                        content: isFormValid ? "Save form" : "Cannot save - form incomplete"
+                    },
+                    discardAction: {
+                        onAction: handleDiscard,
+                        accessibilityLabel: "Discard all changes",
+                        content: "Discard all changes"
+                    }
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    title: "Article Creation",
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        gap: "md",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                label: "Title *",
+                                value: formData.title,
+                                onChange: function(value) {
+                                    return handleFieldChange("title", value);
+                                },
+                                error: showSaveBar && !formData.title.trim(),
+                                placeholder: "Enter article title"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                        paddingBlockEnd: "2",
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "bodySm",
+                                            children: "Category *"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("select", {
+                                        value: formData.category,
+                                        onChange: function(e) {
+                                            return handleFieldChange("category", e.target.value);
+                                        },
+                                        style: {
+                                            width: "100%",
+                                            padding: "0.75rem",
+                                            borderRadius: "4px",
+                                            border: showSaveBar && !formData.category ? "1px solid #e74c3c" : "1px solid #ccc"
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                                value: "",
+                                                children: "Select a category"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                                value: "technology",
+                                                children: "Technology"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                                value: "business",
+                                                children: "Business"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                                value: "lifestyle",
+                                                children: "Lifestyle"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                label: "Content *",
+                                value: formData.content,
+                                onChange: function(value) {
+                                    return handleFieldChange("content", value);
+                                },
+                                error: showSaveBar && !formData.content.trim(),
+                                multiline: 4,
+                                placeholder: "Write your article content here..."
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                                padding: "4",
+                                background: "subdued",
+                                borderRadius: "default",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingSm",
+                                        children: "Validation Status"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                                        paddingBlockStart: "2",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                                variant: "bodySm",
+                                                style: {
+                                                    color: formData.title.trim() ? "#27ae60" : "#e74c3c"
+                                                },
+                                                children: [
+                                                    "Title: ",
+                                                    formData.title.trim() ? "✓ Valid" : "✗ Required"
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                                variant: "bodySm",
+                                                style: {
+                                                    color: formData.category ? "#27ae60" : "#e74c3c"
+                                                },
+                                                children: [
+                                                    "Category: ",
+                                                    formData.category ? "✓ Selected" : "✗ Required"
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                                variant: "bodySm",
+                                                style: {
+                                                    color: formData.content.trim() ? "#27ae60" : "#e74c3c"
+                                                },
+                                                children: [
+                                                    "Content: ",
+                                                    formData.content.trim() ? "✓ Valid" : "✗ Required"
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: _transformers.transformStorySource
+            },
+            description: {
+                story: "Contextual save bar with disabled save action based on form validation."
+            }
+        }
+    }
+};