bleam 0.0.4 → 0.0.6

package/dist/animated.cjs

@@ -0,0 +1,286 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_native = require("react-native");
+react_native = require_chunk.__toESM(react_native);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/animated.tsx
+const isDev = process.env.NODE_ENV !== "production";
+const transitionProperties = [
+	"opacity",
+	"scale",
+	"translateX",
+	"translateY",
+	"width",
+	"height"
+];
+const spacing = {
+	"0": 0,
+	"1": 4,
+	"2": 8,
+	"4": 16
+};
+const durations = {
+	"75": 75,
+	"100": 100,
+	"150": 150,
+	"200": 200,
+	"300": 300,
+	"500": 500
+};
+const delays = {
+	"0": 0,
+	"75": 75,
+	"100": 100,
+	"150": 150,
+	"200": 200
+};
+function transitionStyle() {
+	return {
+		__bleamTransition: true,
+		targets: {}
+	};
+}
+function isTransitionStyle(input) {
+	return typeof input === "object" && input !== null && "__bleamTransition" in input && input.__bleamTransition === true;
+}
+function isTransitionObject(input) {
+	return typeof input === "object" && input !== null && !isTransitionStyle(input);
+}
+function assignTarget(style, property, value) {
+	style.targets[property] = value;
+}
+function parseToken(token, style) {
+	const opacityMatch = token.match(/^opacity-(\d+)$/);
+	if (opacityMatch) {
+		assignTarget(style, "opacity", Number(opacityMatch[1]) / 100);
+		return true;
+	}
+	const scaleMatch = token.match(/^scale-(\d+)$/);
+	if (scaleMatch) {
+		assignTarget(style, "scale", Number(scaleMatch[1]) / 100);
+		return true;
+	}
+	const translateMatch = token.match(/^translate-([xy])-(.+)$/);
+	if (translateMatch) {
+		const amount = spacing[translateMatch[2] ?? ""];
+		if (amount === void 0) return false;
+		assignTarget(style, translateMatch[1] === "x" ? "translateX" : "translateY", amount);
+		return true;
+	}
+	const durationMatch = token.match(/^duration-(\d+)$/);
+	if (durationMatch) {
+		const duration = durations[durationMatch[1] ?? ""];
+		if (duration === void 0) return false;
+		style.duration = duration;
+		return true;
+	}
+	const delayMatch = token.match(/^delay-(\d+)$/);
+	if (delayMatch) {
+		const delay = delays[delayMatch[1] ?? ""];
+		if (delay === void 0) return false;
+		style.delay = delay;
+		return true;
+	}
+	if (token === "ease-linear") {
+		style.easing = "linear";
+		return true;
+	}
+	if (token === "ease-in") {
+		style.easing = "in";
+		return true;
+	}
+	if (token === "ease-out") {
+		style.easing = "out";
+		return true;
+	}
+	if (token === "ease-in-out") {
+		style.easing = "in-out";
+		return true;
+	}
+	return false;
+}
+function pushObject(input, style) {
+	for (const property of transitionProperties) {
+		const value = input[property];
+		if (typeof value === "number") assignTarget(style, property, value);
+	}
+	if (Array.isArray(input.transform)) for (const transform of input.transform) {
+		if ("scale" in transform) assignTarget(style, "scale", transform.scale);
+		if ("translateX" in transform) assignTarget(style, "translateX", transform.translateX);
+		if ("translateY" in transform) assignTarget(style, "translateY", transform.translateY);
+	}
+	style.duration = input.duration ?? input.transitionDuration ?? style.duration;
+	style.delay = input.delay ?? input.transitionDelay ?? style.delay;
+	style.easing = input.easing ?? style.easing;
+}
+function pushInput(input, style) {
+	if (!input) return;
+	if (isTransitionStyle(input)) {
+		Object.assign(style.targets, input.targets);
+		style.duration = input.duration ?? style.duration;
+		style.delay = input.delay ?? style.delay;
+		style.easing = input.easing ?? style.easing;
+		return;
+	}
+	if (isTransitionObject(input)) {
+		pushObject(input, style);
+		return;
+	}
+	if (/\s/.test(input)) {
+		if (isDev) throw new Error(`Bleam transition strings must contain exactly one token: ${input}`);
+		return;
+	}
+	if (parseToken(input, style)) return;
+	if (isDev) throw new Error(`Unknown bleam transition token: ${input}`);
+}
+function tx(...inputs) {
+	const style = transitionStyle();
+	for (const input of inputs) pushInput(input, style);
+	return style;
+}
+function easingFunction(easing) {
+	if (easing === "linear") return react_native.Easing.linear;
+	if (easing === "in") return react_native.Easing.in(react_native.Easing.cubic);
+	if (easing === "in-out") return react_native.Easing.inOut(react_native.Easing.cubic);
+	return react_native.Easing.out(react_native.Easing.cubic);
+}
+function splitStyles(style) {
+	const styles = Array.isArray(style) ? style : [style];
+	const hostStyles = [];
+	let transition;
+	for (const item of styles) {
+		if (!item) continue;
+		if (isTransitionStyle(item)) {
+			transition = transition ? tx(transition, item) : item;
+			continue;
+		}
+		hostStyles.push(item);
+	}
+	return {
+		hostStyles,
+		transition
+	};
+}
+function useAnimatedTransition(transition) {
+	const state = (0, react.useRef)({
+		values: /* @__PURE__ */ new Map(),
+		targets: /* @__PURE__ */ new Map(),
+		animations: /* @__PURE__ */ new Map()
+	}).current;
+	const targets = transition?.targets ?? {};
+	const heightTarget = targets.height;
+	const opacityTarget = targets.opacity;
+	const scaleTarget = targets.scale;
+	const translateXTarget = targets.translateX;
+	const translateYTarget = targets.translateY;
+	const widthTarget = targets.width;
+	const duration = transition?.duration ?? 200;
+	const delay = transition?.delay ?? 0;
+	const easing = easingFunction(transition?.easing);
+	for (const property of transitionProperties) {
+		const target = targets[property];
+		if (typeof target !== "number") continue;
+		if (!state.values.has(property)) state.values.set(property, new react_native.Animated.Value(target));
+	}
+	(0, react.useEffect)(() => {
+		const nextTargets = {
+			height: heightTarget,
+			opacity: opacityTarget,
+			scale: scaleTarget,
+			translateX: translateXTarget,
+			translateY: translateYTarget,
+			width: widthTarget
+		};
+		for (const property of transitionProperties) {
+			const target = nextTargets[property];
+			if (typeof target !== "number") continue;
+			const previousTarget = state.targets.get(property);
+			if (previousTarget === void 0) {
+				state.targets.set(property, target);
+				continue;
+			}
+			if (previousTarget === target) continue;
+			state.animations.get(property)?.stop();
+			const value = state.values.get(property);
+			if (!value) continue;
+			const animation = react_native.Animated.timing(value, {
+				toValue: target,
+				duration,
+				delay,
+				easing,
+				isInteraction: false,
+				useNativeDriver: true
+			});
+			state.animations.set(property, animation);
+			state.targets.set(property, target);
+			animation.start(({ finished }) => {
+				if (finished && state.animations.get(property) === animation) state.animations.delete(property);
+			});
+		}
+	}, [
+		delay,
+		duration,
+		easing,
+		heightTarget,
+		opacityTarget,
+		scaleTarget,
+		state,
+		translateXTarget,
+		translateYTarget,
+		widthTarget
+	]);
+	(0, react.useEffect)(() => {
+		return () => {
+			state.animations.forEach((animation) => {
+				animation.stop();
+			});
+			state.animations.clear();
+		};
+	}, [state]);
+	if (!transition) return;
+	const animatedStyle = {};
+	const transform = [];
+	const opacity = state.values.get("opacity");
+	if (opacity) animatedStyle.opacity = opacity;
+	const width = state.values.get("width");
+	if (width) animatedStyle.width = width;
+	const height = state.values.get("height");
+	if (height) animatedStyle.height = height;
+	const scale = state.values.get("scale");
+	if (scale) transform.push({ scale });
+	const translateX = state.values.get("translateX");
+	if (translateX) transform.push({ translateX });
+	const translateY = state.values.get("translateY");
+	if (translateY) transform.push({ translateY });
+	if (transform.length > 0) animatedStyle.transform = transform;
+	return animatedStyle;
+}
+const AnimatedView = (0, react.forwardRef)(function AnimatedView$1({ style,...props }, ref) {
+	const { hostStyles, transition } = splitStyles(style);
+	const animatedStyle = useAnimatedTransition(transition);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Animated.View, {
+		ref,
+		style: [...hostStyles, animatedStyle],
+		...props
+	});
+});
+const AnimatedText = (0, react.forwardRef)(function AnimatedText$1({ style,...props }, ref) {
+	const { hostStyles, transition } = splitStyles(style);
+	const animatedStyle = useAnimatedTransition(transition);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Animated.Text, {
+		ref,
+		style: [...hostStyles, animatedStyle],
+		...props
+	});
+});
+const Animated = {
+	View: AnimatedView,
+	Text: AnimatedText
+};
+
+//#endregion
+exports.Animated = Animated;
+exports.tx = tx;

package/dist/animated.d.cts

@@ -0,0 +1,47 @@
+import * as react0 from "react";
+import { Text, TextProps, TextStyle, View, ViewProps, ViewStyle } from "react-native";
+
+//#region src/animated.d.ts
+type TransitionProperty = 'opacity' | 'scale' | 'translateX' | 'translateY' | 'width' | 'height';
+type TransitionTransform = {
+  scale: number;
+} | {
+  translateX: number;
+} | {
+  translateY: number;
+};
+type TransitionObject = {
+  opacity?: number;
+  scale?: number;
+  translateX?: number;
+  translateY?: number;
+  width?: number;
+  height?: number;
+  transform?: TransitionTransform[];
+  duration?: number;
+  delay?: number;
+  easing?: TransitionEasing;
+  transitionDuration?: number;
+  transitionDelay?: number;
+};
+type TransitionEasing = 'linear' | 'in' | 'out' | 'in-out';
+type TransitionInput = string | TransitionStyle | TransitionObject | false | null | undefined;
+type TransitionStyle = {
+  readonly __bleamTransition: true;
+  targets: Partial<Record<TransitionProperty, number>>;
+  duration?: number;
+  delay?: number;
+  easing?: TransitionEasing;
+};
+type AnimatedHostStyle = ViewStyle | TextStyle | TransitionStyle | false | null | undefined;
+declare function tx(...inputs: TransitionInput[]): TransitionStyle;
+declare const Animated: {
+  View: react0.ForwardRefExoticComponent<Omit<ViewProps, "style"> & {
+    style?: AnimatedHostStyle | AnimatedHostStyle[];
+  } & react0.RefAttributes<View>>;
+  Text: react0.ForwardRefExoticComponent<Omit<TextProps, "style"> & {
+    style?: AnimatedHostStyle | AnimatedHostStyle[];
+  } & react0.RefAttributes<Text>>;
+};
+//#endregion
+export { Animated, TransitionStyle, tx };

package/dist/animated.d.ts

@@ -0,0 +1,47 @@
+import * as react0 from "react";
+import { Text, TextProps, TextStyle, View, ViewProps, ViewStyle } from "react-native";
+
+//#region src/animated.d.ts
+type TransitionProperty = 'opacity' | 'scale' | 'translateX' | 'translateY' | 'width' | 'height';
+type TransitionTransform = {
+  scale: number;
+} | {
+  translateX: number;
+} | {
+  translateY: number;
+};
+type TransitionObject = {
+  opacity?: number;
+  scale?: number;
+  translateX?: number;
+  translateY?: number;
+  width?: number;
+  height?: number;
+  transform?: TransitionTransform[];
+  duration?: number;
+  delay?: number;
+  easing?: TransitionEasing;
+  transitionDuration?: number;
+  transitionDelay?: number;
+};
+type TransitionEasing = 'linear' | 'in' | 'out' | 'in-out';
+type TransitionInput = string | TransitionStyle | TransitionObject | false | null | undefined;
+type TransitionStyle = {
+  readonly __bleamTransition: true;
+  targets: Partial<Record<TransitionProperty, number>>;
+  duration?: number;
+  delay?: number;
+  easing?: TransitionEasing;
+};
+type AnimatedHostStyle = ViewStyle | TextStyle | TransitionStyle | false | null | undefined;
+declare function tx(...inputs: TransitionInput[]): TransitionStyle;
+declare const Animated: {
+  View: react0.ForwardRefExoticComponent<Omit<ViewProps, "style"> & {
+    style?: AnimatedHostStyle | AnimatedHostStyle[];
+  } & react0.RefAttributes<View>>;
+  Text: react0.ForwardRefExoticComponent<Omit<TextProps, "style"> & {
+    style?: AnimatedHostStyle | AnimatedHostStyle[];
+  } & react0.RefAttributes<Text>>;
+};
+//#endregion
+export { Animated, TransitionStyle, tx };

package/dist/animated.js

@@ -0,0 +1,281 @@
+import { forwardRef, useEffect, useRef } from "react";
+import { Animated as Animated$1, Easing } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/animated.tsx
+const isDev = process.env.NODE_ENV !== "production";
+const transitionProperties = [
+	"opacity",
+	"scale",
+	"translateX",
+	"translateY",
+	"width",
+	"height"
+];
+const spacing = {
+	"0": 0,
+	"1": 4,
+	"2": 8,
+	"4": 16
+};
+const durations = {
+	"75": 75,
+	"100": 100,
+	"150": 150,
+	"200": 200,
+	"300": 300,
+	"500": 500
+};
+const delays = {
+	"0": 0,
+	"75": 75,
+	"100": 100,
+	"150": 150,
+	"200": 200
+};
+function transitionStyle() {
+	return {
+		__bleamTransition: true,
+		targets: {}
+	};
+}
+function isTransitionStyle(input) {
+	return typeof input === "object" && input !== null && "__bleamTransition" in input && input.__bleamTransition === true;
+}
+function isTransitionObject(input) {
+	return typeof input === "object" && input !== null && !isTransitionStyle(input);
+}
+function assignTarget(style, property, value) {
+	style.targets[property] = value;
+}
+function parseToken(token, style) {
+	const opacityMatch = token.match(/^opacity-(\d+)$/);
+	if (opacityMatch) {
+		assignTarget(style, "opacity", Number(opacityMatch[1]) / 100);
+		return true;
+	}
+	const scaleMatch = token.match(/^scale-(\d+)$/);
+	if (scaleMatch) {
+		assignTarget(style, "scale", Number(scaleMatch[1]) / 100);
+		return true;
+	}
+	const translateMatch = token.match(/^translate-([xy])-(.+)$/);
+	if (translateMatch) {
+		const amount = spacing[translateMatch[2] ?? ""];
+		if (amount === void 0) return false;
+		assignTarget(style, translateMatch[1] === "x" ? "translateX" : "translateY", amount);
+		return true;
+	}
+	const durationMatch = token.match(/^duration-(\d+)$/);
+	if (durationMatch) {
+		const duration = durations[durationMatch[1] ?? ""];
+		if (duration === void 0) return false;
+		style.duration = duration;
+		return true;
+	}
+	const delayMatch = token.match(/^delay-(\d+)$/);
+	if (delayMatch) {
+		const delay = delays[delayMatch[1] ?? ""];
+		if (delay === void 0) return false;
+		style.delay = delay;
+		return true;
+	}
+	if (token === "ease-linear") {
+		style.easing = "linear";
+		return true;
+	}
+	if (token === "ease-in") {
+		style.easing = "in";
+		return true;
+	}
+	if (token === "ease-out") {
+		style.easing = "out";
+		return true;
+	}
+	if (token === "ease-in-out") {
+		style.easing = "in-out";
+		return true;
+	}
+	return false;
+}
+function pushObject(input, style) {
+	for (const property of transitionProperties) {
+		const value = input[property];
+		if (typeof value === "number") assignTarget(style, property, value);
+	}
+	if (Array.isArray(input.transform)) for (const transform of input.transform) {
+		if ("scale" in transform) assignTarget(style, "scale", transform.scale);
+		if ("translateX" in transform) assignTarget(style, "translateX", transform.translateX);
+		if ("translateY" in transform) assignTarget(style, "translateY", transform.translateY);
+	}
+	style.duration = input.duration ?? input.transitionDuration ?? style.duration;
+	style.delay = input.delay ?? input.transitionDelay ?? style.delay;
+	style.easing = input.easing ?? style.easing;
+}
+function pushInput(input, style) {
+	if (!input) return;
+	if (isTransitionStyle(input)) {
+		Object.assign(style.targets, input.targets);
+		style.duration = input.duration ?? style.duration;
+		style.delay = input.delay ?? style.delay;
+		style.easing = input.easing ?? style.easing;
+		return;
+	}
+	if (isTransitionObject(input)) {
+		pushObject(input, style);
+		return;
+	}
+	if (/\s/.test(input)) {
+		if (isDev) throw new Error(`Bleam transition strings must contain exactly one token: ${input}`);
+		return;
+	}
+	if (parseToken(input, style)) return;
+	if (isDev) throw new Error(`Unknown bleam transition token: ${input}`);
+}
+function tx(...inputs) {
+	const style = transitionStyle();
+	for (const input of inputs) pushInput(input, style);
+	return style;
+}
+function easingFunction(easing) {
+	if (easing === "linear") return Easing.linear;
+	if (easing === "in") return Easing.in(Easing.cubic);
+	if (easing === "in-out") return Easing.inOut(Easing.cubic);
+	return Easing.out(Easing.cubic);
+}
+function splitStyles(style) {
+	const styles = Array.isArray(style) ? style : [style];
+	const hostStyles = [];
+	let transition;
+	for (const item of styles) {
+		if (!item) continue;
+		if (isTransitionStyle(item)) {
+			transition = transition ? tx(transition, item) : item;
+			continue;
+		}
+		hostStyles.push(item);
+	}
+	return {
+		hostStyles,
+		transition
+	};
+}
+function useAnimatedTransition(transition) {
+	const state = useRef({
+		values: /* @__PURE__ */ new Map(),
+		targets: /* @__PURE__ */ new Map(),
+		animations: /* @__PURE__ */ new Map()
+	}).current;
+	const targets = transition?.targets ?? {};
+	const heightTarget = targets.height;
+	const opacityTarget = targets.opacity;
+	const scaleTarget = targets.scale;
+	const translateXTarget = targets.translateX;
+	const translateYTarget = targets.translateY;
+	const widthTarget = targets.width;
+	const duration = transition?.duration ?? 200;
+	const delay = transition?.delay ?? 0;
+	const easing = easingFunction(transition?.easing);
+	for (const property of transitionProperties) {
+		const target = targets[property];
+		if (typeof target !== "number") continue;
+		if (!state.values.has(property)) state.values.set(property, new Animated$1.Value(target));
+	}
+	useEffect(() => {
+		const nextTargets = {
+			height: heightTarget,
+			opacity: opacityTarget,
+			scale: scaleTarget,
+			translateX: translateXTarget,
+			translateY: translateYTarget,
+			width: widthTarget
+		};
+		for (const property of transitionProperties) {
+			const target = nextTargets[property];
+			if (typeof target !== "number") continue;
+			const previousTarget = state.targets.get(property);
+			if (previousTarget === void 0) {
+				state.targets.set(property, target);
+				continue;
+			}
+			if (previousTarget === target) continue;
+			state.animations.get(property)?.stop();
+			const value = state.values.get(property);
+			if (!value) continue;
+			const animation = Animated$1.timing(value, {
+				toValue: target,
+				duration,
+				delay,
+				easing,
+				isInteraction: false,
+				useNativeDriver: true
+			});
+			state.animations.set(property, animation);
+			state.targets.set(property, target);
+			animation.start(({ finished }) => {
+				if (finished && state.animations.get(property) === animation) state.animations.delete(property);
+			});
+		}
+	}, [
+		delay,
+		duration,
+		easing,
+		heightTarget,
+		opacityTarget,
+		scaleTarget,
+		state,
+		translateXTarget,
+		translateYTarget,
+		widthTarget
+	]);
+	useEffect(() => {
+		return () => {
+			state.animations.forEach((animation) => {
+				animation.stop();
+			});
+			state.animations.clear();
+		};
+	}, [state]);
+	if (!transition) return;
+	const animatedStyle = {};
+	const transform = [];
+	const opacity = state.values.get("opacity");
+	if (opacity) animatedStyle.opacity = opacity;
+	const width = state.values.get("width");
+	if (width) animatedStyle.width = width;
+	const height = state.values.get("height");
+	if (height) animatedStyle.height = height;
+	const scale = state.values.get("scale");
+	if (scale) transform.push({ scale });
+	const translateX = state.values.get("translateX");
+	if (translateX) transform.push({ translateX });
+	const translateY = state.values.get("translateY");
+	if (translateY) transform.push({ translateY });
+	if (transform.length > 0) animatedStyle.transform = transform;
+	return animatedStyle;
+}
+const AnimatedView = forwardRef(function AnimatedView$1({ style,...props }, ref) {
+	const { hostStyles, transition } = splitStyles(style);
+	const animatedStyle = useAnimatedTransition(transition);
+	return /* @__PURE__ */ jsx(Animated$1.View, {
+		ref,
+		style: [...hostStyles, animatedStyle],
+		...props
+	});
+});
+const AnimatedText = forwardRef(function AnimatedText$1({ style,...props }, ref) {
+	const { hostStyles, transition } = splitStyles(style);
+	const animatedStyle = useAnimatedTransition(transition);
+	return /* @__PURE__ */ jsx(Animated$1.Text, {
+		ref,
+		style: [...hostStyles, animatedStyle],
+		...props
+	});
+});
+const Animated = {
+	View: AnimatedView,
+	Text: AnimatedText
+};
+
+//#endregion
+export { Animated, tx };

package/dist/app.d.cts

@@ -3,5 +3,4 @@ import { ComponentType } from "react";
 //#region src/app.d.ts
 declare function registerApp(component: ComponentType): void;
 //#endregion
-export { registerApp };
-//# sourceMappingURL=app.d.cts.map
+export { registerApp };

package/dist/app.d.ts

@@ -3,5 +3,4 @@ import { ComponentType } from "react";
 //#region src/app.d.ts
 declare function registerApp(component: ComponentType): void;
 //#endregion
-export { registerApp };
-//# sourceMappingURL=app.d.ts.map
+export { registerApp };

package/dist/app.js

@@ -6,5 +6,4 @@ function registerApp(component) {
 }
 
 //#endregion
-export { registerApp };
-//# sourceMappingURL=app.js.map
+export { registerApp };

package/dist/bundler.d.cts

@@ -24,5 +24,4 @@ interface Bundler {
   bundle(options: BundleOptions): Promise<BundleResult>;
 }
 //#endregion
-export { BundleOptions, BundleResult, Bundler, DevServer, DevServerHandle, DevServerOptions };
-//# sourceMappingURL=bundler.d.cts.map
+export { BundleOptions, BundleResult, Bundler, DevServer, DevServerHandle, DevServerOptions };

package/dist/bundler.d.ts

@@ -24,5 +24,4 @@ interface Bundler {
   bundle(options: BundleOptions): Promise<BundleResult>;
 }
 //#endregion
-export { BundleOptions, BundleResult, Bundler, DevServer, DevServerHandle, DevServerOptions };
-//# sourceMappingURL=bundler.d.ts.map
+export { BundleOptions, BundleResult, Bundler, DevServer, DevServerHandle, DevServerOptions };