@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/theme-CzBPUlh_.d.ts

@@ -0,0 +1,332 @@
+/**
+ * Component-level theming interface
+ *
+ * This interface defines all the customizable design tokens that can be
+ * overridden at the component level. Components accepting a `theme` prop
+ * will apply these values as CSS custom properties, allowing fine-grained
+ * control over appearance without creating new variants.
+ *
+ * All values use primitive token names (e.g., "gray-100", "spacing-40")
+ * which are converted to CSS variable references internally.
+ */
+/**
+ * Color token names - maps to `--color-{name}` CSS variables
+ * @example "gray-100", "ember-v300", "alpha-black-10"
+ */
+type ColorToken = "gray-50" | "gray-100" | "gray-200" | "gray-300" | "gray-400" | "gray-500" | "gray-600" | "gray-700" | "gray-800" | "gray-900" | "gray-1000" | "gray-1100" | "gray-1200" | "steel-50" | "steel-100" | "steel-200" | "steel-300" | "steel-400" | "steel-500" | "steel-600" | "steel-700" | "steel-800" | "steel-900" | "steel-1000" | "steel-1100" | "steel-1200" | "brown-50" | "brown-100" | "brown-200" | "brown-300" | "brown-400" | "brown-500" | "brown-600" | "brown-700" | "brown-800" | "brown-900" | "brown-1000" | "brown-1100" | "brown-1200" | "ember-50" | "ember-100" | "ember-200" | "ember-300" | "ember-400" | "ember-500" | "ember-600" | "ember-700" | "ember-800" | "ember-900" | "ember-v100" | "ember-v200" | "ember-v300" | "ember-v400" | "orange-50" | "orange-100" | "orange-200" | "orange-300" | "orange-400" | "orange-500" | "orange-600" | "orange-700" | "orange-800" | "orange-900" | "orange-v100" | "orange-v200" | "orange-v300" | "orange-v400" | "amber-50" | "amber-100" | "amber-200" | "amber-300" | "amber-400" | "amber-500" | "amber-600" | "amber-700" | "amber-800" | "amber-900" | "amber-v100" | "amber-v200" | "amber-v300" | "amber-v400" | "yellow-50" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "yellow-900" | "yellow-v100" | "yellow-v200" | "yellow-v300" | "yellow-v400" | "lime-50" | "lime-100" | "lime-200" | "lime-300" | "lime-400" | "lime-500" | "lime-600" | "lime-700" | "lime-800" | "lime-900" | "lime-v100" | "lime-v200" | "lime-v300" | "lime-v400" | "green-50" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "green-900" | "green-v100" | "green-v200" | "green-v300" | "green-v400" | "sage-50" | "sage-100" | "sage-200" | "sage-300" | "sage-400" | "sage-500" | "sage-600" | "sage-700" | "sage-800" | "sage-900" | "sage-v100" | "sage-v200" | "sage-v300" | "sage-v400" | "teal-50" | "teal-100" | "teal-200" | "teal-300" | "teal-400" | "teal-500" | "teal-600" | "teal-700" | "teal-800" | "teal-900" | "teal-v100" | "teal-v200" | "teal-v300" | "teal-v400" | "cyan-50" | "cyan-100" | "cyan-200" | "cyan-300" | "cyan-400" | "cyan-500" | "cyan-600" | "cyan-700" | "cyan-800" | "cyan-900" | "cyan-v100" | "cyan-v200" | "cyan-v300" | "cyan-v400" | "ice-50" | "ice-100" | "ice-200" | "ice-300" | "ice-400" | "ice-500" | "ice-600" | "ice-700" | "ice-800" | "ice-900" | "ice-v100" | "ice-v200" | "ice-v300" | "ice-v400" | "blue-50" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "blue-900" | "blue-v100" | "blue-v200" | "blue-v300" | "blue-v400" | "indigo-50" | "indigo-100" | "indigo-200" | "indigo-300" | "indigo-400" | "indigo-500" | "indigo-600" | "indigo-700" | "indigo-800" | "indigo-900" | "indigo-v100" | "indigo-v200" | "indigo-v300" | "indigo-v400" | "iris-50" | "iris-100" | "iris-200" | "iris-300" | "iris-400" | "iris-500" | "iris-600" | "iris-700" | "iris-800" | "iris-900" | "iris-v100" | "iris-v200" | "iris-v300" | "iris-v400" | "purple-50" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "purple-v100" | "purple-v200" | "purple-v300" | "purple-v400" | "pink-50" | "pink-100" | "pink-200" | "pink-300" | "pink-400" | "pink-500" | "pink-600" | "pink-700" | "pink-800" | "pink-900" | "pink-v100" | "pink-v200" | "pink-v300" | "pink-v400" | "red-50" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "red-v100" | "red-v200" | "red-v300" | "red-v400" | "alpha-black-5" | "alpha-black-10" | "alpha-black-20" | "alpha-black-30" | "alpha-black-40" | "alpha-black-50" | "alpha-black-60" | "alpha-black-70" | "alpha-black-80" | "alpha-black-90" | "alpha-black-95" | "alpha-white-5" | "alpha-white-10" | "alpha-white-20" | "alpha-white-30" | "alpha-white-40" | "alpha-white-50" | "alpha-white-60" | "alpha-white-70" | "alpha-white-80" | "alpha-white-90" | "alpha-white-95" | "white" | "black";
+/**
+ * Spacing token names - maps to `--spacing-{name}` CSS variables
+ * @example "spacing-40", "spacing-72"
+ */
+type SpacingToken = "spacing-0" | "spacing-2" | "spacing-4" | "spacing-6" | "spacing-8" | "spacing-10" | "spacing-11" | "spacing-12" | "spacing-16" | "spacing-20" | "spacing-24" | "spacing-28" | "spacing-32" | "spacing-36" | "spacing-40" | "spacing-48" | "spacing-56" | "spacing-64" | "spacing-72" | "spacing-80" | "spacing-96" | "spacing-112" | "spacing-128" | "spacing-144" | "spacing-160" | "spacing-176" | "spacing-192" | "spacing-208" | "spacing-224" | "spacing-240" | "spacing-256" | "spacing-288" | "spacing-320" | "spacing-352" | "spacing-384" | "spacing-400";
+/**
+ * Radius token names - maps to `--radii-{name}` CSS variables
+ * @example "radii-4", "radii-6"
+ */
+type RadiusToken = "radii-0" | "radii-2" | "radii-4" | "radii-6" | "radii-8" | "radii-10" | "radii-11" | "radii-12" | "radii-16" | "radii-20" | "radii-24" | "radii-28" | "radii-32" | "radii-36" | "radii-40" | "radii-48" | "radii-56" | "radii-64" | "radii-72" | "radii-80" | "radii-96" | "radii-112" | "radii-128" | "radii-144" | "radii-160" | "radii-176" | "radii-192" | "radii-208" | "radii-224" | "radii-240" | "radii-256" | "radii-288" | "radii-320" | "radii-352" | "radii-384" | "radii-400";
+/**
+ * Font size token values - primitive font sizes available in the design system
+ * These correspond to Tailwind classes like `text-64`, `text-128`, etc.
+ * @example 64, 128, 192
+ */
+type FontSizeToken = 9 | 11 | 12 | 14 | 16 | 18 | 21 | 24 | 28 | 32 | 36 | 42 | 48 | 56 | 64 | 72 | 84 | 88 | 96 | 112 | 128 | 148 | 168 | 192 | 224 | 256 | 280;
+/**
+ * Array of all available font sizes for use in UI selectors/dropdowns
+ */
+declare const FONT_SIZES: FontSizeToken[];
+/**
+ * Helper to generate typography class string from font size
+ * @example fontSizeToClass(128) => "text-128 leading-128 tracking-128"
+ */
+declare function fontSizeToClass(size: FontSizeToken): string;
+/**
+ * Helper to generate responsive typography class string
+ * @example responsiveTypographyClass(64, 128, 192) => "text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 xl:text-192 xl:leading-192 xl:tracking-192"
+ */
+declare function responsiveTypographyClass(mobile: FontSizeToken, tablet: FontSizeToken, desktop: FontSizeToken): string;
+interface ComponentThemeColors {
+    /**
+     * Background color for sections
+     * @example "gray-100"
+     */
+    bgSection?: ColorToken;
+    /**
+     * Background color for cards
+     * @example "white"
+     */
+    cardBackground?: ColorToken;
+    /**
+     * Muted background color
+     * @example "gray-50"
+     */
+    bgMuted?: ColorToken;
+    /**
+     * Primary text color
+     * @example "gray-1100"
+     */
+    textPrimary?: ColorToken;
+    /**
+     * Secondary text color
+     * @example "gray-800"
+     */
+    textSecondary?: ColorToken;
+    /**
+     * Muted text color
+     * @example "gray-600"
+     */
+    textMuted?: ColorToken;
+    /**
+     * Inverted text color (for dark backgrounds)
+     * @example "gray-100"
+     */
+    textInverted?: ColorToken;
+    /**
+     * Link text color
+     * @example "gray-1100"
+     */
+    textLink?: ColorToken;
+    /**
+     * Link hover text color
+     * @example "gray-700"
+     */
+    textLinkHover?: ColorToken;
+    /**
+     * Brand accent color
+     * @example "ember-v300"
+     */
+    accentBrand?: ColorToken;
+    /**
+     * Soft brand accent color
+     * @example "ember-100"
+     */
+    accentBrandSoft?: ColorToken;
+    /**
+     * Subtle border color
+     * @example "alpha-black-10"
+     */
+    borderSubtle?: ColorToken;
+    /**
+     * Strong border color
+     * @example "alpha-black-20"
+     */
+    borderStrong?: ColorToken;
+    /**
+     * Focus border color (uses accentBrand by default)
+     * @example "ember-v300"
+     */
+    borderFocus?: ColorToken;
+    /**
+     * Divider border color
+     * @example "alpha-black-10"
+     */
+    borderDivider?: ColorToken;
+    /**
+     * Primary button background color
+     * @example "gray-1100"
+     */
+    buttonPrimaryBg?: ColorToken;
+    /**
+     * Primary button hover background color
+     * @example "gray-600"
+     */
+    buttonPrimaryBgHover?: ColorToken;
+    /**
+     * Secondary button background color
+     * @example "white"
+     */
+    buttonSecondaryBg?: ColorToken;
+    /**
+     * Secondary button hover background color
+     * @example "gray-100"
+     */
+    buttonSecondaryBgHover?: ColorToken;
+}
+interface ComponentThemeSpatial {
+    /**
+     * Grid margin for large breakpoint
+     * @example "spacing-72"
+     */
+    gridLargeMargin?: SpacingToken;
+    /**
+     * Grid gutter for large breakpoint
+     * @example "spacing-24"
+     */
+    gridLargeGutter?: SpacingToken;
+    /**
+     * Number of grid columns for large breakpoint
+     */
+    gridLargeColumns?: number;
+    /**
+     * Grid margin for medium breakpoint
+     * @example "spacing-56"
+     */
+    gridMediumMargin?: SpacingToken;
+    /**
+     * Grid gutter for medium breakpoint
+     * @example "spacing-20"
+     */
+    gridMediumGutter?: SpacingToken;
+    /**
+     * Number of grid columns for medium breakpoint
+     */
+    gridMediumColumns?: number;
+    /**
+     * Grid margin for small breakpoint
+     * @example "spacing-24"
+     */
+    gridSmallMargin?: SpacingToken;
+    /**
+     * Grid gutter for small breakpoint
+     * @example "spacing-12"
+     */
+    gridSmallGutter?: SpacingToken;
+    /**
+     * Number of grid columns for small breakpoint
+     */
+    gridSmallColumns?: number;
+    /**
+     * Section gap for large breakpoint
+     * @example "spacing-64"
+     */
+    sectionLargeGap?: SpacingToken;
+    /**
+     * Section padding for large breakpoint
+     * @example "spacing-128"
+     */
+    sectionLargePadding?: SpacingToken;
+    /**
+     * Section gap for medium breakpoint
+     * @example "spacing-56"
+     */
+    sectionMediumGap?: SpacingToken;
+    /**
+     * Section padding for medium breakpoint
+     * @example "spacing-96"
+     */
+    sectionMediumPadding?: SpacingToken;
+    /**
+     * Section gap for small breakpoint
+     * @example "spacing-32"
+     */
+    sectionSmallGap?: SpacingToken;
+    /**
+     * Section padding for small breakpoint
+     * @example "spacing-64"
+     */
+    sectionSmallPadding?: SpacingToken;
+    /**
+     * Card gap for large size
+     * @example "spacing-10"
+     */
+    cardLargeGap?: SpacingToken;
+    /**
+     * Card padding for large size
+     * @example "spacing-24"
+     */
+    cardLargePadding?: SpacingToken;
+    /**
+     * Card gap for small size
+     * @example "spacing-12"
+     */
+    cardSmallGap?: SpacingToken;
+    /**
+     * Card padding for small size
+     * @example "spacing-16"
+     */
+    cardSmallPadding?: SpacingToken;
+}
+interface ComponentThemeSurface {
+    /**
+     * Card border radius
+     * @example "radii-4"
+     */
+    cardRadius?: RadiusToken;
+    /**
+     * Card stroke/border width in pixels
+     * @example 1
+     */
+    cardStroke?: number;
+    /**
+     * Button border radius
+     * @example "radii-6"
+     */
+    buttonRadius?: RadiusToken;
+    /**
+     * Button stroke/border weight in pixels
+     * @example 1
+     */
+    buttonStrokeWeight?: number;
+}
+/**
+ * Complete component theme interface combining colors, spatial, and surface tokens.
+ *
+ * @example
+ * ```tsx
+ * const customTheme: ComponentTheme = {
+ *   colors: {
+ *     textPrimary: "gray-100",
+ *     accentBrand: "ember-500",
+ *   },
+ *   spatial: {
+ *     sectionLargePadding: "spacing-96",
+ *   },
+ *   surface: {
+ *     cardRadius: "radii-8",
+ *   },
+ * };
+ *
+ * <Tout theme={customTheme} ... />
+ * ```
+ */
+interface ComponentTheme {
+    colors?: ComponentThemeColors;
+    spatial?: ComponentThemeSpatial;
+    surface?: ComponentThemeSurface;
+}
+/**
+ * Button-specific theme interface for customizing individual button appearance.
+ *
+ * @example
+ * ```tsx
+ * const buttonTheme: ButtonTheme = {
+ *   bg: "ember-500",
+ *   bgHover: "ember-600",
+ *   text: "white",
+ *   radius: "radii-8",
+ * };
+ *
+ * <Button theme={buttonTheme}>Themed Button</Button>
+ * ```
+ */
+interface ButtonTheme {
+    /** Background color */
+    bg?: ColorToken;
+    /** Background color on hover */
+    bgHover?: ColorToken;
+    /** Background color on active/press */
+    bgActive?: ColorToken;
+    /** Text color */
+    text?: ColorToken;
+    /** Border color (if using border) */
+    borderColor?: ColorToken;
+    /** Border width in pixels (0 for no border) */
+    borderWidth?: number;
+    /** Border radius */
+    radius?: RadiusToken;
+}
+/**
+ * Converts a ComponentTheme object to CSS custom properties (inline style object)
+ *
+ * @param theme - The theme object to convert
+ * @returns An object suitable for use as React inline styles
+ */
+declare function themeToStyleVars(theme: ComponentTheme | undefined): React.CSSProperties;
+/**
+ * Converts a ButtonTheme object to CSS custom properties (inline style object)
+ *
+ * @param theme - The button theme object to convert
+ * @returns An object suitable for use as React inline styles
+ */
+declare function buttonThemeToStyleVars(theme: ButtonTheme | undefined): React.CSSProperties;
+
+export { type ButtonTheme as B, type ColorToken as C, type FontSizeToken as F, type RadiusToken as R, type SpacingToken as S, type ComponentTheme as a, type ComponentThemeColors as b, type ComponentThemeSpatial as c, type ComponentThemeSurface as d, buttonThemeToStyleVars as e, FONT_SIZES as f, fontSizeToClass as g, responsiveTypographyClass as r, themeToStyleVars as t };

package/dist/tooltip/index.d.ts

@@ -0,0 +1,166 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import { Tooltip as Tooltip$1 } from '@base-ui-components/react/tooltip';
+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: tailwind_variants.TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+}>, {
+    variant: {
+        default: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, string[], 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: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface TooltipProviderProps extends Tooltip$1.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) => react_jsx_runtime.JSX.Element;
+interface TooltipRootProps extends Tooltip$1.Root.Props {
+    children: React.ReactNode;
+}
+/**
+ * Tooltip Root
+ *
+ * Groups all tooltip parts. Does not render an element.
+ */
+declare const TooltipRoot: ({ children, ...props }: TooltipRootProps) => react_jsx_runtime.JSX.Element;
+interface TooltipTriggerProps extends React.ComponentProps<typeof Tooltip$1.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>>;
+interface TooltipPortalProps extends Tooltip$1.Portal.Props {
+    children: React.ReactNode;
+}
+/**
+ * Tooltip Portal
+ *
+ * Renders the tooltip popup in a portal outside the DOM hierarchy.
+ */
+declare const TooltipPortal: ({ children, ...props }: TooltipPortalProps) => react_jsx_runtime.JSX.Element;
+interface TooltipPositionerProps extends Omit<React.ComponentProps<typeof Tooltip$1.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>>;
+interface TooltipPopupProps extends Omit<React.ComponentProps<typeof Tooltip$1.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>>;
+interface TooltipArrowProps extends Omit<React.ComponentProps<typeof Tooltip$1.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>>;
+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) => react_jsx_runtime.JSX.Element;
+declare const TooltipParts: (({ children, ...props }: TooltipRootProps) => react_jsx_runtime.JSX.Element) & {
+    Provider: ({ children, ...props }: TooltipProviderProps) => react_jsx_runtime.JSX.Element;
+    Root: ({ children, ...props }: TooltipRootProps) => react_jsx_runtime.JSX.Element;
+    Trigger: React.ForwardRefExoticComponent<Omit<TooltipTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Portal: ({ children, ...props }: TooltipPortalProps) => 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, TooltipArrow, type TooltipArrowProps, TooltipParts, TooltipPopup, type TooltipPopupProps, TooltipPortal, type TooltipPortalProps, TooltipPositioner, type TooltipPositionerProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipRoot, type TooltipRootProps, TooltipTrigger, type TooltipTriggerProps, tooltipArrowVariants, tooltipPopupVariants };