@dust-tt/sparkle 0.3.26 → 0.4.1

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

@@ -0,0 +1,63 @@
+import type { StoryObj } from "@storybook/react";
+import React from "react";
+import type { ButtonGroupVariantType } from "../components/ButtonGroup";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../components/ButtonGroup").ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    argTypes: {
+        variant: {
+            description: string;
+            control: {
+                type: "select";
+            };
+            options: ButtonGroupVariantType[];
+        };
+        size: {
+            description: string;
+            control: {
+                type: "select";
+            };
+            options: ("sm" | "xs" | "md" | "mini" | "xmini")[];
+        };
+        orientation: {
+            description: string;
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+        disabled: {
+            description: string;
+            control: "boolean";
+        };
+        removeGaps: {
+            description: string;
+            control: "boolean";
+        };
+        children: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+    args: {
+        children: React.JSX.Element;
+        variant: "outline";
+        size: "sm";
+        orientation: "horizontal";
+        disabled: false;
+        removeGaps: true;
+    };
+    render: (args: import("../components/ButtonGroup").ButtonGroupProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const WithIcons: Story;
+export declare const WithCounters: Story;
+export declare const Vertical: Story;
+export declare const Disabled: Story;
+export declare const WithGaps: Story;
+export declare const Gallery: Story;
+//# sourceMappingURL=ButtonGroup.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ButtonGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AA6B9E,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyC0B,CAAC;AAErC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KAAU,CAAC;AAEpC,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AA8BF,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}

package/dist/esm/stories/ButtonGroup.stories.js

@@ -0,0 +1,113 @@
+import { __assign } from "tslib";
+import React from "react";
+import { BUTTON_SIZES, BUTTON_VARIANTS, } from "../components/Button";
+import { Button, ButtonGroup, PlusIcon, RobotIcon, Separator, } from "../index_with_tw_base";
+var DEFAULT_CHILDREN = (React.createElement(React.Fragment, null,
+    React.createElement(Button, { label: "First" }),
+    React.createElement(Button, { label: "Second" }),
+    React.createElement(Button, { label: "Third" })));
+var DISALLOWED_GROUP_VARIANTS = [
+    "ghost",
+    "ghost-secondary",
+    "highlight",
+    "warning",
+];
+var BUTTON_GROUP_VARIANTS = BUTTON_VARIANTS.filter(function (variant) { return !DISALLOWED_GROUP_VARIANTS.includes(variant); });
+var meta = {
+    title: "Primitives/ButtonGroup",
+    component: ButtonGroup,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: {
+            description: "Variant applied to every child button",
+            control: { type: "select" },
+            options: BUTTON_GROUP_VARIANTS,
+        },
+        size: {
+            description: "Size applied to every child button",
+            control: { type: "select" },
+            options: BUTTON_SIZES.filter(function (size) { return size !== "mini"; }),
+        },
+        orientation: {
+            description: "Stack buttons horizontally or vertically",
+            control: { type: "select" },
+            options: ["horizontal", "vertical"],
+        },
+        disabled: {
+            description: "Disable all buttons in the group",
+            control: "boolean",
+        },
+        removeGaps: {
+            description: "Remove gaps and merge button borders",
+            control: "boolean",
+        },
+        children: {
+            table: { disable: true },
+        },
+    },
+    args: {
+        children: DEFAULT_CHILDREN,
+        variant: "outline",
+        size: "sm",
+        orientation: "horizontal",
+        disabled: false,
+        removeGaps: true,
+    },
+    render: function (args) { return React.createElement(ButtonGroup, __assign({}, args)); },
+};
+export default meta;
+export var Playground = {};
+export var WithIcons = {
+    render: function () { return (React.createElement(ButtonGroup, { variant: "outline", size: "sm" },
+        React.createElement(Button, { icon: PlusIcon, label: "Add" }),
+        React.createElement(Button, { icon: RobotIcon, label: "Agent" }),
+        React.createElement(Button, { label: "More" }))); },
+};
+export var WithCounters = {
+    render: function () { return (React.createElement(ButtonGroup, { variant: "outline", size: "sm" },
+        React.createElement(Button, { label: "Inbox", isCounter: true, counterValue: "5" }),
+        React.createElement(Button, { label: "Sent", isCounter: true, counterValue: "12" }),
+        React.createElement(Button, { label: "Drafts", isCounter: true, counterValue: "3" }))); },
+};
+export var Vertical = {
+    render: function () { return (React.createElement(ButtonGroup, { variant: "outline", size: "sm", orientation: "vertical" },
+        React.createElement(Button, { label: "First" }),
+        React.createElement(Button, { label: "Second" }),
+        React.createElement(Button, { label: "Third" }))); },
+};
+export var Disabled = {
+    render: function () { return (React.createElement(ButtonGroup, { variant: "outline", size: "sm", disabled: true },
+        React.createElement(Button, { label: "First" }),
+        React.createElement(Button, { label: "Second" }),
+        React.createElement(Button, { label: "Third" }))); },
+};
+export var WithGaps = {
+    render: function () { return (React.createElement(ButtonGroup, { variant: "outline", size: "sm", removeGaps: false },
+        React.createElement(Button, { label: "First" }),
+        React.createElement(Button, { label: "Second" }),
+        React.createElement(Button, { label: "Third" }))); },
+};
+var ButtonGroupByVariant = function (_a) {
+    var variant = _a.variant;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Separator, null),
+        React.createElement("h3", { className: "s-text-primary dark:s-text-primary-50" }, variant),
+        React.createElement("div", { className: "s-flex s-items-center s-gap-4" },
+            React.createElement(ButtonGroup, { variant: variant, size: "xs" },
+                React.createElement(Button, { label: "One" }),
+                React.createElement(Button, { label: "Two" }),
+                React.createElement(Button, { label: "Three" })),
+            React.createElement(ButtonGroup, { variant: variant, size: "sm" },
+                React.createElement(Button, { label: "One" }),
+                React.createElement(Button, { label: "Two" }),
+                React.createElement(Button, { label: "Three" })),
+            React.createElement(ButtonGroup, { variant: variant, size: "md" },
+                React.createElement(Button, { label: "One" }),
+                React.createElement(Button, { label: "Two" }),
+                React.createElement(Button, { label: "Three" })))));
+};
+export var Gallery = {
+    args: meta.args,
+    render: function () { return (React.createElement("div", { className: "s-flex s-flex-col s-gap-4" }, BUTTON_GROUP_VARIANTS.map(function (variant) { return (React.createElement(ButtonGroupByVariant, { key: variant, variant: variant })); }))); },
+};
+//# sourceMappingURL=ButtonGroup.stories.js.map

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

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

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;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"}
+{"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,KAiFrC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAyFpC,CAAC"}

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

@@ -11,13 +11,21 @@ export var FlexSplitButtonVariants = {
         React.createElement(FlexSplitButton, { label: "Send", variant: "highlight", icon: ArrowUpIcon, splitAction: React.createElement(Button, { size: "mini", variant: "highlight", icon: ChevronDownIcon }) }),
         React.createElement(FlexSplitButton, { label: "Send", variant: "primary", icon: ArrowUpIcon, splitAction: React.createElement(Button, { size: "mini", variant: "primary", icon: ChevronDownIcon }) }),
         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 }) }))); },
+        React.createElement(FlexSplitButton, { label: "Send", variant: "highlight-secondary", icon: ArrowUpIcon, splitAction: React.createElement(Button, { size: "mini", variant: "highlight-secondary", icon: ChevronDownIcon }) }),
+        React.createElement(FlexSplitButton, { label: "Send", variant: "warning", icon: ArrowUpIcon, splitAction: React.createElement(Button, { size: "mini", variant: "warning", icon: ChevronDownIcon }) }),
+        React.createElement(FlexSplitButton, { label: "Send", variant: "warning-secondary", icon: ArrowUpIcon, splitAction: React.createElement(Button, { size: "mini", variant: "warning-secondary", icon: ChevronDownIcon }) }),
+        React.createElement(FlexSplitButton, { label: "Send", variant: "ghost", icon: ArrowUpIcon, splitAction: React.createElement(Button, { size: "mini", variant: "ghost", icon: ChevronDownIcon }) }),
+        React.createElement(FlexSplitButton, { label: "Send", variant: "ghost-secondary", icon: ArrowUpIcon, splitAction: React.createElement(Button, { size: "mini", variant: "ghost-secondary", 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 }) }))); },
+        React.createElement(FlexSplitButton, { label: "Sending", variant: "highlight-secondary", icon: ArrowUpIcon, isLoading: true, splitAction: React.createElement(Button, { size: "mini", variant: "highlight-secondary", icon: ChevronDownIcon }) }),
+        React.createElement(FlexSplitButton, { label: "Sending", variant: "warning", icon: ArrowUpIcon, isLoading: true, splitAction: React.createElement(Button, { size: "mini", variant: "warning", icon: ChevronDownIcon }) }),
+        React.createElement(FlexSplitButton, { label: "Sending", variant: "warning-secondary", icon: ArrowUpIcon, isLoading: true, splitAction: React.createElement(Button, { size: "mini", variant: "warning-secondary", icon: ChevronDownIcon }) }),
+        React.createElement(FlexSplitButton, { label: "Sending", variant: "ghost", icon: ArrowUpIcon, isLoading: true, splitAction: React.createElement(Button, { size: "mini", variant: "ghost", icon: ChevronDownIcon }) }),
+        React.createElement(FlexSplitButton, { label: "Sending", variant: "ghost-secondary", icon: ArrowUpIcon, isLoading: true, splitAction: React.createElement(Button, { size: "mini", variant: "ghost-secondary", 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,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"}
+{"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,qBAAqB,EAC7B,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,qBAAqB,EAC7B,IAAI,EAAE,eAAe,GACrB,GAEJ;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,mBAAmB,EAC3B,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,mBAAmB,EAC3B,IAAI,EAAE,eAAe,GACrB,GAEJ;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;QACF,oBAAC,eAAe,IACd,KAAK,EAAC,MAAM,EACZ,OAAO,EAAC,iBAAiB,EACzB,IAAI,EAAE,WAAW,EACjB,WAAW,EACT,oBAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,iBAAiB,EACzB,IAAI,EAAE,eAAe,GACrB,GAEJ,CACE,CACP,EA/Ea,CA+Eb;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,qBAAqB,EAC7B,IAAI,EAAE,WAAW,EACjB,SAAS,QACT,WAAW,EACT,oBAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,qBAAqB,EAC7B,IAAI,EAAE,eAAe,GACrB,GAEJ;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,mBAAmB,EAC3B,IAAI,EAAE,WAAW,EACjB,SAAS,QACT,WAAW,EACT,oBAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,mBAAmB,EAC3B,IAAI,EAAE,eAAe,GACrB,GAEJ;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;QACF,oBAAC,eAAe,IACd,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,iBAAiB,EACzB,IAAI,EAAE,WAAW,EACjB,SAAS,QACT,WAAW,EACT,oBAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,iBAAiB,EACzB,IAAI,EAAE,eAAe,GACrB,GAEJ,CACE,CACP,EAvFa,CAuFb;CACF,CAAC"}

package/dist/sparkle.css

@@ -2439,6 +2439,10 @@ select {
   word-break: break-all;
 }
 
+.\!s-rounded-none {
+  border-radius: 0px !important;
+}
+
 .s-rounded {
   border-radius: 0.25rem;
 }
@@ -2451,16 +2455,16 @@ select {
   border-radius: 1.5rem;
 }
 
-.s-rounded-\[24px\] {
-  border-radius: 24px;
+.s-rounded-\[22px\] {
+  border-radius: 22px;
 }
 
-.s-rounded-\[28px\] {
-  border-radius: 28px;
+.s-rounded-\[24\%\] {
+  border-radius: 24%;
 }
 
-.s-rounded-\[30\%\] {
-  border-radius: 30%;
+.s-rounded-\[24px\] {
+  border-radius: 24px;
 }
 
 .s-rounded-\[30px\] {
@@ -2471,10 +2475,6 @@ select {
   border-radius: 32px;
 }
 
-.s-rounded-\[38px\] {
-  border-radius: 38px;
-}
-
 .s-rounded-\[inherit\] {
   border-radius: inherit;
 }
@@ -2499,6 +2499,26 @@ select {
   border-radius: 0.75rem;
 }
 
+.\!s-rounded-b-none {
+  border-bottom-right-radius: 0px !important;
+  border-bottom-left-radius: 0px !important;
+}
+
+.\!s-rounded-l-none {
+  border-top-left-radius: 0px !important;
+  border-bottom-left-radius: 0px !important;
+}
+
+.\!s-rounded-r-none {
+  border-top-right-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+}
+
+.\!s-rounded-t-none {
+  border-top-left-radius: 0px !important;
+  border-top-right-radius: 0px !important;
+}
+
 .s-rounded-t-2xl {
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
@@ -2516,6 +2536,10 @@ select {
   border-bottom-width: 1px;
 }
 
+.s-border-b-0 {
+  border-bottom-width: 0px;
+}
+
 .s-border-l {
   border-left-width: 1px;
 }
@@ -2524,6 +2548,10 @@ select {
   border-right-width: 1px;
 }
 
+.s-border-r-0 {
+  border-right-width: 0px;
+}
+
 .s-border-t {
   border-top-width: 1px;
 }
@@ -5679,6 +5707,11 @@ select {
     color: rgb(75 171 255 / var(--tw-text-opacity));
   }
 
+  .hover\:s-text-highlight-500:hover {
+    --tw-text-opacity: 1;
+    color: rgb(28 145 255 / var(--tw-text-opacity));
+  }
+
   .hover\:s-text-highlight-700:hover {
     --tw-text-opacity: 1;
     color: rgb(10 108 198 / var(--tw-text-opacity));
@@ -5734,6 +5767,11 @@ select {
     color: rgb(237 117 108 / var(--tw-text-opacity));
   }
 
+  .hover\:s-text-warning-500:hover {
+    --tw-text-opacity: 1;
+    color: rgb(225 67 34 / var(--tw-text-opacity));
+  }
+
   .hover\:s-text-warning-700:hover {
     --tw-text-opacity: 1;
     color: rgb(178 46 19 / var(--tw-text-opacity));
@@ -8432,6 +8470,11 @@ select {
     background-color: rgb(8 80 146 / var(--tw-bg-opacity));
   }
 
+  :is(.s-dark .dark\:hover\:s-bg-highlight-900:hover) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(7 53 95 / var(--tw-bg-opacity));
+  }
+
   :is(.s-dark .dark\:hover\:s-bg-muted-background-night:hover) {
     --tw-bg-opacity: 1;
     background-color: rgb(28 34 45 / var(--tw-bg-opacity));
@@ -8479,6 +8522,11 @@ select {
     background-color: rgb(34 10 4 / var(--tw-bg-opacity));
   }
 
+  :is(.s-dark .dark\:hover\:s-bg-warning-900:hover) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(87 22 9 / var(--tw-bg-opacity));
+  }
+
   :is(.s-dark .hover\:dark\:s-bg-highlight-200-night):hover {
     --tw-bg-opacity: 1;
     background-color: rgb(8 80 146 / var(--tw-bg-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.3.26",
+  "version": "0.4.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

@@ -48,37 +48,37 @@ const avatarVariants = cva(
       {
         rounded: false,
         size: "xs",
-        className: "s-rounded-lg",
+        className: "s-rounded-md",
       },
       {
         rounded: false,
         size: "sm",
-        className: "s-rounded-xl",
+        className: "s-rounded-lg",
       },
       {
         rounded: false,
         size: "md",
-        className: "s-rounded-2xl",
+        className: "s-rounded-xl",
       },
       {
         rounded: false,
         size: "lg",
-        className: "s-rounded-3xl",
+        className: "s-rounded-2xl",
       },
       {
         rounded: false,
         size: "xl",
-        className: "s-rounded-[28px]",
+        className: "s-rounded-[22px]",
       },
       {
         rounded: false,
         size: "2xl",
-        className: "s-rounded-[38px]",
+        className: "s-rounded-[32px]",
       },
       {
         rounded: false,
         size: "auto",
-        className: "s-rounded-[30%]",
+        className: "s-rounded-[24%]",
       },
     ],
     defaultVariants: {

package/src/components/Button.tsx

@@ -24,7 +24,9 @@ const PULSE_ANIMATION_DURATION = 1;
 export const BUTTON_VARIANTS = [
   "primary",
   "highlight",
+  "highlight-secondary",
   "warning",
+  "warning-secondary",
   "outline",
   "ghost",
   "ghost-secondary",
@@ -59,6 +61,21 @@ const buttonVariants = cva(
           "active:s-bg-highlight-dark",
           "disabled:s-bg-highlight-muted disabled:s-text-highlight-50/60 dark:disabled:s-bg-highlight-muted-night"
         ),
+        "highlight-secondary": cn(
+          "s-border",
+          "s-border-border dark:s-border-border-night",
+          "s-text-highlight-500 dark:s-text-highlight-500-night",
+          "s-bg-background dark:s-bg-background-night",
+          "hover:s-text-highlight-500 dark:hover:s-text-highlight-500-night",
+          "hover:s-bg-highlight-50 dark:hover:s-bg-highlight-900",
+          "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: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"
+        ),
         warning: cn(
           "s-bg-warning",
           "s-text-warning-50",
@@ -66,6 +83,21 @@ const buttonVariants = cva(
           "active:s-bg-warning-dark",
           "disabled:s-bg-warning-muted disabled:s-text-highlight-50/60 dark:disabled:s-bg-warning-muted-night"
         ),
+        "warning-secondary": cn(
+          "s-border",
+          "s-border-border dark:s-border-border-night",
+          "s-text-warning-500 dark:s-text-warning-500-night",
+          "s-bg-background dark:s-bg-background-night",
+          "hover:s-text-warning-500 dark:hover:s-text-warning-500-night",
+          "hover:s-bg-warning-50 dark:hover:s-bg-warning-900",
+          "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: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"
+        ),
         outline: cn(
           "s-border",
           "s-border-border dark:s-border-border-night",
@@ -152,7 +184,9 @@ type SpinnerVariant = NonNullable<SpinnerProps["variant"]>;
 const spinnerVariantsMap: Record<ButtonVariantType, SpinnerVariant> = {
   primary: "revert",
   highlight: "light",
+  "highlight-secondary": "mono",
   warning: "light",
+  "warning-secondary": "mono",
   outline: "mono",
   ghost: "mono",
   "ghost-secondary": "mono",
@@ -164,7 +198,9 @@ const chevronVariantMap = {
   ghost: "s-text-faint",
   "ghost-secondary": "s-text-faint",
   highlight: "s-text-white/60",
+  "highlight-secondary": "s-text-highlight-500 dark:s-text-highlight-500-night",
   warning: "s-text-white/60",
+  "warning-secondary": "s-text-warning-500 dark:s-text-warning-500-night",
 } as const;
 
 export interface MetaButtonProps