@lovalingo/lovalingo 0.5.28 → 0.6.0

package/dist/components/LanguageSwitcher.js

@@ -1,257 +0,0 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
-import { normalizeLocaleCode, resolveLocaleFlag } from '../utils/languageFlags';
-export const LanguageSwitcher = ({ locales, currentLocale, onLocaleChange, position = 'bottom-right', offsetY = 20, theme = 'dark', branding, }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [isMobile, setIsMobile] = useState(false);
-    const containerRef = useRef(null);
-    const isRight = position.endsWith('right');
-    const isTop = position.startsWith('top');
-    const isBottom = position.startsWith('bottom');
-    const tokens = theme === 'light'
-        ? {
-            surfaceBg: 'rgba(255, 255, 255, 0.93)',
-            surfaceHoverBg: 'rgba(245, 245, 245, 0.95)',
-            text: 'rgba(13, 13, 13, 0.96)',
-            textMuted: 'rgba(13, 13, 13, 0.74)',
-            divider: 'rgba(0, 0, 0, 0.10)',
-            insetHighlight: 'inset 0 0 1px rgba(0, 0, 0, 0.10)',
-            tabShadowRight: '-2px 0 8px rgba(0, 0, 0, 0.12), inset 0 0 1px rgba(0, 0, 0, 0.10)',
-            tabShadowLeft: '2px 0 8px rgba(0, 0, 0, 0.12), inset 0 0 1px rgba(0, 0, 0, 0.10)',
-            tabHoverShadowRight: '-4px 0 16px rgba(0, 0, 0, 0.16), inset 0 0 1px rgba(0, 0, 0, 0.12)',
-            tabHoverShadowLeft: '4px 0 16px rgba(0, 0, 0, 0.16), inset 0 0 1px rgba(0, 0, 0, 0.12)',
-            panelShadow: '0 8px 24px rgba(0, 0, 0, 0.14), inset 0 0 1px rgba(0, 0, 0, 0.10)',
-        }
-        : {
-            surfaceBg: 'rgba(26, 26, 26, 0.93)',
-            surfaceHoverBg: 'rgba(35, 35, 35, 0.95)',
-            text: 'rgba(255, 255, 255, 0.98)',
-            textMuted: 'rgba(255, 255, 255, 0.82)',
-            divider: 'rgba(255, 255, 255, 0.12)',
-            insetHighlight: 'inset 0 0 1px rgba(255, 255, 255, 0.10)',
-            tabShadowRight: '-2px 0 8px rgba(0, 0, 0, 0.2), inset 0 0 1px rgba(255, 255, 255, 0.10)',
-            tabShadowLeft: '2px 0 8px rgba(0, 0, 0, 0.2), inset 0 0 1px rgba(255, 255, 255, 0.10)',
-            tabHoverShadowRight: '-4px 0 16px rgba(0, 0, 0, 0.3), inset 0 0 1px rgba(255, 255, 255, 0.15)',
-            tabHoverShadowLeft: '4px 0 16px rgba(0, 0, 0, 0.3), inset 0 0 1px rgba(255, 255, 255, 0.15)',
-            panelShadow: '0 8px 24px rgba(0, 0, 0, 0.3), inset 0 0 1px rgba(255, 255, 255, 0.10)',
-        };
-    // Why: normalize locale codes for comparisons so variants like "tr_TR" and "tr-TR" are treated consistently.
-    const normalizedCurrentLocale = useMemo(() => normalizeLocaleCode(currentLocale), [currentLocale]);
-    // Why: keep active locale first while preserving caller order for the remaining locales.
-    const orderedLocales = useMemo(() => {
-        const seen = new Set();
-        const items = [];
-        const pushLocale = (value) => {
-            const raw = typeof value === 'string' ? value.trim() : '';
-            const normalized = normalizeLocaleCode(raw);
-            if (!raw || !normalized || seen.has(normalized))
-                return;
-            seen.add(normalized);
-            items.push({ raw, normalized });
-        };
-        if (normalizedCurrentLocale) {
-            pushLocale(currentLocale);
-        }
-        for (const locale of locales) {
-            const raw = typeof locale === 'string' ? locale.trim() : '';
-            const normalized = normalizeLocaleCode(raw);
-            if (!normalized || normalized === normalizedCurrentLocale)
-                continue;
-            pushLocale(raw);
-        }
-        if (items.length === 0) {
-            for (const locale of locales)
-                pushLocale(locale);
-        }
-        return items;
-    }, [currentLocale, locales, normalizedCurrentLocale]);
-    const tabFlag = useMemo(() => {
-        const fallbackLocale = orderedLocales[0]?.normalized || normalizedCurrentLocale;
-        return resolveLocaleFlag(fallbackLocale);
-    }, [orderedLocales, normalizedCurrentLocale]);
-    // Close on outside click
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => document.removeEventListener('mousedown', handleClickOutside);
-        }
-    }, [isOpen]);
-    useEffect(() => {
-        if (typeof window === 'undefined')
-            return;
-        const query = '(max-width: 640px)';
-        const media = window.matchMedia(query);
-        const update = () => setIsMobile(media.matches);
-        update();
-        if (typeof media.addEventListener === 'function') {
-            media.addEventListener('change', update);
-            return () => media.removeEventListener('change', update);
-        }
-        media.addListener(update);
-        return () => media.removeListener(update);
-    }, []);
-    // Handle keyboard navigation
-    useEffect(() => {
-        const handleKeyDown = (event) => {
-            if (event.key === 'Escape' && isOpen) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener('keydown', handleKeyDown);
-            return () => document.removeEventListener('keydown', handleKeyDown);
-        }
-    }, [isOpen]);
-    const containerStyles = {
-        position: 'fixed',
-        zIndex: 9999,
-        ...(isTop && { top: `calc(env(safe-area-inset-top, 0px) + 24px + ${offsetY}px)` }),
-        ...(isBottom && { bottom: `calc(env(safe-area-inset-bottom, 0px) + 24px + ${offsetY}px)` }),
-        ...(isRight && { right: 0 }),
-        ...(!isRight && { left: 0 }),
-        pointerEvents: 'none',
-    };
-    const rootStyles = {
-        position: 'relative',
-        display: 'flex',
-        alignItems: 'center',
-        pointerEvents: 'none',
-    };
-    const tabStyles = {
-        pointerEvents: 'auto',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '44px',
-        height: '50px',
-        borderRadius: isRight ? '12px 0 0 12px' : '0 12px 12px 0',
-        background: tokens.surfaceBg,
-        boxShadow: isRight ? tokens.tabShadowRight : tokens.tabShadowLeft,
-        cursor: 'pointer',
-        fontSize: '20px',
-        transition: 'all 0.2s ease',
-        userSelect: 'none',
-        border: 'none',
-        color: tokens.text,
-    };
-    const panelStyles = {
-        position: 'absolute',
-        ...(isRight && { right: '48px' }),
-        ...(!isRight && { left: '48px' }),
-        top: '50%',
-        transform: isOpen
-            ? 'translateY(-50%) translateX(0)'
-            : `translateY(-50%) translateX(${isRight ? '12px' : '-12px'})`,
-        opacity: isOpen ? 1 : 0,
-        pointerEvents: isOpen ? 'auto' : 'none',
-        background: tokens.surfaceBg,
-        borderRadius: '16px',
-        padding: '10px 12px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '10px',
-        boxShadow: tokens.panelShadow,
-        transition: 'opacity 0.25s ease, transform 0.25s ease',
-        width: isMobile ? 'min(320px, calc(100vw - 88px))' : 'auto',
-    };
-    const localeRowStyles = {
-        display: isMobile ? 'grid' : 'flex',
-        gridTemplateColumns: isMobile ? 'repeat(5, minmax(0, 1fr))' : undefined,
-        justifyItems: isMobile ? 'center' : undefined,
-        gap: '10px',
-        padding: '0 2px',
-    };
-    const badgeRowStyles = {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-        paddingTop: '8px',
-        borderTop: `1px solid ${tokens.divider}`,
-        fontSize: '12px',
-        color: tokens.textMuted,
-        userSelect: 'none',
-        whiteSpace: 'nowrap',
-    };
-    const badgeLinkStyles = {
-        color: tokens.text,
-        textDecoration: 'none',
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: '6px',
-    };
-    const flagButtonStyles = (isActive) => ({
-        // Why: the panel stays mounted for the close animation, so buttons must be non-interactive while hidden.
-        pointerEvents: isOpen ? 'auto' : 'none',
-        width: '32px',
-        height: '32px',
-        borderRadius: '50%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontSize: '20px',
-        background: isActive ? 'rgba(59, 130, 246, 0.2)' : 'transparent',
-        border: isActive ? '2px solid rgb(59, 130, 246)' : '2px solid transparent',
-        cursor: 'pointer',
-        transition: 'transform 0.15s ease, filter 0.15s ease, background 0.15s ease',
-        flexShrink: 0,
-        userSelect: 'none',
-        padding: 0,
-    });
-    return (React.createElement("div", { ref: containerRef, style: containerStyles, "data-Lovalingo-exclude": "true" },
-        React.createElement("div", { style: rootStyles },
-            React.createElement("button", { style: tabStyles, onClick: () => setIsOpen(!isOpen), onMouseEnter: (e) => {
-                    e.currentTarget.style.background = tokens.surfaceHoverBg;
-                    e.currentTarget.style.boxShadow = isRight ? tokens.tabHoverShadowRight : tokens.tabHoverShadowLeft;
-                }, onMouseLeave: (e) => {
-                    e.currentTarget.style.background = tokens.surfaceBg;
-                    e.currentTarget.style.boxShadow = isRight ? tokens.tabShadowRight : tokens.tabShadowLeft;
-                }, "aria-label": "Open language switcher", "aria-expanded": isOpen }, tabFlag),
-            React.createElement("div", { style: panelStyles, role: "toolbar", "aria-label": "Language options" },
-                React.createElement("div", { style: localeRowStyles }, orderedLocales.map((entry) => {
-                    const isActive = entry.normalized === normalizedCurrentLocale;
-                    return (React.createElement("button", { key: entry.normalized, style: flagButtonStyles(isActive), onClick: (e) => {
-                            e.stopPropagation();
-                            if (isActive) {
-                                setIsOpen(false);
-                            }
-                            else {
-                                onLocaleChange(entry.raw);
-                                setIsOpen(false);
-                            }
-                        }, onMouseEnter: (e) => {
-                            if (!isActive) {
-                                e.currentTarget.style.filter = 'brightness(1.3)';
-                            }
-                            e.currentTarget.style.transform = 'scale(1.1)';
-                        }, onMouseLeave: (e) => {
-                            e.currentTarget.style.filter = 'brightness(1)';
-                            e.currentTarget.style.transform = 'scale(1)';
-                        }, "aria-label": `Switch to ${entry.normalized.toUpperCase()}`, title: entry.normalized.toUpperCase(), tabIndex: isOpen ? 0 : -1 }, resolveLocaleFlag(entry.normalized)));
-                })),
-                (branding?.required || branding?.enabled) && (React.createElement("div", { style: badgeRowStyles, "aria-label": "Lovalingo branding" },
-                    React.createElement("a", { href: branding.href || 'https://lovalingo.com', target: "_blank", rel: "noreferrer", style: { ...badgeLinkStyles, pointerEvents: isOpen ? 'auto' : 'none' }, tabIndex: isOpen ? 0 : -1, "aria-label": "Localized by Lovalingo", title: "Localized by Lovalingo" },
-                        React.createElement("span", { style: {
-                                width: '16px',
-                                height: '16px',
-                                borderRadius: '999px',
-                                overflow: 'hidden',
-                                background: '#DA2576',
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.25)',
-                                flexShrink: 0,
-                            } },
-                            React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 512 512", fill: "none", "aria-hidden": "true" },
-                                React.createElement("path", { d: "M256 480C379.712 480 480 379.712 480 256C480 132.288 379.712 32 256 32C132.288 32 32 132.288 32 256C32 379.712 132.288 480 256 480Z", fill: "#DA2576" }),
-                                React.createElement("path", { d: "M226.321 415.004C277.097 408.769 294.564 331.846 283.824 244.374C273.084 156.903 238.204 92.0061 187.427 98.2407C136.65 104.475 104.194 180.439 114.934 267.911C125.674 355.383 175.544 421.238 226.321 415.004Z", fill: "white", stroke: "white", strokeWidth: "10" }),
-                                React.createElement("path", { d: "M182.564 395.999C201.42 431.462 270.873 431.411 337.69 395.883C404.508 360.356 443.388 302.806 424.531 267.342C405.675 231.879 336.223 231.931 269.405 267.458C202.588 302.986 163.708 370.535 182.564 395.999Z", fill: "white", stroke: "white", strokeWidth: "10" }))),
-                        React.createElement("span", null,
-                            branding.label || 'Localized by',
-                            " ",
-                            React.createElement("strong", { "data-no-translate": true, style: { color: tokens.text } }, "Lovalingo")))))))));
-};

package/dist/components/LovalingoProvider.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { LovalingoConfig } from '../types';
-interface LovalingoProviderProps extends LovalingoConfig {
-    children: React.ReactNode;
-    sitemap?: boolean;
-    seo?: boolean;
-    navigateRef?: React.MutableRefObject<((path: string) => void) | undefined>;
-}
-export declare const LovalingoProvider: React.FC<LovalingoProviderProps>;
-export {};