Widget

import { SunIcon } from "phosphor-react-native"
import { Icon } from "@/components/ui/icon"
import { Widget, WidgetContent, WidgetDescription, WidgetFooter, WidgetHeader, WidgetIcon, WidgetTitle, WidgetValue } from "@/components/ui/widget"

function Weather() {
  return (
    <>
      <WidgetHeader>
        <WidgetIcon>
          <Icon as={SunIcon} weight="fill" />
        </WidgetIcon>
        <WidgetTitle>Istanbul</WidgetTitle>
      </WidgetHeader>
      <WidgetContent>
        <WidgetValue>24°</WidgetValue>
        <WidgetDescription>Partly cloudy</WidgetDescription>
      </WidgetContent>
      <WidgetFooter>H 27° · L 18°</WidgetFooter>
    </>
  )
}

export function WidgetExample() {
  return (
    <Widget size="small" align="start">
      <Weather />
    </Widget>
  )
}

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetExample: View {
  var body: some View {
    Widget(.small) {
      WidgetWeather()
    }
  }
}

struct WidgetWeather: View {
  var body: some View {
    WidgetHeader {
      WidgetIcon {
        Ph.sun.fill
      }
      WidgetTitle("Istanbul")
    }
    WidgetContent {
      WidgetValue(verbatim: "24°")
      WidgetDescription("Partly cloudy")
    }
    WidgetFooter(verbatim: "H 27° · L 18°")
  }
}

import androidx.compose.runtime.Composable
import androidx.compose.ui.text.style.TextOverflow
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Fill
import com.adamglin.phosphoricons.fill.Sun
import com.esuiss.ui.components.Icon
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.Widget
import com.esuiss.ui.components.WidgetContent
import com.esuiss.ui.components.WidgetDescription
import com.esuiss.ui.components.WidgetFooter
import com.esuiss.ui.components.WidgetHeader
import com.esuiss.ui.components.WidgetIcon
import com.esuiss.ui.components.WidgetSize
import com.esuiss.ui.components.WidgetTitle
import com.esuiss.ui.components.WidgetValue

@Composable
fun WidgetExample() {
    Widget(size = WidgetSize.Small) { WidgetWeather() }
}

@Composable
fun WidgetFooterText(text: String) {
    WidgetFooter {
        Text(text, maxLines = 1, overflow = TextOverflow.Ellipsis)
    }
}

@Composable
fun WidgetWeather() {
    WidgetHeader {
        WidgetIcon { Icon(PhosphorIcons.Fill.Sun, contentDescription = null) }
        WidgetTitle("Istanbul")
    }
    WidgetContent {
        WidgetValue("24°")
        WidgetDescription("Partly cloudy")
    }
    WidgetFooterText("H 27° · L 18°")
}

import { cn } from "cn"
import type { IconProps as PhosphorIconProps } from "phosphor-react-native"
import * as React from "react"
import {
  type AccessibilityActionEvent,
  I18nManager,
  View,
  type ViewProps,
} from "react-native"
import { Gesture, GestureDetector } from "react-native-gesture-handler"
import {
  Easing,
  ReduceMotion,
  runOnJS,
  useAnimatedStyle,
  useSharedValue,

import { cn } from "cn"
import type { IconProps as PhosphorIconProps } from "phosphor-react-native"
import * as React from "react"
import {
  type AccessibilityActionEvent,
  I18nManager,
  View,
  type ViewProps,
} from "react-native"
import { Gesture, GestureDetector } from "react-native-gesture-handler"
import {
  Easing,
  ReduceMotion,
  runOnJS,
  useAnimatedStyle,
  useSharedValue,

import type { IconProps as PhosphorIconProps } from "phosphor-react-native"
import * as React from "react"
import {
  type AccessibilityActionEvent,
  I18nManager,
  type StyleProp,
  StyleSheet,
  type TextStyle,
  View,
  type ViewProps,
  type ViewStyle,
} from "react-native"
import { Gesture, GestureDetector } from "react-native-gesture-handler"
import {
  Easing,
  ReduceMotion,

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
  }

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))

import PhosphorSwift
import SwiftUI

public enum WidgetSize: CaseIterable, Sendable {
  case small, medium, large, extraLarge

  public var dimensions: CGSize {
    switch self {
    case .small: CGSize(width: 168, height: 168)
    case .medium: CGSize(width: 352, height: 168)
    case .large: CGSize(width: 352, height: 352)
    case .extraLarge: CGSize(width: 720, height: 352)
    }
  }
}

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

import SwiftUI

extension EnvironmentValues {
  @Entry var buttonGroup: Axis? = nil
  @Entry var buttonGroupSize: CGSize = .zero
}

enum ButtonGroupSpace: Hashable {
  case group
}

struct ButtonGroupFrame {
  let bounds: Anchor<CGRect>
  let outlined: Bool
}

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<Mark: View>: View {
  let checked: Bool
  let pressed: Bool
  let cornerRadius: CGFloat
  let mark: Mark

  @Environment(\.isEnabled) private var isEnabled
  @Environment(\.isInvalid) private var invalid

import SwiftUI

extension View {
  public func dialog<Content: View>(
    isPresented: Binding<Bool>,
    @ViewBuilder content: @escaping () -> Content
  ) -> some View {
    modifier(
      CoverPresenter(isPresented: isPresented) { visible in
        CenteredStage(visible: visible, dismissible: true, content: content)
      }
    )
  }
}

struct CenteredStage<Content: View>: View {

import SwiftUI

extension View {
  public func drawer<Content: View>(
    isPresented: Binding<Bool>,
    detents: Set<PresentationDetent>? = nil,
    selection: Binding<PresentationDetent>? = nil,
    onDismiss: (() -> Void)? = nil,
    @ViewBuilder content: @escaping () -> Content
  ) -> some View {
    let binding = isPresented
    return sheet(isPresented: isPresented, onDismiss: onDismiss) {
      DrawerHost(detents: detents, selection: selection, content: content)
        .environment(\.overlayDismiss, OverlayDismiss { binding.wrappedValue = false })
    }
  }

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 {

import SwiftUI

extension EnvironmentValues {
  @Entry public var hapticsEnabled = true
}

extension View {
  public func haptics(_ enabled: Bool) -> some View {
    environment(\.hapticsEnabled, enabled)
  }

  func hapticFeedback<Trigger: Equatable>(_ feedback: SensoryFeedback, trigger: Trigger) -> some View {
    modifier(HapticFeedbackModifier(feedback: feedback, trigger: trigger) { _, _ in true })
  }

  func hapticFeedback<Trigger: Equatable>(

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()
  }
}

import SwiftUI

public struct PopoverContent<Content: View>: View {
  let width: CGFloat?
  let content: Content

  public init(width: CGFloat? = 288, @ViewBuilder content: () -> Content) {
    self.width = width
    self.content = content()
  }

  public var body: some View {
    VStack(alignment: .leading, spacing: 16) {
      content
    }
    .font(TextStyle.base.font())

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)
  }

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
    }
  }

import SwiftUI

extension EnvironmentValues {
  @Entry var patternCompact: Bool? = nil
}

@propertyWrapper
struct CompactLayout: DynamicProperty {
  @Environment(\.patternCompact) private var forced
  @Environment(\.horizontalSizeClass) private var sizeClass

  init() {}

  var wrappedValue: Bool {
    forced ?? (sizeClass != .regular)
  }

import SwiftUI

extension View {
  public func preview<Content: View>(
    isPresented: Binding<Bool>,
    arrowEdge: Edge = .top,
    @ViewBuilder content: @escaping () -> Content
  ) -> some View {
    modifier(PreviewPresenter(isPresented: isPresented, arrowEdge: arrowEdge, content: content))
  }
}

struct PreviewPresenter<Body: View>: ViewModifier {
  let isPresented: Binding<Bool>
  let arrowEdge: Edge
  @ViewBuilder let content: () -> Body

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

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,

package com.esuiss.ui.components

import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.snap
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.gestures.detectTapGestures
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.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size

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 }

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

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)
}

import { ScrollView } from "react-native"
import { Widget, WidgetFooter, WidgetHeader, type WidgetSize, WidgetTitle } from "@/components/ui/widget"

const gridSpans: Record<WidgetSize, string> = {
  small: "1 × 1",
  medium: "2 × 1",
  large: "2 × 2",
  "extra-large": "4 × 2",
}

export function WidgetSizesExample() {
  return (
    <ScrollView
      horizontal
      contentContainerClassName="items-start gap-4"
      showsHorizontalScrollIndicator={false}
    >
      {(["small", "medium", "large", "extra-large"] as const).map((size) => (
        <Widget key={size} size={size}>
          <WidgetHeader>
            <WidgetTitle className="capitalize">
              {size.replace("-", " ")}
            </WidgetTitle>
          </WidgetHeader>
          <WidgetFooter>{gridSpans[size]}</WidgetFooter>
        </Widget>
      ))}
    </ScrollView>
  )
}

import EsuissUI
import SwiftUI

struct WidgetSizesExample: View {
  var body: some View {
    ScrollView(.horizontal, showsIndicators: false) {
      HStack(alignment: .top, spacing: 16) {
        ForEach(widgetSizeNames, id: \.title) { entry in
          Widget(entry.size) {
            WidgetHeader {
              WidgetTitle(verbatim: entry.title)
            }
            WidgetFooter(verbatim: entry.span)
          }
        }
      }
    }
  }
}

struct WidgetSizeName {
  let size: WidgetSize
  let title: String
  let span: String
}

let widgetSizeNames = [
  WidgetSizeName(size: .small, title: "Small", span: "1 × 1"),
  WidgetSizeName(size: .medium, title: "Medium", span: "2 × 1"),
  WidgetSizeName(size: .large, title: "Large", span: "2 × 2"),
  WidgetSizeName(size: .extraLarge, title: "Extra large", span: "4 × 2"),
]

import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.rememberScrollState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.Widget
import com.esuiss.ui.components.WidgetFooter
import com.esuiss.ui.components.WidgetHeader
import com.esuiss.ui.components.WidgetSize
import com.esuiss.ui.components.WidgetTitle

fun widgetSizeName(size: WidgetSize): String = when (size) {
    WidgetSize.Auto -> "auto"
    WidgetSize.Small -> "small"
    WidgetSize.Medium -> "medium"
    WidgetSize.Large -> "large"
    WidgetSize.ExtraLarge -> "extra-large"
}

fun widgetGridSpan(size: WidgetSize): String = when (size) {
    WidgetSize.Small -> "1 × 1"
    WidgetSize.Medium -> "2 × 1"
    WidgetSize.Large -> "2 × 2"
    else -> "4 × 2"
}

@Composable
fun WidgetFooterText(text: String) {
    WidgetFooter {
        Text(text, maxLines = 1, overflow = TextOverflow.Ellipsis)
    }
}

@Composable
fun WidgetSizes() {
    Row(
        Modifier.horizontalScroll(rememberScrollState()),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalAlignment = Alignment.Top,
    ) {
        listOf(WidgetSize.Small, WidgetSize.Medium, WidgetSize.Large, WidgetSize.ExtraLarge).forEach { size ->
            Widget(size = size) {
                WidgetHeader {
                    WidgetTitle(
                        widgetSizeName(size).split("-").joinToString(" ") { word -> word.replaceFirstChar { it.uppercaseChar() } },
                    )
                }
                WidgetFooterText(widgetGridSpan(size))
            }
        }
    }
}

import { CashRegisterIcon } from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"
import { useWidget, Widget, WidgetContent, WidgetDescription, WidgetFooter, WidgetHeader, WidgetIcon, WidgetTitle, WidgetValue } from "@/components/ui/widget"

const hourly = [12, 18, 14, 30, 44, 34, 22, 40, 100, 46, 30, 14].map(
  (value, hour) => ({ hour: hour + 10, value })
)

const topItems = [
  { name: "Grilled meatballs", count: 38 },
  { name: "Lahmacun", count: 31 },
  { name: "Adana kebab", count: 24 },
]

function Hint({ children }: { children: React.ReactNode }) {
  return <Text className="mt-6 text-xs text-label-secondary">{children}</Text>
}

function SalesBody() {
  const { size } = useWidget()
  return (
    <>
      <WidgetHeader className="gap-1.5">
        <WidgetIcon size="sm" iconClassName="text-warning">
          <Icon as={CashRegisterIcon} weight="fill" />
        </WidgetIcon>
        <WidgetTitle className="text-warning">Hestia</WidgetTitle>
      </WidgetHeader>
      <View
        className={
          size === "medium"
            ? "min-h-0 grow flex-row items-end gap-3"
            : "min-h-0 gap-3"
        }
      >
        <WidgetContent className="grow-0">
          <WidgetValue>₺18,240</WidgetValue>
          <WidgetDescription>Today's revenue</WidgetDescription>
        </WidgetContent>
        {size === "small" ? null : (
          <View
            className={
              size === "medium"
                ? "h-full flex-1 flex-row items-end gap-1"
                : "h-14 flex-row items-end gap-1"
            }
          >
            {hourly.map(({ hour, value }) => (
              <View
                key={hour}
                className={
                  value === 100
                    ? "flex-1 rounded-sm bg-warning"
                    : "flex-1 rounded-sm bg-warning/40"
                }
                style={{ height: `${value}%` }}
              />
            ))}
          </View>
        )}
      </View>
      {size === "large" || size === "extra-large" ? (
        <View className="min-h-0 shrink overflow-hidden">
          {topItems.map((item) => (
            <View
              key={item.name}
              className="flex-row items-center justify-between border-b border-separator py-1.5"
            >
              <Text className="text-sm">{item.name}</Text>
              <Text className="text-sm text-label-secondary">{item.count}</Text>
            </View>
          ))}
        </View>
      ) : null}
      <WidgetFooter>42 orders · 18:42</WidgetFooter>
    </>
  )
}

export function WidgetEditingExample() {
  return (
    <View className="w-full">
      <Widget resizable defaultSize="large">
        <SalesBody />
      </Widget>
      <Hint>
        Drag the corner handle to snap between sizes. Double tap it to reset.
      </Hint>
    </View>
  )
}

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetEditingExample: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 0) {
      WidgetEditable(initial: .large) {
        WidgetSales()
      }
      WidgetHint(text: "Drag the corner handle to snap between sizes. Double tap it to reset.")
    }
    .frame(maxWidth: .infinity, alignment: .leading)
  }
}

let widgetHourly: [CGFloat] = [12, 18, 14, 30, 44, 34, 22, 40, 100, 46, 30, 14]

struct WidgetTopItem {
  let name: String
  let count: Int
}

let widgetTopItems = [
  WidgetTopItem(name: "Grilled meatballs", count: 38),
  WidgetTopItem(name: "Lahmacun", count: 31),
  WidgetTopItem(name: "Adana kebab", count: 24),
]

struct WidgetHint: View {
  let text: String

  var body: some View {
    Text(verbatim: text)
      .textStyle(.xs)
      .foregroundStyle(Color.labelSecondary)
      .padding(.top, 24)
  }
}

struct WidgetEditable<Content: View>: View {
  let sizes: [WidgetSize]
  let handle: WidgetHandlePlacement
  let resetSize: WidgetSize
  @ViewBuilder let content: () -> Content

  @State private var size: WidgetSize

  init(
    initial: WidgetSize,
    sizes: [WidgetSize] = WidgetSize.allCases,
    handle: WidgetHandlePlacement = .outside,
    @ViewBuilder content: @escaping () -> Content
  ) {
    self.sizes = sizes
    self.handle = handle
    resetSize = initial
    self.content = content
    _size = State(initialValue: initial)
  }

  var body: some View {
    Widget(size: $size, sizes: sizes, editing: true, handle: handle, resetSize: resetSize) {
      content()
    }
  }
}

struct WidgetSalesHeader: View {
  var body: some View {
    WidgetHeader {
      WidgetIcon(size: .sm) {
        Ph.cashRegister.fill.foregroundStyle(Color.warning)
      }
      WidgetTitle("Hestia")
        .foregroundStyle(Color.warning)
    }
  }
}

struct WidgetBars: View {
  var body: some View {
    GeometryReader { proxy in
      HStack(alignment: .bottom, spacing: 4) {
        ForEach(Array(widgetHourly.enumerated()), id: \.offset) { _, value in
          RoundedRectangle(cornerRadius: Radius.sm, style: .continuous)
            .fill(value == 100 ? Color.warning : Color.warning.opacity(0.4))
            .frame(height: proxy.size.height * value / 100)
            .frame(maxWidth: .infinity)
        }
      }
      .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
    }
    .accessibilityHidden(true)
  }
}

struct WidgetSales: View {
  @Environment(\.widgetSize) private var size

  var body: some View {
    WidgetSalesHeader()
    if size == .medium {
      HStack(alignment: .bottom, spacing: 12) {
        revenue
        WidgetBars()
      }
      .frame(maxHeight: .infinity)
    } else {
      VStack(alignment: .leading, spacing: 12) {
        revenue
        if size != .small {
          WidgetBars().frame(height: 56)
        }
      }
    }
    if size == .large || size == .extraLarge {
      VStack(spacing: 0) {
        ForEach(widgetTopItems, id: \.name) { item in
          HStack {
            Text(verbatim: item.name)
              .textStyle(.sm)
            Spacer(minLength: 8)
            Text(verbatim: "\(item.count)")
              .textStyle(.sm)
              .foregroundStyle(Color.labelSecondary)
          }
          .padding(.vertical, 6)
          .overlay(alignment: .bottom) {
            Color.separator.frame(height: 1)
          }
        }
      }
      .clipped()
    }
    WidgetFooter(verbatim: "42 orders · 18:42")
  }

  var revenue: some View {
    WidgetContent {
      WidgetValue(verbatim: "₺18,240")
      WidgetDescription("Today's revenue")
    }
    .fixedSize(horizontal: true, vertical: false)
  }
}

import androidx.compose.foundation.background
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.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Fill
import com.adamglin.phosphoricons.fill.CashRegister
import com.esuiss.ui.components.Icon
import com.esuiss.ui.components.LocalContentStyle
import com.esuiss.ui.components.Separator
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.Widget
import com.esuiss.ui.components.WidgetContent
import com.esuiss.ui.components.WidgetDescription
import com.esuiss.ui.components.WidgetFooter
import com.esuiss.ui.components.WidgetHeader
import com.esuiss.ui.components.WidgetIcon
import com.esuiss.ui.components.WidgetIconSize
import com.esuiss.ui.components.WidgetSize
import com.esuiss.ui.components.WidgetTitle
import com.esuiss.ui.components.WidgetValue
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Radius
import com.esuiss.ui.theme.Typography

val widgetHourly = listOf(12, 18, 14, 30, 44, 34, 22, 40, 100, 46, 30, 14)

val widgetTopItems = listOf(
    "Grilled meatballs" to 38,
    "Lahmacun" to 31,
    "Adana kebab" to 24,
)

@Composable
fun WidgetTintedTitle(text: String, color: Color) {
    CompositionLocalProvider(LocalContentStyle provides LocalContentStyle.current.copy(color = color)) {
        WidgetTitle(text)
    }
}

@Composable
fun WidgetFooterText(text: String) {
    WidgetFooter {
        Text(text, maxLines = 1, overflow = TextOverflow.Ellipsis)
    }
}

@Composable
fun WidgetHint(text: String) {
    Text(
        text,
        Modifier.padding(top = 24.dp),
        style = Typography.xs,
        color = EsuissTheme.colors.labelSecondary,
    )
}

@Composable
fun WidgetSalesHeader() {
    val warning = EsuissTheme.colors.warning
    WidgetHeader {
        WidgetIcon(size = WidgetIconSize.Sm) { Icon(PhosphorIcons.Fill.CashRegister, contentDescription = null, tint = warning) }
        WidgetTintedTitle("Hestia", warning)
    }
}

@Composable
fun WidgetRevenue() {
    Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
        WidgetValue("₺18,240")
        WidgetDescription("Today's revenue")
    }
}

@Composable
fun WidgetBars(modifier: Modifier) {
    val warning = EsuissTheme.colors.warning
    Row(modifier, horizontalArrangement = Arrangement.spacedBy(4.dp), verticalAlignment = Alignment.Bottom) {
        widgetHourly.forEach { value ->
            Box(
                Modifier
                    .weight(1f)
                    .fillMaxHeight(value / 100f)
                    .background(if (value == 100) warning else warning.copy(alpha = 0.4f), RoundedCornerShape(Radius.sm)),
            )
        }
    }
}

@Composable
fun WidgetSalesBody(size: WidgetSize) {
    WidgetSalesHeader()
    if (size == WidgetSize.Medium) {
        WidgetContent {
            Row(
                Modifier.fillMaxWidth().fillMaxHeight(),
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                verticalAlignment = Alignment.Bottom,
            ) {
                WidgetRevenue()
                WidgetBars(Modifier.weight(1f).fillMaxHeight())
            }
        }
    } else {
        WidgetContent {
            Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
                WidgetRevenue()
                if (size != WidgetSize.Small) WidgetBars(Modifier.fillMaxWidth().height(56.dp))
            }
        }
    }
    if (size == WidgetSize.Large || size == WidgetSize.ExtraLarge) {
        Column {
            widgetTopItems.forEach { (name, count) ->
                Row(
                    Modifier.fillMaxWidth().padding(vertical = 6.dp),
                    horizontalArrangement = Arrangement.SpaceBetween,
                    verticalAlignment = Alignment.CenterVertically,
                ) {
                    Text(name, style = Typography.sm)
                    Text(count.toString(), style = Typography.sm, color = EsuissTheme.colors.labelSecondary)
                }
                Separator()
            }
        }
    }
    WidgetFooterText("42 orders · 18:42")
}

@Composable
fun WidgetEditing() {
    Column(Modifier.fillMaxWidth()) {
        Widget(resizable = true, defaultSize = WidgetSize.Large) { WidgetSalesBody(size) }
        WidgetHint("Drag the corner handle to snap between sizes. Double tap it to reset.")
    }
}

import { CashRegisterIcon } from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"
import { useWidget, Widget, WidgetContent, WidgetDescription, WidgetFooter, WidgetHeader, WidgetIcon, WidgetTitle, WidgetValue } from "@/components/ui/widget"

const hourly = [12, 18, 14, 30, 44, 34, 22, 40, 100, 46, 30, 14].map(
  (value, hour) => ({ hour: hour + 10, value })
)

const topItems = [
  { name: "Grilled meatballs", count: 38 },
  { name: "Lahmacun", count: 31 },
  { name: "Adana kebab", count: 24 },
]

function Hint({ children }: { children: React.ReactNode }) {
  return <Text className="mt-6 text-xs text-label-secondary">{children}</Text>
}

function SalesBody() {
  const { size } = useWidget()
  return (
    <>
      <WidgetHeader className="gap-1.5">
        <WidgetIcon size="sm" iconClassName="text-warning">
          <Icon as={CashRegisterIcon} weight="fill" />
        </WidgetIcon>
        <WidgetTitle className="text-warning">Hestia</WidgetTitle>
      </WidgetHeader>
      <View
        className={
          size === "medium"
            ? "min-h-0 grow flex-row items-end gap-3"
            : "min-h-0 gap-3"
        }
      >
        <WidgetContent className="grow-0">
          <WidgetValue>₺18,240</WidgetValue>
          <WidgetDescription>Today's revenue</WidgetDescription>
        </WidgetContent>
        {size === "small" ? null : (
          <View
            className={
              size === "medium"
                ? "h-full flex-1 flex-row items-end gap-1"
                : "h-14 flex-row items-end gap-1"
            }
          >
            {hourly.map(({ hour, value }) => (
              <View
                key={hour}
                className={
                  value === 100
                    ? "flex-1 rounded-sm bg-warning"
                    : "flex-1 rounded-sm bg-warning/40"
                }
                style={{ height: `${value}%` }}
              />
            ))}
          </View>
        )}
      </View>
      {size === "large" || size === "extra-large" ? (
        <View className="min-h-0 shrink overflow-hidden">
          {topItems.map((item) => (
            <View
              key={item.name}
              className="flex-row items-center justify-between border-b border-separator py-1.5"
            >
              <Text className="text-sm">{item.name}</Text>
              <Text className="text-sm text-label-secondary">{item.count}</Text>
            </View>
          ))}
        </View>
      ) : null}
      <WidgetFooter>42 orders · 18:42</WidgetFooter>
    </>
  )
}

export function WidgetInsideHandleExample() {
  return (
    <View className="w-full">
      <Widget resizable handle="inside" defaultSize="medium">
        <SalesBody />
      </Widget>
      <Hint>The handle sits inside the corner.</Hint>
    </View>
  )
}

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetInsideHandleExample: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 0) {
      WidgetEditable(initial: .medium, handle: .inside) {
        WidgetSales()
      }
      WidgetHint(text: "The handle sits inside the corner.")
    }
    .frame(maxWidth: .infinity, alignment: .leading)
  }
}

let widgetHourly: [CGFloat] = [12, 18, 14, 30, 44, 34, 22, 40, 100, 46, 30, 14]

struct WidgetTopItem {
  let name: String
  let count: Int
}

let widgetTopItems = [
  WidgetTopItem(name: "Grilled meatballs", count: 38),
  WidgetTopItem(name: "Lahmacun", count: 31),
  WidgetTopItem(name: "Adana kebab", count: 24),
]

struct WidgetHint: View {
  let text: String

  var body: some View {
    Text(verbatim: text)
      .textStyle(.xs)
      .foregroundStyle(Color.labelSecondary)
      .padding(.top, 24)
  }
}

struct WidgetEditable<Content: View>: View {
  let sizes: [WidgetSize]
  let handle: WidgetHandlePlacement
  let resetSize: WidgetSize
  @ViewBuilder let content: () -> Content

  @State private var size: WidgetSize

  init(
    initial: WidgetSize,
    sizes: [WidgetSize] = WidgetSize.allCases,
    handle: WidgetHandlePlacement = .outside,
    @ViewBuilder content: @escaping () -> Content
  ) {
    self.sizes = sizes
    self.handle = handle
    resetSize = initial
    self.content = content
    _size = State(initialValue: initial)
  }

  var body: some View {
    Widget(size: $size, sizes: sizes, editing: true, handle: handle, resetSize: resetSize) {
      content()
    }
  }
}

struct WidgetSalesHeader: View {
  var body: some View {
    WidgetHeader {
      WidgetIcon(size: .sm) {
        Ph.cashRegister.fill.foregroundStyle(Color.warning)
      }
      WidgetTitle("Hestia")
        .foregroundStyle(Color.warning)
    }
  }
}

struct WidgetBars: View {
  var body: some View {
    GeometryReader { proxy in
      HStack(alignment: .bottom, spacing: 4) {
        ForEach(Array(widgetHourly.enumerated()), id: \.offset) { _, value in
          RoundedRectangle(cornerRadius: Radius.sm, style: .continuous)
            .fill(value == 100 ? Color.warning : Color.warning.opacity(0.4))
            .frame(height: proxy.size.height * value / 100)
            .frame(maxWidth: .infinity)
        }
      }
      .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
    }
    .accessibilityHidden(true)
  }
}

struct WidgetSales: View {
  @Environment(\.widgetSize) private var size

  var body: some View {
    WidgetSalesHeader()
    if size == .medium {
      HStack(alignment: .bottom, spacing: 12) {
        revenue
        WidgetBars()
      }
      .frame(maxHeight: .infinity)
    } else {
      VStack(alignment: .leading, spacing: 12) {
        revenue
        if size != .small {
          WidgetBars().frame(height: 56)
        }
      }
    }
    if size == .large || size == .extraLarge {
      VStack(spacing: 0) {
        ForEach(widgetTopItems, id: \.name) { item in
          HStack {
            Text(verbatim: item.name)
              .textStyle(.sm)
            Spacer(minLength: 8)
            Text(verbatim: "\(item.count)")
              .textStyle(.sm)
              .foregroundStyle(Color.labelSecondary)
          }
          .padding(.vertical, 6)
          .overlay(alignment: .bottom) {
            Color.separator.frame(height: 1)
          }
        }
      }
      .clipped()
    }
    WidgetFooter(verbatim: "42 orders · 18:42")
  }

  var revenue: some View {
    WidgetContent {
      WidgetValue(verbatim: "₺18,240")
      WidgetDescription("Today's revenue")
    }
    .fixedSize(horizontal: true, vertical: false)
  }
}

import androidx.compose.foundation.background
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.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Fill
import com.adamglin.phosphoricons.fill.CashRegister
import com.esuiss.ui.components.Icon
import com.esuiss.ui.components.LocalContentStyle
import com.esuiss.ui.components.Separator
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.Widget
import com.esuiss.ui.components.WidgetContent
import com.esuiss.ui.components.WidgetDescription
import com.esuiss.ui.components.WidgetFooter
import com.esuiss.ui.components.WidgetHandlePlacement
import com.esuiss.ui.components.WidgetHeader
import com.esuiss.ui.components.WidgetIcon
import com.esuiss.ui.components.WidgetIconSize
import com.esuiss.ui.components.WidgetSize
import com.esuiss.ui.components.WidgetTitle
import com.esuiss.ui.components.WidgetValue
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Radius
import com.esuiss.ui.theme.Typography

val widgetHourly = listOf(12, 18, 14, 30, 44, 34, 22, 40, 100, 46, 30, 14)

val widgetTopItems = listOf(
    "Grilled meatballs" to 38,
    "Lahmacun" to 31,
    "Adana kebab" to 24,
)

@Composable
fun WidgetTintedTitle(text: String, color: Color) {
    CompositionLocalProvider(LocalContentStyle provides LocalContentStyle.current.copy(color = color)) {
        WidgetTitle(text)
    }
}

@Composable
fun WidgetFooterText(text: String) {
    WidgetFooter {
        Text(text, maxLines = 1, overflow = TextOverflow.Ellipsis)
    }
}

@Composable
fun WidgetHint(text: String) {
    Text(
        text,
        Modifier.padding(top = 24.dp),
        style = Typography.xs,
        color = EsuissTheme.colors.labelSecondary,
    )
}

@Composable
fun WidgetSalesHeader() {
    val warning = EsuissTheme.colors.warning
    WidgetHeader {
        WidgetIcon(size = WidgetIconSize.Sm) { Icon(PhosphorIcons.Fill.CashRegister, contentDescription = null, tint = warning) }
        WidgetTintedTitle("Hestia", warning)
    }
}

@Composable
fun WidgetRevenue() {
    Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
        WidgetValue("₺18,240")
        WidgetDescription("Today's revenue")
    }
}

@Composable
fun WidgetBars(modifier: Modifier) {
    val warning = EsuissTheme.colors.warning
    Row(modifier, horizontalArrangement = Arrangement.spacedBy(4.dp), verticalAlignment = Alignment.Bottom) {
        widgetHourly.forEach { value ->
            Box(
                Modifier
                    .weight(1f)
                    .fillMaxHeight(value / 100f)
                    .background(if (value == 100) warning else warning.copy(alpha = 0.4f), RoundedCornerShape(Radius.sm)),
            )
        }
    }
}

@Composable
fun WidgetSalesBody(size: WidgetSize) {
    WidgetSalesHeader()
    if (size == WidgetSize.Medium) {
        WidgetContent {
            Row(
                Modifier.fillMaxWidth().fillMaxHeight(),
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                verticalAlignment = Alignment.Bottom,
            ) {
                WidgetRevenue()
                WidgetBars(Modifier.weight(1f).fillMaxHeight())
            }
        }
    } else {
        WidgetContent {
            Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
                WidgetRevenue()
                if (size != WidgetSize.Small) WidgetBars(Modifier.fillMaxWidth().height(56.dp))
            }
        }
    }
    if (size == WidgetSize.Large || size == WidgetSize.ExtraLarge) {
        Column {
            widgetTopItems.forEach { (name, count) ->
                Row(
                    Modifier.fillMaxWidth().padding(vertical = 6.dp),
                    horizontalArrangement = Arrangement.SpaceBetween,
                    verticalAlignment = Alignment.CenterVertically,
                ) {
                    Text(name, style = Typography.sm)
                    Text(count.toString(), style = Typography.sm, color = EsuissTheme.colors.labelSecondary)
                }
                Separator()
            }
        }
    }
    WidgetFooterText("42 orders · 18:42")
}

@Composable
fun WidgetInsideHandle() {
    Column(Modifier.fillMaxWidth()) {
        Widget(resizable = true, handle = WidgetHandlePlacement.Inside, defaultSize = WidgetSize.Medium) { WidgetSalesBody(size) }
        WidgetHint("The handle sits inside the corner.")
    }
}

import { CalendarBlankIcon } from "phosphor-react-native"
import * as React from "react"
import { View } from "react-native"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"
import { useWidget, Widget, WidgetContent, WidgetDescription, WidgetHeader, WidgetIcon, WidgetTitle, WidgetValue } from "@/components/ui/widget"

const reservations = [
  { time: "18:00", place: "Table 4" },
  { time: "19:00", place: "Garden 3" },
  { time: "20:00", place: "Table 12" },
  { time: "21:00", place: "Table 7" },
]

function Hint({ children }: { children: React.ReactNode }) {
  return <Text className="mt-6 text-xs text-label-secondary">{children}</Text>
}

function ReservationsBody() {
  const { size } = useWidget()
  return (
    <>
      <WidgetHeader className="gap-1.5">
        <WidgetIcon size="sm" iconClassName="text-link">
          <Icon as={CalendarBlankIcon} weight="fill" />
        </WidgetIcon>
        <WidgetTitle className="text-link">Reservations</WidgetTitle>
      </WidgetHeader>
      <View className="min-h-0 grow flex-row items-end gap-4">
        <WidgetContent className="grow-0">
          <WidgetValue>12</WidgetValue>
          <WidgetDescription>Tonight</WidgetDescription>
        </WidgetContent>
        {size === "medium" ? (
          <View className="flex-1 gap-1">
            {reservations.slice(0, 3).map((item) => (
              <View key={item.time} className="flex-row gap-3">
                <Text className="w-11 text-sm text-label-secondary">
                  {item.time}
                </Text>
                <Text className="flex-1 text-sm" numberOfLines={1}>
                  {item.place}
                </Text>
              </View>
            ))}
          </View>
        ) : null}
      </View>
    </>
  )
}

export function WidgetLimitedSizesExample() {
  return (
    <View className="w-full">
      <Widget resizable defaultSize="medium" sizes={["small", "medium"]}>
        <ReservationsBody />
      </Widget>
      <Hint>Only small and medium are offered.</Hint>
    </View>
  )
}

import EsuissUI
import PhosphorSwift
import SwiftUI

struct WidgetLimitedSizesExample: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 0) {
      WidgetEditable(initial: .medium, sizes: [.small, .medium]) {
        WidgetReservations()
      }
      WidgetHint(text: "Only small and medium are offered.")
    }
    .frame(maxWidth: .infinity, alignment: .leading)
  }
}

struct WidgetReservation {
  let time: String
  let place: String
}

let widgetReservations = [
  WidgetReservation(time: "18:00", place: "Table 4"),
  WidgetReservation(time: "19:00", place: "Garden 3"),
  WidgetReservation(time: "20:00", place: "Table 12"),
  WidgetReservation(time: "21:00", place: "Table 7"),
]

struct WidgetHint: View {
  let text: String

  var body: some View {
    Text(verbatim: text)
      .textStyle(.xs)
      .foregroundStyle(Color.labelSecondary)
      .padding(.top, 24)
  }
}

struct WidgetEditable<Content: View>: View {
  let sizes: [WidgetSize]
  let handle: WidgetHandlePlacement
  let resetSize: WidgetSize
  @ViewBuilder let content: () -> Content

  @State private var size: WidgetSize

  init(
    initial: WidgetSize,
    sizes: [WidgetSize] = WidgetSize.allCases,
    handle: WidgetHandlePlacement = .outside,
    @ViewBuilder content: @escaping () -> Content
  ) {
    self.sizes = sizes
    self.handle = handle
    resetSize = initial
    self.content = content
    _size = State(initialValue: initial)
  }

  var body: some View {
    Widget(size: $size, sizes: sizes, editing: true, handle: handle, resetSize: resetSize) {
      content()
    }
  }
}

struct WidgetReservations: View {
  @Environment(\.widgetSize) private var size

  var body: some View {
    WidgetHeader {
      WidgetIcon(size: .sm) {
        Ph.calendarBlank.fill.foregroundStyle(Color.link)
      }
      WidgetTitle("Reservations")
        .foregroundStyle(Color.link)
    }
    HStack(alignment: .bottom, spacing: 16) {
      WidgetContent {
        WidgetValue(verbatim: "12")
        WidgetDescription("Tonight")
      }
      .fixedSize(horizontal: true, vertical: false)
      if size == .medium {
        VStack(alignment: .leading, spacing: 4) {
          ForEach(widgetReservations.prefix(3), id: \.time) { item in
            HStack(spacing: 12) {
              Text(verbatim: item.time)
                .textStyle(.sm)
                .foregroundStyle(Color.labelSecondary)
                .frame(width: 44, alignment: .leading)
              Text(verbatim: item.place)
                .textStyle(.sm)
                .lineLimit(1)
                .frame(maxWidth: .infinity, alignment: .leading)
            }
          }
        }
        .frame(maxWidth: .infinity)
      }
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomLeading)
  }
}

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Fill
import com.adamglin.phosphoricons.fill.CalendarBlank
import com.esuiss.ui.components.Icon
import com.esuiss.ui.components.LocalContentStyle
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.Widget
import com.esuiss.ui.components.WidgetContent
import com.esuiss.ui.components.WidgetDescription
import com.esuiss.ui.components.WidgetHeader
import com.esuiss.ui.components.WidgetIcon
import com.esuiss.ui.components.WidgetIconSize
import com.esuiss.ui.components.WidgetSize
import com.esuiss.ui.components.WidgetTitle
import com.esuiss.ui.components.WidgetValue
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Typography

val widgetReservations = listOf(
    "18:00" to "Table 4",
    "19:00" to "Garden 3",
    "20:00" to "Table 12",
    "21:00" to "Table 7",
)

@Composable
fun WidgetTintedTitle(text: String, color: Color) {
    CompositionLocalProvider(LocalContentStyle provides LocalContentStyle.current.copy(color = color)) {
        WidgetTitle(text)
    }
}

@Composable
fun WidgetHint(text: String) {
    Text(
        text,
        Modifier.padding(top = 24.dp),
        style = Typography.xs,
        color = EsuissTheme.colors.labelSecondary,
    )
}

@Composable
fun WidgetReservationsBody(size: WidgetSize) {
    val colors = EsuissTheme.colors
    WidgetHeader {
        WidgetIcon(size = WidgetIconSize.Sm) { Icon(PhosphorIcons.Fill.CalendarBlank, contentDescription = null, tint = colors.link) }
        WidgetTintedTitle("Reservations", colors.link)
    }
    WidgetContent {
        Row(
            Modifier.fillMaxWidth().fillMaxHeight(),
            horizontalArrangement = Arrangement.spacedBy(16.dp),
            verticalAlignment = Alignment.Bottom,
        ) {
            Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
                WidgetValue("12")
                WidgetDescription("Tonight")
            }
            if (size == WidgetSize.Medium) {
                Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(4.dp)) {
                    widgetReservations.take(3).forEach { (time, place) ->
                        Row(horizontalArrangement = Arrangement.spacedBy(12.dp)) {
                            Text(time, Modifier.width(44.dp), style = Typography.sm, color = colors.labelSecondary)
                            Text(place, Modifier.weight(1f), style = Typography.sm, maxLines = 1, overflow = TextOverflow.Ellipsis)
                        }
                    }
                }
            }
        }
    }
}

@Composable
fun WidgetLimitedSizes() {
    Column(Modifier.fillMaxWidth()) {
        Widget(
            resizable = true,
            defaultSize = WidgetSize.Medium,
            sizes = listOf(WidgetSize.Small, WidgetSize.Medium),
        ) { WidgetReservationsBody(size) }
        WidgetHint("Only small and medium are offered.")
    }
}