Accordion

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Text } from "@/components/ui/text"

const items = [
  {
    value: "item-1",
    title: "Is it accessible?",
    content: "Yes. It works with VoiceOver and TalkBack.",
  },
  {
    value: "item-2",
    title: "Is it styled?",
    content:
      "Yes. It comes with default styles that match the other components.",
  },
  {
    value: "item-3",
    title: "Is it animated?",
    content: "Yes. It animates open and closed by default.",
  },
]

function AccordionItems() {
  return items.map((item) => (
    <AccordionItem key={item.value} value={item.value}>
      <AccordionTrigger>
        <Text>{item.title}</Text>
      </AccordionTrigger>
      <AccordionContent>
        <Text>{item.content}</Text>
      </AccordionContent>
    </AccordionItem>
  ))
}

export function AccordionOpenByDefaultExample() {
  return (
    <Accordion defaultValue={["item-2"]}>
      <AccordionItems />
    </Accordion>
  )
}

import EsuissUI
import SwiftUI

struct AccordionOpenByDefaultExample: View {
  var body: some View {
    AccordionDemo(initial: ["item-2"], multiple: false)
  }
}

struct AccordionEntry: Identifiable {
  let value: String
  let title: LocalizedStringKey
  let content: LocalizedStringKey

  var id: String { value }
}

let accordionEntries = [
  AccordionEntry(value: "item-1", title: "Is it accessible?", content: "Yes. It works with VoiceOver and TalkBack."),
  AccordionEntry(
    value: "item-2",
    title: "Is it styled?",
    content: "Yes. It comes with default styles that match the other components."
  ),
  AccordionEntry(value: "item-3", title: "Is it animated?", content: "Yes. It animates open and closed by default."),
]

struct AccordionItems: View {
  var body: some View {
    ForEach(accordionEntries) { entry in
      AccordionItem(entry.title, value: entry.value) {
        Text(entry.content)
      }
    }
  }
}

struct AccordionDemo: View {
  let multiple: Bool

  @State private var expanded: Set<String>

  init(initial: Set<String>, multiple: Bool) {
    self.multiple = multiple
    _expanded = State(initialValue: initial)
  }

  var body: some View {
    Accordion(expanded: $expanded, multiple: multiple) {
      AccordionItems()
    }
  }
}

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 com.esuiss.ui.components.Accordion
import com.esuiss.ui.components.AccordionItem
import com.esuiss.ui.components.AccordionVariant
import com.esuiss.ui.components.Text

@Composable
fun AccordionOpenByDefaultExample() {
    AccordionSingle(AccordionVariant.Default, "item-2")
}

class AccordionEntry(val value: String, val title: String, val content: String)

val accordionEntries = listOf(
    AccordionEntry("item-1", "Is it accessible?", "Yes. It works with VoiceOver and TalkBack."),
    AccordionEntry("item-2", "Is it styled?", "Yes. It comes with default styles that match the other components."),
    AccordionEntry("item-3", "Is it animated?", "Yes. It animates open and closed by default."),
)

@Composable
fun AccordionItems(open: List<String>, onToggle: (String, Boolean) -> Unit) {
    accordionEntries.forEach { entry ->
        AccordionItem(
            expanded = entry.value in open,
            onExpandedChange = { onToggle(entry.value, it) },
            title = entry.title,
        ) {
            Text(entry.content)
        }
    }
}

@Composable
fun AccordionSingle(variant: AccordionVariant, defaultValue: String) {
    var open by rememberSaveable { mutableStateOf(defaultValue) }
    Accordion(variant = variant) {
        AccordionItems(listOf(open)) { value, expanded -> open = if (expanded) value else "" }
    }
}

import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"
import { CaretDownIcon } from "phosphor-react-native"
import * as React from "react"
import type { GestureResponderEvent } from "react-native"
import Animated, {
  FadeOutUp,
  LayoutAnimationConfig,
  LinearTransition,
  ReduceMotion,
  useAnimatedStyle,
  useDerivedValue,
  withTiming,
} from "react-native-reanimated"
import * as AccordionPrimitive from "@/components/primitives/accordion"
import { resolveClassName } from "@/components/primitives/use-render"

import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"
import { CaretDownIcon } from "phosphor-react-native"
import * as React from "react"
import type { GestureResponderEvent } from "react-native"
import Animated, {
  FadeOutUp,
  LayoutAnimationConfig,
  LinearTransition,
  ReduceMotion,
  useAnimatedStyle,
  useDerivedValue,
  withTiming,
} from "react-native-reanimated"
import * as AccordionPrimitive from "@/components/primitives/accordion"
import { resolveClassName } from "@/components/primitives/use-render"

import { CaretDownIcon } from "phosphor-react-native"
import * as React from "react"
import {
  type GestureResponderEvent,
  type StyleProp,
  StyleSheet,
  type ViewStyle,
} from "react-native"
import Animated, {
  FadeOutUp,
  LayoutAnimationConfig,
  LinearTransition,
  ReduceMotion,
  useAnimatedStyle,
  useDerivedValue,
  withTiming,

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 struct Accordion<Content: View>: View {
  public enum Variant: CaseIterable, Sendable {
    case `default`, filled
  }

  let variant: Variant
  let multiple: Bool
  let external: Binding<Set<AnyHashable>>?
  let content: Content

  @State private var local: Set<AnyHashable> = []
  @Environment(\.accessibilityReduceMotion) private var reduceMotion

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.AnimatedVisibility
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandVertically
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope

package com.esuiss.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape

package com.esuiss.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.Immutable

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 androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.takeOrElse
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.Dp
import com.esuiss.ui.theme.EsuissTheme

@Composable
fun Icon(
    imageVector: ImageVector,

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Text } from "@/components/ui/text"

const items = [
  {
    value: "item-1",
    title: "Is it accessible?",
    content: "Yes. It works with VoiceOver and TalkBack.",
  },
  {
    value: "item-2",
    title: "Is it styled?",
    content:
      "Yes. It comes with default styles that match the other components.",
  },
  {
    value: "item-3",
    title: "Is it animated?",
    content: "Yes. It animates open and closed by default.",
  },
]

function AccordionItems() {
  return items.map((item) => (
    <AccordionItem key={item.value} value={item.value}>
      <AccordionTrigger>
        <Text>{item.title}</Text>
      </AccordionTrigger>
      <AccordionContent>
        <Text>{item.content}</Text>
      </AccordionContent>
    </AccordionItem>
  ))
}

export function AccordionExample() {
  return (
    <Accordion>
      <AccordionItems />
    </Accordion>
  )
}

import EsuissUI
import SwiftUI

struct AccordionExample: View {
  var body: some View {
    Accordion {
      AccordionItems()
    }
  }
}

struct AccordionEntry: Identifiable {
  let value: String
  let title: LocalizedStringKey
  let content: LocalizedStringKey

  var id: String { value }
}

let accordionEntries = [
  AccordionEntry(value: "item-1", title: "Is it accessible?", content: "Yes. It works with VoiceOver and TalkBack."),
  AccordionEntry(
    value: "item-2",
    title: "Is it styled?",
    content: "Yes. It comes with default styles that match the other components."
  ),
  AccordionEntry(value: "item-3", title: "Is it animated?", content: "Yes. It animates open and closed by default."),
]

struct AccordionItems: View {
  var body: some View {
    ForEach(accordionEntries) { entry in
      AccordionItem(entry.title, value: entry.value) {
        Text(entry.content)
      }
    }
  }
}

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 com.esuiss.ui.components.Accordion
import com.esuiss.ui.components.AccordionItem
import com.esuiss.ui.components.AccordionVariant
import com.esuiss.ui.components.Text

@Composable
fun AccordionExample() {
    AccordionSingle(AccordionVariant.Default, "")
}

class AccordionEntry(val value: String, val title: String, val content: String)

val accordionEntries = listOf(
    AccordionEntry("item-1", "Is it accessible?", "Yes. It works with VoiceOver and TalkBack."),
    AccordionEntry("item-2", "Is it styled?", "Yes. It comes with default styles that match the other components."),
    AccordionEntry("item-3", "Is it animated?", "Yes. It animates open and closed by default."),
)

@Composable
fun AccordionItems(open: List<String>, onToggle: (String, Boolean) -> Unit) {
    accordionEntries.forEach { entry ->
        AccordionItem(
            expanded = entry.value in open,
            onExpandedChange = { onToggle(entry.value, it) },
            title = entry.title,
        ) {
            Text(entry.content)
        }
    }
}

@Composable
fun AccordionSingle(variant: AccordionVariant, defaultValue: String) {
    var open by rememberSaveable { mutableStateOf(defaultValue) }
    Accordion(variant = variant) {
        AccordionItems(listOf(open)) { value, expanded -> open = if (expanded) value else "" }
    }
}

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Text } from "@/components/ui/text"

const items = [
  {
    value: "item-1",
    title: "Is it accessible?",
    content: "Yes. It works with VoiceOver and TalkBack.",
  },
  {
    value: "item-2",
    title: "Is it styled?",
    content:
      "Yes. It comes with default styles that match the other components.",
  },
  {
    value: "item-3",
    title: "Is it animated?",
    content: "Yes. It animates open and closed by default.",
  },
]

function AccordionItems() {
  return items.map((item) => (
    <AccordionItem key={item.value} value={item.value}>
      <AccordionTrigger>
        <Text>{item.title}</Text>
      </AccordionTrigger>
      <AccordionContent>
        <Text>{item.content}</Text>
      </AccordionContent>
    </AccordionItem>
  ))
}

export function AccordionFilledExample() {
  return (
    <Accordion variant="filled">
      <AccordionItems />
    </Accordion>
  )
}

import EsuissUI
import SwiftUI

struct AccordionFilledExample: View {
  var body: some View {
    Accordion(.filled) {
      AccordionItems()
    }
  }
}

struct AccordionEntry: Identifiable {
  let value: String
  let title: LocalizedStringKey
  let content: LocalizedStringKey

  var id: String { value }
}

let accordionEntries = [
  AccordionEntry(value: "item-1", title: "Is it accessible?", content: "Yes. It works with VoiceOver and TalkBack."),
  AccordionEntry(
    value: "item-2",
    title: "Is it styled?",
    content: "Yes. It comes with default styles that match the other components."
  ),
  AccordionEntry(value: "item-3", title: "Is it animated?", content: "Yes. It animates open and closed by default."),
]

struct AccordionItems: View {
  var body: some View {
    ForEach(accordionEntries) { entry in
      AccordionItem(entry.title, value: entry.value) {
        Text(entry.content)
      }
    }
  }
}

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 com.esuiss.ui.components.Accordion
import com.esuiss.ui.components.AccordionItem
import com.esuiss.ui.components.AccordionVariant
import com.esuiss.ui.components.Text

@Composable
fun AccordionFilledExample() {
    AccordionSingle(AccordionVariant.Filled, "")
}

class AccordionEntry(val value: String, val title: String, val content: String)

val accordionEntries = listOf(
    AccordionEntry("item-1", "Is it accessible?", "Yes. It works with VoiceOver and TalkBack."),
    AccordionEntry("item-2", "Is it styled?", "Yes. It comes with default styles that match the other components."),
    AccordionEntry("item-3", "Is it animated?", "Yes. It animates open and closed by default."),
)

@Composable
fun AccordionItems(open: List<String>, onToggle: (String, Boolean) -> Unit) {
    accordionEntries.forEach { entry ->
        AccordionItem(
            expanded = entry.value in open,
            onExpandedChange = { onToggle(entry.value, it) },
            title = entry.title,
        ) {
            Text(entry.content)
        }
    }
}

@Composable
fun AccordionSingle(variant: AccordionVariant, defaultValue: String) {
    var open by rememberSaveable { mutableStateOf(defaultValue) }
    Accordion(variant = variant) {
        AccordionItems(listOf(open)) { value, expanded -> open = if (expanded) value else "" }
    }
}

import * as React from "react"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Text } from "@/components/ui/text"

const items = [
  {
    value: "item-1",
    title: "Is it accessible?",
    content: "Yes. It works with VoiceOver and TalkBack.",
  },
  {
    value: "item-2",
    title: "Is it styled?",
    content:
      "Yes. It comes with default styles that match the other components.",
  },
  {
    value: "item-3",
    title: "Is it animated?",
    content: "Yes. It animates open and closed by default.",
  },
]

function AccordionItems() {
  return items.map((item) => (
    <AccordionItem key={item.value} value={item.value}>
      <AccordionTrigger>
        <Text>{item.title}</Text>
      </AccordionTrigger>
      <AccordionContent>
        <Text>{item.content}</Text>
      </AccordionContent>
    </AccordionItem>
  ))
}

function MultipleDemo() {
  const [value, setValue] = React.useState<string[]>(["item-1", "item-3"])
  return (
    <Accordion multiple value={value} onValueChange={setValue}>
      <AccordionItems />
    </Accordion>
  )
}

export function AccordionMultipleExample() {
  return (
    <MultipleDemo />
  )
}

import EsuissUI
import SwiftUI

struct AccordionMultipleExample: View {
  var body: some View {
    AccordionDemo(initial: ["item-1", "item-3"], multiple: true)
  }
}

struct AccordionEntry: Identifiable {
  let value: String
  let title: LocalizedStringKey
  let content: LocalizedStringKey

  var id: String { value }
}

let accordionEntries = [
  AccordionEntry(value: "item-1", title: "Is it accessible?", content: "Yes. It works with VoiceOver and TalkBack."),
  AccordionEntry(
    value: "item-2",
    title: "Is it styled?",
    content: "Yes. It comes with default styles that match the other components."
  ),
  AccordionEntry(value: "item-3", title: "Is it animated?", content: "Yes. It animates open and closed by default."),
]

struct AccordionItems: View {
  var body: some View {
    ForEach(accordionEntries) { entry in
      AccordionItem(entry.title, value: entry.value) {
        Text(entry.content)
      }
    }
  }
}

struct AccordionDemo: View {
  let multiple: Bool

  @State private var expanded: Set<String>

  init(initial: Set<String>, multiple: Bool) {
    self.multiple = multiple
    _expanded = State(initialValue: initial)
  }

  var body: some View {
    Accordion(expanded: $expanded, multiple: multiple) {
      AccordionItems()
    }
  }
}

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 com.esuiss.ui.components.Accordion
import com.esuiss.ui.components.AccordionItem
import com.esuiss.ui.components.Text

class AccordionEntry(val value: String, val title: String, val content: String)

val accordionEntries = listOf(
    AccordionEntry("item-1", "Is it accessible?", "Yes. It works with VoiceOver and TalkBack."),
    AccordionEntry("item-2", "Is it styled?", "Yes. It comes with default styles that match the other components."),
    AccordionEntry("item-3", "Is it animated?", "Yes. It animates open and closed by default."),
)

@Composable
fun AccordionItems(open: List<String>, onToggle: (String, Boolean) -> Unit) {
    accordionEntries.forEach { entry ->
        AccordionItem(
            expanded = entry.value in open,
            onExpandedChange = { onToggle(entry.value, it) },
            title = entry.title,
        ) {
            Text(entry.content)
        }
    }
}

@Composable
fun AccordionMultiple() {
    var open by rememberSaveable { mutableStateOf("item-1,item-3") }
    Accordion {
        AccordionItems(open.split(",")) { value, expanded ->
            val current = open.split(",").filter { it.isNotEmpty() }
            open = (if (expanded) current + value else current - value).joinToString(",")
        }
    }
}