@nationaldesignstudio/react 0.5.0 → 0.5.2

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

@@ -1,153 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import { ComponentTheme } from '../../../lib/theme';
-import * as React from "react";
-/**
- * Tout variants for background and content styling
- */
-declare const toutVariants: import('tailwind-variants').TVReturnType<{
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-    align: {
-        left: string;
-        center: string;
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-    align: {
-        left: string;
-        center: string;
-    };
-}, {
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-    align: {
-        left: string;
-        center: string;
-    };
-}>, {
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-    align: {
-        left: string;
-        center: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-    align: {
-        left: string;
-        center: string;
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-    align: {
-        left: string;
-        center: string;
-    };
-}, {
-    colorScheme: {
-        light: string;
-        dark: string;
-    };
-    align: {
-        left: string;
-        center: string;
-    };
-}>, unknown, unknown, undefined>>;
-/**
- * Tout component based on Figma BaseKit / Touts
- *
- * A full-bleed section with a background image and overlaid content.
- * Content can be positioned on the left side or centered.
- *
- * Color schemes:
- * - light: Light text styling (default)
- * - dark: Dark text styling
- *
- * Alignment:
- * - left: Content aligned to the left (default)
- * - center: Content centered
- *
- * Responsive behavior:
- * - Mobile (sm): 600px height, 4 columns with gap-20, content spans all 4 cols
- * - Tablet (md): 750px height, 12 columns with gap-20, content spans 9 cols (left) or centered
- * - Desktop (lg): 900px height, 24 columns with gap-20, content spans 9 cols (left) or centered
- *
- * This component is self-contained - do NOT wrap in a grid-container.
- */
-export interface ToutProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof toutVariants> {
-    /**
-     * The headline displayed in the tout
-     */
-    headline: React.ReactNode;
-    /**
-     * The body text displayed below the headline (optional)
-     */
-    body?: string;
-    /**
-     * Primary action button (required)
-     */
-    primaryAction: React.ReactNode;
-    /**
-     * Secondary action button (optional)
-     */
-    secondaryAction?: React.ReactNode;
-    /**
-     * Background media (image or video element)
-     * Should be a full-bleed element that covers the entire section
-     */
-    backgroundMedia: React.ReactNode;
-    /**
-     * Optional footer content to display at the bottom of the section.
-     * Use with NdstudioFooter component for the branded footer.
-     */
-    footer?: React.ReactNode;
-    /**
-     * Component-level theme overrides.
-     * Allows customization of colors, spacing, and surface properties.
-     */
-    theme?: ComponentTheme;
-}
-/**
- * Tout component for hero-like sections with background media and overlaid content.
- *
- * This component is self-contained with its own grid.
- * Grid setup:
- * - Desktop (lg): 24 columns, gap-20, content spans 9 cols
- * - Tablet (md): 12 columns, gap-20, content spans 9 cols
- * - Mobile: 4 columns, gap-20, content spans all 4 cols
- *
- * @example
- * ```tsx
- * <Tout
- *   headline="Feature Headline"
- *   body="Description of the feature..."
- *   primaryAction={<Button>Primary</Button>}
- *   secondaryAction={<Button variant="outline" colorScheme="light">Secondary</Button>}
- *   backgroundMedia={
- *     <img
- *       src="/background.jpg"
- *       alt=""
- *       className="absolute inset-0 w-full h-full object-cover"
- *     />
- *   }
- *   footer={<NdstudioFooter />}
- * />
- * ```
- */
-declare const Tout: React.ForwardRefExoticComponent<ToutProps & React.RefAttributes<HTMLElement>>;
-export { Tout, toutVariants };

package/dist/components/sections/two-column-section/two-column-section.d.ts

@@ -1,118 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import * as React from "react";
-/**
- * TwoColumnSection component for text-heavy content sections
- *
- * Layout:
- * - Desktop (lg+): Title left, content right with border-top divider
- * - Mobile/Tablet: Stacked vertically
- *
- * Uses the 24-column grid system.
- */
-declare const twoColumnSectionVariants: import('tailwind-variants').TVReturnType<{
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
-    layout: {
-        asymmetric: string;
-        equal: string;
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
-    layout: {
-        asymmetric: string;
-        equal: string;
-    };
-}, {
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
-    layout: {
-        asymmetric: string;
-        equal: string;
-    };
-}>, {
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
-    layout: {
-        asymmetric: string;
-        equal: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
-    layout: {
-        asymmetric: string;
-        equal: string;
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
-    layout: {
-        asymmetric: string;
-        equal: string;
-    };
-}, {
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
-    layout: {
-        asymmetric: string;
-        equal: string;
-    };
-}>, unknown, unknown, undefined>>;
-export interface TwoColumnSectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof twoColumnSectionVariants> {
-    /**
-     * The title text displayed in the left column
-     */
-    title: string;
-    /**
-     * Lead content - prominently styled (brighter text)
-     * Can be a string or ReactNode for rich content
-     */
-    lead?: React.ReactNode;
-    /**
-     * Body content - secondary styled (muted text)
-     * Can be a string or ReactNode for rich content
-     */
-    children: React.ReactNode;
-    /**
-     * Layout style for the columns
-     * - "asymmetric" (default): Uses 24-column grid with ~40/60 split (title: 9, content: 15)
-     * - "equal": Simple 2-column equal-width layout at md+ breakpoints
-     */
-    layout?: "asymmetric" | "equal";
-}
-/**
- * TwoColumnSection component for text-heavy content with title/content split.
- *
- * Layout:
- * - Mobile/Tablet: Stacked (title above content)
- * - Desktop (lg+): Title left (~40%), Content right (~60%)
- *
- * @example
- * ```tsx
- * <TwoColumnSection
- *   title="US Tech Force"
- *   lead="The US Tech Force is recruiting an elite corps of engineers..."
- *   variant="dark"
- * >
- *   <p>Through a two-year program, participants will work...</p>
- *   <p>Upon completing the program, engineers can seek...</p>
- * </TwoColumnSection>
- * ```
- */
-declare const TwoColumnSection: React.ForwardRefExoticComponent<TwoColumnSectionProps & React.RefAttributes<HTMLElement>>;
-export { TwoColumnSection, twoColumnSectionVariants };

package/dist/components/shared/floating-arrow.d.ts

@@ -1,34 +0,0 @@
-/**
- * Shared arrow variants for floating UI components
- *
- * Used by Tooltip, Popover, and other floating components.
- * Handles positioning based on the side attribute.
- */
-export declare const floatingArrowVariants: 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 FloatingArrowSvgProps {
-    /** CSS class for the main fill color (e.g., "fill-tooltip-bg" or "fill-overlay-background") */
-    fillClassName: string;
-    /** CSS class for the border color using fill-* (e.g., "fill-overlay-border") - renders as outline behind main fill */
-    borderClassName?: string;
-    /** Additional className for the SVG element */
-    className?: string;
-}
-/**
- * FloatingArrowSvg
- *
- * A shared arrow SVG component for floating UI elements.
- * Use with Tooltip, Popover, Dropdown, and other floating components.
- *
- * @example
- * ```tsx
- * // For dark tooltip (no border)
- * <FloatingArrowSvg fillClassName="fill-tooltip-bg" />
- *
- * // For light popover with border
- * <FloatingArrowSvg
- *   fillClassName="fill-overlay-background"
- *   borderClassName="fill-overlay-border"
- * />
- * ```
- */
-export declare const FloatingArrowSvg: ({ fillClassName, borderClassName, className, }: FloatingArrowSvgProps) => import("react/jsx-runtime").JSX.Element;

package/dist/hooks/index.d.ts

@@ -1 +0,0 @@
-export { useEventListener } from './use-event-listener';

package/dist/hooks/use-event-listener.d.ts

@@ -1,24 +0,0 @@
-type EventMap<T> = T extends Window ? WindowEventMap : T extends Document ? DocumentEventMap : T extends HTMLElement ? HTMLElementEventMap : never;
-/**
- * Custom hook that attaches an event listener to a specified element.
- * Automatically handles cleanup on unmount and when dependencies change.
- *
- * @param eventName - The name of the event to listen for
- * @param handler - The callback function to execute when the event fires
- * @param element - The element to attach the listener to (defaults to window)
- * @param options - Optional event listener options
- *
- * @example
- * ```tsx
- * // Listen to window resize
- * useEventListener('resize', handleResize);
- *
- * // Listen to element scroll
- * useEventListener('scroll', handleScroll, containerRef.current);
- *
- * // With options
- * useEventListener('scroll', handleScroll, window, { passive: true });
- * ```
- */
-export declare function useEventListener<T extends Window | Document | HTMLElement, K extends keyof EventMap<T>>(eventName: K, handler: (event: EventMap<T>[K]) => void, element?: T | null, options?: boolean | AddEventListenerOptions): void;
-export {};

package/dist/lib/form-control.d.ts

@@ -1,106 +0,0 @@
-/**
- * Shared form control styles for Input, Select, and similar components.
- *
- * These base styles ensure consistent appearance across all form controls:
- * - Consistent height and padding
- * - Unified focus ring and border treatment
- * - Shared hover/disabled states
- *
- * Based on Figma BaseKit / Interface / Input & Dropdown designs.
- */
-/**
- * Base styles shared by all form controls (input, select, etc.)
- */
-export declare const formControlBase: string[];
-/**
- * Size variants shared by form controls
- * Uses spatial tokens for consistent sizing across form controls
- */
-export declare const formControlSizes: {
-    readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
-    readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
-    readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
-};
-/**
- * Error state styles shared by form controls
- */
-export declare const formControlError: {
-    readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
-    readonly false: "";
-};
-/**
- * Form control variants using tailwind-variants
- * Can be composed with other variants for specific components
- */
-export declare const formControlVariants: import('tailwind-variants').TVReturnType<{
-    size: {
-        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
-        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
-        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
-    };
-    error: {
-        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
-        readonly false: "";
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    size: {
-        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
-        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
-        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
-    };
-    error: {
-        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
-        readonly false: "";
-    };
-}, {
-    size: {
-        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
-        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
-        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
-    };
-    error: {
-        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
-        readonly false: "";
-    };
-}>, {
-    size: {
-        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
-        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
-        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
-    };
-    error: {
-        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
-        readonly false: "";
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    size: {
-        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
-        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
-        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
-    };
-    error: {
-        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
-        readonly false: "";
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    size: {
-        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
-        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
-        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
-    };
-    error: {
-        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
-        readonly false: "";
-    };
-}, {
-    size: {
-        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
-        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
-        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
-    };
-    error: {
-        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
-        readonly false: "";
-    };
-}>, unknown, unknown, undefined>>;
-export type FormControlSize = keyof typeof formControlSizes;