@nationaldesignstudio/react 0.0.17 → 0.1.0

package/dist/components/organisms/card/card.d.ts

@@ -4,36 +4,71 @@ declare const cardVariants: import('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;
     };
-}, undefined, "flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
+}, undefined, "relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid", import('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;
     };
 }, {
     layout: {
         vertical: string;
         horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: 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;
     };
 }, undefined, import('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;
     };
-}, undefined, "flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
+}, undefined, "relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid", import('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;
     };
 }, {
     layout: {
         vertical: string;
         horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
     };
 }>, unknown, unknown, undefined>>;
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
@@ -44,10 +79,13 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, Variant
  * 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: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 export interface CardImageProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The image source URL
@@ -63,19 +101,104 @@ export interface CardImageProps extends React.HTMLAttributes<HTMLDivElement> {
  * For horizontal layout, takes up ~40% width and stretches to content height.
  */
 declare const CardImage: React.ForwardRefExoticComponent<CardImageProps & React.RefAttributes<HTMLDivElement>>;
-export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+declare const cardContentVariants: import('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", import('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, import('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", import('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>>;
+export 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: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "typography-caption-large text-text-muted", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "typography-caption-large text-text-muted", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 export 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: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "typography-subheading-small text-text-primary", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "typography-subheading-small text-text-primary", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
     /**
      * The heading level to render (h1-h6). Defaults to h3.
@@ -86,12 +209,14 @@ export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement>
  * Card title/heading. Use the `as` prop to change the heading level.
  */
 declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+declare const cardDescriptionVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "typography-body-small text-text-secondary", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "typography-body-small text-text-secondary", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
 }
 /**
  * Card body/description text.
  */
 declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+declare const cardBodyVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex w-full flex-col gap-spatial-card-small-gap", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex w-full flex-col gap-spatial-card-small-gap", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 /**
@@ -99,6 +224,7 @@ export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
  * Uses spatial card tokens for consistent sizing.
  */
 declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
+declare const cardActionsVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex gap-spacing-12", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex gap-spacing-12", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 /**
@@ -106,4 +232,4 @@ export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
  * Uses primitive spacing tokens.
  */
 declare const CardActions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
-export { Card, cardVariants, CardImage, CardContent, CardEyebrow, CardTitle, CardDescription, CardBody, CardActions, };
+export { Card, cardVariants, CardImage, cardImageVariants, CardContent, cardContentVariants, CardEyebrow, cardEyebrowVariants, CardTitle, cardTitleVariants, CardDescription, cardDescriptionVariants, CardBody, cardBodyVariants, CardActions, cardActionsVariants, };

package/dist/components/organisms/us-gov-banner/us-gov-banner.d.ts

@@ -1,5 +1,110 @@
+import { VariantProps } from 'tailwind-variants';
 import * as React from "react";
-export interface USGovBannerProps extends React.HTMLAttributes<HTMLDivElement> {
+declare const usGovBannerVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+    text: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}, {
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}>, {
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+    text: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+    text: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}, {
+    variant: {
+        default: {
+            root: string;
+            content: string;
+            text: string;
+        };
+        inverted: {
+            root: string;
+            content: string;
+            text: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+export interface USGovBannerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof usGovBannerVariants> {
     /**
      * Custom flag icon element. Defaults to a US flag SVG.
      */
@@ -14,6 +119,19 @@ export interface USGovBannerProps extends React.HTMLAttributes<HTMLDivElement> {
  * US Government official website banner.
  * Displays the official government website notice with flag icon.
  * Commonly placed at the very top of government websites.
+ *
+ * Variants:
+ * - default: Light background with dark text (for light pages)
+ * - inverted: Transparent background with white text/flag (for dark backgrounds/heroes)
+ *
+ * @example
+ * ```tsx
+ * // Default (light)
+ * <USGovBanner />
+ *
+ * // Inverted (for dark backgrounds)
+ * <USGovBanner variant="inverted" />
+ * ```
  */
 declare const USGovBanner: React.ForwardRefExoticComponent<USGovBannerProps & React.RefAttributes<HTMLDivElement>>;
-export { USGovBanner };
+export { USGovBanner, usGovBannerVariants };