@dust-tt/sparkle 0.2.443-rc2 → 0.2.443-rc3

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

@@ -1,8 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-declare const meta: {
-    title: string;
-    component: React.FC<{}>;
-};
+interface TypographyProps {
+    variant: "font-size" | "heading" | "heading-mono" | "copy";
+}
+declare const Typography: React.FC<TypographyProps>;
+declare const meta: Meta<typeof Typography>;
 export default meta;
-export declare const Default: () => React.JSX.Element;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const FontSize: Story;
+export declare const Heading: Story;
+export declare const HeadingMono: Story;
+export declare const Copy: Story;
 //# sourceMappingURL=Typography.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Typography.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Typography.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiF1B,QAAA,MAAM,IAAI;;;CAGgC,CAAC;AAE3C,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,yBAAoB,CAAC"}
+{"version":3,"file":"Typography.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Typography.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAsE1B,UAAU,eAAe;IACvB,OAAO,EAAE,WAAW,GAAG,SAAS,GAAG,cAAc,GAAG,MAAM,CAAC;CAC5D;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwJzC,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAUjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC"}

package/dist/esm/stories/Typography.stories.js

@@ -9,6 +9,13 @@ var textSizes = {
     lg: "s-text-lg",
     xl: "s-text-xl",
 };
+var copySizes = {
+    xs: "s-copy-xs",
+    sm: "s-copy-sm",
+    base: "s-copy-base",
+    lg: "s-copy-lg",
+    xl: "s-copy-xl",
+};
 var extraTextSizes = {
     "2xl": "s-text-2xl",
     "3xl": "s-text-3xl",
@@ -19,47 +26,165 @@ var extraTextSizes = {
     "8xl": "s-text-8xl",
     "9xl": "s-text-9xl",
 };
+var headingSizes = {
+    lg: "s-heading-lg",
+    xl: "s-heading-xl",
+    "2xl": "s-heading-2xl",
+    "3xl": "s-heading-3xl",
+    "4xl": "s-heading-4xl",
+    "5xl": "s-heading-5xl",
+    "6xl": "s-heading-6xl",
+    "7xl": "s-heading-7xl",
+    "8xl": "s-heading-8xl",
+    "9xl": "s-heading-9xl",
+};
+var headingMonoSizes = {
+    lg: "s-heading-mono-lg",
+    xl: "s-heading-mono-xl",
+    "2xl": "s-heading-mono-2xl",
+    "3xl": "s-heading-mono-3xl",
+    "4xl": "s-heading-mono-4xl",
+    "5xl": "s-heading-mono-5xl",
+    "6xl": "s-heading-mono-6xl",
+    "7xl": "s-heading-mono-7xl",
+    "8xl": "s-heading-mono-8xl",
+    "9xl": "s-heading-mono-9xl",
+};
 var fontWeights = {
     normal: "s-font-normal",
     medium: "s-font-medium",
     semibold: "s-font-semibold",
     bold: "s-font-bold",
 };
-var loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
-// SVG Pattern as a background image
-var svgBackground = "\n  <svg width=\"4\" height=\"8\" xmlns=\"http://www.w3.org/2000/svg\">\n    <rect width=\"4\" height=\"4\" fill=\"red\" fill-opacity=\"0.05\"/>\n  </svg>\n";
-// Create a component to display the text styles
-var TextStylesDisplay = function () {
-    return (React.createElement("div", null,
-        React.createElement("div", { className: "s-grid s-gap-4 s-bg-repeat s-py-8", style: {
-                backgroundImage: "url(\"data:image/svg+xml;utf8,".concat(encodeURIComponent(svgBackground), "\")"),
-                gridTemplateColumns: "repeat(".concat(Object.keys(fontWeights).length, ", minmax(0, 1fr))"),
-            } }, Object.entries(textSizes).map(function (_a) {
-            var _b = __read(_a, 2), sizeKey = _b[0], sizeClass = _b[1];
-            return Object.entries(fontWeights).map(function (_a) {
-                var _b = __read(_a, 2), weightKey = _b[0], weightClass = _b[1];
-                return (React.createElement("div", { key: "".concat(sizeKey, "-").concat(weightKey), className: classNames(sizeClass, weightClass) },
-                    React.createElement("div", null, "".concat(sizeKey, " ").concat(weightKey)),
+var loremIpsum = "Geist. Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
+var copyLoremIpsum = "Geist. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
+var Typography = function (_a) {
+    var variant = _a.variant;
+    if (variant === "font-size") {
+        return (React.createElement("div", null,
+            React.createElement("div", { className: "s-grid s-gap-4 s-bg-repeat s-py-8", style: {
+                    gridTemplateColumns: "repeat(".concat(Object.keys(fontWeights).length, ", minmax(0, 1fr))"),
+                } }, Object.entries(textSizes).map(function (_a) {
+                var _b = __read(_a, 2), sizeKey = _b[0], sizeClass = _b[1];
+                return Object.entries(fontWeights).map(function (_a) {
+                    var _b = __read(_a, 2), weightKey = _b[0], weightClass = _b[1];
+                    return (React.createElement("div", { key: "".concat(sizeKey, "-").concat(weightKey), className: classNames(sizeClass, weightClass) },
+                        React.createElement("div", null, "".concat(sizeKey, " ").concat(weightKey)),
+                        React.createElement("p", null, loremIpsum)));
+                });
+            })),
+            React.createElement("div", { className: "s-mt-6 s-grid s-gap-16 s-bg-repeat s-py-8" }, Object.entries(extraTextSizes).map(function (_a) {
+                var _b = __read(_a, 2), sizeKey = _b[0], sizeClass = _b[1];
+                return (React.createElement("div", { key: sizeKey, className: classNames(sizeClass, "s-font-medium") },
+                    React.createElement("div", null, "".concat(sizeKey, " medium")),
                     React.createElement("p", null, loremIpsum)));
-            });
-        })),
-        React.createElement("div", { className: "s-mt-6 s-grid s-gap-16 s-bg-repeat s-py-8", style: {
-                backgroundImage: "url(\"data:image/svg+xml;utf8,".concat(encodeURIComponent(svgBackground), "\")"),
-            } }, Object.entries(extraTextSizes).map(function (_a) {
-            var _b = __read(_a, 2), sizeKey = _b[0], sizeClass = _b[1];
-            return (React.createElement("div", { key: sizeKey, className: classNames(sizeClass, "s-font-medium") },
-                React.createElement("div", null, "".concat(sizeKey, " medium")),
+            }))));
+    }
+    if (variant === "copy") {
+        return (React.createElement("div", { className: "s-space-y-12 s-bg-repeat s-py-8", style: {
+            // backgroundImage: `url("data:image/svg+xml;utf8,${encodeURIComponent(svgBackground)}")`,
+            } }, Object.entries(copySizes).map(function (_a) {
+            var _b = __read(_a, 2), sizeKey = _b[0], copyClass = _b[1];
+            return (React.createElement("div", { key: sizeKey, className: "s-space-y-4" },
+                React.createElement("div", { className: copyClass },
+                    React.createElement("div", null, "Copy ".concat(sizeKey)),
+                    React.createElement("div", { className: "s-mt-2", style: {
+                            maxWidth: sizeKey === "xs"
+                                ? "20rem"
+                                : sizeKey === "sm"
+                                    ? "24rem"
+                                    : sizeKey === "base"
+                                        ? "32rem"
+                                        : sizeKey === "lg"
+                                            ? "40rem"
+                                            : "48rem",
+                        } },
+                        React.createElement("p", null, copyLoremIpsum))),
+                React.createElement("div", { className: classNames(copyClass, "s-italic") },
+                    React.createElement("div", null, "Copy ".concat(sizeKey, " Italic")),
+                    React.createElement("div", { className: "s-mt-2", style: {
+                            maxWidth: sizeKey === "xs"
+                                ? "20rem"
+                                : sizeKey === "sm"
+                                    ? "24rem"
+                                    : sizeKey === "base"
+                                        ? "32rem"
+                                        : sizeKey === "lg"
+                                            ? "40rem"
+                                            : "48rem",
+                        } },
+                        React.createElement("p", null, copyLoremIpsum))),
+                React.createElement("div", { className: classNames(copyClass, "s-font-mono") },
+                    React.createElement("div", null, "Copy ".concat(sizeKey, " Mono")),
+                    React.createElement("div", { className: "s-mt-2", style: {
+                            maxWidth: sizeKey === "xs"
+                                ? "20rem"
+                                : sizeKey === "sm"
+                                    ? "24rem"
+                                    : sizeKey === "base"
+                                        ? "32rem"
+                                        : sizeKey === "lg"
+                                            ? "40rem"
+                                            : "48rem",
+                        } },
+                        React.createElement("p", null, copyLoremIpsum)))));
+        })));
+    }
+    if (variant === "heading-mono") {
+        return (React.createElement("div", { className: "s-space-y-8 s-bg-repeat s-py-8", style: {
+            // backgroundImage: `url("data:image/svg+xml;utf8,${encodeURIComponent(svgBackground)}")`,
+            } }, Object.entries(headingMonoSizes).map(function (_a) {
+            var _b = __read(_a, 2), sizeKey = _b[0], headingClass = _b[1];
+            return (React.createElement("div", { key: sizeKey, className: headingClass },
+                React.createElement("div", null, "Heading Mono ".concat(sizeKey)),
                 React.createElement("p", null, loremIpsum)));
-        }))));
+        })));
+    }
+    return (React.createElement("div", { className: "s-space-y-8 s-bg-repeat s-py-8", style: {
+        // backgroundImage: `url("data:image/svg+xml;utf8,${encodeURIComponent(svgBackground)}")`,
+        } }, Object.entries(headingSizes).map(function (_a) {
+        var _b = __read(_a, 2), sizeKey = _b[0], headingClass = _b[1];
+        return (React.createElement("div", { key: sizeKey, className: headingClass },
+            React.createElement("div", null, "Heading ".concat(sizeKey)),
+            React.createElement("p", null, loremIpsum)));
+    })));
 };
-// Storybook metadata
 var meta = {
     title: "Theme/Typography",
-    component: TextStylesDisplay,
+    component: Typography,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "padded",
+    },
+    args: {
+        variant: "font-size",
+    },
 };
 export default meta;
-// Define a template for the story
-var Template = function () { return React.createElement(TextStylesDisplay, null); };
-// Export the default story
-export var Default = Template.bind({});
+// Add a Default story that matches the expected ID
+export var Default = {
+    args: {
+        variant: "font-size",
+    },
+};
+export var FontSize = {
+    args: {
+        variant: "font-size",
+    },
+};
+export var Heading = {
+    args: {
+        variant: "heading",
+    },
+};
+export var HeadingMono = {
+    args: {
+        variant: "heading-mono",
+    },
+};
+export var Copy = {
+    args: {
+        variant: "copy",
+    },
+};
 //# sourceMappingURL=Typography.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Typography.stories.js","sourceRoot":"","sources":["../../../src/stories/Typography.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,oCAAoC;AACpC,IAAM,SAAS,GAAG;IAChB,EAAE,EAAE,WAAW;IACf,EAAE,EAAE,WAAW;IACf,EAAE,EAAE,aAAa;IACjB,EAAE,EAAE,WAAW;IACf,EAAE,EAAE,WAAW;CAChB,CAAC;AAEF,IAAM,cAAc,GAAG;IACrB,KAAK,EAAE,YAAY;IACnB,KAAK,EAAE,YAAY;IACnB,KAAK,EAAE,YAAY;IACnB,KAAK,EAAE,YAAY;IACnB,KAAK,EAAE,YAAY;IACnB,KAAK,EAAE,YAAY;IACnB,KAAK,EAAE,YAAY;IACnB,KAAK,EAAE,YAAY;CACpB,CAAC;AAEF,IAAM,WAAW,GAAG;IAClB,MAAM,EAAE,eAAe;IACvB,MAAM,EAAE,eAAe;IACvB,QAAQ,EAAE,iBAAiB;IAC3B,IAAI,EAAE,aAAa;CACpB,CAAC;AAEF,IAAM,UAAU,GAAG,0DAA0D,CAAC;AAE9E,oCAAoC;AACpC,IAAM,aAAa,GAAG,8JAIrB,CAAC;AAEF,gDAAgD;AAChD,IAAM,iBAAiB,GAAa;IAClC,OAAO,CACL;QACE,6BACE,SAAS,EAAC,mCAAmC,EAC7C,KAAK,EAAE;gBACL,eAAe,EAAE,wCAAgC,kBAAkB,CAAC,aAAa,CAAC,QAAI;gBACtF,mBAAmB,EAAE,iBAAU,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,sBAAmB;aAClF,IAEA,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,UAAC,EAAoB;gBAApB,KAAA,aAAoB,EAAnB,OAAO,QAAA,EAAE,SAAS,QAAA;YACjD,OAAA,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,UAAC,EAAwB;oBAAxB,KAAA,aAAwB,EAAvB,SAAS,QAAA,EAAE,WAAW,QAAA;gBAAM,OAAA,CAC5D,6BACE,GAAG,EAAE,UAAG,OAAO,cAAI,SAAS,CAAE,EAC9B,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC;oBAE7C,iCAAM,UAAG,OAAO,cAAI,SAAS,CAAE,CAAO;oBACtC,+BAAI,UAAU,CAAK,CACf,CACP;YAR6D,CAQ7D,CAAC;QARF,CAQE,CACH,CACG;QACN,6BACE,SAAS,EAAC,2CAA2C,EACrD,KAAK,EAAE;gBACL,eAAe,EAAE,wCAAgC,kBAAkB,CAAC,aAAa,CAAC,QAAI;aACvF,IAEA,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,UAAC,EAAoB;gBAApB,KAAA,aAAoB,EAAnB,OAAO,QAAA,EAAE,SAAS,QAAA;YAAM,OAAA,CAC5D,6BAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,eAAe,CAAC;gBAClE,iCAAM,UAAG,OAAO,YAAS,CAAO;gBAChC,+BAAI,UAAU,CAAK,CACf,CACP;QAL6D,CAK7D,CAAC,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,qBAAqB;AACrB,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,iBAAiB;CACY,CAAC;AAE3C,eAAe,IAAI,CAAC;AAEpB,kCAAkC;AAClC,IAAM,QAAQ,GAAG,cAAM,OAAA,oBAAC,iBAAiB,OAAG,EAArB,CAAqB,CAAC;AAE7C,2BAA2B;AAC3B,MAAM,CAAC,IAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC"}
+{"version":3,"file":"Typography.stories.js","sourceRoot":"","sources":["../../../src/stories/Typography.stories.tsx"],"names":[],"mappings":"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"}

package/dist/sparkle.css

@@ -588,6 +588,191 @@ select {
   outline: 1px auto -webkit-focus-ring-color;
 }
 
+.s-heading-lg {
+  font-size: 18px;
+  line-height: 28px;
+  letter-spacing: normal;
+  font-weight: 600;
+}
+
+.s-heading-xl {
+  font-size: 20px;
+  line-height: 26px;
+  letter-spacing: -0.4px;
+  font-weight: 600;
+}
+
+.s-heading-2xl {
+  font-size: 24px;
+  line-height: 32px;
+  letter-spacing: -0.96px;
+  font-weight: 600;
+}
+
+.s-heading-3xl {
+  font-size: 32px;
+  line-height: 40px;
+  letter-spacing: -1.28px;
+  font-weight: 600;
+}
+
+.s-heading-4xl {
+  font-size: 40px;
+  line-height: 48px;
+  letter-spacing: -2.4px;
+  font-weight: 500;
+}
+
+.s-heading-5xl {
+  font-size: 48px;
+  line-height: 56px;
+  letter-spacing: -2.88px;
+  font-weight: 500;
+}
+
+.s-heading-6xl {
+  font-size: 56px;
+  line-height: 56px;
+  letter-spacing: -3.36px;
+  font-weight: 500;
+}
+
+.s-heading-7xl {
+  font-size: 64px;
+  line-height: 64px;
+  letter-spacing: -3.84px;
+  font-weight: 500;
+}
+
+.s-heading-8xl {
+  font-size: 72px;
+  line-height: 72px;
+  letter-spacing: -4.32px;
+  font-weight: 500;
+}
+
+.s-heading-9xl {
+  font-size: 80px;
+  line-height: 80px;
+  letter-spacing: -4.8px;
+  font-weight: 500;
+}
+
+.s-heading-mono-lg {
+  font-size: 18px;
+  line-height: 28px;
+  letter-spacing: normal;
+  font-weight: 400;
+  font-family: Geist Mono, monospace;
+}
+
+.s-heading-mono-xl {
+  font-size: 20px;
+  line-height: 26px;
+  letter-spacing: -0.4px;
+  font-weight: 400;
+  font-family: Geist Mono, monospace;
+}
+
+.s-heading-mono-2xl {
+  font-size: 24px;
+  line-height: 32px;
+  letter-spacing: -0.96px;
+  font-weight: 400;
+  font-family: Geist Mono, monospace;
+}
+
+.s-heading-mono-3xl {
+  font-size: 32px;
+  line-height: 40px;
+  letter-spacing: -1.28px;
+  font-weight: 400;
+  font-family: Geist Mono, monospace;
+}
+
+.s-heading-mono-4xl {
+  font-size: 40px;
+  line-height: 48px;
+  letter-spacing: -2.4px;
+  font-weight: 400;
+  font-family: Geist Mono, monospace;
+}
+
+.s-heading-mono-5xl {
+  font-size: 48px;
+  line-height: 56px;
+  letter-spacing: -2.88px;
+  font-weight: 400;
+  font-family: Geist Mono, monospace;
+}
+
+.s-heading-mono-6xl {
+  font-size: 56px;
+  line-height: 56px;
+  letter-spacing: -3.36px;
+  font-weight: 400;
+  font-family: Geist Mono, monospace;
+}
+
+.s-heading-mono-7xl {
+  font-size: 64px;
+  line-height: 64px;
+  letter-spacing: -3.84px;
+  font-weight: 400;
+  font-family: Geist Mono, monospace;
+}
+
+.s-heading-mono-8xl {
+  font-size: 72px;
+  line-height: 72px;
+  letter-spacing: -4.32px;
+  font-weight: 400;
+  font-family: Geist Mono, monospace;
+}
+
+.s-heading-mono-9xl {
+  font-size: 80px;
+  line-height: 80px;
+  letter-spacing: -4.8px;
+  font-weight: 400;
+  font-family: Geist Mono, monospace;
+}
+
+.s-copy-xs {
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: normal;
+  font-weight: 400;
+}
+
+.s-copy-sm {
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: -0.28px;
+  font-weight: 400;
+}
+
+.s-copy-base {
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: -0.32px;
+  font-weight: 400;
+}
+
+.s-copy-lg {
+  font-size: 18px;
+  line-height: 28px;
+  letter-spacing: normal;
+  font-weight: 400;
+}
+
+.s-copy-xl {
+  font-size: 20px;
+  line-height: 26px;
+  letter-spacing: -0.4px;
+  font-weight: 400;
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -1927,6 +2112,12 @@ select {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
+.s-space-y-12 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
+}
+
 .s-space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1945,6 +2136,12 @@ select {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.s-space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
 .s-self-center {
   align-self: center;
 }
@@ -3195,15 +3392,15 @@ select {
 }
 
 .s-bg-muted-foreground\/40 {
-  background-color: rgb(123 129 141 / 0.4);
+  background-color: rgb(84 93 108 / 0.4);
 }
 
 .s-bg-muted-foreground\/70 {
-  background-color: rgb(123 129 141 / 0.7);
+  background-color: rgb(84 93 108 / 0.7);
 }
 
 .s-bg-muted-foreground\/75 {
-  background-color: rgb(123 129 141 / 0.75);
+  background-color: rgb(84 93 108 / 0.75);
 }
 
 .s-bg-orange-100 {
@@ -4877,7 +5074,7 @@ select {
 
 .s-text-muted-foreground {
   --tw-text-opacity: 1;
-  color: rgb(123 129 141 / var(--tw-text-opacity));
+  color: rgb(84 93 108 / var(--tw-text-opacity));
 }
 
 .s-text-orange-500 {
@@ -5579,12 +5776,12 @@ select {
 
 .placeholder\:s-text-muted-foreground::-moz-placeholder {
   --tw-text-opacity: 1;
-  color: rgb(123 129 141 / var(--tw-text-opacity));
+  color: rgb(84 93 108 / var(--tw-text-opacity));
 }
 
 .placeholder\:s-text-muted-foreground::placeholder {
   --tw-text-opacity: 1;
-  color: rgb(123 129 141 / var(--tw-text-opacity));
+  color: rgb(84 93 108 / var(--tw-text-opacity));
 }
 
 .after\:s-absolute::after {
@@ -5714,11 +5911,11 @@ select {
 }
 
 .hover\:s-bg-muted-foreground\/70:hover {
-  background-color: rgb(123 129 141 / 0.7);
+  background-color: rgb(84 93 108 / 0.7);
 }
 
 .hover\:s-bg-muted-foreground\/80:hover {
-  background-color: rgb(123 129 141 / 0.8);
+  background-color: rgb(84 93 108 / 0.8);
 }
 
 .hover\:s-bg-primary-100:hover {
@@ -5996,7 +6193,7 @@ select {
 
 .disabled\:s-text-muted-foreground:disabled {
   --tw-text-opacity: 1;
-  color: rgb(123 129 141 / var(--tw-text-opacity));
+  color: rgb(84 93 108 / var(--tw-text-opacity));
 }
 
 .disabled\:s-text-primary-400:disabled {
@@ -6161,7 +6358,7 @@ select {
 
 .data-\[disabled\]\:s-text-muted-foreground[data-disabled] {
   --tw-text-opacity: 1;
-  color: rgb(123 129 141 / var(--tw-text-opacity));
+  color: rgb(84 93 108 / var(--tw-text-opacity));
 }
 
 .data-\[disabled\]\:s-text-primary-400[data-disabled] {
@@ -7544,15 +7741,15 @@ select {
 }
 
 :is(.s-dark .dark\:s-bg-muted-foreground-night\/40) {
-  background-color: rgb(123 129 141 / 0.4);
+  background-color: rgb(150 156 165 / 0.4);
 }
 
 :is(.s-dark .dark\:s-bg-muted-foreground-night\/70) {
-  background-color: rgb(123 129 141 / 0.7);
+  background-color: rgb(150 156 165 / 0.7);
 }
 
 :is(.s-dark .dark\:s-bg-muted-foreground-night\/75) {
-  background-color: rgb(123 129 141 / 0.75);
+  background-color: rgb(150 156 165 / 0.75);
 }
 
 :is(.s-dark .dark\:s-bg-muted-night) {
@@ -8683,7 +8880,7 @@ select {
 
 :is(.s-dark .dark\:s-text-muted-foreground-night) {
   --tw-text-opacity: 1;
-  color: rgb(123 129 141 / var(--tw-text-opacity));
+  color: rgb(150 156 165 / var(--tw-text-opacity));
 }
 
 :is(.s-dark .dark\:s-text-muted-night) {
@@ -9036,12 +9233,12 @@ select {
 
 :is(.s-dark .dark\:placeholder\:s-text-muted-foreground-night)::-moz-placeholder {
   --tw-text-opacity: 1;
-  color: rgb(123 129 141 / var(--tw-text-opacity));
+  color: rgb(150 156 165 / var(--tw-text-opacity));
 }
 
 :is(.s-dark .dark\:placeholder\:s-text-muted-foreground-night)::placeholder {
   --tw-text-opacity: 1;
-  color: rgb(123 129 141 / var(--tw-text-opacity));
+  color: rgb(150 156 165 / var(--tw-text-opacity));
 }
 
 :is(.s-dark .dark\:after\:s-bg-foreground-night)::after {
@@ -9071,11 +9268,11 @@ select {
 }
 
 :is(.s-dark .dark\:hover\:s-bg-muted-foreground-night\/70:hover) {
-  background-color: rgb(123 129 141 / 0.7);
+  background-color: rgb(150 156 165 / 0.7);
 }
 
 :is(.s-dark .dark\:hover\:s-bg-muted-foreground-night\/80:hover) {
-  background-color: rgb(123 129 141 / 0.8);
+  background-color: rgb(150 156 165 / 0.8);
 }
 
 :is(.s-dark .dark\:hover\:s-bg-muted-night:hover) {
@@ -9288,7 +9485,7 @@ select {
 
 :is(.s-dark .dark\:disabled\:s-text-muted-foreground-night:disabled) {
   --tw-text-opacity: 1;
-  color: rgb(123 129 141 / var(--tw-text-opacity));
+  color: rgb(150 156 165 / var(--tw-text-opacity));
 }
 
 :is(.s-dark .dark\:disabled\:s-text-primary-400-night:disabled) {
@@ -9326,7 +9523,7 @@ select {
 
 :is(.s-dark .dark\:data-\[disabled\]\:s-text-muted-foreground-night[data-disabled]) {
   --tw-text-opacity: 1;
-  color: rgb(123 129 141 / var(--tw-text-opacity));
+  color: rgb(150 156 165 / var(--tw-text-opacity));
 }
 
 :is(.s-dark .dark\:data-\[disabled\]\:s-text-primary-400-night[data-disabled]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.443-rc2",
+  "version": "0.2.443-rc3",
   "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/stories/Typography.stories.tsx

@@ -1,5 +1,5 @@
 // TextStyles.stories.tsx
-import { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
 import { classNames } from "@sparkle/lib/utils";
@@ -13,6 +13,14 @@ const textSizes = {
   xl: "s-text-xl",
 };
 
+const copySizes = {
+  xs: "s-copy-xs",
+  sm: "s-copy-sm",
+  base: "s-copy-base",
+  lg: "s-copy-lg",
+  xl: "s-copy-xl",
+};
+
 const extraTextSizes = {
   "2xl": "s-text-2xl",
   "3xl": "s-text-3xl",
@@ -24,6 +32,32 @@ const extraTextSizes = {
   "9xl": "s-text-9xl",
 };
 
+const headingSizes = {
+  lg: "s-heading-lg",
+  xl: "s-heading-xl",
+  "2xl": "s-heading-2xl",
+  "3xl": "s-heading-3xl",
+  "4xl": "s-heading-4xl",
+  "5xl": "s-heading-5xl",
+  "6xl": "s-heading-6xl",
+  "7xl": "s-heading-7xl",
+  "8xl": "s-heading-8xl",
+  "9xl": "s-heading-9xl",
+};
+
+const headingMonoSizes = {
+  lg: "s-heading-mono-lg",
+  xl: "s-heading-mono-xl",
+  "2xl": "s-heading-mono-2xl",
+  "3xl": "s-heading-mono-3xl",
+  "4xl": "s-heading-mono-4xl",
+  "5xl": "s-heading-mono-5xl",
+  "6xl": "s-heading-mono-6xl",
+  "7xl": "s-heading-mono-7xl",
+  "8xl": "s-heading-mono-8xl",
+  "9xl": "s-heading-mono-9xl",
+};
+
 const fontWeights = {
   normal: "s-font-normal",
   medium: "s-font-medium",
@@ -31,65 +65,211 @@ const fontWeights = {
   bold: "s-font-bold",
 };
 
-const loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
+const loremIpsum =
+  "Geist. Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
 
-// SVG Pattern as a background image
-const svgBackground = `
-  <svg width="4" height="8" xmlns="http://www.w3.org/2000/svg">
-    <rect width="4" height="4" fill="red" fill-opacity="0.05"/>
-  </svg>
-`;
+const copyLoremIpsum = `Geist. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
 
-// Create a component to display the text styles
-const TextStylesDisplay: React.FC = () => {
-  return (
-    <div>
-      <div
-        className="s-grid s-gap-4 s-bg-repeat s-py-8"
-        style={{
-          backgroundImage: `url("data:image/svg+xml;utf8,${encodeURIComponent(svgBackground)}")`,
-          gridTemplateColumns: `repeat(${Object.keys(fontWeights).length}, minmax(0, 1fr))`,
-        }}
-      >
-        {Object.entries(textSizes).map(([sizeKey, sizeClass]) =>
-          Object.entries(fontWeights).map(([weightKey, weightClass]) => (
+interface TypographyProps {
+  variant: "font-size" | "heading" | "heading-mono" | "copy";
+}
+
+const Typography: React.FC<TypographyProps> = ({ variant }) => {
+  if (variant === "font-size") {
+    return (
+      <div>
+        <div
+          className="s-grid s-gap-4 s-bg-repeat s-py-8"
+          style={{
+            gridTemplateColumns: `repeat(${Object.keys(fontWeights).length}, minmax(0, 1fr))`,
+          }}
+        >
+          {Object.entries(textSizes).map(([sizeKey, sizeClass]) =>
+            Object.entries(fontWeights).map(([weightKey, weightClass]) => (
+              <div
+                key={`${sizeKey}-${weightKey}`}
+                className={classNames(sizeClass, weightClass)}
+              >
+                <div>{`${sizeKey} ${weightKey}`}</div>
+                <p>{loremIpsum}</p>
+              </div>
+            ))
+          )}
+        </div>
+        <div className="s-mt-6 s-grid s-gap-16 s-bg-repeat s-py-8">
+          {Object.entries(extraTextSizes).map(([sizeKey, sizeClass]) => (
             <div
-              key={`${sizeKey}-${weightKey}`}
-              className={classNames(sizeClass, weightClass)}
+              key={sizeKey}
+              className={classNames(sizeClass, "s-font-medium")}
             >
-              <div>{`${sizeKey} ${weightKey}`}</div>
+              <div>{`${sizeKey} medium`}</div>
               <p>{loremIpsum}</p>
             </div>
-          ))
-        )}
+          ))}
+        </div>
       </div>
+    );
+  }
+
+  if (variant === "copy") {
+    return (
       <div
-        className="s-mt-6 s-grid s-gap-16 s-bg-repeat s-py-8"
-        style={{
-          backgroundImage: `url("data:image/svg+xml;utf8,${encodeURIComponent(svgBackground)}")`,
-        }}
+        className="s-space-y-12 s-bg-repeat s-py-8"
+        style={
+          {
+            // backgroundImage: `url("data:image/svg+xml;utf8,${encodeURIComponent(svgBackground)}")`,
+          }
+        }
       >
-        {Object.entries(extraTextSizes).map(([sizeKey, sizeClass]) => (
-          <div key={sizeKey} className={classNames(sizeClass, "s-font-medium")}>
-            <div>{`${sizeKey} medium`}</div>
+        {Object.entries(copySizes).map(([sizeKey, copyClass]) => (
+          <div key={sizeKey} className="s-space-y-4">
+            <div className={copyClass}>
+              <div>{`Copy ${sizeKey}`}</div>
+              <div
+                className="s-mt-2"
+                style={{
+                  maxWidth:
+                    sizeKey === "xs"
+                      ? "20rem"
+                      : sizeKey === "sm"
+                        ? "24rem"
+                        : sizeKey === "base"
+                          ? "32rem"
+                          : sizeKey === "lg"
+                            ? "40rem"
+                            : "48rem",
+                }}
+              >
+                <p>{copyLoremIpsum}</p>
+              </div>
+            </div>
+            <div className={classNames(copyClass, "s-italic")}>
+              <div>{`Copy ${sizeKey} Italic`}</div>
+              <div
+                className="s-mt-2"
+                style={{
+                  maxWidth:
+                    sizeKey === "xs"
+                      ? "20rem"
+                      : sizeKey === "sm"
+                        ? "24rem"
+                        : sizeKey === "base"
+                          ? "32rem"
+                          : sizeKey === "lg"
+                            ? "40rem"
+                            : "48rem",
+                }}
+              >
+                <p>{copyLoremIpsum}</p>
+              </div>
+            </div>
+            <div className={classNames(copyClass, "s-font-mono")}>
+              <div>{`Copy ${sizeKey} Mono`}</div>
+              <div
+                className="s-mt-2"
+                style={{
+                  maxWidth:
+                    sizeKey === "xs"
+                      ? "20rem"
+                      : sizeKey === "sm"
+                        ? "24rem"
+                        : sizeKey === "base"
+                          ? "32rem"
+                          : sizeKey === "lg"
+                            ? "40rem"
+                            : "48rem",
+                }}
+              >
+                <p>{copyLoremIpsum}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (variant === "heading-mono") {
+    return (
+      <div
+        className="s-space-y-8 s-bg-repeat s-py-8"
+        style={
+          {
+            // backgroundImage: `url("data:image/svg+xml;utf8,${encodeURIComponent(svgBackground)}")`,
+          }
+        }
+      >
+        {Object.entries(headingMonoSizes).map(([sizeKey, headingClass]) => (
+          <div key={sizeKey} className={headingClass}>
+            <div>{`Heading Mono ${sizeKey}`}</div>
             <p>{loremIpsum}</p>
           </div>
         ))}
       </div>
+    );
+  }
+
+  return (
+    <div
+      className="s-space-y-8 s-bg-repeat s-py-8"
+      style={
+        {
+          // backgroundImage: `url("data:image/svg+xml;utf8,${encodeURIComponent(svgBackground)}")`,
+        }
+      }
+    >
+      {Object.entries(headingSizes).map(([sizeKey, headingClass]) => (
+        <div key={sizeKey} className={headingClass}>
+          <div>{`Heading ${sizeKey}`}</div>
+          <p>{loremIpsum}</p>
+        </div>
+      ))}
     </div>
   );
 };
 
-// Storybook metadata
-const meta = {
+const meta: Meta<typeof Typography> = {
   title: "Theme/Typography",
-  component: TextStylesDisplay,
-} satisfies Meta<typeof TextStylesDisplay>;
+  component: Typography,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+  args: {
+    variant: "font-size",
+  },
+};
 
 export default meta;
+type Story = StoryObj<typeof meta>;
 
-// Define a template for the story
-const Template = () => <TextStylesDisplay />;
+// Add a Default story that matches the expected ID
+export const Default: Story = {
+  args: {
+    variant: "font-size",
+  },
+};
 
-// Export the default story
-export const Default = Template.bind({});
+export const FontSize: Story = {
+  args: {
+    variant: "font-size",
+  },
+};
+
+export const Heading: Story = {
+  args: {
+    variant: "heading",
+  },
+};
+
+export const HeadingMono: Story = {
+  args: {
+    variant: "heading-mono",
+  },
+};
+
+export const Copy: Story = {
+  args: {
+    variant: "copy",
+  },
+};