@geneui/components 3.0.0-next-fa49982-25032025 → 3.0.0-next-6c2658b-26032025

package/Checkbox.js

@@ -53,7 +53,7 @@ var SvgMinus = function SvgMinus(_ref) {
   }));
 };
 
-var css_248z = ".checkbox{display:inline-flex;flex-direction:column;max-width:100%;min-width:0}.checkbox__input{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;max-width:-moz-fit-content;max-width:fit-content}.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);left:0;opacity:0;position:absolute;top:0}.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)}";
+var css_248z = ".checkbox{display:inline-flex;flex-direction:column;max-width:100%;min-width:0}.checkbox__input{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;max-width:-moz-fit-content;max-width:fit-content}.checkbox__imitationHolder{align-items:center;display:flex;flex:0 0 auto;justify-content:center}.checkbox__imitationHolder:only-child{height:var(--guit-sem-dimension-height-small);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);left:0;opacity:0;position:absolute;top:0}.checkbox__infoContainer{display:flex}.checkbox:not(.checkbox_labelTop){gap:var(--guit-ref-spacing-3xsmall)}.checkbox:not(.checkbox_labelTop) .checkbox__infoContainer{padding-inline-start:var(--guit-ref-spacing-3xlarge)}.checkbox:not(.checkbox_labelTop) .checkbox__label{gap:var(--guit-ref-spacing-medium)}.checkbox_labelTop{gap:var(--guit-ref-spacing-3xsmall)}.checkbox_labelTop .checkbox__label{align-items:flex-start;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);
 
 /**

package/Radio.js

@@ -0,0 +1,57 @@
+import React__default, { useState, useEffect } from 'react';
+import { c as classNames } from './index-ce02421b.js';
+import { S as SvgCircleFilled } from './CircleFilled-19a9ec62.js';
+import HelperText from './HelperText.js';
+import Label from './Label.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './ActivityRecent-b88e2ba8.js';
+import './Error-e14cf0e1.js';
+import './TriangleAlert-14d7e83c.js';
+import './Tooltip.js';
+import './floating-ui.react-0485e4db.js';
+import 'react-dom';
+import './index-ae180991.js';
+import './useDebounceCallback-999deae7.js';
+import './useEllipsisDetection-dfe1a9d3.js';
+import './Info.js';
+import './InfoOutlined-fc7d9afa.js';
+
+var css_248z = ".radio{display:inline-flex;flex-direction:column;max-width:100%;min-width:0}.radio__input{appearance:none;background:none;border:none;border-radius:inherit;height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.radio__input:checked+.radio__imitation{border-color:var(--guit-sem-color-background-selected-2);color:var(--guit-sem-color-background-selected-2)}.radio__input:checked+.radio__imitation:hover{border-color:var(--guit-sem-color-background-selected-2-hover);color:var(--guit-sem-color-background-selected-2-hover)}.radio__input:checked+.radio__imitation:active{border-color:var(--guit-sem-color-background-selected-2-pressed);color:var(--guit-sem-color-background-selected-2-pressed)}.radio__input:checked+.radio__imitation .radio__icon{color:inherit;opacity:1}.radio__label{display:flex}.radio__imitationHolder{align-items:center;border-radius:50%;display:flex;flex:0 0 auto;justify-content:center}.radio__imitationHolder:only-child{height:var(--guit-sem-dimension-height-small);width:var(--guit-sem-dimension-width-small)}.radio__imitationHolder .radio__input:not(:checked)+.radio__imitation:hover{background-color:var(--guit-sem-color-background-transparent-1-hover)}.radio__imitationHolder .radio__input:not(:checked)+.radio__imitation:active{background-color:var(--guit-sem-color-background-transparent-1-pressed)}.radio__imitationHolderInner{border-radius:inherit;flex:0 0 auto;height:var(--guit-sem-dimension-height-xsmall);position:relative;width:var(--guit-sem-dimension-width-xsmall)}.radio__imitation,.radio__imitationHolderInner{align-items:center;display:flex;justify-content:center}.radio__imitation{border:var(--guit-ref-border-width-thin) solid var(--guit-sem-color-border-neutral-3);border-radius:inherit;height:100%;overflow:hidden;width:100%}.radio__icon{color:var(--guit-sem-color-foreground-inverse);flex:0 0 auto;opacity:0}.radio__infoContainer{display:flex}.radio:not(.radio_labelTop){gap:var(--guit-ref-spacing-3xsmall)}.radio:not(.radio_labelTop) .radio__infoContainer{padding-inline-start:var(--guit-ref-spacing-3xlarge)}.radio:not(.radio_labelTop) .radio__label{gap:var(--guit-ref-spacing-medium)}.radio_labelTop,.radio_labelTop .radio__label{gap:var(--guit-ref-spacing-3xsmall)}.radio_labelTop .radio__label{align-items:flex-start;flex-direction:column-reverse}.radio_error .radio__imitationHolder .radio__imitationHolderInner .radio__imitation{border-color:var(--guit-sem-color-border-error)}.radio_disabled{pointer-events:none;-webkit-user-select:none;user-select:none}.radio_disabled .radio__imitationHolder .radio__imitationHolderInner .radio__imitation{border-color:var(--guit-sem-color-border-disabled-1)}.radio_disabled .radio__imitationHolder .radio__imitationHolderInner .radio__imitation .radio__icon{color:var(--guit-sem-color-background-disabled)}.radio_disabled .radio__input:not(:checked)+.radio__imitation{border-color:var(--guit-sem-color-border-disabled-1)}.radio_readOnly{pointer-events:none}.radio_readOnly .radio__imitationHolder .radio__imitationHolderInner .radio__imitation{background-color:var(--guit-sem-color-background-neutral-3);border-color:#0000}.radio_readOnly .radio__imitationHolder .radio__imitationHolderInner .radio__imitation .radio__icon{color:var(--guit-sem-color-foreground-neutral-1)}.radio_readOnly .radio__input:not(:checked)+.radio__imitation{border-color:var(--guit-sem-color-border-neutral-2)}";
+styleInject(css_248z);
+
+/*
+ The radio component allows users to select one or more options from a set of choices. Each radio can be either checked or unchecked, indicating a binary state. Radios are commonly used in forms, settings, and lists where a user needs to select a single option from multiple options.
+*/
+const Radio = (props) => {
+    const { label, required, infoText, disabled, helperText, readOnly, type = "rest", direction = "horizontal ", autoFocus, onChange, onFocus, onBlur, name, checked, defaultChecked, className, value } = props;
+    const isControlled = "checked" in props;
+    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]);
+    return (React__default.createElement("div", Object.assign({ className: classNames("radio ", `radio_${type}`, {
+            radio_disabled: disabled,
+            radio_readOnly: readOnly,
+            radio_labelTop: direction === "vertical"
+        }, className) }, ((disabled || readOnly) && { tabIndex: -1 })),
+        React__default.createElement(Label, { labelText: label, className: "radio__label", required: required, infoText: infoText, disabled: disabled, readOnly: readOnly },
+            React__default.createElement("span", { className: "radio__imitationHolder" },
+                React__default.createElement("span", { className: "radio__imitationHolderInner" },
+                    React__default.createElement("input", Object.assign({ type: "radio", className: "radio__input", onChange: onChangeHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, checked: checkedState, value: value, name: name }, (autoFocus && { autoFocus }), ((disabled || readOnly) && { tabIndex: -1 }))),
+                    React__default.createElement("span", { className: "radio__imitation" },
+                        React__default.createElement(SvgCircleFilled, { className: "radio__icon" }))))),
+        helperText && (React__default.createElement("div", { className: "radio__infoContainer" },
+            React__default.createElement(HelperText, { text: helperText, isDisabled: disabled, type: type })))));
+};
+
+export { Radio as default };

package/components/atoms/Radio/Radio.d.ts

@@ -0,0 +1,78 @@
+import { ChangeEvent, FC, FocusEvent } from "react";
+import "./Radio.scss";
+interface IRadioProps {
+    /**
+     *  The text displayed as the label for the radio, describing its purpose or function.
+     */
+    label?: string;
+    /**
+     *  Toggles the label's and HelperText position between above or beside the radio.
+     *   Possible values: `horizontal | vertical`
+     */
+    direction?: "horizontal " | "vertical";
+    /**
+     *  Specifies whether the radio is mandatory for completing a form.
+     */
+    required?: boolean;
+    /**
+     *  Disables the radio, preventing it from being interacted with.
+     */
+    disabled?: boolean;
+    /**
+     *  Displays the radio as read-only, where users cannot modify its value.
+     */
+    readOnly?: boolean;
+    /**
+     *  Manages the checked state of the radio in a controlled way.
+     */
+    checked?: boolean;
+    /**
+     *  Automatically focuses the radio when the component mounts.
+     */
+    autoFocus?: boolean;
+    /**
+     *  Extra information displayed with the tooltip for clarity or guidance.
+     */
+    infoText?: string;
+    /**
+     *  Helper text to provide context or explain any errors, warnings related to the radio.
+     */
+    helperText?: string;
+    /**
+     *  The initial state of the radio was checked before user interaction. This prop does not make the component controlled.
+     */
+    defaultChecked?: boolean;
+    /**
+     *  Determines the radios 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 radio within a form.
+     */
+    name: string;
+    /**
+     *  Fires when the user changes the radio state. Provides the change event as a callback's argument.
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     *  Event handler for when the radio input element loses focus. Provides the focus event as a callback's argument.
+     */
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     *  Event handler for when the radio 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;
+    /**
+     * The value of the component that will be returned in the onChange event.
+     * */
+    value: string;
+}
+declare const Radio: FC<IRadioProps>;
+export { IRadioProps, Radio as default };

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

@@ -0,0 +1 @@
+export { IRadioProps, default } from "./Radio";

package/index.d.ts

@@ -6,6 +6,7 @@ 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 Radio } from "./components/atoms/Radio";
 export { default as Text, ITextProps } from "./components/atoms/Text";
 export { Popover, PopoverBody, PopoverFooter, PopoverFooterActions, IPopoverProps } from "./components/atoms/Popover";
 export { default as Badge, IBadgeProps } from "./components/atoms/Badge";

package/index.js

@@ -6,6 +6,7 @@ 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 Radio } from './Radio.js';
 export { default as Text } from './Text.js';
 export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions, u as useScrollLock } from './index-5a59c1ea.js';
 export { default as Badge } from './Badge.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-fa49982-25032025",
+    "version": "3.0.0-next-6c2658b-26032025",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {