Amount Input

import { AmountInput } from "@/components/ui/amount-input"

export function AmountInputExample() {
  return (
    <AmountInput currency="USD" locale="en-US" />
  )
}

import EsuissUI
import SwiftUI

struct AmountInputExample: View {
  var body: some View {
    AmountInputDemo(currency: "USD", locale: "en-US")
  }
}

struct AmountInputDemo: View {
  let currency: String
  let locale: String
  var max: Double?

  @State private var value: String

  init(currency: String, locale: String, initial: String = "", max: Double? = nil) {
    self.currency = currency
    self.locale = locale
    self.max = max
    _value = State(initialValue: initial)
  }

  var body: some View {
    AmountInput(value: $value, currency: currency, max: max)
      .environment(\.locale, Locale(identifier: locale))
  }
}

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.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.esuiss.ui.components.AmountInput
import java.util.Locale

@Composable
fun AmountInputExample() {
    AmountInputStory("USD", "en-US")
}

@Composable
fun AmountInputStory(
    currency: String,
    locale: String,
    defaultValue: String = "",
    max: Double? = null,
    enabled: Boolean = true,
) {
    var value by rememberSaveable { mutableStateOf(defaultValue) }
    AmountInput(
        modifier = Modifier.fillMaxWidth(),
        value = value,
        onValueChange = { next, _ -> value = next },
        currency = currency,
        locale = Locale.forLanguageTag(locale),
        max = max,
        enabled = enabled,
    )
}

import { AmountInput } from "@/components/ui/amount-input"

export function AmountInputFilledExample() {
  return (
    <AmountInput currency="USD" locale="en-US" defaultValue="1250.5" />
  )
}

import EsuissUI
import SwiftUI

struct AmountInputFilledExample: View {
  var body: some View {
    AmountInputDemo(currency: "USD", locale: "en-US", initial: "1250.5")
  }
}

struct AmountInputDemo: View {
  let currency: String
  let locale: String
  var max: Double?

  @State private var value: String

  init(currency: String, locale: String, initial: String = "", max: Double? = nil) {
    self.currency = currency
    self.locale = locale
    self.max = max
    _value = State(initialValue: initial)
  }

  var body: some View {
    AmountInput(value: $value, currency: currency, max: max)
      .environment(\.locale, Locale(identifier: locale))
  }
}

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.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.esuiss.ui.components.AmountInput
import java.util.Locale

@Composable
fun AmountInputFilledExample() {
    AmountInputStory("USD", "en-US", "1250.5")
}

@Composable
fun AmountInputStory(
    currency: String,
    locale: String,
    defaultValue: String = "",
    max: Double? = null,
    enabled: Boolean = true,
) {
    var value by rememberSaveable { mutableStateOf(defaultValue) }
    AmountInput(
        modifier = Modifier.fillMaxWidth(),
        value = value,
        onValueChange = { next, _ -> value = next },
        currency = currency,
        locale = Locale.forLanguageTag(locale),
        max = max,
        enabled = enabled,
    )
}

import * as React from "react"
import { View } from "react-native"
import { AmountInput } from "@/components/ui/amount-input"
import { Text } from "@/components/ui/text"

function ControlledDemo() {
  const [value, setValue] = React.useState("")
  const [amount, setAmount] = React.useState(0)
  return (
    <View className="items-center gap-4">
      <AmountInput
        currency="USD"
        locale="en-US"
        value={value}
        onValueChange={(next, nextAmount) => {
          setValue(next)
          setAmount(nextAmount)
        }}
      />
      <Text className="text-sm text-muted-foreground">
        {`value "${value}" · amount ${amount}`}
      </Text>
    </View>
  )
}

export function AmountInputControlledExample() {
  return (
    <ControlledDemo />
  )
}

import EsuissUI
import SwiftUI

struct AmountInputControlledDemo: View {
  @State private var value = ""
  @State private var amount: Double = 0

  var body: some View {
    VStack(spacing: 16) {
      AmountInput(value: $value, currency: "USD") { _, next in
        amount = next
      }
      .environment(\.locale, Locale(identifier: "en-US"))
      Text(verbatim: "value \"\(value)\" · amount \(amountText)")
        .textStyle(.sm)
        .foregroundStyle(EsuissColor.mutedForeground)
    }
    .frame(maxWidth: .infinity)
  }

  var amountText: String {
    amount.rounded() == amount && abs(amount) < 1e15 ? String(Int64(amount)) : String(amount)
  }
}

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.mutableDoubleStateOf
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.unit.dp
import com.esuiss.ui.components.AmountInput
import com.esuiss.ui.components.Text
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Typography
import java.util.Locale

@Composable
fun AmountInputControlled() {
    var value by rememberSaveable { mutableStateOf("") }
    var amount by rememberSaveable { mutableDoubleStateOf(0.0) }
    Column(
        Modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        AmountInput(
            modifier = Modifier.fillMaxWidth(),
            value = value,
            onValueChange = { next, nextAmount ->
                value = next
                amount = nextAmount
            },
            currency = "USD",
            locale = Locale.forLanguageTag("en-US"),
        )
        val shown = if (amount % 1.0 == 0.0) amount.toLong().toString() else amount.toString()
        Text(
            "value \"$value\" · amount $shown",
            style = Typography.sm.copy(color = EsuissTheme.colors.mutedForeground),
        )
    }
}

import { AmountInput } from "@/components/ui/amount-input"

export function AmountInputLongAmountExample() {
  return (
    <AmountInput currency="USD" locale="en-US" defaultValue="98765432109.99" />
  )
}

import EsuissUI
import SwiftUI

struct AmountInputLongAmountExample: View {
  var body: some View {
    AmountInputDemo(currency: "USD", locale: "en-US", initial: "98765432109.99")
  }
}

struct AmountInputDemo: View {
  let currency: String
  let locale: String
  var max: Double?

  @State private var value: String

  init(currency: String, locale: String, initial: String = "", max: Double? = nil) {
    self.currency = currency
    self.locale = locale
    self.max = max
    _value = State(initialValue: initial)
  }

  var body: some View {
    AmountInput(value: $value, currency: currency, max: max)
      .environment(\.locale, Locale(identifier: locale))
  }
}

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.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.esuiss.ui.components.AmountInput
import java.util.Locale

@Composable
fun AmountInputLongAmountExample() {
    AmountInputStory("USD", "en-US", "98765432109.99")
}

@Composable
fun AmountInputStory(
    currency: String,
    locale: String,
    defaultValue: String = "",
    max: Double? = null,
    enabled: Boolean = true,
) {
    var value by rememberSaveable { mutableStateOf(defaultValue) }
    AmountInput(
        modifier = Modifier.fillMaxWidth(),
        value = value,
        onValueChange = { next, _ -> value = next },
        currency = currency,
        locale = Locale.forLanguageTag(locale),
        max = max,
        enabled = enabled,
    )
}

import { AmountInput } from "@/components/ui/amount-input"

export function AmountInputEuroExample() {
  return (
    <AmountInput currency="EUR" locale="de-DE" defaultValue="1234.5" />
  )
}

import EsuissUI
import SwiftUI

struct AmountInputEuroExample: View {
  var body: some View {
    AmountInputDemo(currency: "EUR", locale: "de-DE", initial: "1234.5")
  }
}

struct AmountInputDemo: View {
  let currency: String
  let locale: String
  var max: Double?

  @State private var value: String

  init(currency: String, locale: String, initial: String = "", max: Double? = nil) {
    self.currency = currency
    self.locale = locale
    self.max = max
    _value = State(initialValue: initial)
  }

  var body: some View {
    AmountInput(value: $value, currency: currency, max: max)
      .environment(\.locale, Locale(identifier: locale))
  }
}

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.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.esuiss.ui.components.AmountInput
import java.util.Locale

@Composable
fun AmountInputEuroExample() {
    AmountInputStory("EUR", "de-DE", "1234.5")
}

@Composable
fun AmountInputStory(
    currency: String,
    locale: String,
    defaultValue: String = "",
    max: Double? = null,
    enabled: Boolean = true,
) {
    var value by rememberSaveable { mutableStateOf(defaultValue) }
    AmountInput(
        modifier = Modifier.fillMaxWidth(),
        value = value,
        onValueChange = { next, _ -> value = next },
        currency = currency,
        locale = Locale.forLanguageTag(locale),
        max = max,
        enabled = enabled,
    )
}

import { AmountInput } from "@/components/ui/amount-input"

export function AmountInputTurkishLiraExample() {
  return (
    <AmountInput currency="TRY" locale="tr-TR" defaultValue="2500.75" />
  )
}

import EsuissUI
import SwiftUI

struct AmountInputTurkishLiraExample: View {
  var body: some View {
    AmountInputDemo(currency: "TRY", locale: "tr-TR", initial: "2500.75")
  }
}

struct AmountInputDemo: View {
  let currency: String
  let locale: String
  var max: Double?

  @State private var value: String

  init(currency: String, locale: String, initial: String = "", max: Double? = nil) {
    self.currency = currency
    self.locale = locale
    self.max = max
    _value = State(initialValue: initial)
  }

  var body: some View {
    AmountInput(value: $value, currency: currency, max: max)
      .environment(\.locale, Locale(identifier: locale))
  }
}

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.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.esuiss.ui.components.AmountInput
import java.util.Locale

@Composable
fun AmountInputTurkishLiraExample() {
    AmountInputStory("TRY", "tr-TR", "2500.75")
}

@Composable
fun AmountInputStory(
    currency: String,
    locale: String,
    defaultValue: String = "",
    max: Double? = null,
    enabled: Boolean = true,
) {
    var value by rememberSaveable { mutableStateOf(defaultValue) }
    AmountInput(
        modifier = Modifier.fillMaxWidth(),
        value = value,
        onValueChange = { next, _ -> value = next },
        currency = currency,
        locale = Locale.forLanguageTag(locale),
        max = max,
        enabled = enabled,
    )
}

import { AmountInput } from "@/components/ui/amount-input"

export function AmountInputYenExample() {
  return (
    <AmountInput currency="JPY" locale="ja-JP" defaultValue="15000" />
  )
}

import EsuissUI
import SwiftUI

struct AmountInputYenExample: View {
  var body: some View {
    AmountInputDemo(currency: "JPY", locale: "ja-JP", initial: "15000")
  }
}

struct AmountInputDemo: View {
  let currency: String
  let locale: String
  var max: Double?

  @State private var value: String

  init(currency: String, locale: String, initial: String = "", max: Double? = nil) {
    self.currency = currency
    self.locale = locale
    self.max = max
    _value = State(initialValue: initial)
  }

  var body: some View {
    AmountInput(value: $value, currency: currency, max: max)
      .environment(\.locale, Locale(identifier: locale))
  }
}

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.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.esuiss.ui.components.AmountInput
import java.util.Locale

@Composable
fun AmountInputYenExample() {
    AmountInputStory("JPY", "ja-JP", "15000")
}

@Composable
fun AmountInputStory(
    currency: String,
    locale: String,
    defaultValue: String = "",
    max: Double? = null,
    enabled: Boolean = true,
) {
    var value by rememberSaveable { mutableStateOf(defaultValue) }
    AmountInput(
        modifier = Modifier.fillMaxWidth(),
        value = value,
        onValueChange = { next, _ -> value = next },
        currency = currency,
        locale = Locale.forLanguageTag(locale),
        max = max,
        enabled = enabled,
    )
}

import { AmountInput } from "@/components/ui/amount-input"

export function AmountInputWithMaxExample() {
  return (
    <AmountInput currency="USD" locale="en-US" max={500} />
  )
}

import EsuissUI
import SwiftUI

struct AmountInputWithMaxExample: View {
  var body: some View {
    AmountInputDemo(currency: "USD", locale: "en-US", max: 500)
  }
}

struct AmountInputDemo: View {
  let currency: String
  let locale: String
  var max: Double?

  @State private var value: String

  init(currency: String, locale: String, initial: String = "", max: Double? = nil) {
    self.currency = currency
    self.locale = locale
    self.max = max
    _value = State(initialValue: initial)
  }

  var body: some View {
    AmountInput(value: $value, currency: currency, max: max)
      .environment(\.locale, Locale(identifier: locale))
  }
}

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.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.esuiss.ui.components.AmountInput
import java.util.Locale

@Composable
fun AmountInputWithMaxExample() {
    AmountInputStory("USD", "en-US", max = 500.0)
}

@Composable
fun AmountInputStory(
    currency: String,
    locale: String,
    defaultValue: String = "",
    max: Double? = null,
    enabled: Boolean = true,
) {
    var value by rememberSaveable { mutableStateOf(defaultValue) }
    AmountInput(
        modifier = Modifier.fillMaxWidth(),
        value = value,
        onValueChange = { next, _ -> value = next },
        currency = currency,
        locale = Locale.forLanguageTag(locale),
        max = max,
        enabled = enabled,
    )
}

import { AmountInput } from "@/components/ui/amount-input"

export function AmountInputDisabledExample() {
  return (
    <AmountInput currency="USD" locale="en-US" defaultValue="42" disabled />
  )
}

import EsuissUI
import SwiftUI

struct AmountInputDisabledExample: View {
  var body: some View {
    AmountInputDemo(currency: "USD", locale: "en-US", initial: "42")
      .disabled(true)
  }
}

struct AmountInputDemo: View {
  let currency: String
  let locale: String
  var max: Double?

  @State private var value: String

  init(currency: String, locale: String, initial: String = "", max: Double? = nil) {
    self.currency = currency
    self.locale = locale
    self.max = max
    _value = State(initialValue: initial)
  }

  var body: some View {
    AmountInput(value: $value, currency: currency, max: max)
      .environment(\.locale, Locale(identifier: locale))
  }
}

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.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.esuiss.ui.components.AmountInput
import java.util.Locale

@Composable
fun AmountInputDisabledExample() {
    AmountInputStory("USD", "en-US", "42", enabled = false)
}

@Composable
fun AmountInputStory(
    currency: String,
    locale: String,
    defaultValue: String = "",
    max: Double? = null,
    enabled: Boolean = true,
) {
    var value by rememberSaveable { mutableStateOf(defaultValue) }
    AmountInput(
        modifier = Modifier.fillMaxWidth(),
        value = value,
        onValueChange = { next, _ -> value = next },
        currency = currency,
        locale = Locale.forLanguageTag(locale),
        max = max,
        enabled = enabled,
    )
}