CSS Integration

/**
 * Creates a stylesheet similar to React Native's StyleSheet.create with CSS animation support
 * @param styles - Named styles object with CSS animation properties
 * @returns Processed stylesheet with CSS animation support
 */
function create<T extends NamedStyles<T>>(styles: T & NamedStyles<any>): T;

type NamedStyles<T> = { [P in keyof T]: CSSStyle };

import { css } from "react-native-reanimated";

// Create styles with CSS animations
const styles = css.create({
  container: {
    animationName: fadeInKeyframes,
    animationDuration: "1s",
    animationTimingFunction: "ease-in-out",
  },
  button: {
    transitionProperty: "transform",
    transitionDuration: "0.3s",
    transitionTimingFunction: cubicBezier(0.4, 0, 0.2, 1),
  },
});

/**
 * Creates CSS keyframes for animations
 * @param keyframes - Keyframe definitions with percentage or named keys
 * @returns CSSKeyframesRule for use in animationName property
 */
function keyframes(keyframes: CSSAnimationKeyframes): CSSKeyframesRule;

interface CSSAnimationKeyframes {
  [key: string]: CSSStyle;
  from?: CSSStyle;
  to?: CSSStyle;
}

import { css } from "react-native-reanimated";

// Define keyframes
const fadeIn = css.keyframes({
  from: { opacity: 0 },
  to: { opacity: 1 },
});

const slideUp = css.keyframes({
  "0%": { transform: "translateY(100px)", opacity: 0 },
  "50%": { transform: "translateY(-10px)", opacity: 0.8 },
  "100%": { transform: "translateY(0px)", opacity: 1 },
});

// Use in styles
const styles = css.create({
  animated: {
    animationName: [fadeIn, slideUp],
    animationDuration: "2s",
    animationFillMode: "forwards",
  },
});

/**
 * Creates a cubic bezier easing function
 * @param x1 - First control point x coordinate (0-1)
 * @param y1 - First control point y coordinate
 * @param x2 - Second control point x coordinate (0-1)
 * @param y2 - Second control point y coordinate
 * @returns CubicBezierEasing instance
 */
function cubicBezier(x1: number, y1: number, x2: number, y2: number): CubicBezierEasing;

/**
 * Creates a stepped easing function
 * @param stepsNumber - Number of steps in the function
 * @param modifier - Step modifier controlling timing
 * @returns StepsEasing instance
 */
function steps(stepsNumber: number, modifier?: StepsModifier): StepsEasing;

/**
 * Creates a linear easing function with control points
 * @param points - Control points for the linear function
 * @returns LinearEasing instance
 */
function linear(...points: ControlPoint[]): LinearEasing;

type StepsModifier = 'jump-start' | 'jump-end' | 'jump-none' | 'jump-both' | 'start' | 'end';
type ControlPoint = [number, number] | number;

import { css, cubicBezier, steps, linear } from "react-native-reanimated";

// Predefined easing functions
const easeInOut = cubicBezier(0.4, 0, 0.2, 1);
const steppedAnimation = steps(4, 'jump-end');
const linearAnimation = linear(0, 0.25, 1);

// Use in styles
const styles = css.create({
  smooth: {
    transitionTimingFunction: easeInOut,
    transitionDuration: "0.3s",
  },
  stepped: {
    animationTimingFunction: steppedAnimation,
    animationDuration: "1s",
  },
  linear: {
    animationTimingFunction: linearAnimation,
    animationDuration: "2s",
  },
});

/**
 * Creates an animated component with CSS animation capabilities
 * @param component - React component to animate
 * @returns Animated version of the component with CSS support
 */
function createAnimatedComponent<T>(component: T): AnimatedComponent<T>;

import { createAnimatedComponent } from "react-native-reanimated";
import { View, Text } from "react-native";

// Create animated components
const AnimatedView = createAnimatedComponent(View);
const AnimatedText = createAnimatedComponent(Text);

// Use with CSS styles
const MyComponent = () => (
  <AnimatedView style={styles.container}>
    <AnimatedText style={styles.text}>
      Animated with CSS
    </AnimatedText>
  </AnimatedView>
);

interface CSSStyle {
  // Animation properties
  animationName?: CSSAnimationKeyframes | CSSKeyframesRule | (CSSAnimationKeyframes | CSSKeyframesRule)[];
  animationDuration?: CSSAnimationDuration;
  animationTimingFunction?: CSSAnimationTimingFunction;
  animationDelay?: CSSAnimationDelay;
  animationIterationCount?: CSSAnimationIterationCount;
  animationDirection?: CSSAnimationDirection;
  animationFillMode?: CSSAnimationFillMode;
  animationPlayState?: CSSAnimationPlayState;
  
  // Transition properties
  transitionProperty?: CSSTransitionProperty;
  transitionDuration?: CSSTransitionDuration;
  transitionTimingFunction?: CSSTransitionTimingFunction;
  transitionDelay?: CSSTransitionDelay;
  
  // Other style properties...
  [key: string]: any;
}

interface CSSKeyframesRule {
  readonly name: string;
  readonly keyframes: CSSAnimationKeyframes;
}

type CSSAnimationDuration = string | number;
type CSSAnimationDelay = string | number;
type CSSAnimationIterationCount = number | 'infinite';
type CSSAnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
type CSSAnimationFillMode = 'none' | 'forwards' | 'backwards' | 'both';
type CSSAnimationPlayState = 'running' | 'paused';
type CSSAnimationTimingFunction = string | CubicBezierEasing | StepsEasing | LinearEasing;

type CSSTransitionProperty = string | string[];
type CSSTransitionDuration = string | number;
type CSSTransitionTimingFunction = string | CubicBezierEasing | StepsEasing | LinearEasing;
type CSSTransitionDelay = string | number;

interface CSSTransitionSettings {
  property?: CSSTransitionProperty;
  duration?: CSSTransitionDuration;
  timingFunction?: CSSTransitionTimingFunction;
  delay?: CSSTransitionDelay;
}

type CSSTransitionShorthand = string | CSSTransitionSettings | (string | CSSTransitionSettings)[];

interface CubicBezierEasing {
  readonly type: 'cubic-bezier';
  readonly x1: number;
  readonly y1: number;
  readonly x2: number;
  readonly y2: number;
}

interface StepsEasing {
  readonly type: 'steps';
  readonly steps: number;
  readonly modifier: StepsModifier;
}

interface LinearEasing {
  readonly type: 'linear';
  readonly points: ControlPoint[];
}