math-main-components 0.0.232 → 0.0.234
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
import type { StoryObj } from '@storybook/react';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: ({ children, defaultActive,
|
|
5
|
+
component: ({ children, defaultActive, onSelected, ...props }: {
|
|
6
6
|
children: import("react").ReactNode;
|
|
7
7
|
defaultActive?: boolean | undefined;
|
|
8
|
-
|
|
9
|
-
}) => import("react").JSX.Element;
|
|
8
|
+
onSelected?: ((isActive: boolean) => void) | undefined;
|
|
9
|
+
} & import("react").HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
|
|
10
10
|
parameters: {
|
|
11
11
|
layout: string;
|
|
12
12
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
export declare const Switch: ({ children, defaultActive,
|
|
1
|
+
import React, { HTMLAttributes } from "react";
|
|
2
|
+
export declare const Switch: ({ children, defaultActive, onSelected, ...props }: {
|
|
3
3
|
children: React.ReactNode;
|
|
4
4
|
defaultActive?: boolean | undefined;
|
|
5
|
-
|
|
6
|
-
}) => React.JSX.Element;
|
|
5
|
+
onSelected?: ((isActive: boolean) => void) | undefined;
|
|
6
|
+
} & React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
|
package/dist/index.cjs.js
CHANGED
|
@@ -9876,14 +9876,14 @@ var css_248z$g = ".styles-module_container__Mk8-I {\n display: flex;\n flex-di
|
|
|
9876
9876
|
var styles$g = {"container":"styles-module_container__Mk8-I","toggle":"styles-module_toggle__HDqwi","active":"styles-module_active__ZEu1a","circle":"styles-module_circle__QuzsS"};
|
|
9877
9877
|
styleInject(css_248z$g);
|
|
9878
9878
|
|
|
9879
|
-
const Switch = ({ children, defaultActive = false,
|
|
9879
|
+
const Switch = ({ children, defaultActive = false, onSelected = () => { }, ...props }) => {
|
|
9880
9880
|
const [isActive, setActive] = React.useState(defaultActive);
|
|
9881
9881
|
React.useEffect(() => setActive(defaultActive), [defaultActive]);
|
|
9882
9882
|
const onToggle = () => {
|
|
9883
9883
|
setActive(!isActive);
|
|
9884
|
-
|
|
9884
|
+
onSelected(!isActive);
|
|
9885
9885
|
};
|
|
9886
|
-
return (React__default["default"].createElement("div", { className: styles$g.container },
|
|
9886
|
+
return (React__default["default"].createElement("div", { className: styles$g.container, ...props },
|
|
9887
9887
|
React__default["default"].createElement("div", { className: [styles$g.toggle, isActive ? styles$g.active : styles$g.not_active].join(" "), onClick: onToggle },
|
|
9888
9888
|
React__default["default"].createElement("div", { className: styles$g.circle })),
|
|
9889
9889
|
children));
|
|
@@ -9987,7 +9987,7 @@ const NumberDropdown = ({ options = [], unit = "", defaultValue, onChangeDropdow
|
|
|
9987
9987
|
React__default["default"].createElement("span", { className: styles$a.unit_label }, unit))));
|
|
9988
9988
|
};
|
|
9989
9989
|
|
|
9990
|
-
var css_248z$9 = ".styles-module_container__c0sGu {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n background: var(--background-1);\n justify-content: center;\n cursor: pointer;\n border-radius: 12px;\n transition: 0.2s ease-in-out;\n border: 2px solid transparent;\n}\n.styles-module_container__c0sGu:hover {\n background: var(--background-2);\n}\n.styles-module_container__c0sGu.styles-module_active__naxTC {\n background: var(--
|
|
9990
|
+
var css_248z$9 = ".styles-module_container__c0sGu {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n background: var(--background-1);\n justify-content: center;\n cursor: pointer;\n border-radius: 12px;\n transition: 0.2s ease-in-out;\n border: 2px solid transparent;\n}\n.styles-module_container__c0sGu:hover {\n background: var(--background-2);\n}\n.styles-module_container__c0sGu.styles-module_active__naxTC {\n background: var(--focus-background);\n}\n.styles-module_container__c0sGu.styles-module_active__naxTC span {\n color: var(--primary-1);\n}\n.styles-module_container__c0sGu span {\n user-select: none;\n font-weight: 300;\n}";
|
|
9991
9991
|
var styles$9 = {"container":"styles-module_container__c0sGu","active":"styles-module_active__naxTC"};
|
|
9992
9992
|
styleInject(css_248z$9);
|
|
9993
9993
|
|
|
@@ -9996,7 +9996,7 @@ const ToggleBox = ({ defaultActive = false, activeIcon = "lock", inactiveIcon =
|
|
|
9996
9996
|
React__default["default"].createElement(SvgIcon, { iconName: defaultActive ? activeIcon : inactiveIcon })));
|
|
9997
9997
|
};
|
|
9998
9998
|
|
|
9999
|
-
var css_248z$8 = ".styles-module_container__nfdq2 {\n display: flex;\n align-items: center;\n gap: 20px;\n font-family: var(--font-1);\n border-radius: 12px;\n transition: 0.2s ease-in-out;\n padding-left: 4px;\n}\n.styles-module_container__nfdq2.styles-module_active__UDz5d {\n background: var(--
|
|
9999
|
+
var css_248z$8 = ".styles-module_container__nfdq2 {\n display: flex;\n align-items: center;\n gap: 20px;\n font-family: var(--font-1);\n border-radius: 12px;\n transition: 0.2s ease-in-out;\n padding-left: 4px;\n}\n.styles-module_container__nfdq2.styles-module_active__UDz5d {\n background: var(--focus-background);\n}\n.styles-module_container__nfdq2.styles-module_not_active__2wtj6 .styles-module_unit_label__5LpQb {\n color: var(--foreground-3);\n}\n.styles-module_container__nfdq2.styles-module_number__EDIRK {\n flex-direction: row;\n}\n.styles-module_container__nfdq2.styles-module_range__-7ujA {\n gap: 0px;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.styles-module_label_container__q7qE- {\n display: flex;\n flex-direction: row;\n gap: 0px;\n align-items: center;\n}\n.styles-module_label_container__q7qE-.styles-module_range__-7ujA {\n width: 100%;\n flex: 1;\n padding-top: 10px;\n}\n\n.styles-module_input__oOPOp::-webkit-outer-spin-button,\n.styles-module_input__oOPOp::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.styles-module_value_container__hngxK {\n display: flex;\n gap: 6px;\n}\n.styles-module_value_container__hngxK .styles-module_label__oETxb {\n font-family: var(--font-1);\n user-select: none;\n -webkit-user-select: none;\n font-size: 18px;\n}\n.styles-module_value_container__hngxK .styles-module_label__oETxb,\n.styles-module_value_container__hngxK .styles-module_value__0eUGc {\n transition: 0.2s ease-in-out;\n}\n.styles-module_value_container__hngxK.styles-module_range__-7ujA {\n flex: 1;\n align-items: flex-end;\n padding-right: 20px;\n}\n.styles-module_value_container__hngxK.styles-module_range__-7ujA .styles-module_label__oETxb {\n font-size: 20px;\n}\n.styles-module_value_container__hngxK.styles-module_range__-7ujA .styles-module_value__0eUGc {\n font-size: 20px;\n}\n.styles-module_value_container__hngxK.styles-module_number__EDIRK .styles-module_label__oETxb {\n font-size: 20px;\n}\n.styles-module_value_container__hngxK.styles-module_number__EDIRK .styles-module_value__0eUGc {\n max-height: 0;\n overflow: hidden;\n}\n\n.styles-module_input_container__DJP-a {\n padding: 14px 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 gap: 6px;\n}\n.styles-module_input_container__DJP-a .styles-module_unit_label__5LpQb {\n font-size: 20px;\n text-align: right;\n}\n.styles-module_input_container__DJP-a.styles-module_number__EDIRK {\n border-color: var(--primary-2);\n background: var(--background-1);\n cursor: pointer;\n}\n.styles-module_input_container__DJP-a.styles-module_number__EDIRK:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n.styles-module_input_container__DJP-a.styles-module_range__-7ujA {\n padding: 10px;\n width: calc(100% - 20px);\n}\n.styles-module_input_container__DJP-a.styles-module_range__-7ujA .styles-module_unit_label__5LpQb {\n max-width: 0;\n overflow: hidden;\n}\n.styles-module_input_container__DJP-a .styles-module_input__oOPOp {\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__DJP-a .styles-module_input__oOPOp[type=number] {\n cursor: pointer;\n flex: 1;\n}\n.styles-module_input_container__DJP-a .styles-module_input__oOPOp[type=range] {\n width: 100%;\n}\n.styles-module_input_container__DJP-a .styles-module_input__oOPOp[type=number]:disabled {\n background: transparent;\n color: var(--foreground-3);\n}\n.styles-module_input_container__DJP-a .styles-module_input__oOPOp[type=number].styles-module_not_available__vwfmX,\n.styles-module_input_container__DJP-a .styles-module_input__oOPOp[type=number]:invalid {\n color: #e50000;\n}\n\n.styles-module_label__oETxb {\n font-family: var(--font-1);\n user-select: none;\n -webkit-user-select: none;\n cursor: pointer;\n}";
|
|
10000
10000
|
var styles$8 = {"container":"styles-module_container__nfdq2","active":"styles-module_active__UDz5d","not_active":"styles-module_not_active__2wtj6","unit_label":"styles-module_unit_label__5LpQb","number":"styles-module_number__EDIRK","range":"styles-module_range__-7ujA","label_container":"styles-module_label_container__q7qE-","input":"styles-module_input__oOPOp","value_container":"styles-module_value_container__hngxK","label":"styles-module_label__oETxb","value":"styles-module_value__0eUGc","input_container":"styles-module_input_container__DJP-a","not_available":"styles-module_not_available__vwfmX"};
|
|
10001
10001
|
styleInject(css_248z$8);
|
|
10002
10002
|
|
package/dist/index.esm.js
CHANGED
|
@@ -9850,14 +9850,14 @@ var css_248z$g = ".styles-module_container__Mk8-I {\n display: flex;\n flex-di
|
|
|
9850
9850
|
var styles$g = {"container":"styles-module_container__Mk8-I","toggle":"styles-module_toggle__HDqwi","active":"styles-module_active__ZEu1a","circle":"styles-module_circle__QuzsS"};
|
|
9851
9851
|
styleInject(css_248z$g);
|
|
9852
9852
|
|
|
9853
|
-
const Switch = ({ children, defaultActive = false,
|
|
9853
|
+
const Switch = ({ children, defaultActive = false, onSelected = () => { }, ...props }) => {
|
|
9854
9854
|
const [isActive, setActive] = useState(defaultActive);
|
|
9855
9855
|
useEffect(() => setActive(defaultActive), [defaultActive]);
|
|
9856
9856
|
const onToggle = () => {
|
|
9857
9857
|
setActive(!isActive);
|
|
9858
|
-
|
|
9858
|
+
onSelected(!isActive);
|
|
9859
9859
|
};
|
|
9860
|
-
return (React__default.createElement("div", { className: styles$g.container },
|
|
9860
|
+
return (React__default.createElement("div", { className: styles$g.container, ...props },
|
|
9861
9861
|
React__default.createElement("div", { className: [styles$g.toggle, isActive ? styles$g.active : styles$g.not_active].join(" "), onClick: onToggle },
|
|
9862
9862
|
React__default.createElement("div", { className: styles$g.circle })),
|
|
9863
9863
|
children));
|
|
@@ -9961,7 +9961,7 @@ const NumberDropdown = ({ options = [], unit = "", defaultValue, onChangeDropdow
|
|
|
9961
9961
|
React__default.createElement("span", { className: styles$a.unit_label }, unit))));
|
|
9962
9962
|
};
|
|
9963
9963
|
|
|
9964
|
-
var css_248z$9 = ".styles-module_container__c0sGu {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n background: var(--background-1);\n justify-content: center;\n cursor: pointer;\n border-radius: 12px;\n transition: 0.2s ease-in-out;\n border: 2px solid transparent;\n}\n.styles-module_container__c0sGu:hover {\n background: var(--background-2);\n}\n.styles-module_container__c0sGu.styles-module_active__naxTC {\n background: var(--
|
|
9964
|
+
var css_248z$9 = ".styles-module_container__c0sGu {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n background: var(--background-1);\n justify-content: center;\n cursor: pointer;\n border-radius: 12px;\n transition: 0.2s ease-in-out;\n border: 2px solid transparent;\n}\n.styles-module_container__c0sGu:hover {\n background: var(--background-2);\n}\n.styles-module_container__c0sGu.styles-module_active__naxTC {\n background: var(--focus-background);\n}\n.styles-module_container__c0sGu.styles-module_active__naxTC span {\n color: var(--primary-1);\n}\n.styles-module_container__c0sGu span {\n user-select: none;\n font-weight: 300;\n}";
|
|
9965
9965
|
var styles$9 = {"container":"styles-module_container__c0sGu","active":"styles-module_active__naxTC"};
|
|
9966
9966
|
styleInject(css_248z$9);
|
|
9967
9967
|
|
|
@@ -9970,7 +9970,7 @@ const ToggleBox = ({ defaultActive = false, activeIcon = "lock", inactiveIcon =
|
|
|
9970
9970
|
React__default.createElement(SvgIcon, { iconName: defaultActive ? activeIcon : inactiveIcon })));
|
|
9971
9971
|
};
|
|
9972
9972
|
|
|
9973
|
-
var css_248z$8 = ".styles-module_container__nfdq2 {\n display: flex;\n align-items: center;\n gap: 20px;\n font-family: var(--font-1);\n border-radius: 12px;\n transition: 0.2s ease-in-out;\n padding-left: 4px;\n}\n.styles-module_container__nfdq2.styles-module_active__UDz5d {\n background: var(--
|
|
9973
|
+
var css_248z$8 = ".styles-module_container__nfdq2 {\n display: flex;\n align-items: center;\n gap: 20px;\n font-family: var(--font-1);\n border-radius: 12px;\n transition: 0.2s ease-in-out;\n padding-left: 4px;\n}\n.styles-module_container__nfdq2.styles-module_active__UDz5d {\n background: var(--focus-background);\n}\n.styles-module_container__nfdq2.styles-module_not_active__2wtj6 .styles-module_unit_label__5LpQb {\n color: var(--foreground-3);\n}\n.styles-module_container__nfdq2.styles-module_number__EDIRK {\n flex-direction: row;\n}\n.styles-module_container__nfdq2.styles-module_range__-7ujA {\n gap: 0px;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.styles-module_label_container__q7qE- {\n display: flex;\n flex-direction: row;\n gap: 0px;\n align-items: center;\n}\n.styles-module_label_container__q7qE-.styles-module_range__-7ujA {\n width: 100%;\n flex: 1;\n padding-top: 10px;\n}\n\n.styles-module_input__oOPOp::-webkit-outer-spin-button,\n.styles-module_input__oOPOp::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.styles-module_value_container__hngxK {\n display: flex;\n gap: 6px;\n}\n.styles-module_value_container__hngxK .styles-module_label__oETxb {\n font-family: var(--font-1);\n user-select: none;\n -webkit-user-select: none;\n font-size: 18px;\n}\n.styles-module_value_container__hngxK .styles-module_label__oETxb,\n.styles-module_value_container__hngxK .styles-module_value__0eUGc {\n transition: 0.2s ease-in-out;\n}\n.styles-module_value_container__hngxK.styles-module_range__-7ujA {\n flex: 1;\n align-items: flex-end;\n padding-right: 20px;\n}\n.styles-module_value_container__hngxK.styles-module_range__-7ujA .styles-module_label__oETxb {\n font-size: 20px;\n}\n.styles-module_value_container__hngxK.styles-module_range__-7ujA .styles-module_value__0eUGc {\n font-size: 20px;\n}\n.styles-module_value_container__hngxK.styles-module_number__EDIRK .styles-module_label__oETxb {\n font-size: 20px;\n}\n.styles-module_value_container__hngxK.styles-module_number__EDIRK .styles-module_value__0eUGc {\n max-height: 0;\n overflow: hidden;\n}\n\n.styles-module_input_container__DJP-a {\n padding: 14px 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 gap: 6px;\n}\n.styles-module_input_container__DJP-a .styles-module_unit_label__5LpQb {\n font-size: 20px;\n text-align: right;\n}\n.styles-module_input_container__DJP-a.styles-module_number__EDIRK {\n border-color: var(--primary-2);\n background: var(--background-1);\n cursor: pointer;\n}\n.styles-module_input_container__DJP-a.styles-module_number__EDIRK:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n.styles-module_input_container__DJP-a.styles-module_range__-7ujA {\n padding: 10px;\n width: calc(100% - 20px);\n}\n.styles-module_input_container__DJP-a.styles-module_range__-7ujA .styles-module_unit_label__5LpQb {\n max-width: 0;\n overflow: hidden;\n}\n.styles-module_input_container__DJP-a .styles-module_input__oOPOp {\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__DJP-a .styles-module_input__oOPOp[type=number] {\n cursor: pointer;\n flex: 1;\n}\n.styles-module_input_container__DJP-a .styles-module_input__oOPOp[type=range] {\n width: 100%;\n}\n.styles-module_input_container__DJP-a .styles-module_input__oOPOp[type=number]:disabled {\n background: transparent;\n color: var(--foreground-3);\n}\n.styles-module_input_container__DJP-a .styles-module_input__oOPOp[type=number].styles-module_not_available__vwfmX,\n.styles-module_input_container__DJP-a .styles-module_input__oOPOp[type=number]:invalid {\n color: #e50000;\n}\n\n.styles-module_label__oETxb {\n font-family: var(--font-1);\n user-select: none;\n -webkit-user-select: none;\n cursor: pointer;\n}";
|
|
9974
9974
|
var styles$8 = {"container":"styles-module_container__nfdq2","active":"styles-module_active__UDz5d","not_active":"styles-module_not_active__2wtj6","unit_label":"styles-module_unit_label__5LpQb","number":"styles-module_number__EDIRK","range":"styles-module_range__-7ujA","label_container":"styles-module_label_container__q7qE-","input":"styles-module_input__oOPOp","value_container":"styles-module_value_container__hngxK","label":"styles-module_label__oETxb","value":"styles-module_value__0eUGc","input_container":"styles-module_input_container__DJP-a","not_available":"styles-module_not_available__vwfmX"};
|
|
9975
9975
|
styleInject(css_248z$8);
|
|
9976
9976
|
|
package/package.json
CHANGED
package/styles/theme-styles.scss
CHANGED