@geneui/components 3.0.0-next-d9fa1ce-06112024 → 3.0.0-next-65b0240-02122024

package/Checkbox.js

@@ -0,0 +1,99 @@
+import React__default, { useRef, useState, useEffect, useMemo } from 'react';
+import { _ as _objectWithoutProperties, a as _extends } from './ArrowLeft-b88e2ba8.js';
+import { c as classNames } from './index-ce02421b.js';
+import Label from './Label.js';
+import HelperText from './HelperText.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './Tooltip.js';
+import 'react-dom';
+import './GeneUIProvider.js';
+import './useEllipsisDetection-46d712b6.js';
+import './Info.js';
+
+var _excluded$1 = ["size", "color"];
+var SvgCheckMark = function SvgCheckMark(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "currentColor" : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M9.19 19.25a.75.75 0 0 1-.564-.255l-5.44-6.188a.756.756 0 0 1 .612-1.248.75.75 0 0 1 .516.253l4.867 5.535 10.491-12.33a.75.75 0 0 1 1.322.426.756.756 0 0 1-.176.55l-11.055 12.992a.756.756 0 0 1-.567.265h-.006Z",
+    fill: color
+  }));
+};
+
+var _excluded = ["size", "color"];
+var SvgMinusOutline = function SvgMinusOutline(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "currentColor" : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M20.153 12.75h-16.306a.905.905 0 0 1-.599-.22.71.71 0 0 1-.248-.53c0-.199.09-.39.248-.53a.905.905 0 0 1 .599-.22h16.306c.225 0 .44.079.599.22a.71.71 0 0 1 .248.53.71.71 0 0 1-.248.53.905.905 0 0 1-.599.22Z",
+    fill: color
+  }));
+};
+
+var css_248z = ".checkbox{display:inline-flex;flex-direction:column;max-width:100%;min-width:0}.checkbox__input{-webkit-appearance:none;appearance:none;background:none;border:none;border-radius:var(--guit-ref-radius-4xsmall);height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.checkbox__input:checked+.checkbox__imitation,.checkbox__input:indeterminate+.checkbox__imitation{background-color:var(--guit-sem-color-background-selected-2);border-color:var(--guit-sem-color-background-selected-2)}.checkbox__input:checked+.checkbox__imitation:hover,.checkbox__input:indeterminate+.checkbox__imitation:hover{background-color:var(--guit-sem-color-background-selected-2-hover);border-color:var(--guit-sem-color-background-selected-2-hover)}.checkbox__input:checked+.checkbox__imitation:active,.checkbox__input:indeterminate+.checkbox__imitation:active{background-color:var(--guit-sem-color-background-selected-2-pressed);border-color:var(--guit-sem-color-background-selected-2-pressed)}.checkbox__input:checked+.checkbox__imitation .checkbox__icon,.checkbox__input:indeterminate+.checkbox__imitation .checkbox__icon{opacity:1}.checkbox__label{display:flex}.checkbox__imitationHolder{align-items:center;display:flex;flex:0 0 auto;height:var(--guit-sem-dimension-height-small);justify-content:center;width:var(--guit-sem-dimension-width-small)}.checkbox__imitationHolder .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}.checkbox__imitationHolder .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.checkbox__imitationHolderInner{align-items:center;display:flex;flex:0 0 auto;height:var(--guit-sem-dimension-height-xsmall);justify-content:center;position:relative;width:var(--guit-sem-dimension-width-xsmall)}.checkbox__imitation{border:var(--guit-ref-border-width-thin) solid var(--guit-sem-color-border-neutral-3);border-radius:var(--guit-ref-radius-4xsmall);height:100%;width:100%}.checkbox__icon{color:var(--guit-sem-color-foreground-inverse);flex:0 0 auto;height:100%;opacity:0;width:100%}.checkbox__infoContainer{display:flex}.checkbox:not(.checkbox_labelTop){gap:var(--guit-ref-spacing-4xsmall)}.checkbox:not(.checkbox_labelTop) .checkbox__infoContainer{padding-inline-start:var(--guit-ref-spacing-4xlarge)}.checkbox:not(.checkbox_labelTop) .checkbox__label{gap:var(--guit-ref-spacing-xsmall)}.checkbox_labelTop{gap:var(--guit-ref-spacing-3xsmall)}.checkbox_labelTop .checkbox__label{align-items:normal;flex-direction:column-reverse;gap:var(--guit-ref-spacing-3xsmall)}.checkbox_error .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation{border-color:var(--guit-sem-color-border-error)}.checkbox_disabled{pointer-events:none;-webkit-user-select:none;user-select:none}.checkbox_disabled .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation{background-color:var(--guit-sem-color-background-disabled);border-color:var(--guit-sem-color-border-disabled-1)}.checkbox_disabled .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation .checkbox__icon{color:var(--guit-sem-color-foreground-disabled)}.checkbox_disabled .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation{background-color:var(--guit-sem-color-background-transparent-1)}.checkbox_readOnly{pointer-events:none}.checkbox_readOnly .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation{background-color:var(--guit-sem-color-background-neutral-3);border-color:#0000}.checkbox_readOnly .checkbox__imitationHolder .checkbox__imitationHolderInner .checkbox__imitation .checkbox__icon{color:var(--guit-sem-color-foreground-neutral-1)}.checkbox_readOnly .checkbox__input:not(:checked,:indeterminate)+.checkbox__imitation{border-color:var(--guit-sem-color-border-neutral-2)}";
+styleInject(css_248z);
+
+/**
+ * Checkbox component allows users to select one or more options from a set of choices. Each checkbox can be either checked or unchecked, indicating a binary state. Checkboxes are commonly used in forms, settings, and lists where multiple selections are needed.
+ */
+const Checkbox = ({ label, required, infoText, disabled, helperText, readOnly, type = "rest", vertical, autoFocus, onChange, onFocus, onBlur, name, indeterminate, checked, defaultChecked, className }) => {
+    const interRef = useRef(null);
+    const isControlled = checked !== undefined;
+    const [checkedState, setCheckedState] = useState(defaultChecked || false);
+    const onChangeHandler = (e) => {
+        if (!isControlled) {
+            setCheckedState(e.target.checked);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    };
+    const onFocusHandler = (e) => onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    const onBlurHandler = (e) => onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    useEffect(() => {
+        if (isControlled) {
+            setCheckedState(!!checked);
+        }
+    }, [checked, isControlled]);
+    useEffect(() => {
+        if (interRef.current) {
+            interRef.current.indeterminate = !!indeterminate;
+        }
+    }, [indeterminate]);
+    const resolvedChecked = useMemo(() => {
+        const isIndeterminate = indeterminate && !checked;
+        if (isIndeterminate)
+            return false;
+        return isControlled ? checked : checkedState;
+    }, [checked, checkedState, indeterminate]);
+    return (React__default.createElement("div", Object.assign({ className: classNames("checkbox ", `checkbox_${type}`, {
+            checkbox_disabled: disabled,
+            checkbox_readOnly: readOnly,
+            checkbox_labelTop: vertical
+        }, className) }, ((disabled || readOnly) && { tabIndex: -1 })),
+        React__default.createElement(Label, { labelText: label, className: "checkbox__label", required: required, infoText: infoText, disabled: disabled, readOnly: readOnly },
+            React__default.createElement("span", { className: "checkbox__imitationHolder" },
+                React__default.createElement("span", { className: "checkbox__imitationHolderInner" },
+                    React__default.createElement("input", Object.assign({ type: "checkbox", className: "checkbox__input", onChange: onChangeHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, checked: resolvedChecked, ref: interRef }, (name && { name }), (autoFocus && { autoFocus }), ((disabled || readOnly) && { tabIndex: -1 }))),
+                    React__default.createElement("span", { className: "checkbox__imitation" }, indeterminate && !checked ? (React__default.createElement(SvgMinusOutline, { className: "checkbox__icon", size: 16 })) : (React__default.createElement(SvgCheckMark, { className: "checkbox__icon", size: 16 })))))),
+        helperText && (React__default.createElement("div", { className: "checkbox__infoContainer" },
+            React__default.createElement(HelperText, { text: helperText, isDisabled: disabled, type: type })))));
+};
+
+export { Checkbox as default };

package/HelperText.js

@@ -43,19 +43,19 @@ var SvgWarningFill = function SvgWarningFill(_ref) {
   }));
 };
 
-var css_248z = ".helperText{display:inline-flex;gap:var(--guit-ref-spacing-3xsmall);max-width:100%}.helperText_size_medium .helperText__text{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.helperText_size_small .helperText__text{font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}.helperText_type_rest{color:var(--guit-sem-color-foreground-neutral-2)}.helperText_type_danger{color:var(--guit-sem-color-foreground-error)}.helperText_type_warning{color:var(--guit-sem-color-foreground-neutral-2)}.helperText_type_warning .helperText__icon{color:var(--guit-sem-color-foreground-warning)}.helperText_disabled,.helperText_disabled .helperText__icon{color:var(--guit-sem-color-foreground-disabled)}.helperText__icon{flex:0 0 auto}";
+var css_248z = ".helperText{display:inline-flex;gap:var(--guit-ref-spacing-3xsmall);max-width:100%}.helperText_size_medium .helperText__text{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.helperText_size_small .helperText__text{font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}.helperText_type_rest{color:var(--guit-sem-color-foreground-neutral-2)}.helperText_type_error{color:var(--guit-sem-color-foreground-error)}.helperText_type_warning{color:var(--guit-sem-color-foreground-neutral-2)}.helperText_type_warning .helperText__icon{color:var(--guit-sem-color-foreground-warning)}.helperText_disabled,.helperText_disabled .helperText__icon{color:var(--guit-sem-color-foreground-disabled)}.helperText__icon{flex:0 0 auto}";
 styleInject(css_248z);
 
+const iconSize = {
+    small: 16,
+    medium: 20
+};
 /**
  * The Helper Text provides users with additional information or guidance related to a specific input field in a form. This text helps users understand the expected format, requirements, or purpose of the input, thereby improving form completion accuracy and user confidence.
  */
 const HelperText = ({ size = "medium", type = "rest", text, Icon, isDisabled, isLoading, className }) => {
-    const iconSize = {
-        small: 16,
-        medium: 20
-    };
     const iconMap = {
-        danger: React__default.createElement(SvgErrorAlertFill, { size: iconSize[size] }),
+        error: React__default.createElement(SvgErrorAlertFill, { size: iconSize[size] }),
         warning: React__default.createElement(SvgWarningFill, { size: iconSize[size] }),
         rest: Icon && React__default.createElement(Icon, { size: iconSize[size] })
     };

package/Label.js

@@ -8,7 +8,7 @@ import 'react-dom';
 import './GeneUIProvider.js';
 import './ArrowLeft-b88e2ba8.js';
 
-var css_248z = ".label{display:inline-flex;max-width:100%}.label,.label__container{align-items:center;min-width:0}.label__container{display:flex;gap:var(--guit-ref-spacing-3xsmall);width:100%}.label__container-inner{align-items:center;display:flex;gap:var(--guit-ref-spacing-4xsmall);max-width:100%}.label__asterisk,.label__text{color:var(--guit-sem-color-foreground-neutral-2)}.label__asterisk_size_medium,.label__text_size_medium{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.label__asterisk_size_small,.label__text_size_small{font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}.label__asterisk_disabled,.label__text_disabled{color:var(--guit-sem-color-foreground-disabled);pointer-events:none}";
+var css_248z = ".label{display:inline-flex;max-width:100%}.label,.label__container{align-items:center;min-width:0}.label__container{display:flex;gap:var(--guit-ref-spacing-3xsmall)}.label__container_readOnly{pointer-events:auto}.label__container-inner{align-items:center;display:flex;gap:var(--guit-ref-spacing-4xsmall);max-width:100%}.label__asterisk,.label__text{color:var(--guit-sem-color-foreground-neutral-2)}.label__asterisk_size_medium,.label__text_size_medium{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.label__asterisk_size_small,.label__text_size_small{font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}.label__asterisk_disabled,.label__text_disabled{color:var(--guit-sem-color-foreground-disabled);pointer-events:none}";
 styleInject(css_248z);
 
 const iconSizes = {
@@ -18,21 +18,21 @@ const iconSizes = {
 /**
  * Labels identify a component or group of components. Use them with elements such as checkboxes and input fields to guide users in providing specific information, or with plain text to organize information.
  */
-const Label = ({ size = "medium", labelText, disabled, required, infoText, isLoading, className, children }) => {
+const Label = ({ size = "medium", labelText, disabled, required, infoText, isLoading, className, children, readOnly }) => {
     const labelRef = useRef(null);
     const isTruncated = useEllipsisDetection(labelRef);
     return (React__default.createElement("label", { className: classNames(`label`, className) },
         children,
-        isLoading ? (React__default.createElement("span", null, "skeleton")) : (React__default.createElement("span", { className: "label__container" },
+        isLoading ? (React__default.createElement("span", null, "skeleton")) : (labelText && (React__default.createElement("span", { className: classNames("label__container", { label__container_readOnly: readOnly && !disabled }) },
             React__default.createElement("div", { className: "label__container-inner" },
-                React__default.createElement(Tooltip, { text: labelText, isVisible: isTruncated },
+                labelText && (React__default.createElement(Tooltip, { text: labelText, isVisible: isTruncated },
                     React__default.createElement("span", { ref: labelRef, className: classNames(`ellipsis-text label__text label__text_size_${size}`, {
                             label__text_disabled: disabled
-                        }) }, labelText)),
+                        }) }, labelText))),
                 required && (React__default.createElement("span", { className: classNames(`label__asterisk label__text_size_${size} `, {
                         label__text_disabled: disabled
                     }) }, "*"))),
-            infoText && React__default.createElement(Info, { infoText: infoText, disabled: disabled, size: iconSizes[size] })))));
+            infoText && React__default.createElement(Info, { infoText: infoText, disabled: disabled, size: iconSizes[size] }))))));
 };
 
 export { Label as default };

package/ProgressBar.js

@@ -0,0 +1,67 @@
+import React__default, { useState, useMemo, useEffect } from 'react';
+import { c as classNames } from './index-ce02421b.js';
+import HelperText from './HelperText.js';
+import Label from './Label.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './ArrowLeft-b88e2ba8.js';
+import './Tooltip.js';
+import 'react-dom';
+import './GeneUIProvider.js';
+import './useEllipsisDetection-46d712b6.js';
+import './Info.js';
+
+var css_248z = ".progressBar{display:flex;flex-direction:column;gap:var(--guit-ref-spacing-3xsmall);min-width:24rem;width:100%}.progressBar_type_determinate .progressBar__loadingBar,.progressBar_type_indeterminate .progressBar__fill{display:none}.progressBar_type_indeterminate .progressBar__loadingBar{animation-duration:1.6s;animation-iteration-count:infinite;animation-timing-function:var(--guit-ref-motion-easing-standard);will-change:transform}[dir=ltr] .progressBar_type_indeterminate .progressBar__loadingBar{animation-name:progress-bar-loading-from-left}[dir=rtl] .progressBar_type_indeterminate .progressBar__loadingBar{animation-name:progress-bar-loading-from-right}.progressBar_size_large .progressBar__status,.progressBar_size_medium .progressBar__status{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.progressBar_size_large .progressBar__track{border-radius:var(--guit-ref-radius-xsmall);height:var(--guit-sem-dimension-height-xsmall)}.progressBar_size_medium .progressBar__track{border-radius:var(--guit-ref-radius-2xsmall);height:var(--guit-sem-dimension-height-2xsmall)}.progressBar_size_small .progressBar__track{border-radius:var(--guit-ref-radius-3xsmall);height:var(--guit-sem-dimension-height-3xsmall)}.progressBar_size_small .progressBar__status{font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}.progressBar_color_default .progressBar__fill,.progressBar_color_default .progressBar__loadingBar{background-color:var(--guit-sem-color-background-brand-2)}.progressBar_color_success .progressBar__fill,.progressBar_color_success .progressBar__loadingBar{background-color:var(--guit-sem-color-background-success-2)}.progressBar_color_error .progressBar__fill,.progressBar_color_error .progressBar__loadingBar{background-color:var(--guit-sem-color-background-error-2)}.progressBar__track{background-color:var(--guit-sem-color-background-neutral-2);overflow:hidden;width:100%}.progressBar__fill,.progressBar__loadingBar{border-radius:inherit;height:100%}.progressBar__loadingBar{width:50%}.progressBar__info{align-items:flex-start;display:flex;gap:var(--guit-ref-spacing-xsmall);justify-content:space-between;width:100%}.progressBar__helperText{word-break:break-word}.progressBar__status{color:var(--guit-sem-color-foreground-neutral-2);display:inline-flex;flex:0 0 auto;gap:.4rem;margin-inline-start:auto}.progressBar__uploadingText{display:inline-block}@keyframes progress-bar-loading-from-left{0%{transform:translate3d(-100%,0,0)}to{transform:translate3d(200%,0,0)}}@keyframes progress-bar-loading-from-right{0%{transform:translate3d(100%,0,0)}to{transform:translate3d(-200%,0,0)}}";
+styleInject(css_248z);
+
+const helperTextTypeMap = {
+    default: "rest",
+    success: "rest",
+    error: "error"
+};
+const helperTextAndLabelSizeMap = {
+    large: "medium",
+    medium: "medium",
+    small: "small"
+};
+/**
+ * A progress bar offers visual feedback on the status and duration of a process, such as a download, file transfer, or installation, helping users understand how much longer they need to wait.
+ */
+const ProgressBar = ({ className, size = "medium", type = "determinate", error, helperText, percent, uploadingText, infoText, label }) => {
+    const [status, setStatus] = useState("default");
+    const isDeterminate = type === "determinate";
+    const isTypeDefault = status === "default";
+    const isPercentLowerThanMax = percent !== undefined && percent < 100;
+    const processedPercent = useMemo(() => {
+        let result = percent || 0;
+        if (result < 0 && !error)
+            result = 0;
+        if (result >= 100 || error)
+            result = 100;
+        return `${result}%`;
+    }, [percent, error]);
+    useEffect(() => {
+        if (error && status !== "error") {
+            setStatus("error");
+        }
+        else if (percent !== undefined && !error) {
+            if (percent >= 100 && status !== "success" && isDeterminate) {
+                setStatus("success");
+            }
+            else if ((!isTypeDefault && isPercentLowerThanMax && isDeterminate) || !isDeterminate) {
+                setStatus("default");
+            }
+        }
+    }, [error, isTypeDefault, status, percent, isDeterminate]);
+    return (React__default.createElement("div", { className: classNames(`progressBar progressBar_type_${error ? "determinate" : type} progressBar_size_${size} progressBar_color_${status}`, className) },
+        React__default.createElement(Label, { labelText: label, size: helperTextAndLabelSizeMap[size], infoText: infoText }),
+        React__default.createElement("div", { className: "progressBar__track" },
+            (isDeterminate || error) && React__default.createElement("div", { className: "progressBar__fill", style: { width: processedPercent } }),
+            React__default.createElement("div", { className: "progressBar__loadingBar" })),
+        React__default.createElement("div", { className: "progressBar__info" },
+            helperText && (React__default.createElement(HelperText, { text: helperText, size: helperTextAndLabelSizeMap[size], type: helperTextTypeMap[status], className: "progressBar__helperText" })),
+            isDeterminate && isTypeDefault && isPercentLowerThanMax && (React__default.createElement("p", { className: "progressBar__status" },
+                React__default.createElement("span", { className: "progressBar__uploadingText" }, uploadingText),
+                React__default.createElement("span", { className: "progressBar__percent" }, processedPercent))))));
+};
+
+export { ProgressBar as default };

package/components/atoms/HelperText/HelperText.d.ts

@@ -9,10 +9,10 @@ interface IHelperTextProps {
     size?: "medium" | "small";
     /**
      * Specifies the type of the helper text. <br>
-     * Possible values: `rest | danger | warning`.
-     * `rest` for default information, `danger` for error messages, or `warning` for cautions.
+     * Possible values: `rest | error | warning`.
+     * `rest` for default information, `error` for error messages, or `warning` for cautions.
      */
-    type?: "rest" | "danger" | "warning";
+    type?: "rest" | "error" | "warning";
     /**
      * The actual text content to be displayed as helper text.
      * This provides guidance or additional information related to the input field.
@@ -20,7 +20,7 @@ interface IHelperTextProps {
     text: string;
     /**
      * Optional. Icon to be displayed alongside the helper text.
-     * If the `type` prop is set to `danger` or `warning`, a default icon will be used (ErrorAlertFill for `danger` and WarningFill for `warning`) unless an `Icon` is explicitly provided.
+     * If the `type` prop is set to `error` or `warning`, a default icon will be used (ErrorAlertFill for `error` and WarningFill for `warning`) unless an `Icon` is explicitly provided.
      * If `type` is `rest`, the provided `Icon` will be used (if supplied), otherwise no icon will be displayed.
      * The size of the icon will automatically adjust based on the `size` prop (`small` or `medium`).
      */

package/components/atoms/Label/Label.d.ts

@@ -10,7 +10,7 @@ interface ILabelProps {
      * The text content of the `label`.
      * This is the main text displayed within the `label`.
      */
-    labelText: string;
+    labelText?: string;
     /**
      * Indicates whether the label represents a required field.
      * When set to `true`, a visual indicator (asterisk) will be added to denote that the field is required.
@@ -32,6 +32,11 @@ interface ILabelProps {
      * When set to `true` a `skeleton` indicator will be shown instead of the `label` text.
      */
     isLoading?: boolean;
+    /**
+     * Indicates whether the `label` should be read-only.
+     * This prop will not make visual changes but sets `pointer-events: auto` to prevent triggering label click events.
+     */
+    readOnly?: boolean;
     /**
      * Additional class for the parent element.
      * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.

package/components/molecules/Checkbox/Checkbox.d.ts

@@ -0,0 +1,80 @@
+import { ChangeEvent, FC, FocusEvent } from "react";
+import "./Checkbox.scss";
+interface ICheckboxProps {
+    /**
+     *  The text displayed as the label for the checkbox, describing its purpose or function.
+     */
+    label?: string;
+    /**
+     *  Toggles the label's and HelperText position between above or beside the checkbox.
+     */
+    vertical?: boolean;
+    /**
+     *  Specifies whether the checkbox is mandatory for completing a form.
+     */
+    required?: boolean;
+    /**
+     *  Disables the checkbox, preventing it from being interacted with.
+     */
+    disabled?: boolean;
+    /**
+     *  Displays the checkbox as read-only, where users cannot modify its value.
+     */
+    readOnly?: boolean;
+    /**
+     *  Activates a visual state indicating partial selection within a checkbox group.
+     */
+    indeterminate?: boolean;
+    /**
+     *  Manages the checked state of the checkbox in a controlled way.
+     */
+    checked?: boolean;
+    /**
+     *  Automatically focuses the checkbox when the component mounts.
+     */
+    autoFocus?: boolean;
+    /**
+     *  Extra information displayed with the label for clarity or guidance.
+     */
+    infoText?: string;
+    /**
+     *  Helper text to provide context or explain any errors, warnings related to the checkbox.
+     */
+    helperText?: string;
+    /**
+     *  The initial checked state of the checkbox before user interaction.
+     */
+    defaultChecked?: boolean;
+    /**
+     *  Determines the checkboxes appearance based on its status.<br>
+     *  Possible values: `rest | warning | error`
+     */
+    type?: "rest" | "warning" | "error";
+    /**
+     *  HTML name attribute for the input element.<br>
+     *  A unique identifier for the checkbox within a form.
+     */
+    name?: string;
+    /**
+     *  Fires when the user changes the checkbox state. Provides the change event as a callback's argument.
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     *  Event handler for when the checkbox input element loses focus. Provides the focus event as a callback's argument.
+     */
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     *  Event handler for when the checkbox input element receives focus. Provides the focus event as a callback's argument.
+     */
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Additional class for the parent element.
+     * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
+     */
+    className?: string;
+}
+/**
+ * Checkbox component allows users to select one or more options from a set of choices. Each checkbox can be either checked or unchecked, indicating a binary state. Checkboxes are commonly used in forms, settings, and lists where multiple selections are needed.
+ */
+declare const Checkbox: FC<ICheckboxProps>;
+export { ICheckboxProps, Checkbox as default };

package/components/molecules/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { ICheckboxProps, default } from "./Checkbox";

package/components/molecules/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,52 @@
+import { FC } from "react";
+import "./ProgressBar.scss";
+interface IProgressBarProps {
+    /**
+     * Specifies the progress percentage displayed by the progress bar.<br>
+     * Valid values are between `0` and `100`. Values less than `0` will fallback to `0`,
+     * and values greater than `100` will fallback to `100`.<br>
+     * In case of value is `100` or greater the style of the component will be changed to success.
+     */
+    percent?: number;
+    /**
+     * Text displayed alongside the progress percentage.
+     */
+    uploadingText?: string;
+    /**
+     * Defines the size of the progress bar.<br>
+     * Possible values: `large | medium | small`
+     */
+    size?: "large" | "medium" | "small";
+    /**
+     * Sets the behavior of the bar for measurable or ongoing processes.<br>
+     * Possible values: `determinate | indeterminate`
+     */
+    type?: "determinate" | "indeterminate";
+    /**
+     * Indicates an error state for the progress bar.<br>
+     *  When `true`, the progress bar appears in the error style.
+     */
+    error?: boolean;
+    /**
+     *  Adds supplementary information below the progress bar.
+     */
+    helperText?: string;
+    /**
+     *  Additional descriptive text shown with info icon and tooltip alongside of the label component.
+     */
+    infoText?: string;
+    /**
+     *  The main label text describing the progress bar's purpose.
+     */
+    label?: string;
+    /**
+     * Additional class for the parent element.
+     * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
+     */
+    className?: string;
+}
+/**
+ * A progress bar offers visual feedback on the status and duration of a process, such as a download, file transfer, or installation, helping users understand how much longer they need to wait.
+ */
+declare const ProgressBar: FC<IProgressBarProps>;
+export { IProgressBarProps, ProgressBar as default };

package/components/molecules/ProgressBar/index.d.ts

@@ -0,0 +1 @@
+export { IProgressBarProps, default } from "./ProgressBar";

package/index.d.ts

@@ -7,6 +7,7 @@ export { default as Divider, IDividerProps } from "./components/atoms/Divider";
 export { default as Info, IInfoProps } from "./components/atoms/Info";
 export { default as Button, IButtonProps } from "./components/atoms/Button";
 export { default as Tooltip } from "./components/molecules/Tooltip";
+export { default as ProgressBar } from "./components/molecules/ProgressBar";
 export { default as GeneUIProvider, GeneUIDesignSystemContext, IGeneUIDesignSystemContext, IGeneUIProviderProps } from "./components/providers/GeneUIProvider";
 export { default as useDebounce } from "./hooks/useDebounceCallback";
 export { default as useEllipsisDetection } from "./hooks/useEllipsisDetection";

package/index.js

@@ -7,6 +7,7 @@ export { default as Divider } from './Divider.js';
 export { default as Info } from './Info.js';
 export { default as Button } from './Button.js';
 export { default as Tooltip } from './Tooltip.js';
+export { default as ProgressBar } from './ProgressBar.js';
 export { GeneUIDesignSystemContext, default as GeneUIProvider } from './GeneUIProvider.js';
 export { u as useDebounce, a as useEllipsisDetection } from './useEllipsisDetection-46d712b6.js';
 import 'react';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@geneui/components",
     "description": "The Gene UI components library designed for BI tools",
-    "version": "3.0.0-next-d9fa1ce-06112024",
+    "version": "3.0.0-next-65b0240-02122024",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {