bleam 0.0.6 → 0.0.7

package/dist/ui.js

@@ -1,7 +1,7 @@
 import { t as ensureNativeScript } from "./native-runtime-C85Nuc4F.js";
-import { StyleSheet } from "react-native";
+import { StyleSheet, processColor } from "react-native";
 
-//#region src/ui.tsx
+//#region src/ui/shared.ts
 function textFromChildren(children) {
 	if (typeof children === "string" || typeof children === "number") return String(children);
 	if (Array.isArray(children)) return children.filter((child) => typeof child === "string" || typeof child === "number").join("");
@@ -20,19 +20,30 @@ function colorFromHex(hex) {
 	return UIColor.colorWithRedGreenBlueAlpha(red, green, blue, 1);
 }
 function colorFromStyle(value) {
-	return typeof value === "string" ? colorFromHex(value) : void 0;
+	if (value == null) return;
+	if (typeof value === "string") {
+		const hexColor = colorFromHex(value);
+		if (hexColor) return hexColor;
+	}
+	const color = processColor(value);
+	if (typeof color !== "number") return;
+	const alpha = (color >>> 24 & 255) / 255;
+	const red = (color >>> 16 & 255) / 255;
+	const green = (color >>> 8 & 255) / 255;
+	const blue = (color & 255) / 255;
+	return UIColor.colorWithRedGreenBlueAlpha(red, green, blue, alpha);
 }
-function labelText(props) {
-	return props.text ?? textFromChildren(props.children) ?? "";
+function fontFromStyle(style) {
+	if (typeof style?.fontSize !== "number") return;
+	if (style.fontWeight === "700" || style.fontWeight === "bold") return UIFont.boldSystemFontOfSize(style.fontSize);
+	return UIFont.systemFontOfSize(style.fontSize);
 }
+
+//#endregion
+//#region src/ui/button.tsx
 function buttonTitle(props) {
 	return props.title ?? textFromChildren(props.children) ?? "";
 }
-function defaultLabelColor(tone) {
-	if (tone === "secondary") return UIColor.secondaryLabelColor;
-	if (tone === "tertiary") return UIColor.tertiaryLabelColor;
-	return UIColor.labelColor;
-}
 function buttonConfiguration(variant) {
 	if (variant === "secondary") return UIButtonConfiguration.borderedButtonConfiguration();
 	if (variant === "plain") return UIButtonConfiguration.plainButtonConfiguration();
@@ -43,10 +54,47 @@ function buttonSize(size) {
 	if (size === "large") return UIButtonConfigurationSize.Large;
 	return UIButtonConfigurationSize.Medium;
 }
-function fontFromStyle(style) {
-	if (typeof style?.fontSize !== "number") return;
-	if (style.fontWeight === "700" || style.fontWeight === "bold") return UIFont.boldSystemFontOfSize(style.fontSize);
-	return UIFont.systemFontOfSize(style.fontSize);
+const Button = ensureNativeScript().defineUIKitView({
+	name: "Button",
+	layout: {
+		sizing: "intrinsic",
+		defaultSize: {
+			width: 1,
+			height: 34
+		}
+	},
+	create(ctx) {
+		const button = UIButton.buttonWithType(UIButtonType.System);
+		ctx.targetAction(button, UIControlEvents.TouchUpInside, () => {
+			ctx.emit("onPress");
+		});
+		return button;
+	},
+	update(button, props, _previousProps, ctx) {
+		const style = styleFromProps(props.style);
+		const configuration = buttonConfiguration(props.variant);
+		configuration.title = buttonTitle(props);
+		configuration.buttonSize = buttonSize(props.size);
+		configuration.showsActivityIndicator = props.loading ?? false;
+		const foregroundColor = colorFromStyle(style?.color);
+		if (foregroundColor) configuration.baseForegroundColor = foregroundColor;
+		const backgroundColor = colorFromStyle(style?.backgroundColor);
+		if (backgroundColor) configuration.baseBackgroundColor = backgroundColor;
+		button.configuration = configuration;
+		button.enabled = !(props.disabled || props.loading);
+		ctx?.invalidateLayout();
+	}
+});
+
+//#endregion
+//#region src/ui/label.tsx
+function labelText(props) {
+	return props.text ?? textFromChildren(props.children) ?? "";
+}
+function defaultLabelColor(tone) {
+	if (tone === "secondary") return UIColor.secondaryLabelColor;
+	if (tone === "tertiary") return UIColor.tertiaryLabelColor;
+	return UIColor.labelColor;
 }
 const Label = ensureNativeScript().defineUIKitView({
 	name: "Label",
@@ -74,37 +122,236 @@ const Label = ensureNativeScript().defineUIKitView({
 		ctx?.invalidateLayout();
 	}
 });
-const Button = ensureNativeScript().defineUIKitView({
-	name: "Button",
+
+//#endregion
+//#region src/ui/symbol.tsx
+function symbolWeight(weight) {
+	switch (weight) {
+		case "ultraLight": return UIImageSymbolWeight.UltraLight;
+		case "thin": return UIImageSymbolWeight.Thin;
+		case "light": return UIImageSymbolWeight.Light;
+		case "medium": return UIImageSymbolWeight.Medium;
+		case "semibold": return UIImageSymbolWeight.Semibold;
+		case "bold": return UIImageSymbolWeight.Bold;
+		case "heavy": return UIImageSymbolWeight.Heavy;
+		case "black": return UIImageSymbolWeight.Black;
+		default: return UIImageSymbolWeight.Regular;
+	}
+}
+function symbolScale(scale) {
+	if (scale === "small") return UIImageSymbolScale.Small;
+	if (scale === "large") return UIImageSymbolScale.Large;
+	return UIImageSymbolScale.Medium;
+}
+function symbolConfiguration(props, style) {
+	const size = props.size ?? style?.fontSize ?? 17;
+	return UIImageSymbolConfiguration.configurationWithPointSizeWeightScale(size, symbolWeight(props.weight), symbolScale(props.scale));
+}
+function symbolImage(name, configuration) {
+	if (configuration) return UIImage.systemImageNamedWithConfiguration(name, configuration);
+	return UIImage.systemImageNamed(name);
+}
+const Symbol = ensureNativeScript().defineUIKitView({
+	name: "Symbol",
 	layout: {
 		sizing: "intrinsic",
 		defaultSize: {
-			width: 1,
-			height: 34
+			width: 17,
+			height: 17
 		}
 	},
-	create(ctx) {
-		const button = UIButton.buttonWithType(UIButtonType.System);
-		ctx.targetAction(button, UIControlEvents.TouchUpInside, () => {
-			ctx.emit("onPress");
-		});
-		return button;
+	create() {
+		const imageView = UIImageView.new();
+		imageView.contentMode = UIViewContentMode.ScaleAspectFit;
+		return imageView;
 	},
-	update(button, props, _previousProps, ctx) {
+	update(imageView, props, _previousProps, ctx) {
 		const style = styleFromProps(props.style);
-		const configuration = buttonConfiguration(props.variant);
-		configuration.title = buttonTitle(props);
-		configuration.buttonSize = buttonSize(props.size);
-		configuration.showsActivityIndicator = props.loading ?? false;
-		const foregroundColor = colorFromStyle(style?.color);
-		if (foregroundColor) configuration.baseForegroundColor = foregroundColor;
-		const backgroundColor = colorFromStyle(style?.backgroundColor);
-		if (backgroundColor) configuration.baseBackgroundColor = backgroundColor;
-		button.configuration = configuration;
-		button.enabled = !(props.disabled || props.loading);
+		const configuration = symbolConfiguration(props, style);
+		imageView.image = symbolImage(props.symbol, configuration);
+		imageView.tintColor = colorFromStyle(props.color) ?? colorFromStyle(style?.tintColor) ?? colorFromStyle(style?.color) ?? UIColor.labelColor;
+		ctx?.invalidateLayout();
+	}
+});
+
+//#endregion
+//#region src/ui/glass-shared.ts
+function glassStyleValue(style) {
+	return typeof style === "object" ? style.style : style ?? "regular";
+}
+function glassEffect(style) {
+	if (style === "none") return null;
+	return UIGlassEffect.effectWithStyle(style === "clear" ? UIGlassEffectStyle.Clear : UIGlassEffectStyle.Regular);
+}
+function createGlassHost(effect) {
+	const rootView = UIVisualEffectView.alloc().initWithEffect(effect);
+	const childrenView = UIView.new();
+	rootView.backgroundColor = UIColor.clearColor;
+	rootView.contentView.backgroundColor = UIColor.clearColor;
+	childrenView.backgroundColor = UIColor.clearColor;
+	rootView.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
+	rootView.contentView.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
+	childrenView.translatesAutoresizingMaskIntoConstraints = false;
+	rootView.contentView.addSubview(childrenView);
+	const constraints = {
+		top: childrenView.topAnchor.constraintEqualToAnchorConstant(rootView.contentView.topAnchor, 0),
+		right: rootView.contentView.rightAnchor.constraintEqualToAnchorConstant(childrenView.rightAnchor, 0),
+		bottom: rootView.contentView.bottomAnchor.constraintEqualToAnchorConstant(childrenView.bottomAnchor, 0),
+		left: childrenView.leftAnchor.constraintEqualToAnchorConstant(rootView.contentView.leftAnchor, 0)
+	};
+	NSLayoutConstraint.activateConstraints([
+		constraints.top,
+		constraints.right,
+		constraints.bottom,
+		constraints.left
+	]);
+	return {
+		rootView,
+		childrenView
+	};
+}
+function applyGlassShape(view, style) {
+	const radius = typeof style?.cornerRadius === "number" ? style.cornerRadius : 0;
+	view.layer.cornerRadius = radius;
+	view.contentView.layer.cornerRadius = radius;
+	view.layer.cornerCurve = kCACornerCurveContinuous;
+	view.contentView.layer.cornerCurve = kCACornerCurveContinuous;
+	view.clipsToBounds = radius > 0;
+	view.contentView.clipsToBounds = radius > 0;
+	view.layer.masksToBounds = radius > 0;
+	view.contentView.layer.masksToBounds = radius > 0;
+	view.layer.borderWidth = typeof style?.borderWidth === "number" ? style.borderWidth : 0;
+	const borderColor = colorFromStyle(style?.borderColor);
+	view.layer.borderColor = borderColor?.CGColor ?? null;
+}
+function updateGlassEffect(view, props) {
+	const style = glassStyleValue(props.glassEffectStyle);
+	const effect = glassEffect(style);
+	if (style !== "none") {
+		const tintColor = props.tintColor ? colorFromHex(props.tintColor) : void 0;
+		const glass = effect;
+		glass.interactive = props.isInteractive ?? false;
+		if (tintColor) glass.tintColor = tintColor;
+	}
+	if (typeof props.glassEffectStyle === "object" && props.glassEffectStyle.animate) UIView.animateWithDurationAnimations(props.glassEffectStyle.animationDuration ?? .35, () => {
+		view.effect = effect;
+	});
+	else view.effect = effect;
+}
+function updateGlassContainerEffect(view, spacing) {
+	const effect = UIGlassContainerEffect.new();
+	effect.spacing = spacing ?? 0;
+	view.effect = effect;
+}
+
+//#endregion
+//#region src/ui/glass-view.tsx
+const GlassView = ensureNativeScript().defineUIKitContainer({
+	name: "GlassView",
+	layout: {
+		sizing: "fill",
+		defaultSize: {
+			width: 0,
+			height: 0
+		}
+	},
+	create() {
+		return createGlassHost(glassEffect("regular"));
+	},
+	update(view, props, _previousProps, ctx) {
+		updateGlassEffect(view.rootView, props);
+		applyGlassShape(view.rootView, props.glassStyle);
+		ctx?.invalidateLayout();
+	}
+});
+
+//#endregion
+//#region src/ui/glass-container.tsx
+const GlassContainer = ensureNativeScript().defineUIKitContainer({
+	name: "GlassContainer",
+	layout: {
+		sizing: "fill",
+		defaultSize: {
+			width: 0,
+			height: 0
+		}
+	},
+	create() {
+		const host = createGlassHost(UIGlassContainerEffect.new());
+		updateGlassContainerEffect(host.rootView, void 0);
+		return host;
+	},
+	update(view, props, _previousProps, ctx) {
+		updateGlassContainerEffect(view.rootView, props.spacing);
+		applyGlassShape(view.rootView, props.glassStyle);
+		ctx?.invalidateLayout();
+	}
+});
+
+//#endregion
+//#region src/ui/blur-view.tsx
+function blurStyle(intensity, colorScheme) {
+	const scheme = colorScheme ?? "auto";
+	const level = intensity ?? "regular";
+	if (scheme === "light") switch (level) {
+		case "ultraThin": return UIBlurEffectStyle.SystemUltraThinMaterialLight;
+		case "thin": return UIBlurEffectStyle.SystemThinMaterialLight;
+		case "thick": return UIBlurEffectStyle.SystemThickMaterialLight;
+		case "chrome": return UIBlurEffectStyle.SystemChromeMaterialLight;
+		default: return UIBlurEffectStyle.SystemMaterialLight;
+	}
+	if (scheme === "dark") switch (level) {
+		case "ultraThin": return UIBlurEffectStyle.SystemUltraThinMaterialDark;
+		case "thin": return UIBlurEffectStyle.SystemThinMaterialDark;
+		case "thick": return UIBlurEffectStyle.SystemThickMaterialDark;
+		case "chrome": return UIBlurEffectStyle.SystemChromeMaterialDark;
+		default: return UIBlurEffectStyle.SystemMaterialDark;
+	}
+	switch (level) {
+		case "ultraThin": return UIBlurEffectStyle.SystemUltraThinMaterial;
+		case "thin": return UIBlurEffectStyle.SystemThinMaterial;
+		case "thick": return UIBlurEffectStyle.SystemThickMaterial;
+		case "chrome": return UIBlurEffectStyle.SystemChromeMaterial;
+		default: return UIBlurEffectStyle.SystemMaterial;
+	}
+}
+function createEffectHost(effect) {
+	const rootView = UIVisualEffectView.alloc().initWithEffect(effect);
+	rootView.backgroundColor = UIColor.clearColor;
+	rootView.contentView.backgroundColor = UIColor.clearColor;
+	rootView.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
+	rootView.contentView.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
+	return {
+		rootView,
+		childrenView: rootView.contentView
+	};
+}
+function applyContainerStyle(view, style) {
+	const borderRadius = style?.borderRadius;
+	if (typeof borderRadius === "number") view.layer.cornerRadius = borderRadius;
+	view.clipsToBounds = style?.overflow === "hidden" || typeof borderRadius === "number";
+}
+function updateBlurEffect(view, props) {
+	view.effect = UIBlurEffect.effectWithStyle(blurStyle(props.intensity, props.colorScheme));
+}
+const BlurView = ensureNativeScript().defineUIKitContainer({
+	name: "BlurView",
+	layout: {
+		sizing: "fill",
+		defaultSize: {
+			width: 0,
+			height: 0
+		}
+	},
+	create() {
+		return createEffectHost(UIBlurEffect.effectWithStyle(UIBlurEffectStyle.SystemMaterial));
+	},
+	update(view, props, _previousProps, ctx) {
+		updateBlurEffect(view.rootView, props);
+		applyContainerStyle(view.rootView, styleFromProps(props.style));
 		ctx?.invalidateLayout();
 	}
 });
 
 //#endregion
-export { Button, Label };
+export { BlurView, Button, GlassContainer, GlassView, Label, Symbol };