@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/card/index.d.ts

@@ -0,0 +1,406 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as React from 'react';
+
+declare const cardVariants: tailwind_variants.TVReturnType<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+        /**
+         * Profile layout - square image with stacked content below.
+         * Ideal for team member cards, user profiles, testimonials.
+         */
+        profile: string;
+        /**
+         * Compact layout - small thumbnail with condensed horizontal content.
+         * Ideal for news items, article previews, resource lists.
+         */
+        compact: string;
+    };
+}, undefined, "relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid", tailwind_variants_dist_config_js.TVConfig<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+        /**
+         * Profile layout - square image with stacked content below.
+         * Ideal for team member cards, user profiles, testimonials.
+         */
+        profile: string;
+        /**
+         * Compact layout - small thumbnail with condensed horizontal content.
+         * Ideal for news items, article previews, resource lists.
+         */
+        compact: string;
+    };
+}, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+        /**
+         * Profile layout - square image with stacked content below.
+         * Ideal for team member cards, user profiles, testimonials.
+         */
+        profile: string;
+        /**
+         * Compact layout - small thumbnail with condensed horizontal content.
+         * Ideal for news items, article previews, resource lists.
+         */
+        compact: string;
+    };
+}>, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+        /**
+         * Profile layout - square image with stacked content below.
+         * Ideal for team member cards, user profiles, testimonials.
+         */
+        profile: string;
+        /**
+         * Compact layout - small thumbnail with condensed horizontal content.
+         * Ideal for news items, article previews, resource lists.
+         */
+        compact: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+        /**
+         * Profile layout - square image with stacked content below.
+         * Ideal for team member cards, user profiles, testimonials.
+         */
+        profile: string;
+        /**
+         * Compact layout - small thumbnail with condensed horizontal content.
+         * Ideal for news items, article previews, resource lists.
+         */
+        compact: string;
+    };
+}, undefined, "relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid", tailwind_variants_dist_config_js.TVConfig<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+        /**
+         * Profile layout - square image with stacked content below.
+         * Ideal for team member cards, user profiles, testimonials.
+         */
+        profile: string;
+        /**
+         * Compact layout - small thumbnail with condensed horizontal content.
+         * Ideal for news items, article previews, resource lists.
+         */
+        compact: string;
+    };
+}, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+        /**
+         * Profile layout - square image with stacked content below.
+         * Ideal for team member cards, user profiles, testimonials.
+         */
+        profile: string;
+        /**
+         * Compact layout - small thumbnail with condensed horizontal content.
+         * Ideal for news items, article previews, resource lists.
+         */
+        compact: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+}
+/**
+ * Card component for displaying content in a contained, scannable format.
+ *
+ * Layouts:
+ * - vertical: Image on top, content below (default)
+ * - horizontal: Image on left, content on right
+ * - overlay: Full-bleed background with content on top
+ *
+ * Use with CardImage, CardContent, CardEyebrow, CardTitle, CardDescription, and CardActions.
+ * For overlay layout, use Background components for full-bleed backgrounds.
+ */
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const cardImageVariants: tailwind_variants.TVReturnType<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        overlay: string;
+        /** Profile: square aspect ratio for headshots/avatars */
+        profile: string;
+        /** Compact: fixed small size for thumbnails */
+        compact: string;
+    };
+}, undefined, "relative shrink-0 bg-bg-muted", tailwind_variants_dist_config_js.TVConfig<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        overlay: string;
+        /** Profile: square aspect ratio for headshots/avatars */
+        profile: string;
+        /** Compact: fixed small size for thumbnails */
+        compact: string;
+    };
+}, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+        overlay: string;
+        /** Profile: square aspect ratio for headshots/avatars */
+        profile: string;
+        /** Compact: fixed small size for thumbnails */
+        compact: string;
+    };
+}>, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+        overlay: string;
+        /** Profile: square aspect ratio for headshots/avatars */
+        profile: string;
+        /** Compact: fixed small size for thumbnails */
+        compact: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        overlay: string;
+        /** Profile: square aspect ratio for headshots/avatars */
+        profile: string;
+        /** Compact: fixed small size for thumbnails */
+        compact: string;
+    };
+}, undefined, "relative shrink-0 bg-bg-muted", tailwind_variants_dist_config_js.TVConfig<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        overlay: string;
+        /** Profile: square aspect ratio for headshots/avatars */
+        profile: string;
+        /** Compact: fixed small size for thumbnails */
+        compact: string;
+    };
+}, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+        overlay: string;
+        /** Profile: square aspect ratio for headshots/avatars */
+        profile: string;
+        /** Compact: fixed small size for thumbnails */
+        compact: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface CardImageProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardImageVariants> {
+    /**
+     * The image source URL
+     */
+    src?: string;
+    /**
+     * Alt text for the image
+     */
+    alt?: string;
+}
+/**
+ * Card image area with layout-specific styling.
+ * - vertical: 16:9 aspect ratio, full width
+ * - horizontal: ~40% width, stretches to content height
+ * - profile: square aspect ratio for headshots/avatars
+ * - compact: fixed small size for thumbnails
+ */
+declare const CardImage: React.ForwardRefExoticComponent<CardImageProps & React.RefAttributes<HTMLDivElement>>;
+declare const cardContentVariants: tailwind_variants.TVReturnType<{
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, undefined, "flex w-full flex-1 flex-col gap-spatial-card-large-gap p-spatial-card-large-padding", tailwind_variants_dist_config_js.TVConfig<{
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, {
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}>, {
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, undefined, "flex w-full flex-1 flex-col gap-spatial-card-large-gap p-spatial-card-large-padding", tailwind_variants_dist_config_js.TVConfig<{
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, {
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardContentVariants> {
+}
+/**
+ * Card content container with proper padding and spacing.
+ * Uses spatial card tokens for consistent sizing.
+ * For overlay layout, add `relative z-10` to ensure content sits above background.
+ *
+ * @example
+ * ```tsx
+ * // Content at bottom of overlay card
+ * <Card layout="overlay">
+ *   <Background.Image src="/hero.jpg" />
+ *   <CardContent justify="end" className="relative z-10">
+ *     <CardTitle>Title</CardTitle>
+ *   </CardContent>
+ * </Card>
+ * ```
+ */
+declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const cardEyebrowVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "typography-overline text-text-muted uppercase tracking-wider", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "typography-overline text-text-muted uppercase tracking-wider", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface CardEyebrowProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+/**
+ * Optional eyebrow text above the card title.
+ */
+declare const CardEyebrow: React.ForwardRefExoticComponent<CardEyebrowProps & React.RefAttributes<HTMLParagraphElement>>;
+declare const cardTitleVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "typography-h5 text-text-primary", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "typography-h5 text-text-primary", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * The heading level to render (h1-h6). Defaults to h3.
+     */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}
+/**
+ * Card title/heading. Use the `as` prop to change the heading level.
+ */
+declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+declare const cardDescriptionVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "typography-body-small text-text-secondary", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "typography-body-small text-text-secondary", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+/**
+ * Card body/description text.
+ */
+declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+declare const cardBodyVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "flex w-full flex-col gap-spatial-card-small-gap", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "flex w-full flex-col gap-spatial-card-small-gap", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Container for card text content (eyebrow, title, description).
+ * Uses spatial card tokens for consistent sizing.
+ */
+declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
+declare const cardActionsVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "flex gap-12", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "flex gap-12", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Container for card action buttons.
+ * Uses primitive spacing tokens.
+ */
+declare const CardActions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
+declare const cardLinkVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "group/link flex items-center gap-4 text-text-muted transition-colors duration-200 hover:text-text-primary", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "group/link flex items-center gap-4 text-text-muted transition-colors duration-200 hover:text-text-primary", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface CardLinkProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Whether to show the arrow indicator
+     * @default true
+     */
+    showArrow?: boolean;
+}
+/**
+ * Inline link element for cards with optional animated arrow.
+ * Commonly used for "Read More →" or "Learn More →" patterns.
+ *
+ * @example
+ * ```tsx
+ * <Card layout="compact">
+ *   <CardImage src="/thumb.jpg" layout="compact" />
+ *   <CardContent>
+ *     <CardTitle>Article Title</CardTitle>
+ *     <CardLink>Read More</CardLink>
+ *   </CardContent>
+ * </Card>
+ * ```
+ */
+declare const CardLink: React.ForwardRefExoticComponent<CardLinkProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Card, CardActions, type CardActionsProps, CardBody, type CardBodyProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardEyebrow, type CardEyebrowProps, CardImage, type CardImageProps, CardLink, type CardLinkProps, type CardProps, CardTitle, type CardTitleProps, cardActionsVariants, cardBodyVariants, cardContentVariants, cardDescriptionVariants, cardEyebrowVariants, cardImageVariants, cardLinkVariants, cardTitleVariants, cardVariants };

package/dist/card/index.js

@@ -0,0 +1,219 @@
+import * as React from 'react';
+import { tv } from 'tailwind-variants';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/organisms/card/card.tsx
+var cardVariants = tv({
+  base: "relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid",
+  variants: {
+    layout: {
+      vertical: "w-full flex-col",
+      horizontal: "w-full flex-row",
+      /**
+       * Overlay layout - content sits on top of full-bleed background.
+       * Use with Background components for images/gradients.
+       */
+      overlay: "w-full flex-col",
+      /**
+       * Profile layout - square image with stacked content below.
+       * Ideal for team member cards, user profiles, testimonials.
+       */
+      profile: "w-full flex-col",
+      /**
+       * Compact layout - small thumbnail with condensed horizontal content.
+       * Ideal for news items, article previews, resource lists.
+       */
+      compact: "w-full flex-row items-center gap-16"
+    }
+  },
+  defaultVariants: {
+    layout: "vertical"
+  }
+});
+var Card = React.forwardRef(
+  ({ className, layout, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cardVariants({ layout, class: className }),
+        ...props
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+var cardImageVariants = tv({
+  base: "relative shrink-0 bg-bg-muted",
+  variants: {
+    layout: {
+      vertical: "aspect-video w-full",
+      horizontal: "aspect-auto w-2/5 self-stretch",
+      overlay: "aspect-video w-full",
+      /** Profile: square aspect ratio for headshots/avatars */
+      profile: "aspect-square w-full",
+      /** Compact: fixed small size for thumbnails */
+      compact: "size-80 rounded-8"
+    }
+  },
+  defaultVariants: {
+    layout: "vertical"
+  }
+});
+var CardImage = React.forwardRef(
+  ({ className, src, alt = "", layout, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cardImageVariants({ layout, class: className }),
+        ...props,
+        children: src && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt,
+            className: "absolute inset-0 size-full object-cover"
+          }
+        )
+      }
+    );
+  }
+);
+CardImage.displayName = "CardImage";
+var cardContentVariants = tv({
+  base: "flex w-full flex-1 flex-col gap-spatial-card-large-gap p-spatial-card-large-padding",
+  variants: {
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end"
+    }
+  }
+});
+var CardContent = React.forwardRef(
+  ({ className, justify, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cardContentVariants({ justify, class: className }),
+        ...props
+      }
+    );
+  }
+);
+CardContent.displayName = "CardContent";
+var cardEyebrowVariants = tv({
+  base: "typography-overline text-text-muted uppercase tracking-wider"
+});
+var CardEyebrow = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        className: cardEyebrowVariants({ class: className }),
+        ...props
+      }
+    );
+  }
+);
+CardEyebrow.displayName = "CardEyebrow";
+var cardTitleVariants = tv({
+  base: "typography-h5 text-text-primary"
+});
+var CardTitle = React.forwardRef(
+  ({ className, as: Component = "h3", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: cardTitleVariants({ class: className }),
+        ...props
+      }
+    );
+  }
+);
+CardTitle.displayName = "CardTitle";
+var cardDescriptionVariants = tv({
+  base: "typography-body-small text-text-secondary"
+});
+var CardDescription = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      className: cardDescriptionVariants({ class: className }),
+      ...props
+    }
+  );
+});
+CardDescription.displayName = "CardDescription";
+var cardBodyVariants = tv({
+  base: "flex w-full flex-col gap-spatial-card-small-gap"
+});
+var CardBody = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cardBodyVariants({ class: className }),
+        ...props
+      }
+    );
+  }
+);
+CardBody.displayName = "CardBody";
+var cardActionsVariants = tv({
+  base: "flex gap-12"
+});
+var CardActions = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cardActionsVariants({ class: className }),
+        ...props
+      }
+    );
+  }
+);
+CardActions.displayName = "CardActions";
+var cardLinkVariants = tv({
+  base: "group/link flex items-center gap-4 text-text-muted transition-colors duration-200 hover:text-text-primary"
+});
+var CardLink = React.forwardRef(
+  ({ className, children, showArrow = true, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cardLinkVariants({ class: className }),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { children }),
+          showArrow && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "inline-block transition-transform duration-200 ease-out group-hover/link:translate-x-4",
+              children: "\u2192"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CardLink.displayName = "CardLink";
+
+export { Card, CardActions, CardBody, CardContent, CardDescription, CardEyebrow, CardImage, CardLink, CardTitle, cardActionsVariants, cardBodyVariants, cardContentVariants, cardDescriptionVariants, cardEyebrowVariants, cardImageVariants, cardLinkVariants, cardTitleVariants, cardVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/organisms/card/card.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nconst cardVariants = tv({\n\tbase: \"relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid\",\n\tvariants: {\n\t\tlayout: {\n\t\t\tvertical: \"w-full flex-col\",\n\t\t\thorizontal: \"w-full flex-row\",\n\t\t\t/**\n\t\t\t * Overlay layout - content sits on top of full-bleed background.\n\t\t\t * Use with Background components for images/gradients.\n\t\t\t */\n\t\t\toverlay: \"w-full flex-col\",\n\t\t\t/**\n\t\t\t * Profile layout - square image with stacked content below.\n\t\t\t * Ideal for team member cards, user profiles, testimonials.\n\t\t\t */\n\t\t\tprofile: \"w-full flex-col\",\n\t\t\t/**\n\t\t\t * Compact layout - small thumbnail with condensed horizontal content.\n\t\t\t * Ideal for news items, article previews, resource lists.\n\t\t\t */\n\t\t\tcompact: \"w-full flex-row items-center gap-16\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tlayout: \"vertical\",\n\t},\n});\n\nexport interface CardProps\n\textends React.HTMLAttributes<HTMLDivElement>,\n\t\tVariantProps<typeof cardVariants> {}\n\n/**\n * Card component for displaying content in a contained, scannable format.\n *\n * Layouts:\n * - vertical: Image on top, content below (default)\n * - horizontal: Image on left, content on right\n * - overlay: Full-bleed background with content on top\n *\n * Use with CardImage, CardContent, CardEyebrow, CardTitle, CardDescription, and CardActions.\n * For overlay layout, use Background components for full-bleed backgrounds.\n */\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n\t({ className, layout, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cardVariants({ layout, class: className })}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCard.displayName = \"Card\";\n\nconst cardImageVariants = tv({\n\tbase: \"relative shrink-0 bg-bg-muted\",\n\tvariants: {\n\t\tlayout: {\n\t\t\tvertical: \"aspect-video w-full\",\n\t\t\thorizontal: \"aspect-auto w-2/5 self-stretch\",\n\t\t\toverlay: \"aspect-video w-full\",\n\t\t\t/** Profile: square aspect ratio for headshots/avatars */\n\t\t\tprofile: \"aspect-square w-full\",\n\t\t\t/** Compact: fixed small size for thumbnails */\n\t\t\tcompact: \"size-80 rounded-8\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tlayout: \"vertical\",\n\t},\n});\n\nexport interface CardImageProps\n\textends React.HTMLAttributes<HTMLDivElement>,\n\t\tVariantProps<typeof cardImageVariants> {\n\t/**\n\t * The image source URL\n\t */\n\tsrc?: string;\n\t/**\n\t * Alt text for the image\n\t */\n\talt?: string;\n}\n\n/**\n * Card image area with layout-specific styling.\n * - vertical: 16:9 aspect ratio, full width\n * - horizontal: ~40% width, stretches to content height\n * - profile: square aspect ratio for headshots/avatars\n * - compact: fixed small size for thumbnails\n */\nconst CardImage = React.forwardRef<HTMLDivElement, CardImageProps>(\n\t({ className, src, alt = \"\", layout, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cardImageVariants({ layout, class: className })}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{src && (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={src}\n\t\t\t\t\t\talt={alt}\n\t\t\t\t\t\tclassName=\"absolute inset-0 size-full object-cover\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nCardImage.displayName = \"CardImage\";\n\nconst cardContentVariants = tv({\n\tbase: \"flex w-full flex-1 flex-col gap-spatial-card-large-gap p-spatial-card-large-padding\",\n\tvariants: {\n\t\t/**\n\t\t * Vertical alignment of content within the card.\n\t\t * Useful for overlay layouts to position content at top/center/bottom.\n\t\t */\n\t\tjustify: {\n\t\t\tstart: \"justify-start\",\n\t\t\tcenter: \"justify-center\",\n\t\t\tend: \"justify-end\",\n\t\t},\n\t},\n});\n\nexport interface CardContentProps\n\textends React.HTMLAttributes<HTMLDivElement>,\n\t\tVariantProps<typeof cardContentVariants> {}\n\n/**\n * Card content container with proper padding and spacing.\n * Uses spatial card tokens for consistent sizing.\n * For overlay layout, add `relative z-10` to ensure content sits above background.\n *\n * @example\n * ```tsx\n * // Content at bottom of overlay card\n * <Card layout=\"overlay\">\n *   <Background.Image src=\"/hero.jpg\" />\n *   <CardContent justify=\"end\" className=\"relative z-10\">\n *     <CardTitle>Title</CardTitle>\n *   </CardContent>\n * </Card>\n * ```\n */\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n\t({ className, justify, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cardContentVariants({ justify, class: className })}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCardContent.displayName = \"CardContent\";\n\nconst cardEyebrowVariants = tv({\n\tbase: \"typography-overline text-text-muted uppercase tracking-wider\",\n});\n\nexport interface CardEyebrowProps\n\textends React.HTMLAttributes<HTMLParagraphElement> {}\n\n/**\n * Optional eyebrow text above the card title.\n */\nconst CardEyebrow = React.forwardRef<HTMLParagraphElement, CardEyebrowProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<p\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cardEyebrowVariants({ class: className })}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCardEyebrow.displayName = \"CardEyebrow\";\n\nconst cardTitleVariants = tv({\n\tbase: \"typography-h5 text-text-primary\",\n});\n\nexport interface CardTitleProps\n\textends React.HTMLAttributes<HTMLHeadingElement> {\n\t/**\n\t * The heading level to render (h1-h6). Defaults to h3.\n\t */\n\tas?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\n/**\n * Card title/heading. Use the `as` prop to change the heading level.\n */\nconst CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n\t({ className, as: Component = \"h3\", ...props }, ref) => {\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cardTitleVariants({ class: className })}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCardTitle.displayName = \"CardTitle\";\n\nconst cardDescriptionVariants = tv({\n\tbase: \"typography-body-small text-text-secondary\",\n});\n\nexport interface CardDescriptionProps\n\textends React.HTMLAttributes<HTMLParagraphElement> {}\n\n/**\n * Card body/description text.\n */\nconst CardDescription = React.forwardRef<\n\tHTMLParagraphElement,\n\tCardDescriptionProps\n>(({ className, ...props }, ref) => {\n\treturn (\n\t\t<p\n\t\t\tref={ref}\n\t\t\tclassName={cardDescriptionVariants({ class: className })}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nCardDescription.displayName = \"CardDescription\";\n\nconst cardBodyVariants = tv({\n\tbase: \"flex w-full flex-col gap-spatial-card-small-gap\",\n});\n\nexport interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Container for card text content (eyebrow, title, description).\n * Uses spatial card tokens for consistent sizing.\n */\nconst CardBody = React.forwardRef<HTMLDivElement, CardBodyProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cardBodyVariants({ class: className })}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCardBody.displayName = \"CardBody\";\n\nconst cardActionsVariants = tv({\n\tbase: \"flex gap-12\",\n});\n\nexport interface CardActionsProps\n\textends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Container for card action buttons.\n * Uses primitive spacing tokens.\n */\nconst CardActions = React.forwardRef<HTMLDivElement, CardActionsProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cardActionsVariants({ class: className })}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCardActions.displayName = \"CardActions\";\n\nconst cardLinkVariants = tv({\n\tbase: \"group/link flex items-center gap-4 text-text-muted transition-colors duration-200 hover:text-text-primary\",\n});\n\nexport interface CardLinkProps extends React.HTMLAttributes<HTMLSpanElement> {\n\t/**\n\t * Whether to show the arrow indicator\n\t * @default true\n\t */\n\tshowArrow?: boolean;\n}\n\n/**\n * Inline link element for cards with optional animated arrow.\n * Commonly used for \"Read More →\" or \"Learn More →\" patterns.\n *\n * @example\n * ```tsx\n * <Card layout=\"compact\">\n *   <CardImage src=\"/thumb.jpg\" layout=\"compact\" />\n *   <CardContent>\n *     <CardTitle>Article Title</CardTitle>\n *     <CardLink>Read More</CardLink>\n *   </CardContent>\n * </Card>\n * ```\n */\nconst CardLink = React.forwardRef<HTMLSpanElement, CardLinkProps>(\n\t({ className, children, showArrow = true, ...props }, ref) => {\n\t\treturn (\n\t\t\t<span\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cardLinkVariants({ class: className })}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<span>{children}</span>\n\t\t\t\t{showArrow && (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName=\"inline-block transition-transform duration-200 ease-out group-hover/link:translate-x-4\"\n\t\t\t\t\t>\n\t\t\t\t\t\t→\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t);\n\t},\n);\nCardLink.displayName = \"CardLink\";\n\nexport {\n\tCard,\n\tcardVariants,\n\tCardImage,\n\tcardImageVariants,\n\tCardContent,\n\tcardContentVariants,\n\tCardEyebrow,\n\tcardEyebrowVariants,\n\tCardTitle,\n\tcardTitleVariants,\n\tCardDescription,\n\tcardDescriptionVariants,\n\tCardBody,\n\tcardBodyVariants,\n\tCardActions,\n\tcardActionsVariants,\n\tCardLink,\n\tcardLinkVariants,\n};\n"]}