Pin Pad

import { PinPad } from "@/components/ui/pin-pad"

export function PinPadExample() {
  return (
    <PinPad />
  )
}

import EsuissUI
import SwiftUI

struct PinPadDemo: View {
  let length: Int
  let error: Bool
  let biometric: Bool

  @State private var value: String

  init(value: String = "", length: Int = 6, error: Bool = false, biometric: Bool = false) {
    self.length = length
    self.error = error
    self.biometric = biometric
    _value = State(initialValue: value)
  }

  var body: some View {
    PinPad(value: $value, length: length, error: error, onBiometric: biometric ? {} : nil)
      .frame(maxWidth: .infinity)
  }
}

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.PinPad

@Composable
fun PinPadExample() {
    PinPadCentered { PinPad() }
}

@Composable
fun PinPadCentered(content: @Composable () -> Unit) {
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(24.dp),
    ) {
        content()
    }
}

import { PinPad } from "@/components/ui/pin-pad"

export function PinPadFilledExample() {
  return (
    <PinPad defaultValue="1234" />
  )
}

import EsuissUI
import SwiftUI

struct PinPadFilledExample: View {
  var body: some View {
    PinPadDemo(value: "1234")
  }
}

struct PinPadDemo: View {
  let length: Int
  let error: Bool
  let biometric: Bool

  @State private var value: String

  init(value: String = "", length: Int = 6, error: Bool = false, biometric: Bool = false) {
    self.length = length
    self.error = error
    self.biometric = biometric
    _value = State(initialValue: value)
  }

  var body: some View {
    PinPad(value: $value, length: length, error: error, onBiometric: biometric ? {} : nil)
      .frame(maxWidth: .infinity)
  }
}

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.PinPad

@Composable
fun PinPadFilledExample() {
    PinPadCentered { PinPad(defaultValue = "1234") }
}

@Composable
fun PinPadCentered(content: @Composable () -> Unit) {
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(24.dp),
    ) {
        content()
    }
}

import { PinPad } from "@/components/ui/pin-pad"

export function PinPadErrorStateExample() {
  return (
    <PinPad defaultValue="654321" error />
  )
}

import EsuissUI
import SwiftUI

struct PinPadErrorStateExample: View {
  var body: some View {
    PinPadDemo(value: "654321", error: true)
  }
}

struct PinPadDemo: View {
  let length: Int
  let error: Bool
  let biometric: Bool

  @State private var value: String

  init(value: String = "", length: Int = 6, error: Bool = false, biometric: Bool = false) {
    self.length = length
    self.error = error
    self.biometric = biometric
    _value = State(initialValue: value)
  }

  var body: some View {
    PinPad(value: $value, length: length, error: error, onBiometric: biometric ? {} : nil)
      .frame(maxWidth: .infinity)
  }
}

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.PinPad

@Composable
fun PinPadErrorStateExample() {
    PinPadCentered { PinPad(defaultValue = "654321", error = true) }
}

@Composable
fun PinPadCentered(content: @Composable () -> Unit) {
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(24.dp),
    ) {
        content()
    }
}

import * as React from "react"
import { View } from "react-native"
import { PinPad } from "@/components/ui/pin-pad"
import { Text } from "@/components/ui/text"

const PASSCODE = "123456"

function VerifyDemo() {
  const [value, setValue] = React.useState("")
  const [error, setError] = React.useState(false)
  const [status, setStatus] = React.useState("Enter 123456")
  return (
    <View className="items-center gap-6">
      <Text
        role="status"
        accessibilityLiveRegion="polite"
        className={
          error ? "text-sm text-destructive" : "text-sm text-muted-foreground"
        }
      >
        {status}
      </Text>
      <PinPad
        value={value}
        error={error}
        onValueChange={(next) => {
          setValue(next)
          if (next.length > 0) setError(false)
        }}
        onComplete={(code) => {
          if (code === PASSCODE) {
            setStatus("Unlocked")
          } else {
            setError(true)
            setStatus("Wrong passcode. Try again.")
            setTimeout(() => setValue(""), 600)
          }
        }}
      />
    </View>
  )
}

export function PinPadVerifyExample() {
  return (
    <VerifyDemo />
  )
}

import EsuissUI
import SwiftUI

struct PinPadVerify: View {
  private static let passcode = "123456"

  @State private var value = ""
  @State private var error = false
  @State private var status = "Enter 123456"

  var body: some View {
    VStack(spacing: 24) {
      Text(verbatim: status)
        .textStyle(.sm)
        .foregroundStyle(error ? EsuissColor.destructive : EsuissColor.mutedForeground)
        .accessibilityAddTraits(.updatesFrequently)
      PinPad(value: $value, error: error, onComplete: complete)
      .onChange(of: value) { _, next in
        if !next.isEmpty { error = false }
      }
    }
    .frame(maxWidth: .infinity)
  }

  func complete(_ code: String) {
    if code == Self.passcode {
      status = "Unlocked"
    } else {
      error = true
      status = "Wrong passcode. Try again."
      Task {
        try? await Task.sleep(for: .milliseconds(600))
        value = ""
      }
    }
  }
}

let passcode = "123456"

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.rememberCoroutineScope
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.semantics.LiveRegionMode
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.PinPad
import com.esuiss.ui.components.Text
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Typography
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

@Composable
fun PinPadCentered(content: @Composable () -> Unit) {
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(24.dp),
    ) {
        content()
    }
}

@Composable
fun PinPadVerify() {
    var value by rememberSaveable { mutableStateOf("") }
    var error by rememberSaveable { mutableStateOf(false) }
    var status by rememberSaveable { mutableStateOf("Enter 123456") }
    val scope = rememberCoroutineScope()
    val colors = EsuissTheme.colors
    PinPadCentered {
        Text(
            status,
            modifier = Modifier.semantics { liveRegion = LiveRegionMode.Polite },
            style = Typography.sm,
            color = if (error) colors.destructive else colors.mutedForeground,
        )
        PinPad(
            value = value,
            error = error,
            onValueChange = { next ->
                value = next
                if (next.isNotEmpty()) error = false
            },
            onComplete = { code ->
                if (code == PinPadPasscode) {
                    status = "Unlocked"
                } else {
                    error = true
                    status = "Wrong passcode. Try again."
                    scope.launch {
                        delay(600)
                        value = ""
                    }
                }
            },
        )
    }
}

import { PinPad } from "@/components/ui/pin-pad"

export function PinPadDisabledExample() {
  return (
    <PinPad defaultValue="12" disabled onBiometric={() => undefined} />
  )
}

import EsuissUI
import SwiftUI

struct PinPadDisabledExample: View {
  var body: some View {
    PinPadDemo(value: "12", biometric: true)
      .disabled(true)
  }
}

struct PinPadDemo: View {
  let length: Int
  let error: Bool
  let biometric: Bool

  @State private var value: String

  init(value: String = "", length: Int = 6, error: Bool = false, biometric: Bool = false) {
    self.length = length
    self.error = error
    self.biometric = biometric
    _value = State(initialValue: value)
  }

  var body: some View {
    PinPad(value: $value, length: length, error: error, onBiometric: biometric ? {} : nil)
      .frame(maxWidth: .infinity)
  }
}

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.PinPad

@Composable
fun PinPadDisabledExample() {
    PinPadCentered { PinPad(defaultValue = "12", enabled = false, onBiometric = {}) }
}

@Composable
fun PinPadCentered(content: @Composable () -> Unit) {
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(24.dp),
    ) {
        content()
    }
}

import { ScanSmileyIcon } from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { PinPad } from "@/components/ui/pin-pad"
import { Text } from "@/components/ui/text"

function BiometricDemo({ faceId = false }: { faceId?: boolean }) {
  const [log, setLog] = React.useState(0)
  return (
    <View className="items-center gap-6">
      <Text className="text-sm text-muted-foreground">
        {log > 0 ? `Biometric requested (${log})` : "Biometric key"}
      </Text>
      <PinPad
        biometricIcon={faceId ? ScanSmileyIcon : undefined}
        biometricLabel={faceId ? "Use Face ID" : "Use Touch ID"}
        onBiometric={() => setLog((count) => count + 1)}
      />
    </View>
  )
}

export function PinPadBiometricExample() {
  return (
    <BiometricDemo />
  )
}

import EsuissUI
import PhosphorSwift
import SwiftUI

struct PinPadBiometricExample: View {
  var body: some View {
    PinPadBiometric(faceID: false)
  }
}

struct PinPadBiometric: View {
  let faceID: Bool

  @State private var value = ""
  @State private var log = 0

  var body: some View {
    VStack(spacing: 24) {
      Group {
        if log > 0 {
          Text(verbatim: "Biometric requested (\(log))")
        } else {
          Text("Biometric key")
        }
      }
      .textStyle(.sm)
      .foregroundStyle(EsuissColor.mutedForeground)
      PinPad(
        value: $value,
        biometricIcon: faceID ? Ph.scanSmiley.regular : Ph.fingerprint.regular,
        biometricLabel: faceID ? "Use Face ID" : "Use Touch ID",
        onBiometric: { log += 1 }
      )
    }
    .frame(maxWidth: .infinity)
  }
}

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
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.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Regular
import com.adamglin.phosphoricons.regular.Fingerprint
import com.adamglin.phosphoricons.regular.ScanSmiley
import com.esuiss.ui.components.PinPad
import com.esuiss.ui.components.Text
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Typography

@Composable
fun PinPadBiometricExample() {
    PinPadBiometric(faceId = false)
}

@Composable
fun PinPadCentered(content: @Composable () -> Unit) {
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(24.dp),
    ) {
        content()
    }
}

@Composable
fun PinPadBiometric(faceId: Boolean) {
    var log by rememberSaveable { mutableIntStateOf(0) }
    PinPadCentered {
        Text(
            if (log > 0) "Biometric requested ($log)" else "Biometric key",
            style = Typography.sm,
            color = EsuissTheme.colors.mutedForeground,
        )
        PinPad(
            biometricIcon = if (faceId) PhosphorIcons.Regular.ScanSmiley else PhosphorIcons.Regular.Fingerprint,
            biometricLabel = if (faceId) "Use Face ID" else "Use Touch ID",
            onBiometric = { log += 1 },
        )
    }
}

import { ScanSmileyIcon } from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { PinPad } from "@/components/ui/pin-pad"
import { Text } from "@/components/ui/text"

function BiometricDemo({ faceId = false }: { faceId?: boolean }) {
  const [log, setLog] = React.useState(0)
  return (
    <View className="items-center gap-6">
      <Text className="text-sm text-muted-foreground">
        {log > 0 ? `Biometric requested (${log})` : "Biometric key"}
      </Text>
      <PinPad
        biometricIcon={faceId ? ScanSmileyIcon : undefined}
        biometricLabel={faceId ? "Use Face ID" : "Use Touch ID"}
        onBiometric={() => setLog((count) => count + 1)}
      />
    </View>
  )
}

export function PinPadFaceBiometricExample() {
  return (
    <BiometricDemo faceId />
  )
}

import EsuissUI
import PhosphorSwift
import SwiftUI

struct PinPadFaceBiometricExample: View {
  var body: some View {
    PinPadBiometric(faceID: true)
  }
}

struct PinPadBiometric: View {
  let faceID: Bool

  @State private var value = ""
  @State private var log = 0

  var body: some View {
    VStack(spacing: 24) {
      Group {
        if log > 0 {
          Text(verbatim: "Biometric requested (\(log))")
        } else {
          Text("Biometric key")
        }
      }
      .textStyle(.sm)
      .foregroundStyle(EsuissColor.mutedForeground)
      PinPad(
        value: $value,
        biometricIcon: faceID ? Ph.scanSmiley.regular : Ph.fingerprint.regular,
        biometricLabel: faceID ? "Use Face ID" : "Use Touch ID",
        onBiometric: { log += 1 }
      )
    }
    .frame(maxWidth: .infinity)
  }
}

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
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.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Regular
import com.adamglin.phosphoricons.regular.Fingerprint
import com.adamglin.phosphoricons.regular.ScanSmiley
import com.esuiss.ui.components.PinPad
import com.esuiss.ui.components.Text
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Typography

@Composable
fun PinPadFaceBiometricExample() {
    PinPadBiometric(faceId = true)
}

@Composable
fun PinPadCentered(content: @Composable () -> Unit) {
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(24.dp),
    ) {
        content()
    }
}

@Composable
fun PinPadBiometric(faceId: Boolean) {
    var log by rememberSaveable { mutableIntStateOf(0) }
    PinPadCentered {
        Text(
            if (log > 0) "Biometric requested ($log)" else "Biometric key",
            style = Typography.sm,
            color = EsuissTheme.colors.mutedForeground,
        )
        PinPad(
            biometricIcon = if (faceId) PhosphorIcons.Regular.ScanSmiley else PhosphorIcons.Regular.Fingerprint,
            biometricLabel = if (faceId) "Use Face ID" else "Use Touch ID",
            onBiometric = { log += 1 },
        )
    }
}

import { PinPad } from "@/components/ui/pin-pad"

export function PinPadFourDigitsExample() {
  return (
    <PinPad length={4} defaultValue="1" />
  )
}

import EsuissUI
import SwiftUI

struct PinPadFourDigitsExample: View {
  var body: some View {
    PinPadDemo(value: "1", length: 4)
  }
}

struct PinPadDemo: View {
  let length: Int
  let error: Bool
  let biometric: Bool

  @State private var value: String

  init(value: String = "", length: Int = 6, error: Bool = false, biometric: Bool = false) {
    self.length = length
    self.error = error
    self.biometric = biometric
    _value = State(initialValue: value)
  }

  var body: some View {
    PinPad(value: $value, length: length, error: error, onBiometric: biometric ? {} : nil)
      .frame(maxWidth: .infinity)
  }
}

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.PinPad

@Composable
fun PinPadFourDigitsExample() {
    PinPadCentered { PinPad(defaultValue = "1", length = 4) }
}

@Composable
fun PinPadCentered(content: @Composable () -> Unit) {
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(24.dp),
    ) {
        content()
    }
}