@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
49 lines (48 loc) • 2.17 kB
JavaScript
"use client";
import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { cn } from "../../lib/utilities.js";
const Card = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
ref: ref,
className: cn("rounded-xl border border-neutral-200 bg-white text-neutral-950 shadow dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50", className),
...props
}));
Card.displayName = "Card";
const CardHeader = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
ref: ref,
className: cn("flex flex-col space-y-1.5 p-6", className),
...props
}));
CardHeader.displayName = "CardHeader";
const CardTitle = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
ref: ref,
className: cn("leading-none font-semibold tracking-tight", className),
...props
}));
CardTitle.displayName = "CardTitle";
const CardDescription = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
ref: ref,
className: cn("text-sm text-neutral-500 dark:text-neutral-400", className),
...props
}));
CardDescription.displayName = "CardDescription";
const CardContent = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
ref: ref,
className: cn("p-6 pt-0", className),
...props
}));
CardContent.displayName = "CardContent";
const CardFooter = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
ref: ref,
className: cn("flex items-center p-6 pt-0", className),
...props
}));
CardFooter.displayName = "CardFooter";
const CardAction = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
ref: ref,
className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
...props
}));
CardAction.displayName = "CardAction";
export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
//# sourceMappingURL=card.js.map