ccp/com.ezzy.ccp.countrypicker.theme

Package-level declarations

Theming: CountryPickerDefaults and the value classes it produces — CountryPickerColors, CountryPickerShapes, CountryPickerDimensions, CountryPickerTypography, CountryPickerMotion — plus flag presentation (CountryFlagShape, CountryFlagStyle, CountryFlagConfig) and the phone field's PhoneNumberInputStyle.

Types

CountryFlagSource

@Immutable

sealed interface CountryFlagSource

Where flag artwork comes from.

CountryFlagStyle

enum CountryFlagStyle : Enum<CountryFlagStyle>

How a flag is drawn.

CountryListStyle

enum CountryListStyle : Enum<CountryListStyle>

How the country list is laid out.

CountryPickerColors

@Immutable

data class CountryPickerColors(val accent: Color, val onAccent: Color, val accentSoft: Color, val onAccentSoft: Color, val background: Color, val surface: Color, val surfaceRaised: Color, val surfaceSunken: Color, val scrim: Color, val hairline: Color, val outline: Color, val focusRing: Color, val textPrimary: Color, val textSecondary: Color, val textTertiary: Color, val textDisabled: Color, val error: Color, val errorSoft: Color, val success: Color, val successSoft: Color, val warning: Color, val warningSoft: Color, val highlight: Color, val shadow: Color, val skeleton: Color, val skeletonShine: Color)

The picker's color roles.

CountryPickerDefaults

object CountryPickerDefaults

Behaviour presets for the three kinds of picker.

CountryPickerDensity

enum CountryPickerDensity : Enum<CountryPickerDensity>

How much room the picker gives its rows and fields.

CountryPickerDimensions

@Immutable

data class CountryPickerDimensions(val fieldMinHeight: Dp = 60.dp, val fieldCompactHeight: Dp = 44.dp, val fieldHorizontalPadding: Dp = 14.dp, val fieldContentSpacing: Dp = 12.dp, val fieldBorderWidth: Dp = 1.dp, val fieldFocusedBorderWidth: Dp = 1.5.dp, val focusRingWidth: Dp = 4.dp, val flagSizeField: Dp = 34.dp, val flagSizeRow: Dp = 36.dp, val flagSizeCompact: Dp = 24.dp, val flagSizeTile: Dp = 40.dp, val rowMinHeight: Dp = 58.dp, val rowHorizontalPadding: Dp = 14.dp, val rowVerticalPadding: Dp = 10.dp, val rowContentSpacing: Dp = 14.dp, val groupHorizontalMargin: Dp = 16.dp, val groupSpacing: Dp = 22.dp, val sheetHorizontalPadding: Dp = 20.dp, val searchFieldHeight: Dp = 48.dp, val chipHeight: Dp = 34.dp, val chipHorizontalPadding: Dp = 14.dp, val chipSpacing: Dp = 4.dp, val tileWidth: Dp = 84.dp, val tileHeight: Dp = 104.dp, val indicatorSize: Dp = 22.dp, val checkboxSize: Dp = 22.dp, val iconButtonSize: Dp = 32.dp, val indexRailWidth: Dp = 22.dp, val indexBubbleSize: Dp = 60.dp, val minimumTouchTarget: Dp = 48.dp)

Sizes and spacing.

CountryPickerElevation

@Immutable

data class CountryPickerElevation(val field: CountryPickerShadow, val fieldFocused: CountryPickerShadow, val searchField: CountryPickerShadow, val card: CountryPickerShadow, val tile: CountryPickerShadow, val floatingBar: CountryPickerShadow, val dialog: CountryPickerShadow)

Shadows for each level of the picker's surface hierarchy.

CountryPickerHaptics

@Immutable

data class CountryPickerHaptics(val enabled: Boolean = true, val select: HapticFeedbackType? = HapticFeedbackType.Confirm, val toggleOn: HapticFeedbackType? = HapticFeedbackType.ToggleOn, val toggleOff: HapticFeedbackType? = HapticFeedbackType.ToggleOff, val scrub: HapticFeedbackType? = HapticFeedbackType.SegmentFrequentTick, val filter: HapticFeedbackType? = HapticFeedbackType.SegmentTick, val limitReached: HapticFeedbackType? = HapticFeedbackType.Reject, val error: HapticFeedbackType? = HapticFeedbackType.Reject)

Haptic feedback for the picker's key moments.

CountryPickerLayout

@Immutable

data class CountryPickerLayout(val presentation: PickerPresentation = PickerPresentation.Adaptive, val listStyle: CountryListStyle = CountryListStyle.InsetGrouped, val flagStyle: CountryFlagStyle = CountryFlagStyle.Tile, val flagSource: CountryFlagSource = CountryFlagSource.FlagCdn(), val selectionIndicator: SelectionIndicator = SelectionIndicator.Check, val headerStyle: SheetHeaderStyle = SheetHeaderStyle.Large, val quickPicks: QuickPicksStyle = QuickPicksStyle.Carousel, val showRegionFilters: Boolean = true, val showRegionCounts: Boolean = true, val showDialCode: Boolean = true, val showIsoCode: Boolean = false, val showRegionName: Boolean = false, val showDividers: Boolean = true, val showAlphabetIndex: Boolean = true, val showResultCount: Boolean = true, val highlightSearchMatches: Boolean = true, val showSearchSuggestions: Boolean = true, val sheetHeightFraction: Float = 0.92f, val dialogMaxWidth: Dp = 560.dp, val dialogMaxHeight: Dp = 760.dp, val wideScreenBreakpoint: Dp = 600.dp)

Structural choices — the parts of the design that are about arrangement rather than color or size.

CountryPickerMotion

@Immutable

data class CountryPickerMotion(val enabled: Boolean = true, val press: FiniteAnimationSpec<Float> = spring(dampingRatio = 0.7f, stiffness = 900f), val selection: FiniteAnimationSpec<Float> = spring(dampingRatio = 0.55f, stiffness = Spring.StiffnessMedium), val layout: FiniteAnimationSpec<Float> = spring(dampingRatio = 0.86f, stiffness = 420f), val offset: FiniteAnimationSpec<IntOffset> = spring( dampingRatio = 0.86f, stiffness = 420f, visibilityThreshold = IntOffset.VisibilityThreshold, ), val size: FiniteAnimationSpec<IntSize> = spring( dampingRatio = 0.9f, stiffness = 500f, visibilityThreshold = IntSize.VisibilityThreshold, ), val dp: FiniteAnimationSpec<Dp> = spring(dampingRatio = 0.8f, stiffness = 600f, visibilityThreshold = 0.1.dp), val color: FiniteAnimationSpec<Color> = tween(COLOR_MILLIS, easing = Standard), val fadeIn: FiniteAnimationSpec<Float> = tween(FADE_IN_MILLIS, easing = EmphasizedDecelerate), val fadeOut: FiniteAnimationSpec<Float> = tween(FADE_OUT_MILLIS, easing = EmphasizedAccelerate), val pressedScale: Float = 0.97f, val shakeDistance: Dp = 7.dp, val selectionDismissDelayMillis: Long = 240, val staggerMillis: Int = 16, val maxStaggeredItems: Int = 14)

How the picker moves.

CountryPickerShadow

@Immutable

data class CountryPickerShadow(val layers: List<ShadowLayer>)

A stack of ShadowLayers, drawn bottom-up.

CountryPickerShapes

@Immutable

data class CountryPickerShapes(val sheet: Shape = RoundedCornerShape(topStart = 32.dp, topEnd = 32.dp), val dialog: Shape = RoundedCornerShape(32.dp), val field: Shape = RoundedCornerShape(16.dp), val searchField: Shape = RoundedCornerShape(14.dp), val groupCornerRadius: Dp = 20.dp, val row: Shape = RoundedCornerShape(14.dp), val chip: Shape = CircleShape, val flagTile: Shape = RoundedCornerShape(percent = 28), val flagRounded: Shape = RoundedCornerShape(percent = 22), val badge: Shape = RoundedCornerShape(6.dp), val button: Shape = RoundedCornerShape(14.dp), val tile: Shape = RoundedCornerShape(18.dp), val floatingBar: Shape = RoundedCornerShape(22.dp), val pill: Shape = CircleShape)

Corner shapes for every surface the picker draws.

CountryPickerStyle

@Immutable

data class CountryPickerStyle(val colors: CountryPickerColors, val shapes: CountryPickerShapes, val dimensions: CountryPickerDimensions, val typography: CountryPickerTypography, val motion: CountryPickerMotion, val elevation: CountryPickerElevation, val layout: CountryPickerLayout, val haptics: CountryPickerHaptics)

Everything about how the country picker looks and feels, in one value.

CountryPickerStyles

object CountryPickerStyles

Ready-made styles.

CountryPickerTheme

object CountryPickerTheme

Access to the style in effect.

CountryPickerTypography

@Immutable

data class CountryPickerTypography(val title: TextStyle, val subtitle: TextStyle, val sectionLabel: TextStyle, val countryName: TextStyle, val countryNameSelected: TextStyle, val caption: TextStyle, val dialCode: TextStyle, val fieldLabel: TextStyle, val fieldValue: TextStyle, val phoneNumber: TextStyle, val helper: TextStyle, val button: TextStyle, val chip: TextStyle, val badge: TextStyle, val search: TextStyle, val tileLabel: TextStyle, val indexLetter: TextStyle, val indexBubble: TextStyle, val emptyTitle: TextStyle, val emptyBody: TextStyle)

Text styles for every piece of text the picker draws.

FlagImageFormat

enum FlagImageFormat : Enum<FlagImageFormat>

The image format of flag artwork.

FlagImageShape

enum FlagImageShape : Enum<FlagImageShape>

The geometry of flag artwork — flagcdn's three shapes.

PhoneFieldSize

enum PhoneFieldSize : Enum<PhoneFieldSize>

A named overall size for the phone field, shared by com.ezzy.ccp.countrypicker.ui.PhoneNumberField and the legacy com.ezzy.ccp.components.PhoneNumberInput.

PhoneNumberInputDefaults

object PhoneNumberInputDefaults

Builders for PhoneNumberInputStyle.

PhoneNumberInputStyle

@Immutable

data class PhoneNumberInputStyle(val labelMode: InputLabelMode = InputLabelMode.Floating, val prefixContentMode: PhonePrefixContentMode = PhonePrefixContentMode.FlagAndDialCode, val showDropdownIcon: Boolean = true, val showPrefixDivider: Boolean = true, val size: PhoneFieldSize = PhoneFieldSize.Regular, val showGhostDigits: Boolean = true, val showProgress: Boolean = true, val showNumberType: Boolean = true, val showValidIndicator: Boolean = true)

Options specific to com.ezzy.ccp.countrypicker.ui.PhoneNumberField — one typed value instead of a row of unrelated booleans on the composable.

PickerPresentation

enum PickerPresentation : Enum<PickerPresentation>

How the picker is presented when it opens.

QuickPicksStyle

enum QuickPicksStyle : Enum<QuickPicksStyle>

How recently used, suggested and detected countries are surfaced.

SelectionIndicator

enum SelectionIndicator : Enum<SelectionIndicator>

What marks the selected row in single selection. Multiple selection always uses a checkbox.

ShadowLayer

@Immutable

data class ShadowLayer(val blur: Dp, val offsetY: Dp = 0.dp, val spread: Dp = 0.dp, val alpha: Float)

One layer of a soft shadow.

SheetHeaderStyle

enum SheetHeaderStyle : Enum<SheetHeaderStyle>

The sheet's title area.

Properties

LocalCountryPickerStyle

val LocalCountryPickerStyle: ProvidableCompositionLocal<CountryPickerStyle?>

The style in effect, or null when no CountryPickerTheme encloses the composition — in which case components fall back to CountryPickerStyles.signature.

Functions

CountryPickerTheme

@Composable

fun CountryPickerTheme(style: CountryPickerStyle = CountryPickerStyles.signature(), content: @Composable () -> Unit)

Applies style to every picker component inside content.

respectingSystemAnimationScale

@Composable

@ReadOnlyComposable

fun CountryPickerMotion.respectingSystemAnimationScale(): CountryPickerMotion

Disables motion when the user has turned animations off at the system level: an animator duration scale of zero on Android ("Remove animations" / developer options), Reduce Motion on iOS.