@dust-tt/sparkle 0.3.6 → 0.3.8

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

@@ -1,9 +1,16 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ScrollArea } from "../index_with_tw_base";
-declare const meta: Meta<typeof ScrollArea>;
+import type { StoryObj } from "@storybook/react";
+import React from "react";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../components/ScrollArea").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
 export default meta;
-type Story = StoryObj<typeof ScrollArea>;
-export declare const ScrollAreaDemo: Story;
+type Story = StoryObj<typeof meta>;
+export declare const ScrollAreaExample: Story;
 export interface Artwork {
     artist: string;
     art: string;

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ScrollArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,UAAU,EAAa,MAAM,6BAA6B,CAAC;AAEpE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAGjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAMzC,eAAO,MAAM,cAAc,EAAE,KAiC5B,CAAC;AAEF,MAAM,WAAW,OAAO;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;CACb;AAgBD,eAAO,MAAM,wBAAwB,EAAE,KA2BtC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAwBnC,CAAC"}
+{"version":3,"file":"ScrollArea.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ScrollArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,QAAA,MAAM,IAAI;;;;;;;CAOyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAMnC,eAAO,MAAM,iBAAiB,EAAE,KAiC/B,CAAC;AAEF,MAAM,WAAW,OAAO;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;CACb;AAgBD,eAAO,MAAM,wBAAwB,EAAE,KA2BtC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAwBnC,CAAC"}

package/dist/esm/stories/ScrollArea.stories.js

@@ -1,13 +1,17 @@
 import React from "react";
-import { ScrollBar } from "../components/ScrollArea";
-import { ScrollArea, Separator } from "../index_with_tw_base";
+import { ScrollArea, ScrollBar } from "../components/ScrollArea";
+import { Separator } from "../components/Separator";
 var meta = {
     title: "Primitives/ScrollArea",
     component: ScrollArea,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
 };
 export default meta;
 var tags = Array.from({ length: 50 }).map(function (_, i, a) { return "v1.2.0-beta.".concat(a.length - i); });
-export var ScrollAreaDemo = {
+export var ScrollAreaExample = {
     render: function () { return (React.createElement("div", { className: "s-flex s-flex-row s-gap-6 s-bg-muted s-p-8" },
         React.createElement("div", { className: "s-h-[400px]" },
             React.createElement(ScrollArea, { className: "s-h-full s-w-[200px] s-border-b s-border-t s-border-border s-bg-white" },

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

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

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

@@ -3,9 +3,30 @@ import React from "react";
 declare const meta: {
     title: string;
     component: React.FC<import("../components/Spinner").SpinnerProps>;
+    tags: string[];
+    argTypes: {
+        size: {
+            options: readonly ["xs", "sm", "md", "lg", "xl", "2xl"];
+            control: {
+                type: "select";
+            };
+            description: string;
+        };
+        variant: {
+            options: readonly ["mono", "color", "light", "dark", "rose300"];
+            control: {
+                type: "select";
+            };
+            description: string;
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const SpinnerExample: () => React.JSX.Element;
+export declare const Playground: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const MonoVariant: Story;
+export declare const SpinnerExample: Story;
 export declare const BasicSpinner: Story;
 //# sourceMappingURL=Spinner.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,IAAI;;;CAGsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,cAAc,yBAyF1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC"}
+{"version":3,"file":"Spinner.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;CAiBsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA2F5B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC"}

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

@@ -1,60 +1,101 @@
 import React from "react";
 import { Spinner } from "../index_with_tw_base";
+var SPINNER_SIZES = ["xs", "sm", "md", "lg", "xl", "2xl"];
+var SPINNER_VARIANTS = ["mono", "color", "light", "dark", "rose300"];
 var meta = {
     title: "Primitives/Spinner",
     component: Spinner,
+    tags: ["autodocs"],
+    argTypes: {
+        size: {
+            options: SPINNER_SIZES,
+            control: { type: "select" },
+            description: "Size of the spinner",
+        },
+        variant: {
+            options: SPINNER_VARIANTS,
+            control: { type: "select" },
+            description: "Visual variant of the spinner (mono adapts to dark/light theme)",
+        },
+    },
 };
 export default meta;
-export var SpinnerExample = function () {
-    return (React.createElement("div", { className: "s-flex s-flex-col s-gap-4" },
-        React.createElement("div", { className: "s-heading-base s-text-foreground dark:s-text-white" }, "Size = XS"),
-        React.createElement("div", { className: "s-flex s-gap-4" },
-            React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "color", size: "xs" })),
-            React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "mono", size: "xs" })),
-            React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "rose300", size: "xs" }))),
-        React.createElement("div", { className: "s-heading-base s-text-foreground dark:s-text-white" }, "Size = SM"),
-        React.createElement("div", { className: "s-flex s-gap-4" },
-            React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "color", size: "sm" })),
-            React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "mono", size: "sm" })),
-            React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "rose300", size: "sm" }))),
-        React.createElement("div", { className: "s-heading-base s-text-foreground dark:s-text-white" }, "Size = MD"),
-        React.createElement("div", { className: "s-flex s-gap-4" },
-            React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "color", size: "md" })),
-            React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "mono", size: "md" })),
-            React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "rose300", size: "md" }))),
-        React.createElement("div", { className: "s-heading-base s-text-foreground dark:s-text-white" }, "Size = LG"),
-        React.createElement("div", { className: "s-flex s-gap-4" },
-            React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "color", size: "lg" })),
-            React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "mono", size: "lg" })),
-            React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "rose300", size: "lg" }))),
-        React.createElement("div", { className: "s-heading-base s-text-foreground dark:s-text-white" }, "Size = XL"),
-        React.createElement("div", { className: "s-flex s-gap-4" },
-            React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "color", size: "xl" })),
-            React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "mono", size: "xl" })),
-            React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "rose300", size: "xl" }))),
-        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: "2xl" })),
-            React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "mono", size: "2xl" })),
-            React.createElement("div", { className: "s-p-20" },
-                React.createElement(Spinner, { variant: "rose300", size: "2xl" })))));
+export var Playground = {
+    args: {
+        size: "md",
+        variant: "color",
+    },
+};
+export var Small = {
+    args: {
+        size: "sm",
+        variant: "color",
+    },
+};
+export var Large = {
+    args: {
+        size: "lg",
+        variant: "color",
+    },
+};
+export var MonoVariant = {
+    args: {
+        size: "md",
+        variant: "mono",
+    },
+};
+export var SpinnerExample = {
+    render: function () {
+        return (React.createElement("div", { className: "s-flex s-flex-col s-gap-4" },
+            React.createElement("div", { className: "s-heading-base s-text-foreground dark:s-text-white" }, "Size = XS"),
+            React.createElement("div", { className: "s-flex s-gap-4" },
+                React.createElement("div", { className: "s-p-20" },
+                    React.createElement(Spinner, { variant: "color", size: "xs" })),
+                React.createElement("div", { className: "s-p-20" },
+                    React.createElement(Spinner, { variant: "mono", size: "xs" })),
+                React.createElement("div", { className: "s-p-20" },
+                    React.createElement(Spinner, { variant: "rose300", size: "xs" }))),
+            React.createElement("div", { className: "s-heading-base s-text-foreground dark:s-text-white" }, "Size = SM"),
+            React.createElement("div", { className: "s-flex s-gap-4" },
+                React.createElement("div", { className: "s-p-20" },
+                    React.createElement(Spinner, { variant: "color", size: "sm" })),
+                React.createElement("div", { className: "s-p-20" },
+                    React.createElement(Spinner, { variant: "mono", size: "sm" })),
+                React.createElement("div", { className: "s-p-20" },
+                    React.createElement(Spinner, { variant: "rose300", size: "sm" }))),
+            React.createElement("div", { className: "s-heading-base s-text-foreground dark:s-text-white" }, "Size = MD"),
+            React.createElement("div", { className: "s-flex s-gap-4" },
+                React.createElement("div", { className: "s-p-20" },
+                    React.createElement(Spinner, { variant: "color", size: "md" })),
+                React.createElement("div", { className: "s-p-20" },
+                    React.createElement(Spinner, { variant: "mono", size: "md" })),
+                React.createElement("div", { className: "s-p-20" },
+                    React.createElement(Spinner, { variant: "rose300", size: "md" }))),
+            React.createElement("div", { className: "s-heading-base s-text-foreground dark:s-text-white" }, "Size = LG"),
+            React.createElement("div", { className: "s-flex s-gap-4" },
+                React.createElement("div", { className: "s-p-20" },
+                    React.createElement(Spinner, { variant: "color", size: "lg" })),
+                React.createElement("div", { className: "s-p-20" },
+                    React.createElement(Spinner, { variant: "mono", size: "lg" })),
+                React.createElement("div", { className: "s-p-20" },
+                    React.createElement(Spinner, { variant: "rose300", size: "lg" }))),
+            React.createElement("div", { className: "s-heading-base s-text-foreground dark:s-text-white" }, "Size = XL"),
+            React.createElement("div", { className: "s-flex s-gap-4" },
+                React.createElement("div", { className: "s-p-20" },
+                    React.createElement(Spinner, { variant: "color", size: "xl" })),
+                React.createElement("div", { className: "s-p-20" },
+                    React.createElement(Spinner, { variant: "mono", size: "xl" })),
+                React.createElement("div", { className: "s-p-20" },
+                    React.createElement(Spinner, { variant: "rose300", size: "xl" }))),
+            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: "2xl" })),
+                React.createElement("div", { className: "s-p-20" },
+                    React.createElement(Spinner, { variant: "mono", size: "2xl" })),
+                React.createElement("div", { className: "s-p-20" },
+                    React.createElement(Spinner, { variant: "rose300", size: "2xl" })))));
+    },
 };
 export var BasicSpinner = {
     args: {

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

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

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

@@ -1,8 +1,12 @@
+import type { StoryObj } from "@storybook/react";
 import React from "react";
 declare const meta: {
     title: string;
+    component: React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>>;
+    tags: string[];
 };
 export default meta;
-export declare function Demo(): React.JSX.Element;
-export declare function Demo2(): React.JSX.Element;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithMultipleTabs: Story;
 //# sourceMappingURL=Tabs.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Tabs.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,QAAA,MAAM,IAAI;;CAEM,CAAC;AAEjB,eAAe,IAAI,CAAC;AAEpB,wBAAgB,IAAI,sBAoBnB;AAED,wBAAgB,KAAK,sBAuBpB"}
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,QAAA,MAAM,IAAI;;;;CAImB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAuB9B,CAAC"}

package/dist/esm/stories/Tabs.stories.js

@@ -2,10 +2,12 @@ import React from "react";
 import { Button, Cog6ToothIcon, CommandIcon, LightbulbIcon, Tabs, TabsContent, TabsList, TabsTrigger, } from "../index_with_tw_base";
 var meta = {
     title: "Components/Tabs",
+    component: Tabs,
+    tags: ["autodocs"],
 };
 export default meta;
-export function Demo() {
-    return (React.createElement("div", { className: "s-w-80" },
+export var Default = {
+    render: function () { return (React.createElement("div", { className: "s-w-80" },
         React.createElement(Tabs, { defaultValue: "account" },
             React.createElement(TabsList, { className: "s-px-2" },
                 React.createElement(TabsTrigger, { value: "account", label: "Hello", icon: CommandIcon }),
@@ -14,10 +16,10 @@ export function Demo() {
                 React.createElement(TabsTrigger, { value: "settings", icon: Cog6ToothIcon, tooltip: "Settings" })),
             React.createElement(TabsContent, { value: "account" }, "Hello"),
             React.createElement(TabsContent, { value: "password" }, "World"),
-            React.createElement(TabsContent, { value: "settings" }, "Settings"))));
-}
-export function Demo2() {
-    return (React.createElement("div", { className: "s-w-[100%]" },
+            React.createElement(TabsContent, { value: "settings" }, "Settings")))); },
+};
+export var WithMultipleTabs = {
+    render: function () { return (React.createElement("div", { className: "s-w-[100%]" },
         React.createElement(Tabs, { defaultValue: "tab1" },
             React.createElement(TabsList, { className: "s-px-2" },
                 React.createElement(TabsTrigger, { value: "tab1", label: "Tab 1", icon: CommandIcon }),
@@ -33,6 +35,6 @@ export function Demo2() {
             React.createElement(TabsContent, { value: "tab3" }, "Content for Tab 3"),
             React.createElement(TabsContent, { value: "tab4" }, "Content for Tab 4"),
             React.createElement(TabsContent, { value: "tab5" }, "Content for Tab 5"),
-            React.createElement(TabsContent, { value: "tab6" }, "Content for Tab 6"))));
-}
+            React.createElement(TabsContent, { value: "tab6" }, "Content for Tab 6")))); },
+};
 //# sourceMappingURL=Tabs.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../src/stories/Tabs.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,aAAa,EACb,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,WAAW,GACZ,MAAM,uBAAuB,CAAC;AAE/B,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,iBAAiB;CACV,CAAC;AAEjB,eAAe,IAAI,CAAC;AAEpB,MAAM,UAAU,IAAI;IAClB,OAAO,CACL,6BAAK,SAAS,EAAC,QAAQ;QACrB,oBAAC,IAAI,IAAC,YAAY,EAAC,SAAS;YAC1B,oBAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ;gBAC1B,oBAAC,WAAW,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,WAAW,GAAI;gBAChE,oBAAC,WAAW,IAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,aAAa,GAAI;gBACnE,6BAAK,SAAS,EAAC,QAAQ,GAAG;gBAC1B,oBAAC,WAAW,IACV,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,aAAa,EACnB,OAAO,EAAC,UAAU,GAClB,CACO;YACX,oBAAC,WAAW,IAAC,KAAK,EAAC,SAAS,YAAoB;YAChD,oBAAC,WAAW,IAAC,KAAK,EAAC,UAAU,YAAoB;YACjD,oBAAC,WAAW,IAAC,KAAK,EAAC,UAAU,eAAuB,CAC/C,CACH,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,KAAK;IACnB,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,oBAAC,IAAI,IAAC,YAAY,EAAC,MAAM;YACvB,oBAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ;gBAC1B,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,WAAW,GAAI;gBAC7D,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,aAAa,GAAI;gBAC/D,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,aAAa,GAAI;gBAC/D,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,WAAW,GAAI;gBAC7D,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,aAAa,GAAI;gBAC/D,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,aAAa,GAAI;gBAC/D,6BAAK,SAAS,EAAC,QAAQ,GAAG;gBAC1B,oBAAC,MAAM,IAAC,KAAK,EAAC,OAAO,GAAG,CACf;YACX,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,wBAAgC;YACzD,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,wBAAgC;YACzD,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,wBAAgC;YACzD,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,wBAAgC;YACzD,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,wBAAgC;YACzD,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,wBAAgC,CACpD,CACH,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../src/stories/Tabs.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,aAAa,EACb,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,WAAW,GACZ,MAAM,uBAAuB,CAAC;AAE/B,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE,CAAC,UAAU,CAAC;CACS,CAAC;AAE9B,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,IAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,cAAM,OAAA,CACZ,6BAAK,SAAS,EAAC,QAAQ;QACrB,oBAAC,IAAI,IAAC,YAAY,EAAC,SAAS;YAC1B,oBAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ;gBAC1B,oBAAC,WAAW,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,WAAW,GAAI;gBAChE,oBAAC,WAAW,IAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,aAAa,GAAI;gBACnE,6BAAK,SAAS,EAAC,QAAQ,GAAG;gBAC1B,oBAAC,WAAW,IACV,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,aAAa,EACnB,OAAO,EAAC,UAAU,GAClB,CACO;YACX,oBAAC,WAAW,IAAC,KAAK,EAAC,SAAS,YAAoB;YAChD,oBAAC,WAAW,IAAC,KAAK,EAAC,UAAU,YAAoB;YACjD,oBAAC,WAAW,IAAC,KAAK,EAAC,UAAU,eAAuB,CAC/C,CACH,CACP,EAlBa,CAkBb;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAU;IACrC,MAAM,EAAE,cAAM,OAAA,CACZ,6BAAK,SAAS,EAAC,YAAY;QACzB,oBAAC,IAAI,IAAC,YAAY,EAAC,MAAM;YACvB,oBAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ;gBAC1B,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,WAAW,GAAI;gBAC7D,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,aAAa,GAAI;gBAC/D,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,aAAa,GAAI;gBAC/D,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,WAAW,GAAI;gBAC7D,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,aAAa,GAAI;gBAC/D,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,aAAa,GAAI;gBAC/D,6BAAK,SAAS,EAAC,QAAQ,GAAG;gBAC1B,oBAAC,MAAM,IAAC,KAAK,EAAC,OAAO,GAAG,CACf;YACX,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,wBAAgC;YACzD,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,wBAAgC;YACzD,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,wBAAgC;YACzD,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,wBAAgC;YACzD,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,wBAAgC;YACzD,oBAAC,WAAW,IAAC,KAAK,EAAC,MAAM,wBAAgC,CACpD,CACH,CACP,EArBa,CAqBb;CACF,CAAC"}

package/dist/sparkle.css

@@ -4359,6 +4359,10 @@ select {
   padding-left: 0.625rem;
 }
 
+.s-pl-3 {
+  padding-left: 0.75rem;
+}
+
 .s-pl-4 {
   padding-left: 1rem;
 }
@@ -4565,6 +4569,10 @@ select {
   font-style: italic;
 }
 
+.s-leading-7 {
+  line-height: 1.75rem;
+}
+
 .s-leading-none {
   line-height: 1;
 }
@@ -5427,15 +5435,6 @@ select {
   }
 }
 
-@container (min-width: 40rem) {
-  .\@sm\:s-heading-sm {
-    font-size: 14px;
-    line-height: 20px;
-    letter-spacing: -0.28px;
-    font-weight: 600;
-  }
-}
-
 .file\:s-border-0::file-selector-button {
   border-width: 0px;
 }
@@ -6445,16 +6444,6 @@ select {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
-
-  .\@sm\:s-text-base {
-    font-size: 16px;
-    line-height: 24px;
-    letter-spacing: -0.32px;
-  }
-
-  .\@sm\:s-leading-7 {
-    line-height: 1.75rem;
-  }
 }
 
 @container conversation (min-width: 48rem) {

package/package.json

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

@@ -150,10 +150,7 @@ export const ConversationMessageContent = React.forwardRef<
       {...props}
     >
       <div
-        className={cn(
-          "s-text-sm @sm:s-text-base",
-          "s-text-foreground dark:s-text-foreground-night"
-        )}
+        className="s-text-base s-text-foreground dark:s-text-foreground-night"
       >
         {children}
       </div>
@@ -230,11 +227,7 @@ export const ConversationMessageHeader = React.forwardRef<
         )}
         <div className="s-flex s-w-full s-flex-row s-justify-between s-gap-0.5">
           <div
-            className={cn(
-              "s-heading-xs @sm:s-heading-sm",
-              "s-text-foreground dark:s-text-foreground-night",
-              "s-flex s-flex-row s-items-center s-gap-2"
-            )}
+            className="s-heading-sm s-text-foreground dark:s-text-foreground-night s-flex s-flex-row s-items-center s-gap-2"
           >
             {renderName(name)}
             {infoChip}

package/src/components/NavigationList.tsx

@@ -27,7 +27,6 @@ const NavigationListItemStyles = cva(
         active: "active:s-bg-primary-150 dark:active:s-bg-primary-200-night",
         selected: cn(
           "s-text-foreground dark:s-text-foreground-night",
-          "s-font-medium",
           "s-bg-primary-100 dark:s-bg-primary-200-night"
         ),
         unselected:
@@ -201,7 +200,7 @@ const variantStyles = cva("", {
     },
     isSticky: {
       true: cn(
-        "s-sticky s-top-0 s-z-10 s-border-b s-bg-background dark:s-bg-muted-background-night",
+        "s-sticky s-top-0 s-z-10 s-bg-background dark:s-bg-muted-background-night",
         "s-border-border dark:s-border-border-night"
       ),
     },
@@ -213,7 +212,7 @@ const variantStyles = cva("", {
 });
 
 const labelStyles = cva(
-  "s-pt-4 s-pb-2 s-heading-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
+  "s-pt-4 s-pb-2 s-pl-3 s-heading-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
 );
 
 interface NavigationListLabelProps

package/src/components/ScrollArea.tsx

@@ -175,4 +175,4 @@ const ScrollBar = React.forwardRef<
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 export { ScrollArea, ScrollBar };
-export type { ScrollBarSize };
+export type { ScrollAreaProps, ScrollBarSize };

package/src/components/markdown/Markdown.tsx

@@ -37,7 +37,7 @@ export const markdownHeaderClasses = {
 };
 
 const sizes = {
-  p: "s-copy-sm @sm:s-text-base @sm:s-leading-7",
+  p: "s-text-base s-leading-7",
   ...markdownHeaderClasses,
 };