styles-update

dist/Card/Card.d.ts

@@ -2,7 +2,19 @@ import React from 'react';
 export interface CardProps {
     children: React.ReactNode;
     className?: string;
-    padding?: 'none' | 'sm' | 'md' | 'lg';
+    hover?: boolean;
 }
 export declare const Card: React.FC<CardProps>;
+export declare const CardHeader: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+export declare const CardContent: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+export declare const CardFooter: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
 export default Card;

dist/Card/Card.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Card = ({ children, className = '', padding = 'md' }) => {
-    const paddingClasses = {
-        none: '',
-        sm: 'p-3',
-        md: 'p-6',
-        lg: 'p-8'
-    };
-    return (_jsx("div", { className: `bg-white rounded-xl shadow-lg border border-gray-200 ${paddingClasses[padding]} ${className}`, children: children }));
+export const Card = ({ children, className = '', hover = false }) => {
+    return (_jsx("div", { className: `
+      bg-white rounded-xl border border-gray-200 shadow-sm 
+      ${hover ? 'hover:shadow-md transition-shadow duration-200' : ''}
+      ${className}
+    `, children: children }));
 };
+export const CardHeader = ({ children, className = '' }) => (_jsx("div", { className: `p-6 pb-4 ${className}`, children: children }));
+export const CardContent = ({ children, className = '' }) => (_jsx("div", { className: `p-6 pt-0 ${className}`, children: children }));
+export const CardFooter = ({ children, className = '' }) => (_jsx("div", { className: `p-6 pt-4 border-t border-gray-100 ${className}`, children: children }));
 export default Card;