import { Animated } from "./animated.jsx";
import { pulse, shimmer, wave } from "./effects.jsx";

/**
 * Named wrappers for the built-in effects. Each runs its effect across all of
 * its children as one linked region — so a shimmer (or wave, or pulse) sweeps a
 * spinner glyph and the text beside it together:
 *
 * ```tsx
 * <Shimmer baseColor="#666" highlightColor="#fff">
 *   <Spinner />
 *   <text>{` ${verb}…`}</text>
 * </Shimmer>
 * ```
 *
 * For a custom effect, use `<Animated effect={…}>` directly.
 */

export function Shimmer(props) {
  return <Animated effect={shimmer({
    baseColor: () => props.baseColor,
    highlightColor: () => props.highlightColor,
    speed: props.speed,
    direction: props.direction
  })} paused={props.paused} tick={props.tick} time={props.time}>
			{props.children}
		</Animated>;
}
export function Wave(props) {
  return <Animated effect={wave({
    from: () => props.from,
    to: () => props.to,
    speed: props.speed,
    wavelength: props.wavelength
  })} paused={props.paused} tick={props.tick} time={props.time}>
			{props.children}
		</Animated>;
}
export function Pulse(props) {
  return <Animated effect={pulse({
    baseColor: () => props.baseColor,
    flashColor: () => props.flashColor,
    period: props.period
  })} paused={props.paused} tick={props.tick} time={props.time}>
			{props.children}
		</Animated>;
}
//# sourceMappingURL=components.jsx.map