Glass LabiOS

import * as React from "react";
import { forwardRef } from "react";
import { View, type ViewProps } from "react-native";
import { cn } from "@lumioui/core";
import { Glass } from "../glass";
import { Slider } from "../slider";
import { Text } from "../text";

/**
 * GlassLab — a self-contained material playground: a Glass pane over a
 * colorful world with live sliders for bend (refraction), frost, and
 * sheen. Use it on docs/playground surfaces to demo the material's range.
 *
 *   <GlassLab />
 * Expo Go compatible.
 */

export interface GlassLabProps extends Omit<ViewProps, "className"> {
  /** Initial material values (0–1). */
  defaultBend?: number;
  defaultFrost?: number;
  defaultSheen?: number;
  /** The word shown on the glass pane. */
  label?: string;
  className?: string;
}

export const GlassLab = forwardRef<React.ElementRef<typeof View>, GlassLabProps>(
  function GlassLab(
    { defaultBend = 0.5, defaultFrost = 0.5, defaultSheen = 0.6, label = "Liquid", className, ...props },
    ref
  ) {
    const [bend, setBend] = React.useState(defaultBend);
    const [frost, setFrost] = React.useState(defaultFrost);
    const [sheen, setSheen] = React.useState(defaultSheen);

    return (
      <View
        ref={ref}
        className={cn("overflow-hidden rounded-3xl", className)}
        {...props}
      >
        {/* The world the glass refracts — saturated blobs beat flat color. */}
        <View className="absolute inset-0 bg-[#1E1B4B]" />
        <View className="absolute -left-10 -top-10 h-48 w-48 rounded-full bg-[#FA2D48]/70" />
        <View className="absolute -right-8 top-16 h-40 w-40 rounded-full bg-[#0EA5E9]/70" />
        <View className="absolute bottom-[-40px] left-16 h-44 w-44 rounded-full bg-[#A3E635]/60" />

        <View className="items-center px-5 pt-10">
          <Glass
            effect="clear"
            bend={bend}
            frost={frost}
            sheen={sheen}
            interactive
            className="h-36 w-full items-center justify-center rounded-3xl"
          >
            <Text className="text-2xl font-bold text-white">{label}</Text>
          </Glass>
        </View>

        <View className="gap-3 px-5 py-6">
          {(
            [
              ["Bend", bend, setBend],
              ["Frost", frost, setFrost],
              ["Sheen", sheen, setSheen],
            ] as const
          ).map(([name, v, set]) => (
            <View key={name} className="flex-row items-center gap-3">
              <Text variant="small" className="w-14 text-white/80">
                {name}
              </Text>
              <Slider
                glass
                value={v}
                onValueChange={set}
                min={0}
                max={1}
                step={0.01}
                className="flex-1"
                accessibilityLabel={`${name} amount`}
              />
              <Text variant="muted" className="w-10 text-right text-white/60 tabular-nums">
                {v.toFixed(2)}
              </Text>
            </View>
          ))}
        </View>
      </View>
    );
  }
);

GlassLab.displayName = "GlassLab";