diff --git a/README.md b/README.md index 6e1a6c30..395af902 100644 --- a/README.md +++ b/README.md @@ -227,6 +227,58 @@ HueSlider( ) ``` +### Custom Thumb + +Every slider takes a `thumb` slot, so the Material 3 thumb can be replaced outright — its +size, shape and stroke are yours rather than a fixed set of dimension parameters. The slot +receives the slider's `InteractionSource`, so a thumb can also react to press and drag. + +![Custom thumb](docs/images/custom-thumb.png) + +```kotlin +private val SquareThumbSize = 48.dp // M3 minimum interactive size + +@Composable +fun SquareThumb(color: Color, interaction: InteractionSource) { + val fill = color.copy(alpha = 1f) + val shape = RoundedCornerShape(16.dp) + val ring = lerp(fill, Color.White, 0.6f) + + val dragged by interaction.collectIsDraggedAsState() + val pressed by interaction.collectIsPressedAsState() + val elevation by animateDpAsState(if (dragged || pressed) 4.dp else 0.dp) + + Box( + Modifier + .size(SquareThumbSize) + .shadow(elevation, shape) + .background(ring, shape) + .padding(5.dp) + .background(fill, RoundedCornerShape(11.dp)) + ) +} + +HueSlider( + state = state, + thumb = { source -> SquareThumb(state.hslColor.toComposeColor(), source) }, + thumbWidth = SquareThumbSize, // so the track leaves room for it +) +``` + +The thumb needs no state parameter: `state` is already in scope at the call site, so the +composable restyles itself as the color changes. The ring is the fill lifted toward white +rather than a light-or-dark choice made at some luminance threshold — a threshold snaps +visibly the moment a drag crosses it, while this moves with the color. And because the +slot is handed the slider's `InteractionSource`, the thumb can react to being dragged; +that is state a caller cannot otherwise reach, since the source is created inside the +slider. + +`thumbWidth` matters. The track breaks around the thumb, and it sizes that break from this +value, defaulting to `ColorPickerDefaults.ThumbWidth` (the Material 3 handle). A wider +thumb that does not declare its width covers the gap and sits flush against the gradient. +`thumbTrackGap` controls the clearance itself. The sample app's *Custom thumb* section runs +exactly this code. + ### Color Swatch Renders a color over a transparency checkerboard: diff --git a/colorpicker/api/colorpicker.klib.api b/colorpicker/api/colorpicker.klib.api index 836e9274..6944d2a7 100644 --- a/colorpicker/api/colorpicker.klib.api +++ b/colorpicker/api/colorpicker.klib.api @@ -249,6 +249,10 @@ final class codes.side.colorpicker.theme/ColorPickerShapes { // codes.side.color final object codes.side.colorpicker.theme/ColorPickerDefaults { // codes.side.colorpicker.theme/ColorPickerDefaults|null[0] final val SwatchSize // codes.side.colorpicker.theme/ColorPickerDefaults.SwatchSize|{}SwatchSize[0] final fun (): androidx.compose.ui.unit/Dp // codes.side.colorpicker.theme/ColorPickerDefaults.SwatchSize.|(){}[0] + final val ThumbTrackGap // codes.side.colorpicker.theme/ColorPickerDefaults.ThumbTrackGap|{}ThumbTrackGap[0] + final fun (): androidx.compose.ui.unit/Dp // codes.side.colorpicker.theme/ColorPickerDefaults.ThumbTrackGap.|(){}[0] + final val ThumbWidth // codes.side.colorpicker.theme/ColorPickerDefaults.ThumbWidth|{}ThumbWidth[0] + final fun (): androidx.compose.ui.unit/Dp // codes.side.colorpicker.theme/ColorPickerDefaults.ThumbWidth.|(){}[0] final val TrackHeight // codes.side.colorpicker.theme/ColorPickerDefaults.TrackHeight|{}TrackHeight[0] final fun (): androidx.compose.ui.unit/Dp // codes.side.colorpicker.theme/ColorPickerDefaults.TrackHeight.|(){}[0] @@ -305,27 +309,27 @@ final fun codes.side.colorpicker.state/rememberSaveableColorPickerState(codes.si final fun codes.side.colorpicker.theme/codes_side_colorpicker_theme_ColorPickerColors$stableprop_getter(): kotlin/Int // codes.side.colorpicker.theme/codes_side_colorpicker_theme_ColorPickerColors$stableprop_getter|codes_side_colorpicker_theme_ColorPickerColors$stableprop_getter(){}[0] final fun codes.side.colorpicker.theme/codes_side_colorpicker_theme_ColorPickerDefaults$stableprop_getter(): kotlin/Int // codes.side.colorpicker.theme/codes_side_colorpicker_theme_ColorPickerDefaults$stableprop_getter|codes_side_colorpicker_theme_ColorPickerDefaults$stableprop_getter(){}[0] final fun codes.side.colorpicker.theme/codes_side_colorpicker_theme_ColorPickerShapes$stableprop_getter(): kotlin/Int // codes.side.colorpicker.theme/codes_side_colorpicker_theme_ColorPickerShapes$stableprop_getter|codes_side_colorpicker_theme_ColorPickerShapes$stableprop_getter(){}[0] -final fun codes.side.colorpicker.ui/AlphaSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/AlphaSlider|AlphaSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] -final fun codes.side.colorpicker.ui/BlueSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/BlueSlider|BlueSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] +final fun codes.side.colorpicker.ui/AlphaSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, kotlin/Function3?, androidx.compose.ui.unit/Dp, androidx.compose.ui.unit/Dp, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/AlphaSlider|AlphaSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;kotlin.Function3?;androidx.compose.ui.unit.Dp;androidx.compose.ui.unit.Dp;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int;kotlin.Int){}[0] +final fun codes.side.colorpicker.ui/BlueSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, kotlin/Function3?, androidx.compose.ui.unit/Dp, androidx.compose.ui.unit/Dp, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/BlueSlider|BlueSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;kotlin.Function3?;androidx.compose.ui.unit.Dp;androidx.compose.ui.unit.Dp;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int;kotlin.Int){}[0] final fun codes.side.colorpicker.ui/CmykColorPicker(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, kotlin/Boolean, codes.side.colorpicker.state/ColoringMode?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/CmykColorPicker|CmykColorPicker(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;kotlin.Boolean;codes.side.colorpicker.state.ColoringMode?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] final fun codes.side.colorpicker.ui/ColorPickerDialog(kotlin/Function1, kotlin/Function0, androidx.compose.ui/Modifier?, codes.side.colorpicker.model/HslColor?, kotlin/String?, kotlin/String?, kotlin/String?, kotlin/Boolean, codes.side.colorpicker.theme/ColorPickerColors?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/ColorPickerDialog|ColorPickerDialog(kotlin.Function1;kotlin.Function0;androidx.compose.ui.Modifier?;codes.side.colorpicker.model.HslColor?;kotlin.String?;kotlin.String?;kotlin.String?;kotlin.Boolean;codes.side.colorpicker.theme.ColorPickerColors?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] -final fun codes.side.colorpicker.ui/ColorSlider(kotlin/Float, kotlin/Function1, kotlinx.collections.immutable/ImmutableList, androidx.compose.ui.graphics/Color, androidx.compose.ui/Modifier?, kotlin/Function2?, kotlin/Function2?, kotlin/Function0?, androidx.compose.ui.unit/Dp, kotlin/Boolean, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/ColorSlider|ColorSlider(kotlin.Float;kotlin.Function1;kotlinx.collections.immutable.ImmutableList;androidx.compose.ui.graphics.Color;androidx.compose.ui.Modifier?;kotlin.Function2?;kotlin.Function2?;kotlin.Function0?;androidx.compose.ui.unit.Dp;kotlin.Boolean;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int;kotlin.Int){}[0] +final fun codes.side.colorpicker.ui/ColorSlider(kotlin/Float, kotlin/Function1, kotlinx.collections.immutable/ImmutableList, androidx.compose.ui.graphics/Color, androidx.compose.ui/Modifier?, kotlin/Function2?, kotlin/Function2?, kotlin/Function0?, androidx.compose.ui.unit/Dp, kotlin/Boolean, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, kotlin/Function3?, androidx.compose.ui.unit/Dp, androidx.compose.ui.unit/Dp, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/ColorSlider|ColorSlider(kotlin.Float;kotlin.Function1;kotlinx.collections.immutable.ImmutableList;androidx.compose.ui.graphics.Color;androidx.compose.ui.Modifier?;kotlin.Function2?;kotlin.Function2?;kotlin.Function0?;androidx.compose.ui.unit.Dp;kotlin.Boolean;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;kotlin.Function3?;androidx.compose.ui.unit.Dp;androidx.compose.ui.unit.Dp;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int;kotlin.Int){}[0] final fun codes.side.colorpicker.ui/ColorSwatch(androidx.compose.ui.graphics/Color, androidx.compose.ui/Modifier?, androidx.compose.ui.graphics/Shape?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/ColorSwatch|ColorSwatch(androidx.compose.ui.graphics.Color;androidx.compose.ui.Modifier?;androidx.compose.ui.graphics.Shape?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] -final fun codes.side.colorpicker.ui/CyanSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/CyanSlider|CyanSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] -final fun codes.side.colorpicker.ui/GreenSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/GreenSlider|GreenSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] +final fun codes.side.colorpicker.ui/CyanSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, kotlin/Function3?, androidx.compose.ui.unit/Dp, androidx.compose.ui.unit/Dp, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/CyanSlider|CyanSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;kotlin.Function3?;androidx.compose.ui.unit.Dp;androidx.compose.ui.unit.Dp;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int;kotlin.Int){}[0] +final fun codes.side.colorpicker.ui/GreenSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, kotlin/Function3?, androidx.compose.ui.unit/Dp, androidx.compose.ui.unit/Dp, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/GreenSlider|GreenSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;kotlin.Function3?;androidx.compose.ui.unit.Dp;androidx.compose.ui.unit.Dp;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int;kotlin.Int){}[0] final fun codes.side.colorpicker.ui/HslColorPicker(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, kotlin/Boolean, codes.side.colorpicker.state/ColoringMode?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/HslColorPicker|HslColorPicker(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;kotlin.Boolean;codes.side.colorpicker.state.ColoringMode?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] -final fun codes.side.colorpicker.ui/HueSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/HueSlider|HueSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] -final fun codes.side.colorpicker.ui/KeySlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/KeySlider|KeySlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] -final fun codes.side.colorpicker.ui/LabASlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/LabASlider|LabASlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] -final fun codes.side.colorpicker.ui/LabBSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/LabBSlider|LabBSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] +final fun codes.side.colorpicker.ui/HueSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, kotlin/Function3?, androidx.compose.ui.unit/Dp, androidx.compose.ui.unit/Dp, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/HueSlider|HueSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;kotlin.Function3?;androidx.compose.ui.unit.Dp;androidx.compose.ui.unit.Dp;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int;kotlin.Int){}[0] +final fun codes.side.colorpicker.ui/KeySlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, kotlin/Function3?, androidx.compose.ui.unit/Dp, androidx.compose.ui.unit/Dp, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/KeySlider|KeySlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;kotlin.Function3?;androidx.compose.ui.unit.Dp;androidx.compose.ui.unit.Dp;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int;kotlin.Int){}[0] +final fun codes.side.colorpicker.ui/LabASlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, kotlin/Function3?, androidx.compose.ui.unit/Dp, androidx.compose.ui.unit/Dp, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/LabASlider|LabASlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;kotlin.Function3?;androidx.compose.ui.unit.Dp;androidx.compose.ui.unit.Dp;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int;kotlin.Int){}[0] +final fun codes.side.colorpicker.ui/LabBSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, kotlin/Function3?, androidx.compose.ui.unit/Dp, androidx.compose.ui.unit/Dp, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/LabBSlider|LabBSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;kotlin.Function3?;androidx.compose.ui.unit.Dp;androidx.compose.ui.unit.Dp;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int;kotlin.Int){}[0] final fun codes.side.colorpicker.ui/LabColorPicker(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, kotlin/Boolean, codes.side.colorpicker.state/ColoringMode?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/LabColorPicker|LabColorPicker(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;kotlin.Boolean;codes.side.colorpicker.state.ColoringMode?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] -final fun codes.side.colorpicker.ui/LightnessLabSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/LightnessLabSlider|LightnessLabSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] -final fun codes.side.colorpicker.ui/LightnessSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/LightnessSlider|LightnessSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] -final fun codes.side.colorpicker.ui/MagentaSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/MagentaSlider|MagentaSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] -final fun codes.side.colorpicker.ui/RedSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/RedSlider|RedSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] +final fun codes.side.colorpicker.ui/LightnessLabSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, kotlin/Function3?, androidx.compose.ui.unit/Dp, androidx.compose.ui.unit/Dp, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/LightnessLabSlider|LightnessLabSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;kotlin.Function3?;androidx.compose.ui.unit.Dp;androidx.compose.ui.unit.Dp;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int;kotlin.Int){}[0] +final fun codes.side.colorpicker.ui/LightnessSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, kotlin/Function3?, androidx.compose.ui.unit/Dp, androidx.compose.ui.unit/Dp, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/LightnessSlider|LightnessSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;kotlin.Function3?;androidx.compose.ui.unit.Dp;androidx.compose.ui.unit.Dp;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int;kotlin.Int){}[0] +final fun codes.side.colorpicker.ui/MagentaSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, kotlin/Function3?, androidx.compose.ui.unit/Dp, androidx.compose.ui.unit/Dp, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/MagentaSlider|MagentaSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;kotlin.Function3?;androidx.compose.ui.unit.Dp;androidx.compose.ui.unit.Dp;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int;kotlin.Int){}[0] +final fun codes.side.colorpicker.ui/RedSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, kotlin/Function3?, androidx.compose.ui.unit/Dp, androidx.compose.ui.unit/Dp, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/RedSlider|RedSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;kotlin.Function3?;androidx.compose.ui.unit.Dp;androidx.compose.ui.unit.Dp;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int;kotlin.Int){}[0] final fun codes.side.colorpicker.ui/RgbColorPicker(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, kotlin/Boolean, codes.side.colorpicker.state/ColoringMode?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/RgbColorPicker|RgbColorPicker(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;kotlin.Boolean;codes.side.colorpicker.state.ColoringMode?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] -final fun codes.side.colorpicker.ui/SaturationSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/SaturationSlider|SaturationSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] +final fun codes.side.colorpicker.ui/SaturationSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, kotlin/Function3?, androidx.compose.ui.unit/Dp, androidx.compose.ui.unit/Dp, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/SaturationSlider|SaturationSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;kotlin.Function3?;androidx.compose.ui.unit.Dp;androidx.compose.ui.unit.Dp;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int;kotlin.Int){}[0] final fun codes.side.colorpicker.ui/SliderLabel(kotlin/String, androidx.compose.runtime/Composer?, kotlin/Int) // codes.side.colorpicker.ui/SliderLabel|SliderLabel(kotlin.String;androidx.compose.runtime.Composer?;kotlin.Int){}[0] final fun codes.side.colorpicker.ui/SliderValueLabel(kotlin/String, androidx.compose.runtime/Composer?, kotlin/Int) // codes.side.colorpicker.ui/SliderValueLabel|SliderValueLabel(kotlin.String;androidx.compose.runtime.Composer?;kotlin.Int){}[0] -final fun codes.side.colorpicker.ui/YellowSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/YellowSlider|YellowSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int){}[0] +final fun codes.side.colorpicker.ui/YellowSlider(codes.side.colorpicker.state/ColorPickerState, androidx.compose.ui/Modifier?, codes.side.colorpicker.state/ColoringMode?, kotlin/Function2?, kotlin/Function2?, kotlin/String?, kotlin/String?, codes.side.colorpicker.theme/ColorPickerColors?, codes.side.colorpicker.theme/ColorPickerShapes?, kotlin/Function3?, androidx.compose.ui.unit/Dp, androidx.compose.ui.unit/Dp, androidx.compose.runtime/Composer?, kotlin/Int, kotlin/Int, kotlin/Int) // codes.side.colorpicker.ui/YellowSlider|YellowSlider(codes.side.colorpicker.state.ColorPickerState;androidx.compose.ui.Modifier?;codes.side.colorpicker.state.ColoringMode?;kotlin.Function2?;kotlin.Function2?;kotlin.String?;kotlin.String?;codes.side.colorpicker.theme.ColorPickerColors?;codes.side.colorpicker.theme.ColorPickerShapes?;kotlin.Function3?;androidx.compose.ui.unit.Dp;androidx.compose.ui.unit.Dp;androidx.compose.runtime.Composer?;kotlin.Int;kotlin.Int;kotlin.Int){}[0] final fun codes.side.colorpicker.util/randomHslColor(kotlin/Boolean = ...): codes.side.colorpicker.model/HslColor // codes.side.colorpicker.util/randomHslColor|randomHslColor(kotlin.Boolean){}[0] diff --git a/colorpicker/api/jvm/colorpicker.api b/colorpicker/api/jvm/colorpicker.api index a48a7834..9dab9c8a 100644 --- a/colorpicker/api/jvm/colorpicker.api +++ b/colorpicker/api/jvm/colorpicker.api @@ -238,6 +238,8 @@ public final class codes/side/colorpicker/theme/ColorPickerDefaults { public static final field INSTANCE Lcodes/side/colorpicker/theme/ColorPickerDefaults; public final fun colors-dgg9oW8 (JJLandroidx/compose/runtime/Composer;II)Lcodes/side/colorpicker/theme/ColorPickerColors; public final fun getSwatchSize-D9Ej5fM ()F + public final fun getThumbTrackGap-D9Ej5fM ()F + public final fun getThumbWidth-D9Ej5fM ()F public final fun getTrackHeight-D9Ej5fM ()F public final fun shapes (Landroidx/compose/ui/graphics/Shape;Landroidx/compose/ui/graphics/Shape;Landroidx/compose/runtime/Composer;II)Lcodes/side/colorpicker/theme/ColorPickerShapes; } @@ -257,7 +259,7 @@ public final class codes/side/colorpicker/theme/ColorPickerShapes { } public final class codes/side/colorpicker/ui/AlphaSliderKt { - public static final fun AlphaSlider (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Landroidx/compose/runtime/Composer;II)V + public static final fun AlphaSlider-yndP2WQ (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Lkotlin/jvm/functions/Function3;FFLandroidx/compose/runtime/Composer;III)V } public final class codes/side/colorpicker/ui/CmykColorPickerKt { @@ -265,10 +267,10 @@ public final class codes/side/colorpicker/ui/CmykColorPickerKt { } public final class codes/side/colorpicker/ui/CmykSlidersKt { - public static final fun CyanSlider (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Landroidx/compose/runtime/Composer;II)V - public static final fun KeySlider (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Landroidx/compose/runtime/Composer;II)V - public static final fun MagentaSlider (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Landroidx/compose/runtime/Composer;II)V - public static final fun YellowSlider (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Landroidx/compose/runtime/Composer;II)V + public static final fun CyanSlider-7LhMbNw (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Lkotlin/jvm/functions/Function3;FFLandroidx/compose/runtime/Composer;III)V + public static final fun KeySlider-7LhMbNw (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Lkotlin/jvm/functions/Function3;FFLandroidx/compose/runtime/Composer;III)V + public static final fun MagentaSlider-7LhMbNw (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Lkotlin/jvm/functions/Function3;FFLandroidx/compose/runtime/Composer;III)V + public static final fun YellowSlider-7LhMbNw (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Lkotlin/jvm/functions/Function3;FFLandroidx/compose/runtime/Composer;III)V } public final class codes/side/colorpicker/ui/ColorPickerDialogKt { @@ -276,7 +278,7 @@ public final class codes/side/colorpicker/ui/ColorPickerDialogKt { } public final class codes/side/colorpicker/ui/ColorSliderKt { - public static final fun ColorSlider-oMWPnZw (FLkotlin/jvm/functions/Function1;Lkotlinx/collections/immutable/ImmutableList;JLandroidx/compose/ui/Modifier;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function0;FZLjava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Landroidx/compose/runtime/Composer;III)V + public static final fun ColorSlider-pxA9Vh4 (FLkotlin/jvm/functions/Function1;Lkotlinx/collections/immutable/ImmutableList;JLandroidx/compose/ui/Modifier;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function0;FZLjava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Lkotlin/jvm/functions/Function3;FFLandroidx/compose/runtime/Composer;III)V } public final class codes/side/colorpicker/ui/ColorSwatchKt { @@ -286,40 +288,40 @@ public final class codes/side/colorpicker/ui/ColorSwatchKt { public final class codes/side/colorpicker/ui/ComposableSingletons$AlphaSliderKt { public static final field INSTANCE Lcodes/side/colorpicker/ui/ComposableSingletons$AlphaSliderKt; public fun ()V - public final fun getLambda$1144792953$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; + public final fun getLambda$1115417337$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; } public final class codes/side/colorpicker/ui/ComposableSingletons$CmykSlidersKt { public static final field INSTANCE Lcodes/side/colorpicker/ui/ComposableSingletons$CmykSlidersKt; public fun ()V - public final fun getLambda$1062849837$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; - public final fun getLambda$1275632958$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; - public final fun getLambda$201682845$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; - public final fun getLambda$584701799$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; + public final fun getLambda$-136327513$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; + public final fun getLambda$-1437143203$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; + public final fun getLambda$1297774829$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; + public final fun getLambda$1753703870$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; } public final class codes/side/colorpicker/ui/ComposableSingletons$HslSlidersKt { public static final field INSTANCE Lcodes/side/colorpicker/ui/ComposableSingletons$HslSlidersKt; public fun ()V - public final fun getLambda$1423523100$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; - public final fun getLambda$1506383089$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; - public final fun getLambda$1975195531$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; + public final fun getLambda$1131188849$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; + public final fun getLambda$1297615580$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; + public final fun getLambda$157526155$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; } public final class codes/side/colorpicker/ui/ComposableSingletons$LabSlidersKt { public static final field INSTANCE Lcodes/side/colorpicker/ui/ComposableSingletons$LabSlidersKt; public fun ()V - public final fun getLambda$-209702007$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; - public final fun getLambda$1092649877$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; - public final fun getLambda$856032052$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; + public final fun getLambda$-138566891$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; + public final fun getLambda$1830062601$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; + public final fun getLambda$1980484084$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; } public final class codes/side/colorpicker/ui/ComposableSingletons$RgbSlidersKt { public static final field INSTANCE Lcodes/side/colorpicker/ui/ComposableSingletons$RgbSlidersKt; public fun ()V - public final fun getLambda$-1553602417$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; - public final fun getLambda$1883315460$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; - public final fun getLambda$830632530$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; + public final fun getLambda$-1231945838$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; + public final fun getLambda$-1823617084$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; + public final fun getLambda$-927009905$codes_side_colorpicker ()Lkotlin/jvm/functions/Function2; } public final class codes/side/colorpicker/ui/HslColorPickerKt { @@ -327,9 +329,9 @@ public final class codes/side/colorpicker/ui/HslColorPickerKt { } public final class codes/side/colorpicker/ui/HslSlidersKt { - public static final fun HueSlider (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Landroidx/compose/runtime/Composer;II)V - public static final fun LightnessSlider (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Landroidx/compose/runtime/Composer;II)V - public static final fun SaturationSlider (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Landroidx/compose/runtime/Composer;II)V + public static final fun HueSlider-7LhMbNw (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Lkotlin/jvm/functions/Function3;FFLandroidx/compose/runtime/Composer;III)V + public static final fun LightnessSlider-7LhMbNw (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Lkotlin/jvm/functions/Function3;FFLandroidx/compose/runtime/Composer;III)V + public static final fun SaturationSlider-7LhMbNw (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Lkotlin/jvm/functions/Function3;FFLandroidx/compose/runtime/Composer;III)V } public final class codes/side/colorpicker/ui/LabColorPickerKt { @@ -337,9 +339,9 @@ public final class codes/side/colorpicker/ui/LabColorPickerKt { } public final class codes/side/colorpicker/ui/LabSlidersKt { - public static final fun LabASlider (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Landroidx/compose/runtime/Composer;II)V - public static final fun LabBSlider (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Landroidx/compose/runtime/Composer;II)V - public static final fun LightnessLabSlider (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Landroidx/compose/runtime/Composer;II)V + public static final fun LabASlider-7LhMbNw (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Lkotlin/jvm/functions/Function3;FFLandroidx/compose/runtime/Composer;III)V + public static final fun LabBSlider-7LhMbNw (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Lkotlin/jvm/functions/Function3;FFLandroidx/compose/runtime/Composer;III)V + public static final fun LightnessLabSlider-7LhMbNw (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Lkotlin/jvm/functions/Function3;FFLandroidx/compose/runtime/Composer;III)V } public final class codes/side/colorpicker/ui/RgbColorPickerKt { @@ -347,9 +349,9 @@ public final class codes/side/colorpicker/ui/RgbColorPickerKt { } public final class codes/side/colorpicker/ui/RgbSlidersKt { - public static final fun BlueSlider (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Landroidx/compose/runtime/Composer;II)V - public static final fun GreenSlider (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Landroidx/compose/runtime/Composer;II)V - public static final fun RedSlider (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Landroidx/compose/runtime/Composer;II)V + public static final fun BlueSlider-7LhMbNw (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Lkotlin/jvm/functions/Function3;FFLandroidx/compose/runtime/Composer;III)V + public static final fun GreenSlider-7LhMbNw (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Lkotlin/jvm/functions/Function3;FFLandroidx/compose/runtime/Composer;III)V + public static final fun RedSlider-7LhMbNw (Lcodes/side/colorpicker/state/ColorPickerState;Landroidx/compose/ui/Modifier;Lcodes/side/colorpicker/state/ColoringMode;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function2;Ljava/lang/String;Ljava/lang/String;Lcodes/side/colorpicker/theme/ColorPickerColors;Lcodes/side/colorpicker/theme/ColorPickerShapes;Lkotlin/jvm/functions/Function3;FFLandroidx/compose/runtime/Composer;III)V } public final class codes/side/colorpicker/ui/SliderLabelDefaultsKt { diff --git a/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/theme/ColorPickerDefaults.kt b/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/theme/ColorPickerDefaults.kt index 2827d8af..0d7c6463 100644 --- a/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/theme/ColorPickerDefaults.kt +++ b/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/theme/ColorPickerDefaults.kt @@ -23,6 +23,15 @@ public object ColorPickerDefaults { /** Size a [codes.side.colorpicker.ui.ColorSwatch] falls back to when given none. */ public val SwatchSize: Dp = 48.dp + /** + * Width the track reserves for the thumb, matching the Material 3 handle. A custom + * thumb wider than this must say so, or the track's gap closes underneath it. + */ + public val ThumbWidth: Dp = 4.dp + + /** Clearance left between the thumb and each end of the track. */ + public val ThumbTrackGap: Dp = 6.dp + // surfaceBright/surfaceDim keep visible checkerboard contrast in both // light and dark color schemes. /** diff --git a/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/AlphaSlider.kt b/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/AlphaSlider.kt index 9d0db4f0..91f1d635 100644 --- a/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/AlphaSlider.kt +++ b/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/AlphaSlider.kt @@ -1,8 +1,10 @@ package codes.side.colorpicker.ui +import androidx.compose.foundation.interaction.InteractionSource import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.Dp import codes.side.colorpicker.conversion.toComposeColor import codes.side.colorpicker.state.ColorPickerState import codes.side.colorpicker.theme.ColorPickerColors @@ -28,6 +30,9 @@ public fun AlphaSlider( semanticValueText: String? = "${state.hslColor.intAlpha}", colors: ColorPickerColors = ColorPickerDefaults.colors(), shapes: ColorPickerShapes = ColorPickerDefaults.shapes(), + thumb: (@Composable (InteractionSource) -> Unit)? = null, + thumbWidth: Dp = ColorPickerDefaults.ThumbWidth, + thumbTrackGap: Dp = ColorPickerDefaults.ThumbTrackGap, ) { val hsl = state.hslColor val opaqueColor = remember(hsl.hue, hsl.saturation, hsl.lightness) { @@ -58,5 +63,8 @@ public fun AlphaSlider( shapes = shapes, modifier = modifier, onValueChangeFinished = { interaction.end() }, + thumb = thumb, + thumbWidth = thumbWidth, + thumbTrackGap = thumbTrackGap, ) } diff --git a/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/CmykSliders.kt b/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/CmykSliders.kt index ff1d0226..c6fc60dd 100644 --- a/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/CmykSliders.kt +++ b/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/CmykSliders.kt @@ -1,9 +1,11 @@ package codes.side.colorpicker.ui +import androidx.compose.foundation.interaction.InteractionSource import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.Dp import codes.side.colorpicker.conversion.toComposeColor import codes.side.colorpicker.model.CmykColor import codes.side.colorpicker.state.ColorPickerState @@ -38,6 +40,9 @@ public fun CyanSlider( semanticValueText: String? = "${state.cmykColor.intCyan}%", colors: ColorPickerColors = ColorPickerDefaults.colors(), shapes: ColorPickerShapes = ColorPickerDefaults.shapes(), + thumb: (@Composable (InteractionSource) -> Unit)? = null, + thumbWidth: Dp = ColorPickerDefaults.ThumbWidth, + thumbTrackGap: Dp = ColorPickerDefaults.ThumbTrackGap, ) { val cmyk = state.cmykColor val gradientColors = remember(cmyk.magenta, cmyk.yellow, cmyk.key, coloringMode) { @@ -73,6 +78,9 @@ public fun CyanSlider( shapes = shapes, modifier = modifier, onValueChangeFinished = { interaction.end() }, + thumb = thumb, + thumbWidth = thumbWidth, + thumbTrackGap = thumbTrackGap, ) } @@ -97,6 +105,9 @@ public fun MagentaSlider( semanticValueText: String? = "${state.cmykColor.intMagenta}%", colors: ColorPickerColors = ColorPickerDefaults.colors(), shapes: ColorPickerShapes = ColorPickerDefaults.shapes(), + thumb: (@Composable (InteractionSource) -> Unit)? = null, + thumbWidth: Dp = ColorPickerDefaults.ThumbWidth, + thumbTrackGap: Dp = ColorPickerDefaults.ThumbTrackGap, ) { val cmyk = state.cmykColor val gradientColors = remember(cmyk.cyan, cmyk.yellow, cmyk.key, coloringMode) { @@ -132,6 +143,9 @@ public fun MagentaSlider( shapes = shapes, modifier = modifier, onValueChangeFinished = { interaction.end() }, + thumb = thumb, + thumbWidth = thumbWidth, + thumbTrackGap = thumbTrackGap, ) } @@ -156,6 +170,9 @@ public fun YellowSlider( semanticValueText: String? = "${state.cmykColor.intYellow}%", colors: ColorPickerColors = ColorPickerDefaults.colors(), shapes: ColorPickerShapes = ColorPickerDefaults.shapes(), + thumb: (@Composable (InteractionSource) -> Unit)? = null, + thumbWidth: Dp = ColorPickerDefaults.ThumbWidth, + thumbTrackGap: Dp = ColorPickerDefaults.ThumbTrackGap, ) { val cmyk = state.cmykColor val gradientColors = remember(cmyk.cyan, cmyk.magenta, cmyk.key, coloringMode) { @@ -191,6 +208,9 @@ public fun YellowSlider( shapes = shapes, modifier = modifier, onValueChangeFinished = { interaction.end() }, + thumb = thumb, + thumbWidth = thumbWidth, + thumbTrackGap = thumbTrackGap, ) } @@ -215,6 +235,9 @@ public fun KeySlider( semanticValueText: String? = "${state.cmykColor.intKey}%", colors: ColorPickerColors = ColorPickerDefaults.colors(), shapes: ColorPickerShapes = ColorPickerDefaults.shapes(), + thumb: (@Composable (InteractionSource) -> Unit)? = null, + thumbWidth: Dp = ColorPickerDefaults.ThumbWidth, + thumbTrackGap: Dp = ColorPickerDefaults.ThumbTrackGap, ) { val cmyk = state.cmykColor val gradientColors = remember(cmyk.cyan, cmyk.magenta, cmyk.yellow, coloringMode) { @@ -250,5 +273,8 @@ public fun KeySlider( shapes = shapes, modifier = modifier, onValueChangeFinished = { interaction.end() }, + thumb = thumb, + thumbWidth = thumbWidth, + thumbTrackGap = thumbTrackGap, ) } diff --git a/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/ColorSlider.kt b/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/ColorSlider.kt index 909c93b9..afdcb797 100644 --- a/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/ColorSlider.kt +++ b/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/ColorSlider.kt @@ -1,5 +1,6 @@ package codes.side.colorpicker.ui +import androidx.compose.foundation.interaction.InteractionSource import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box @@ -43,6 +44,15 @@ import kotlinx.collections.immutable.ImmutableList * announcing the channel's native units instead of a raw fraction. * @param colors checkerboard colors; see [ColorPickerDefaults.colors]. * @param shapes track shape; see [ColorPickerDefaults.shapes]. + * @param thumb optional replacement for the slider thumb. `null` keeps the Material 3 + * default thumb tinted with [thumbColor]; pass a composable to control its size, shape + * and stroke entirely. It receives the slider's [InteractionSource], so a thumb can react + * to press and drag; the current value and color need no parameter, since the caller + * already passed them as [value] and [thumbColor]. + * @param thumbWidth how much room the track leaves for the thumb. A custom [thumb] wider + * than [ColorPickerDefaults.ThumbWidth] must declare its width here, or the track's gap + * closes and the thumb sits flush against the gradient. + * @param thumbTrackGap clearance between the thumb and each track end. */ @OptIn(androidx.compose.material3.ExperimentalMaterial3Api::class) @Composable @@ -61,8 +71,16 @@ public fun ColorSlider( semanticValueText: String? = null, colors: ColorPickerColors = ColorPickerDefaults.colors(), shapes: ColorPickerShapes = ColorPickerDefaults.shapes(), + thumb: (@Composable (InteractionSource) -> Unit)? = null, + thumbWidth: Dp = ColorPickerDefaults.ThumbWidth, + thumbTrackGap: Dp = ColorPickerDefaults.ThumbTrackGap, ) { val interactionSource = remember { MutableInteractionSource() } + val sliderColors = SliderDefaults.colors( + thumbColor = thumbColor.asOpaqueThumb(), + activeTrackColor = Color.Transparent, + inactiveTrackColor = Color.Transparent, + ) Column(modifier = modifier.fillMaxWidth()) { if (label != null || valueLabel != null) { @@ -99,16 +117,24 @@ public fun ColorSlider( checkerboardDark = colors.checkerboardDark, trackShape = shapes.trackShape, showCheckerboard = showCheckerboard, + thumbWidth = thumbWidth, + thumbTrackGap = thumbTrackGap, modifier = Modifier .fillMaxWidth() .height(trackHeight), ) }, - colors = SliderDefaults.colors( - thumbColor = thumbColor.asOpaqueThumb(), - activeTrackColor = Color.Transparent, - inactiveTrackColor = Color.Transparent, - ), + // The slot takes the InteractionSource rather than M3's SliderState. Two + // reasons: SliderState is experimental, so naming it here would force an + // opt-in on everyone calling ColorSlider, and it is not what a thumb is + // missing. Value and color are already in scope at the call site, captured + // by the lambda; press and drag state is the only thing a caller cannot + // reach, because this source is created here. + thumb = { + if (thumb != null) thumb(interactionSource) + else SliderDefaults.Thumb(interactionSource, colors = sliderColors) + }, + colors = sliderColors, ) } } diff --git a/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/GradientTrack.kt b/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/GradientTrack.kt index 802617a1..62ced18a 100644 --- a/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/GradientTrack.kt +++ b/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/GradientTrack.kt @@ -23,13 +23,14 @@ import androidx.compose.ui.graphics.Shape import androidx.compose.ui.graphics.drawscope.clipPath import androidx.compose.ui.platform.LocalLayoutDirection import androidx.compose.ui.unit.LayoutDirection +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp +import codes.side.colorpicker.theme.ColorPickerDefaults import kotlinx.collections.immutable.ImmutableList -// M3 token defaults (from SliderTokens) -private val HandleWidth = 4.dp -private val PressedHandleWidth = 2.dp -private val ThumbTrackGapSize = 6.dp +// M3 token defaults (from SliderTokens). The handle narrows by this much while pressed; +// the same shrink is applied to a custom thumb so the track keeps its M3 feel. +private val PressedWidthReduction = 2.dp private val TrackInsideCornerSize = 2.dp /** @@ -53,6 +54,8 @@ internal fun GradientTrack( trackShape: Shape, modifier: Modifier = Modifier, showCheckerboard: Boolean = false, + thumbWidth: Dp = ColorPickerDefaults.ThumbWidth, + thumbTrackGap: Dp = ColorPickerDefaults.ThumbTrackGap, ) { val interactions = remember { mutableStateListOf() } LaunchedEffect(interactionSource) { @@ -69,7 +72,11 @@ internal fun GradientTrack( } val isActive = interactions.isNotEmpty() - val currentThumbWidth = if (isActive) PressedHandleWidth else HandleWidth + val currentThumbWidth = if (isActive) { + (thumbWidth - PressedWidthReduction).coerceAtLeast(0.dp) + } else { + thumbWidth + } val layoutDirection = LocalLayoutDirection.current val brush = remember(colors, layoutDirection) { @@ -90,7 +97,7 @@ internal fun GradientTrack( Canvas(modifier = modifier.clip(trackShape)) { val insideCornerSize = TrackInsideCornerSize.toPx() - val gap = currentThumbWidth.toPx() / 2f + ThumbTrackGapSize.toPx() + val gap = currentThumbWidth.toPx() / 2f + thumbTrackGap.toPx() val fractionCenter = thumbFraction.coerceIn(0f, 1f) * size.width // M3 Slider mirrors the thumb position in RTL, so the gap must mirror // to stay underneath the thumb. diff --git a/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/HslSliders.kt b/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/HslSliders.kt index bf76a03b..72702b5f 100644 --- a/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/HslSliders.kt +++ b/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/HslSliders.kt @@ -1,9 +1,11 @@ package codes.side.colorpicker.ui +import androidx.compose.foundation.interaction.InteractionSource import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.Dp import codes.side.colorpicker.conversion.toComposeColor import codes.side.colorpicker.model.HslColor import codes.side.colorpicker.state.ColorPickerState @@ -58,6 +60,9 @@ public fun HueSlider( semanticValueText: String? = "${state.hslColor.intHue}°", colors: ColorPickerColors = ColorPickerDefaults.colors(), shapes: ColorPickerShapes = ColorPickerDefaults.shapes(), + thumb: (@Composable (InteractionSource) -> Unit)? = null, + thumbWidth: Dp = ColorPickerDefaults.ThumbWidth, + thumbTrackGap: Dp = ColorPickerDefaults.ThumbTrackGap, ) { val hsl = state.hslColor val gradientColors = remember(hsl.saturation, hsl.lightness, coloringMode) { @@ -90,6 +95,9 @@ public fun HueSlider( shapes = shapes, modifier = modifier, onValueChangeFinished = { interaction.end() }, + thumb = thumb, + thumbWidth = thumbWidth, + thumbTrackGap = thumbTrackGap, ) } @@ -114,6 +122,9 @@ public fun SaturationSlider( semanticValueText: String? = "${state.hslColor.intSaturation}%", colors: ColorPickerColors = ColorPickerDefaults.colors(), shapes: ColorPickerShapes = ColorPickerDefaults.shapes(), + thumb: (@Composable (InteractionSource) -> Unit)? = null, + thumbWidth: Dp = ColorPickerDefaults.ThumbWidth, + thumbTrackGap: Dp = ColorPickerDefaults.ThumbTrackGap, ) { val hsl = state.hslColor val gradientColors = remember(hsl.hue, hsl.lightness, coloringMode) { @@ -152,6 +163,9 @@ public fun SaturationSlider( shapes = shapes, modifier = modifier, onValueChangeFinished = { interaction.end() }, + thumb = thumb, + thumbWidth = thumbWidth, + thumbTrackGap = thumbTrackGap, ) } @@ -176,6 +190,9 @@ public fun LightnessSlider( semanticValueText: String? = "${state.hslColor.intLightness}%", colors: ColorPickerColors = ColorPickerDefaults.colors(), shapes: ColorPickerShapes = ColorPickerDefaults.shapes(), + thumb: (@Composable (InteractionSource) -> Unit)? = null, + thumbWidth: Dp = ColorPickerDefaults.ThumbWidth, + thumbTrackGap: Dp = ColorPickerDefaults.ThumbTrackGap, ) { val hsl = state.hslColor val gradientColors = remember(hsl.hue, hsl.saturation, coloringMode) { @@ -216,6 +233,9 @@ public fun LightnessSlider( shapes = shapes, modifier = modifier, onValueChangeFinished = { interaction.end() }, + thumb = thumb, + thumbWidth = thumbWidth, + thumbTrackGap = thumbTrackGap, ) } diff --git a/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/LabSliders.kt b/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/LabSliders.kt index a1900549..41436a25 100644 --- a/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/LabSliders.kt +++ b/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/LabSliders.kt @@ -1,8 +1,10 @@ package codes.side.colorpicker.ui +import androidx.compose.foundation.interaction.InteractionSource import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.Dp import codes.side.colorpicker.conversion.toComposeColor import codes.side.colorpicker.model.LabColor import codes.side.colorpicker.state.ColorPickerState @@ -48,6 +50,9 @@ public fun LightnessLabSlider( semanticValueText: String? = "${state.labColor.intL}", colors: ColorPickerColors = ColorPickerDefaults.colors(), shapes: ColorPickerShapes = ColorPickerDefaults.shapes(), + thumb: (@Composable (InteractionSource) -> Unit)? = null, + thumbWidth: Dp = ColorPickerDefaults.ThumbWidth, + thumbTrackGap: Dp = ColorPickerDefaults.ThumbTrackGap, ) { val lab = state.labColor val gradientColors = remember(lab.a, lab.b, coloringMode) { @@ -82,6 +87,9 @@ public fun LightnessLabSlider( shapes = shapes, modifier = modifier, onValueChangeFinished = { interaction.end() }, + thumb = thumb, + thumbWidth = thumbWidth, + thumbTrackGap = thumbTrackGap, ) } @@ -106,6 +114,9 @@ public fun LabASlider( semanticValueText: String? = "${state.labColor.intA}", colors: ColorPickerColors = ColorPickerDefaults.colors(), shapes: ColorPickerShapes = ColorPickerDefaults.shapes(), + thumb: (@Composable (InteractionSource) -> Unit)? = null, + thumbWidth: Dp = ColorPickerDefaults.ThumbWidth, + thumbTrackGap: Dp = ColorPickerDefaults.ThumbTrackGap, ) { val lab = state.labColor val gradientColors = remember(lab.l, lab.b, coloringMode) { @@ -141,6 +152,9 @@ public fun LabASlider( shapes = shapes, modifier = modifier, onValueChangeFinished = { interaction.end() }, + thumb = thumb, + thumbWidth = thumbWidth, + thumbTrackGap = thumbTrackGap, ) } @@ -165,6 +179,9 @@ public fun LabBSlider( semanticValueText: String? = "${state.labColor.intB}", colors: ColorPickerColors = ColorPickerDefaults.colors(), shapes: ColorPickerShapes = ColorPickerDefaults.shapes(), + thumb: (@Composable (InteractionSource) -> Unit)? = null, + thumbWidth: Dp = ColorPickerDefaults.ThumbWidth, + thumbTrackGap: Dp = ColorPickerDefaults.ThumbTrackGap, ) { val lab = state.labColor val gradientColors = remember(lab.l, lab.a, coloringMode) { @@ -200,5 +217,8 @@ public fun LabBSlider( shapes = shapes, modifier = modifier, onValueChangeFinished = { interaction.end() }, + thumb = thumb, + thumbWidth = thumbWidth, + thumbTrackGap = thumbTrackGap, ) } diff --git a/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/RgbSliders.kt b/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/RgbSliders.kt index 48f27b52..81d3bf4b 100644 --- a/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/RgbSliders.kt +++ b/colorpicker/src/commonMain/kotlin/codes/side/colorpicker/ui/RgbSliders.kt @@ -1,9 +1,11 @@ package codes.side.colorpicker.ui +import androidx.compose.foundation.interaction.InteractionSource import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.Dp import codes.side.colorpicker.conversion.toComposeColor import codes.side.colorpicker.model.RgbColor import codes.side.colorpicker.state.ColorPickerState @@ -34,6 +36,9 @@ public fun RedSlider( semanticValueText: String? = "${state.rgbColor.intRed}", colors: ColorPickerColors = ColorPickerDefaults.colors(), shapes: ColorPickerShapes = ColorPickerDefaults.shapes(), + thumb: (@Composable (InteractionSource) -> Unit)? = null, + thumbWidth: Dp = ColorPickerDefaults.ThumbWidth, + thumbTrackGap: Dp = ColorPickerDefaults.ThumbTrackGap, ) { val rgb = state.rgbColor val gradientColors = remember(rgb.green, rgb.blue, coloringMode) { @@ -69,6 +74,9 @@ public fun RedSlider( shapes = shapes, modifier = modifier, onValueChangeFinished = { interaction.end() }, + thumb = thumb, + thumbWidth = thumbWidth, + thumbTrackGap = thumbTrackGap, ) } @@ -93,6 +101,9 @@ public fun GreenSlider( semanticValueText: String? = "${state.rgbColor.intGreen}", colors: ColorPickerColors = ColorPickerDefaults.colors(), shapes: ColorPickerShapes = ColorPickerDefaults.shapes(), + thumb: (@Composable (InteractionSource) -> Unit)? = null, + thumbWidth: Dp = ColorPickerDefaults.ThumbWidth, + thumbTrackGap: Dp = ColorPickerDefaults.ThumbTrackGap, ) { val rgb = state.rgbColor val gradientColors = remember(rgb.red, rgb.blue, coloringMode) { @@ -128,6 +139,9 @@ public fun GreenSlider( shapes = shapes, modifier = modifier, onValueChangeFinished = { interaction.end() }, + thumb = thumb, + thumbWidth = thumbWidth, + thumbTrackGap = thumbTrackGap, ) } @@ -152,6 +166,9 @@ public fun BlueSlider( semanticValueText: String? = "${state.rgbColor.intBlue}", colors: ColorPickerColors = ColorPickerDefaults.colors(), shapes: ColorPickerShapes = ColorPickerDefaults.shapes(), + thumb: (@Composable (InteractionSource) -> Unit)? = null, + thumbWidth: Dp = ColorPickerDefaults.ThumbWidth, + thumbTrackGap: Dp = ColorPickerDefaults.ThumbTrackGap, ) { val rgb = state.rgbColor val gradientColors = remember(rgb.red, rgb.green, coloringMode) { @@ -187,5 +204,8 @@ public fun BlueSlider( shapes = shapes, modifier = modifier, onValueChangeFinished = { interaction.end() }, + thumb = thumb, + thumbWidth = thumbWidth, + thumbTrackGap = thumbTrackGap, ) } diff --git a/colorpicker/src/jvmTest/kotlin/codes/side/colorpicker/ui/ComponentRenderingTest.kt b/colorpicker/src/jvmTest/kotlin/codes/side/colorpicker/ui/ComponentRenderingTest.kt index cf8365f3..aa5aa434 100644 --- a/colorpicker/src/jvmTest/kotlin/codes/side/colorpicker/ui/ComponentRenderingTest.kt +++ b/colorpicker/src/jvmTest/kotlin/codes/side/colorpicker/ui/ComponentRenderingTest.kt @@ -1,5 +1,8 @@ package codes.side.colorpicker.ui +import androidx.compose.foundation.background +import androidx.compose.foundation.interaction.InteractionSource +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.size import androidx.compose.foundation.rememberScrollState @@ -21,6 +24,7 @@ import codes.side.colorpicker.model.HslColor import codes.side.colorpicker.state.ColorPickerState import codes.side.colorpicker.state.ColoringMode import kotlin.test.Test +import kotlin.test.assertNotNull import kotlin.test.assertTrue /** @@ -90,4 +94,39 @@ class ComponentRenderingTest { "expected yellow 1/6 from the right in RTL, got $yellow", ) } + + @Test + fun aCustomThumbReplacesTheDefaultAndReceivesTheInteractionSource() = runComposeUiTest { + // Mid grey cannot occur anywhere in a fully saturated hue track, so finding it + // proves the caller's thumb was painted rather than the Material 3 default. + val marker = Color(0xFF7F7F7F) + var received: InteractionSource? = null + + setContent { + CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) { + HueSlider( + state = ColorPickerState(HslColor(hue = 180f, saturation = 1f, lightness = 0.5f)), + modifier = Modifier.size(width = 300.dp, height = 60.dp).testTag("hue"), + thumb = { source -> + received = source + Box(Modifier.size(24.dp).background(marker)) + }, + ) + } + } + + assertNotNull(received, "the thumb slot was never given an InteractionSource") + + val pixels = onNodeWithTag("hue").captureToImage().toPixelMap() + var sawMarker = false + for (x in 0 until pixels.width) { + for (y in 0 until pixels.height) { + val p = pixels[x, y] + if (p.red in 0.45f..0.55f && p.green in 0.45f..0.55f && p.blue in 0.45f..0.55f) { + sawMarker = true + } + } + } + assertTrue(sawMarker, "the custom thumb was not painted — the slot is ignored") + } } diff --git a/docs/images/custom-thumb.png b/docs/images/custom-thumb.png new file mode 100644 index 00000000..949c1390 Binary files /dev/null and b/docs/images/custom-thumb.png differ diff --git a/sample/shared/src/commonMain/kotlin/codes/side/colorpicker/sample/SampleApp.kt b/sample/shared/src/commonMain/kotlin/codes/side/colorpicker/sample/SampleApp.kt index b2fbcf8f..15ec4f5e 100644 --- a/sample/shared/src/commonMain/kotlin/codes/side/colorpicker/sample/SampleApp.kt +++ b/sample/shared/src/commonMain/kotlin/codes/side/colorpicker/sample/SampleApp.kt @@ -1,7 +1,13 @@ package codes.side.colorpicker.sample +import androidx.compose.foundation.background +import androidx.compose.foundation.interaction.collectIsPressedAsState +import androidx.compose.foundation.interaction.collectIsDraggedAsState +import androidx.compose.foundation.interaction.InteractionSource +import androidx.compose.animation.core.animateDpAsState import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer @@ -9,7 +15,9 @@ import androidx.compose.foundation.layout.fillMaxSize 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.lazy.LazyColumn +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Button import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.HorizontalDivider @@ -30,6 +38,9 @@ import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.shadow +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.lerp import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.unit.dp import codes.side.colorpicker.conversion.toComposeColor @@ -197,6 +208,20 @@ fun SampleApp() { // Alpha section item { SectionHeader("Alpha") } item { AlphaSlider(state = state) } + + item { HorizontalDivider() } + + // Every slider takes a `thumb` slot. The composable is free to read the + // picker state, so the thumb here restyles itself as the color changes. + item { SectionHeader("Custom thumb") } + item { + HueSlider( + state = state, + coloringMode = coloringMode, + thumb = { source -> SquareThumb(state.hslColor.toComposeColor(), source) }, + thumbWidth = SquareThumbSize, + ) + } } } @@ -213,6 +238,41 @@ fun SampleApp() { } } +/** + * A rounded square filled with the picked color, ringed in a neutral picked from the + * color's own luminance and lifted off the track by a shadow, so it stays legible against + * a track that is, by definition, the same color. + */ +@Composable +private fun SquareThumb(color: Color, interaction: InteractionSource) { + val fill = color.copy(alpha = 1f) + val shape = RoundedCornerShape(16.dp) + // The ring is the fill lifted most of the way to white, so it tracks the color + // continuously instead of flipping between two neutrals at a luminance threshold — + // that flip is visible as a snap the moment you drag across it. + val ring = lerp(fill, Color.White, 0.6f) + + // The slot is handed the slider's InteractionSource precisely so a thumb can do this. + val dragged by interaction.collectIsDraggedAsState() + val pressed by interaction.collectIsPressedAsState() + val elevation by animateDpAsState( + targetValue = if (dragged || pressed) 4.dp else 0.dp, + label = "thumbElevation", + ) + + Box( + Modifier + .size(SquareThumbSize) + .shadow(elevation, shape) + .background(ring, shape) + .padding(5.dp) + .background(fill, RoundedCornerShape(11.dp)) + ) +} + +// Material 3's minimum interactive size (LocalMinimumInteractiveComponentSize). +private val SquareThumbSize = 48.dp + @Composable private fun SectionHeader(title: String) { Text( diff --git a/screenshot-tests/build.gradle.kts b/screenshot-tests/build.gradle.kts index 46589785..9052d410 100644 --- a/screenshot-tests/build.gradle.kts +++ b/screenshot-tests/build.gradle.kts @@ -49,6 +49,7 @@ val readmeGoldens = mapOf( "CmykContextualPreview" to "cmyk-contextual", "LabIndependentPreview" to "lab-independent", "LabContextualPreview" to "lab-contextual", + "CustomThumbPreview" to "custom-thumb", "SwatchPreview" to "color-swatch", ) diff --git a/screenshot-tests/src/screenshotTest/kotlin/codes/side/colorpicker/screenshot/ColorPickerPreviews.kt b/screenshot-tests/src/screenshotTest/kotlin/codes/side/colorpicker/screenshot/ColorPickerPreviews.kt index 6913a902..90838501 100644 --- a/screenshot-tests/src/screenshotTest/kotlin/codes/side/colorpicker/screenshot/ColorPickerPreviews.kt +++ b/screenshot-tests/src/screenshotTest/kotlin/codes/side/colorpicker/screenshot/ColorPickerPreviews.kt @@ -1,26 +1,40 @@ package codes.side.colorpicker.screenshot +import androidx.compose.foundation.background +import androidx.compose.foundation.interaction.collectIsPressedAsState +import androidx.compose.foundation.interaction.collectIsDraggedAsState +import androidx.compose.foundation.interaction.InteractionSource +import androidx.compose.animation.core.animateDpAsState import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize 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.RoundedCornerShape import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.darkColorScheme import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.shadow +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.lerp import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import codes.side.colorpicker.conversion.toComposeColor import codes.side.colorpicker.model.HslColor import codes.side.colorpicker.state.ColorPickerState import codes.side.colorpicker.state.ColoringMode +import codes.side.colorpicker.ui.AlphaSlider import codes.side.colorpicker.ui.CmykColorPicker import codes.side.colorpicker.ui.ColorSwatch import codes.side.colorpicker.ui.HslColorPicker +import codes.side.colorpicker.ui.HueSlider import codes.side.colorpicker.ui.LabColorPicker import codes.side.colorpicker.ui.RgbColorPicker import com.android.tools.screenshot.PreviewTest @@ -113,6 +127,55 @@ fun LabContextualPreview() = Frame { LabColorPicker(state = state(), coloringMode = ColoringMode.Contextual) } +// Kept character-for-character identical to SquareThumb in the sample app, so the image +// in the README is the thing the sample actually runs. +@Composable +private fun SquareThumb(color: Color, interaction: InteractionSource) { + val fill = color.copy(alpha = 1f) + val shape = RoundedCornerShape(16.dp) + // The ring is the fill lifted most of the way to white, so it tracks the color + // continuously instead of flipping between two neutrals at a luminance threshold — + // that flip is visible as a snap the moment you drag across it. + val ring = lerp(fill, Color.White, 0.6f) + + // The slot is handed the slider's InteractionSource precisely so a thumb can do this. + val dragged by interaction.collectIsDraggedAsState() + val pressed by interaction.collectIsPressedAsState() + val elevation by animateDpAsState( + targetValue = if (dragged || pressed) 4.dp else 0.dp, + label = "thumbElevation", + ) + + Box( + Modifier + .size(SquareThumbSize) + .shadow(elevation, shape) + .background(ring, shape) + .padding(5.dp) + .background(fill, RoundedCornerShape(11.dp)) + ) +} + +// Material 3's minimum interactive size (LocalMinimumInteractiveComponentSize). +private val SquareThumbSize = 48.dp + +@PreviewTest +@Preview(name = "Custom thumb", widthDp = 440, heightDp = 200) +@Composable +fun CustomThumbPreview() = Frame { + val state = state() + HueSlider( + state = state, + thumb = { source -> SquareThumb(state.hslColor.toComposeColor(), source) }, + thumbWidth = SquareThumbSize, + ) + AlphaSlider( + state = state, + thumb = { source -> SquareThumb(state.hslColor.toComposeColor(), source) }, + thumbWidth = SquareThumbSize, + ) +} + @PreviewTest @Preview(name = "Swatch translucent", widthDp = 440, heightDp = 112) @Composable diff --git a/screenshot-tests/src/screenshotTestDebug/reference/codes/side/colorpicker/screenshot/ColorPickerPreviewsKt/CustomThumbPreview_Custom thumb_a11852cf_0.png b/screenshot-tests/src/screenshotTestDebug/reference/codes/side/colorpicker/screenshot/ColorPickerPreviewsKt/CustomThumbPreview_Custom thumb_a11852cf_0.png new file mode 100644 index 00000000..949c1390 Binary files /dev/null and b/screenshot-tests/src/screenshotTestDebug/reference/codes/side/colorpicker/screenshot/ColorPickerPreviewsKt/CustomThumbPreview_Custom thumb_a11852cf_0.png differ