Card

• Content organization: Groups related content with consistent padding. Full-width by default, clipped to shape.
• Visual hierarchy: Primary cards are elevated. Secondary cards are flat. Outlined cards have thin borders.
• Theming: Colors, shapes, and spacing derive from SpatialTheme/LocalShapes for consistency.
• Interaction: Optional click handling. Hover dims content and press scales the card. Announced as a button.
• Padding control: Configure via contentPadding. Defaults to medium.

• Composable: PrimaryCard
• Usage: Main content areas that need prominent visual treatment. High emphasis with elevated appearance.
• Appearance: Elevated surface with shadow creates strong separation from background.

import com.meta.spatial.uiset.card.PrimaryCard
import androidx.compose.material3.Text

// Basic content
PrimaryCard {
    Text("Main content area")
}

// With click interaction
PrimaryCard(onClick = { /* handle click */ }) {
    Text("Clickable content")
}

• Composable: SecondaryCard
• Usage: Supporting content that needs subtle visual treatment. Medium emphasis with subdued appearance.
• Appearance: Flat surface with no elevation. Subtle background styling.

import com.meta.spatial.uiset.card.SecondaryCard
import androidx.compose.material3.Text

// Supporting content
SecondaryCard {
    Text("Supporting information")
}

// With interaction
SecondaryCard(onClick = { /* handle click */ }) {
    Text("Interactive supporting content")
}

• Composable: OutlinedCard
• Usage: Content that needs clear boundaries with minimal visual treatment. Low emphasis with border definition.
• Appearance: No elevation. Thin border with minimal background provides structure.

import com.meta.spatial.uiset.card.OutlinedCard
import androidx.compose.material3.Text

// Minimal content
OutlinedCard {
    Text("Content with clear boundaries")
}

// With click interaction
OutlinedCard(onClick = { /* handle click */ }) {
    Text("Interactive outlined content")
}

• modifier: Modifier = Modifier: Standard Compose modifier for styling and layout.
• onClick: (() -> Unit)? = null: Optional lambda executed when users click the card.
• contentPadding: Dp = SpatialShapeSizes.medium: Padding applied to card content. Defaults to medium spacing.
• content: @Composable ColumnScope.() -> Unit: Composable content displayed inside the card.