@nationaldesignstudio/react 0.0.10 → 0.0.12

package/dist/components/atoms/accordion/accordion.d.ts

@@ -1,5 +1,42 @@
+import { VariantProps } from 'tailwind-variants';
 import * as React from "react";
-export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+declare const accordionVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        dark: string;
+        light: string;
+    };
+}, undefined, "flex flex-col", import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        dark: string;
+        light: string;
+    };
+}, {
+    variant: {
+        dark: string;
+        light: string;
+    };
+}>, {
+    variant: {
+        dark: string;
+        light: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        dark: string;
+        light: string;
+    };
+}, undefined, "flex flex-col", import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        dark: string;
+        light: string;
+    };
+}, {
+    variant: {
+        dark: string;
+        light: string;
+    };
+}>, unknown, unknown, undefined>>;
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof accordionVariants> {
     /**
      * Allow multiple items to be expanded at once
      * @default false
@@ -15,9 +52,13 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
  * Accordion component for expandable/collapsible content sections.
  * Built on Base UI's Accordion primitive.
  *
+ * Variants:
+ * - dark: Dark theme styling (default)
+ * - light: Light theme styling
+ *
  * @example
  * ```tsx
- * <Accordion defaultExpanded="item-1">
+ * <Accordion defaultExpanded="item-1" variant="dark">
  *   <AccordionItem id="item-1" title="Question 1">
  *     Answer to question 1
  *   </AccordionItem>
@@ -47,4 +88,4 @@ export interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivEle
  * Must be used within an Accordion component.
  */
 declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
-export { Accordion, AccordionItem };
+export { Accordion, AccordionItem, accordionVariants };

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

@@ -1,30 +1,174 @@
 import { ButtonProps as BaseButtonProps } from '@base-ui-components/react/button';
-import { VariantProps } from 'class-variance-authority';
+import { VariantProps } from 'tailwind-variants';
+import { ButtonTheme } from '../../../lib/theme';
 import * as React from "react";
 /**
  * Button component based on Figma BaseKit / Interface / Buttons
  *
  * Variants:
- * - charcoal: Dark filled button (for light backgrounds)
+ * - primary: Primary filled button using semantic color tokens
+ * - primaryOutline: Outlined primary button (for light backgrounds)
+ * - secondary: Secondary button using semantic color tokens
+ * - charcoal: Dark filled button (for light backgrounds) - legacy
  * - charcoalOutline: Dark outlined button (for light backgrounds)
  * - charcoalOutlineQuiet: Subtle dark outlined button (for light backgrounds)
  * - ivory: Light filled button (for dark backgrounds)
  * - ivoryOutline: Light outlined button (for dark backgrounds)
  * - ivoryOutlineQuiet: Subtle light outlined button (for dark backgrounds)
- * - secondary: Gray filled button (for dark backgrounds)
+ * - gray: Gray filled button (for dark backgrounds)
  *
  * Sizes:
- * - lg: Large buttons (46px height)
- * - default: Medium buttons (38px height)
- * - sm: Small buttons (33px height)
+ * - lg: Large buttons
+ * - default: Medium buttons
+ * - sm: Small buttons
  *
  * For icon-only buttons, use the IconButton component instead.
+ *
+ * Theme Support:
+ * Pass a `theme` prop to override default colors via CSS custom properties.
+ * Surface tokens (--radius-surface-button, --surface-button-stroke) control
+ * border radius and stroke width across all variants.
  */
-declare const buttonVariants: (props?: ({
-    variant?: "charcoal" | "charcoalOutline" | "charcoalOutlineQuiet" | "ivory" | "ivoryOutline" | "ivoryOutlineQuiet" | "gray" | null | undefined;
-    size?: "lg" | "default" | "sm" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const buttonVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: string;
+        primaryOutline: string;
+        secondary: string;
+        charcoal: string;
+        charcoalOutline: string;
+        charcoalOutlineQuiet: string;
+        ivory: string;
+        ivoryOutline: string;
+        ivoryOutlineQuiet: string;
+        gray: string;
+        themed: string;
+    };
+    size: {
+        lg: string;
+        default: string;
+        sm: string;
+    };
+}, undefined, "inline-flex items-center justify-center gap-spacing-8 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 rounded-surface-button stroke-surface-button border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        primary: string;
+        primaryOutline: string;
+        secondary: string;
+        charcoal: string;
+        charcoalOutline: string;
+        charcoalOutlineQuiet: string;
+        ivory: string;
+        ivoryOutline: string;
+        ivoryOutlineQuiet: string;
+        gray: string;
+        themed: string;
+    };
+    size: {
+        lg: string;
+        default: string;
+        sm: string;
+    };
+}, {
+    variant: {
+        primary: string;
+        primaryOutline: string;
+        secondary: string;
+        charcoal: string;
+        charcoalOutline: string;
+        charcoalOutlineQuiet: string;
+        ivory: string;
+        ivoryOutline: string;
+        ivoryOutlineQuiet: string;
+        gray: string;
+        themed: string;
+    };
+    size: {
+        lg: string;
+        default: string;
+        sm: string;
+    };
+}>, {
+    variant: {
+        primary: string;
+        primaryOutline: string;
+        secondary: string;
+        charcoal: string;
+        charcoalOutline: string;
+        charcoalOutlineQuiet: string;
+        ivory: string;
+        ivoryOutline: string;
+        ivoryOutlineQuiet: string;
+        gray: string;
+        themed: string;
+    };
+    size: {
+        lg: string;
+        default: string;
+        sm: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: string;
+        primaryOutline: string;
+        secondary: string;
+        charcoal: string;
+        charcoalOutline: string;
+        charcoalOutlineQuiet: string;
+        ivory: string;
+        ivoryOutline: string;
+        ivoryOutlineQuiet: string;
+        gray: string;
+        themed: string;
+    };
+    size: {
+        lg: string;
+        default: string;
+        sm: string;
+    };
+}, undefined, "inline-flex items-center justify-center gap-spacing-8 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 rounded-surface-button stroke-surface-button border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        primary: string;
+        primaryOutline: string;
+        secondary: string;
+        charcoal: string;
+        charcoalOutline: string;
+        charcoalOutlineQuiet: string;
+        ivory: string;
+        ivoryOutline: string;
+        ivoryOutlineQuiet: string;
+        gray: string;
+        themed: string;
+    };
+    size: {
+        lg: string;
+        default: string;
+        sm: string;
+    };
+}, {
+    variant: {
+        primary: string;
+        primaryOutline: string;
+        secondary: string;
+        charcoal: string;
+        charcoalOutline: string;
+        charcoalOutlineQuiet: string;
+        ivory: string;
+        ivoryOutline: string;
+        ivoryOutlineQuiet: string;
+        gray: string;
+        themed: string;
+    };
+    size: {
+        lg: string;
+        default: string;
+        sm: string;
+    };
+}>, unknown, unknown, undefined>>;
 export type HTMLButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
-export type ButtonProps = BaseButtonProps & VariantProps<typeof buttonVariants> & HTMLButtonProps;
+export type ButtonProps = BaseButtonProps & VariantProps<typeof buttonVariants> & HTMLButtonProps & {
+    /**
+     * Theme overrides for button styling via CSS custom properties
+     */
+    theme?: ButtonTheme;
+};
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

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

@@ -1,4 +1,4 @@
-import { VariantProps } from 'class-variance-authority';
+import { VariantProps } from 'tailwind-variants';
 import * as React from "react";
 /**
  * IconButton component based on Figma BaseKit / Interface / Icon Button
@@ -38,10 +38,119 @@ import * as React from "react";
  * - default: Medium (36x36)
  * - sm: Small (29x29)
  */
-declare const iconButtonVariants: (props?: ({
-    variant?: "charcoal" | "charcoalOutline" | "charcoalOutlineQuiet" | "ivory" | "ivoryOutline" | "ivoryOutlineQuiet" | "ghost" | "ghostDark" | null | undefined;
-    size?: "lg" | "default" | "sm" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        charcoal: string;
+        charcoalOutline: string;
+        charcoalOutlineQuiet: string;
+        ghost: string;
+        ghostDark: string;
+        ivory: string;
+        ivoryOutline: string;
+        ivoryOutlineQuiet: string;
+    };
+    size: {
+        lg: string;
+        default: string;
+        sm: 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;
+        ghost: string;
+        ghostDark: string;
+        ivory: string;
+        ivoryOutline: string;
+        ivoryOutlineQuiet: string;
+    };
+    size: {
+        lg: string;
+        default: string;
+        sm: string;
+    };
+}, {
+    variant: {
+        charcoal: string;
+        charcoalOutline: string;
+        charcoalOutlineQuiet: string;
+        ghost: string;
+        ghostDark: string;
+        ivory: string;
+        ivoryOutline: string;
+        ivoryOutlineQuiet: string;
+    };
+    size: {
+        lg: string;
+        default: string;
+        sm: string;
+    };
+}>, {
+    variant: {
+        charcoal: string;
+        charcoalOutline: string;
+        charcoalOutlineQuiet: string;
+        ghost: string;
+        ghostDark: string;
+        ivory: string;
+        ivoryOutline: string;
+        ivoryOutlineQuiet: string;
+    };
+    size: {
+        lg: string;
+        default: string;
+        sm: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        charcoal: string;
+        charcoalOutline: string;
+        charcoalOutlineQuiet: string;
+        ghost: string;
+        ghostDark: string;
+        ivory: string;
+        ivoryOutline: string;
+        ivoryOutlineQuiet: string;
+    };
+    size: {
+        lg: string;
+        default: string;
+        sm: 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;
+        ghost: string;
+        ghostDark: string;
+        ivory: string;
+        ivoryOutline: string;
+        ivoryOutlineQuiet: string;
+    };
+    size: {
+        lg: string;
+        default: string;
+        sm: string;
+    };
+}, {
+    variant: {
+        charcoal: string;
+        charcoalOutline: string;
+        charcoalOutlineQuiet: string;
+        ghost: string;
+        ghostDark: string;
+        ivory: string;
+        ivoryOutline: string;
+        ivoryOutlineQuiet: string;
+    };
+    size: {
+        lg: string;
+        default: string;
+        sm: string;
+    };
+}>, unknown, unknown, undefined>>;
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
     asChild?: boolean;
 }

package/dist/components/atoms/ndstudio-footer/ndstudio-footer.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+export interface NdstudioFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The URL to link to
+     * @default "https://ndstudio.gov"
+     */
+    href?: string;
+}
+/**
+ * NdstudioFooter component displays a "Designed and Engineered in DC by National Design Studio" footer link.
+ *
+ * This component is designed to be used as a footer within other components like Tout,
+ * but can also be used standalone.
+ *
+ * @example
+ * ```tsx
+ * // Used within a Tout component via footer slot
+ * <Tout
+ *   headline="Feature Headline"
+ *   primaryAction={<Button>Primary</Button>}
+ *   backgroundMedia={<img src="/bg.jpg" alt="" />}
+ *   footer={<NdstudioFooter />}
+ * />
+ *
+ * // Standalone usage
+ * <NdstudioFooter className="my-custom-class" />
+ * ```
+ */
+declare const NdstudioFooter: React.ForwardRefExoticComponent<NdstudioFooterProps & React.RefAttributes<HTMLDivElement>>;
+export { NdstudioFooter };

package/dist/components/atoms/pager-control/pager-control.d.ts

@@ -1,12 +1,119 @@
-import { VariantProps } from 'class-variance-authority';
+import { VariantProps } from 'tailwind-variants';
 import * as React from "react";
-declare const pagerControlVariants: (props?: ({
-    size?: "lg" | "default" | "sm" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare const dotBaseVariants: (props?: ({
-    size?: "lg" | "default" | "sm" | null | undefined;
-    variant?: "charcoal" | "ivory" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const pagerControlVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, "flex items-center", import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, "flex items-center", import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const dotBaseVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}, undefined, "cursor-pointer rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]", import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}, undefined, "cursor-pointer rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]", import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    variant: {
+        charcoal: string;
+        ivory: string;
+    };
+}>, unknown, unknown, undefined>>;
 export interface PagerControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, VariantProps<typeof pagerControlVariants>, VariantProps<typeof dotBaseVariants> {
     /**
      * Total number of pages/items
@@ -56,7 +163,7 @@ export interface PagerControlProps extends Omit<React.HTMLAttributes<HTMLDivElem
  * Sizes:
  * - sm: Small dots (6px height)
  * - default: Medium dots (10px height)
- * - lg: Large dots (14px height)
+ * - lg: Large dots (16px height)
  */
 declare const PagerControl: React.ForwardRefExoticComponent<PagerControlProps & React.RefAttributes<HTMLDivElement>>;
 export { PagerControl, pagerControlVariants };

package/dist/components/dev-tools/dev-toolbar/dev-toolbar.d.ts

@@ -0,0 +1,4 @@
+export interface DevToolbarProps {
+    defaultExpanded?: boolean;
+}
+export declare function DevToolbar({ defaultExpanded }: DevToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/dev-tools/grid-overlay/grid-overlay.d.ts

@@ -0,0 +1,6 @@
+export interface GridOverlayProps {
+    columnOpacity?: number;
+    borderOpacity?: number;
+    visible?: boolean;
+}
+export declare function GridOverlay({ columnOpacity, borderOpacity, visible, }: GridOverlayProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,41 @@
-import { VariantProps } from 'class-variance-authority';
+import { VariantProps } from 'tailwind-variants';
 import * as React from "react";
-declare const cardVariants: (props?: ({
-    layout?: "horizontal" | "vertical" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const cardVariants: import('tailwind-variants').TVReturnType<{
+    layout: {
+        vertical: string;
+        horizontal: 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<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+    };
+}, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+    };
+}>, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    layout: {
+        vertical: string;
+        horizontal: 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<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+    };
+}, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+    };
+}>, unknown, unknown, undefined>>;
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
 }
 /**
@@ -34,6 +67,7 @@ export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 /**
  * Card content container with proper padding and spacing.
+ * Uses spatial card tokens for consistent sizing.
  */
 declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
 export interface CardEyebrowProps extends React.HTMLAttributes<HTMLParagraphElement> {
@@ -62,12 +96,14 @@ export 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>>;
 export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 /**
  * Container for card action buttons.
+ * Uses primitive spacing tokens.
  */
 declare const CardActions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
 export { Card, cardVariants, CardImage, CardContent, CardEyebrow, CardTitle, CardDescription, CardBody, CardActions, };

package/dist/components/sections/banner/banner.d.ts

@@ -1,4 +1,4 @@
-import { VariantProps } from 'class-variance-authority';
+import { VariantProps } from 'tailwind-variants';
 import * as React from "react";
 /**
  * Banner component based on Figma BaseKit / Banners
@@ -13,9 +13,42 @@ import * as React from "react";
  *
  * Must be placed inside a `grid-container`. Uses `col-full` to span all columns.
  */
-declare const bannerVariants: (props?: ({
-    theme?: "light" | "dark" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const bannerVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        light: string;
+        dark: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        light: string;
+        dark: string;
+    };
+}, {
+    variant: {
+        light: string;
+        dark: string;
+    };
+}>, {
+    variant: {
+        light: string;
+        dark: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        light: string;
+        dark: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        light: string;
+        dark: string;
+    };
+}, {
+    variant: {
+        light: string;
+        dark: string;
+    };
+}>, unknown, unknown, undefined>>;
 export interface BannerProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof bannerVariants> {
     /**
      * The heading text displayed in the banner
@@ -51,9 +84,9 @@ export interface BannerProps extends React.HTMLAttributes<HTMLElement>, VariantP
  *   />
  * </div>
  *
- * // Dark theme
+ * // Dark variant
  * <Banner
- *   theme="dark"
+ *   variant="dark"
  *   heading="Still Have Questions?"
  *   description="Contact us at support@example.com"
  *   action={<Button variant="secondary">Email Us</Button>}