@payfit/unity-components 3.1.14 → 3.1.16

package/dist/esm/components/selectable-card/selectable-card-radio-group/TanstackSelectableCardRadioGroup.js

@@ -1,29 +0,0 @@
-import { SelectableCardRadioGroup as e } from "./SelectableCardRadioGroup.js";
-import { useFieldContext as t } from "../../../hooks/tanstack-form-context.js";
-import { useFieldA11yContext as n } from "../../form-field/TanstackFormField.context.js";
-import { forwardRef as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
-//#region src/components/selectable-card/selectable-card-radio-group/TanstackSelectableCardRadioGroup.tsx
-var a = r(({ onBlur: r, onChange: a, children: o, ...s }, c) => {
-	let l = t(), u = n(), d = l.state.meta.isTouched && !l.state.meta.isValid, f = [u.helperTextId, u.feedbackTextId].filter(Boolean).join(" ");
-	return /* @__PURE__ */ i(e, {
-		...s,
-		ref: c,
-		id: u.inputId,
-		value: l.state.value || void 0,
-		onChange: (e) => {
-			l.handleChange(e), a?.(e);
-		},
-		onBlur: (e) => {
-			l.handleBlur(), r?.(e);
-		},
-		isInvalid: d,
-		"aria-labelledby": u.labelId,
-		"aria-describedby": f.length > 0 ? f : void 0,
-		"aria-details": u.contextualLinkId,
-		children: o
-	});
-});
-a.displayName = "TanstackSelectableCardRadioGroup";
-//#endregion
-export { a as TanstackSelectableCardRadioGroup };

package/dist/esm/components/selectable-card/selectable-card-radio-group/parts/SelectableCardRadio.js

@@ -1,39 +0,0 @@
-import { Text as e } from "../../../text/Text.js";
-import { RadioIndicator as t } from "../../../radio-button-group/parts/RadioIndicator.js";
-import { Content as n } from "../../internals/Content.js";
-import { Description as r } from "../../internals/Description.js";
-import { Illustration as i } from "../../internals/Illustration.js";
-import { SelectedIndicator as a } from "../../internals/SelectedIndicator.js";
-import { selectableCard as o } from "../../selectableCard.variant.js";
-import { useContext as s, useId as c } from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-import { RadioButton as f, RadioField as p, RadioGroupStateContext as m } from "react-aria-components/RadioGroup";
-//#region src/components/selectable-card/selectable-card-radio-group/parts/SelectableCardRadio.tsx
-var h = ({ title: h, description: g, illustration: _, isDisabled: v, ...y }) => {
-	let b = c(), { base: x } = o(), S = s(m), C = S?.isReadOnly ? "readonly" : S?.isDisabled || v ? "disabled" : S?.isInvalid ? "invalid" : "enabled", w = `selectable-card-radio-${b}__title`;
-	return /* @__PURE__ */ u(p, {
-		"aria-labelledby": w,
-		isDisabled: v,
-		className: "uy:contents",
-		...y,
-		children: /* @__PURE__ */ u(f, {
-			className: ({ isFocusVisible: e }) => x({ isFocusVisible: e }),
-			children: ({ isSelected: o }) => /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(a, { children: /* @__PURE__ */ u(t, {
-				isSelected: o,
-				state: C
-			}) }), /* @__PURE__ */ d(n, { children: [
-				_ && /* @__PURE__ */ u(i, { children: _ }),
-				/* @__PURE__ */ u(e, {
-					asElement: "h3",
-					variant: "bodyLargeStrong",
-					id: w,
-					children: h
-				}),
-				g && /* @__PURE__ */ u(r, { children: g })
-			] })] })
-		})
-	});
-};
-h.displayName = "SelectableCardRadio";
-//#endregion
-export { h as SelectableCardRadio };

package/dist/esm/components/selectable-card/selectableCard.variant.js

@@ -1,18 +0,0 @@
-import { uyTv as e } from "@payfit/unity-themes";
-//#region src/components/selectable-card/selectableCard.variant.ts
-var t = e({
-	slots: { base: [
-		"uy:group",
-		"uy:flex uy:flex-row uy:items-start uy:basis-0 uy:grow uy:cursor-pointer",
-		"uy:border uy:border-solid uy:rounded-200 uy:border-border-form-enabled uy:m-px",
-		"uy:text-content-form-enabled",
-		"uy:bg-surface-form-enabled",
-		"uy:hover:border-border-form-hover",
-		"uy:data-[selected=true]:border-border-form-selected uy:data-[selected=true]:border-2 uy:data-[selected=true]:m-0",
-		"uy:data-[invalid]:border-border-form-error uy:data-[invalid]:bg-surface-form-error",
-		"uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
-	] },
-	variants: { isFocusVisible: { true: "uy:outline-none uy:ring-2 uy:ring-offset-2 uy:ring-utility-focus-ring" } }
-});
-//#endregion
-export { t as selectableCard };

package/dist/esm/components/selectable-card-checkbox-group-field/TanstackSelectableCardCheckboxGroupField.d.ts

@@ -1,10 +0,0 @@
-import { PropsWithChildren, ReactNode } from 'react';
-import { LabelProps } from '../label/Label.js';
-export interface TanstackSelectableCardCheckboxGroupFieldProps extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
-    /** The label for the checkbox group. */
-    label: string;
-    /** Helper text to display below the checkbox group. */
-    helperText?: ReactNode;
-}
-declare const TanstackSelectableCardCheckboxGroupField: import('react').ForwardRefExoticComponent<TanstackSelectableCardCheckboxGroupFieldProps & import('react').RefAttributes<HTMLDivElement>>;
-export { TanstackSelectableCardCheckboxGroupField };

package/dist/esm/components/selectable-card-checkbox-group-field/TanstackSelectableCardCheckboxGroupField.js

@@ -1,30 +0,0 @@
-import { TanstackFormFeedbackText as e } from "../form-field/parts/TanstackFormFeedbackText.js";
-import { TanstackFormField as t } from "../form-field/TanstackFormField.js";
-import { TanstackFormHelperText as n } from "../form-field/parts/TanstackFormHelperText.js";
-import { TanstackFormLabel as r } from "../form-field/parts/TanstackFormLabel.js";
-import { TanstackSelectableCardCheckboxGroup as i } from "../selectable-card/selectable-card-checkbox-group/TanstackSelectableCardCheckboxGroup.js";
-import { forwardRef as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/components/selectable-card-checkbox-group-field/TanstackSelectableCardCheckboxGroupField.tsx
-function c({ children: a, isRequired: c, requiredVariant: l, label: u, helperText: d, ...f }, p) {
-	return /* @__PURE__ */ s(t, { children: [
-		/* @__PURE__ */ s("div", {
-			className: "uy:flex uy:flex-col uy:gap-50",
-			children: [/* @__PURE__ */ o(r, {
-				requiredVariant: l,
-				isRequired: c,
-				children: u
-			}), d && /* @__PURE__ */ o(n, { children: d })]
-		}),
-		/* @__PURE__ */ o(i, {
-			ref: p,
-			...f,
-			children: a
-		}),
-		/* @__PURE__ */ o(e, {})
-	] });
-}
-var l = a(c);
-l.displayName = "TanstackSelectableCardCheckboxGroupField";
-//#endregion
-export { l as TanstackSelectableCardCheckboxGroupField };

package/dist/esm/components/selectable-card-radio-group-field/TanstackSelectableCardRadioGroupField.d.ts

@@ -1,10 +0,0 @@
-import { PropsWithChildren, ReactNode } from 'react';
-import { LabelProps } from '../label/Label.js';
-export interface TanstackSelectableCardRadioGroupFieldProps extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
-    /** The label for the radio button group. */
-    label: string;
-    /** Helper text to display below the radio button group. */
-    helperText?: ReactNode;
-}
-declare const TanstackSelectableCardRadioGroupField: import('react').ForwardRefExoticComponent<TanstackSelectableCardRadioGroupFieldProps & import('react').RefAttributes<HTMLDivElement>>;
-export { TanstackSelectableCardRadioGroupField };

package/dist/esm/components/selectable-card-radio-group-field/TanstackSelectableCardRadioGroupField.js

@@ -1,30 +0,0 @@
-import { TanstackFormFeedbackText as e } from "../form-field/parts/TanstackFormFeedbackText.js";
-import { TanstackFormField as t } from "../form-field/TanstackFormField.js";
-import { TanstackFormHelperText as n } from "../form-field/parts/TanstackFormHelperText.js";
-import { TanstackFormLabel as r } from "../form-field/parts/TanstackFormLabel.js";
-import { TanstackSelectableCardRadioGroup as i } from "../selectable-card/selectable-card-radio-group/TanstackSelectableCardRadioGroup.js";
-import { forwardRef as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/components/selectable-card-radio-group-field/TanstackSelectableCardRadioGroupField.tsx
-function c({ children: a, isRequired: c, requiredVariant: l, label: u, helperText: d, ...f }, p) {
-	return /* @__PURE__ */ s(t, { children: [
-		/* @__PURE__ */ s("div", {
-			className: "uy:flex uy:flex-col uy:gap-50",
-			children: [/* @__PURE__ */ o(r, {
-				requiredVariant: l,
-				isRequired: c,
-				children: u
-			}), d && /* @__PURE__ */ o(n, { children: d })]
-		}),
-		/* @__PURE__ */ o(i, {
-			ref: p,
-			...f,
-			children: a
-		}),
-		/* @__PURE__ */ o(e, {})
-	] });
-}
-var l = a(c);
-l.displayName = "TanstackSelectableCardRadioGroupField";
-//#endregion
-export { l as TanstackSelectableCardRadioGroupField };

package/dist/esm/components/side-panel/SidePanel.js

@@ -1,91 +0,0 @@
-import { SidePanelDragIndicator as e } from "./parts/SidePanelDragIndicator.js";
-import { forwardRef as t, useEffect as n } from "react";
-import { uyTv as r } from "@payfit/unity-themes";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Dialog as o, OverlayTriggerStateContext as s } from "react-aria-components/Dialog";
-import { Modal as c, ModalOverlay as l } from "react-aria-components/Modal";
-import { useOverlayTriggerState as u } from "react-stately/useOverlayTriggerState";
-import { createPortal as d } from "react-dom";
-//#region src/components/side-panel/SidePanel.tsx
-var f = r({
-	slots: {
-		overlay: [
-			"uy:md:bg-gradient-to-r uy:md:from-grayscale-l12/0 uy:md:to-grayscale-l12/10 uy:md:from-70% uy:md:via-100%",
-			"uy:fixed uy:inset-0 uy:isolate uy:z-30",
-			"uy:data-[entering]:animate-fade-in uy:data-[exiting]:animate-fade-out"
-		],
-		wrapper: [
-			"uy:w-full uy:md:w-[400px]",
-			"uy:fixed uy:bottom-0 uy:md:inset-y-200 uy:md:right-200",
-			"uy:bg-surface-neutral uy:rounded-t-200 uy:md:rounded-200 uy:shadow-flying",
-			"uy:flex uy:flex-col uy:h-[95svh] uy:md:max-h-[calc(100vh-2rem)]",
-			"uy:overflow-hidden",
-			"uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out uy:md:data-[entering]:animate-slide-right-fade-in uy:md:data-[exiting]:animate-slide-right-fade-out"
-		],
-		content: "uy:flex uy:flex-col uy:h-full uy:overflow-hidden uy:outline-none"
-	},
-	variants: { isModal: { false: {
-		overlay: "uy:pointer-events-none",
-		wrapper: "uy:pointer-events-auto"
-	} } }
-}), p = t(({ children: t, isOpen: r, onOpenChange: p, defaultOpen: m, isDismissable: h = !0, isKeyboardDismissDisabled: g = !1, isModal: _ = !0, disableScrollLocking: v = !1, "aria-label": y = "Side panel", "aria-labelledby": b, ...x }, S) => {
-	let C = u({
-		isOpen: r,
-		onOpenChange: p,
-		defaultOpen: m
-	}), { overlay: w, wrapper: T, content: E } = f({ isModal: _ });
-	return n(() => {
-		v && (r ?? m) && (document.documentElement.style.overflow = "", document.body.style.overflow = "");
-	}, [
-		v,
-		r,
-		m
-	]), _ ? /* @__PURE__ */ i(l, {
-		className: w(),
-		isOpen: r,
-		onOpenChange: p,
-		defaultOpen: m,
-		isDismissable: h,
-		isKeyboardDismissDisabled: g,
-		children: /* @__PURE__ */ a(c, {
-			"data-dd-privacy": "allow",
-			...x,
-			ref: S,
-			className: T(),
-			"data-unity-side-panel": !0,
-			children: [/* @__PURE__ */ i(e, {}), /* @__PURE__ */ i(o, {
-				className: E(),
-				children: t
-			})]
-		})
-	}) : !C.isOpen || typeof document > "u" || !document.body ? null : d(/* @__PURE__ */ i(s.Provider, {
-		value: C,
-		children: /* @__PURE__ */ i("div", {
-			className: w(),
-			children: /* @__PURE__ */ a("div", {
-				"data-dd-privacy": "allow",
-				...x,
-				ref: S,
-				className: T(),
-				"data-unity-side-panel": !0,
-				onClickCapture: (e) => {
-					e.target instanceof Element && e.target.closest("[slot=\"close\"]") && C.close();
-				},
-				onKeyDownCapture: (e) => {
-					h && e.key === "Escape" && !g && C.close();
-				},
-				children: [/* @__PURE__ */ i(e, {}), /* @__PURE__ */ i("div", {
-					"aria-label": b ? void 0 : y,
-					"aria-labelledby": b,
-					"aria-modal": !1,
-					className: E(),
-					role: "dialog",
-					children: t
-				})]
-			})
-		})
-	}), document.body);
-});
-p.displayName = "SidePanel";
-//#endregion
-export { p as SidePanel, f as sidePanel };

package/dist/esm/components/side-panel/parts/SidePanelContent.js

@@ -1,26 +0,0 @@
-import { forwardRef as e } from "react";
-import { uyTv as t } from "@payfit/unity-themes";
-import { jsx as n } from "react/jsx-runtime";
-//#region src/components/side-panel/parts/SidePanelContent.tsx
-var r = t({ slots: {
-	base: [
-		"uy:bg-surface-neutral",
-		"uy:flex uy:flex-col uy:flex-1 uy:min-h-0 uy:overflow-hidden",
-		"uy:w-full"
-	],
-	scroller: ["uy:flex-1 uy:overflow-y-auto uy:overflow-x-hidden uy:p-300", "uy:h-full uy:min-h-0"]
-} }), i = e(({ children: e, ...t }, i) => {
-	let { base: a, scroller: o } = r();
-	return /* @__PURE__ */ n("section", {
-		ref: i,
-		className: a(),
-		...t,
-		children: /* @__PURE__ */ n("div", {
-			className: o(),
-			children: e
-		})
-	});
-});
-i.displayName = "SidePanelContent";
-//#endregion
-export { i as SidePanelContent, r as sidePanelContent };

package/dist/esm/components/side-panel/parts/SidePanelDragIndicator.js

@@ -1,45 +0,0 @@
-import { useBreakpointListener as e } from "../../../hooks/use-breakpoint-listener.js";
-import { useContext as t, useRef as n } from "react";
-import { uyTv as r } from "@payfit/unity-themes";
-import { jsx as i } from "react/jsx-runtime";
-import { OverlayTriggerStateContext as a } from "react-aria-components/Dialog";
-import { useDrag as o } from "@use-gesture/react";
-//#region src/components/side-panel/parts/SidePanelDragIndicator.tsx
-var s = r({ slots: {
-	base: ["uy:md:hidden uy:mx-auto uy:pt-300 uy:w-500", "uy:cursor-grab uy:touch-action-none"],
-	indicator: "uy:h-50 uy:rounded-pill uy:bg-content-neutral-lowest"
-} }), c = 100;
-function l() {
-	let r = n(null), l = t(a), u = e(), { base: d, indicator: f } = s(), p = u === "xs" || u === "sm", m = o((e) => {
-		let { movement: [t, n], direction: [i, a], intentional: o, cancel: s, last: u, event: d } = e;
-		if (!p) {
-			s();
-			return;
-		}
-		d.preventDefault();
-		let f = r.current?.closest("[data-unity-side-panel]");
-		if (f) {
-			if (n < 0) {
-				f.style.transform = "translate3d(0, 0, 0)";
-				return;
-			}
-			f.style.transform = `translate3d(0, ${n}px, 0)`, f.style.transition = "none", u && o && (n > c || a > 0 ? l && setTimeout(() => {
-				l.close();
-			}, 50) : (f.style.transform = "translate3d(0, 0, 0)", f.style.transition = "transform 0.3s ease"));
-		}
-	}, {
-		axis: "y",
-		filterTaps: !0,
-		threshold: 5
-	});
-	return /* @__PURE__ */ i("div", {
-		className: d(),
-		"aria-hidden": "true",
-		ref: r,
-		...m(),
-		children: /* @__PURE__ */ i("div", { className: f() })
-	});
-}
-l.displayName = "SidePanelDragIndicator";
-//#endregion
-export { l as SidePanelDragIndicator, s as sidePanelDragIndicator };

package/dist/esm/components/side-panel/parts/SidePanelFooter.js

@@ -1,26 +0,0 @@
-import { useBreakpointListener as e } from "../../../hooks/use-breakpoint-listener.js";
-import { Button as t } from "../../button/Button.js";
-import { DialogButton as n } from "../../dialog/parts/DialogActions/DialogButton.js";
-import { Children as r, cloneElement as i, forwardRef as a, isValidElement as o } from "react";
-import { uyTv as s } from "@payfit/unity-themes";
-import { jsx as c } from "react/jsx-runtime";
-//#region src/components/side-panel/parts/SidePanelFooter.tsx
-var l = s({ base: [
-	"uy:py-200 uy:px-300 uy:w-full",
-	"uy:flex uy:items-center uy:justify-end uy:gap-100 uy:shrink-0 uy:flex-col uy:md:flex-row",
-	"uy:bg-surface-neutral uy:rounded-bl-200 uy:rounded-br-200 uy:border-t uy:border-solid uy:border-t-solid uy:border-border-neutral",
-	"uy:sticky uy:bottom-0 uy:z-10",
-	"uy:mt-auto",
-	"uy:pb-[max(env(safe-area-inset-bottom),var(--uy-spacing-200))] uy:md:pb-200"
-] }), u = a(({ children: a, ...s }, u) => {
-	let d = e(), f = d === "xs" || d === "sm", p = r.map(a, (e) => o(e) && (e.type === t || e.type === n) ? i(e, { size: f ? "full" : e.props.size }) : e);
-	return /* @__PURE__ */ c("footer", {
-		ref: u,
-		className: l(),
-		...s,
-		children: p
-	});
-});
-u.displayName = "SidePanelFooter";
-//#endregion
-export { u as SidePanelFooter, l as sidePanelFooter };

package/dist/esm/components/side-panel/parts/SidePanelHeader.js

@@ -1,41 +0,0 @@
-import { CircularIconButton as e } from "../../icon-button/CircularIconButton.js";
-import { forwardRef as t } from "react";
-import { uyTv as n } from "@payfit/unity-themes";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Heading as a } from "react-aria-components/Heading";
-//#region src/components/side-panel/parts/SidePanelHeader.tsx
-var o = n({ slots: {
-	base: [
-		"uy:py-200 uy:px-300 uy:w-full",
-		"uy:flex uy:flex-col uy:shrink-0",
-		"uy:bg-surface-neutral uy:rounded-tl-200 uy:rounded-tr-200 uy:shadow-raising",
-		"uy:sticky uy:top-0 uy:z-10"
-	],
-	content: ["uy:flex uy:items-center uy:justify-between uy:w-full"],
-	heading: ["uy:typography-h2 uy:md:typography-h3 uy:text-content-neutral uy:truncate"]
-} }), s = t(({ children: t, ...n }, s) => {
-	let { base: c, content: l, heading: u } = o();
-	return /* @__PURE__ */ r("header", {
-		ref: s,
-		className: c(),
-		...n,
-		children: /* @__PURE__ */ i("div", {
-			className: l(),
-			children: [/* @__PURE__ */ r(a, {
-				slot: "title",
-				className: u(),
-				children: t
-			}), /* @__PURE__ */ r(e, {
-				asElement: "button",
-				slot: "close",
-				icon: "CloseOutlined",
-				title: "Close",
-				size: "large",
-				color: "content.neutral.low"
-			})]
-		})
-	});
-});
-s.displayName = "SidePanelHeader";
-//#endregion
-export { s as SidePanelHeader, o as sidePanelHeader };

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

@@ -1,47 +0,0 @@
-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/skip-links/SkipLinks.d.ts

@@ -1,82 +0,0 @@
-import { HTMLAttributes, PropsWithChildren } from 'react';
-export interface SkipLinksProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
-    /** Optional label for the skip links navigation. Defaults to "Skip to:" */
-    label?: string;
-}
-export interface SkipLinkProps extends PropsWithChildren<HTMLAttributes<HTMLAnchorElement>> {
-    /** The target element ID to skip to */
-    targetId: string;
-}
-/**
- * SkipLinks component provides keyboard navigation shortcuts to important sections of the page
- *
- * The SkipLinks component creates accessible navigation shortcuts that appear when focused,
- * allowing keyboard users to quickly jump to important sections like main content, toolbars,
- * or action areas. It follows WCAG guidelines for skip navigation.
- * @param props - The props for the SkipLinks component
- * @param props.label - Optional label for the skip links navigation section
- * @param props.children - SkipLink components
- * @example
- * ```tsx
- * import { SkipLinks, SkipLink } from '@payfit/unity-components'
- *
- * function TableWithActions() {
- *   return (
- *     <div>
- *       <SkipLinks label="Quick navigation:">
- *         <SkipLink targetId="main-content">
- *           Skip to main content
- *         </SkipLink>
- *         <SkipLink targetId="table-actions-toolbar">
- *           Skip to actions
- *         </SkipLink>
- *       </SkipLinks>
- *       <div id="main-content" tabIndex={-1}>
- *         Main content
- *       </div>
- *       <div id="table-actions-toolbar" tabIndex={-1}>
- *         Action bar content
- *       </div>
- *     </div>
- *   )
- * }
- * ```
- * @remarks
- * - Skip links are visually hidden by default and become visible when focused
- * - Each link should target an element with a valid ID and tabIndex={-1}
- * - The component exposes navigation and list semantics labelled through `aria-labelledby`
- * - Links follow the normal tab order and can be activated with Enter or Space
- * - Place skip links where they should occur in the page tab order and avoid fixed or absolute positioning that could conflict with other skip links
- * - The component follows WCAG 2.1 guidelines for skip navigation
- * @see {@link SkipLinksProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/skip-links GitHub}
- * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
- */
-declare const SkipLinks: import('react').ForwardRefExoticComponent<SkipLinksProps & import('react').RefAttributes<HTMLElement>>;
-/**
- * SkipLink component represents a single skip navigation link
- *
- * The SkipLink component should be used as a child of SkipLinks to create individual
- * navigation shortcuts. It automatically handles focus management and accessibility.
- * @param props - The props for the SkipLink component
- * @param props.targetId - The ID of the target element to skip to
- * @param props.children - The link text content
- * @example
- * ```tsx
- * import { SkipLink } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <SkipLink targetId="main-content">
- *       Skip to main content
- *     </SkipLink>
- *   )
- * }
- * ```
- * @remarks
- * - Should only be used as a child of SkipLinks component
- * - Automatically focuses the target element when activated
- * @see {@link SkipLinkProps} for all available props
- */
-declare const SkipLink: import('react').ForwardRefExoticComponent<SkipLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
-export { SkipLinks, SkipLink };

package/dist/esm/components/skip-links/SkipLinks.js

@@ -1,69 +0,0 @@
-import { link as e } from "../link/RawLink.js";
-import { forwardRef as t, useId as n } from "react";
-import { uyTv as r } from "@payfit/unity-themes";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { FormattedMessage as o } from "react-intl";
-import { Link as s } from "react-aria-components/Link";
-//#region src/components/skip-links/SkipLinks.tsx
-var c = r({ slots: {
-	base: [
-		"uy:sr-only",
-		"uy:focus-within:p-200",
-		"uy:focus-within:bg-surface-neutral",
-		"uy:focus-within:border-border-neutral uy:focus-within:border-solid uy:focus-within:border-1",
-		"uy:focus-within:shadow-raising",
-		"uy:focus-within:rounded-100",
-		"uy:focus-within:not-sr-only",
-		"uy:focus-within:absolute",
-		"uy:focus-within:top-100",
-		"uy:focus-within:left-100",
-		"uy:focus-within:z-50"
-	],
-	label: "uy:typography-h4",
-	list: "uy:mt-1 uy:space-y-1 uy:list-none"
-} }), l = t(({ label: e, className: t, children: r, ...s }, l) => {
-	let u = `skip-links-label-${n()}`;
-	if (!r) return null;
-	let { base: d, label: f, list: p } = c();
-	return /* @__PURE__ */ a("nav", {
-		"data-dd-privacy": "allow",
-		...s,
-		ref: l,
-		className: d({ className: t }),
-		role: "navigation",
-		"aria-labelledby": u,
-		"data-unity-component": "SkipLinks",
-		children: [/* @__PURE__ */ i("span", {
-			id: u,
-			className: f(),
-			children: e || /* @__PURE__ */ i(o, {
-				id: "unity:component:skip-links:label",
-				defaultMessage: "Skip to:"
-			})
-		}), /* @__PURE__ */ i("ol", {
-			className: p(),
-			children: r
-		})]
-	});
-}), u = t(({ targetId: t, children: n, ...r }, a) => {
-	let { base: o } = e({
-		size: "small",
-		color: "primary",
-		variant: "standalone"
-	});
-	return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(s, {
-		...r,
-		ref: a,
-		className: o(),
-		onPress: () => {
-			let e = document.getElementById(t);
-			e && (e.focus(), e.hasAttribute("tabindex") || (e.setAttribute("tabindex", "-1"), e.addEventListener("blur", () => {
-				e.removeAttribute("tabindex");
-			}, { once: !0 })));
-		},
-		children: n
-	}) });
-});
-l.displayName = "SkipLinks", u.displayName = "SkipLink";
-//#endregion
-export { u as SkipLink, l as SkipLinks };