@geneui/components 3.0.0-next-48d0ef7-31102024 → 3.0.0-next-d9fa1ce-06112024

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/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/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/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/index.d.ts

@@ -5,6 +5,7 @@ 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 GeneUIProvider, GeneUIDesignSystemContext, IGeneUIDesignSystemContext, IGeneUIProviderProps } from "./components/providers/GeneUIProvider";
 export { default as useDebounce } from "./hooks/useDebounceCallback";

package/index.js

@@ -5,6 +5,7 @@ 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 { GeneUIDesignSystemContext, default as GeneUIProvider } from './GeneUIProvider.js';
 export { u as useDebounce, a as useEllipsisDetection } from './useEllipsisDetection-46d712b6.js';

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-48d0ef7-31102024",
+    "version": "3.0.0-next-d9fa1ce-06112024",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {