@geneui/components 3.0.0-next-02b4659-17022025 → 3.0.0-next-cbf1483-19022025

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.
Files changed (17) hide show
  1. package/KeyValue.js +49 -0
  2. package/Popover.js +1 -1
  3. package/Text.js +30 -0
  4. package/TextLink.js +9 -6
  5. package/Tooltip.js +16 -4
  6. package/components/atoms/Text/Text.d.ts +67 -0
  7. package/components/atoms/Text/index.d.ts +1 -0
  8. package/components/atoms/TextLink/TextLink.d.ts +6 -4
  9. package/components/molecules/KeyValue/Key.d.ts +7 -0
  10. package/components/molecules/KeyValue/KeyValue.d.ts +38 -0
  11. package/components/molecules/KeyValue/Value.d.ts +9 -0
  12. package/components/molecules/KeyValue/index.d.ts +3 -0
  13. package/{index-faa9d19a.js → index-24d8893c.js} +1 -1
  14. package/index.d.ts +2 -0
  15. package/index.js +3 -1
  16. package/package.json +1 -1
  17. package/types/index.d.ts +0 -0
package/KeyValue.js ADDED
@@ -0,0 +1,49 @@
1
+ import React__default, { createContext, useMemo, useContext, cloneElement } from 'react';
2
+ import { c as classNames } from './index-ce02421b.js';
3
+ import { s as styleInject } from './style-inject.es-746bb8ed.js';
4
+ import Info from './Info.js';
5
+ import './InfoOutline-dd2e89d9.js';
6
+ import './ArrowLeft-b88e2ba8.js';
7
+ import './Tooltip.js';
8
+ import './floating-ui.react-0485e4db.js';
9
+ import 'react-dom';
10
+ import './GeneUIProvider.js';
11
+
12
+ var css_248z = ".keyValue{display:inline-flex;max-width:100%}.keyValue_direction_vertical{flex-direction:column}.keyValue_direction_horizontal.keyValue_spaceBetween{width:100%}.keyValue__content{align-items:center;color:var(--guit-sem-color-foreground-neutral-2);display:flex;flex:1}.keyValue__value{color:var(--guit-sem-color-foreground-neutral-1);word-break:break-word}.keyValue_size_large{gap:var(--guit-ref-spacing-medium)}.keyValue_size_large .keyValue__content{gap:var(--guit-ref-spacing-xsmall)}.keyValue_size_large .keyValue__title,.keyValue_size_large .keyValue__value{font-family:var(--guit-sem-font-label-large-default-medium-font-family),sans-serif;font-size:var(--guit-sem-font-label-large-default-semibold-font-size);font-weight:var(--guit-sem-font-label-large-default-medium-font-weight);line-height:var(--guit-sem-font-label-large-default-semibold-line-height)}.keyValue_size_medium{gap:var(--guit-ref-spacing-medium)}.keyValue_size_medium .keyValue__content{gap:var(--guit-ref-spacing-xsmall)}.keyValue_size_medium .keyValue__title,.keyValue_size_medium .keyValue__value{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family),sans-serif;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)}";
13
+ styleInject(css_248z);
14
+
15
+ const KeyValueContext = createContext({});
16
+ /**
17
+ * 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.
18
+ */
19
+ const KeyValue = ({ className, direction = "vertical", size = "medium", children, spaceBetween = false }) => {
20
+ const memoizedKeyValueContextValue = useMemo(() => ({
21
+ size
22
+ }), [size]);
23
+ return (React__default.createElement(KeyValueContext.Provider, { value: memoizedKeyValueContextValue },
24
+ React__default.createElement("div", { className: classNames(`keyValue keyValue_direction_${direction} keyValue_size_${size}`, className, {
25
+ keyValue_spaceBetween: spaceBetween
26
+ }) }, children)));
27
+ };
28
+
29
+ const infoSize = {
30
+ large: "small",
31
+ medium: "smallNudge"
32
+ };
33
+ const Key = ({ infoText, children }) => {
34
+ const { size } = useContext(KeyValueContext);
35
+ return (React__default.createElement("div", { className: "keyValue__content" },
36
+ React__default.createElement("span", { className: "keyValue__title" }, children),
37
+ infoText && size && React__default.createElement(Info, { className: "keyValue__icon", infoText: infoText, size: infoSize[size] })));
38
+ };
39
+
40
+ const pillSize = {
41
+ large: "medium",
42
+ medium: "small"
43
+ };
44
+ const Value = ({ children }) => {
45
+ const { size } = useContext(KeyValueContext);
46
+ return (React__default.createElement(React__default.Fragment, null, typeof children === "string" ? (React__default.createElement("span", { className: "keyValue__value" }, children)) : (size && cloneElement(children, { size: pillSize[size] }))));
47
+ };
48
+
49
+ export { Key, KeyValue, Value };
package/Popover.js CHANGED
@@ -1,4 +1,4 @@
1
- export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions } from './index-faa9d19a.js';
1
+ export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions } from './index-24d8893c.js';
2
2
  import 'react';
3
3
  import './floating-ui.react-0485e4db.js';
4
4
  import 'react-dom';
package/Text.js ADDED
@@ -0,0 +1,30 @@
1
+ import React__default, { useRef } from 'react';
2
+ import { c as classNames } from './index-ce02421b.js';
3
+ import Tooltip from './Tooltip.js';
4
+ import { u as useEllipsisDetection } from './useEllipsisDetection-e545ae62.js';
5
+ import { s as styleInject } from './style-inject.es-746bb8ed.js';
6
+ import './floating-ui.react-0485e4db.js';
7
+ import 'react-dom';
8
+ import './GeneUIProvider.js';
9
+ import './useDebounceCallback-999deae7.js';
10
+
11
+ 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}";
12
+ styleInject(css_248z);
13
+
14
+ /**
15
+ * Text component which has predefined tokens
16
+ */
17
+ const Text = ({ className, variant = "bodyMediumMedium", children, as, alignment = "start", truncate = false, withTooltip = true }) => {
18
+ const textRef = useRef(null);
19
+ const isTruncated = useEllipsisDetection(textRef);
20
+ const Component = as;
21
+ const computedClassNames = classNames("text", {
22
+ [`text_variant_${variant}`]: variant,
23
+ [`text_alignment_${alignment}`]: alignment,
24
+ "ellipsis-text": truncate
25
+ }, className);
26
+ return (React__default.createElement(Tooltip, { text: children, isVisible: isTruncated && withTooltip },
27
+ React__default.createElement(Component, { ref: textRef, className: computedClassNames }, children)));
28
+ };
29
+
30
+ export { Text as default };
package/TextLink.js CHANGED
@@ -2,19 +2,22 @@ import React__default from 'react';
2
2
  import { c as classNames } from './index-ce02421b.js';
3
3
  import { s as styleInject } from './style-inject.es-746bb8ed.js';
4
4
 
5
- var css_248z = ".textLink{border-radius:var(--guit-ref-radius-4xsmall);cursor:pointer;display:inline-flex;word-break:break-word}.textLink_underline .textLink__text{font-family:var(--guit-sem-font-body-medium-underline-medium-font-family);font-size:var(--guit-sem-font-body-medium-underline-medium-font-size);font-weight:var(--guit-sem-font-body-medium-underline-medium-font-weight);line-height:var(--guit-sem-font-body-medium-underline-medium-line-height);-webkit-text-decoration:var(--guit-sem-font-body-medium-underline-medium-text-decoration);text-decoration:var(--guit-sem-font-body-medium-underline-medium-text-decoration)}.textLink:not(.textLink_underline) .textLink__text{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)}.textLink_color_primary{color:var(--guit-sem-color-foreground-brand)}.textLink_color_primary:hover{color:var(--guit-sem-color-foreground-brand-hover)}.textLink_color_primary:active{color:var(--guit-sem-color-foreground-brand-pressed)}.textLink_color_secondary{color:var(--guit-sem-color-foreground-neutral-2)}.textLink_color_secondary:hover{color:var(--guit-sem-color-foreground-neutral-2-hover)}.textLink_color_secondary:active{color:var(--guit-sem-color-foreground-neutral-2-pressed)}.textLink_color_inverse{color:var(--guit-sem-color-foreground-inverse)}.textLink_color_inverse:hover{color:var(--guit-sem-color-foreground-inverse-hover)}.textLink_color_inverse:active{color:var(--guit-sem-color-foreground-inverse-pressed)}.textLink_disabled{pointer-events:none}.textLink_disabled:not(.textLink_color_inverse){color:var(--guit-sem-color-foreground-disabled)}.textLink_disabled.textLink_color_inverse{color:var(--guit-sem-color-foreground-inverse-disabled)}.textLink__text{color:inherit}.textLink__icon{flex:0 0 auto;vertical-align:middle}.textLink__icon_before{margin-inline-end:var(--guit-ref-spacing-3xsmall)}.textLink__icon_after{margin-inline-start:var(--guit-ref-spacing-3xsmall)}";
5
+ var css_248z = ".textLink{border-radius:var(--guit-ref-radius-4xsmall);cursor:pointer;display:inline-flex;word-break:break-word}.textLink_size_large.textLink_underline .textLink__text{font-family:var(--guit-sem-font-body-large-underline-medium-font-family),sans-serif;font-size:var(--guit-sem-font-body-large-underline-medium-font-size);font-weight:var(--guit-sem-font-body-large-underline-medium-font-weight);line-height:var(--guit-sem-font-body-large-underline-medium-line-height);-webkit-text-decoration:var(--guit-ref-font-text-decoration-underline);text-decoration:var(--guit-ref-font-text-decoration-underline)}.textLink_size_large:not(.textLink_underline) .textLink__text{font-family:var(--guit-sem-font-body-large-default-medium-font-family),sans-serif;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)}.textLink_size_medium.textLink_underline .textLink__text{font-family:var(--guit-sem-font-body-medium-underline-medium-font-family),sans-serif;font-size:var(--guit-sem-font-body-medium-underline-medium-font-size);font-weight:var(--guit-sem-font-body-medium-underline-medium-font-weight);line-height:var(--guit-sem-font-body-medium-underline-medium-line-height);-webkit-text-decoration:var(--guit-ref-font-text-decoration-underline);text-decoration:var(--guit-ref-font-text-decoration-underline)}.textLink_size_medium:not(.textLink_underline) .textLink__text{font-family:var(--guit-sem-font-body-medium-default-medium-font-family),sans-serif;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)}.textLink_color_primary{color:var(--guit-sem-color-foreground-brand)}.textLink_color_primary:hover{color:var(--guit-sem-color-foreground-brand-hover)}.textLink_color_primary:active{color:var(--guit-sem-color-foreground-brand-pressed)}.textLink_color_secondary{color:var(--guit-sem-color-foreground-neutral-2)}.textLink_color_secondary:hover{color:var(--guit-sem-color-foreground-neutral-2-hover)}.textLink_color_secondary:active{color:var(--guit-sem-color-foreground-neutral-2-pressed)}.textLink_color_inverse{color:var(--guit-sem-color-foreground-inverse)}.textLink_color_inverse:hover{color:var(--guit-sem-color-foreground-inverse-hover)}.textLink_color_inverse:active{color:var(--guit-sem-color-foreground-inverse-pressed)}.textLink_disabled{pointer-events:none}.textLink_disabled:not(.textLink_color_inverse){color:var(--guit-sem-color-foreground-disabled)}.textLink_disabled.textLink_color_inverse{color:var(--guit-sem-color-foreground-inverse-disabled)}.textLink__icon{flex:0 0 auto;vertical-align:middle}.textLink__icon_before{margin-inline-end:var(--guit-ref-spacing-3xsmall)}.textLink__icon_after{margin-inline-start:var(--guit-ref-spacing-3xsmall)}";
6
6
  styleInject(css_248z);
7
7
 
8
+ const iconSize = {
9
+ medium: 20,
10
+ large: 24
11
+ };
8
12
  /**
9
13
  * A link is styled text that navigates users to another location, either within the current experience or to a different app or website.
10
14
  */
11
- const TextLink = ({ text, href, iconBefore, rel, target = "self", underline, appearance = "primary", disabled, onClick, isLoading, Icon, className }) => isLoading ? (React__default.createElement("span", null, "skeleton")) : (React__default.createElement("a", Object.assign({ target: `_${target}`, rel: rel, className: classNames(`textLink textLink_color_${appearance}`, className, {
15
+ const TextLink = ({ text, href, iconBefore, rel, target = "self", underline, appearance = "primary", size = "medium", disabled, onClick, isLoading, Icon, className }) => isLoading ? (React__default.createElement("span", null, "skeleton")) : (React__default.createElement("a", Object.assign({ target: `_${target}`, rel: rel, className: classNames(`textLink textLink_size_${size} textLink_color_${appearance}`, className, {
12
16
  textLink_underline: underline,
13
17
  textLink_disabled: disabled
14
18
  }), href: href, onClick: onClick }, (disabled && { tabIndex: -1 })),
15
- React__default.createElement("span", { className: "textLink__text" },
16
- Icon && iconBefore && React__default.createElement(Icon, { className: "textLink__icon textLink__icon_before", size: 20 }),
17
- text,
18
- Icon && !iconBefore && React__default.createElement(Icon, { className: "textLink__icon textLink__icon_after", size: 20 }))));
19
+ Icon && iconBefore && React__default.createElement(Icon, { className: "textLink__icon textLink__icon_before", size: iconSize[size] }),
20
+ React__default.createElement("span", { className: "textLink__text" }, text),
21
+ Icon && !iconBefore && React__default.createElement(Icon, { className: "textLink__icon textLink__icon_after", size: iconSize[size] })));
19
22
 
20
23
  export { TextLink as default };
package/Tooltip.js CHANGED
@@ -275,7 +275,7 @@ function requireReactIs_development () {
275
275
  }
276
276
  } (reactIs));
277
277
 
278
- 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}";
278
+ 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}";
279
279
  styleInject(css_248z);
280
280
 
281
281
  const positions = [
@@ -355,6 +355,7 @@ A tooltip is a small, elevated surface that appears to provide contextual inform
355
355
  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.
356
356
  */
357
357
  const Tooltip = ({ children, position = "top-right", text, customPosition, alwaysShow, padding = 10, isVisible = true, appearance = "default", Icon }) => {
358
+ var _a;
358
359
  const { geneUIProviderRef } = useContext(GeneUIDesignSystemContext);
359
360
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
360
361
  const arrowRef = useRef(null);
@@ -413,17 +414,28 @@ const Tooltip = ({ children, position = "top-right", text, customPosition, alway
413
414
  const getCorrectPosition = arrowPosition
414
415
  ? { [arrowPosition]: offsetFromEdge }
415
416
  : { insetInlineStart: middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.x };
417
+ let arrowRegardingPosition = 0;
418
+ if ((_a = arrowRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) {
419
+ if (staticSide.match("top")) {
420
+ arrowRegardingPosition = -arrowRef.current.offsetHeight;
421
+ }
422
+ else if (staticSide === "bottom") {
423
+ arrowRegardingPosition = -arrowRef.current.offsetWidth + 8;
424
+ }
425
+ else {
426
+ arrowRegardingPosition = -arrowRef.current.offsetWidth + 4;
427
+ }
428
+ }
416
429
  return (React__default.createElement(React__default.Fragment, null,
417
430
  component,
418
431
  isVisible && (alwaysShow || isPopoverOpen) && (React__default.createElement(FloatingPortal, { root: geneUIProviderRef.current },
419
432
  React__default.createElement("div", Object.assign({ className: `tooltip tooltip_color_${appearance} tooltip_position_${currentDirection}`, ref: refs.setFloating, style: floatingStyles }, getFloatingProps()),
420
- 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 }) },
433
+ 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 }) },
421
434
  React__default.createElement("svg", { width: "12", height: "4", viewBox: "0 0 12 4", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
422
435
  React__default.createElement("path", { className: "tooltip__arrowPath", d: "M6 4L0 0L12 0L6 4Z" }))),
423
436
  React__default.createElement("div", { className: "tooltip__textWrapper" },
424
437
  React__default.createElement("p", { className: "tooltip__text" }, text)),
425
- Icon && (React__default.createElement("div", { className: "tooltip__icon" },
426
- React__default.createElement(Icon, { size: 16 }))))))));
438
+ Icon && React__default.createElement(Icon, { size: 16, className: "tooltip__icon" }))))));
427
439
  };
428
440
 
429
441
  export { Tooltip as default };
package/components/atoms/Text/Text.d.ts ADDED
@@ -0,0 +1,67 @@
1
+ import { FC } from "react";
2
+ import "./Text.scss";
3
+ interface ITextProps {
4
+ /**
5
+ * Additional class for the parent element.
6
+ * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
7
+ */
8
+ className?: string;
9
+ /**
10
+ * The HTML tag with which text will be rendered.<br/>
11
+ * Possible values: `h1 | h2 | h3 | h4 | h5 | h6 | p | span`
12
+ */
13
+ as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
14
+ /**
15
+ * Style variants.<br>
16
+ * Will affect on `font-family` ,`font-size` ,`font-weight` and `line-height`.<br/>
17
+ * Possible values: `headingXLargeSemibold |`
18
+ <br/> `headingLargeSemibold |`
19
+ <br/> `headingMediumSemibold |`
20
+ <br/> `headingSmallSemibold |`
21
+ <br/> `headingXSmallSemibold |`
22
+ <br/> `subheadingLargeSemibold |`
23
+ <br/> `subheadingMediumSemibold |`
24
+ <br/> `labelLargeSemibold |`
25
+ <br/> `labelLargeMedium |`
26
+ <br/> `labelMediumSemibold |`
27
+ <br/> `labelMediumMedium |`
28
+ <br/> `labelSmallSemibold |`
29
+ <br/> `labelSmallMedium |`
30
+ <br/> `bodyLargeSemibold |`
31
+ <br/> `bodyLargeMedium |`
32
+ <br/> `bodyLargeRegular |`
33
+ <br/> `bodyMediumSemibold |`
34
+ <br/> `bodyMediumMedium |`
35
+ <br/> `bodyMediumRegular |`
36
+ <br/> `captionLargeSemibold |`
37
+ <br/> `captionLargeMedium |`
38
+ <br/> `captionLargeRegular |`
39
+ <br/> `captionMediumMedium |`
40
+ <br/> `captionMediumRegular`
41
+ */
42
+ 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";
43
+ /**
44
+ * Text alignment<br>
45
+ * Possible values: `left | center | right`
46
+ */
47
+ alignment?: "start" | "center" | "end";
48
+ /**
49
+ * Text content
50
+ */
51
+ children: string;
52
+ /**
53
+ * If true, the text will be truncated with ellipsis when it overflows.
54
+ * This is typically used to limit text to a single line or prevent overflow.
55
+ */
56
+ truncate?: boolean;
57
+ /**
58
+ * If true, a tooltip will be displayed when the text is truncated and hovered.
59
+ * The tooltip will show the full text content when it's truncated.
60
+ */
61
+ withTooltip?: boolean;
62
+ }
63
+ /**
64
+ * Text component which has predefined tokens
65
+ */
66
+ declare const Text: FC<ITextProps>;
67
+ export { ITextProps, Text as default };
package/components/atoms/Text/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { ITextProps, default } from "./Text";
package/components/atoms/TextLink/TextLink.d.ts CHANGED
@@ -1,9 +1,6 @@
1
1
  import React, { FC } from "react";
2
+ import { IconProps } from "@geneui/icons";
2
3
  import "./TextLink.scss";
3
- interface IconProps extends React.SVGProps<SVGSVGElement> {
4
- size?: 16 | 20 | 24 | 28 | 32 | 48;
5
- color?: string;
6
- }
7
4
  interface ITextLinkProps {
8
5
  /**
9
6
  * Main visible content in the link.
@@ -39,6 +36,11 @@ interface ITextLinkProps {
39
36
  * Possible values: <code>primary | secondary | inverse </code>
40
37
  */
41
38
  appearance?: "primary" | "secondary" | "inverse";
39
+ /**
40
+ * Defines the size of the Text Link.<br>
41
+ * Possible values: `medium | large`
42
+ */
43
+ size?: "medium" | "large";
42
44
  /**
43
45
  * When `true`, the link is disabled and not clickable.
44
46
  */
package/components/molecules/KeyValue/Key.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { FC } from "react";
2
+ interface IKeyProps {
3
+ infoText?: string;
4
+ children: string;
5
+ }
6
+ declare const Key: FC<IKeyProps>;
7
+ export { IKeyProps, Key as default };
package/components/molecules/KeyValue/KeyValue.d.ts ADDED
@@ -0,0 +1,38 @@
1
+ import React, { FC, ReactElement } from "react";
2
+ import "./KeyValue.scss";
3
+ import { IKeyProps } from "./Key";
4
+ import { IValueProps } from "./Value";
5
+ interface IKeyValueContextProps {
6
+ /**
7
+ * Size
8
+ * Possible values: `medium | large`;
9
+ */
10
+ size?: "medium" | "large";
11
+ }
12
+ interface IKeyValueProps extends IKeyValueContextProps {
13
+ /**
14
+ * Additional class for the parent element.
15
+ * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
16
+ */
17
+ className?: string;
18
+ /**
19
+ * Key - Value direction <br/>
20
+ * Possible values: `vertical | horizontal`
21
+ */
22
+ direction?: "vertical" | "horizontal";
23
+ /**
24
+ * Adds space between key and value in horizontal direction.
25
+ */
26
+ spaceBetween?: boolean;
27
+ /**
28
+ * Children - value direction <br/>
29
+ * Possible values: `Key | Value`
30
+ */
31
+ children: [ReactElement<IKeyProps>, ReactElement<IValueProps>];
32
+ }
33
+ export declare const KeyValueContext: React.Context<IKeyValueContextProps>;
34
+ /**
35
+ * 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.
36
+ */
37
+ declare const KeyValue: FC<IKeyValueProps>;
38
+ export { IKeyValueProps, KeyValue as default };
package/components/molecules/KeyValue/Value.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { FC, ReactElement } from "react";
2
+ interface IValueProps {
3
+ /**
4
+ * Possible values: `Pill | TextLink | Text` components or `string`
5
+ */
6
+ children: ReactElement | string;
7
+ }
8
+ declare const Value: FC<IValueProps>;
9
+ export { IValueProps, Value as default };
package/components/molecules/KeyValue/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { IKeyValueProps, default as KeyValue } from "./KeyValue";
2
+ export { IKeyProps, default as Key } from "./Key";
3
+ export { IValueProps, default as Value } from "./Value";
package/{index-faa9d19a.js → index-24d8893c.js} RENAMED
@@ -307,7 +307,7 @@ const Popover = ({ size = "medium", position = "bottom-center", padding = 10, is
307
307
  leastOverlap = Infinity;
308
308
  };
309
309
  }, [popoverOpened, refs.floating.current, placement, alwaysShow, position, currentPosition]);
310
- const arrowOffsetFromEdge = staticSide === "left" || staticSide === "right" ? 7 : 11;
310
+ const arrowOffsetFromEdge = 5;
311
311
  return (React__default.createElement(React__default.Fragment, null, isShowPopover && (React__default.createElement(FloatingPortal, { root: geneUIProviderRef.current },
312
312
  React__default.createElement("div", Object.assign({ style: styles, className: `popover popover_size_${size} popover_position_${currentDirection}`, ref: refs.setFloating }, getFloatingProps()),
313
313
  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 CHANGED
@@ -6,6 +6,7 @@ export { default as Pill, IPillProps } from "./components/atoms/Pill";
6
6
  export { default as Divider, IDividerProps } from "./components/atoms/Divider";
7
7
  export { default as Info, IInfoProps } from "./components/atoms/Info";
8
8
  export { default as Button, IButtonProps } from "./components/atoms/Button";
9
+ export { default as Text, ITextProps } from "./components/atoms/Text";
9
10
  export { Popover, PopoverBody, PopoverFooter, PopoverFooterActions, IPopoverProps } from "./components/atoms/Popover";
10
11
  export { default as Badge, IBadgeProps } from "./components/atoms/Badge";
11
12
  export { default as Scrollbar, IScrollbarProps } from "./components/atoms/Scrollbar";
@@ -14,6 +15,7 @@ export { default as Tooltip } from "./components/molecules/Tooltip";
14
15
  export { default as ProgressBar } from "./components/molecules/ProgressBar";
15
16
  export { Steps, Step, IStepProps, IStepsProps } from "./components/molecules/Steps";
16
17
  export { default as Tag, ITagProps } from "./components/molecules/Tag";
18
+ export { KeyValue, Key, Value, IKeyValueProps, IKeyProps, IValueProps } from "./components/molecules/KeyValue";
17
19
  export { default as GeneUIProvider, GeneUIDesignSystemContext, IGeneUIDesignSystemContext, IGeneUIProviderProps } from "./components/providers/GeneUIProvider";
18
20
  export { default as useDebounce } from "./hooks/useDebounceCallback";
19
21
  export { default as useEllipsisDetection } from "./hooks/useEllipsisDetection";
package/index.js CHANGED
@@ -6,7 +6,8 @@ export { default as Pill } from './Pill.js';
6
6
  export { default as Divider } from './Divider.js';
7
7
  export { default as Info } from './Info.js';
8
8
  export { default as Button } from './Button.js';
9
- export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions, u as useScrollLock } from './index-faa9d19a.js';
9
+ export { default as Text } from './Text.js';
10
+ export { P as Popover, a as PopoverBody, b as PopoverFooter, c as PopoverFooterActions, u as useScrollLock } from './index-24d8893c.js';
10
11
  export { default as Badge } from './Badge.js';
11
12
  export { default as Scrollbar } from './Scrollbar.js';
12
13
  export { Col, Grid, Row } from './Grid.js';
@@ -14,6 +15,7 @@ export { default as Tooltip } from './Tooltip.js';
14
15
  export { default as ProgressBar } from './ProgressBar.js';
15
16
  export { Step, Steps } from './Steps.js';
16
17
  export { default as Tag } from './Tag.js';
18
+ export { Key, KeyValue, Value } from './KeyValue.js';
17
19
  export { GeneUIDesignSystemContext, default as GeneUIProvider } from './GeneUIProvider.js';
18
20
  export { u as useDebounce } from './useDebounceCallback-999deae7.js';
19
21
  export { u as useEllipsisDetection } from './useEllipsisDetection-e545ae62.js';
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-02b4659-17022025",
4
+ "version": "3.0.0-next-cbf1483-19022025",
5
5
  "author": "SoftConstruct",
6
6
  "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
7
7
  "repository": {
package/types/index.d.ts DELETED
File without changes