math-main-components 0.0.216 → 0.0.218

package/dist/components/Button/Button.d.ts

@@ -5,7 +5,7 @@ export declare function Button({ id, children, iconName, iconFill, type, onClick
     iconName?: string;
     iconFill?: string;
     type?: ButtonType;
-    children: ReactNode;
+    children?: ReactNode;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 } & React.HTMLAttributes<HTMLButtonElement>): React.JSX.Element;
 export {};

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

@@ -11,3 +11,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
+export declare const Icon: Story;

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

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: <Type extends string>({ options, unit, onChangeDropdown, onChangeInput, ...props }: {
         options: import("./").NumberDropdownOption<Type>[];
-        onChangeDropdown?: ((value: Type) => void) | undefined;
+        onChangeDropdown?: ((oldValue: Type, newValue: Type) => void) | undefined;
         onChangeInput?: ((value: number) => void) | undefined;
         unit?: string | undefined;
     } & import("react").InputHTMLAttributes<HTMLInputElement>) => import("react").JSX.Element;

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

@@ -5,7 +5,7 @@ export type NumberDropdownOption<Type> = {
 };
 export declare const NumberDropdown: <Type extends string>({ options, unit, onChangeDropdown, onChangeInput, ...props }: {
     options: NumberDropdownOption<Type>[];
-    onChangeDropdown?: ((value: Type) => void) | undefined;
+    onChangeDropdown?: ((oldValue: Type, newValue: Type) => void) | undefined;
     onChangeInput?: ((value: number) => void) | undefined;
     unit?: string | undefined;
 } & React.InputHTMLAttributes<HTMLInputElement>) => React.JSX.Element;

package/dist/index.cjs.js

@@ -9793,19 +9793,22 @@ function InputText({ id, title, name, placeholder = "", defaultValue = "", autoF
                 React__default["default"].createElement("span", { className: styles$g.label_text }, title)))));
 }
 
-var css_248z$f = ".styles-module_container__kkDKN {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-family: \"Playfair\", serif;\n  border-radius: 18px;\n  transition: 0.2s ease-in-out;\n  padding-left: 4px;\n  background: var(--background-1);\n  padding: 6px;\n  border: 1px solid var(--border-1);\n  margin-bottom: 20px;\n  font-family: var(--font-1);\n}\n\n.styles-module_select_container__nqgUF {\n  border: 1px solid var(--border-1);\n  padding: 0px 20px;\n  gap: 10px;\n  display: flex;\n  align-items: center;\n  border-radius: 12px;\n  cursor: pointer;\n  background: var(--background-1);\n  transition: 0.2s ease-in-out;\n  height: 55px;\n}\n.styles-module_select_container__nqgUF:hover {\n  border-color: var(--primary-2);\n}\n.styles-module_select_container__nqgUF:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n  background: var(--background-2);\n}\n.styles-module_select_container__nqgUF select {\n  border: none;\n  outline: none;\n  background: none;\n  cursor: pointer;\n  font-size: 16px;\n  min-width: 64px;\n  height: 100%;\n  font-family: var(--font-1);\n}\n\n.styles-module_input__pUgcS::-webkit-outer-spin-button,\n.styles-module_input__pUgcS::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.styles-module_input_container__oRJ75 {\n  padding: 0px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid transparent;\n  transition: 0.2s ease;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  background: var(--background-1);\n  border-color: var(--border-1);\n  height: 55px;\n}\n.styles-module_input_container__oRJ75:hover {\n  border-color: var(--primary-2);\n}\n.styles-module_input_container__oRJ75 .styles-module_unit_label__bLQWy {\n  font-size: 16px;\n  text-align: right;\n}\n.styles-module_input_container__oRJ75:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n  background: var(--background-2);\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS {\n  width: 0px;\n  min-width: 64px;\n  outline: none;\n  border: none;\n  -moz-appearance: textfield;\n  appearance: textfield;\n  font-size: 16px;\n  text-align: right;\n  background: transparent;\n  font-family: var(--font-1);\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=number] {\n  cursor: pointer;\n  flex: 1;\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=range] {\n  width: 100%;\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=number]:disabled {\n  background: transparent;\n  color: var(--foreground-3);\n}";
-var styles$f = {"container":"styles-module_container__kkDKN","select_container":"styles-module_select_container__nqgUF","input":"styles-module_input__pUgcS","input_container":"styles-module_input_container__oRJ75","unit_label":"styles-module_unit_label__bLQWy"};
+var css_248z$f = ".styles-module_container__kkDKN {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-family: \"Playfair\", serif;\n  border-radius: 18px;\n  transition: 0.2s ease-in-out;\n  padding-left: 4px;\n  background: var(--background-1);\n  padding: 6px;\n  border: 1px solid var(--border-1);\n  margin-bottom: 20px;\n  font-family: var(--font-1);\n}\n\n.styles-module_select_container__nqgUF {\n  border: 1px solid var(--border-1);\n  padding: 0px 20px;\n  gap: 10px;\n  display: flex;\n  align-items: center;\n  border-radius: 12px;\n  cursor: pointer;\n  background: var(--background-1);\n  transition: 0.2s ease-in-out;\n  height: 55px;\n}\n.styles-module_select_container__nqgUF:hover {\n  border-color: var(--primary-2);\n}\n.styles-module_select_container__nqgUF:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n  background: var(--background-2);\n}\n.styles-module_select_container__nqgUF .styles-module_select__27FqK {\n  border: none;\n  outline: none;\n  background: none;\n  cursor: pointer;\n  font-size: 16px;\n  min-width: 64px;\n  height: 100%;\n  font-family: var(--font-1);\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n\n.styles-module_input__pUgcS::-webkit-outer-spin-button,\n.styles-module_input__pUgcS::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.styles-module_input_container__oRJ75 {\n  padding: 0px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid transparent;\n  transition: 0.2s ease;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  background: var(--background-1);\n  border-color: var(--border-1);\n  height: 55px;\n}\n.styles-module_input_container__oRJ75:hover {\n  border-color: var(--primary-2);\n}\n.styles-module_input_container__oRJ75 .styles-module_unit_label__bLQWy {\n  font-size: 16px;\n  text-align: right;\n}\n.styles-module_input_container__oRJ75:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n  background: var(--background-2);\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS {\n  width: 0px;\n  min-width: 64px;\n  outline: none;\n  border: none;\n  -moz-appearance: textfield;\n  appearance: textfield;\n  font-size: 16px;\n  text-align: right;\n  background: transparent;\n  font-family: var(--font-1);\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=number] {\n  cursor: pointer;\n  flex: 1;\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=range] {\n  width: 100%;\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=number]:disabled {\n  background: transparent;\n  color: var(--foreground-3);\n}";
+var styles$f = {"container":"styles-module_container__kkDKN","select_container":"styles-module_select_container__nqgUF","select":"styles-module_select__27FqK","input":"styles-module_input__pUgcS","input_container":"styles-module_input_container__oRJ75","unit_label":"styles-module_unit_label__bLQWy"};
 styleInject(css_248z$f);
 
 const NumberDropdown = ({ options = [], unit = "", onChangeDropdown = () => { }, onChangeInput = () => { }, ...props }) => {
+    const [selected, setSelected] = React.useState();
     const onDropdownChange = (event) => {
-        onChangeDropdown(event.target.value);
+        onChangeDropdown(selected, event.target.value);
+        setSelected(event.target.value);
     };
     const onInputChange = (event) => {
         onChangeInput(Number(event.target.value));
     };
     return (React__default["default"].createElement("div", { className: styles$f.container },
         React__default["default"].createElement("div", { className: styles$f.select_container },
+            React__default["default"].createElement(SvgIcon, { iconName: "expand_more" }),
             React__default["default"].createElement("select", { className: styles$f.select, onChange: onDropdownChange },
                 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))))),

package/dist/index.esm.js

@@ -9767,19 +9767,22 @@ function InputText({ id, title, name, placeholder = "", defaultValue = "", autoF
                 React__default.createElement("span", { className: styles$g.label_text }, title)))));
 }
 
-var css_248z$f = ".styles-module_container__kkDKN {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-family: \"Playfair\", serif;\n  border-radius: 18px;\n  transition: 0.2s ease-in-out;\n  padding-left: 4px;\n  background: var(--background-1);\n  padding: 6px;\n  border: 1px solid var(--border-1);\n  margin-bottom: 20px;\n  font-family: var(--font-1);\n}\n\n.styles-module_select_container__nqgUF {\n  border: 1px solid var(--border-1);\n  padding: 0px 20px;\n  gap: 10px;\n  display: flex;\n  align-items: center;\n  border-radius: 12px;\n  cursor: pointer;\n  background: var(--background-1);\n  transition: 0.2s ease-in-out;\n  height: 55px;\n}\n.styles-module_select_container__nqgUF:hover {\n  border-color: var(--primary-2);\n}\n.styles-module_select_container__nqgUF:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n  background: var(--background-2);\n}\n.styles-module_select_container__nqgUF select {\n  border: none;\n  outline: none;\n  background: none;\n  cursor: pointer;\n  font-size: 16px;\n  min-width: 64px;\n  height: 100%;\n  font-family: var(--font-1);\n}\n\n.styles-module_input__pUgcS::-webkit-outer-spin-button,\n.styles-module_input__pUgcS::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.styles-module_input_container__oRJ75 {\n  padding: 0px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid transparent;\n  transition: 0.2s ease;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  background: var(--background-1);\n  border-color: var(--border-1);\n  height: 55px;\n}\n.styles-module_input_container__oRJ75:hover {\n  border-color: var(--primary-2);\n}\n.styles-module_input_container__oRJ75 .styles-module_unit_label__bLQWy {\n  font-size: 16px;\n  text-align: right;\n}\n.styles-module_input_container__oRJ75:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n  background: var(--background-2);\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS {\n  width: 0px;\n  min-width: 64px;\n  outline: none;\n  border: none;\n  -moz-appearance: textfield;\n  appearance: textfield;\n  font-size: 16px;\n  text-align: right;\n  background: transparent;\n  font-family: var(--font-1);\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=number] {\n  cursor: pointer;\n  flex: 1;\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=range] {\n  width: 100%;\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=number]:disabled {\n  background: transparent;\n  color: var(--foreground-3);\n}";
-var styles$f = {"container":"styles-module_container__kkDKN","select_container":"styles-module_select_container__nqgUF","input":"styles-module_input__pUgcS","input_container":"styles-module_input_container__oRJ75","unit_label":"styles-module_unit_label__bLQWy"};
+var css_248z$f = ".styles-module_container__kkDKN {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-family: \"Playfair\", serif;\n  border-radius: 18px;\n  transition: 0.2s ease-in-out;\n  padding-left: 4px;\n  background: var(--background-1);\n  padding: 6px;\n  border: 1px solid var(--border-1);\n  margin-bottom: 20px;\n  font-family: var(--font-1);\n}\n\n.styles-module_select_container__nqgUF {\n  border: 1px solid var(--border-1);\n  padding: 0px 20px;\n  gap: 10px;\n  display: flex;\n  align-items: center;\n  border-radius: 12px;\n  cursor: pointer;\n  background: var(--background-1);\n  transition: 0.2s ease-in-out;\n  height: 55px;\n}\n.styles-module_select_container__nqgUF:hover {\n  border-color: var(--primary-2);\n}\n.styles-module_select_container__nqgUF:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n  background: var(--background-2);\n}\n.styles-module_select_container__nqgUF .styles-module_select__27FqK {\n  border: none;\n  outline: none;\n  background: none;\n  cursor: pointer;\n  font-size: 16px;\n  min-width: 64px;\n  height: 100%;\n  font-family: var(--font-1);\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n\n.styles-module_input__pUgcS::-webkit-outer-spin-button,\n.styles-module_input__pUgcS::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.styles-module_input_container__oRJ75 {\n  padding: 0px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid transparent;\n  transition: 0.2s ease;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  background: var(--background-1);\n  border-color: var(--border-1);\n  height: 55px;\n}\n.styles-module_input_container__oRJ75:hover {\n  border-color: var(--primary-2);\n}\n.styles-module_input_container__oRJ75 .styles-module_unit_label__bLQWy {\n  font-size: 16px;\n  text-align: right;\n}\n.styles-module_input_container__oRJ75:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n  background: var(--background-2);\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS {\n  width: 0px;\n  min-width: 64px;\n  outline: none;\n  border: none;\n  -moz-appearance: textfield;\n  appearance: textfield;\n  font-size: 16px;\n  text-align: right;\n  background: transparent;\n  font-family: var(--font-1);\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=number] {\n  cursor: pointer;\n  flex: 1;\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=range] {\n  width: 100%;\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=number]:disabled {\n  background: transparent;\n  color: var(--foreground-3);\n}";
+var styles$f = {"container":"styles-module_container__kkDKN","select_container":"styles-module_select_container__nqgUF","select":"styles-module_select__27FqK","input":"styles-module_input__pUgcS","input_container":"styles-module_input_container__oRJ75","unit_label":"styles-module_unit_label__bLQWy"};
 styleInject(css_248z$f);
 
 const NumberDropdown = ({ options = [], unit = "", onChangeDropdown = () => { }, onChangeInput = () => { }, ...props }) => {
+    const [selected, setSelected] = useState();
     const onDropdownChange = (event) => {
-        onChangeDropdown(event.target.value);
+        onChangeDropdown(selected, event.target.value);
+        setSelected(event.target.value);
     };
     const onInputChange = (event) => {
         onChangeInput(Number(event.target.value));
     };
     return (React__default.createElement("div", { className: styles$f.container },
         React__default.createElement("div", { className: styles$f.select_container },
+            React__default.createElement(SvgIcon, { iconName: "expand_more" }),
             React__default.createElement("select", { className: styles$f.select, onChange: onDropdownChange },
                 React__default.createElement("option", { value: "none" }, "Ausw\u00E4hlen"),
                 options.map((option, index) => (React__default.createElement("option", { key: index, value: option.value }, option.label))))),

package/package.json

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