@geneui/components 3.0.0-next-fa49982-25032025 → 3.0.0-next-40cb9fb-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/Popover.js

@@ -1,4 +1,4 @@
-export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions } from './index-5a59c1ea.js';
+export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions } from './index-787461ac.js';
 import 'react';
 import './floating-ui.react-0485e4db.js';
 import 'react-dom';

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

@@ -1,17 +1,22 @@
-import { Dispatch, FC, ReactNode, SetStateAction } from "react";
+import React, { Dispatch, ReactNode, SetStateAction } from "react";
+import { ReferenceType } from "@floating-ui/react";
 import "./Popover.scss";
 type Positions = "bottom" | "bottom-start" | "bottom-end" | "left-end" | "left" | "left-start" | "right-end" | "right" | "right-start" | "top" | "top-start" | "top-end" | "auto";
 export declare const correctPosition: Record<string, Positions>;
 export type StaticSides = "bottom" | "left" | "right" | "top";
 export declare const staticSides: Record<string, StaticSides>;
+export interface IPopoverRef {
+    referenceElement: React.MutableRefObject<ReferenceType | null>;
+    floatingElement: React.MutableRefObject<ReferenceType | null>;
+}
 export interface IPopoverProps {
     /**
      * Whether the popover is open initially. Defaults value is `false`.
      */
-    isOpen?: boolean;
+    defaultOpen?: boolean;
     /**
      * Define width and height of the popover.<br>
-     * Possible values: <code> xLarge | large | medium | small </code>
+     * Possible values: <code> xLarge | large | medium | small | mobile </code>
      */
     size?: "xLarge" | "large" | "medium" | "small" | "mobile";
     /**
@@ -24,13 +29,9 @@ export interface IPopoverProps {
      */
     position?: keyof typeof correctPosition;
     /**
-     * Padding between the popover and its target element.
-     */
-    padding?: number;
-    /**
-     * If `true`, the popover is always visible.
+     * Margin between the popover and its target element.
      */
-    alwaysShow?: boolean;
+    margin?: number;
     /**
      * Function to update popover props dynamically.
      */
@@ -53,6 +54,14 @@ export interface IPopoverProps {
      * You are, however, supplied with nudgedLeft and nudgedTop values, so you may choose to handle content overflow as you wish.
      */
     disableReposition?: boolean;
+    /**
+     * A callback function that is called when the popover needs to be closed.
+     */
+    onClose?: () => void;
+    /**
+     * Use `open` prop to control open state. By default, open is controls by component.
+     */
+    open?: boolean;
 }
 /**
  Popover displays additional content or information in an overlay box.
@@ -60,5 +69,5 @@ export interface IPopoverProps {
  such as a click or hover. Unlike tooltips, popovers can contain more
  complex and interactive content, including text, images, and form elements.
 */
-declare const Popover: FC<IPopoverProps>;
+declare const Popover: React.ForwardRefExoticComponent<IPopoverProps & React.RefAttributes<IPopoverRef>>;
 export default Popover;

package/components/atoms/Popover/PopoverBody.d.ts

@@ -1,3 +1,14 @@
 import { FC, PropsWithChildren } from "react";
-declare const PopoverBody: FC<PropsWithChildren>;
+interface IPopoverBodyProps extends PropsWithChildren {
+    /**
+     * 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;
+    /**
+     * By default the PopoverBody has <code>--guit-ref-spacing-large</code> padding.
+     */
+    withPadding?: boolean;
+}
+declare const PopoverBody: FC<IPopoverBodyProps>;
 export default PopoverBody;

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

@@ -1,4 +1,4 @@
-export { IPopoverProps, default as Popover } from "./Popover";
+export { IPopoverProps, IPopoverRef, default as Popover } from "./Popover";
 export { default as PopoverBody } from "./PopoverBody";
 export { default as PopoverFooter } from "./PopoverFooter";
 export { default as PopoverFooterActions } from "./PopoverFooterActions";

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-5a59c1ea.js → index-787461ac.js}

@@ -1,12 +1,13 @@
-import React__default, { useRef, useCallback, useEffect, useState, useContext, useLayoutEffect } from 'react';
+import React__default, { useRef, useCallback, useEffect, forwardRef, useState, useContext, useImperativeHandle, useLayoutEffect } from 'react';
 import { u as useFloating, p as platform, o as offset, f as flip, a as arrow, s as shift, b as autoUpdate, c as useDismiss, d as useClick, e as useRole, g as useInteractions, F as FloatingPortal } from './floating-ui.react-0485e4db.js';
 import { S as SvgInfoOutlined } from './InfoOutlined-fc7d9afa.js';
 import { S as SvgX } from './X-9c317d18.js';
 import { s as styleInject } from './style-inject.es-746bb8ed.js';
 import { a as GeneUIDesignSystemContext } from './index-ae180991.js';
 import Button from './Button.js';
+import { c as classNames } from './index-ce02421b.js';
 
-var css_248z = ".popover{background-color:var(--guit-sem-color-background-neutral-1-nudge);border-top-left-radius:var(--guit-ref-radius-2xsmall);border-top-right-radius:var(--guit-ref-radius-2xsmall);filter:drop-shadow(var(--guit-sem-shadow-floating-2-position-x-1) var(--guit-sem-shadow-floating-2-position-y-1) var(--guit-sem-shadow-floating-2-blur-1) var(--guit-sem-color-floating-2-rgba-1)) drop-shadow(var(--guit-sem-shadow-floating-2-position-x-2) var(--guit-sem-shadow-floating-2-position-y-2) var(--guit-sem-shadow-floating-2-blur-2) var(--guit-sem-color-floating-2-rgba-2))}.popover:not(.popover_size_mobile){border-bottom-left-radius:var(--guit-ref-radius-2xsmall);border-bottom-right-radius:var(--guit-ref-radius-2xsmall)}.popover:not(.popover_size_mobile) .popover__arrow{position:absolute}.popover:not(.popover_size_mobile) .popover__arrowPath{fill:var(--guit-sem-color-background-neutral-1-nudge)}.popover_position_top .popover__arrow{transform:rotate(180deg)}.popover_position_bottom .popover__arrow{transform:rotate(0deg)}.popover_position_left .popover__arrow{transform:rotate(90deg)}.popover_position_right .popover__arrow{transform:rotate(-90deg)}.popover_size_xLarge{width:72rem}.popover_size_xLarge .popover__body{height:15.4rem}.popover_size_xLarge .popover__footer{height:6.4rem}.popover_size_large{width:48rem}.popover_size_medium{width:36rem}.popover_size_large .popover__body,.popover_size_medium .popover__body{height:17.2rem}.popover_size_large .popover__footer,.popover_size_medium .popover__footer{height:5.6rem}.popover_size_small{width:24rem}.popover_size_small .popover__body{height:8.8rem}.popover_size_small .popover__footer{height:5.6rem}.popover_size_mobile{min-width:32rem;width:100%}.popover_size_mobile .popover__body{height:17.2rem}.popover_size_mobile .popover__footer{height:6.4rem}.popover__header{border-bottom:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);height:4.8rem;justify-content:space-between;padding-inline:var(--guit-ref-spacing-large)}.popover__header,.popover__title{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.popover__title{color:var(--guit-sem-color-foreground-neutral-2);flex:1;overflow:hidden}.popover__title_icon{flex:0 0 auto}.popover__title_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)}.popover__close{flex:0 0 auto}.popover__body{padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__content{height:100%;overflow-y:auto;width:100%}.popover__footer{border-top:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);justify-content:space-between;padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__footer,.popover__footer_buttons{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.popover__footer_buttons{margin-inline-start:auto}";
+var css_248z = ".popover{background-color:var(--guit-sem-color-background-neutral-1-nudge);border-top-left-radius:var(--guit-ref-radius-2xsmall);border-top-right-radius:var(--guit-ref-radius-2xsmall);filter:drop-shadow(var(--guit-sem-shadow-floating-2-position-x-1) var(--guit-sem-shadow-floating-2-position-y-1) var(--guit-sem-shadow-floating-2-blur-1) var(--guit-sem-color-floating-2-rgba-1)) drop-shadow(var(--guit-sem-shadow-floating-2-position-x-2) var(--guit-sem-shadow-floating-2-position-y-2) var(--guit-sem-shadow-floating-2-blur-2) var(--guit-sem-color-floating-2-rgba-2))}.popover:not(.popover_size_mobile){border-bottom-left-radius:var(--guit-ref-radius-2xsmall);border-bottom-right-radius:var(--guit-ref-radius-2xsmall)}.popover:not(.popover_size_mobile) .popover__arrow{position:absolute}.popover:not(.popover_size_mobile) .popover__arrowPath{fill:var(--guit-sem-color-background-neutral-1-nudge)}.popover_position_top .popover__arrow{transform:rotate(180deg)}.popover_position_bottom .popover__arrow{transform:rotate(0deg)}.popover_position_left .popover__arrow{transform:rotate(90deg)}.popover_position_right .popover__arrow{transform:rotate(-90deg)}.popover_size_xLarge{width:72rem}.popover_size_xLarge .popover__body{height:15.4rem}.popover_size_xLarge .popover__footer{height:6.4rem}.popover_size_large{width:48rem}.popover_size_medium{width:36rem}.popover_size_large .popover__body,.popover_size_medium .popover__body{height:17.2rem}.popover_size_large .popover__footer,.popover_size_medium .popover__footer{height:5.6rem}.popover_size_small{width:24rem}.popover_size_small .popover__body{height:8.8rem}.popover_size_small .popover__footer{height:5.6rem}.popover_size_mobile{min-width:32rem;width:100%}.popover_size_mobile .popover__body{height:17.2rem}.popover_size_mobile .popover__footer{height:6.4rem}.popover__header{border-bottom:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);height:4.8rem;justify-content:space-between;padding-inline:var(--guit-ref-spacing-large)}.popover__header,.popover__title{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.popover__title{color:var(--guit-sem-color-foreground-neutral-2);flex:1;overflow:hidden}.popover__title_icon{flex:0 0 auto}.popover__title_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)}.popover__close{flex:0 0 auto}.popover__body_withPadding{padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__content{height:100%;width:100%}.popover__footer{border-top:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);justify-content:space-between;padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__footer,.popover__footer_buttons{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.popover__footer_buttons{margin-inline-start:auto}";
 styleInject(css_248z);
 
 const SCROLL_LOCK_CLASS = "scroll-lock";
@@ -183,9 +184,9 @@ const staticSides = {
  such as a click or hover. Unlike tooltips, popovers can contain more
  complex and interactive content, including text, images, and form elements.
 */
-const Popover = ({ size = "medium", position = "bottom-center", padding = 10, isOpen = false, alwaysShow, setProps, title, withArrow = true, children, disableReposition = true }) => {
+const Popover = forwardRef(({ size = "medium", position = "bottom-center", margin = 10, defaultOpen = false, setProps, title, withArrow = true, children, disableReposition = false, onClose, open }, popoverRef) => {
     const { lock: lockBodyScroll, unlock: unlockBodyScroll } = useScrollLock(document.body);
-    const [popoverOpened, setPopoverOpened] = useState(isOpen);
+    const [popoverOpened, setPopoverOpened] = useState(defaultOpen);
     const { geneUIProviderRef } = useContext(GeneUIDesignSystemContext);
     const [currentPosition, setCurrentPosition] = useState(correctPosition[position]);
     const arrowRef = useRef(null);
@@ -196,7 +197,7 @@ const Popover = ({ size = "medium", position = "bottom-center", padding = 10, is
         placement: currentPosition,
         platform: Object.assign(Object.assign({}, platform), { isRTL: () => false }),
         middleware: [
-            offset(padding),
+            offset(margin),
             flip({
                 mainAxis: position !== "auto" && !disableReposition,
                 fallbackAxisSideDirection: "none",
@@ -216,6 +217,17 @@ const Popover = ({ size = "medium", position = "bottom-center", padding = 10, is
         ],
         whileElementsMounted: autoUpdate
     });
+    useImperativeHandle(popoverRef, () => {
+        return {
+            referenceElement: refs.reference,
+            floatingElement: refs.floating
+        };
+    }, []);
+    useEffect(() => {
+        if (!popoverOpened && onClose) {
+            onClose();
+        }
+    }, [popoverOpened]);
     useDismiss(context, {
         outsidePressEvent: "click"
     });
@@ -225,8 +237,9 @@ const Popover = ({ size = "medium", position = "bottom-center", padding = 10, is
     const role = useRole(context);
     const { getReferenceProps, getFloatingProps } = useInteractions([click, role]);
     useEffect(() => {
-        setProps(Object.assign({ ref: refs.setReference }, getReferenceProps()));
-    }, [setProps, getReferenceProps, refs.setReference]);
+        const internalControl = open === undefined ? getReferenceProps() : {};
+        setProps(Object.assign({ ref: refs.setReference }, internalControl));
+    }, [setProps, getReferenceProps, open, refs.setReference]);
     const [currentDirection] = placement.split("-");
     const offsetFromEdge = 8;
     const middlewareArrowData = middlewareData.arrow;
@@ -241,7 +254,7 @@ const Popover = ({ size = "medium", position = "bottom-center", padding = 10, is
             bottom: "0"
         }
         : floatingStyles;
-    const isShowPopover = alwaysShow || popoverOpened;
+    const isShowPopover = open || popoverOpened;
     useEffect(() => {
         if (size === "mobile" && isShowPopover) {
             lockBodyScroll();
@@ -306,7 +319,7 @@ const Popover = ({ size = "medium", position = "bottom-center", padding = 10, is
             clearInterval(checkInterval);
             leastOverlap = Infinity;
         };
-    }, [popoverOpened, refs.floating.current, placement, alwaysShow, position, currentPosition]);
+    }, [popoverOpened, refs.floating.current, placement, position, currentPosition]);
     const arrowOffsetFromEdge = 5;
     return (React__default.createElement(React__default.Fragment, null, isShowPopover && (React__default.createElement(FloatingPortal, { root: geneUIProviderRef.current },
         React__default.createElement("div", Object.assign({ style: styles, className: `popover  popover_size_${size} popover_position_${currentDirection}`, ref: refs.setFloating }, getFloatingProps()),
@@ -321,10 +334,10 @@ const Popover = ({ size = "medium", position = "bottom-center", padding = 10, is
                         React__default.createElement("span", { className: "popover__title_text ellipsis-text" }, title)),
                     React__default.createElement(Button, { Icon: SvgX, size: "small", appearance: "secondary", displayType: "text", className: "popover__close", onClick: () => setPopoverOpened(false) }))),
                 children))))));
-};
+});
 
-const PopoverBody = ({ children }) => {
-    return (React__default.createElement("div", { className: "popover__body" },
+const PopoverBody = ({ children, withPadding = true, className }) => {
+    return (React__default.createElement("div", { className: classNames("popover__body", { popover__body_withPadding: withPadding }, className) },
         React__default.createElement("div", { className: "popover__content" },
             children,
             " ")));

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,8 +6,9 @@ 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 { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions, u as useScrollLock } from './index-787461ac.js';
 export { default as Badge } from './Badge.js';
 export { default as Scrollbar } from './Scrollbar.js';
 export { Col, Grid, Row } from './Grid.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-40cb9fb-26032025",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {