@dust-tt/sparkle 0.3.6 → 0.3.7

package/dist/esm/stories/Dropdown.stories.js

@@ -1,429 +1,436 @@
 import { __read, __spreadArray } from "tslib";
-import React from "react";
-import { useState } from "react";
+import React, { useState } from "react";
 import { Spinner } from "../components";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSearchbar, DropdownMenuSeparator, DropdownMenuStaticItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTagItem, DropdownMenuTagList, DropdownMenuTrigger, } from "../components/Dropdown";
 import { AnthropicLogo, DriveLogo, GithubLogo, MistralLogo, NotionLogo, OpenaiLogo, SlackLogo, } from "../logo/platforms";
-import { ActionArmchairIcon, ActionCloudArrowDownIcon, ActionCommand1Icon, ActionDocumentIcon, ActionFolderIcon, ActionMagicIcon, ActionUserGroupIcon, ArrowDownCircleIcon, ArrowUpOnSquareIcon, AttachmentIcon, Avatar, Button, ChatBubbleBottomCenterPlusIcon, CloudArrowDownIcon, Cog6ToothIcon, DocumentIcon, DoubleIcon, FolderIcon, HandThumbDownIcon, HandThumbUpIcon, Icon, LogoutIcon, MagicIcon, MagnifyingGlassIcon, PlusIcon, RobotIcon, SearchDropdownMenu, SuitcaseIcon, UserGroupIcon, UserIcon, } from "../index_with_tw_base";
-import { Chip } from "../index_with_tw_base";
+import { ActionArmchairIcon, ActionCloudArrowDownIcon, ActionCommand1Icon, ActionDocumentIcon, ActionFolderIcon, ActionMagicIcon, ActionUserGroupIcon, ArrowDownCircleIcon, ArrowUpOnSquareIcon, AttachmentIcon, Avatar, Button, ChatBubbleBottomCenterPlusIcon, Chip, CloudArrowDownIcon, Cog6ToothIcon, DocumentIcon, DoubleIcon, FolderIcon, HandThumbDownIcon, HandThumbUpIcon, Icon, LogoutIcon, MagicIcon, MagnifyingGlassIcon, PlusIcon, RobotIcon, SearchDropdownMenu, SuitcaseIcon, UserGroupIcon, UserIcon, } from "../index_with_tw_base";
 var meta = {
     title: "Primitives/Dropdown",
     component: DropdownMenu,
+    tags: ["autodocs"],
 };
 export default meta;
-export var DropdownExamples = function () { return (React.createElement("div", { className: "s-flex s-h-80 s-w-full s-flex-col s-items-center s-justify-center s-gap-4 s-text-foreground dark:s-text-foreground-night" },
-    React.createElement("div", null, SimpleDropdownDemo()),
-    React.createElement("div", null, ComplexDropdownDemo()),
-    React.createElement("div", null, DropdownMenuCheckboxes()),
-    React.createElement("div", null, DropdownMenuRadioGroupDemo()),
-    React.createElement("div", null, ModelsDropdownDemo()),
-    React.createElement("div", null, ModelsDropdownRadioGroupDemo()),
-    React.createElement("div", null, StaticItemDropdownDemo()))); };
-export var PickerExamples = function () { return (React.createElement("div", { className: "s-flex s-h-80 s-w-full s-flex-col s-items-center s-justify-center s-gap-4 s-text-foreground dark:s-text-foreground-night" },
-    React.createElement("div", null, AttachFileDemo()))); };
-export var SearchDropdownMenuExamples = function () {
-    var _a = __read(React.useState(""), 2), searchInputValue = _a[0], setSearchInputValue = _a[1];
-    var items = ["Profile", "Billing", "Team", "Subscription"];
-    var filteredItems = items.filter(function (item) {
-        return item.toLowerCase().includes(searchInputValue.toLowerCase());
-    });
-    return (React.createElement("div", { className: "s-flex s-h-80 s-w-full s-flex-col s-items-center s-justify-center s-gap-4 s-text-foreground dark:s-text-foreground-night" },
-        React.createElement("div", null,
-            React.createElement(SearchDropdownMenu, { searchInputValue: searchInputValue, setSearchInputValue: setSearchInputValue }, filteredItems.map(function (item) { return (React.createElement(DropdownMenuItem, { key: item, label: item, onClick: function () {
-                    console.log(item);
-                } })); })))));
+export var SimpleDropdown = {
+    render: function () {
+        return (React.createElement(DropdownMenu, null,
+            React.createElement(DropdownMenuTrigger, null, "Open Simple Dropdown"),
+            React.createElement(DropdownMenuContent, { className: "s-max-w-[300px]" },
+                React.createElement(DropdownMenuLabel, { label: "My Account" }),
+                React.createElement(DropdownMenuItem, { icon: function () { return (React.createElement(Avatar, { size: "xs", visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" })); }, label: "@hello", onClick: function () {
+                        console.log("hello");
+                    }, description: "Anthropic's latest Claude 3.5 Sonnet model (200k context). Anthropic's latest Claude 3.5 Sonnet model (200k context). Anthropic's latest Claude 3.5 Sonnet model (200k context)." }),
+                React.createElement(DropdownMenuItem, { truncateText: true, icon: function () { return (React.createElement(Avatar, { size: "xs", visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg" })); }, label: "@helloWorld", onClick: function () {
+                        console.log("hello");
+                    }, description: "Anthropic's latest Claude 3.5 Sonnet model (200k context)." }),
+                React.createElement(DropdownMenuItem, { label: "Profile" }),
+                React.createElement(DropdownMenuItem, { label: "Billing" }),
+                React.createElement(DropdownMenuItem, { label: "Team" }),
+                React.createElement(DropdownMenuItem, { label: "Subscription" }))));
+    },
 };
-function SimpleDropdownDemo() {
-    return (React.createElement(DropdownMenu, null,
-        React.createElement(DropdownMenuTrigger, null, "Open Simple Dropdown"),
-        React.createElement(DropdownMenuContent, { className: "s-max-w-[300px]" },
-            React.createElement(DropdownMenuLabel, { label: "My Account" }),
-            React.createElement(DropdownMenuItem, { icon: function () { return (React.createElement(Avatar, { size: "xs", visual: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg" })); }, label: "@hello", onClick: function () {
-                    console.log("hello");
-                }, description: "Anthropic's latest Claude 3.5 Sonnet model (200k context). Anthropic's latest Claude 3.5 Sonnet model (200k context). Anthropic's latest Claude 3.5 Sonnet model (200k context)." }),
-            React.createElement(DropdownMenuItem, { truncateText: true, icon: function () { return (React.createElement(Avatar, { size: "xs", visual: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg" })); }, label: "@helloWorld", onClick: function () {
-                    console.log("hello");
-                }, description: "Anthropic's latest Claude 3.5 Sonnet model (200k context)." }),
-            React.createElement(DropdownMenuItem, { label: "Profile" }),
-            React.createElement(DropdownMenuItem, { label: "Billing" }),
-            React.createElement(DropdownMenuItem, { label: "Team" }),
-            React.createElement(DropdownMenuItem, { label: "Subscription" }))));
-}
-function ComplexDropdownDemo() {
-    return (React.createElement(DropdownMenu, null,
-        React.createElement(DropdownMenuTrigger, null, "Open Complex"),
-        React.createElement(DropdownMenuContent, { className: "s-w-56" },
-            React.createElement(DropdownMenuLabel, { label: "My Account" }),
-            React.createElement(DropdownMenuGroup, null,
-                React.createElement(DropdownMenuItem, { icon: UserIcon, label: "Profile", endComponent: React.createElement(Button, { size: "mini", icon: ArrowUpOnSquareIcon, variant: "ghost" }) }),
-                React.createElement(DropdownMenuItem, { icon: ArrowDownCircleIcon, label: "Billing" }),
-                React.createElement(DropdownMenuItem, { icon: Cog6ToothIcon, label: "Settings" }),
-                React.createElement(DropdownMenuItem, { icon: UserIcon, label: "Keyboard shortcuts" })),
-            React.createElement(DropdownMenuSeparator, null),
-            React.createElement(DropdownMenuGroup, null,
-                React.createElement(DropdownMenuLabel, { label: "Team" }),
-                React.createElement(DropdownMenuItem, { icon: UserIcon, label: "Members" }),
-                React.createElement(DropdownMenuSub, null,
-                    React.createElement(DropdownMenuSubTrigger, { icon: UserIcon, label: "Invite users" }),
-                    React.createElement(DropdownMenuPortal, null,
-                        React.createElement(DropdownMenuSubContent, null,
-                            React.createElement(DropdownMenuItem, { icon: MagicIcon, label: "Email" }),
-                            React.createElement(DropdownMenuItem, { icon: ChatBubbleBottomCenterPlusIcon, label: "Message" }),
-                            React.createElement(DropdownMenuSeparator, null),
-                            React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More..." }),
-                            React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More.." }),
-                            React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More..." }),
-                            React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More.." }),
-                            React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More" }),
-                            React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More....." }),
-                            React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More.." }),
-                            React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More" }),
-                            React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More...." })))),
-                React.createElement(DropdownMenuItem, { icon: UserGroupIcon, label: "New Team" })),
-            React.createElement(DropdownMenuSeparator, null),
-            React.createElement(DropdownMenuItem, { icon: GithubLogo, label: "GitHub" }),
-            React.createElement(DropdownMenuItem, { icon: UserIcon, label: "Support" }),
-            React.createElement(DropdownMenuItem, { icon: CloudArrowDownIcon, label: "API", disabled: true }),
-            React.createElement(DropdownMenuSeparator, null),
-            React.createElement(DropdownMenuItem, { icon: LogoutIcon, label: "Log out", variant: "warning", href: "/api/auth/logout" }))));
-}
-function DropdownMenuCheckboxes() {
-    var _a = __read(React.useState(true), 2), showStatusBar = _a[0], setShowStatusBar = _a[1];
-    var _b = __read(React.useState(false), 2), showActivityBar = _b[0], setShowActivityBar = _b[1];
-    var _c = __read(React.useState(false), 2), showPanel = _c[0], setShowPanel = _c[1];
-    return (React.createElement(DropdownMenu, null,
-        React.createElement(DropdownMenuTrigger, null, "Open Checkbox"),
-        React.createElement(DropdownMenuContent, { className: "s-w-72" },
-            React.createElement(DropdownMenuLabel, { label: "Interface Settings" }),
-            React.createElement(DropdownMenuSeparator, null),
-            React.createElement(DropdownMenuCheckboxItem, { checked: showStatusBar, onCheckedChange: setShowStatusBar, label: "Status Bar", description: "Show application status and progress indicators", truncateText: true }),
-            React.createElement(DropdownMenuCheckboxItem, { checked: showActivityBar, onCheckedChange: setShowActivityBar, label: "Activity Bar", description: "Display sidebar with quick access to tools", truncateText: true, disabled: true }),
-            React.createElement(DropdownMenuCheckboxItem, { checked: showPanel, onCheckedChange: setShowPanel, label: "Panel", description: "Bottom panel for terminal and debug output", truncateText: true }))));
-}
-function DropdownMenuRadioGroupDemo() {
-    var _a = __read(React.useState("bottom"), 2), position = _a[0], setPosition = _a[1];
-    return (React.createElement(DropdownMenu, null,
-        React.createElement(DropdownMenuTrigger, null, "Open Radio Group"),
-        React.createElement(DropdownMenuContent, { className: "s-w-56" },
-            React.createElement(DropdownMenuLabel, { label: "Panel Position" }),
-            React.createElement(DropdownMenuSeparator, null),
-            React.createElement(DropdownMenuRadioGroup, { value: position, onValueChange: setPosition },
-                React.createElement(DropdownMenuRadioItem, { value: "top" }, "Top"),
-                React.createElement(DropdownMenuRadioItem, { value: "bottom" }, "Bottom"),
-                React.createElement(DropdownMenuRadioItem, { value: "right" }, "Right")))));
-}
-function ModelsDropdownDemo() {
-    var _a = __read(React.useState("GPT4-o"), 2), selectedModel = _a[0], setSelectedModel = _a[1];
-    var bestPerformingModels = [
-        {
-            name: "GPT4-o",
-            description: "OpenAI's most advanced model.",
-            icon: OpenaiLogo,
-        },
-        {
-            name: "Claude 3.5 Sonnet",
-            description: "Anthropic's latest Claude 3.5 Sonnet model (200k context).",
-            icon: AnthropicLogo,
-        },
-        {
-            name: "Mistral Large",
-            description: "Mistral's `large 2` model (128k context).",
-            icon: MistralLogo,
-        },
-    ];
-    return (React.createElement(DropdownMenu, null,
-        React.createElement(DropdownMenuTrigger, { asChild: true },
-            React.createElement(Button, { label: selectedModel, variant: "outline", size: "sm", tooltip: "Test" })),
-        React.createElement(DropdownMenuContent, null,
-            React.createElement(DropdownMenuLabel, { label: "Best performing models" }),
-            bestPerformingModels.map(function (modelConfig) { return (React.createElement(DropdownMenuItem, { key: modelConfig.name, label: modelConfig.name, onClick: function () { return setSelectedModel(modelConfig.name); }, description: modelConfig.description, icon: modelConfig.icon })); }))));
-}
-function ModelsDropdownRadioGroupDemo() {
-    var _a = __read(React.useState("GPT4-o"), 2), selectedModel = _a[0], setSelectedModel = _a[1];
-    var bestPerformingModels = [
-        {
-            name: "GPT4-o",
-            description: "OpenAI's most advanced model.",
-            icon: OpenaiLogo,
-        },
-        {
-            name: "Claude 3.5 Sonnet",
-            description: "Anthropic's latest Claude 3.5 Sonnet model (200k context).",
-            icon: AnthropicLogo,
-        },
-        {
-            name: "Mistral Large",
-            description: "Mistral's `large 2` model (128k context).",
-            icon: MistralLogo,
-        },
-    ];
-    return (React.createElement(DropdownMenu, null,
-        React.createElement(DropdownMenuTrigger, { asChild: true },
-            React.createElement(Button, { label: selectedModel, variant: "ghost", size: "sm" })),
-        React.createElement(DropdownMenuContent, null,
-            React.createElement(DropdownMenuRadioGroup, { value: selectedModel, onValueChange: function (value) { return setSelectedModel(value); } },
-                React.createElement(DropdownMenuLabel, { label: "Best performing models" }),
-                bestPerformingModels.map(function (modelConfig) { return (React.createElement(DropdownMenuRadioItem, { key: modelConfig.name, label: modelConfig.name, icon: modelConfig.icon, description: modelConfig.description, value: modelConfig.name })); })))));
-}
-function AttachFileDemo() {
-    var _a = __read(React.useState(""), 2), searchText = _a[0], setSearchText = _a[1];
-    var _b = __read(React.useState(null), 2), selectedItem = _b[0], setSelectedItem = _b[1];
-    var _c = __read(React.useState(false), 2), open = _c[0], setOpen = _c[1];
-    var _d = __read(React.useState(false), 2), openAgents = _d[0], setOpenAgents = _d[1];
-    var _e = __read(React.useState(false), 2), openToolsets = _e[0], setOpenToolsets = _e[1];
-    var searchInputRef = React.useRef(null);
-    var agentsSearchInputRef = React.useRef(null);
-    var toolsetsSearchInputRef = React.useRef(null);
-    React.useEffect(function () {
-        if (open) {
-            setTimeout(function () {
-                var _a;
-                (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 0);
-        }
-    }, [open]);
-    React.useEffect(function () {
-        if (openAgents) {
-            setTimeout(function () {
-                var _a;
-                (_a = agentsSearchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 0);
-        }
-    }, [openAgents]);
-    React.useEffect(function () {
-        if (openToolsets) {
-            setTimeout(function () {
-                var _a;
-                (_a = toolsetsSearchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 0);
-        }
-    }, [openToolsets]);
-    var items = [
-        "Automated Data Processing Automated Data Processing Automated Data Processing Automated Data Processing",
-        "Business Intelligence Dashboard",
-        "Cloud Infrastructure Setup",
-        "Data Migration Service",
-        "Enterprise Resource Planning",
-        "Financial Analytics Platform",
-        "Geographic Information System",
-        "Human Resources Management",
-        "Inventory Control System",
-        "Knowledge Base Integration",
-        "Machine Learning Pipeline",
-        "Network Security Monitor",
-        "Operations Management Tool",
-        "Project Portfolio Tracker",
-        "Quality Assurance Framework",
-        "Real-time Analytics Engine",
-        "Supply Chain Optimizer",
-        "Team Collaboration Hub",
-        "User Authentication Service",
-        "Workflow Automation System",
-    ];
-    var filteredItems = items.filter(function (item) {
-        return item.toLowerCase().includes(searchText.toLowerCase());
-    });
-    var mainIcons = [FolderIcon, DocumentIcon];
-    var extraIcons = [DriveLogo, NotionLogo, SlackLogo];
-    var filteredAgents = [
-        {
-            name: "Research Assistant",
-            description: "Academic research and paper analysis",
-            emoji: "🔬",
-            backgroundColor: "s-bg-blue-200",
-        },
-        {
-            name: "Code Companion",
-            description: "Pair programming and code review",
-            emoji: "💻",
-            backgroundColor: "s-bg-purple-200",
-        },
-        {
-            name: "Data Analyst",
-            description: "Data visualization and insights",
-            emoji: "��",
-            backgroundColor: "s-bg-green-200",
-        },
-        {
-            name: "Content Writer",
-            description: "Blog posts and marketing copy",
-            emoji: "✍️",
-            backgroundColor: "s-bg-yellow-200",
-        },
-        {
-            name: "Customer Support",
-            description: "24/7 customer service automation",
-            emoji: "🤝",
-            backgroundColor: "s-bg-pink-200",
-        },
-        {
-            name: "Legal Assistant",
-            description: "Contract review and legal research",
-            emoji: "⚖️",
-            backgroundColor: "s-bg-red-200",
-        },
-        {
-            name: "Design Assistant",
-            description: "UI/UX design and prototyping",
-            emoji: "🎨",
-            backgroundColor: "s-bg-indigo-200",
-        },
-        {
-            name: "Financial Advisor",
-            description: "Investment analysis and planning",
-            emoji: "💰",
-            backgroundColor: "s-bg-emerald-200",
-        },
-    ];
-    var filteredToolsetList = [
-        {
-            name: "Product Design Suite",
-            description: "Figma, Adobe XD, and design assets",
-            icon: ActionMagicIcon,
-        },
-        {
-            name: "Business Intelligence",
-            description: "Tableau, PowerBI, and analytics tools",
-            icon: ActionDocumentIcon,
-        },
-        {
-            name: "Project Management",
-            description: "Notion, Jira, and task tracking",
-            icon: ActionFolderIcon,
-        },
-        {
-            name: "Communication Hub",
-            description: "Slack, Email, and messaging platforms",
-            icon: ActionArmchairIcon,
-        },
-        {
-            name: "Development Stack",
-            description: "GitHub, VSCode, and dev tools",
-            icon: ActionCommand1Icon,
-        },
-        {
-            name: "Customer Success",
-            description: "Zendesk, Intercom, and support tools",
-            icon: ActionUserGroupIcon,
-        },
-        {
-            name: "Marketing Suite",
-            description: "HubSpot, Mailchimp, and campaign tools",
-            icon: ActionCloudArrowDownIcon,
-        },
-        {
-            name: "Data Warehouse",
-            description: "Snowflake, BigQuery, and data storage",
-            icon: ActionArmchairIcon,
-        },
-        {
-            name: "HR Platform",
-            description: "BambooHR, Workday, and people tools",
-            icon: ActionMagicIcon,
-        },
-        {
-            name: "Finance Stack",
-            description: "QuickBooks, Stripe, and payment tools",
-            icon: ActionFolderIcon,
-        },
-    ];
-    return (React.createElement("div", { className: "s-flex s-gap-2" },
-        React.createElement(DropdownMenu, { open: open, onOpenChange: setOpen, modal: false },
-            React.createElement(DropdownMenuTrigger, { asChild: true },
-                React.createElement(Button, { label: selectedItem || "Attach", icon: AttachmentIcon, variant: "outline", size: "sm" })),
-            React.createElement(DropdownMenuContent, { className: "s-w-[380px]", dropdownHeaders: React.createElement(DropdownMenuSearchbar, { value: searchText, onChange: setSearchText, name: "search", placeholder: "Search in Dust", button: React.createElement(Button, { icon: ArrowUpOnSquareIcon, label: "Upload File" }) }) },
+export var ComplexDropdown = {
+    render: function () {
+        return (React.createElement(DropdownMenu, null,
+            React.createElement(DropdownMenuTrigger, null, "Open Complex"),
+            React.createElement(DropdownMenuContent, { className: "s-w-56" },
+                React.createElement(DropdownMenuLabel, { label: "My Account" }),
+                React.createElement(DropdownMenuGroup, null,
+                    React.createElement(DropdownMenuItem, { icon: UserIcon, label: "Profile", endComponent: React.createElement(Button, { size: "mini", icon: ArrowUpOnSquareIcon, variant: "ghost" }) }),
+                    React.createElement(DropdownMenuItem, { icon: ArrowDownCircleIcon, label: "Billing" }),
+                    React.createElement(DropdownMenuItem, { icon: Cog6ToothIcon, label: "Settings" }),
+                    React.createElement(DropdownMenuItem, { icon: UserIcon, label: "Keyboard shortcuts" })),
                 React.createElement(DropdownMenuSeparator, null),
-                searchText ? (filteredItems.map(function (item) {
-                    var randomMainIcon = mainIcons[Math.floor(Math.random() * mainIcons.length)];
-                    var randomExtraIcon = extraIcons[Math.floor(Math.random() * extraIcons.length)];
-                    return (React.createElement(DropdownMenuItem, { key: item, label: item, description: "Company Space/Notion", icon: React.createElement(DoubleIcon, { size: "lg", mainIcon: randomMainIcon, secondaryIcon: randomExtraIcon }), onClick: function () {
-                            setSelectedItem(item);
-                            setSearchText("");
-                        }, truncateText: true }));
-                })) : (React.createElement("div", { className: "s-flex s-h-full s-w-full s-items-center s-justify-center s-py-8" },
-                    React.createElement("div", { className: "s-flex s-flex-col s-items-center s-justify-center s-gap-0 s-text-center s-text-base s-font-semibold s-text-primary-400" },
-                        React.createElement(Icon, { visual: MagnifyingGlassIcon, size: "sm" }),
-                        "Search in Dust"))))),
-        React.createElement(DropdownMenu, { open: openAgents, onOpenChange: setOpenAgents },
-            React.createElement(DropdownMenuTrigger, { asChild: true },
-                React.createElement(Button, { icon: RobotIcon, variant: "outline", size: "sm", isSelect: true })),
-            React.createElement(DropdownMenuContent, { className: "s-h-96 s-w-[380px]", dropdownHeaders: React.createElement(DropdownMenuSearchbar, { ref: agentsSearchInputRef, name: "search", value: searchText, onChange: setSearchText, onKeyDown: function () { }, placeholder: "Search Agents", button: React.createElement(Button, { icon: PlusIcon, label: "Create" }) }) },
+                React.createElement(DropdownMenuGroup, null,
+                    React.createElement(DropdownMenuLabel, { label: "Team" }),
+                    React.createElement(DropdownMenuItem, { icon: UserIcon, label: "Members" }),
+                    React.createElement(DropdownMenuSub, null,
+                        React.createElement(DropdownMenuSubTrigger, { icon: UserIcon, label: "Invite users" }),
+                        React.createElement(DropdownMenuPortal, null,
+                            React.createElement(DropdownMenuSubContent, null,
+                                React.createElement(DropdownMenuItem, { icon: MagicIcon, label: "Email" }),
+                                React.createElement(DropdownMenuItem, { icon: ChatBubbleBottomCenterPlusIcon, label: "Message" }),
+                                React.createElement(DropdownMenuSeparator, null),
+                                React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More..." }),
+                                React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More.." }),
+                                React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More..." }),
+                                React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More.." }),
+                                React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More" }),
+                                React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More....." }),
+                                React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More.." }),
+                                React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More" }),
+                                React.createElement(DropdownMenuItem, { icon: UserIcon, label: "More...." })))),
+                    React.createElement(DropdownMenuItem, { icon: UserGroupIcon, label: "New Team" })),
                 React.createElement(DropdownMenuSeparator, null),
-                filteredAgents.map(function (agent) {
-                    return (React.createElement(DropdownMenuItem, { key: agent.name, label: agent.name, description: agent.description, icon: function () { return (React.createElement(Avatar, { size: "sm", emoji: agent.emoji, backgroundColor: agent.backgroundColor })); }, onClick: function () {
-                            setSelectedItem(agent.name);
-                            setSearchText("");
-                        }, truncateText: true }));
-                }))),
-        React.createElement(DropdownMenu, { open: openToolsets, onOpenChange: setOpenToolsets },
-            React.createElement(DropdownMenuTrigger, { asChild: true },
-                React.createElement(Button, { label: selectedItem || "Add Toolset", icon: SuitcaseIcon, variant: "outline", size: "sm" })),
-            React.createElement(DropdownMenuContent, { className: "s-h-96 s-w-[380px]", dropdownHeaders: React.createElement(DropdownMenuSearchbar, { ref: toolsetsSearchInputRef, name: "search", value: searchText, onChange: setSearchText, onKeyDown: function () { }, placeholder: "Search Tools", button: React.createElement(Button, { icon: PlusIcon, label: "Add MCP Server" }) }) },
+                React.createElement(DropdownMenuItem, { icon: GithubLogo, label: "GitHub" }),
+                React.createElement(DropdownMenuItem, { icon: UserIcon, label: "Support" }),
+                React.createElement(DropdownMenuItem, { icon: CloudArrowDownIcon, label: "API", disabled: true }),
                 React.createElement(DropdownMenuSeparator, null),
-                filteredToolsetList.map(function (toolset) {
-                    return (React.createElement(DropdownMenuItem, { key: toolset.name, label: toolset.name, description: toolset.description, icon: function () { return React.createElement(Avatar, { size: "sm", icon: toolset.icon }); }, onClick: function () {
-                            setSelectedItem(toolset.name);
-                            setSearchText("");
-                        }, truncateText: true }));
-                })))));
-}
-function StaticItemDropdownDemo() {
-    return (React.createElement(DropdownMenu, null,
-        React.createElement(DropdownMenuTrigger, { asChild: true },
-            React.createElement(Button, { label: "System Status", variant: "outline", size: "sm" })),
-        React.createElement(DropdownMenuContent, { className: "s-w-[250px]" },
-            React.createElement(DropdownMenuLabel, { label: "System Metrics" }),
-            React.createElement(DropdownMenuStaticItem, { label: "CPU Usage", value: "45%" }),
-            React.createElement(DropdownMenuStaticItem, { label: "Memory", value: "2.3GB/8GB" }),
-            React.createElement(DropdownMenuStaticItem, { label: "Disk Space" },
-                React.createElement("span", { className: "s-flex s-items-center s-gap-2 s-text-muted-foreground" },
-                    "3",
-                    React.createElement(Icon, { size: "xs", className: "s-text-muted-foreground", visual: HandThumbUpIcon }),
-                    "1",
-                    React.createElement(Icon, { size: "xs", className: "s-text-muted-foreground", visual: HandThumbDownIcon }))),
-            React.createElement(DropdownMenuSeparator, null),
-            React.createElement(DropdownMenuLabel, { label: "Actions" }),
-            React.createElement(DropdownMenuItem, { icon: Cog6ToothIcon, label: "System Settings", onClick: function () { return console.log("Settings clicked"); } }),
-            React.createElement(DropdownMenuItem, { icon: CloudArrowDownIcon, label: "Download Report", onClick: function () { return console.log("Download clicked"); } }))));
-}
-export var TagsDropdownExample = function () {
-    var _a = __read(useState([
-        "react",
-        "typescript",
-        "ui",
-        "design-system",
-    ]), 2), tags = _a[0], setTags = _a[1];
-    var _b = __read(useState(false), 2), isLoading = _b[0], setIsLoading = _b[1];
-    var handleRemoveTag = function (tagToRemove) {
-        setTags(tags.filter(function (tag) { return tag !== tagToRemove; }));
-    };
-    var handleAddTag = function () {
-        setIsLoading(true);
-        // Simulate API call delay
-        setTimeout(function () {
-            var newTag = "tag-".concat(Math.floor(Math.random() * 1000));
-            setTags(__spreadArray(__spreadArray([], __read(tags), false), [newTag], false));
-            setIsLoading(false);
-        }, 1500);
-    };
-    return (React.createElement("div", { className: "s-flex s-flex-col s-gap-4 s-p-4" },
-        React.createElement("div", { className: "s-flex s-items-center s-gap-2" },
-            React.createElement(DropdownMenu, { open: true },
+                React.createElement(DropdownMenuItem, { icon: LogoutIcon, label: "Log out", variant: "warning", href: "/api/auth/logout" }))));
+    },
+};
+export var WithCheckboxes = {
+    render: function () {
+        var _a = __read(React.useState(true), 2), showStatusBar = _a[0], setShowStatusBar = _a[1];
+        var _b = __read(React.useState(false), 2), showActivityBar = _b[0], setShowActivityBar = _b[1];
+        var _c = __read(React.useState(false), 2), showPanel = _c[0], setShowPanel = _c[1];
+        return (React.createElement(DropdownMenu, null,
+            React.createElement(DropdownMenuTrigger, null, "Open Checkbox"),
+            React.createElement(DropdownMenuContent, { className: "s-w-72" },
+                React.createElement(DropdownMenuLabel, { label: "Interface Settings" }),
+                React.createElement(DropdownMenuSeparator, null),
+                React.createElement(DropdownMenuCheckboxItem, { checked: showStatusBar, onCheckedChange: setShowStatusBar, label: "Status Bar", description: "Show application status and progress indicators", truncateText: true }),
+                React.createElement(DropdownMenuCheckboxItem, { checked: showActivityBar, onCheckedChange: setShowActivityBar, label: "Activity Bar", description: "Display sidebar with quick access to tools", truncateText: true, disabled: true }),
+                React.createElement(DropdownMenuCheckboxItem, { checked: showPanel, onCheckedChange: setShowPanel, label: "Panel", description: "Bottom panel for terminal and debug output", truncateText: true }))));
+    },
+};
+export var WithRadioGroup = {
+    render: function () {
+        var _a = __read(React.useState("bottom"), 2), position = _a[0], setPosition = _a[1];
+        return (React.createElement(DropdownMenu, null,
+            React.createElement(DropdownMenuTrigger, null, "Open Radio Group"),
+            React.createElement(DropdownMenuContent, { className: "s-w-56" },
+                React.createElement(DropdownMenuLabel, { label: "Panel Position" }),
+                React.createElement(DropdownMenuSeparator, null),
+                React.createElement(DropdownMenuRadioGroup, { value: position, onValueChange: setPosition },
+                    React.createElement(DropdownMenuRadioItem, { value: "top" }, "Top"),
+                    React.createElement(DropdownMenuRadioItem, { value: "bottom" }, "Bottom"),
+                    React.createElement(DropdownMenuRadioItem, { value: "right" }, "Right")))));
+    },
+};
+export var ModelSelector = {
+    render: function () {
+        var _a = __read(React.useState("GPT4-o"), 2), selectedModel = _a[0], setSelectedModel = _a[1];
+        var bestPerformingModels = [
+            {
+                name: "GPT4-o",
+                description: "OpenAI's most advanced model.",
+                icon: OpenaiLogo,
+            },
+            {
+                name: "Claude 3.5 Sonnet",
+                description: "Anthropic's latest Claude 3.5 Sonnet model (200k context).",
+                icon: AnthropicLogo,
+            },
+            {
+                name: "Mistral Large",
+                description: "Mistral's `large 2` model (128k context).",
+                icon: MistralLogo,
+            },
+        ];
+        return (React.createElement(DropdownMenu, null,
+            React.createElement(DropdownMenuTrigger, { asChild: true },
+                React.createElement(Button, { label: selectedModel, variant: "outline", size: "sm", tooltip: "Test" })),
+            React.createElement(DropdownMenuContent, null,
+                React.createElement(DropdownMenuLabel, { label: "Best performing models" }),
+                bestPerformingModels.map(function (modelConfig) { return (React.createElement(DropdownMenuItem, { key: modelConfig.name, label: modelConfig.name, onClick: function () { return setSelectedModel(modelConfig.name); }, description: modelConfig.description, icon: modelConfig.icon })); }))));
+    },
+};
+export var ModelSelectorWithRadio = {
+    render: function () {
+        var _a = __read(React.useState("GPT4-o"), 2), selectedModel = _a[0], setSelectedModel = _a[1];
+        var bestPerformingModels = [
+            {
+                name: "GPT4-o",
+                description: "OpenAI's most advanced model.",
+                icon: OpenaiLogo,
+            },
+            {
+                name: "Claude 3.5 Sonnet",
+                description: "Anthropic's latest Claude 3.5 Sonnet model (200k context).",
+                icon: AnthropicLogo,
+            },
+            {
+                name: "Mistral Large",
+                description: "Mistral's `large 2` model (128k context).",
+                icon: MistralLogo,
+            },
+        ];
+        return (React.createElement(DropdownMenu, null,
+            React.createElement(DropdownMenuTrigger, { asChild: true },
+                React.createElement(Button, { label: selectedModel, variant: "ghost", size: "sm" })),
+            React.createElement(DropdownMenuContent, null,
+                React.createElement(DropdownMenuRadioGroup, { value: selectedModel, onValueChange: function (value) { return setSelectedModel(value); } },
+                    React.createElement(DropdownMenuLabel, { label: "Best performing models" }),
+                    bestPerformingModels.map(function (modelConfig) { return (React.createElement(DropdownMenuRadioItem, { key: modelConfig.name, label: modelConfig.name, icon: modelConfig.icon, description: modelConfig.description, value: modelConfig.name })); })))));
+    },
+};
+export var WithSearchAndPicker = {
+    render: function () {
+        var _a = __read(React.useState(""), 2), searchText = _a[0], setSearchText = _a[1];
+        var _b = __read(React.useState(null), 2), selectedItem = _b[0], setSelectedItem = _b[1];
+        var _c = __read(React.useState(false), 2), open = _c[0], setOpen = _c[1];
+        var _d = __read(React.useState(false), 2), openAgents = _d[0], setOpenAgents = _d[1];
+        var _e = __read(React.useState(false), 2), openToolsets = _e[0], setOpenToolsets = _e[1];
+        var searchInputRef = React.useRef(null);
+        var agentsSearchInputRef = React.useRef(null);
+        var toolsetsSearchInputRef = React.useRef(null);
+        React.useEffect(function () {
+            if (open) {
+                setTimeout(function () {
+                    var _a;
+                    (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, 0);
+            }
+        }, [open]);
+        React.useEffect(function () {
+            if (openAgents) {
+                setTimeout(function () {
+                    var _a;
+                    (_a = agentsSearchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, 0);
+            }
+        }, [openAgents]);
+        React.useEffect(function () {
+            if (openToolsets) {
+                setTimeout(function () {
+                    var _a;
+                    (_a = toolsetsSearchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, 0);
+            }
+        }, [openToolsets]);
+        var items = [
+            "Automated Data Processing Automated Data Processing Automated Data Processing Automated Data Processing",
+            "Business Intelligence Dashboard",
+            "Cloud Infrastructure Setup",
+            "Data Migration Service",
+            "Enterprise Resource Planning",
+            "Financial Analytics Platform",
+            "Geographic Information System",
+            "Human Resources Management",
+            "Inventory Control System",
+            "Knowledge Base Integration",
+            "Machine Learning Pipeline",
+            "Network Security Monitor",
+            "Operations Management Tool",
+            "Project Portfolio Tracker",
+            "Quality Assurance Framework",
+            "Real-time Analytics Engine",
+            "Supply Chain Optimizer",
+            "Team Collaboration Hub",
+            "User Authentication Service",
+            "Workflow Automation System",
+        ];
+        var filteredItems = items.filter(function (item) {
+            return item.toLowerCase().includes(searchText.toLowerCase());
+        });
+        var mainIcons = [FolderIcon, DocumentIcon];
+        var extraIcons = [DriveLogo, NotionLogo, SlackLogo];
+        var filteredAgents = [
+            {
+                name: "Research Assistant",
+                description: "Academic research and paper analysis",
+                emoji: "🔬",
+                backgroundColor: "s-bg-blue-200",
+            },
+            {
+                name: "Code Companion",
+                description: "Pair programming and code review",
+                emoji: "💻",
+                backgroundColor: "s-bg-purple-200",
+            },
+            {
+                name: "Data Analyst",
+                description: "Data visualization and insights",
+                emoji: "��",
+                backgroundColor: "s-bg-green-200",
+            },
+            {
+                name: "Content Writer",
+                description: "Blog posts and marketing copy",
+                emoji: "✍️",
+                backgroundColor: "s-bg-yellow-200",
+            },
+            {
+                name: "Customer Support",
+                description: "24/7 customer service automation",
+                emoji: "🤝",
+                backgroundColor: "s-bg-pink-200",
+            },
+            {
+                name: "Legal Assistant",
+                description: "Contract review and legal research",
+                emoji: "⚖️",
+                backgroundColor: "s-bg-red-200",
+            },
+            {
+                name: "Design Assistant",
+                description: "UI/UX design and prototyping",
+                emoji: "🎨",
+                backgroundColor: "s-bg-indigo-200",
+            },
+            {
+                name: "Financial Advisor",
+                description: "Investment analysis and planning",
+                emoji: "💰",
+                backgroundColor: "s-bg-emerald-200",
+            },
+        ];
+        var filteredToolsetList = [
+            {
+                name: "Product Design Suite",
+                description: "Figma, Adobe XD, and design assets",
+                icon: ActionMagicIcon,
+            },
+            {
+                name: "Business Intelligence",
+                description: "Tableau, PowerBI, and analytics tools",
+                icon: ActionDocumentIcon,
+            },
+            {
+                name: "Project Management",
+                description: "Notion, Jira, and task tracking",
+                icon: ActionFolderIcon,
+            },
+            {
+                name: "Communication Hub",
+                description: "Slack, Email, and messaging platforms",
+                icon: ActionArmchairIcon,
+            },
+            {
+                name: "Development Stack",
+                description: "GitHub, VSCode, and dev tools",
+                icon: ActionCommand1Icon,
+            },
+            {
+                name: "Customer Success",
+                description: "Zendesk, Intercom, and support tools",
+                icon: ActionUserGroupIcon,
+            },
+            {
+                name: "Marketing Suite",
+                description: "HubSpot, Mailchimp, and campaign tools",
+                icon: ActionCloudArrowDownIcon,
+            },
+            {
+                name: "Data Warehouse",
+                description: "Snowflake, BigQuery, and data storage",
+                icon: ActionArmchairIcon,
+            },
+            {
+                name: "HR Platform",
+                description: "BambooHR, Workday, and people tools",
+                icon: ActionMagicIcon,
+            },
+            {
+                name: "Finance Stack",
+                description: "QuickBooks, Stripe, and payment tools",
+                icon: ActionFolderIcon,
+            },
+        ];
+        return (React.createElement("div", { className: "s-flex s-gap-2" },
+            React.createElement(DropdownMenu, { open: open, onOpenChange: setOpen, modal: false },
                 React.createElement(DropdownMenuTrigger, { asChild: true },
-                    React.createElement(Button, { variant: "outline", label: "Select Tags", icon: PlusIcon, size: "sm", isSelect: true })),
-                React.createElement(DropdownMenuContent, { className: "s-w-80" },
-                    React.createElement(DropdownMenuLabel, { label: "Available Tags" }),
+                    React.createElement(Button, { label: selectedItem || "Attach", icon: AttachmentIcon, variant: "outline", size: "sm" })),
+                React.createElement(DropdownMenuContent, { className: "s-w-[380px]", dropdownHeaders: React.createElement(DropdownMenuSearchbar, { value: searchText, onChange: setSearchText, name: "search", placeholder: "Search in Dust", button: React.createElement(Button, { icon: ArrowUpOnSquareIcon, label: "Upload File" }) }) },
                     React.createElement(DropdownMenuSeparator, null),
-                    React.createElement(DropdownMenuTagList, null, tags.map(function (tag) { return (React.createElement(DropdownMenuTagItem, { key: tag, label: tag, color: "highlight", onRemove: function () { return handleRemoveTag(tag); }, onClick: function () { return console.log(tag); } })); })),
+                    searchText ? (filteredItems.map(function (item) {
+                        var randomMainIcon = mainIcons[Math.floor(Math.random() * mainIcons.length)];
+                        var randomExtraIcon = extraIcons[Math.floor(Math.random() * extraIcons.length)];
+                        return (React.createElement(DropdownMenuItem, { key: item, label: item, description: "Company Space/Notion", icon: React.createElement(DoubleIcon, { size: "lg", mainIcon: randomMainIcon, secondaryIcon: randomExtraIcon }), onClick: function () {
+                                setSelectedItem(item);
+                                setSearchText("");
+                            }, truncateText: true }));
+                    })) : (React.createElement("div", { className: "s-flex s-h-full s-w-full s-items-center s-justify-center s-py-8" },
+                        React.createElement("div", { className: "s-flex s-flex-col s-items-center s-justify-center s-gap-0 s-text-center s-text-base s-font-semibold s-text-primary-400" },
+                            React.createElement(Icon, { visual: MagnifyingGlassIcon, size: "sm" }),
+                            "Search in Dust"))))),
+            React.createElement(DropdownMenu, { open: openAgents, onOpenChange: setOpenAgents },
+                React.createElement(DropdownMenuTrigger, { asChild: true },
+                    React.createElement(Button, { icon: RobotIcon, variant: "outline", size: "sm", isSelect: true })),
+                React.createElement(DropdownMenuContent, { className: "s-h-96 s-w-[380px]", dropdownHeaders: React.createElement(DropdownMenuSearchbar, { ref: agentsSearchInputRef, name: "search", value: searchText, onChange: setSearchText, onKeyDown: function () { }, placeholder: "Search Agents", button: React.createElement(Button, { icon: PlusIcon, label: "Create" }) }) },
+                    React.createElement(DropdownMenuSeparator, null),
+                    filteredAgents.map(function (agent) {
+                        return (React.createElement(DropdownMenuItem, { key: agent.name, label: agent.name, description: agent.description, icon: function () { return (React.createElement(Avatar, { size: "sm", emoji: agent.emoji, backgroundColor: agent.backgroundColor })); }, onClick: function () {
+                                setSelectedItem(agent.name);
+                                setSearchText("");
+                            }, truncateText: true }));
+                    }))),
+            React.createElement(DropdownMenu, { open: openToolsets, onOpenChange: setOpenToolsets },
+                React.createElement(DropdownMenuTrigger, { asChild: true },
+                    React.createElement(Button, { label: selectedItem || "Add Toolset", icon: SuitcaseIcon, variant: "outline", size: "sm" })),
+                React.createElement(DropdownMenuContent, { className: "s-h-96 s-w-[380px]", dropdownHeaders: React.createElement(DropdownMenuSearchbar, { ref: toolsetsSearchInputRef, name: "search", value: searchText, onChange: setSearchText, onKeyDown: function () { }, placeholder: "Search Tools", button: React.createElement(Button, { icon: PlusIcon, label: "Add MCP Server" }) }) },
                     React.createElement(DropdownMenuSeparator, null),
-                    React.createElement("div", { className: "s-p-2" },
-                        React.createElement(Button, { label: isLoading ? "Adding..." : "Add Random Tag", onClick: handleAddTag, className: "s-w-full", size: "sm", disabled: isLoading, icon: isLoading
-                                ? function () { return React.createElement(Spinner, { size: "xs", variant: "color" }); }
-                                : undefined })))),
-            React.createElement("div", { className: "s-text-sm s-text-muted-foreground" }, "Click to view available tags")),
-        React.createElement("div", { className: "s-flex s-flex-wrap s-gap-2 s-rounded-lg s-border s-border-border s-p-4" },
-            React.createElement("span", { className: "s-mr-2 s-text-sm s-text-muted-foreground" }, "Current tags:"),
-            tags.map(function (tag) { return (React.createElement("div", { key: tag, className: "s-inline-flex" },
-                React.createElement(Chip, { label: tag, color: "highlight", size: "xs", onRemove: function () { return handleRemoveTag(tag); } }))); }))));
+                    filteredToolsetList.map(function (toolset) {
+                        return (React.createElement(DropdownMenuItem, { key: toolset.name, label: toolset.name, description: toolset.description, icon: function () { return React.createElement(Avatar, { size: "sm", icon: toolset.icon }); }, onClick: function () {
+                                setSelectedItem(toolset.name);
+                                setSearchText("");
+                            }, truncateText: true }));
+                    })))));
+    },
+};
+export var WithStaticItems = {
+    render: function () {
+        return (React.createElement(DropdownMenu, null,
+            React.createElement(DropdownMenuTrigger, { asChild: true },
+                React.createElement(Button, { label: "System Status", variant: "outline", size: "sm" })),
+            React.createElement(DropdownMenuContent, { className: "s-w-[250px]" },
+                React.createElement(DropdownMenuLabel, { label: "System Metrics" }),
+                React.createElement(DropdownMenuStaticItem, { label: "CPU Usage", value: "45%" }),
+                React.createElement(DropdownMenuStaticItem, { label: "Memory", value: "2.3GB/8GB" }),
+                React.createElement(DropdownMenuStaticItem, { label: "Disk Space" },
+                    React.createElement("span", { className: "s-flex s-items-center s-gap-2 s-text-muted-foreground" },
+                        "3",
+                        React.createElement(Icon, { size: "xs", className: "s-text-muted-foreground", visual: HandThumbUpIcon }),
+                        "1",
+                        React.createElement(Icon, { size: "xs", className: "s-text-muted-foreground", visual: HandThumbDownIcon }))),
+                React.createElement(DropdownMenuSeparator, null),
+                React.createElement(DropdownMenuLabel, { label: "Actions" }),
+                React.createElement(DropdownMenuItem, { icon: Cog6ToothIcon, label: "System Settings", onClick: function () { return console.log("Settings clicked"); } }),
+                React.createElement(DropdownMenuItem, { icon: CloudArrowDownIcon, label: "Download Report", onClick: function () { return console.log("Download clicked"); } }))));
+    },
+};
+export var WithSearchFilter = {
+    render: function () {
+        var _a = __read(React.useState(""), 2), searchInputValue = _a[0], setSearchInputValue = _a[1];
+        var items = ["Profile", "Billing", "Team", "Subscription"];
+        var filteredItems = items.filter(function (item) {
+            return item.toLowerCase().includes(searchInputValue.toLowerCase());
+        });
+        return (React.createElement(SearchDropdownMenu, { searchInputValue: searchInputValue, setSearchInputValue: setSearchInputValue }, filteredItems.map(function (item) { return (React.createElement(DropdownMenuItem, { key: item, label: item, onClick: function () {
+                console.log(item);
+            } })); })));
+    },
+};
+export var WithTags = {
+    render: function () {
+        var _a = __read(useState([
+            "react",
+            "typescript",
+            "ui",
+            "design-system",
+        ]), 2), tags = _a[0], setTags = _a[1];
+        var _b = __read(useState(false), 2), isLoading = _b[0], setIsLoading = _b[1];
+        var handleRemoveTag = function (tagToRemove) {
+            setTags(tags.filter(function (tag) { return tag !== tagToRemove; }));
+        };
+        var handleAddTag = function () {
+            setIsLoading(true);
+            // Simulate API call delay
+            setTimeout(function () {
+                var newTag = "tag-".concat(Math.floor(Math.random() * 1000));
+                setTags(__spreadArray(__spreadArray([], __read(tags), false), [newTag], false));
+                setIsLoading(false);
+            }, 1500);
+        };
+        return (React.createElement("div", { className: "s-flex s-flex-col s-gap-4 s-p-4" },
+            React.createElement("div", { className: "s-flex s-items-center s-gap-2" },
+                React.createElement(DropdownMenu, null,
+                    React.createElement(DropdownMenuTrigger, { asChild: true },
+                        React.createElement(Button, { variant: "outline", label: "Select Tags", icon: PlusIcon, size: "sm", isSelect: true })),
+                    React.createElement(DropdownMenuContent, { className: "s-w-80" },
+                        React.createElement(DropdownMenuLabel, { label: "Available Tags" }),
+                        React.createElement(DropdownMenuSeparator, null),
+                        React.createElement(DropdownMenuTagList, null, tags.map(function (tag) { return (React.createElement(DropdownMenuTagItem, { key: tag, label: tag, color: "highlight", onRemove: function () { return handleRemoveTag(tag); }, onClick: function () { return console.log(tag); } })); })),
+                        React.createElement(DropdownMenuSeparator, null),
+                        React.createElement("div", { className: "s-p-2" },
+                            React.createElement(Button, { label: isLoading ? "Adding..." : "Add Random Tag", onClick: handleAddTag, className: "s-w-full", size: "sm", disabled: isLoading, icon: isLoading
+                                    ? function () { return React.createElement(Spinner, { size: "xs", variant: "color" }); }
+                                    : undefined })))),
+                React.createElement("div", { className: "s-text-sm s-text-muted-foreground" }, "Click to view available tags")),
+            React.createElement("div", { className: "s-flex s-flex-wrap s-gap-2 s-rounded-lg s-border s-border-border s-p-4" },
+                React.createElement("span", { className: "s-mr-2 s-text-sm s-text-muted-foreground" }, "Current tags:"),
+                tags.map(function (tag) { return (React.createElement("div", { key: tag, className: "s-inline-flex" },
+                    React.createElement(Chip, { label: tag, color: "highlight", size: "xs", onRemove: function () { return handleRemoveTag(tag); } }))); }))));
+    },
 };
 //# sourceMappingURL=Dropdown.stories.js.map