@nationaldesignstudio/react 0.2.0 → 0.5.0

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

@@ -0,0 +1,131 @@
+import { Select as BaseSelect } from '@base-ui-components/react/select';
+import { VariantProps } from 'tailwind-variants';
+import * as React from "react";
+/**
+ * Select trigger variants based on Figma BaseKit / Interface / Dropdown
+ *
+ * States:
+ * - Default: White background, subtle border
+ * - Hover: Light gray background
+ * - Focus/Open: Accent border with focus ring
+ * - Selected: Has a value selected (darker text)
+ * - Disabled: Reduced opacity, not interactive
+ */
+declare const selectTriggerVariants: 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>>;
+/**
+ * Select popup/menu variants
+ */
+declare const selectPopupVariants: 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>>;
+/**
+ * Select option/item variants based on Figma Menu Items
+ *
+ * States:
+ * - Default: White background
+ * - Hover/Highlighted: Light indigo tint background
+ * - Selected: Stronger indigo tint with blue text and checkmark
+ * - Disabled: Reduced opacity
+ */
+declare const selectOptionVariants: 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 SelectProps<Value = string> extends BaseSelect.Root.Props<Value> {
+    children: React.ReactNode;
+}
+declare const SelectRoot: <Value = string>({ children, ...props }: SelectProps<Value>) => import("react/jsx-runtime").JSX.Element;
+export interface SelectTriggerProps extends Omit<React.ComponentProps<typeof BaseSelect.Trigger>, "className">, VariantProps<typeof selectTriggerVariants> {
+    className?: string;
+    placeholder?: string;
+}
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface SelectPopupProps extends Omit<React.ComponentProps<typeof BaseSelect.Popup>, "className"> {
+    className?: string;
+}
+declare const SelectPopup: React.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SelectOptionProps extends Omit<React.ComponentProps<typeof BaseSelect.Item>, "className"> {
+    className?: string;
+}
+declare const SelectOption: React.ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SelectGroupProps extends Omit<React.ComponentProps<typeof BaseSelect.Group>, "className"> {
+    className?: string;
+}
+declare const SelectGroup: React.ForwardRefExoticComponent<Omit<SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SelectGroupLabelProps extends Omit<React.ComponentProps<typeof BaseSelect.GroupLabel>, "className"> {
+    className?: string;
+}
+declare const SelectGroupLabel: React.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Select: (<Value = string>({ children, ...props }: SelectProps<Value>) => import("react/jsx-runtime").JSX.Element) & {
+    Trigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Option: React.ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<Omit<SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    GroupLabel: React.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { SelectRoot, SelectTrigger, SelectPopup, SelectOption, SelectGroup, SelectGroupLabel, selectTriggerVariants, selectPopupVariants, selectOptionVariants, };

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

@@ -0,0 +1,161 @@
+import { Tooltip as BaseTooltip } from '@base-ui-components/react/tooltip';
+import { VariantProps } from 'tailwind-variants';
+import * as React from "react";
+/**
+ * Tooltip popup variants
+ *
+ * Uses semantic tokens for themeable styling:
+ * - color.tooltip.bg - Dark background
+ * - color.tooltip.text - Light text
+ * - surface.tooltip.radius - Small border radius
+ * - spatial.component.tooltip.padding-x/y - Consistent padding
+ */
+declare const tooltipPopupVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+}>, {
+    variant: {
+        default: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Tooltip arrow variants - uses shared floating arrow variants
+ */
+declare const tooltipArrowVariants: 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 TooltipProviderProps extends BaseTooltip.Provider.Props {
+    children: React.ReactNode;
+}
+/**
+ * Tooltip Provider
+ *
+ * Manages shared delays across multiple tooltips.
+ * Wrap your app or a section with this to enable tooltip delay grouping.
+ */
+declare const TooltipProvider: ({ children, ...props }: TooltipProviderProps) => import("react/jsx-runtime").JSX.Element;
+export interface TooltipRootProps extends BaseTooltip.Root.Props {
+    children: React.ReactNode;
+}
+/**
+ * Tooltip Root
+ *
+ * Groups all tooltip parts. Does not render an element.
+ */
+declare const TooltipRoot: ({ children, ...props }: TooltipRootProps) => import("react/jsx-runtime").JSX.Element;
+export interface TooltipTriggerProps extends React.ComponentProps<typeof BaseTooltip.Trigger> {
+    className?: string;
+}
+/**
+ * Tooltip Trigger
+ *
+ * The element that triggers the tooltip on hover/focus.
+ * Renders as the child element with tooltip behavior attached.
+ * When children is a single React element, uses `render` prop to avoid wrapper element.
+ */
+declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface TooltipPortalProps extends BaseTooltip.Portal.Props {
+    children: React.ReactNode;
+}
+/**
+ * Tooltip Portal
+ *
+ * Renders the tooltip popup in a portal outside the DOM hierarchy.
+ */
+declare const TooltipPortal: ({ children, ...props }: TooltipPortalProps) => import("react/jsx-runtime").JSX.Element;
+export interface TooltipPositionerProps extends Omit<React.ComponentProps<typeof BaseTooltip.Positioner>, "className"> {
+    className?: string;
+}
+/**
+ * Tooltip Positioner
+ *
+ * Positions the tooltip popup relative to the trigger.
+ */
+declare const TooltipPositioner: React.ForwardRefExoticComponent<Omit<TooltipPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface TooltipPopupProps extends Omit<React.ComponentProps<typeof BaseTooltip.Popup>, "className">, VariantProps<typeof tooltipPopupVariants> {
+    className?: string;
+}
+/**
+ * Tooltip Popup
+ *
+ * The tooltip content container with styled appearance.
+ */
+declare const TooltipPopup: React.ForwardRefExoticComponent<Omit<TooltipPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface TooltipArrowProps extends Omit<React.ComponentProps<typeof BaseTooltip.Arrow>, "className"> {
+    className?: string;
+}
+/**
+ * Tooltip Arrow
+ *
+ * Visual pointer element for the tooltip.
+ * Uses shared FloatingArrowSvg with tooltip-bg color token.
+ */
+declare const TooltipArrow: React.ForwardRefExoticComponent<Omit<TooltipArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface TooltipProps {
+    /** The content to show in the tooltip */
+    content: React.ReactNode;
+    /** The element that triggers the tooltip */
+    children: React.ReactNode;
+    /** Side of the trigger to show the tooltip */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Offset from the trigger */
+    sideOffset?: number;
+    /** Alignment along the side */
+    align?: "start" | "center" | "end";
+    /** Delay before showing the tooltip (ms) */
+    delay?: number;
+    /** Delay before hiding the tooltip (ms) */
+    closeDelay?: number;
+    /** Whether to show an arrow */
+    showArrow?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Default open state */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional className for the popup */
+    className?: string;
+}
+/**
+ * Tooltip
+ *
+ * A simple, pre-composed tooltip component for common use cases.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Save your changes">
+ *   <Button>Save</Button>
+ * </Tooltip>
+ * ```
+ */
+declare const Tooltip: ({ content, children, side, sideOffset, align, delay, closeDelay, showArrow, open, defaultOpen, onOpenChange, className, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TooltipParts: (({ children, ...props }: TooltipRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Provider: ({ children, ...props }: TooltipProviderProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, ...props }: TooltipRootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: React.ForwardRefExoticComponent<Omit<TooltipTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Portal: ({ children, ...props }: TooltipPortalProps) => import("react/jsx-runtime").JSX.Element;
+    Positioner: React.ForwardRefExoticComponent<Omit<TooltipPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<TooltipPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Arrow: React.ForwardRefExoticComponent<Omit<TooltipArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { Tooltip, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipPositioner, TooltipPopup, TooltipArrow, tooltipPopupVariants, tooltipArrowVariants, };

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

@@ -191,14 +191,14 @@ export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement>,
  * ```
  */
 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>>;
+declare const cardEyebrowVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "typography-overline text-text-muted uppercase tracking-wider", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "typography-overline text-text-muted uppercase tracking-wider", 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>>;
+declare const cardTitleVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "typography-h5 text-text-primary", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "typography-h5 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.
@@ -224,7 +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>>;
+declare const cardActionsVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex gap-12", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex gap-12", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 /**

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

@@ -2,7 +2,7 @@ import { VariantProps } from 'tailwind-variants';
 import { ComponentTheme } from '../../../lib/theme';
 import * as React from "react";
 export { Background as HeroBackground, BackgroundGradient as HeroGradient, type BackgroundGradientProps as HeroGradientProps, BackgroundImage as HeroBackgroundImage, type BackgroundImageProps as HeroBackgroundImageProps, BackgroundOverlay as HeroOverlay, type BackgroundOverlayProps as HeroOverlayProps, BackgroundStream as HeroBackgroundStream, type BackgroundStreamProps as HeroBackgroundStreamProps, BackgroundVideo as HeroBackgroundVideo, type BackgroundVideoProps as HeroBackgroundVideoProps, } from '../../atoms/background';
-declare const DEFAULT_TITLE_TYPOGRAPHY = "text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 lg:text-192 lg:leading-192 lg:tracking-192 font-medium";
+declare const DEFAULT_TITLE_TYPOGRAPHY = "typography-h1-display";
 declare const heroVariants: import('tailwind-variants').TVReturnType<{
     variant: {
         A1: {
@@ -254,7 +254,7 @@ export interface HeroProps extends Omit<React.HTMLAttributes<HTMLElement>, "titl
     title?: string;
     /**
      * Custom typography class for the title using primitive tokens.
-     * Default: "text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 lg:text-192 lg:leading-192 lg:tracking-192"
+     * Default: "typography-h1-display"
      */
     titleClassName?: string;
     /**

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

@@ -29,9 +29,9 @@ export interface ProseSectionProps extends React.HTMLAttributes<HTMLElement> {
  * A section within Prose content, containing a heading and body text.
  *
  * Responsive typography:
- * - h2: Uses typography-headline-medium (42px mobile → 56px tablet → 72px desktop)
- * - h3: Uses typography-headline-small (32px mobile → 42px tablet → 56px desktop)
- * - Body: Uses typography-body-medium (16px mobile/tablet → 18px desktop)
+ * - h2: Uses typography-h3
+ * - h3: Uses typography-h4
+ * - Body: Uses typography-body-medium
  */
 declare const ProseSection: React.ForwardRefExoticComponent<ProseSectionProps & React.RefAttributes<HTMLElement>>;
 export { Prose, ProseSection };

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

@@ -86,7 +86,7 @@ export interface RiverProps extends React.HTMLAttributes<HTMLElement>, VariantPr
  *     headline="Feature Headline"
  *     body="Description of the feature..."
  *     primaryAction={<Button>Primary</Button>}
- *     secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+ *     secondaryAction={<Button variant="outline">Secondary</Button>}
  *     media={<img src="..." alt="Feature" />}
  *   />
  * </div>

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

@@ -127,9 +127,9 @@ export interface ToutProps extends React.HTMLAttributes<HTMLElement>, VariantPro
  *
  * This component is self-contained with its own grid.
  * Grid setup:
- * - Desktop (lg): 24 columns, gap-spacing-20, content spans 9 cols
- * - Tablet (md): 12 columns, gap-spacing-20, content spans 9 cols
- * - Mobile: 4 columns, gap-spacing-20, content spans all 4 cols
+ * - 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
@@ -137,7 +137,7 @@ export interface ToutProps extends React.HTMLAttributes<HTMLElement>, VariantPro
  *   headline="Feature Headline"
  *   body="Description of the feature..."
  *   primaryAction={<Button>Primary</Button>}
- *   secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+ *   secondaryAction={<Button variant="outline" colorScheme="light">Secondary</Button>}
  *   backgroundMedia={
  *     <img
  *       src="/background.jpg"

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

@@ -0,0 +1,34 @@
+/**
+ * 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/index.d.ts

@@ -1,13 +1,25 @@
+/**
+ * @nationaldesignstudio/react
+ * Design system components for React applications
+ */
 export type { AccordionItemProps, AccordionProps, } from './components/atoms/accordion';
 export { Accordion, AccordionItem } from './components/atoms/accordion';
 export type { BackgroundGradientProps, BackgroundImageProps, BackgroundOverlayProps, BackgroundProps, BackgroundStreamProps, BackgroundVideoProps, } from './components/atoms/background';
 export { Background, BackgroundGradient, BackgroundImage, BackgroundOverlay, BackgroundStream, BackgroundVideo, backgroundGradientVariants, backgroundImageVariants, backgroundOverlayVariants, backgroundStreamVariants, backgroundVariants, backgroundVideoVariants, } from './components/atoms/background';
 export type { ButtonProps, IconButtonProps } from './components/atoms/button';
 export { Button, buttonVariants, IconButton, iconButtonVariants, } from './components/atoms/button';
+export type { InputGroupAddonProps, InputGroupButtonProps, InputGroupInputProps, InputGroupProps, InputGroupTextareaProps, InputGroupTextProps, InputProps, } from './components/atoms/input';
+export { Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, inputGroupAddonVariants, inputGroupVariants, inputVariants, } from './components/atoms/input';
 export type { NdstudioFooterProps } from './components/atoms/ndstudio-footer';
 export { NdstudioFooter } from './components/atoms/ndstudio-footer';
 export type { PagerControlProps } from './components/atoms/pager-control';
 export { PagerControl, pagerControlVariants, } from './components/atoms/pager-control';
+export type { PopoverArrowProps, PopoverBackdropProps, PopoverCloseProps, PopoverDescriptionProps, PopoverPopupProps, PopoverPortalProps, PopoverPositionerProps, PopoverProps, PopoverRootProps, PopoverTitleProps, PopoverTriggerProps, } from './components/atoms/popover';
+export { Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverParts, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, popoverArrowVariants, popoverPopupVariants, } from './components/atoms/popover';
+export type { SelectGroupLabelProps, SelectGroupProps, SelectOptionProps, SelectPopupProps, SelectProps, SelectTriggerProps, } from './components/atoms/select';
+export { Select, SelectGroup, SelectGroupLabel, SelectOption, SelectPopup, SelectRoot, SelectTrigger, selectOptionVariants, selectPopupVariants, selectTriggerVariants, } from './components/atoms/select';
+export type { TooltipArrowProps, TooltipPopupProps, TooltipPortalProps, TooltipPositionerProps, TooltipProps, TooltipProviderProps, TooltipRootProps, TooltipTriggerProps, } from './components/atoms/tooltip';
+export { Tooltip, TooltipArrow, TooltipParts, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipRoot, TooltipTrigger, tooltipArrowVariants, tooltipPopupVariants, } from './components/atoms/tooltip';
 export type { DevToolbarProps, GridOverlayProps } from './components/dev-tools';
 export { DevToolbar, GridOverlay } from './components/dev-tools';
 export type { CardActionsProps, CardBodyProps, CardContentProps, CardDescriptionProps, CardEyebrowProps, CardImageProps, CardProps, CardTitleProps, } from './components/organisms/card';