@startsimpli/ui 0.4.93 → 0.4.95

package/src/components/ui/card.tsx

@@ -1,6 +1,8 @@
 import * as React from "react"
 
 import { cn } from "../../lib/utils"
+import { Caveat } from "../states/Caveat"
+import { Footnote } from "../states/Footnote"
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -17,12 +19,41 @@ const Card = React.forwardRef<
 ))
 Card.displayName = "Card"
 
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
-))
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * A qualification of what this card shows. Collapses to a marker at the end
+   * of the header and expands on demand — the card's canonical caveat slot, so
+   * apps stop putting the caveat in the body at the weight of the data.
+   */
+  caveat?: React.ReactNode
+  /**
+   * A caveat that belongs to the whole section. Inside a `FootnoteScope` it is
+   * printed once beneath the section rather than once per card.
+   */
+  note?: string
+}
+
+const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ className, caveat, note, children, ...props }, ref) => {
+    const hasCaveat = Boolean(caveat || note)
+
+    return (
+      <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props}>
+        {hasCaveat ? (
+          <div className="flex items-start justify-between gap-2">
+            <div className="flex min-w-0 flex-col space-y-1.5">{children}</div>
+            <span className="flex shrink-0 items-center">
+              {caveat ? <Caveat>{caveat}</Caveat> : null}
+              {note ? <Footnote note={note} /> : null}
+            </span>
+          </div>
+        ) : (
+          children
+        )}
+      </div>
+    )
+  }
+)
 CardHeader.displayName = "CardHeader"
 
 const CardTitle = React.forwardRef<