/**
 * Design Token Examples
 * Real-world examples demonstrating token usage with type safety
 */
import React from 'react';
/**
 * ❌ BEFORE: Hard-coded values, no type safety
 */
export declare function ButtonBefore({ children }: {
    children: React.ReactNode;
}): import("react/jsx-runtime").JSX.Element;
/**
 * ✅ AFTER: Type-safe tokens with autocomplete
 */
export declare function ButtonAfter({ children }: {
    children: React.ReactNode;
}): import("react/jsx-runtime").JSX.Element;
/**
 * ❌ BEFORE: String-based CSS variables, typo-prone
 */
export declare function CardBefore({ children }: {
    children: React.ReactNode;
}): import("react/jsx-runtime").JSX.Element;
/**
 * ✅ AFTER: Type-safe CSS variables with autocomplete
 */
export declare function CardAfter({ children }: {
    children: React.ReactNode;
}): import("react/jsx-runtime").JSX.Element;
/**
 * ❌ BEFORE: Manual font properties
 */
export declare function HeadingBefore({ children }: {
    children: React.ReactNode;
}): import("react/jsx-runtime").JSX.Element;
/**
 * ✅ AFTER: Complete typography token
 */
export declare function HeadingAfter({ children }: {
    children: React.ReactNode;
}): import("react/jsx-runtime").JSX.Element;
/**
 * ✅ ALTERNATIVE: Using helper function
 */
export declare function HeadingHelper({ children }: {
    children: React.ReactNode;
}): import("react/jsx-runtime").JSX.Element;
/**
 * ✅ BEST FOR STATIC: Using utility class
 */
export declare function HeadingClass({ children }: {
    children: React.ReactNode;
}): import("react/jsx-runtime").JSX.Element;
interface ProductCardProps {
    title: string;
    description: string;
    price: string;
    imageUrl: string;
}
/**
 * ❌ BEFORE: Mixed hard-coded values and magic numbers
 */
export declare function ProductCardBefore({ title, description, price, imageUrl }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
/**
 * ✅ AFTER: Type-safe tokens throughout
 */
export declare function ProductCardAfter({ title, description, price, imageUrl }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
/**
 * ✅ THEME-AWARE VERSION: Works in both light and dark themes
 */
export declare function ProductCardThemeAware({ title, description, price, imageUrl }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
interface AlertProps {
    variant: 'info' | 'success' | 'warning' | 'error';
    children: React.ReactNode;
}
/**
 * ❌ BEFORE: Hard-coded variant colors
 */
export declare function AlertBefore({ variant, children }: AlertProps): import("react/jsx-runtime").JSX.Element;
/**
 * ✅ AFTER: Using brand semantic colors
 */
export declare function AlertAfter({ variant, children }: AlertProps): import("react/jsx-runtime").JSX.Element;
interface InputProps {
    label: string;
    placeholder?: string;
    error?: string;
}
/**
 * ✅ COMPLETE EXAMPLE: Form input with tokens
 */
export declare function FormInput({ label, placeholder, error }: InputProps): import("react/jsx-runtime").JSX.Element;
/**
 * ✅ REAL-WORLD EXAMPLE: Navigation with elevation and spacing
 */
export declare function NavigationBar(): import("react/jsx-runtime").JSX.Element;
/**
 * ✅ EXAMPLE: Skeleton with opacity and animation
 */
export declare function SkeletonCard(): import("react/jsx-runtime").JSX.Element;
export {};
/**
 * Key Benefits:
 *
 * ✅ Type Safety: Catch typos at compile time
 * ✅ Autocomplete: IDE suggests valid values
 * ✅ Consistency: Use design system tokens everywhere
 * ✅ Maintainability: Update tokens in one place
 * ✅ Theme Support: Easy light/dark mode switching
 * ✅ Documentation: Built-in metadata and descriptions
 *
 * Choose your approach:
 * - Direct values (spacing[16]) for static themes
 * - CSS variables (cssVar.spacing(16)) for dynamic themes
 * - Utility classes (typography.heading1.className) for performance
 */
//# sourceMappingURL=EXAMPLES.d.ts.map