class ToggleButtonVibrants(checkedContainerVibrant: Vibrant, uncheckedContainerVibrant: Vibrant, checkedContentVibrant: Vibrant, uncheckedContentVibrant: Vibrant)

Holds the vibrants used by ToggleButton

ToggleIconButtonDefaults

object ToggleIconButtonDefaults

Holding ToggleIconButton default values.

Typography

@Immutable

class Typography(val bodyLarge: TextStyle, val bodyLargeMultiline: TextStyle, val bodyMedium: TextStyle, val bodyMediumMultiline: TextStyle, val bodySmall: TextStyle, val bodyTiny: TextStyle, val displayLarge: TextStyle, val displayMedium: TextStyle, val displaySmall: TextStyle, val headlineLarge: TextStyle, val headlineMedium: TextStyle, val headlineSmall: TextStyle, val labelLarge: TextStyle, val labelMedium: TextStyle, val labelSmall: TextStyle, val titleLarge: TextStyle, val titleMedium: TextStyle, val titleSmall: TextStyle)

Typography used by PICO Design

WheelPickerColors

@Immutable

class WheelPickerColors

Define colors for WheelPicker

WheelPickerDefaults

object WheelPickerDefaults

Object that contains default values for WheelPicker

WheelPickerVibrants

@Immutable

class WheelPickerVibrants

Define vibrants for WheelPicker

Properties

LocalContentColor

val LocalContentColor: ProvidableCompositionLocal<Color>

CompositionLocal containing the preferred content color for a given position in the hierarchy.

LocalDisableAlpha

val LocalDisableAlpha: ProvidableCompositionLocal<Float>

CompositionLocal containing the alpha value for component's disabled state

LocalTextStyle

val LocalTextStyle: ProvidableCompositionLocal<TextStyle>

CompositionLocal provides TextStyle used by Text components by default. To set the value of this CompositionLocal, see ProvideTextStyle.

Functions

Badge

@Composable

fun Badge(modifier: Modifier = Modifier, badgeColor: BadgeColors = BadgeDefaults.badgeColors(), badgeSize: BadgeSize = BadgeDefaults.Small, radius: Dp = badgeSize.badgeRadius(), contentPadding: PaddingValues = badgeSize.badgePadding(), textStyle: TextStyle = PicoTheme.typography.bodySmall, content: @Composable RowScope.() -> Unit? = null)

@Composable

fun Badge(modifier: Modifier = Modifier, badgeColor: BadgeColors = BadgeDefaults.badgeColors(), badgeVibrants: BadgeVibrants = BadgeDefaults.badgeVibrants(), badgeSize: BadgeSize = BadgeDefaults.Small, radius: Dp = badgeSize.badgeRadius(), contentPadding: PaddingValues = badgeSize.badgePadding(), textStyle: TextStyle = PicoTheme.typography.bodySmall, content: @Composable RowScope.() -> Unit? = null)

Badge is a component that can contain dynamic information, such as the presence of a new notification or a number of pending requests. Badges can be icon only or contain short text.

badgePadding

@Composable

fun BadgeSize.badgePadding(): PaddingValues

Calculates the inner padding values for a badge based on its size.

badgeRadius

fun BadgeSize.badgeRadius(): Dp

Calculates the corner radius for a badge. This function determines the appropriate radius based on the badge size.

BasicScrollIndicator

@Composable

fun BasicScrollIndicator(state: ScrollIndicatorState, modifier: Modifier = Modifier, colors: ScrollIndicatorColors = ScrollIndicatorDefaults.scrollIndicatorColors(), scrollingMarkSize: Dp = ScrollIndicatorDefaults.ScrollingMarkSize, paddingForInteraction: PaddingValues = ScrollIndicatorDefaults.ZeroPadding, contentPadding: PaddingValues = ScrollIndicatorDefaults.TrackPadding)

@Composable

fun BasicScrollIndicator(state: ScrollIndicatorState, modifier: Modifier = Modifier, colors: ScrollIndicatorColors = ScrollIndicatorDefaults.scrollIndicatorColors(), vibrants: ScrollIndicatorVibrants = ScrollIndicatorDefaults.scrollIndicatorVibrants(), scrollingMarkSize: Dp = ScrollIndicatorDefaults.ScrollingMarkSize, paddingForInteraction: PaddingValues = ScrollIndicatorDefaults.ZeroPadding, contentPadding: PaddingValues = ScrollIndicatorDefaults.TrackPadding)

Basic implementation of scroll indicator. Different to ScrollIndicator with BoxScope, this implementation can be placed anywhere in the tree. And it's always visible.

Button

@Composable

fun Button(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, size: ButtonSize = ButtonDefaults.Regular, colors: ButtonColors = ButtonDefaults.buttonColors(), leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, contentPadding: PaddingValues = ButtonDefaults.paddingForButtonSize( size, haveIcon = leadingIcon != null || trailingIcon != null, ), shape: Shape = ButtonDefaults.shapeForButtonSize(size), gap: Dp = ButtonDefaults.gapForButtonSize( size, haveIcon = leadingIcon != null || trailingIcon != null, ), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, content: @Composable RowScope.() -> Unit)

@Composable

fun Button(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, size: ButtonSize = ButtonDefaults.Regular, colors: ButtonColors = ButtonDefaults.buttonColors(), vibrants: ButtonVibrants = ButtonDefaults.buttonVibrants(), leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, contentPadding: PaddingValues = ButtonDefaults.paddingForButtonSize( size, haveIcon = leadingIcon != null || trailingIcon != null, ), shape: Shape = ButtonDefaults.shapeForButtonSize(size), gap: Dp = ButtonDefaults.gapForButtonSize( size, haveIcon = leadingIcon != null || trailingIcon != null, ), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, content: @Composable RowScope.() -> Unit)

A stylized button component defined by PICO design which can be easily used by passing pre-defined ButtonSize and ButtonColors. Each pre-defined ButtonSize has related PaddingValues,Shape,gap and TextStyle.

ButtonChip

@Composable

fun ButtonChip(label: @Composable () -> Unit, onClick: () -> Unit, modifier: Modifier = Modifier, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, enabled: Boolean = true, chipSize: ChipSize = ChipsDefaults.Small, colors: ChipColors = ChipsDefaults.chipColors(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

@Composable

fun ButtonChip(label: @Composable () -> Unit, onClick: () -> Unit, modifier: Modifier = Modifier, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, enabled: Boolean = true, chipSize: ChipSize = ChipsDefaults.Small, colors: ChipColors = ChipsDefaults.chipColors(), vibrants: ChipVibrants = ChipsDefaults.chipVibrants(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

Button-like Chip

Checkbox

@Composable

fun Checkbox(checked: Boolean, onCheckedChange: (Boolean) -> Unit?, modifier: Modifier = Modifier, enabled: Boolean = true, contentSize: CheckboxContentSize = CheckBoxDefaults.Regular, colors: CheckboxColor = CheckBoxDefaults.checkboxColors(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

@Composable

fun Checkbox(checked: Boolean, onCheckedChange: (Boolean) -> Unit?, modifier: Modifier = Modifier, enabled: Boolean = true, contentSize: CheckboxContentSize = CheckBoxDefaults.Regular, colors: CheckboxColor = CheckBoxDefaults.checkboxColors(), vibrants: CheckboxVibrants = CheckBoxDefaults.checkboxVibrants(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

Chip

@Composable

fun Chip(label: @Composable () -> Unit, onClick: () -> Unit?, modifier: Modifier = Modifier, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, enabled: Boolean = true, colors: ChipColors = ChipsDefaults.chipColors(), chipSize: ChipSize = ChipsDefaults.Small, contentPadding: PaddingValues = chipSize.contentPadding(leading = leadingIcon != null), contentGap: Dp = chipSize.contentGap(), shape: Shape = RoundedCornerShape(chipSize.cornerRadius()), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

@Composable

fun Chip(label: @Composable () -> Unit, onClick: () -> Unit?, modifier: Modifier = Modifier, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, enabled: Boolean = true, colors: ChipColors = ChipsDefaults.chipColors(), vibrants: ChipVibrants = ChipsDefaults.chipVibrants(), chipSize: ChipSize = ChipsDefaults.Small, contentPadding: PaddingValues = chipSize.contentPadding(leading = leadingIcon != null), contentGap: Dp = chipSize.contentGap(), shape: Shape = RoundedCornerShape(chipSize.cornerRadius()), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

Basic chip.

CircularProgressIndicator

@Composable

fun CircularProgressIndicator(modifier: Modifier = Modifier, color: Color = PicoTheme.colorScheme.onAccent.color, progressSize: CircularProgressSize = CircularProgressDefaults.Small, strokeWidth: Dp = progressSize.strokeWidth())

@Composable

fun CircularProgressIndicator(modifier: Modifier = Modifier, color: Color = PicoTheme.colorScheme.onAccent.color, vibrant: Vibrant = Vibrant.UltraLight, progressSize: CircularProgressSize = CircularProgressDefaults.Small, strokeWidth: Dp = progressSize.strokeWidth())

Progress indicators express an unspecified wait time, such as loading.

@Composable

fun CircularProgressIndicator(progress: () -> Float, modifier: Modifier = Modifier, colors: ProgressColors = CircularProgressDefaults.circleProgressColors(), edgeStyle: ProgressIndicatorEdgeStyle = ProgressIndicatorEdgeStyle.RoundCorner, progressSize: CircularProgressSize = CircularProgressDefaults.Small, strokeWidth: Dp = progressSize.strokeWidth())

@Composable

fun CircularProgressIndicator(progress: () -> Float, modifier: Modifier = Modifier, colors: ProgressColors = CircularProgressDefaults.circleProgressColors(), vibrants: ProgressVibrants = CircularProgressDefaults.circleProgressVibrants(), edgeStyle: ProgressIndicatorEdgeStyle = ProgressIndicatorEdgeStyle.RoundCorner, progressSize: CircularProgressSize = CircularProgressDefaults.Small, strokeWidth: Dp = progressSize.strokeWidth())

Progress indicators display the length of a process.

containerCornerRadius

fun SegmentControlSize.containerCornerRadius(): Dp

The corner radius of the segment control.

contentGap

fun ChipSize.contentGap(): Dp

Calculates the content gap for a given ChipSize.

contentPadding

fun ChipSize.contentPadding(leading: Boolean = false): PaddingValues

Calculates the content padding for a given ChipSize.

cornerRadius

fun ChipSize.cornerRadius(): Dp

Calculates the corner radius for a given ChipSize.

DatePicker

@Composable

fun DatePicker(onDateSelected: (selectedDateMillis: Long) -> Unit, modifier: Modifier = Modifier, state: DatePickerState = rememberDatePickerState(), dateFormatter: DatePickerFormatter = remember { DatePickerDefaults.dateFormatter() }, colors: DatePickerColors = DatePickerDefaults.datePickerColors(), headerStyle: HeaderStyle = HeaderStyle.Navigation(true))

@Composable

fun DatePicker(onDateSelected: (selectedDateMillis: Long) -> Unit, modifier: Modifier = Modifier, state: DatePickerState = rememberDatePickerState(), dateFormatter: DatePickerFormatter = remember { DatePickerDefaults.dateFormatter() }, colors: DatePickerColors = DatePickerDefaults.datePickerColors(), vibrants: DatePickerVibrants = DatePickerDefaults.datePickerVibrants(), headerStyle: HeaderStyle = HeaderStyle.Navigation(true))

DatePicker is a component that allows users to select a date.

DateRangePicker

@Composable

fun DateRangePicker(onStartSelected: (startDateInMillis: Long) -> Unit, onEndSelected: (endDateInMillis: Long?) -> Unit, modifier: Modifier = Modifier, state: DateRangePickerState = rememberDateRangePickerState(), dateFormatter: DatePickerFormatter = remember { DatePickerDefaults.dateFormatter() }, colors: DatePickerColors = DatePickerDefaults.datePickerColors(), headerStyle: HeaderStyle = HeaderStyle.Navigation(true))

@Composable

fun DateRangePicker(onStartSelected: (startDateInMillis: Long) -> Unit, onEndSelected: (endDateInMillis: Long?) -> Unit, modifier: Modifier = Modifier, state: DateRangePickerState = rememberDateRangePickerState(), dateFormatter: DatePickerFormatter = remember { DatePickerDefaults.dateFormatter() }, colors: DatePickerColors = DatePickerDefaults.datePickerColors(), vibrants: DatePickerVibrants = DatePickerDefaults.datePickerVibrants(), headerStyle: HeaderStyle = HeaderStyle.Navigation(true))

Date range pickers let people select a range of dates and can be embedded into Dialogs.

defaultColorScheme

fun defaultColorScheme(accent: Color = Color.Unspecified, onAccent: Color = Color.Unspecified): ColorScheme

fun defaultColorScheme(accent: ColorStyle = ColorStyle.Unspecified, onAccent: ColorStyle = ColorStyle.Unspecified): ColorScheme

Divider

@Composable

fun Divider(modifier: Modifier = Modifier, color: Color = DividerDefaults.color, thickness: Dp = DividerDefaults.thickness, orientation: Orientation = Orientation.Horizontal)

A divider is a thin line that groups content in lists and layouts.

DotBadge

@Composable

fun DotBadge(modifier: Modifier = Modifier, color: Color = BadgeDefaults.DotColor)

@Composable

fun DotBadge(modifier: Modifier = Modifier, color: Color = BadgeDefaults.DotColor, vibrant: Vibrant = Vibrant.Termination)

Dot badge

HorizontalDivider

@Composable

fun HorizontalDivider(modifier: Modifier = Modifier, color: Color = DividerDefaults.color, thickness: Dp = DividerDefaults.thickness)

A divider is a thin line that groups content in lists and layouts.

Icon

@Composable

fun Icon(bitmap: ImageBitmap, contentDescription: String?, modifier: Modifier = Modifier, tint: Color = LocalContentColor.current)

@Composable

fun Icon(bitmap: ImageBitmap, contentDescription: String?, modifier: Modifier = Modifier, tint: Color = LocalContentColor.current, vibrant: Vibrant = LocalContentVibrant.current)

A PICO design icon component that draws bitmap using tint, with a default value of LocalContentColor. If bitmap has no intrinsic size, this component uses the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use Color.Unspecified for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead. For a clickable icon, see IconButton.

@Composable

fun Icon(painter: Painter, contentDescription: String?, modifier: Modifier = Modifier, tint: Color = LocalContentColor.current)

@Composable

fun Icon(painter: Painter, contentDescription: String?, modifier: Modifier = Modifier, tint: Color = LocalContentColor.current, vibrant: Vibrant = LocalContentVibrant.current)

A PICO design icon component that draws painter using tint, with a default value of LocalContentColor. If painter has no intrinsic size, this component uses the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use Color.Unspecified for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead. For a clickable icon, see IconButton.

@Composable

fun Icon(imageVector: ImageVector, contentDescription: String?, modifier: Modifier = Modifier, tint: Color = LocalContentColor.current)

@Composable

fun Icon(imageVector: ImageVector, contentDescription: String?, modifier: Modifier = Modifier, tint: Color = LocalContentColor.current, vibrant: Vibrant = LocalContentVibrant.current)

A PICO design icon component that draws imageVector using tint, with a default value of LocalContentColor. If imageVector has no intrinsic size, this component uses the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use Color.Unspecified for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead. For a clickable icon, see IconButton.

IconButton

@Composable

fun IconButton(onClick: () -> Unit, modifier: Modifier = Modifier, colors: ButtonColors = IconButtonDefaults.iconButtonColors(), size: ButtonSize = IconButtonDefaults.Regular, shape: Shape = IconButtonDefaults.DefaultShape, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, content: @Composable () -> Unit)

@Composable

fun IconButton(onClick: () -> Unit, modifier: Modifier = Modifier, colors: ButtonColors = IconButtonDefaults.iconButtonColors(), vibrants: ButtonVibrants = IconButtonDefaults.iconButtonVibrants(), size: ButtonSize = IconButtonDefaults.Regular, shape: Shape = IconButtonDefaults.DefaultShape, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, content: @Composable () -> Unit)

Icon button defined by PICO design

isUnspecified

fun ColorStyle.isUnspecified(): Boolean

itemContentPadding

fun SegmentControlSize.itemContentPadding(): PaddingValues

The content padding of the segment control item.

LinearProgressIndicator

@Composable

fun LinearProgressIndicator(progress: () -> Float, modifier: Modifier = Modifier, colors: ProgressColors = LinearProgressDefaults.linearProgressColors(), edgeStyle: ProgressIndicatorEdgeStyle = ProgressIndicatorEdgeStyle.RoundCorner, height: LinearProgressHeight = LinearProgressDefaults.Small)

@Composable

fun LinearProgressIndicator(progress: () -> Float, modifier: Modifier = Modifier, colors: ProgressColors = LinearProgressDefaults.linearProgressColors(), vibrants: ProgressVibrants = LinearProgressDefaults.linearProgressVibrants(), edgeStyle: ProgressIndicatorEdgeStyle = ProgressIndicatorEdgeStyle.RoundCorner, height: LinearProgressHeight = LinearProgressDefaults.Small)

Progress indicators express an unspecified wait time or display the length of a process. By default there is no animation between progress values.

Link

@Composable

fun Link(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, size: ButtonSize = LinkDefaults.Regular, contentPadding: PaddingValues = size.paddingForLink(), shape: Shape = size.shapeForLink(), colors: ButtonColors = LinkDefaults.defaultColors(), trailingIcon: @Composable () -> Unit? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, content: @Composable BoxScope.() -> Unit)

@Composable

fun Link(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, size: ButtonSize = LinkDefaults.Regular, contentPadding: PaddingValues = size.paddingForLink(), shape: Shape = size.shapeForLink(), colors: ButtonColors = LinkDefaults.defaultColors(), vibrants: ButtonVibrants = LinkDefaults.linkVibrants(), trailingIcon: @Composable () -> Unit? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, content: @Composable BoxScope.() -> Unit)

A Link is a text button with a optional trailing icon.

ListItem

@Composable

fun ListItem(headlineContent: @Composable () -> Unit, modifier: Modifier = Modifier, supportingContent: @Composable () -> Unit? = null, leadingContent: @Composable BoxScope.() -> Unit? = null, trailingContent: @Composable BoxScope.() -> Unit? = null, colors: ListItemColors = ListItemDefaults.listItemColors(), padding: PaddingValues = ListItemDefaults.DefaultPadding, shape: Shape = ListItemDefaults.shape)

@Composable

fun ListItem(headlineContent: @Composable () -> Unit, modifier: Modifier = Modifier, supportingContent: @Composable () -> Unit? = null, leadingContent: @Composable BoxScope.() -> Unit? = null, trailingContent: @Composable BoxScope.() -> Unit? = null, colors: ListItemColors = ListItemDefaults.listItemColors(), vibrants: ListItemVibrants = ListItemDefaults.listItemVibrants(), padding: PaddingValues = ListItemDefaults.DefaultPadding, shape: Shape = ListItemDefaults.shape)

This component can be used to achieve the list item templates existing in the spec.

NumberBadge

@Composable

fun NumberBadge(modifier: Modifier = Modifier, number: Int, threshold: Int = BadgeDefaults.OverflowThreshold, overflow: Overflow = Overflow.Plus, textStyle: TextStyle = PicoTheme.typography.labelMedium, badgeSize: BadgeSize = BadgeDefaults.NumberSmall, badgeColor: BadgeColors = BadgeDefaults.numberBadgeColors(), contentPadding: PaddingValues = badgeSize.badgePadding())

@Composable

fun NumberBadge(modifier: Modifier = Modifier, number: Int, threshold: Int = BadgeDefaults.OverflowThreshold, overflow: Overflow = Overflow.Plus, textStyle: TextStyle = PicoTheme.typography.labelMedium, badgeSize: BadgeSize = BadgeDefaults.NumberSmall, badgeColor: BadgeColors = BadgeDefaults.numberBadgeColors(), badgeVibrants: BadgeVibrants = BadgeDefaults.badgeVibrants(), contentPadding: PaddingValues = badgeSize.badgePadding())

A Badge that is used to show numbers

numberBadgeRadius

fun BadgeSize.numberBadgeRadius(): Dp

Calculate the rounded corner radius of a number badge. This function returns half of the badge's height, which is typically used to create circular or oval badges.

NumberField

@Composable

fun NumberField(value: Int, onValueChange: (Int) -> Unit, modifier: Modifier = Modifier, increaseIcon: @Composable () -> Unit = NumberFieldDefaults.defaultIncreaseIcon(), decreaseIcon: @Composable () -> Unit = NumberFieldDefaults.defaultDecreaseIcon(), stepLength: Int = 1, valueRange: IntRange = NumberFieldDefaults.DefaultRange, colors: NumberFieldColors = NumberFieldDefaults.numberFieldColors(), size: NumberFieldSize = NumberFieldDefaults.defaultSize(), cornerSize: Dp = size.height.cornerSize(), gap: Dp = NumberFieldDefaults.DefaultGap, enabled: Boolean = true, editable: Boolean = true, textStyle: TextStyle = NumberFieldDefaults.defaultTextStyle(size.height), keyboardOptions: KeyboardOptions = NumberFieldDefaults.DefaultKeyboardOptions)

@Composable

fun NumberField(value: Int, onValueChange: (Int) -> Unit, modifier: Modifier = Modifier, increaseIcon: @Composable () -> Unit = NumberFieldDefaults.defaultIncreaseIcon(), decreaseIcon: @Composable () -> Unit = NumberFieldDefaults.defaultDecreaseIcon(), stepLength: Int = 1, valueRange: IntRange = NumberFieldDefaults.DefaultRange, colors: NumberFieldColors = NumberFieldDefaults.numberFieldColors(), vibrants: NumberFieldVibrants = NumberFieldDefaults.numberFieldVibrants(), size: NumberFieldSize = NumberFieldDefaults.defaultSize(), cornerSize: Dp = size.height.cornerSize(), gap: Dp = NumberFieldDefaults.DefaultGap, enabled: Boolean = true, editable: Boolean = true, textStyle: TextStyle = NumberFieldDefaults.defaultTextStyle(size.height), keyboardOptions: KeyboardOptions = NumberFieldDefaults.DefaultKeyboardOptions)

NumberField is used to create a number input field with increase and decrease buttons.

Option

@Composable

fun Option(selected: Boolean, onSelectChange: (selected: Boolean) -> Unit, modifier: Modifier = Modifier, icon: @Composable () -> Unit? = null, colors: OptionColors = OptionDefaults.optionColors(), enabled: Boolean = true, gap: Dp = OptionDefaults.Gap, shape: Shape = OptionDefaults.Shape, contentPadding: PaddingValues = OptionDefaults.ContentPadding, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, content: @Composable () -> Unit)

@Composable

fun Option(selected: Boolean, onSelectChange: (selected: Boolean) -> Unit, modifier: Modifier = Modifier, icon: @Composable () -> Unit? = null, colors: OptionColors = OptionDefaults.optionColors(), vibrants: OptionVibrants = OptionDefaults.optionVibrants(), enabled: Boolean = true, gap: Dp = OptionDefaults.Gap, shape: Shape = OptionDefaults.Shape, contentPadding: PaddingValues = OptionDefaults.ContentPadding, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, content: @Composable () -> Unit)

Option is a stylized button component defined by PICO design witch has a selected state. And usually has a Text and optional leading icon.

PageControl

@Composable

fun PageControl(currentIndex: Int, onClickAction: (Int) -> Unit, @IntRange(from = 0) totalDots: Int, modifier: Modifier = Modifier, colors: PageControlColors = PageControlDefaults.pageControlColors(), selectIcon: @Composable () -> Unit? = null, enabled: Boolean = true, maxDisplayCount: Int = PageControlDefaults.NormalMax, pageControlSpec: PageControlSpec = PageControlDefaults.Spec)

@Composable

fun PageControl(currentIndex: Int, onClickAction: (Int) -> Unit, @IntRange(from = 0) totalDots: Int, modifier: Modifier = Modifier, colors: PageControlColors = PageControlDefaults.pageControlColors(), vibrants: PageControlVibrants = PageControlDefaults.pageControlVibrants(), selectIcon: @Composable () -> Unit? = null, enabled: Boolean = true, maxDisplayCount: Int = PageControlDefaults.NormalMax, pageControlSpec: PageControlSpec = PageControlDefaults.Spec)

PageControl used to create a page indicator.

PicoTheme

@Composable

fun PicoTheme(colorScheme: ColorScheme = systemColorScheme(LocalContext.current), typography: Typography? = null, content: @Composable () -> Unit)

Provides PICO theme values.

ProgressPageControl

@Composable

fun ProgressPageControl(currentIndex: Int, onClickAction: (Int) -> Unit, @IntRange(from = 0) totalDots: Int, currentProgress: () -> Float, modifier: Modifier = Modifier, colors: PageControlColors = PageControlDefaults.pageControlColors(), enabled: Boolean = true, maxDisplayCount: Int = PageControlDefaults.ProgressMax, pageControlSpec: PageControlSpec = PageControlDefaults.Spec)

@Composable

fun ProgressPageControl(currentIndex: Int, onClickAction: (Int) -> Unit, @IntRange(from = 0) totalDots: Int, currentProgress: () -> Float, modifier: Modifier = Modifier, colors: PageControlColors = PageControlDefaults.pageControlColors(), vibrants: PageControlVibrants = PageControlDefaults.pageControlVibrants(), enabled: Boolean = true, maxDisplayCount: Int = PageControlDefaults.ProgressMax, pageControlSpec: PageControlSpec = PageControlDefaults.Spec)

ProgressPageControl used to create a page indicator, each dot has a progress indicator.

ProvideTextStyle

@Composable

fun ProvideTextStyle(textStyle: TextStyle, content: @Composable () -> Unit)

This function will merge the given style values with current values for any missing attributes. Any Text included in this component will be styled with the merged style by default.

rememberDatePickerState

@Composable

fun rememberDatePickerState(initialSelectedDateMillis: Long? = null, initialDisplayedMonthMillis: Long? = initialSelectedDateMillis): DatePickerState

Creates a DatePickerState for a DatePicker that is remembered across compositions.

rememberDateRangePickerState

@Composable

fun rememberDateRangePickerState(initialSelectedStartDateMillis: Long? = null, initialSelectedEndDateMillis: Long? = null, initialDisplayedMonthMillis: Long? = initialSelectedStartDateMillis): DateRangePickerState

Creates a DateRangePickerState for a DateRangePicker that is remembered across compositions.

rememberScrollIndicatorState

@Composable

fun rememberScrollIndicatorState(state: LazyListState): ScrollIndicatorState

Create a ScrollIndicatorState for LazyListState.

@Composable

fun rememberScrollIndicatorState(orientation: Orientation, state: ScrollState): ScrollIndicatorState

Create a ScrollIndicatorState for ScrollState.

rememberWheelState

@Composable

fun rememberWheelState(vararg inputs: Any?, initialFirstVisibleItemIndex: Int = 0, initialFirstVisibleItemScrollOffset: Int = 0): LazyListState

state for WheelPicker

RemovableChip

@Composable

fun RemovableChip(label: @Composable () -> Unit, onLeadingClick: () -> Unit, onTrailingRemoveClick: () -> Unit, visible: Boolean, modifier: Modifier = Modifier, leadingIcon: @Composable () -> Unit? = null, enabled: Boolean = true, colors: ChipColors = ChipsDefaults.chipColors(), chipSize: ChipSize = ChipsDefaults.Small, contentPadding: PaddingValues = chipSize.removeChipPadding(leadingIcon != null), contentGap: Dp = chipSize.contentGap(), shape: Shape = RoundedCornerShape(chipSize.cornerRadius()), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

@Composable

fun RemovableChip(label: @Composable () -> Unit, onLeadingClick: () -> Unit, onTrailingRemoveClick: () -> Unit, visible: Boolean, modifier: Modifier = Modifier, leadingIcon: @Composable () -> Unit? = null, enabled: Boolean = true, colors: ChipColors = ChipsDefaults.chipColors(), vibrants: ChipVibrants = ChipsDefaults.chipVibrants(), chipSize: ChipSize = ChipsDefaults.Small, contentPadding: PaddingValues = chipSize.removeChipPadding(leadingIcon != null), contentGap: Dp = chipSize.contentGap(), shape: Shape = RoundedCornerShape(chipSize.cornerRadius()), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

A chip which is removable

removeChipIconSize

fun ChipSize.removeChipIconSize(): Dp

Calculates the icon size for a given ChipSize in RemovableChip.

removeChipPadding

fun ChipSize.removeChipPadding(leading: Boolean = false): PaddingValues

Calculates the padding for a given ChipSize in RemovableChip.

ScrollIndicator

@Composable

fun BoxScope.ScrollIndicator(state: LazyListState, modifier: Modifier = Modifier, alignment: Alignment = if (state.layoutInfo.orientation == Orientation.Vertical) Alignment.CenterEnd else Alignment.BottomCenter, paddingForInteraction: PaddingValues = ScrollIndicatorDefaults.defaultHotAreaPadding(state.layoutInfo.orientation, alignment), colors: ScrollIndicatorColors = ScrollIndicatorDefaults.scrollIndicatorColors(), minVisibleSize: Dp = ScrollIndicatorDefaults.MinSize, scrollingMarkSize: Dp = ScrollIndicatorDefaults.ScrollingMarkSize, dismissAfter: Long = 3000)

@Composable

fun BoxScope.ScrollIndicator(state: LazyListState, modifier: Modifier = Modifier, alignment: Alignment = if (state.layoutInfo.orientation == Orientation.Vertical) Alignment.CenterEnd else Alignment.BottomCenter, paddingForInteraction: PaddingValues = ScrollIndicatorDefaults.defaultHotAreaPadding(state.layoutInfo.orientation, alignment), colors: ScrollIndicatorColors = ScrollIndicatorDefaults.scrollIndicatorColors(), vibrants: ScrollIndicatorVibrants = ScrollIndicatorDefaults.scrollIndicatorVibrants(), minVisibleSize: Dp = ScrollIndicatorDefaults.MinSize, scrollingMarkSize: Dp = ScrollIndicatorDefaults.ScrollingMarkSize, dismissAfter: Long = 3000)

Scroll indicator is used to indicate scrolling progress of a list view, just like LazyColumn or LazyRow. You can also drag the indicator to scroll the content of list view.

@Composable

fun BoxScope.ScrollIndicator(state: ScrollState, orientation: Orientation, modifier: Modifier = Modifier, alignment: Alignment = if (orientation == Orientation.Vertical) Alignment.CenterEnd else Alignment.BottomCenter, paddingForInteraction: PaddingValues = ScrollIndicatorDefaults.defaultHotAreaPadding(orientation, alignment), colors: ScrollIndicatorColors = ScrollIndicatorDefaults.scrollIndicatorColors(), minVisibleSize: Dp = ScrollIndicatorDefaults.MinSize, scrollingMarkSize: Dp = ScrollIndicatorDefaults.ScrollingMarkSize, dismissAfter: Long = 3000)

@Composable

fun BoxScope.ScrollIndicator(state: ScrollState, orientation: Orientation, modifier: Modifier = Modifier, alignment: Alignment = if (orientation == Orientation.Vertical) Alignment.CenterEnd else Alignment.BottomCenter, paddingForInteraction: PaddingValues = ScrollIndicatorDefaults.defaultHotAreaPadding(orientation, alignment), colors: ScrollIndicatorColors = ScrollIndicatorDefaults.scrollIndicatorColors(), vibrants: ScrollIndicatorVibrants = ScrollIndicatorDefaults.scrollIndicatorVibrants(), minVisibleSize: Dp = ScrollIndicatorDefaults.MinSize, scrollingMarkSize: Dp = ScrollIndicatorDefaults.ScrollingMarkSize, dismissAfter: Long = 3000)

Scroll indicator is used to indicate scrolling progress of a scrollable view with Modifier.verticalScroll or Modifier.horizontalScroll, like Column or Row. You can also drag the indicator to scroll the content of scrollable view.

SearchField

@Composable

fun SearchField(value: String, onValueChange: (String) -> Unit, onSearch: (String) -> Unit, modifier: Modifier = Modifier, placeholder: @Composable () -> Unit? = null, leadingContent: @Composable () -> Unit = SearchFieldDefaults.searchIcon(), enabled: Boolean = true, textStyle: TextStyle = SearchFieldDefaults.DefaultTextStyle, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, cornerRadius: Dp = 100.dp, colors: TextFieldColors = SearchFieldDefaults.searchFieldColors())

@Composable

Search field allows users to input text, and trigger a search action either by pressing the search button on the keyboard or other means.

SegmentControl

@Composable

fun SegmentControl(modifier: Modifier = Modifier, backgroundColor: Color = SegmentControlDefaults.backgroundColor, itemSpace: Dp = SegmentControlDefaults.ItemSpace, contentPadding: Dp = SegmentControlDefaults.ContainerPadding, cornerRadius: Dp = SegmentControlDefaults.Small.containerCornerRadius(), content: @Composable RowScope.() -> Unit)

@Composable

fun SegmentControl(modifier: Modifier = Modifier, backgroundColor: Color = SegmentControlDefaults.backgroundColor, backgroundVibrant: Vibrant = Vibrant.Neutral, itemSpace: Dp = SegmentControlDefaults.ItemSpace, contentPadding: Dp = SegmentControlDefaults.ContainerPadding, cornerRadius: Dp = SegmentControlDefaults.Small.containerCornerRadius(), content: @Composable RowScope.() -> Unit)

Segment control with Texts or Icons

SegmentItem

@Composable

fun RowScope.SegmentItem(selected: Boolean, modifier: Modifier = Modifier, textStyle: TextStyle = SegmentControlDefaults.Small.textStyle(), colors: SegmentControlColors = SegmentControlDefaults.colors(), title: @Composable () -> Unit? = null, icon: @Composable () -> Unit? = null, contentPadding: PaddingValues = SegmentControlDefaults.Small.itemContentPadding(), gap: Dp = SegmentControlDefaults.ItemGap)

@Composable

fun RowScope.SegmentItem(selected: Boolean, modifier: Modifier = Modifier, textStyle: TextStyle = SegmentControlDefaults.Small.textStyle(), colors: SegmentControlColors = SegmentControlDefaults.colors(), vibrants: SegmentControlVibrants = SegmentControlDefaults.vibrants(), title: @Composable () -> Unit? = null, icon: @Composable () -> Unit? = null, contentPadding: PaddingValues = SegmentControlDefaults.Small.itemContentPadding(), gap: Dp = SegmentControlDefaults.ItemGap)

A composable function that creates a basic segment item. The segment item can be used as a building block for creating the text and icon segment controls.

SegmentSlider

@Composable

fun SegmentSlider(initialStep: Int, segmentCount: Int, onStepChange: (newStep: Int) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, sliderSpec: SliderSpec = SliderDefaults.Regular, colors: SliderColors = SliderDefaults.sliderColors())

@Composable

Sliders allow users to make selections range from 0 to segmentCount

SideNavigation

@Composable

fun SideNavigation(modifier: Modifier = Modifier, scrollState: ScrollState = rememberScrollState(), contentPadding: PaddingValues = SideNavigationDefaults.DefaultContentPadding, headerColor: Color = SideNavigationDefaults.headerColor, header: @Composable BoxScope.() -> Unit? = null, content: @Composable ColumnScope.() -> Unit)

@Composable

fun SideNavigation(modifier: Modifier = Modifier, scrollState: ScrollState = rememberScrollState(), contentPadding: PaddingValues = SideNavigationDefaults.DefaultContentPadding, headerColor: Color = SideNavigationDefaults.headerColor, headerVibrant: Vibrant = SideNavigationDefaults.headerVibrant, header: @Composable BoxScope.() -> Unit? = null, content: @Composable ColumnScope.() -> Unit)

A vertical navigation component typically used for primary navigation patterns.

SideNavigationItem

@Composable

fun SideNavigationItem(selected: Boolean, modifier: Modifier = Modifier, horizontalArrangement: Arrangement.Horizontal = SideNavigationItemDefaults.HorizontalArrangement, shape: Shape = SideNavigationItemDefaults.Shape, contentPadding: PaddingValues = SideNavigationItemDefaults.ContentPadding, colors: SideNavigationItemColors = SideNavigationItemDefaults.colors(), leading: @Composable BoxScope.() -> Unit? = null, trailing: @Composable BoxScope.() -> Unit? = null, content: @Composable BoxScope.() -> Unit)

@Composable

fun SideNavigationItem(selected: Boolean, modifier: Modifier = Modifier, horizontalArrangement: Arrangement.Horizontal = SideNavigationItemDefaults.HorizontalArrangement, shape: Shape = SideNavigationItemDefaults.Shape, contentPadding: PaddingValues = SideNavigationItemDefaults.ContentPadding, colors: SideNavigationItemColors = SideNavigationItemDefaults.colors(), vibrants: SideNavigationItemVibrants = SideNavigationItemDefaults.vibrants(), leading: @Composable BoxScope.() -> Unit? = null, trailing: @Composable BoxScope.() -> Unit? = null, content: @Composable BoxScope.() -> Unit)

A single navigation item within a SideNavigation or SideNavigationSection.

SideNavigationSection

@Composable

fun SideNavigationSection(modifier: Modifier = Modifier, contentPadding: PaddingValues = SideNavigationDefaults.DefaultSectionContentPadding, titlePadding: PaddingValues = SideNavigationDefaults.DefaultSectionTitlePadding, sectionColor: Color = SideNavigationDefaults.sectionColor, title: @Composable BoxScope.() -> Unit, content: @Composable ColumnScope.() -> Unit)

@Composable

fun SideNavigationSection(modifier: Modifier = Modifier, contentPadding: PaddingValues = SideNavigationDefaults.DefaultSectionContentPadding, titlePadding: PaddingValues = SideNavigationDefaults.DefaultSectionTitlePadding, sectionColor: Color = SideNavigationDefaults.sectionColor, sectionVibrant: Vibrant = SideNavigationDefaults.sectionVibrant, title: @Composable BoxScope.() -> Unit, content: @Composable ColumnScope.() -> Unit)

A section within a SideNavigation that groups related navigation items.

Slider

@Composable

fun Slider(value: Float, onValueChange: (newValue: Float) -> Unit, modifier: Modifier = Modifier, valueRange: ClosedFloatingPointRange<Float> = 0f..1f, onValueChangeFinished: () -> Unit? = null, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, sliderSpec: SliderSpec = SliderDefaults.Regular, colors: SliderColors = SliderDefaults.sliderColors())

@Composable

Continuous sliders allow users to make selections in valueRange

Stepper

@Composable

fun Stepper(value: String, onStep: (step: Int) -> Unit, modifier: Modifier = Modifier, decreaseIcon: @Composable () -> Unit = StepperIconStyle.MinusAndAdd.iconDecrease(), increaseIcon: @Composable () -> Unit = StepperIconStyle.MinusAndAdd.iconIncrease(), stepLength: Int = 1, increasable: Boolean = true, decreasable: Boolean = true, onEdited: (newValue: String) -> Unit? = null, editable: Boolean = onEdited != null, textStyle: TextStyle = PicoTheme.typography.titleMedium.copy(fontWeight = FontWeight.Normal), textColor: Color = ColorTokens.text1, paddingValues: PaddingValues = PaddingValues(defaultPadding), backgroundShape: Shape = RoundedCornerShape(10.dp), backgroundColor: Color = ColorTokens.fillSunkenVariable, cursorBrush: Brush = SolidColor(ColorTokens.accent7), keyboardOptions: KeyboardOptions = KeyboardOptions.Default)

Basic implement of a stepper.

Switch

@Composable

fun Switch(checked: Boolean, onCheckedChange: (Boolean) -> Unit?, modifier: Modifier = Modifier, enabled: Boolean = true, colors: SwitchColors = SwitchDefaults.switchColors(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

@Composable

fun Switch(checked: Boolean, onCheckedChange: (Boolean) -> Unit?, modifier: Modifier = Modifier, enabled: Boolean = true, colors: SwitchColors = SwitchDefaults.switchColors(), vibrants: SwitchVibrants = SwitchDefaults.switchVibrants(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

Switches toggle the state of a single item on or off.

SymbolicCircularProgressIndicator

@Composable

fun SymbolicCircularProgressIndicator(progress: () -> Float, progressSymbol: @Composable () -> Unit?, modifier: Modifier = Modifier, colors: ProgressColors = CircularProgressDefaults.circleProgressColors(), progressSize: CircularProgressSize = CircularProgressDefaults.Small, strokeWidth: Dp = progressSize.strokeWidth(), edgeStyle: ProgressIndicatorEdgeStyle = ProgressIndicatorEdgeStyle.RoundCorner)

@Composable

fun SymbolicCircularProgressIndicator(progress: () -> Float, progressSymbol: @Composable () -> Unit?, modifier: Modifier = Modifier, colors: ProgressColors = CircularProgressDefaults.circleProgressColors(), vibrants: ProgressVibrants = CircularProgressDefaults.circleProgressVibrants(), progressSize: CircularProgressSize = CircularProgressDefaults.Small, strokeWidth: Dp = progressSize.strokeWidth(), edgeStyle: ProgressIndicatorEdgeStyle = ProgressIndicatorEdgeStyle.RoundCorner)

Progress indicators display the length of a process. When progress is 1.0f, a complete animation will be display. A progressSymbol is optional for you to display the progress details

SymbolSlider

@Composable

fun SymbolSlider(value: Float, onValueChange: (newValue: Float) -> Unit, modifier: Modifier = Modifier, valueRange: ClosedFloatingPointRange<Float> = 0f..1f, icon: @Composable () -> Unit, onValueChangeFinished: () -> Unit? = null, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, sliderSpec: SliderSpec = SliderDefaults.Regular, colors: SliderColors = SliderDefaults.sliderColors())

@Composable

Continuous sliders allow users to make selections in valueRange.

systemColorScheme

fun systemColorScheme(context: Context): ColorScheme

The colors will be load from system resources.

Text

@Composable

fun Text(text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, autoSize: TextAutoSize? = null, fontSize: TextUnit = TextUnit.Unspecified, fontStyle: FontStyle? = null, fontWeight: FontWeight? = null, fontFamily: FontFamily? = null, letterSpacing: TextUnit = TextUnit.Unspecified, textDecoration: TextDecoration? = null, textAlign: TextAlign = TextAlign.Unspecified, lineHeight: TextUnit = TextUnit.Unspecified, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, maxLines: Int = Int.MAX_VALUE, minLines: Int = 1, onTextLayout: (TextLayoutResult) -> Unit? = null, style: TextStyle = LocalTextStyle.current)

@Composable

fun Text(text: AnnotatedString, modifier: Modifier = Modifier, color: Color = Color.Unspecified, autoSize: TextAutoSize? = null, fontSize: TextUnit = TextUnit.Unspecified, fontStyle: FontStyle? = null, fontWeight: FontWeight? = null, fontFamily: FontFamily? = null, letterSpacing: TextUnit = TextUnit.Unspecified, textDecoration: TextDecoration? = null, textAlign: TextAlign = TextAlign.Unspecified, lineHeight: TextUnit = TextUnit.Unspecified, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, maxLines: Int = Int.MAX_VALUE, minLines: Int = 1, inlineContent: Map<String, InlineTextContent> = mapOf(), onTextLayout: (TextLayoutResult) -> Unit? = null, style: TextStyle = LocalTextStyle.current)

@Composable

fun Text(text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, vibrant: Vibrant = LocalContentVibrant.current, autoSize: TextAutoSize? = null, fontSize: TextUnit = TextUnit.Unspecified, fontStyle: FontStyle? = null, fontWeight: FontWeight? = null, fontFamily: FontFamily? = null, letterSpacing: TextUnit = TextUnit.Unspecified, textDecoration: TextDecoration? = null, textAlign: TextAlign = TextAlign.Unspecified, lineHeight: TextUnit = TextUnit.Unspecified, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, maxLines: Int = Int.MAX_VALUE, minLines: Int = 1, onTextLayout: (TextLayoutResult) -> Unit? = null, style: TextStyle = LocalTextStyle.current)

High level PICO design component to display text.

TextArea

@Composable

fun TextArea(value: TextFieldValue, onValueChange: (TextFieldValue) -> Unit, modifier: Modifier = Modifier, placeholder: @Composable () -> Unit? = null, supportingText: @Composable () -> Unit? = null, enabled: Boolean = true, readOnly: Boolean = false, textStyle: TextStyle = TextFieldDefaults.DefaultTextStyle, isError: Boolean = false, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, maxLines: Int = Int.MAX_VALUE, minLines: Int = 1, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, cornerRadius: Dp = TextFieldDefaults.CornerRadius, colors: TextFieldColors = TextFieldDefaults.textFieldColors())

@Composable

Multi line text input

@Composable

fun TextArea(value: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier, placeholder: @Composable () -> Unit? = null, supportingText: @Composable () -> Unit? = null, enabled: Boolean = true, readOnly: Boolean = false, textStyle: TextStyle = TextFieldDefaults.DefaultTextStyle, isError: Boolean = false, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, maxLines: Int = Int.MAX_VALUE, minLines: Int = 1, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, cornerRadius: Dp = TextFieldDefaults.CornerRadius, colors: TextFieldColors = TextFieldDefaults.textFieldColors())

@Composable

Multi-line text input

TextField

@Composable

fun TextField(value: TextFieldValue, onValueChange: (TextFieldValue) -> Unit, modifier: Modifier = Modifier, placeholder: @Composable () -> Unit? = null, leadingContent: @Composable () -> Unit? = null, trailingContent: @Composable () -> Unit? = null, supportingText: @Composable () -> Unit? = null, enabled: Boolean = true, readOnly: Boolean = false, textStyle: TextStyle = TextFieldDefaults.DefaultTextStyle, isError: Boolean = false, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, singleLine: Boolean = true, maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE, minLines: Int = 1, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, cornerRadius: Dp = TextFieldDefaults.CornerRadius, colors: TextFieldColors = TextFieldDefaults.textFieldColors())

@Composable

fun TextField(value: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier, placeholder: @Composable () -> Unit? = null, leadingContent: @Composable () -> Unit? = null, trailingContent: @Composable () -> Unit? = null, supportingText: @Composable () -> Unit? = null, enabled: Boolean = true, readOnly: Boolean = false, textStyle: TextStyle = TextFieldDefaults.DefaultTextStyle, isError: Boolean = false, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, singleLine: Boolean = true, maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE, minLines: Int = 1, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, cornerRadius: Dp = TextFieldDefaults.CornerRadius, colors: TextFieldColors = TextFieldDefaults.textFieldColors())

@Composable

Text fields allow users to enter text into a UI.

textStyle

@Composable

fun ChipSize.textStyle(): TextStyle

Calculates the text style for a given ChipSize.

@Composable

fun SegmentControlSize.textStyle(): TextStyle

The text style of the segment control item.

Timepicker

@Composable

fun Timepicker(modifier: Modifier = Modifier, config: TimepickerConfig = TimepickerConfig.create( hour = TimepickerElement.hours(), minute = TimepickerElement.minutes(), second = TimepickerElement.seconds(), ), onHoursChanged: (Int) -> Unit = {}, onMinutesChanged: (Int) -> Unit = {}, onSecondsChanged: (Int) -> Unit = {}, gap: Dp = TimepickerDefaults.DefaultGap, colors: WheelPickerColors = WheelPickerDefaults.wheelPickerColors())

@Composable

A components for choose hours/minutes/seconds based on WheelPicker

TitleBar

@Composable

fun TitleBar(title: @Composable BoxScope.() -> Unit, modifier: Modifier = Modifier, leadingActions: @Composable RowScope.() -> Unit? = null, trailingActions: @Composable RowScope.() -> Unit? = null, contentPadding: PaddingValues = TitleBarDefaults.HorizontalPadding, leadingGap: Dp = TitleBarDefaults.ActionsGap, trailingGap: Dp = TitleBarDefaults.ActionsGap, titleAlignment: TitleAlignment = TitleAlignment.Center, colors: TitleBarColors = TitleBarDefaults.titleBarColors())

@Composable

app title bar

ToggleableChip

@Composable

fun ToggleableChip(label: @Composable () -> Unit, isToggleOn: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, enabled: Boolean = true, chipSize: ChipSize = ChipsDefaults.Small, colors: ToggleableChipColors = ChipsDefaults.toggleableChipColors(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

@Composable

fun ToggleableChip(label: @Composable () -> Unit, isToggleOn: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, enabled: Boolean = true, chipSize: ChipSize = ChipsDefaults.Small, colors: ToggleableChipColors = ChipsDefaults.toggleableChipColors(), vibrants: ToggleableChipVibrants = ChipsDefaults.toggleableChipVibrants(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

Chip that is toggleable

ToggleButton

@Composable

fun ToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, colors: ToggleButtonColors = ToggleButtonDefaults.toggleButtonColors(), size: ButtonSize = ToggleButtonDefaults.Min, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, contentPadding: PaddingValues = ButtonDefaults.paddingForButtonSize( size, haveIcon = leadingIcon != null || trailingIcon != null, ), shape: Shape = ButtonDefaults.shapeForButtonSize(size), gap: Dp = ButtonDefaults.gapForButtonSize( size, haveIcon = leadingIcon != null || trailingIcon != null, ), content: @Composable RowScope.() -> Unit)

@Composable

fun ToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, colors: ToggleButtonColors = ToggleButtonDefaults.toggleButtonColors(), vibrants: ToggleButtonVibrants = ToggleButtonDefaults.toggleButtonVibrants(), size: ButtonSize = ToggleButtonDefaults.Min, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, contentPadding: PaddingValues = ButtonDefaults.paddingForButtonSize( size, haveIcon = leadingIcon != null || trailingIcon != null, ), shape: Shape = ButtonDefaults.shapeForButtonSize(size), gap: Dp = ButtonDefaults.gapForButtonSize( size, haveIcon = leadingIcon != null || trailingIcon != null, ), content: @Composable RowScope.() -> Unit)

A stylized toggleable button component defined by PICO design which could be used easily by pass pre-defined ButtonSize and ToggleButtonColors. Each pre-defined ButtonSize has related PaddingValues,Shape,gap and TextStyle.

ToggleIconButton

@Composable

fun ToggleIconButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, colors: ToggleButtonColors = ToggleIconButtonDefaults.toggleIconButtonColors(), size: ButtonSize = ToggleIconButtonDefaults.Min, shape: Shape = ToggleIconButtonDefaults.DefaultShape, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, content: @Composable () -> Unit)

@Composable

fun ToggleIconButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, colors: ToggleButtonColors = ToggleIconButtonDefaults.toggleIconButtonColors(), vibrants: ToggleButtonVibrants = ToggleIconButtonDefaults.toggleIconButtonVibrants(), size: ButtonSize = ToggleIconButtonDefaults.Min, shape: Shape = ToggleIconButtonDefaults.DefaultShape, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, content: @Composable () -> Unit)

Toggleable icon button defined by PICO design

TriStateCheckbox

@Composable

fun TriStateCheckbox(state: ToggleableState, modifier: Modifier = Modifier, onClick: () -> Unit? = null, enabled: Boolean = true, contentSize: CheckboxContentSize = CheckBoxDefaults.Regular, colors: CheckboxColor = CheckBoxDefaults.checkboxColors(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

@Composable

fun TriStateCheckbox(state: ToggleableState, modifier: Modifier = Modifier, onClick: () -> Unit? = null, enabled: Boolean = true, contentSize: CheckboxContentSize = CheckBoxDefaults.Regular, colors: CheckboxColor = CheckBoxDefaults.checkboxColors(), vibrants: CheckboxVibrants = CheckBoxDefaults.checkboxVibrants(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

Checkboxes can have a parent-child relationship with other checkboxes. When the parent checkbox is checked, all child checkboxes are checked. If a parent checkbox is unchecked, all child checkboxes are unchecked. If some, but not all, child checkboxes are checked, the parent checkbox becomes an indeterminate checkbox.

VerticalDivider

@Composable

fun VerticalDivider(modifier: Modifier = Modifier, color: Color = DividerDefaults.color, thickness: Dp = DividerDefaults.thickness)

A divider is a thin line that groups content in horizontal lists and layouts.

WheelPicker

@Composable

fun WheelPicker(count: Int, getItemText: (Int) -> String, modifier: Modifier = Modifier, itemHeight: Dp = WheelPickerDefaults.DefaultItemHeight, itemMargin: Dp = WheelPickerDefaults.defaultItemMargin, rowNumber: Int = 7, onSelectedChange: (Int) -> Unit? = null, colors: WheelPickerColors = WheelPickerDefaults.wheelPickerColors(), initialSelectedIndex: Int = rowNumber / 2, indicatorBackgroundShape: Shape = WheelPickerDefaults.DefaultIndicatorShape, indicatorCenterTextStyle: TextStyle = PicoTheme.typography.headlineLarge, isInfinite: Boolean = false, leftText: @Composable () -> Unit? = null, rightText: @Composable () -> Unit? = null, state: LazyListState = with(count) { check(this > 0) { "count must lager than 0" } rememberWheelState( count, rowNumber, initialFirstVisibleItemIndex = initialSelectedIndex % this, ) })

@Composable

fun WheelPicker(count: Int, getItemText: (Int) -> String, modifier: Modifier = Modifier, itemHeight: Dp = WheelPickerDefaults.DefaultItemHeight, itemMargin: Dp = WheelPickerDefaults.defaultItemMargin, rowNumber: Int = 7, onSelectedChange: (Int) -> Unit? = null, colors: WheelPickerColors = WheelPickerDefaults.wheelPickerColors(), vibrants: WheelPickerVibrants = WheelPickerDefaults.wheelPickerVibrants(), initialSelectedIndex: Int = rowNumber / 2, indicatorBackgroundShape: Shape = WheelPickerDefaults.DefaultIndicatorShape, indicatorCenterTextStyle: TextStyle = PicoTheme.typography.headlineLarge, isInfinite: Boolean = false, leftText: @Composable () -> Unit? = null, rightText: @Composable () -> Unit? = null, state: LazyListState = with(count) { check(this > 0) { "count must lager than 0" } rememberWheelState( count, rowNumber, initialFirstVisibleItemIndex = initialSelectedIndex % this, ) })

A common picker widget defined by PICO Design.