august-design-system/dist/tokens/index.d.mts

A comprehensive React Native design system following Apple Human Interface Guidelines

import { C as ColorTokens, b as TypographyTokens, c as FontFamilyTokens, T as TypographyStyle, S as SpacingTokens, R as RadiusTokens, e as ShadowTokens, d as ShadowStyle, f as SizeTokens, Z as ZIndexTokens, B as BreakpointTokens, O as OpacityTokens } from '../tokens.types-kLhwMiT-.mjs';
export { A as AnimationPreset, D as DurationKey, E as EasingKey, a as animation, b as animationPresets, d as duration, e as easing, r as reducedMotionPresets, s as stagger, w as withDelay } from '../animation-C9i2F2sT.mjs';

/**
 * AugustDesignSystem - Color Tokens
 *
 * Color palette following Apple Human Interface Guidelines.
 * All colors are defined with proper semantic naming and support
 * both light and dark appearance modes.
 *
 * Color values are derived from Apple's iOS system colors
 * with WCAG 2.1 contrast ratio compliance (4.5:1 for normal text).
 */

declare const lightColors: ColorTokens;
declare const darkColors: ColorTokens;
/**
 * Utility function to add alpha to a hex color.
 */
declare function withAlpha(color: string, alpha: number): string;
/**
 * Check if a color provides sufficient contrast against a background.
 * Returns true if contrast ratio meets WCAG AA standard (4.5:1).
 */
declare function hasMinimumContrast(foreground: string, background: string, minimumRatio?: number): boolean;

/**
 * AugustDesignSystem - Typography Tokens
 *
 * Typography scale inspired by San Francisco Pro font and Apple's
 * Dynamic Type system. Follows iOS Human Interface Guidelines for
 * text styles, sizes, weights, and line heights.
 *
 * Note: React Native uses the system font by default.
 * - iOS: San Francisco (SF Pro)
 * - Android: Roboto
 *
 * The 'System' font family maps to these automatically.
 */

/**
 * Font family tokens.
 * Uses 'System' to automatically select platform-appropriate fonts.
 * For custom fonts, replace these values with your font names.
 */
declare const fontFamily: FontFamilyTokens;
/**
 * Typography tokens following Apple's Dynamic Type specifications.
 *
 * Each style includes:
 * - fontFamily: The font to use
 * - fontSize: Size in points (dp on Android)
 * - lineHeight: Calculated line height for optimal readability
 * - letterSpacing: Tracking adjustments per Apple specs
 * - fontWeight: Weight value as string
 *
 * Line height calculation: fontSize * multiplier (typically 1.2-1.5)
 * Letter spacing: Derived from Apple's SF Pro tracking specifications
 */
declare const typography: TypographyTokens;
/**
 * Creates a typography style with a different weight.
 */
declare function withWeight(style: TypographyStyle, weight: TypographyStyle['fontWeight']): TypographyStyle;
/**
 * Creates a typography style with a different size (scaling line height proportionally).
 */
declare function withSize(style: TypographyStyle, fontSize: number): TypographyStyle;
/**
 * Creates an emphasized version of a typography style (semibold).
 */
declare function emphasized(style: TypographyStyle): TypographyStyle;
/**
 * Creates a bold version of a typography style.
 */
declare function bold(style: TypographyStyle): TypographyStyle;
/**
 * Pre-defined emphasized variants for common use cases.
 */
declare const typographyEmphasis: {
    readonly bodyEmphasis: TypographyStyle;
    readonly calloutEmphasis: TypographyStyle;
    readonly footnoteEmphasis: TypographyStyle;
    readonly caption1Emphasis: TypographyStyle;
    readonly subheadlineEmphasis: TypographyStyle;
};
/**
 * Type for typography variant keys.
 */
type TypographyVariant = keyof typeof typography;
/**
 * Type for emphasized typography variant keys.
 */
type TypographyEmphasisVariant = keyof typeof typographyEmphasis;

/**
 * AugustDesignSystem - Spacing Tokens
 *
 * Spacing scale based on a 4pt grid system, aligned with Apple's
 * Human Interface Guidelines which typically uses 8pt as the base unit.
 *
 * The 4pt base allows for finer control while maintaining consistency
 * with iOS design patterns.
 */

/**
 * Base spacing unit (4pt).
 * All spacing values are multiples of this unit.
 */
declare const SPACING_UNIT = 4;
/**
 * Complete spacing token set.
 *
 * Scale progression:
 * - none: 0
 * - xxs: 2 (0.5x)
 * - xs: 4 (1x)
 * - sm: 8 (2x)
 * - md: 12 (3x)
 * - lg: 16 (4x) - Standard iOS margin
 * - xl: 20 (5x)
 * - xxl: 24 (6x)
 * - xxxl: 32 (8x)
 * - xxxxl: 40 (10x)
 * - xxxxxl: 48 (12x)
 */
declare const spacing: SpacingTokens;
/**
 * Standard iOS layout constants.
 * These are commonly used values throughout iOS design.
 */
declare const layoutConstants: {
    /**
     * Standard horizontal margin for content.
     * iOS typically uses 16pt margins.
     */
    readonly screenHorizontalPadding: 16;
    /**
     * Standard vertical margin for content.
     */
    readonly screenVerticalPadding: 16;
    /**
     * Navigation bar height (standard).
     */
    readonly navigationBarHeight: 44;
    /**
     * Navigation bar height (large title).
     */
    readonly navigationBarLargeTitleHeight: 96;
    /**
     * Tab bar height.
     */
    readonly tabBarHeight: 49;
    /**
     * Tab bar height with home indicator (iPhone X+).
     */
    readonly tabBarHeightWithHomeIndicator: 83;
    /**
     * Minimum touch target size (Apple HIG requirement).
     * All interactive elements should be at least 44x44pt.
     */
    readonly minTouchTarget: 44;
    /**
     * Standard list item height.
     */
    readonly listItemHeight: 44;
    /**
     * Standard list item height (subtitle style).
     */
    readonly listItemSubtitleHeight: 64;
    /**
     * Standard search bar height.
     */
    readonly searchBarHeight: 36;
    /**
     * Standard toolbar height.
     */
    readonly toolbarHeight: 44;
    /**
     * Standard separator thickness.
     */
    readonly separatorThickness: 0.5;
    /**
     * Standard icon size in lists.
     */
    readonly listIconSize: 28;
    /**
     * Disclosure indicator width.
     */
    readonly disclosureIndicatorWidth: 8;
    /**
     * Standard button corner radius.
     */
    readonly buttonCornerRadius: 10;
    /**
     * Standard card corner radius.
     */
    readonly cardCornerRadius: 12;
    /**
     * Sheet corner radius.
     */
    readonly sheetCornerRadius: 16;
};
/**
 * Creates spacing value from multiple of base unit.
 * @param multiplier - Number to multiply base unit by
 */
declare function space(multiplier: number): number;
/**
 * Creates equal spacing object for all sides.
 * @param value - Spacing value
 */
declare function insetAll(value: number): {
    padding: number;
};
/**
 * Creates horizontal/vertical spacing object.
 * @param horizontal - Horizontal spacing
 * @param vertical - Vertical spacing
 */
declare function insetSquish(horizontal: number, vertical: number): {
    paddingHorizontal: number;
    paddingVertical: number;
};
/**
 * Creates directional spacing object.
 * @param top - Top spacing
 * @param right - Right spacing
 * @param bottom - Bottom spacing
 * @param left - Left spacing
 */
declare function insetDirectional(top: number, right: number, bottom: number, left: number): {
    paddingTop: number;
    paddingRight: number;
    paddingBottom: number;
    paddingLeft: number;
};
/**
 * Type for spacing token keys.
 */
type SpacingKey = keyof Omit<SpacingTokens, 'inset' | 'stack' | 'inline'>;
/**
 * Type for semantic spacing keys.
 */
type SemanticSpacingKey = keyof SpacingTokens['inset'];

/**
 * AugustDesignSystem - Border Radius Tokens
 *
 * Border radius scale following Apple's design language which uses
 * continuous corner curves (superellipse) rather than simple circular arcs.
 *
 * Note: React Native uses standard border radius. For true iOS continuous
 * corners, consider using react-native-masked-view or similar.
 */

/**
 * Border radius tokens.
 *
 * Apple's iOS uses these approximate radius values:
 * - Buttons: 8-10pt
 * - Cards: 12-14pt
 * - Modals/Sheets: 16-20pt
 * - Full corner radius: 9999 (pill shape)
 *
 * Scale:
 * - none: 0 - Sharp corners
 * - xs: 4 - Subtle rounding
 * - sm: 8 - Small elements, compact buttons
 * - md: 12 - Default cards, standard buttons
 * - lg: 16 - Large cards, modals
 * - xl: 20 - Sheets, large containers
 * - xxl: 24 - Extra large elements
 * - full: 9999 - Circular/pill shapes
 */
declare const radius: RadiusTokens;
/**
 * Semantic radius values for specific use cases.
 * These provide meaningful names tied to components.
 */
declare const semanticRadius: {
    /**
     * Button corner radius (matches iOS default).
     */
    readonly button: number;
    /**
     * Small button corner radius.
     */
    readonly buttonSmall: number;
    /**
     * Card corner radius.
     */
    readonly card: number;
    /**
     * Input field corner radius.
     */
    readonly input: number;
    /**
     * Modal/Dialog corner radius.
     */
    readonly modal: number;
    /**
     * Bottom sheet corner radius.
     */
    readonly sheet: number;
    /**
     * Image thumbnail radius.
     */
    readonly thumbnail: number;
    /**
     * Avatar (circular) radius.
     */
    readonly avatar: number;
    /**
     * Badge/Chip radius.
     */
    readonly badge: number;
    /**
     * Pill button radius.
     */
    readonly pill: number;
    /**
     * Tag/Label radius.
     */
    readonly tag: number;
    /**
     * Toast notification radius.
     */
    readonly toast: number;
    /**
     * Tooltip radius.
     */
    readonly tooltip: number;
    /**
     * Popover radius.
     */
    readonly popover: number;
    /**
     * Search bar radius.
     */
    readonly searchBar: number;
    /**
     * Segment control radius.
     */
    readonly segmentControl: number;
    /**
     * Slider track radius.
     */
    readonly slider: number;
    /**
     * Progress bar radius.
     */
    readonly progressBar: number;
};
/**
 * Creates a circular radius based on size (for avatars, icons).
 * @param size - The size of the element (width/height)
 */
declare function circular(size: number): number;
/**
 * Creates corner-specific radius object.
 */
declare function corners(topLeft: number, topRight: number, bottomRight: number, bottomLeft: number): {
    borderTopLeftRadius: number;
    borderTopRightRadius: number;
    borderBottomRightRadius: number;
    borderBottomLeftRadius: number;
};
/**
 * Creates top-only rounded corners (for sheets, cards attached to bottom).
 */
declare function topRounded(value: number): {
    borderTopLeftRadius: number;
    borderTopRightRadius: number;
    borderBottomRightRadius: number;
    borderBottomLeftRadius: number;
};
/**
 * Creates bottom-only rounded corners (for cards attached to top).
 */
declare function bottomRounded(value: number): {
    borderTopLeftRadius: number;
    borderTopRightRadius: number;
    borderBottomRightRadius: number;
    borderBottomLeftRadius: number;
};
/**
 * Creates left-only rounded corners.
 */
declare function leftRounded(value: number): {
    borderTopLeftRadius: number;
    borderTopRightRadius: number;
    borderBottomRightRadius: number;
    borderBottomLeftRadius: number;
};
/**
 * Creates right-only rounded corners.
 */
declare function rightRounded(value: number): {
    borderTopLeftRadius: number;
    borderTopRightRadius: number;
    borderBottomRightRadius: number;
    borderBottomLeftRadius: number;
};
/**
 * Type for radius token keys.
 */
type RadiusKey = keyof RadiusTokens;
/**
 * Type for semantic radius keys.
 */
type SemanticRadiusKey = keyof typeof semanticRadius;

/**
 * AugustDesignSystem - Shadow/Elevation Tokens
 *
 * Shadow definitions following Apple's depth philosophy.
 * Shadows create visual hierarchy and help users understand
 * the spatial relationship between elements.
 *
 * iOS uses subtle, soft shadows compared to Material Design.
 * The shadows here are calibrated for iOS-style depth perception.
 */

/**
 * Shadow colors for light and dark modes.
 * iOS shadows are typically black with low opacity.
 */
declare const shadowColors: {
    readonly light: "rgba(0, 0, 0, 1)";
    readonly dark: "rgba(0, 0, 0, 1)";
};
/**
 * Shadow tokens for light mode.
 *
 * iOS shadow characteristics:
 * - Subtle and soft (low opacity, larger blur)
 * - Y-offset typically larger than X-offset
 * - Creates sense of floating without heavy contrast
 *
 * Note: React Native shadow properties:
 * - shadowColor: Color of the shadow
 * - shadowOffset: { width, height } displacement
 * - shadowOpacity: Opacity multiplier (0-1)
 * - shadowRadius: Blur radius
 * - elevation: Android-only, creates Material-style shadow
 */
declare const lightShadows: ShadowTokens;
/**
 * Shadow tokens for dark mode.
 *
 * In dark mode, shadows need to be more subtle as they're less
 * visible against dark backgrounds. iOS relies more on elevation
 * (lighter backgrounds) than shadows in dark mode.
 */
declare const darkShadows: ShadowTokens;
/**
 * Semantic shadow aliases for specific components.
 */
declare const semanticShadows: {
    /**
     * Card shadow.
     */
    readonly card: ShadowStyle;
    /**
     * Button shadow (when elevated).
     */
    readonly button: ShadowStyle;
    /**
     * Pressed button shadow (reduced).
     */
    readonly buttonPressed: ShadowStyle;
    /**
     * Floating action button shadow.
     */
    readonly fab: ShadowStyle;
    /**
     * Dropdown/Popover shadow.
     */
    readonly dropdown: ShadowStyle;
    /**
     * Modal/Dialog shadow.
     */
    readonly modal: ShadowStyle;
    /**
     * Bottom sheet shadow.
     */
    readonly sheet: ShadowStyle;
    /**
     * Toast notification shadow.
     */
    readonly toast: ShadowStyle;
    /**
     * Navigation header shadow.
     */
    readonly header: ShadowStyle;
    /**
     * Tab bar shadow.
     */
    readonly tabBar: ShadowStyle;
};
/**
 * Creates a custom shadow style.
 */
declare function createShadow(offsetY: number, opacity: number, radius: number, elevation: number, offsetX?: number, color?: string): ShadowStyle;
/**
 * Combines multiple shadows (layered shadow effect).
 * Note: React Native doesn't support multiple shadows natively.
 * This returns the most prominent shadow.
 */
declare function combineShadows(...shadows: ShadowStyle[]): ShadowStyle;
/**
 * Scales a shadow by a factor.
 */
declare function scaleShadow(shadow: ShadowStyle, factor: number): ShadowStyle;
/**
 * Type for shadow token keys.
 */
type ShadowKey = keyof ShadowTokens;
/**
 * Type for semantic shadow keys.
 */
type SemanticShadowKey = keyof typeof semanticShadows;

/**
 * AugustDesignSystem - Size Tokens
 *
 * Sizing definitions following Apple Human Interface Guidelines.
 * Includes minimum touch target sizes (44pt per Apple HIG),
 * icon sizes, avatar sizes, and component dimensions.
 */

/**
 * Size tokens for components and interactive elements.
 *
 * Apple HIG specifies 44pt minimum touch target for all
 * interactive elements. This ensures accessibility and
 * comfortable touch interaction.
 */
declare const sizes: SizeTokens;
/**
 * Z-index scale for layering elements.
 * Establishes consistent stacking order throughout the app.
 */
declare const zIndex: ZIndexTokens;
/**
 * Responsive breakpoints based on iOS device sizes.
 * Values represent minimum widths for each breakpoint.
 */
declare const breakpoints: BreakpointTokens;
/**
 * Opacity values for various states and effects.
 */
declare const opacity: OpacityTokens;
/**
 * Pre-configured sizes for specific components.
 */
declare const componentSizes: {
    /**
     * Navigation bar heights.
     */
    readonly navigationBar: {
        readonly standard: 44;
        readonly large: 96;
        readonly largeExpanded: 140;
    };
    /**
     * Tab bar heights.
     */
    readonly tabBar: {
        readonly standard: 49;
        readonly withHomeIndicator: 83;
    };
    /**
     * Search bar dimensions.
     */
    readonly searchBar: {
        readonly height: 36;
        readonly iconSize: 18;
    };
    /**
     * Toolbar dimensions.
     */
    readonly toolbar: {
        readonly height: 44;
        readonly iconSize: 24;
    };
    /**
     * Segmented control.
     */
    readonly segmentedControl: {
        readonly height: 32;
        readonly minSegmentWidth: 60;
    };
    /**
     * Switch/Toggle.
     */
    readonly switch: {
        readonly width: 51;
        readonly height: 31;
        readonly thumbSize: 27;
    };
    /**
     * Slider.
     */
    readonly slider: {
        readonly trackHeight: 4;
        readonly thumbSize: 28;
    };
    /**
     * Progress bar.
     */
    readonly progressBar: {
        readonly height: 4;
        readonly heightLarge: 8;
    };
    /**
     * Badge.
     */
    readonly badge: {
        readonly minWidth: 20;
        readonly height: 20;
        readonly dotSize: 8;
    };
    /**
     * Chip/Tag.
     */
    readonly chip: {
        readonly height: 32;
        readonly heightSmall: 24;
    };
    /**
     * List item.
     */
    readonly listItem: {
        readonly standard: 44;
        readonly subtitle: 64;
        readonly large: 88;
    };
    /**
     * Card.
     */
    readonly card: {
        readonly minHeight: 80;
        readonly imageAspectRatio: number;
    };
    /**
     * Modal.
     */
    readonly modal: {
        readonly maxWidth: 540;
        readonly minHeight: 200;
    };
    /**
     * Sheet.
     */
    readonly sheet: {
        readonly handleWidth: 36;
        readonly handleHeight: 5;
        readonly snapPoints: {
            readonly collapsed: 0.25;
            readonly half: 0.5;
            readonly expanded: 0.9;
        };
    };
    /**
     * Toast.
     */
    readonly toast: {
        readonly minHeight: 48;
        readonly maxWidth: 400;
    };
};
/**
 * Determines if a size meets minimum touch target requirements.
 * @param size - Size to check in points
 */
declare function meetsMinimumTouchTarget(size: number): boolean;
/**
 * Ensures a size meets minimum touch target, returns minimum if not.
 * @param size - Desired size
 */
declare function ensureMinimumTouchTarget(size: number): number;
/**
 * Get appropriate icon size based on context.
 * @param context - Where the icon will be used
 */
declare function getIconSizeForContext(context: 'inline' | 'navigation' | 'tabBar' | 'feature'): number;
/**
 * Type for size token keys.
 */
type SizeKey = keyof SizeTokens;
/**
 * Type for breakpoint keys.
 */
type BreakpointKey = keyof BreakpointTokens;
/**
 * Type for z-index keys.
 */
type ZIndexKey = keyof ZIndexTokens;

export { type BreakpointKey, type RadiusKey, SPACING_UNIT, type SemanticRadiusKey, type SemanticShadowKey, type SemanticSpacingKey, type ShadowKey, type SizeKey, type SpacingKey, type TypographyEmphasisVariant, type TypographyVariant, type ZIndexKey, bold, bottomRounded, breakpoints, circular, combineShadows, componentSizes, corners, createShadow, darkColors, darkShadows, emphasized, ensureMinimumTouchTarget, fontFamily, getIconSizeForContext, hasMinimumContrast, insetAll, insetDirectional, insetSquish, layoutConstants, leftRounded, lightColors, lightShadows, meetsMinimumTouchTarget, opacity, radius, rightRounded, scaleShadow, semanticRadius, semanticShadows, shadowColors, sizes, space, spacing, topRounded, typography, typographyEmphasis, withAlpha, withSize, withWeight, zIndex };