@joza/joza-ui-kit 0.1.0 → 0.1.1

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["joza-ui-kit"] = {}, global.React, global.styled));
-})(this, (function (exports, require$$0, styled) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('react')) :
+  typeof define === 'function' && define.amd ? define(['react'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React));
+})(this, (function (require$$0) { 'use strict';
 
   var jsxRuntime = {exports: {}};
 
@@ -1365,341 +1365,7 @@
   	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' && styled.css `
-        padding: 6px 12px;
-        font-size: 12px;
-    `}
-
-    ${props => props.size === 'm' && styled.css `
-        padding: 10px 20px;
-        font-size: 14px;
-    `}
-
-    ${props => props.size === 'l' && styled.css `
-        padding: 14px 28px;
-        font-size: 16px;
-    `}
-
-    ${props => props.variant === 'primary' && styled.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' && styled.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' && styled.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' && styled.css `
-        min-width: 180px;
-        max-width: 60vw;
-        font-size: 0.9rem;
-    `}
-    
-    ${props => props.size === 'm' && styled.css `
-        min-width: 280px;
-        max-width: 90vw;
-        font-size: 1rem;
-    `}
-    
-    ${props => props.size === 'l' && styled.css `
-        min-width: 380px;
-        max-width: 100vw;
-        font-size: 1.15rem;
-    `}
-
-    ${props => props.position === 'top-left' && styled.css `top: 0; left: 0;`}
-    ${props => props.position === 'top-center' && styled.css `top: 0; left: 50%; transform: translateX(-50%);`}
-    ${props => props.position === 'top-right' && styled.css `top: 0; right: 0;`}
-    ${props => props.position === 'bottom-left' && styled.css `bottom: 0; left: 0;`}
-    ${props => props.position === 'bottom-center' && styled.css `bottom: 0; left: 50%; transform: translateX(-50%);`}
-    ${props => props.position === 'bottom-right' && styled.css `bottom: 0; right: 0;`}
-
-    ${props => props.type === 'info' && styled.css `
-        background: #e3f2fd;
-        border-left: 6px solid #2196f3;
-        color: #0d47a1;
-    `}
-    
-    ${props => props.type === 'success' && styled.css `
-        background: #e8f5e9;
-        border-left: 6px solid #4caf50;
-        color: #1b5e20;
-    `}
-    
-    ${props => props.type === 'warning' && styled.css `
-        background: #fff3e0;
-        border-left: 6px solid #ff9800;
-        color: #e65100;
-    `}
-    
-    ${props => props.type === 'error' && styled.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 }) => {
-      require$$0.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' && styled.css `
-        width: 200px;
-        font-size: 0.875rem;
-    `}
-
-    ${props => props.size === 'm' && styled.css `
-        width: 300px;
-        font-size: 1rem;
-    `}
-
-    ${props => props.size === 'l' && styled.css `
-        width: 400px;
-        font-size: 1.25rem;
-    `}
-
-    ${props => props.hover && styled.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] = require$$0.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] = require$$0.useState(isOpen);
-      require$$0.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 })] }) }));
-  };
-
-  exports.Alert = Alert;
-  exports.Button = Button;
-  exports.Card = Card;
-  exports.HamburgerMenu = HamburgerMenu;
-  exports.Popin = Popin;
+  requireJsxRuntime();
 
 }));
 //# sourceMappingURL=joza-ui-kit.umd.js.map