@joza/joza-ui-kit 0.1.0 → 0.1.2

package/dist/joza-ui-kit.es.js

@@ -1,5 +1,4 @@
-import require$$0, { useEffect, useState } from 'react';
-import styled, { css } from 'styled-components';
+import require$$0 from 'react';
 
 var jsxRuntime = {exports: {}};
 
@@ -1362,335 +1361,5 @@ function requireJsxRuntime () {
 	return jsxRuntime.exports;
 }
 
-var jsxRuntimeExports = requireJsxRuntime();
-
-const applySx = (props) => {
-    if (!props.sx)
-        return '';
-    return Object.entries(props.sx).map(([property, value]) => {
-        return `${property}: ${value};`;
-    }).join('\n');
-};
-
-const StyledButton = styled.button `
-    border: none;
-    border-radius: 12px;
-    cursor: pointer;
-    font-weight: bold;
-    transition: background-color 0.3s, box-shadow 0.3s;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    font-family: ${props => props.fontFamily || 'Arial, sans-serif'};
-
-    ${props => props.size === 's' && css `
-        padding: 6px 12px;
-        font-size: 12px;
-    `}
-
-    ${props => props.size === 'm' && css `
-        padding: 10px 20px;
-        font-size: 14px;
-    `}
-
-    ${props => props.size === 'l' && css `
-        padding: 14px 28px;
-        font-size: 16px;
-    `}
-
-    ${props => props.variant === 'primary' && css `
-        background-color: #007bff;
-        color: #ffffff;
-        &:hover {
-            background-color: #0056b3;
-            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
-        }
-    `}
-
-    ${props => props.variant === 'secondary' && css `
-        background-color: #28a745;
-        color: #ffffff;
-        &:hover {
-            background-color: #1e7e34;
-            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
-        }
-    `}
-
-    ${props => props.variant === 'tertiary' && css `
-        background-color: #dc3545;
-        color: #ffffff;
-        &:hover {
-            background-color: #bd2130;
-            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
-        }
-    `}
-    
-    ${applySx}
-`;
-const Button = ({ size = 'm', variant = 'primary', fontFamily = 'Arial, sans-serif', children, onClick, disabled = false, sx }) => {
-    if (disabled) {
-        return null;
-    }
-    return (jsxRuntimeExports.jsx(StyledButton, { size: size, variant: variant, fontFamily: fontFamily, onClick: onClick, sx: sx, children: children }));
-};
-
-const StyledAlertContainer = styled.div `
-    background: #fff;
-    border-radius: 8px;
-    padding: 24px 32px 24px 24px;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-    position: fixed;
-    z-index: 1000;
-    margin: 1rem;
-    
-    ${props => props.size === 's' && css `
-        min-width: 180px;
-        max-width: 60vw;
-        font-size: 0.9rem;
-    `}
-    
-    ${props => props.size === 'm' && css `
-        min-width: 280px;
-        max-width: 90vw;
-        font-size: 1rem;
-    `}
-    
-    ${props => props.size === 'l' && css `
-        min-width: 380px;
-        max-width: 100vw;
-        font-size: 1.15rem;
-    `}
-
-    ${props => props.position === 'top-left' && css `top: 0; left: 0;`}
-    ${props => props.position === 'top-center' && css `top: 0; left: 50%; transform: translateX(-50%);`}
-    ${props => props.position === 'top-right' && css `top: 0; right: 0;`}
-    ${props => props.position === 'bottom-left' && css `bottom: 0; left: 0;`}
-    ${props => props.position === 'bottom-center' && css `bottom: 0; left: 50%; transform: translateX(-50%);`}
-    ${props => props.position === 'bottom-right' && css `bottom: 0; right: 0;`}
-
-    ${props => props.type === 'info' && css `
-        background: #e3f2fd;
-        border-left: 6px solid #2196f3;
-        color: #0d47a1;
-    `}
-    
-    ${props => props.type === 'success' && css `
-        background: #e8f5e9;
-        border-left: 6px solid #4caf50;
-        color: #1b5e20;
-    `}
-    
-    ${props => props.type === 'warning' && css `
-        background: #fff3e0;
-        border-left: 6px solid #ff9800;
-        color: #e65100;
-    `}
-    
-    ${props => props.type === 'error' && css `
-        background: #ffebee;
-        border-left: 6px solid #f44336;
-        color: #b71c1c;
-    `}
-    
-    ${applySx}
-`;
-const AlertContent = styled.div `
-    margin-top: 10px;
-    word-break: break-word;
-`;
-const Alert = ({ isOpen, type = 'info', size = 'm', timeout, onClose, position = 'bottom-right', children, disabled = false, sx }) => {
-    useEffect(() => {
-        if (isOpen && timeout && onClose) {
-            const timer = setTimeout(onClose, timeout);
-            return () => clearTimeout(timer);
-        }
-    }, [isOpen, timeout, onClose]);
-    if (!isOpen || disabled)
-        return null;
-    return (jsxRuntimeExports.jsx(StyledAlertContainer, { isOpen: isOpen, type: type, size: size, position: position, role: "alert", sx: sx, children: jsxRuntimeExports.jsx(AlertContent, { children: children }) }));
-};
-
-const StyledCard = styled.div `
-    background: #fff;
-    border-radius: 12px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    padding: 20px;
-    margin: 20px auto;
-    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-    overflow: hidden;
-    max-width: 100%;
-
-    ${props => props.size === 's' && css `
-        width: 200px;
-        font-size: 0.875rem;
-    `}
-
-    ${props => props.size === 'm' && css `
-        width: 300px;
-        font-size: 1rem;
-    `}
-
-    ${props => props.size === 'l' && css `
-        width: 400px;
-        font-size: 1.25rem;
-    `}
-
-    ${props => props.hover && css `
-        &:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
-        }
-    `}
-    
-    ${applySx}
-`;
-const CardContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    min-width: 0;
-`;
-const CardContent = styled.div `
-    color: #333;
-    width: 100%;
-    overflow-wrap: break-word;
-    word-break: break-word;
-
-    img {
-        width: 100%;
-        height: auto;
-        object-fit: fill;
-        border-radius: 4px;
-    }
-`;
-const Card = ({ children, size = 'm', hover = false, onClick, disabled = false, sx }) => {
-    if (disabled) {
-        return null;
-    }
-    return (jsxRuntimeExports.jsx(StyledCard, { size: size, hover: hover, onClick: onClick, sx: sx, children: jsxRuntimeExports.jsx(CardContainer, { children: jsxRuntimeExports.jsx(CardContent, { children: children }) }) }));
-};
-
-const MenuOverlay = styled.div `
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 1000;
-`;
-const MenuContainer = styled.div `
-    position: fixed;
-    top: 0;
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    display: flex;
-    flex-direction: column;
-    z-index: 1001;
-    width: ${props => props.width};
-    height: ${props => props.height};
-    ${props => props.position === 'right' ? 'right: 0; left: auto;' : 'left: 0; right: auto;'}
-
-    ${applySx}
-`;
-const CloseButton$1 = styled.button `
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-`;
-const MenuContent = styled.div `
-    margin-top: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-`;
-const HamburgerButton = styled.button `
-    background: none;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    padding: 10px;
-    z-index: 1001;
-    align-items: center;
-`;
-const Line = styled.span `
-    width: 25px;
-    height: 3px;
-    background-color: black;
-    border-radius: 2px;
-`;
-const HamburgerMenu = ({ children, position = 'left', width = '30vw', height = '100vh', disabled = false, sx }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const toggleMenu = () => setIsOpen(prev => !prev);
-    const closeMenu = () => setIsOpen(false);
-    if (disabled) {
-        return null;
-    }
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(HamburgerButton, { onClick: toggleMenu, children: [jsxRuntimeExports.jsx(Line, {}), jsxRuntimeExports.jsx(Line, {}), jsxRuntimeExports.jsx(Line, {})] }), isOpen && (jsxRuntimeExports.jsx(MenuOverlay, { onClick: closeMenu, children: jsxRuntimeExports.jsxs(MenuContainer, { position: position, width: width, height: height, sx: sx, onClick: e => e.stopPropagation(), children: [jsxRuntimeExports.jsx(CloseButton$1, { onClick: closeMenu, children: "\u00D7" }), jsxRuntimeExports.jsx(MenuContent, { children: children })] }) }))] }));
-};
-
-const PopinOverlay = styled.div `
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-    opacity: ${props => props.$isOpen ? 1 : 0};
-    pointer-events: ${props => props.$isOpen ? 'auto' : 'none'};
-    transition: opacity 0.3s;
-`;
-const PopinContainer = styled.div `
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px;
-    width: 90%;
-    max-width: 500px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    position: relative;
-    opacity: ${props => props.$isOpen ? 1 : 0};
-    pointer-events: ${props => props.$isOpen ? 'auto' : 'none'};
-    transition: opacity 0.3s;
-    
-    ${applySx}
-`;
-const CloseButton = styled.button `
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-`;
-const Content = styled.div `
-    margin-top: 10px;
-`;
-const Popin = ({ isOpen, onClose, children, disabled = false, sx }) => {
-    const [show, setShow] = useState(isOpen);
-    useEffect(() => {
-        if (isOpen)
-            setShow(true);
-        else {
-            const timeout = setTimeout(() => setShow(false), 300);
-            return () => clearTimeout(timeout);
-        }
-    }, [isOpen]);
-    if (!show || disabled)
-        return null;
-    return (jsxRuntimeExports.jsx(PopinOverlay, { "$isOpen": isOpen, onClick: onClose, children: jsxRuntimeExports.jsxs(PopinContainer, { "$isOpen": isOpen, sx: sx, onClick: e => e.stopPropagation(), children: [jsxRuntimeExports.jsx(CloseButton, { onClick: onClose, children: "\u00D7" }), jsxRuntimeExports.jsx(Content, { children: children })] }) }));
-};
-
-export { Alert, Button, Card, HamburgerMenu, Popin };
+requireJsxRuntime();
 //# sourceMappingURL=joza-ui-kit.es.js.map