@payfit/unity-components 3.1.13 → 3.1.15

package/dist/esm/components/funnel-layout/parts/FunnelPageHeader.js

@@ -1,53 +0,0 @@
-import { Text as e } from "../../text/Text.js";
-import { useFunnelLayoutContext as t } from "../FunnelLayout.context.js";
-import { forwardRef as n } from "react";
-import { uyTv as r } from "@payfit/unity-themes";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/components/funnel-layout/parts/FunnelPageHeader.tsx
-var o = r({
-	slots: {
-		base: "uy:flex uy:flex-col uy:justify-between uy:p-300 uy:md:py-600 uy:md:px-400 uy:md:flex-row uy:md:items-center uy:md:rounded-t-300",
-		hgroup: "uy:space-y-100",
-		figure: "uy:hidden uy:lg:block uy:lg:h-full uy:lg:max-h-[160px] uy:lg:ml-800 uy:lg:mr-150 uy:shrink-0",
-		figcaption: "uy:sr-only"
-	},
-	variants: { gradient: { default: { base: "uy:md:bg-gradient-to-b uy:md:from-blue-l1/30 uy:md:to-grayscale-L0" } } },
-	defaultVariants: { gradient: "default" }
-}), s = n(({ title: n, subtitle: r, imageSlot: s, imageSlotAltText: c, children: l, style: u, ...d }, f) => {
-	let { ids: p } = t(), { base: m, hgroup: h, figure: g, figcaption: _ } = o({ gradient: u });
-	return /* @__PURE__ */ a("header", {
-		ref: f,
-		className: m(),
-		"data-unity-component": "FunnelPageHeader",
-		"data-dd-privacy": "allow",
-		...d,
-		children: [/* @__PURE__ */ a("hgroup", {
-			className: h(),
-			id: p.funnelDescriptionId,
-			children: [
-				/* @__PURE__ */ i(e, {
-					asElement: "h2",
-					variant: "h1",
-					children: n
-				}),
-				/* @__PURE__ */ i(e, {
-					asElement: "h3",
-					variant: "subtitle",
-					color: "content.neutral.low",
-					children: r
-				}),
-				l
-			]
-		}), s && /* @__PURE__ */ a("figure", {
-			className: g(),
-			"aria-hidden": "true",
-			children: [s, /* @__PURE__ */ i("figcaption", {
-				className: _(),
-				children: c
-			})]
-		})]
-	});
-});
-s.displayName = "FunnelPageHeader";
-//#endregion
-export { s as FunnelPageHeader, o as funnelPageHeader };

package/dist/esm/components/funnel-layout/parts/FunnelProgressBar.js

@@ -1,39 +0,0 @@
-import { forwardRef as e } from "react";
-import { uyTv as t } from "@payfit/unity-themes";
-import { jsx as n } from "react/jsx-runtime";
-import { ProgressBar as r } from "react-aria-components/ProgressBar";
-//#region src/components/funnel-layout/parts/FunnelProgressBar.tsx
-var i = t({
-	slots: {
-		base: ["uy:bg-surface-neutral-disabled", "uy:w-full uy:h-50"],
-		meter: [
-			"uy:h-full uy:w-[var(--uy-progressbar-value)] uy:transition-all uy:duration-200 uy:ease-linear",
-			"uy:bg-surface-primary",
-			"uy:rounded-r-pill"
-		]
-	},
-	variants: { isFull: {
-		true: { meter: "uy:rounded-r-0" },
-		false: { meter: "uy:rounded-r-pill" }
-	} },
-	defaultVariants: { isFull: !1 }
-}), a = e(({ value: e, ...t }, a) => {
-	let { base: o, meter: s } = i({ isFull: e >= 100 });
-	return /* @__PURE__ */ n(r, {
-		ref: a,
-		value: e,
-		"aria-label": "progress bar",
-		"data-dd-privacy": "allow",
-		...t,
-		children: ({ percentage: e }) => /* @__PURE__ */ n("div", {
-			className: o(),
-			children: /* @__PURE__ */ n("div", {
-				className: s(),
-				style: { "--uy-progressbar-value": `${e}%` }
-			})
-		})
-	});
-});
-a.displayName = "FunnelProgressBar";
-//#endregion
-export { a as FunnelProgressBar };

package/dist/esm/components/funnel-layout/parts/FunnelSidebar.d.ts

@@ -1,66 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { PropsWithChildren } from 'react';
-export declare const funnelSidebar: import('tailwind-variants').TVReturnType<{
-    position: {
-        sticky: string[];
-        static: string[];
-        fixed: string[];
-    };
-}, undefined, string[], {
-    position: {
-        sticky: string[];
-        static: string[];
-        fixed: string[];
-    };
-}, undefined, import('tailwind-variants').TVReturnTypeLike<{
-    position: {
-        sticky: string[];
-        static: string[];
-        fixed: string[];
-    };
-}, undefined>>;
-export interface FunnelSidebarProps extends PropsWithChildren<VariantProps<typeof funnelSidebar>> {
-    /**
-     * The sidebar's positioning scheme. It can be one of three values:
-     * - `static`: the sidebar does not scroll horizontally with the content
-     * - `sticky`: When scrolling down, the sidebar sticks close to the top bar
-     * - `fixed`: the sidebar always stays in the same position when scrolling down
-     * @default 'sticky'
-     */
-    position?: VariantProps<typeof funnelSidebar>['position'];
-    'aria-label'?: string;
-}
-/**
- * The `FunnelSidebar` component provides an optional sidebar area in the funnel layout.
- * It displays process steps or additional navigation content with proper accessibility
- * attributes and responsive sizing that adapts to the layout structure.
- * @param {FunnelSidebarProps} props - The props for the `FunnelSidebar` component
- * @example
- * ```tsx
- * import { FunnelSidebar } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <FunnelSidebar>
- *       <TaskMenu>
- *         <RawTask>
- *           <TaskTitle>Task 1</TaskTitle>
- *         </RawTask>
- *       </TaskMenu>
- *     </FunnelSidebar>
- *   )
- * }
- * ```
- * @remarks
- * - Automatically receives accessibility attributes from FunnelLayout context
- * - Supports sticky positioning for better navigation experience
- * - Provides responsive sizing that adapts to content and screen size
- * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
- * @see {@link FunnelSidebarProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
- * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
- * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
- * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelsidebar--docs unity-components.payfit.io}
- */
-declare const FunnelSidebar: import('react').ForwardRefExoticComponent<FunnelSidebarProps & import('react').RefAttributes<HTMLElement>>;
-export { FunnelSidebar };

package/dist/esm/components/funnel-layout/parts/FunnelSidebar.js

@@ -1,38 +0,0 @@
-import { useFunnelLayoutContext as e } from "../FunnelLayout.context.js";
-import { forwardRef as t } from "react";
-import { uyTv as n } from "@payfit/unity-themes";
-import { jsx as r } from "react/jsx-runtime";
-import { useIntl as i } from "react-intl";
-//#region src/components/funnel-layout/parts/FunnelSidebar.tsx
-var a = n({
-	base: [
-		"uy:w-full uy:self-start uy:shrink uy:grow-0",
-		"uy:sticky uy:top-8 uy:z-9",
-		"uy:md:basis-1/3 uy:lg:basis-1/4 uy:md:shrink-0"
-	],
-	variants: { position: {
-		sticky: ["uy:md:sticky uy:md:top-10"],
-		static: ["uy:md:static"],
-		fixed: ["uy:md:sticky uy:md:top-[var(--uy-funnel-sidebar-offset)]"]
-	} },
-	defaultVariants: { position: "sticky" }
-}), o = t(({ children: t, position: n, "aria-label": o, ...s }, c) => {
-	let { ids: l } = e(), u = i();
-	return /* @__PURE__ */ r("aside", {
-		ref: c,
-		"aria-label": o ?? u.formatMessage({
-			id: "unity:layout:funnel:sidebar:aria-label",
-			defaultMessage: "Process steps"
-		}),
-		"aria-describedby": l.funnelTitleId,
-		className: a({ position: n }),
-		id: l.asideId,
-		"data-unity-component": "FunnelSidebar",
-		"data-dd-privacy": "allow",
-		...s,
-		children: t
-	});
-});
-o.displayName = "FunnelSidebar";
-//#endregion
-export { o as FunnelSidebar, a as funnelSidebar };

package/dist/esm/components/funnel-layout/parts/FunnelTopBar.d.ts

@@ -1,105 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-export declare const funnelTopBar: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-            title?: import('tailwind-variants').ClassValue;
-            titleWrapper?: import('tailwind-variants').ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-            title?: import('tailwind-variants').ClassValue;
-            titleWrapper?: import('tailwind-variants').ClassValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    titleWrapper: string[];
-    title: string[];
-}, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-            title?: import('tailwind-variants').ClassValue;
-            titleWrapper?: import('tailwind-variants').ClassValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    titleWrapper: string[];
-    title: string[];
-}, import('tailwind-variants').TVReturnTypeLike<unknown, {
-    base: string[];
-    titleWrapper: string[];
-    title: string[];
-}>>;
-export interface FunnelTopBarProps extends VariantProps<typeof funnelTopBar> {
-    /** The title text to display in the funnel top bar */
-    title: string;
-    /**
-     * Custom content to display in the leading area (left side).
-     * Typically a logo on first step or a back button on subsequent steps.
-     * @example
-     * ```tsx
-     * // With FunnelBackButton
-     * <FunnelTopBar
-     *   leading={<FunnelBackButton label="Back" onPress={handleBack} />}
-     *   title="My Funnel"
-     * />
-     *
-     * // With logo
-     * <FunnelTopBar
-     *   leading={<PayFitBrand color="original" />}
-     *   title="Get Started"
-     * />
-     * ```
-     */
-    leading?: React.ReactNode;
-    /** Optional actions slot to display in the top bar */
-    actions?: React.ReactNode;
-    /** Optional flag to show or hide the progress indicator. Defaults to false */
-    showProgress?: boolean;
-    /** The current progress in the funnel */
-    progressValue?: number;
-    /** Custom progress announcement for screen readers. */
-    progressAnnouncement?: string;
-    /** current task description */
-    currentTaskDescription?: string;
-}
-/**
- * The `FunnelTopBar` component provides the header navigation for funnel layouts with back button, title, and optional progress indicator.
- * It creates a responsive top bar that displays the funnel title, navigation controls, and progress status with proper accessibility attributes.
- * You can control the progress display and customize the back button behavior to guide users through multi-step processes.
- * @param {FunnelTopBarProps} props - The props for the `FunnelTopBar` component
- * @example
- * ```tsx
- * import { FunnelTopBar } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <FunnelTopBar
- *       title="Setup Process"
- *       leading={<FunnelBackButton label="Back" onPress={handleBack} />}
- *       showProgress={true}
- *       progressValue={75}
- *       progressAnnouncement="2 out of 3 tasks completed"
- *     />
- *   )
- * }
- * ```
- * @remarks
- * - Automatically adapts back button display based on screen size
- * - Provides live progress announcements for screen readers
- * - Supports optional global actions in the top bar
- * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
- * @see {@link FunnelTopBarProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
- * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
- * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
- * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funneltopbar--docs unity-components.payfit.io}
- */
-declare const FunnelTopBar: import('react').ForwardRefExoticComponent<FunnelTopBarProps & import('react').RefAttributes<HTMLDivElement>>;
-export { FunnelTopBar };

package/dist/esm/components/funnel-layout/parts/FunnelTopBar.js

@@ -1,78 +0,0 @@
-import { useFunnelLayoutContext as e } from "../FunnelLayout.context.js";
-import { FunnelProgressBar as t } from "./FunnelProgressBar.js";
-import { forwardRef as n, useMemo as r } from "react";
-import { uyTv as i } from "@payfit/unity-themes";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useIntl as s } from "react-intl";
-//#region src/components/funnel-layout/parts/FunnelTopBar.tsx
-var c = i({ slots: {
-	base: ["uy:bg-surface-neutral uy:shadow-raising uy:min-h-800"],
-	titleWrapper: ["uy:px-200 uy:py-150 uy:md:px-500 uy:min-h-[calc(var(--uy-spacing-800)-4px)]", "uy:flex uy:justify-between uy:items-center"],
-	title: ["uy:text-content-neutral uy:typography-body-strong uy:sm:typography-h4 uy:flex-1 uy:sm:flex-auto uy:text-center uy:col-2"]
-} }), l = n(({ actions: n, currentTaskDescription: i, leading: l, progressAnnouncement: u, progressValue: d, showProgress: f = !0, title: p, ...m }, h) => {
-	let g = s(), { ids: _ } = e(), { base: v, titleWrapper: y, title: b } = c(), x = r(() => ({
-		navigationDescription: g.formatMessage({
-			id: "unity:layout:funnel:top-bar:navigation-desc",
-			defaultMessage: "Process navigation"
-		}),
-		progressAnnouncement: u ?? g.formatMessage({
-			id: "unity:layout:funnel:top-bar:progress-announcement",
-			defaultMessage: d === void 0 ? "Progress status unavailable" : `Process is ${d}% complete`
-		}, { progress: d })
-	}), [
-		g,
-		u,
-		d
-	]);
-	return /* @__PURE__ */ o("header", {
-		ref: h,
-		id: _.topbarId,
-		className: v(),
-		role: "banner",
-		"aria-labelledby": _.funnelTitleId,
-		"aria-describedby": _.funnelStatusId,
-		"data-dd-privacy": "allow",
-		...m,
-		children: [
-			/* @__PURE__ */ o("nav", {
-				className: y(),
-				"aria-label": x.navigationDescription,
-				children: [
-					/* @__PURE__ */ a("div", {
-						className: "uy:grow-0 uy:basis-[100px]",
-						children: l
-					}),
-					/* @__PURE__ */ o("h1", {
-						className: b(),
-						id: _.funnelTitleId,
-						children: [p, i && /* @__PURE__ */ a("span", {
-							className: "uy:sr-only",
-							children: i
-						})]
-					}),
-					/* @__PURE__ */ a("div", {
-						className: "uy:grow-0 uy:basis-[100px]",
-						"aria-hidden": !n,
-						role: n ? "group" : "presentation",
-						children: n
-					})
-				]
-			}),
-			f && /* @__PURE__ */ a("div", {
-				"aria-hidden": "true",
-				children: /* @__PURE__ */ a(t, { value: d ?? 0 })
-			}),
-			/* @__PURE__ */ a("div", {
-				id: _.funnelStatusId,
-				role: "status",
-				"aria-live": "polite",
-				"aria-atomic": "true",
-				className: "uy:sr-only",
-				children: x.progressAnnouncement
-			})
-		]
-	});
-});
-l.displayName = "FunnelTopBar";
-//#endregion
-export { l as FunnelTopBar, c as funnelTopBar };

package/dist/esm/components/grid/Grid.js

@@ -1,27 +0,0 @@
-import { grid as e } from "./Grid.variants.js";
-import { forwardRef as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-//#region src/components/grid/Grid.tsx
-var r = t(({ asElement: t = "div", className: r, children: i, inline: a, cols: o, flow: s, justifyItems: c, alignItems: l, rows: u, areas: d, ...f }, p) => {
-	let m = {
-		"--uy-grid-template-rows": u,
-		gridTemplateAreas: d
-	};
-	return /* @__PURE__ */ n(t, {
-		ref: p,
-		className: e({
-			inline: a,
-			cols: o,
-			flow: s,
-			justifyItems: c,
-			alignItems: l,
-			className: [u ? "uy:grid-rows-(--uy-grid-template-rows)" : "", r]
-		}),
-		style: m,
-		...f,
-		children: i
-	});
-});
-r.displayName = "Grid";
-//#endregion
-export { r as Grid };

package/dist/esm/components/grid/Grid.variants.js

@@ -1,147 +0,0 @@
-import { uyTv as e } from "@payfit/unity-themes";
-//#region src/components/grid/Grid.variants.ts
-var t = e({
-	base: "uy:grid-layout",
-	variants: {
-		inline: {
-			true: "uy:inline-grid",
-			false: ""
-		},
-		cols: {
-			6: "uy:[--uy-grid-layout-columns--default:6] uy:[--uy-grid-layout-columns--md:6] uy:[--uy-grid-layout-columns--lg:6]",
-			12: "uy:[--uy-grid-layout-columns--default:12] uy:[--uy-grid-layout-columns--md:12] uy:[--uy-grid-layout-columns--lg:12]"
-		},
-		flow: {
-			row: "uy:grid-flow-row",
-			col: "uy:grid-flow-col",
-			dense: "uy:grid-flow-dense",
-			"row-dense": "uy:grid-flow-row-dense",
-			"col-dense": "uy:grid-flow-col-dense"
-		},
-		justifyItems: {
-			initial: "",
-			start: "uy:justify-items-start",
-			end: "uy:justify-items-end",
-			center: "uy:justify-items-center",
-			stretch: "uy:justify-items-stretch"
-		},
-		alignItems: {
-			initial: "",
-			start: "uy:items-start",
-			end: "uy:items-end",
-			center: "uy:items-center",
-			stretch: "uy:items-stretch",
-			baseline: "uy:items-baseline uy:items-base"
-		}
-	},
-	defaultVariants: {
-		inline: !1,
-		flow: "row",
-		justifyItems: "initial",
-		alignItems: "initial"
-	}
-}), n = e({
-	variants: {
-		colSpan: {
-			1: "uy:col-span-1",
-			2: "uy:col-span-2",
-			3: "uy:col-span-3",
-			4: "uy:col-span-4",
-			5: "uy:col-span-5",
-			6: "uy:col-span-6",
-			7: "uy:md:col-span-7",
-			8: "uy:md:col-span-8",
-			9: "uy:md:col-span-9",
-			10: "uy:md:col-span-10",
-			11: "uy:md:col-span-11",
-			12: "uy:md:col-span-12",
-			"1/2": "uy:col-span-3 uy:md:col-span-6",
-			"1/3": "uy:col-span-2 uy:md:col-span-4",
-			"2/3": "uy:col-span-4 uy:md:col-span-8",
-			"1/4": "uy:col-span-1 uy:md:col-span-3",
-			"3/4": "uy:col-span-3 uy:md:col-span-9",
-			"1/6": "uy:col-span-1 uy:md:col-span-2",
-			"5/6": "uy:col-span-5 uy:md:col-span-10",
-			full: "uy:col-span-full"
-		},
-		colStart: {
-			"-1": "uy:-col-start-1",
-			"-2": "uy:-col-start-2",
-			"-3": "uy:-col-start-3",
-			"-4": "uy:-col-start-4",
-			"-5": "uy:-col-start-5",
-			"-6": "uy:-col-start-6",
-			"-7": "uy:-col-start-7",
-			"-8": "uy:-col-start-8",
-			"-9": "uy:-col-start-9",
-			"-10": "uy:-col-start-10",
-			"-11": "uy:-col-start-11",
-			"-12": "uy:-col-start-12",
-			"-13": "uy:-col-start-13",
-			1: "uy:col-start-1",
-			2: "uy:col-start-2",
-			3: "uy:col-start-3",
-			4: "uy:col-start-4",
-			5: "uy:col-start-5",
-			6: "uy:col-start-6",
-			7: "uy:col-start-7",
-			8: "uy:col-start-8",
-			9: "uy:col-start-9",
-			10: "uy:col-start-10",
-			11: "uy:col-start-11",
-			12: "uy:col-start-12",
-			13: "uy:col-start-13",
-			auto: "uy:col-start-auto"
-		},
-		colEnd: {
-			1: "uy:col-end-1",
-			2: "uy:col-end-2",
-			3: "uy:col-end-3",
-			4: "uy:col-end-4",
-			5: "uy:col-end-5",
-			6: "uy:col-end-6",
-			7: "uy:col-end-7",
-			8: "uy:col-end-8",
-			9: "uy:col-end-9",
-			10: "uy:col-end-10",
-			11: "uy:col-end-11",
-			12: "uy:col-end-12",
-			13: "uy:col-end-13",
-			"-1": "uy:-col-end-1",
-			"-2": "uy:-col-end-2",
-			"-3": "uy:-col-end-3",
-			"-4": "uy:-col-end-4",
-			"-5": "uy:-col-end-5",
-			"-6": "uy:-col-end-6",
-			"-7": "uy:-col-end-7",
-			"-8": "uy:-col-end-8",
-			"-9": "uy:-col-end-9",
-			"-10": "uy:-col-end-10",
-			"-11": "uy:-col-end-11",
-			"-12": "uy:-col-end-12",
-			"-13": "uy:-col-end-13",
-			auto: "uy:col-end-auto"
-		},
-		justify: {
-			initial: "",
-			start: "uy:justify-self-start",
-			end: "uy:justify-self-end",
-			center: "uy:justify-self-center",
-			stretch: "uy:justify-self-stretch"
-		},
-		align: {
-			initial: "uy:self-auto",
-			start: "uy:self-start",
-			end: "uy:self-end",
-			center: "uy:self-center",
-			stretch: "uy:self-stretch",
-			baseline: "uy:self-baseline"
-		}
-	},
-	defaultVariants: {
-		justify: "initial",
-		align: "initial"
-	}
-});
-//#endregion
-export { t as grid, n as gridItem };

package/dist/esm/components/grid/GridItem.js

@@ -1,24 +0,0 @@
-import { gridItem as e } from "./Grid.variants.js";
-import { forwardRef as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-//#region src/components/grid/GridItem.tsx
-var r = t(({ asElement: t = "div", area: r, children: i, className: a, colSpan: o, colStart: s, colEnd: c, justify: l, align: u, ...d }, f) => {
-	let p = Object.fromEntries([["gridArea", r]].filter(([e, t]) => !!t));
-	return /* @__PURE__ */ n(t, {
-		ref: f,
-		className: e({
-			colSpan: o,
-			colStart: s,
-			colEnd: c,
-			justify: l,
-			align: u,
-			className: a
-		}),
-		style: p,
-		...d,
-		children: i
-	});
-});
-r.displayName = "GridItem";
-//#endregion
-export { r as GridItem };