@metropolle/design-system 1.0.0-beta.1 → 1.0.0-beta.2025.10.1.1541.d0d0b36

package/dist/react/index.esm.js

@@ -1,4 +1,5 @@
-import require$$0, { forwardRef } from 'react';
+import require$$0, { forwardRef, useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 
 var jsxRuntime = {exports: {}};
 
@@ -1458,13 +1459,14 @@ const Typography = forwardRef(({ variant = 'body', size, as, children, className
     return (jsxRuntimeExports.jsx(Component, { ref: ref, className: cn('mds-text', `mds-text--${variant}`, `mds-text--size-${finalSize}`, `mds-text--color-${color}`, `mds-text--weight-${weight}`, className), ...props, children: children }));
 });
 Typography.displayName = 'Typography';
-const BrandLogo = forwardRef(({ size = 'md', className, children = 'Metropolle', ...props }, ref) => {
+const BrandLogo = forwardRef(({ size = 'md', weight = 'bold', // Peso bold por padrão para a marca
+className, children = 'Metropolle', ...props }, ref) => {
     const sizeMap = {
         sm: '2xl',
         md: '4xl',
         lg: '4xl', // Same as md but with different mobile behavior
     };
-    return (jsxRuntimeExports.jsx(Typography, { ref: ref, variant: "brand", size: sizeMap[size], className: cn('mds-brand-logo', `mds-brand-logo--${size}`, className), ...props, children: children }));
+    return (jsxRuntimeExports.jsx(Typography, { ref: ref, variant: "brand", size: sizeMap[size], weight: weight, className: cn('mds-brand-logo', `mds-brand-logo--${size}`, className), ...props, children: children }));
 });
 BrandLogo.displayName = 'BrandLogo';
 
@@ -1488,5 +1490,223 @@ Button.displayName = 'Button';
  */
 const LoadingSpinner = () => (jsxRuntimeExports.jsxs("svg", { className: "mds-spinner", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [jsxRuntimeExports.jsx("circle", { className: "mds-spinner__track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", opacity: "0.25" }), jsxRuntimeExports.jsx("circle", { className: "mds-spinner__path", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeDasharray: "40 20", strokeLinecap: "round" })] }));
 
-export { BrandLogo, Button, GlassCard, Typography, cn };
+/**
+ * Select Component (Design System)
+ *
+ * Provides a themed select element with multiple variants:
+ * - `base`: Standard form select with mds-input styling
+ * - `themed`: Generic themed select with dashboard control styling (recommended)
+ * - `dashboard`: Legacy alias for themed variant (backward compatibility)
+ */
+const Select = forwardRef(({ options, children, className, containerClassName, variant = 'themed', ...rest }, ref) => {
+    const isThemed = variant === 'themed' || variant === 'dashboard';
+    const selectEl = (jsxRuntimeExports.jsx("select", { ref: ref, className: cn(isThemed
+            ? 'mds-select-themed'
+            : 'mds-input mds-select', className), ...rest, children: options
+            ? options.map(opt => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))
+            : children }));
+    if (isThemed) {
+        return (jsxRuntimeExports.jsx("div", { className: cn('mds-dropdown', containerClassName), children: selectEl }));
+    }
+    return selectEl;
+});
+Select.displayName = 'Select';
+
+function ThemeToggle({ size = 'md', className = '', disabled = false, onChange, storageKey = 'theme' }) {
+    const [theme, setTheme] = useState('dark');
+    const [mounted, setMounted] = useState(false);
+    // Initialize theme on mount
+    useEffect(() => {
+        try {
+            if (typeof window !== 'undefined') {
+                const savedTheme = localStorage.getItem(storageKey) || 'dark';
+                setTheme(savedTheme);
+                document.documentElement.setAttribute('data-theme', savedTheme);
+                setMounted(true);
+            }
+        }
+        catch (err) {
+            setTheme('dark');
+            setMounted(true);
+        }
+    }, [storageKey]);
+    // Listen to external theme changes
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const updateTheme = () => {
+                const currentTheme = document.documentElement.getAttribute('data-theme') || 'dark';
+                setTheme(currentTheme);
+            };
+            const observer = new MutationObserver(() => {
+                updateTheme();
+            });
+            observer.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['data-theme']
+            });
+            return () => observer.disconnect();
+        }
+    }, []);
+    const toggleTheme = () => {
+        if (disabled)
+            return;
+        try {
+            const newTheme = theme === 'light' ? 'dark' : 'light';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem(storageKey, newTheme);
+            setTheme(newTheme);
+            onChange?.(newTheme);
+        }
+        catch (err) {
+            console.warn('Failed to toggle theme:', err);
+        }
+    };
+    // Don't render until mounted (prevents hydration mismatch)
+    if (!mounted) {
+        return (jsxRuntimeExports.jsx("div", { className: `mds-theme-toggle mds-theme-toggle--${size} ${className}`, style: { opacity: 0.5 }, "aria-hidden": "true" }));
+    }
+    const isDark = theme === 'dark';
+    const buttonStyle = isDark
+        ? {
+            backgroundColor: 'rgba(0, 0, 0, 0.35)',
+            border: '1px solid rgba(255, 255, 255, 0.18)',
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)'
+        }
+        : undefined;
+    const buttonClasses = [
+        'mds-theme-toggle',
+        `mds-theme-toggle--${size}`,
+        className
+    ].filter(Boolean).join(' ');
+    return (jsxRuntimeExports.jsx("button", { onClick: toggleTheme, className: buttonClasses, disabled: disabled, type: "button", "aria-pressed": isDark, "aria-label": `Switch to ${isDark ? 'light' : 'dark'} mode`, title: `Switch to ${isDark ? 'light' : 'dark'} mode`, "data-theme": isDark ? 'dark' : 'light', style: buttonStyle }));
+}
+
+function Modal({ open, onClose, closeOnOverlay = true, children, className, style }) {
+    const [mounted, setMounted] = useState(false);
+    const [visible, setVisible] = useState(false);
+    const [renderPortal, setRenderPortal] = useState(false);
+    const containerRef = useRef(null);
+    useEffect(() => setMounted(true), []);
+    useEffect(() => {
+        if (!mounted)
+            return;
+        if (open) {
+            setVisible(true);
+            setRenderPortal(true);
+        }
+        else {
+            setVisible(false);
+            const t = setTimeout(() => setRenderPortal(false), 200);
+            return () => clearTimeout(t);
+        }
+    }, [open, mounted]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [open, onClose]);
+    if (!mounted || (!renderPortal && !open))
+        return null;
+    const overlayStyle = {
+        position: 'fixed',
+        inset: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1000,
+        padding: '16px',
+        opacity: visible ? 1 : 0,
+        transition: 'opacity 200ms ease'
+    };
+    const innerStyle = {
+        maxWidth: '640px',
+        width: '100%',
+        transform: visible ? 'scale(1)' : 'scale(0.98)',
+        opacity: visible ? 1 : 0,
+        transition: 'opacity 200ms ease, transform 200ms ease',
+        ...style
+    };
+    const content = (jsxRuntimeExports.jsx("div", { className: "modal-overlay mds-modal-overlay", style: overlayStyle, onClick: closeOnOverlay ? onClose : undefined, "aria-modal": "true", role: "dialog", children: jsxRuntimeExports.jsx("div", { className: className, style: innerStyle, onClick: (e) => e.stopPropagation(), ref: (el) => (containerRef.current = el), children: children }) }));
+    return createPortal(content, document.body);
+}
+
+function ModalHeader({ title, icon, onClose, closeAriaLabel = 'Fechar', align = 'center' }) {
+    const CloseIcon = (jsxRuntimeExports.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: jsxRuntimeExports.jsx("path", { d: "M18.3 5.71a1 1 0 00-1.41 0L12 10.59 7.11 5.7A1 1 0 105.7 7.11L10.59 12l-4.9 4.89a1 1 0 101.42 1.42L12 13.41l4.89 4.9a1 1 0 001.42-1.42L13.41 12l4.9-4.89a1 1 0 000-1.4z" }) }));
+    if (align === 'center') {
+        const iconBox = {
+            position: 'absolute',
+            left: 16,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            width: 32,
+            height: 32,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '1.25rem',
+            lineHeight: 0
+        };
+        const closeBox = {
+            position: 'absolute',
+            right: 16,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            width: 32,
+            height: 32,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'transparent',
+            border: 'none',
+            padding: 0,
+            cursor: 'pointer',
+            lineHeight: 0
+        };
+        return (jsxRuntimeExports.jsxs("div", { className: "mds-modal-header", style: {
+                position: 'relative',
+                padding: '16px 24px',
+                marginBottom: 16,
+                borderBottom: '1px solid var(--border-color)'
+            }, children: [icon && (jsxRuntimeExports.jsx("div", { "aria-hidden": true, style: iconBox, children: icon })), jsxRuntimeExports.jsx("div", { style: { textAlign: 'center' }, children: typeof title === 'string' ? (jsxRuntimeExports.jsx("h3", { style: { margin: 0 }, children: title })) : (title) }), onClose && (jsxRuntimeExports.jsx("button", { type: "button", "aria-label": closeAriaLabel, onClick: onClose, style: closeBox, children: CloseIcon }))] }));
+    }
+    return (jsxRuntimeExports.jsxs("div", { className: "mds-modal-header", style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 12,
+            padding: '16px 24px',
+            marginBottom: 16,
+            borderBottom: '1px solid var(--border-color)'
+        }, children: [icon && (jsxRuntimeExports.jsx("div", { "aria-hidden": true, style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 32, height: 32, fontSize: '1.25rem', lineHeight: 0 }, children: icon })), jsxRuntimeExports.jsx("div", { style: { margin: 0, fontSize: '1.125rem', fontWeight: 600, flex: 1 }, children: typeof title === 'string' ? (jsxRuntimeExports.jsx("h3", { style: { margin: 0 }, children: title })) : (title) }), onClose && (jsxRuntimeExports.jsx("button", { type: "button", "aria-label": closeAriaLabel, onClick: onClose, style: { marginLeft: 'auto', background: 'transparent', border: 'none', width: 32, height: 32, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', lineHeight: 0 }, children: CloseIcon }))] }));
+}
+
+function ModalBody({ children, style, className }) {
+    return (jsxRuntimeExports.jsx("div", { className: className, style: { padding: '16px 24px', ...style }, children: children }));
+}
+
+function ModalFooter({ children, align = 'end' }) {
+    const justify = align === 'start' ? 'flex-start' : align === 'center' ? 'center' : 'flex-end';
+    return (jsxRuntimeExports.jsx("div", { style: { display: 'flex', gap: 12, justifyContent: justify, borderTop: '1px solid var(--border-color)', padding: '16px 24px', marginTop: 8 }, children: children }));
+}
+
+const IconWarning = (jsxRuntimeExports.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: jsxRuntimeExports.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) }));
+const IconDanger = (jsxRuntimeExports.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: jsxRuntimeExports.jsx("path", { d: "M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v8h-2V7zm0 10h2v2h-2v-2z" }) }));
+const IconInfo = (jsxRuntimeExports.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: jsxRuntimeExports.jsx("path", { d: "M11 9h2V7h-2v2zm0 8h2v-6h-2v6zm1-15a10 10 0 100 20 10 10 0 000-20z" }) }));
+const IconSuccess = (jsxRuntimeExports.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: jsxRuntimeExports.jsx("path", { d: "M12 2a10 10 0 100 20 10 10 0 000-20zm-1 14l-4-4 1.41-1.41L11 12.17l4.59-4.58L17 9l-6 7z" }) }));
+const toneIcon = {
+    warning: IconWarning,
+    danger: IconDanger,
+    info: IconInfo,
+    success: IconSuccess
+};
+function ConfirmDialog({ open, onClose, title, description, confirmText = 'Confirmar', cancelText = 'Cancelar', onConfirm, loading = false, tone = 'warning', icon, disableOverlayClose }) {
+    return (jsxRuntimeExports.jsx(Modal, { open: open, onClose: onClose, closeOnOverlay: !disableOverlayClose, children: jsxRuntimeExports.jsxs("div", { className: "mds-modal-card", style: { maxWidth: 480, width: '100%' }, children: [jsxRuntimeExports.jsx(ModalHeader, { title: title, icon: icon ?? toneIcon[tone], onClose: onClose, align: "center" }), description && (jsxRuntimeExports.jsx("div", { style: { padding: '0 24px 16px 24px' }, children: description })), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: 12, justifyContent: 'flex-end', borderTop: '1px solid var(--border-color)', padding: '16px 24px', marginTop: 8 }, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: onClose, className: "mds-button mds-button--secondary", children: cancelText }), jsxRuntimeExports.jsx("button", { type: "button", onClick: onConfirm, disabled: loading, className: "mds-button mds-button--primary", children: loading ? 'Processando...' : confirmText })] })] }) }));
+}
+
+export { BrandLogo, Button, ConfirmDialog, GlassCard, Modal, ModalBody, ModalFooter, ModalHeader, Select, ThemeToggle, Typography, cn };
 //# sourceMappingURL=index.esm.js.map