@dust-tt/sparkle 0.2.446 → 0.2.448

package/src/components/Page.tsx

@@ -89,10 +89,10 @@ interface PagePProps {
 }
 
 const PsizeClasses = {
-  xs: "s-text-xs",
-  sm: "s-text-sm",
-  md: "s-text-base",
-  lg: "s-text-lg",
+  xs: "s-copy-xs",
+  sm: "s-copy-sm",
+  md: "s-copy-base",
+  lg: "s-copy-lg",
 };
 
 Page.P = function ({ children, variant, size = "sm" }: PagePProps) {
@@ -119,12 +119,12 @@ Page.H = function ({ children, variant = "h3" }: PageHProps) {
   const Component = variant;
 
   const hSizes = {
-    h1: "s-text-4xl s-font-bold",
-    h2: "s-text-3xl s-font-bold",
-    h3: "s-text-2xl s-font-bold",
-    h4: "s-text-xl s-font-semibold",
-    h5: "s-text-lg s-font-semibold",
-    h6: "s-text-base s-font-semibold",
+    h1: "s-heading-4xl",
+    h2: "s-heading-3xl",
+    h3: "s-heading-2xl",
+    h4: "s-heading-xl",
+    h5: "s-heading-lg",
+    h6: "s-heading-base",
   };
 
   return (

package/src/components/PriceTable.tsx

@@ -90,8 +90,8 @@ export function PriceTable({
       >
         <div
           className={classNames(
-            size === "xs" ? "s-text-2xl" : "s-text-3xl",
-            "s-w-full s-text-right s-font-semibold",
+            size === "xs" ? "s-heading-2xl" : "s-heading-3xl",
+            "s-w-full s-text-right",
             "s-text-foreground"
           )}
         >
@@ -100,17 +100,16 @@ export function PriceTable({
         <div className="-s-mt-2 s-flex s-flex-row s-items-baseline s-gap-2">
           <span
             className={classNames(
-              size === "xs" ? "s-text-3xl" : "s-text-4xl",
-              textColorTable[color],
-              "s-font-bold"
+              size === "xs" ? "s-heading-3xl" : "s-heading-4xl",
+              textColorTable[color]
             )}
           >
             {price}
           </span>
           <span
             className={classNames(
-              "s-font-bold s-text-foreground",
-              size === "xs" ? "s-text-base" : "s-text-lg"
+              "s-text-foreground",
+              size === "xs" ? "s-heading-base" : "s-heading-lg"
             )}
           >
             {priceLabel}

package/src/components/Sheet.tsx

@@ -221,7 +221,7 @@ const SheetTitle = React.forwardRef<
     {icon && <Icon visual={icon} size="lg" className="s-text-foreground" />}
     <SheetPrimitive.Title
       ref={ref}
-      className={cn("s-text-lg s-font-semibold", className)}
+      className={cn("s-heading-lg", className)}
       {...props}
     />
   </>

package/src/components/index.ts

@@ -5,6 +5,7 @@ export {
   AssistantCardMore,
   LargeAssistantCard,
 } from "./AssistantCard";
+export { AttachmentChip } from "./AttachmentChip";
 export { Avatar } from "./Avatar";
 export { BarHeader } from "./BarHeader";
 export { Breadcrumbs } from "./Breadcrumbs";

package/src/components/markdown/List.tsx

@@ -43,9 +43,7 @@ export function OlBlock({
   );
 }
 
-export const liBlockVariants = cva([
-  "s-break-words first:s-pt-0 last:s-pb-0 s-py-1 @md:s-py-2",
-]);
+export const liBlockVariants = cva(["s-break-words first:s-pt-0 last:s-pb-0"]);
 
 interface LiBlockProps {
   children: React.ReactNode;

package/src/components/markdown/Markdown.tsx

@@ -28,13 +28,13 @@ import { sanitizeContent } from "@sparkle/components/markdown/utils";
 import { cn } from "@sparkle/lib/utils";
 
 const sizes = {
-  p: "s-text-sm @sm:s-text-base @sm:s-leading-7",
-  h1: "s-text-3xl @sm:s-text-4xl s-font-semibold",
-  h2: "s-text-2xl @sm:s-text-3xl s-font-semibold",
-  h3: "s-text-xl @sm:s-text-2xl s-font-semibold",
-  h4: "s-text-lg @sm:s-text-xl s-font-semibold",
-  h5: "s-text-base @sm:s-text-lg s-font-semibold",
-  h6: "s-text-sm @sm:s-text-base s-font-semibold",
+  p: "s-copy-sm @sm:s-text-base @sm:s-leading-7",
+  h1: "s-heading-3xl",
+  h2: "s-heading-2xl",
+  h3: "s-heading-xl",
+  h4: "s-heading-lg",
+  h5: "s-text-base s-font-bold",
+  h6: "s-text-base s-font-regular s-italic",
 };
 
 function showUnsupportedDirective() {

package/src/stories/AttachmentChip.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { AttachmentChip } from "@sparkle/components";
+import { DocumentIcon, DocumentTextIcon } from "@sparkle/icons";
+import { NotionLogo } from "@sparkle/logo";
+
+const meta = {
+  title: "Components/AttachmentChip",
+  component: AttachmentChip,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof AttachmentChip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ParagraphWrapper = ({ children }: { children: React.ReactNode }) => (
+  <div className="s-rounded-lg s-bg-primary-50 s-p-8 s-text-base">
+    <p className="s-mb-4 s-inline-flex s-items-center s-gap-2">
+      <span className="s-font-semibold s-text-highlight">@soupi</span> here is
+      an attachment {children} for you.
+    </p>
+  </div>
+);
+
+export const Document: Story = {
+  args: {
+    label: "document.pdf",
+    icon: NotionLogo,
+  },
+  decorators: [
+    (Story) => (
+      <ParagraphWrapper>
+        <Story />
+      </ParagraphWrapper>
+    ),
+  ],
+};
+
+export const Image: Story = {
+  args: {
+    label: "image.jpg",
+    icon: NotionLogo,
+  },
+  decorators: [
+    (Story) => (
+      <ParagraphWrapper>
+        <Story />
+      </ParagraphWrapper>
+    ),
+  ],
+};
+
+export const Text: Story = {
+  args: {
+    label: "text.txt",
+    icon: DocumentTextIcon,
+  },
+  decorators: [
+    (Story) => (
+      <ParagraphWrapper>
+        <Story />
+      </ParagraphWrapper>
+    ),
+  ],
+};
+
+export const LongLabel: Story = {
+  args: {
+    label: "very_long_document_name_that_will_be_truncated.pdf",
+    icon: DocumentIcon,
+  },
+  decorators: [
+    (Story) => (
+      <ParagraphWrapper>
+        <Story />
+      </ParagraphWrapper>
+    ),
+  ],
+};

package/src/stories/ConversationMessage.stories.tsx

@@ -102,10 +102,11 @@ export const ConversationExample = () => {
 
 const example = `
 # Level 1 Title
-
 ## Level 2 Title
-
 ### Level 3 Title
+#### Level 4 Title
+##### Level 5 Title
+###### Level 6 Title
 
 This is a paragraph with **bold** text and *italic* text. This is \`code\` block:
 \`\`\`

package/src/stories/Typography.stories.tsx

@@ -33,6 +33,7 @@ const extraTextSizes = {
 };
 
 const headingSizes = {
+  base: "s-heading-base",
   lg: "s-heading-lg",
   xl: "s-heading-xl",
   "2xl": "s-heading-2xl",