@geneui/components 3.0.0-next-7b678fb-11102024 → 3.0.0-next-524bb85-15102024

package/Charts/index.js

@@ -18,6 +18,7 @@ import '../_rollupPluginBabelHelpers-a83240e1.js';
 import '../configs-00612ce0.js';
 import '../hooks/useWindowSize.js';
 import '../hooks/useDebounce.js';
+import '../InfoOutline-dd2e89d9.js';
 import '../ArrowLeft-b88e2ba8.js';
 import '../index-a1b8ec78.js';
 import '../GeneUIProvider/index.js';

package/Counter/index.js

@@ -16,6 +16,7 @@ import 'react-dom';
 import '../tslib.es6-f211516f.js';
 import '../Icon/index.js';
 import '../_rollupPluginBabelHelpers-a83240e1.js';
+import '../InfoOutline-dd2e89d9.js';
 import '../ArrowLeft-b88e2ba8.js';
 import '../useEllipsisDetection-c1c9ad94.js';
 import '../hooks/useDebounce.js';

package/Info/index.js

@@ -0,0 +1,41 @@
+import React__default, { useState, useMemo } from 'react';
+import { c as classnames } from '../index-031ff73c.js';
+import { S as SvgInfoOutline } from '../InfoOutline-dd2e89d9.js';
+import { T as Tooltip } from '../index-a1b8ec78.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../ArrowLeft-b88e2ba8.js';
+import '../tslib.es6-f211516f.js';
+import 'react-dom';
+import '../GeneUIProvider/index.js';
+
+var css_248z = "[data-gene-ui-version=\"2.16.1\"] .info{border-radius:var(--guit-ref-radius-3xsmall);line-height:0}[data-gene-ui-version=\"2.16.1\"] .info_appearance_default{color:var(--guit-sem-color-foreground-neutral-2)}[data-gene-ui-version=\"2.16.1\"] .info_appearance_brand{color:var(--guit-sem-color-foreground-brand)}[data-gene-ui-version=\"2.16.1\"] .info_appearance_inverse{color:var(--guit-sem-color-foreground-inverse)}[data-gene-ui-version=\"2.16.1\"] .info_disabled{color:var(--guit-sem-color-foreground-disabled);pointer-events:none}";
+styleInject(css_248z);
+
+const iconSizes = {
+    small: 24,
+    smallNudge: 20,
+    XSmall: 16
+};
+/**
+ * Info icon component used to provide additional contextual information to users. It appears as a small icon, and is placed near elements where further explanation or clarification is useful.
+ */
+const Info = ({ infoText, disabled, size = 'smallNudge', appearance = 'default', className }) => {
+    const [alwaysShow, setAlwaysShow] = useState(false);
+    const keyDownHandler = (event) => {
+        if (disabled)
+            return;
+        if (event.key === 'Enter') {
+            setAlwaysShow((prev) => !prev);
+        }
+    };
+    const handleBlur = () => !disabled && alwaysShow && setAlwaysShow(false);
+    const buttonClassNames = useMemo(() => classnames('info', className, {
+        [`info_appearance_${appearance}`]: appearance,
+        info_disabled: disabled
+    }), [appearance, className, disabled]);
+    return (React__default.createElement(Tooltip, { text: infoText, alwaysShow: alwaysShow, appearance: appearance === 'inverse' ? 'inverse' : 'default' },
+        React__default.createElement("button", { disabled: disabled, "aria-pressed": alwaysShow, className: buttonClassNames, onKeyDown: keyDownHandler, onBlur: handleBlur },
+            React__default.createElement(SvgInfoOutline, { className: "info__icon", size: iconSizes[size] }))));
+};
+
+export { Info as default };

package/InfoOutline-dd2e89d9.js

@@ -0,0 +1,29 @@
+import { _ as _objectWithoutProperties, a as _extends } from './ArrowLeft-b88e2ba8.js';
+import React__default from 'react';
+
+var _excluded = ["size", "color"];
+var SvgInfoOutline = function SvgInfoOutline(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "currentColor" : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18.5a8.5 8.5 0 1 1 8.5-8.5 8.51 8.51 0 0 1-8.5 8.5Z",
+    fill: color
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M11.97 10.237a.75.75 0 0 0-.75.75v5.243a.75.75 0 0 0 1.5 0v-5.243a.75.75 0 0 0-.75-.75Z",
+    fill: color
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M11.969 6.995a.914.914 0 1 0 0 1.829.914.914 0 0 0 0-1.829Z",
+    fill: color
+  }));
+};
+
+export { SvgInfoOutline as S };

package/Label/index.js

@@ -1,5 +1,5 @@
 import React__default, { useRef } from 'react';
-import { _ as _objectWithoutProperties, a as _extends } from '../ArrowLeft-b88e2ba8.js';
+import { S as SvgInfoOutline } from '../InfoOutline-dd2e89d9.js';
 import { c as classnames } from '../index-031ff73c.js';
 import { T as Tooltip } from '../index-a1b8ec78.js';
 import 'prop-types';
@@ -8,36 +8,12 @@ import 'react-dom';
 import '../configs-00612ce0.js';
 import { u as useEllipsisDetection } from '../useEllipsisDetection-c1c9ad94.js';
 import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../ArrowLeft-b88e2ba8.js';
 import '../tslib.es6-f211516f.js';
 import '../GeneUIProvider/index.js';
 import '../_commonjsHelpers-24198af3.js';
 import '../hooks/useDebounce.js';
 
-var _excluded = ["size", "color"];
-var SvgInfoOutline = function SvgInfoOutline(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 24 : _ref$size,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "currentColor" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default.createElement("svg", _extends({
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: color,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18.5a8.5 8.5 0 1 1 8.5-8.5 8.51 8.51 0 0 1-8.5 8.5Z",
-    fill: color
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M11.97 10.237a.75.75 0 0 0-.75.75v5.243a.75.75 0 0 0 1.5 0v-5.243a.75.75 0 0 0-.75-.75Z",
-    fill: color
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M11.969 6.995a.914.914 0 1 0 0 1.829.914.914 0 0 0 0-1.829Z",
-    fill: color
-  }));
-};
-
 var css_248z = "[data-gene-ui-version=\"2.16.1\"] .label{align-items:center;display:inline-flex;max-width:100%;min-width:0}[data-gene-ui-version=\"2.16.1\"] .label__container{align-items:center;display:flex;gap:var(--guit-ref-spacing-3xsmall);min-width:0;width:100%}[data-gene-ui-version=\"2.16.1\"] .label__container-inner{align-items:center;display:flex;gap:var(--guit-ref-spacing-4xsmall)}[data-gene-ui-version=\"2.16.1\"] .label__asterisk,[data-gene-ui-version=\"2.16.1\"] .label__text{color:var(--guit-sem-color-foreground-neutral-2)}[data-gene-ui-version=\"2.16.1\"] .label__asterisk_size_medium,[data-gene-ui-version=\"2.16.1\"] .label__text_size_medium{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}[data-gene-ui-version=\"2.16.1\"] .label__asterisk_size_small,[data-gene-ui-version=\"2.16.1\"] .label__text_size_small{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)}[data-gene-ui-version=\"2.16.1\"] .label__asterisk_disabled,[data-gene-ui-version=\"2.16.1\"] .label__text_disabled{color:var(--guit-sem-color-foreground-disabled)}[data-gene-ui-version=\"2.16.1\"] .label__icon{color:var(--guit-sem-color-foreground-neutral-2);flex:0 0 auto}[data-gene-ui-version=\"2.16.1\"] .label__icon_disabled{color:var(--guit-sem-color-foreground-disabled)}";
 styleInject(css_248z);
 

package/index.d.ts

@@ -27,6 +27,7 @@ export { default as LinkButton } from './lib/atoms/LinkButton/index';
 export { default as HelperText } from './lib/atoms/HelperText';
 export { default as Loader } from './lib/atoms/Loader';
 export { default as Pill } from './lib/atoms/Pill';
+export { default as Info } from './lib/atoms/Info';
 export { Row, Col } from './lib/molecules/Grid';
 export { Tab, Tabs } from './lib/molecules/Tabs';
 export { Step, Steps } from './lib/molecules/Steps';

package/index.js

@@ -27,6 +27,7 @@ export { default as LinkButton } from './LinkButton/index.js';
 export { default as HelperText } from './HelperText/index.js';
 export { default as Loader } from './Loader/index.js';
 export { default as Pill } from './Pill/index.js';
+export { default as Info } from './Info/index.js';
 export { Col, Row } from './Grid/index.js';
 export { Tab, Tabs } from './Tabs/index.js';
 export { Step, Steps } from './Steps/index.js';
@@ -131,6 +132,7 @@ export { u as useEllipsisDetection } from './useEllipsisDetection-c1c9ad94.js';
 import './index-031ff73c.js';
 import './style-inject.es-746bb8ed.js';
 import './tslib.es6-f211516f.js';
+import './InfoOutline-dd2e89d9.js';
 import './ArrowLeft-b88e2ba8.js';
 import './dateValidation-67caec66.js';
 import './_commonjsHelpers-24198af3.js';

package/lib/atoms/Info/Info.d.ts

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { IconProps } from '@geneui/icons';
+import './Info.scss';
+declare const iconSizes: Record<'small' | 'smallNudge' | 'XSmall', IconProps['size']>;
+interface IInfoProps {
+    /**
+     * The text that will be displayed inside the tooltip when the user interacts with the info icon.
+     */
+    infoText: string;
+    /**
+     * Disables the info icon button, preventing any interaction (click, key down, or focus).<br>
+     * When `disabled` is true, the button becomes non-interactive, and the tooltip won't be shown.
+     */
+    disabled?: boolean;
+    /**
+     * Defines the size of the info icon.<br>
+     * Possible values: `small | smallNudge | XSmall`
+     */
+    size?: keyof typeof iconSizes;
+    /**
+     * Determines the visual appearance of the info icon.<br>
+     * Possible values: `default | brand | inverse`
+     */
+    appearance?: 'default' | 'brand' | 'inverse';
+    /**
+     * 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;
+}
+/**
+ * Info icon component used to provide additional contextual information to users. It appears as a small icon, and is placed near elements where further explanation or clarification is useful.
+ */
+declare const Info: FC<IInfoProps>;
+export { IInfoProps, Info as default };

package/lib/atoms/Info/index.d.ts

@@ -0,0 +1 @@
+export { IInfoProps, default as default } from './Info';

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-7b678fb-11102024",
+    "version": "3.0.0-next-524bb85-15102024",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {