# Inbox Categories
A mail inbox sorted into Primary, Transactions, Updates and Promotions, with a reader and swipe actions on each row.
Inbox Categories is an open-source mobile screen from suiss/uim for React Native and Expo, with SwiftUI and Jetpack Compose versions built from the same design tokens. The @esuiss/uim CLI copies its source into your project, so you own the code.
Source: https://uim.suiss.app/docs/blocks/inbox-categories
```tsx title="uniwind/components/blocks/inbox-categories.tsx"
import { cn } from "cn"
import {
ArchiveIcon,
ArrowBendUpLeftIcon,
BellIcon,
CreditCardIcon,
type Icon as PhosphorIcon,
StarIcon,
TagIcon,
TrashIcon,
UsersIcon,
} from "phosphor-react-native"
import * as React from "react"
import { useWindowDimensions, View } from "react-native"
import { FadeInDown, ReduceMotion } from "react-native-reanimated"
import {
SwipeAction,
SwipeActions,
SwipeActionsActions,
SwipeActionsContent,
} from "@/components/interactions/swipe-actions"
import {
SplitView,
type SplitViewColumn,
SplitViewDetail,
SplitViewItem,
SplitViewList,
} from "@/components/patterns/split-view"
import { AnimatedView } from "@/components/ui/animated-view"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
import { Screen } from "@/components/ui/screen"
import { Text } from "@/components/ui/text"
import { Textarea } from "@/components/ui/textarea"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
type Category = "Primary" | "Transactions" | "Updates" | "Promotions"
type Mail = {
id: number
from: string
subject: string
body: string
time: string
tint: string | null
category: Category
unread: boolean
starred: boolean
}
const INITIAL_MAIL: Mail[] = [
{
id: 0,
from: "suiss",
subject: "Your order has shipped",
body: "Order #W1048 is on its way and arrives tomorrow. A signature is required on delivery.",
time: "9:12 AM",
tint: null,
category: "Transactions",
unread: true,
starred: false,
},
{
id: 1,
from: "Morgan Lee",
subject: "Tomorrow's meeting",
body: "Does 10:00 tomorrow work? The Q4 budget and the campaign calendar are on the agenda. I'll share the deck tonight.",
time: "8:40 AM",
tint: "bg-orange dark:bg-orange",
category: "Primary",
unread: true,
starred: false,
},
{
id: 2,
from: "suiss Cloud",
subject: "Your storage is almost full",
body: "90% of your Cloud storage is used. Upgrade your plan to keep your backups running.",
time: "Yesterday",
tint: "bg-blue dark:bg-blue",
category: "Updates",
unread: true,
starred: false,
},
{
id: 3,
from: "Riley Chen",
subject: "Coast trip photos",
body: "I added the photos to the shared album. The ones from the boat tour came out great.",
time: "Yesterday",
tint: "bg-green dark:bg-green",
category: "Primary",
unread: false,
starred: true,
},
{
id: 4,
from: "suiss Store",
subject: "Just for you: a Trade In offer",
body: "Bring in your old phone and get up to $650 off a new one.",
time: "Monday",
tint: null,
category: "Promotions",
unread: false,
starred: false,
},
{
id: 5,
from: "App Store",
subject: "Your receipt",
body: "Your Studio Pro subscription renewed. Total: $4.99.",
time: "Monday",
tint: null,
category: "Transactions",
unread: false,
starred: false,
},
]
const CATEGORIES: { value: Category; icon: PhosphorIcon; tint: string }[] = [
{ value: "Primary", icon: UsersIcon, tint: "bg-accent" },
{ value: "Transactions", icon: CreditCardIcon, tint: "bg-green" },
{ value: "Updates", icon: BellIcon, tint: "bg-purple" },
{ value: "Promotions", icon: TagIcon, tint: "bg-pink" },
]
const ENTERING = FadeInDown.duration(800).reduceMotion(ReduceMotion.System)
function SenderAvatar({ mail, className }: { mail: Mail; className?: string }) {
return (
{mail.tint
? mail.from
.split(" ")
.map((part) => part[0])
.join("")
: "s"}
)
}
function Reader({
mail,
onReply,
onStar,
onArchive,
onDelete,
}: {
mail: Mail
onReply: (text: string) => void
onStar: () => void
onArchive: () => void
onDelete: () => void
}) {
const [replying, setReplying] = React.useState(false)
const [reply, setReply] = React.useState("")
const actions: {
label: string
icon: PhosphorIcon
onPress: () => void
active?: boolean
}[] = [
{
label: "Reply",
icon: ArrowBendUpLeftIcon,
onPress: () => setReplying(true),
},
{
label: mail.starred ? "Unstar" : "Star",
icon: StarIcon,
onPress: onStar,
active: mail.starred,
},
{ label: "Archive", icon: ArchiveIcon, onPress: onArchive },
{ label: "Delete", icon: TrashIcon, onPress: onDelete },
]
return (
{actions.map((action) => (
))}
{mail.from}
To: Jamie Rivera
{mail.time}
{mail.subject}
{mail.body}
{replying ? (
) : null}
)
}
function MailRow({
mail,
index,
active,
onPress,
onArchive,
onDelete,
}: {
mail: Mail
index: number
active: boolean
onPress: () => void
onArchive: () => void
onDelete: () => void
}) {
const muted = active ? "text-on-accent" : "text-label-secondary"
return (
{mail.unread ? (
) : null}
{mail.from}
{mail.starred ? (
) : null}
{mail.time}
{mail.subject}
{mail.body}
Archive
Delete
)
}
function InboxCategories({
onCategoryChange,
onReply,
onStarChange,
onArchive,
onDelete,
}: {
onCategoryChange?: (category: Category) => void
onReply?: (id: number, text: string) => void
onStarChange?: (id: number, starred: boolean) => void
onArchive?: (id: number) => void
onDelete?: (id: number) => void
}) {
const { width } = useWindowDimensions()
const wide = width >= 768
const [mail, setMail] = React.useState(INITIAL_MAIL)
const [category, setCategory] = React.useState("Primary")
const [selected, setSelected] = React.useState(1)
const [column, setColumn] = React.useState("list")
const list = mail.filter((item) => item.category === category)
const current = list.find((item) => item.id === selected)
const update = (id: number, patch: Partial) =>
setMail((items) =>
items.map((item) => (item.id === id ? { ...item, ...patch } : item))
)
const remove = (id: number) => {
const rest = mail.filter((item) => item.id !== id)
setMail(rest)
if (selected === id) {
setSelected(rest.find((item) => item.category === category)?.id ?? null)
setColumn("list")
}
}
return (
{wide ? (
Inbox
) : null}
{
const next = value[0] as Category | undefined
if (!next) return
setCategory(next)
setSelected(
mail.find((item) => item.category === next)?.id ?? null
)
onCategoryChange?.(next)
}}
accessibilityLabel="Category"
spacing={1.5}
className={wide ? "px-1.5" : undefined}
>
{CATEGORIES.map((item) => {
const unread = mail.some(
(entry) => entry.category === item.value && entry.unread
)
const pressed = category === item.value
return (
{pressed ? (
{item.value}
) : null}
{!pressed && unread ? (
) : null}
)
})}
{list.length > 0 ? (
list.map((item, index) => (
{
setSelected(item.id)
update(item.id, { unread: false })
}}
onArchive={() => {
onArchive?.(item.id)
remove(item.id)
}}
onDelete={() => {
onDelete?.(item.id)
remove(item.id)
}}
/>
))
) : (
{`No messages in ${category}.`}
)}
{current ? (
onReply?.(current.id, text)}
onStar={() => {
onStarChange?.(current.id, !current.starred)
update(current.id, { starred: !current.starred })
}}
onArchive={() => {
onArchive?.(current.id)
remove(current.id)
}}
onDelete={() => {
onDelete?.(current.id)
remove(current.id)
}}
/>
) : (
No Message Selected
)}
)
}
export { InboxCategories }
```
```swift title="swift/Blocks/InboxCategories.swift"
import PhosphorSwift
import SwiftUI
public struct InboxCategories: View {
struct Mail: Identifiable, Equatable {
let id: Int
let from: String
let subject: String
let body: String
let time: String
let tint: Color?
let category: String
var unread: Bool
var starred: Bool
}
struct Category {
let value: String
let icon: Image
let tint: Color
}
static var initialMail: [Mail] {
[
Mail(id: 0, from: "suiss", subject: "Your order has shipped", body: "Order #W1048 is on its way and arrives tomorrow. A signature is required on delivery.", time: "9:12 AM", tint: nil, category: "Transactions", unread: true, starred: false),
Mail(id: 1, from: "Morgan Lee", subject: "Tomorrow's meeting", body: "Does 10:00 tomorrow work? The Q4 budget and the campaign calendar are on the agenda. I'll share the deck tonight.", time: "8:40 AM", tint: .orange, category: "Primary", unread: true, starred: false),
Mail(id: 2, from: "suiss Cloud", subject: "Your storage is almost full", body: "90% of your Cloud storage is used. Upgrade your plan to keep your backups running.", time: "Yesterday", tint: .blue, category: "Updates", unread: true, starred: false),
Mail(id: 3, from: "Riley Chen", subject: "Coast trip photos", body: "I added the photos to the shared album. The ones from the boat tour came out great.", time: "Yesterday", tint: .green, category: "Primary", unread: false, starred: true),
Mail(id: 4, from: "suiss Store", subject: "Just for you: a Trade In offer", body: "Bring in your old phone and get up to $650 off a new one.", time: "Monday", tint: nil, category: "Promotions", unread: false, starred: false),
Mail(id: 5, from: "App Store", subject: "Your receipt", body: "Your Studio Pro subscription renewed. Total: $4.99.", time: "Monday", tint: nil, category: "Transactions", unread: false, starred: false),
]
}
static var categories: [Category] {
[
Category(value: "Primary", icon: Ph.users.bold, tint: .accent),
Category(value: "Transactions", icon: Ph.creditCard.bold, tint: .green),
Category(value: "Updates", icon: Ph.bell.bold, tint: .purple),
Category(value: "Promotions", icon: Ph.tag.bold, tint: .pink),
]
}
private var onCategoryChange: ((String) -> Void)?
private var onArchive: ((Int) -> Void)?
private var onDelete: ((Int) -> Void)?
private var onReply: ((Int, String) -> Void)?
private var onStarChange: ((Int, Bool) -> Void)?
private let replying: Bool
private let swiped: Int?
@State private var mail: [Mail]
@State private var category: String
@State private var selected: Int?
@State private var column: SplitViewColumn
@Environment(\.accessibilityReduceMotion) private var reduceMotion
public init(
onCategoryChange: ((_ category: String) -> Void)? = nil,
onReply: ((_ id: Int, _ text: String) -> Void)? = nil,
onStarChange: ((_ id: Int, _ starred: Bool) -> Void)? = nil,
onArchive: ((_ id: Int) -> Void)? = nil,
onDelete: ((_ id: Int) -> Void)? = nil
) {
self.init(category: "Primary")
self.onCategoryChange = onCategoryChange
self.onArchive = onArchive
self.onDelete = onDelete
self.onReply = onReply
self.onStarChange = onStarChange
}
init(
category: String = "Primary",
selected: Int? = 1,
column: SplitViewColumn = .list,
replying: Bool = false,
swiped: Int? = nil
) {
_mail = State(initialValue: Self.initialMail)
_category = State(initialValue: category)
_selected = State(initialValue: selected)
_column = State(initialValue: column)
self.replying = replying
self.swiped = swiped
}
private var animation: Animation? {
reduceMotion ? nil : .timingCurve(0.32, 0.72, 0, 1, duration: 0.4)
}
public var body: some View {
let list = mail.filter { $0.category == category }
let current = list.first { $0.id == selected }
Screen {
SplitView(column: $column) {
SplitViewList("Inbox") {
VStack(alignment: .leading, spacing: 12) {
InboxCategoriesHeading()
categoryBar
VStack(spacing: 0) {
if list.isEmpty {
Text("No messages in \(category).")
.scaledFont(.sm)
.foregroundStyle(Color.labelSecondary)
.frame(maxWidth: .infinity)
.padding(30)
}
ForEach(list) { item in
SwipeActions(revealed: swiped == item.id ? -144 : 0) {
SplitViewItem(isActive: item.id == selected, action: {
selected = item.id
update(item.id) { $0.unread = false }
}) {
InboxCategoriesRow(mail: item)
}
} leading: {
EmptyView()
} trailing: {
SwipeAction("Archive", icon: Ph.archive.fill, variant: .archive) {
onArchive?(item.id)
remove(item.id)
}
SwipeAction("Delete", icon: Ph.trash.fill, variant: .destructive, fullSwipe: true) {
onDelete?(item.id)
remove(item.id)
}
}
.transition(.opacity.combined(with: .offset(y: 6)))
}
}
.id(category)
.transition(.opacity.combined(with: .offset(y: 6)))
}
}
SplitViewDetail {
if let current {
InboxCategoriesReader(
mail: current,
replying: replying,
onStar: {
onStarChange?(current.id, !current.starred)
update(current.id) { $0.starred.toggle() }
},
onArchive: {
onArchive?(current.id)
remove(current.id)
},
onDelete: {
onDelete?(current.id)
remove(current.id)
},
onReply: { text in onReply?(current.id, text) }
)
.id(current.id)
} else {
Text("No Message Selected")
.scaledFont(.base)
.foregroundStyle(Color.labelSecondary)
.frame(maxWidth: .infinity)
.padding(.top, 120)
}
}
}
}
}
private var categoryBar: some View {
HStack(spacing: 6) {
ForEach(Self.categories, id: \.value) { item in
let pressed = category == item.value
let unread = mail.contains { $0.category == item.value && $0.unread }
Button {
select(item.value)
} label: {
HStack(spacing: 6) {
item.icon.frame(width: 16, height: 16)
if pressed {
Text(LocalizedStringKey(item.value))
.scaledFont(.sm, weight: .semibold)
.lineLimit(1)
.fixedSize()
.transition(.opacity)
}
}
.foregroundStyle(pressed ? Color.onAccent : .labelSecondary)
.padding(.horizontal, pressed ? 14 : 11)
.frame(height: 34)
.background(pressed ? item.tint : Color.control, in: RoundedRectangle(cornerRadius: Radius.lg, style: .continuous))
.overlay(alignment: .topTrailing) {
if !pressed && unread {
Circle()
.fill(Color.accent)
.frame(width: 8, height: 8)
.padding(2)
.background(Color.surface, in: Circle())
.offset(x: 1, y: -1)
.accessibilityHidden(true)
}
}
.contentShape(Rectangle())
}
.buttonStyle(.plain)
.accessibilityLabel(Text(LocalizedStringKey(item.value)))
.accessibilityValue(unread && !pressed ? Text("Unread") : Text(verbatim: ""))
.accessibilityAddTraits(pressed ? .isSelected : [])
}
}
.padding(.top, 2)
.hapticFeedback(.selection, trigger: category)
.accessibilityElement(children: .contain)
.accessibilityLabel(Text("Category"))
}
private func select(_ value: String) {
guard value != category else { return }
onCategoryChange?(value)
withAnimation(reduceMotion ? nil : .spring(response: 0.35, dampingFraction: 0.75)) {
category = value
selected = mail.first { $0.category == value }?.id
}
}
private func update(_ id: Int, _ change: (inout Mail) -> Void) {
guard let index = mail.firstIndex(where: { $0.id == id }) else { return }
change(&mail[index])
}
private func remove(_ id: Int) {
withAnimation(animation) {
mail.removeAll { $0.id == id }
selected = mail.first { $0.category == category }?.id
}
}
}
private struct InboxCategoriesHeading: View {
@Environment(\.splitView) private var splitView
var body: some View {
if splitView?.wide ?? false {
Text("Inbox")
.scaledFont(.xl3, weight: .bold)
.foregroundStyle(Color.label)
.padding(.horizontal, 6)
.accessibilityHidden(true)
}
}
}
private struct InboxCategoriesAvatar: View {
let mail: InboxCategories.Mail
let size: CGFloat
var body: some View {
let initials = mail.from.split(separator: " ").compactMap(\.first).map(String.init).joined()
Text(verbatim: mail.tint == nil ? "s" : initials)
.font(.system(size: size * 0.4, weight: .semibold))
.foregroundStyle(mail.tint == nil ? Color.surface : .onAccent)
.frame(width: size, height: size)
.background(mail.tint ?? .label, in: Circle())
.accessibilityHidden(true)
}
}
private struct InboxCategoriesRow: View {
let mail: InboxCategories.Mail
var body: some View {
HStack(alignment: .top, spacing: 8) {
Circle()
.fill(mail.unread ? Color.accent : .clear)
.frame(width: 8, height: 8)
.padding(.top, 6)
.accessibilityHidden(true)
VStack(alignment: .leading, spacing: 2) {
HStack(spacing: 6) {
Text(verbatim: mail.from)
.scaledFont(.sm, weight: .semibold)
.lineLimit(1)
.frame(maxWidth: .infinity, alignment: .leading)
if mail.starred {
Ph.star.fill
.frame(width: 12, height: 12)
.foregroundStyle(Color.orange)
.accessibilityLabel(Text("Starred"))
}
Text(LocalizedStringKey(mail.time))
.scaledFont(.xs)
.foregroundStyle(Color.labelSecondary)
}
Text(verbatim: mail.subject)
.scaledFont(.sm)
.lineLimit(1)
Text(verbatim: mail.body)
.scaledFont(.xs)
.foregroundStyle(Color.labelSecondary)
.lineLimit(2)
.multilineTextAlignment(.leading)
}
}
.accessibilityElement(children: .combine)
.accessibilityValue(mail.unread ? Text("Unread") : Text(verbatim: ""))
}
}
private struct InboxCategoriesReader: View {
let mail: InboxCategories.Mail
let onStar: () -> Void
let onArchive: () -> Void
let onDelete: () -> Void
let onReply: (String) -> Void
@State private var replying: Bool
@State private var reply = ""
@FocusState private var focused: Bool
@Environment(\.accessibilityReduceMotion) private var reduceMotion
init(
mail: InboxCategories.Mail,
replying: Bool,
onStar: @escaping () -> Void,
onArchive: @escaping () -> Void,
onDelete: @escaping () -> Void,
onReply: @escaping (String) -> Void
) {
self.mail = mail
self.onStar = onStar
self.onArchive = onArchive
self.onDelete = onDelete
self.onReply = onReply
_replying = State(initialValue: replying)
}
var body: some View {
VStack(alignment: .leading, spacing: 0) {
HStack(spacing: 2) {
Spacer(minLength: 0)
action("Reply", icon: Ph.arrowBendUpLeft.regular) {
replying = true
focused = true
}
action(mail.starred ? "Unstar" : "Star", icon: mail.starred ? Ph.star.fill : Ph.star.regular, active: mail.starred, perform: onStar)
action("Archive", icon: Ph.archive.regular, perform: onArchive)
action("Delete", icon: Ph.trash.regular, perform: onDelete)
}
.frame(height: 50)
.overlay(alignment: .bottom) {
Color.separator.frame(height: 1).padding(.horizontal, -16)
}
VStack(alignment: .leading, spacing: 16) {
HStack(spacing: 12) {
InboxCategoriesAvatar(mail: mail, size: 40)
VStack(alignment: .leading, spacing: 0) {
Text(verbatim: mail.from)
.scaledFont(.base, weight: .semibold)
Text("To: Jamie Rivera")
.scaledFont(.xs)
.foregroundStyle(Color.labelSecondary)
}
.frame(maxWidth: .infinity, alignment: .leading)
Text(LocalizedStringKey(mail.time))
.scaledFont(.xs)
.foregroundStyle(Color.labelSecondary)
}
.accessibilityElement(children: .combine)
Text(verbatim: mail.subject)
.scaledTextStyle(.xl2, weight: .semibold)
.fixedSize(horizontal: false, vertical: true)
.accessibilityAddTraits(.isHeader)
Text(verbatim: mail.body)
.scaledTextStyle(.base)
.lineSpacing(4)
.fixedSize(horizontal: false, vertical: true)
}
.padding(.top, 22)
if replying {
VStack(alignment: .leading, spacing: 10) {
TextField("Reply to \(mail.from)", text: $reply, axis: .vertical)
.textFieldStyle(.textarea)
.lineLimit(4...8)
.focused($focused)
.accessibilityLabel(Text("Reply to \(mail.from)"))
HStack(spacing: 10) {
Button("Send") {
onReply(reply)
reply = ""
replying = false
}
.buttonStyle(.variant(.default, size: .sm))
.disabled(reply.isEmpty)
Button("Cancel") {
replying = false
}
.buttonStyle(.variant(.outline, size: .sm))
}
}
.padding(.top, 18)
.overlay(alignment: .top) {
Color.separator.frame(height: 1)
}
.padding(.top, 22)
.transition(.opacity.combined(with: .offset(y: 8)))
}
}
.foregroundStyle(Color.label)
.animation(reduceMotion ? nil : .timingCurve(0.32, 0.72, 0, 1, duration: 0.5), value: replying)
}
private func action(_ title: LocalizedStringKey, icon: Image, active: Bool = false, perform: @escaping () -> Void) -> some View {
Button(action: perform) {
icon
.frame(width: 20, height: 20)
.foregroundStyle(active ? Color.orange : .labelSecondary)
}
.buttonStyle(.variant(.ghost, size: .icon))
.accessibilityLabel(Text(title))
.accessibilityAddTraits(active ? .isSelected : [])
}
}
```
```kt title="kotlin/blocks/InboxCategories.kt"
package com.esuiss.ui.blocks
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.animateContentSize
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.CubicBezierEasing
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.selection.selectable
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.key
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.graphics.lerp
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.stateDescription
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Bold
import com.adamglin.phosphoricons.Fill
import com.adamglin.phosphoricons.Regular
import com.adamglin.phosphoricons.bold.Archive as BoldArchive
import com.adamglin.phosphoricons.bold.Bell
import com.adamglin.phosphoricons.bold.CreditCard
import com.adamglin.phosphoricons.bold.Tag
import com.adamglin.phosphoricons.bold.Trash as BoldTrash
import com.adamglin.phosphoricons.bold.Users
import com.adamglin.phosphoricons.fill.Star as FillStar
import com.adamglin.phosphoricons.regular.Archive
import com.adamglin.phosphoricons.regular.ArrowBendUpLeft
import com.adamglin.phosphoricons.regular.Star
import com.adamglin.phosphoricons.regular.Trash
import com.esuiss.ui.components.Button
import com.esuiss.ui.components.ButtonSize
import com.esuiss.ui.components.ButtonVariant
import com.esuiss.ui.components.Icon
import com.esuiss.ui.components.Screen
import com.esuiss.ui.components.Textarea
import com.esuiss.ui.interactions.SwipeAction
import com.esuiss.ui.interactions.SwipeActionVariant
import com.esuiss.ui.interactions.SwipeActions
import com.esuiss.ui.patterns.SplitView
import com.esuiss.ui.patterns.SplitViewColumn
import com.esuiss.ui.patterns.SplitViewItem
import com.esuiss.ui.theme.Colors
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Radius
import com.esuiss.ui.theme.Typography
private val CategoryRevealEasing = CubicBezierEasing(0.32f, 0.72f, 0f, 1f)
private val CategoryPopEasing = CubicBezierEasing(0.3f, 1.25f, 0.5f, 1f)
private class CategoryMail(
val id: Int,
val from: String,
val subject: String,
val body: String,
val time: String,
val hue: Int,
val category: String,
unread: Boolean,
starred: Boolean,
) {
var unread by mutableStateOf(unread)
var starred by mutableStateOf(starred)
}
private fun categoryMail() = listOf(
CategoryMail(0, "suiss", "Your order has shipped", "Order #W1048 is on its way and arrives tomorrow. A signature is required on delivery.", "9:12 AM", 0, "Transactions", unread = true, starred = false),
CategoryMail(1, "Morgan Lee", "Tomorrow's meeting", "Does 10:00 tomorrow work? The Q4 budget and the campaign calendar are on the agenda. I'll share the deck tonight.", "8:40 AM", 30, "Primary", unread = true, starred = false),
CategoryMail(2, "suiss Cloud", "Your storage is almost full", "90% of your Cloud storage is used. Upgrade your plan to keep your backups running.", "Yesterday", 210, "Updates", unread = true, starred = false),
CategoryMail(3, "Riley Chen", "Coast trip photos", "I added the photos to the shared album. The ones from the boat tour came out great.", "Yesterday", 150, "Primary", unread = false, starred = true),
CategoryMail(4, "suiss Store", "Just for you: a Trade In offer", "Bring in your old phone and get up to \$650 off a new one.", "Monday", 0, "Promotions", unread = false, starred = false),
CategoryMail(5, "App Store", "Your receipt", "Your Studio Pro subscription renewed. Total: \$4.99.", "Monday", 0, "Transactions", unread = false, starred = false),
)
private class MailCategory(val value: String, val icon: ImageVector, val tint: (Colors) -> Color)
private val MailCategories = listOf(
MailCategory("Primary", PhosphorIcons.Bold.Users) { it.accent },
MailCategory("Transactions", PhosphorIcons.Bold.CreditCard) {
if (it.isDark) lerp(it.green, it.media, 0.4f) else lerp(it.green, it.label, 0.4f)
},
MailCategory("Updates", PhosphorIcons.Bold.Bell) {
if (it.isDark) lerp(it.purple, it.media, 0.3f) else lerp(it.purple, it.label, 0.2f)
},
MailCategory("Promotions", PhosphorIcons.Bold.Tag) {
if (it.isDark) lerp(it.pink, it.media, 0.25f) else lerp(it.pink, it.label, 0.2f)
},
)
private fun senderTint(colors: Colors, hue: Int): Color = when (hue) {
30 -> colors.orange
150 -> colors.green
210 -> colors.blue
else -> colors.label
}
private fun starTint(colors: Colors): Color = if (colors.isDark) colors.orange else lerp(colors.orange, colors.label, 0.45f)
@Composable
fun InboxCategories(
modifier: Modifier = Modifier,
onCategoryChange: (category: String) -> Unit = {},
onArchive: (id: Int) -> Unit = {},
onDelete: (id: Int) -> Unit = {},
onReply: (id: Int, text: String) -> Unit = { _, _ -> },
onStarChange: (id: Int, starred: Boolean) -> Unit = { _, _ -> },
) {
val colors = EsuissTheme.colors
val mail = remember { mutableStateListOf().apply { addAll(categoryMail()) } }
var category by rememberSaveable { mutableStateOf("Primary") }
var selected by rememberSaveable { mutableStateOf(1) }
var column by rememberSaveable { mutableStateOf(SplitViewColumn.List) }
val list = mail.filter { it.category == category }
val current = list.firstOrNull { it.id == selected }
fun remove(item: CategoryMail) {
mail.remove(item)
selected = mail.firstOrNull { it.category == category }?.id
column = SplitViewColumn.List
}
fun archive(item: CategoryMail) {
onArchive(item.id)
remove(item)
}
fun delete(item: CategoryMail) {
onDelete(item.id)
remove(item)
}
fun star(item: CategoryMail) {
onStarChange(item.id, !item.starred)
item.starred = !item.starred
}
Screen(modifier) {
SplitView(column = column, onColumnChange = { column = it }) {
SplitViewList(title = "Inbox") {
Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
Row(
modifier = Modifier.semantics { contentDescription = "Category" },
horizontalArrangement = Arrangement.spacedBy(6.dp),
verticalAlignment = Alignment.CenterVertically,
) {
MailCategories.forEach { item ->
CategoryToggle(
category = item,
pressed = category == item.value,
unread = mail.any { it.category == item.value && it.unread },
) {
onCategoryChange(item.value)
category = item.value
selected = mail.firstOrNull { it.category == item.value }?.id
}
}
}
key(category) {
Column {
if (list.isEmpty()) {
BasicText(
"No messages in $category.",
modifier = Modifier
.fillMaxWidth()
.padding(30.dp),
style = Typography.sm.copy(color = colors.labelSecondary, textAlign = TextAlign.Center),
)
}
list.forEachIndexed { index, item ->
key(item.id) {
CategoryAppear(index) {
SwipeActions(
leading = listOf(
SwipeAction(
label = if (item.starred) "Unstar" else "Star",
onClick = { star(item) },
icon = PhosphorIcons.Fill.FillStar,
),
),
trailing = listOf(
SwipeAction(
label = "Archive",
onClick = { archive(item) },
icon = PhosphorIcons.Bold.BoldArchive,
variant = SwipeActionVariant.Archive,
),
SwipeAction(
label = "Delete",
onClick = { delete(item) },
icon = PhosphorIcons.Bold.BoldTrash,
variant = SwipeActionVariant.Destructive,
fullSwipe = true,
),
),
) {
CategoryRow(item, active = item.id == selected) {
selected = item.id
item.unread = false
}
}
}
}
}
}
}
}
}
SplitViewDetail {
if (current != null) {
key(current.id) {
CategoryReader(
mail = current,
onReply = { onReply(current.id, it) },
onStar = { star(current) },
onArchive = { archive(current) },
onDelete = { delete(current) },
)
}
} else {
BasicText(
"No Message Selected",
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 48.dp),
style = Typography.base.copy(color = colors.labelSecondary, textAlign = TextAlign.Center),
)
}
}
}
}
}
@Composable
private fun CategoryToggle(category: MailCategory, pressed: Boolean, unread: Boolean, onClick: () -> Unit) {
val colors = EsuissTheme.colors
val shape = RoundedCornerShape(Radius.lg)
val fill by animateColorAsState(if (pressed) category.tint(colors) else colors.control, tween(350), label = "fill")
val ink by animateColorAsState(if (pressed) colors.onMedia else colors.labelSecondary, tween(350), label = "ink")
Box {
Row(
modifier = Modifier
.height(34.dp)
.clip(shape)
.background(fill, shape)
.selectable(
selected = pressed,
interactionSource = remember { MutableInteractionSource() },
indication = null,
role = Role.Tab,
onClick = onClick,
)
.semantics { contentDescription = category.value }
.animateContentSize(tween(350, easing = CategoryPopEasing))
.padding(horizontal = if (pressed) 14.dp else 11.dp),
horizontalArrangement = Arrangement.spacedBy(6.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Icon(category.icon, contentDescription = null, size = 16.dp, tint = ink)
if (pressed) {
BasicText(category.value, style = Typography.sm.copy(color = ink, fontWeight = FontWeight.SemiBold), maxLines = 1)
}
}
if (!pressed && unread) {
Box(
Modifier
.align(Alignment.TopEnd)
.offset(x = (-2).dp, y = 2.dp)
.size(10.dp)
.border(2.dp, colors.surface, CircleShape)
.padding(2.dp)
.background(colors.accent, CircleShape)
.semantics { stateDescription = "Unread" },
)
}
}
}
@Composable
private fun CategoryAppear(index: Int, content: @Composable () -> Unit) {
val appear = remember { Animatable(0f) }
LaunchedEffect(Unit) { appear.animateTo(1f, tween(700, delayMillis = index * 40, easing = CategoryRevealEasing)) }
Box(
Modifier.graphicsLayer {
alpha = appear.value
translationY = (1f - appear.value) * 6.dp.toPx()
},
) {
content()
}
}
@Composable
private fun CategoryRow(mail: CategoryMail, active: Boolean, onClick: () -> Unit) {
val colors = EsuissTheme.colors
SplitViewItem(isActive = active, onClick = onClick) {
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
Box(
Modifier
.padding(top = 6.dp)
.size(8.dp)
.background(if (mail.unread) colors.accent else Color.Transparent, CircleShape)
.semantics { if (mail.unread) stateDescription = "Unread" },
)
Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(1.dp)) {
Row(horizontalArrangement = Arrangement.spacedBy(6.dp), verticalAlignment = Alignment.CenterVertically) {
BasicText(
mail.from,
modifier = Modifier.weight(1f),
style = Typography.sm.copy(color = colors.label, fontWeight = FontWeight.SemiBold),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
if (mail.starred) {
Icon(PhosphorIcons.Fill.FillStar, contentDescription = "Starred", size = 12.dp, tint = starTint(colors))
}
BasicText(mail.time, style = Typography.xs.copy(color = colors.labelSecondary))
}
BasicText(
mail.subject,
style = Typography.sm.copy(color = colors.label),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
BasicText(
mail.body,
style = Typography.xs.copy(color = colors.labelSecondary),
maxLines = 2,
overflow = TextOverflow.Ellipsis,
)
}
}
}
}
@Composable
private fun CategorySender(mail: CategoryMail, size: Dp) {
val colors = EsuissTheme.colors
Box(
Modifier
.size(size)
.background(senderTint(colors, mail.hue), CircleShape),
contentAlignment = Alignment.Center,
) {
BasicText(
if (mail.hue != 0) mail.from.split(" ").mapNotNull { it.firstOrNull() }.joinToString("") else "s",
style = Typography.base.copy(
color = if (mail.hue != 0) colors.onMedia else colors.surface,
fontWeight = FontWeight.Medium,
fontSize = (size.value * 0.4f).sp,
),
)
}
}
@Composable
private fun CategoryReader(
mail: CategoryMail,
onReply: (String) -> Unit,
onStar: () -> Unit,
onArchive: () -> Unit,
onDelete: () -> Unit,
) {
val colors = EsuissTheme.colors
var replying by rememberSaveable { mutableStateOf(false) }
var reply by rememberSaveable { mutableStateOf("") }
val appear = remember { Animatable(0f) }
LaunchedEffect(Unit) { appear.animateTo(1f, tween(800, easing = CategoryRevealEasing)) }
Column(Modifier.fillMaxWidth()) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(50.dp),
horizontalArrangement = Arrangement.spacedBy(2.dp, Alignment.End),
verticalAlignment = Alignment.CenterVertically,
) {
CategoryAction(PhosphorIcons.Regular.ArrowBendUpLeft, "Reply") { replying = true }
CategoryAction(
if (mail.starred) PhosphorIcons.Fill.FillStar else PhosphorIcons.Regular.Star,
if (mail.starred) "Unstar" else "Star",
tint = if (mail.starred) starTint(colors) else colors.labelSecondary,
onClick = onStar,
)
CategoryAction(PhosphorIcons.Regular.Archive, "Archive", onClick = onArchive)
CategoryAction(PhosphorIcons.Regular.Trash, "Delete", onClick = onDelete)
}
Box(
Modifier
.fillMaxWidth()
.height(1.dp)
.background(colors.separator),
)
Column(
modifier = Modifier
.padding(top = 22.dp)
.graphicsLayer {
alpha = appear.value
translationY = (1f - appear.value) * 8.dp.toPx()
},
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
CategorySender(mail, 40.dp)
Column(Modifier.weight(1f)) {
BasicText(mail.from, style = Typography.base.copy(color = colors.label, fontWeight = FontWeight.SemiBold))
BasicText("To: Jamie Rivera", style = Typography.xs.copy(color = colors.labelSecondary))
}
BasicText(mail.time, style = Typography.xs.copy(color = colors.labelSecondary))
}
BasicText(
mail.subject,
modifier = Modifier.semantics { heading() },
style = Typography.xl.copy(color = colors.label, fontWeight = FontWeight.SemiBold),
)
BasicText(mail.body, style = Typography.base.copy(color = colors.label, lineHeight = 26.sp))
}
if (replying) {
Column(
modifier = Modifier.padding(top = 22.dp),
verticalArrangement = Arrangement.spacedBy(10.dp),
) {
Box(
Modifier
.fillMaxWidth()
.height(1.dp)
.background(colors.separator),
)
Textarea(
value = reply,
onValueChange = { reply = it },
modifier = Modifier
.padding(top = 8.dp)
.semantics { contentDescription = "Reply to ${mail.from}" },
placeholder = "Reply to ${mail.from}",
minLines = 4,
keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Sentences),
)
Row(horizontalArrangement = Arrangement.spacedBy(10.dp)) {
Button(
text = "Send",
onClick = {
onReply(reply.trim())
reply = ""
replying = false
},
size = ButtonSize.Sm,
enabled = reply.isNotBlank(),
)
Button(text = "Cancel", onClick = { replying = false }, size = ButtonSize.Sm, variant = ButtonVariant.Outline)
}
}
}
}
}
@Composable
private fun CategoryAction(
icon: ImageVector,
label: String,
tint: Color = EsuissTheme.colors.labelSecondary,
onClick: () -> Unit,
) {
Button(onClick = onClick, variant = ButtonVariant.Ghost, size = ButtonSize.Icon) {
Icon(icon, contentDescription = label, size = 18.dp, tint = tint)
}
}
```
A mail screen built on `SplitView`: the list column shows a `ToggleGroup` of four categories with unread dots, and rows with an `Avatar`, sender and preview; the detail column shows the selected message. On wide screens the list and reader sit side by side; on phones the reader opens as its own column. Swipe a row with `SwipeActions` to archive it, or swipe fully to delete. The reader has Reply, Star, Archive and Delete buttons, and Reply opens a `Textarea` to write a response.
## Installation
```bash title="Terminal"
npx @esuiss/uim@latest add inbox-categories
```
```bash title="Terminal"
npx @esuiss/uim@latest add inbox-categories --platform swift
```
```bash title="Terminal"
npx @esuiss/uim@latest add inbox-categories --platform kotlin
```
The CLI also adds what it builds on: [Avatar](/docs/components/avatar), [Button](/docs/components/button), [Icon](/docs/components/icon), [Screen](/docs/components/screen), [Split View](/docs/patterns/split-view), [Swipe Actions](/docs/interactions/swipe-actions), [Text](/docs/components/text), [Textarea](/docs/components/textarea), [Toggle Group](/docs/components/toggle-group).
### Manual
**Uniwind**
1. Install the dependencies:
```bash title="Terminal"
npx expo install cn phosphor-react-native react-native-reanimated react-native-svg react-native-worklets
```
2. Add the pieces it builds on: [Avatar](/docs/components/avatar), [Button](/docs/components/button), [Icon](/docs/components/icon), [Screen](/docs/components/screen), [Split View](/docs/patterns/split-view), [Swipe Actions](/docs/interactions/swipe-actions), [Text](/docs/components/text), [Textarea](/docs/components/textarea), [Toggle Group](/docs/components/toggle-group).
3. Copy the source into `components/blocks/inbox-categories.tsx`:
```tsx title="uniwind/components/blocks/inbox-categories.tsx"
import { cn } from "cn"
import {
ArchiveIcon,
ArrowBendUpLeftIcon,
BellIcon,
CreditCardIcon,
type Icon as PhosphorIcon,
StarIcon,
TagIcon,
TrashIcon,
UsersIcon,
} from "phosphor-react-native"
import * as React from "react"
import { useWindowDimensions, View } from "react-native"
import { FadeInDown, ReduceMotion } from "react-native-reanimated"
import {
SwipeAction,
SwipeActions,
SwipeActionsActions,
SwipeActionsContent,
} from "@/components/interactions/swipe-actions"
import {
SplitView,
type SplitViewColumn,
SplitViewDetail,
SplitViewItem,
SplitViewList,
} from "@/components/patterns/split-view"
import { AnimatedView } from "@/components/ui/animated-view"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
import { Screen } from "@/components/ui/screen"
import { Text } from "@/components/ui/text"
import { Textarea } from "@/components/ui/textarea"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
type Category = "Primary" | "Transactions" | "Updates" | "Promotions"
type Mail = {
id: number
from: string
subject: string
body: string
time: string
tint: string | null
category: Category
unread: boolean
starred: boolean
}
const INITIAL_MAIL: Mail[] = [
{
id: 0,
from: "suiss",
subject: "Your order has shipped",
body: "Order #W1048 is on its way and arrives tomorrow. A signature is required on delivery.",
time: "9:12 AM",
tint: null,
category: "Transactions",
unread: true,
starred: false,
},
{
id: 1,
from: "Morgan Lee",
subject: "Tomorrow's meeting",
body: "Does 10:00 tomorrow work? The Q4 budget and the campaign calendar are on the agenda. I'll share the deck tonight.",
time: "8:40 AM",
tint: "bg-orange dark:bg-orange",
category: "Primary",
unread: true,
starred: false,
},
{
id: 2,
from: "suiss Cloud",
subject: "Your storage is almost full",
body: "90% of your Cloud storage is used. Upgrade your plan to keep your backups running.",
time: "Yesterday",
tint: "bg-blue dark:bg-blue",
category: "Updates",
unread: true,
starred: false,
},
{
id: 3,
from: "Riley Chen",
subject: "Coast trip photos",
body: "I added the photos to the shared album. The ones from the boat tour came out great.",
time: "Yesterday",
tint: "bg-green dark:bg-green",
category: "Primary",
unread: false,
starred: true,
},
{
id: 4,
from: "suiss Store",
subject: "Just for you: a Trade In offer",
body: "Bring in your old phone and get up to $650 off a new one.",
time: "Monday",
tint: null,
category: "Promotions",
unread: false,
starred: false,
},
{
id: 5,
from: "App Store",
subject: "Your receipt",
body: "Your Studio Pro subscription renewed. Total: $4.99.",
time: "Monday",
tint: null,
category: "Transactions",
unread: false,
starred: false,
},
]
const CATEGORIES: { value: Category; icon: PhosphorIcon; tint: string }[] = [
{ value: "Primary", icon: UsersIcon, tint: "bg-accent" },
{ value: "Transactions", icon: CreditCardIcon, tint: "bg-green" },
{ value: "Updates", icon: BellIcon, tint: "bg-purple" },
{ value: "Promotions", icon: TagIcon, tint: "bg-pink" },
]
const ENTERING = FadeInDown.duration(800).reduceMotion(ReduceMotion.System)
function SenderAvatar({ mail, className }: { mail: Mail; className?: string }) {
return (
{mail.tint
? mail.from
.split(" ")
.map((part) => part[0])
.join("")
: "s"}
)
}
function Reader({
mail,
onReply,
onStar,
onArchive,
onDelete,
}: {
mail: Mail
onReply: (text: string) => void
onStar: () => void
onArchive: () => void
onDelete: () => void
}) {
const [replying, setReplying] = React.useState(false)
const [reply, setReply] = React.useState("")
const actions: {
label: string
icon: PhosphorIcon
onPress: () => void
active?: boolean
}[] = [
{
label: "Reply",
icon: ArrowBendUpLeftIcon,
onPress: () => setReplying(true),
},
{
label: mail.starred ? "Unstar" : "Star",
icon: StarIcon,
onPress: onStar,
active: mail.starred,
},
{ label: "Archive", icon: ArchiveIcon, onPress: onArchive },
{ label: "Delete", icon: TrashIcon, onPress: onDelete },
]
return (
{actions.map((action) => (
))}
{mail.from}
To: Jamie Rivera
{mail.time}
{mail.subject}
{mail.body}
{replying ? (
) : null}
)
}
function MailRow({
mail,
index,
active,
onPress,
onArchive,
onDelete,
}: {
mail: Mail
index: number
active: boolean
onPress: () => void
onArchive: () => void
onDelete: () => void
}) {
const muted = active ? "text-on-accent" : "text-label-secondary"
return (
{mail.unread ? (
) : null}
{mail.from}
{mail.starred ? (
) : null}
{mail.time}
{mail.subject}
{mail.body}
Archive
Delete
)
}
function InboxCategories({
onCategoryChange,
onReply,
onStarChange,
onArchive,
onDelete,
}: {
onCategoryChange?: (category: Category) => void
onReply?: (id: number, text: string) => void
onStarChange?: (id: number, starred: boolean) => void
onArchive?: (id: number) => void
onDelete?: (id: number) => void
}) {
const { width } = useWindowDimensions()
const wide = width >= 768
const [mail, setMail] = React.useState(INITIAL_MAIL)
const [category, setCategory] = React.useState("Primary")
const [selected, setSelected] = React.useState(1)
const [column, setColumn] = React.useState("list")
const list = mail.filter((item) => item.category === category)
const current = list.find((item) => item.id === selected)
const update = (id: number, patch: Partial) =>
setMail((items) =>
items.map((item) => (item.id === id ? { ...item, ...patch } : item))
)
const remove = (id: number) => {
const rest = mail.filter((item) => item.id !== id)
setMail(rest)
if (selected === id) {
setSelected(rest.find((item) => item.category === category)?.id ?? null)
setColumn("list")
}
}
return (
{wide ? (
Inbox
) : null}
{
const next = value[0] as Category | undefined
if (!next) return
setCategory(next)
setSelected(
mail.find((item) => item.category === next)?.id ?? null
)
onCategoryChange?.(next)
}}
accessibilityLabel="Category"
spacing={1.5}
className={wide ? "px-1.5" : undefined}
>
{CATEGORIES.map((item) => {
const unread = mail.some(
(entry) => entry.category === item.value && entry.unread
)
const pressed = category === item.value
return (
{pressed ? (
{item.value}
) : null}
{!pressed && unread ? (
) : null}
)
})}
{list.length > 0 ? (
list.map((item, index) => (
{
setSelected(item.id)
update(item.id, { unread: false })
}}
onArchive={() => {
onArchive?.(item.id)
remove(item.id)
}}
onDelete={() => {
onDelete?.(item.id)
remove(item.id)
}}
/>
))
) : (
{`No messages in ${category}.`}
)}
{current ? (
onReply?.(current.id, text)}
onStar={() => {
onStarChange?.(current.id, !current.starred)
update(current.id, { starred: !current.starred })
}}
onArchive={() => {
onArchive?.(current.id)
remove(current.id)
}}
onDelete={() => {
onDelete?.(current.id)
remove(current.id)
}}
/>
) : (
No Message Selected
)}
)
}
export { InboxCategories }
```
4. Update the import paths to match your project.
**NativeWind**
1. Install the dependencies:
```bash title="Terminal"
npx expo install cn phosphor-react-native react-native-reanimated react-native-svg react-native-worklets
```
2. Add the pieces it builds on: [Avatar](/docs/components/avatar), [Button](/docs/components/button), [Icon](/docs/components/icon), [Screen](/docs/components/screen), [Split View](/docs/patterns/split-view), [Swipe Actions](/docs/interactions/swipe-actions), [Text](/docs/components/text), [Textarea](/docs/components/textarea), [Toggle Group](/docs/components/toggle-group).
3. Copy the source into `components/blocks/inbox-categories.tsx`:
```tsx title="nativewind/components/blocks/inbox-categories.tsx"
import { cn } from "cn"
import {
ArchiveIcon,
ArrowBendUpLeftIcon,
BellIcon,
CreditCardIcon,
type Icon as PhosphorIcon,
StarIcon,
TagIcon,
TrashIcon,
UsersIcon,
} from "phosphor-react-native"
import * as React from "react"
import { useWindowDimensions, View } from "react-native"
import { FadeInDown, ReduceMotion } from "react-native-reanimated"
import {
SwipeAction,
SwipeActions,
SwipeActionsActions,
SwipeActionsContent,
} from "@/components/interactions/swipe-actions"
import {
SplitView,
type SplitViewColumn,
SplitViewDetail,
SplitViewItem,
SplitViewList,
} from "@/components/patterns/split-view"
import { AnimatedView } from "@/components/ui/animated-view"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
import { Screen } from "@/components/ui/screen"
import { Text } from "@/components/ui/text"
import { Textarea } from "@/components/ui/textarea"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
type Category = "Primary" | "Transactions" | "Updates" | "Promotions"
type Mail = {
id: number
from: string
subject: string
body: string
time: string
tint: string | null
category: Category
unread: boolean
starred: boolean
}
const INITIAL_MAIL: Mail[] = [
{
id: 0,
from: "suiss",
subject: "Your order has shipped",
body: "Order #W1048 is on its way and arrives tomorrow. A signature is required on delivery.",
time: "9:12 AM",
tint: null,
category: "Transactions",
unread: true,
starred: false,
},
{
id: 1,
from: "Morgan Lee",
subject: "Tomorrow's meeting",
body: "Does 10:00 tomorrow work? The Q4 budget and the campaign calendar are on the agenda. I'll share the deck tonight.",
time: "8:40 AM",
tint: "bg-orange dark:bg-orange",
category: "Primary",
unread: true,
starred: false,
},
{
id: 2,
from: "suiss Cloud",
subject: "Your storage is almost full",
body: "90% of your Cloud storage is used. Upgrade your plan to keep your backups running.",
time: "Yesterday",
tint: "bg-blue dark:bg-blue",
category: "Updates",
unread: true,
starred: false,
},
{
id: 3,
from: "Riley Chen",
subject: "Coast trip photos",
body: "I added the photos to the shared album. The ones from the boat tour came out great.",
time: "Yesterday",
tint: "bg-green dark:bg-green",
category: "Primary",
unread: false,
starred: true,
},
{
id: 4,
from: "suiss Store",
subject: "Just for you: a Trade In offer",
body: "Bring in your old phone and get up to $650 off a new one.",
time: "Monday",
tint: null,
category: "Promotions",
unread: false,
starred: false,
},
{
id: 5,
from: "App Store",
subject: "Your receipt",
body: "Your Studio Pro subscription renewed. Total: $4.99.",
time: "Monday",
tint: null,
category: "Transactions",
unread: false,
starred: false,
},
]
const CATEGORIES: { value: Category; icon: PhosphorIcon; tint: string }[] = [
{ value: "Primary", icon: UsersIcon, tint: "bg-accent" },
{ value: "Transactions", icon: CreditCardIcon, tint: "bg-green" },
{ value: "Updates", icon: BellIcon, tint: "bg-purple" },
{ value: "Promotions", icon: TagIcon, tint: "bg-pink" },
]
const ENTERING = FadeInDown.duration(800).reduceMotion(ReduceMotion.System)
function SenderAvatar({ mail, className }: { mail: Mail; className?: string }) {
return (
{mail.tint
? mail.from
.split(" ")
.map((part) => part[0])
.join("")
: "s"}
)
}
function Reader({
mail,
onReply,
onStar,
onArchive,
onDelete,
}: {
mail: Mail
onReply: (text: string) => void
onStar: () => void
onArchive: () => void
onDelete: () => void
}) {
const [replying, setReplying] = React.useState(false)
const [reply, setReply] = React.useState("")
const actions: {
label: string
icon: PhosphorIcon
onPress: () => void
active?: boolean
}[] = [
{
label: "Reply",
icon: ArrowBendUpLeftIcon,
onPress: () => setReplying(true),
},
{
label: mail.starred ? "Unstar" : "Star",
icon: StarIcon,
onPress: onStar,
active: mail.starred,
},
{ label: "Archive", icon: ArchiveIcon, onPress: onArchive },
{ label: "Delete", icon: TrashIcon, onPress: onDelete },
]
return (
{actions.map((action) => (
))}
{mail.from}
To: Jamie Rivera
{mail.time}
{mail.subject}
{mail.body}
{replying ? (
) : null}
)
}
function MailRow({
mail,
index,
active,
onPress,
onArchive,
onDelete,
}: {
mail: Mail
index: number
active: boolean
onPress: () => void
onArchive: () => void
onDelete: () => void
}) {
const muted = active ? "text-on-accent" : "text-label-secondary"
return (
{mail.unread ? (
) : null}
{mail.from}
{mail.starred ? (
) : null}
{mail.time}
{mail.subject}
{mail.body}
Archive
Delete
)
}
function InboxCategories({
onCategoryChange,
onReply,
onStarChange,
onArchive,
onDelete,
}: {
onCategoryChange?: (category: Category) => void
onReply?: (id: number, text: string) => void
onStarChange?: (id: number, starred: boolean) => void
onArchive?: (id: number) => void
onDelete?: (id: number) => void
}) {
const { width } = useWindowDimensions()
const wide = width >= 768
const [mail, setMail] = React.useState(INITIAL_MAIL)
const [category, setCategory] = React.useState("Primary")
const [selected, setSelected] = React.useState(1)
const [column, setColumn] = React.useState("list")
const list = mail.filter((item) => item.category === category)
const current = list.find((item) => item.id === selected)
const update = (id: number, patch: Partial) =>
setMail((items) =>
items.map((item) => (item.id === id ? { ...item, ...patch } : item))
)
const remove = (id: number) => {
const rest = mail.filter((item) => item.id !== id)
setMail(rest)
if (selected === id) {
setSelected(rest.find((item) => item.category === category)?.id ?? null)
setColumn("list")
}
}
return (
{wide ? (
Inbox
) : null}
{
const next = value[0] as Category | undefined
if (!next) return
setCategory(next)
setSelected(
mail.find((item) => item.category === next)?.id ?? null
)
onCategoryChange?.(next)
}}
accessibilityLabel="Category"
spacing={1.5}
className={wide ? "px-1.5" : undefined}
>
{CATEGORIES.map((item) => {
const unread = mail.some(
(entry) => entry.category === item.value && entry.unread
)
const pressed = category === item.value
return (
{pressed ? (
{item.value}
) : null}
{!pressed && unread ? (
) : null}
)
})}
{list.length > 0 ? (
list.map((item, index) => (
{
setSelected(item.id)
update(item.id, { unread: false })
}}
onArchive={() => {
onArchive?.(item.id)
remove(item.id)
}}
onDelete={() => {
onDelete?.(item.id)
remove(item.id)
}}
/>
))
) : (
{`No messages in ${category}.`}
)}
{current ? (
onReply?.(current.id, text)}
onStar={() => {
onStarChange?.(current.id, !current.starred)
update(current.id, { starred: !current.starred })
}}
onArchive={() => {
onArchive?.(current.id)
remove(current.id)
}}
onDelete={() => {
onDelete?.(current.id)
remove(current.id)
}}
/>
) : (
No Message Selected
)}
)
}
export { InboxCategories }
```
4. Update the import paths to match your project.
**StyleSheet**
1. Install the dependencies:
```bash title="Terminal"
npx expo install phosphor-react-native react-native-reanimated react-native-svg react-native-worklets
```
2. Add the pieces it builds on: [Avatar](/docs/components/avatar), [Button](/docs/components/button), [Icon](/docs/components/icon), [Screen](/docs/components/screen), [Split View](/docs/patterns/split-view), [Swipe Actions](/docs/interactions/swipe-actions), [Text](/docs/components/text), [Textarea](/docs/components/textarea), [Toggle Group](/docs/components/toggle-group).
3. Copy the source into `components/blocks/inbox-categories.tsx`:
```tsx title="stylesheet/components/blocks/inbox-categories.tsx"
import {
ArchiveIcon,
ArrowBendUpLeftIcon,
BellIcon,
CreditCardIcon,
type Icon as PhosphorIcon,
StarIcon,
TagIcon,
TrashIcon,
UsersIcon,
} from "phosphor-react-native"
import * as React from "react"
import {
StyleSheet,
useWindowDimensions,
View,
type ViewStyle,
} from "react-native"
import { FadeInDown, ReduceMotion } from "react-native-reanimated"
import {
SwipeAction,
SwipeActions,
SwipeActionsActions,
SwipeActionsContent,
} from "@/components/interactions/swipe-actions"
import {
SplitView,
type SplitViewColumn,
SplitViewDetail,
SplitViewItem,
SplitViewList,
} from "@/components/patterns/split-view"
import { AnimatedView } from "@/components/ui/animated-view"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
import { Screen } from "@/components/ui/screen"
import { Text } from "@/components/ui/text"
import { Textarea } from "@/components/ui/textarea"
import {
fontSize,
radius,
type ThemeColors,
useTheme,
} from "@/components/ui/theme"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
type Tint = keyof ThemeColors
type Category = "Primary" | "Transactions" | "Updates" | "Promotions"
type Mail = {
id: number
from: string
subject: string
body: string
time: string
tint: Tint | null
category: Category
unread: boolean
starred: boolean
}
const INITIAL_MAIL: Mail[] = [
{
id: 0,
from: "suiss",
subject: "Your order has shipped",
body: "Order #W1048 is on its way and arrives tomorrow. A signature is required on delivery.",
time: "9:12 AM",
tint: null,
category: "Transactions",
unread: true,
starred: false,
},
{
id: 1,
from: "Morgan Lee",
subject: "Tomorrow's meeting",
body: "Does 10:00 tomorrow work? The Q4 budget and the campaign calendar are on the agenda. I'll share the deck tonight.",
time: "8:40 AM",
tint: "orange",
category: "Primary",
unread: true,
starred: false,
},
{
id: 2,
from: "suiss Cloud",
subject: "Your storage is almost full",
body: "90% of your Cloud storage is used. Upgrade your plan to keep your backups running.",
time: "Yesterday",
tint: "blue",
category: "Updates",
unread: true,
starred: false,
},
{
id: 3,
from: "Riley Chen",
subject: "Coast trip photos",
body: "I added the photos to the shared album. The ones from the boat tour came out great.",
time: "Yesterday",
tint: "green",
category: "Primary",
unread: false,
starred: true,
},
{
id: 4,
from: "suiss Store",
subject: "Just for you: a Trade In offer",
body: "Bring in your old phone and get up to $650 off a new one.",
time: "Monday",
tint: null,
category: "Promotions",
unread: false,
starred: false,
},
{
id: 5,
from: "App Store",
subject: "Your receipt",
body: "Your Studio Pro subscription renewed. Total: $4.99.",
time: "Monday",
tint: null,
category: "Transactions",
unread: false,
starred: false,
},
]
const CATEGORIES: { value: Category; icon: PhosphorIcon; tint: Tint }[] = [
{ value: "Primary", icon: UsersIcon, tint: "accent" },
{ value: "Transactions", icon: CreditCardIcon, tint: "green" },
{ value: "Updates", icon: BellIcon, tint: "purple" },
{ value: "Promotions", icon: TagIcon, tint: "pink" },
]
const ENTERING = FadeInDown.duration(800).reduceMotion(ReduceMotion.System)
const styles = StyleSheet.create({
reader: { flex: 1 },
toolbar: {
height: 50,
flexDirection: "row",
alignItems: "center",
justifyContent: "flex-end",
gap: 2,
borderBottomWidth: 1,
},
message: { gap: 16, paddingTop: 22 },
sender: { flexDirection: "row", alignItems: "center", gap: 12 },
senderText: { flex: 1 },
semibold: { ...fontSize.base, fontWeight: "600" },
subject: { ...fontSize["2xl"], fontWeight: "600" },
reply: { marginTop: 22, gap: 10, borderTopWidth: 1, paddingTop: 18 },
textarea: { minHeight: 96 },
buttons: { flexDirection: "row", gap: 10 },
transparent: { backgroundColor: "transparent" },
row: { position: "relative", paddingVertical: 10, paddingStart: 24 },
dot: {
position: "absolute",
start: -14,
top: 6,
width: 8,
height: 8,
borderRadius: radius.full,
},
rowTop: { flexDirection: "row", alignItems: "center", gap: 6 },
from: { ...fontSize.sm, flex: 1, fontWeight: "600" },
wide: { margin: 16 },
listWide: { gap: 12, paddingHorizontal: 8, paddingTop: 16 },
list: { gap: 12, paddingHorizontal: 16, paddingBottom: 32 },
title: { ...fontSize["3xl"], paddingHorizontal: 6, fontWeight: "700" },
toggles: { paddingHorizontal: 6 },
toggle: { position: "relative", height: 34, gap: 6, paddingHorizontal: 11 },
toggleOn: { paddingHorizontal: 14 },
toggleText: { fontWeight: "600" },
badge: {
position: "absolute",
end: 0,
top: 0,
width: 12,
height: 12,
borderRadius: radius.full,
borderWidth: 2,
},
rows: { gap: 2 },
empty: { ...fontSize.sm, padding: 30, textAlign: "center" },
detail: { flexGrow: 1, paddingHorizontal: 16, paddingBottom: 32 },
none: {
flex: 1,
alignItems: "center",
justifyContent: "center",
paddingVertical: 80,
},
})
function SenderAvatar({ mail, style }: { mail: Mail; style?: ViewStyle }) {
const { colors } = useTheme()
return (
{mail.tint
? mail.from
.split(" ")
.map((part) => part[0])
.join("")
: "s"}
)
}
function Reader({
mail,
onReply,
onStar,
onArchive,
onDelete,
}: {
mail: Mail
onReply: (text: string) => void
onStar: () => void
onArchive: () => void
onDelete: () => void
}) {
const { colors } = useTheme()
const [replying, setReplying] = React.useState(false)
const [reply, setReply] = React.useState("")
const actions: {
label: string
icon: PhosphorIcon
onPress: () => void
active?: boolean
}[] = [
{
label: "Reply",
icon: ArrowBendUpLeftIcon,
onPress: () => setReplying(true),
},
{
label: mail.starred ? "Unstar" : "Star",
icon: StarIcon,
onPress: onStar,
active: mail.starred,
},
{ label: "Archive", icon: ArchiveIcon, onPress: onArchive },
{ label: "Delete", icon: TrashIcon, onPress: onDelete },
]
return (
{actions.map((action) => (
))}
{mail.from}
To: Jamie Rivera
{mail.time}
{mail.subject}
{mail.body}
{replying ? (
) : null}
)
}
function MailRow({
mail,
index,
active,
onPress,
onArchive,
onDelete,
}: {
mail: Mail
index: number
active: boolean
onPress: () => void
onArchive: () => void
onDelete: () => void
}) {
const { colors } = useTheme()
const muted = { color: active ? colors.onAccent : colors.labelSecondary }
return (
{mail.unread ? (
) : null}
{mail.from}
{mail.starred ? (
) : null}
{mail.time}
{mail.subject}
{mail.body}
Archive
Delete
)
}
function InboxCategories({
onCategoryChange,
onReply,
onStarChange,
onArchive,
onDelete,
}: {
onCategoryChange?: (category: Category) => void
onReply?: (id: number, text: string) => void
onStarChange?: (id: number, starred: boolean) => void
onArchive?: (id: number) => void
onDelete?: (id: number) => void
}) {
const { colors } = useTheme()
const { width } = useWindowDimensions()
const wide = width >= 768
const [mail, setMail] = React.useState(INITIAL_MAIL)
const [category, setCategory] = React.useState("Primary")
const [selected, setSelected] = React.useState(1)
const [column, setColumn] = React.useState("list")
const list = mail.filter((item) => item.category === category)
const current = list.find((item) => item.id === selected)
const update = (id: number, patch: Partial) =>
setMail((items) =>
items.map((item) => (item.id === id ? { ...item, ...patch } : item))
)
const remove = (id: number) => {
const rest = mail.filter((item) => item.id !== id)
setMail(rest)
if (selected === id) {
setSelected(rest.find((item) => item.category === category)?.id ?? null)
setColumn("list")
}
}
return (
{wide ? (
Inbox
) : null}
{
const next = value[0] as Category | undefined
if (!next) return
setCategory(next)
setSelected(
mail.find((item) => item.category === next)?.id ?? null
)
onCategoryChange?.(next)
}}
accessibilityLabel="Category"
spacing={1.5}
style={wide ? styles.toggles : undefined}
>
{CATEGORIES.map((item) => {
const unread = mail.some(
(entry) => entry.category === item.value && entry.unread
)
const pressed = category === item.value
return (
{pressed ? (
{item.value}
) : null}
{!pressed && unread ? (
) : null}
)
})}
{list.length > 0 ? (
list.map((item, index) => (
{
setSelected(item.id)
update(item.id, { unread: false })
}}
onArchive={() => {
onArchive?.(item.id)
remove(item.id)
}}
onDelete={() => {
onDelete?.(item.id)
remove(item.id)
}}
/>
))
) : (
{`No messages in ${category}.`}
)}
{current ? (
onReply?.(current.id, text)}
onStar={() => {
onStarChange?.(current.id, !current.starred)
update(current.id, { starred: !current.starred })
}}
onArchive={() => {
onArchive?.(current.id)
remove(current.id)
}}
onDelete={() => {
onDelete?.(current.id)
remove(current.id)
}}
/>
) : (
No Message Selected
)}
)
}
export { InboxCategories }
```
4. Update the import paths to match your project.
**SwiftUI**
1. Target iOS 17 or later.
2. Add the Swift package to your app:
```swift title="Package.swift"
.package(url: "https://github.com/phosphor-icons/swift", from: "2.1.0")
```
3. Copy the theme files every view uses:
```swift title="swift/Theme/Theme.swift"
import SwiftUI
import UIKit
struct RGBA: Sendable {
let red: CGFloat
let green: CGFloat
let blue: CGFloat
let alpha: CGFloat
init(_ hex: UInt32, _ alpha: CGFloat = 1) {
red = CGFloat((hex >> 16) & 0xFF) / 255
green = CGFloat((hex >> 8) & 0xFF) / 255
blue = CGFloat(hex & 0xFF) / 255
self.alpha = alpha
}
var uiColor: UIColor {
UIColor(red: red, green: green, blue: blue, alpha: alpha)
}
}
extension Color {
static func adaptive(light: RGBA, dark: RGBA) -> Color {
let lightColor = light.uiColor
let darkColor = dark.uiColor
return Color(uiColor: UIColor { traits in
traits.userInterfaceStyle == .dark ? darkColor : lightColor
})
}
}
public struct TextStyle: Sendable, Hashable {
public let size: CGFloat
public let lineHeight: CGFloat
public let letterSpacing: CGFloat
public init(size: CGFloat, lineHeight: CGFloat, letterSpacing: CGFloat) {
self.size = size
self.lineHeight = lineHeight
self.letterSpacing = letterSpacing
}
public func font(weight: Font.Weight = .regular) -> Font {
.system(size: size, weight: weight)
}
public var lineSpacing: CGFloat {
max(0, lineHeight - UIFont.systemFont(ofSize: size).lineHeight)
}
}
extension Hashable where Self == Font {
public static func textStyle(_ style: TextStyle, weight: Font.Weight = .regular) -> Font {
style.font(weight: weight)
}
}
private struct TextStyleModifier: ViewModifier {
let style: TextStyle
let weight: Font.Weight
func body(content: Content) -> some View {
content
.font(style.font(weight: weight))
.tracking(style.letterSpacing)
.lineSpacing(style.lineSpacing)
.padding(.vertical, style.lineSpacing / 2)
}
}
extension View {
public func textStyle(_ style: TextStyle, weight: Font.Weight = .regular) -> some View {
modifier(TextStyleModifier(style: style, weight: weight))
}
}
public struct Shadow: Sendable, Hashable {
public let color: Color
public let radius: CGFloat
public let x: CGFloat
public let y: CGFloat
public init(color: Color, radius: CGFloat, x: CGFloat = 0, y: CGFloat = 0) {
self.color = color
self.radius = radius
self.x = x
self.y = y
}
}
extension View {
public func shadow(_ shadow: Shadow) -> some View {
self.shadow(color: shadow.color, radius: shadow.radius, x: shadow.x, y: shadow.y)
}
}
```
```swift title="swift/Theme/Tokens.swift"
import SwiftUI
extension Color {
public static let surface = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))
public static let surfaceSecondary = Color.adaptive(light: .init(0xF5F5F7), dark: .init(0x161617))
public static let surfaceTertiary = Color.adaptive(light: .init(0xE8E8ED), dark: .init(0x2C2C2E))
public static let surfaceRaised = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
public static let label = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
public static let labelSecondary = Color.adaptive(light: .init(0x6E6E73), dark: .init(0xA1A1A6))
public static let labelTertiary = Color.adaptive(light: .init(0x86868B), dark: .init(0x86868B))
public static let labelQuaternary = Color.adaptive(light: .init(0xD2D2D7), dark: .init(0x424245))
public static let control = Color.adaptive(light: .init(0x000000, 0.04), dark: .init(0xFFFFFF, 0.1))
public static let controlPressed = Color.adaptive(light: .init(0x000000, 0.12), dark: .init(0xFFFFFF, 0.22))
public static let controlSelected = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
public static let controlDisabled = Color.adaptive(light: .init(0x000000, 0.03), dark: .init(0xFFFFFF, 0.05))
public static let onControlSelected = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))
public static let itemPressed = Color.adaptive(light: .init(0x000000, 0.08), dark: .init(0xFFFFFF, 0.12))
public static let itemSelected = Color.adaptive(light: .init(0x000000, 0.06), dark: .init(0xFFFFFF, 0.1))
public static let separator = Color.adaptive(light: .init(0xD2D2D7), dark: .init(0x424245))
public static let separatorStrong = Color.adaptive(light: .init(0x86868B), dark: .init(0x6E6E73))
public static let accent = Color.adaptive(light: .init(0x0071E3), dark: .init(0x0071E3))
public static let accentPressed = Color.adaptive(light: .init(0x005BB8), dark: .init(0x004D9E))
public static let accentSelected = Color.adaptive(light: .init(0x0071E3), dark: .init(0x0071E3))
public static let accentDisabled = Color.adaptive(light: .init(0x0071E3, 0.4), dark: .init(0x0071E3, 0.4))
public static let onAccent = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0xFFFFFF))
public static let accentSurface = Color.adaptive(light: .init(0x0071E3, 0.09), dark: .init(0x0071E3, 0.18))
public static let accentSurfacePressed = Color.adaptive(light: .init(0x0071E3, 0.18), dark: .init(0x0071E3, 0.3))
public static let link = Color.adaptive(light: .init(0x0066CC), dark: .init(0x2997FF))
public static let focus = Color.adaptive(light: .init(0x0071E3), dark: .init(0x0071E3))
public static let scrim = Color.adaptive(light: .init(0x000000, 0.48), dark: .init(0x000000, 0.48))
public static let media = Color.adaptive(light: .init(0x000000), dark: .init(0x000000))
public static let onMedia = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0xFFFFFF))
public static let danger = Color.adaptive(light: .init(0xD0000A), dark: .init(0xFF5447))
public static let dangerSurface = Color.adaptive(light: .init(0xD70015, 0.08), dark: .init(0xFF453A, 0.2))
public static let dangerSurfacePressed = Color.adaptive(light: .init(0xD70015, 0.16), dark: .init(0xFF453A, 0.36))
public static let success = Color.adaptive(light: .init(0x008009), dark: .init(0x30D158))
public static let successSurface = Color.adaptive(light: .init(0xEFFAF1), dark: .init(0x30D158, 0.16))
public static let warning = Color.adaptive(light: .init(0xB64400), dark: .init(0xFF9F0A))
public static let warningSurface = Color.adaptive(light: .init(0xFFF5EA), dark: .init(0xFF9F0A, 0.16))
}
public enum Radius {
public static let xs: CGFloat = 3
public static let sm: CGFloat = 5
public static let md: CGFloat = 8
public static let lg: CGFloat = 10
public static let xl: CGFloat = 12
public static let xl2: CGFloat = 18
public static let xl3: CGFloat = 28
public static let full: CGFloat = 9999
}
extension TextStyle {
public static let xs3 = TextStyle(size: 11, lineHeight: 13, letterSpacing: 0.066)
public static let xs2 = TextStyle(size: 12, lineHeight: 16, letterSpacing: 0)
public static let xs = TextStyle(size: 13, lineHeight: 18, letterSpacing: -0.078)
public static let sm = TextStyle(size: 15, lineHeight: 20, letterSpacing: -0.24)
public static let md = TextStyle(size: 16, lineHeight: 21, letterSpacing: -0.32)
public static let base = TextStyle(size: 17, lineHeight: 22, letterSpacing: -0.442)
public static let lg = TextStyle(size: 20, lineHeight: 25, letterSpacing: -0.46)
public static let xl = TextStyle(size: 22, lineHeight: 28, letterSpacing: -0.264)
public static let xl2 = TextStyle(size: 28, lineHeight: 34, letterSpacing: 0.392)
public static let xl3 = TextStyle(size: 34, lineHeight: 41, letterSpacing: 0.408)
public static let allCases: [TextStyle] = [.xs3, .xs2, .xs, .sm, .md, .base, .lg, .xl, .xl2, .xl3]
}
extension Shadow {
public static let md = Shadow(color: .black.opacity(0.08), radius: 6, x: 2, y: 4)
public static let lg = Shadow(color: .black.opacity(0.12), radius: 12, y: 4)
}
```
4. Copy the source and every file it uses:
```swift title="swift/Blocks/InboxCategories.swift"
import PhosphorSwift
import SwiftUI
public struct InboxCategories: View {
struct Mail: Identifiable, Equatable {
let id: Int
let from: String
let subject: String
let body: String
let time: String
let tint: Color?
let category: String
var unread: Bool
var starred: Bool
}
struct Category {
let value: String
let icon: Image
let tint: Color
}
static var initialMail: [Mail] {
[
Mail(id: 0, from: "suiss", subject: "Your order has shipped", body: "Order #W1048 is on its way and arrives tomorrow. A signature is required on delivery.", time: "9:12 AM", tint: nil, category: "Transactions", unread: true, starred: false),
Mail(id: 1, from: "Morgan Lee", subject: "Tomorrow's meeting", body: "Does 10:00 tomorrow work? The Q4 budget and the campaign calendar are on the agenda. I'll share the deck tonight.", time: "8:40 AM", tint: .orange, category: "Primary", unread: true, starred: false),
Mail(id: 2, from: "suiss Cloud", subject: "Your storage is almost full", body: "90% of your Cloud storage is used. Upgrade your plan to keep your backups running.", time: "Yesterday", tint: .blue, category: "Updates", unread: true, starred: false),
Mail(id: 3, from: "Riley Chen", subject: "Coast trip photos", body: "I added the photos to the shared album. The ones from the boat tour came out great.", time: "Yesterday", tint: .green, category: "Primary", unread: false, starred: true),
Mail(id: 4, from: "suiss Store", subject: "Just for you: a Trade In offer", body: "Bring in your old phone and get up to $650 off a new one.", time: "Monday", tint: nil, category: "Promotions", unread: false, starred: false),
Mail(id: 5, from: "App Store", subject: "Your receipt", body: "Your Studio Pro subscription renewed. Total: $4.99.", time: "Monday", tint: nil, category: "Transactions", unread: false, starred: false),
]
}
static var categories: [Category] {
[
Category(value: "Primary", icon: Ph.users.bold, tint: .accent),
Category(value: "Transactions", icon: Ph.creditCard.bold, tint: .green),
Category(value: "Updates", icon: Ph.bell.bold, tint: .purple),
Category(value: "Promotions", icon: Ph.tag.bold, tint: .pink),
]
}
private var onCategoryChange: ((String) -> Void)?
private var onArchive: ((Int) -> Void)?
private var onDelete: ((Int) -> Void)?
private var onReply: ((Int, String) -> Void)?
private var onStarChange: ((Int, Bool) -> Void)?
private let replying: Bool
private let swiped: Int?
@State private var mail: [Mail]
@State private var category: String
@State private var selected: Int?
@State private var column: SplitViewColumn
@Environment(\.accessibilityReduceMotion) private var reduceMotion
public init(
onCategoryChange: ((_ category: String) -> Void)? = nil,
onReply: ((_ id: Int, _ text: String) -> Void)? = nil,
onStarChange: ((_ id: Int, _ starred: Bool) -> Void)? = nil,
onArchive: ((_ id: Int) -> Void)? = nil,
onDelete: ((_ id: Int) -> Void)? = nil
) {
self.init(category: "Primary")
self.onCategoryChange = onCategoryChange
self.onArchive = onArchive
self.onDelete = onDelete
self.onReply = onReply
self.onStarChange = onStarChange
}
init(
category: String = "Primary",
selected: Int? = 1,
column: SplitViewColumn = .list,
replying: Bool = false,
swiped: Int? = nil
) {
_mail = State(initialValue: Self.initialMail)
_category = State(initialValue: category)
_selected = State(initialValue: selected)
_column = State(initialValue: column)
self.replying = replying
self.swiped = swiped
}
private var animation: Animation? {
reduceMotion ? nil : .timingCurve(0.32, 0.72, 0, 1, duration: 0.4)
}
public var body: some View {
let list = mail.filter { $0.category == category }
let current = list.first { $0.id == selected }
Screen {
SplitView(column: $column) {
SplitViewList("Inbox") {
VStack(alignment: .leading, spacing: 12) {
InboxCategoriesHeading()
categoryBar
VStack(spacing: 0) {
if list.isEmpty {
Text("No messages in \(category).")
.scaledFont(.sm)
.foregroundStyle(Color.labelSecondary)
.frame(maxWidth: .infinity)
.padding(30)
}
ForEach(list) { item in
SwipeActions(revealed: swiped == item.id ? -144 : 0) {
SplitViewItem(isActive: item.id == selected, action: {
selected = item.id
update(item.id) { $0.unread = false }
}) {
InboxCategoriesRow(mail: item)
}
} leading: {
EmptyView()
} trailing: {
SwipeAction("Archive", icon: Ph.archive.fill, variant: .archive) {
onArchive?(item.id)
remove(item.id)
}
SwipeAction("Delete", icon: Ph.trash.fill, variant: .destructive, fullSwipe: true) {
onDelete?(item.id)
remove(item.id)
}
}
.transition(.opacity.combined(with: .offset(y: 6)))
}
}
.id(category)
.transition(.opacity.combined(with: .offset(y: 6)))
}
}
SplitViewDetail {
if let current {
InboxCategoriesReader(
mail: current,
replying: replying,
onStar: {
onStarChange?(current.id, !current.starred)
update(current.id) { $0.starred.toggle() }
},
onArchive: {
onArchive?(current.id)
remove(current.id)
},
onDelete: {
onDelete?(current.id)
remove(current.id)
},
onReply: { text in onReply?(current.id, text) }
)
.id(current.id)
} else {
Text("No Message Selected")
.scaledFont(.base)
.foregroundStyle(Color.labelSecondary)
.frame(maxWidth: .infinity)
.padding(.top, 120)
}
}
}
}
}
private var categoryBar: some View {
HStack(spacing: 6) {
ForEach(Self.categories, id: \.value) { item in
let pressed = category == item.value
let unread = mail.contains { $0.category == item.value && $0.unread }
Button {
select(item.value)
} label: {
HStack(spacing: 6) {
item.icon.frame(width: 16, height: 16)
if pressed {
Text(LocalizedStringKey(item.value))
.scaledFont(.sm, weight: .semibold)
.lineLimit(1)
.fixedSize()
.transition(.opacity)
}
}
.foregroundStyle(pressed ? Color.onAccent : .labelSecondary)
.padding(.horizontal, pressed ? 14 : 11)
.frame(height: 34)
.background(pressed ? item.tint : Color.control, in: RoundedRectangle(cornerRadius: Radius.lg, style: .continuous))
.overlay(alignment: .topTrailing) {
if !pressed && unread {
Circle()
.fill(Color.accent)
.frame(width: 8, height: 8)
.padding(2)
.background(Color.surface, in: Circle())
.offset(x: 1, y: -1)
.accessibilityHidden(true)
}
}
.contentShape(Rectangle())
}
.buttonStyle(.plain)
.accessibilityLabel(Text(LocalizedStringKey(item.value)))
.accessibilityValue(unread && !pressed ? Text("Unread") : Text(verbatim: ""))
.accessibilityAddTraits(pressed ? .isSelected : [])
}
}
.padding(.top, 2)
.hapticFeedback(.selection, trigger: category)
.accessibilityElement(children: .contain)
.accessibilityLabel(Text("Category"))
}
private func select(_ value: String) {
guard value != category else { return }
onCategoryChange?(value)
withAnimation(reduceMotion ? nil : .spring(response: 0.35, dampingFraction: 0.75)) {
category = value
selected = mail.first { $0.category == value }?.id
}
}
private func update(_ id: Int, _ change: (inout Mail) -> Void) {
guard let index = mail.firstIndex(where: { $0.id == id }) else { return }
change(&mail[index])
}
private func remove(_ id: Int) {
withAnimation(animation) {
mail.removeAll { $0.id == id }
selected = mail.first { $0.category == category }?.id
}
}
}
private struct InboxCategoriesHeading: View {
@Environment(\.splitView) private var splitView
var body: some View {
if splitView?.wide ?? false {
Text("Inbox")
.scaledFont(.xl3, weight: .bold)
.foregroundStyle(Color.label)
.padding(.horizontal, 6)
.accessibilityHidden(true)
}
}
}
private struct InboxCategoriesAvatar: View {
let mail: InboxCategories.Mail
let size: CGFloat
var body: some View {
let initials = mail.from.split(separator: " ").compactMap(\.first).map(String.init).joined()
Text(verbatim: mail.tint == nil ? "s" : initials)
.font(.system(size: size * 0.4, weight: .semibold))
.foregroundStyle(mail.tint == nil ? Color.surface : .onAccent)
.frame(width: size, height: size)
.background(mail.tint ?? .label, in: Circle())
.accessibilityHidden(true)
}
}
private struct InboxCategoriesRow: View {
let mail: InboxCategories.Mail
var body: some View {
HStack(alignment: .top, spacing: 8) {
Circle()
.fill(mail.unread ? Color.accent : .clear)
.frame(width: 8, height: 8)
.padding(.top, 6)
.accessibilityHidden(true)
VStack(alignment: .leading, spacing: 2) {
HStack(spacing: 6) {
Text(verbatim: mail.from)
.scaledFont(.sm, weight: .semibold)
.lineLimit(1)
.frame(maxWidth: .infinity, alignment: .leading)
if mail.starred {
Ph.star.fill
.frame(width: 12, height: 12)
.foregroundStyle(Color.orange)
.accessibilityLabel(Text("Starred"))
}
Text(LocalizedStringKey(mail.time))
.scaledFont(.xs)
.foregroundStyle(Color.labelSecondary)
}
Text(verbatim: mail.subject)
.scaledFont(.sm)
.lineLimit(1)
Text(verbatim: mail.body)
.scaledFont(.xs)
.foregroundStyle(Color.labelSecondary)
.lineLimit(2)
.multilineTextAlignment(.leading)
}
}
.accessibilityElement(children: .combine)
.accessibilityValue(mail.unread ? Text("Unread") : Text(verbatim: ""))
}
}
private struct InboxCategoriesReader: View {
let mail: InboxCategories.Mail
let onStar: () -> Void
let onArchive: () -> Void
let onDelete: () -> Void
let onReply: (String) -> Void
@State private var replying: Bool
@State private var reply = ""
@FocusState private var focused: Bool
@Environment(\.accessibilityReduceMotion) private var reduceMotion
init(
mail: InboxCategories.Mail,
replying: Bool,
onStar: @escaping () -> Void,
onArchive: @escaping () -> Void,
onDelete: @escaping () -> Void,
onReply: @escaping (String) -> Void
) {
self.mail = mail
self.onStar = onStar
self.onArchive = onArchive
self.onDelete = onDelete
self.onReply = onReply
_replying = State(initialValue: replying)
}
var body: some View {
VStack(alignment: .leading, spacing: 0) {
HStack(spacing: 2) {
Spacer(minLength: 0)
action("Reply", icon: Ph.arrowBendUpLeft.regular) {
replying = true
focused = true
}
action(mail.starred ? "Unstar" : "Star", icon: mail.starred ? Ph.star.fill : Ph.star.regular, active: mail.starred, perform: onStar)
action("Archive", icon: Ph.archive.regular, perform: onArchive)
action("Delete", icon: Ph.trash.regular, perform: onDelete)
}
.frame(height: 50)
.overlay(alignment: .bottom) {
Color.separator.frame(height: 1).padding(.horizontal, -16)
}
VStack(alignment: .leading, spacing: 16) {
HStack(spacing: 12) {
InboxCategoriesAvatar(mail: mail, size: 40)
VStack(alignment: .leading, spacing: 0) {
Text(verbatim: mail.from)
.scaledFont(.base, weight: .semibold)
Text("To: Jamie Rivera")
.scaledFont(.xs)
.foregroundStyle(Color.labelSecondary)
}
.frame(maxWidth: .infinity, alignment: .leading)
Text(LocalizedStringKey(mail.time))
.scaledFont(.xs)
.foregroundStyle(Color.labelSecondary)
}
.accessibilityElement(children: .combine)
Text(verbatim: mail.subject)
.scaledTextStyle(.xl2, weight: .semibold)
.fixedSize(horizontal: false, vertical: true)
.accessibilityAddTraits(.isHeader)
Text(verbatim: mail.body)
.scaledTextStyle(.base)
.lineSpacing(4)
.fixedSize(horizontal: false, vertical: true)
}
.padding(.top, 22)
if replying {
VStack(alignment: .leading, spacing: 10) {
TextField("Reply to \(mail.from)", text: $reply, axis: .vertical)
.textFieldStyle(.textarea)
.lineLimit(4...8)
.focused($focused)
.accessibilityLabel(Text("Reply to \(mail.from)"))
HStack(spacing: 10) {
Button("Send") {
onReply(reply)
reply = ""
replying = false
}
.buttonStyle(.variant(.default, size: .sm))
.disabled(reply.isEmpty)
Button("Cancel") {
replying = false
}
.buttonStyle(.variant(.outline, size: .sm))
}
}
.padding(.top, 18)
.overlay(alignment: .top) {
Color.separator.frame(height: 1)
}
.padding(.top, 22)
.transition(.opacity.combined(with: .offset(y: 8)))
}
}
.foregroundStyle(Color.label)
.animation(reduceMotion ? nil : .timingCurve(0.32, 0.72, 0, 1, duration: 0.5), value: replying)
}
private func action(_ title: LocalizedStringKey, icon: Image, active: Bool = false, perform: @escaping () -> Void) -> some View {
Button(action: perform) {
icon
.frame(width: 20, height: 20)
.foregroundStyle(active ? Color.orange : .labelSecondary)
}
.buttonStyle(.variant(.ghost, size: .icon))
.accessibilityLabel(Text(title))
.accessibilityAddTraits(active ? .isSelected : [])
}
}
```
```swift title="swift/Components/Button.swift"
import SwiftUI
public struct VariantButtonStyle: ButtonStyle {
public enum Variant: CaseIterable, Sendable {
case `default`, outline, secondary, tinted, ghost, plain, destructive, link
}
public enum Size: CaseIterable, Sendable {
case `default`, xs, sm, lg, xl, icon, iconXs, iconSm, iconLg, iconXl
var height: CGFloat {
switch self {
case .xs, .iconXs: 24
case .sm, .iconSm: 32
case .default, .icon: 36
case .lg, .iconLg: 44
case .xl, .iconXl: 56
}
}
var horizontalPadding: CGFloat {
switch self {
case .xs: 11
case .sm: 12
case .default: 16
case .lg: 22
case .xl: 31
case .icon, .iconXs, .iconSm, .iconLg, .iconXl: 0
}
}
var spacing: CGFloat {
switch self {
case .xs, .sm, .iconXs, .iconSm: 4
case .xl, .iconXl: 8
default: 6
}
}
var textStyle: TextStyle {
switch self {
case .xs, .iconXs: .xs2
case .lg, .xl: .base
default: .sm
}
}
public var iconSize: CGFloat {
switch self {
case .xs, .iconXs: 12
default: 16
}
}
var blockRadius: CGFloat {
switch self {
case .xs, .iconXs: Radius.sm
case .lg, .iconLg: Radius.lg
case .xl, .iconXl: Radius.xl
default: Radius.md
}
}
var isIcon: Bool {
switch self {
case .icon, .iconXs, .iconSm, .iconLg, .iconXl: true
default: false
}
}
}
let variant: Variant
let size: Size
let block: Bool
var metrics: ButtonMetrics?
public init(_ variant: Variant = .default, size: Size = .default, block: Bool = false) {
self.variant = variant
self.size = size
self.block = block
}
init(_ variant: Variant, size: Size, metrics: ButtonMetrics) {
self.variant = variant
self.size = size
self.block = false
self.metrics = metrics
}
public func makeBody(configuration: Configuration) -> some View {
StyledButton(configuration: configuration, variant: variant, size: size, block: block, metrics: metrics)
}
}
struct ButtonMetrics: Sendable {
var horizontalPadding: CGFloat
var spacing: CGFloat
var iconSize: CGFloat
var textStyle: TextStyle
}
private struct StyledButton: View {
let configuration: ButtonStyleConfiguration
let variant: VariantButtonStyle.Variant
let size: VariantButtonStyle.Size
let block: Bool
let metrics: ButtonMetrics?
@Environment(\.colorScheme) private var colorScheme
@Environment(\.isEnabled) private var isEnabled
@Environment(\.buttonGroup) private var group
var body: some View {
let joined = group != nil && variant != .ghost && variant != .plain
let rounded = RoundedRectangle(
cornerRadius: block ? size.blockRadius : Radius.full,
style: .continuous
)
let shape = joined ? AnyShape(Rectangle()) : AnyShape(rounded)
configuration.label
.labelStyle(ButtonLabelStyle(spacing: metrics?.spacing ?? size.spacing, iconSize: metrics?.iconSize ?? size.iconSize))
.font((metrics?.textStyle ?? size.textStyle).font())
.tracking((metrics?.textStyle ?? size.textStyle).letterSpacing)
.underline(variant == .link && pressed && isEnabled)
.lineLimit(1)
.foregroundStyle(foreground)
.padding(.horizontal, metrics?.horizontalPadding ?? size.horizontalPadding)
.frame(width: size.isIcon && !block ? size.height : nil, height: size.height)
.frame(maxWidth: block || group == .vertical ? .infinity : nil)
.background(background, in: shape)
.overlay {
if variant == .outline && !joined {
rounded.strokeBorder(Color.separator)
}
}
.contentShape(shape)
.anchorPreference(key: ButtonGroupFramesKey.self, value: .bounds) { anchor in
joined ? [ButtonGroupFrame(bounds: anchor, outlined: variant == .outline)] : []
}
}
private var isDark: Bool { colorScheme == .dark }
private var pressed: Bool { configuration.isPressed }
private var foreground: Color {
switch variant {
case .default:
.onAccent
case .outline, .secondary, .ghost:
isEnabled ? .label : .labelQuaternary
case .tinted, .plain:
isEnabled ? .link : .link.opacity(0.4)
case .destructive:
isEnabled ? .danger : .danger.opacity(0.4)
case .link:
isEnabled ? .link : .labelQuaternary
}
}
private var background: Color {
switch variant {
case .default:
!isEnabled ? .accentDisabled : pressed ? .accentPressed : .accent
case .outline:
isEnabled && pressed ? .itemPressed : isDark ? .clear : .surface
case .secondary:
!isEnabled ? .controlDisabled : pressed ? .controlPressed : .control
case .tinted:
isEnabled && pressed ? .accentSurfacePressed : .accentSurface
case .ghost:
isEnabled && pressed ? .itemPressed : .clear
case .plain:
isEnabled && pressed ? .itemPressed : .clear
case .destructive:
isEnabled && pressed ? .dangerSurfacePressed : .dangerSurface
case .link:
.clear
}
}
}
struct ButtonLabelStyle: LabelStyle {
let spacing: CGFloat
let iconSize: CGFloat
func makeBody(configuration: Configuration) -> some View {
HStack(spacing: spacing) {
configuration.icon
.frame(width: iconSize, height: iconSize)
configuration.title
}
}
}
extension ButtonStyle where Self == VariantButtonStyle {
public static func variant(
_ variant: VariantButtonStyle.Variant = .default,
size: VariantButtonStyle.Size = .default,
block: Bool = false
) -> VariantButtonStyle {
VariantButtonStyle(variant, size: size, block: block)
}
}
```
```swift title="swift/Components/ButtonGroup.swift"
import SwiftUI
extension EnvironmentValues {
@Entry var buttonGroup: Axis? = nil
@Entry var buttonGroupSize: CGSize = .zero
}
enum ButtonGroupSpace: Hashable {
case group
}
struct ButtonGroupFrame {
let bounds: Anchor
let outlined: Bool
}
struct ButtonGroupFramesKey: PreferenceKey {
static var defaultValue: [ButtonGroupFrame] { [] }
static func reduce(value: inout [ButtonGroupFrame], nextValue: () -> [ButtonGroupFrame]) {
value.append(contentsOf: nextValue())
}
}
struct ButtonGroupNestedKey: PreferenceKey {
static var defaultValue: Bool { false }
static func reduce(value: inout Bool, nextValue: () -> Bool) {
value = value || nextValue()
}
}
public struct ButtonGroup: View {
let orientation: Axis
let content: Content
@State private var nested = false
@State private var size: CGSize = .zero
public init(orientation: Axis = .horizontal, @ViewBuilder content: () -> Content) {
self.orientation = orientation
self.content = content()
}
public var body: some View {
let shape = orientation == .horizontal
? AnyShape(Capsule())
: AnyShape(RoundedRectangle(cornerRadius: Radius.xl2, style: .continuous))
stack
.coordinateSpace(.named(ButtonGroupSpace.group))
.onGeometryChange(for: CGSize.self) { $0.size } action: { size = $0 }
.environment(\.buttonGroup, nested ? nil : orientation)
.environment(\.buttonGroupSize, size)
.onPreferenceChange(ButtonGroupNestedKey.self) { nested = $0 }
.modifier(ButtonGroupClip(shape: nested ? nil : shape))
.overlayPreferenceValue(ButtonGroupFramesKey.self) { frames in
if !nested {
GeometryReader { proxy in
outline(frames.map { (proxy[$0.bounds], $0.outlined) }, shape: shape)
}
}
}
.transformPreference(ButtonGroupFramesKey.self) { $0 = [] }
.transformPreference(ButtonGroupNestedKey.self) { $0 = true }
.fixedSize(horizontal: orientation == .vertical, vertical: orientation == .horizontal)
.accessibilityElement(children: .contain)
}
@ViewBuilder private var stack: some View {
switch orientation {
case .horizontal:
HStack(spacing: nested ? 8 : 0) { content }
case .vertical:
VStack(spacing: nested ? 8 : 0) { content }
}
}
@ViewBuilder private func outline(_ frames: [(CGRect, Bool)], shape: AnyShape) -> some View {
if frames.contains(where: \.1) {
ZStack(alignment: .topLeading) {
shape
.stroke(Color.separator, lineWidth: 1)
.padding(0.5)
.mask {
Path { path in
for (rect, outlined) in frames where outlined {
path.addRect(rect)
}
}
}
ForEach(Array(frames.dropLast().enumerated()), id: \.offset) { _, frame in
if frame.1 {
divider(frame.0)
}
}
}
.clipShape(shape)
.allowsHitTesting(false)
}
}
private func divider(_ rect: CGRect) -> some View {
let horizontal = orientation == .horizontal
return Rectangle()
.fill(Color.separator)
.frame(width: horizontal ? 1 : rect.width, height: horizontal ? rect.height : 1)
.position(
x: horizontal ? rect.maxX - 0.5 : rect.midX,
y: horizontal ? rect.midY : rect.maxY - 0.5
)
}
}
struct ButtonGroupItem: View {
let radius: CGFloat
let content: (UnevenRoundedRectangle) -> Content
@State private var frame: CGRect = .zero
@Environment(\.buttonGroup) private var group
@Environment(\.buttonGroupSize) private var groupSize
init(radius: CGFloat, @ViewBuilder content: @escaping (UnevenRoundedRectangle) -> Content) {
self.radius = radius
self.content = content
}
var body: some View {
if let group {
content(shape(group))
.onGeometryChange(for: CGRect.self) { $0.frame(in: .named(ButtonGroupSpace.group)) } action: { frame = $0 }
} else {
content(UnevenRoundedRectangle(cornerRadii: RectangleCornerRadii(
topLeading: radius,
bottomLeading: radius,
bottomTrailing: radius,
topTrailing: radius
), style: .continuous))
}
}
private func shape(_ group: Axis) -> UnevenRoundedRectangle {
let horizontal = group == .horizontal
let first = horizontal ? frame.minX <= 0.5 : frame.minY <= 0.5
let last = horizontal
? frame.maxX >= groupSize.width - 0.5
: frame.maxY >= groupSize.height - 0.5
let round = horizontal ? frame.height / 2 : Radius.xl2
let start: CGFloat = first ? round : 0
let end: CGFloat = last ? round : 0
let radii = horizontal
? RectangleCornerRadii(topLeading: start, bottomLeading: start, bottomTrailing: end, topTrailing: end)
: RectangleCornerRadii(topLeading: start, bottomLeading: end, bottomTrailing: end, topTrailing: start)
return UnevenRoundedRectangle(cornerRadii: radii, style: .continuous)
}
}
private struct ButtonGroupClip: ViewModifier {
let shape: AnyShape?
func body(content: Content) -> some View {
if let shape {
content.clipShape(shape)
} else {
content
}
}
}
public struct ButtonGroupText: View {
let content: Content
@Environment(\.buttonGroup) private var group
public init(@ViewBuilder content: () -> Content) {
self.content = content()
}
public var body: some View {
let shape = group == nil ? AnyShape(Capsule()) : AnyShape(Rectangle())
HStack(spacing: 8) {
content
}
.labelStyle(ButtonLabelStyle(spacing: 8, iconSize: 16))
.scaledFont(.sm)
.lineLimit(1)
.foregroundStyle(Color.label)
.padding(.horizontal, 10)
.frame(minHeight: 36)
.frame(maxWidth: group == .vertical ? .infinity : nil, maxHeight: group == .horizontal ? .infinity : nil)
.background(Color.control, in: shape)
.anchorPreference(key: ButtonGroupFramesKey.self, value: .bounds) { anchor in
group == nil ? [] : [ButtonGroupFrame(bounds: anchor, outlined: false)]
}
}
}
extension ButtonGroupText where Content == Text {
public init(_ title: LocalizedStringKey) {
self.init { Text(title) }
}
public init(verbatim title: String) {
self.init { Text(verbatim: title) }
}
}
public struct ButtonGroupSeparator: View {
let orientation: Axis
public init(_ orientation: Axis = .vertical) {
self.orientation = orientation
}
public var body: some View {
let vertical = orientation == .vertical
Rectangle()
.fill(Color.label.opacity(0.2))
.frame(width: vertical ? 1 : nil, height: vertical ? nil : 1)
.padding(vertical ? .vertical : .horizontal, 9)
.frame(maxWidth: vertical ? nil : .infinity, maxHeight: vertical ? .infinity : nil)
.padding(vertical ? .trailing : .bottom, -1)
.zIndex(1)
.accessibilityHidden(true)
}
}
```
```swift title="swift/Components/Checkbox.swift"
import PhosphorSwift
import SwiftUI
extension Shadow {
static let control = Shadow(color: .black.opacity(0.08), radius: 0.5, y: 0.5)
static let thumb = Shadow(color: .black.opacity(0.12), radius: 1.5, y: 1)
}
struct SelectionIndicator: View {
let checked: Bool
let pressed: Bool
let cornerRadius: CGFloat
let mark: Mark
@Environment(\.isEnabled) private var isEnabled
@Environment(\.isInvalid) private var invalid
@Environment(\.colorScheme) private var colorScheme
init(checked: Bool, pressed: Bool, cornerRadius: CGFloat, @ViewBuilder mark: () -> Mark) {
self.checked = checked
self.pressed = pressed
self.cornerRadius = cornerRadius
self.mark = mark()
}
var body: some View {
let shape = RoundedRectangle(cornerRadius: cornerRadius, style: .continuous)
ZStack {
shape.fill(fill)
shape.strokeBorder(border, lineWidth: 1)
if checked {
mark
}
}
.frame(width: 16, height: 16)
.shadow(raised ? .control : Shadow(color: .clear, radius: 0))
}
private var isDark: Bool { colorScheme == .dark }
private var raised: Bool { !checked && isEnabled && !isDark }
private var fill: Color {
if checked {
return !isEnabled ? .accentDisabled : pressed ? .accentPressed : .accent
}
if !isEnabled { return .controlDisabled }
if isDark { return pressed ? .labelTertiary.opacity(0.6) : .labelQuaternary }
return pressed ? .control : .surface
}
private var border: Color {
if checked {
return !isEnabled ? .clear : pressed ? .accentPressed : .accent
}
if !isEnabled { return isDark ? .clear : .label.opacity(0.1) }
if invalid { return .danger }
return isDark ? .clear : .label.opacity(0.25)
}
}
struct PressReader: ButtonStyle {
let content: (Bool) -> Content
init(@ViewBuilder content: @escaping (Bool) -> Content) {
self.content = content
}
func makeBody(configuration: Configuration) -> some View {
content(configuration.isPressed)
}
}
public struct CheckboxStyle: ToggleStyle {
public init() {}
public func makeBody(configuration: Configuration) -> some View {
HapticButton(style: PressReader { pressed in
HStack(spacing: 12) {
SelectionIndicator(
checked: configuration.isOn || configuration.isMixed,
pressed: pressed,
cornerRadius: 4
) {
(configuration.isMixed ? Ph.minus.regular : Ph.check.regular)
.frame(width: 14, height: 14)
.foregroundStyle(Color.onAccent)
}
configuration.label
}
.contentShape(Rectangle().inset(by: -8))
}) {
configuration.isOn.toggle()
return true
}
.accessibilityElement(children: .combine)
.accessibilityRemoveTraits(.isButton)
.accessibilityAddTraits(.isToggle)
.accessibilityValue(
configuration.isMixed
? Text("Mixed")
: configuration.isOn ? Text("Checked") : Text("Unchecked")
)
}
}
extension ToggleStyle where Self == CheckboxStyle {
public static var checkbox: CheckboxStyle { CheckboxStyle() }
}
```
```swift title="swift/Components/DropdownMenu.swift"
import PhosphorSwift
import SwiftUI
enum MenuPresentation: Sendable {
case system, popup
}
extension EnvironmentValues {
@Entry var menuPresentation: MenuPresentation = .system
@Entry var menuRadio = MenuRadioContext()
}
struct MenuRadioContext: @unchecked Sendable {
var selected: AnyHashable?
var select: @MainActor @Sendable (AnyHashable) -> Void = { _ in }
}
public struct DropdownMenu: View {
let side: Edge
let align: PopupAlignment
let sideOffset: CGFloat
let alignOffset: CGFloat
let external: Binding?
let content: () -> Content
let label: Label
@State private var local = false
public init(
isPresented: Binding? = nil,
side: Edge = .bottom,
align: PopupAlignment = .start,
sideOffset: CGFloat = 4,
alignOffset: CGFloat = 0,
@ViewBuilder content: @escaping () -> Content,
@ViewBuilder label: () -> Label
) {
self.external = isPresented
self.side = side
self.align = align
self.sideOffset = sideOffset
self.alignOffset = alignOffset
self.content = content
self.label = label()
}
public var body: some View {
let binding = external ?? $local
Button {
binding.wrappedValue = true
} label: {
label
}
.accessibilityHint(Text("Opens a menu"))
.anchoredPopup(
isPresented: binding,
side: side,
align: align,
sideOffset: sideOffset,
alignOffset: alignOffset,
minWidth: 192
) {
MenuPanel(content: content)
}
}
}
extension DropdownMenu where Label == Text {
public init(
_ title: LocalizedStringKey,
isPresented: Binding? = nil,
side: Edge = .bottom,
align: PopupAlignment = .start,
@ViewBuilder content: @escaping () -> Content
) {
self.init(isPresented: isPresented, side: side, align: align, content: content) { Text(title) }
}
}
struct MenuPanel: View {
@ViewBuilder let content: () -> Content
var body: some View {
let stack = VStack(alignment: .leading, spacing: 0) {
content()
}
.padding(6)
ViewThatFits(in: .vertical) {
stack
ScrollView { stack }
}
.font(TextStyle.base.font())
.tracking(TextStyle.base.letterSpacing)
.foregroundStyle(Color.label)
.environment(\.menuPresentation, .popup)
.popupSurface(radius: Radius.xl)
.accessibilityElement(children: .contain)
}
}
struct MenuRowStyle: ButtonStyle {
var destructive = false
var inset = false
var trailing: CGFloat = 12
var selected = false
@Environment(\.isEnabled) private var isEnabled
func makeBody(configuration: Configuration) -> some View {
configuration.label
.labelStyle(ButtonLabelStyle(spacing: 10, iconSize: 16))
.lineLimit(1)
.foregroundStyle(!isEnabled ? Color.labelQuaternary : destructive ? .danger : .label)
.padding(.leading, inset ? 38 : 12)
.padding(.trailing, trailing)
.padding(.vertical, 8)
.frame(maxWidth: .infinity, alignment: .leading)
.background(background(pressed: configuration.isPressed), in: RoundedRectangle(cornerRadius: Radius.md, style: .continuous))
.contentShape(Rectangle())
}
private func background(pressed: Bool) -> Color {
if pressed && isEnabled {
return destructive ? .dangerSurfacePressed : .itemPressed
}
return selected ? .itemSelected : .clear
}
}
private struct MenuCheckmark: View {
let visible: Bool
var body: some View {
Ph.check.regular
.frame(width: 16, height: 16)
.opacity(visible ? 1 : 0)
.padding(.trailing, 8)
.accessibilityHidden(true)
}
}
public struct DropdownMenuItem: View {
public enum Variant: CaseIterable, Sendable {
case `default`, destructive
}
let variant: Variant
let inset: Bool
let action: () -> Void
let label: Label
@Environment(\.menuPresentation) private var presentation
@Environment(\.overlayDismiss) private var dismiss
public init(
variant: Variant = .default,
inset: Bool = false,
action: @escaping () -> Void,
@ViewBuilder label: () -> Label
) {
self.variant = variant
self.inset = inset
self.action = action
self.label = label()
}
public var body: some View {
if presentation == .system {
Button(role: variant == .destructive ? .destructive : nil, action: action) {
label
}
} else {
Button {
action()
dismiss?()
} label: {
HStack(spacing: 10) {
label
}
}
.buttonStyle(MenuRowStyle(destructive: variant == .destructive, inset: inset))
}
}
}
extension DropdownMenuItem where Label == Text {
public init(
_ title: LocalizedStringKey,
variant: Variant = .default,
inset: Bool = false,
action: @escaping () -> Void
) {
self.init(variant: variant, inset: inset, action: action) { Text(title) }
}
}
extension DropdownMenuItem where Label == SwiftUI.Label {
public init(
_ title: LocalizedStringKey,
icon: Image,
variant: Variant = .default,
action: @escaping () -> Void
) {
self.init(variant: variant, action: action) {
SwiftUI.Label { Text(title) } icon: { icon }
}
}
}
public struct DropdownMenuCheckboxItem: View {
let isOn: Binding
let inset: Bool
let label: Label
@Environment(\.menuPresentation) private var presentation
public init(isOn: Binding, inset: Bool = false, @ViewBuilder label: () -> Label) {
self.isOn = isOn
self.inset = inset
self.label = label()
}
public var body: some View {
if presentation == .system {
Toggle(isOn: isOn) { label }
} else {
Button {
isOn.wrappedValue.toggle()
} label: {
label
}
.buttonStyle(MenuRowStyle(inset: inset, trailing: 32))
.overlay(alignment: .trailing) { MenuCheckmark(visible: isOn.wrappedValue) }
.accessibilityAddTraits(isOn.wrappedValue ? [.isToggle, .isSelected] : .isToggle)
}
}
}
extension DropdownMenuCheckboxItem where Label == Text {
public init(_ title: LocalizedStringKey, isOn: Binding, inset: Bool = false) {
self.init(isOn: isOn, inset: inset) { Text(title) }
}
}
public struct DropdownMenuRadioGroup: View {
let selection: Binding
let content: Content
public init(selection: Binding, @ViewBuilder content: () -> Content) {
self.selection = Binding(
get: { AnyHashable(selection.wrappedValue) },
set: { value in
if let value = value.base as? Value { selection.wrappedValue = value }
}
)
self.content = content()
}
public var body: some View {
let binding = selection
content
.environment(
\.menuRadio,
MenuRadioContext(selected: binding.wrappedValue, select: { binding.wrappedValue = $0 })
)
}
}
public struct DropdownMenuRadioItem: View {
let value: AnyHashable
let inset: Bool
let label: Label
@Environment(\.menuPresentation) private var presentation
@Environment(\.menuRadio) private var radio
public init(value: Value, inset: Bool = false, @ViewBuilder label: () -> Label) {
self.value = AnyHashable(value)
self.inset = inset
self.label = label()
}
public var body: some View {
let selected = radio.selected == value
if presentation == .system {
let radio = radio
let value = value
Toggle(isOn: Binding(get: { selected }, set: { if $0 { radio.select(value) } })) { label }
} else {
Button {
radio.select(value)
} label: {
label
}
.buttonStyle(MenuRowStyle(inset: inset, trailing: 32))
.overlay(alignment: .trailing) { MenuCheckmark(visible: selected) }
.accessibilityAddTraits(selected ? .isSelected : [])
}
}
}
extension DropdownMenuRadioItem where Label == Text {
public init(_ title: LocalizedStringKey, value: Value, inset: Bool = false) {
self.init(value: value, inset: inset) { Text(title) }
}
}
public struct DropdownMenuLabel: View {
let title: LocalizedStringKey
let inset: Bool
@Environment(\.menuPresentation) private var presentation
public init(_ title: LocalizedStringKey, inset: Bool = false) {
self.title = title
self.inset = inset
}
public var body: some View {
if presentation == .system {
Text(title)
} else {
Text(title)
.font(TextStyle.xs.font(weight: .semibold))
.tracking(TextStyle.xs.letterSpacing)
.foregroundStyle(Color.labelSecondary)
.padding(.leading, inset ? 38 : 12)
.padding(.trailing, 12)
.padding(.vertical, 10)
.frame(maxWidth: .infinity, alignment: .leading)
.accessibilityAddTraits(.isHeader)
}
}
}
public struct DropdownMenuGroup: View {
let content: Content
@Environment(\.menuPresentation) private var presentation
public init(@ViewBuilder content: () -> Content) {
self.content = content()
}
public var body: some View {
if presentation == .system {
Section { content }
} else {
VStack(alignment: .leading, spacing: 0) { content }
}
}
}
public struct DropdownMenuSeparator: View {
@Environment(\.menuPresentation) private var presentation
public init() {}
public var body: some View {
if presentation == .system {
Divider()
} else {
Rectangle()
.fill(Color.separator.opacity(0.5))
.frame(height: 1)
.padding(.vertical, 6)
.padding(.horizontal, -6)
.accessibilityHidden(true)
}
}
}
public struct DropdownMenuSub: View {
let inset: Bool
let content: Content
let label: Label
@State private var open = false
@Environment(\.menuPresentation) private var presentation
@Environment(\.accessibilityReduceMotion) private var reduceMotion
public init(inset: Bool = false, @ViewBuilder content: () -> Content, @ViewBuilder label: () -> Label) {
self.inset = inset
self.content = content()
self.label = label()
}
public var body: some View {
if presentation == .system {
Menu { content } label: { label }
} else {
VStack(alignment: .leading, spacing: 0) {
Button {
withAnimation(reduceMotion ? nil : .easeInOut(duration: 0.2)) { open.toggle() }
} label: {
HStack(spacing: 8) {
label
Spacer(minLength: 16)
Ph.caretRight.regular
.frame(width: 16, height: 16)
.rotationEffect(.degrees(open ? 90 : 0))
}
}
.buttonStyle(MenuRowStyle(inset: inset, selected: open))
.accessibilityValue(Text(open ? "Expanded" : "Collapsed"))
if open {
VStack(alignment: .leading, spacing: 0) { content }
.padding(.leading, 12)
.transition(.opacity)
}
}
}
}
}
extension DropdownMenuSub where Label == Text {
public init(_ title: LocalizedStringKey, inset: Bool = false, @ViewBuilder content: () -> Content) {
self.init(inset: inset, content: content) { Text(title) }
}
}
extension DropdownMenuSub where Label == SwiftUI.Label {
public init(_ title: LocalizedStringKey, icon: Image, @ViewBuilder content: () -> Content) {
self.init(content: content) {
SwiftUI.Label { Text(title) } icon: { icon }
}
}
}
```
```swift title="swift/Components/Field.swift"
import SwiftUI
extension EnvironmentValues {
@Entry public var isInvalid = false
@Entry var fieldInset = false
@Entry var fieldGroupInset = false
@Entry var fieldSetInset = false
}
extension View {
public func invalid(_ isInvalid: Bool = true) -> some View {
environment(\.isInvalid, isInvalid)
}
}
public enum FieldOrientation: CaseIterable, Sendable {
case vertical, horizontal
}
public struct Field: View {
let orientation: FieldOrientation
let invalid: Bool?
let content: Content
@Environment(\.fieldGroupInset) private var inset
@Environment(\.isInvalid) private var inheritedInvalid
public init(
orientation: FieldOrientation = .vertical,
invalid: Bool? = nil,
@ViewBuilder content: () -> Content
) {
self.orientation = orientation
self.invalid = invalid
self.content = content()
}
public var body: some View {
Group {
switch orientation {
case .vertical:
VStack(alignment: .leading, spacing: 12) { content }
case .horizontal:
HStack(alignment: .center, spacing: 12) { content }
}
}
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.horizontal, inset ? 16 : 0)
.padding(.vertical, inset ? 6 : 0)
.frame(minHeight: inset ? 44 : nil)
.overlay(alignment: .top) {
if inset {
Color.separator
.frame(height: 1)
.padding(.leading, 16)
.offset(y: -1)
}
}
.environment(\.fieldInset, inset)
.environment(\.fieldGroupInset, false)
.environment(\.isInvalid, invalid ?? inheritedInvalid)
}
}
public struct FieldContent: View {
let content: Content
public init(@ViewBuilder content: () -> Content) {
self.content = content()
}
public var body: some View {
VStack(alignment: .leading, spacing: 4) {
content
}
.frame(maxWidth: .infinity, alignment: .leading)
}
}
public struct FieldTitle: View {
let text: Text
@Environment(\.isEnabled) private var isEnabled
public init(_ title: LocalizedStringKey) {
text = Text(title)
}
public init(_ title: S) {
text = Text(title)
}
public var body: some View {
text
.scaledTextStyle(.base, weight: .semibold)
.foregroundStyle(isEnabled ? Color.label : .labelQuaternary)
}
}
public struct FieldDescription: View {
let text: Text
@Environment(\.fieldSetInset) private var inset
public init(_ description: LocalizedStringKey) {
text = Text(description)
}
public init(_ description: S) {
text = Text(description)
}
public var body: some View {
text
.scaledTextStyle(inset ? .xs : .sm)
.foregroundStyle(Color.labelSecondary)
.multilineTextAlignment(.leading)
.fixedSize(horizontal: false, vertical: true)
.padding(.leading, inset ? 16 : 0)
}
}
public struct FieldError: View {
let messages: [String]
let text: Text?
public init(_ message: LocalizedStringKey) {
messages = []
text = Text(message)
}
public init(errors: [String?]) {
var seen = Set()
messages = errors.compactMap { $0 }.filter { !$0.isEmpty && seen.insert($0).inserted }
text = nil
}
public var body: some View {
if let content {
content
.scaledTextStyle(.sm)
.foregroundStyle(Color.danger)
.multilineTextAlignment(.leading)
.fixedSize(horizontal: false, vertical: true)
}
}
private var content: Text? {
if let text { return text }
switch messages.count {
case 0: return nil
case 1: return Text(verbatim: messages[0])
default: return Text(verbatim: messages.map { "\u{2022} \($0)" }.joined(separator: "\n"))
}
}
}
public enum FieldGroupVariant: CaseIterable, Sendable {
case `default`, inset
}
public struct FieldGroup: View {
let variant: FieldGroupVariant
let content: Content
public init(_ variant: FieldGroupVariant = .default, @ViewBuilder content: () -> Content) {
self.variant = variant
self.content = content()
}
public var body: some View {
styled
.environment(\.fieldGroupInset, variant == .inset)
.environment(\.fieldSetInset, false)
.transformPreference(FieldSetInsetKey.self) { $0 = variant == .inset }
}
@ViewBuilder private var styled: some View {
let stack = VStack(alignment: .leading, spacing: variant == .inset ? 0 : 28) {
content
}
.frame(maxWidth: .infinity, alignment: .leading)
if variant == .inset {
let shape = RoundedRectangle(cornerRadius: Radius.xl2, style: .continuous)
stack
.background(Color.surfaceSecondary, in: shape)
.clipShape(shape)
} else {
stack
}
}
}
struct FieldSetInsetKey: PreferenceKey {
static let defaultValue = false
static func reduce(value: inout Bool, nextValue: () -> Bool) {
value = value || nextValue()
}
}
public struct FieldSet: View {
let content: Content
@State private var inset = false
public init(@ViewBuilder content: () -> Content) {
self.content = content()
}
public var body: some View {
VStack(alignment: .leading, spacing: inset ? 8 : 24) {
content
}
.frame(maxWidth: .infinity, alignment: .leading)
.environment(\.fieldSetInset, inset)
.onPreferenceChange(FieldSetInsetKey.self) { inset = $0 }
.transformPreference(FieldSetInsetKey.self) { $0 = false }
.accessibilityElement(children: .contain)
}
}
public struct FieldLegend: View {
public enum Variant: CaseIterable, Sendable {
case legend, label
}
let text: Text
let variant: Variant
@Environment(\.fieldSetInset) private var inset
@Environment(\.isEnabled) private var isEnabled
public init(_ title: LocalizedStringKey, variant: Variant = .legend) {
text = Text(title)
self.variant = variant
}
public init(_ title: S, variant: Variant = .legend) {
text = Text(title)
self.variant = variant
}
public var body: some View {
Group {
if inset {
text
.textCase(.uppercase)
.scaledTextStyle(.xs)
.foregroundStyle(isEnabled ? Color.labelSecondary : .labelQuaternary)
.padding(.leading, 16)
} else {
text
.scaledTextStyle(.base, weight: .semibold)
.foregroundStyle(isEnabled ? Color.label : .labelQuaternary)
.padding(.bottom, 12)
}
}
.accessibilityAddTraits(variant == .legend ? .isHeader : [])
}
}
public struct FieldSeparator: View {
let content: Content
public init(@ViewBuilder content: () -> Content) {
self.content = content()
}
public var body: some View {
ZStack {
Separator()
content
.scaledTextStyle(.sm)
.foregroundStyle(Color.labelSecondary)
.padding(.horizontal, 8)
.background(Color.surface)
}
.frame(minHeight: 20)
.padding(.vertical, -8)
}
}
extension FieldSeparator where Content == EmptyView {
public init() {
self.init { EmptyView() }
}
}
extension FieldSeparator where Content == Text {
public init(_ title: LocalizedStringKey) {
self.init { Text(title) }
}
}
```
```swift title="swift/Components/Haptics.swift"
import SwiftUI
extension EnvironmentValues {
@Entry public var hapticsEnabled = true
}
extension View {
public func haptics(_ enabled: Bool) -> some View {
environment(\.hapticsEnabled, enabled)
}
func hapticFeedback(_ feedback: SensoryFeedback, trigger: Trigger) -> some View {
modifier(HapticFeedbackModifier(feedback: feedback, trigger: trigger) { _, _ in true })
}
func hapticFeedback(
_ feedback: SensoryFeedback,
trigger: Trigger,
condition: @escaping (Trigger, Trigger) -> Bool
) -> some View {
modifier(HapticFeedbackModifier(feedback: feedback, trigger: trigger, condition: condition))
}
}
private struct HapticFeedbackModifier: ViewModifier {
let feedback: SensoryFeedback
let trigger: Trigger
let condition: (Trigger, Trigger) -> Bool
@Environment(\.hapticsEnabled) private var enabled
func body(content: Content) -> some View {
let enabled = enabled
let condition = condition
content.sensoryFeedback(feedback, trigger: trigger) { old, new in
enabled && condition(old, new)
}
}
}
enum HapticMoments {
static func step(_ value: Double, bounds: ClosedRange, step: Double?) -> Int? {
guard let step, step > 0 else { return nil }
return Int(((value - bounds.lowerBound) / step).rounded())
}
static func lifted(_ old: Value?, _ new: Value?) -> Bool {
new != nil && old != new
}
static func crossed(_ old: Value?, _ new: Value?) -> Bool {
old == nil && new != nil
}
static func moved(_ old: Int?, _ new: Int?) -> Bool {
guard let old, let new else { return false }
return old != new
}
}
struct HapticButton: View {
let feedback: SensoryFeedback
let action: () -> Bool
let style: Style
@State private var count = 0
init(_ feedback: SensoryFeedback = .selection, style: Style, action: @escaping () -> Bool) {
self.feedback = feedback
self.style = style
self.action = action
}
var body: some View {
Button {
if action() { count += 1 }
} label: {
EmptyView()
}
.buttonStyle(style)
.hapticFeedback(feedback, trigger: count)
}
}
```
```swift title="swift/Components/Input.swift"
import SwiftUI
public struct InputStyle: TextFieldStyle {
public enum Size: CaseIterable, Sendable {
case `default`, md, sm
var height: CGFloat {
switch self {
case .default: 44
case .md: 36
case .sm: 32
}
}
var horizontalPadding: CGFloat {
self == .sm ? 10 : 12
}
var radius: CGFloat {
self == .sm ? Radius.md : Radius.lg
}
var textStyle: TextStyle {
self == .default ? .base : .sm
}
}
let size: Size
public init(size: Size = .default) {
self.size = size
}
public func _body(configuration: TextField) -> some View {
configuration.modifier(InputField(
radius: size.radius,
horizontalPadding: size.horizontalPadding,
verticalPadding: 4,
minHeight: size.height,
textStyle: size.textStyle,
alignment: .leading
))
}
}
extension TextFieldStyle where Self == InputStyle {
public static func input(size: InputStyle.Size = .default) -> InputStyle {
InputStyle(size: size)
}
public static var input: InputStyle { InputStyle() }
}
struct InputField: ViewModifier {
let radius: CGFloat
let horizontalPadding: CGFloat
let verticalPadding: CGFloat
let minHeight: CGFloat
let textStyle: TextStyle
let alignment: Alignment
@FocusState private var focused: Bool
@Environment(\.isEnabled) private var isEnabled
@Environment(\.isInvalid) private var invalid
@Environment(\.colorScheme) private var colorScheme
nonisolated init(
radius: CGFloat,
horizontalPadding: CGFloat,
verticalPadding: CGFloat,
minHeight: CGFloat,
textStyle: TextStyle,
alignment: Alignment
) {
self.radius = radius
self.horizontalPadding = horizontalPadding
self.verticalPadding = verticalPadding
self.minHeight = minHeight
self.textStyle = textStyle
self.alignment = alignment
}
func body(content: Content) -> some View {
ButtonGroupItem(radius: radius) { shape in
content
.focused($focused)
.scaledFont(textStyle)
.foregroundStyle(isEnabled ? Color.label : .labelQuaternary)
.tint(Color.accent)
.padding(.horizontal, horizontalPadding)
.padding(.vertical, verticalPadding)
.frame(maxWidth: .infinity, minHeight: minHeight, alignment: alignment)
.background(background, in: shape)
.overlay {
shape.strokeBorder(border, lineWidth: 1)
}
.contentShape(shape)
.onTapGesture { focused = true }
}
}
private var background: Color {
if !isEnabled { return .controlDisabled }
if invalid { return .danger.opacity(colorScheme == .dark ? 0.1 : 0.05) }
return .control
}
private var border: Color {
if invalid { return .danger }
return focused ? .focus : .clear
}
}
```
```swift title="swift/Components/KeyboardScrollView.swift"
import SwiftUI
import UIKit
public struct KeyboardScrollView: View {
let showsIndicators: Bool
let content: Content
public init(showsIndicators: Bool = true, @ViewBuilder content: () -> Content) {
self.showsIndicators = showsIndicators
self.content = content()
}
public var body: some View {
ScrollView(.vertical, showsIndicators: showsIndicators) {
content
.frame(maxWidth: .infinity, alignment: .topLeading)
.background {
Color.clear
.contentShape(Rectangle())
.onTapGesture { KeyboardScrollView.dismissKeyboard() }
}
}
.scrollDismissesKeyboard(.interactively)
}
@MainActor
static func dismissKeyboard() {
UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
}
}
```
```swift title="swift/Components/Overlay.swift"
import PhosphorSwift
import Observation
import SwiftUI
public enum PopupAlignment: Sendable, CaseIterable {
case start, center, end
}
struct OverlayDismiss: Sendable {
let action: @MainActor @Sendable () -> Void
@MainActor func callAsFunction() {
action()
}
}
extension EnvironmentValues {
@Entry var overlayDismiss: OverlayDismiss? = nil
}
private var instantTransaction: Transaction {
var transaction = Transaction()
transaction.disablesAnimations = true
return transaction
}
struct CoverPresenter: ViewModifier {
@Binding var isPresented: Bool
var enter: Animation = .easeOut(duration: 0.15)
var exit: Animation = .easeIn(duration: 0.1)
@ViewBuilder let cover: (Bool) -> Cover
@State private var presented = false
@State private var visible = false
func body(content: Content) -> some View {
let binding = $isPresented
content
.fullScreenCover(isPresented: coverBinding) {
cover(visible)
.environment(\.overlayDismiss, OverlayDismiss { binding.wrappedValue = false })
.presentationBackground(.clear)
.onAppear {
withAnimation(enter) { visible = true }
}
}
.onChange(of: isPresented, initial: true) { _, value in
if value {
withTransaction(instantTransaction) { presented = true }
} else if presented {
withAnimation(exit) {
visible = false
} completion: {
withTransaction(instantTransaction) { presented = false }
}
}
}
}
private var coverBinding: Binding {
Binding(
get: { presented },
set: { value in
presented = value
if !value {
visible = false
isPresented = false
}
}
)
}
}
struct PopupLayout: Layout {
var anchor: CGRect
var side: Edge
var align: PopupAlignment
var sideOffset: CGFloat
var alignOffset: CGFloat
var matchWidth: Bool
var minWidth: CGFloat
var maxHeight: CGFloat
var margin: CGFloat = 8
func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
proposal.replacingUnspecifiedDimensions()
}
func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
guard let view = subviews.first else { return }
let anchor = anchor.offsetBy(dx: bounds.minX, dy: bounds.minY)
let maxWidth = max(0, bounds.width - margin * 2)
var width: CGFloat
if matchWidth {
width = max(anchor.width, minWidth)
} else {
width = max(view.sizeThatFits(ProposedViewSize(width: nil, height: nil)).width, minWidth)
}
width = min(width, maxWidth)
let natural = view.sizeThatFits(ProposedViewSize(width: width, height: nil))
let vertical = side == .top || side == .bottom
let before = vertical
? anchor.minY - sideOffset - bounds.minY - margin
: anchor.minX - sideOffset - bounds.minX - margin
let after = vertical
? bounds.maxY - margin - anchor.maxY - sideOffset
: bounds.maxX - margin - anchor.maxX - sideOffset
let extent = vertical ? natural.height : natural.width
var resolved = side
switch side {
case .bottom where extent > after && before > after: resolved = .top
case .top where extent > before && after > before: resolved = .bottom
case .trailing where extent > after && before > after: resolved = .leading
case .leading where extent > before && after > before: resolved = .trailing
default: break
}
var height = natural.height
let space: CGFloat
switch resolved {
case .top, .leading: space = before
case .bottom, .trailing: space = after
}
if vertical {
height = min(height, maxHeight, max(space, 0))
} else {
height = min(height, maxHeight, bounds.height - margin * 2)
width = min(width, max(space, 0))
}
var x: CGFloat
var y: CGFloat
if vertical {
switch align {
case .start: x = anchor.minX + alignOffset
case .center: x = anchor.midX - width / 2 + alignOffset
case .end: x = anchor.maxX - width - alignOffset
}
y = resolved == .bottom ? anchor.maxY + sideOffset : anchor.minY - sideOffset - height
} else {
switch align {
case .start: y = anchor.minY + alignOffset
case .center: y = anchor.midY - height / 2 + alignOffset
case .end: y = anchor.maxY - height - alignOffset
}
x = resolved == .trailing ? anchor.maxX + sideOffset : anchor.minX - sideOffset - width
}
x = min(max(x, bounds.minX + margin), bounds.maxX - margin - width)
y = min(max(y, bounds.minY + margin), bounds.maxY - margin - height)
view.place(
at: CGPoint(x: x, y: y),
anchor: .topLeading,
proposal: ProposedViewSize(width: width, height: height)
)
}
}
struct PopupPresenter: ViewModifier {
@Binding var isPresented: Bool
var side: Edge = .bottom
var align: PopupAlignment = .start
var sideOffset: CGFloat = 4
var alignOffset: CGFloat = 0
var matchWidth = false
var minWidth: CGFloat = 0
var maxHeight: CGFloat = .infinity
@ViewBuilder let popup: () -> Popup
@State private var anchor = PopupAnchor()
func body(content: Content) -> some View {
content
.onGeometryChange(for: CGRect.self) { proxy in
proxy.frame(in: .global)
} action: { frame in
anchor.frame = frame
}
.modifier(
CoverPresenter(isPresented: $isPresented) { visible in
PopupCanvas(
anchor: anchor,
side: side,
align: align,
sideOffset: sideOffset,
alignOffset: alignOffset,
matchWidth: matchWidth,
minWidth: minWidth,
maxHeight: maxHeight,
visible: visible,
popup: popup
)
}
)
}
}
@Observable
final class PopupAnchor {
var frame: CGRect = .zero
}
struct PopupCanvas: View {
let anchor: PopupAnchor
let side: Edge
let align: PopupAlignment
let sideOffset: CGFloat
let alignOffset: CGFloat
let matchWidth: Bool
let minWidth: CGFloat
let maxHeight: CGFloat
let visible: Bool
@ViewBuilder let popup: () -> Popup
@Environment(\.overlayDismiss) private var dismiss
@Environment(\.accessibilityReduceMotion) private var reduceMotion
var body: some View {
GeometryReader { proxy in
let origin = proxy.frame(in: .global).origin
PopupLayout(
anchor: anchor.frame.offsetBy(dx: -origin.x, dy: -origin.y),
side: side,
align: align,
sideOffset: sideOffset,
alignOffset: alignOffset,
matchWidth: matchWidth,
minWidth: minWidth,
maxHeight: maxHeight
) {
popup()
.accessibilityAddTraits(.isModal)
.scaleEffect(visible || reduceMotion ? 1 : 0.96, anchor: scaleAnchor)
.opacity(visible ? 1 : 0)
}
}
.background {
Color.clear
.contentShape(Rectangle())
.ignoresSafeArea()
.onTapGesture { dismiss?() }
.accessibilityHidden(true)
}
.accessibilityAction(.escape) { dismiss?() }
}
private var scaleAnchor: UnitPoint {
switch side {
case .top: .bottom
case .bottom: .top
case .leading: .trailing
case .trailing: .leading
}
}
}
extension View {
func anchoredPopup(
isPresented: Binding,
side: Edge = .bottom,
align: PopupAlignment = .start,
sideOffset: CGFloat = 4,
alignOffset: CGFloat = 0,
matchWidth: Bool = false,
minWidth: CGFloat = 0,
maxHeight: CGFloat = .infinity,
@ViewBuilder popup: @escaping () -> Popup
) -> some View {
modifier(
PopupPresenter(
isPresented: isPresented,
side: side,
align: align,
sideOffset: sideOffset,
alignOffset: alignOffset,
matchWidth: matchWidth,
minWidth: minWidth,
maxHeight: maxHeight,
popup: popup
)
)
}
func popupSurface(radius: CGFloat = Radius.xl, shadow: Shadow = .lg) -> some View {
modifier(PopupSurface(radius: radius, shadow: shadow))
}
}
struct PopupSurface: ViewModifier {
let radius: CGFloat
let shadow: Shadow
@Environment(\.colorScheme) private var colorScheme
func body(content: Content) -> some View {
let shape = RoundedRectangle(cornerRadius: radius, style: .continuous)
content
.clipShape(shape)
.background {
shape
.fill(Color.surfaceRaised)
.shadow(shadow)
}
.overlay {
shape.strokeBorder(Color.label.opacity(colorScheme == .dark ? 0.1 : 0.05))
}
}
}
struct OverlayCloseButton: View {
let label: LocalizedStringKey?
@Environment(\.overlayDismiss) private var dismiss
var body: some View {
if let label {
Button {
dismiss?()
} label: {
Text(label).font(TextStyle.base.font())
}
.buttonStyle(.variant(.plain, size: .sm))
} else {
Button {
dismiss?()
} label: {
Ph.x.regular
.frame(width: 16, height: 16)
.foregroundStyle(Color.label)
}
.buttonStyle(CloseIconButtonStyle())
.accessibilityLabel(Text("Close"))
}
}
}
private struct CloseIconButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.frame(width: 32, height: 32)
.background(configuration.isPressed ? Color.separator : .surfaceTertiary, in: Circle())
.contentShape(Circle().inset(by: -8))
}
}
struct ReversedVStack: Layout {
var spacing: CGFloat
func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
let width = proposal.width
var height: CGFloat = 0
var widest: CGFloat = 0
for view in subviews {
let size = view.sizeThatFits(ProposedViewSize(width: width, height: nil))
height += size.height
widest = max(widest, size.width)
}
height += spacing * CGFloat(max(subviews.count - 1, 0))
return CGSize(width: width ?? widest, height: height)
}
func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
var y = bounds.minY
for view in subviews.reversed() {
let size = view.sizeThatFits(ProposedViewSize(width: bounds.width, height: nil))
view.place(
at: CGPoint(x: bounds.minX, y: y),
anchor: .topLeading,
proposal: ProposedViewSize(width: bounds.width, height: size.height)
)
y += size.height + spacing
}
}
}
struct ScrimLayer: View {
let visible: Bool
var dismissible = true
@Environment(\.overlayDismiss) private var dismiss
var body: some View {
Color.scrim
.ignoresSafeArea()
.opacity(visible ? 1 : 0)
.contentShape(Rectangle())
.onTapGesture {
if dismissible { dismiss?() }
}
.accessibilityHidden(true)
}
}
```
```swift title="swift/Components/Screen.swift"
import SwiftUI
extension EnvironmentValues {
@Entry var screenBackground: Color = .surface
}
public struct Screen: View {
public enum Background: CaseIterable, Sendable {
case surface, surfaceSecondary
var color: Color {
switch self {
case .surface: .surface
case .surfaceSecondary: .surfaceSecondary
}
}
}
let edges: Edge.Set
let background: Background
let content: Content
public init(
edges: Edge.Set = .all,
background: Background = .surface,
@ViewBuilder content: () -> Content
) {
self.edges = edges
self.background = background
self.content = content()
}
public var body: some View {
VStack(spacing: 0) {
content
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
.ignoresSafeArea(.container, edges: Edge.Set.all.subtracting(edges))
.foregroundStyle(Color.label)
.background(background.color.ignoresSafeArea())
.environment(\.screenBackground, background.color)
}
}
public struct ScreenContent: View {
let scroll: Bool
let padded: Bool
let content: Content
public init(scroll: Bool = true, padded: Bool = true, @ViewBuilder content: () -> Content) {
self.scroll = scroll
self.padded = padded
self.content = content()
}
public var body: some View {
if scroll {
KeyboardScrollView {
stack
}
} else {
stack
.frame(maxHeight: .infinity, alignment: .top)
}
}
private var stack: some View {
VStack(alignment: .leading, spacing: 16) {
content
}
.padding(padded ? 16 : 0)
.frame(maxWidth: .infinity, alignment: .leading)
}
}
```
```swift title="swift/Components/Select.swift"
import PhosphorSwift
import SwiftUI
struct SelectContext: @unchecked Sendable {
var selected: AnyHashable?
var registering = false
var select: @MainActor @Sendable (AnyHashable) -> Void = { _ in }
}
extension EnvironmentValues {
@Entry var select = SelectContext()
}
struct SelectLabelsKey: PreferenceKey {
static var defaultValue: [AnyHashable: Text] { [:] }
static func reduce(value: inout [AnyHashable: Text], nextValue: () -> [AnyHashable: Text]) {
value.merge(nextValue()) { current, _ in current }
}
}
public enum SelectSize: CaseIterable, Sendable {
case `default`, sm
}
public struct SelectField: View {
public typealias Size = SelectSize
let selection: Binding
let placeholder: LocalizedStringKey
let size: Size
let content: () -> Content
@State private var open = false
@State private var labels: [AnyHashable: Text] = [:]
@Environment(\.isEnabled) private var isEnabled
@Environment(\.isInvalid) private var invalid
@Environment(\.colorScheme) private var colorScheme
public init(
selection: Binding,
placeholder: LocalizedStringKey = "Select",
size: Size = .default,
@ViewBuilder content: @escaping () -> Content
) {
self.selection = selection
self.placeholder = placeholder
self.size = size
self.content = content
}
public var body: some View {
let binding = selection
let current = binding.wrappedValue.map { AnyHashable($0) }
let valueText = current.flatMap { labels[$0] }
let context = SelectContext(
selected: current,
select: { value in
if let value = value.base as? Value { binding.wrappedValue = value }
}
)
ButtonGroupItem(radius: size == .sm ? Radius.md : Radius.lg) { shape in
Button {
open = true
} label: {
HStack(spacing: 6) {
(valueText ?? Text(placeholder))
.font(TextStyle.base.font())
.tracking(TextStyle.base.letterSpacing)
.lineLimit(1)
.foregroundStyle(!isEnabled ? Color.labelQuaternary : valueText == nil ? .labelSecondary : .label)
.frame(maxWidth: .infinity, alignment: .leading)
Ph.caretUpDown.regular
.frame(width: 16, height: 16)
.foregroundStyle(Color.labelSecondary)
.accessibilityHidden(true)
}
.padding(.horizontal, 12)
.frame(height: size == .sm ? 36 : 44)
.background(background, in: shape)
.overlay {
if invalid {
shape.strokeBorder(Color.danger)
}
}
.contentShape(shape)
}
.buttonStyle(SelectTriggerStyle())
}
.accessibilityHint(Text("Shows options"))
.background {
VStack(spacing: 0) { content() }
.environment(\.select, SelectContext(registering: true))
.hidden()
.frame(width: 0, height: 0)
.clipped()
.accessibilityHidden(true)
.allowsHitTesting(false)
}
.onPreferenceChange(SelectLabelsKey.self) { value in
labels = value
}
.anchoredPopup(
isPresented: $open,
side: .bottom,
align: .center,
matchWidth: true,
minWidth: 144
) {
SelectPanel(content: content)
.environment(\.select, context)
}
}
private var background: Color {
if !isEnabled { return .controlDisabled }
if invalid { return .danger.opacity(colorScheme == .dark ? 0.1 : 0.05) }
return .control
}
}
private struct SelectTriggerStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label.opacity(configuration.isPressed ? 0.8 : 1)
}
}
struct SelectPanel: View {
@ViewBuilder let content: () -> Content
var body: some View {
let stack = VStack(alignment: .leading, spacing: 0) {
content()
}
.padding(6)
ViewThatFits(in: .vertical) {
stack
ScrollView { stack }
}
.font(TextStyle.base.font())
.tracking(TextStyle.base.letterSpacing)
.foregroundStyle(Color.label)
.popupSurface(radius: Radius.xl)
.accessibilityElement(children: .contain)
}
}
public struct SelectItem: View {
let value: AnyHashable
let title: Text
@Environment(\.select) private var select
@Environment(\.overlayDismiss) private var dismiss
public init(_ title: LocalizedStringKey, value: Value) {
self.value = AnyHashable(value)
self.title = Text(title)
}
public init(verbatim title: String, value: Value) {
self.value = AnyHashable(value)
self.title = Text(verbatim: title)
}
public var body: some View {
if select.registering {
Color.clear
.frame(width: 0, height: 0)
.preference(key: SelectLabelsKey.self, value: [value: title])
} else {
let selected = select.selected == value
Button {
select.select(value)
dismiss?()
} label: {
title
}
.buttonStyle(MenuRowStyle(trailing: 32))
.overlay(alignment: .trailing) {
if selected {
Ph.check.regular
.frame(width: 16, height: 16)
.foregroundStyle(Color.link)
.padding(.trailing, 8)
.accessibilityHidden(true)
}
}
.accessibilityAddTraits(selected ? .isSelected : [])
}
}
}
public struct SelectGroup: View {
let content: Content
@Environment(\.select) private var select
public init(@ViewBuilder content: () -> Content) {
self.content = content()
}
public var body: some View {
VStack(alignment: .leading, spacing: 0) { content }
}
}
public struct SelectLabel: View {
let title: LocalizedStringKey
@Environment(\.select) private var select
public init(_ title: LocalizedStringKey) {
self.title = title
}
public var body: some View {
if !select.registering {
Text(title)
.font(TextStyle.xs.font(weight: .semibold))
.tracking(TextStyle.xs.letterSpacing)
.foregroundStyle(Color.labelSecondary)
.padding(.horizontal, 12)
.padding(.vertical, 10)
.frame(maxWidth: .infinity, alignment: .leading)
.accessibilityAddTraits(.isHeader)
}
}
}
public struct SelectSeparator: View {
@Environment(\.select) private var select
public init() {}
public var body: some View {
if !select.registering {
Rectangle()
.fill(Color.separator)
.frame(height: 1)
.padding(.vertical, 6)
.padding(.horizontal, -6)
.accessibilityHidden(true)
}
}
}
```
```swift title="swift/Components/Separator.swift"
import SwiftUI
public struct Separator: View {
let orientation: Axis
public init(_ orientation: Axis = .horizontal) {
self.orientation = orientation
}
public var body: some View {
Rectangle()
.fill(Color.separator)
.frame(width: orientation == .vertical ? 1 : nil, height: orientation == .horizontal ? 1 : nil)
.frame(maxWidth: orientation == .horizontal ? .infinity : nil, maxHeight: orientation == .vertical ? .infinity : nil)
.accessibilityHidden(true)
}
}
```
```swift title="swift/Components/TextVariant.swift"
import SwiftUI
public enum TextVariant: CaseIterable, Sendable {
case `default`, h1, h2, h3, h4, p, blockquote, code, lead, large, small, muted
var style: TextStyle {
switch self {
case .h1: .xl3
case .h2: .xl2
case .h3: .xl
case .h4, .lead, .large: .lg
case .code, .small, .muted: .sm
default: .base
}
}
var weight: Font.Weight {
switch self {
case .h1, .h2: .bold
case .h3, .h4, .large, .code: .semibold
case .small: .medium
default: .regular
}
}
var color: Color {
switch self {
case .lead, .muted: .labelSecondary
default: .label
}
}
var isHeading: Bool {
switch self {
case .h1, .h2, .h3, .h4: true
default: false
}
}
}
private struct TextVariantModifier: ViewModifier {
let variant: TextVariant
func body(content: Content) -> some View {
switch variant {
case .blockquote:
styled(content)
.italic()
.padding(.leading, 12)
.overlay(alignment: .leading) {
Rectangle().fill(Color.separator).frame(width: 2)
}
.padding(.top, 16)
case .code:
styled(content)
.monospaced()
.padding(.horizontal, 4)
.padding(.vertical, 2)
.background(Color.surfaceSecondary, in: RoundedRectangle(cornerRadius: Radius.sm, style: .continuous))
case .p:
styled(content).padding(.top, 12)
default:
styled(content)
}
}
private func styled(_ content: Content) -> some View {
content
.scaledTextStyle(variant.style, weight: variant.weight)
.foregroundStyle(variant.color)
.accessibilityAddTraits(variant.isHeading ? .isHeader : [])
}
}
extension View {
public func textVariant(_ variant: TextVariant) -> some View {
modifier(TextVariantModifier(variant: variant))
}
}
private struct ScaledTextStyleModifier: ViewModifier {
let style: TextStyle
let weight: Font.Weight
@ScaledMetric(relativeTo: .body) private var scale: CGFloat = 1
func body(content: Content) -> some View {
let size = style.size * scale
let lineSpacing = max(0, style.lineHeight * scale - UIFont.systemFont(ofSize: size).lineHeight)
content
.font(.system(size: size, weight: weight))
.tracking(style.letterSpacing)
.lineSpacing(lineSpacing)
.padding(.vertical, lineSpacing / 2)
}
}
extension View {
func scaledTextStyle(_ style: TextStyle, weight: Font.Weight = .regular) -> some View {
modifier(ScaledTextStyleModifier(style: style, weight: weight))
}
func scaledFont(_ style: TextStyle, weight: Font.Weight = .regular) -> some View {
modifier(ScaledFontModifier(style: style, weight: weight))
}
}
private struct ScaledFontModifier: ViewModifier {
let style: TextStyle
let weight: Font.Weight
@ScaledMetric(relativeTo: .body) private var scale: CGFloat = 1
func body(content: Content) -> some View {
content
.font(.system(size: style.size * scale, weight: weight))
.tracking(style.letterSpacing)
}
}
```
```swift title="swift/Components/Textarea.swift"
import SwiftUI
public struct TextareaStyle: TextFieldStyle {
public init() {}
public func _body(configuration: TextField) -> some View {
configuration
.lineLimit(1...8)
.modifier(InputField(
radius: Radius.xl,
horizontalPadding: 12,
verticalPadding: 12,
minHeight: 64,
textStyle: .base,
alignment: .topLeading
))
}
}
extension TextFieldStyle where Self == TextareaStyle {
public static var textarea: TextareaStyle { TextareaStyle() }
}
```
```swift title="swift/Interactions/SwipeActions.swift"
import SwiftUI
public enum SwipeActionVariant: CaseIterable, Sendable {
case `default`, destructive, archive, neutral
var color: Color {
switch self {
case .default: .accent
case .destructive: .adaptive(light: .init(0xD0000A), dark: .init(0xB33B32))
case .archive: .adaptive(light: .init(0x994AC1), dark: .init(0x863FA9))
case .neutral: .adaptive(light: .init(0x66666A), dark: .init(0x555558))
}
}
}
enum SwipeActionsMode: Sendable {
case native, custom, accessibility
}
struct SwipeActionsContext: Sendable {
var mode: SwipeActionsMode = .native
var full = false
var trigger = 0
var direction: LayoutDirection = .leftToRight
var close: @MainActor @Sendable () -> Void = {}
}
extension EnvironmentValues {
@Entry var swipeActions = SwipeActionsContext()
}
struct SwipeFullKey: PreferenceKey {
static var defaultValue: Bool { false }
static func reduce(value: inout Bool, nextValue: () -> Bool) {
value = value || nextValue()
}
}
extension Notification.Name {
static let swipeActionsOpen = Notification.Name("swipe-actions.open")
}
public struct SwipeActions: View {
let background: Color
let content: Content
let leading: Leading
let trailing: Trailing
@State private var id = UUID()
@State private var offset: CGFloat = 0
@State private var start: CGFloat?
@State private var axis: Axis?
@State private var rowWidth: CGFloat = 0
@State private var rowHeight: CGFloat = 0
@State private var leadingWidth: CGFloat = 0
@State private var trailingWidth: CGFloat = 0
@State private var leadingFull = false
@State private var trailingFull = false
@State private var full: HorizontalEdge?
@State private var collapsed: CGFloat?
@State private var trigger = 0
@Environment(\.layoutDirection) private var layoutDirection
@Environment(\.accessibilityReduceMotion) private var reduceMotion
public init(
background: Color = .surface,
@ViewBuilder content: () -> Content,
@ViewBuilder leading: () -> Leading,
@ViewBuilder trailing: () -> Trailing
) {
self.init(background: background, revealed: 0, content: content, leading: leading, trailing: trailing)
}
init(
background: Color = .surface,
revealed: CGFloat,
full: HorizontalEdge? = nil,
@ViewBuilder content: () -> Content,
@ViewBuilder leading: () -> Leading,
@ViewBuilder trailing: () -> Trailing
) {
self.background = background
self.content = content()
self.leading = leading()
self.trailing = trailing()
_offset = State(initialValue: revealed)
_full = State(initialValue: full)
}
public var body: some View {
let close = closeAction
ZStack {
if offset > 0 {
actions(leading, edge: .leading, revealed: offset, close: close)
}
if offset < 0 {
actions(trailing, edge: .trailing, revealed: -offset, close: close)
}
content
.frame(maxWidth: .infinity, alignment: .leading)
.background(background)
.overlay {
if offset != 0 {
Color.clear
.contentShape(Rectangle())
.onTapGesture { settle(0) }
.accessibilityHidden(true)
}
}
.offset(x: offset)
.simultaneousGesture(drag)
.accessibilityActions {
Group {
leading
trailing
}
.environment(\.swipeActions, SwipeActionsContext(mode: .accessibility, close: close))
}
}
.onGeometryChange(for: CGSize.self) { $0.size } action: { size in
rowWidth = size.width
if collapsed == nil { rowHeight = size.height }
}
.background {
ZStack {
measure(leading) { leadingWidth = $0 }
.onPreferenceChange(SwipeFullKey.self) { leadingFull = $0 }
measure(trailing) { trailingWidth = $0 }
.onPreferenceChange(SwipeFullKey.self) { trailingFull = $0 }
}
.hidden()
.accessibilityHidden(true)
.allowsHitTesting(false)
}
.frame(height: collapsed, alignment: .top)
.clipped()
.hapticFeedback(.impact(weight: .medium), trigger: full) { HapticMoments.crossed($0, $1) }
.accessibilityElement(children: .contain)
.accessibilityAction(.escape) { settle(0) }
.onReceive(NotificationCenter.default.publisher(for: .swipeActionsOpen)) { note in
if let other = note.object as? UUID, other != id, offset != 0 {
settle(0)
}
}
}
private var closeAction: @MainActor @Sendable () -> Void {
let offset = $offset
let full = $full
let animation = settleAnimation
return {
withAnimation(animation) {
offset.wrappedValue = 0
full.wrappedValue = nil
}
}
}
private var settleAnimation: Animation? {
reduceMotion ? .easeOut(duration: 0.15) : .timingCurve(0.32, 0.72, 0, 1, duration: 0.3)
}
private func measure(_ view: V, _ update: @escaping (CGFloat) -> Void) -> some View {
HStack(spacing: 0) { view }
.environment(\.swipeActions, SwipeActionsContext(mode: .custom))
.fixedSize()
.onGeometryChange(for: CGFloat.self) { $0.size.width } action: { update($0) }
}
private func actions(_ view: V, edge: HorizontalEdge, revealed: CGFloat, close: @escaping @MainActor @Sendable () -> Void) -> some View {
let flipped: LayoutDirection = layoutDirection == .leftToRight ? .rightToLeft : .leftToRight
return HStack(spacing: 0) { view }
.environment(
\.swipeActions,
SwipeActionsContext(mode: .custom, full: full == edge, trigger: trigger, direction: layoutDirection, close: close)
)
.environment(\.layoutDirection, edge == .leading ? flipped : layoutDirection)
.frame(width: max(revealed, 0), alignment: edge == .leading ? .trailing : .leading)
.frame(maxHeight: .infinity)
.clipped()
.frame(maxWidth: .infinity, alignment: edge == .leading ? .leading : .trailing)
.accessibilityHidden(true)
}
private var drag: some Gesture {
DragGesture(minimumDistance: 8)
.onChanged { value in
if collapsed != nil { return }
if axis == nil {
let dx = abs(value.translation.width)
let dy = abs(value.translation.height)
if dx > 8 && dx > dy {
axis = .horizontal
start = offset
} else if dy > 8 {
axis = .vertical
} else {
return
}
}
guard axis == .horizontal, let start else { return }
var next = start + value.translation.width
if next > 0 && leadingWidth == 0 { next = 0 }
if next < 0 && trailingWidth == 0 { next = 0 }
let edge: HorizontalEdge = next > 0 ? .leading : .trailing
let limit = edge == .leading ? leadingWidth : trailingWidth
let canFull = edge == .leading ? leadingFull : trailingFull
let revealed = abs(next)
if !canFull && revealed > limit {
let extra = revealed - limit
next = (next > 0 ? 1 : -1) * (limit + extra / (1 + extra / 40))
}
let nextFull: HorizontalEdge? = canFull && revealed > rowWidth * 0.6 ? edge : nil
if nextFull != full {
withAnimation(.easeOut(duration: 0.2)) { full = nextFull }
}
offset = next
}
.onEnded { _ in
defer {
axis = nil
start = nil
}
guard axis == .horizontal else { return }
if let full {
fullSwipe(full)
return
}
let edge: HorizontalEdge = offset > 0 ? .leading : .trailing
let width = edge == .leading ? leadingWidth : trailingWidth
if width > 0 && abs(offset) > width / 2 {
settle(edge == .leading ? width : -width)
} else {
settle(0)
}
}
}
private func settle(_ value: CGFloat) {
withAnimation(settleAnimation) {
offset = value
if value == 0 { full = nil }
}
if value != 0 {
NotificationCenter.default.post(name: .swipeActionsOpen, object: id)
}
}
private func fullSwipe(_ edge: HorizontalEdge) {
let width = rowWidth
let height = rowHeight
withAnimation(.timingCurve(0.32, 0.72, 0, 1, duration: 0.18)) {
offset = edge == .leading ? width : -width
} completion: {
collapsed = height
withAnimation(reduceMotion ? nil : .timingCurve(0.32, 0.72, 0, 1, duration: 0.2)) {
collapsed = 0
} completion: {
trigger += 1
Task { @MainActor in
try? await Task.sleep(for: .milliseconds(50))
var transaction = Transaction()
transaction.disablesAnimations = true
withTransaction(transaction) {
offset = 0
full = nil
collapsed = nil
}
}
}
}
}
}
extension SwipeActions where Leading == EmptyView {
public init(
background: Color = .surface,
@ViewBuilder content: () -> Content,
@ViewBuilder trailing: () -> Trailing
) {
self.init(background: background, content: content, leading: { EmptyView() }, trailing: trailing)
}
}
extension SwipeActions where Trailing == EmptyView {
public init(
background: Color = .surface,
@ViewBuilder content: () -> Content,
@ViewBuilder leading: () -> Leading
) {
self.init(background: background, content: content, leading: leading, trailing: { EmptyView() })
}
}
public struct SwipeAction: View {
let title: Text
let variant: SwipeActionVariant
let fullSwipe: Bool
let action: () -> Void
let label: Label
@Environment(\.swipeActions) private var context
public init(
_ title: LocalizedStringKey,
variant: SwipeActionVariant = .default,
fullSwipe: Bool = false,
action: @escaping () -> Void,
@ViewBuilder label: () -> Label
) {
self.title = Text(title)
self.variant = variant
self.fullSwipe = fullSwipe
self.action = action
self.label = label()
}
public var body: some View {
switch context.mode {
case .native:
Button(role: variant == .destructive ? .destructive : nil, action: action) {
label
}
.tint(variant.color)
case .accessibility:
Button(action: action) {
title
}
case .custom:
let hidden = context.full && !fullSwipe
let grow = context.full && fullSwipe
Button {
action()
context.close()
} label: {
label
.labelStyle(SwipeActionLabelStyle())
.font(TextStyle.xs.font(weight: .medium))
.tracking(TextStyle.xs.letterSpacing)
.multilineTextAlignment(.center)
.foregroundStyle(Color.onAccent)
.environment(\.layoutDirection, context.direction)
.padding(.horizontal, hidden ? 0 : 12)
.frame(minWidth: hidden ? 0 : 72, maxWidth: hidden ? 0 : .infinity, maxHeight: .infinity)
.opacity(hidden ? 0 : 1)
.background(variant.color)
.contentShape(Rectangle())
}
.buttonStyle(SwipeActionButtonStyle())
.layoutPriority(grow ? 1 : 0)
.preference(key: SwipeFullKey.self, value: fullSwipe)
.onChange(of: context.trigger) {
if grow { action() }
}
}
}
}
extension SwipeAction where Label == SwiftUI.Label {
public init(
_ title: LocalizedStringKey,
icon: Image,
variant: SwipeActionVariant = .default,
fullSwipe: Bool = false,
action: @escaping () -> Void
) {
self.init(title, variant: variant, fullSwipe: fullSwipe, action: action) {
SwiftUI.Label { Text(title) } icon: { icon }
}
}
}
extension SwipeAction where Label == Text {
public init(
_ title: LocalizedStringKey,
variant: SwipeActionVariant = .default,
fullSwipe: Bool = false,
action: @escaping () -> Void
) {
self.init(title, variant: variant, fullSwipe: fullSwipe, action: action) { Text(title) }
}
}
private struct SwipeActionLabelStyle: LabelStyle {
func makeBody(configuration: Configuration) -> some View {
VStack(spacing: 4) {
configuration.icon.frame(width: 20, height: 20)
configuration.title
}
}
}
private struct SwipeActionButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.brightness(configuration.isPressed ? -0.08 : 0)
}
}
```
```swift title="swift/Patterns/SplitView.swift"
import PhosphorSwift
import SwiftUI
public enum SplitViewColumn: CaseIterable, Sendable {
case sidebar, list, detail
var next: SplitViewColumn {
switch self {
case .sidebar: .list
case .list, .detail: .detail
}
}
var previous: SplitViewColumn? {
switch self {
case .sidebar: nil
case .list: .sidebar
case .detail: .list
}
}
var order: Int {
switch self {
case .sidebar: 0
case .list: 1
case .detail: 2
}
}
var weight: CGFloat {
switch self {
case .sidebar: 20
case .list: 32
case .detail: 48
}
}
}
enum SplitViewMath {
static let wideWidth: CGFloat = 768
static func isWide(_ width: CGFloat) -> Bool {
width >= wideWidth
}
static func backColumn(for kind: SplitViewColumn, present: [SplitViewColumn]) -> SplitViewColumn? {
guard let previous = kind.previous else { return nil }
return present.contains(previous) ? previous : nil
}
static func widths(total: CGFloat, present: [SplitViewColumn]) -> [SplitViewColumn: CGFloat] {
let available = max(0, total - CGFloat(max(present.count - 1, 0)))
let sum = present.reduce(0) { $0 + $1.weight }
guard sum > 0 else { return [:] }
var result: [SplitViewColumn: CGFloat] = [:]
for column in present {
result[column] = (available * column.weight / sum).rounded(.down)
}
return result
}
}
struct SplitViewColumnKey: LayoutValueKey {
static let defaultValue: SplitViewColumn? = nil
}
struct SplitViewColumnsLayout: Layout {
func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
let width = proposal.width ?? SplitViewMath.wideWidth
if let height = proposal.height { return CGSize(width: width, height: height) }
let widths = columnWidths(total: width, subviews: subviews)
let height = zip(subviews, widths).map { $0.sizeThatFits(ProposedViewSize(width: $1, height: nil)).height }.max() ?? 0
return CGSize(width: width, height: height)
}
func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
let widths = columnWidths(total: bounds.width, subviews: subviews)
var x = bounds.minX
for (subview, width) in zip(subviews, widths) {
subview.place(
at: CGPoint(x: x, y: bounds.minY),
anchor: .topLeading,
proposal: ProposedViewSize(width: width, height: bounds.height)
)
x += width + 1
}
}
private func columnWidths(total: CGFloat, subviews: Subviews) -> [CGFloat] {
let kinds = subviews.map { $0[SplitViewColumnKey.self] ?? .detail }
let widths = SplitViewMath.widths(total: total, present: kinds)
var result = kinds.map { widths[$0] ?? 0 }
if !result.isEmpty {
let used = result.dropLast().reduce(0, +) + CGFloat(result.count - 1)
result[result.count - 1] = max(0, total - used)
}
return result
}
}
struct SplitViewPaneInfo: Equatable {
let kind: SplitViewColumn
let title: Text?
}
struct SplitViewPanesKey: PreferenceKey {
static var defaultValue: [SplitViewPaneInfo] { [] }
static func reduce(value: inout [SplitViewPaneInfo], nextValue: () -> [SplitViewPaneInfo]) {
value.append(contentsOf: nextValue())
}
}
struct SplitViewContext: @unchecked Sendable {
var wide = false
var column: SplitViewColumn = .list
var panes: [SplitViewPaneInfo] = []
var forward = true
var select: @MainActor @Sendable (SplitViewColumn) -> Void = { _ in }
func title(_ kind: SplitViewColumn) -> Text? {
panes.first { $0.kind == kind }?.title
}
}
extension EnvironmentValues {
@Entry var splitView: SplitViewContext? = nil
@Entry var splitViewColumn: SplitViewColumn = .list
}
public struct SplitView: View {
let external: Binding?
let content: Content
@State private var local: SplitViewColumn
@State private var width: CGFloat = 0
@State private var panes: [SplitViewPaneInfo] = []
@State private var forward = true
@Environment(\.accessibilityReduceMotion) private var reduceMotion
public init(column: Binding, @ViewBuilder content: () -> Content) {
self.external = column
self._local = State(initialValue: column.wrappedValue)
self.content = content()
}
public init(defaultColumn: SplitViewColumn = .list, @ViewBuilder content: () -> Content) {
self.external = nil
self._local = State(initialValue: defaultColumn)
self.content = content()
}
public var body: some View {
let binding = external ?? $local
let current = binding.wrappedValue
let wide = SplitViewMath.isWide(width)
let animation: Animation? = reduceMotion ? nil : .timingCurve(0.32, 0.72, 0, 1, duration: 0.35)
let context = SplitViewContext(
wide: wide,
column: current,
panes: panes,
forward: forward,
select: { next in
guard next != binding.wrappedValue else { return }
forward = next.order > binding.wrappedValue.order
if wide {
binding.wrappedValue = next
} else {
withAnimation(animation) { binding.wrappedValue = next }
}
}
)
Group {
if wide {
SplitViewColumnsLayout { content }
} else {
ZStack(alignment: .topLeading) { content }
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
.clipped()
.environment(\.splitView, context)
.onGeometryChange(for: CGFloat.self) { $0.size.width } action: { width = $0 }
.onPreferenceChange(SplitViewPanesKey.self) { value in panes = value }
}
}
struct SplitViewPane: View {
let kind: SplitViewColumn
let title: Text?
let content: Content
@Environment(\.splitView) private var splitView
@Environment(\.layoutDirection) private var layoutDirection
var body: some View {
let context = splitView ?? SplitViewContext()
Group {
if context.wide {
pane(context)
.frame(maxHeight: .infinity, alignment: .top)
.overlay(alignment: .leading) {
if context.panes.first?.kind != kind {
Color.separator.frame(width: 1).offset(x: -1)
}
}
.layoutValue(key: SplitViewColumnKey.self, value: kind)
} else if context.column == kind {
pane(context)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
.transition(
.asymmetric(
insertion: .move(edge: context.forward ? .trailing : .leading),
removal: .move(edge: context.forward ? .leading : .trailing)
)
)
} else {
Color.clear
.frame(width: 0, height: 0)
.accessibilityHidden(true)
}
}
.preference(key: SplitViewPanesKey.self, value: [SplitViewPaneInfo(kind: kind, title: title)])
}
private func pane(_ context: SplitViewContext) -> some View {
let back = context.wide ? nil : SplitViewMath.backColumn(for: kind, present: context.panes.map(\.kind))
return ScrollView {
VStack(alignment: .leading, spacing: 0) {
if let back {
Button {
context.select(back)
} label: {
HStack(spacing: 2) {
Ph.caretLeft.bold
.frame(width: 18, height: 18)
.flipsForRightToLeftLayoutDirection(true)
if let title = context.title(back) {
title.lineLimit(1)
} else {
Text("Back")
}
}
.scaledFont(.base)
.foregroundStyle(Color.link)
.frame(minHeight: 44)
.contentShape(Rectangle())
}
.buttonStyle(SplitViewBackStyle())
.padding(.leading, -6)
}
if let title {
heading(title, wide: context.wide)
}
VStack(alignment: .leading, spacing: 0) {
content
}
.padding(.top, context.wide ? 0 : -1)
.clipped()
.environment(\.splitViewColumn, kind)
}
.padding(padding(wide: context.wide))
.frame(maxWidth: .infinity, alignment: .leading)
}
}
@ViewBuilder
private func heading(_ title: Text, wide: Bool) -> some View {
if !wide {
title
.scaledFont(.xl3, weight: .bold)
.foregroundStyle(Color.label)
.padding(.bottom, 8)
.accessibilityAddTraits(.isHeader)
} else {
switch kind {
case .sidebar:
title
.scaledFont(.xs, weight: .semibold)
.foregroundStyle(Color.labelSecondary)
.padding(.horizontal, 12)
.padding(.top, 12)
.padding(.bottom, 8)
.accessibilityAddTraits(.isHeader)
case .list:
title
.frame(width: 0, height: 0)
.opacity(0)
.accessibilityAddTraits(.isHeader)
case .detail:
title
.scaledFont(.xl, weight: .semibold)
.foregroundStyle(Color.label)
.padding(.bottom, 4)
.accessibilityAddTraits(.isHeader)
}
}
}
private func padding(wide: Bool) -> EdgeInsets {
guard wide else { return EdgeInsets(top: 0, leading: 16, bottom: 16, trailing: 16) }
switch kind {
case .sidebar: return EdgeInsets(top: 4, leading: 12, bottom: 12, trailing: 12)
case .list: return EdgeInsets(top: 12, leading: 12, bottom: 12, trailing: 12)
case .detail: return EdgeInsets(top: 32, leading: 32, bottom: 32, trailing: 32)
}
}
}
private struct SplitViewBackStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label.opacity(configuration.isPressed ? 0.6 : 1)
}
}
public struct SplitViewSidebar: View {
let title: Text?
let content: Content
public init(_ title: LocalizedStringKey? = nil, @ViewBuilder content: () -> Content) {
self.title = title.map { Text($0) }
self.content = content()
}
public init(verbatim title: String, @ViewBuilder content: () -> Content) {
self.title = Text(verbatim: title)
self.content = content()
}
public var body: some View {
SplitViewPane(kind: .sidebar, title: title, content: content)
}
}
public struct SplitViewList: View {
let title: Text?
let content: Content
public init(_ title: LocalizedStringKey? = nil, @ViewBuilder content: () -> Content) {
self.title = title.map { Text($0) }
self.content = content()
}
public init(verbatim title: String, @ViewBuilder content: () -> Content) {
self.title = Text(verbatim: title)
self.content = content()
}
public var body: some View {
SplitViewPane(kind: .list, title: title, content: content)
}
}
public struct SplitViewDetail: View {
let title: Text?
let content: Content
public init(_ title: LocalizedStringKey? = nil, @ViewBuilder content: () -> Content) {
self.title = title.map { Text($0) }
self.content = content()
}
public init(verbatim title: String, @ViewBuilder content: () -> Content) {
self.title = Text(verbatim: title)
self.content = content()
}
public var body: some View {
SplitViewPane(kind: .detail, title: title, content: content)
}
}
public struct SplitViewItem: View {
let isActive: Bool
let action: (() -> Void)?
let label: Label
@Environment(\.splitView) private var splitView
@Environment(\.splitViewColumn) private var kind
public init(isActive: Bool = false, action: (() -> Void)? = nil, @ViewBuilder label: () -> Label) {
self.isActive = isActive
self.action = action
self.label = label()
}
public var body: some View {
let wide = splitView?.wide ?? false
Button {
action?()
splitView?.select(kind.next)
} label: {
HStack(spacing: 12) {
VStack(alignment: .leading, spacing: 2) {
label
}
.scaledFont(.base)
.frame(maxWidth: .infinity, alignment: .leading)
if !wide && kind != .detail {
Ph.caretRight.regular
.frame(width: 16, height: 16)
.foregroundStyle(Color.labelTertiary)
.flipsForRightToLeftLayoutDirection(true)
.accessibilityHidden(true)
}
}
}
.buttonStyle(SplitViewItemStyle(wide: wide, kind: kind, active: isActive))
.accessibilityAddTraits(isActive ? .isSelected : [])
}
}
private struct SplitViewItemStyle: ButtonStyle {
let wide: Bool
let kind: SplitViewColumn
let active: Bool
@Environment(\.isEnabled) private var isEnabled
func makeBody(configuration: Configuration) -> some View {
let pressed = configuration.isPressed && isEnabled
if wide {
let shape = RoundedRectangle(cornerRadius: kind == .list ? Radius.xl : Radius.lg, style: .continuous)
configuration.label
.foregroundStyle(isEnabled ? Color.label : .labelQuaternary)
.padding(.horizontal, 12)
.padding(.vertical, kind == .list ? 12 : 8)
.frame(maxWidth: .infinity, alignment: .leading)
.background(pressed ? Color.itemPressed : active ? .itemSelected : .clear, in: shape)
.contentShape(shape)
} else {
configuration.label
.foregroundStyle(isEnabled ? Color.label : .labelQuaternary)
.padding(.vertical, 12)
.frame(maxWidth: .infinity, minHeight: 44, alignment: .leading)
.background(pressed ? Color.itemPressed : .clear)
.overlay(alignment: .top) {
Color.separator.frame(height: 1)
}
.contentShape(Rectangle())
}
}
}
```
5. Add the files to your app target.
**Jetpack Compose**
1. Set `minSdk` to 24 or higher and add the dependencies:
```kotlin title="build.gradle.kts"
implementation(platform("androidx.compose:compose-bom:2026.09.00"))
implementation("androidx.compose.foundation:foundation")
implementation("androidx.compose.ui:ui")
implementation("com.adamglin:phosphor-icon-android:1.0.0")
```
2. Copy the theme files every view uses:
```kt title="kotlin/theme/Theme.kt"
package com.esuiss.ui.theme
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.dropShadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.shadow.Shadow as DropShadow
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.em
import androidx.compose.ui.unit.sp
internal fun textStyle(size: Double, lineHeight: Double, letterSpacing: Double) = TextStyle(
fontSize = size.sp,
lineHeight = lineHeight.sp,
letterSpacing = letterSpacing.em,
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Center,
trim = LineHeightStyle.Trim.None,
),
)
@Immutable
data class Shadow(
val offsetX: Dp,
val offsetY: Dp,
val blur: Dp,
val color: Color,
)
fun Modifier.shadow(shadow: Shadow, shape: Shape): Modifier = dropShadow(
shape,
DropShadow(
radius = shadow.blur,
color = shadow.color,
offset = DpOffset(shadow.offsetX, shadow.offsetY),
),
)
val LocalColors = staticCompositionLocalOf { LightColors }
object EsuissTheme {
val colors: Colors
@Composable get() = LocalColors.current
val typography: Typography
get() = Typography
val radius: Radius
get() = Radius
val shadows: Shadows
get() = Shadows
}
@Composable
fun EsuissTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit,
) {
CompositionLocalProvider(
LocalColors provides if (darkTheme) DarkColors else LightColors,
content = content,
)
}
```
```kt title="kotlin/theme/Tokens.kt"
package com.esuiss.ui.theme
import androidx.compose.runtime.Immutable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
@Immutable
data class Colors(
val surface: Color,
val surfaceSecondary: Color,
val surfaceTertiary: Color,
val surfaceRaised: Color,
val label: Color,
val labelSecondary: Color,
val labelTertiary: Color,
val labelQuaternary: Color,
val control: Color,
val controlPressed: Color,
val controlSelected: Color,
val controlDisabled: Color,
val onControlSelected: Color,
val itemPressed: Color,
val itemSelected: Color,
val separator: Color,
val separatorStrong: Color,
val accent: Color,
val accentPressed: Color,
val accentSelected: Color,
val accentDisabled: Color,
val onAccent: Color,
val accentSurface: Color,
val accentSurfacePressed: Color,
val link: Color,
val focus: Color,
val scrim: Color,
val media: Color,
val onMedia: Color,
val danger: Color,
val dangerSurface: Color,
val dangerSurfacePressed: Color,
val success: Color,
val successSurface: Color,
val warning: Color,
val warningSurface: Color,
val blue: Color,
val green: Color,
val orange: Color,
val red: Color,
val yellow: Color,
val purple: Color,
val pink: Color,
val indigo: Color,
val teal: Color,
val mint: Color,
val cyan: Color,
val brown: Color,
val gray: Color,
val isDark: Boolean,
)
val LightColors = Colors(
surface = Color(0xFFFFFFFF),
surfaceSecondary = Color(0xFFF5F5F7),
surfaceTertiary = Color(0xFFE8E8ED),
surfaceRaised = Color(0xFFFFFFFF),
label = Color(0xFF1D1D1F),
labelSecondary = Color(0xFF6E6E73),
labelTertiary = Color(0xFF86868B),
labelQuaternary = Color(0xFFD2D2D7),
control = Color(0xFF000000).copy(alpha = 0.04f),
controlPressed = Color(0xFF000000).copy(alpha = 0.12f),
controlSelected = Color(0xFF1D1D1F),
controlDisabled = Color(0xFF000000).copy(alpha = 0.03f),
onControlSelected = Color(0xFFFFFFFF),
itemPressed = Color(0xFF000000).copy(alpha = 0.08f),
itemSelected = Color(0xFF000000).copy(alpha = 0.06f),
separator = Color(0xFFD2D2D7),
separatorStrong = Color(0xFF86868B),
accent = Color(0xFF0071E3),
accentPressed = Color(0xFF005BB8),
accentSelected = Color(0xFF0071E3),
accentDisabled = Color(0xFF0071E3).copy(alpha = 0.4f),
onAccent = Color(0xFFFFFFFF),
accentSurface = Color(0xFF0071E3).copy(alpha = 0.09f),
accentSurfacePressed = Color(0xFF0071E3).copy(alpha = 0.18f),
link = Color(0xFF0066CC),
focus = Color(0xFF0071E3),
scrim = Color(0xFF000000).copy(alpha = 0.48f),
media = Color(0xFF000000),
onMedia = Color(0xFFFFFFFF),
danger = Color(0xFFD0000A),
dangerSurface = Color(0xFFD70015).copy(alpha = 0.08f),
dangerSurfacePressed = Color(0xFFD70015).copy(alpha = 0.16f),
success = Color(0xFF008009),
successSurface = Color(0xFFEFFAF1),
warning = Color(0xFFB64400),
warningSurface = Color(0xFFFFF5EA),
blue = Color(0xFF007AFF),
green = Color(0xFF34C759),
orange = Color(0xFFFF9500),
red = Color(0xFFFF3B30),
yellow = Color(0xFFFFCC00),
purple = Color(0xFFAF52DE),
pink = Color(0xFFFF2D55),
indigo = Color(0xFF5856D6),
teal = Color(0xFF30B0C7),
mint = Color(0xFF00C7BE),
cyan = Color(0xFF32ADE6),
brown = Color(0xFFA2845E),
gray = Color(0xFF8E8E93),
isDark = false,
)
val DarkColors = Colors(
surface = Color(0xFF000000),
surfaceSecondary = Color(0xFF161617),
surfaceTertiary = Color(0xFF2C2C2E),
surfaceRaised = Color(0xFF1D1D1F),
label = Color(0xFFF5F5F7),
labelSecondary = Color(0xFFA1A1A6),
labelTertiary = Color(0xFF86868B),
labelQuaternary = Color(0xFF424245),
control = Color(0xFFFFFFFF).copy(alpha = 0.1f),
controlPressed = Color(0xFFFFFFFF).copy(alpha = 0.22f),
controlSelected = Color(0xFFF5F5F7),
controlDisabled = Color(0xFFFFFFFF).copy(alpha = 0.05f),
onControlSelected = Color(0xFF000000),
itemPressed = Color(0xFFFFFFFF).copy(alpha = 0.12f),
itemSelected = Color(0xFFFFFFFF).copy(alpha = 0.1f),
separator = Color(0xFF424245),
separatorStrong = Color(0xFF6E6E73),
accent = Color(0xFF0071E3),
accentPressed = Color(0xFF004D9E),
accentSelected = Color(0xFF0071E3),
accentDisabled = Color(0xFF0071E3).copy(alpha = 0.4f),
onAccent = Color(0xFFFFFFFF),
accentSurface = Color(0xFF0071E3).copy(alpha = 0.18f),
accentSurfacePressed = Color(0xFF0071E3).copy(alpha = 0.3f),
link = Color(0xFF2997FF),
focus = Color(0xFF0071E3),
scrim = Color(0xFF000000).copy(alpha = 0.48f),
media = Color(0xFF000000),
onMedia = Color(0xFFFFFFFF),
danger = Color(0xFFFF5447),
dangerSurface = Color(0xFFFF453A).copy(alpha = 0.2f),
dangerSurfacePressed = Color(0xFFFF453A).copy(alpha = 0.36f),
success = Color(0xFF30D158),
successSurface = Color(0xFF30D158).copy(alpha = 0.16f),
warning = Color(0xFFFF9F0A),
warningSurface = Color(0xFFFF9F0A).copy(alpha = 0.16f),
blue = Color(0xFF0A84FF),
green = Color(0xFF30D158),
orange = Color(0xFFFF9F0A),
red = Color(0xFFFF453A),
yellow = Color(0xFFFFD60A),
purple = Color(0xFFBF5AF2),
pink = Color(0xFFFF375F),
indigo = Color(0xFF5E5CE6),
teal = Color(0xFF40C8E0),
mint = Color(0xFF66D4CF),
cyan = Color(0xFF64D2FF),
brown = Color(0xFFAC8E68),
gray = Color(0xFF8E8E93),
isDark = true,
)
object Radius {
val xs = 3.dp
val sm = 5.dp
val md = 8.dp
val lg = 10.dp
val xl = 12.dp
val xl2 = 18.dp
val xl3 = 28.dp
val full = 9999.dp
}
object Typography {
val xs3 = textStyle(11.0, 13.0, 0.006)
val xs2 = textStyle(12.0, 16.0, 0.0)
val xs = textStyle(13.0, 18.0, -0.006)
val sm = textStyle(15.0, 20.0, -0.016)
val md = textStyle(16.0, 21.0, -0.02)
val base = textStyle(17.0, 22.0, -0.026)
val lg = textStyle(20.0, 25.0, -0.023)
val xl = textStyle(22.0, 28.0, -0.012)
val xl2 = textStyle(28.0, 34.0, 0.014)
val xl3 = textStyle(34.0, 41.0, 0.012)
val all = listOf(xs3, xs2, xs, sm, md, base, lg, xl, xl2, xl3)
}
object Shadows {
val md = Shadow(2.dp, 4.dp, 12.dp, Color.Black.copy(alpha = 0.08f))
val lg = Shadow(0.dp, 4.dp, 24.dp, Color.Black.copy(alpha = 0.12f))
}
```
3. Copy the source and every file it uses:
```kt title="kotlin/blocks/InboxCategories.kt"
package com.esuiss.ui.blocks
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.animateContentSize
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.CubicBezierEasing
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.selection.selectable
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.key
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.graphics.lerp
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.stateDescription
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Bold
import com.adamglin.phosphoricons.Fill
import com.adamglin.phosphoricons.Regular
import com.adamglin.phosphoricons.bold.Archive as BoldArchive
import com.adamglin.phosphoricons.bold.Bell
import com.adamglin.phosphoricons.bold.CreditCard
import com.adamglin.phosphoricons.bold.Tag
import com.adamglin.phosphoricons.bold.Trash as BoldTrash
import com.adamglin.phosphoricons.bold.Users
import com.adamglin.phosphoricons.fill.Star as FillStar
import com.adamglin.phosphoricons.regular.Archive
import com.adamglin.phosphoricons.regular.ArrowBendUpLeft
import com.adamglin.phosphoricons.regular.Star
import com.adamglin.phosphoricons.regular.Trash
import com.esuiss.ui.components.Button
import com.esuiss.ui.components.ButtonSize
import com.esuiss.ui.components.ButtonVariant
import com.esuiss.ui.components.Icon
import com.esuiss.ui.components.Screen
import com.esuiss.ui.components.Textarea
import com.esuiss.ui.interactions.SwipeAction
import com.esuiss.ui.interactions.SwipeActionVariant
import com.esuiss.ui.interactions.SwipeActions
import com.esuiss.ui.patterns.SplitView
import com.esuiss.ui.patterns.SplitViewColumn
import com.esuiss.ui.patterns.SplitViewItem
import com.esuiss.ui.theme.Colors
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Radius
import com.esuiss.ui.theme.Typography
private val CategoryRevealEasing = CubicBezierEasing(0.32f, 0.72f, 0f, 1f)
private val CategoryPopEasing = CubicBezierEasing(0.3f, 1.25f, 0.5f, 1f)
private class CategoryMail(
val id: Int,
val from: String,
val subject: String,
val body: String,
val time: String,
val hue: Int,
val category: String,
unread: Boolean,
starred: Boolean,
) {
var unread by mutableStateOf(unread)
var starred by mutableStateOf(starred)
}
private fun categoryMail() = listOf(
CategoryMail(0, "suiss", "Your order has shipped", "Order #W1048 is on its way and arrives tomorrow. A signature is required on delivery.", "9:12 AM", 0, "Transactions", unread = true, starred = false),
CategoryMail(1, "Morgan Lee", "Tomorrow's meeting", "Does 10:00 tomorrow work? The Q4 budget and the campaign calendar are on the agenda. I'll share the deck tonight.", "8:40 AM", 30, "Primary", unread = true, starred = false),
CategoryMail(2, "suiss Cloud", "Your storage is almost full", "90% of your Cloud storage is used. Upgrade your plan to keep your backups running.", "Yesterday", 210, "Updates", unread = true, starred = false),
CategoryMail(3, "Riley Chen", "Coast trip photos", "I added the photos to the shared album. The ones from the boat tour came out great.", "Yesterday", 150, "Primary", unread = false, starred = true),
CategoryMail(4, "suiss Store", "Just for you: a Trade In offer", "Bring in your old phone and get up to \$650 off a new one.", "Monday", 0, "Promotions", unread = false, starred = false),
CategoryMail(5, "App Store", "Your receipt", "Your Studio Pro subscription renewed. Total: \$4.99.", "Monday", 0, "Transactions", unread = false, starred = false),
)
private class MailCategory(val value: String, val icon: ImageVector, val tint: (Colors) -> Color)
private val MailCategories = listOf(
MailCategory("Primary", PhosphorIcons.Bold.Users) { it.accent },
MailCategory("Transactions", PhosphorIcons.Bold.CreditCard) {
if (it.isDark) lerp(it.green, it.media, 0.4f) else lerp(it.green, it.label, 0.4f)
},
MailCategory("Updates", PhosphorIcons.Bold.Bell) {
if (it.isDark) lerp(it.purple, it.media, 0.3f) else lerp(it.purple, it.label, 0.2f)
},
MailCategory("Promotions", PhosphorIcons.Bold.Tag) {
if (it.isDark) lerp(it.pink, it.media, 0.25f) else lerp(it.pink, it.label, 0.2f)
},
)
private fun senderTint(colors: Colors, hue: Int): Color = when (hue) {
30 -> colors.orange
150 -> colors.green
210 -> colors.blue
else -> colors.label
}
private fun starTint(colors: Colors): Color = if (colors.isDark) colors.orange else lerp(colors.orange, colors.label, 0.45f)
@Composable
fun InboxCategories(
modifier: Modifier = Modifier,
onCategoryChange: (category: String) -> Unit = {},
onArchive: (id: Int) -> Unit = {},
onDelete: (id: Int) -> Unit = {},
onReply: (id: Int, text: String) -> Unit = { _, _ -> },
onStarChange: (id: Int, starred: Boolean) -> Unit = { _, _ -> },
) {
val colors = EsuissTheme.colors
val mail = remember { mutableStateListOf().apply { addAll(categoryMail()) } }
var category by rememberSaveable { mutableStateOf("Primary") }
var selected by rememberSaveable { mutableStateOf(1) }
var column by rememberSaveable { mutableStateOf(SplitViewColumn.List) }
val list = mail.filter { it.category == category }
val current = list.firstOrNull { it.id == selected }
fun remove(item: CategoryMail) {
mail.remove(item)
selected = mail.firstOrNull { it.category == category }?.id
column = SplitViewColumn.List
}
fun archive(item: CategoryMail) {
onArchive(item.id)
remove(item)
}
fun delete(item: CategoryMail) {
onDelete(item.id)
remove(item)
}
fun star(item: CategoryMail) {
onStarChange(item.id, !item.starred)
item.starred = !item.starred
}
Screen(modifier) {
SplitView(column = column, onColumnChange = { column = it }) {
SplitViewList(title = "Inbox") {
Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
Row(
modifier = Modifier.semantics { contentDescription = "Category" },
horizontalArrangement = Arrangement.spacedBy(6.dp),
verticalAlignment = Alignment.CenterVertically,
) {
MailCategories.forEach { item ->
CategoryToggle(
category = item,
pressed = category == item.value,
unread = mail.any { it.category == item.value && it.unread },
) {
onCategoryChange(item.value)
category = item.value
selected = mail.firstOrNull { it.category == item.value }?.id
}
}
}
key(category) {
Column {
if (list.isEmpty()) {
BasicText(
"No messages in $category.",
modifier = Modifier
.fillMaxWidth()
.padding(30.dp),
style = Typography.sm.copy(color = colors.labelSecondary, textAlign = TextAlign.Center),
)
}
list.forEachIndexed { index, item ->
key(item.id) {
CategoryAppear(index) {
SwipeActions(
leading = listOf(
SwipeAction(
label = if (item.starred) "Unstar" else "Star",
onClick = { star(item) },
icon = PhosphorIcons.Fill.FillStar,
),
),
trailing = listOf(
SwipeAction(
label = "Archive",
onClick = { archive(item) },
icon = PhosphorIcons.Bold.BoldArchive,
variant = SwipeActionVariant.Archive,
),
SwipeAction(
label = "Delete",
onClick = { delete(item) },
icon = PhosphorIcons.Bold.BoldTrash,
variant = SwipeActionVariant.Destructive,
fullSwipe = true,
),
),
) {
CategoryRow(item, active = item.id == selected) {
selected = item.id
item.unread = false
}
}
}
}
}
}
}
}
}
SplitViewDetail {
if (current != null) {
key(current.id) {
CategoryReader(
mail = current,
onReply = { onReply(current.id, it) },
onStar = { star(current) },
onArchive = { archive(current) },
onDelete = { delete(current) },
)
}
} else {
BasicText(
"No Message Selected",
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 48.dp),
style = Typography.base.copy(color = colors.labelSecondary, textAlign = TextAlign.Center),
)
}
}
}
}
}
@Composable
private fun CategoryToggle(category: MailCategory, pressed: Boolean, unread: Boolean, onClick: () -> Unit) {
val colors = EsuissTheme.colors
val shape = RoundedCornerShape(Radius.lg)
val fill by animateColorAsState(if (pressed) category.tint(colors) else colors.control, tween(350), label = "fill")
val ink by animateColorAsState(if (pressed) colors.onMedia else colors.labelSecondary, tween(350), label = "ink")
Box {
Row(
modifier = Modifier
.height(34.dp)
.clip(shape)
.background(fill, shape)
.selectable(
selected = pressed,
interactionSource = remember { MutableInteractionSource() },
indication = null,
role = Role.Tab,
onClick = onClick,
)
.semantics { contentDescription = category.value }
.animateContentSize(tween(350, easing = CategoryPopEasing))
.padding(horizontal = if (pressed) 14.dp else 11.dp),
horizontalArrangement = Arrangement.spacedBy(6.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Icon(category.icon, contentDescription = null, size = 16.dp, tint = ink)
if (pressed) {
BasicText(category.value, style = Typography.sm.copy(color = ink, fontWeight = FontWeight.SemiBold), maxLines = 1)
}
}
if (!pressed && unread) {
Box(
Modifier
.align(Alignment.TopEnd)
.offset(x = (-2).dp, y = 2.dp)
.size(10.dp)
.border(2.dp, colors.surface, CircleShape)
.padding(2.dp)
.background(colors.accent, CircleShape)
.semantics { stateDescription = "Unread" },
)
}
}
}
@Composable
private fun CategoryAppear(index: Int, content: @Composable () -> Unit) {
val appear = remember { Animatable(0f) }
LaunchedEffect(Unit) { appear.animateTo(1f, tween(700, delayMillis = index * 40, easing = CategoryRevealEasing)) }
Box(
Modifier.graphicsLayer {
alpha = appear.value
translationY = (1f - appear.value) * 6.dp.toPx()
},
) {
content()
}
}
@Composable
private fun CategoryRow(mail: CategoryMail, active: Boolean, onClick: () -> Unit) {
val colors = EsuissTheme.colors
SplitViewItem(isActive = active, onClick = onClick) {
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
Box(
Modifier
.padding(top = 6.dp)
.size(8.dp)
.background(if (mail.unread) colors.accent else Color.Transparent, CircleShape)
.semantics { if (mail.unread) stateDescription = "Unread" },
)
Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(1.dp)) {
Row(horizontalArrangement = Arrangement.spacedBy(6.dp), verticalAlignment = Alignment.CenterVertically) {
BasicText(
mail.from,
modifier = Modifier.weight(1f),
style = Typography.sm.copy(color = colors.label, fontWeight = FontWeight.SemiBold),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
if (mail.starred) {
Icon(PhosphorIcons.Fill.FillStar, contentDescription = "Starred", size = 12.dp, tint = starTint(colors))
}
BasicText(mail.time, style = Typography.xs.copy(color = colors.labelSecondary))
}
BasicText(
mail.subject,
style = Typography.sm.copy(color = colors.label),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
BasicText(
mail.body,
style = Typography.xs.copy(color = colors.labelSecondary),
maxLines = 2,
overflow = TextOverflow.Ellipsis,
)
}
}
}
}
@Composable
private fun CategorySender(mail: CategoryMail, size: Dp) {
val colors = EsuissTheme.colors
Box(
Modifier
.size(size)
.background(senderTint(colors, mail.hue), CircleShape),
contentAlignment = Alignment.Center,
) {
BasicText(
if (mail.hue != 0) mail.from.split(" ").mapNotNull { it.firstOrNull() }.joinToString("") else "s",
style = Typography.base.copy(
color = if (mail.hue != 0) colors.onMedia else colors.surface,
fontWeight = FontWeight.Medium,
fontSize = (size.value * 0.4f).sp,
),
)
}
}
@Composable
private fun CategoryReader(
mail: CategoryMail,
onReply: (String) -> Unit,
onStar: () -> Unit,
onArchive: () -> Unit,
onDelete: () -> Unit,
) {
val colors = EsuissTheme.colors
var replying by rememberSaveable { mutableStateOf(false) }
var reply by rememberSaveable { mutableStateOf("") }
val appear = remember { Animatable(0f) }
LaunchedEffect(Unit) { appear.animateTo(1f, tween(800, easing = CategoryRevealEasing)) }
Column(Modifier.fillMaxWidth()) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(50.dp),
horizontalArrangement = Arrangement.spacedBy(2.dp, Alignment.End),
verticalAlignment = Alignment.CenterVertically,
) {
CategoryAction(PhosphorIcons.Regular.ArrowBendUpLeft, "Reply") { replying = true }
CategoryAction(
if (mail.starred) PhosphorIcons.Fill.FillStar else PhosphorIcons.Regular.Star,
if (mail.starred) "Unstar" else "Star",
tint = if (mail.starred) starTint(colors) else colors.labelSecondary,
onClick = onStar,
)
CategoryAction(PhosphorIcons.Regular.Archive, "Archive", onClick = onArchive)
CategoryAction(PhosphorIcons.Regular.Trash, "Delete", onClick = onDelete)
}
Box(
Modifier
.fillMaxWidth()
.height(1.dp)
.background(colors.separator),
)
Column(
modifier = Modifier
.padding(top = 22.dp)
.graphicsLayer {
alpha = appear.value
translationY = (1f - appear.value) * 8.dp.toPx()
},
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
CategorySender(mail, 40.dp)
Column(Modifier.weight(1f)) {
BasicText(mail.from, style = Typography.base.copy(color = colors.label, fontWeight = FontWeight.SemiBold))
BasicText("To: Jamie Rivera", style = Typography.xs.copy(color = colors.labelSecondary))
}
BasicText(mail.time, style = Typography.xs.copy(color = colors.labelSecondary))
}
BasicText(
mail.subject,
modifier = Modifier.semantics { heading() },
style = Typography.xl.copy(color = colors.label, fontWeight = FontWeight.SemiBold),
)
BasicText(mail.body, style = Typography.base.copy(color = colors.label, lineHeight = 26.sp))
}
if (replying) {
Column(
modifier = Modifier.padding(top = 22.dp),
verticalArrangement = Arrangement.spacedBy(10.dp),
) {
Box(
Modifier
.fillMaxWidth()
.height(1.dp)
.background(colors.separator),
)
Textarea(
value = reply,
onValueChange = { reply = it },
modifier = Modifier
.padding(top = 8.dp)
.semantics { contentDescription = "Reply to ${mail.from}" },
placeholder = "Reply to ${mail.from}",
minLines = 4,
keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Sentences),
)
Row(horizontalArrangement = Arrangement.spacedBy(10.dp)) {
Button(
text = "Send",
onClick = {
onReply(reply.trim())
reply = ""
replying = false
},
size = ButtonSize.Sm,
enabled = reply.isNotBlank(),
)
Button(text = "Cancel", onClick = { replying = false }, size = ButtonSize.Sm, variant = ButtonVariant.Outline)
}
}
}
}
}
@Composable
private fun CategoryAction(
icon: ImageVector,
label: String,
tint: Color = EsuissTheme.colors.labelSecondary,
onClick: () -> Unit,
) {
Button(onClick = onClick, variant = ButtonVariant.Ghost, size = ButtonSize.Icon) {
Icon(icon, contentDescription = label, size = 18.dp, tint = tint)
}
}
```
```kt title="kotlin/components/Button.kt"
package com.esuiss.ui.components
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.esuiss.ui.theme.Colors
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Radius
import com.esuiss.ui.theme.Typography
enum class ButtonVariant { Default, Outline, Secondary, Tinted, Ghost, Plain, Destructive, Link }
enum class ButtonSize(
val height: Dp,
val horizontalPadding: Dp,
val spacing: Dp,
val iconSize: Dp,
val blockRadius: Dp,
val isIcon: Boolean,
) {
Default(36.dp, 16.dp, 6.dp, 16.dp, Radius.md, false),
Xs(24.dp, 11.dp, 4.dp, 12.dp, Radius.sm, false),
Sm(32.dp, 12.dp, 4.dp, 16.dp, Radius.md, false),
Lg(44.dp, 22.dp, 6.dp, 16.dp, Radius.lg, false),
Xl(56.dp, 31.dp, 8.dp, 16.dp, Radius.xl, false),
Icon(36.dp, 0.dp, 6.dp, 16.dp, Radius.md, true),
IconXs(24.dp, 0.dp, 4.dp, 12.dp, Radius.sm, true),
IconSm(32.dp, 0.dp, 4.dp, 16.dp, Radius.md, true),
IconLg(44.dp, 0.dp, 6.dp, 16.dp, Radius.lg, true),
IconXl(56.dp, 0.dp, 8.dp, 16.dp, Radius.xl, true),
;
val textStyle: TextStyle
get() = when (this) {
Xs, IconXs -> Typography.xs2
Lg, Xl -> Typography.base
else -> Typography.sm
}
}
@Composable
fun Button(
onClick: () -> Unit,
modifier: Modifier = Modifier,
variant: ButtonVariant = ButtonVariant.Default,
size: ButtonSize = ButtonSize.Default,
block: Boolean = false,
enabled: Boolean = true,
content: @Composable RowScope.() -> Unit,
) {
val colors = EsuissTheme.colors
val interaction = remember { MutableInteractionSource() }
val pressed by interaction.collectIsPressedAsState()
val foreground = buttonForeground(variant, colors, enabled)
val group = LocalButtonGroup.current?.takeIf { variant != ButtonVariant.Ghost && variant != ButtonVariant.Plain }
RegisterButtonGroupOutline(group, variant == ButtonVariant.Outline)
val shape = group.itemShape(if (block) RoundedCornerShape(size.blockRadius) else CircleShape)
val sizing = when {
block -> Modifier.fillMaxWidth().height(size.height)
size.isIcon -> Modifier.size(size.height)
else -> Modifier.height(size.height)
}
Row(
modifier = modifier
.then(sizing)
.clip(shape)
.background(buttonBackground(variant, colors, pressed && enabled, enabled), shape)
.then(
when {
variant != ButtonVariant.Outline -> Modifier
group != null -> Modifier.buttonGroupEdge(group, colors.separator)
else -> Modifier.border(1.dp, colors.separator, shape)
},
)
.clickable(
interactionSource = interaction,
indication = null,
enabled = enabled,
role = Role.Button,
onClick = onClick,
)
.padding(horizontal = size.horizontalPadding),
horizontalArrangement = Arrangement.spacedBy(size.spacing, Alignment.CenterHorizontally),
verticalAlignment = Alignment.CenterVertically,
) {
CompositionLocalProvider(
LocalButtonGroup provides null,
LocalContentStyle provides size.textStyle.copy(
color = foreground,
textDecoration = if (variant == ButtonVariant.Link && pressed && enabled) {
TextDecoration.Underline
} else {
null
},
),
LocalContentColor provides foreground,
LocalIconSize provides size.iconSize,
) {
content()
}
}
}
@Composable
fun Button(
text: String,
onClick: () -> Unit,
modifier: Modifier = Modifier,
variant: ButtonVariant = ButtonVariant.Default,
size: ButtonSize = ButtonSize.Default,
block: Boolean = false,
enabled: Boolean = true,
) {
Button(onClick, modifier, variant, size, block, enabled) {
BasicText(text, style = LocalContentStyle.current, maxLines = 1)
}
}
private fun buttonForeground(variant: ButtonVariant, colors: Colors, enabled: Boolean): Color =
when (variant) {
ButtonVariant.Default -> colors.onAccent
ButtonVariant.Outline, ButtonVariant.Secondary, ButtonVariant.Ghost ->
if (enabled) colors.label else colors.labelQuaternary
ButtonVariant.Tinted, ButtonVariant.Plain ->
if (enabled) colors.link else colors.link.copy(alpha = 0.4f)
ButtonVariant.Destructive ->
if (enabled) colors.danger else colors.danger.copy(alpha = 0.4f)
ButtonVariant.Link -> if (enabled) colors.link else colors.labelQuaternary
}
private fun buttonBackground(variant: ButtonVariant, colors: Colors, pressed: Boolean, enabled: Boolean): Color =
when (variant) {
ButtonVariant.Default -> when {
!enabled -> colors.accentDisabled
pressed -> colors.accentPressed
else -> colors.accent
}
ButtonVariant.Outline -> when {
pressed -> colors.itemPressed
colors.isDark -> Color.Transparent
else -> colors.surface
}
ButtonVariant.Secondary -> when {
!enabled -> colors.controlDisabled
pressed -> colors.controlPressed
else -> colors.control
}
ButtonVariant.Tinted -> if (pressed) colors.accentSurfacePressed else colors.accentSurface
ButtonVariant.Ghost -> if (pressed) colors.itemPressed else Color.Transparent
ButtonVariant.Plain -> if (pressed) colors.itemPressed else Color.Transparent
ButtonVariant.Destructive -> if (pressed) colors.dangerSurfacePressed else colors.dangerSurface
ButtonVariant.Link -> Color.Transparent
}
```
```kt title="kotlin/components/ButtonGroup.kt"
package com.esuiss.ui.components
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.Stable
import androidx.compose.runtime.compositionLocalOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.drawOutline
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.graphics.drawscope.translate
import androidx.compose.ui.graphics.takeOrElse
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.layout.Placeable
import androidx.compose.ui.layout.layout
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.layout.onPlaced
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.semantics.isTraversalGroup
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.constrainHeight
import androidx.compose.ui.unit.constrainWidth
import androidx.compose.ui.unit.dp
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Radius
import com.esuiss.ui.theme.Typography
enum class ButtonGroupOrientation { Horizontal, Vertical }
@Stable
internal class ButtonGroupState(val orientation: ButtonGroupOrientation) {
var nested by mutableIntStateOf(0)
var outlined by mutableIntStateOf(0)
}
internal val LocalButtonGroup = compositionLocalOf { null }
internal object ButtonGroupFill
private object ButtonGroupDivider
internal fun ButtonGroupState?.itemShape(default: Shape): Shape = if (this == null) default else RectangleShape
@Immutable
internal class ButtonGroupItem(val shape: Shape, val modifier: Modifier)
@Composable
internal fun rememberButtonGroupItem(group: ButtonGroupState?, default: Shape): ButtonGroupItem {
var edges by remember { mutableIntStateOf(0) }
val horizontal = group?.orientation != ButtonGroupOrientation.Vertical
val rtl = LocalLayoutDirection.current == LayoutDirection.Rtl
val shape = remember(edges, horizontal) {
val round = if (horizontal) CornerSize(50) else CornerSize(Radius.xl2)
val square = CornerSize(0)
val start = if (edges and 1 != 0) round else square
val end = if (edges and 2 != 0) round else square
if (horizontal) {
RoundedCornerShape(topStart = start, topEnd = end, bottomEnd = end, bottomStart = start)
} else {
RoundedCornerShape(topStart = start, topEnd = start, bottomEnd = end, bottomStart = end)
}
}
if (group == null || group.nested > 0) return ButtonGroupItem(default, Modifier)
return ButtonGroupItem(
shape = shape,
modifier = Modifier.onPlaced { coordinates ->
val parent = coordinates.parentLayoutCoordinates ?: return@onPlaced
val bounds = parent.localBoundingBoxOf(coordinates, clipBounds = false)
val first: Boolean
val last: Boolean
if (horizontal) {
val left = bounds.left <= 0.5f
val right = bounds.right >= parent.size.width - 0.5f
first = if (rtl) right else left
last = if (rtl) left else right
} else {
first = bounds.top <= 0.5f
last = bounds.bottom >= parent.size.height - 0.5f
}
edges = (if (first) 1 else 0) or (if (last) 2 else 0)
},
)
}
internal fun Modifier.buttonGroupEdge(group: ButtonGroupState?, color: Color): Modifier {
if (group == null) return this
return drawBehind {
val stroke = 1.dp.toPx()
if (group.orientation == ButtonGroupOrientation.Horizontal) {
val x = if (layoutDirection == LayoutDirection.Rtl) 0f else size.width - stroke
drawRect(color, Offset(x, 0f), Size(stroke, size.height))
} else {
drawRect(color, Offset(0f, size.height - stroke), Size(size.width, stroke))
}
}
}
@Composable
internal fun RegisterButtonGroupOutline(group: ButtonGroupState?, outlined: Boolean) {
DisposableEffect(group, outlined) {
if (group != null && outlined) group.outlined += 1
onDispose {
if (group != null && outlined) group.outlined -= 1
}
}
}
@Composable
fun ButtonGroup(
modifier: Modifier = Modifier,
orientation: ButtonGroupOrientation = ButtonGroupOrientation.Horizontal,
content: @Composable () -> Unit,
) {
val parent = LocalButtonGroup.current
DisposableEffect(parent) {
parent?.let { it.nested += 1 }
onDispose { parent?.let { it.nested -= 1 } }
}
val state = remember(orientation) { ButtonGroupState(orientation) }
val colors = EsuissTheme.colors
val joined = state.nested == 0
val horizontal = orientation == ButtonGroupOrientation.Horizontal
val shape = if (horizontal) CircleShape else RoundedCornerShape(Radius.xl2)
val outline = colors.separator
Layout(
content = {
CompositionLocalProvider(LocalButtonGroup provides state, content = content)
},
modifier = modifier
.semantics { isTraversalGroup = true }
.then(
if (joined) {
Modifier
.clip(shape)
.drawWithContent {
drawContent()
if (state.outlined > 0) {
val stroke = 1.dp.toPx()
val inset = stroke / 2
val path = shape.createOutline(
Size(size.width - stroke, size.height - stroke),
layoutDirection,
this,
)
translate(inset, inset) {
drawOutline(path, outline, style = Stroke(stroke))
}
}
}
} else {
Modifier
},
),
) { measurables, constraints ->
val gap = if (joined) 0 else 8.dp.roundToPx()
val items = measurables.filter { it.layoutId != ButtonGroupDivider }
if (horizontal) {
val height = if (constraints.hasFixedHeight) {
constraints.maxHeight
} else {
constraints.constrainHeight(items.maxOfOrNull { it.maxIntrinsicHeight(Constraints.Infinity) } ?: 0)
}
val fills = measurables.count { it.layoutId == ButtonGroupFill }
val placeables = arrayOfNulls(measurables.size)
var used = 0
measurables.forEachIndexed { index, measurable ->
if (measurable.layoutId != ButtonGroupFill) {
val placeable = measurable.measure(Constraints(minHeight = height, maxHeight = height))
placeables[index] = placeable
used += placeable.width
}
}
val gaps = gap * (items.size - 1).coerceAtLeast(0)
val remaining = if (constraints.hasBoundedWidth) {
(constraints.maxWidth - used - gaps).coerceAtLeast(0)
} else {
0
}
measurables.forEachIndexed { index, measurable ->
if (measurable.layoutId == ButtonGroupFill) {
val placeable = if (constraints.hasBoundedWidth) {
val width = remaining / fills
measurable.measure(Constraints(width, width, height, height))
} else {
measurable.measure(Constraints(minHeight = height, maxHeight = height))
}
placeables[index] = placeable
used += placeable.width
}
}
val width = constraints.constrainWidth(used + gaps)
layout(width, height) {
var x = 0
measurables.forEachIndexed { index, measurable ->
val placeable = placeables[index] ?: return@forEachIndexed
val divider = measurable.layoutId == ButtonGroupDivider
placeable.placeRelative(x, 0, zIndex = if (divider) 1f else 0f)
if (!divider) x += placeable.width + gap
}
}
} else {
val width = if (constraints.hasFixedWidth) {
constraints.maxWidth
} else {
constraints.constrainWidth(items.maxOfOrNull { it.maxIntrinsicWidth(Constraints.Infinity) } ?: 0)
}
val placeables = measurables.map { it.measure(Constraints(minWidth = width, maxWidth = width)) }
val gaps = gap * (items.size - 1).coerceAtLeast(0)
val height = constraints.constrainHeight(
placeables.filterIndexed { index, _ -> measurables[index].layoutId != ButtonGroupDivider }.sumOf { it.height } + gaps,
)
layout(width, height) {
var y = 0
measurables.forEachIndexed { index, measurable ->
val divider = measurable.layoutId == ButtonGroupDivider
placeables[index].placeRelative(0, y, zIndex = if (divider) 1f else 0f)
if (!divider) y += placeables[index].height + gap
}
}
}
}
}
@Composable
fun ButtonGroupText(
modifier: Modifier = Modifier,
content: @Composable RowScope.() -> Unit,
) {
val colors = EsuissTheme.colors
val shape = LocalButtonGroup.current.itemShape(CircleShape)
Row(
modifier = modifier
.clip(shape)
.background(colors.control, shape)
.padding(horizontal = 10.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalAlignment = Alignment.CenterVertically,
) {
CompositionLocalProvider(
LocalButtonGroup provides null,
LocalContentStyle provides Typography.sm.copy(color = colors.label),
LocalContentColor provides colors.label,
LocalIconSize provides 16.dp,
) {
content()
}
}
}
@Composable
fun ButtonGroupSeparator(
modifier: Modifier = Modifier,
orientation: Orientation = Orientation.Vertical,
color: Color = Color.Unspecified,
) {
val line = color.takeOrElse { EsuissTheme.colors.label.copy(alpha = 0.2f) }
Box(
modifier = modifier
.layoutId(ButtonGroupDivider)
.then(
if (orientation == Orientation.Vertical) {
Modifier.layout { measurable, constraints ->
val placeable = measurable.measure(constraints.copy(minWidth = 0, maxWidth = 0))
layout(0, placeable.height) { placeable.place(0, 0) }
}
} else {
Modifier.layout { measurable, constraints ->
val placeable = measurable.measure(constraints.copy(minHeight = 0, maxHeight = 0))
layout(placeable.width, 0) { placeable.place(0, 0) }
}
},
)
.drawBehind {
val stroke = 1.dp.toPx()
val inset = 9.dp.toPx()
if (orientation == Orientation.Vertical) {
val x = if (layoutDirection == LayoutDirection.Rtl) -stroke else 0f
drawRect(line, Offset(x, inset), Size(stroke, (size.height - inset * 2).coerceAtLeast(0f)))
} else {
drawRect(line, Offset(inset, 0f), Size((size.width - inset * 2).coerceAtLeast(0f), stroke))
}
},
)
}
```
```kt title="kotlin/components/Content.kt"
package com.esuiss.ui.components
import androidx.compose.runtime.compositionLocalOf
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
val LocalContentStyle = compositionLocalOf { TextStyle.Default }
val LocalContentColor = compositionLocalOf { Color.Unspecified }
val LocalIconSize = compositionLocalOf { 20.dp }
```
```kt title="kotlin/components/Field.kt"
package com.esuiss.ui.components
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.LayoutScopeMarker
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.remember
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.layout
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.semantics.LiveRegionMode
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Radius
import com.esuiss.ui.theme.Typography
enum class FieldOrientation { Vertical, Horizontal, Responsive }
enum class FieldGroupVariant { Default, Inset }
enum class FieldLegendVariant { Legend, Label }
@Immutable
internal class FieldState(val enabled: Boolean, val invalid: Boolean)
internal val LocalFieldState = staticCompositionLocalOf { FieldState(enabled = true, invalid = false) }
private val LocalFieldSetInset = staticCompositionLocalOf { false }
private val LocalFieldGroupVariant = staticCompositionLocalOf { null }
private val LocalFieldInset = staticCompositionLocalOf { false }
@LayoutScopeMarker
@Immutable
interface FieldScope {
fun Modifier.weight(weight: Float): Modifier
}
private class RowFieldScope(private val scope: RowScope) : FieldScope {
override fun Modifier.weight(weight: Float): Modifier = with(scope) { this@weight.weight(weight, true) }
}
private object ColumnFieldScope : FieldScope {
override fun Modifier.weight(weight: Float): Modifier = this
}
@Composable
fun FieldSet(
modifier: Modifier = Modifier,
variant: FieldGroupVariant = FieldGroupVariant.Default,
enabled: Boolean = true,
content: @Composable ColumnScope.() -> Unit,
) {
val inset = variant == FieldGroupVariant.Inset
CompositionLocalProvider(
LocalFieldSetInset provides inset,
LocalFieldState provides FieldState(enabled, LocalFieldState.current.invalid),
) {
Column(
modifier = modifier.fillMaxWidth(),
verticalArrangement = Arrangement.spacedBy(if (inset) 8.dp else 24.dp),
content = content,
)
}
}
@Composable
fun FieldLegend(
text: String,
modifier: Modifier = Modifier,
variant: FieldLegendVariant = FieldLegendVariant.Legend,
) {
val colors = EsuissTheme.colors
val inset = LocalFieldSetInset.current
val enabled = LocalFieldState.current.enabled
val style = if (inset) {
Typography.xs.copy(color = if (enabled) colors.labelSecondary else colors.labelQuaternary)
} else {
Typography.base.copy(color = if (enabled) colors.label else colors.labelQuaternary, fontWeight = FontWeight.SemiBold)
}
BasicText(
text = if (inset) text.uppercase() else text,
modifier = modifier
.then(if (variant == FieldLegendVariant.Legend) Modifier.semantics { heading() } else Modifier)
.padding(start = if (inset) 16.dp else 0.dp, bottom = if (inset) 0.dp else 12.dp),
style = style,
)
}
@Composable
fun FieldGroup(
modifier: Modifier = Modifier,
variant: FieldGroupVariant = FieldGroupVariant.Default,
content: @Composable () -> Unit,
) {
val colors = EsuissTheme.colors
CompositionLocalProvider(
LocalFieldSetInset provides false,
LocalFieldGroupVariant provides variant,
) {
if (variant == FieldGroupVariant.Inset) {
FormDividedStack(
orientation = Orientation.Vertical,
dividerColor = colors.separator,
modifier = modifier
.fillMaxWidth()
.clip(RoundedCornerShape(Radius.xl2))
.background(colors.surfaceSecondary),
dividerInsetStart = 16.dp,
content = content,
)
} else {
Column(
modifier = modifier.fillMaxWidth(),
verticalArrangement = Arrangement.spacedBy(28.dp),
) {
content()
}
}
}
}
@Composable
fun Field(
modifier: Modifier = Modifier,
orientation: FieldOrientation = FieldOrientation.Vertical,
enabled: Boolean = LocalFieldState.current.enabled,
invalid: Boolean = false,
content: @Composable FieldScope.() -> Unit,
) {
val inset = LocalFieldGroupVariant.current == FieldGroupVariant.Inset
val horizontal = when (orientation) {
FieldOrientation.Vertical -> false
FieldOrientation.Horizontal -> true
FieldOrientation.Responsive -> LocalConfiguration.current.screenWidthDp >= 768
}
val sizing = modifier
.fillMaxWidth()
.then(if (inset) Modifier.heightIn(min = 44.dp).padding(horizontal = 16.dp, vertical = 6.dp) else Modifier)
CompositionLocalProvider(
LocalFieldGroupVariant provides null,
LocalFieldInset provides inset,
LocalFieldState provides FieldState(enabled, invalid),
) {
if (horizontal) {
Row(
modifier = sizing,
horizontalArrangement = Arrangement.spacedBy(12.dp),
verticalAlignment = Alignment.CenterVertically,
) {
val scope = remember(this) { RowFieldScope(this) }
scope.content()
}
} else {
Column(
modifier = sizing,
verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.CenterVertically),
) {
ColumnFieldScope.content()
}
}
}
}
@Composable
fun FieldScope.FieldContent(
modifier: Modifier = Modifier,
content: @Composable ColumnScope.() -> Unit,
) {
Column(
modifier = modifier.weight(1f),
verticalArrangement = Arrangement.spacedBy(4.dp),
content = content,
)
}
@Composable
fun FieldLabel(text: String, modifier: Modifier = Modifier) {
val colors = EsuissTheme.colors
val enabled = LocalFieldState.current.enabled
BasicText(
text = text,
modifier = modifier,
style = Typography.base.copy(
color = if (enabled) colors.label else colors.labelQuaternary,
fontWeight = if (LocalFieldInset.current) FontWeight.Normal else FontWeight.SemiBold,
),
)
}
@Composable
fun FieldTitle(text: String, modifier: Modifier = Modifier) {
val colors = EsuissTheme.colors
val enabled = LocalFieldState.current.enabled
BasicText(
text = text,
modifier = modifier,
style = Typography.base.copy(
color = if (enabled) colors.label else colors.labelQuaternary,
fontWeight = FontWeight.SemiBold,
),
)
}
@Composable
fun FieldDescription(text: String, modifier: Modifier = Modifier) {
val colors = EsuissTheme.colors
val inset = LocalFieldSetInset.current
BasicText(
text = text,
modifier = modifier.padding(start = if (inset) 16.dp else 0.dp),
style = (if (inset) Typography.xs else Typography.sm).copy(color = colors.labelSecondary),
)
}
@Composable
fun FieldSeparator(
modifier: Modifier = Modifier,
text: String? = null,
) {
val colors = EsuissTheme.colors
Box(
modifier = modifier
.fillMaxWidth()
.layout { measurable, constraints ->
val placeable = measurable.measure(constraints)
val overlap = 8.dp.roundToPx()
val height = (placeable.height - overlap * 2).coerceAtLeast(0)
layout(placeable.width, height) { placeable.place(0, -overlap) }
}
.heightIn(min = 20.dp),
contentAlignment = Alignment.Center,
) {
Separator()
if (text != null) {
BasicText(
text = text,
modifier = Modifier.background(colors.surface).padding(horizontal = 8.dp),
style = Typography.sm.copy(color = colors.labelSecondary),
)
}
}
}
@Composable
fun FieldError(text: String?, modifier: Modifier = Modifier) {
if (text.isNullOrEmpty()) return
BasicText(
text = text,
modifier = modifier.semantics { liveRegion = LiveRegionMode.Polite },
style = Typography.sm.copy(color = EsuissTheme.colors.danger),
)
}
@Composable
fun FieldError(errors: List, modifier: Modifier = Modifier) {
val messages = errors.filterNotNull().filter { it.isNotEmpty() }.distinct()
val text = when (messages.size) {
0 -> null
1 -> messages[0]
else -> messages.joinToString("\n") { "• $it" }
}
FieldError(text, modifier)
}
```
```kt title="kotlin/components/FormSupport.kt"
package com.esuiss.ui.components
import android.provider.Settings
import androidx.compose.animation.core.CubicBezierEasing
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.text.selection.TextSelectionColors
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.layout.layout
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.constrainHeight
import androidx.compose.ui.unit.constrainWidth
import androidx.compose.ui.unit.dp
import com.esuiss.ui.theme.Colors
import com.esuiss.ui.theme.Shadow
internal val FormShadowXs = Shadow(0.dp, 1.dp, 2.dp, Color.Black.copy(alpha = 0.05f))
internal val FormShadowSm = Shadow(0.dp, 1.dp, 3.dp, Color.Black.copy(alpha = 0.1f))
internal val FormEasing = CubicBezierEasing(0.32f, 0.72f, 0f, 1f)
internal fun Modifier.formTouchTarget(): Modifier = layout { measurable, constraints ->
val minimum = 48.dp.roundToPx()
val placeable = measurable.measure(constraints)
val width = constraints.constrainWidth(maxOf(placeable.width, minimum))
val height = constraints.constrainHeight(maxOf(placeable.height, minimum))
layout(width, height) {
placeable.place((width - placeable.width) / 2, (height - placeable.height) / 2)
}
}
@Composable
internal fun formReducedMotion(): Boolean {
val context = LocalContext.current
return remember(context) {
Settings.Global.getFloat(context.contentResolver, Settings.Global.ANIMATOR_DURATION_SCALE, 1f) == 0f
}
}
internal fun formSelectionColors(colors: Colors) = TextSelectionColors(
handleColor = colors.accent,
backgroundColor = colors.accent.copy(alpha = 0.3f),
)
internal fun Modifier.formInputSurface(
colors: Colors,
shape: Shape,
focused: Boolean,
invalid: Boolean,
enabled: Boolean,
): Modifier {
val background = when {
!enabled -> colors.controlDisabled
invalid -> colors.danger.copy(alpha = if (colors.isDark) 0.1f else 0.05f)
else -> colors.control
}
val border = when {
invalid -> colors.danger
focused -> colors.focus
else -> Color.Transparent
}
return clip(shape).background(background, shape).border(1.dp, border, shape)
}
@Composable
internal fun FormDividedStack(
orientation: Orientation,
dividerColor: Color,
modifier: Modifier = Modifier,
dividerInsetStart: Dp = 0.dp,
content: @Composable () -> Unit,
) {
val boundaries = remember { mutableStateOf(IntArray(0)) }
val vertical = orientation == Orientation.Vertical
Layout(
content = content,
modifier = modifier.drawWithContent {
drawContent()
val stroke = 1.dp.toPx()
val inset = dividerInsetStart.toPx()
boundaries.value.forEach { position ->
if (vertical) {
val start = if (layoutDirection == LayoutDirection.Rtl) 0f else inset
drawRect(dividerColor, Offset(start, position.toFloat()), Size(size.width - inset, stroke))
} else {
val x = if (layoutDirection == LayoutDirection.Rtl) size.width - position - stroke else position.toFloat()
drawRect(dividerColor, Offset(x, 0f), Size(stroke, size.height))
}
}
},
) { measurables, constraints ->
if (vertical) {
val width = if (constraints.hasFixedWidth) {
constraints.maxWidth
} else {
constraints.constrainWidth(measurables.maxOfOrNull { it.maxIntrinsicWidth(Constraints.Infinity) } ?: 0)
}
val placeables = measurables.map {
it.measure(Constraints(minWidth = width, maxWidth = width))
}
val offsets = IntArray(placeables.size)
var y = 0
placeables.forEachIndexed { index, placeable ->
offsets[index] = y
y += placeable.height
}
val next = offsets.drop(1).toIntArray()
if (!next.contentEquals(boundaries.value)) boundaries.value = next
layout(width, constraints.constrainHeight(y)) {
placeables.forEachIndexed { index, placeable -> placeable.placeRelative(0, offsets[index]) }
}
} else {
val height = if (constraints.hasFixedHeight) {
constraints.maxHeight
} else {
constraints.constrainHeight(measurables.maxOfOrNull { it.maxIntrinsicHeight(Constraints.Infinity) } ?: 0)
}
val placeables = measurables.map {
it.measure(Constraints(minHeight = height, maxHeight = height))
}
val offsets = IntArray(placeables.size)
var x = 0
placeables.forEachIndexed { index, placeable ->
offsets[index] = x
x += placeable.width
}
val next = offsets.drop(1).toIntArray()
if (!next.contentEquals(boundaries.value)) boundaries.value = next
layout(constraints.constrainWidth(x), height) {
placeables.forEachIndexed { index, placeable -> placeable.placeRelative(offsets[index], 0) }
}
}
}
}
```
```kt title="kotlin/components/Haptics.kt"
package com.esuiss.ui.components
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.remember
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.hapticfeedback.HapticFeedback
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.platform.LocalHapticFeedback
val LocalHapticsEnabled = staticCompositionLocalOf { true }
@Composable
fun ProvideHaptics(enabled: Boolean, content: @Composable () -> Unit) {
CompositionLocalProvider(LocalHapticsEnabled provides enabled, content = content)
}
internal class Haptics(private val feedback: HapticFeedback, private val enabled: Boolean) {
fun perform(type: HapticFeedbackType) {
if (enabled) feedback.performHapticFeedback(type)
}
fun toggle(on: Boolean) = perform(if (on) HapticFeedbackType.ToggleOn else HapticFeedbackType.ToggleOff)
fun selection() = perform(HapticFeedbackType.SegmentTick)
}
@Composable
internal fun rememberHaptics(): Haptics {
val feedback = LocalHapticFeedback.current
val enabled = LocalHapticsEnabled.current
return remember(feedback, enabled) { Haptics(feedback, enabled) }
}
```
```kt title="kotlin/components/Icon.kt"
package com.esuiss.ui.components
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.takeOrElse
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.Dp
import com.esuiss.ui.theme.EsuissTheme
@Composable
fun Icon(
imageVector: ImageVector,
contentDescription: String?,
modifier: Modifier = Modifier,
size: Dp = LocalIconSize.current,
tint: Color = LocalContentColor.current.takeOrElse { EsuissTheme.colors.label },
) {
Image(
imageVector = imageVector,
contentDescription = contentDescription,
modifier = modifier.size(size),
colorFilter = ColorFilter.tint(tint),
)
}
```
```kt title="kotlin/components/Label.kt"
package com.esuiss.ui.components
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Typography
@Composable
fun Label(
modifier: Modifier = Modifier,
enabled: Boolean = true,
content: @Composable RowScope.() -> Unit,
) {
val colors = EsuissTheme.colors
val color = if (enabled) colors.label else colors.labelQuaternary
Row(
modifier = modifier,
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalAlignment = Alignment.CenterVertically,
) {
CompositionLocalProvider(
LocalContentStyle provides Typography.base.copy(color = color, fontWeight = FontWeight.SemiBold),
LocalContentColor provides color,
) {
content()
}
}
}
@Composable
fun Label(
text: String,
modifier: Modifier = Modifier,
enabled: Boolean = true,
) {
Label(modifier, enabled) {
BasicText(text, style = LocalContentStyle.current)
}
}
```
```kt title="kotlin/components/Screen.kt"
package com.esuiss.ui.components
import android.app.Activity
import android.content.Context
import android.content.ContextWrapper
import android.os.Build
import android.view.View
import android.view.Window
import android.view.WindowInsetsController
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.WindowInsetsSides
import androidx.compose.foundation.layout.displayCutout
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.only
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsIgnoringVisibility
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.union
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.SideEffect
import androidx.compose.runtime.Stable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.unit.dp
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Typography
@Stable
internal class KeyboardAccessoryInset {
var height by mutableIntStateOf(0)
}
internal val LocalKeyboardAccessory = staticCompositionLocalOf { null }
enum class ScreenEdge { Top, Bottom, Left, Right }
enum class ScreenVariant { Default, Secondary }
private val AllScreenEdges = setOf(ScreenEdge.Top, ScreenEdge.Bottom, ScreenEdge.Left, ScreenEdge.Right)
private fun Set.sides(): WindowInsetsSides? = map {
when (it) {
ScreenEdge.Top -> WindowInsetsSides.Top
ScreenEdge.Bottom -> WindowInsetsSides.Bottom
ScreenEdge.Left -> WindowInsetsSides.Left
ScreenEdge.Right -> WindowInsetsSides.Right
}
}.reduceOrNull { sides, side -> sides + side }
internal tailrec fun Context.findActivity(): Activity? = when (this) {
is Activity -> this
is ContextWrapper -> baseContext.findActivity()
else -> null
}
@Suppress("DEPRECATION")
private fun Window.applyLightBars(light: Boolean) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
val mask = WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS or WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS
insetsController?.setSystemBarsAppearance(if (light) mask else 0, mask)
return
}
var flags = decorView.systemUiVisibility
flags = if (light) flags or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR else flags and View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv()
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
flags = if (light) flags or View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR else flags and View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR.inv()
}
if (decorView.systemUiVisibility != flags) decorView.systemUiVisibility = flags
}
@OptIn(ExperimentalLayoutApi::class)
@Composable
fun Screen(
modifier: Modifier = Modifier,
edges: Set = AllScreenEdges,
variant: ScreenVariant = ScreenVariant.Default,
content: @Composable BoxScope.() -> Unit,
) {
val colors = EsuissTheme.colors
val view = LocalView.current
val light = !colors.isDark
SideEffect {
if (!view.isInEditMode) view.context.findActivity()?.window?.applyLightBars(light)
}
val sides = edges.sides()
val accessory = remember { KeyboardAccessoryInset() }
val fill = when (variant) {
ScreenVariant.Default -> colors.surface
ScreenVariant.Secondary -> colors.surfaceSecondary
}
Box(
modifier = modifier
.fillMaxSize()
.background(fill)
.then(
if (sides != null) {
Modifier.windowInsetsPadding(WindowInsets.systemBars.union(WindowInsets.displayCutout).union(WindowInsets.statusBarsIgnoringVisibility).only(sides))
} else {
Modifier
},
),
) {
CompositionLocalProvider(
LocalKeyboardAccessory provides accessory,
LocalContentStyle provides Typography.base.copy(color = colors.label),
LocalContentColor provides colors.label,
) {
content()
}
}
}
@Composable
fun ScreenContent(
modifier: Modifier = Modifier,
scrollable: Boolean = false,
contentPadding: PaddingValues = PaddingValues(16.dp),
verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(16.dp),
content: @Composable ColumnScope.() -> Unit,
) {
Column(
modifier = modifier
.fillMaxWidth()
.then(if (scrollable) Modifier.verticalScroll(rememberScrollState()) else Modifier)
.padding(contentPadding),
verticalArrangement = verticalArrangement,
content = content,
)
}
```
```kt title="kotlin/components/Separator.kt"
package com.esuiss.ui.components
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.esuiss.ui.theme.EsuissTheme
@Composable
fun Separator(
modifier: Modifier = Modifier,
orientation: Orientation = Orientation.Horizontal,
) {
val sizing = if (orientation == Orientation.Horizontal) {
Modifier.fillMaxWidth().height(1.dp)
} else {
Modifier.fillMaxHeight().width(1.dp)
}
Box(modifier.then(sizing).background(EsuissTheme.colors.separator))
}
```
```kt title="kotlin/components/Textarea.kt"
package com.esuiss.ui.components
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsFocusedAsState
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.text.selection.LocalTextSelectionColors
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.semantics.error
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Radius
import com.esuiss.ui.theme.Typography
@Composable
fun Textarea(
value: String,
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = LocalFieldState.current.enabled,
readOnly: Boolean = false,
invalid: Boolean = LocalFieldState.current.invalid,
placeholder: String? = null,
minLines: Int = 1,
maxLines: Int = Int.MAX_VALUE,
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
keyboardActions: KeyboardActions = KeyboardActions.Default,
interactionSource: MutableInteractionSource? = null,
) {
val colors = EsuissTheme.colors
val source = interactionSource ?: remember { MutableInteractionSource() }
val focused by source.collectIsFocusedAsState()
val shape = RoundedCornerShape(Radius.xl)
val textStyle = Typography.base.copy(color = if (enabled) colors.label else colors.labelQuaternary)
CompositionLocalProvider(LocalTextSelectionColors provides formSelectionColors(colors)) {
BasicTextField(
value = value,
onValueChange = onValueChange,
modifier = modifier
.fillMaxWidth()
.heightIn(min = 64.dp)
.formInputSurface(colors, shape, focused, invalid, enabled)
.then(if (invalid) Modifier.semantics { error("Invalid") } else Modifier),
enabled = enabled,
readOnly = readOnly,
textStyle = textStyle,
keyboardOptions = keyboardOptions,
keyboardActions = keyboardActions,
singleLine = false,
minLines = minLines,
maxLines = maxLines,
interactionSource = source,
cursorBrush = SolidColor(colors.accent),
decorationBox = { inner ->
Box(
modifier = Modifier.padding(12.dp),
contentAlignment = Alignment.TopStart,
) {
if (value.isEmpty() && placeholder != null) {
BasicText(
placeholder,
style = textStyle.copy(color = if (enabled) colors.labelSecondary else colors.labelQuaternary),
)
}
inner()
}
},
)
}
}
```
```kt title="kotlin/interactions/SwipeActions.kt"
package com.esuiss.ui.interactions
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.AnchoredDraggableDefaults
import androidx.compose.foundation.gestures.AnchoredDraggableState
import androidx.compose.foundation.gestures.DraggableAnchors
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.anchoredDraggable
import androidx.compose.foundation.gestures.animateTo
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.gestures.snapTo
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.SideEffect
import androidx.compose.runtime.Stable
import androidx.compose.runtime.State
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clipToBounds
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.compositeOver
import androidx.compose.ui.graphics.lerp
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.layout.layout
import androidx.compose.ui.layout.onSizeChanged
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.semantics.CustomAccessibilityAction
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.semantics.customActions
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.FormEasing
import com.esuiss.ui.components.Icon
import com.esuiss.ui.components.formReducedMotion
import com.esuiss.ui.components.rememberHaptics
import com.esuiss.ui.theme.Colors
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Typography
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.delay
import kotlinx.coroutines.flow.first
import kotlinx.coroutines.launch
import kotlin.math.abs
import kotlin.math.roundToInt
import kotlinx.coroutines.flow.drop
import kotlinx.coroutines.flow.filter
enum class SwipeActionsSide { Leading, Trailing }
enum class SwipeActionVariant { Default, Destructive, Archive, Neutral }
@Immutable
class SwipeAction(
val label: String,
val onClick: () -> Unit,
val icon: ImageVector? = null,
val variant: SwipeActionVariant = SwipeActionVariant.Default,
val fullSwipe: Boolean = false,
)
internal enum class SwipeActionsValue { Closed, Leading, Trailing, LeadingFull, TrailingFull }
private val SwipeSpec = tween(300, easing = FormEasing)
@Stable
class SwipeActionsState internal constructor() {
internal val anchored = AnchoredDraggableState(SwipeActionsValue.Closed)
internal var scope: CoroutineScope? = null
internal var reduced = false
val openSide: SwipeActionsSide?
get() = when (anchored.currentValue) {
SwipeActionsValue.Leading, SwipeActionsValue.LeadingFull -> SwipeActionsSide.Leading
SwipeActionsValue.Trailing, SwipeActionsValue.TrailingFull -> SwipeActionsSide.Trailing
SwipeActionsValue.Closed -> null
}
suspend fun close() = moveTo(SwipeActionsValue.Closed)
suspend fun open(side: SwipeActionsSide) =
moveTo(if (side == SwipeActionsSide.Leading) SwipeActionsValue.Leading else SwipeActionsValue.Trailing)
internal fun requestClose() {
scope?.launch { close() }
}
private suspend fun moveTo(target: SwipeActionsValue) {
if (anchored.anchors.size == 0) snapshotFlow { anchored.anchors.size }.first { it > 0 }
if (!anchored.anchors.hasPositionFor(target)) return
if (reduced) anchored.snapTo(target) else anchored.animateTo(target, SwipeSpec)
}
}
@Composable
fun rememberSwipeActionsState(): SwipeActionsState = remember { SwipeActionsState() }
private object SwipeActionsRegistry {
var open: SwipeActionsState? = null
fun claim(state: SwipeActionsState) {
val previous = open
open = state
if (previous != null && previous !== state) previous.requestClose()
}
fun release(state: SwipeActionsState) {
if (open === state) open = null
}
}
@Composable
fun SwipeActions(
modifier: Modifier = Modifier,
leading: List = emptyList(),
trailing: List = emptyList(),
state: SwipeActionsState = rememberSwipeActionsState(),
enabled: Boolean = true,
background: Color = EsuissTheme.colors.surface,
content: @Composable () -> Unit,
) {
val rtl = LocalLayoutDirection.current == LayoutDirection.Rtl
val reduced = formReducedMotion()
val scope = rememberCoroutineScope()
SideEffect {
state.scope = scope
state.reduced = reduced
}
DisposableEffect(state) {
onDispose { SwipeActionsRegistry.release(state) }
}
var rowWidth by remember { mutableIntStateOf(0) }
var leadingWidth by remember { mutableIntStateOf(0) }
var trailingWidth by remember { mutableIntStateOf(0) }
var removing by remember { mutableStateOf(false) }
val removal = remember { Animatable(1f) }
val leadingFull = leading.any { it.fullSwipe }
val trailingFull = trailing.any { it.fullSwipe }
val currentLeading by rememberUpdatedState(leading)
val currentTrailing by rememberUpdatedState(trailing)
val hasLeading = leading.isNotEmpty()
val hasTrailing = trailing.isNotEmpty()
LaunchedEffect(rowWidth, leadingWidth, trailingWidth, hasLeading, hasTrailing, leadingFull, trailingFull) {
if (rowWidth == 0) return@LaunchedEffect
val anchors = DraggableAnchors {
SwipeActionsValue.Closed at 0f
if (hasLeading && leadingWidth > 0) {
SwipeActionsValue.Leading at leadingWidth.toFloat()
if (leadingFull && rowWidth > leadingWidth) SwipeActionsValue.LeadingFull at rowWidth.toFloat()
}
if (hasTrailing && trailingWidth > 0) {
SwipeActionsValue.Trailing at -trailingWidth.toFloat()
if (trailingFull && rowWidth > trailingWidth) SwipeActionsValue.TrailingFull at -rowWidth.toFloat()
}
}
val target = state.anchored.targetValue
state.anchored.updateAnchors(anchors, if (anchors.hasPositionFor(target)) target else SwipeActionsValue.Closed)
}
LaunchedEffect(state) {
snapshotFlow { state.anchored.settledValue }.collect { value ->
when (value) {
SwipeActionsValue.Closed -> SwipeActionsRegistry.release(state)
SwipeActionsValue.Leading, SwipeActionsValue.Trailing -> SwipeActionsRegistry.claim(state)
SwipeActionsValue.LeadingFull, SwipeActionsValue.TrailingFull -> {
SwipeActionsRegistry.release(state)
val actions = if (value == SwipeActionsValue.LeadingFull) currentLeading else currentTrailing
val action = actions.firstOrNull { it.fullSwipe }
removing = true
if (!state.reduced) {
delay(180)
removal.animateTo(0f, tween(220, easing = FormEasing))
}
action?.onClick?.invoke()
delay(50)
state.anchored.snapTo(SwipeActionsValue.Closed)
removal.snapTo(1f)
removing = false
}
}
}
}
val offsetState = remember(state) {
derivedStateOf { state.anchored.offset.let { if (it.isNaN()) 0f else it } }
}
val fullSide by remember(state) {
derivedStateOf {
val anchors = state.anchored.anchors
val offset = offsetState.value
when {
offset > 0f && anchors.hasPositionFor(SwipeActionsValue.LeadingFull) -> {
val open = anchors.positionOf(SwipeActionsValue.Leading)
val full = anchors.positionOf(SwipeActionsValue.LeadingFull)
if (offset > (open + full) / 2f) SwipeActionsSide.Leading else null
}
offset < 0f && anchors.hasPositionFor(SwipeActionsValue.TrailingFull) -> {
val open = anchors.positionOf(SwipeActionsValue.Trailing)
val full = anchors.positionOf(SwipeActionsValue.TrailingFull)
if (offset < (open + full) / 2f) SwipeActionsSide.Trailing else null
}
else -> null
}
}
}
val currentHaptics by rememberUpdatedState(rememberHaptics())
LaunchedEffect(state) {
snapshotFlow { fullSide }
.drop(1)
.filter { it != null }
.collect { currentHaptics.perform(HapticFeedbackType.GestureThresholdActivate) }
}
val fullProgress = animateFloatAsState(
targetValue = if (fullSide != null) 1f else 0f,
animationSpec = if (reduced) tween(0) else tween(200, easing = FormEasing),
label = "full",
)
val revealedSide by remember(state) {
derivedStateOf {
val offset = offsetState.value
when {
offset > 0.5f -> SwipeActionsSide.Leading
offset < -0.5f -> SwipeActionsSide.Trailing
else -> null
}
}
}
val isOpen = revealedSide != null
val accessibilityActions = remember(leading, trailing) {
(leading + trailing).map { action ->
CustomAccessibilityAction(action.label) {
action.onClick()
true
}
}
}
Box(
modifier = modifier
.fillMaxWidth()
.onSizeChanged { rowWidth = it.width }
.layout { measurable, constraints ->
val placeable = measurable.measure(constraints)
val height = (placeable.height * removal.value).roundToInt()
layout(placeable.width, height) { placeable.place(0, 0) }
}
.clipToBounds()
.anchoredDraggable(
state = state.anchored,
orientation = Orientation.Horizontal,
enabled = enabled && !removing,
reverseDirection = rtl,
flingBehavior = AnchoredDraggableDefaults.flingBehavior(
state = state.anchored,
positionalThreshold = { it * 0.5f },
animationSpec = SwipeSpec,
),
),
) {
if (hasLeading) {
SwipeActionsStrip(
actions = leading,
side = SwipeActionsSide.Leading,
offset = offsetState,
fullProgress = fullProgress,
fullActive = fullSide == SwipeActionsSide.Leading,
visible = revealedSide == SwipeActionsSide.Leading,
onNaturalWidth = { leadingWidth = it },
onAction = { state.requestClose() },
modifier = Modifier.matchParentSize(),
)
}
if (hasTrailing) {
SwipeActionsStrip(
actions = trailing,
side = SwipeActionsSide.Trailing,
offset = offsetState,
fullProgress = fullProgress,
fullActive = fullSide == SwipeActionsSide.Trailing,
visible = revealedSide == SwipeActionsSide.Trailing,
onNaturalWidth = { trailingWidth = it },
onAction = { state.requestClose() },
modifier = Modifier.matchParentSize(),
)
}
Box(
modifier = Modifier
.fillMaxWidth()
.offset { IntOffset(offsetState.value.roundToInt(), 0) }
.background(background)
.pointerInput(Unit) {}
.semantics(mergeDescendants = true) {
if (enabled) customActions = accessibilityActions
},
) {
content()
if (isOpen) {
Box(
modifier = Modifier
.matchParentSize()
.clearAndSetSemantics {}
.pointerInput(state) {
detectTapGestures { state.requestClose() }
},
)
}
}
}
}
internal fun swipeActionColor(variant: SwipeActionVariant, colors: Colors): Color = when (variant) {
SwipeActionVariant.Default -> colors.accent
SwipeActionVariant.Destructive -> if (colors.isDark) lerp(colors.danger, colors.surface, 0.3f) else colors.danger
SwipeActionVariant.Archive -> if (colors.isDark) lerp(colors.purple, colors.surface, 0.3f) else lerp(colors.purple, colors.label, 0.15f)
SwipeActionVariant.Neutral -> if (colors.isDark) lerp(colors.gray, colors.surface, 0.4f) else lerp(colors.gray, colors.label, 0.35f)
}
@Composable
private fun SwipeActionsStrip(
actions: List,
side: SwipeActionsSide,
offset: State,
fullProgress: State,
fullActive: Boolean,
visible: Boolean,
onNaturalWidth: (Int) -> Unit,
onAction: () -> Unit,
modifier: Modifier,
) {
val fullIndex = actions.indexOfFirst { it.fullSwipe }
Layout(
modifier = modifier.then(if (visible) Modifier else Modifier.clearAndSetSemantics {}),
content = {
actions.forEachIndexed { index, action ->
SwipeActionButton(action, hidden = fullActive && index != fullIndex, onAction = onAction)
}
},
) { measurables, constraints ->
val height = constraints.maxHeight
val width = constraints.maxWidth
val minimum = 72.dp.roundToPx()
val natural = measurables.sumOf { maxOf(minimum, it.maxIntrinsicWidth(height)) }
onNaturalWidth(natural)
val raw = offset.value
val revealed = (if (side == SwipeActionsSide.Leading) raw else -raw).coerceAtLeast(0f)
val count = measurables.size
val base = maxOf(minimum.toFloat(), revealed / count)
val progress = if (fullIndex >= 0) fullProgress.value else 0f
val widths = IntArray(count) { index ->
val target = when {
fullIndex < 0 -> base
index == fullIndex -> base + (revealed - base) * progress
else -> base * (1f - progress)
}
if (revealed <= 0f) 0 else target.roundToInt().coerceAtLeast(0)
}
val placeables = measurables.mapIndexed { index, measurable ->
measurable.measure(Constraints.fixed(widths[index], height))
}
layout(width, height) {
if (side == SwipeActionsSide.Trailing) {
var x = width - revealed.roundToInt()
placeables.forEachIndexed { index, placeable ->
val alpha = if (fullIndex >= 0 && index != fullIndex) 1f - progress else 1f
placeable.placeRelativeWithLayer(x, 0) { this.alpha = alpha }
x += placeable.width
}
} else {
var x = revealed.roundToInt()
placeables.forEachIndexed { index, placeable ->
x -= placeable.width
val alpha = if (fullIndex >= 0 && index != fullIndex) 1f - progress else 1f
placeable.placeRelativeWithLayer(x, 0) { this.alpha = alpha }
}
}
}
}
}
@Composable
private fun SwipeActionButton(action: SwipeAction, hidden: Boolean, onAction: () -> Unit) {
val colors = EsuissTheme.colors
val interaction = remember { MutableInteractionSource() }
val pressed by interaction.collectIsPressedAsState()
val base = swipeActionColor(action.variant, colors)
val fill = if (pressed) Color.Black.copy(alpha = 0.12f).compositeOver(base) else base
Column(
modifier = Modifier
.background(fill)
.then(if (hidden) Modifier.clearAndSetSemantics {} else Modifier)
.clickable(
interactionSource = interaction,
indication = null,
role = Role.Button,
onClick = {
action.onClick()
onAction()
},
)
.padding(horizontal = 12.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(4.dp, Alignment.CenterVertically),
) {
if (action.icon != null) Icon(action.icon, contentDescription = null, size = 20.dp, tint = colors.onAccent)
BasicText(
action.label,
style = Typography.xs.copy(color = colors.onAccent, fontWeight = FontWeight.Medium, textAlign = TextAlign.Center),
maxLines = 2,
)
}
}
```
```kt title="kotlin/patterns/SplitView.kt"
package com.esuiss.ui.patterns
import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.togetherWith
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.mutableStateMapOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.onPlaced
import androidx.compose.ui.layout.positionInRoot
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.selected
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Bold
import com.adamglin.phosphoricons.Regular
import com.adamglin.phosphoricons.bold.CaretLeft
import com.adamglin.phosphoricons.regular.CaretRight
import com.esuiss.ui.components.Icon
import com.esuiss.ui.components.LocalContentColor
import com.esuiss.ui.components.LocalContentStyle
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Radius
import com.esuiss.ui.theme.Typography
import kotlin.math.abs
enum class SplitViewColumn { Sidebar, List, Detail }
private class SplitViewPane(
val kind: SplitViewColumn,
val title: String?,
val modifier: Modifier,
val content: @Composable ColumnScope.() -> Unit,
)
interface SplitViewScope {
fun SplitViewSidebar(title: String? = null, modifier: Modifier = Modifier, content: @Composable ColumnScope.() -> Unit)
fun SplitViewList(title: String? = null, modifier: Modifier = Modifier, content: @Composable ColumnScope.() -> Unit)
fun SplitViewDetail(title: String? = null, modifier: Modifier = Modifier, content: @Composable ColumnScope.() -> Unit)
}
private class SplitViewScopeImpl : SplitViewScope {
val panes = mutableListOf()
override fun SplitViewSidebar(title: String?, modifier: Modifier, content: @Composable ColumnScope.() -> Unit) {
panes += SplitViewPane(SplitViewColumn.Sidebar, title, modifier, content)
}
override fun SplitViewList(title: String?, modifier: Modifier, content: @Composable ColumnScope.() -> Unit) {
panes += SplitViewPane(SplitViewColumn.List, title, modifier, content)
}
override fun SplitViewDetail(title: String?, modifier: Modifier, content: @Composable ColumnScope.() -> Unit) {
panes += SplitViewPane(SplitViewColumn.Detail, title, modifier, content)
}
}
private class SplitViewItemEdges {
val edges = mutableStateMapOf>()
}
@Immutable
private class SplitViewContext(
val compact: Boolean,
val kind: SplitViewColumn,
val setColumn: (SplitViewColumn) -> Unit,
val items: SplitViewItemEdges = SplitViewItemEdges(),
)
private val LocalSplitView = staticCompositionLocalOf { null }
private fun next(kind: SplitViewColumn): SplitViewColumn = when (kind) {
SplitViewColumn.Sidebar -> SplitViewColumn.List
SplitViewColumn.List, SplitViewColumn.Detail -> SplitViewColumn.Detail
}
private fun previous(kind: SplitViewColumn): SplitViewColumn? = when (kind) {
SplitViewColumn.Sidebar -> null
SplitViewColumn.List -> SplitViewColumn.Sidebar
SplitViewColumn.Detail -> SplitViewColumn.List
}
private val WideBreakpoint = 768.dp
@Composable
fun SplitView(
modifier: Modifier = Modifier,
column: SplitViewColumn? = null,
defaultColumn: SplitViewColumn = SplitViewColumn.List,
onColumnChange: (SplitViewColumn) -> Unit = {},
content: SplitViewScope.() -> Unit,
) {
val panes = SplitViewScopeImpl().apply(content).panes.toList()
var uncontrolled by rememberSaveable { mutableStateOf(defaultColumn) }
val current = column ?: uncontrolled
val setColumn: (SplitViewColumn) -> Unit = { nextColumn ->
if (column == null) uncontrolled = nextColumn
onColumnChange(nextColumn)
}
val titles = panes.associate { it.kind to it.title }
BoxWithConstraints(modifier = modifier) {
if (maxWidth >= WideBreakpoint) {
WideSplitView(panes, setColumn)
} else {
AnimatedContent(
targetState = current,
transitionSpec = {
val forward = targetState.ordinal > initialState.ordinal
(slideInHorizontally(tween(300)) { if (forward) it / 3 else -it / 3 } + fadeIn(tween(300))) togetherWith
(slideOutHorizontally(tween(300)) { if (forward) -it / 3 else it / 3 } + fadeOut(tween(200)))
},
label = "splitView",
) { shown ->
val pane = panes.firstOrNull { it.kind == shown }
if (pane != null) {
val back = previous(pane.kind)?.takeIf { target ->
panes.any { it.kind == target } && !(target == SplitViewColumn.Sidebar && titles[target] == null)
}
CompactPane(pane, back, back?.let { titles[it] }, setColumn)
}
}
}
}
}
@Composable
private fun CompactPane(
pane: SplitViewPane,
back: SplitViewColumn?,
backTitle: String?,
setColumn: (SplitViewColumn) -> Unit,
) {
val colors = EsuissTheme.colors
CompositionLocalProvider(
LocalSplitView provides SplitViewContext(compact = true, kind = pane.kind, setColumn = setColumn, items = remember { SplitViewItemEdges() }),
LocalContentStyle provides Typography.base.copy(color = colors.label),
LocalContentColor provides colors.label,
) {
Column(
modifier = pane.modifier
.fillMaxSize()
.verticalScroll(rememberScrollState())
.padding(PaddingValues(horizontal = 16.dp, vertical = 8.dp)),
) {
if (back != null) {
val interaction = remember { MutableInteractionSource() }
val pressed by interaction.collectIsPressedAsState()
val tint = if (pressed) colors.link.copy(alpha = 0.6f) else colors.link
Row(
modifier = Modifier
.heightIn(min = 44.dp)
.clickable(interactionSource = interaction, indication = null, role = Role.Button) { setColumn(back) },
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(2.dp),
) {
Icon(PhosphorIcons.Bold.CaretLeft, contentDescription = if (backTitle == null) "Back" else null, size = 18.dp, tint = tint)
if (backTitle != null) BasicText(backTitle, style = Typography.base.copy(color = tint))
}
}
if (pane.title != null) {
BasicText(
pane.title,
modifier = Modifier.padding(bottom = 8.dp).semantics { heading() },
style = Typography.xl2.copy(color = colors.label, fontWeight = FontWeight.Bold),
)
}
pane.content(this)
}
}
}
@Composable
private fun WideSplitView(panes: List, setColumn: (SplitViewColumn) -> Unit) {
val colors = EsuissTheme.colors
val weights = panes.map {
when (it.kind) {
SplitViewColumn.Sidebar -> 0.20f
SplitViewColumn.List -> 0.32f
SplitViewColumn.Detail -> 0.48f
}
}
Row(modifier = Modifier.fillMaxSize()) {
panes.forEachIndexed { index, pane ->
if (index > 0) Box(modifier = Modifier.width(1.dp).fillMaxHeight().background(colors.separator))
CompositionLocalProvider(
LocalSplitView provides SplitViewContext(compact = false, kind = pane.kind, setColumn = setColumn),
LocalContentStyle provides Typography.base.copy(color = colors.label),
LocalContentColor provides colors.label,
) {
Column(
modifier = Modifier
.weight(weights[index])
.fillMaxHeight()
.verticalScroll(rememberScrollState())
.then(pane.modifier)
.padding(
when (pane.kind) {
SplitViewColumn.Sidebar -> PaddingValues(start = 12.dp, end = 12.dp, top = 4.dp, bottom = 12.dp)
SplitViewColumn.List -> PaddingValues(12.dp)
SplitViewColumn.Detail -> PaddingValues(32.dp)
},
),
) {
if (pane.title != null) {
when (pane.kind) {
SplitViewColumn.Sidebar -> BasicText(
pane.title,
modifier = Modifier.padding(start = 12.dp, end = 12.dp, top = 12.dp, bottom = 8.dp).semantics { heading() },
style = Typography.xs.copy(color = colors.labelSecondary, fontWeight = FontWeight.SemiBold),
)
SplitViewColumn.List -> Box(
modifier = Modifier.semantics {
heading()
contentDescription = pane.title
},
)
SplitViewColumn.Detail -> BasicText(
pane.title,
modifier = Modifier.padding(bottom = 4.dp).semantics { heading() },
style = Typography.xl2.copy(color = colors.label, fontWeight = FontWeight.SemiBold),
)
}
}
pane.content(this)
}
}
}
}
}
@Composable
fun SplitViewItem(
modifier: Modifier = Modifier,
isActive: Boolean = false,
onClick: () -> Unit = {},
content: @Composable ColumnScope.() -> Unit,
) {
val context = LocalSplitView.current ?: SplitViewContext(compact = true, kind = SplitViewColumn.List, setColumn = {})
val colors = EsuissTheme.colors
val interaction = remember { MutableInteractionSource() }
val pressed by interaction.collectIsPressedAsState()
val id = remember { Any() }
var top by remember { mutableFloatStateOf(Float.NaN) }
val click = {
onClick()
context.setColumn(next(context.kind))
}
if (context.compact) {
val separator = colors.separator
val edges = context.items.edges
DisposableEffect(edges) { onDispose { edges.remove(id) } }
val divided = edges.any { (key, edge) -> key !== id && abs(edge.second - top) < 1f }
Row(
modifier = modifier
.fillMaxWidth()
.heightIn(min = 44.dp)
.onPlaced {
val y = it.positionInRoot().y
top = y
edges[id] = y to y + it.size.height
}
.background(if (pressed) colors.itemPressed else Color.Transparent)
.drawBehind { if (divided) drawRect(separator, Offset.Zero, Size(size.width, 1.dp.toPx())) }
.clickable(interactionSource = interaction, indication = null, role = Role.Button, onClick = click)
.semantics { selected = isActive }
.padding(vertical = 12.dp),
horizontalArrangement = Arrangement.spacedBy(12.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Column(modifier = Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(2.dp), content = content)
if (context.kind != SplitViewColumn.Detail) {
Icon(PhosphorIcons.Regular.CaretRight, contentDescription = null, size = 16.dp, tint = colors.labelTertiary)
}
}
} else {
val list = context.kind == SplitViewColumn.List
val shape = RoundedCornerShape(if (list) Radius.xl else Radius.lg)
Row(
modifier = modifier
.fillMaxWidth()
.clip(shape)
.background(
when {
pressed -> colors.itemPressed
isActive -> colors.surfaceSecondary
else -> Color.Transparent
},
shape,
)
.clickable(interactionSource = interaction, indication = null, role = Role.Button, onClick = click)
.semantics { selected = isActive }
.padding(horizontal = 12.dp, vertical = if (list) 12.dp else 8.dp),
horizontalArrangement = Arrangement.spacedBy(12.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Column(modifier = Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(2.dp), content = content)
}
}
}
```
4. Update the `com.esuiss.ui` package names to match your project.
## Usage
```tsx
import { InboxCategories } from "@/components/blocks/inbox-categories"
```
```tsx
```
Replace `INITIAL_MAIL` with your messages and adjust `CATEGORIES` if you sort mail differently. Wire `onCategoryChange`, `onReply`, `onStarChange`, `onArchive` and `onDelete` to your mail service; the screen updates its own state either way.