@dust-tt/sparkle 0.2.617-rc-1 → 0.2.618-rc-1

package/dist/esm/stories/Playground.stories.js

@@ -1,34 +1,171 @@
-import React from "react";
-import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuShortcut, DropdownMenuTrigger, Label, Page, } from "../components";
-import { ActionMoonIcon, ActionSunIcon, LightModeIcon } from "../icons";
+import { __read } from "tslib";
+import React, { useEffect, useRef, useState } from "react";
+import { ArrowUpIcon, AttachmentIcon, BoltIcon, Button, cn, MicIcon, PlusIcon, RainbowEffect, RobotIcon, SquareIcon, } from "../index_with_tw_base";
 export default {
-    title: "Playground/Demo",
+    title: "Playground/Playground",
 };
 export var Demo = function () {
-    return (React.createElement("div", { className: "s-flex s-h-full s-w-full s-cursor-pointer s-flex-col s-gap-2" },
-        React.createElement(Page.Layout, { direction: "horizontal" },
-            React.createElement(Page.Vertical, { sizing: "grow", align: "stretch", gap: "xs" },
-                React.createElement(Label, null, "Theme"),
-                React.createElement(DropdownMenu, null,
-                    React.createElement(DropdownMenuTrigger, { asChild: true },
-                        React.createElement(Button, { variant: "outline", icon: LightModeIcon, label: "light", isSelect: true, className: "s-w-fit" })),
-                    React.createElement(DropdownMenuContent, null,
-                        React.createElement(DropdownMenuItem, { icon: ActionSunIcon, label: "Light" }),
-                        React.createElement(DropdownMenuItem, { icon: ActionMoonIcon, label: "Dark" }),
-                        React.createElement(DropdownMenuItem, { icon: LightModeIcon, label: "System" })))),
-            React.createElement(Page.Vertical, { sizing: "grow", align: "stretch", gap: "xs" },
-                React.createElement(Label, null, "Keyboard Shortcuts"),
-                React.createElement(DropdownMenu, null,
-                    React.createElement(DropdownMenuTrigger, { asChild: true },
-                        React.createElement("div", { className: "s-copy-sm s-flex s-items-center s-gap-2" },
-                            "Send message",
-                            React.createElement(Button, { variant: "outline", label: "Cmd+Enter (\u2318+\u21B5)", isSelect: true, className: "s-w-fit" }))),
-                    React.createElement(DropdownMenuContent, null,
-                        React.createElement(DropdownMenuItem, null,
-                            "Send message when pressing Enter",
-                            React.createElement(DropdownMenuShortcut, null, "\u21B5")),
-                        React.createElement(DropdownMenuItem, null,
-                            "Send message when pressing Cmd+Enter",
-                            React.createElement(DropdownMenuShortcut, null, "\u2318 + \u21B5"))))))));
+    var _a = __read(useState(false), 2), isFocused = _a[0], setIsFocused = _a[1];
+    var _b = __read(useState("idle"), 2), recordState = _b[0], setRecordState = _b[1];
+    var _c = __read(useState(false), 2), isPressAndHold = _c[0], setIsPressAndHold = _c[1];
+    var _d = __read(useState(0), 2), elapsedSeconds = _d[0], setElapsedSeconds = _d[1];
+    var divRef = useRef(null);
+    var recordButtonRef = useRef(null);
+    var mouseDownTimeRef = useRef(0);
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (divRef.current && !divRef.current.contains(event.target)) {
+                setIsFocused(false);
+            }
+        };
+        document.addEventListener("click", handleClickOutside);
+        return function () {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, []);
+    // Timer effect for recording and press and hold states
+    useEffect(function () {
+        var interval = null;
+        if (recordState === "pressAndHold" || recordState === "recording") {
+            interval = setInterval(function () {
+                setElapsedSeconds(function (prev) { return prev + 1; });
+            }, 1000);
+        }
+        else {
+            // Reset timer when not recording or press and hold
+            setElapsedSeconds(0);
+        }
+        return function () {
+            if (interval) {
+                clearInterval(interval);
+            }
+        };
+    }, [recordState]);
+    var handleFocus = function () {
+        setIsFocused(true);
+    };
+    var formatTime = function (seconds) {
+        var mins = Math.floor(seconds / 60);
+        var secs = seconds % 60;
+        return "".concat(mins, ":").concat(secs.toString().padStart(2, "0"));
+    };
+    var handleRecordMouseDown = function () {
+        console.log("MouseDown - recordState:", recordState);
+        mouseDownTimeRef.current = Date.now();
+        if (recordState === "idle") {
+            setRecordState("pressAndHold");
+            setIsPressAndHold(true);
+            console.log("Set to pressAndHold, isPressAndHold = true");
+        }
+    };
+    var handleRecordMouseUp = function () {
+        var holdDuration = Date.now() - mouseDownTimeRef.current;
+        console.log("MouseUp - recordState:", recordState, "holdDuration:", holdDuration);
+        if (recordState === "pressAndHold") {
+            setRecordState("idle");
+            console.log("Set to idle from pressAndHold");
+            // If held for more than 200ms, it was a press-and-hold, so ignore the upcoming click
+            if (holdDuration > 200) {
+                console.log("Was press-and-hold, keeping isPressAndHold = true");
+                // Keep isPressAndHold true to ignore the click
+            }
+            else {
+                console.log("Was quick click, setting isPressAndHold = false");
+                setIsPressAndHold(false);
+                // For quick clicks, directly start recording
+                console.log("Starting recording from quick click");
+                setRecordState("recording");
+            }
+        }
+    };
+    var handleRecordClick = function () {
+        console.log("Click - recordState:", recordState, "isPressAndHold:", isPressAndHold);
+        // Handle stop recording
+        if (recordState === "recording") {
+            console.log("Setting to idle (stop recording)");
+            setRecordState("idle");
+            return;
+        }
+        // Only handle click if we're not in a press-and-hold sequence
+        if (!isPressAndHold) {
+            if (recordState === "idle") {
+                console.log("Setting to recording");
+                setRecordState("recording");
+            }
+        }
+        else {
+            console.log("Ignoring click - was press and hold");
+            // Reset the flag after ignoring the click
+            setIsPressAndHold(false);
+        }
+    };
+    var handleRecordMouseLeave = function () {
+        if (recordState === "pressAndHold") {
+            setRecordState("idle");
+            setIsPressAndHold(false);
+        }
+    };
+    return (React.createElement("div", { className: "s-flex s-h-[600px] s-w-full s-items-end s-justify-center s-border s-border-warning/20 sm:s-p-0 md:s-p-6" },
+        React.createElement("div", { className: "s-flex s-w-full s-max-w-[900px] s-flex-1 s-p-0" },
+            React.createElement(RainbowEffect, { containerClassName: "s-w-full", className: "s-w-full", size: isFocused ? "large" : "medium" },
+                React.createElement("div", { ref: divRef, onClick: handleFocus, className: cn("s-relative s-flex s-w-full s-flex-row", "s-border s-border-border/0 s-bg-primary-50 s-transition-all md:s-rounded-3xl", isFocused
+                        ? "s-border-border md:s-ring-2 md:s-ring-highlight-300 md:s-ring-offset-2"
+                        : "") },
+                    React.createElement("div", { className: "s-flex s-w-full s-flex-col" },
+                        React.createElement("div", { className: "s-h-full s-w-full s-p-5" }, "Ask a question"),
+                        React.createElement("div", { className: "s-flex s-w-full s-gap-2 s-p-4" },
+                            React.createElement(Button, { variant: "outline", icon: PlusIcon, size: "sm", tooltip: "Attach a document", className: "md:s-hidden" }),
+                            React.createElement("div", { className: "s-hidden s-gap-0 md:s-flex" },
+                                React.createElement(Button, { variant: "ghost", icon: AttachmentIcon, size: "xs", tooltip: "Attach a document" }),
+                                React.createElement(Button, { variant: "ghost", icon: BoltIcon, size: "xs", tooltip: "Add functionality" }),
+                                React.createElement(Button, { variant: "ghost", icon: RobotIcon, size: "xs", tooltip: "Mention an Agent" })),
+                            React.createElement("div", { className: "s-grow" }),
+                            React.createElement("div", { className: "s-flex s-items-center s-gap-2 md:s-gap-1" },
+                                React.createElement("div", { id: "Recording", className: cn("s-duration-600 s-flex s-items-center s-justify-end s-gap-2 s-overflow-hidden s-px-2 s-transition-all s-ease-in-out", recordState === "pressAndHold" ||
+                                        recordState === "recording"
+                                        ? "s-w-24 s-opacity-100"
+                                        : "s-w-6 s-opacity-0") },
+                                    React.createElement("div", { className: "s-heading-xs s-font-mono" }, formatTime(elapsedSeconds)),
+                                    React.createElement("div", { className: "s-flex s-h-5 s-items-center s-gap-0.5" },
+                                        React.createElement("div", { className: "s-h-[22%] s-min-h-1 s-w-0.5 s-rounded-full s-bg-muted-foreground" }),
+                                        React.createElement("div", { className: "s-h-[33%] s-min-h-1 s-w-0.5 s-rounded-full s-bg-muted-foreground" }),
+                                        React.createElement("div", { className: "s-h-[18%] s-min-h-1 s-w-0.5 s-rounded-full s-bg-muted-foreground" }),
+                                        React.createElement("div", { className: "s-h-[64%] s-min-h-1 s-w-0.5 s-rounded-full s-bg-muted-foreground" }),
+                                        React.createElement("div", { className: "s-h-[98%] s-min-h-1 s-w-0.5 s-rounded-full s-bg-muted-foreground" }),
+                                        React.createElement("div", { className: "s-h-[56%] s-min-h-1 s-w-0.5 s-rounded-full s-bg-muted-foreground" }),
+                                        React.createElement("div", { className: "s-h-[6%] s-min-h-1 s-w-0.5 s-rounded-full s-bg-muted-foreground" }),
+                                        React.createElement("div", { className: "s-h-[34%] s-min-h-1 s-w-0.5 s-rounded-full s-bg-muted-foreground" }),
+                                        React.createElement("div", { className: "s-h-[76%] s-min-h-1 s-w-0.5 s-rounded-full s-bg-muted-foreground" }),
+                                        React.createElement("div", { className: "s-h-[46%] s-min-h-1 s-w-0.5 s-rounded-full s-bg-muted-foreground" }),
+                                        React.createElement("div", { className: "s-h-[12%] s-min-h-1 s-w-0.5 s-rounded-full s-bg-muted-foreground" }),
+                                        React.createElement("div", { className: "s-h-[22%] s-min-h-1 s-w-0.5 s-rounded-full s-bg-muted-foreground" }))),
+                                React.createElement(Button, { id: recordState === "recording"
+                                        ? "Stop Recording Button"
+                                        : "Record Button", className: "s-hidden md:s-flex", ref: recordButtonRef, variant: recordState === "recording" ? "highlight" : "ghost", icon: recordState === "recording" ? SquareIcon : MicIcon, size: "xs", tooltip: recordState === "recording"
+                                        ? "Stop recording"
+                                        : recordState === "pressAndHold"
+                                            ? ""
+                                            : "Click, or Press & Hold to record", label: recordState === "recording" ? "Stop" : undefined, onClick: handleRecordClick, onMouseDown: recordState === "recording"
+                                        ? undefined
+                                        : handleRecordMouseDown, onMouseUp: recordState === "recording"
+                                        ? undefined
+                                        : handleRecordMouseUp, onMouseLeave: recordState === "recording"
+                                        ? undefined
+                                        : handleRecordMouseLeave }),
+                                React.createElement(Button, { variant: "highlight", icon: ArrowUpIcon, size: "mini", tooltip: "Send message", isRounded: true, disabled: recordState === "recording", className: "s-hidden md:s-flex" }),
+                                React.createElement(Button, { id: recordState === "recording"
+                                        ? "Stop Recording Button"
+                                        : "Record Button", className: "md:s-hidden", ref: recordButtonRef, variant: recordState === "recording" ? "highlight" : "ghost", icon: recordState === "recording" ? SquareIcon : MicIcon, size: "sm", tooltip: recordState === "recording"
+                                        ? "Stop recording"
+                                        : recordState === "pressAndHold"
+                                            ? ""
+                                            : "Click, or Press & Hold to record", label: recordState === "recording" ? "Stop" : undefined, onClick: handleRecordClick, onMouseDown: recordState === "recording"
+                                        ? undefined
+                                        : handleRecordMouseDown, onMouseUp: recordState === "recording"
+                                        ? undefined
+                                        : handleRecordMouseUp, onMouseLeave: recordState === "recording"
+                                        ? undefined
+                                        : handleRecordMouseLeave }),
+                                React.createElement(Button, { variant: "highlight", icon: ArrowUpIcon, size: "sm", tooltip: "Send message", isRounded: true, disabled: recordState === "recording", className: "md:s-hidden" })))))))));
 };
 //# sourceMappingURL=Playground.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Playground.stories.js","sourceRoot":"","sources":["../../../src/stories/Playground.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,MAAM,EACN,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EACnB,KAAK,EACL,IAAI,GACL,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE9E,eAAe;IACb,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,MAAM,CAAC,IAAM,IAAI,GAAG;IAClB,OAAO,CACL,6BAAK,SAAS,EAAC,8DAA8D;QAC3E,oBAAC,IAAI,CAAC,MAAM,IAAC,SAAS,EAAC,YAAY;YACjC,oBAAC,IAAI,CAAC,QAAQ,IAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,GAAG,EAAC,IAAI;gBACnD,oBAAC,KAAK,gBAAc;gBACpB,oBAAC,YAAY;oBACX,oBAAC,mBAAmB,IAAC,OAAO;wBAC1B,oBAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,aAAa,EACnB,KAAK,EAAC,OAAO,EACb,QAAQ,QACR,SAAS,EAAC,SAAS,GACnB,CACkB;oBACtB,oBAAC,mBAAmB;wBAClB,oBAAC,gBAAgB,IAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAC,OAAO,GAAG;wBACvD,oBAAC,gBAAgB,IAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAC,MAAM,GAAG;wBACvD,oBAAC,gBAAgB,IAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAC,QAAQ,GAAG,CACpC,CACT,CACD;YAChB,oBAAC,IAAI,CAAC,QAAQ,IAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,GAAG,EAAC,IAAI;gBACnD,oBAAC,KAAK,6BAA2B;gBACjC,oBAAC,YAAY;oBACX,oBAAC,mBAAmB,IAAC,OAAO;wBAC1B,6BAAK,SAAS,EAAC,yCAAyC;;4BAEtD,oBAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,2BAAiB,EACvB,QAAQ,QACR,SAAS,EAAC,SAAS,GACnB,CACE,CACc;oBACtB,oBAAC,mBAAmB;wBAClB,oBAAC,gBAAgB;;4BAEf,oBAAC,oBAAoB,iBAAyB,CAC7B;wBACnB,oBAAC,gBAAgB;;4BAEf,oBAAC,oBAAoB,0BAA6B,CACjC,CACC,CACT,CACD,CACJ,CACV,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Playground.stories.js","sourceRoot":"","sources":["../../../src/stories/Playground.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EACL,WAAW,EACX,cAAc,EACd,QAAQ,EACR,MAAM,EACN,EAAE,EACF,OAAO,EACP,QAAQ,EACR,aAAa,EACb,SAAS,EACT,UAAU,GACX,MAAM,uBAAuB,CAAC;AAE/B,eAAe;IACb,KAAK,EAAE,uBAAuB;CAC/B,CAAC;AAEF,MAAM,CAAC,IAAM,IAAI,GAAG;IACZ,IAAA,KAAA,OAA4B,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAC;IAC5C,IAAA,KAAA,OAAgC,QAAQ,CAE5C,MAAM,CAAC,IAAA,EAFF,WAAW,QAAA,EAAE,cAAc,QAEzB,CAAC;IACJ,IAAA,KAAA,OAAsC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAApD,cAAc,QAAA,EAAE,iBAAiB,QAAmB,CAAC;IACtD,IAAA,KAAA,OAAsC,QAAQ,CAAC,CAAC,CAAC,IAAA,EAAhD,cAAc,QAAA,EAAE,iBAAiB,QAAe,CAAC;IACxD,IAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC5C,IAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACxD,IAAM,gBAAgB,GAAG,MAAM,CAAS,CAAC,CAAC,CAAC;IAE3C,SAAS,CAAC;QACR,IAAM,kBAAkB,GAAG,UAAC,KAAiB;YAC3C,IAAI,MAAM,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;gBACrE,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QACvD,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QAC5D,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,uDAAuD;IACvD,SAAS,CAAC;QACR,IAAI,QAAQ,GAA0B,IAAI,CAAC;QAE3C,IAAI,WAAW,KAAK,cAAc,IAAI,WAAW,KAAK,WAAW,EAAE,CAAC;YAClE,QAAQ,GAAG,WAAW,CAAC;gBACrB,iBAAiB,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,GAAG,CAAC,EAAR,CAAQ,CAAC,CAAC;YACxC,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC;aAAM,CAAC;YACN,mDAAmD;YACnD,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACvB,CAAC;QAED,OAAO;YACL,IAAI,QAAQ,EAAE,CAAC;gBACb,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,IAAM,WAAW,GAAG;QAClB,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,IAAM,UAAU,GAAG,UAAC,OAAe;QACjC,IAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC;QACtC,IAAM,IAAI,GAAG,OAAO,GAAG,EAAE,CAAC;QAC1B,OAAO,UAAG,IAAI,cAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAE,CAAC;IACvD,CAAC,CAAC;IAEF,IAAM,qBAAqB,GAAG;QAC5B,OAAO,CAAC,GAAG,CAAC,0BAA0B,EAAE,WAAW,CAAC,CAAC;QACrD,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACtC,IAAI,WAAW,KAAK,MAAM,EAAE,CAAC;YAC3B,cAAc,CAAC,cAAc,CAAC,CAAC;YAC/B,iBAAiB,CAAC,IAAI,CAAC,CAAC;YACxB,OAAO,CAAC,GAAG,CAAC,4CAA4C,CAAC,CAAC;QAC5D,CAAC;IACH,CAAC,CAAC;IAEF,IAAM,mBAAmB,GAAG;QAC1B,IAAM,YAAY,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,gBAAgB,CAAC,OAAO,CAAC;QAC3D,OAAO,CAAC,GAAG,CACT,wBAAwB,EACxB,WAAW,EACX,eAAe,EACf,YAAY,CACb,CAAC;QACF,IAAI,WAAW,KAAK,cAAc,EAAE,CAAC;YACnC,cAAc,CAAC,MAAM,CAAC,CAAC;YACvB,OAAO,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;YAC7C,qFAAqF;YACrF,IAAI,YAAY,GAAG,GAAG,EAAE,CAAC;gBACvB,OAAO,CAAC,GAAG,CAAC,mDAAmD,CAAC,CAAC;gBACjE,+CAA+C;YACjD,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,GAAG,CAAC,iDAAiD,CAAC,CAAC;gBAC/D,iBAAiB,CAAC,KAAK,CAAC,CAAC;gBACzB,6CAA6C;gBAC7C,OAAO,CAAC,GAAG,CAAC,qCAAqC,CAAC,CAAC;gBACnD,cAAc,CAAC,WAAW,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,IAAM,iBAAiB,GAAG;QACxB,OAAO,CAAC,GAAG,CACT,sBAAsB,EACtB,WAAW,EACX,iBAAiB,EACjB,cAAc,CACf,CAAC;QAEF,wBAAwB;QACxB,IAAI,WAAW,KAAK,WAAW,EAAE,CAAC;YAChC,OAAO,CAAC,GAAG,CAAC,kCAAkC,CAAC,CAAC;YAChD,cAAc,CAAC,MAAM,CAAC,CAAC;YACvB,OAAO;QACT,CAAC;QAED,8DAA8D;QAC9D,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,IAAI,WAAW,KAAK,MAAM,EAAE,CAAC;gBAC3B,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;gBACpC,cAAc,CAAC,WAAW,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,GAAG,CAAC,qCAAqC,CAAC,CAAC;YACnD,0CAA0C;YAC1C,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,CAAC;IAEF,IAAM,sBAAsB,GAAG;QAC7B,IAAI,WAAW,KAAK,cAAc,EAAE,CAAC;YACnC,cAAc,CAAC,MAAM,CAAC,CAAC;YACvB,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,yGAAyG;QACtH,6BAAK,SAAS,EAAC,gDAAgD;YAC7D,oBAAC,aAAa,IACZ,kBAAkB,EAAC,UAAU,EAC7B,SAAS,EAAC,UAAU,EACpB,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;gBAEpC,6BACE,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,EAAE,CACX,uCAAuC,EACvC,8EAA8E,EAC9E,SAAS;wBACP,CAAC,CAAC,wEAAwE;wBAC1E,CAAC,CAAC,EAAE,CACP;oBAED,6BAAK,SAAS,EAAC,4BAA4B;wBACzC,6BAAK,SAAS,EAAC,yBAAyB,qBAAqB;wBAC7D,6BAAK,SAAS,EAAC,+BAA+B;4BAC5C,oBAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,QAAQ,EACd,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,mBAAmB,EAC3B,SAAS,EAAC,aAAa,GACvB;4BACF,6BAAK,SAAS,EAAC,4BAA4B;gCACzC,oBAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAE,cAAc,EACpB,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,mBAAmB,GAC3B;gCACF,oBAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAE,QAAQ,EACd,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,mBAAmB,GAC3B;gCACF,oBAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,kBAAkB,GAC1B,CACE;4BACN,6BAAK,SAAS,EAAC,QAAQ,GAAG;4BAC1B,6BAAK,SAAS,EAAC,0CAA0C;gCACvD,6BACE,EAAE,EAAC,WAAW,EACd,SAAS,EAAE,EAAE,CACX,oHAAoH,EACpH,WAAW,KAAK,cAAc;wCAC5B,WAAW,KAAK,WAAW;wCAC3B,CAAC,CAAC,sBAAsB;wCACxB,CAAC,CAAC,mBAAmB,CACxB;oCAED,6BAAK,SAAS,EAAC,0BAA0B,IACtC,UAAU,CAAC,cAAc,CAAC,CACvB;oCACN,6BAAK,SAAS,EAAC,uCAAuC;wCACpD,6BAAK,SAAS,EAAC,kEAAkE,GAAG;wCACpF,6BAAK,SAAS,EAAC,kEAAkE,GAAG;wCACpF,6BAAK,SAAS,EAAC,kEAAkE,GAAG;wCACpF,6BAAK,SAAS,EAAC,kEAAkE,GAAG;wCACpF,6BAAK,SAAS,EAAC,kEAAkE,GAAG;wCACpF,6BAAK,SAAS,EAAC,kEAAkE,GAAG;wCACpF,6BAAK,SAAS,EAAC,iEAAiE,GAAG;wCACnF,6BAAK,SAAS,EAAC,kEAAkE,GAAG;wCACpF,6BAAK,SAAS,EAAC,kEAAkE,GAAG;wCACpF,6BAAK,SAAS,EAAC,kEAAkE,GAAG;wCACpF,6BAAK,SAAS,EAAC,kEAAkE,GAAG;wCACpF,6BAAK,SAAS,EAAC,kEAAkE,GAAG,CAChF,CACF;gCAEN,oBAAC,MAAM,IACL,EAAE,EACA,WAAW,KAAK,WAAW;wCACzB,CAAC,CAAC,uBAAuB;wCACzB,CAAC,CAAC,eAAe,EAErB,SAAS,EAAC,oBAAoB,EAC9B,GAAG,EAAE,eAAe,EACpB,OAAO,EACL,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,EAErD,IAAI,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,EACxD,IAAI,EAAC,IAAI,EACT,OAAO,EACL,WAAW,KAAK,WAAW;wCACzB,CAAC,CAAC,gBAAgB;wCAClB,CAAC,CAAC,WAAW,KAAK,cAAc;4CAC9B,CAAC,CAAC,EAAE;4CACJ,CAAC,CAAC,kCAAkC,EAE1C,KAAK,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACvD,OAAO,EAAE,iBAAiB,EAC1B,WAAW,EACT,WAAW,KAAK,WAAW;wCACzB,CAAC,CAAC,SAAS;wCACX,CAAC,CAAC,qBAAqB,EAE3B,SAAS,EACP,WAAW,KAAK,WAAW;wCACzB,CAAC,CAAC,SAAS;wCACX,CAAC,CAAC,mBAAmB,EAEzB,YAAY,EACV,WAAW,KAAK,WAAW;wCACzB,CAAC,CAAC,SAAS;wCACX,CAAC,CAAC,sBAAsB,GAE5B;gCACF,oBAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,WAAW,EACjB,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,cAAc,EACtB,SAAS,QACT,QAAQ,EAAE,WAAW,KAAK,WAAW,EACrC,SAAS,EAAC,oBAAoB,GAC9B;gCAEF,oBAAC,MAAM,IACL,EAAE,EACA,WAAW,KAAK,WAAW;wCACzB,CAAC,CAAC,uBAAuB;wCACzB,CAAC,CAAC,eAAe,EAErB,SAAS,EAAC,aAAa,EACvB,GAAG,EAAE,eAAe,EACpB,OAAO,EACL,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,EAErD,IAAI,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,EACxD,IAAI,EAAC,IAAI,EACT,OAAO,EACL,WAAW,KAAK,WAAW;wCACzB,CAAC,CAAC,gBAAgB;wCAClB,CAAC,CAAC,WAAW,KAAK,cAAc;4CAC9B,CAAC,CAAC,EAAE;4CACJ,CAAC,CAAC,kCAAkC,EAE1C,KAAK,EAAE,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACvD,OAAO,EAAE,iBAAiB,EAC1B,WAAW,EACT,WAAW,KAAK,WAAW;wCACzB,CAAC,CAAC,SAAS;wCACX,CAAC,CAAC,qBAAqB,EAE3B,SAAS,EACP,WAAW,KAAK,WAAW;wCACzB,CAAC,CAAC,SAAS;wCACX,CAAC,CAAC,mBAAmB,EAEzB,YAAY,EACV,WAAW,KAAK,WAAW;wCACzB,CAAC,CAAC,SAAS;wCACX,CAAC,CAAC,sBAAsB,GAE5B;gCACF,oBAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,WAAW,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,cAAc,EACtB,SAAS,QACT,QAAQ,EAAE,WAAW,KAAK,WAAW,EACrC,SAAS,EAAC,aAAa,GACvB,CACE,CACF,CACF,CACF,CACQ,CACZ,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/stories/Spinner.stories.js

@@ -50,11 +50,11 @@ export var SpinnerExample = function () {
         React.createElement("div", { className: "s-heading-base s-text-foreground dark:s-text-white" }, "Size = XXL"),
         React.createElement("div", { className: "s-flex s-gap-4" },
             React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "color", size: "xxl" })),
+                React.createElement(Spinner, { variant: "color", size: "2xl" })),
             React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "mono", size: "xxl" })),
+                React.createElement(Spinner, { variant: "mono", size: "2xl" })),
             React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "rose300", size: "xxl" })))));
+                React.createElement(Spinner, { variant: "rose300", size: "2xl" })))));
 };
 export var BasicSpinner = {
     args: {

package/dist/esm/stories/ToolCard.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCard.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAI/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAG/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,yBAsCpB,CAAC"}
+{"version":3,"file":"ToolCard.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAI/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAG/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,yBAoDpB,CAAC"}

package/dist/esm/stories/ToolCard.stories.js

@@ -7,10 +7,18 @@ var meta = {
     component: ToolCard,
 };
 export default meta;
-export var Examples = function () { return (React.createElement("div", { className: "s-grid s-grid-cols-2 s-gap-3" },
-    React.createElement(ToolCard, { icon: BookOpenIcon, label: "Image Generation", description: "Agent can generate images (GPT Image 1).", isSelected: false, canAdd: true, onClick: function () { return console.log("Add Image Generation"); } }),
-    React.createElement(ToolCard, { icon: CommandLineIcon, label: "Reasoning", description: React.createElement(React.Fragment, null,
-            "Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks.",
-            " ",
-            React.createElement(Hoverable, { href: "https://example.com/help", target: "_blank", rel: "noopener noreferrer", variant: "primary" }, "the docs")), isSelected: true, canAdd: false }))); };
+export var Examples = function () { return (React.createElement("div", { className: "s-flex s-gap-3" },
+    React.createElement("div", { className: "s-w-80" },
+        React.createElement(ToolCard, { icon: BookOpenIcon, cardContainerClassName: "s-h-36", label: "Image Generation", description: "Agent can generate images (GPT Image 1).", isSelected: true, canAdd: true, onClick: function () { return console.log("Add Image Generation"); }, toolInfo: {
+                label: "Click here",
+                onClick: function () { return console.log("Click here"); },
+            } })),
+    React.createElement("div", { className: "s-w-80" },
+        React.createElement(ToolCard, { cardContainerClassName: "s-h-36", icon: CommandLineIcon, label: "Reasoning", description: React.createElement(React.Fragment, null,
+                "Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks.",
+                " ",
+                React.createElement(Hoverable, { href: "https://example.com/help", target: "_blank", rel: "noopener noreferrer", variant: "primary" }, "the docs")), isSelected: true, canAdd: false, toolInfo: {
+                label: "Click here",
+                onClick: function () { return console.log("Click here"); },
+            } })))); };
 //# sourceMappingURL=ToolCard.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolCard.stories.js","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEnE,IAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,6BAAK,SAAS,EAAC,8BAA8B;IAE3C,oBAAC,QAAQ,IACP,IAAI,EAAE,YAAY,EAClB,KAAK,EAAC,kBAAkB,EACxB,WAAW,EAAC,0CAA0C,EACtD,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC,EAAnC,CAAmC,GAClD;IAGF,oBAAC,QAAQ,IACP,IAAI,EAAE,eAAe,EACrB,KAAK,EAAC,WAAW,EACjB,WAAW,EACT;;YAMyD,GAAG;YAC1D,oBAAC,SAAS,IACR,IAAI,EAAC,0BAA0B,EAC/B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,OAAO,EAAC,SAAS,eAGP,CACX,EAEL,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,KAAK,GACb,CACE,CACP,EAtC6B,CAsC7B,CAAC"}
+{"version":3,"file":"ToolCard.stories.js","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEnE,IAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,6BAAK,SAAS,EAAC,gBAAgB;IAE7B,6BAAK,SAAS,EAAC,QAAQ;QACrB,oBAAC,QAAQ,IACP,IAAI,EAAE,YAAY,EAClB,sBAAsB,EAAC,QAAQ,EAC/B,KAAK,EAAC,kBAAkB,EACxB,WAAW,EAAC,0CAA0C,EACtD,UAAU,QACV,MAAM,QACN,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC,EAAnC,CAAmC,EAClD,QAAQ,EAAE;gBACR,KAAK,EAAE,YAAY;gBACnB,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAzB,CAAyB;aACzC,GACD,CACE;IAGN,6BAAK,SAAS,EAAC,QAAQ;QACrB,oBAAC,QAAQ,IACP,sBAAsB,EAAC,QAAQ,EAC/B,IAAI,EAAE,eAAe,EACrB,KAAK,EAAC,WAAW,EACjB,WAAW,EACT;;gBAMmE,GAAG;gBACpE,oBAAC,SAAS,IACR,IAAI,EAAC,0BAA0B,EAC/B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,OAAO,EAAC,SAAS,eAGP,CACX,EAEL,UAAU,QACV,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE;gBACR,KAAK,EAAE,YAAY;gBACnB,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAzB,CAAyB;aACzC,GACD,CACE,CACF,CACP,EApD6B,CAoD7B,CAAC"}

package/dist/sparkle.css

@@ -1407,6 +1407,10 @@ select {
   height: 100vh;
 }
 
+.s-h-\[12\%\] {
+  height: 12%;
+}
+
 .s-h-\[120px\] {
   height: 120px;
 }
@@ -1415,6 +1419,10 @@ select {
   height: 125px;
 }
 
+.s-h-\[18\%\] {
+  height: 18%;
+}
+
 .s-h-\[1px\] {
   height: 1px;
 }
@@ -1423,10 +1431,22 @@ select {
   height: 200px;
 }
 
+.s-h-\[22\%\] {
+  height: 22%;
+}
+
 .s-h-\[30\%\] {
   height: 30%;
 }
 
+.s-h-\[33\%\] {
+  height: 33%;
+}
+
+.s-h-\[34\%\] {
+  height: 34%;
+}
+
 .s-h-\[340px\] {
   height: 340px;
 }
@@ -1443,14 +1463,38 @@ select {
   height: 45%;
 }
 
+.s-h-\[46\%\] {
+  height: 46%;
+}
+
+.s-h-\[56\%\] {
+  height: 56%;
+}
+
+.s-h-\[6\%\] {
+  height: 6%;
+}
+
 .s-h-\[600px\] {
   height: 600px;
 }
 
+.s-h-\[64\%\] {
+  height: 64%;
+}
+
 .s-h-\[700px\] {
   height: 700px;
 }
 
+.s-h-\[76\%\] {
+  height: 76%;
+}
+
+.s-h-\[98\%\] {
+  height: 98%;
+}
+
 .s-h-fit {
   height: -moz-fit-content;
   height: fit-content;
@@ -1484,6 +1528,10 @@ select {
   min-height: 0px;
 }
 
+.s-min-h-1 {
+  min-height: 0.25rem;
+}
+
 .s-min-h-5 {
   min-height: 1.25rem;
 }
@@ -1798,6 +1846,10 @@ select {
   max-width: 80vh;
 }
 
+.s-max-w-\[900px\] {
+  max-width: 900px;
+}
+
 .s-max-w-full {
   max-width: 100%;
 }
@@ -2768,6 +2820,10 @@ select {
   border-color: rgb(248 166 180 / var(--tw-border-opacity));
 }
 
+.s-border-warning\/20 {
+  border-color: rgb(225 67 34 / 0.2);
+}
+
 .s-border-white\/30 {
   border-color: rgb(255 255 255 / 0.3);
 }
@@ -3293,6 +3349,11 @@ select {
   background-color: rgb(247 247 247 / var(--tw-bg-opacity));
 }
 
+.s-bg-muted-foreground {
+  --tw-bg-opacity: 1;
+  background-color: rgb(84 93 108 / var(--tw-bg-opacity));
+}
+
 .s-bg-muted-foreground\/40 {
   background-color: rgb(84 93 108 / 0.4);
 }
@@ -8794,12 +8855,51 @@ select {
   .sm\:s-gap-3 {
     gap: 0.75rem;
   }
+
+  .sm\:s-p-0 {
+    padding: 0px;
+  }
 }
 
 @media (min-width: 768px) {
+  .md\:s-flex {
+    display: flex;
+  }
+
+  .md\:s-hidden {
+    display: none;
+  }
+
   .md\:s-min-w-\[450px\] {
     min-width: 450px;
   }
+
+  .md\:s-gap-1 {
+    gap: 0.25rem;
+  }
+
+  .md\:s-rounded-3xl {
+    border-radius: 1.5rem;
+  }
+
+  .md\:s-p-6 {
+    padding: 1.5rem;
+  }
+
+  .md\:s-ring-2 {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  }
+
+  .md\:s-ring-highlight-300 {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(122 198 255 / var(--tw-ring-opacity));
+  }
+
+  .md\:s-ring-offset-2 {
+    --tw-ring-offset-width: 2px;
+  }
 }
 
 @media (min-width: 1024px) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.617-rc-1",
+  "version": "0.2.618-rc-1",
   "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",

package/src/components/Avatar.tsx

@@ -6,7 +6,7 @@ import { UserIcon } from "@sparkle/icons/app";
 import { getEmojiAndBackgroundFromUrl } from "@sparkle/lib/avatar/utils";
 import { cn } from "@sparkle/lib/utils";
 
-const AVATAR_SIZES = ["xs", "sm", "md", "lg", "xl", "xxl", "auto"] as const;
+const AVATAR_SIZES = ["xs", "sm", "md", "lg", "xl", "2xl", "auto"] as const;
 type AvatarSizeType = (typeof AVATAR_SIZES)[number];
 
 const AVATAR_VARIANTS = ["default", "clickable", "disabled"] as const;
@@ -22,7 +22,7 @@ const avatarVariants = cva(
         md: "s-h-10 s-w-10",
         lg: "s-h-16 s-w-16",
         xl: "s-h-20 s-w-20",
-        xxl: "s-h-36 s-w-36",
+        "2xl": "s-h-36 s-w-36",
         auto: "s-w-full s-relative",
       },
       variant: {
@@ -64,7 +64,7 @@ const avatarVariants = cva(
       },
       {
         rounded: false,
-        size: "xxl",
+        size: "2xl",
         className: "s-rounded-[38px]",
       },
       {
@@ -89,7 +89,7 @@ const textVariants = cva("s-select-none s-font-semibold", {
       md: "s-text-base",
       lg: "s-text-3xl",
       xl: "s-text-5xl",
-      xxl: "s-text-7xl",
+      "2xl": "s-text-7xl",
       auto: "s-text-xl",
     },
   },

package/src/components/Button.tsx

@@ -100,16 +100,25 @@ const buttonVariants = cva(
         ),
       },
       size: {
-        xmini: "s-h-6 s-w-6 s-rounded-lg s-label-xs s-gap-1 s-shrink-0",
-        mini: "s-h-7 s-w-7 s-rounded-lg s-label-xs s-gap-1.5 s-shrink-0",
-        xs: "s-h-7 s-px-2.5 s-rounded-lg s-label-xs s-gap-1.5 s-shrink-0",
-        sm: "s-h-9 s-px-3 s-rounded-xl s-label-sm s-gap-2 s-shrink-0",
-        md: "s-h-12 s-px-4 s-py-2 s-rounded-2xl s-label-base s-gap-2.5 s-shrink-0",
+        xmini: "s-h-6 s-w-6 s-label-xs s-gap-1 s-shrink-0",
+        mini: "s-h-7 s-w-7 s-label-xs s-gap-1.5 s-shrink-0",
+        xs: "s-h-7 s-px-2.5 s-label-xs s-gap-1.5 s-shrink-0",
+        sm: "s-h-9 s-px-3 s-label-sm s-gap-2 s-shrink-0",
+        md: "s-h-12 s-px-4 s-py-2 s-label-base s-gap-2.5 s-shrink-0",
+      },
+      rounded: {
+        xmini: "s-rounded-lg",
+        mini: "s-rounded-lg",
+        xs: "s-rounded-lg",
+        sm: "s-rounded-xl",
+        md: "s-rounded-2xl",
+        full: "s-rounded-full",
       },
     },
     defaultVariants: {
       variant: "primary",
       size: "sm",
+      rounded: "sm",
     },
   }
 );
@@ -153,14 +162,30 @@ export interface MetaButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  isRounded?: boolean;
 }
 
 const MetaButton = React.forwardRef<HTMLButtonElement, MetaButtonProps>(
-  ({ className, asChild = false, variant, size, children, ...props }, ref) => {
+  (
+    {
+      className,
+      asChild = false,
+      variant,
+      size,
+      isRounded,
+      children,
+      ...props
+    },
+    ref
+  ) => {
     const Comp = asChild ? Slot : "button";
+
+    // Determine rounded variant based on isRounded prop
+    const rounded = isRounded ? "full" : size;
+
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(buttonVariants({ variant, size, rounded, className }))}
         ref={ref}
         {...props}
       >
@@ -199,6 +224,7 @@ type CommonButtonProps = Omit<MetaButtonProps, "children"> &
     tooltip?: string;
     isCounter?: boolean;
     counterValue?: string;
+    isRounded?: boolean;
   };
 
 export type MiniButtonProps = CommonButtonProps & {
@@ -230,6 +256,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       isCounter = false,
       counterValue,
       size = "sm",
+      isRounded = false,
       href,
       target,
       rel,
@@ -338,6 +365,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         size={size}
         variant={variant}
+        isRounded={isRounded}
         disabled={isLoading || props.disabled}
         className={cn(
           (isPulsing || isPulsingBriefly) && "s-animate-pulse",