@tribepad/themis 1.0.0

package/dist/chunk-WJGLM4CY.js

@@ -0,0 +1,291 @@
+'use strict';
+
+var chunk3YOY2VJ6_js = require('./chunk-3YOY2VJ6.js');
+var chunkVIREG536_js = require('./chunk-VIREG536.js');
+var chunkT4COXKQ3_js = require('./chunk-T4COXKQ3.js');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var zod = require('zod');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+var FlipButtonPositionSchema = zod.z.enum([
+  "top-right",
+  "top-left",
+  "bottom-right",
+  "bottom-left"
+]);
+var FlipButtonLabelSchema = zod.z.object({
+  show: zod.z.string().optional(),
+  hide: zod.z.string().optional()
+});
+var FlipButtonIconSchema = zod.z.object({
+  /** Icon to show on front side button (default: RotateCcw) */
+  front: zod.z.custom().optional(),
+  /** Icon to show on back side button (default: same as front or RotateCcw) */
+  back: zod.z.custom().optional()
+});
+var CardPropsSchema = chunkT4COXKQ3_js.BaseComponentPropsSchema.extend({
+  // Flip functionality
+  /** Enable flip animation feature */
+  flippable: zod.z.boolean().optional().default(false),
+  /** Content to display on the back side of the card */
+  backContent: zod.z.custom().optional(),
+  /** Controlled mode: current flip state */
+  isFlipped: zod.z.boolean().optional(),
+  /** Uncontrolled mode: initial flip state */
+  defaultFlipped: zod.z.boolean().optional().default(false),
+  /** Callback fired when flip state changes */
+  onFlipChange: zod.z.custom().optional(),
+  // Flip button configuration
+  /** Position of the flip button on the card */
+  flipButtonPosition: FlipButtonPositionSchema.optional().default("top-right"),
+  /** Custom labels for the flip button title attribute */
+  flipButtonLabel: FlipButtonLabelSchema.optional(),
+  /** Custom icons for the flip button (default: RotateCcw) */
+  flipButtonIcon: FlipButtonIconSchema.optional(),
+  /** Duration of flip animation in milliseconds */
+  flipDuration: zod.z.number().optional().default(600)
+});
+var CardHeaderPropsSchema = chunkT4COXKQ3_js.BaseComponentPropsSchema.extend({
+  children: zod.z.custom()
+});
+var CardTitlePropsSchema = chunkT4COXKQ3_js.BaseComponentPropsSchema.extend({
+  /** Heading level (h1-h6) - defaults to h3 */
+  as: zod.z.enum(["h1", "h2", "h3", "h4", "h5", "h6"]).optional().default("h3"),
+  children: zod.z.custom()
+});
+var CardDescriptionPropsSchema = chunkT4COXKQ3_js.BaseComponentPropsSchema.extend({
+  children: zod.z.custom()
+});
+var CardContentPropsSchema = chunkT4COXKQ3_js.BaseComponentPropsSchema.extend({
+  children: zod.z.custom()
+});
+var CardFooterPropsSchema = chunkT4COXKQ3_js.BaseComponentPropsSchema.extend({
+  children: zod.z.custom()
+});
+var CardActionPropsSchema = chunkT4COXKQ3_js.BaseComponentPropsSchema.extend({
+  children: zod.z.custom()
+});
+var flipButtonPositionVariants = classVarianceAuthority.cva(
+  [
+    "absolute z-10 min-h-[44px] min-w-[44px] p-2",
+    "flex items-center justify-center",
+    "rounded-full bg-[var(--accent-background)]",
+    "text-[var(--primary-action)] hover:text-[var(--primary-action-hover)]",
+    "transition-colors duration-200",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]"
+  ],
+  {
+    variants: {
+      position: {
+        "top-right": "top-2 right-2",
+        "top-left": "top-2 left-2",
+        "bottom-right": "bottom-2 right-2",
+        "bottom-left": "bottom-2 left-2"
+      }
+    },
+    defaultVariants: {
+      position: "top-right"
+    }
+  }
+);
+var Card = react.forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      flippable = false,
+      backContent,
+      isFlipped: controlledFlipped,
+      defaultFlipped = false,
+      onFlipChange,
+      flipButtonPosition = "top-right",
+      flipButtonLabel,
+      flipButtonIcon,
+      flipDuration = 600,
+      ...rest
+    } = props;
+    const [internalFlipped, setInternalFlipped] = react.useState(defaultFlipped);
+    const isControlled = controlledFlipped !== void 0;
+    const flipped = isControlled ? controlledFlipped : internalFlipped;
+    const handleFlip = react.useCallback(() => {
+      const newState = !flipped;
+      if (!isControlled) {
+        setInternalFlipped(newState);
+      }
+      onFlipChange?.(newState);
+    }, [flipped, isControlled, onFlipChange]);
+    if (!flippable) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "article",
+        {
+          ref,
+          className: chunkVIREG536_js.cn(
+            "rounded-lg border border-[var(--border)] bg-[var(--content-background)] text-[var(--content-foreground)] shadow-sm",
+            className
+          ),
+          ...rest,
+          children
+        }
+      );
+    }
+    const showLabel = flipButtonLabel?.show ?? "Show more details";
+    const hideLabel = flipButtonLabel?.hide ?? "Show less details";
+    const defaultIcon = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "h-5 w-5", "aria-hidden": "true" });
+    const frontIcon = flipButtonIcon?.front ?? defaultIcon;
+    const backIcon = flipButtonIcon?.back ?? flipButtonIcon?.front ?? defaultIcon;
+    const FlipButton = ({ label, icon }) => /* @__PURE__ */ jsxRuntime.jsx(
+      chunk3YOY2VJ6_js.Button,
+      {
+        variant: "ghost",
+        visualSize: "icon",
+        "aria-hidden": "true",
+        excludeFromTabOrder: true,
+        onPress: handleFlip,
+        className: flipButtonPositionVariants({ position: flipButtonPosition }),
+        "aria-label": label,
+        children: icon
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "article",
+      {
+        ref,
+        className: chunkVIREG536_js.cn("relative", className),
+        style: { perspective: "1000px" },
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: chunkVIREG536_js.cn(
+              "relative transition-transform",
+              "motion-reduce:transition-none"
+            ),
+            style: {
+              transformStyle: "preserve-3d",
+              transitionDuration: `${flipDuration}ms`,
+              transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)"
+            },
+            "data-flipped": flipped,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "relative rounded-lg border border-[var(--border)] bg-[var(--content-background)] text-[var(--content-foreground)] shadow-sm",
+                  style: { backfaceVisibility: "hidden" },
+                  "data-side": "front",
+                  children: [
+                    children,
+                    /* @__PURE__ */ jsxRuntime.jsx(FlipButton, { label: showLabel, icon: frontIcon })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "absolute inset-0 overflow-y-auto rounded-lg border border-[var(--border)] bg-[var(--content-background)] text-[var(--content-foreground)] shadow-sm",
+                  style: {
+                    backfaceVisibility: "hidden",
+                    transform: "rotateY(180deg)"
+                  },
+                  "data-side": "back",
+                  children: [
+                    backContent,
+                    /* @__PURE__ */ jsxRuntime.jsx(FlipButton, { label: hideLabel, icon: backIcon })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+var CardHeader = react.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "header",
+    {
+      ref,
+      className: chunkVIREG536_js.cn("flex flex-col space-y-1.5 p-6", className),
+      ...props,
+      children
+    }
+  )
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = react.forwardRef(
+  ({ className, as: Comp = "h3", children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      ref,
+      className: chunkVIREG536_js.cn("text-2xl font-semibold leading-none tracking-tight", className),
+      ...props,
+      children
+    }
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = react.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      ref,
+      className: chunkVIREG536_js.cn("text-sm text-[var(--content-foreground-muted)]", className),
+      ...props,
+      children
+    }
+  )
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = react.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunkVIREG536_js.cn("p-6 pt-0", className), ...props, children })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = react.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "footer",
+    {
+      ref,
+      className: chunkVIREG536_js.cn("flex items-center p-6 pt-0", className),
+      ...props,
+      children
+    }
+  )
+);
+CardFooter.displayName = "CardFooter";
+var CardAction = react.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: chunkVIREG536_js.cn("ml-auto", className),
+      ...props,
+      children
+    }
+  )
+);
+CardAction.displayName = "CardAction";
+
+exports.Card = Card;
+exports.CardAction = CardAction;
+exports.CardActionPropsSchema = CardActionPropsSchema;
+exports.CardContent = CardContent;
+exports.CardContentPropsSchema = CardContentPropsSchema;
+exports.CardDescription = CardDescription;
+exports.CardDescriptionPropsSchema = CardDescriptionPropsSchema;
+exports.CardFooter = CardFooter;
+exports.CardFooterPropsSchema = CardFooterPropsSchema;
+exports.CardHeader = CardHeader;
+exports.CardHeaderPropsSchema = CardHeaderPropsSchema;
+exports.CardPropsSchema = CardPropsSchema;
+exports.CardTitle = CardTitle;
+exports.CardTitlePropsSchema = CardTitlePropsSchema;
+exports.FlipButtonIconSchema = FlipButtonIconSchema;
+exports.FlipButtonLabelSchema = FlipButtonLabelSchema;
+exports.FlipButtonPositionSchema = FlipButtonPositionSchema;
+exports.flipButtonPositionVariants = flipButtonPositionVariants;
+//# sourceMappingURL=chunk-WJGLM4CY.js.map
+//# sourceMappingURL=chunk-WJGLM4CY.js.map

package/dist/chunk-WJGLM4CY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/Card/Card.types.ts","../src/elements/Card/Card.tsx"],"names":["z","BaseComponentPropsSchema","cva","forwardRef","useState","useCallback","jsx","cn","RotateCcw","Button","jsxs"],"mappings":"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","file":"chunk-WJGLM4CY.js","sourcesContent":["import { z } from 'zod';\nimport { cva } from 'class-variance-authority';\nimport { BaseComponentPropsSchema } from '../../schemas/BaseComponentProps';\nimport type { ReactNode } from 'react';\n\n/**\n * Flip button position variants\n * Controls where the flip button appears on the card\n *\n * @see card-prd.md US-5 (Flip Button Position)\n */\nexport const FlipButtonPositionSchema = z.enum([\n  'top-right',\n  'top-left',\n  'bottom-right',\n  'bottom-left',\n]);\nexport type FlipButtonPosition = z.infer<typeof FlipButtonPositionSchema>;\n\n/**\n * Flip button label configuration\n * Custom labels for the flip button title attribute\n *\n * @see card-prd.md US-6 (Custom Labels)\n */\nexport const FlipButtonLabelSchema = z.object({\n  show: z.string().optional(),\n  hide: z.string().optional(),\n});\nexport type FlipButtonLabel = z.infer<typeof FlipButtonLabelSchema>;\n\n/**\n * Flip button icon configuration\n * Custom icons for the front and back flip buttons\n */\nexport const FlipButtonIconSchema = z.object({\n  /** Icon to show on front side button (default: RotateCcw) */\n  front: z.custom<ReactNode>().optional(),\n  /** Icon to show on back side button (default: same as front or RotateCcw) */\n  back: z.custom<ReactNode>().optional(),\n});\nexport type FlipButtonIcon = z.infer<typeof FlipButtonIconSchema>;\n\n/**\n * Card root component props schema\n *\n * @see card-prd.md US-1 (Basic Card Container)\n * @see card-prd.md US-2 (Flippable Card)\n * @see card-prd.md US-3 (Controlled/Uncontrolled State)\n */\nexport const CardPropsSchema = BaseComponentPropsSchema.extend({\n  // Flip functionality\n  /** Enable flip animation feature */\n  flippable: z.boolean().optional().default(false),\n\n  /** Content to display on the back side of the card */\n  backContent: z.custom<ReactNode>().optional(),\n\n  /** Controlled mode: current flip state */\n  isFlipped: z.boolean().optional(),\n\n  /** Uncontrolled mode: initial flip state */\n  defaultFlipped: z.boolean().optional().default(false),\n\n  /** Callback fired when flip state changes */\n  onFlipChange: z.custom<(isFlipped: boolean) => void>().optional(),\n\n  // Flip button configuration\n  /** Position of the flip button on the card */\n  flipButtonPosition: FlipButtonPositionSchema.optional().default('top-right'),\n\n  /** Custom labels for the flip button title attribute */\n  flipButtonLabel: FlipButtonLabelSchema.optional(),\n\n  /** Custom icons for the flip button (default: RotateCcw) */\n  flipButtonIcon: FlipButtonIconSchema.optional(),\n\n  /** Duration of flip animation in milliseconds */\n  flipDuration: z.number().optional().default(600),\n});\n\nexport type CardProps = z.infer<typeof CardPropsSchema>;\n\n/**\n * CardHeader props schema\n *\n * @see card-prd.md US-1 (Basic Card Container)\n */\nexport const CardHeaderPropsSchema = BaseComponentPropsSchema.extend({\n  children: z.custom<ReactNode>(),\n});\n\nexport type CardHeaderProps = z.infer<typeof CardHeaderPropsSchema>;\n\n/**\n * CardTitle props schema\n *\n * @see card-prd.md US-1 (Basic Card Container)\n */\nexport const CardTitlePropsSchema = BaseComponentPropsSchema.extend({\n  /** Heading level (h1-h6) - defaults to h3 */\n  as: z.enum(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']).optional().default('h3'),\n\n  children: z.custom<ReactNode>(),\n});\n\nexport type CardTitleProps = z.infer<typeof CardTitlePropsSchema>;\n\n/**\n * CardDescription props schema\n *\n * @see card-prd.md US-1 (Basic Card Container)\n */\nexport const CardDescriptionPropsSchema = BaseComponentPropsSchema.extend({\n  children: z.custom<ReactNode>(),\n});\n\nexport type CardDescriptionProps = z.infer<typeof CardDescriptionPropsSchema>;\n\n/**\n * CardContent props schema\n *\n * @see card-prd.md US-1 (Basic Card Container)\n */\nexport const CardContentPropsSchema = BaseComponentPropsSchema.extend({\n  children: z.custom<ReactNode>(),\n});\n\nexport type CardContentProps = z.infer<typeof CardContentPropsSchema>;\n\n/**\n * CardFooter props schema\n *\n * @see card-prd.md US-1 (Basic Card Container)\n */\nexport const CardFooterPropsSchema = BaseComponentPropsSchema.extend({\n  children: z.custom<ReactNode>(),\n});\n\nexport type CardFooterProps = z.infer<typeof CardFooterPropsSchema>;\n\n/**\n * CardAction props schema\n *\n * @see card-prd.md US-1 (Basic Card Container)\n */\nexport const CardActionPropsSchema = BaseComponentPropsSchema.extend({\n  children: z.custom<ReactNode>(),\n});\n\nexport type CardActionProps = z.infer<typeof CardActionPropsSchema>;\n\n/**\n * CVA variants for flip button positioning\n *\n * Provides consistent positioning classes for the flip button\n * based on the flipButtonPosition prop.\n *\n * Buttons are rendered INSIDE both front and back sides so they\n * flip along with the card content for a more natural feel.\n *\n * @see card-prd.md US-5 (Flip Button Position)\n */\nexport const flipButtonPositionVariants = cva(\n  [\n    'absolute z-10 min-h-[44px] min-w-[44px] p-2',\n    'flex items-center justify-center',\n    'rounded-full bg-[var(--accent-background)]',\n    'text-[var(--primary-action)] hover:text-[var(--primary-action-hover)]',\n    'transition-colors duration-200',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]',\n  ],\n  {\n    variants: {\n      position: {\n        'top-right': 'top-2 right-2',\n        'top-left': 'top-2 left-2',\n        'bottom-right': 'bottom-2 right-2',\n        'bottom-left': 'bottom-2 left-2',\n      },\n    },\n    defaultVariants: {\n      position: 'top-right',\n    },\n  }\n);\n","/**\n * Card Component (TDD Stub)\n *\n * This is a minimal stub to allow tests to run during the RED phase.\n * Full implementation will be added in the GREEN phase.\n *\n * @see card-prd.md (Product Requirements)\n * @see plan.md (Implementation Plan)\n */\n\nimport { forwardRef, useState, useCallback, type HTMLAttributes, type ReactNode } from 'react';\nimport { RotateCcw } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport {\n  flipButtonPositionVariants,\n  type CardProps,\n  type CardHeaderProps,\n  type CardTitleProps,\n  type CardDescriptionProps,\n  type CardContentProps,\n  type CardFooterProps,\n  type CardActionProps,\n} from './Card.types';\n\n// ============================================================================\n// Card (Root Component)\n// ============================================================================\n\nexport const Card = forwardRef<HTMLElement, CardProps & HTMLAttributes<HTMLElement>>(\n  (props, ref) => {\n    const {\n      children,\n      className,\n      flippable = false,\n      backContent,\n      isFlipped: controlledFlipped,\n      defaultFlipped = false,\n      onFlipChange,\n      flipButtonPosition = 'top-right',\n      flipButtonLabel,\n      flipButtonIcon,\n      flipDuration = 600,\n      ...rest\n    } = props;\n\n    // Controlled/uncontrolled state\n    const [internalFlipped, setInternalFlipped] = useState(defaultFlipped);\n    const isControlled = controlledFlipped !== undefined;\n    const flipped = isControlled ? controlledFlipped : internalFlipped;\n\n    const handleFlip = useCallback(() => {\n      const newState = !flipped;\n      if (!isControlled) {\n        setInternalFlipped(newState);\n      }\n      onFlipChange?.(newState);\n    }, [flipped, isControlled, onFlipChange]);\n\n    // Non-flippable card\n    if (!flippable) {\n      return (\n        <article\n          ref={ref}\n          className={cn(\n            'rounded-lg border border-[var(--border)] bg-[var(--content-background)] text-[var(--content-foreground)] shadow-sm',\n            className\n          )}\n          {...rest}\n        >\n          {children}\n        </article>\n      );\n    }\n\n    // Flippable card\n    const showLabel = flipButtonLabel?.show ?? 'Show more details';\n    const hideLabel = flipButtonLabel?.hide ?? 'Show less details';\n\n    // Default icon\n    const defaultIcon = <RotateCcw className=\"h-5 w-5\" aria-hidden=\"true\" />;\n    // Custom icons (back defaults to front if not specified)\n    const frontIcon = flipButtonIcon?.front ?? defaultIcon;\n    const backIcon = flipButtonIcon?.back ?? flipButtonIcon?.front ?? defaultIcon;\n\n    // Flip button component - rendered on both front and back\n    const FlipButton = ({ label, icon }: { label: string; icon: ReactNode }) => (\n      <Button\n        variant=\"ghost\"\n        visualSize=\"icon\"\n        aria-hidden=\"true\"\n        excludeFromTabOrder\n        onPress={handleFlip}\n        className={flipButtonPositionVariants({ position: flipButtonPosition })}\n        aria-label={label}\n      >\n        {icon}\n      </Button>\n    );\n\n    return (\n      <article\n        ref={ref}\n        className={cn('relative', className)}\n        style={{ perspective: '1000px' }}\n        {...rest}\n      >\n        {/* Flipper container - handles 3D transform */}\n        <div\n          className={cn(\n            'relative transition-transform',\n            'motion-reduce:transition-none'\n          )}\n          style={{\n            transformStyle: 'preserve-3d',\n            transitionDuration: `${flipDuration}ms`,\n            transform: flipped ? 'rotateY(180deg)' : 'rotateY(0deg)',\n          }}\n          data-flipped={flipped}\n        >\n          {/* Front side */}\n          <div\n            className=\"relative rounded-lg border border-[var(--border)] bg-[var(--content-background)] text-[var(--content-foreground)] shadow-sm\"\n            style={{ backfaceVisibility: 'hidden' }}\n            data-side=\"front\"\n          >\n            {children}\n            <FlipButton label={showLabel} icon={frontIcon} />\n          </div>\n\n          {/* Back side - scrollable if content overflows */}\n          <div\n            className=\"absolute inset-0 overflow-y-auto rounded-lg border border-[var(--border)] bg-[var(--content-background)] text-[var(--content-foreground)] shadow-sm\"\n            style={{\n              backfaceVisibility: 'hidden',\n              transform: 'rotateY(180deg)',\n            }}\n            data-side=\"back\"\n          >\n            {backContent}\n            <FlipButton label={hideLabel} icon={backIcon} />\n          </div>\n        </div>\n      </article>\n    );\n  }\n);\n\nCard.displayName = 'Card';\n\n// ============================================================================\n// CardHeader\n// ============================================================================\n\nexport const CardHeader = forwardRef<HTMLElement, CardHeaderProps & HTMLAttributes<HTMLElement>>(\n  ({ className, children, ...props }, ref) => (\n    <header\n      ref={ref}\n      className={cn('flex flex-col space-y-1.5 p-6', className)}\n      {...props}\n    >\n      {children}\n    </header>\n  )\n);\n\nCardHeader.displayName = 'CardHeader';\n\n// ============================================================================\n// CardTitle\n// ============================================================================\n\nexport const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps & HTMLAttributes<HTMLHeadingElement>>(\n  ({ className, as: Comp = 'h3', children, ...props }, ref) => (\n    <Comp\n      ref={ref}\n      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n);\n\nCardTitle.displayName = 'CardTitle';\n\n// ============================================================================\n// CardDescription\n// ============================================================================\n\nexport const CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps & HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, children, ...props }, ref) => (\n    <p\n      ref={ref}\n      className={cn('text-sm text-[var(--content-foreground-muted)]', className)}\n      {...props}\n    >\n      {children}\n    </p>\n  )\n);\n\nCardDescription.displayName = 'CardDescription';\n\n// ============================================================================\n// CardContent\n// ============================================================================\n\nexport const CardContent = forwardRef<HTMLDivElement, CardContentProps & HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => (\n    <div ref={ref} className={cn('p-6 pt-0', className)} {...props}>\n      {children}\n    </div>\n  )\n);\n\nCardContent.displayName = 'CardContent';\n\n// ============================================================================\n// CardFooter\n// ============================================================================\n\nexport const CardFooter = forwardRef<HTMLElement, CardFooterProps & HTMLAttributes<HTMLElement>>(\n  ({ className, children, ...props }, ref) => (\n    <footer\n      ref={ref}\n      className={cn('flex items-center p-6 pt-0', className)}\n      {...props}\n    >\n      {children}\n    </footer>\n  )\n);\n\nCardFooter.displayName = 'CardFooter';\n\n// ============================================================================\n// CardAction\n// ============================================================================\n\nexport const CardAction = forwardRef<HTMLDivElement, CardActionProps & HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('ml-auto', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n);\n\nCardAction.displayName = 'CardAction';\n"]}