reis-mobile 0.3.6 → 0.4.0

package/skills/android-display-glasses-with-jetpack-compose-glimmer/references/glimmertheme-source.md

@@ -0,0 +1,182 @@
+When implementing Glimmer styles, refer to the following source code in
+`GlimmerTheme.kt`:
+
+
+```kotlin
+/*
+ * Copyright 2025 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.xr.glimmer
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.IndicationNodeFactory
+import androidx.compose.foundation.LocalIndication
+import androidx.compose.foundation.interaction.InteractionSource
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocal
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.ProvidableCompositionLocal
+import androidx.compose.runtime.ReadOnlyComposable
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.node.DelegatableNode
+import androidx.xr.glimmer.GlimmerTheme.Companion.colors
+import androidx.xr.glimmer.GlimmerTheme.Companion.depthEffectLevels
+import androidx.xr.glimmer.GlimmerTheme.Companion.iconSizes
+import androidx.xr.glimmer.GlimmerTheme.Companion.shapes
+
+/**
+ * Jetpack Compose Glimmer contains different theme subsystems to allow visual customization across
+ * an application.
+ *
+ * Components use properties provided here when retrieving default values.
+ *
+ * Any values that are not set will inherit the current value from the theme, falling back to the
+ * defaults if there is no parent GlimmerTheme. This allows using a GlimmerTheme at the top of your
+ * application, and then separate GlimmerTheme(s) for different screens / parts of your UI,
+ * overriding only the parts of the theme definition that need to change.
+ *
+ * @param colors [Colors] used by components within this hierarchy
+ * @param typography [Typography] used by components within this hierarchy
+ * @param componentSpacingValues [ComponentSpacingValues] used by components within this hierarchy
+ * @param content The content that can retrieve values from this theme
+ */
+@Composable
+public fun GlimmerTheme(
+    colors: Colors = GlimmerTheme.colors,
+    typography: Typography = GlimmerTheme.typography,
+    componentSpacingValues: ComponentSpacingValues = GlimmerTheme.componentSpacingValues,
+    content: @Composable () -> Unit,
+) {
+    val theme = GlimmerTheme(colors, typography, componentSpacingValues)
+    CompositionLocalProvider(
+        _localGlimmerTheme provides theme,
+        // TODO: b/413429405
+        LocalIndication provides NoIndication,
+        LocalTextStyle provides typography.bodySmall,
+        LocalIconSize provides theme.iconSizes.medium,
+        content = content,
+    )
+}
+
+/**
+ * Jetpack Compose Glimmer contains different theme subsystems to allow visual customization across
+ * an application.
+ *
+ * Components use properties provided here when retrieving default values.
+ *
+ * @property colors [Colors] used by Jetpack Compose Glimmer components
+ * @property typography [Typography] used by Jetpack Compose Glimmer components. It is recommended
+ *   to use `createGoogleSansFlexTypography()` from `androidx.xr.glimmer:glimmer-google-fonts` to
+ *   create this.
+ * @property componentSpacingValues [ComponentSpacingValues] used by Jetpack Compose Glimmer
+ *   components
+ * @property shapes [Shapes] used by Jetpack Compose Glimmer components
+ * @property depthEffectLevels [DepthEffectLevels] used by Jetpack Compose Glimmer components
+ * @property iconSizes [IconSizes] used by icons
+ */
+@Immutable
+public class GlimmerTheme(
+    public val colors: Colors = Colors(),
+    public val typography: Typography = Typography(),
+    public val componentSpacingValues: ComponentSpacingValues = ComponentSpacingValues(),
+) {
+    public val shapes: Shapes = _shapes
+    public val depthEffectLevels: DepthEffectLevels = _depthEffectLevels
+    public val iconSizes: IconSizes = _iconSizes
+
+    public companion object {
+        /** Retrieves the current [Colors] at the call site's position in the hierarchy. */
+        public val colors: Colors
+            @Composable @ReadOnlyComposable get() = LocalGlimmerTheme.current.colors
+
+        /** Retrieves the current [Typography] at the call site's position in the hierarchy. */
+        public val typography: Typography
+            @Composable @ReadOnlyComposable get() = LocalGlimmerTheme.current.typography
+
+        /**
+         * Retrieves the current [ComponentSpacingValues] at the call site's position in the
+         * hierarchy.
+         */
+        public val componentSpacingValues: ComponentSpacingValues
+            @Composable @ReadOnlyComposable get() = LocalGlimmerTheme.current.componentSpacingValues
+
+        /** Retrieves the current [Shapes] at the call site's position in the hierarchy. */
+        public val shapes: Shapes
+            @Composable @ReadOnlyComposable get() = LocalGlimmerTheme.current.shapes
+
+        /**
+         * Retrieves the current [DepthEffectLevels] at the call site's position in the hierarchy.
+         */
+        public val depthEffectLevels: DepthEffectLevels
+            @Composable @ReadOnlyComposable get() = LocalGlimmerTheme.current.depthEffectLevels
+
+        /** Retrieves the current [IconSizes] at the call site's position in the hierarchy. */
+        public val iconSizes: IconSizes
+            @Composable @ReadOnlyComposable get() = LocalGlimmerTheme.current.iconSizes
+
+        /**
+         * [CompositionLocal] providing [GlimmerTheme] throughout the hierarchy. You can use
+         * properties in the companion object to access specific subsystems, for example [colors].
+         * To provide a new value for this, use [GlimmerTheme]. This API is exposed to allow
+         * retrieving values from inside CompositionLocalConsumerModifierNode implementations - in
+         * most cases you should use [colors] and other properties directly.
+         */
+        public val LocalGlimmerTheme: CompositionLocal<GlimmerTheme>
+            get() = _localGlimmerTheme
+
+        /**
+         * Cached Shapes instance to be used across [GlimmerTheme] instances - currently shapes are
+         * not user-configurable.
+         */
+        private val _shapes = Shapes()
+
+        /**
+         * Cached [DepthEffectLevels] instance to be used across [GlimmerTheme] instances -
+         * currently depth effect levels are not user-configurable.
+         */
+        private val _depthEffectLevels = DepthEffectLevels()
+
+        /**
+         * Cached IconSizes instance to be used across [GlimmerTheme] instances - currently icon
+         * sizes are not user-configurable.
+         */
+        internal val _iconSizes = IconSizes()
+    }
+
+    internal var defaultSurfaceBorderCached: BorderStroke? = null
+}
+
+private object NoIndication : IndicationNodeFactory {
+    override fun create(interactionSource: InteractionSource): DelegatableNode {
+        return object : Modifier.Node() {}
+    }
+
+    override fun equals(other: Any?): Boolean = other === this
+
+    override fun hashCode(): Int = -5
+}
+
+/** Use [GlimmerTheme.LocalGlimmerTheme] to access this publicly. */
+@Suppress("CompositionLocalNaming")
+private val _localGlimmerTheme: ProvidableCompositionLocal<GlimmerTheme> =
+    staticCompositionLocalOf {
+        GlimmerTheme()
+    }
+```
+
+<br />

package/skills/android-display-glasses-with-jetpack-compose-glimmer/references/icon-source.md

@@ -0,0 +1,388 @@
+When creating a Glimmer Icon component, refer to the following source code in
+`Icon.kt`:
+
+
+```kotlin
+/*
+ * Copyright 2025 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.xr.glimmer
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.ProvidableCompositionLocal
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.structuralEqualityPolicy
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.CacheDrawModifierNode
+import androidx.compose.ui.draw.paint
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.ColorProducer
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.isSpecified
+import androidx.compose.ui.graphics.layer.drawLayer
+import androidx.compose.ui.graphics.painter.BitmapPainter
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.graphics.toolingGraphicsLayer
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.node.DelegatingNode
+import androidx.compose.ui.node.ModifierNodeElement
+import androidx.compose.ui.node.invalidateDraw
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.role
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.unit.Dp
+
+/**
+ * An icon component that draws [imageVector], with a default size of [LocalIconSize], and applies a
+ * content color tint. Icon is an opinionated component designed to be used with single-color icons
+ * so that they can be tinted correctly for the component they are placed in. The recommended icon
+ * sizes can be retrieved using [GlimmerTheme.Companion.iconSizes]. A size can be set explicitly
+ * using [size], and components can use [LocalIconSize] to set the preferred size for any Icons
+ * inside the component. The content color used to tint this icon is provided by [surface]. To set a
+ * custom tint color, use the Icon overload with a tint parameter. For multicolored icons and icons
+ * that should not be tinted, use the overload and set [Color.Unspecified] as the tint color. For
+ * generic images that should not be tinted, and should not use the provided icon size, use the
+ * generic [androidx.compose.foundation.Image] instead.
+ *
+ * @param imageVector [ImageVector] to draw inside this icon
+ * @param contentDescription text used by accessibility services to describe what this icon
+ *   represents. This should always be provided unless this icon is used for decorative purposes,
+ *   and does not represent a meaningful action that a user can take. This text should be localized,
+ *   such as by using [androidx.compose.ui.res.stringResource] or similar
+ * @param modifier the [Modifier] to be applied to this icon
+ * @see LocalIconSize
+ * @see GlimmerTheme.Companion.iconSizes
+ */
+@Composable
+public fun Icon(
+    imageVector: ImageVector,
+    contentDescription: String?,
+    modifier: Modifier = Modifier,
+) {
+    Icon(
+        painter = rememberVectorPainter(imageVector),
+        contentDescription = contentDescription,
+        modifier = modifier,
+    )
+}
+
+/**
+ * An icon component that draws [imageVector], with a default size of [LocalIconSize], and applies a
+ * tint of [tint]. Icon is an opinionated component designed to be used with single-color icons so
+ * that they can be tinted correctly for the component they are placed in. The recommended icon
+ * sizes can be retrieved using [GlimmerTheme.Companion.iconSizes]. A size can be set explicitly
+ * using [size], and components can use [LocalIconSize] to set the preferred size for any Icons
+ * inside the component. Use the other overload of Icon without a [tint] parameter to apply the
+ * recommended content color provided by a [surface]. For multicolored icons and icons that should
+ * not be tinted, set [tint] to [Color.Unspecified]. For generic images that should not be tinted,
+ * and should not use the provided icon size, use the generic [androidx.compose.foundation.Image]
+ * instead.
+ *
+ * @param imageVector [ImageVector] to draw inside this icon
+ * @param tint tint to be applied to [imageVector]. If [Color.Unspecified] is provided, then no tint
+ *   is applied.
+ * @param contentDescription text used by accessibility services to describe what this icon
+ *   represents. This should always be provided unless this icon is used for decorative purposes,
+ *   and does not represent a meaningful action that a user can take. This text should be localized,
+ *   such as by using [androidx.compose.ui.res.stringResource] or similar
+ * @param modifier the [Modifier] to be applied to this icon
+ * @see LocalIconSize
+ * @see GlimmerTheme.Companion.iconSizes
+ */
+@Composable
+public fun Icon(
+    imageVector: ImageVector,
+    tint: Color,
+    contentDescription: String?,
+    modifier: Modifier = Modifier,
+) {
+    Icon(
+        painter = rememberVectorPainter(imageVector),
+        tint =
+            if (tint.isSpecified) {
+                { tint }
+            } else null,
+        contentDescription = contentDescription,
+        modifier = modifier,
+    )
+}
+
+/**
+ * An icon component that draws [bitmap], with a default size of [LocalIconSize], and applies a
+ * content color tint. Icon is an opinionated component designed to be used with single-color icons
+ * so that they can be tinted correctly for the component they are placed in. The recommended icon
+ * sizes can be retrieved using [GlimmerTheme.Companion.iconSizes]. A size can be set explicitly
+ * using [size], and components can use [LocalIconSize] to set the preferred size for any Icons
+ * inside the component. The content color used to tint this icon is provided by [surface]. To set a
+ * custom tint color, use the Icon overload with a tint parameter. For multicolored icons and icons
+ * that should not be tinted, use the overload and set [Color.Unspecified] as the tint color. For
+ * generic images that should not be tinted, and should not use the provided icon size, use the
+ * generic [androidx.compose.foundation.Image] instead.
+ *
+ * @param bitmap [ImageBitmap] to draw inside this icon
+ * @param contentDescription text used by accessibility services to describe what this icon
+ *   represents. This should always be provided unless this icon is used for decorative purposes,
+ *   and does not represent a meaningful action that a user can take. This text should be localized,
+ *   such as by using [androidx.compose.ui.res.stringResource] or similar
+ * @param modifier the [Modifier] to be applied to this icon
+ * @see LocalIconSize
+ * @see GlimmerTheme.Companion.iconSizes
+ */
+@Composable
+public fun Icon(bitmap: ImageBitmap, contentDescription: String?, modifier: Modifier = Modifier) {
+    val painter = remember(bitmap) { BitmapPainter(bitmap) }
+    Icon(painter = painter, contentDescription = contentDescription, modifier = modifier)
+}
+
+/**
+ * An icon component that draws [bitmap], with a default size of [LocalIconSize], and applies a tint
+ * of [tint]. Icon is an opinionated component designed to be used with single-color icons so that
+ * they can be tinted correctly for the component they are placed in. The recommended icon sizes can
+ * be retrieved using [GlimmerTheme.Companion.iconSizes]. A size can be set explicitly using [size],
+ * and components can use [LocalIconSize] to set the preferred size for any Icons inside the
+ * component. Use the other overload of Icon without a [tint] parameter to apply the recommended
+ * content color provided by a [surface]. For multicolored icons and icons that should not be
+ * tinted, set [tint] to [Color.Unspecified]. For generic images that should not be tinted, and
+ * should not use the provided icon size, use the generic [androidx.compose.foundation.Image]
+ * instead.
+ *
+ * @param bitmap [ImageBitmap] to draw inside this icon
+ * @param tint tint to be applied to [bitmap]. If [Color.Unspecified] is provided, then no tint is
+ *   applied.
+ * @param contentDescription text used by accessibility services to describe what this icon
+ *   represents. This should always be provided unless this icon is used for decorative purposes,
+ *   and does not represent a meaningful action that a user can take. This text should be localized,
+ *   such as by using [androidx.compose.ui.res.stringResource] or similar
+ * @param modifier the [Modifier] to be applied to this icon
+ * @see LocalIconSize
+ * @see GlimmerTheme.Companion.iconSizes
+ */
+@Composable
+public fun Icon(
+    bitmap: ImageBitmap,
+    tint: Color,
+    contentDescription: String?,
+    modifier: Modifier = Modifier,
+) {
+    val painter = remember(bitmap) { BitmapPainter(bitmap) }
+    Icon(
+        painter = painter,
+        tint =
+            if (tint.isSpecified) {
+                { tint }
+            } else null,
+        contentDescription = contentDescription,
+        modifier = modifier,
+    )
+}
+
+/**
+ * An icon component that draws [painter], with a default size of [LocalIconSize], and applies a
+ * content color tint. Icon is an opinionated component designed to be used with single-color icons
+ * so that they can be tinted correctly for the component they are placed in. The recommended icon
+ * sizes can be retrieved using [GlimmerTheme.Companion.iconSizes]. A size can be set explicitly
+ * using [size], and components can use [LocalIconSize] to set the preferred size for any Icons
+ * inside the component. The content color used to tint this icon is provided by [surface]. To set a
+ * custom tint color, use the Icon overload with a tint parameter. For multicolored icons and icons
+ * that should not be tinted, use the overload and set `null` for the tint parameter. For generic
+ * images that should not be tinted, and should not use the provided icon size, use the generic
+ * [androidx.compose.foundation.Image] instead.
+ *
+ * @param painter [Painter] to draw inside this icon
+ * @param contentDescription text used by accessibility services to describe what this icon
+ *   represents. This should always be provided unless this icon is used for decorative purposes,
+ *   and does not represent a meaningful action that a user can take. This text should be localized,
+ *   such as by using [androidx.compose.ui.res.stringResource] or similar
+ * @param modifier the [Modifier] to be applied to this icon
+ * @see LocalIconSize
+ * @see GlimmerTheme.Companion.iconSizes
+ */
+@Composable
+public fun Icon(painter: Painter, contentDescription: String?, modifier: Modifier = Modifier) {
+    Icon(
+        painter = painter,
+        useContentColor = true,
+        tint = null,
+        contentDescription = contentDescription,
+        modifier = modifier,
+    )
+}
+
+/**
+ * An icon component that draws [painter], with a default size of [LocalIconSize], and applies a
+ * tint of [tint]. Icon is an opinionated component designed to be used with single-color icons so
+ * that they can be tinted correctly for the component they are placed in. The recommended icon
+ * sizes can be retrieved using [GlimmerTheme.Companion.iconSizes]. A size can be set explicitly
+ * using [size], and components can use [LocalIconSize] to set the preferred size for any Icons
+ * inside the component. Use the other overload of Icon without a [tint] parameter to apply the
+ * recommended content color provided by a [surface]. For multicolored icons and icons that should
+ * not be tinted, set [tint] to `null`. For generic images that should not be tinted, and should not
+ * use the provided icon size, use the generic [androidx.compose.foundation.Image] instead.
+ *
+ * @param painter [Painter] to draw inside this icon
+ * @param tint tint to be applied to [painter]. If null, then no tint is applied.
+ * @param contentDescription text used by accessibility services to describe what this icon
+ *   represents. This should always be provided unless this icon is used for decorative purposes,
+ *   and does not represent a meaningful action that a user can take. This text should be localized,
+ *   such as by using [androidx.compose.ui.res.stringResource] or similar
+ * @param modifier the [Modifier] to be applied to this icon
+ * @see LocalIconSize
+ * @see GlimmerTheme.Companion.iconSizes
+ */
+@Composable
+public fun Icon(
+    painter: Painter,
+    tint: ColorProducer?,
+    contentDescription: String?,
+    modifier: Modifier = Modifier,
+) {
+    Icon(
+        painter = painter,
+        useContentColor = false,
+        tint = tint,
+        contentDescription = contentDescription,
+        modifier = modifier,
+    )
+}
+
+/**
+ * CompositionLocal containing the preferred size of an icon. This value will be used by [Icon] by
+ * default - it can be overridden with a [size] modifier.
+ */
+public val LocalIconSize: ProvidableCompositionLocal<Dp> =
+    compositionLocalOf(structuralEqualityPolicy()) { GlimmerTheme._iconSizes.medium }
+
+@Composable
+private fun Icon(
+    painter: Painter,
+    useContentColor: Boolean,
+    tint: ColorProducer?,
+    contentDescription: String?,
+    modifier: Modifier,
+) {
+    val colorFilter =
+        if (useContentColor || tint != null) {
+            IconColorFilterElement(
+                useContentColor = useContentColor,
+                tint = tint,
+                painter = painter,
+            )
+        } else {
+            Modifier
+        }
+    val semantics =
+        if (contentDescription != null) {
+            Modifier.semantics {
+                this.contentDescription = contentDescription
+                this.role = Role.Image
+            }
+        } else {
+            Modifier
+        }
+    Box(
+        modifier
+            .toolingGraphicsLayer()
+            .size(LocalIconSize.current)
+            .then(colorFilter)
+            .paint(painter, contentScale = ContentScale.Fit)
+            .then(semantics)
+    )
+}
+
+@Suppress("ModifierNodeInspectableProperties")
+private class IconColorFilterElement(
+    private val useContentColor: Boolean,
+    private val tint: ColorProducer?,
+    private val painter: Painter,
+) : ModifierNodeElement<IconColorFilterNode>() {
+    override fun create() = IconColorFilterNode(useContentColor, tint, painter)
+
+    override fun update(node: IconColorFilterNode) {
+        node.update(useContentColor, tint, painter)
+    }
+
+    override fun equals(other: Any?): Boolean {
+        if (this === other) return true
+        if (other !is IconColorFilterElement) return false
+
+        if (useContentColor != other.useContentColor) return false
+        if (tint != other.tint) return false
+        if (painter != other.painter) return false
+
+        return true
+    }
+
+    override fun hashCode(): Int {
+        var result = useContentColor.hashCode()
+        result = 31 * result + (tint?.hashCode() ?: 0)
+        result = 31 * result + painter.hashCode()
+        return result
+    }
+}
+
+private class IconColorFilterNode(
+    private var useContentColor: Boolean,
+    private var tint: ColorProducer?,
+    private var painter: Painter,
+) : DelegatingNode() {
+    val cacheDrawNode =
+        delegate(
+            CacheDrawModifierNode {
+                val layer = obtainGraphicsLayer()
+                layer.apply { record { drawContent() } }
+                var cachedTintColor = Color.Unspecified
+                onDrawWithContent {
+                    val tintColor =
+                        if (useContentColor) {
+                            currentContentColor()
+                        } else {
+                            tint?.invoke() ?: Color.Unspecified
+                        }
+                    if (cachedTintColor != tintColor) {
+                        cachedTintColor = tintColor
+                        val cachedColorFilter =
+                            if (tintColor.isSpecified) ColorFilter.tint(tintColor) else null
+                        layer.colorFilter = cachedColorFilter
+                    }
+                    drawLayer(graphicsLayer = layer)
+                }
+            }
+        )
+
+    fun update(useContentColor: Boolean, tint: ColorProducer?, painter: Painter) {
+        val painterChanged = this.painter != painter
+        if (this.useContentColor != useContentColor || this.tint != tint || painterChanged) {
+            this.useContentColor = useContentColor
+            this.tint = tint
+            this.painter = painter
+            if (painterChanged) {
+                cacheDrawNode.invalidateDrawCache()
+            } else {
+                cacheDrawNode.invalidateDraw()
+            }
+        }
+    }
+}
+```
+
+<br />

package/skills/android-display-glasses-with-jetpack-compose-glimmer/references/iconbutton-source.md

@@ -0,0 +1,126 @@
+When creating a Glimmer Icon component, refer to the following source code in
+`IconButton.kt` for icon buttons:
+
+
+```kotlin
+/*
+ * Copyright 2026 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.xr.glimmer
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.role
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+/**
+ * IconButton is a component used for exposing supplementary actions with a single tap.
+ *
+ * Icon buttons are used when a compact button is required, such as in a toolbar or image list.
+ *
+ * [content] should typically be an [Icon]. If using a custom icon, note that the typical size for
+ * the internal icon is 32 x 32 dp. Container has an overall minimum size of 48 x 48 dp.
+ *
+ * @param onClick called when this icon button is clicked
+ * @param modifier the [Modifier] to be applied to this icon button
+ * @param enabled controls the enabled state of this icon button. When `false`, this icon button
+ *   will not respond to user input
+ * @param shape the [Shape] used to clip this icon button
+ * @param color background color of this icon button
+ * @param contentColor content color used by components inside [content]
+ * @param contentPadding the spacing values to apply internally between the container and the
+ *   content
+ * @param interactionSource an optional hoisted [MutableInteractionSource] for observing and
+ *   emitting Interactions for this icon button. You can use this to change the icon button's
+ *   appearance or preview the icon button in different states. Note that if `null` is provided,
+ *   interactions will still happen internally.
+ * @param content the content of this icon button, typically an [Icon]
+ * @sample androidx.xr.glimmer.samples.IconButtonSample
+ */
+@Composable
+public fun IconButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    shape: Shape = GlimmerTheme.shapes.large,
+    color: Color = GlimmerTheme.colors.surface,
+    contentColor: Color = calculateContentColor(color),
+    contentPadding: PaddingValues = IconButtonDefaults.contentPadding,
+    interactionSource: MutableInteractionSource? = null,
+    content: @Composable () -> Unit,
+) {
+    val internalInteractionSource = interactionSource ?: remember { MutableInteractionSource() }
+
+    Box(
+        modifier
+            .semantics { role = Role.Button }
+            .surface(
+                enabled = enabled,
+                shape = shape,
+                color = color,
+                contentColor = contentColor,
+                depthEffect = null,
+                interactionSource = internalInteractionSource,
+            )
+            .clickable(
+                enabled = enabled,
+                interactionSource = internalInteractionSource,
+                onClick = onClick,
+            )
+            .defaultMinSize(IconButtonDefaults.minimumSize)
+            .padding(contentPadding),
+        contentAlignment = Alignment.Center,
+    ) {
+        CompositionLocalProvider(
+            LocalIconSize provides IconButtonDefaults.iconSize,
+            content = content,
+        )
+    }
+}
+
+/** Default values used for [IconButton]. */
+public object IconButtonDefaults {
+    /** Default content padding for an [IconButton]. */
+    @get:Composable
+    public val contentPadding: PaddingValues
+        get() = PaddingValues(GlimmerTheme.componentSpacingValues.small)
+
+    /** Minimum size for icon-only buttons: [IconButton], [IconToggleButton]. */
+    internal val minimumSize: Dp
+        get() = 48.dp
+
+    /** Default icon size for icon-only buttons: [IconButton], [IconToggleButton]. */
+    @get:Composable
+    internal val iconSize: Dp
+        get() = GlimmerTheme.iconSizes.small
+}
+```
+
+<br />