@dust-tt/sparkle 0.3.22 → 0.3.23

package/dist/esm/stories/ButtonsSwitch.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from "@storybook/react";
+import React from "react";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../components/ButtonsSwitch").ButtonsSwitchListProps & React.RefAttributes<HTMLDivElement>>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Controlled: Story;
+//# sourceMappingURL=ButtonsSwitch.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonsSwitch.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ButtonsSwitch.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,IAAI;;;;CAIgC,CAAC;AAE3C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC"}

package/dist/esm/stories/ButtonsSwitch.stories.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { ButtonsSwitch, ButtonsSwitchList } from "../index_with_tw_base";
+var meta = {
+    title: "Components/ButtonsSwitch",
+    component: ButtonsSwitchList,
+    tags: ["autodocs"],
+};
+export default meta;
+export var Default = {
+    render: function () { return (React.createElement("div", { className: "s-w-[360px] s-p-4" },
+        React.createElement(ButtonsSwitchList, { defaultValue: "time", className: "s-w-fit" },
+            React.createElement(ButtonsSwitch, { value: "time", label: "Time range" }),
+            React.createElement(ButtonsSwitch, { value: "version", label: "Version" })))); },
+};
+export var Controlled = {
+    render: function () { return (React.createElement(ButtonsSwitchList, { defaultValue: "time" },
+        React.createElement(ButtonsSwitch, { value: "time", label: "Time range" }),
+        React.createElement(ButtonsSwitch, { value: "version", label: "Version" }),
+        React.createElement(ButtonsSwitch, { value: "other", label: "Other" }))); },
+};
+//# sourceMappingURL=ButtonsSwitch.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonsSwitch.stories.js","sourceRoot":"","sources":["../../../src/stories/ButtonsSwitch.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAEzE,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,iBAAiB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;CACsB,CAAC;AAE3C,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,IAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,cAAM,OAAA,CACZ,6BAAK,SAAS,EAAC,mBAAmB;QAChC,oBAAC,iBAAiB,IAAC,YAAY,EAAC,MAAM,EAAC,SAAS,EAAC,SAAS;YACxD,oBAAC,aAAa,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG;YACjD,oBAAC,aAAa,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,GAAG,CAC/B,CAChB,CACP,EAPa,CAOb;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,cAAM,OAAA,CACZ,oBAAC,iBAAiB,IAAC,YAAY,EAAC,MAAM;QACpC,oBAAC,aAAa,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG;QACjD,oBAAC,aAAa,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,GAAG;QACjD,oBAAC,aAAa,IAAC,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAG,CAC3B,CACrB,EANa,CAMb;CACF,CAAC"}

package/dist/esm/stories/SplitButton.stories.d.ts

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { SplitButton } from "../index_with_tw_base";
-declare const meta: Meta<React.ComponentProps<typeof SplitButton>>;
+import { FlexSplitButton } from "../index_with_tw_base";
+declare const meta: Meta<React.ComponentProps<typeof FlexSplitButton>>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const ExampleButton: Story;
 export declare const FlexSplitButtonVariants: Story;
+export declare const FlexSplitButtonLoading: Story;
 //# sourceMappingURL=SplitButton.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/SplitButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAML,WAAW,EACZ,MAAM,uBAAuB,CAAC;AAE/B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAexD,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,aAAa,EAAE,KAsC3B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAqCrC,CAAC"}
+{"version":3,"file":"SplitButton.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/SplitButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAU,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEhE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,CAG5D,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,uBAAuB,EAAE,KAqCrC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAyCpC,CAAC"}

package/dist/esm/stories/SplitButton.stories.js

@@ -1,63 +1,11 @@
 import React from "react";
-import { BUTTON_SIZES, BUTTON_VARIANTS } from "../components/Button";
 import { ArrowUpIcon, ChevronDownIcon } from "../icons/app";
-import { Button, CameraIcon, FlexSplitButton, PlusIcon, RobotIcon, SplitButton, } from "../index_with_tw_base";
+import { Button, FlexSplitButton } from "../index_with_tw_base";
 var meta = {
     title: "Primitives/SplitButton",
-    component: SplitButton,
-    argTypes: {
-        variant: {
-            description: "The visual style variant of the button",
-            options: BUTTON_VARIANTS,
-            control: { type: "select" },
-        },
-        size: {
-            description: "The size of the button",
-            options: BUTTON_SIZES,
-            control: { type: "select" },
-        },
-    },
+    component: FlexSplitButton,
 };
 export default meta;
-export var ExampleButton = {
-    args: {
-        variant: "outline",
-        size: "md",
-        defaultAction: {
-            label: "First",
-            icon: PlusIcon,
-            tooltip: "First tooltip",
-        },
-        actions: [
-            {
-                label: "First",
-                icon: PlusIcon,
-                tooltip: "First tooltip",
-            },
-            {
-                label: "Second",
-                icon: RobotIcon,
-                tooltip: "Disabled tooltip",
-                disabled: true,
-            },
-            {
-                label: "Photo",
-                icon: CameraIcon,
-                tooltip: "Disabled photo",
-                disabled: true,
-            },
-            {
-                label: "Third",
-                tooltip: "Third tooltip",
-            },
-            {
-                label: "Fourth",
-                tooltip: "Loading tooltip",
-                isLoading: true,
-            },
-        ],
-    },
-};
 export var FlexSplitButtonVariants = {
     render: function () { return (React.createElement("div", { className: "s-flex s-gap-3" },
         React.createElement(FlexSplitButton, { label: "Send", variant: "highlight", icon: ArrowUpIcon, splitAction: React.createElement(Button, { size: "mini", variant: "highlight", icon: ChevronDownIcon }) }),
@@ -65,4 +13,11 @@ export var FlexSplitButtonVariants = {
         React.createElement(FlexSplitButton, { label: "Send", variant: "outline", icon: ArrowUpIcon, splitAction: React.createElement(Button, { size: "mini", variant: "outline", icon: ChevronDownIcon }) }),
         React.createElement(FlexSplitButton, { label: "Send", variant: "ghost", icon: ArrowUpIcon, splitAction: React.createElement(Button, { size: "mini", variant: "ghost", icon: ChevronDownIcon }) }))); },
 };
+export var FlexSplitButtonLoading = {
+    render: function () { return (React.createElement("div", { className: "s-flex s-gap-3" },
+        React.createElement(FlexSplitButton, { label: "Sending", variant: "highlight", icon: ArrowUpIcon, isLoading: true, splitAction: React.createElement(Button, { size: "mini", variant: "highlight", icon: ChevronDownIcon }) }),
+        React.createElement(FlexSplitButton, { label: "Sending", variant: "primary", icon: ArrowUpIcon, isLoading: true, splitAction: React.createElement(Button, { size: "mini", variant: "primary", icon: ChevronDownIcon }) }),
+        React.createElement(FlexSplitButton, { label: "Sending", variant: "outline", icon: ArrowUpIcon, isLoading: true, splitAction: React.createElement(Button, { size: "mini", variant: "outline", icon: ChevronDownIcon }) }),
+        React.createElement(FlexSplitButton, { label: "Sending", variant: "ghost", icon: ArrowUpIcon, isLoading: true, splitAction: React.createElement(Button, { size: "mini", variant: "ghost", icon: ChevronDownIcon }) }))); },
+};
 //# sourceMappingURL=SplitButton.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.stories.js","sourceRoot":"","sources":["../../../src/stories/SplitButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAElE,OAAO,EACL,MAAM,EACN,UAAU,EACV,eAAe,EACf,QAAQ,EACR,SAAS,EACT,WAAW,GACZ,MAAM,uBAAuB,CAAC;AAE/B,IAAM,IAAI,GAAmD;IAC3D,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE,eAAe;YACxB,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,wBAAwB;YACrC,OAAO,EAAE,YAAY;YACrB,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,IAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,IAAI;QACV,aAAa,EAAE;YACb,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,eAAe;SACzB;QACD,OAAO,EAAE;YACP;gBACE,KAAK,EAAE,OAAO;gBACd,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,eAAe;aACzB;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,IAAI,EAAE,SAAS;gBACf,OAAO,EAAE,kBAAkB;gBAC3B,QAAQ,EAAE,IAAI;aACf;YACD;gBACE,KAAK,EAAE,OAAO;gBACd,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,gBAAgB;gBACzB,QAAQ,EAAE,IAAI;aACf;YACD;gBACE,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,eAAe;aACzB;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,OAAO,EAAE,iBAAiB;gBAC1B,SAAS,EAAE,IAAI;aAChB;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,uBAAuB,GAAU;IAC5C,MAAM,EAAE,cAAM,OAAA,CACZ,6BAAK,SAAS,EAAC,gBAAgB;QAC7B,oBAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAE,eAAe,GAAI,GAEnE;QACF,oBAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAE,eAAe,GAAI,GAEjE;QACF,oBAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAE,eAAe,GAAI,GAEjE;QACF,oBAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,OAAO,EAAC,OAAO,EACf,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAE,eAAe,GAAI,GAE/D,CACE,CACP,EAnCa,CAmCb;CACF,CAAC"}
+{"version":3,"file":"SplitButton.stories.js","sourceRoot":"","sources":["../../../src/stories/SplitButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAElE,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEhE,IAAM,IAAI,GAAuD;IAC/D,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,eAAe;CAC3B,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,IAAM,uBAAuB,GAAU;IAC5C,MAAM,EAAE,cAAM,OAAA,CACZ,6BAAK,SAAS,EAAC,gBAAgB;QAC7B,oBAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAE,eAAe,GAAI,GAEnE;QACF,oBAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAE,eAAe,GAAI,GAEjE;QACF,oBAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAE,eAAe,GAAI,GAEjE;QACF,oBAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,OAAO,EAAC,OAAO,EACf,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAE,eAAe,GAAI,GAE/D,CACE,CACP,EAnCa,CAmCb;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,sBAAsB,GAAU;IAC3C,MAAM,EAAE,cAAM,OAAA,CACZ,6BAAK,SAAS,EAAC,gBAAgB;QAC7B,oBAAC,eAAe,IACd,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,WAAW,EACjB,SAAS,QACT,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAE,eAAe,GAAI,GAEnE;QACF,oBAAC,eAAe,IACd,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,WAAW,EACjB,SAAS,QACT,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAE,eAAe,GAAI,GAEjE;QACF,oBAAC,eAAe,IACd,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,WAAW,EACjB,SAAS,QACT,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAE,eAAe,GAAI,GAEjE;QACF,oBAAC,eAAe,IACd,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,OAAO,EACf,IAAI,EAAE,WAAW,EACjB,SAAS,QACT,WAAW,EACT,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAE,eAAe,GAAI,GAE/D,CACE,CACP,EAvCa,CAuCb;CACF,CAAC"}

package/dist/sparkle.css

@@ -1730,6 +1730,10 @@ select {
   width: 350px;
 }
 
+.s-w-\[360px\] {
+  width: 360px;
+}
+
 .s-w-\[380px\] {
   width: 380px;
 }
@@ -2495,16 +2499,6 @@ select {
   border-radius: 0.75rem;
 }
 
-.s-rounded-l-none {
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
-
-.s-rounded-r-none {
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-}
-
 .s-rounded-t-2xl {
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
@@ -2526,18 +2520,10 @@ select {
   border-left-width: 1px;
 }
 
-.s-border-l-0 {
-  border-left-width: 0px;
-}
-
 .s-border-r {
   border-right-width: 1px;
 }
 
-.s-border-r-0 {
-  border-right-width: 0px;
-}
-
 .s-border-t {
   border-top-width: 1px;
 }
@@ -6036,6 +6022,36 @@ select {
   opacity: 0.5;
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .disabled\:hover\:s-border-border\/0:hover:disabled {
+    border-color: rgb(238 238 239 / 0);
+  }
+
+  .disabled\:hover\:s-border-primary-100:hover:disabled {
+    --tw-border-opacity: 1;
+    border-color: rgb(238 238 239 / var(--tw-border-opacity));
+  }
+
+  .disabled\:hover\:s-bg-background:hover:disabled {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }
+
+  .disabled\:hover\:s-bg-transparent:hover:disabled {
+    background-color: transparent;
+  }
+
+  .disabled\:hover\:s-text-primary-400:hover:disabled {
+    --tw-text-opacity: 1;
+    color: rgb(150 156 165 / var(--tw-text-opacity));
+  }
+
+  .disabled\:hover\:s-text-primary-muted:hover:disabled {
+    --tw-text-opacity: 1;
+    color: rgb(123 129 141 / var(--tw-text-opacity));
+  }
+}
+
 .s-group\/card:focus-within .group-focus-within\/card\:s-opacity-100 {
   opacity: 1;
 }
@@ -7458,6 +7474,11 @@ select {
   background-color: rgb(211 213 217 / var(--tw-bg-opacity));
 }
 
+:is(.s-dark .dark\:s-bg-primary-900) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(28 34 45 / var(--tw-bg-opacity));
+}
+
 :is(.s-dark .dark\:s-bg-primary-900-night) {
   --tw-bg-opacity: 1;
   background-color: rgb(238 238 239 / var(--tw-bg-opacity));
@@ -8768,6 +8789,34 @@ select {
 }
 
 @media (hover: hover) and (pointer: fine) {
+  :is(.s-dark .dark\:disabled\:hover\:s-border-border-night\/0:hover:disabled) {
+    border-color: rgb(42 50 65 / 0);
+  }
+
+  :is(.s-dark .dark\:disabled\:hover\:s-border-primary-100-night:hover:disabled) {
+    --tw-border-opacity: 1;
+    border-color: rgb(28 34 45 / var(--tw-border-opacity));
+  }
+
+  :is(.s-dark .dark\:disabled\:hover\:s-bg-background-night:hover:disabled) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(17 20 24 / var(--tw-bg-opacity));
+  }
+
+  :is(.s-dark .dark\:disabled\:hover\:s-bg-transparent:hover:disabled) {
+    background-color: transparent;
+  }
+
+  :is(.s-dark .dark\:disabled\:hover\:s-text-primary-400-night:hover:disabled) {
+    --tw-text-opacity: 1;
+    color: rgb(84 93 108 / var(--tw-text-opacity));
+  }
+
+  :is(.s-dark .dark\:disabled\:hover\:s-text-primary-muted-night:hover:disabled) {
+    --tw-text-opacity: 1;
+    color: rgb(123 129 141 / var(--tw-text-opacity));
+  }
+
   :is(.s-dark .s-group:hover .dark\:group-hover\:s-bg-primary-200-night\/70) {
     background-color: rgb(42 50 65 / 0.7);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.3.22",
+  "version": "0.3.23",
   "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/Button.tsx

@@ -76,7 +76,10 @@ const buttonVariants = cva(
           "hover:s-border-primary-150 dark:hover:s-border-border-night",
           "active:s-bg-primary-300 dark:active:s-bg-primary-900",
           "disabled:s-text-primary-muted dark:disabled:s-text-primary-muted-night",
-          "disabled:s-border-primary-100 dark:disabled:s-border-primary-100-night"
+          "disabled:s-border-primary-100 dark:disabled:s-border-primary-100-night",
+          "disabled:hover:s-bg-background dark:disabled:hover:s-bg-background-night",
+          "disabled:hover:s-border-primary-100 dark:disabled:hover:s-border-primary-100-night",
+          "disabled:hover:s-text-primary-muted dark:disabled:hover:s-text-primary-muted-night"
         ),
         ghost: cn(
           "s-border",
@@ -86,7 +89,10 @@ const buttonVariants = cva(
           "hover:s-text-primary-900 dark:hover:s-text-white",
           "hover:s-border-border-dark dark:hover:s-border-border-night",
           "active:s-bg-primary-300 dark:active:s-bg-primary-900",
-          "disabled:s-text-primary-400 dark:disabled:s-text-primary-400-night"
+          "disabled:s-text-primary-400 dark:disabled:s-text-primary-400-night",
+          "disabled:hover:s-bg-transparent dark:disabled:hover:s-bg-transparent",
+          "disabled:hover:s-border-border/0 dark:disabled:hover:s-border-border-night/0",
+          "disabled:hover:s-text-primary-400 dark:disabled:hover:s-text-primary-400-night"
         ),
         "ghost-secondary": cn(
           "s-border",
@@ -96,7 +102,10 @@ const buttonVariants = cva(
           "hover:s-text-primary-900 dark:hover:s-text-primary-900-night",
           "hover:s-border-border-dark dark:hover:s-border-border-night",
           "active:s-bg-primary-300 dark:active:s-bg-primary-900",
-          "disabled:s-text-primary-400 dark:disabled:s-text-primary-400-night"
+          "disabled:s-text-primary-400 dark:disabled:s-text-primary-400-night",
+          "disabled:hover:s-bg-transparent dark:disabled:hover:s-bg-transparent",
+          "disabled:hover:s-border-border/0 dark:disabled:hover:s-border-border-night/0",
+          "disabled:hover:s-text-primary-400 dark:disabled:hover:s-text-primary-400-night"
         ),
       },
       size: {

package/src/components/ButtonsSwitch.tsx

@@ -0,0 +1,165 @@
+import { cva, VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { Button } from "@sparkle/components/Button";
+import { cn } from "@sparkle/lib/utils";
+
+type ButtonSize = Extract<
+  React.ComponentProps<typeof Button>["size"],
+  "xs" | "sm" | "md"
+>;
+
+type ButtonsSwitchContextType = {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  size: ButtonSize;
+  disabled?: boolean;
+};
+
+const ButtonsSwitchContext =
+  React.createContext<ButtonsSwitchContextType | null>(null);
+
+const useButtonsSwitch = () => {
+  const ctx = React.useContext(ButtonsSwitchContext);
+  if (!ctx) {
+    throw new Error(
+      "ButtonsSwitch must be used within a ButtonsSwitchList component"
+    );
+  }
+  return ctx;
+};
+
+const listStyles = cva(
+  cn(
+    "s-inline-flex s-items-center s-gap-1",
+    "s-bg-primary-100 dark:s-bg-primary-900"
+  ),
+  {
+    variants: {
+      fullWidth: {
+        true: "s-w-full",
+        false: "",
+      },
+      size: {
+        xs: "s-rounded-lg s-p-0.5",
+        sm: "s-rounded-xl s-p-1",
+        md: "s-rounded-2xl s-p-1.5",
+      },
+    },
+    defaultVariants: {
+      fullWidth: false,
+      size: "sm",
+    },
+  }
+);
+
+export interface ButtonsSwitchListProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof listStyles> {
+  size?: ButtonSize;
+  disabled?: boolean;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}
+
+export const ButtonsSwitchList = React.forwardRef<
+  HTMLDivElement,
+  ButtonsSwitchListProps
+>(
+  (
+    {
+      className,
+      children,
+      size = "sm",
+      defaultValue,
+      onValueChange,
+      disabled,
+      fullWidth,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = React.useState<
+      string | undefined
+    >(defaultValue);
+
+    const selected = internalValue;
+
+    const handleChange = React.useCallback(
+      (next: string) => {
+        setInternalValue(next);
+        onValueChange?.(next);
+      },
+      [onValueChange]
+    );
+
+    const context: ButtonsSwitchContextType = React.useMemo(
+      () => ({ value: selected, onValueChange: handleChange, size, disabled }),
+      [selected, handleChange, size, disabled]
+    );
+
+    return (
+      <div
+        ref={ref}
+        role="tablist"
+        aria-orientation="horizontal"
+        className={cn(listStyles({ fullWidth, size }), className)}
+        {...props}
+      >
+        <ButtonsSwitchContext.Provider value={context}>
+          {children}
+        </ButtonsSwitchContext.Provider>
+      </div>
+    );
+  }
+);
+ButtonsSwitchList.displayName = "ButtonsSwitchList";
+
+interface ButtonsSwitchProps
+  extends Omit<React.ComponentProps<typeof Button>, "size" | "variant"> {
+  value: string;
+  label?: string;
+  icon?: React.ComponentProps<typeof Button>["icon"];
+}
+
+export const ButtonsSwitch = React.forwardRef<
+  HTMLButtonElement,
+  ButtonsSwitchProps
+>(({ className, value, label, icon, disabled, onClick, ...props }, ref) => {
+  const {
+    value: selected,
+    onValueChange,
+    size,
+    disabled: groupDisabled,
+  } = useButtonsSwitch();
+
+  const isActive = selected === value;
+  const isDisabled = disabled || groupDisabled;
+
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    if (isDisabled) {
+      return;
+    }
+    onValueChange?.(value);
+    onClick?.(e);
+  };
+
+  return (
+    <Button
+      ref={ref}
+      role="tab"
+      aria-selected={isActive}
+      size={size}
+      variant={isActive ? "outline" : "ghost-secondary"}
+      label={label}
+      icon={icon}
+      className={className}
+      disabled={isDisabled}
+      onClick={handleClick}
+      {...props}
+    />
+  );
+});
+ButtonsSwitch.displayName = "ButtonsSwitch";
+
+export default ButtonsSwitch;

package/src/components/Spinner.tsx

@@ -108,6 +108,8 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
     let anim;
     switch (size) {
       case "xs":
+      case "sm":
+      case "md":
         anim = animLightXS;
         break;
       case "xl":
@@ -136,6 +138,8 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
     let anim;
     switch (size) {
       case "xs":
+      case "sm":
+      case "md":
         anim = animColorXS;
         break;
       case "xl":
@@ -159,6 +163,8 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
     let anim;
     switch (size) {
       case "xs":
+      case "sm":
+      case "md":
         anim = animLightXS;
         break;
       case "xl":
@@ -182,6 +188,8 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
     let anim;
     switch (size) {
       case "xs":
+      case "sm":
+      case "md":
         anim = animDarkXS;
         break;
       case "xl":
@@ -206,6 +214,8 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
   let darkAnim;
   switch (size) {
     case "xs":
+    case "sm":
+    case "md":
       lightAnim = animLightXS;
       darkAnim = animDarkXS;
       break;