Wheel Picker

import { View } from "react-native"
import { WheelPicker, WheelPickerColumn, WheelPickerItem } from "@/components/ui/wheel-picker"

const fruits = [
  "Apple",
  "Banana",
  "Cherry",
  "Grape",
  "Lemon",
  "Mango",
  "Orange",
  "Peach",
  "Pear",
  "Plum",
]

export function WheelPickerExample() {
  return (
    <View className="w-80 rounded-2xl border border-foreground/5 bg-card p-4 shadow-md dark:border-foreground/10">
      <WheelPicker>
        <WheelPickerColumn accessibilityLabel="Fruit" defaultValue="Lemon">
          {fruits.map((fruit) => (
            <WheelPickerItem key={fruit} value={fruit}>
              {fruit}
            </WheelPickerItem>
          ))}
        </WheelPickerColumn>
      </WheelPicker>
    </View>
  )
}

import EsuissUI
import SwiftUI

struct WheelPickerExample: View {
  var body: some View {
    WheelPickerFrame {
      FruitDemo()
    }
  }
}

struct WheelPickerFrame<Content: View>: View {
  @ViewBuilder let content: () -> Content

  @Environment(\.colorScheme) private var colorScheme

  var body: some View {
    let shape = RoundedRectangle(cornerRadius: Radius.xl2, style: .continuous)
    content()
      .padding(16)
      .frame(width: 320)
      .background(EsuissColor.card, in: shape)
      .overlay {
        shape.strokeBorder(EsuissColor.foreground.opacity(colorScheme == .dark ? 0.1 : 0.05))
      }
      .shadow(Shadow.md)
  }
}

let wheelFruits = ["Apple", "Banana", "Cherry", "Grape", "Lemon", "Mango", "Orange", "Peach", "Pear", "Plum"]

struct FruitDemo: View {
  @State private var fruit = "Lemon"

  var body: some View {
    WheelPicker {
      WheelPickerColumn(selection: $fruit) {
        ForEach(wheelFruits, id: \.self) { item in
          WheelPickerItem(verbatim: item, value: item)
        }
      }
      .accessibilityLabel(Text("Fruit"))
    }
  }
}

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.WheelPicker
import com.esuiss.ui.components.WheelPickerColumn
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Radius
import com.esuiss.ui.theme.Shadows
import com.esuiss.ui.theme.shadow

@Composable
fun WheelPickerExample() {
    WheelPickerFrame { WheelPickerFruits() }
}

val wheelPickerFruits = listOf(
    "Apple",
    "Banana",
    "Cherry",
    "Grape",
    "Lemon",
    "Mango",
    "Orange",
    "Peach",
    "Pear",
    "Plum",
)

@Composable
fun WheelPickerFrame(content: @Composable () -> Unit) {
    val colors = EsuissTheme.colors
    val shape = RoundedCornerShape(Radius.xl2)
    Box(
        Modifier
            .width(320.dp)
            .shadow(Shadows.md, shape)
            .background(colors.card, shape)
            .border(1.dp, colors.foreground.copy(alpha = if (colors.isDark) 0.1f else 0.05f), shape)
            .padding(16.dp),
    ) {
        content()
    }
}

@Composable
fun WheelPickerFruits() {
    var value by rememberSaveable { mutableStateOf("Lemon") }
    WheelPicker(Modifier.fillMaxWidth()) {
        WheelPickerColumn(value, { value = it }, label = "Fruit") {
            wheelPickerFruits.forEach { WheelPickerItem(it, it) }
        }
    }
}

import { View } from "react-native"
import { WheelPicker, WheelPickerColumn, WheelPickerItem } from "@/components/ui/wheel-picker"

const slots = Array.from({ length: 11 }, (_, index) => {
  const minutes = 18 * 60 + index * 30
  return `${Math.floor(minutes / 60)}:${String(minutes % 60).padStart(2, "0")}`
})

const booked = new Set(["19:30", "20:00", "20:30"])

const minutes = Array.from({ length: 12 }, (_, step) =>
  String(step * 5).padStart(2, "0")
)

export function WheelPickerDisabledItemsExample() {
  return (
    <View className="w-80 rounded-2xl border border-foreground/5 bg-card p-4 shadow-md dark:border-foreground/10">
      <WheelPicker>
        <WheelPickerColumn
          accessibilityLabel="Reservation time"
          defaultValue="19:00"
        >
          {slots.map((slot) => (
            <WheelPickerItem key={slot} value={slot} disabled={booked.has(slot)}>
              {slot}
            </WheelPickerItem>
          ))}
        </WheelPickerColumn>
      </WheelPicker>
    </View>
  )
}

import EsuissUI
import SwiftUI

struct WheelPickerDisabledItemsExample: View {
  var body: some View {
    WheelPickerFrame {
      SlotsDemo()
    }
  }
}

struct WheelPickerFrame<Content: View>: View {
  @ViewBuilder let content: () -> Content

  @Environment(\.colorScheme) private var colorScheme

  var body: some View {
    let shape = RoundedRectangle(cornerRadius: Radius.xl2, style: .continuous)
    content()
      .padding(16)
      .frame(width: 320)
      .background(EsuissColor.card, in: shape)
      .overlay {
        shape.strokeBorder(EsuissColor.foreground.opacity(colorScheme == .dark ? 0.1 : 0.05))
      }
      .shadow(Shadow.md)
  }
}

let wheelSlots: [String] = (0..<11).map { index in
  let minutes = 18 * 60 + index * 30
  return String(format: "%d:%02d", minutes / 60, minutes % 60)
}

let wheelBooked: Set<String> = ["19:30", "20:00", "20:30"]

struct SlotsDemo: View {
  @State private var slot = "19:00"

  var body: some View {
    WheelPicker {
      WheelPickerColumn(selection: $slot) {
        ForEach(wheelSlots, id: \.self) { item in
          WheelPickerItem(verbatim: item, value: item)
            .disabled(wheelBooked.contains(item))
        }
      }
      .accessibilityLabel(Text("Reservation time"))
    }
  }
}

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.WheelPicker
import com.esuiss.ui.components.WheelPickerColumn
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Radius
import com.esuiss.ui.theme.Shadows
import com.esuiss.ui.theme.shadow

@Composable
fun WheelPickerDisabledItemsExample() {
    WheelPickerFrame { WheelPickerDisabledItems() }
}

val wheelPickerSlots = List(11) { index ->
    val minutes = 18 * 60 + index * 30
    "${minutes / 60}:${(minutes % 60).toString().padStart(2, '0')}"
}

val wheelPickerBooked = setOf("19:30", "20:00", "20:30")

@Composable
fun WheelPickerFrame(content: @Composable () -> Unit) {
    val colors = EsuissTheme.colors
    val shape = RoundedCornerShape(Radius.xl2)
    Box(
        Modifier
            .width(320.dp)
            .shadow(Shadows.md, shape)
            .background(colors.card, shape)
            .border(1.dp, colors.foreground.copy(alpha = if (colors.isDark) 0.1f else 0.05f), shape)
            .padding(16.dp),
    ) {
        content()
    }
}

@Composable
fun WheelPickerDisabledItems() {
    var value by rememberSaveable { mutableStateOf("19:00") }
    WheelPicker(Modifier.fillMaxWidth()) {
        WheelPickerColumn(value, { value = it }, label = "Reservation time") {
            wheelPickerSlots.forEach { WheelPickerItem(it, it, enabled = it !in wheelPickerBooked) }
        }
    }
}

import * as React from "react"
import { View } from "react-native"
import { Text } from "@/components/ui/text"
import { WheelPicker, WheelPickerColumn, WheelPickerItem } from "@/components/ui/wheel-picker"

function toDayValue(date: Date) {
  return [
    date.getFullYear(),
    String(date.getMonth() + 1).padStart(2, "0"),
    String(date.getDate()).padStart(2, "0"),
  ].join("-")
}

const today = new Date(2026, 9, 4)

const days = Array.from({ length: 15 }, (_, index) => {
  const date = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() + index - 7
  )
  const label =
    index === 7
      ? "Today"
      : date.toLocaleDateString("en-US", {
          weekday: "short",
          month: "short",
          day: "numeric",
        })
  return { value: toDayValue(date), label }
})

const hours = Array.from({ length: 24 }, (_, hour) =>
  String(hour).padStart(2, "0")
)

const minutes = Array.from({ length: 12 }, (_, step) =>
  String(step * 5).padStart(2, "0")
)

function DateTimeExample() {
  const [day, setDay] = React.useState(toDayValue(today))
  const [hour, setHour] = React.useState("19")
  const [minute, setMinute] = React.useState("30")

  return (
    <View className="gap-3">
      <WheelPicker>
        <WheelPickerColumn
          accessibilityLabel="Day"
          value={day}
          onValueChange={setDay}
          className="grow-[1.6]"
        >
          {days.map(({ value, label }) => (
            <WheelPickerItem key={value} value={value} className="justify-end">
              {label}
            </WheelPickerItem>
          ))}
        </WheelPickerColumn>
        <WheelPickerColumn
          accessibilityLabel="Hour"
          value={hour}
          onValueChange={setHour}
        >
          {hours.map((value) => (
            <WheelPickerItem key={value} value={value}>
              {value}
            </WheelPickerItem>
          ))}
        </WheelPickerColumn>
        <WheelPickerColumn
          accessibilityLabel="Minute"
          value={minute}
          onValueChange={setMinute}
          className="grow"
        >
          {minutes.map((value) => (
            <WheelPickerItem
              key={value}
              value={value}
              className="justify-start"
            >
              {value}
            </WheelPickerItem>
          ))}
        </WheelPickerColumn>
      </WheelPicker>
      <Text className="text-center text-sm text-muted-foreground tabular-nums">
        {day} {hour}:{minute}
      </Text>
    </View>
  )
}

export function WheelPickerDateTimeExample() {
  return (
    <View className="w-80 rounded-2xl border border-foreground/5 bg-card p-4 shadow-md dark:border-foreground/10">
      <DateTimeExample />
    </View>
  )
}

import EsuissUI
import SwiftUI

struct WheelPickerDateTimeExample: View {
  var body: some View {
    WheelPickerFrame {
      DateTimeDemo()
    }
  }
}

struct WheelPickerFrame<Content: View>: View {
  @ViewBuilder let content: () -> Content

  @Environment(\.colorScheme) private var colorScheme

  var body: some View {
    let shape = RoundedRectangle(cornerRadius: Radius.xl2, style: .continuous)
    content()
      .padding(16)
      .frame(width: 320)
      .background(EsuissColor.card, in: shape)
      .overlay {
        shape.strokeBorder(EsuissColor.foreground.opacity(colorScheme == .dark ? 0.1 : 0.05))
      }
      .shadow(Shadow.md)
  }
}

struct WheelDay {
  let value: String
  let label: String
}

let wheelDays: [WheelDay] = {
  var calendar = Calendar(identifier: .gregorian)
  calendar.timeZone = TimeZone(identifier: "UTC") ?? .current
  let today = calendar.date(from: DateComponents(year: 2026, month: 10, day: 4)) ?? .now
  let label = Date.FormatStyle(timeZone: calendar.timeZone)
    .weekday(.abbreviated)
    .month(.abbreviated)
    .day()
    .locale(Locale(identifier: "en_US"))
  return (0..<15).map { index in
    let date = calendar.date(byAdding: .day, value: index - 7, to: today) ?? today
    let parts = calendar.dateComponents([.year, .month, .day], from: date)
    let value = String(format: "%04d-%02d-%02d", parts.year ?? 0, parts.month ?? 0, parts.day ?? 0)
    return WheelDay(value: value, label: index == 7 ? "Today" : date.formatted(label))
  }
}()

let wheelHours = (0..<24).map { String(format: "%02d", $0) }

let wheelMinutes = (0..<12).map { String(format: "%02d", $0 * 5) }

struct DateTimeDemo: View {
  @State private var day = "2026-10-04"
  @State private var hour = "19"
  @State private var minute = "30"

  var body: some View {
    VStack(spacing: 12) {
      WheelPicker {
        WheelPickerColumn(selection: $day, alignment: .trailing) {
          ForEach(wheelDays, id: \.value) { item in
            WheelPickerItem(verbatim: item.label, value: item.value)
          }
        }
        .frame(minWidth: 150, maxWidth: .infinity, alignment: .trailing)
        .accessibilityLabel(Text("Day"))
        WheelPickerColumn(selection: $hour) {
          ForEach(wheelHours, id: \.self) { item in
            WheelPickerItem(verbatim: item, value: item)
          }
        }
        .accessibilityLabel(Text("Hour"))
        WheelPickerColumn(selection: $minute, alignment: .leading) {
          ForEach(wheelMinutes, id: \.self) { item in
            WheelPickerItem(verbatim: item, value: item)
          }
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .accessibilityLabel(Text("Minute"))
      }
      Text(verbatim: "\(day) \(hour):\(minute)")
        .textStyle(.sm)
        .monospacedDigit()
        .foregroundStyle(EsuissColor.mutedForeground)
        .multilineTextAlignment(.center)
        .frame(maxWidth: .infinity)
    }
  }
}

import androidx.compose.foundation.background
import androidx.compose.foundation.border
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.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
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.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.WheelPicker
import com.esuiss.ui.components.WheelPickerColumn
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Radius
import com.esuiss.ui.theme.Shadows
import com.esuiss.ui.theme.Typography
import com.esuiss.ui.theme.shadow
import java.text.SimpleDateFormat
import java.util.Calendar
import java.util.Locale

@Composable
fun WheelPickerDateTimeExample() {
    WheelPickerFrame { WheelPickerDateTime() }
}

class WheelPickerDay(val value: String, val label: String)

val wheelPickerDays: List<WheelPickerDay> = run {
    val format = SimpleDateFormat("EEE, MMM d", Locale.US)
    val key = SimpleDateFormat("yyyy-MM-dd", Locale.US)
    List(15) { index ->
        val calendar = Calendar.getInstance(Locale.US)
        calendar.clear()
        calendar.set(2026, Calendar.OCTOBER, 4 + index - 7)
        WheelPickerDay(key.format(calendar.time), if (index == 7) "Today" else format.format(calendar.time))
    }
}

val wheelPickerHours = List(24) { it.toString().padStart(2, '0') }

val wheelPickerMinutes = List(12) { (it * 5).toString().padStart(2, '0') }

@Composable
fun WheelPickerFrame(content: @Composable () -> Unit) {
    val colors = EsuissTheme.colors
    val shape = RoundedCornerShape(Radius.xl2)
    Box(
        Modifier
            .width(320.dp)
            .shadow(Shadows.md, shape)
            .background(colors.card, shape)
            .border(1.dp, colors.foreground.copy(alpha = if (colors.isDark) 0.1f else 0.05f), shape)
            .padding(16.dp),
    ) {
        content()
    }
}

@Composable
fun WheelPickerDateTime() {
    var day by rememberSaveable { mutableStateOf(wheelPickerDays[7].value) }
    var hour by rememberSaveable { mutableStateOf("19") }
    var minute by rememberSaveable { mutableStateOf("30") }
    Column(Modifier.fillMaxWidth(), verticalArrangement = Arrangement.spacedBy(12.dp)) {
        WheelPicker(Modifier.fillMaxWidth()) {
            WheelPickerColumn(
                day,
                { day = it },
                Modifier.weight(1.6f),
                label = "Day",
                horizontalAlignment = Alignment.End,
            ) {
                wheelPickerDays.forEach { WheelPickerItem(it.value, it.label) }
            }
            WheelPickerColumn(hour, { hour = it }, label = "Hour") {
                wheelPickerHours.forEach { WheelPickerItem(it, it) }
            }
            WheelPickerColumn(
                minute,
                { minute = it },
                Modifier.weight(1f),
                label = "Minute",
                horizontalAlignment = Alignment.Start,
            ) {
                wheelPickerMinutes.forEach { WheelPickerItem(it, it) }
            }
        }
        Text(
            "$day $hour:$minute",
            modifier = Modifier.fillMaxWidth(),
            style = Typography.sm.copy(fontFeatureSettings = "tnum"),
            color = EsuissTheme.colors.mutedForeground,
            textAlign = TextAlign.Center,
        )
    }
}