@brightweblabs/ui 1.4.11 → 1.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@brightweblabs/ui",
   "private": false,
-  "version": "1.4.11",
+  "version": "1.5.0",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -78,7 +78,7 @@
     "recharts": "^2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
-    "@brightweblabs/theme": "0.8.0"
+    "@brightweblabs/theme": "0.8.1"
   },
   "peerDependencies": {
     "lucide-react": "^1.8.0",

package/src/components/card.tsx

@@ -1,28 +1,61 @@
+"use client";
+
 import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "../lib/utils";
 
-const cardVariants = cva("bg-card text-card-foreground flex flex-col rounded-xl shadow-sm", {
+const cardVariants = cva("card-root flex flex-col text-card-foreground", {
   variants: {
     variant: {
-      default: "border border-border",
-      /** Insight/blog card: borderless, overflow-hidden; hover lift handled by motion on parent */
-      insight: "!border-0 border-transparent shadow-none overflow-hidden bg-card rounded-xl",
+      default: "",
+      light: "",
+      elevated: "",
+      interactive: "",
+      /** Insight/blog card: the canonical borderless media-card treatment. */
+      insight: "",
+    },
+    density: {
+      none: "",
+      compact: "p-3",
+      default: "p-5",
+    },
+    motion: {
+      none: "",
+      enter: "card-enter",
     },
   },
   defaultVariants: {
     variant: "default",
+    density: "none",
+    motion: "none",
   },
 });
 
+export type CardProps = React.ComponentProps<"div"> & VariantProps<typeof cardVariants> & {
+  asChild?: boolean;
+};
+
 function Card({
+  asChild = false,
   className,
   variant = "default",
+  density = "none",
+  motion = "none",
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof cardVariants>) {
+}: CardProps) {
+  const Component = asChild ? Slot : "div";
+
   return (
-    <div data-slot="card" data-variant={variant} className={cn(cardVariants({ variant, className }))} {...props} />
+    <Component
+      data-slot="card"
+      data-variant={variant}
+      data-density={density}
+      data-motion={motion}
+      className={cn(cardVariants({ variant, density, motion, className }))}
+      {...props}
+    />
   );
 }
 
@@ -65,4 +98,4 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   return <div data-slot="card-footer" className={cn("flex items-center [.border-t]:pt-6", className)} {...props} />;
 }
 
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
+export { Card, cardVariants, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/src/components/surface-card.tsx

@@ -1,11 +1,26 @@
 import type { HTMLAttributes } from "react";
 
 import { cn } from "../lib/utils";
+import { Card, type CardProps } from "./card";
 
 export type SurfaceCardProps = HTMLAttributes<HTMLElement> & {
   isLight?: boolean;
+  variant?: CardProps["variant"];
+  density?: CardProps["density"];
+  motion?: CardProps["motion"];
 };
 
-export function SurfaceCard({ isLight = false, className, ...props }: SurfaceCardProps) {
-  return <article className={cn("surface-card", isLight && "is-light", className)} {...props} />;
+export function SurfaceCard({
+  isLight = false,
+  variant,
+  density = "default",
+  motion = "enter",
+  className,
+  ...props
+}: SurfaceCardProps) {
+  return (
+    <Card asChild variant={variant ?? (isLight ? "light" : "default")} density={density} motion={motion}>
+      <article className={cn("surface-card", isLight && "is-light", className)} {...props} />
+    </Card>
+  );
 }