@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/DropZone.stories.js

@@ -0,0 +1,1161 @@
+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 _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(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 _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+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 _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _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 _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+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
+        };
+    }
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import DropZone from "../components/DropZone.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Button from "../components/Button.js";
+import VerticalStack from "../components/VerticalStack.js";
+import HorizontalStack from "../components/HorizontalStack.js";
+import Box from "../components/Box.js";
+import { transformStorySource } from "../utilities/transformers.js";
+export default {
+    title: 'Litho/DropZone',
+    component: DropZone,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A DropZone component for handling file uploads with drag-and-drop functionality. It supports file type filtering, multiple file uploads, file previews, and various upload states including loading and error handling."
+            }
+        }
+    },
+    args: {
+        label: 'Upload files',
+        type: 'file',
+        allowMultiple: false
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Label for the DropZone'
+        },
+        type: {
+            control: 'select',
+            options: [
+                'file',
+                'image',
+                'video'
+            ],
+            description: 'Type of files accepted'
+        },
+        accept: {
+            control: 'object',
+            description: 'Array of accepted file types'
+        },
+        allowMultiple: {
+            control: 'boolean',
+            description: 'Whether multiple files can be uploaded'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the DropZone is disabled'
+        },
+        uploading: {
+            control: 'boolean',
+            description: 'Whether a file upload is in progress'
+        },
+        error: {
+            control: 'text',
+            description: 'Error message to display'
+        },
+        helpText: {
+            control: 'text',
+            description: 'Help text displayed below the DropZone'
+        },
+        showFilePreview: {
+            control: 'boolean',
+            description: 'Whether file previews are displayed'
+        },
+        uploadLabel: {
+            control: 'text',
+            description: 'Label for upload prompt'
+        },
+        uploadingLabel: {
+            control: 'text',
+            description: 'Label shown during file uploads'
+        },
+        dragLabel: {
+            control: 'text',
+            description: 'Label for the drag area'
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        var _useState = _sliced_to_array(useState([]), 2), uploadedFiles = _useState[0], setUploadedFiles = _useState[1];
+        var _useState1 = _sliced_to_array(useState(false), 2), uploading = _useState1[0], setUploading = _useState1[1];
+        var handleDrop = function(acceptedFiles) {
+            return _async_to_generator(function() {
+                var newFiles;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            setUploading(true);
+                            // Simulate file upload
+                            return [
+                                4,
+                                new Promise(function(resolve) {
+                                    return setTimeout(resolve, 2000);
+                                })
+                            ];
+                        case 1:
+                            _state.sent();
+                            newFiles = acceptedFiles.map(function(file, index) {
+                                return {
+                                    fileKey: "file-".concat(Date.now(), "-").concat(index),
+                                    fileName: file.name,
+                                    fileSize: file.size,
+                                    fileType: file.type,
+                                    file: file
+                                };
+                            });
+                            setUploadedFiles(function(prev) {
+                                return args.allowMultiple ? _to_consumable_array(prev).concat(_to_consumable_array(newFiles)) : [
+                                    newFiles[0]
+                                ];
+                            });
+                            setUploading(false);
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        var handleRemove = function(fileKey) {
+            setUploadedFiles(function(prev) {
+                return prev.filter(function(file) {
+                    return file.fileKey !== fileKey;
+                });
+            });
+        };
+        return /*#__PURE__*/ _jsx(Box, {
+            maxInlineSize: "500px",
+            children: /*#__PURE__*/ _jsx(Card, {
+                title: "File Upload",
+                padded: true,
+                children: /*#__PURE__*/ _jsx(DropZone, _object_spread_props(_object_spread({}, args), {
+                    uploading: uploading,
+                    uploadedFiles: uploadedFiles,
+                    onDropAccepted: handleDrop,
+                    onRemove: handleRemove
+                }))
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var ImageUpload = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([]), 2), uploadedFiles = _useState[0], setUploadedFiles = _useState[1];
+        var _useState1 = _sliced_to_array(useState(false), 2), uploading = _useState1[0], setUploading = _useState1[1];
+        var handleDrop = function(acceptedFiles) {
+            return _async_to_generator(function() {
+                var newFiles;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            setUploading(true);
+                            return [
+                                4,
+                                new Promise(function(resolve) {
+                                    return setTimeout(resolve, 1500);
+                                })
+                            ];
+                        case 1:
+                            _state.sent();
+                            newFiles = acceptedFiles.map(function(file, index) {
+                                return {
+                                    fileKey: "image-".concat(Date.now(), "-").concat(index),
+                                    fileName: file.name,
+                                    fileSize: file.size,
+                                    fileType: file.type,
+                                    file: file
+                                };
+                            });
+                            setUploadedFiles(function(prev) {
+                                return _to_consumable_array(prev).concat(_to_consumable_array(newFiles));
+                            });
+                            setUploading(false);
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        var handleRemove = function(fileKey) {
+            setUploadedFiles(function(prev) {
+                return prev.filter(function(file) {
+                    return file.fileKey !== fileKey;
+                });
+            });
+        };
+        return /*#__PURE__*/ _jsx(Box, {
+            maxInlineSize: "500px",
+            children: /*#__PURE__*/ _jsxs(Card, {
+                title: "Product Images",
+                padded: true,
+                children: [
+                    /*#__PURE__*/ _jsx(DropZone, {
+                        label: "Product Images",
+                        type: "image",
+                        allowMultiple: true,
+                        accept: [
+                            'image/jpeg',
+                            'image/png',
+                            'image/webp'
+                        ],
+                        helpText: "Upload JPEG, PNG, or WebP images. Maximum 10MB per file.",
+                        uploading: uploading,
+                        uploadedFiles: uploadedFiles,
+                        onDropAccepted: handleDrop,
+                        onRemove: handleRemove,
+                        uploadLabel: "Drag and drop images or click to browse"
+                    }),
+                    uploadedFiles.length > 0 && /*#__PURE__*/ _jsx(Box, {
+                        paddingBlockStart: "4",
+                        padding: "2",
+                        background: "subdued",
+                        borderRadius: "default",
+                        children: /*#__PURE__*/ _jsxs(Text, {
+                            variant: "bodySm",
+                            children: [
+                                uploadedFiles.length,
+                                " image",
+                                uploadedFiles.length !== 1 ? 's' : '',
+                                " uploaded"
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'DropZone configured for image uploads with file type restrictions.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var MultipleFiles = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([]), 2), uploadedFiles = _useState[0], setUploadedFiles = _useState[1];
+        var _useState1 = _sliced_to_array(useState(false), 2), uploading = _useState1[0], setUploading = _useState1[1];
+        var handleDrop = function(acceptedFiles) {
+            return _async_to_generator(function() {
+                var newFiles;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            setUploading(true);
+                            return [
+                                4,
+                                new Promise(function(resolve) {
+                                    return setTimeout(resolve, 2000);
+                                })
+                            ];
+                        case 1:
+                            _state.sent();
+                            newFiles = acceptedFiles.map(function(file, index) {
+                                return {
+                                    fileKey: "doc-".concat(Date.now(), "-").concat(index),
+                                    fileName: file.name,
+                                    fileSize: file.size,
+                                    fileType: file.type,
+                                    file: file
+                                };
+                            });
+                            setUploadedFiles(function(prev) {
+                                return _to_consumable_array(prev).concat(_to_consumable_array(newFiles));
+                            });
+                            setUploading(false);
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        var handleRemove = function(fileKey) {
+            setUploadedFiles(function(prev) {
+                return prev.filter(function(file) {
+                    return file.fileKey !== fileKey;
+                });
+            });
+        };
+        return /*#__PURE__*/ _jsx(Box, {
+            maxInlineSize: "500px",
+            children: /*#__PURE__*/ _jsxs(Card, {
+                title: "Document Upload",
+                padded: true,
+                children: [
+                    /*#__PURE__*/ _jsx(DropZone, {
+                        label: "Project Documents",
+                        allowMultiple: true,
+                        accept: [
+                            'application/pdf',
+                            'application/msword',
+                            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+                            'text/plain'
+                        ],
+                        helpText: "Upload PDF, Word documents, or text files. You can select multiple files at once.",
+                        uploading: uploading,
+                        uploadedFiles: uploadedFiles,
+                        onDropAccepted: handleDrop,
+                        onRemove: handleRemove,
+                        uploadLabel: "Drop documents here or click to browse",
+                        previewRows: 3
+                    }),
+                    /*#__PURE__*/ _jsxs(HorizontalStack, {
+                        paddingBlockStart: "6",
+                        align: "space-between",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsxs(Text, {
+                                variant: "bodySm",
+                                children: [
+                                    "Total: ",
+                                    uploadedFiles.length,
+                                    " files (",
+                                    (uploadedFiles.reduce(function(sum, file) {
+                                        return sum + file.fileSize;
+                                    }, 0) / 1024 / 1024).toFixed(2),
+                                    " MB)"
+                                ]
+                            }),
+                            uploadedFiles.length > 0 && /*#__PURE__*/ _jsx(Button, {
+                                size: "slim",
+                                onClick: function() {
+                                    return setUploadedFiles([]);
+                                },
+                                children: "Clear All"
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'DropZone for multiple document uploads with file size calculation.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var WithErrors = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([]), 2), uploadedFiles = _useState[0], setUploadedFiles = _useState[1];
+        var _useState1 = _sliced_to_array(useState(false), 2), uploading = _useState1[0], setUploading = _useState1[1];
+        var _useState2 = _sliced_to_array(useState(''), 2), error = _useState2[0], setError = _useState2[1];
+        var _useState3 = _sliced_to_array(useState([]), 2), rejectedFiles = _useState3[0], setRejectedFiles = _useState3[1];
+        var handleDropAccepted = function(acceptedFiles) {
+            return _async_to_generator(function() {
+                var newFiles;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            setError('');
+                            setRejectedFiles([]);
+                            setUploading(true);
+                            // Simulate potential upload failure
+                            return [
+                                4,
+                                new Promise(function(resolve) {
+                                    return setTimeout(resolve, 1500);
+                                })
+                            ];
+                        case 1:
+                            _state.sent();
+                            if (Math.random() > 0.7) {
+                                setError('Upload failed. Please try again.');
+                                setUploading(false);
+                                return [
+                                    2
+                                ];
+                            }
+                            newFiles = acceptedFiles.map(function(file, index) {
+                                return {
+                                    fileKey: "file-".concat(Date.now(), "-").concat(index),
+                                    fileName: file.name,
+                                    fileSize: file.size,
+                                    fileType: file.type,
+                                    file: file
+                                };
+                            });
+                            setUploadedFiles(function(prev) {
+                                return _to_consumable_array(prev).concat(_to_consumable_array(newFiles));
+                            });
+                            setUploading(false);
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        var handleDropRejected = function(rejectedFiles) {
+            setRejectedFiles(rejectedFiles);
+            setError("".concat(rejectedFiles.length, " file").concat(rejectedFiles.length !== 1 ? 's' : '', " rejected. Only images are allowed."));
+        };
+        var handleRemove = function(fileKey) {
+            setUploadedFiles(function(prev) {
+                return prev.filter(function(file) {
+                    return file.fileKey !== fileKey;
+                });
+            });
+        };
+        var retry = function() {
+            setError('');
+            setRejectedFiles([]);
+        };
+        return /*#__PURE__*/ _jsx(Box, {
+            maxInlineSize: "500px",
+            children: /*#__PURE__*/ _jsxs(Card, {
+                title: "Image Gallery Upload",
+                padded: true,
+                children: [
+                    /*#__PURE__*/ _jsx(DropZone, {
+                        label: "Gallery Images",
+                        type: "image",
+                        allowMultiple: true,
+                        helpText: "Only image files are accepted. Try uploading non-image files to see error handling.",
+                        error: error,
+                        uploading: uploading,
+                        uploadedFiles: uploadedFiles,
+                        onDropAccepted: handleDropAccepted,
+                        onDropRejected: handleDropRejected,
+                        onRemove: handleRemove
+                    }),
+                    rejectedFiles.length > 0 && /*#__PURE__*/ _jsx(Box, {
+                        paddingBlockStart: "4",
+                        padding: "4",
+                        background: "critical",
+                        borderRadius: "default",
+                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ _jsx(Text, {
+                                    variant: "headingSm",
+                                    color: "critical",
+                                    children: "Rejected Files:"
+                                }),
+                                rejectedFiles.map(function(file, index) {
+                                    return /*#__PURE__*/ _jsxs(Text, {
+                                        variant: "bodySm",
+                                        color: "critical",
+                                        children: [
+                                            "• ",
+                                            file.name,
+                                            " (",
+                                            file.type || 'unknown type',
+                                            ")"
+                                        ]
+                                    }, index);
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    onClick: retry,
+                                    size: "slim",
+                                    children: "Try Again"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Text, {
+                        paddingBlockStart: "4",
+                        variant: "bodySm",
+                        color: "subdued",
+                        children: "This demo has a 30% chance of simulating upload failures to demonstrate error handling."
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'DropZone with error handling for rejected files and upload failures.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var LoadingState = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(false), 2), previewLoading = _useState[0], setPreviewLoading = _useState[1];
+        var _useState1 = _sliced_to_array(useState([]), 2), uploadedFiles = _useState1[0], setUploadedFiles = _useState1[1];
+        var simulateLoading = function() {
+            setPreviewLoading(true);
+            setUploadedFiles([]);
+            setTimeout(function() {
+                setPreviewLoading(false);
+                setUploadedFiles([
+                    {
+                        fileKey: 'demo-1',
+                        fileName: 'presentation.pdf',
+                        fileSize: 2048000,
+                        fileType: 'application/pdf'
+                    },
+                    {
+                        fileKey: 'demo-2',
+                        fileName: 'spreadsheet.xlsx',
+                        fileSize: 1536000,
+                        fileType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+                    }
+                ]);
+            }, 3000);
+        };
+        var handleRemove = function(fileKey) {
+            setUploadedFiles(function(prev) {
+                return prev.filter(function(file) {
+                    return file.fileKey !== fileKey;
+                });
+            });
+        };
+        return /*#__PURE__*/ _jsx(Box, {
+            maxInlineSize: "500px",
+            children: /*#__PURE__*/ _jsxs(Card, {
+                title: "Loading States Demo",
+                padded: true,
+                children: [
+                    /*#__PURE__*/ _jsx(DropZone, {
+                        label: "Documents",
+                        allowMultiple: true,
+                        helpText: "Click the button below to simulate loading state with file previews.",
+                        previewLoading: previewLoading,
+                        uploadedFiles: uploadedFiles,
+                        onRemove: handleRemove,
+                        previewRows: 2
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        paddingBlockStart: "6",
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            onClick: simulateLoading,
+                            disabled: previewLoading,
+                            primary: true,
+                            children: previewLoading ? 'Loading...' : 'Simulate File Loading'
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Text, {
+                        paddingBlockStart: "4",
+                        variant: "bodySm",
+                        color: "subdued",
+                        children: "This demonstrates the loading skeleton while files are being processed or fetched."
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'DropZone with loading skeleton for file previews.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var DisabledStates = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([
+            {
+                fileKey: 'existing-1',
+                fileName: 'existing-document.pdf',
+                fileSize: 1024000,
+                fileType: 'application/pdf'
+            }
+        ]), 2), uploadedFiles = _useState[0], setUploadedFiles = _useState[1];
+        var _useState1 = _sliced_to_array(useState(false), 2), disabled = _useState1[0], setDisabled = _useState1[1];
+        var handleRemove = function(fileKey) {
+            setUploadedFiles(function(prev) {
+                return prev.filter(function(file) {
+                    return file.fileKey !== fileKey;
+                });
+            });
+        };
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "8",
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    maxInlineSize: "500px",
+                    children: /*#__PURE__*/ _jsxs(Card, {
+                        title: "Disabled DropZone",
+                        padded: true,
+                        children: [
+                            /*#__PURE__*/ _jsx(Box, {
+                                paddingBlockEnd: "4",
+                                children: /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                    gap: "2",
+                                    blockAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("input", {
+                                            type: "checkbox",
+                                            checked: disabled,
+                                            onChange: function(e) {
+                                                return setDisabled(e.target.checked);
+                                            }
+                                        }),
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            children: "Disable DropZone"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(DropZone, {
+                                label: "Upload Files",
+                                disabled: disabled,
+                                helpText: disabled ? "File upload is currently disabled." : "Drag and drop files or click to browse.",
+                                uploadedFiles: uploadedFiles,
+                                onRemove: handleRemove,
+                                allowMultiple: true
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    maxInlineSize: "500px",
+                    children: /*#__PURE__*/ _jsxs(Card, {
+                        title: "Single File Limit",
+                        padded: true,
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                paddingBlockEnd: "4",
+                                variant: "bodySm",
+                                children: "This DropZone becomes disabled after one file is uploaded (allowMultiple=false)."
+                            }),
+                            /*#__PURE__*/ _jsx(DropZone, {
+                                label: "Profile Picture",
+                                type: "image",
+                                allowMultiple: false,
+                                helpText: "Upload a single profile image. The upload area will be disabled after selection.",
+                                uploadedFiles: uploadedFiles.slice(0, 1),
+                                onRemove: handleRemove,
+                                showDropZoneWhenDisabled: true
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'DropZone in various disabled states and single file upload mode.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var CustomLabelsAndMessages = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([]), 2), uploadedFiles = _useState[0], setUploadedFiles = _useState[1];
+        var _useState1 = _sliced_to_array(useState(false), 2), uploading = _useState1[0], setUploading = _useState1[1];
+        var handleDrop = function(acceptedFiles) {
+            return _async_to_generator(function() {
+                var newFiles;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            setUploading(true);
+                            return [
+                                4,
+                                new Promise(function(resolve) {
+                                    return setTimeout(resolve, 2000);
+                                })
+                            ];
+                        case 1:
+                            _state.sent();
+                            newFiles = acceptedFiles.map(function(file, index) {
+                                return {
+                                    fileKey: "asset-".concat(Date.now(), "-").concat(index),
+                                    fileName: file.name,
+                                    fileSize: file.size,
+                                    fileType: file.type,
+                                    file: file
+                                };
+                            });
+                            setUploadedFiles(function(prev) {
+                                return _to_consumable_array(prev).concat(_to_consumable_array(newFiles));
+                            });
+                            setUploading(false);
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        var handleRemove = function(fileKey) {
+            setUploadedFiles(function(prev) {
+                return prev.filter(function(file) {
+                    return file.fileKey !== fileKey;
+                });
+            });
+        };
+        return /*#__PURE__*/ _jsx(Box, {
+            maxInlineSize: "500px",
+            children: /*#__PURE__*/ _jsxs(Card, {
+                title: "Marketing Assets Upload",
+                padded: true,
+                children: [
+                    /*#__PURE__*/ _jsx(DropZone, {
+                        label: "Brand Assets",
+                        type: "image",
+                        allowMultiple: true,
+                        helpText: "Upload your brand logos, banners, and marketing materials. Accepted formats: PNG, JPG, SVG.",
+                        accept: [
+                            'image/png',
+                            'image/jpeg',
+                            'image/svg+xml'
+                        ],
+                        uploadLabel: "\uD83D\uDCC1 Drop your brand assets here or click to select files",
+                        uploadingLabel: "\uD83D\uDE80 Processing your assets...",
+                        dragLabel: "✨ Release to add these awesome files",
+                        uploading: uploading,
+                        uploadedFiles: uploadedFiles,
+                        onDropAccepted: handleDrop,
+                        onRemove: handleRemove
+                    }),
+                    uploadedFiles.length > 0 && /*#__PURE__*/ _jsx(Box, {
+                        paddingBlockStart: "6",
+                        padding: "4",
+                        background: "success",
+                        borderRadius: "default",
+                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ _jsx(Text, {
+                                    variant: "headingSm",
+                                    color: "success",
+                                    children: "\uD83D\uDCCB Asset Summary"
+                                }),
+                                /*#__PURE__*/ _jsxs(Text, {
+                                    variant: "bodySm",
+                                    color: "success",
+                                    children: [
+                                        uploadedFiles.length,
+                                        " brand asset",
+                                        uploadedFiles.length !== 1 ? 's' : '',
+                                        " ready for use"
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'DropZone with custom labels and messages for better user experience.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var FilePreviewInteractions = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([
+            {
+                fileKey: 'demo-1',
+                fileName: 'project-overview.pdf',
+                fileSize: 2048000,
+                fileType: 'application/pdf'
+            },
+            {
+                fileKey: 'demo-2',
+                fileName: 'budget-analysis.xlsx',
+                fileSize: 1536000,
+                fileType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+            },
+            {
+                fileKey: 'demo-3',
+                fileName: 'team-photo.jpg',
+                fileSize: 3072000,
+                fileType: 'image/jpeg',
+                url: 'https://via.placeholder.com/150x150/3498db/ffffff?text=Team'
+            }
+        ]), 2), uploadedFiles = _useState[0], setUploadedFiles = _useState[1];
+        var _useState1 = _sliced_to_array(useState(null), 2), selectedFile = _useState1[0], setSelectedFile = _useState1[1];
+        var handleFileClick = function(file) {
+            setSelectedFile(file);
+        };
+        var handleRemove = function(fileKey) {
+            setUploadedFiles(function(prev) {
+                return prev.filter(function(file) {
+                    return file.fileKey !== fileKey;
+                });
+            });
+            if ((selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.fileKey) === fileKey) {
+                setSelectedFile(null);
+            }
+        };
+        return /*#__PURE__*/ _jsxs(HorizontalStack, {
+            gap: "8",
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    maxInlineSize: "400px",
+                    children: /*#__PURE__*/ _jsx(Card, {
+                        title: "Project Files",
+                        padded: true,
+                        children: /*#__PURE__*/ _jsx(DropZone, {
+                            label: "Upload Project Files",
+                            allowMultiple: true,
+                            helpText: "Click on any file preview to view details.",
+                            uploadedFiles: uploadedFiles,
+                            onRemove: handleRemove,
+                            onFilePreviewClick: handleFileClick
+                        })
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    maxInlineSize: "300px",
+                    children: /*#__PURE__*/ _jsx(Card, {
+                        title: "File Details",
+                        padded: true,
+                        children: selectedFile ? /*#__PURE__*/ _jsxs(VerticalStack, {
+                            gap: "4",
+                            children: [
+                                /*#__PURE__*/ _jsxs(Text, {
+                                    variant: "headingSm",
+                                    children: [
+                                        "\uD83D\uDCC4 ",
+                                        selectedFile.fileName
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs(VerticalStack, {
+                                    gap: "2",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "bodySm",
+                                                    fontWeight: "semibold",
+                                                    children: "Size:"
+                                                }),
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "bodySm",
+                                                    children: DropZone.formatFileSize(selectedFile.fileSize)
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "bodySm",
+                                                    fontWeight: "semibold",
+                                                    children: "Type:"
+                                                }),
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "bodySm",
+                                                    children: selectedFile.fileType
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "bodySm",
+                                                    fontWeight: "semibold",
+                                                    children: "Key:"
+                                                }),
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "bodySm",
+                                                    children: selectedFile.fileKey
+                                                })
+                                            ]
+                                        }),
+                                        selectedFile.url && /*#__PURE__*/ _jsx(Box, {
+                                            paddingBlockStart: "4",
+                                            children: /*#__PURE__*/ _jsx("img", {
+                                                src: selectedFile.url,
+                                                alt: selectedFile.fileName,
+                                                style: {
+                                                    width: '100%',
+                                                    borderRadius: '4px'
+                                                }
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsx(Text, {
+                            color: "subdued",
+                            children: "Click on a file in the list to view its details here."
+                        })
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Interactive file previews with click handlers for detailed file information.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};