@payfit/unity-components 2.64.4 → 2.64.6

package/dist/esm/components/carousel/parts/CarouselContent.js

@@ -1,5 +1,5 @@
-import { useCarousel as e } from "../Carousel.context.js";
-import { useResponsiveValue as t } from "../../../hooks/use-responsive-value.js";
+import { useResponsiveValue as e } from "../../../hooks/use-responsive-value.js";
+import { useCarousel as t } from "../Carousel.context.js";
 import { useEffect as n, useState as r } from "react";
 import { uyTv as i } from "@payfit/unity-themes";
 import { jsx as a } from "react/jsx-runtime";
@@ -16,7 +16,7 @@ var o = i({ slots: {
 	]
 } });
 function s({ className: i, children: s, itemsPerPage: c, gap: l, trackPadding: u, trackOffset: d = 0 }) {
-	let { carouselRef: f, a11yIds: p, api: m } = e(), { root: h, track: g } = o(), [_, v] = r(!1), y = t(c), b = t(l), x = t(d), S = t(u?.start), C = t(u?.end);
+	let { carouselRef: f, a11yIds: p, api: m } = t(), { root: h, track: g } = o(), [_, v] = r(!1), y = e(c), b = e(l), x = e(d), S = e(u?.start), C = e(u?.end);
 	return n(() => {
 		if (!m) return;
 		let e = () => {

package/dist/esm/components/segmented-button-group/parts/ToggleButton.js

@@ -3,11 +3,11 @@ import { Spinner as t } from "../../spinner/Spinner.js";
 import { SegmentedButtonGroupContext as n } from "../SegmentedButtonGroups.context.js";
 import { forwardRef as r, useContext as i, useRef as a } from "react";
 import { uyTv as o } from "@payfit/unity-themes";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useIntl as u } from "react-intl";
-import { mergeProps as d } from "react-aria/mergeProps";
-import { useRadio as f } from "react-aria/useRadioGroup";
-import { useFocusRing as p } from "react-aria/useFocusRing";
+import { useFocusRing as s } from "react-aria/useFocusRing";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useIntl as d } from "react-intl";
+import { mergeProps as f } from "react-aria/mergeProps";
+import { useRadio as p } from "react-aria/useRadioGroup";
 import { VisuallyHidden as m } from "react-aria/VisuallyHidden";
 //#region src/components/segmented-button-group/parts/ToggleButton.tsx
 var h = o({
@@ -62,40 +62,40 @@ var h = o({
 		isLoading: !1,
 		hasPrefixIcon: !1
 	}
-}), g = ({ intl: n, children: r, isLoading: i, prefixIcon: a, isSelected: o }) => i ? /* @__PURE__ */ c(t, {
+}), g = ({ intl: n, children: r, isLoading: i, prefixIcon: a, isSelected: o }) => i ? /* @__PURE__ */ l(t, {
 	label: n.formatMessage({
 		id: "unity:component:common:loading:label",
 		defaultMessage: "Loading..."
 	}),
 	color: "inherit",
 	size: "small"
-}) : /* @__PURE__ */ l(s, { children: [a ? /* @__PURE__ */ c(e, {
+}) : /* @__PURE__ */ u(c, { children: [a ? /* @__PURE__ */ l(e, {
 	src: o ? `${a}Filled` : `${a}Outlined`,
 	color: o ? "content.neutral" : "content.neutral.low",
 	role: "presentation"
 }) : null, r] }), _ = r((e, t) => {
-	let { children: r, value: o, prefixIcon: s, isLoading: _ } = e, { state: v } = i(n), y = a(null), { inputProps: b } = f(e, v, y), { focusProps: x, isFocusVisible: S } = p(), C = u(), w = v.selectedValue === o, { base: T, wrapper: E } = h({
+	let { children: r, value: o, prefixIcon: c, isLoading: _ } = e, { state: v } = i(n), y = a(null), { inputProps: b } = p(e, v, y), { focusProps: x, isFocusVisible: S } = s(), C = d(), w = v.selectedValue === o, { base: T, wrapper: E } = h({
 		isSelected: w,
-		hasPrefixIcon: !!s,
+		hasPrefixIcon: !!c,
 		isLoading: _,
 		isFocusVisible: S
 	});
-	return /* @__PURE__ */ l("label", {
+	return /* @__PURE__ */ u("label", {
 		ref: t,
 		className: T(),
 		"aria-disabled": _,
-		children: [/* @__PURE__ */ c(m, { children: /* @__PURE__ */ c("input", {
-			...d(b, x),
+		children: [/* @__PURE__ */ l(m, { children: /* @__PURE__ */ l("input", {
+			...f(b, x),
 			ref: y,
 			disabled: _
-		}) }), /* @__PURE__ */ c("span", {
+		}) }), /* @__PURE__ */ l("span", {
 			className: E(),
 			children: g({
 				intl: C,
 				children: r,
 				isLoading: _,
 				isSelected: w,
-				prefixIcon: s
+				prefixIcon: c
 			})
 		})]
 	});

package/dist/esm/components/selectable-button-group/parts/SelectableButton.js

@@ -3,9 +3,9 @@ import { Spinner as t } from "../../spinner/Spinner.js";
 import { SelectableButtonGroupContext as n } from "../SelectableButtonGroup.context.js";
 import { forwardRef as r, useCallback as i, useContext as a, useRef as o } from "react";
 import { uyTv as s } from "@payfit/unity-themes";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { mergeProps as d } from "react-aria/mergeProps";
-import { useFocusRing as f } from "react-aria/useFocusRing";
+import { useFocusRing as c } from "react-aria/useFocusRing";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { mergeProps as f } from "react-aria/mergeProps";
 import { useToggleButtonGroupItem as p } from "react-aria/useToggleButtonGroup";
 import { useHover as m } from "react-aria/useHover";
 //#region src/components/selectable-button-group/parts/SelectableButton.tsx
@@ -43,12 +43,12 @@ var h = s({
 	let { buttonProps: v, isPressed: y, isSelected: b } = p({
 		id: r.value,
 		...r
-	}, _, g), { isDisabled: x = !1, isLoading: S = !1, prefixIcon: C, children: w } = r, { hoverProps: T, isHovered: E } = m({ isDisabled: x || S }), { isFocusVisible: D, focusProps: O } = f(), k = i((e) => {
+	}, _, g), { isDisabled: x = !1, isLoading: S = !1, prefixIcon: C, children: w } = r, { hoverProps: T, isHovered: E } = m({ isDisabled: x || S }), { isFocusVisible: D, focusProps: O } = c(), k = i((e) => {
 		g.current = e, typeof s == "function" ? s(e) : s && (s.current = e);
 	}, [s]), { base: A, icon: j, label: M } = h({ hasIcon: !!C && !S });
-	return /* @__PURE__ */ u("button", {
+	return /* @__PURE__ */ d("button", {
 		"data-dd-privacy": "allow",
-		...d(v, T, O),
+		...f(v, T, O),
 		ref: k,
 		className: A({ className: r.className }),
 		disabled: v.disabled || x || S,
@@ -58,19 +58,19 @@ var h = s({
 		"data-focus-visible": D || void 0,
 		"data-selected": b,
 		"aria-busy": S,
-		children: [C && !S && /* @__PURE__ */ l(e, {
+		children: [C && !S && /* @__PURE__ */ u(e, {
 			src: b ? `${C}Filled` : `${C}Outlined`,
 			role: "presentation",
 			className: j(),
 			size: 20
-		}), S ? /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(t, {
+		}), S ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(t, {
 			label: "Loading",
 			size: "small",
 			color: "inherit"
-		}), /* @__PURE__ */ l("span", {
+		}), /* @__PURE__ */ u("span", {
 			className: "uy:sr-only",
 			children: w
-		})] }) : /* @__PURE__ */ l("span", {
+		})] }) : /* @__PURE__ */ u("span", {
 			className: M(),
 			children: w
 		})]

package/dist/esm/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,90 @@
+import { HTMLAttributes } from 'react';
+/**
+ * Unity typography styles that `Skeleton` can mirror when `variant="text"`.
+ * Use the same style as the content that the placeholder will replace so its
+ * line height and vertical rhythm remain stable while data loads.
+ */
+export type SkeletonTextVariant = 'displayHeading' | 'h1' | 'h2' | 'h3' | 'h4' | 'overline' | 'subtitle' | 'displayTitle' | 'displayBody' | 'body' | 'bodyStrong' | 'bodySmall' | 'bodySmallStrong' | 'bodyLarge' | 'bodyLargeStrong' | 'action' | 'actionLarge' | 'actionSmall' | 'actionInfo';
+type SkeletonBaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'aria-hidden'> & {
+    'aria-hidden'?: boolean;
+};
+/**
+ * Props for {@link Skeleton}.
+ * Set `variant="text"` to expose the optional `textVariant` prop. Rectangular
+ * and circular placeholders intentionally reject `textVariant` so consumers
+ * cannot accidentally apply typography styles to non-text shapes.
+ * @property variant - Selects `rectangular`, `circular`, or `text`; defaults to
+ * `rectangular`.
+ * @property textVariant - Selects the Unity typography style for a text
+ * skeleton. It has an effect only when `variant="text"`.
+ * @property className - Adds layout and sizing classes. Use `uy:w-*` and
+ * `uy:h-*` for rectangular placeholders, `uy:size-*` for circular
+ * placeholders, and `ch`-based width classes such as `uy:w-[24ch]` for text.
+ * @property aria-hidden - Hides the placeholder from assistive technologies;
+ * defaults to `true` because the shape is normally decorative.
+ * @see {@link SkeletonTextVariant} for the available text styles.
+ */
+export type SkeletonProps = SkeletonBaseProps & ({
+    variant?: 'rectangular' | 'circular';
+    textVariant?: never;
+} | {
+    variant: 'text';
+    textVariant?: SkeletonTextVariant;
+});
+/**
+ * Reserves the shape and rhythm of content while its data loads.
+ * Use `Skeleton` inside a stable layout when the final content dimensions are
+ * known but the content itself is not available yet. Choose a shape with
+ * `variant`, mirror text with `textVariant`, and pass explicit Unity sizing
+ * classes through `className`.
+ * @param props - Placeholder content, shape, typography, sizing, and HTML
+ * attributes.
+ * @param props.variant - Selects the placeholder shape. It defaults to
+ * `"rectangular"`; use `"circular"` for avatar-like content and `"text"` for
+ * typography-shaped content.
+ * @param props.textVariant - Selects the Unity typography style when
+ * `variant="text"`, such as `"h2"`, `"body"`, or `"bodySmallStrong"`.
+ * @param props.className - Supplies the dimensions and layout. Use
+ * `uy:w-*`/`uy:h-*` for rectangular shapes, `uy:size-*` for circular shapes,
+ * and `uy:w-[##ch]` for text widths that approximate the expected copy.
+ * `Skeleton` merges these classes with its generated visual styles so the
+ * variant's neutral background, animation, and shape treatment remain intact.
+ * @param props.aria-hidden - Defaults to `true` and keeps the decorative
+ * placeholder out of the accessibility tree. Set it to `false` only when the
+ * placeholder itself conveys information that users of assistive technology
+ * need to receive.
+ * @example
+ * ```tsx
+ * import { Skeleton } from '@payfit/unity-components'
+ *
+ * export function EmployeeCard({ isLoading }: { isLoading: boolean }) {
+ *   return (
+ *     <section aria-busy={isLoading} aria-label="Employee profile">
+ *       {isLoading ? (
+ *         <>
+ *           <Skeleton variant="circular" className="uy:size-600" />
+ *           <Skeleton
+ *             variant="text"
+ *             textVariant="h2"
+ *             className="uy:w-[18ch]"
+ *           />
+ *         </>
+ *       ) : (
+ *         <h2>Ada Lovelace</h2>
+ *       )}
+ *     </section>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * Keep `Skeleton` itself decorative and expose loading semantics on the
+ * containing region with `aria-busy` and an accessible label. The component
+ * renders a `div` and forwards standard `HTMLAttributes<HTMLDivElement>` and
+ * its ref, so it does not provide interactive behavior or focus management.
+ * @see {@link SkeletonProps} for the complete prop contract.
+ * @see {@link SkeletonTextVariant} for text style values.
+ * @see [Figma component design](https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=22530-2318)
+ * @see [Zeroheight Skeleton documentation](https://www.payfit.design/24f360409/v/latest/p/87f013)
+ */
+export declare const Skeleton: import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/components/skeleton/Skeleton.js

@@ -0,0 +1,47 @@
+import { forwardRef as e } from "react";
+import { uyMerge as t, uyTv as n } from "@payfit/unity-themes";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/skeleton/Skeleton.tsx
+var i = n({
+	base: "uy:bg-surface-neutral-disabled uy:animate-pulse",
+	variants: {
+		variant: {
+			rectangular: "uy:rounded-50",
+			circular: "uy:rounded-circle",
+			text: "uy:inline-block uy:h-[1em] uy:my-[calc((1lh-1em)/2)] uy:rounded-50"
+		},
+		textVariant: {
+			displayHeading: "uy:typography-display-heading",
+			h1: "uy:typography-h1",
+			h2: "uy:typography-h2",
+			h3: "uy:typography-h3",
+			h4: "uy:typography-h4",
+			overline: "uy:typography-overline",
+			subtitle: "uy:typography-subtitle",
+			displayTitle: "uy:typography-display-title",
+			displayBody: "uy:typography-display-body",
+			body: "uy:typography-body",
+			bodyStrong: "uy:typography-body-strong",
+			bodySmall: "uy:typography-body-small",
+			bodySmallStrong: "uy:typography-body-small-strong",
+			bodyLarge: "uy:typography-body-large",
+			bodyLargeStrong: "uy:typography-body-large-strong",
+			action: "uy:typography-action",
+			actionLarge: "uy:typography-body-large",
+			actionSmall: "uy:typography-body-small",
+			actionInfo: "uy:typography-action uy:underline uy:decoration-dotted uy:decoration-[10%] uy:underline-offset-[25%]"
+		}
+	},
+	defaultVariants: { variant: "rectangular" }
+}), a = e(({ variant: e = "rectangular", textVariant: n, className: a, "aria-hidden": o = !0, ...s }, c) => /* @__PURE__ */ r("div", {
+	ref: c,
+	"aria-hidden": o,
+	className: t(a, i({
+		variant: e,
+		textVariant: n
+	})),
+	...s
+}));
+a.displayName = "Skeleton";
+//#endregion
+export { a as Skeleton };

package/dist/esm/components/skeleton/figma/SkeletonRectangular.figma.d.ts

@@ -0,0 +1,7 @@
+import { default as figma } from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/esm/components/skeleton/figma/SkeletonText.figma.d.ts

@@ -0,0 +1,7 @@
+import { default as figma } from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/esm/index.d.ts

@@ -20,10 +20,14 @@ export * from './components/autocomplete/Autocomplete.js';
 export * from './components/autocomplete/parts/AutocompleteItem.js';
 export * from './components/autocomplete/parts/AutocompleteItemGroup.js';
 export * from './components/avatar/Avatar.js';
+export * from './components/avatar/AvatarWithTooltip.js';
+export * from './components/avatar/InteractiveAvatar.js';
 export * from './components/avatar/parts/AvatarFallback.js';
 export * from './components/avatar/parts/AvatarIcon.js';
 export * from './components/avatar/parts/AvatarImage.js';
 export * from './components/avatar/parts/AvatarPair.js';
+export * from './components/avatar-group/AvatarGroup.js';
+export * from './components/avatar-group/parts/AvatarGroupCount.js';
 export * from './components/avatar/utils.js';
 export * from './components/badge/Badge.js';
 export * from './components/badge/parts/BadgeDot.js';
@@ -49,6 +53,7 @@ export * from './components/checkbox/CheckboxStandalone.js';
 export * from './components/collapsible/Collapsible.js';
 export * from './components/collapsible/parts/CollapsibleContent.js';
 export * from './components/collapsible/parts/CollapsibleTitle.js';
+export * from './components/collapsible-group/CollapsibleGroup.js';
 export * from './components/data-table/DataTable.js';
 export * from './components/data-table/parts/DataTableRoot.js';
 export * from './components/data-table/parts/DataTableBulkActions.js';
@@ -157,6 +162,7 @@ export * from './components/radio-button-group/RadioButtonGroup.js';
 export * from './components/radio-button-group/parts/RadioButton.js';
 export * from './components/radio-button-group/parts/RadioButtonHelper.js';
 export * from './components/search/Search.js';
+export * from './components/skeleton/Skeleton.js';
 export * from './components/segmented-button-group/SegmentedButtonGroup.js';
 export * from './components/segmented-button-group/parts/ToggleButton.js';
 export * from './components/selectable-button-group/SelectableButtonGroup.js';
@@ -238,4 +244,3 @@ export { useFieldA11yContext } from './components/form-field/TanstackFormField.c
 export { fieldRevalidateLogic } from './utils/field-revalidate-logic.js';
 export type { FieldRevalidateLogicProps } from './utils/field-revalidate-logic.js';
 export * from './providers/router/RouterProvider.js';
-export * from './components/collapsible-group/CollapsibleGroup.js';