@geneui/components 3.0.0-next-63cb5e7-01112024 → 3.0.0-next-f0c40b8-25112024

package/Button.js

@@ -0,0 +1,43 @@
+import React__default, { forwardRef } from 'react';
+import { c as classNames } from './index-ce02421b.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import Loader from './Loader.js';
+
+var css_248z = ".button{align-items:center;border-style:var(--guit-ref-border-style-solid);border-width:var(--guit-ref-border-width-thin);cursor:pointer;display:inline-flex;justify-content:center;min-width:-webkit-max-content;min-width:max-content;position:relative;-webkit-user-select:none;user-select:none}.button:not(.button_type_outline){border-color:var(--guit-ref-color-transparent-neutral-0-0)}.button_icon_before{flex-direction:row}.button_icon_after{flex-direction:row-reverse}.button_color_primary.button_type_fill{background-color:var(--guit-sem-color-background-brand-2);color:var(--guit-sem-color-foreground-inverse)}.button_color_primary.button_type_fill:hover{background-color:var(--guit-sem-color-background-brand-2-hover)}.button_color_primary.button_type_fill:active{background-color:var(--guit-sem-color-background-brand-2-pressed)}.button_color_primary.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_primary.button_type_outline{border-color:var(--guit-sem-color-border-brand);color:var(--guit-sem-color-foreground-brand)}.button_color_primary.button_type_outline:hover{background-color:var(--guit-sem-color-background-brand-1-hover)}.button_color_primary.button_type_outline:active{background-color:var(--guit-sem-color-background-brand-1-pressed)}.button_color_primary.button_type_outline:disabled{border-color:var(--guit-sem-color-border-disabled-1)}.button_color_primary.button_type_text{color:var(--guit-sem-color-foreground-brand)}.button_color_primary.button_type_text:hover{background-color:var(--guit-sem-color-background-brand-1-hover)}.button_color_primary.button_type_text:active{background-color:var(--guit-sem-color-background-brand-1-pressed)}.button_color_secondary.button_type_fill{background-color:var(--guit-sem-color-background-neutral-2);color:var(--guit-sem-color-foreground-neutral-2)}.button_color_secondary.button_type_fill:hover{background-color:var(--guit-sem-color-background-neutral-2-hover)}.button_color_secondary.button_type_fill:active{background-color:var(--guit-sem-color-background-neutral-2-pressed)}.button_color_secondary.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_secondary.button_type_outline{background-color:var(--guit-sem-color-background-transparent-1);border-color:var(--guit-sem-color-border-neutral-2);color:var(--guit-sem-color-foreground-neutral-2)}.button_color_secondary.button_type_outline:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}.button_color_secondary.button_type_outline:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.button_color_secondary.button_type_outline:disabled{border-color:var(--guit-sem-color-border-disabled-1)}.button_color_secondary.button_type_text{background-color:var(--guit-sem-color-background-transparent-1);color:var(--guit-sem-color-foreground-neutral-2)}.button_color_secondary.button_type_text:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}.button_color_secondary.button_type_text:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.button_color_danger.button_type_fill{background-color:var(--guit-sem-color-background-error-2);color:var(--guit-sem-color-foreground-inverse)}.button_color_danger.button_type_fill:hover{background-color:var(--guit-sem-color-background-error-2-hover)}.button_color_danger.button_type_fill:active{background-color:var(--guit-sem-color-background-error-2-pressed)}.button_color_danger.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_danger.button_type_outline{border-color:var(--guit-sem-color-border-error);color:var(--guit-sem-color-foreground-error)}.button_color_danger.button_type_outline:hover{background-color:var(--guit-sem-color-background-error-1-hover)}.button_color_danger.button_type_outline:active{background-color:var(--guit-sem-color-background-error-1-pressed)}.button_color_danger.button_type_outline:disabled{border-color:var(--guit-sem-color-border-disabled-1)}.button_color_danger.button_type_text{background-color:var(--guit-sem-color-background-transparent-1);color:var(--guit-sem-color-foreground-error)}.button_color_danger.button_type_text:hover{background-color:var(--guit-sem-color-background-error-1-hover)}.button_color_danger.button_type_text:active{background-color:var(--guit-sem-color-background-error-1-pressed)}.button_color_success.button_type_fill{background-color:var(--guit-sem-color-background-success-2);color:var(--guit-sem-color-foreground-neutral-2-notheme)}.button_color_success.button_type_fill:hover{background-color:var(--guit-sem-color-background-success-2-hover)}.button_color_success.button_type_fill:active{background-color:var(--guit-sem-color-background-success-2-pressed)}.button_color_success.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_success.button_type_outline{border-color:var(--guit-sem-color-border-success);color:var(--guit-sem-color-foreground-success)}.button_color_success.button_type_outline:hover{background-color:var(--guit-sem-color-background-success-1-hover)}.button_color_success.button_type_outline:active{background-color:var(--guit-sem-color-background-success-1-pressed)}.button_color_success.button_type_outline:disabled{border-color:var(--guit-sem-color-border-disabled-1)}.button_color_success.button_type_text{background-color:var(--guit-sem-color-background-transparent-1);color:var(--guit-sem-color-foreground-success)}.button_color_success.button_type_text:hover{background-color:var(--guit-sem-color-background-success-1-hover)}.button_color_success.button_type_text:active{background-color:var(--guit-sem-color-background-success-1-pressed)}.button_color_inverse.button_type_fill{background-color:var(--guit-sem-color-background-inverse);color:var(--guit-sem-color-foreground-neutral-2)}.button_color_inverse.button_type_fill:hover{background-color:var(--guit-sem-color-background-inverse-hover)}.button_color_inverse.button_type_fill:active{background-color:var(--guit-sem-color-background-inverse-pressed)}.button_color_inverse.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_inverse.button_type_outline{background-color:var(--guit-sem-color-background-transparent-1);border-color:var(--guit-sem-color-border-inverse);color:var(--guit-sem-color-foreground-inverse)}.button_color_inverse.button_type_outline:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}.button_color_inverse.button_type_outline:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.button_color_inverse.button_type_outline:disabled{border-color:var(--guit-sem-color-border-inverse-disabled);color:var(--guit-sem-color-foreground-inverse-disabled)}.button_color_inverse.button_type_text{background-color:var(--guit-sem-color-background-transparent-1);color:var(--guit-sem-color-foreground-inverse)}.button_color_inverse.button_type_text:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}.button_color_inverse.button_type_text:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.button_color_inverse.button_type_text:disabled{color:var(--guit-sem-color-foreground-inverse-disabled)}.button_color_transparent.button_type_fill{background-color:var(--guit-sem-color-background-transparent-inverse-2);color:var(--guit-sem-color-foreground-inverse)}.button_color_transparent.button_type_fill:hover{background-color:var(--guit-sem-color-background-transparent-inverse-2-hover)}.button_color_transparent.button_type_fill:active{background-color:var(--guit-sem-color-background-transparent-inverse-2-pressed)}.button_color_transparent.button_type_fill:disabled{background-color:var(--guit-sem-color-background-disabled)}.button_color_transparent.button_type_outline{border-color:var(--guit-sem-color-border-inverse);color:var(--guit-sem-color-foreground-inverse)}.button_color_transparent.button_type_outline:hover{background-color:var(--guit-sem-color-background-transparent-inverse-2-hover)}.button_color_transparent.button_type_outline:active{background-color:var(--guit-sem-color-background-transparent-inverse-2-pressed)}.button_color_transparent.button_type_outline:disabled{border-color:var(--guit-sem-color-border-inverse-disabled);color:var(--guit-sem-color-foreground-disabled)}.button_color_transparent.button_type_text{background-color:var(--guit-sem-color-background-transparent-inverse-1);color:var(--guit-sem-color-foreground-inverse)}.button_color_transparent.button_type_text:hover{background-color:var(--guit-sem-color-background-transparent-inverse-2-hover)}.button_color_transparent.button_type_text:active{background-color:var(--guit-sem-color-background-transparent-inverse-2-pressed)}.button_color_transparent.button_type_text:disabled{color:var(--guit-sem-color-foreground-disabled)}.button_size_large{border-radius:var(--guit-ref-radius-2xsmall);gap:var(--guit-ref-spacing-xsmall);height:var(--guit-sem-dimension-height-large)}.button_size_large:not(.button_icon_only){padding-bottom:var(--guit-ref-spacing-small);padding-top:var(--guit-ref-spacing-small)}.button_size_large:not(.button_icon_before,.button_size_large.button_icon_after,.button_icon_only){min-width:var(--guit-sem-dimension-width-2xlarge);padding-inline-end:var(--guit-ref-spacing-large);padding-inline-start:var(--guit-ref-spacing-large)}.button_size_large.button_icon_after,.button_size_large.button_icon_before{min-width:var(--guit-sem-dimension-width-5xlarge)}.button_size_large.button_icon_before{padding-inline-end:var(--guit-ref-spacing-large);padding-inline-start:var(--guit-ref-spacing-medium)}.button_size_large.button_icon_after{padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-large)}.button_size_large.button_icon_only{min-width:var(--guit-sem-dimension-width-large);padding:var(--guit-ref-spacing-small)}.button_size_medium{border-radius:var(--guit-ref-radius-3xsmall);gap:var(--guit-ref-spacing-xsmall);height:var(--guit-sem-dimension-height-medium)}.button_size_medium:not(.button_icon_only){padding-bottom:var(--guit-ref-spacing-2xsmall);padding-top:var(--guit-ref-spacing-2xsmall)}.button_size_medium:not(.button_icon_before,.button_size_medium.button_icon_after,.button_icon_only){min-width:var(--guit-sem-dimension-width-2xlarge);padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-medium)}.button_size_medium.button_icon_after,.button_size_medium.button_icon_before{min-width:var(--guit-sem-dimension-width-3xlarge)}.button_size_medium.button_icon_before{padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-xsmall)}.button_size_medium.button_icon_after{padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-medium)}.button_size_medium.button_icon_only{min-width:var(--guit-sem-dimension-width-medium);padding:var(--guit-ref-spacing-2xsmall)}.button_size_small{border-radius:var(--guit-ref-radius-3xsmall);gap:var(--guit-ref-spacing-2xsmall);height:var(--guit-sem-dimension-height-small)}.button_size_small:not(.button_icon_only){padding-bottom:var(--guit-ref-spacing-4xsmall);padding-top:var(--guit-ref-spacing-4xsmall)}.button_size_small:not(.button_icon_before,.button_size_small.button_icon_after,.button_icon_only){min-width:var(--guit-sem-dimension-width-2xlarge);padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-medium)}.button_size_small.button_icon_after,.button_size_small.button_icon_before{min-width:var(--guit-sem-dimension-width-3xlarge)}.button_size_small.button_icon_before{padding-inline-end:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-xsmall)}.button_size_small.button_icon_after{padding-inline-end:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-medium)}.button_size_small.button_icon_only{min-width:var(--guit-sem-dimension-width-small);padding:var(--guit-ref-spacing-4xsmall)}.button_size_XSmall{border-radius:var(--guit-ref-radius-4xsmall);height:var(--guit-sem-dimension-height-small-nudge)}.button_size_XSmall.button_icon_only{min-width:var(--guit-sem-dimension-width-small-nudge);padding:var(--guit-ref-spacing-4xsmall)}.button_fullWidth{width:100%}.button_loading .button__loader{visibility:visible}.button_loading .button__icon,.button_loading .button__text{visibility:hidden}.button.disabled,.button:disabled{color:var(--guit-sem-color-foreground-disabled);pointer-events:none}.button__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-semibold-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.button__icon{flex:0 0 auto}.button__loader{align-items:center;border-radius:inherit;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;visibility:hidden;width:100%}";
+styleInject(css_248z);
+
+const iconSizes = {
+    large: 20,
+    medium: 20,
+    small: 20,
+    XSmall: 16
+};
+const loadingTypes = {
+    primary: { fill: "inverse", outline: "brand", text: "brand" },
+    secondary: { fill: "neutral", outline: "neutral", text: "neutral" },
+    danger: { fill: "inverse", outline: "neutral", text: "neutral" },
+    success: { fill: "neutral", outline: "neutral", text: "neutral" },
+    inverse: { fill: "neutral", outline: "inverse", text: "inverse" },
+    transparent: { fill: "inverse", outline: "inverse", text: "inverse" }
+};
+/**
+ * Button initiates an action or event. Use buttons for key actions like submitting a form, saving changes, or advancing to the next step.
+ */
+const Button = forwardRef(({ appearance = "primary", disabled, fullWidth, name, size = "medium", displayType = "fill", text, Icon, onClick, className, iconAfter, isLoading }, ref) => {
+    const isSizeXS = size === "XSmall";
+    const isTextDisplayForXS = (appearance === "primary" || appearance === "danger" || appearance === "success") && isSizeXS;
+    return (React__default.createElement("button", { ref: ref, name: name, type: "button", onClick: onClick, disabled: disabled, className: classNames(`button button_size_${size} 
+                    button_color_${appearance} 
+                    button_type_${isTextDisplayForXS ? "text" : displayType}`, className, {
+            button_fullWidth: fullWidth,
+            button_icon_before: !iconAfter && Icon && text,
+            button_icon_after: iconAfter && Icon && text,
+            button_icon_only: (!text || isSizeXS) && Icon,
+            button_loading: isLoading
+        }) },
+        isLoading && (React__default.createElement(Loader, { size: "smallNudge", className: "button__loader", appearance: loadingTypes[appearance][displayType] })),
+        Icon && React__default.createElement(Icon, { size: iconSizes[size], className: "button__icon" }),
+        text && !isSizeXS && React__default.createElement("span", { className: "button__text" }, text)));
+});
+
+export { Button as default };

package/HelperText.js

@@ -46,14 +46,14 @@ 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}";
 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] }),
         warning: React__default.createElement(SvgWarningFill, { size: iconSize[size] }),

package/Loader.js

@@ -7,15 +7,15 @@ styleInject(css_248z);
 /**
  *Loading spinner is a visual indicator that informs users an operation is in progress. Typically displayed as a rotating icon or circular animation, it signals that the system is working on a task, such as loading data or processing a request, and that the user should wait until the process is complete.
  */
-const Loader = ({ isLoading = true, text, textPosition = "after", size = "medium", appearance = "brand", children = null }) => {
+const Loader = ({ isLoading = true, text, textPosition = "after", size = "medium", appearance = "brand", children, className = "" }) => {
     if (isLoading) {
-        return (React__default.createElement("span", { className: `loader loader_direction_${textPosition} loader_size_${size} loader_color_${appearance}` },
+        return (React__default.createElement("span", { className: `loader loader_direction_${textPosition} loader_size_${size} loader_color_${appearance} ${className}` },
             React__default.createElement("span", { className: "loader__spinnerWrapper" },
                 React__default.createElement("svg", { className: "loader__spinner", viewBox: "0 0 50 50" },
                     React__default.createElement("circle", { className: "loader__spinnerPath", cx: "25", cy: "25", r: "22", fill: "none", strokeWidth: "5" }))),
             text && React__default.createElement("span", { className: `loader__text loader__textColor_${appearance}` }, text)));
     }
-    return children;
+    return React__default.createElement(React__default.Fragment, null, children);
 };
 
 export { Loader 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: "danger"
+};
+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/Button/Button.d.ts

@@ -0,0 +1,64 @@
+import React, { FC, MouseEvent } from "react";
+import { IconProps } from "@geneui/icons";
+import "./Button.scss";
+interface IButtonProps {
+    /**
+     * Specifies the name of the `button`, which can be useful for form submission to identify which button was clicked.
+     */
+    name?: string;
+    /**
+     * Size <br>
+     * Possible values: `large | medium | small`
+     */
+    size?: "large" | "medium" | "small" | "XSmall";
+    /**
+     * If `true`, the `button` will stretch to occupy the full width of its container.
+     */
+    fullWidth?: boolean;
+    /**
+     * Indicates whether the `button` is `disabled`, preventing user interaction, focus, click etc...
+     */
+    disabled?: boolean;
+    /**
+     * Affect form styling point of view. <br>
+     * Possible values: `fill | outline | text`
+     */
+    displayType?: "fill" | "outline" | "text";
+    /**
+     * Indicates the action meaning. <br>
+     * Possible values: `primary | secondary | danger | success | inverse | transparent`
+     */
+    appearance?: "primary" | "secondary" | "danger" | "success" | "inverse" | "transparent";
+    /**
+     * The text will shown as content of the `button`.
+     */
+    text?: string;
+    /**
+     * The `Icon` prop accepts a React Functional Component that will be displayed alongside the button text.
+     */
+    Icon?: FC<IconProps>;
+    /**
+     * A callback function that is called when the `button` is clicked or entered. <br>
+     * It receives an argument containing the event object, which can be a mouse or keyboard event.
+     */
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Icon position <br>
+     * If the prop is `true` the `Icon` will be shown after the `text` otherwise before the `text`.
+     */
+    iconAfter?: boolean;
+    /**
+     * The prop responsible for showing the loading spinner if passed `true`. The default value is `false`
+     */
+    isLoading?: boolean;
+    /**
+     * Additional class for the parent element.<br>
+     * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
+     */
+    className?: string;
+}
+/**
+ * Button initiates an action or event. Use buttons for key actions like submitting a form, saving changes, or advancing to the next step.
+ */
+declare const Button: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { IButtonProps, Button as default };

package/components/atoms/Button/index.d.ts

@@ -0,0 +1 @@
+export { IButtonProps, default } from "./Button";

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.

package/components/atoms/Loader/Loader.d.ts

@@ -28,6 +28,10 @@ interface ILoaderProps {
      *  Possible values: `below | after`
      */
     textPosition?: "below" | "after";
+    /**
+     * Additional className
+     */
+    className?: string;
 }
 /**
  *Loading spinner is a visual indicator that informs users an operation is in progress. Typically displayed as a rotating icon or circular animation, it signals that the system is working on a task, such as loading data or processing a request, and that the user should wait until the process is complete.

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

@@ -5,7 +5,9 @@ export { default as Loader, ILoaderProps } from "./components/atoms/Loader";
 export { default as Pill, IPillProps } from "./components/atoms/Pill";
 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

@@ -5,7 +5,9 @@ export { default as Loader } from './Loader.js';
 export { default as Pill } from './Pill.js';
 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-63cb5e7-01112024",
+    "version": "3.0.0-next-f0c40b8-25112024",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {