feat(prompt): cascade size properties (#30)

Co-authored-by: 苏向夜 <[email protected]>

Author: Raven-Book

.changes/fix-prompt.md

@@ -0,0 +1,5 @@
+---
+"@matechat/react": patch:fix
+---
+
+adjust title/description font-size to match the prompt component

playground/src/Chat.tsx

@@ -1,4 +1,4 @@
-import { MessageSquarePlus, MessageSquareWarning } from "lucide-react";
+import { MessageSquarePlus } from "lucide-react";
 import { useState } from "react";
 import { BubbleList } from "../../dist/bubble";
 import { Button } from "../../dist/button";
@@ -73,21 +73,15 @@ export function Chat() {
             }
           />
           {messages.length === 0 && (
-            <Prompts className="mx-10">
-              <Prompt size="md" className="max-w-xs">
-                <PromptTitle>
-                  <MessageSquareWarning />
-                  Understanding the Transformer Model
-                </PromptTitle>
+            <Prompts>
+              <Prompt>
+                <PromptTitle>Understanding the Transformer Model</PromptTitle>
                 <PromptDescription>
                   Give a detailed analysis of the Transformer model.
                 </PromptDescription>
               </Prompt>
-              <Prompt className="max-w-xs">
-                <PromptTitle>
-                  <MessageSquareWarning />
-                  Understanding the Attention Mechanism
-                </PromptTitle>
+              <Prompt size="xs">
+                <PromptTitle>Understanding the Attention Mechanism</PromptTitle>
                 <PromptDescription>
                   Explain the attention mechanism in neural networks.
                 </PromptDescription>

src/prompt.tsx

@@ -5,16 +5,31 @@ import clsx from "clsx";
 import type * as React from "react";
 import { twMerge } from "tailwind-merge";
 
+const promptsVariants = cva("flex", {
+  variants: {
+    size: {
+      xs: "gap-2",
+      sm: "gap-3",
+      default: "gap-4",
+      md: "gap-4",
+      lg: "gap-5",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
 const promptVariants = cva(
-  "flex flex-col gap-1 justify-center rounded-md border border-gray-300 shadow-sm",
+  "flex flex-col justify-center bg-white border border-gray-200 rounded-lg hover:border-gray-300 hover:shadow-sm transition-all duration-150 cursor-pointer",
   {
     variants: {
       size: {
-        default: "px-4 py-2",
-        lg: "px-6 py-4 text-lg",
-        md: "px-4 py-2 text-base",
-        sm: "px-2 py-1 text-sm",
-        xs: "px-1 py-0.5 text-xs",
+        xs: "px-3 py-2 gap-1",
+        sm: "px-4 py-2.5 gap-1.5",
+        default: "px-4 py-3 gap-2",
+        md: "px-5 py-3.5 gap-2",
+        lg: "px-6 py-4 gap-2.5",
       },
     },
     defaultVariants: {
@@ -23,24 +38,59 @@ const promptVariants = cva(
   },
 );
 
-export function Prompts({ className, ...props }: React.ComponentProps<"div">) {
+const promptTitleVariants = cva("font-medium text-gray-900", {
+  variants: {
+    size: {
+      xs: "text-sm",
+      sm: "text-base",
+      default: "text-base",
+      md: "text-lg",
+      lg: "text-xl",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+const promptDescriptionVariants = cva("text-gray-600", {
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      default: "text-sm",
+      md: "text-base",
+      lg: "text-base",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+export function Prompts({
+  className,
+  size,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof promptsVariants>) {
   return (
     <div
       data-slot="prompts"
-      className={twMerge(clsx("flex flex-row flex-wrap gap-4", className))}
+      className={twMerge(clsx(promptsVariants({ size }), className))}
       {...props}
     />
   );
 }
 
 export function Prompt({
   className,
-  size,
+  size = "default",
   ...props
 }: React.ComponentProps<"div"> & VariantProps<typeof promptVariants>) {
   return (
     <div
       data-slot="prompt"
+      data-size={size}
       className={twMerge(clsx(promptVariants({ size, className })))}
       {...props}
     />
@@ -49,27 +99,51 @@ export function Prompt({
 
 export function PromptTitle({
   className,
+  size,
   ...props
-}: React.ComponentProps<"h3">) {
+}: React.ComponentProps<"h3"> & VariantProps<typeof promptTitleVariants>) {
+  const computedClassName = size
+    ? twMerge(clsx(promptTitleVariants({ size, className })))
+    : twMerge(
+        clsx(
+          "font-medium text-gray-900",
+          "[div[data-size='xs']_&]:text-sm",
+          "[div[data-size='sm']_&]:text-base",
+          "[div[data-size='default']_&]:text-base",
+          "[div[data-size='md']_&]:text-lg",
+          "[div[data-size='lg']_&]:text-xl",
+          className,
+        ),
+      );
+
   return (
-    <h3
-      data-slot="prompt-title"
-      className={twMerge(
-        clsx("inline-flex items-center font-semibold gap-3", className),
-      )}
-      {...props}
-    />
+    <h3 data-slot="prompt-title" className={computedClassName} {...props} />
   );
 }
 
 export function PromptDescription({
   className,
+  size,
   ...props
-}: React.ComponentProps<"p">) {
+}: React.ComponentProps<"p"> & VariantProps<typeof promptDescriptionVariants>) {
+  const computedClassName = size
+    ? twMerge(clsx(promptDescriptionVariants({ size, className })))
+    : twMerge(
+        clsx(
+          "text-gray-600",
+          "[div[data-size='xs']_&]:text-xs",
+          "[div[data-size='sm']_&]:text-sm",
+          "[div[data-size='default']_&]:text-sm",
+          "[div[data-size='md']_&]:text-base",
+          "[div[data-size='lg']_&]:text-base",
+          className,
+        ),
+      );
+
   return (
     <p
       data-slot="prompt-description"
-      className={twMerge(clsx("text-sm text-gray-500", className))}
+      className={computedClassName}
       {...props}
     />
   );

tests/index.test.tsx

@@ -30,6 +30,7 @@ test("single prompt", () => {
   );
   expect(titleElement).toBeInTheDocument();
   expect(descriptionElement).toBeInTheDocument();
-  expect(titleElement).toHaveClass("inline-flex font-semibold");
+  expect(titleElement).toHaveClass("font-medium", "text-gray-900");
   expect(titleElement.tagName).toBe("H3");
+  expect(descriptionElement).toHaveClass("text-gray-600");
 });