Containers & Lists

The structural pieces — cards, rows, sheets, dialogs, grids — you compose screens from. Import from dev.shipkaro.kit.core.designsystem.components.

---

KitCard

A surface container — plain, or clickable when you pass onClick.

KitCard(onClick = { open(item) }) {
    Text(item.title, style = MaterialTheme.typography.titleMedium)
    Text(item.subtitle, color = KitTheme.colors.onSurfaceVariant)
}

Features — themed surface + elevation; ripple + click only when onClick is set; content is a ColumnScope so you lay out children naturally.

---

KitListItem

A standard list row — headline, supporting text, leading icon, trailing slot.

KitListItem(
    headline = "Notifications",
    supporting = "Daily reminder at 8pm",
    leading = KitTheme.icons.bell,
    onClick = { openNotificationSettings() },
    trailing = { Switch(checked = on, onCheckedChange = ::toggle) },
)

---

KitBottomSheet

A Material 3 modal bottom sheet wrapper.

if (showSheet) {
    KitBottomSheet(onDismiss = { showSheet = false }) {
        // ColumnScope content
        KitListItem(headline = "Share", leading = KitTheme.icons.share, onClick = ::share)
        KitListItem(headline = "Delete", leading = KitTheme.icons.delete, onClick = ::delete)
    }
}

---

KitDialog

An alert dialog — title, message, confirm + optional dismiss, with a destructive variant.

KitDialog(
    title = "Delete account?",
    message = "This permanently removes your data. This can't be undone.",
    confirmLabel = "Delete",
    onConfirm = { viewModel.deleteAccount() },
    dismissLabel = "Cancel",
    onDismiss = { showDialog = false },
    destructive = true,   // confirm button uses the error color
)

Features — destructive recolors the confirm action; dismissLabel is nullable for a single-action dialog; labels are required params so they stay localizable.

---

KitDisclosureGroup

An expand/collapse group — stateless or self-managing.

KitDisclosureGroup(title = "Advanced settings") {
    ToggleRow(title = "Analytics", checked = analytics, onCheckedChange = ::setAnalytics)
    ToggleRow(title = "Crash reports", checked = crash, onCheckedChange = ::setCrash)
}

---

KitSwipeableRow

Wrap a row to reveal swipe actions in either direction.

KitSwipeableRow(
    onSwipedStart = { archive(item) },
    onSwipedEnd = { delete(item) },
) {
    KitListItem(headline = item.title)
}

---

KitLazyGrid & KitAdaptiveLazyGrid

Grid layouts — fixed column count, or adaptive to a minimum cell width.

// Fixed: exactly 2 columns
KitLazyGrid(columns = 2, items = photos) { photo -> PhotoCell(photo) }

// Adaptive: as many columns as fit at 120dp min
KitAdaptiveLazyGrid(minCellWidth = 120.dp, items = photos) { photo -> PhotoCell(photo) }

---

Next: Feedback & Status — snackbars, banners, loading & empty states.