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

package/KeyValue.js

@@ -0,0 +1,49 @@
+import React__default, { createContext, useMemo, useContext, cloneElement } from 'react';
+import { c as classNames } from './index-ce02421b.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import Info from './Info.js';
+import './InfoOutline-dd2e89d9.js';
+import './ArrowLeft-b88e2ba8.js';
+import './Tooltip.js';
+import './floating-ui.react-0485e4db.js';
+import 'react-dom';
+import './GeneUIProvider.js';
+
+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)}";
+styleInject(css_248z);
+
+const KeyValueContext = createContext({});
+/**
+ * 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.
+ */
+const KeyValue = ({ className, direction = "vertical", size = "medium", children, spaceBetween = false }) => {
+    const memoizedKeyValueContextValue = useMemo(() => ({
+        size
+    }), [size]);
+    return (React__default.createElement(KeyValueContext.Provider, { value: memoizedKeyValueContextValue },
+        React__default.createElement("div", { className: classNames(`keyValue keyValue_direction_${direction} keyValue_size_${size}`, className, {
+                keyValue_spaceBetween: spaceBetween
+            }) }, children)));
+};
+
+const infoSize = {
+    large: "small",
+    medium: "smallNudge"
+};
+const Key = ({ infoText, children }) => {
+    const { size } = useContext(KeyValueContext);
+    return (React__default.createElement("div", { className: "keyValue__content" },
+        React__default.createElement("span", { className: "keyValue__title" }, children),
+        infoText && size && React__default.createElement(Info, { className: "keyValue__icon", infoText: infoText, size: infoSize[size] })));
+};
+
+const pillSize = {
+    large: "medium",
+    medium: "small"
+};
+const Value = ({ children }) => {
+    const { size } = useContext(KeyValueContext);
+    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] }))));
+};
+
+export { Key, KeyValue, Value };

package/TextLink.js

@@ -2,19 +2,22 @@ import React__default from 'react';
 import { c as classNames } from './index-ce02421b.js';
 import { s as styleInject } from './style-inject.es-746bb8ed.js';
 
-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)}";
+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)}";
 styleInject(css_248z);
 
+const iconSize = {
+    medium: 20,
+    large: 24
+};
 /**
  * A link is styled text that navigates users to another location, either within the current experience or to a different app or website.
  */
-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, {
+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, {
         textLink_underline: underline,
         textLink_disabled: disabled
     }), href: href, onClick: onClick }, (disabled && { tabIndex: -1 })),
-    React__default.createElement("span", { className: "textLink__text" },
-        Icon && iconBefore && React__default.createElement(Icon, { className: "textLink__icon textLink__icon_before", size: 20 }),
-        text,
-        Icon && !iconBefore && React__default.createElement(Icon, { className: "textLink__icon textLink__icon_after", size: 20 }))));
+    Icon && iconBefore && React__default.createElement(Icon, { className: "textLink__icon textLink__icon_before", size: iconSize[size] }),
+    React__default.createElement("span", { className: "textLink__text" }, text),
+    Icon && !iconBefore && React__default.createElement(Icon, { className: "textLink__icon textLink__icon_after", size: iconSize[size] })));
 
 export { TextLink as default };

package/components/atoms/TextLink/TextLink.d.ts

@@ -1,9 +1,6 @@
 import React, { FC } from "react";
+import { IconProps } from "@geneui/icons";
 import "./TextLink.scss";
-interface IconProps extends React.SVGProps<SVGSVGElement> {
-    size?: 16 | 20 | 24 | 28 | 32 | 48;
-    color?: string;
-}
 interface ITextLinkProps {
     /**
      * Main visible content in the link.
@@ -39,6 +36,11 @@ interface ITextLinkProps {
      * Possible values: <code>primary | secondary | inverse </code>
      */
     appearance?: "primary" | "secondary" | "inverse";
+    /**
+     * Defines the size of the Text Link.<br>
+     * Possible values: `medium | large`
+     */
+    size?: "medium" | "large";
     /**
      * When `true`, the link is disabled and not clickable.
      */

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

@@ -0,0 +1,7 @@
+import { FC } from "react";
+interface IKeyProps {
+    infoText?: string;
+    children: string;
+}
+declare const Key: FC<IKeyProps>;
+export { IKeyProps, Key as default };

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

@@ -0,0 +1,38 @@
+import React, { FC, ReactElement } from "react";
+import "./KeyValue.scss";
+import { IKeyProps } from "./Key";
+import { IValueProps } from "./Value";
+interface IKeyValueContextProps {
+    /**
+     * Size
+     * Possible values: `medium | large`;
+     */
+    size?: "medium" | "large";
+}
+interface IKeyValueProps extends IKeyValueContextProps {
+    /**
+     * 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;
+    /**
+     * Key - Value direction <br/>
+     * Possible values: `vertical | horizontal`
+     */
+    direction?: "vertical" | "horizontal";
+    /**
+     * Adds space between key and value in horizontal direction.
+     */
+    spaceBetween?: boolean;
+    /**
+     * Children - value direction <br/>
+     * Possible values: `Key | Value`
+     */
+    children: [ReactElement<IKeyProps>, ReactElement<IValueProps>];
+}
+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 };

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

@@ -0,0 +1,6 @@
+import { FC, ReactElement } from "react";
+interface IValueProps {
+    children: ReactElement | string;
+}
+declare const Value: FC<IValueProps>;
+export { IValueProps, Value as default };

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

@@ -0,0 +1,3 @@
+export { IKeyValueProps, default as KeyValue } from "./KeyValue";
+export { IKeyProps, default as Key } from "./Key";
+export { IValueProps, default as Value } from "./Value";

package/index.d.ts

@@ -14,6 +14,7 @@ export { default as Tooltip } from "./components/molecules/Tooltip";
 export { default as ProgressBar } from "./components/molecules/ProgressBar";
 export { Steps, Step, IStepProps, IStepsProps } from "./components/molecules/Steps";
 export { default as Tag, ITagProps } from "./components/molecules/Tag";
+export { KeyValue, Key, Value, IKeyValueProps, IKeyProps, IValueProps } from "./components/molecules/KeyValue";
 export { default as GeneUIProvider, GeneUIDesignSystemContext, IGeneUIDesignSystemContext, IGeneUIProviderProps } from "./components/providers/GeneUIProvider";
 export { default as useDebounce } from "./hooks/useDebounceCallback";
 export { default as useEllipsisDetection } from "./hooks/useEllipsisDetection";

package/index.js

@@ -14,6 +14,7 @@ export { default as Tooltip } from './Tooltip.js';
 export { default as ProgressBar } from './ProgressBar.js';
 export { Step, Steps } from './Steps.js';
 export { default as Tag } from './Tag.js';
+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';

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