august-design-system
Version:
A comprehensive React Native design system following Apple Human Interface Guidelines
663 lines (656 loc) • 22.1 kB
TypeScript
export { A as AnimationTokens, B as BreakpointTokens, C as ColorTokens, a as DesignTokens, D as DurationTokens, E as EasingTokens, c as FontFamilyTokens, F as FontWeight, O as OpacityTokens, R as RadiusTokens, d as ShadowStyle, e as ShadowTokens, f as SizeTokens, S as SpacingTokens, T as TypographyStyle, b as TypographyTokens, Z as ZIndexTokens } from './tokens.types-kLhwMiT-.js';
import { T as Theme } from './theme.types-CYmxw5XZ.js';
export { B as Breakpoint, C as ColorMode, a as ColorModePreference, i as ColorPath, d as CustomThemeConfig, D as DeepPartial, l as ResponsiveStyle, R as ResponsiveValue, j as SemanticColor, S as SizeProps, k as SystemColor, b as ThemeConfig, e as ThemeContextValue, c as ThemeExtension, f as ThemeProviderProps, g as ThemedProps, h as ThemedStyleFunction, V as VariantProps } from './theme.types-CYmxw5XZ.js';
import { ReactNode } from 'react';
import { AccessibilityRole, AccessibilityState, ViewStyle, GestureResponderEvent, TextStyle, LayoutChangeEvent, ImageStyle } from 'react-native';
export { SPACING_UNIT, 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 } from './tokens/index.js';
export { a as animation, b as animationPresets, d as duration, e as easing, r as reducedMotionPresets, s as stagger, w as withDelay } from './animation-4uGVCbyy.js';
export { ThemeContext, ThemeProvider, createBrandColors, createCustomTypography, createDarkTheme, createLightTheme, createTheme, darkTheme, defaultThemeConfig, getTheme, getTokenValue, isValidTheme, lightTheme, mergeExtensions, useColorMode, useColors, useIsDarkMode, useSpacing, useTheme, useThemeTokens, useToken, useTypography } from './theme/index.js';
export { announceForAccessibility, combineStyles, conditionalStyle, createThemedStyles, responsiveStyle, setAccessibilityFocus, useAccessibleAnimation, useBoldText, useBreakpoint, useDeviceType, useDynamicType, useHighContrast, useIsBreakpoint, useReducedMotion, useResponsiveValue, useScaledTypography, useScreenDimensions, useScreenReader, useThemedStyle, useThemedStyles } from './hooks/index.js';
export { ActionMenu, ActionMenuItem, ActionMenuProps, ActionMenuSection, ActionMenuTriggerProps, Alert, AlertAction, AlertProps, AlertVariant, AlertVariantConfig, Avatar, AvatarData, AvatarProps, AvatarSize, AvatarStyleProps, Badge, BadgeColor, BadgePosition, BadgeProps, BadgeSize, BadgeSizeConfig, BadgeVariant, Box, BoxProps, Button, ButtonColorScheme, ButtonProps, ButtonSize, ButtonStyleProps, ButtonVariant, Card, CardFooterProps, CardHeaderProps, CardPadding, CardProps, CardVariant, CircularProgressSizeConfig, CommonIconName, ConversationListItem, ConversationListItemProps, ConversationListItemStyleProps, Divider, DividerOrientation, DividerProps, DividerVariant, EmptyState, EmptyStateAction, EmptyStateLayout, EmptyStateProps, EmptyStateSize, FileAttachment, HapticFeedbackType, Header, HeaderAction, HeaderBackground, HeaderProps, HeaderVariant, ICON_SIZES, Icon, IconColor, IconProps, IconRenderingMode, IconSize, IconSymbolEffect, IconWeight, ImageAttachment, InputBar, InputBarProps, InputBarStyleProps, LinearProgressSizeConfig, ListItem, ListItemAccessory, ListItemProps, ListItemSize, ListItemSizeConfig, LoadingPosition, MatchStatus, MessageBubble, MessageBubbleProps, MessageBubbleStyleProps, MessageDirection, MessagePreviewType, MessageReactions, MessageReactionsProps, MessageStatus, MessageType, Modal, ModalAction, ModalProps, ModalState, ModalVariant, PresenceStatus, PressAnimationType, Pressable, PressableState, Progress, ProgressColor, ProgressSize, ProgressVariant, Reaction, ReactionSizeConfig, SPINNER_SIZES, SearchBar, SearchBarProps, Sheet, SheetHandleConfig, SheetProps, SheetSnapPoint, SheetSnapPoints, Spinner, SpinnerColor, SpinnerProps, SpinnerSize, StatusBadge, StatusBadgeProps, StatusBadgeSize, StatusBadgeStyleProps, Switch, SwitchProps, SwitchSize, SwitchSizeConfig, TabBar, TabBarItem, TabBarProps, TabItemProps, Toast, ToastConfig, ToastContextValue, ToastPosition, ToastProps, ToastProvider, ToastProviderProps, ToastVariant, TypingIndicator, TypingIndicatorProps, TypingIndicatorSize, TypingIndicatorStyleProps, TypingIndicatorVariant, UnreadBadge, UnreadBadgeColorScheme, UnreadBadgeProps, UnreadBadgeSize, UnreadBadgeStyleProps, getIconColor, getIconSize, getPlatformIconName, iconMap, isCommonIconName, useToast } from './components/index.js';
/**
* AugustDesignSystem - Component Type Definitions
*
* Shared type definitions for component props and behaviors.
*/
/**
* Base props shared by all components.
*/
interface BaseComponentProps {
/**
* Test ID for testing frameworks.
*/
readonly testID?: string;
/**
* Accessibility label for screen readers.
*/
readonly accessibilityLabel?: string;
/**
* Accessibility hint providing additional context.
*/
readonly accessibilityHint?: string;
/**
* Accessibility role defining the component's purpose.
*/
readonly accessibilityRole?: AccessibilityRole;
/**
* Accessibility state for interactive elements.
*/
readonly accessibilityState?: AccessibilityState;
/**
* Whether to show component.
* @default true
*/
readonly visible?: boolean;
}
/**
* Props for components that accept children.
*/
interface ContainerProps extends BaseComponentProps {
readonly children?: ReactNode;
}
/**
* Props for components with custom styling.
*/
interface StylableProps {
/**
* Custom style overrides.
*/
readonly style?: ViewStyle | ViewStyle[];
}
/**
* Combined base props for stylable containers.
*/
interface StylableContainerProps extends ContainerProps, StylableProps {
}
/**
* Interactive states for pressable components.
*/
interface InteractiveState {
readonly pressed: boolean;
readonly hovered: boolean;
readonly focused: boolean;
}
/**
* Props for pressable/interactive components.
*/
interface PressableProps extends BaseComponentProps {
/**
* Handler for press events.
*/
readonly onPress?: (event: GestureResponderEvent) => void;
/**
* Handler for long press events.
*/
readonly onLongPress?: (event: GestureResponderEvent) => void;
/**
* Handler for press in events.
*/
readonly onPressIn?: (event: GestureResponderEvent) => void;
/**
* Handler for press out events.
*/
readonly onPressOut?: (event: GestureResponderEvent) => void;
/**
* Whether the component is disabled.
* @default false
*/
readonly disabled?: boolean;
/**
* Delay before onLongPress is triggered in milliseconds.
* @default 500
*/
readonly delayLongPress?: number;
/**
* Haptic feedback type on press.
*/
readonly hapticFeedback?: 'light' | 'medium' | 'heavy' | 'selection' | 'none';
}
/**
* Spacing shorthand props.
*/
interface SpacingProps {
readonly margin?: number | string;
readonly marginTop?: number | string;
readonly marginRight?: number | string;
readonly marginBottom?: number | string;
readonly marginLeft?: number | string;
readonly marginHorizontal?: number | string;
readonly marginVertical?: number | string;
readonly padding?: number | string;
readonly paddingTop?: number | string;
readonly paddingRight?: number | string;
readonly paddingBottom?: number | string;
readonly paddingLeft?: number | string;
readonly paddingHorizontal?: number | string;
readonly paddingVertical?: number | string;
}
/**
* Flexbox layout props.
*/
interface FlexProps {
readonly flex?: number;
readonly flexGrow?: number;
readonly flexShrink?: number;
readonly flexBasis?: number | string;
readonly flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
readonly flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
readonly alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
readonly alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
readonly alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
readonly justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
}
/**
* Combined layout props.
*/
interface LayoutProps extends SpacingProps, FlexProps {
readonly width?: number | string;
readonly height?: number | string;
readonly minWidth?: number | string;
readonly maxWidth?: number | string;
readonly minHeight?: number | string;
readonly maxHeight?: number | string;
readonly aspectRatio?: number;
readonly position?: 'relative' | 'absolute';
readonly top?: number | string;
readonly right?: number | string;
readonly bottom?: number | string;
readonly left?: number | string;
readonly zIndex?: number;
}
/**
* Text variant based on typography scale.
*/
type TextVariant = 'largeTitle' | 'title1' | 'title2' | 'title3' | 'headline' | 'subheadline' | 'body' | 'callout' | 'footnote' | 'caption1' | 'caption2';
/**
* Text alignment options.
*/
type TextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify';
/**
* Typography-specific props.
*/
interface TypographyProps extends BaseComponentProps {
/**
* Text variant from the typography scale.
* @default 'body'
*/
readonly variant?: TextVariant;
/**
* Text color - can be semantic or custom.
*/
readonly color?: string;
/**
* Text alignment.
*/
readonly align?: TextAlign;
/**
* Number of lines before truncation.
*/
readonly numberOfLines?: number;
/**
* Whether text is selectable.
* @default false
*/
readonly selectable?: boolean;
/**
* Custom text style overrides.
*/
readonly style?: TextStyle | TextStyle[];
}
/**
* Loading indicator props.
*/
interface LoadingProps extends BaseComponentProps {
/**
* Size of the loading indicator.
* @default 'md'
*/
readonly size?: 'sm' | 'md' | 'lg';
/**
* Color of the loading indicator.
*/
readonly color?: string;
/**
* Whether to show loading text.
*/
readonly label?: string;
}
/**
* Progress indicator props.
*/
interface ProgressProps extends BaseComponentProps {
/**
* Progress value between 0 and 1.
*/
readonly value: number;
/**
* Size of the progress indicator.
* @default 'md'
*/
readonly size?: 'sm' | 'md' | 'lg';
/**
* Color of the progress fill.
*/
readonly color?: string;
/**
* Color of the progress track.
*/
readonly trackColor?: string;
/**
* Whether to show the progress percentage.
* @default false
*/
readonly showLabel?: boolean;
}
/**
* Common input props.
*/
interface InputBaseProps extends BaseComponentProps {
/**
* Input value.
*/
readonly value?: string;
/**
* Handler for value changes.
*/
readonly onChangeText?: (text: string) => void;
/**
* Placeholder text.
*/
readonly placeholder?: string;
/**
* Whether the input is disabled.
* @default false
*/
readonly disabled?: boolean;
/**
* Whether the input is in error state.
* @default false
*/
readonly error?: boolean;
/**
* Error message to display.
*/
readonly errorMessage?: string;
/**
* Label for the input.
*/
readonly label?: string;
/**
* Helper text below the input.
*/
readonly helperText?: string;
/**
* Handler for focus events.
*/
readonly onFocus?: () => void;
/**
* Handler for blur events.
*/
readonly onBlur?: () => void;
}
/**
* Layout event handler type.
*/
type LayoutHandler = (event: LayoutChangeEvent) => void;
/**
* Standard event handler.
*/
type EventHandler<T = void> = T extends void ? () => void : (value: T) => void;
/**
* Make specific properties required.
*/
type RequireFields<T, K extends keyof T> = T & Required<Pick<T, K>>;
/**
* Make specific properties optional.
*/
type OptionalFields<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
/**
* Extract style type from component.
*/
type StyleType = ViewStyle | TextStyle | ImageStyle;
/**
* Merge two types with the second taking precedence.
*/
type Merge<T, U> = Omit<T, keyof U> & U;
/**
* Props that can be passed to native components.
*/
type NativeProps<T> = Omit<T, 'style'> & {
style?: StyleType | StyleType[];
};
/**
* AugustDesignSystem - Utility Functions
*
* Helper utilities for working with the design system.
*/
/**
* Converts a hex color to RGB values.
*/
declare function hexToRgb(hex: string): {
r: number;
g: number;
b: number;
} | null;
/**
* Converts RGB values to a hex color string.
*/
declare function rgbToHex(r: number, g: number, b: number): string;
/**
* Adds alpha transparency to a color.
* @param color - Hex color or rgb string
* @param alpha - Alpha value (0-1)
*/
declare function withOpacity(color: string, alpha: number): string;
/**
* Lightens a hex color by a percentage.
* @param color - Hex color
* @param percent - Percentage to lighten (0-100)
*/
declare function lighten(color: string, percent: number): string;
/**
* Darkens a hex color by a percentage.
* @param color - Hex color
* @param percent - Percentage to darken (0-100)
*/
declare function darken(color: string, percent: number): string;
/**
* Calculates relative luminance of a color.
* Used for WCAG contrast calculations.
*/
declare function getLuminance(color: string): number;
/**
* Calculates contrast ratio between two colors.
* @returns Contrast ratio (1-21)
*/
declare function getContrastRatio(color1: string, color2: string): number;
/**
* Checks if contrast ratio meets WCAG AA standard.
* @param ratio - Contrast ratio
* @param isLargeText - Whether text is large (18pt+ or 14pt+ bold)
*/
declare function meetsWCAGAA(ratio: number, isLargeText?: boolean): boolean;
/**
* Checks if contrast ratio meets WCAG AAA standard.
* @param ratio - Contrast ratio
* @param isLargeText - Whether text is large
*/
declare function meetsWCAGAAA(ratio: number, isLargeText?: boolean): boolean;
/**
* Creates a spacing value based on the 4pt grid.
* @param multiplier - Grid multiplier
*/
declare function gridSpace(multiplier: number): number;
/**
* Clamps a value between min and max.
*/
declare function clamp(value: number, min: number, max: number): number;
/**
* Safely gets a nested value from an object using dot notation.
* @param obj - Object to traverse
* @param path - Dot-separated path
* @param defaultValue - Default if path not found
*/
declare function get<T = unknown>(obj: Record<string, unknown>, path: string, defaultValue?: T): T;
/**
* Gets a color token value from theme using path.
* @param theme - Theme object
* @param colorPath - Path like 'background.primary' or 'system.blue'
*/
declare function getColor(theme: Theme, colorPath: string): string;
/**
* Returns iOS-specific value or fallback.
*/
declare function ios<T>(iosValue: T, androidValue: T): T;
/**
* Returns Android-specific value or fallback.
*/
declare function android<T>(androidValue: T, iosValue: T): T;
/**
* Platform-specific value selector.
*/
declare function platformSelect<T>(options: {
ios?: T;
android?: T;
default: T;
}): T;
/**
* Capitalizes the first letter of a string.
*/
declare function capitalize(str: string): string;
/**
* Converts a string to kebab-case.
*/
declare function toKebabCase(str: string): string;
/**
* Converts a string to camelCase.
*/
declare function toCamelCase(str: string): string;
/**
* AugustDesignSystem - Constants
*
* Design system constants and static values.
*/
/**
* Design system version.
*/
declare const VERSION = "1.0.0";
/**
* Design system name.
*/
declare const NAME = "AugustDesignSystem";
/**
* Apple Human Interface Guidelines constants.
*/
declare const HIG: {
/**
* Minimum touch target size in points.
* All interactive elements must be at least this size.
*/
readonly MIN_TOUCH_TARGET: 44;
/**
* Recommended touch target size for comfortable interaction.
*/
readonly COMFORTABLE_TOUCH_TARGET: 48;
/**
* Standard iOS content margins.
*/
readonly CONTENT_MARGIN: 16;
/**
* Standard iOS safe area additional padding.
*/
readonly SAFE_AREA_PADDING: 16;
/**
* Navigation bar heights.
*/
readonly NAV_BAR_HEIGHT: 44;
readonly NAV_BAR_LARGE_TITLE_HEIGHT: 96;
/**
* Tab bar heights.
*/
readonly TAB_BAR_HEIGHT: 49;
readonly TAB_BAR_HEIGHT_WITH_HOME_INDICATOR: 83;
/**
* Home indicator height (iPhone X and later).
*/
readonly HOME_INDICATOR_HEIGHT: 34;
/**
* Status bar heights.
*/
readonly STATUS_BAR_HEIGHT: 44;
readonly STATUS_BAR_HEIGHT_LEGACY: 20;
/**
* Keyboard heights (approximate, varies by device).
*/
readonly KEYBOARD_HEIGHT_PORTRAIT: 291;
readonly KEYBOARD_HEIGHT_LANDSCAPE: 209;
/**
* Standard list item heights.
*/
readonly LIST_ITEM_HEIGHT: 44;
readonly LIST_ITEM_SUBTITLE_HEIGHT: 64;
/**
* Separator line thickness.
*/
readonly SEPARATOR_HEIGHT: 0.5;
/**
* Standard animation durations (in ms).
*/
readonly ANIMATION_FAST: 150;
readonly ANIMATION_NORMAL: 250;
readonly ANIMATION_SLOW: 350;
/**
* Modal presentation heights.
*/
readonly SHEET_PEEK_HEIGHT: 0.25;
readonly SHEET_HALF_HEIGHT: 0.5;
readonly SHEET_FULL_HEIGHT: 0.9;
};
/**
* Accessibility-related constants.
*/
declare const ACCESSIBILITY: {
/**
* Minimum contrast ratio for normal text (WCAG AA).
*/
readonly MIN_CONTRAST_RATIO: 4.5;
/**
* Minimum contrast ratio for large text (WCAG AA).
*/
readonly MIN_CONTRAST_RATIO_LARGE: 3;
/**
* Enhanced contrast ratio for normal text (WCAG AAA).
*/
readonly ENHANCED_CONTRAST_RATIO: 7;
/**
* Enhanced contrast ratio for large text (WCAG AAA).
*/
readonly ENHANCED_CONTRAST_RATIO_LARGE: 4.5;
/**
* Large text threshold (18pt regular or 14pt bold).
*/
readonly LARGE_TEXT_THRESHOLD: 18;
readonly LARGE_TEXT_BOLD_THRESHOLD: 14;
/**
* Maximum text scale factor for accessibility.
*/
readonly MAX_FONT_SCALE: 3.1;
/**
* Minimum recommended line height ratio.
*/
readonly MIN_LINE_HEIGHT_RATIO: 1.2;
};
/**
* Platform-specific constants.
*/
declare const PLATFORM: {
/**
* iOS system font name.
*/
readonly IOS_FONT: "System";
/**
* Android system font name.
*/
readonly ANDROID_FONT: "Roboto";
/**
* Monospace font fallbacks.
*/
readonly MONOSPACE_IOS: "Menlo";
readonly MONOSPACE_ANDROID: "monospace";
/**
* Default shadow color.
*/
readonly SHADOW_COLOR: "#000000";
};
/**
* Z-index values for layering.
*/
declare const Z_INDEX: {
readonly BASE: 0;
readonly DROPDOWN: 1000;
readonly STICKY: 1100;
readonly OVERLAY: 1200;
readonly MODAL: 1300;
readonly POPOVER: 1400;
readonly TOOLTIP: 1500;
readonly TOAST: 1600;
};
/**
* Grid system constants.
*/
declare const GRID: {
/**
* Base unit for spacing (4pt grid).
*/
readonly BASE_UNIT: 4;
/**
* Common grid multipliers.
*/
readonly MULTIPLIERS: {
readonly HALF: 0.5;
readonly SINGLE: 1;
readonly DOUBLE: 2;
readonly TRIPLE: 3;
readonly QUAD: 4;
readonly QUINT: 5;
readonly HEX: 6;
readonly OCTA: 8;
readonly DECA: 10;
readonly DODECA: 12;
};
};
/**
* Device size breakpoints in points.
*/
declare const BREAKPOINTS: {
/**
* Small phones.
*/
readonly XS: 0;
/**
* Standard phones (iPhone SE and up).
*/
readonly SM: 375;
/**
* Large phones (iPhone Pro Max).
*/
readonly MD: 428;
/**
* Small tablets (iPad Mini).
*/
readonly LG: 744;
/**
* Large tablets (iPad Pro).
*/
readonly XL: 1024;
};
/**
* Timing-related constants.
*/
declare const TIMING: {
/**
* Debounce delay for search inputs (ms).
*/
readonly DEBOUNCE_SEARCH: 300;
/**
* Debounce delay for resize events (ms).
*/
readonly DEBOUNCE_RESIZE: 150;
/**
* Long press threshold (ms).
*/
readonly LONG_PRESS_DELAY: 500;
/**
* Double tap threshold (ms).
*/
readonly DOUBLE_TAP_DELAY: 300;
/**
* Toast default duration (ms).
*/
readonly TOAST_DURATION: 4000;
/**
* Skeleton loading animation duration (ms).
*/
readonly SKELETON_DURATION: 1500;
};
export { ACCESSIBILITY, BREAKPOINTS, type BaseComponentProps, type ContainerProps, type EventHandler, type FlexProps, GRID, HIG, type InputBaseProps, type InteractiveState, type LayoutHandler, type LayoutProps, type LoadingProps, type Merge, NAME, type NativeProps, type OptionalFields, PLATFORM, type PressableProps, type ProgressProps, type RequireFields, type SpacingProps, type StylableContainerProps, type StylableProps, type StyleType, TIMING, type TextAlign, type TextVariant, Theme, type TypographyProps, VERSION, Z_INDEX, android, capitalize, clamp, darken, get, getColor, getContrastRatio, getLuminance, gridSpace, hexToRgb, ios, lighten, meetsWCAGAA, meetsWCAGAAA, platformSelect, rgbToHex, toCamelCase, toKebabCase, withOpacity };