math-main-components 0.0.210 → 0.0.213

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,9 +1,9 @@
-import React, { ChangeEvent, ReactNode } from 'react';
-export declare function Checkbox({ id, name, checked, defaultChecked, onInput, children }: {
+import React, { ChangeEvent, HTMLAttributes, ReactNode } from 'react';
+export declare function Checkbox({ id, name, checked, defaultChecked, onInput, children, ...props }: {
     id?: string;
     name: string;
     checked?: boolean;
     onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
     defaultChecked?: boolean;
     children: ReactNode;
-}): React.JSX.Element;
+} & HTMLAttributes<HTMLDivElement>): React.JSX.Element;

package/dist/components/Dropdown/Dropdown.stories.d.ts

@@ -3,11 +3,11 @@ import type { StoryObj } from '@storybook/react';
 import { Dropdown } from '.';
 declare const meta: {
     title: string;
-    component: <Type extends string>({ options, unit, onChange, ...props }: {
+    component: <Type extends string>({ options, unit, onInput, ...props }: {
         options: Dropdown<Type>[];
-        onChange?: ((value: Type) => void) | undefined;
+        onInput?: ((value: Type) => void) | undefined;
         unit?: string | undefined;
-    } & import("react").InputHTMLAttributes<HTMLInputElement>) => import("react").JSX.Element;
+    } & import("react").HTMLAttributes<HTMLSelectElement>) => import("react").JSX.Element;
     parameters: {
         layout: string;
     };

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

@@ -1,10 +1,10 @@
-import React, { InputHTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 export type Dropdown<Type> = {
     value: Type;
     label: string;
 };
-export declare const Dropdown: <Type extends string>({ options, unit, onChange, ...props }: {
+export declare const Dropdown: <Type extends string>({ options, unit, onInput, ...props }: {
     options: Dropdown<Type>[];
-    onChange?: ((value: Type) => void) | undefined;
+    onInput?: ((value: Type) => void) | undefined;
     unit?: string | undefined;
-} & React.InputHTMLAttributes<HTMLInputElement>) => React.JSX.Element;
+} & React.HTMLAttributes<HTMLSelectElement>) => React.JSX.Element;

package/dist/components/RadioButtons/RadioButtons.d.ts

@@ -3,10 +3,10 @@ export type RadioOption = {
     text: string;
     name: string;
 };
-export declare function RadioButtons({ options, group, selected, onClick, width }: {
+export declare function RadioButtons({ options, group, selected, onInput, width }: {
     options: RadioOption[];
     group: string;
     selected?: string;
-    onClick?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
     width?: string;
 }): React.JSX.Element;

package/dist/index.cjs.js

@@ -9471,12 +9471,12 @@ function CardButton({ id, children, iconName, onClick, ...props }) {
         React__default["default"].createElement("h2", null, children)));
 }
 
-var css_248z$u = ".styles-module_container__gCCnD {\n  margin-bottom: 20px;\n  width: 343px;\n  color: var(--foreground-3);\n}\n.styles-module_container__gCCnD [type=checkbox] {\n  position: relative;\n  left: 15px;\n  top: -4px;\n  z-index: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n  margin-left: -3.5px;\n}\n.styles-module_container__gCCnD [type=checkbox] + label {\n  position: absolute;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label::before {\n  width: 17px;\n  height: 17px;\n  border-radius: 5px;\n  border: 2px solid var(--border-2);\n  display: block;\n  content: \"\";\n  float: left;\n  margin-right: 8px;\n  z-index: 5;\n  position: relative;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__gCCnD [type=checkbox] ~ span {\n  position: absolute;\n  opacity: 1;\n  color: var(--background-2);\n  z-index: 100;\n  user-select: none;\n  pointer-events: none;\n  -webkit-user-select: none;\n  font-weight: 500;\n}\n.styles-module_container__gCCnD [type=checkbox]:checked + label::before {\n  background-color: var(--primary-1);\n  border-color: var(--primary-1);\n}\n.styles-module_container__gCCnD [type=checkbox]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--background-2);\n}";
+var css_248z$u = ".styles-module_container__gCCnD {\n  margin-bottom: 20px;\n  color: var(--foreground-3);\n}\n.styles-module_container__gCCnD [type=checkbox] {\n  position: relative;\n  left: 15px;\n  top: -4px;\n  z-index: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n  margin-left: -3.5px;\n}\n.styles-module_container__gCCnD [type=checkbox] + label {\n  position: absolute;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label::before {\n  width: 17px;\n  height: 17px;\n  border-radius: 5px;\n  border: 2px solid var(--border-2);\n  display: block;\n  content: \"\";\n  float: left;\n  margin-right: 8px;\n  z-index: 5;\n  position: relative;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__gCCnD [type=checkbox] ~ span {\n  position: absolute;\n  opacity: 1;\n  color: var(--background-2);\n  z-index: 100;\n  user-select: none;\n  pointer-events: none;\n  -webkit-user-select: none;\n  font-weight: 500;\n}\n.styles-module_container__gCCnD [type=checkbox]:checked + label::before {\n  background-color: var(--primary-1);\n  border-color: var(--primary-1);\n}\n.styles-module_container__gCCnD [type=checkbox]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--background-2);\n}";
 var styles$u = {"container":"styles-module_container__gCCnD"};
 styleInject(css_248z$u);
 
-function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => { }, children }) {
-    return (React__default["default"].createElement("div", { className: styles$u.container },
+function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => { }, children, ...props }) {
+    return (React__default["default"].createElement("div", { className: styles$u.container, ...props },
         React__default["default"].createElement("input", { type: "checkbox", onInput: onInput, name: name, checked: checked, defaultChecked: defaultChecked, id: id || name }),
         React__default["default"].createElement("label", { htmlFor: id || name }, children),
         React__default["default"].createElement(SvgIcon, { iconName: "done", size: "21px" })));
@@ -9539,12 +9539,12 @@ var css_248z$q = ".styles-module_container__hGVir {\n  display: flex;\n  align-i
 var styles$q = {"container":"styles-module_container__hGVir","input":"styles-module_input__h-BA2","input_container":"styles-module_input_container__2u56C","unit_label":"styles-module_unit_label__EVP9q"};
 styleInject(css_248z$q);
 
-const Dropdown = ({ options = [], unit = "", onChange = () => { }, ...props }) => {
+const Dropdown = ({ options = [], unit = "", onInput = () => { }, ...props }) => {
     const onDropdownChange = (event) => {
-        onChange(event.target.value);
+        onInput(event.target.value);
     };
     return (React__default["default"].createElement("div", { className: styles$q.container },
-        React__default["default"].createElement("select", { className: styles$q.select, onChange: onDropdownChange },
+        React__default["default"].createElement("select", { className: styles$q.select, onChange: onDropdownChange, ...props },
             React__default["default"].createElement("option", { value: "none" }, "Ausw\u00E4hlen"),
             options.map((option, index) => (React__default["default"].createElement("option", { key: index, value: option.value }, option.label))))));
 };
@@ -9916,15 +9916,15 @@ var css_248z$7 = ".styles-module_container__Grkzw {\n  display: flex;\n  flex-di
 var styles$7 = {"container":"styles-module_container__Grkzw","option":"styles-module_option__nijjM"};
 styleInject(css_248z$7);
 
-function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
+function RadioButtons({ options, group, selected, onInput = () => { }, width = "100%" }) {
     const [selectedOption, setSelected] = React.useState(selected);
+    React.useEffect(() => setSelected(selected), [selected]);
     function onUpdateSelected(event) {
         setSelected(event.target.value);
-        if (onClick)
-            onClick(event);
+        onInput(event);
     }
     return (React__default["default"].createElement("div", { className: styles$7.container, style: { width: width } }, options.map((option) => React__default["default"].createElement("div", { className: styles$7.option, key: option.name },
-        selected && selected == option.name ?
+        selectedOption == option.name ?
             React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
             :
                 React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected }),

package/dist/index.esm.js

@@ -9445,12 +9445,12 @@ function CardButton({ id, children, iconName, onClick, ...props }) {
         React__default.createElement("h2", null, children)));
 }
 
-var css_248z$u = ".styles-module_container__gCCnD {\n  margin-bottom: 20px;\n  width: 343px;\n  color: var(--foreground-3);\n}\n.styles-module_container__gCCnD [type=checkbox] {\n  position: relative;\n  left: 15px;\n  top: -4px;\n  z-index: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n  margin-left: -3.5px;\n}\n.styles-module_container__gCCnD [type=checkbox] + label {\n  position: absolute;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label::before {\n  width: 17px;\n  height: 17px;\n  border-radius: 5px;\n  border: 2px solid var(--border-2);\n  display: block;\n  content: \"\";\n  float: left;\n  margin-right: 8px;\n  z-index: 5;\n  position: relative;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__gCCnD [type=checkbox] ~ span {\n  position: absolute;\n  opacity: 1;\n  color: var(--background-2);\n  z-index: 100;\n  user-select: none;\n  pointer-events: none;\n  -webkit-user-select: none;\n  font-weight: 500;\n}\n.styles-module_container__gCCnD [type=checkbox]:checked + label::before {\n  background-color: var(--primary-1);\n  border-color: var(--primary-1);\n}\n.styles-module_container__gCCnD [type=checkbox]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--background-2);\n}";
+var css_248z$u = ".styles-module_container__gCCnD {\n  margin-bottom: 20px;\n  color: var(--foreground-3);\n}\n.styles-module_container__gCCnD [type=checkbox] {\n  position: relative;\n  left: 15px;\n  top: -4px;\n  z-index: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n  margin-left: -3.5px;\n}\n.styles-module_container__gCCnD [type=checkbox] + label {\n  position: absolute;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label::before {\n  width: 17px;\n  height: 17px;\n  border-radius: 5px;\n  border: 2px solid var(--border-2);\n  display: block;\n  content: \"\";\n  float: left;\n  margin-right: 8px;\n  z-index: 5;\n  position: relative;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__gCCnD [type=checkbox] ~ span {\n  position: absolute;\n  opacity: 1;\n  color: var(--background-2);\n  z-index: 100;\n  user-select: none;\n  pointer-events: none;\n  -webkit-user-select: none;\n  font-weight: 500;\n}\n.styles-module_container__gCCnD [type=checkbox]:checked + label::before {\n  background-color: var(--primary-1);\n  border-color: var(--primary-1);\n}\n.styles-module_container__gCCnD [type=checkbox]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--background-2);\n}";
 var styles$u = {"container":"styles-module_container__gCCnD"};
 styleInject(css_248z$u);
 
-function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => { }, children }) {
-    return (React__default.createElement("div", { className: styles$u.container },
+function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => { }, children, ...props }) {
+    return (React__default.createElement("div", { className: styles$u.container, ...props },
         React__default.createElement("input", { type: "checkbox", onInput: onInput, name: name, checked: checked, defaultChecked: defaultChecked, id: id || name }),
         React__default.createElement("label", { htmlFor: id || name }, children),
         React__default.createElement(SvgIcon, { iconName: "done", size: "21px" })));
@@ -9513,12 +9513,12 @@ var css_248z$q = ".styles-module_container__hGVir {\n  display: flex;\n  align-i
 var styles$q = {"container":"styles-module_container__hGVir","input":"styles-module_input__h-BA2","input_container":"styles-module_input_container__2u56C","unit_label":"styles-module_unit_label__EVP9q"};
 styleInject(css_248z$q);
 
-const Dropdown = ({ options = [], unit = "", onChange = () => { }, ...props }) => {
+const Dropdown = ({ options = [], unit = "", onInput = () => { }, ...props }) => {
     const onDropdownChange = (event) => {
-        onChange(event.target.value);
+        onInput(event.target.value);
     };
     return (React__default.createElement("div", { className: styles$q.container },
-        React__default.createElement("select", { className: styles$q.select, onChange: onDropdownChange },
+        React__default.createElement("select", { className: styles$q.select, onChange: onDropdownChange, ...props },
             React__default.createElement("option", { value: "none" }, "Ausw\u00E4hlen"),
             options.map((option, index) => (React__default.createElement("option", { key: index, value: option.value }, option.label))))));
 };
@@ -9890,15 +9890,15 @@ var css_248z$7 = ".styles-module_container__Grkzw {\n  display: flex;\n  flex-di
 var styles$7 = {"container":"styles-module_container__Grkzw","option":"styles-module_option__nijjM"};
 styleInject(css_248z$7);
 
-function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
+function RadioButtons({ options, group, selected, onInput = () => { }, width = "100%" }) {
     const [selectedOption, setSelected] = useState(selected);
+    useEffect(() => setSelected(selected), [selected]);
     function onUpdateSelected(event) {
         setSelected(event.target.value);
-        if (onClick)
-            onClick(event);
+        onInput(event);
     }
     return (React__default.createElement("div", { className: styles$7.container, style: { width: width } }, options.map((option) => React__default.createElement("div", { className: styles$7.option, key: option.name },
-        selected && selected == option.name ?
+        selectedOption == option.name ?
             React__default.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
             :
                 React__default.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected }),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "math-main-components",
-    "version": "0.0.210",
+    "version": "0.0.213",
     "author": "Emilian Scheel",
     "files": [
         "dist/**/*",