@geneui/components 3.0.0-next-e1ffab5-19022025 → 3.0.0-next-ed7bf62-05032025

package/Popover.js

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

package/Text.js

@@ -0,0 +1,30 @@
+import React__default, { useRef } from 'react';
+import { c as classNames } from './index-ce02421b.js';
+import Tooltip from './Tooltip.js';
+import { u as useEllipsisDetection } from './useEllipsisDetection-e545ae62.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './floating-ui.react-0485e4db.js';
+import 'react-dom';
+import './GeneUIProvider.js';
+import './useDebounceCallback-999deae7.js';
+
+var css_248z = ".text_variant_headingXLargeSemibold{font-family:var(--guit-sem-font-heading-xlarge-semibold-font-family);font-size:var(--guit-sem-font-heading-xlarge-semibold-font-size);font-weight:var(--guit-sem-font-heading-xlarge-semibold-font-weight);line-height:var(--guit-sem-font-heading-xlarge-semibold-line-height)}.text_variant_headingLargeSemibold{font-family:var(--guit-sem-font-heading-large-semibold-font-family);font-size:var(--guit-sem-font-heading-large-semibold-font-size);font-weight:var(--guit-sem-font-heading-large-semibold-font-weight);line-height:var(--guit-sem-font-heading-large-semibold-line-height)}.text_variant_headingMediumSemibold{font-family:var(--guit-sem-font-heading-medium-semibold-font-family);font-size:var(--guit-sem-font-heading-medium-semibold-font-size);font-weight:var(--guit-sem-font-heading-medium-semibold-font-weight);line-height:var(--guit-sem-font-heading-medium-semibold-line-height)}.text_variant_headingSmallSemibold{font-family:var(--guit-sem-font-heading-small-semibold-font-family);font-size:var(--guit-sem-font-heading-small-semibold-font-size);font-weight:var(--guit-sem-font-heading-small-semibold-font-weight);line-height:var(--guit-sem-font-heading-small-semibold-line-height)}.text_variant_headingXSmallSemibold{font-family:var(--guit-sem-font-heading-xsmall-semibold-font-family);font-size:var(--guit-sem-font-heading-xsmall-semibold-font-size);font-weight:var(--guit-sem-font-heading-xsmall-semibold-font-weight);line-height:var(--guit-sem-font-heading-xsmall-semibold-line-height)}.text_variant_subheadingLargeSemibold{font-family:var(--guit-sem-font-subheading-large-semibold-font-family);font-size:var(--guit-sem-font-subheading-large-semibold-font-size);font-weight:var(--guit-sem-font-subheading-large-semibold-font-weight);line-height:var(--guit-sem-font-subheading-large-semibold-line-height)}.text_variant_subheadingMediumSemibold{font-family:var(--guit-sem-font-subheading-medium-semibold-font-family);font-size:var(--guit-sem-font-subheading-medium-semibold-font-size);font-weight:var(--guit-sem-font-subheading-medium-semibold-font-weight);line-height:var(--guit-sem-font-subheading-medium-semibold-line-height)}.text_variant_labelLargeSemibold{font-family:var(--guit-sem-font-label-large-default-semibold-font-family);font-size:var(--guit-sem-font-label-large-default-semibold-font-size);font-weight:var(--guit-sem-font-label-large-default-semibold-font-weight);line-height:var(--guit-sem-font-label-large-default-semibold-line-height)}.text_variant_labelLargeMedium{font-family:var(--guit-sem-font-label-large-default-medium-font-family);font-size:var(--guit-sem-font-label-large-default-medium-font-size);font-weight:var(--guit-sem-font-label-large-default-medium-font-weight);line-height:var(--guit-sem-font-label-large-default-medium-line-height)}.text_variant_labelMediumSemibold{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)}.text_variant_labelMediumMedium{font-family:var(--guit-sem-font-label-medium-default-medium-font-family);font-size:var(--guit-sem-font-label-medium-default-medium-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-medium-line-height)}.text_variant_labelSmallSemibold{font-family:var(--guit-sem-font-label-small-default-semibold-font-family);font-size:var(--guit-sem-font-label-small-default-semibold-font-size);font-weight:var(--guit-sem-font-label-small-default-semibold-font-weight);line-height:var(--guit-sem-font-label-small-default-semibold-line-height)}.text_variant_labelSmallMedium{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)}.text_variant_bodyLargeMedium_hasSpace,.text_variant_bodyLargeRegular_hasSpace,.text_variant_bodyLargeSemibold_hasSpace{margin-block-end:2.4rem}.text_variant_bodyMediumMedium_hasSpace,.text_variant_bodyMediumRegular_hasSpace,.text_variant_bodyMediumSemibold_hasSpace{margin-block-end:2rem}.text_variant_bodyLargeSemibold{font-family:var(--guit-sem-font-body-large-default-semibold-font-family);font-size:var(--guit-sem-font-body-large-default-semibold-font-size);font-weight:var(--guit-sem-font-body-large-default-semibold-font-weight);line-height:var(--guit-sem-font-body-large-default-semibold-line-height)}.text_variant_bodyLargeMedium{font-family:var(--guit-sem-font-body-large-default-medium-font-family);font-size:var(--guit-sem-font-body-large-default-medium-font-size);font-weight:var(--guit-sem-font-body-large-default-medium-font-weight);line-height:var(--guit-sem-font-body-large-default-medium-line-height)}.text_variant_bodyLargeRegular{font-family:var(--guit-sem-font-body-large-default-regular-font-family);font-size:var(--guit-sem-font-body-large-default-regular-font-size);font-weight:var(--guit-sem-font-body-large-default-regular-font-weight);line-height:var(--guit-sem-font-body-large-default-regular-line-height)}.text_variant_bodyMediumSemibold{font-family:var(--guit-sem-font-body-medium-default-semibold-font-family);font-size:var(--guit-sem-font-body-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-body-medium-default-semibold-font-weight);line-height:var(--guit-sem-font-body-medium-default-semibold-line-height)}.text_variant_bodyMediumMedium{font-family:var(--guit-sem-font-body-medium-default-medium-font-family);font-size:var(--guit-sem-font-body-medium-default-medium-font-size);font-weight:var(--guit-sem-font-body-medium-default-medium-font-weight);line-height:var(--guit-sem-font-body-medium-default-medium-line-height)}.text_variant_bodyMediumRegular{font-family:var(--guit-sem-font-body-medium-default-regular-font-family);font-size:var(--guit-sem-font-body-medium-default-regular-font-size);font-weight:var(--guit-sem-font-body-medium-default-regular-font-weight);line-height:var(--guit-sem-font-body-medium-default-regular-line-height)}.text_variant_captionLargeMedium_hasSpace,.text_variant_captionLargeRegular_hasSpace,.text_variant_captionLargeSemibold_hasSpace{margin-block-end:1.6rem}.text_variant_captionMediumMedium_hasSpace,.text_variant_captionMediumRegular_hasSpace,.text_variant_captionMediumSemibold_hasSpace{margin-block-end:1.4rem}.text_variant_captionLargeSemibold{font-family:var(--guit-sem-font-caption-large-semibold-font-family);font-size:var(--guit-sem-font-caption-large-semibold-font-size);font-weight:var(--guit-sem-font-caption-large-semibold-font-weight);letter-spacing:var(--guit-sem-font-caption-large-semibold-letter-spacing);line-height:var(--guit-sem-font-caption-large-semibold-line-height)}.text_variant_captionLargeMedium{font-family:var(--guit-sem-font-caption-large-medium-font-family);font-size:var(--guit-sem-font-caption-large-medium-font-size);font-weight:var(--guit-sem-font-caption-large-medium-font-weight);letter-spacing:var(--guit-sem-font-caption-large-medium-letter-spacing);line-height:var(--guit-sem-font-caption-large-medium-line-height)}.text_variant_captionLargeRegular{font-family:var(--guit-sem-font-caption-large-regular-font-family);font-size:var(--guit-sem-font-caption-large-regular-font-size);font-weight:var(--guit-sem-font-caption-large-regular-font-weight);letter-spacing:var(--guit-sem-font-caption-large-regular-letter-spacing);line-height:var(--guit-sem-font-caption-large-regular-line-height)}.text_variant_captionMediumSemibold{font-family:var(--guit-sem-font-caption-medium-semibold-font-family);font-size:var(--guit-sem-font-caption-medium-semibold-font-size);font-weight:var(--guit-sem-font-caption-medium-semibold-font-weight);letter-spacing:var(--guit-sem-font-caption-medium-semibold-letter-spacing);line-height:var(--guit-sem-font-caption-medium-semibold-line-height)}.text_variant_captionMediumMedium{font-family:var(--guit-sem-font-caption-medium-medium-font-family);font-size:var(--guit-sem-font-caption-medium-medium-font-size);font-weight:var(--guit-sem-font-caption-medium-medium-font-weight);letter-spacing:var(--guit-sem-font-caption-medium-medium-letter-spacing);line-height:var(--guit-sem-font-caption-medium-medium-line-height)}.text_variant_captionMediumRegular{font-family:var(--guit-sem-font-caption-medium-regular-font-family);font-size:var(--guit-sem-font-caption-medium-regular-font-size);font-weight:var(--guit-sem-font-caption-medium-regular-font-weight);letter-spacing:var(--guit-sem-font-caption-medium-regular-letter-spacing);line-height:var(--guit-sem-font-caption-medium-regular-line-height)}.text_alignment_start{text-align:start}.text_alignment_center{text-align:center}.text_alignment_end{text-align:end}.text_case_uppercase{text-transform:uppercase}.text_decoration_underline{text-decoration:underline}.text_decoration_lineThrough{text-decoration:line-through}";
+styleInject(css_248z);
+
+/**
+ * Text component which has predefined tokens
+ */
+const Text = ({ className, variant = "bodyMediumMedium", children, as, alignment = "start", truncate = false, withTooltip = true }) => {
+    const textRef = useRef(null);
+    const isTruncated = useEllipsisDetection(textRef);
+    const Component = as;
+    const computedClassNames = classNames("text", {
+        [`text_variant_${variant}`]: variant,
+        [`text_alignment_${alignment}`]: alignment,
+        "ellipsis-text": truncate
+    }, className);
+    return (React__default.createElement(Tooltip, { text: children, isVisible: isTruncated && withTooltip },
+        React__default.createElement(Component, { ref: textRef, className: computedClassNames }, children)));
+};
+
+export { Text as default };

package/Tooltip.js

@@ -275,7 +275,7 @@ function requireReactIs_development () {
 	}
 } (reactIs));
 
-var css_248z = ".tooltip{align-items:flex-start;border-radius:var(--guit-ref-radius-3xsmall);box-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-shadow-floating-2-spread-1) var(--guit-sem-color-floating-2-rgba-1),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-shadow-floating-2-spread-2) var(--guit-sem-color-floating-2-rgba-2);display:flex;font-family:var(--guit-sem-font-caption-large-medium-font-family);font-size:var(--guit-sem-font-caption-large-medium-font-size);font-weight:var(--guit-sem-font-caption-large-medium-font-weight);gap:var(--guit-ref-spacing-3xsmall);justify-content:space-between;letter-spacing:var(--guit-sem-font-caption-large-medium-letter-spacing);line-height:var(--guit-sem-font-caption-large-medium-line-height);max-width:24rem;min-width:var(--guit-sem-dimension-width-3xlarge);padding:var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-medium)}.tooltip_position_top .tooltip__arrow{transform:rotate(0deg)}.tooltip_position_bottom .tooltip__arrow{transform:rotate(180deg)}.tooltip_position_left .tooltip__arrow{transform:rotate(-90deg)}.tooltip_position_right .tooltip__arrow{transform:rotate(90deg)}.tooltip_color_default{background-color:var(--guit-sem-color-background-neutral-5)}.tooltip_color_default .tooltip__arrowPath{fill:var(--guit-sem-color-background-neutral-5)}.tooltip_color_default .tooltip__icon,.tooltip_color_default .tooltip__text{color:var(--guit-sem-color-foreground-inverse-notheme)}.tooltip_color_inverse{background-color:var(--guit-sem-color-background-neutral-1-nudge)}.tooltip_color_inverse .tooltip__arrowPath{fill:var(--guit-sem-color-background-neutral-1-nudge)}.tooltip_color_inverse .tooltip__icon,.tooltip_color_inverse .tooltip__text{color:var(--guit-sem-color-foreground-neutral-2)}.tooltip__arrow{position:absolute}.tooltip__textWrapper{display:flex;flex-direction:column;gap:var(--guit-sem-font-caption-large-medium-paragraph-spacing)}.tooltip__text{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;overflow:hidden;word-break:break-word}.tooltip__icon{flex:0 0 auto}";
+var css_248z = ".tooltip{align-items:flex-start;border-radius:var(--guit-ref-radius-3xsmall);box-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-shadow-floating-2-spread-1) var(--guit-sem-color-floating-2-rgba-1),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-shadow-floating-2-spread-2) var(--guit-sem-color-floating-2-rgba-2);display:flex;font-family:var(--guit-sem-font-caption-large-medium-font-family);font-size:var(--guit-sem-font-caption-large-medium-font-size);font-weight:var(--guit-sem-font-caption-large-medium-font-weight);gap:var(--guit-ref-spacing-3xsmall);justify-content:space-between;letter-spacing:var(--guit-sem-font-caption-large-medium-letter-spacing);line-height:var(--guit-sem-font-caption-large-medium-line-height);max-width:24rem;min-width:var(--guit-sem-dimension-width-3xlarge);padding:var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-medium)}.tooltip_position_top .tooltip__arrow{transform:rotate(0deg)}.tooltip_position_bottom .tooltip__arrow{transform:rotate(180deg)}.tooltip_position_left .tooltip__arrow{transform:rotate(-90deg)}.tooltip_position_right .tooltip__arrow{transform:rotate(90deg)}.tooltip_color_default{background-color:var(--guit-sem-color-background-neutral-5)}.tooltip_color_default .tooltip__arrowPath{fill:var(--guit-sem-color-background-neutral-5)}.tooltip_color_default .tooltip__icon,.tooltip_color_default .tooltip__text{color:var(--guit-sem-color-foreground-inverse-notheme)}.tooltip_color_inverse{background-color:var(--guit-sem-color-background-neutral-1-nudge)}.tooltip_color_inverse .tooltip__arrowPath{fill:var(--guit-sem-color-background-neutral-1-nudge)}.tooltip_color_inverse .tooltip__icon,.tooltip_color_inverse .tooltip__text{color:var(--guit-sem-color-foreground-neutral-2)}.tooltip__arrow{align-items:center;display:flex;height:.4rem;justify-content:center;position:absolute;width:1.2rem}.tooltip__textWrapper{display:flex;flex-direction:column;gap:var(--guit-sem-font-caption-large-medium-paragraph-spacing)}.tooltip__text{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;overflow:hidden;word-break:break-word}.tooltip__icon{flex:0 0 auto}";
 styleInject(css_248z);
 
 const positions = [
@@ -355,6 +355,7 @@ A tooltip is a small, elevated surface that appears to provide contextual inform
 Tooltips should be used to offer helpful plaintext information, not to communicate system feedback. Use a popover instead if you need to deliver structured information or enable interactions.
 */
 const Tooltip = ({ children, position = "top-right", text, customPosition, alwaysShow, padding = 10, isVisible = true, appearance = "default", Icon }) => {
+    var _a;
     const { geneUIProviderRef } = useContext(GeneUIDesignSystemContext);
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
     const arrowRef = useRef(null);
@@ -413,17 +414,28 @@ const Tooltip = ({ children, position = "top-right", text, customPosition, alway
     const getCorrectPosition = arrowPosition
         ? { [arrowPosition]: offsetFromEdge }
         : { insetInlineStart: middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.x };
+    let arrowRegardingPosition = 0;
+    if ((_a = arrowRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) {
+        if (staticSide.match("top")) {
+            arrowRegardingPosition = -arrowRef.current.offsetHeight;
+        }
+        else if (staticSide === "bottom") {
+            arrowRegardingPosition = -arrowRef.current.offsetWidth + 8;
+        }
+        else {
+            arrowRegardingPosition = -arrowRef.current.offsetWidth + 4;
+        }
+    }
     return (React__default.createElement(React__default.Fragment, null,
         component,
         isVisible && (alwaysShow || isPopoverOpen) && (React__default.createElement(FloatingPortal, { root: geneUIProviderRef.current },
             React__default.createElement("div", Object.assign({ className: `tooltip tooltip_color_${appearance}  tooltip_position_${currentDirection}`, ref: refs.setFloating, style: floatingStyles }, getFloatingProps()),
-                React__default.createElement("div", { className: "tooltip__arrow", ref: arrowRef, style: Object.assign(Object.assign({}, getCorrectPosition), { top: middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.y, [staticSide]: arrowRef.current ? `${-arrowRef.current.offsetWidth + 6}px` : 0 }) },
+                React__default.createElement("div", { className: "tooltip__arrow", ref: arrowRef, style: Object.assign(Object.assign({}, getCorrectPosition), { top: middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.y, [staticSide]: arrowRef.current ? `${arrowRegardingPosition}px` : 0 }) },
                     React__default.createElement("svg", { width: "12", height: "4", viewBox: "0 0 12 4", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                         React__default.createElement("path", { className: "tooltip__arrowPath", d: "M6 4L0 0L12 0L6 4Z" }))),
                 React__default.createElement("div", { className: "tooltip__textWrapper" },
                     React__default.createElement("p", { className: "tooltip__text" }, text)),
-                Icon && (React__default.createElement("div", { className: "tooltip__icon" },
-                    React__default.createElement(Icon, { size: 16 }))))))));
+                Icon && React__default.createElement(Icon, { size: 16, className: "tooltip__icon" }))))));
 };
 
 export { Tooltip as default };

package/components/atoms/Text/Text.d.ts

@@ -0,0 +1,67 @@
+import { FC } from "react";
+import "./Text.scss";
+interface ITextProps {
+    /**
+     * 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 HTML tag with which text will be rendered.<br/>
+     * Possible values: `h1 | h2 | h3 | h4 | h5 | h6 | p | span`
+     */
+    as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
+    /**
+     * Style variants.<br>
+     * Will affect on `font-family` ,`font-size` ,`font-weight` and `line-height`.<br/>
+     * Possible values: `headingXLargeSemibold |`
+        <br/> `headingLargeSemibold |`
+        <br/> `headingMediumSemibold |`
+        <br/> `headingSmallSemibold |`
+        <br/> `headingXSmallSemibold |`
+        <br/> `subheadingLargeSemibold |`
+        <br/> `subheadingMediumSemibold |`
+        <br/> `labelLargeSemibold |`
+        <br/> `labelLargeMedium |`
+        <br/> `labelMediumSemibold |`
+        <br/> `labelMediumMedium |`
+        <br/> `labelSmallSemibold |`
+        <br/> `labelSmallMedium |`
+        <br/> `bodyLargeSemibold |`
+        <br/> `bodyLargeMedium |`
+        <br/> `bodyLargeRegular |`
+        <br/> `bodyMediumSemibold |`
+        <br/> `bodyMediumMedium |`
+        <br/> `bodyMediumRegular |`
+        <br/> `captionLargeSemibold |`
+        <br/> `captionLargeMedium |`
+        <br/> `captionLargeRegular |`
+        <br/> `captionMediumMedium |`
+        <br/> `captionMediumRegular`
+     */
+    variant?: "headingXLargeSemibold" | "headingLargeSemibold" | "headingMediumSemibold" | "headingSmallSemibold" | "headingXSmallSemibold" | "subheadingLargeSemibold" | "subheadingMediumSemibold" | "labelLargeSemibold" | "labelLargeMedium" | "labelMediumSemibold" | "labelMediumMedium" | "labelSmallSemibold" | "labelSmallMedium" | "bodyLargeSemibold" | "bodyLargeMedium" | "bodyLargeRegular" | "bodyMediumSemibold" | "bodyMediumMedium" | "bodyMediumRegular" | "captionLargeSemibold" | "captionLargeMedium" | "captionLargeRegular" | "captionMediumSemibold" | "captionMediumMedium" | "captionMediumRegular";
+    /**
+     * Text alignment<br>
+     * Possible values: `left | center | right`
+     */
+    alignment?: "start" | "center" | "end";
+    /**
+     * Text content
+     */
+    children: string;
+    /**
+     * If true, the text will be truncated with ellipsis when it overflows.
+     * This is typically used to limit text to a single line or prevent overflow.
+     */
+    truncate?: boolean;
+    /**
+     * If true, a tooltip will be displayed when the text is truncated and hovered.
+     * The tooltip will show the full text content when it's truncated.
+     */
+    withTooltip?: boolean;
+}
+/**
+ * Text component which has predefined tokens
+ */
+declare const Text: FC<ITextProps>;
+export { ITextProps, Text as default };

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

@@ -0,0 +1 @@
+export { ITextProps, default } from "./Text";

package/components/molecules/KeyValue/KeyValue.d.ts

@@ -30,9 +30,9 @@ interface IKeyValueProps extends IKeyValueContextProps {
      */
     children: [ReactElement<IKeyProps>, ReactElement<IValueProps>];
 }
-declare const KeyValueContext: React.Context<IKeyValueContextProps>;
+export declare const KeyValueContext: React.Context<IKeyValueContextProps>;
 /**
  * Key Value components present data in a key-value format, typically used to display information obtained from other components. A common use case is setting up a Key Value component to show detailed information from a selected table row.
  */
 declare const KeyValue: FC<IKeyValueProps>;
-export { IKeyValueProps, KeyValueContext, KeyValue as default };
+export { IKeyValueProps, KeyValue as default };

package/components/molecules/KeyValue/Value.d.ts

@@ -1,5 +1,8 @@
 import { FC, ReactElement } from "react";
 interface IValueProps {
+    /**
+     * Possible values: `Pill | TextLink | Text` components or `string`
+     */
     children: ReactElement | string;
 }
 declare const Value: FC<IValueProps>;

package/hooks/index.d.ts

@@ -2,3 +2,4 @@ export { default as useDebounce } from "./useDebounceCallback";
 export { default as useEllipsisDetection } from "./useEllipsisDetection";
 export { default as useScrollLock } from "./useScrollLock";
 export { default as useWindowSize } from "./useWindowSize";
+export { default as useDeviceInfo } from "./useDeviceInfo";

package/hooks/useDeviceInfo/index.d.ts

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

package/hooks/useDeviceInfo/useDeviceInfo.d.ts

@@ -0,0 +1,13 @@
+import { OS } from "@types";
+interface IDeviceInfo {
+    isMobile: boolean;
+    isDesktop: boolean;
+    os: OS;
+    isWindows: boolean;
+    isMacOS: boolean;
+    isLinux: boolean;
+    isAndroid: boolean;
+    isIOS: boolean;
+}
+declare const useDeviceInfo: () => IDeviceInfo;
+export default useDeviceInfo;

package/{index-faa9d19a.js → index-24d8893c.js}

@@ -307,7 +307,7 @@ const Popover = ({ size = "medium", position = "bottom-center", padding = 10, is
             leastOverlap = Infinity;
         };
     }, [popoverOpened, refs.floating.current, placement, alwaysShow, position, currentPosition]);
-    const arrowOffsetFromEdge = staticSide === "left" || staticSide === "right" ? 7 : 11;
+    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()),
             size !== "mobile" && (React__default.createElement("div", { ref: arrowRef, className: "popover__arrow", style: Object.assign(Object.assign({}, getCorrectPosition), { top: middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.y, [staticSide]: arrowRef.current

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 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";
 export { default as Scrollbar, IScrollbarProps } from "./components/atoms/Scrollbar";
@@ -20,3 +21,4 @@ export { default as useDebounce } from "./hooks/useDebounceCallback";
 export { default as useEllipsisDetection } from "./hooks/useEllipsisDetection";
 export { default as useScrollLock } from "./hooks/useScrollLock";
 export { default as useWindowSize } from "./hooks/useWindowSize";
+export { default as useDeviceInfo } from "./hooks/useDeviceInfo";

package/index.js

@@ -6,7 +6,8 @@ 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 { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions, u as useScrollLock } from './index-faa9d19a.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-24d8893c.js';
 export { default as Badge } from './Badge.js';
 export { default as Scrollbar } from './Scrollbar.js';
 export { Col, Grid, Row } from './Grid.js';
@@ -18,7 +19,7 @@ export { Key, KeyValue, Value } from './KeyValue.js';
 export { GeneUIDesignSystemContext, default as GeneUIProvider } from './GeneUIProvider.js';
 export { u as useDebounce } from './useDebounceCallback-999deae7.js';
 export { u as useEllipsisDetection } from './useEllipsisDetection-e545ae62.js';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import './index-ce02421b.js';
 import './ArrowLeft-b88e2ba8.js';
 import './style-inject.es-746bb8ed.js';
@@ -46,4 +47,50 @@ const useWindowSize = () => {
     return windowSize;
 };
 
-export { useWindowSize };
+// Map of OS detection patterns
+const osPatterns = [
+    ["Windows", /\b(windows nt|win)\b/i],
+    ["iOS", /\b(iPhone|iPad|iPod).*?OS \d+/i],
+    ["Android", /\bandroid\b/i],
+    ["macOS", /\b(mac os|macintosh)\b(?!.*(?:iphone|ipad|ipod))/i],
+    ["Linux", /\blinux\b/i]
+];
+const useDeviceInfo = () => {
+    return useMemo(() => {
+        var _a;
+        if (typeof navigator === "undefined") {
+            return {
+                isMobile: false,
+                isDesktop: false,
+                os: "Unknown",
+                isWindows: false,
+                isMacOS: false,
+                isLinux: false,
+                isAndroid: false,
+                isIOS: false
+            }; // Safe for SSR
+        }
+        const userAgent = (_a = navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        // Find the first matching OS using destructuring
+        const [detectedOS = "Unknown"] = osPatterns.find(([, pattern]) => pattern.test(userAgent)) || [];
+        const isWindows = detectedOS === "Windows";
+        const isMacOS = detectedOS === "macOS";
+        const isLinux = detectedOS === "Linux";
+        const isAndroid = detectedOS === "Android";
+        const isIOS = detectedOS === "iOS";
+        const isMobile = isAndroid || isIOS;
+        const isDesktop = isWindows || isMacOS || isLinux;
+        return {
+            isMobile,
+            isDesktop,
+            os: detectedOS,
+            isWindows,
+            isMacOS,
+            isLinux,
+            isAndroid,
+            isIOS
+        };
+    }, []);
+};
+
+export { useDeviceInfo, useWindowSize };

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-e1ffab5-19022025",
+    "version": "3.0.0-next-ed7bf62-05032025",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {

package/types/index.d.ts

@@ -0,0 +1 @@
+export type OS = "iOS" | "Android" | "Windows" | "macOS" | "Linux" | "Unknown";