@neynar/ui 0.1.1 → 0.1.2

package/src/components/ui/card.tsx

@@ -2,6 +2,90 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+/**
+ * Props for Card component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace HTML element inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type CardDocsProps = {
+  /** Additional CSS classes for custom styling */
+  className?: string;
+  /** Card content including headers, content, and footers */
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Props for CardHeader component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace HTML element inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type CardHeaderDocsProps = {
+  /** Additional CSS classes for custom styling */
+  className?: string;
+  /** Header content including title, description, and actions */
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Props for CardTitle component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace HTML element inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type CardTitleDocsProps = {
+  /** Additional CSS classes for custom styling */
+  className?: string;
+  /** The title text or content */
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Props for CardDescription component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace HTML element inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type CardDescriptionDocsProps = {
+  /** Additional CSS classes for custom styling */
+  className?: string;
+  /** The description text or content */
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Props for CardAction component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace HTML element inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type CardActionDocsProps = {
+  /** Additional CSS classes for custom styling */
+  className?: string;
+  /** Action elements like buttons, badges, or dropdown menus */
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Props for CardContent component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace HTML element inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type CardContentDocsProps = {
+  /** Additional CSS classes for custom styling */
+  className?: string;
+  /** Main content of the card */
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Props for CardFooter component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace HTML element inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type CardFooterDocsProps = {
+  /** Additional CSS classes for custom styling */
+  className?: string;
+  /** Footer content including actions and supplementary information */
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
 /**
  * Card - A flexible container component for grouping related content
  *
@@ -96,9 +180,6 @@ import { cn } from "@/lib/utils";
  * - Screen reader friendly with clear content structure
  * - Focus management handled by interactive child components
  *
- * @param {string} [className] - Additional CSS classes to apply to the card
- * @param {React.HTMLAttributes<HTMLDivElement>} props - Standard HTML div attributes
- *
  * @see {@link CardHeader} - Card header container with grid layout support
  * @see {@link CardTitle} - Card title component for main headings
  * @see {@link CardDescription} - Card description component for supplementary text
@@ -108,7 +189,11 @@ import { cn } from "@/lib/utils";
  * @see {@link https://ui.shadcn.com/docs/components/card} - shadcn/ui Card documentation
  * @since 1.0.0
  */
-function Card({ className, ...props }: React.ComponentProps<"div">) {
+function Card({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
       data-slot="card"
@@ -117,7 +202,9 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
         className,
       )}
       {...props}
-    />
+    >
+      {children}
+    </div>
   );
 }
 
@@ -164,11 +251,13 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
  * - Grid layout preserves reading order for screen readers
  * - Action buttons maintain focus order
  *
- * @param {string} [className] - Additional CSS classes to apply
- * @param {React.HTMLAttributes<HTMLDivElement>} props - Standard HTML div attributes
  * @since 1.0.0
  */
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+function CardHeader({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
       data-slot="card-header"
@@ -177,7 +266,9 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
         className,
       )}
       {...props}
-    />
+    >
+      {children}
+    </div>
   );
 }
 
@@ -207,17 +298,21 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  * - Should maintain logical heading hierarchy in the document
  * - Screen readers will identify this as the card's main topic
  *
- * @param {string} [className] - Additional CSS classes to apply
- * @param {React.HTMLAttributes<HTMLDivElement>} props - Standard HTML div attributes
  * @since 1.0.0
  */
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+function CardTitle({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
       data-slot="card-title"
       className={cn("leading-none font-semibold", className)}
       {...props}
-    />
+    >
+      {children}
+    </div>
   );
 }
 
@@ -250,17 +345,21 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  * - Uses muted color that maintains sufficient contrast
  * - Should be descriptive and concise
  *
- * @param {string} [className] - Additional CSS classes to apply
- * @param {React.HTMLAttributes<HTMLDivElement>} props - Standard HTML div attributes
  * @since 1.0.0
  */
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+function CardDescription({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
       data-slot="card-description"
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
-    />
+    >
+      {children}
+    </div>
   );
 }
 
@@ -318,11 +417,13 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  * - Maintains logical tab order
  * - Icon-only buttons should include aria-label
  *
- * @param {string} [className] - Additional CSS classes to apply
- * @param {React.HTMLAttributes<HTMLDivElement>} props - Standard HTML div attributes
  * @since 1.0.0
  */
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+function CardAction({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
       data-slot="card-action"
@@ -331,7 +432,9 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
         className,
       )}
       {...props}
-    />
+    >
+      {children}
+    </div>
   );
 }
 
@@ -367,17 +470,17 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  * - Should maintain logical content structure
  * - Interactive elements should have proper focus management
  *
- * @param {string} [className] - Additional CSS classes to apply
- * @param {React.HTMLAttributes<HTMLDivElement>} props - Standard HTML div attributes
  * @since 1.0.0
  */
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+function CardContent({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
+    <div data-slot="card-content" className={cn("px-6", className)} {...props}>
+      {children}
+    </div>
   );
 }
 
@@ -422,17 +525,21 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  * - Maintains logical tab order for interactive elements
  * - Consider aria-label for icon-only buttons
  *
- * @param {string} [className] - Additional CSS classes to apply
- * @param {React.HTMLAttributes<HTMLDivElement>} props - Standard HTML div attributes
  * @since 1.0.0
  */
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+function CardFooter({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
       data-slot="card-footer"
       className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
       {...props}
-    />
+    >
+      {children}
+    </div>
   );
 }