@geneui/components 3.0.0-next-7b678fb-11102024 → 3.0.0-next-5981a23-15102024
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Charts/index.js +1 -0
- package/Counter/index.js +1 -0
- package/Divider/index.js +15 -8
- package/Info/index.js +41 -0
- package/InfoOutline-dd2e89d9.js +29 -0
- package/Label/index.js +2 -26
- package/Products/index.js +0 -1
- package/index.d.ts +1 -0
- package/index.js +2 -0
- package/lib/atoms/Divider/Divider.d.ts +37 -13
- package/lib/atoms/Info/Info.d.ts +35 -0
- package/lib/atoms/Info/index.d.ts +1 -0
- package/package.json +1 -1
package/Charts/index.js
CHANGED
|
@@ -18,6 +18,7 @@ import '../_rollupPluginBabelHelpers-a83240e1.js';
|
|
|
18
18
|
import '../configs-00612ce0.js';
|
|
19
19
|
import '../hooks/useWindowSize.js';
|
|
20
20
|
import '../hooks/useDebounce.js';
|
|
21
|
+
import '../InfoOutline-dd2e89d9.js';
|
|
21
22
|
import '../ArrowLeft-b88e2ba8.js';
|
|
22
23
|
import '../index-a1b8ec78.js';
|
|
23
24
|
import '../GeneUIProvider/index.js';
|
package/Counter/index.js
CHANGED
|
@@ -16,6 +16,7 @@ import 'react-dom';
|
|
|
16
16
|
import '../tslib.es6-f211516f.js';
|
|
17
17
|
import '../Icon/index.js';
|
|
18
18
|
import '../_rollupPluginBabelHelpers-a83240e1.js';
|
|
19
|
+
import '../InfoOutline-dd2e89d9.js';
|
|
19
20
|
import '../ArrowLeft-b88e2ba8.js';
|
|
20
21
|
import '../useEllipsisDetection-c1c9ad94.js';
|
|
21
22
|
import '../hooks/useDebounce.js';
|
package/Divider/index.js
CHANGED
|
@@ -1,16 +1,23 @@
|
|
|
1
|
-
import
|
|
2
|
-
import React__default, { useMemo } from 'react';
|
|
1
|
+
import React__default from 'react';
|
|
3
2
|
import { c as classnames } from '../index-031ff73c.js';
|
|
4
3
|
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
|
|
5
4
|
|
|
6
|
-
var css_248z = "[data-gene-ui-version=\"2.16.1\"] .divider{
|
|
5
|
+
var css_248z = "[data-gene-ui-version=\"2.16.1\"] .divider{display:inline-flex;gap:var(--guit-ref-spacing-xsmall);overflow:hidden}[data-gene-ui-version=\"2.16.1\"] .divider:before{content:\"\";display:block;flex:1;pointer-events:none}[data-gene-ui-version=\"2.16.1\"] .divider_horizontal{align-items:center;width:100%}[data-gene-ui-version=\"2.16.1\"] .divider_horizontal.divider:after,[data-gene-ui-version=\"2.16.1\"] .divider_horizontal.divider:before{border-block-start:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid);min-width:var(--guit-sem-dimension-width-medium)}[data-gene-ui-version=\"2.16.1\"] .divider_horizontal.divider_inset{padding-inline:var(--guit-ref-spacing-large)}[data-gene-ui-version=\"2.16.1\"] .divider_horizontal.divider:empty:after{display:none}[data-gene-ui-version=\"2.16.1\"] .divider_vertical{align-items:center;flex-direction:column;height:100%}[data-gene-ui-version=\"2.16.1\"] .divider_vertical.divider:before{border-inline-start:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid)}[data-gene-ui-version=\"2.16.1\"] .divider_vertical.divider:after{display:none}[data-gene-ui-version=\"2.16.1\"] .divider_vertical.divider_inset{padding-block:var(--guit-ref-spacing-large)}[data-gene-ui-version=\"2.16.1\"] .divider_color_default .divider__icon,[data-gene-ui-version=\"2.16.1\"] .divider_color_default .divider__text,[data-gene-ui-version=\"2.16.1\"] .divider_color_strong .divider__icon,[data-gene-ui-version=\"2.16.1\"] .divider_color_strong .divider__text{color:var(--guit-sem-color-foreground-neutral-1)}[data-gene-ui-version=\"2.16.1\"] .divider_color_default.divider:after,[data-gene-ui-version=\"2.16.1\"] .divider_color_default.divider:before{border-block-color:var(--guit-sem-color-border-neutral-2);border-inline-color:var(--guit-sem-color-border-neutral-2)}[data-gene-ui-version=\"2.16.1\"] .divider_color_strong.divider:after,[data-gene-ui-version=\"2.16.1\"] .divider_color_strong.divider:before{border-block-color:var(--guit-sem-color-border-neutral-3);border-inline-color:var(--guit-sem-color-border-neutral-3)}[data-gene-ui-version=\"2.16.1\"] .divider_color_brand.divider:after,[data-gene-ui-version=\"2.16.1\"] .divider_color_brand.divider:before{border-block-color:var(--guit-sem-color-border-brand);border-inline-color:var(--guit-sem-color-border-brand)}[data-gene-ui-version=\"2.16.1\"] .divider_color_brand .divider__icon,[data-gene-ui-version=\"2.16.1\"] .divider_color_brand .divider__text{color:var(--guit-sem-color-foreground-brand)}[data-gene-ui-version=\"2.16.1\"] .divider_color_inverse.divider:after,[data-gene-ui-version=\"2.16.1\"] .divider_color_inverse.divider:before{border-block-color:var(--guit-sem-color-border-inverse);border-inline-color:var(--guit-sem-color-border-inverse)}[data-gene-ui-version=\"2.16.1\"] .divider_color_inverse .divider__icon,[data-gene-ui-version=\"2.16.1\"] .divider_color_inverse .divider__text{color:var(--guit-sem-color-foreground-inverse)}[data-gene-ui-version=\"2.16.1\"] .divider_withLabel_before.divider:before{display:none}[data-gene-ui-version=\"2.16.1\"] .divider_withLabel_before.divider:after,[data-gene-ui-version=\"2.16.1\"] .divider_withLabel_center.divider:after{content:\"\";flex:1}[data-gene-ui-version=\"2.16.1\"] .divider_withLabel_center .divider__element{max-width:calc(100% - var(--guit-sem-dimension-width-medium)*4)}[data-gene-ui-version=\"2.16.1\"] .divider_withLabel_after.divider:before{flex:1}[data-gene-ui-version=\"2.16.1\"] .divider_withLabel_after .divider__element,[data-gene-ui-version=\"2.16.1\"] .divider_withLabel_before .divider__element{max-width:calc(100% - var(--guit-sem-dimension-width-medium)*2.8)}[data-gene-ui-version=\"2.16.1\"] .divider__label{align-items:center;display:flex;gap:var(--guit-ref-spacing-3xsmall);overflow:hidden}[data-gene-ui-version=\"2.16.1\"] .divider__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-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}[data-gene-ui-version=\"2.16.1\"] .divider__icon{flex:0 0 auto}[data-gene-ui-version=\"2.16.1\"] .divider__element{display:flex;flex:0 0 auto;min-width:0;order:1}";
|
|
7
6
|
styleInject(css_248z);
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
return (React__default.createElement("div",
|
|
8
|
+
/**
|
|
9
|
+
* A divider separates sections of content to establish visual rhythm and hierarchy. Combine dividers with appropriate spacing and text hierarchy to effectively organize content within your layout.
|
|
10
|
+
*/
|
|
11
|
+
const Divider = ({ appearance = 'default', Icon, vertical, label, labelPosition = 'before', content, inset = false, className }) => {
|
|
12
|
+
return (React__default.createElement("div", { className: classnames(`divider divider_${inset ? 'inset' : 'block'} divider_color_${appearance} `, className, {
|
|
13
|
+
divider_horizontal: !vertical,
|
|
14
|
+
divider_vertical: vertical,
|
|
15
|
+
[` divider_withLabel_${labelPosition}`]: (label || Icon) && !vertical
|
|
16
|
+
}) }, !vertical && (React__default.createElement(React__default.Fragment, null,
|
|
17
|
+
content && React__default.createElement("div", { className: "divider__element" }, content),
|
|
18
|
+
(label || Icon) && (React__default.createElement("div", { className: "divider__label" },
|
|
19
|
+
label && React__default.createElement("span", { className: "divider__text ellipsis-text" }, label),
|
|
20
|
+
Icon && React__default.createElement(Icon, { className: "divider__icon", size: 20 })))))));
|
|
14
21
|
};
|
|
15
22
|
|
|
16
23
|
export { Divider as default };
|
package/Info/index.js
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React__default, { useState, useMemo } from 'react';
|
|
2
|
+
import { c as classnames } from '../index-031ff73c.js';
|
|
3
|
+
import { S as SvgInfoOutline } from '../InfoOutline-dd2e89d9.js';
|
|
4
|
+
import { T as Tooltip } from '../index-a1b8ec78.js';
|
|
5
|
+
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
|
|
6
|
+
import '../ArrowLeft-b88e2ba8.js';
|
|
7
|
+
import '../tslib.es6-f211516f.js';
|
|
8
|
+
import 'react-dom';
|
|
9
|
+
import '../GeneUIProvider/index.js';
|
|
10
|
+
|
|
11
|
+
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}";
|
|
12
|
+
styleInject(css_248z);
|
|
13
|
+
|
|
14
|
+
const iconSizes = {
|
|
15
|
+
small: 24,
|
|
16
|
+
smallNudge: 20,
|
|
17
|
+
XSmall: 16
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* 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.
|
|
21
|
+
*/
|
|
22
|
+
const Info = ({ infoText, disabled, size = 'smallNudge', appearance = 'default', className }) => {
|
|
23
|
+
const [alwaysShow, setAlwaysShow] = useState(false);
|
|
24
|
+
const keyDownHandler = (event) => {
|
|
25
|
+
if (disabled)
|
|
26
|
+
return;
|
|
27
|
+
if (event.key === 'Enter') {
|
|
28
|
+
setAlwaysShow((prev) => !prev);
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
const handleBlur = () => !disabled && alwaysShow && setAlwaysShow(false);
|
|
32
|
+
const buttonClassNames = useMemo(() => classnames('info', className, {
|
|
33
|
+
[`info_appearance_${appearance}`]: appearance,
|
|
34
|
+
info_disabled: disabled
|
|
35
|
+
}), [appearance, className, disabled]);
|
|
36
|
+
return (React__default.createElement(Tooltip, { text: infoText, alwaysShow: alwaysShow, appearance: appearance === 'inverse' ? 'inverse' : 'default' },
|
|
37
|
+
React__default.createElement("button", { disabled: disabled, "aria-pressed": alwaysShow, className: buttonClassNames, onKeyDown: keyDownHandler, onBlur: handleBlur },
|
|
38
|
+
React__default.createElement(SvgInfoOutline, { className: "info__icon", size: iconSizes[size] }))));
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export { Info as default };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { _ as _objectWithoutProperties, a as _extends } from './ArrowLeft-b88e2ba8.js';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
|
|
4
|
+
var _excluded = ["size", "color"];
|
|
5
|
+
var SvgInfoOutline = function SvgInfoOutline(_ref) {
|
|
6
|
+
var _ref$size = _ref.size,
|
|
7
|
+
size = _ref$size === void 0 ? 24 : _ref$size,
|
|
8
|
+
_ref$color = _ref.color,
|
|
9
|
+
color = _ref$color === void 0 ? "currentColor" : _ref$color,
|
|
10
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
11
|
+
return /*#__PURE__*/React__default.createElement("svg", _extends({
|
|
12
|
+
width: size,
|
|
13
|
+
height: size,
|
|
14
|
+
viewBox: "0 0 24 24",
|
|
15
|
+
fill: color,
|
|
16
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
17
|
+
}, props), /*#__PURE__*/React__default.createElement("path", {
|
|
18
|
+
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",
|
|
19
|
+
fill: color
|
|
20
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
21
|
+
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",
|
|
22
|
+
fill: color
|
|
23
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
24
|
+
d: "M11.969 6.995a.914.914 0 1 0 0 1.829.914.914 0 0 0 0-1.829Z",
|
|
25
|
+
fill: color
|
|
26
|
+
}));
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export { SvgInfoOutline as S };
|
package/Label/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React__default, { useRef } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { S as SvgInfoOutline } from '../InfoOutline-dd2e89d9.js';
|
|
3
3
|
import { c as classnames } from '../index-031ff73c.js';
|
|
4
4
|
import { T as Tooltip } from '../index-a1b8ec78.js';
|
|
5
5
|
import 'prop-types';
|
|
@@ -8,36 +8,12 @@ import 'react-dom';
|
|
|
8
8
|
import '../configs-00612ce0.js';
|
|
9
9
|
import { u as useEllipsisDetection } from '../useEllipsisDetection-c1c9ad94.js';
|
|
10
10
|
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
|
|
11
|
+
import '../ArrowLeft-b88e2ba8.js';
|
|
11
12
|
import '../tslib.es6-f211516f.js';
|
|
12
13
|
import '../GeneUIProvider/index.js';
|
|
13
14
|
import '../_commonjsHelpers-24198af3.js';
|
|
14
15
|
import '../hooks/useDebounce.js';
|
|
15
16
|
|
|
16
|
-
var _excluded = ["size", "color"];
|
|
17
|
-
var SvgInfoOutline = function SvgInfoOutline(_ref) {
|
|
18
|
-
var _ref$size = _ref.size,
|
|
19
|
-
size = _ref$size === void 0 ? 24 : _ref$size,
|
|
20
|
-
_ref$color = _ref.color,
|
|
21
|
-
color = _ref$color === void 0 ? "currentColor" : _ref$color,
|
|
22
|
-
props = _objectWithoutProperties(_ref, _excluded);
|
|
23
|
-
return /*#__PURE__*/React__default.createElement("svg", _extends({
|
|
24
|
-
width: size,
|
|
25
|
-
height: size,
|
|
26
|
-
viewBox: "0 0 24 24",
|
|
27
|
-
fill: color,
|
|
28
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
29
|
-
}, props), /*#__PURE__*/React__default.createElement("path", {
|
|
30
|
-
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",
|
|
31
|
-
fill: color
|
|
32
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
33
|
-
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",
|
|
34
|
-
fill: color
|
|
35
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
36
|
-
d: "M11.969 6.995a.914.914 0 1 0 0 1.829.914.914 0 0 0 0-1.829Z",
|
|
37
|
-
fill: color
|
|
38
|
-
}));
|
|
39
|
-
};
|
|
40
|
-
|
|
41
17
|
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)}";
|
|
42
18
|
styleInject(css_248z);
|
|
43
19
|
|
package/Products/index.js
CHANGED
|
@@ -12,7 +12,6 @@ import { s as styleInject } from '../style-inject.es-746bb8ed.js';
|
|
|
12
12
|
import '../_commonjsHelpers-24198af3.js';
|
|
13
13
|
import '../hooks/useWindowSize.js';
|
|
14
14
|
import '../hooks/useDebounce.js';
|
|
15
|
-
import '../tslib.es6-f211516f.js';
|
|
16
15
|
|
|
17
16
|
var css_248z = "[data-gene-ui-version=\"2.16.1\"] .products-switcher-holder{display:flex;flex-wrap:wrap;justify-content:flex-start;padding:.5rem 2rem;text-align:center;width:100%}[data-gene-ui-version=\"2.16.1\"] .products-switcher-holder .divider{margin-left:auto;margin-right:auto}[data-gene-ui-version=\"2.16.1\"] .product-item{border:1px solid #0000;border-radius:1rem;cursor:pointer;display:flex;flex-wrap:wrap;font:600 1.2rem/1.42 var(--font-family);justify-content:center;margin:.5rem 0;padding:1rem .5rem;text-align:center;width:33.3333333333%}[data-gene-ui-version=\"2.16.1\"] .product-item .icon{align-items:center;background:rgba(var(--background-sc-rgb),.05);border-radius:100%;display:flex;height:5rem;justify-content:center;margin:0 0 .5rem;transition:color .2s,background .2s;width:5rem}[data-gene-ui-version=\"2.16.1\"] .product-item p{width:100%}@media (hover:hover){[data-gene-ui-version=\"2.16.1\"] .product-item:hover .icon{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.16.1\"] .product-item.active .icon{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.16.1\"] .product-item.active{pointer-events:none}@media (hover:hover){[data-gene-ui-version=\"2.16.1\"] .product-item:hover{border-color:rgba(var(--background-sc-rgb),.11)}}";
|
|
18
17
|
styleInject(css_248z);
|
package/index.d.ts
CHANGED
|
@@ -27,6 +27,7 @@ export { default as LinkButton } from './lib/atoms/LinkButton/index';
|
|
|
27
27
|
export { default as HelperText } from './lib/atoms/HelperText';
|
|
28
28
|
export { default as Loader } from './lib/atoms/Loader';
|
|
29
29
|
export { default as Pill } from './lib/atoms/Pill';
|
|
30
|
+
export { default as Info } from './lib/atoms/Info';
|
|
30
31
|
export { Row, Col } from './lib/molecules/Grid';
|
|
31
32
|
export { Tab, Tabs } from './lib/molecules/Tabs';
|
|
32
33
|
export { Step, Steps } from './lib/molecules/Steps';
|
package/index.js
CHANGED
|
@@ -27,6 +27,7 @@ export { default as LinkButton } from './LinkButton/index.js';
|
|
|
27
27
|
export { default as HelperText } from './HelperText/index.js';
|
|
28
28
|
export { default as Loader } from './Loader/index.js';
|
|
29
29
|
export { default as Pill } from './Pill/index.js';
|
|
30
|
+
export { default as Info } from './Info/index.js';
|
|
30
31
|
export { Col, Row } from './Grid/index.js';
|
|
31
32
|
export { Tab, Tabs } from './Tabs/index.js';
|
|
32
33
|
export { Step, Steps } from './Steps/index.js';
|
|
@@ -131,6 +132,7 @@ export { u as useEllipsisDetection } from './useEllipsisDetection-c1c9ad94.js';
|
|
|
131
132
|
import './index-031ff73c.js';
|
|
132
133
|
import './style-inject.es-746bb8ed.js';
|
|
133
134
|
import './tslib.es6-f211516f.js';
|
|
135
|
+
import './InfoOutline-dd2e89d9.js';
|
|
134
136
|
import './ArrowLeft-b88e2ba8.js';
|
|
135
137
|
import './dateValidation-67caec66.js';
|
|
136
138
|
import './_commonjsHelpers-24198af3.js';
|
|
@@ -1,24 +1,48 @@
|
|
|
1
|
-
import { FC,
|
|
1
|
+
import { FC, JSX } from 'react';
|
|
2
|
+
import { IconProps } from '@geneui/icons';
|
|
2
3
|
import './Divider.scss';
|
|
3
|
-
|
|
4
|
+
interface IDividerProps {
|
|
4
5
|
/**
|
|
5
|
-
* Divider
|
|
6
|
-
* Possible values: `
|
|
6
|
+
* Divider visual style <br/>
|
|
7
|
+
* Possible values: `default | strong | brand | inverse`
|
|
7
8
|
*/
|
|
8
|
-
|
|
9
|
+
appearance?: 'default' | 'strong' | 'brand' | 'inverse';
|
|
9
10
|
/**
|
|
10
|
-
* Divider
|
|
11
|
+
* Divider content <br/>
|
|
12
|
+
* The `alignContent` prop accepts a JSX element that will be displayed alongside the divider
|
|
11
13
|
*/
|
|
12
|
-
|
|
14
|
+
content?: JSX.Element;
|
|
15
|
+
/**
|
|
16
|
+
* Divider direction <br/>
|
|
17
|
+
* If the `vertical` prop is `true`, the `Divider` will be displayed vertically otherwise the `Divider` will be displayed horizontally
|
|
18
|
+
*/
|
|
19
|
+
vertical?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* The `Icon` prop accepts a React Functional Component that will be displayed alongside the divider.
|
|
22
|
+
*/
|
|
23
|
+
Icon?: FC<IconProps> | null;
|
|
13
24
|
/**
|
|
14
|
-
* Divider
|
|
15
|
-
*
|
|
25
|
+
* Divider label <br/>
|
|
26
|
+
* Text which will be displayed with `Divider`. The position of the `label` depends on `labelPosition` prop
|
|
16
27
|
*/
|
|
17
|
-
|
|
28
|
+
label?: string;
|
|
18
29
|
/**
|
|
19
|
-
*
|
|
30
|
+
* Divider `label` position <br/>
|
|
31
|
+
* Possible values: `before | after | center`
|
|
20
32
|
*/
|
|
21
|
-
|
|
33
|
+
labelPosition?: 'before' | 'after' | 'center';
|
|
34
|
+
/**
|
|
35
|
+
* provides space between the edge and the divider
|
|
36
|
+
*/
|
|
37
|
+
inset?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Additional class for the parent element.
|
|
40
|
+
* This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
|
|
41
|
+
*/
|
|
42
|
+
className?: string;
|
|
22
43
|
}
|
|
44
|
+
/**
|
|
45
|
+
* A divider separates sections of content to establish visual rhythm and hierarchy. Combine dividers with appropriate spacing and text hierarchy to effectively organize content within your layout.
|
|
46
|
+
*/
|
|
23
47
|
declare const Divider: FC<IDividerProps>;
|
|
24
|
-
export default
|
|
48
|
+
export { IDividerProps, Divider as default };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { IconProps } from '@geneui/icons';
|
|
3
|
+
import './Info.scss';
|
|
4
|
+
declare const iconSizes: Record<'small' | 'smallNudge' | 'XSmall', IconProps['size']>;
|
|
5
|
+
interface IInfoProps {
|
|
6
|
+
/**
|
|
7
|
+
* The text that will be displayed inside the tooltip when the user interacts with the info icon.
|
|
8
|
+
*/
|
|
9
|
+
infoText: string;
|
|
10
|
+
/**
|
|
11
|
+
* Disables the info icon button, preventing any interaction (click, key down, or focus).<br>
|
|
12
|
+
* When `disabled` is true, the button becomes non-interactive, and the tooltip won't be shown.
|
|
13
|
+
*/
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Defines the size of the info icon.<br>
|
|
17
|
+
* Possible values: `small | smallNudge | XSmall`
|
|
18
|
+
*/
|
|
19
|
+
size?: keyof typeof iconSizes;
|
|
20
|
+
/**
|
|
21
|
+
* Determines the visual appearance of the info icon.<br>
|
|
22
|
+
* Possible values: `default | brand | inverse`
|
|
23
|
+
*/
|
|
24
|
+
appearance?: 'default' | 'brand' | 'inverse';
|
|
25
|
+
/**
|
|
26
|
+
* Additional class for the parent element.<br>
|
|
27
|
+
* This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
|
|
28
|
+
*/
|
|
29
|
+
className?: string;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* 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.
|
|
33
|
+
*/
|
|
34
|
+
declare const Info: FC<IInfoProps>;
|
|
35
|
+
export { IInfoProps, Info as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { IInfoProps, default as default } from './Info';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@geneui/components",
|
|
3
3
|
"description": "The Gene UI components library designed for BI tools",
|
|
4
|
-
"version": "3.0.0-next-
|
|
4
|
+
"version": "3.0.0-next-5981a23-15102024",
|
|
5
5
|
"author": "SoftConstruct",
|
|
6
6
|
"homepage": "https://github.com/softconstruct/gene-ui-components#readme",
|
|
7
7
|
"repository": {
|