import React from "react";
import { View } from "react-native";
import { cn } from "../utils/cn";
import { Text } from "./text";
/** Card container with border and shadow. Dark-mode aware. */
export function Card({ className, children, ...props }) {
    return (<View className={cn(
        // Full opacity, not the previous `/50` — every consumer of Card
        // sits on a plain `dark:bg-black` screen (every auth screen,
        // Settings, Profile), where a 50%-transparent near-black fill
        // is nearly indistinguishable from the background itself.
        // Reported as real: "the contrast is not great" on the mobile
        // Profile screen, 2026-08-17.
        "rounded-lg border border-border dark:border-neutral-800 bg-card dark:bg-neutral-900", "shadow-sm shadow-foreground/10", className)} {...props}>
      {children}
    </View>);
}
export function CardHeader({ className, children, ...props }) {
    return (<View className={cn("p-6 pb-4", className)} {...props}>
      {children}
    </View>);
}
export function CardContent({ className, children, ...props }) {
    return (<View className={cn("px-6 pb-6", className)} {...props}>
      {children}
    </View>);
}
export function CardFooter({ className, children, ...props }) {
    return (<View className={cn("flex-row items-center justify-end px-6 pb-6 pt-2", "border-t border-border dark:border-neutral-800", className)} {...props}>
      {children}
    </View>);
}
export function CardTitle({ className, children }) {
    return (<Text className={cn("text-xl font-semibold text-foreground dark:text-white", className)}>
      {children}
    </Text>);
}
export function CardDescription({ className, children }) {
    return (<Text className={cn("text-sm text-muted-foreground dark:text-neutral-400 mt-2", className)}>
      {children}
    </Text>);
}
//# sourceMappingURL=card.jsx.map