math-main-components 0.0.9 → 0.0.10

package/dist/components/Accordeon/Accordeon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AccordeonProps } from './Accordeon.types';
+export declare function Accordeon({ title, children }: AccordeonProps): React.JSX.Element;

package/dist/components/Accordeon/Accordeon.types.d.ts

@@ -0,0 +1,4 @@
+export interface AccordeonProps {
+    title?: string;
+    children?: any;
+}

package/dist/components/Accordeon/index.d.ts

@@ -0,0 +1 @@
+export * from './Accordeon';

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DialogProps } from "./Dialog.types";
+export declare function Dialog({ active, onClose, children }: DialogProps): React.JSX.Element;

package/dist/components/Dialog/Dialog.types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface DialogProps {
+    active?: boolean;
+    onClose?: (event: React.MouseEventHandler<HTMLDivElement>) => void;
+    children: any;
+}

package/dist/components/Dialog/index.d.ts

@@ -0,0 +1 @@
+export * from './Dialog';

package/dist/components/Gap/Gap.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { GapProps } from "./Gap.types";
+export declare function Gap({ size }: GapProps): React.JSX.Element;

package/dist/components/Gap/Gap.types.d.ts

@@ -0,0 +1,3 @@
+export interface GapProps {
+    size?: string;
+}

package/dist/components/Gap/index.d.ts

@@ -0,0 +1 @@
+export * from './Gap';

package/dist/components/SvgIcon/SvgIcon.d.ts

@@ -0,0 +1,4 @@
+import "external-svg-loader";
+import React from 'react';
+import { SvgIconProps } from "./SvgIcon.types";
+export declare function SvgIcon({ iconName, size, className, onClick }: SvgIconProps): React.JSX.Element;

package/dist/components/SvgIcon/SvgIcon.types.d.ts

@@ -0,0 +1,8 @@
+import { MouseEventHandler } from "react";
+export interface SvgIconProps {
+    iconName?: string;
+    size?: string;
+    fill?: string;
+    className?: string;
+    onClick?: MouseEventHandler<HTMLSpanElement>;
+}

package/dist/components/SvgIcon/index.d.ts

@@ -0,0 +1 @@
+export * from './SvgIcon';

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export { Accordeon } from './Accordeon';
+export { Dialog } from './Dialog';
+export { Gap } from './Gap';
+export { SvgIcon } from './SvgIcon';

package/dist/index.cjs.js

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('external-svg-loader');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function SvgIcon({ iconName, size = "24px", className = "", onClick }) {
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("span", { onClick: onClick, className: `material-symbols-outlined ${className}`, style: { fontSize: size } }, iconName),
+        "Lib"));
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = ".styles-module_container__3IVfB {\n  margin-top: 40px;\n  background: white;\n  border-radius: 30px;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px 20px;\n  color: grey;\n  background: #F1F1F1;\n  border-radius: 30px;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  transition: 0.2s ease-in-out;\n  gap: 10px;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb span {\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb h3 {\n  margin: 0;\n  font-weight: 400;\n  font-size: 16px;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb:hover {\n  background: #e2e2e2;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R {\n  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_head__xFYQb span {\n  rotate: 180deg;\n}\n.styles-module_container__3IVfB .styles-module_content__XAf02 {\n  transition: all 0.3s ease-in-out;\n  line-height: 1.5;\n}\n.styles-module_container__3IVfB.styles-module_not_active__JcVLz .styles-module_content__XAf02 {\n  height: 0;\n  max-height: 0;\n  overflow: hidden;\n  opacity: 0;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_content__XAf02 {\n  max-height: auto;\n  overflow: visible;\n  opacity: 1;\n  padding: 10px 0px;\n}";
+var styles$1 = {"container":"styles-module_container__3IVfB","head":"styles-module_head__xFYQb","active":"styles-module_active__soD8R","content":"styles-module_content__XAf02","not_active":"styles-module_not_active__JcVLz"};
+styleInject(css_248z$1);
+
+function Accordeon({ title, children }) {
+    const [isActive, setActive] = React.useState(false);
+    return (React__default["default"].createElement("div", { className: [styles$1.container, isActive ? styles$1.active : styles$1.not_active].join(" ") },
+        React__default["default"].createElement("div", { className: styles$1.head, onClick: () => setActive(!isActive) },
+            React__default["default"].createElement(SvgIcon, { iconName: "expand_more" }),
+            React__default["default"].createElement("h3", null, title)),
+        React__default["default"].createElement("div", { className: styles$1.content }, children)));
+}
+
+var css_248z = ".styles-module_container__9-1MH {\n  position: fixed;\n  height: 100vh;\n  width: 100vw;\n  background: rgba(255, 255, 255, 0.659);\n  backdrop-filter: blur(10px) brightness(70%);\n  left: 0;\n  top: 0;\n  z-index: 10000;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.styles-module_container__9-1MH.styles-module_active__AXoyo {\n  opacity: 1;\n}\n.styles-module_container__9-1MH.styles-module_disabled__sELpy {\n  pointer-events: none;\n  opacity: 0;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M {\n  background: white;\n  border-radius: 20px;\n  padding: 20px;\n  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n  cursor: auto;\n}";
+var styles = {"container":"styles-module_container__9-1MH","active":"styles-module_active__AXoyo","disabled":"styles-module_disabled__sELpy","dialog_window":"styles-module_dialog_window__0Bn2M"};
+styleInject(css_248z);
+
+function Dialog({ active = false, onClose = (event) => { }, children = null }) {
+    function onClick(event) {
+        if (event.target.id == 'dialog-backdrop') {
+            onClose(event);
+        }
+    }
+    return (React__default["default"].createElement("div", { id: "dialog-backdrop", className: `${styles.container} ${active ? styles.active : styles.disabled}`, onClick: onClick },
+        React__default["default"].createElement("div", { className: styles.dialog_window }, children)));
+}
+
+function Gap({ size }) {
+    return (React__default["default"].createElement("div", { style: { height: size } }));
+}
+
+exports.Accordeon = Accordeon;
+exports.Dialog = Dialog;
+exports.Gap = Gap;
+exports.SvgIcon = SvgIcon;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { Accordeon, Dialog, Gap, SvgIcon } from './components';

package/dist/index.esm.js

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import 'external-svg-loader';
+
+function SvgIcon({ iconName, size = "24px", className = "", onClick }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { onClick: onClick, className: `material-symbols-outlined ${className}`, style: { fontSize: size } }, iconName),
+        "Lib"));
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = ".styles-module_container__3IVfB {\n  margin-top: 40px;\n  background: white;\n  border-radius: 30px;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px 20px;\n  color: grey;\n  background: #F1F1F1;\n  border-radius: 30px;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  transition: 0.2s ease-in-out;\n  gap: 10px;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb span {\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb h3 {\n  margin: 0;\n  font-weight: 400;\n  font-size: 16px;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb:hover {\n  background: #e2e2e2;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R {\n  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_head__xFYQb span {\n  rotate: 180deg;\n}\n.styles-module_container__3IVfB .styles-module_content__XAf02 {\n  transition: all 0.3s ease-in-out;\n  line-height: 1.5;\n}\n.styles-module_container__3IVfB.styles-module_not_active__JcVLz .styles-module_content__XAf02 {\n  height: 0;\n  max-height: 0;\n  overflow: hidden;\n  opacity: 0;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_content__XAf02 {\n  max-height: auto;\n  overflow: visible;\n  opacity: 1;\n  padding: 10px 0px;\n}";
+var styles$1 = {"container":"styles-module_container__3IVfB","head":"styles-module_head__xFYQb","active":"styles-module_active__soD8R","content":"styles-module_content__XAf02","not_active":"styles-module_not_active__JcVLz"};
+styleInject(css_248z$1);
+
+function Accordeon({ title, children }) {
+    const [isActive, setActive] = useState(false);
+    return (React.createElement("div", { className: [styles$1.container, isActive ? styles$1.active : styles$1.not_active].join(" ") },
+        React.createElement("div", { className: styles$1.head, onClick: () => setActive(!isActive) },
+            React.createElement(SvgIcon, { iconName: "expand_more" }),
+            React.createElement("h3", null, title)),
+        React.createElement("div", { className: styles$1.content }, children)));
+}
+
+var css_248z = ".styles-module_container__9-1MH {\n  position: fixed;\n  height: 100vh;\n  width: 100vw;\n  background: rgba(255, 255, 255, 0.659);\n  backdrop-filter: blur(10px) brightness(70%);\n  left: 0;\n  top: 0;\n  z-index: 10000;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.styles-module_container__9-1MH.styles-module_active__AXoyo {\n  opacity: 1;\n}\n.styles-module_container__9-1MH.styles-module_disabled__sELpy {\n  pointer-events: none;\n  opacity: 0;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M {\n  background: white;\n  border-radius: 20px;\n  padding: 20px;\n  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n  cursor: auto;\n}";
+var styles = {"container":"styles-module_container__9-1MH","active":"styles-module_active__AXoyo","disabled":"styles-module_disabled__sELpy","dialog_window":"styles-module_dialog_window__0Bn2M"};
+styleInject(css_248z);
+
+function Dialog({ active = false, onClose = (event) => { }, children = null }) {
+    function onClick(event) {
+        if (event.target.id == 'dialog-backdrop') {
+            onClose(event);
+        }
+    }
+    return (React.createElement("div", { id: "dialog-backdrop", className: `${styles.container} ${active ? styles.active : styles.disabled}`, onClick: onClick },
+        React.createElement("div", { className: styles.dialog_window }, children)));
+}
+
+function Gap({ size }) {
+    return (React.createElement("div", { style: { height: size } }));
+}
+
+export { Accordeon, Dialog, Gap, SvgIcon };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "math-main-components",
-    "version": "0.0.9",
+    "version": "0.0.10",
     "author": "Emilian Scheel",
     "files": [
         "dist/**/*"
@@ -10,22 +10,24 @@
     "types": "dist/index.d.ts",
     "license": "MIT",
     "devDependencies": {
+        "@babel/core": "^7.22.20",
         "@rollup/plugin-commonjs": "^22.0.1",
         "@rollup/plugin-node-resolve": "^13.3.0",
         "@rollup/plugin-typescript": "^8.3.4",
         "@types/react": "^18.0.15",
         "@types/react-dom": "^18.0.6",
         "autoprefixer": "^10.4.7",
+        "babel": "^6.23.0",
+        "babel-loader": "^9.1.3",
         "postcss": "^8.4.14",
         "postcss-modules": "^4.3.1",
-        "postcss-preset-env": "^7.6.0",
         "rollup": "^2.77.2",
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "rollup-plugin-postcss": "^4.0.2",
         "sass": "^1.51.0",
         "string-hash": "^1.1.3",
-        "typescript": "^4.7.4",
-        "typescript-plugin-css-modules": "^3.4.0"
+        "typescript": "^5.2.2",
+        "typescript-plugin-css-modules": "^5.0.1"
     },
     "peerDependencies": {
         "react": "^17.0.2",
@@ -33,8 +35,9 @@
     },
     "scripts": {
         "clean": "rm -rf dist",
-        "build": "npm run build:js && build:types",
+        "build": "npm run build:js && npm run build:types",
         "build:js": "rollup -c",
         "build:types": "tsc --emitDeclarationOnly --outDir dist"
-    }
+    },
+    "dependencies": {}
 }