@iress-oss/ids-components 6.0.0-beta.8 → 6.0.0

package/dist/components/Avatar/Avatar.d.ts

@@ -2,6 +2,14 @@ import { ReactNode } from 'react';
 import { IressStyledProps } from '../../types';
 import { IressIconProps } from '../Icon';
 type AvatarMode = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | 'danger' | 'info' | 'success' | 'warning';
+export interface IressAvatarTooltip {
+    /** The person's name, displayed prominently. */
+    name: string;
+    /** Badge label (e.g. "New"). Shown as muted metadata. */
+    badge?: string;
+    /** Type label (e.g. "Group"). Shown as muted metadata. */
+    type?: string;
+}
 export interface IressAvatarProps extends IressStyledProps<'span'> {
     /**
      * Badge indicator at the top-right of the avatar.
@@ -32,6 +40,11 @@ export interface IressAvatarProps extends IressStyledProps<'span'> {
      * Controls the avatar's background and text colour.
      */
     mode?: AvatarMode;
+    /**
+     * Tooltip shown on hover. Displays the name prominently with optional
+     * metadata (badge and type) in muted text separated by a dot.
+     */
+    tooltip?: IressAvatarTooltip;
     /**
      * Secondary circle at the bottom-right. Pass an icon `ReactNode` to display, or `false`/`undefined` to hide.
      * @default false
@@ -46,7 +59,7 @@ export interface IressAvatarProps extends IressStyledProps<'span'> {
     } | false;
 }
 export declare const IressAvatar: {
-    ({ children, badge, type, mode, compact, className, ...restProps }: IressAvatarProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, badge, type, mode, compact, tooltip, className, ...restProps }: IressAvatarProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/Avatar/Avatar.js

@@ -3,53 +3,64 @@ import { t } from "../../cx-CZ8IJJTy.js";
 import { n } from "../../is-valid-prop-BoZ7GJt2.js";
 import { GlobalCSSClass as r } from "../../enums.js";
 import { IressIcon as i } from "../Icon/Icon.js";
-import { avatar as a } from "./Avatar.styles.js";
-import { useId as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { IressTooltip as a } from "../Tooltip/Tooltip.js";
+import { avatar as o } from "./Avatar.styles.js";
+import { useId as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/Avatar/Avatar.tsx
-var l = ({ children: l, badge: u = !1, type: d = !1, mode: f, compact: p = !1, className: m, ...h }) => {
-	let g = a({
-		compact: p,
-		mode: f
-	}), _ = a.raw({
-		badgeMode: typeof u == "object" && u.mode ? String(u.mode) : void 0,
-		compact: p,
-		mode: f,
-		noBadgeIcon: u && !u.icon
-	}), [v, y] = n(h), b = o();
-	return /* @__PURE__ */ c("span", {
-		...y,
-		className: t(e(_.root, v), m, r.Avatar),
+var u = ({ children: u, badge: d = !1, type: f = !1, mode: p, compact: m = !1, tooltip: h, className: g, ..._ }) => {
+	let v = o({
+		compact: m,
+		mode: p
+	}), y = o.raw({
+		badgeMode: typeof d == "object" && d.mode ? String(d.mode) : void 0,
+		compact: m,
+		mode: p,
+		noBadgeIcon: d && !d.icon
+	}), [b, x] = n(_), S = s(), C = () => {
+		if (!h) return [];
+		let e = [h.badge, h.type].filter(Boolean), t = [h.name];
+		return e.length > 0 && t.push(e.join(" · ")), t;
+	}, w = /* @__PURE__ */ l("span", {
+		...x,
+		tabIndex: h ? x.tabIndex ?? 0 : x.tabIndex,
+		className: t(e(y.root, b), g, r.Avatar),
 		role: "img",
-		"aria-labelledby": b,
+		"aria-labelledby": S,
 		children: [
-			/* @__PURE__ */ s("span", {
-				className: g.initials,
-				id: b,
-				"aria-label": h["aria-label"],
-				children: l
+			/* @__PURE__ */ c("span", {
+				className: v.initials,
+				id: S,
+				"aria-label": _["aria-label"],
+				children: u
 			}),
-			u && /* @__PURE__ */ s("span", {
-				className: g.badge,
+			d && /* @__PURE__ */ c("span", {
+				className: v.badge,
 				role: "img",
-				"aria-label": u.ariaLabel,
-				children: u.icon && /* @__PURE__ */ s(i, {
-					name: u.icon,
-					filled: u.filled,
+				"aria-label": d.ariaLabel,
+				children: d.icon && /* @__PURE__ */ c(i, {
+					name: d.icon,
+					filled: d.filled,
 					"aria-hidden": "true"
 				})
 			}),
-			d && /* @__PURE__ */ s("span", {
-				className: g.type,
-				children: /* @__PURE__ */ s(i, {
-					name: d.icon,
-					filled: d.filled,
-					screenreaderText: d.ariaLabel
+			f && /* @__PURE__ */ c("span", {
+				className: v.type,
+				children: /* @__PURE__ */ c(i, {
+					name: f.icon,
+					filled: f.filled,
+					screenreaderText: f.ariaLabel
 				})
 			})
 		]
 	});
+	return h ? /* @__PURE__ */ c(a, {
+		tooltipText: C(),
+		variant: "rich",
+		delay: 300,
+		children: w
+	}) : w;
 };
-l.displayName = "IressAvatar";
+u.displayName = "IressAvatar";
 //#endregion
-export { l as IressAvatar };
+export { u as IressAvatar };

package/dist/components/Field/Field.styles.d.ts

@@ -23,6 +23,11 @@ export declare const field: import('../../styled-system/types').SlotRecipeRuntim
             label: {
                 mb: "none";
             };
+            element: {
+                '& > .ids-radio-group:first-child, & > .ids-checkbox-group:first-child, & > .ids-checkbox:first-child': {
+                    mt: "spacing.0";
+                };
+            };
         };
     };
     hasError: {

package/dist/components/Field/Field.styles.js

@@ -18,7 +18,10 @@ var t = e({
 			maxWidth: "12/12",
 			position: "relative"
 		},
-		element: { position: "relative" },
+		element: {
+			position: "relative",
+			"& > .ids-radio-group:first-child, & > .ids-checkbox-group:first-child, & > .ids-checkbox:first-child": { mt: "spacing.1" }
+		},
 		hint: {
 			color: "colour.neutral.70",
 			mb: "spacing.1",
@@ -53,7 +56,8 @@ var t = e({
 				gridArea: "footer",
 				mt: "spacing.1"
 			},
-			label: { mb: "none" }
+			label: { mb: "none" },
+			element: { "& > .ids-radio-group:first-child, & > .ids-checkbox-group:first-child, & > .ids-checkbox:first-child": { mt: "spacing.0" } }
 		} },
 		hasError: { true: { root: { _nestedFormElements: { "--iress-border-color": "{colors.colour.system.danger.fill}" } } } },
 		hasHint: { true: { label: { mb: "spacing.0" } } },

package/dist/components/Field/FieldGroup/FieldGroup.styles.js

@@ -29,6 +29,7 @@ var t = e({
 		fields: {
 			display: "flex",
 			flexDirection: "column",
+			"& > .ids-radio-group:first-child, & > .ids-checkbox-group:first-child, & > .ids-checkbox:first-child": { mt: "spacing.1" },
 			_nestedFormLabels: {
 				color: "colour.neutral.70",
 				mb: "spacing.1"

package/dist/components/TabSet/TabSet.d.ts

@@ -16,7 +16,7 @@ export interface IressTabSetProps extends Omit<IressStyledProps, 'onChange'> {
      * Layout options for the positioning of tabs.
      * @default top-left
      */
-    layout?: 'top-left' | 'top-center' | 'top-right';
+    layout?: 'top-left' | 'top-center' | 'top-right' | 'top-stretch';
     /**
      * Emitted when a tab changes.
      */

package/dist/components/TabSet/TabSet.styles.d.ts

@@ -15,6 +15,24 @@ export declare const tabSet: import('../../styled-system/types').SlotRecipeRunti
                 justifyContent: "flex-end";
             };
         };
+        'top-stretch': {
+            list: {
+                justifyContent: "flex-start";
+                '& > *': {
+                    flex: "1";
+                };
+                '& [role="tab"]': {
+                    width: "12/12";
+                    justifyContent: "center";
+                };
+            };
+            activeIndicator: {
+                flex: "none";
+            };
+            hoverIndicator: {
+                flex: "none";
+            };
+        };
     };
     overflowEnd: {
         true: {

package/dist/components/TabSet/TabSet.styles.js

@@ -94,7 +94,19 @@ var t = e({
 		layout: {
 			"top-left": { list: { justifyContent: "flex-start" } },
 			"top-center": { list: { justifyContent: "center" } },
-			"top-right": { list: { justifyContent: "flex-end" } }
+			"top-right": { list: { justifyContent: "flex-end" } },
+			"top-stretch": {
+				list: {
+					justifyContent: "flex-start",
+					"& > *": { flex: "1" },
+					"& [role=\"tab\"]": {
+						width: "12/12",
+						justifyContent: "center"
+					}
+				},
+				activeIndicator: { flex: "none" },
+				hoverIndicator: { flex: "none" }
+			}
 		},
 		overflowEnd: { true: { overflowEndIndicator: {
 			layerStyle: "overflow",

package/dist/components/Tooltip/Tooltip.d.ts

@@ -24,8 +24,14 @@ export interface IressTooltipProps extends IressStyledProps {
      * Sets the tooltip text. Can accept a string or an array of strings - if given an array, will output each string on a new line.
      */
     tooltipText: string | string[];
+    /**
+     * Visual variant of the tooltip.
+     * - When not set (default): renders plain text, with arrays shown as multiple lines separated by line breaks.
+     * - `rich`: Displays structured content with the first line as a prominent name and subsequent lines as muted metadata.
+     */
+    variant?: 'rich';
 }
 export declare const IressTooltip: {
-    ({ children, className, align, delay, open, tooltipText, "data-testid": testid, ...restProps }: IressTooltipProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, className, align, delay, open, tooltipText, variant, "data-testid": testid, ...restProps }: IressTooltipProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Tooltip/Tooltip.js

@@ -10,44 +10,47 @@ import { tooltip as _ } from "./Tooltip.styles.js";
 import { Fragment as v, useEffect as y, useState as b } from "react";
 import { jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region src/components/Tooltip/Tooltip.tsx
-var C = ({ children: C, className: w, align: T = "top", delay: E = 500, open: D = !1, tooltipText: O, "data-testid": k, ...A }) => {
-	let j = _(), M = T === "auto", [N, P] = b(D), { refs: F, floatingStyles: I, context: L } = l({
-		placement: M ? void 0 : T,
-		open: N,
-		onOpenChange: P,
+var C = ({ children: C, className: w, align: T = "top", delay: E = 500, open: D = !1, tooltipText: O, variant: k, "data-testid": A, ...j }) => {
+	let M = _({ variant: k }), N = T === "auto", [P, F] = b(D), { refs: I, floatingStyles: L, context: R } = l({
+		placement: N ? void 0 : T,
+		open: P,
+		onOpenChange: F,
 		middleware: [
 			s(5),
-			M ? h() : c(),
+			N ? h() : c(),
 			m()
 		]
-	}), { getReferenceProps: R, getFloatingProps: z } = u([
-		d(L, {
+	}), { getReferenceProps: z, getFloatingProps: B } = u([
+		d(R, {
 			move: !1,
 			restMs: E
 		}),
-		f(L),
-		p(L),
-		g(L, { role: "tooltip" })
+		f(R),
+		p(R),
+		g(R, { role: "tooltip" })
 	]);
 	return y(() => {
-		!C || !F.reference.current || o(F.reference.current).length > 0 || r("IressTooltip: The content that activates the tooltip is not focusable,\n            which is a failure of WCAG Level AA Success Criterion 1.4.13 - Content on Hover or Focus.\n            To fix this warning, change the activator to either IressButton, IressMenuItem or another focusable component.", "warn");
-	}, [C, F.reference]), /* @__PURE__ */ S(t.div, {
-		className: e(j.root, w, n.Tooltip),
-		...A,
-		"data-testid": k,
+		!C || !I.reference.current || o(I.reference.current).length > 0 || r("IressTooltip: The content that activates the tooltip is not focusable,\n            which is a failure of WCAG Level AA Success Criterion 1.4.13 - Content on Hover or Focus.\n            To fix this warning, change the activator to either IressButton, IressMenuItem or another focusable component.", "warn");
+	}, [C, I.reference]), /* @__PURE__ */ S(t.div, {
+		className: e(M.root, w, n.Tooltip),
+		...j,
+		"data-testid": A,
 		children: [/* @__PURE__ */ x("div", {
-			className: j.activator,
-			"data-testid": i(k, "activator"),
-			ref: F.setReference,
-			...R(),
-			children: C
-		}), N && /* @__PURE__ */ x("div", {
-			className: j.content,
-			style: I,
-			"data-testid": i(k, "tooltip-text"),
-			ref: F.setFloating,
+			className: M.activator,
+			"data-testid": i(A, "activator"),
+			ref: I.setReference,
 			...z(),
-			children: a(O).map((e, t, n) => /* @__PURE__ */ S(v, { children: [e, t < n.length - 1 && /* @__PURE__ */ x("br", {})] }, t))
+			children: C
+		}), P && /* @__PURE__ */ x("div", {
+			className: M.content,
+			style: L,
+			"data-testid": i(A, "tooltip-text"),
+			ref: I.setFloating,
+			...B(),
+			children: k === "rich" ? a(O).map((e, t) => /* @__PURE__ */ x("span", {
+				className: t === 0 ? M.richName : M.richMeta,
+				children: e
+			}, t)) : a(O).map((e, t, n) => /* @__PURE__ */ S(v, { children: [e, t < n.length - 1 && /* @__PURE__ */ x("br", {})] }, t))
 		})]
 	});
 };

package/dist/components/Tooltip/Tooltip.styles.d.ts

@@ -1 +1,10 @@
-export declare const tooltip: import('../../styled-system/types').SlotRecipeRuntimeFn<"content" | "root" | "activator", {}>;
+export declare const tooltip: import('../../styled-system/types').SlotRecipeRuntimeFn<"content" | "root" | "activator" | "richName" | "richMeta", {
+    variant: {
+        rich: {
+            content: {
+                display: "flex";
+                flexDirection: "column";
+            };
+        };
+    };
+}>;

package/dist/components/Tooltip/Tooltip.styles.js

@@ -4,7 +4,9 @@ var t = e({
 	slots: [
 		"root",
 		"activator",
-		"content"
+		"content",
+		"richName",
+		"richMeta"
 	],
 	base: {
 		root: {
@@ -25,9 +27,17 @@ var t = e({
 			textStyle: "typography.body.sm.regular",
 			color: "colour.neutral.10",
 			bg: "colour.neutral.80"
+		},
+		richName: { textStyle: "typography.body.md.medium" },
+		richMeta: {
+			textStyle: "typography.body.sm.regular",
+			opacity: "[0.75]"
 		}
 	},
-	variants: {},
+	variants: { variant: { rich: { content: {
+		display: "flex",
+		flexDirection: "column"
+	} } } },
 	compoundVariants: []
 });
 //#endregion

package/dist/main.js

@@ -149,7 +149,7 @@ import { IressFormField as mn } from "./patterns/Form/FormField/FormField.js";
 import { IressFormFieldset as hn } from "./patterns/Form/FormField/FormFieldset.js";
 import { IressLoading as gn } from "./patterns/Loading/Loading.js";
 import { IressLoadingSuspense as _n } from "./patterns/Loading/LoadingSuspense.js";
-import { t as vn } from "./Shadow-Duhyx42v.js";
+import { t as vn } from "./Shadow-BL3YAhE_.js";
 import { contextualMenu as yn } from "./patterns/ContextualMenu/ContextualMenu.styles.js";
 import { IressContextualMenu as bn } from "./patterns/ContextualMenu/ContextualMenu.js";
 import { sideNav as xn } from "./patterns/SideNav/SideNav.styles.js";

package/dist/patterns/Shadow/Shadow.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../Shadow-Duhyx42v.js";
+import { t as e } from "../../Shadow-BL3YAhE_.js";
 export { e as IressShadow };

package/dist/patterns/Shadow/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../Shadow-Duhyx42v.js";
+import { t as e } from "../../Shadow-BL3YAhE_.js";
 export { e as IressShadow };