@nationaldesignstudio/react 0.0.16 → 0.0.19

package/dist/components/atoms/button/icon-button.d.ts

@@ -15,141 +15,175 @@ import * as React from "react";
  * <IconButton aria-label="Close menu">
  *   <CloseIcon />
  * </IconButton>
- *
- * // Correct usage with aria-labelledby
- * <IconButton aria-labelledby="close-label">
- *   <CloseIcon />
- * </IconButton>
- * <span id="close-label" className="sr-only">Close menu</span>
  * ```
  *
  * Variants:
- * - charcoal: Dark filled button (for light backgrounds)
- * - charcoalOutline: Dark outlined button (for light backgrounds)
- * - charcoalOutlineQuiet: Subtle dark outlined button (for light backgrounds)
- * - ghost: No background/border, just icon (for light backgrounds)
- * - ghostDark: No background/border, just icon (for dark backgrounds)
- * - ivory: Light filled button (for dark backgrounds)
- * - ivoryOutline: Light outlined button (for dark backgrounds)
- * - ivoryOutlineQuiet: Subtle light outlined button (for dark backgrounds)
+ * - solid: Filled button
+ * - outline: Outlined button
+ * - ghost: No background/border, just icon
+ * - subtle: Subtle outlined button
+ *
+ * Color Schemes:
+ * - dark: Dark colors for use on light backgrounds (default)
+ * - light: Light colors for use on dark backgrounds
  *
  * Sizes:
- * - lg: Large (46x46)
- * - default: Medium (36x36)
- * - sm: Small (29x29)
+ * - lg: Large (48x48)
+ * - default: Medium (40x40)
+ * - sm: Small (32x32)
+ *
+ * Rounded:
+ * - default: Standard border radius
+ * - sm: Smaller border radius
+ * - full: Fully circular
  */
 declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
     variant: {
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
+        solid: string;
+        outline: string;
         ghost: string;
-        ghostDark: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
+        subtle: string;
+    };
+    colorScheme: {
+        dark: string;
+        light: string;
     };
     size: {
         lg: string;
         default: string;
         sm: string;
     };
+    rounded: {
+        default: string;
+        sm: string;
+        full: string;
+    };
 }, undefined, "inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", import('tailwind-variants/dist/config.js').TVConfig<{
     variant: {
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
+        solid: string;
+        outline: string;
         ghost: string;
-        ghostDark: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
+        subtle: string;
+    };
+    colorScheme: {
+        dark: string;
+        light: string;
     };
     size: {
         lg: string;
         default: string;
         sm: string;
     };
+    rounded: {
+        default: string;
+        sm: string;
+        full: string;
+    };
 }, {
     variant: {
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
+        solid: string;
+        outline: string;
         ghost: string;
-        ghostDark: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
+        subtle: string;
+    };
+    colorScheme: {
+        dark: string;
+        light: string;
     };
     size: {
         lg: string;
         default: string;
         sm: string;
     };
+    rounded: {
+        default: string;
+        sm: string;
+        full: string;
+    };
 }>, {
     variant: {
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
+        solid: string;
+        outline: string;
         ghost: string;
-        ghostDark: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
+        subtle: string;
+    };
+    colorScheme: {
+        dark: string;
+        light: string;
     };
     size: {
         lg: string;
         default: string;
         sm: string;
     };
+    rounded: {
+        default: string;
+        sm: string;
+        full: string;
+    };
 }, undefined, import('tailwind-variants').TVReturnType<{
     variant: {
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
+        solid: string;
+        outline: string;
         ghost: string;
-        ghostDark: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
+        subtle: string;
+    };
+    colorScheme: {
+        dark: string;
+        light: string;
     };
     size: {
         lg: string;
         default: string;
         sm: string;
     };
+    rounded: {
+        default: string;
+        sm: string;
+        full: string;
+    };
 }, undefined, "inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", import('tailwind-variants/dist/config.js').TVConfig<{
     variant: {
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
+        solid: string;
+        outline: string;
         ghost: string;
-        ghostDark: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
+        subtle: string;
+    };
+    colorScheme: {
+        dark: string;
+        light: string;
     };
     size: {
         lg: string;
         default: string;
         sm: string;
     };
+    rounded: {
+        default: string;
+        sm: string;
+        full: string;
+    };
 }, {
     variant: {
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
+        solid: string;
+        outline: string;
         ghost: string;
-        ghostDark: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
+        subtle: string;
+    };
+    colorScheme: {
+        dark: string;
+        light: string;
     };
     size: {
         lg: string;
         default: string;
         sm: string;
     };
+    rounded: {
+        default: string;
+        sm: string;
+        full: string;
+    };
 }>, unknown, unknown, undefined>>;
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
     asChild?: boolean;

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 };