@nationaldesignstudio/react 0.3.0 → 0.5.0

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

@@ -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/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

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,3 +1,7 @@
+/**
+ * @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';
@@ -10,8 +14,12 @@ 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';