react-science 0.24.3 → 0.26.1

package/lib/components/forms/Checkbox.js

@@ -29,8 +29,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("@emotion/react");
 const RadixCheckbox = __importStar(require("@radix-ui/react-checkbox"));
 const index_1 = require("react-icons/rx/index");
-const enabledColor = '#1677ff';
-const disabledColor = '#b8b8b8';
+const styles_1 = require("./styles");
 function Checkbox(props) {
     const { checked = 'indeterminate', disabled = false, label, onChange, } = props;
     return ((0, jsx_runtime_1.jsxs)("label", { style: {
@@ -43,17 +42,17 @@ function Checkbox(props) {
                     backgroundColor: disabled
                         ? 'rgba(0, 0, 0, 0.04)'
                         : checked
-                            ? enabledColor
+                            ? styles_1.enabledColor
                             : 'white',
                     borderWidth: '1px',
-                    borderColor: checked && !disabled ? enabledColor : disabledColor,
+                    borderColor: checked && !disabled ? styles_1.enabledColor : styles_1.disabledColor,
                     borderRadius: '4px',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
                     cursor: disabled ? 'not-allowed' : 'pointer',
                 }), children: (0, jsx_runtime_1.jsx)(RadixCheckbox.Indicator, { css: (0, react_1.css)({
-                        color: disabled ? disabledColor : 'white',
+                        color: disabled ? styles_1.disabledColor : 'white',
                     }), children: checked === true ? ((0, jsx_runtime_1.jsx)(index_1.RxCheck, {})) : checked === 'indeterminate' ? ((0, jsx_runtime_1.jsx)(index_1.RxMinus, {})) : null }) }), (0, jsx_runtime_1.jsx)("span", { style: {
                     paddingInline: '8px',
                     lineHeight: '16px',

package/lib/components/forms/Input.js

@@ -8,72 +8,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_1 = __importDefault(require("@emotion/styled"));
 const index_1 = require("../index");
 const FieldsContext_1 = require("./context/FieldsContext");
-const LabelStyled = styled_1.default.label `
-  padding: ${(props) => props.variant === 'default'
-    ? props.hasTrailing
-        ? '2px 9px 4px 9px'
-        : '2px 9px'
-    : props.hasTrailing
-        ? '1px 7px 1px 7px'
-        : '1px 7px'};
-
-  font-size: ${(props) => (props.variant === 'small' ? '1em' : '1.125em')};
-  line-height: '17px';
-
-  background-color: white;
-  border-width: 1px;
-  align-items: center;
-  flex-direction: row;
-  flex: 1 1 0%;
-  display: flex;
-  position: relative;
-
-  border-top-right-radius: ${(props) => props.hasLeading && !props.hasTrailing && '0.375rem'};
-
-  border-bottom-right-radius: ${(props) => props.hasLeading && !props.hasTrailing && '0.375rem'};
-
-  border-top-left-radius: ${(props) => props.hasTrailing && !props.hasLeading && '0.375rem'};
-
-  border-bottom-left-radius: ${(props) => props.hasTrailing && !props.hasLeading && '0.375rem'};
-
-  border-radius: ${(props) => !props.hasLeading && !props.hasTrailing && '0.375rem'};
-
-  border-color: var(--custom-border-color);
-`;
-function getStyleColor(hasError, hasValid) {
-    if (hasError) {
-        return {
-            default: '#ffa39e',
-            hover: '#f95d55',
-        };
-    }
-    if (hasValid) {
-        return {
-            default: '#6adc24',
-            hover: '#62cb21',
-        };
-    }
-    return {
-        default: 'rgb(217, 217, 217)',
-        hover: '#4096ff',
-    };
-}
-const GroupStyled = styled_1.default.div `
-  display: flex;
-  border-radius: 0.375rem;
-  margin-top: 0.25rem;
-
-  .addon {
-    color: ${({ hasError }) => hasError && '#f95d55'};
-  }
-
-  --custom-border-color: ${({ hasError, hasValid }) => getStyleColor(hasError, hasValid).default};
-
-  :hover,
-  :focus-within {
-    --custom-border-color: ${({ hasError, hasValid }) => getStyleColor(hasError, hasValid).hover};
-  }
-`;
+const styles_1 = require("./styles");
+const utils_1 = require("./utils");
 const InputStyled = styled_1.default.input `
   padding: 0;
   flex: 1 1 0%;
@@ -119,32 +55,12 @@ const TrailingInlineAddonStyled = styled_1.default.div `
   align-items: center;
   padding-left: 0.5rem;
 `;
-const RootInput = styled_1.default.div `
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-`;
 function Input(props) {
     const { variant: variantProps, trailingAddon, leadingAddon, help, error, valid, loading, ...otherProps } = props;
     const { name, variant: contextVariant } = (0, FieldsContext_1.useFieldsContext)();
     const hasLeading = (leadingAddon && !leadingAddon.inline) || false;
     const hasTrailing = (trailingAddon && !trailingAddon.inline) || false;
     const variant = variantProps || contextVariant;
-    return ((0, jsx_runtime_1.jsxs)(RootInput, { children: [(0, jsx_runtime_1.jsxs)(GroupStyled, { hasError: !!error, hasValid: !!valid, children: [leadingAddon && !leadingAddon.inline && ((0, jsx_runtime_1.jsx)(LeadingAddonStyled, { children: leadingAddon.addon })), (0, jsx_runtime_1.jsxs)(LabelStyled, { variant: variant, hasLeading: hasLeading, hasTrailing: hasTrailing, children: [leadingAddon?.inline && ((0, jsx_runtime_1.jsx)(LeadingInlineAddonStyled, { className: "addon", children: leadingAddon.addon })), (0, jsx_runtime_1.jsx)(InputStyled, { id: name, name: name, ...otherProps }), trailingAddon?.inline && ((0, jsx_runtime_1.jsx)(TrailingInlineAddonStyled, { className: "addon", children: trailingAddon.addon })), loading && ((0, jsx_runtime_1.jsx)(TrailingInlineAddonStyled, { style: { height: variant === 'default' ? 20 : 10 }, children: (0, jsx_runtime_1.jsx)(index_1.FullSpinner, { height: variant === 'default' ? 20 : 10, width: variant === 'default' ? 20 : 10 }) }))] }), trailingAddon && !trailingAddon.inline && ((0, jsx_runtime_1.jsx)(TrailingAddonStyled, { children: trailingAddon.addon }))] }), (0, jsx_runtime_1.jsx)(SubText, { error: error, help: help, valid: valid })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.InputContainer, { children: [(0, jsx_runtime_1.jsxs)(styles_1.GroupStyled, { hasError: !!error, hasValid: !!valid, children: [leadingAddon && !leadingAddon.inline && ((0, jsx_runtime_1.jsx)(LeadingAddonStyled, { children: leadingAddon.addon })), (0, jsx_runtime_1.jsxs)(styles_1.LabelStyled, { variant: variant, hasLeading: hasLeading, hasTrailing: hasTrailing, children: [leadingAddon?.inline && ((0, jsx_runtime_1.jsx)(LeadingInlineAddonStyled, { className: "addon", children: leadingAddon.addon })), (0, jsx_runtime_1.jsx)(InputStyled, { id: name, name: name, ...otherProps }), trailingAddon?.inline && ((0, jsx_runtime_1.jsx)(TrailingInlineAddonStyled, { className: "addon", children: trailingAddon.addon })), loading && ((0, jsx_runtime_1.jsx)(TrailingInlineAddonStyled, { style: { height: variant === 'default' ? 20 : 10 }, children: (0, jsx_runtime_1.jsx)(index_1.FullSpinner, { height: variant === 'default' ? 20 : 10, width: variant === 'default' ? 20 : 10 }) }))] }), trailingAddon && !trailingAddon.inline && ((0, jsx_runtime_1.jsx)(TrailingAddonStyled, { children: trailingAddon.addon }))] }), (0, jsx_runtime_1.jsx)(utils_1.SubText, { error: error, help: help, valid: valid })] }));
 }
 exports.Input = Input;
-function SubText(props) {
-    const { error, help, valid: validProps } = props;
-    const valid = typeof validProps === 'string' ? validProps : undefined;
-    const text = error || valid || help;
-    return (0, jsx_runtime_1.jsx)("p", { style: { color: getColor(error, validProps) }, children: text });
-}
-function getColor(error, valid) {
-    if (error) {
-        return '#f95d55';
-    }
-    if (valid && typeof valid !== 'boolean') {
-        return '#62cb21';
-    }
-    return 'gray';
-}

package/lib/components/forms/TextArea.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextArea = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const FieldsContext_1 = require("./context/FieldsContext");
+const styles_1 = require("./styles");
+const utils_1 = require("./utils");
+const TextAreaStyled = styled_1.default.textarea `
+  padding: 0;
+  flex: 1 1 0%;
+  border: none;
+  position: relative;
+  outline: none;
+`;
+function TextArea(props) {
+    const { variant: variantProps, help, error, valid, ...otherProps } = props;
+    const { name, variant: contextVariant } = (0, FieldsContext_1.useFieldsContext)();
+    const variant = variantProps || contextVariant;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.InputContainer, { children: [(0, jsx_runtime_1.jsx)(styles_1.GroupStyled, { hasError: !!error, hasValid: !!valid, children: (0, jsx_runtime_1.jsx)(styles_1.LabelStyled, { variant: variant, children: (0, jsx_runtime_1.jsx)(TextAreaStyled, { id: name, name: name, ...otherProps }) }) }), (0, jsx_runtime_1.jsx)(utils_1.SubText, { error: error, help: help, valid: valid })] }));
+}
+exports.TextArea = TextArea;

package/lib/components/forms/index.js

@@ -15,6 +15,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Input"), exports);
+__exportStar(require("./TextArea"), exports);
 __exportStar(require("./Checkbox"), exports);
 __exportStar(require("./context"), exports);
 __exportStar(require("./Select"), exports);
+__exportStar(require("./radio-group"), exports);

package/lib/components/forms/radio-group/ButtonRadioItem.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonRadioItem = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const RadioGroup = __importStar(require("@radix-ui/react-radio-group"));
+const styles_1 = require("../styles");
+const buttonStyles = {
+    container: (0, react_1.css)({
+        border: '1px solid rgba(0, 0, 0, 0.25)',
+        borderRightWidth: 0,
+        position: 'relative',
+    }),
+    item: (disabled, variant) => (0, react_1.css)({
+        opacity: disabled ? 0.25 : 1,
+        padding: variant === 'default' ? '0px 15px' : '0px 7px',
+        width: '100%',
+        height: '100%',
+        cursor: 'pointer',
+        ':hover': {
+            '& > label': {
+                color: disabled ? '' : styles_1.enabledColor,
+            },
+        },
+    }),
+    indicator: (0, react_1.css)({
+        position: 'absolute',
+        top: -1,
+        left: -1,
+        right: -1,
+        bottom: -1,
+        zIndex: 10,
+        border: '1px solid',
+        borderColor: styles_1.enabledColor,
+        '& ~ label': {
+            color: styles_1.enabledColor,
+        },
+    }),
+    label: (variant) => (0, react_1.css)({
+        cursor: 'pointer',
+        fontSize: variant === 'small' ? '1em' : '1.125em',
+        lineHeight: variant === 'default' ? '30px' : '22px',
+    }),
+};
+function ButtonRadioItem(prop) {
+    const { value, label, disabled = false, onSelect, variant, name } = prop;
+    return ((0, jsx_runtime_1.jsx)("div", { css: buttonStyles.container, children: (0, jsx_runtime_1.jsxs)(RadioGroup.Item, { css: buttonStyles.item(disabled, variant), value: value, id: `${value}${name}`, onClick: () => {
+                if (!disabled)
+                    onSelect?.(prop);
+            }, children: [(0, jsx_runtime_1.jsx)(RadioGroup.Indicator, { css: buttonStyles.indicator }), (0, jsx_runtime_1.jsx)("label", { css: buttonStyles.label(variant), htmlFor: `${value}${name}`, style: {}, children: label })] }) }));
+}
+exports.ButtonRadioItem = ButtonRadioItem;

package/lib/components/forms/radio-group/ClassicRadioItem.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClassicRadioItem = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const RadioGroup = __importStar(require("@radix-ui/react-radio-group"));
+const styles_1 = require("../styles");
+const classicStyles = {
+    container: (disabled) => (0, react_1.css)({
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'row-reverse',
+        opacity: disabled ? 0.25 : 1,
+        overflow: 'hidden',
+        border: 'none',
+    }),
+    item: (disabled, variant) => (0, react_1.css)({
+        position: 'relative',
+        width: variant === 'default' ? 16 : 14,
+        height: variant === 'default' ? 16 : 14,
+        borderRadius: '50%',
+        border: '1px solid grey',
+        backgroundColor: disabled ? styles_1.disabledColor : 'white',
+        ':hover': {
+            borderColor: disabled ? 'grey' : styles_1.enabledColor,
+        },
+    }),
+    indicator: (0, react_1.css)({
+        position: 'absolute',
+        top: -1,
+        left: -1,
+        right: -1,
+        bottom: -1,
+        zIndex: 10,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: styles_1.enabledColor,
+        borderRadius: '50%',
+    }),
+    circle: (0, react_1.css)({
+        width: '40%',
+        height: '40%',
+        borderRadius: '50%',
+        backgroundColor: 'white',
+    }),
+    label: (disabled) => (0, react_1.css)({
+        cursor: 'pointer',
+        lineHeight: 1,
+        paddingLeft: 5,
+        fontSize: '12px',
+        ':hover': {
+            '& ~ button': {
+                borderColor: disabled ? 'grey' : styles_1.enabledColor,
+            },
+        },
+    }),
+};
+function ClassicRadioItem(props) {
+    const { value, label, disabled = false, onSelect, variant, name } = props;
+    return ((0, jsx_runtime_1.jsxs)("div", { css: classicStyles.container(disabled), children: [(0, jsx_runtime_1.jsx)("label", { css: classicStyles.label(disabled), style: {
+                    fontSize: variant === 'small' ? '1em' : '1.125em',
+                }, htmlFor: `${value}${name}`, children: label }), (0, jsx_runtime_1.jsx)(RadioGroup.Item, { css: classicStyles.item(disabled, variant), value: value, id: `${value}${name}`, onClick: () => {
+                    if (!disabled)
+                        onSelect?.(props);
+                }, children: (0, jsx_runtime_1.jsx)(RadioGroup.Indicator, { css: classicStyles.indicator, children: (0, jsx_runtime_1.jsx)("div", { css: classicStyles.circle }) }) })] }));
+}
+exports.ClassicRadioItem = ClassicRadioItem;

package/lib/components/forms/radio-group/RadioGroup.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const RadioGroupRadix = __importStar(require("@radix-ui/react-radio-group"));
+const ButtonRadioItem_1 = require("./ButtonRadioItem");
+const ClassicRadioItem_1 = require("./ClassicRadioItem");
+const rootStyles = {
+    basic: (0, react_1.css)({
+        display: 'flex',
+        flexDirection: 'row',
+        width: 'fit-content',
+    }),
+    button: (variant) => (0, react_1.css)({
+        ' & > *:first-of-type, & > *:first-of-type span': {
+            borderRadius: variant === 'default' ? '6px 0 0 6px' : '4px 0 0 4px',
+        },
+        ' & > *:last-of-type, & > *:last-of-type span': {
+            borderRightWidth: 1,
+            borderRadius: variant === 'default' ? '0 6px 6px 0' : '0 4px 4px 0',
+        },
+    }),
+};
+function RadioGroup(props) {
+    const { selected, type = 'classic', disabled: groupDisabled = false, options = [], onSelect, name = '', variant = 'default', } = props;
+    return ((0, jsx_runtime_1.jsx)(RadioGroupRadix.Root, { css: [
+            rootStyles.basic,
+            type === 'classic' ? null : rootStyles.button(variant),
+        ], style: {
+            gap: type === 'classic' ? (variant === 'default' ? 10 : 5) : 0,
+        }, value: selected?.value, name: name, disabled: groupDisabled, children: options?.map(({ value, label, disabled }) => {
+            const childProps = {
+                key: value,
+                value,
+                label,
+                disabled: groupDisabled || disabled,
+                onSelect,
+                variant,
+                name,
+            };
+            return type === 'classic' ? ((0, jsx_runtime_1.jsx)(ClassicRadioItem_1.ClassicRadioItem, { ...childProps })) : ((0, jsx_runtime_1.jsx)(ButtonRadioItem_1.ButtonRadioItem, { ...childProps }));
+        }) }));
+}
+exports.RadioGroup = RadioGroup;

package/lib/components/forms/radio-group/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./RadioGroup"), exports);

package/lib/components/forms/styles.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputContainer = exports.GroupStyled = exports.LabelStyled = exports.disabledColor = exports.enabledColor = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.enabledColor = '#1677ff';
+exports.disabledColor = '#b8b8b8';
+exports.LabelStyled = styled_1.default.label `
+  padding: ${(props) => props.variant === 'default'
+    ? props.hasTrailing
+        ? '2px 9px 4px 9px'
+        : '2px 9px'
+    : props.hasTrailing
+        ? '1px 7px 1px 7px'
+        : '1px 7px'};
+
+  font-size: ${(props) => (props.variant === 'small' ? '1em' : '1.125em')};
+  line-height: '17px';
+
+  background-color: white;
+  border-width: 1px;
+  align-items: center;
+  flex-direction: row;
+  flex: 1 1 0%;
+  display: flex;
+  position: relative;
+
+  border-top-right-radius: ${(props) => props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-bottom-right-radius: ${(props) => props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-top-left-radius: ${(props) => props.hasTrailing && !props.hasLeading && '0.375rem'};
+
+  border-bottom-left-radius: ${(props) => props.hasTrailing && !props.hasLeading && '0.375rem'};
+
+  border-radius: ${(props) => !props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-color: var(--custom-border-color);
+`;
+function getStyleColor(hasError, hasValid) {
+    if (hasError) {
+        return {
+            default: '#ffa39e',
+            hover: '#f95d55',
+        };
+    }
+    if (hasValid) {
+        return {
+            default: '#6adc24',
+            hover: '#62cb21',
+        };
+    }
+    return {
+        default: 'rgb(217, 217, 217)',
+        hover: '#4096ff',
+    };
+}
+exports.GroupStyled = styled_1.default.div `
+  display: flex;
+  border-radius: 0.375rem;
+  margin-top: 0.25rem;
+
+  .addon {
+    color: ${({ hasError }) => hasError && '#f95d55'};
+  }
+
+  --custom-border-color: ${({ hasError, hasValid }) => getStyleColor(hasError, hasValid).default};
+
+  :hover,
+  :focus-within {
+    --custom-border-color: ${({ hasError, hasValid }) => getStyleColor(hasError, hasValid).hover};
+  }
+`;
+exports.InputContainer = styled_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;

package/lib/components/forms/utils/SubText.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubText = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function SubText(props) {
+    const { error, help, valid: validProps } = props;
+    const valid = typeof validProps === 'string' ? validProps : undefined;
+    const text = error || valid || help;
+    return (0, jsx_runtime_1.jsx)("p", { style: { color: getColor(error, validProps) }, children: text });
+}
+exports.SubText = SubText;
+function getColor(error, valid) {
+    if (error) {
+        return '#f95d55';
+    }
+    if (valid && typeof valid !== 'boolean') {
+        return '#62cb21';
+    }
+    return 'gray';
+}

package/lib/components/forms/utils/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SubText"), exports);

package/lib/components/header/PanelHeader.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelHeader = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const fa_1 = require("react-icons/fa");
+const Button_1 = require("../button/Button");
+const styles = {
+    container: (0, react_1.css)({
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderBottom: '0.55px solid rgb(240, 240, 240)',
+    }),
+    leftContainer: (0, react_1.css)({
+        display: 'flex',
+        flexDirection: 'row',
+        flex: 1,
+        '& > button': {
+            padding: '0 5px',
+            minWidth: 'auto',
+        },
+    }),
+    counterLabel: (0, react_1.css)({
+        margin: 0,
+        textAlign: 'right',
+        lineHeight: '22px',
+        whiteSpace: 'nowrap',
+    }),
+};
+function PanelHeader({ total, current, children, onClickSettings, }) {
+    const labelRef = (0, react_2.useRef)(null);
+    (0, react_2.useEffect)(() => {
+        if (!labelRef.current)
+            return;
+        if (current !== undefined && total !== undefined) {
+            labelRef.current.textContent = `${current} / ${total}`;
+        }
+        else if (current !== undefined) {
+            labelRef.current.textContent = `[ ${current} ]`;
+        }
+        else if (total !== undefined) {
+            labelRef.current.textContent = `[ ${total} ]`;
+        }
+    }, [current, total]);
+    return ((0, jsx_runtime_1.jsxs)("div", { css: styles.container, children: [(0, jsx_runtime_1.jsx)("div", { css: styles.leftContainer, children: children }), (0, jsx_runtime_1.jsx)("p", { ref: labelRef, css: styles.counterLabel }), onClickSettings && ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClickSettings, color: { basic: 'black', hover: 'black' }, backgroundColor: { basic: 'white', hover: '#f7f7f7' }, children: (0, jsx_runtime_1.jsx)(fa_1.FaCog, {}) }))] }));
+}
+exports.PanelHeader = PanelHeader;

package/lib/components/header/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Header"), exports);
+__exportStar(require("./PanelHeader"), exports);

package/lib/components/hooks/useOnOff.js

@@ -6,7 +6,7 @@ function useOnOff(initialValue = false) {
     const [isOn, setOnOff] = (0, react_1.useState)(initialValue);
     const setOn = (0, react_1.useCallback)(() => setOnOff(true), []);
     const setOff = (0, react_1.useCallback)(() => setOnOff(false), []);
-    const toggle = (0, react_1.useCallback)(() => setOnOff(!isOn), [isOn]);
+    const toggle = (0, react_1.useCallback)(() => setOnOff((isOn) => !isOn), []);
     return [isOn, setOn, setOff, toggle];
 }
 exports.useOnOff = useOnOff;

package/lib/components/index.js

@@ -36,6 +36,7 @@ __exportStar(require("./forms/index"), exports);
 __exportStar(require("./fullscreen/index"), exports);
 __exportStar(require("./header/index"), exports);
 __exportStar(require("./hooks/index"), exports);
+__exportStar(require("./info-panel/index"), exports);
 __exportStar(require("./layout-manager/index"), exports);
 __exportStar(require("./modal/index"), exports);
 __exportStar(require("./root-layout/index"), exports);