@atomazing-org/design-system 1.0.5 → 1.0.7

package/build/components/ErrorBoundary.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-import type { ErrorInfo } from "react";
-interface ErrorBoundaryProps {
-    children: React.ReactNode;
-}
-interface ErrorBoundaryState {
-    hasError: boolean;
-    error?: Error;
-}
-/**
- * ErrorBoundary component that catches and displays errors.
- */
-declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
-    constructor(props: ErrorBoundaryProps);
-    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
-    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    handleClearData(): void;
-    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-}
-export default ErrorBoundary;

package/build/components/ErrorBoundary.js

@@ -1,75 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import styled from "@emotion/styled";
-import { ErrorOutlineRounded } from "@mui/icons-material";
-import { Box, Button } from "@mui/material";
-/**
- * ErrorBoundary component that catches and displays errors.
- */
-class ErrorBoundary extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            hasError: false,
-        };
-    }
-    static getDerivedStateFromError(error) {
-        return {
-            hasError: true,
-            error,
-        };
-    }
-    componentDidCatch(error, errorInfo) {
-        // eslint-disable-next-line no-console -- Выводим ошибку в консоль
-        console.error("Error:", error);
-        // eslint-disable-next-line no-console -- Выводим ошибку в консоль
-        console.error("Error Info:", errorInfo);
-    }
-    handleClearData() {
-        localStorage.clear();
-        sessionStorage.clear();
-        window.location.reload();
-    }
-    render() {
-        const { state, props } = this;
-        if (state.hasError) {
-            return (_jsxs(Container, { children: [_jsx(ErrorHeader, { children: _jsx(Box, { children: "\u041E\u0448\u0438\u0431\u043A\u0430.\u00A0" }) }), _jsxs("h3", { children: [_jsxs(Box, { style: { color: "#ff3131", display: "inline-block" }, children: [_jsx(ErrorOutlineRounded, { sx: { verticalAlign: "middle", mb: "4px" } }), " ", "ERROR:"] }), " ", _jsxs(Box, { translate: "no", children: ["[", state.error?.name, "] ", state.error?.message] }), _jsxs(Box, { style: { color: "#ff3131", display: "inline-block" }, children: [_jsx(ErrorOutlineRounded, { sx: { verticalAlign: "middle", mb: "4px" } }), " ", "Stack:"] }), " ", _jsxs(Box, { translate: "no", children: ["[", state.error?.stack, "]"] })] })] }));
-        }
-        return props.children;
-    }
-}
-const Container = styled.div `
-  margin: 0 8vw;
-  @media (max-width: 768px) {
-    margin: 0;
-  }
-`;
-const ErrorHeader = styled.h1 `
-  margin-top: 32px;
-  margin-bottom: 32px;
-  font-size: 36px;
-  color: #ff3131;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  @media (max-width: 768px) {
-    text-align: left;
-    justify-content: left;
-    font-size: 30px;
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-`;
-const StyledButton = styled(Button) `
-  padding: 10px 30px;
-  border-radius: 12px;
-  @media (max-width: 768px) {
-    width: 100%;
-  }
-`;
-StyledButton.defaultProps = {
-    variant: "outlined",
-    size: "large",
-};
-export default ErrorBoundary;

package/build/components/Loading.d.ts

@@ -1 +0,0 @@
-export declare const Loading: () => import("react/jsx-runtime").JSX.Element;

package/build/components/Loading.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import styled from '@emotion/styled';
-import { Box, CircularProgress } from '@mui/material';
-export const Loading = () => {
-    const [showLoading, setShowLoading] = useState(false);
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            setShowLoading(true);
-        }, 100); // Show the loading spinner after 100 milliseconds
-        return () => clearTimeout(timer);
-    }, []);
-    return (_jsx(Container, { children: showLoading && (_jsxs(_Fragment, { children: [_jsx(CircularProgress, { "aria-label": "loading", size: 80, thickness: 4 }), _jsx("h3", { style: { opacity: 0.8 }, children: "Loading Page..." })] })) }));
-};
-const Container = styled(Box) `
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-direction: column;
-	text-align: center;
-	gap: 8px;
-`;

package/build/components/PathName.d.ts

@@ -1,4 +0,0 @@
-export declare const PathName: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/build/components/PathName.js

@@ -1,8 +0,0 @@
-import styled from "@emotion/styled";
-export const PathName = styled.code `
-  background: #000000c8;
-  color: white;
-  font-family: consolas !important;
-  padding: 4px 6px;
-  border-radius: 8px;
-`;

package/build/components/index.d.ts

@@ -1,3 +0,0 @@
-export { DialogBtn } from "./DialogBtn";
-export { Loading } from "./Loading";
-export { PathName } from "./PathName";

package/build/components/index.js

@@ -1,3 +0,0 @@
-export { DialogBtn } from "./DialogBtn";
-export { Loading } from "./Loading";
-export { PathName } from "./PathName";

package/build/styles/commonComponents.d.ts

@@ -1,2 +0,0 @@
-import { Theme } from "@mui/material";
-export declare const commonComponentProps: Theme["components"];

package/build/styles/commonComponents.js

@@ -1,69 +0,0 @@
-export const commonComponentProps = {
-    MuiTooltip: {
-        defaultProps: {
-            disableInteractive: true,
-            style: {
-                backdropFilter: "blur(6px)",
-                WebkitBackdropFilter: "blur(6px)",
-            },
-        },
-    },
-    MuiButton: {
-        defaultProps: {
-            sx: {
-                p: "12px 24px",
-                borderRadius: "14px",
-            },
-        },
-    },
-    MuiSelect: {
-        defaultProps: {
-            style: {
-                borderRadius: "18px",
-            },
-        },
-    },
-    MuiDialog: {
-        defaultProps: {
-            PaperProps: {
-                style: {
-                    padding: "12px",
-                    borderRadius: "24px",
-                },
-            },
-        },
-    },
-    MuiAvatar: {
-        defaultProps: {
-            style: {
-                fontWeight: 500,
-                color: "#fff",
-            },
-        },
-    },
-    MuiAlert: {
-        styleOverrides: {
-            root: {
-                borderRadius: "16px",
-            },
-        },
-    },
-    MuiTextField: {
-        styleOverrides: {
-            root: {
-                "& .MuiInputBase-root": {
-                    borderRadius: "16px",
-                },
-            },
-        },
-    },
-    MuiMenuItem: {
-        styleOverrides: {
-            root: {
-                "& .MuiInputBase-root": {
-                    borderRadius: "16px",
-                },
-            },
-        },
-    },
-};

package/build/styles/index.d.ts

@@ -1,3 +0,0 @@
-export { fadeIn, fadeInLeft, pulseAnimation, ring, rotate, rotateSlideBarIcons, scale, slideIn, slideInBottom, zoomIn, } from "./keyframes";
-export { typographyProps, typographyVariants } from "./typography";
-export { commonComponentProps } from "./commonComponents";

package/build/styles/index.js

@@ -1,3 +0,0 @@
-export { fadeIn, fadeInLeft, pulseAnimation, ring, rotate, rotateSlideBarIcons, scale, slideIn, slideInBottom, zoomIn, } from "./keyframes";
-export { typographyProps, typographyVariants } from "./typography";
-export { commonComponentProps } from "./commonComponents";

package/build/styles/keyframes.d.ts

@@ -1,10 +0,0 @@
-export declare const fadeInLeft: string;
-export declare const fadeIn: string;
-export declare const zoomIn: string;
-export declare const slideIn: string;
-export declare const slideInBottom: string;
-export declare const scale: string;
-export declare const pulseAnimation: (clr: string, shadowBlur?: number) => string;
-export declare const rotateSlideBarIcons: string;
-export declare const rotate: (angle: string) => string;
-export declare const ring: string;

package/build/styles/keyframes.js

@@ -1,108 +0,0 @@
-import { keyframes } from "@emotion/css";
-export const fadeInLeft = keyframes `
-    from {
-        opacity: 0;
-        transform: translateX(-40px)
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0px)
-    }
-`;
-export const fadeIn = keyframes `
-    from {
-        opacity: 0;
-    }
-`;
-export const zoomIn = keyframes `
-    0% {
-        scale: 1;
-    }
-    50% {
-        scale: 1.2;
-    }
-		100% {
-        scale: 1;
-    }
-`;
-export const slideIn = keyframes `
-    from{
-        transform: translateX(-100%);
-    }
-    to {
-        transform: translateX(0);
-    }
-`;
-export const slideInBottom = keyframes `
-  from{
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-`;
-export const scale = keyframes `
-    from {
-        transform: scale(0)
-    }
-    to {
-        transform: scale(1)
-    }
-`;
-export const pulseAnimation = (clr, shadowBlur = 12) => keyframes `
-0% {
-  transform: scale(0.95);
-  box-shadow: 0 0 0 0 ${clr}b2;
-}
-70% {
-  transform: scale(1);
-  box-shadow: 0 0 0 ${shadowBlur}px ${clr}00;
-}
-100% {
-  transform: scale(0.95);
-  box-shadow: 0 0 0 0 ${clr}00;
-}
-`;
-export const rotateSlideBarIcons = keyframes `
-    0% {
-        transform: scale(1) rotate(0deg);
-    }
-    50% {
-        transform: scale(0.5) rotate(90deg);
-    }
-    100% {
-        transform: scale(1) rotate(360deg);
-    }`;
-export const rotate = (angle) => keyframes `
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(${angle});
-    }`;
-export const ring = keyframes `
-  0% { -webkit-transform: rotateZ(0); }
-  1% { -webkit-transform: rotateZ(30deg); }
-  3% { -webkit-transform: rotateZ(-28deg); }
-  5% { -webkit-transform: rotateZ(34deg); }
-  7% { -webkit-transform: rotateZ(-32deg); }
-  9% { -webkit-transform: rotateZ(30deg); }
-  11% { -webkit-transform: rotateZ(-28deg); }
-  13% { -webkit-transform: rotateZ(26deg); }
-  15% { -webkit-transform: rotateZ(-24deg); }
-  17% { -webkit-transform: rotateZ(22deg); }
-  19% { -webkit-transform: rotateZ(-20deg); }
-  21% { -webkit-transform: rotateZ(18deg); }
-  23% { -webkit-transform: rotateZ(-16deg); }
-  25% { -webkit-transform: rotateZ(14deg); }
-  27% { -webkit-transform: rotateZ(-12deg); }
-  29% { -webkit-transform: rotateZ(10deg); }
-  31% { -webkit-transform: rotateZ(-8deg); }
-  33% { -webkit-transform: rotateZ(6deg); }
-  35% { -webkit-transform: rotateZ(-4deg); }
-  37% { -webkit-transform: rotateZ(2deg); }
-  39% { -webkit-transform: rotateZ(-1deg); }
-  41% { -webkit-transform: rotateZ(1deg); }
-  43% { -webkit-transform: rotateZ(0); }
-  100% { -webkit-transform: rotateZ(0); }
-`;

package/build/styles/typography.d.ts

@@ -1,4 +0,0 @@
-import type { Theme } from "@mui/material";
-import { TypographyOptions } from "@mui/material/styles/createTypography";
-export declare const typographyProps: Theme["components"];
-export declare const typographyVariants: TypographyOptions;

package/build/styles/typography.js

@@ -1,160 +0,0 @@
-export const typographyProps = {
-    MuiTypography: {
-        defaultProps: {
-            variantMapping: {
-                text_xl_regular: "p",
-                text_lg_regular: "p",
-                text_md_regular: "p",
-                text_sm_regular: "p",
-                text_xs_regular: "p",
-                text_2xs_regular: "p",
-                text_xl_bold: "p",
-                text_lg_bold: "p",
-                text_md_bold: "p",
-                text_sm_bold: "p",
-                text_xs_bold: "p",
-                text_2xs_bold: "p",
-                text_xl_semibold: "p",
-                text_lg_semibold: "p",
-                text_md_semibold: "p",
-                text_sm_semibold: "p",
-                text_xs_semibold: "p",
-                text_2xs_semibold: "p",
-                text_xl_thin: "p",
-                text_lg_thin: "p",
-                text_md_thin: "p",
-                text_sm_thin: "p",
-                text_xs_thin: "p",
-                text_2xs_thin: "p",
-                display_2xl_regular: "h1",
-                display_xl_regular: "h2",
-                display_lg_regular: "h3",
-                display_md_regular: "h4",
-                display_sm_regular: "h5",
-                display_xs_regular: "h6",
-                display_2xl_bold: "h1",
-                display_xl_bold: "h2",
-                display_lg_bold: "h3",
-                display_md_bold: "h4",
-                display_sm_bold: "h5",
-                display_xs_bold: "h6",
-            },
-        },
-    },
-};
-export const typographyVariants = {
-    // TEXT_REGULAR
-    text_xl_regular: {
-        font: "400 20px/30px inherit inherit",
-    },
-    text_lg_regular: {
-        font: "400 18px/28px inherit inherit",
-    },
-    text_md_regular: {
-        font: "400 16px/24px inherit inherit",
-    },
-    text_sm_regular: {
-        font: "400 14px/20px inherit inherit",
-    },
-    text_xs_regular: {
-        font: "400 12px/18px inherit inherit",
-    },
-    text_2xs_regular: {
-        font: "400 10px/14px inherit inherit",
-    },
-    // TEXT_BOLD
-    text_xl_bold: {
-        font: "600 20px/30px inherit inherit",
-    },
-    text_lg_bold: {
-        font: "700 18px/28px inherit inherit",
-    },
-    text_md_bold: {
-        font: "700 16px/24px inherit inherit",
-    },
-    text_sm_bold: {
-        font: "700 14px/20px inherit inherit",
-    },
-    text_xs_bold: {
-        font: "700 12px/18px inherit inherit",
-    },
-    text_2xs_bold: {
-        font: "700 10px/14px inherit inherit",
-    },
-    // TEXT_SEMIBOLD
-    text_xl_semibold: {
-        font: "600 20px/30px inherit inherit",
-    },
-    text_lg_semibold: {
-        font: "600 18px/28px inherit inherit",
-    },
-    text_md_semibold: {
-        font: "600 16px/24px inherit inherit",
-    },
-    text_sm_semibold: {
-        font: "600 14px/20px inherit inherit",
-    },
-    text_xs_semibold: {
-        font: "600 12px/18px inherit inherit",
-    },
-    text_2xs_semibold: {
-        font: "600 10px/14px inherit inherit",
-    },
-    // TEXT_THIN
-    text_xl_thin: {
-        font: "100 20px/30px inherit inherit",
-    },
-    text_lg_thin: {
-        font: "100 18px/28px inherit inherit",
-    },
-    text_md_thin: {
-        font: "100 16px/24px inherit inherit",
-    },
-    text_sm_thin: {
-        font: "100 14px/20px inherit inherit",
-    },
-    text_xs_thin: {
-        font: "100 12px/18px inherit inherit",
-    },
-    text_2xs_thin: {
-        font: "100 10px/14px inherit inherit",
-    },
-    // DISPLAY_REGULAR
-    display_2xl_regular: {
-        font: "400 72px/90px inherit inherit",
-    },
-    display_xl_regular: {
-        font: "400 60px/72px inherit inherit",
-    },
-    display_lg_regular: {
-        font: "400 48px/60px inherit inherit",
-    },
-    display_md_regular: {
-        font: "400 36px/44px inherit inherit",
-    },
-    display_sm_regular: {
-        font: "400 30px/38px inherit inherit",
-    },
-    display_xs_regular: {
-        font: "400 24px/32px inherit inherit",
-    },
-    // DISPLAY_BOLD
-    display_2xl_bold: {
-        font: "700 72px/90px inherit inherit",
-    },
-    display_xl_bold: {
-        font: "700 60px/72px inherit inherit",
-    },
-    display_lg_bold: {
-        font: "700 48px/60px inherit inherit",
-    },
-    display_md_bold: {
-        font: "700 36px/44px inherit inherit",
-    },
-    display_sm_bold: {
-        font: "700 30px/38px inherit inherit",
-    },
-    display_xs_bold: {
-        font: "700 24px/32px inherit inherit",
-    },
-};

package/build/utils/displayGreeting.d.ts

@@ -1,5 +0,0 @@
-/**
- * Returns a greeting based on the current time.
- * @returns {string} The appropriate greeting.
- */
-export declare const displayGreeting: () => string;

package/build/utils/displayGreeting.js

@@ -1,19 +0,0 @@
-/**
- * Returns a greeting based on the current time.
- * @returns {string} The appropriate greeting.
- */
-export const displayGreeting = () => {
-    const currentTime = new Date();
-    const currentHour = currentTime.getHours();
-    let greeting;
-    if (currentHour < 12 && currentHour >= 5) {
-        greeting = 'Доброе утро,';
-    }
-    else if (currentHour < 18 && currentHour > 12) {
-        greeting = 'Добрый день,';
-    }
-    else {
-        greeting = 'Добрый вечер,';
-    }
-    return greeting;
-};

package/build/utils/getDayIdentifier.d.ts

@@ -1,4 +0,0 @@
-/**
- * Function to extract year, month, and day from a Date object
- */
-export declare const getDayIdentifier: (date: Date) => string;

package/build/utils/getDayIdentifier.js

@@ -1,9 +0,0 @@
-/**
- * Function to extract year, month, and day from a Date object
- */
-export const getDayIdentifier = (date) => {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are zero-based in JavaScript
-    const day = String(date.getDate()).padStart(2, "0");
-    return `${year}-${month}-${day}`;
-};

package/build/utils/getSystemInfo.d.ts

@@ -1,7 +0,0 @@
-type OperatingSystem = "Windows" | "macOS" | "Linux" | "iOS" | "Android" | "Unknown";
-type Browser = "Chrome" | "Firefox" | "Safari" | "Edge" | "Unknown";
-export declare const systemInfo: {
-    os: OperatingSystem;
-    browser: Browser;
-};
-export {};

package/build/utils/getSystemInfo.js

@@ -1,26 +0,0 @@
-const { userAgent } = window.navigator;
-const getOperatingSystem = () => {
-    if (/windows nt/i.test(userAgent))
-        return "Windows";
-    if (/iphone|ipad|ipod/i.test(userAgent))
-        return "iOS";
-    if (/mac/i.test(userAgent))
-        return "macOS";
-    if (/linux/i.test(userAgent))
-        return "Linux";
-    if (/android/i.test(userAgent))
-        return "Android";
-    return "Unknown";
-};
-const getBrowser = () => {
-    if (/chrome/i.test(userAgent) && !/edge/i.test(userAgent))
-        return "Chrome";
-    if (/firefox/i.test(userAgent))
-        return "Firefox";
-    if (/safari/i.test(userAgent) && !/chrome/i.test(userAgent))
-        return "Safari";
-    if (/edg/i.test(userAgent))
-        return "Edge";
-    return "Unknown";
-};
-export const systemInfo = { os: getOperatingSystem(), browser: getBrowser() };

package/build/utils/index.d.ts

@@ -1,5 +0,0 @@
-export { systemInfo } from "./getSystemInfo";
-export { timeAgo, timeAgoFromStart } from "./timeAgo";
-export { displayGreeting } from "./displayGreeting";
-export { getDayIdentifier } from "./getDayIdentifier";
-export { useResponsiveDisplay } from "./useResponsiveDisplay";

package/build/utils/index.js

@@ -1,5 +0,0 @@
-export { systemInfo } from "./getSystemInfo";
-export { timeAgo, timeAgoFromStart } from "./timeAgo";
-export { displayGreeting } from "./displayGreeting";
-export { getDayIdentifier } from "./getDayIdentifier";
-export { useResponsiveDisplay } from "./useResponsiveDisplay";

package/build/utils/timeAgo.d.ts

@@ -1,9 +0,0 @@
-/**
- * Converts a given date to a human-readable relative time string.
- *
- * @param {Date} date - The date to be converted.
- * @param lang
- * @returns {string} A string representing the relative time using `Intl` format (e.g., "2 days ago").
- */
-export declare const timeAgo: (date: Date, lang?: string) => string;
-export declare const timeAgoFromStart: (date: Date, lang?: string) => string;