@worldcoin/nucleus 0.1.4

package/android/gradlew.bat

@@ -0,0 +1,94 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

package/android/nucleus/build.gradle.kts

@@ -0,0 +1,87 @@
+import org.jetbrains.kotlin.gradle.dsl.JvmTarget
+
+plugins {
+    alias(libs.plugins.android.library)
+    alias(libs.plugins.kotlin.compose)
+    alias(libs.plugins.ktlint)
+    `maven-publish`
+}
+
+group = "com.worldcoin"
+version =
+    rootProject.layout.projectDirectory
+        .file("../VERSION")
+        .asFile
+        .readText()
+        .trim()
+
+android {
+    namespace = "com.worldcoin.nucleus"
+    compileSdk = 35
+
+    defaultConfig {
+        minSdk = 23
+    }
+
+    buildFeatures {
+        compose = true
+    }
+
+    compileOptions {
+        sourceCompatibility = JavaVersion.VERSION_17
+        targetCompatibility = JavaVersion.VERSION_17
+    }
+
+    publishing {
+        singleVariant("release") {
+            withSourcesJar()
+        }
+    }
+}
+
+kotlin {
+    compilerOptions {
+        jvmTarget.set(JvmTarget.JVM_17)
+    }
+}
+
+dependencies {
+    implementation(libs.androidx.appcompat)
+    implementation(libs.androidx.core.ktx)
+    implementation(libs.material)
+
+    val composeBom = platform(libs.androidx.compose.bom)
+    implementation(composeBom)
+
+    api(libs.androidx.compose.foundation)
+    api(libs.androidx.compose.ui)
+    api(libs.androidx.compose.ui.graphics)
+    implementation(libs.androidx.compose.material3)
+    implementation(libs.coil.compose)
+    implementation(libs.coil.network.okhttp)
+    implementation(libs.androidx.compose.ui.tooling.preview)
+    debugImplementation(libs.androidx.compose.ui.tooling)
+}
+
+afterEvaluate {
+    publishing {
+        publications {
+            create<MavenPublication>("release") {
+                from(components["release"])
+                groupId = "com.worldcoin"
+                artifactId = "nucleus"
+                version = project.version.toString()
+            }
+        }
+        repositories {
+            maven {
+                name = "GitHubPackages"
+                url = uri("https://maven.pkg.github.com/worldcoin/nucleus")
+                credentials {
+                    username = System.getenv("GITHUB_ACTOR")
+                    password = System.getenv("GITHUB_TOKEN")
+                }
+            }
+        }
+    }
+}

package/android/nucleus/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" />

package/android/nucleus/src/main/java/com/worldcoin/nucleus/components/card/NucleusCard.kt

@@ -0,0 +1,180 @@
+package com.worldcoin.nucleus.components.card
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+/**
+ * A clickable card displaying a primary image alongside a title, optional description, optional
+ * logo, and optional call-to-action.
+ *
+ * The layout is selected by [textPlacement]: [NucleusCardTextPlacement.Overlay] floats the
+ * info row over the image, while [NucleusCardTextPlacement.Below] stacks it underneath.
+ * Width fills the parent and height is derived from [aspectRatio].
+ *
+ * @param title Primary text shown in the info row.
+ * @param primaryImageUrl URL of the card's main image.
+ * @param titleStyle Text style for [title]; the color is overridden by [theme].
+ * @param subtitleStyle Text style for [description]; the color is overridden by [theme].
+ * @param ctaTextStyle Text style for the CTA label; the color is overridden by [theme].
+ * @param modifier Modifier applied to the card root.
+ * @param description Optional secondary text shown below [title].
+ * @param logoUrl Optional logo image shown next to the title. Only rendered in the overlay layout.
+ * @param ctaTitle Optional call-to-action label. Only rendered in the overlay layout.
+ * @param size Controls inner padding of the info row.
+ * @param theme Controls primary and secondary text colors.
+ * @param aspectRatio Width-to-height ratio of the card.
+ * @param textPlacement Whether the info row floats over the image or sits below it.
+ * @param cornerRadius Corner radius of the card surface.
+ * @param border Optional border stroke applied to the card surface.
+ * @param onClick Invoked when the card is clicked.
+ * @param onCtaClick Invoked when the CTA is clicked. Ignored when [ctaTitle] is null or when
+ *   [textPlacement] is [NucleusCardTextPlacement.Below].
+ */
+@Composable
+fun NucleusCard(
+    title: String,
+    primaryImageUrl: String,
+    titleStyle: TextStyle,
+    subtitleStyle: TextStyle,
+    ctaTextStyle: TextStyle,
+    modifier: Modifier = Modifier,
+    description: String? = null,
+    logoUrl: String? = null,
+    ctaTitle: String? = null,
+    size: NucleusCardSize = NucleusCardSize.Medium,
+    theme: NucleusCardTheme = NucleusCardTheme.Dark,
+    aspectRatio: NucleusCardAspectRatio = NucleusCardAspectRatio.Landscape,
+    textPlacement: NucleusCardTextPlacement = NucleusCardTextPlacement.Below,
+    cornerRadius: Dp = 16.dp,
+    border: BorderStroke? = null,
+    onClick: () -> Unit = {},
+    onCtaClick: () -> Unit = {},
+) {
+    when (textPlacement) {
+        NucleusCardTextPlacement.Overlay -> NucleusCardWithFloatingInfoView(
+            title = title,
+            primaryImageUrl = primaryImageUrl,
+            titleStyle = titleStyle,
+            subtitleStyle = subtitleStyle,
+            modifier = modifier,
+            description = description,
+            logoUrl = logoUrl,
+            ctaTitle = ctaTitle,
+            ctaTextStyle = ctaTextStyle,
+            size = size,
+            theme = theme,
+            aspectRatio = aspectRatio,
+            cornerRadius = cornerRadius,
+            border = border,
+            onClick = onClick,
+            onCtaClick = onCtaClick,
+        )
+
+        NucleusCardTextPlacement.Below -> NucleusCardWithNonFloatingInfoView(
+            title = title,
+            primaryImageUrl = primaryImageUrl,
+            titleStyle = titleStyle,
+            subtitleStyle = subtitleStyle,
+            modifier = modifier,
+            description = description,
+            theme = theme,
+            aspectRatio = aspectRatio,
+            cornerRadius = cornerRadius,
+            border = border,
+            onClick = onClick,
+        )
+    }
+}
+
+private val previewTitleStyle = TextStyle(
+    fontSize = 19.sp,
+    lineHeight = 22.8.sp,
+    fontWeight = FontWeight.SemiBold,
+)
+private val previewSubtitleStyle = TextStyle(
+    fontSize = 19.sp,
+    lineHeight = 24.7.sp,
+    fontWeight = FontWeight.Normal,
+)
+
+private val previewCtaStyle = TextStyle(
+    fontSize = 15.sp,
+    lineHeight = 18.sp,
+    fontWeight = FontWeight.Medium,
+)
+
+@Preview
+@Composable
+private fun NucleusCardOverlayLandscapePreview() {
+    NucleusCard(
+        title = "Title goes here",
+        primaryImageUrl = "",
+        titleStyle = previewTitleStyle,
+        subtitleStyle = previewSubtitleStyle,
+        ctaTextStyle = previewCtaStyle,
+        description = "Description goes here",
+        ctaTitle = "Verify",
+        size = NucleusCardSize.Large,
+        theme = NucleusCardTheme.Dark,
+        aspectRatio = NucleusCardAspectRatio.Landscape,
+        textPlacement = NucleusCardTextPlacement.Overlay,
+    )
+}
+
+@Preview
+@Composable
+private fun NucleusCardOverlayPortraitPreview() {
+    NucleusCard(
+        title = "Title goes here",
+        primaryImageUrl = "",
+        titleStyle = previewTitleStyle,
+        subtitleStyle = previewSubtitleStyle,
+        ctaTextStyle = previewCtaStyle,
+        description = "Description goes here",
+        ctaTitle = "Verify",
+        size = NucleusCardSize.Small,
+        theme = NucleusCardTheme.Light,
+        aspectRatio = NucleusCardAspectRatio.Portrait,
+        textPlacement = NucleusCardTextPlacement.Overlay,
+    )
+}
+
+@Preview
+@Composable
+private fun NucleusCardOverlaySquareNoCtaPreview() {
+    NucleusCard(
+        title = "Title goes here",
+        primaryImageUrl = "",
+        titleStyle = previewTitleStyle,
+        subtitleStyle = previewSubtitleStyle,
+        ctaTextStyle = previewCtaStyle,
+        description = "Description goes here",
+        size = NucleusCardSize.Small,
+        theme = NucleusCardTheme.Light,
+        aspectRatio = NucleusCardAspectRatio.Square,
+        textPlacement = NucleusCardTextPlacement.Overlay,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun NucleusCardBelowPreview() {
+    NucleusCard(
+        title = "Title goes here",
+        primaryImageUrl = "",
+        titleStyle = previewTitleStyle,
+        subtitleStyle = previewSubtitleStyle,
+        ctaTextStyle = previewCtaStyle,
+        description = "Description goes here",
+        theme = NucleusCardTheme.Dark,
+        aspectRatio = NucleusCardAspectRatio.Landscape,
+        textPlacement = NucleusCardTextPlacement.Below,
+    )
+}

package/android/nucleus/src/main/java/com/worldcoin/nucleus/components/card/NucleusCardAspectRatio.kt

@@ -0,0 +1,12 @@
+package com.worldcoin.nucleus.components.card
+
+/**
+ * Width-to-height ratio applied to the card.
+ *
+ * @property ratio The numeric aspect ratio applied via `Modifier.aspectRatio`.
+ */
+enum class NucleusCardAspectRatio(val ratio: Float) {
+    Landscape(ratio = 16 / 11f),
+    Portrait(ratio = 3 / 4f),
+    Square(ratio = 1f),
+}

package/android/nucleus/src/main/java/com/worldcoin/nucleus/components/card/NucleusCardSize.kt

@@ -0,0 +1,10 @@
+package com.worldcoin.nucleus.components.card
+
+/**
+ * Controls the inner padding of the card's info row.
+ */
+enum class NucleusCardSize {
+    Small,
+    Medium,
+    Large,
+}

package/android/nucleus/src/main/java/com/worldcoin/nucleus/components/card/NucleusCardTextPlacement.kt

@@ -0,0 +1,9 @@
+package com.worldcoin.nucleus.components.card
+
+/**
+ * Where the card's info row is placed relative to the primary image.
+ */
+enum class NucleusCardTextPlacement {
+    Overlay,
+    Below,
+}

package/android/nucleus/src/main/java/com/worldcoin/nucleus/components/card/NucleusCardTheme.kt

@@ -0,0 +1,74 @@
+package com.worldcoin.nucleus.components.card
+
+import androidx.compose.ui.graphics.Color
+
+/**
+ * An sRGB color packed as `0xRRGGBB` together with an opacity.
+ *
+ * @property color 24-bit RGB value (e.g. `0xFFFFFF` for white).
+ * @property alpha Opacity in the range `[0f, 1f]`, where `0f` is fully transparent and `1f` is
+ *   fully opaque.
+ */
+data class NucleusCardColor(
+    val color: Int,
+    val alpha: Float = 1.0f,
+)
+
+/**
+ * Color palette applied to text and container surfaces inside the card.
+ *
+ * @property primaryTextColor Color used for the title.
+ * @property secondaryTextColor Color used for the description.
+ * @property primaryContainerColor Background color of the CTA container.
+ * @property primaryContainerTextColor Foreground color of the CTA container.
+ */
+enum class NucleusCardTheme(
+    val primaryTextColor: NucleusCardColor,
+    val secondaryTextColor: NucleusCardColor,
+    val primaryContainerColor: NucleusCardColor,
+    val primaryContainerTextColor: NucleusCardColor,
+) {
+    Light(
+        primaryTextColor = NucleusCardColor(0xFFFFFF),
+        secondaryTextColor = NucleusCardColor(0xFFFFFF, alpha = 0.6f),
+        primaryContainerColor = NucleusCardColor(0xFFFFFF),
+        primaryContainerTextColor = NucleusCardColor(0x181818),
+    ),
+    Dark(
+        primaryTextColor = NucleusCardColor(0x181818),
+        secondaryTextColor = NucleusCardColor(0x717680),
+        primaryContainerColor = NucleusCardColor(0x181818),
+        primaryContainerTextColor = NucleusCardColor(0xFFFFFF),
+    ),
+}
+
+/**
+ * Resolves [NucleusCardTheme.primaryTextColor] to a Compose [Color], applying its alpha.
+ *
+ * @return The primary text color as a Compose [Color].
+ */
+fun NucleusCardTheme.toPrimaryTextColor(): Color = Color(primaryTextColor.color).copy(alpha = primaryTextColor.alpha)
+
+/**
+ * Resolves [NucleusCardTheme.secondaryTextColor] to a Compose [Color], applying its alpha.
+ *
+ * @return The secondary text color as a Compose [Color].
+ */
+fun NucleusCardTheme.toSecondaryTextColor(): Color =
+    Color(secondaryTextColor.color).copy(alpha = secondaryTextColor.alpha)
+
+/**
+ * Resolves [NucleusCardTheme.primaryContainerColor] to a Compose [Color], applying its alpha.
+ *
+ * @return The primary container background color as a Compose [Color].
+ */
+fun NucleusCardTheme.toPrimaryContainerColor(): Color =
+    Color(primaryContainerColor.color).copy(alpha = primaryContainerColor.alpha)
+
+/**
+ * Resolves [NucleusCardTheme.primaryContainerTextColor] to a Compose [Color], applying its alpha.
+ *
+ * @return The primary container foreground color as a Compose [Color].
+ */
+fun NucleusCardTheme.toPrimaryContainerTextColor(): Color =
+    Color(primaryContainerTextColor.color).copy(alpha = primaryContainerTextColor.alpha)

package/android/nucleus/src/main/java/com/worldcoin/nucleus/components/card/NucleusCardWithFloatingInfoView.kt

@@ -0,0 +1,146 @@
+package com.worldcoin.nucleus.components.card
+
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.foundation.BorderStroke
+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.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import coil3.compose.AsyncImage
+import coil3.request.ImageRequest
+import com.worldcoin.nucleus.components.utils.toPx
+import com.worldcoin.nucleus.tokens.NucleusPrimitiveColors
+
+@Composable
+internal fun NucleusCardWithFloatingInfoView(
+    modifier: Modifier = Modifier,
+    title: String,
+    primaryImageUrl: String,
+    titleStyle: TextStyle,
+    subtitleStyle: TextStyle,
+    description: String?,
+    logoUrl: String?,
+    ctaTitle: String?,
+    ctaTextStyle: TextStyle,
+    size: NucleusCardSize,
+    theme: NucleusCardTheme,
+    aspectRatio: NucleusCardAspectRatio,
+    cornerRadius: Dp,
+    border: BorderStroke?,
+    onClick: () -> Unit,
+    onCtaClick: () -> Unit,
+) {
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+    val elevation by animateDpAsState(targetValue = if (isPressed) 4.dp else 0.dp)
+    val shape = RoundedCornerShape(size = cornerRadius)
+
+    Surface(
+        shape = shape,
+        shadowElevation = elevation,
+        border = border,
+        color = NucleusPrimitiveColors.grey500,
+        modifier = modifier
+            .fillMaxWidth()
+            .aspectRatio(aspectRatio.ratio)
+            .zIndex(elevation.toPx()),
+        interactionSource = interactionSource,
+        onClick = onClick,
+    ) {
+        Box {
+            AsyncImage(
+                modifier = Modifier.fillMaxSize(),
+                model = ImageRequest
+                    .Builder(context = LocalContext.current)
+                    .data(primaryImageUrl)
+                    .build(),
+                contentDescription = title,
+                contentScale = ContentScale.Crop,
+            )
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .align(Alignment.BottomCenter)
+                    .padding(all = if (size === NucleusCardSize.Small) 16.dp else 20.dp),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                logoUrl?.let {
+                    AsyncImage(
+                        modifier = Modifier
+                            .size(40.dp)
+                            .clip(shape = RoundedCornerShape(size = 12.dp))
+                            .background(color = NucleusPrimitiveColors.grey700),
+                        model = ImageRequest
+                            .Builder(context = LocalContext.current)
+                            .data(it)
+                            .build(),
+                        contentDescription = title,
+                    )
+                    Spacer(modifier = Modifier.width(12.dp))
+                }
+                Column(modifier = Modifier.weight(1f)) {
+                    Text(
+                        text = title,
+                        style = titleStyle.copy(color = theme.toPrimaryTextColor()),
+                        maxLines = 2,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                    description?.let {
+                        Text(
+                            text = it,
+                            style = subtitleStyle.copy(color = theme.toSecondaryTextColor()),
+                            maxLines = 2,
+                            overflow = TextOverflow.Ellipsis,
+                            modifier = Modifier.padding(top = if (ctaTitle == null) 8.dp else 2.dp),
+                        )
+                    }
+                }
+                ctaTitle?.let {
+                    Text(
+                        modifier = Modifier
+                            .padding(start = 8.dp)
+                            .clip(CircleShape)
+                            .background(
+                                color = theme.toPrimaryContainerColor(),
+                                shape = CircleShape,
+                            ).clickable { onCtaClick() }
+                            .padding(horizontal = 16.dp, vertical = 8.dp),
+                        text = it,
+                        textAlign = TextAlign.Center,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                        style = ctaTextStyle.copy(color = theme.toPrimaryContainerTextColor()),
+                    )
+                }
+            }
+        }
+    }
+}