@dust-tt/sparkle 0.2.552 → 0.2.553-rc-2

package/dist/esm/stories/MultiPageDialog.stories.js

@@ -0,0 +1,301 @@
+import { __assign, __read, __spreadArray } from "tslib";
+import React, { useState } from "react";
+import { Button } from "../components/Button";
+import { MultiPageDialog, MultiPageDialogContent, MultiPageDialogTrigger, } from "../components/MultiPageDialog";
+import { Cog6ToothIcon, DocumentTextIcon, UserIcon } from "../icons/app";
+var meta = {
+    title: "Primitives/MultiPageDialog",
+    component: MultiPageDialogContent,
+};
+export default meta;
+var samplePages = [
+    {
+        id: "profile",
+        title: "User Profile",
+        description: "Manage your personal information",
+        icon: UserIcon,
+        content: (React.createElement("div", { className: "s-space-y-4" },
+            React.createElement("div", null,
+                React.createElement("h3", { className: "s-mb-2 s-text-lg s-font-semibold" }, "Personal Information"),
+                React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "Update your profile details and preferences.")),
+            React.createElement("div", { className: "s-space-y-3" },
+                React.createElement("div", null,
+                    React.createElement("label", { className: "s-text-sm s-font-medium" }, "Full Name"),
+                    React.createElement("input", { type: "text", className: "s-mt-1 s-w-full s-rounded-md s-border s-px-3 s-py-2", placeholder: "John Doe" })),
+                React.createElement("div", null,
+                    React.createElement("label", { className: "s-text-sm s-font-medium" }, "Email"),
+                    React.createElement("input", { type: "email", className: "s-mt-1 s-w-full s-rounded-md s-border s-px-3 s-py-2", placeholder: "john@example.com" }))))),
+    },
+    {
+        id: "documents",
+        title: "Documents",
+        description: "Manage your uploaded files",
+        icon: DocumentTextIcon,
+        content: (React.createElement("div", { className: "s-space-y-4" },
+            React.createElement("div", null,
+                React.createElement("h3", { className: "s-mb-2 s-text-lg s-font-semibold" }, "File Management"),
+                React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "Upload, organize, and manage your documents.")),
+            React.createElement("div", { className: "s-space-y-2" },
+                React.createElement("div", { className: "s-flex s-items-center s-justify-between s-rounded-md s-border s-p-3" },
+                    React.createElement("span", { className: "s-text-sm" }, "document1.pdf"),
+                    React.createElement(Button, { label: "Download", size: "sm", variant: "outline" })),
+                React.createElement("div", { className: "s-flex s-items-center s-justify-between s-rounded-md s-border s-p-3" },
+                    React.createElement("span", { className: "s-text-sm" }, "report.docx"),
+                    React.createElement(Button, { label: "Download", size: "sm", variant: "outline" }))))),
+    },
+    {
+        id: "settings",
+        title: "Settings",
+        description: "Configure your preferences",
+        icon: Cog6ToothIcon,
+        content: (React.createElement("div", { className: "s-space-y-4" },
+            React.createElement("div", null,
+                React.createElement("h3", { className: "s-mb-2 s-text-lg s-font-semibold" }, "Application Settings"),
+                React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "Customize your experience and notification preferences.")),
+            React.createElement("div", { className: "s-space-y-3" },
+                React.createElement("div", { className: "s-flex s-items-center s-justify-between" },
+                    React.createElement("span", { className: "s-text-sm" }, "Email notifications"),
+                    React.createElement("input", { type: "checkbox", className: "s-rounded", defaultChecked: true })),
+                React.createElement("div", { className: "s-flex s-items-center s-justify-between" },
+                    React.createElement("span", { className: "s-text-sm" }, "Dark mode"),
+                    React.createElement("input", { type: "checkbox", className: "s-rounded" })),
+                React.createElement("div", { className: "s-flex s-items-center s-justify-between" },
+                    React.createElement("span", { className: "s-text-sm" }, "Auto-save"),
+                    React.createElement("input", { type: "checkbox", className: "s-rounded", defaultChecked: true }))))),
+    },
+];
+var MultiPageDialogDemo = function () {
+    var _a = __read(useState("profile"), 2), currentPageId = _a[0], setCurrentPageId = _a[1];
+    var handleSave = function () {
+        alert("Changes saved!");
+    };
+    return (React.createElement(MultiPageDialog, null,
+        React.createElement(MultiPageDialogTrigger, { asChild: true },
+            React.createElement(Button, { label: "Open Multi-Page Dialog" })),
+        React.createElement(MultiPageDialogContent, { pages: samplePages, currentPageId: currentPageId, onPageChange: setCurrentPageId, size: "xl", onSave: handleSave })));
+};
+export var Default = {
+    render: function () { return React.createElement(MultiPageDialogDemo, null); },
+};
+export var InteractiveContent = {
+    render: function () {
+        var _a = __read(useState("step1"), 2), currentPageId = _a[0], setCurrentPageId = _a[1];
+        var _b = __read(useState({
+            name: "",
+            email: "",
+            selectedFile: "",
+            notifications: false,
+        }), 2), formData = _b[0], setFormData = _b[1];
+        var handleSave = function () {
+            alert("Setup completed! Data: ".concat(JSON.stringify(formData, null, 2)));
+        };
+        var interactivePages = [
+            {
+                id: "step1",
+                title: "Personal Info",
+                description: "Enter your basic information",
+                icon: UserIcon,
+                content: (React.createElement("div", { className: "s-space-y-4" },
+                    React.createElement("div", null,
+                        React.createElement("h3", { className: "s-mb-2 s-text-lg s-font-semibold" }, "Let's get started"),
+                        React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "Fill in your details to continue to the next step.")),
+                    React.createElement("div", { className: "s-space-y-3" },
+                        React.createElement("div", null,
+                            React.createElement("label", { className: "s-text-sm s-font-medium" }, "Full Name *"),
+                            React.createElement("input", { type: "text", className: "s-mt-1 s-w-full s-rounded-md s-border s-px-3 s-py-2", placeholder: "Enter your name", value: formData.name, onChange: function (e) {
+                                    return setFormData(__assign(__assign({}, formData), { name: e.target.value }));
+                                } })),
+                        React.createElement("div", null,
+                            React.createElement("label", { className: "s-text-sm s-font-medium" }, "Email *"),
+                            React.createElement("input", { type: "email", className: "s-mt-1 s-w-full s-rounded-md s-border s-px-3 s-py-2", placeholder: "Enter your email", value: formData.email, onChange: function (e) {
+                                    return setFormData(__assign(__assign({}, formData), { email: e.target.value }));
+                                } })),
+                        React.createElement("div", { className: "s-pt-2" },
+                            React.createElement(Button, { label: "Continue to File Selection", variant: "primary", size: "md", disabled: !formData.name || !formData.email, onClick: function () { return setCurrentPageId("step2"); } }))))),
+            },
+            {
+                id: "step2",
+                title: "File Selection",
+                description: "Choose your files",
+                icon: DocumentTextIcon,
+                content: (React.createElement("div", { className: "s-space-y-4" },
+                    React.createElement("div", null,
+                        React.createElement("h3", { className: "s-mb-2 s-text-lg s-font-semibold" }, "Select a file to work with"),
+                        React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "Choose from the available files below.")),
+                    React.createElement("div", { className: "s-space-y-2" }, [
+                        "project-proposal.pdf",
+                        "budget-2024.xlsx",
+                        "meeting-notes.docx",
+                    ].map(function (file) { return (React.createElement("div", { key: file, className: "s-flex s-cursor-pointer s-items-center s-justify-between s-rounded-md s-border s-p-3 s-transition-colors hover:s-bg-gray-50 ".concat(formData.selectedFile === file
+                            ? "s-border-blue-300 s-bg-blue-50"
+                            : ""), onClick: function () {
+                            return setFormData(__assign(__assign({}, formData), { selectedFile: file }));
+                        } },
+                        React.createElement("span", { className: "s-text-sm" }, file),
+                        React.createElement("div", { className: "s-flex s-items-center s-gap-2" },
+                            React.createElement("input", { type: "radio", checked: formData.selectedFile === file, readOnly: true, className: "s-pointer-events-none" })))); })),
+                    formData.selectedFile && (React.createElement("div", { className: "s-pt-2" },
+                        React.createElement(Button, { label: "Continue to Settings", variant: "primary", size: "md", onClick: function () { return setCurrentPageId("step3"); } }))))),
+            },
+            {
+                id: "step3",
+                title: "Final Settings",
+                description: "Configure your preferences",
+                icon: Cog6ToothIcon,
+                content: (React.createElement("div", { className: "s-space-y-4" },
+                    React.createElement("div", null,
+                        React.createElement("h3", { className: "s-mb-2 s-text-lg s-font-semibold" }, "Almost done!"),
+                        React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "Configure your final preferences and complete the setup.")),
+                    React.createElement("div", { className: "s-space-y-3" },
+                        React.createElement("div", { className: "s-flex s-items-center s-justify-between" },
+                            React.createElement("span", { className: "s-text-sm" }, "Enable email notifications"),
+                            React.createElement("input", { type: "checkbox", className: "s-rounded", checked: formData.notifications, onChange: function (e) {
+                                    return setFormData(__assign(__assign({}, formData), { notifications: e.target.checked }));
+                                } })),
+                        React.createElement("div", { className: "s-rounded-md s-bg-gray-50 s-p-3" },
+                            React.createElement("h4", { className: "s-mb-2 s-text-sm s-font-medium" }, "Summary"),
+                            React.createElement("div", { className: "s-space-y-1 s-text-xs s-text-gray-600" },
+                                React.createElement("div", null,
+                                    "Name: ",
+                                    formData.name),
+                                React.createElement("div", null,
+                                    "Email: ",
+                                    formData.email),
+                                React.createElement("div", null,
+                                    "Selected File: ",
+                                    formData.selectedFile),
+                                React.createElement("div", null,
+                                    "Notifications:",
+                                    " ",
+                                    formData.notifications ? "Enabled" : "Disabled")))))),
+            },
+        ];
+        return (React.createElement(MultiPageDialog, null,
+            React.createElement(MultiPageDialogTrigger, { asChild: true },
+                React.createElement(Button, { label: "Open Interactive Setup" })),
+            React.createElement(MultiPageDialogContent, { pages: interactivePages, currentPageId: currentPageId, onPageChange: setCurrentPageId, size: "lg", onSave: handleSave })));
+    },
+};
+export var WithConditionalNavigation = {
+    render: function () {
+        var _a = __read(useState("data-selection"), 2), currentPageId = _a[0], setCurrentPageId = _a[1];
+        var _b = __read(useState([]), 2), selectedItems = _b[0], setSelectedItems = _b[1];
+        var _c = __read(useState(""), 2), description = _c[0], setDescription = _c[1];
+        var handleSave = function () {
+            alert("Configuration saved! Selected: ".concat(selectedItems.join(", "), ", Description: ").concat(description));
+        };
+        var conditionalPages = [
+            {
+                id: "data-selection",
+                title: "Select Data Sources",
+                description: "Choose which data sources to include",
+                icon: DocumentTextIcon,
+                content: (React.createElement("div", { className: "s-space-y-4" },
+                    React.createElement("div", null,
+                        React.createElement("h3", { className: "s-mb-2 s-text-lg s-font-semibold" }, "Available Data Sources"),
+                        React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "Select at least one data source to proceed to the next step.")),
+                    React.createElement("div", { className: "s-space-y-2" }, [
+                        "Company Database",
+                        "Customer Files",
+                        "Analytics Data",
+                        "Reports Archive",
+                    ].map(function (item) { return (React.createElement("div", { key: item, className: "s-flex s-cursor-pointer s-items-center s-justify-between s-rounded-md s-border s-p-3 s-transition-colors hover:s-bg-gray-50 ".concat(selectedItems.includes(item)
+                            ? "s-border-blue-300 s-bg-blue-50"
+                            : ""), onClick: function () {
+                            if (selectedItems.includes(item)) {
+                                setSelectedItems(selectedItems.filter(function (i) { return i !== item; }));
+                            }
+                            else {
+                                setSelectedItems(__spreadArray(__spreadArray([], __read(selectedItems), false), [item], false));
+                            }
+                        } },
+                        React.createElement("span", { className: "s-text-sm" }, item),
+                        React.createElement("input", { type: "checkbox", checked: selectedItems.includes(item), readOnly: true, className: "s-pointer-events-none" }))); })),
+                    selectedItems.length > 0 && (React.createElement("div", { className: "s-rounded-md s-border s-bg-blue-50 s-p-3" },
+                        React.createElement("p", { className: "s-text-sm s-text-blue-700" },
+                            selectedItems.length,
+                            " data source",
+                            selectedItems.length !== 1 ? "s" : "",
+                            " selected"))))),
+            },
+            {
+                id: "description",
+                title: "Add Description",
+                description: "Describe your configuration",
+                icon: Cog6ToothIcon,
+                content: (React.createElement("div", { className: "s-space-y-4" },
+                    React.createElement("div", null,
+                        React.createElement("h3", { className: "s-mb-2 s-text-lg s-font-semibold" }, "Configuration Details"),
+                        React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "Add a description for your selected data sources.")),
+                    React.createElement("div", { className: "s-rounded-md s-border s-bg-blue-50 s-p-3" },
+                        React.createElement("p", { className: "s-text-sm s-text-blue-700" },
+                            "Selected: ",
+                            selectedItems.join(", "))),
+                    React.createElement("div", { className: "s-space-y-2" },
+                        React.createElement("label", { className: "s-text-sm s-font-medium" }, "Description"),
+                        React.createElement("textarea", { className: "s-mt-1 s-w-full s-rounded-md s-border s-px-3 s-py-2", placeholder: "Describe how these data sources will be used...", value: description, onChange: function (e) { return setDescription(e.target.value); }, rows: 4 }),
+                        React.createElement("p", { className: "s-text-xs s-text-muted-foreground" }, "This description helps explain the purpose of your configuration.")))),
+            },
+        ];
+        return (React.createElement(MultiPageDialog, null,
+            React.createElement(MultiPageDialogTrigger, { asChild: true },
+                React.createElement(Button, { label: "Open Configuration Wizard" })),
+            React.createElement(MultiPageDialogContent, { pages: conditionalPages, currentPageId: currentPageId, onPageChange: setCurrentPageId, size: "lg", onSave: handleSave, showNavigation: true, disableNext: currentPageId === "data-selection" && selectedItems.length === 0, disableSave: !description.trim(), footerContent: React.createElement("div", { className: "s-w-full s-border s-border-border-dark" }, "This is a footer content") })));
+    },
+};
+export var ScrollableContent = {
+    render: function () {
+        var _a = __read(useState("long-form"), 2), currentPageId = _a[0], setCurrentPageId = _a[1];
+        var handleSave = function () {
+            alert("Long form submitted!");
+        };
+        var scrollablePages = [
+            {
+                id: "long-form",
+                title: "Long Form Content",
+                description: "This page demonstrates scrollable content",
+                icon: DocumentTextIcon,
+                content: (React.createElement("div", { className: "s-space-y-6" },
+                    React.createElement("div", null,
+                        React.createElement("h3", { className: "s-mb-2 s-text-lg s-font-semibold" }, "Terms and Conditions"),
+                        React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "This page contains a lot of content to demonstrate scrolling functionality. The content should be scrollable within the dialog area.")),
+                    Array.from({ length: 15 }, function (_, i) { return (React.createElement("div", { key: i, className: "s-space-y-3" },
+                        React.createElement("h4", { className: "s-text-md s-font-semibold" },
+                            "Section ",
+                            i + 1),
+                        React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."),
+                        React.createElement("div", { className: "s-space-y-2" },
+                            React.createElement("div", null,
+                                React.createElement("label", { className: "s-text-sm s-font-medium" },
+                                    "Field ",
+                                    i + 1),
+                                React.createElement("input", { type: "text", className: "s-mt-1 s-w-full s-rounded-md s-border s-px-3 s-py-2", placeholder: "Enter value for field ".concat(i + 1) })),
+                            i % 3 === 0 && (React.createElement("div", null,
+                                React.createElement("label", { className: "s-text-sm s-font-medium" }, "Additional Notes"),
+                                React.createElement("textarea", { className: "s-mt-1 s-w-full s-rounded-md s-border s-px-3 s-py-2", placeholder: "Add any additional notes here...", rows: 3 })))))); }),
+                    React.createElement("div", { className: "s-rounded-md s-border s-bg-blue-50 s-p-4" },
+                        React.createElement("h4", { className: "s-mb-2 s-text-sm s-font-semibold s-text-blue-900" }, "Scroll Test Complete"),
+                        React.createElement("p", { className: "s-text-xs s-text-blue-700" }, "If you can see this message, the scrolling functionality is working correctly! The dialog maintains its fixed height while allowing the content to scroll.")))),
+            },
+            {
+                id: "summary",
+                title: "Summary",
+                description: "Review your information",
+                icon: Cog6ToothIcon,
+                content: (React.createElement("div", { className: "s-space-y-4" },
+                    React.createElement("div", null,
+                        React.createElement("h3", { className: "s-mb-2 s-text-lg s-font-semibold" }, "Form Summary"),
+                        React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "Thank you for testing the scrollable content functionality.")),
+                    React.createElement("div", { className: "s-rounded-md s-border s-bg-green-50 s-p-3" },
+                        React.createElement("p", { className: "s-text-sm s-text-green-700" }, "\u2713 Scrolling functionality verified"),
+                        React.createElement("p", { className: "s-text-sm s-text-green-700" }, "\u2713 Fixed dialog height maintained"),
+                        React.createElement("p", { className: "s-text-sm s-text-green-700" }, "\u2713 Content overflow handled properly")))),
+            },
+        ];
+        return (React.createElement(MultiPageDialog, null,
+            React.createElement(MultiPageDialogTrigger, { asChild: true },
+                React.createElement(Button, { label: "Open Scrollable Content Dialog" })),
+            React.createElement(MultiPageDialogContent, { pages: scrollablePages, currentPageId: currentPageId, onPageChange: setCurrentPageId, size: "lg", onSave: handleSave })));
+    },
+};
+//# sourceMappingURL=MultiPageDialog.stories.js.map

package/dist/esm/stories/MultiPageDialog.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiPageDialog.stories.js","sourceRoot":"","sources":["../../../src/stories/MultiPageDialog.stories.tsx"],"names":[],"mappings":"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"}

package/dist/sparkle.css

@@ -1315,6 +1315,14 @@ select {
   height: 3rem;
 }
 
+.s-h-125 {
+  height: 500px;
+}
+
+.s-h-150 {
+  height: 600px;
+}
+
 .s-h-16 {
   height: 4rem;
 }
@@ -1468,6 +1476,14 @@ select {
   max-height: calc(var(--radix-dropdown-menu-content-available-height) - var(--header-height,20px));
 }
 
+.s-max-h-screen {
+  max-height: 100vh;
+}
+
+.s-min-h-0 {
+  min-height: 0px;
+}
+
 .s-min-h-64 {
   min-height: 16rem;
 }
@@ -1826,16 +1842,41 @@ select {
   border-collapse: collapse;
 }
 
+.s--translate-x-1 {
+  --tw-translate-x: -0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .s--translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.s--translate-x-2 {
+  --tw-translate-x: -0.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .s--translate-y-1\/2 {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.s-translate-x-0 {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.s-translate-x-1 {
+  --tw-translate-x: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.s-translate-x-2 {
+  --tw-translate-x: 0.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .s-translate-x-\[-50\%\] {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2248,6 +2289,12 @@ select {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.s-space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
 .s-space-y-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.552",
+  "version": "0.2.553-rc-2",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",