expo-ui-kit-test/dist/components/Blur/Blur.web.js

Cross-platform UI kit for Expo/React Native with responsive breakpoints and components.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const BlurWeb = ({ intensity = 50, tint = 'default', children, style }) => {
    const getBackgroundColor = () => {
        const opacity = Math.min(intensity / 100, 0.8);
        switch (tint) {
            case 'light':
                return `rgba(255, 255, 255, ${opacity})`;
            case 'dark':
                return `rgba(0, 0, 0, ${opacity})`;
            default:
                return `rgba(128, 128, 128, ${opacity})`;
        }
    };
    const webStyle = {
        backgroundColor: getBackgroundColor(),
        backdropFilter: `blur(${intensity / 10}px)`,
        WebkitBackdropFilter: `blur(${intensity / 10}px)`,
    };
    return (<react_native_1.View style={[
            webStyle,
            style,
        ]}>
      {children}
    </react_native_1.View>);
};
exports.default = BlurWeb;