@payfit/unity-components 3.1.14 → 3.1.16

package/dist/esm/core/components/carousel/Carousel.js

@@ -0,0 +1,67 @@
+import { CarouselContext as e } from "./Carousel.context.js";
+import { createCarouselAccessibilityOptions as t } from "./Carousel.options.js";
+import { useCarouselAccessibility as n } from "./hooks/useCarouselAccessibility.js";
+import { useCarouselState as r } from "./hooks/useCarouselState.js";
+import { CarouselNav as i } from "./parts/CarouselNav.js";
+import { forwardRef as a, useMemo as o } from "react";
+import { uyTv as s } from "@payfit/unity-themes";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useIntl as u } from "react-intl";
+import d from "embla-carousel-accessibility";
+import f from "embla-carousel-react";
+//#region src/core/components/carousel/Carousel.tsx
+var p = s({ base: "uy:relative uy:flex uy:flex-col uy:gap-200 uy:md:gap-300" }), m = a(({ children: a, className: s, options: m = { slidesToScroll: "auto" }, "aria-label": h, ...g }, _) => {
+	let v = u(), y = o(() => t(v), [v]), [b, x] = f({
+		draggable: !0,
+		...m,
+		axis: "x"
+	}, [d(y)]), { canGoToNext: S, canGoToPrev: C, visibleSlideIndexes: w, focusedSlideIndex: T, goToPrev: E, goToNext: D, goTo: O, goToSlide: k, selectedSnap: A, snapCount: j } = r(x), { liveRegionRef: M, a11yIds: N, onKeyDown: P } = n({
+		api: x,
+		visibleSlideIndexes: w,
+		focusedSlideIndex: T,
+		loop: m.loop ?? !1,
+		goToSlide: k
+	});
+	return /* @__PURE__ */ c(e.Provider, {
+		value: {
+			carouselRef: b,
+			api: x,
+			goToNext: D,
+			goToPrev: E,
+			goTo: O,
+			canGoToPrev: C,
+			canGoToNext: S,
+			visibleSlideIndexes: w,
+			selectedSnap: A,
+			snapCount: j,
+			a11yIds: N
+		},
+		children: /* @__PURE__ */ l("div", {
+			ref: _,
+			className: p({ className: s }),
+			role: "region",
+			"aria-roledescription": v.formatMessage({
+				id: "unity:component:carousel:roledescription",
+				defaultMessage: "carousel"
+			}),
+			"aria-label": h,
+			"aria-labelledby": h ? void 0 : N.title,
+			"data-unity-slot": "carousel",
+			onKeyDownCapture: P,
+			...g,
+			children: [
+				a,
+				/* @__PURE__ */ c(i, { className: "uy:flex uy:justify-center uy:md:hidden" }),
+				/* @__PURE__ */ c("div", {
+					ref: M,
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					className: "uy:sr-only"
+				})
+			]
+		})
+	});
+});
+m.displayName = "Carousel";
+//#endregion
+export { m as Carousel, p as carousel };

package/dist/esm/core/components/carousel/Carousel.options.js

@@ -0,0 +1,72 @@
+//#region src/core/components/carousel/Carousel.options.ts
+function e(e) {
+	return (t, n, r, i, a, o) => {
+		let s = n + 1, c = r + 1, l = a + 1;
+		return t ? n === r ? e.formatMessage({
+			id: "unity:component:carousel:a11y:slide:label:group-single",
+			defaultMessage: "Slide {slide} of {totalSlides} (group {snap} of {totalSnaps})"
+		}, {
+			slide: s,
+			totalSlides: i,
+			snap: l,
+			totalSnaps: o
+		}) : e.formatMessage({
+			id: "unity:component:carousel:a11y:slide:label:group-multiple",
+			defaultMessage: "Slides {slide}-{lastSlide} of {totalSlides} (group {snap} of {totalSnaps})"
+		}, {
+			slide: s,
+			lastSlide: c,
+			totalSlides: i,
+			snap: l,
+			totalSnaps: o
+		}) : e.formatMessage({
+			id: "unity:component:carousel:a11y:slide:label:single",
+			defaultMessage: "Slide {slide} of {totalSlides}"
+		}, {
+			slide: s,
+			totalSlides: i
+		});
+	};
+}
+function t(e) {
+	return (t, n, r, i, a, o) => {
+		let s = n + 1, c = r + 1, l = a + 1;
+		return t ? n === r ? e.formatMessage({
+			id: "unity:component:carousel:a11y:live-region:group-single",
+			defaultMessage: "Showing slide {slide} of {totalSlides} (group {snap} of {totalSnaps})"
+		}, {
+			slide: s,
+			totalSlides: i,
+			snap: l,
+			totalSnaps: o
+		}) : e.formatMessage({
+			id: "unity:component:carousel:a11y:live-region:group-multiple",
+			defaultMessage: "Showing slides {slide}-{lastSlide} of {totalSlides} (group {snap} of {totalSnaps})"
+		}, {
+			slide: s,
+			lastSlide: c,
+			totalSlides: i,
+			snap: l,
+			totalSnaps: o
+		}) : e.formatMessage({
+			id: "unity:component:carousel:a11y:live-region:single",
+			defaultMessage: "Showing slide {slide} of {totalSlides}"
+		}, {
+			slide: s,
+			totalSlides: i
+		});
+	};
+}
+function n(n) {
+	return {
+		announceChanges: !0,
+		carouselAriaLabel: n.formatMessage({
+			id: "unity:component:carousel:a11y:carousel:label",
+			defaultMessage: "Carousel"
+		}),
+		slideAriaLabel: e(n),
+		liveRegionContent: t(n)
+	};
+}
+//#endregion
+export { n as createCarouselAccessibilityOptions, t as createLiveRegionContent, e as createSlideAriaLabel };

package/dist/esm/core/components/carousel/hooks/useCarouselAccessibility.js

@@ -0,0 +1,83 @@
+import { useCallback as e, useEffect as t, useRef as n } from "react";
+import { useId as r } from "react-aria/useId";
+import "embla-carousel-accessibility";
+//#region src/core/components/carousel/hooks/useCarouselAccessibility.ts
+function i({ api: i, visibleSlideIndexes: a, focusedSlideIndex: o, loop: s = !1, goToSlide: c }) {
+	let l = n(null), u = n(!1), d = r(), f = {
+		root: `carousel-${d}__root`,
+		title: `carousel-${d}__title`,
+		track: `carousel-${d}__track`,
+		previousButton: `carousel-${d}__previous-button`,
+		nextButton: `carousel-${d}__next-button`
+	};
+	return t(() => {
+		if (!i) return;
+		let e = i.plugins().accessibility;
+		!e || !l.current || e.setupLiveRegion(l.current);
+	}, [i]), t(() => {
+		if (!i) return;
+		let e = i.slideNodes();
+		e.forEach((e, t) => {
+			t === o ? (e.setAttribute("tabindex", "0"), e.removeAttribute("inert")) : (e.setAttribute("tabindex", "-1"), a.has(t) ? e.removeAttribute("inert") : e.setAttribute("inert", ""));
+		}), u.current && o !== null && (u.current = !1, e[o]?.focus({ preventScroll: !0 }));
+	}, [
+		i,
+		a,
+		o
+	]), {
+		liveRegionRef: l,
+		a11yIds: f,
+		onKeyDown: e((e) => {
+			if (!i) return;
+			let t = i.slideNodes().length, n = o ?? 0;
+			switch (e.key) {
+				case "ArrowLeft": {
+					e.preventDefault();
+					let r = n > 0 ? n - 1 : s ? t - 1 : n;
+					r !== n && (u.current = !0, c(r));
+					break;
+				}
+				case "ArrowRight": {
+					e.preventDefault();
+					let r = n < t - 1 ? n + 1 : s ? 0 : n;
+					r !== n && (u.current = !0, c(r));
+					break;
+				}
+				case "Home":
+					e.preventDefault(), s || (u.current = !0, c(0));
+					break;
+				case "End":
+					if (e.preventDefault(), !s) {
+						let e = t - 1;
+						u.current = !0, c(e);
+					}
+					break;
+				case "PageUp": {
+					e.preventDefault();
+					let t = i.selectedSnap(), n = i.snapList().length, r = t > 0 ? t - 1 : s ? n - 1 : t;
+					if (r !== t) {
+						let e = i.internalEngine(), t = e.slidesToScroll.groupSlides(e.slideIndexes)[r]?.[0];
+						t !== void 0 && (u.current = !0, c(t));
+					}
+					break;
+				}
+				case "PageDown": {
+					e.preventDefault();
+					let t = i.selectedSnap(), n = t < i.snapList().length - 1 ? t + 1 : s ? 0 : t;
+					if (n !== t) {
+						let e = i.internalEngine(), t = e.slidesToScroll.groupSlides(e.slideIndexes)[n]?.[0];
+						t !== void 0 && (u.current = !0, c(t));
+					}
+					break;
+				}
+			}
+		}, [
+			i,
+			s,
+			o,
+			c
+		])
+	};
+}
+//#endregion
+export { i as useCarouselAccessibility };

package/dist/esm/core/components/carousel/hooks/useCarouselState.js

@@ -0,0 +1,59 @@
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+//#region src/core/components/carousel/hooks/useCarouselState.ts
+function i(i) {
+	let [a, o] = r(0), [s, c] = r(0), [l, u] = r(() => /* @__PURE__ */ new Set()), [d, f] = r(null), p = n(!1), m = e(() => {
+		if (!i) return {
+			visible: /* @__PURE__ */ new Set(),
+			focused: null
+		};
+		let e = i.selectedSnap(), t = i.internalEngine(), n = (t.slidesToScroll.groupSlides(t.slideIndexes)[e] ?? [])[0] ?? null, r = i.slidesInView(), a = new Set(r);
+		return n !== null && a.add(n), {
+			visible: a,
+			focused: n
+		};
+	}, [i]), h = e(() => {
+		if (!i) return;
+		let e = i.selectedSnap();
+		o(e);
+		let t = m();
+		u(t.visible), p.current || f(t.focused);
+	}, [i, m]), g = e(() => {
+		if (!i) return;
+		c(i.snapList().length);
+		let e = i.selectedSnap();
+		o(e);
+	}, [i]);
+	return t(() => {
+		if (!i) return;
+		c(i.snapList().length);
+		let e = m();
+		return u(e.visible), f(e.focused), i.on("select", h), i.on("resize", g), () => {
+			i.off("select", h), i.off("resize", g);
+		};
+	}, [
+		i,
+		h,
+		g,
+		m
+	]), {
+		selectedSnap: a,
+		snapCount: s,
+		visibleSlideIndexes: l,
+		focusedSlideIndex: d,
+		goToPrev: e(() => i?.goToPrev(), [i]),
+		goToNext: e(() => i?.goToNext(), [i]),
+		goTo: e((e) => i?.goTo(e), [i]),
+		canGoToPrev: e(() => i?.canGoToPrev(), [i]),
+		canGoToNext: e(() => i?.canGoToNext(), [i]),
+		goToSlide: e((e) => {
+			if (!i) return;
+			p.current = !0, f(e);
+			let t = i.internalEngine(), n = t.slidesToScroll.groupSlides(t.slideIndexes).findIndex((t) => t.includes(e)), r = i.selectedSnap();
+			n !== -1 && n !== r && i.goTo(n), setTimeout(() => {
+				p.current = !1;
+			}, 0);
+		}, [i])
+	};
+}
+//#endregion
+export { i as useCarouselState };

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

@@ -0,0 +1,53 @@
+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";
+//#region src/core/components/carousel/parts/CarouselContent.tsx
+var o = i({ slots: {
+	root: ["uy:overflow-hidden ", "uy:-mx-(--uy-carousel-track-offset)"],
+	track: [
+		"uy:flex uy:touch-pan-y uy:touch-pinch-zoom",
+		"uy:gap-(--uy-carousel-slide-gap)",
+		"uy:*:first:ms-(--uy-carousel-track-margin-start)",
+		"uy:*:last:me-(--uy-carousel-track-margin-end)",
+		"uy:data-[grab-state=grab]:cursor-grab",
+		"uy:data-[grab-state=grabbing]:cursor-grabbing"
+	]
+} });
+function s({ className: i, children: s, itemsPerPage: c, gap: l, trackPadding: u, trackOffset: d = 0 }) {
+	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 = () => {
+			v(!0);
+		}, t = () => {
+			v(!1);
+		};
+		return m.on("pointerdown", e), m.on("pointerup", t), () => {
+			m.off("pointerdown", e), m.off("pointerup", t);
+		};
+	}, [m]), /* @__PURE__ */ a("div", {
+		ref: f,
+		className: h({ className: i }),
+		"data-slot": "carousel-content",
+		"data-items-per-page": typeof y == "number" ? y : void 0,
+		style: {
+			"--uy-carousel-slide-width": `calc((1 / ${y ?? 1}) * 100%)`,
+			"--uy-carousel-track-offset": typeof x == "number" ? `${x}px` : `var(--uy-spacing-${x.replace("$", "")})`,
+			"--uy-carousel-slide-gap": `var(--uy-spacing-${b ? b.replace("$", "") : 0})`,
+			"--uy-carousel-track-margin-start": `var(--uy-spacing-${S ? S.replace("$", "") : 0})`,
+			"--uy-carousel-track-margin-end": `var(--uy-spacing-${C ? C.replace("$", "") : 0})`
+		},
+		children: /* @__PURE__ */ a("div", {
+			className: g(),
+			"data-slot": "carousel-track",
+			"data-grab-state": _ ? "grabbing" : "grab",
+			id: p.track,
+			children: s
+		})
+	});
+}
+s.displayName = "CarouselContent";
+//#endregion
+export { s as CarouselContent, o as carouselContent };

package/dist/esm/core/components/carousel/parts/CarouselHeader.js

@@ -0,0 +1,43 @@
+import { Text as e } from "../../text/Text.js";
+import { useCarousel as t } from "../Carousel.context.js";
+import { CarouselNav as n } from "./CarouselNav.js";
+import { forwardRef 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/core/components/carousel/parts/CarouselHeader.tsx
+var c = i({ slots: {
+	root: "uy:flex uy:items-center uy:justify-between",
+	title: "uy:flex-1",
+	slot: "uy:shrink-0",
+	nav: "uy:hidden uy:md:flex"
+} }), l = r(({ title: r, actionSlot: i, className: l }, u) => {
+	let { a11yIds: d } = t(), f = s(), { root: p, title: m, slot: h, nav: g } = c();
+	return /* @__PURE__ */ o("header", {
+		ref: u,
+		className: p({ class: l }),
+		children: [
+			/* @__PURE__ */ a(e, {
+				id: d.title,
+				"data-dd-privacy": "allow",
+				variant: "h3",
+				color: "content.neutral",
+				className: m(),
+				children: r
+			}),
+			i && /* @__PURE__ */ a("div", {
+				role: "group",
+				"aria-label": f.formatMessage({
+					id: "unity:component:carousel:header:actions:label",
+					defaultMessage: "{title} actions"
+				}, { title: r }),
+				className: h(),
+				children: i
+			}),
+			/* @__PURE__ */ a(n, { className: g() })
+		]
+	});
+});
+l.displayName = "CarouselHeader";
+//#endregion
+export { l as CarouselHeader, c as carouselHeader };

package/dist/esm/core/components/carousel/parts/CarouselNav.js

@@ -0,0 +1,65 @@
+import { IconButton as e } from "../../icon-button/IconButton.js";
+import { Text as t } from "../../text/Text.js";
+import { useCarousel as n } from "../Carousel.context.js";
+import { uyTv as r } from "@payfit/unity-themes";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useIntl as o } from "react-intl";
+//#region src/core/components/carousel/parts/CarouselNav.tsx
+var s = r({ slots: {
+	root: "uy:flex uy:items-center uy:gap-50",
+	indicator: "uy:tabular-nums uy:select-none"
+} }), c = ({ className: r }) => {
+	let { goToNext: c, goToPrev: l, canGoToPrev: u, canGoToNext: d, selectedSnap: f, snapCount: p, a11yIds: m } = n(), h = o(), { root: g, indicator: _ } = s();
+	return p === 1 ? null : /* @__PURE__ */ a("div", {
+		className: g({ class: r }),
+		role: "toolbar",
+		"aria-label": h.formatMessage({
+			id: "unity:component:carousel:nav:toolbar-label",
+			defaultMessage: "Carousel navigation"
+		}),
+		"data-unity-slot": "carousel-nav",
+		children: [
+			/* @__PURE__ */ i(e, {
+				variant: "ghost",
+				color: "neutral",
+				icon: "CaretLeftOutlined",
+				label: h.formatMessage({
+					id: "unity:component:carousel:nav:previous:label",
+					defaultMessage: "Go to previous slide"
+				}),
+				onClick: l,
+				isDisabled: !u(),
+				"aria-disabled": !u(),
+				"aria-controls": m.track,
+				id: m.previousButton
+			}),
+			/* @__PURE__ */ a(t, {
+				variant: "body",
+				color: "content.neutral",
+				className: _(),
+				children: [
+					f + 1,
+					"/",
+					p
+				]
+			}),
+			/* @__PURE__ */ i(e, {
+				variant: "ghost",
+				color: "neutral",
+				icon: "CaretRightOutlined",
+				label: h.formatMessage({
+					id: "unity:component:carousel:nav:next:label",
+					defaultMessage: "Go to next slide"
+				}),
+				onClick: c,
+				isDisabled: !d(),
+				"aria-disabled": !d(),
+				"aria-controls": m.track,
+				id: m.nextButton
+			})
+		]
+	});
+};
+c.displayName = "CarouselNav";
+//#endregion
+export { c as CarouselNav, s as carouselNav };

package/dist/esm/core/components/carousel/parts/CarouselSlide.js

@@ -0,0 +1,26 @@
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+import { useIntl as r } from "react-intl";
+//#region src/core/components/carousel/parts/CarouselSlide.tsx
+var i = t({ base: [
+	"uy:group uy:min-w-0 uy:shrink-0 uy:grow-0",
+	"uy:basis-[calc(var(--uy-carousel-slide-width)-var(--uy-carousel-slide-gap))]",
+	"uy:focus-visible:outline-0"
+] }), a = e(({ className: e, ...t }, a) => {
+	let o = r();
+	return /* @__PURE__ */ n("div", {
+		...t,
+		ref: a,
+		role: "group",
+		"aria-roledescription": o.formatMessage({
+			id: "unity:component:carousel:slide:roledescription",
+			defaultMessage: "slide"
+		}),
+		"data-unity-slot": "carousel-item",
+		className: i({ className: e })
+	});
+});
+a.displayName = "CarouselSlide";
+//#endregion
+export { a as CarouselSlide, i as carouselSlide };

package/dist/esm/core/components/checkbox/Checkbox.js

@@ -0,0 +1,85 @@
+import { Text as e } from "../text/Text.js";
+import { checkbox as t } from "./Checkbox.variants.js";
+import { CheckboxIndicator as n } from "./parts/CheckboxIndicator.js";
+import { cloneElement as r, forwardRef as i, isValidElement as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useId as l } from "react-aria/useId";
+import { CheckboxButton as u, CheckboxField as d } from "react-aria-components/Checkbox";
+//#region src/core/components/checkbox/Checkbox.tsx
+var f = i(({ children: i, helperText: f, feedbackText: p, ...m }, h) => {
+	let g = l(), { isDisabled: _, isReadOnly: v, isInvalid: y, isRequired: b, requiredVariant: x = "required", ...S } = m, { base: C, wrapper: w, label: T, asterisk: E, optionalTag: D, descriptionsContainer: O, helperText: k, feedbackText: A } = t({
+		isDisabled: _,
+		isReadOnly: v,
+		isInvalid: y
+	}), j = [m["aria-labelledby"], `${g}-label`].filter(Boolean), M = [
+		m["aria-describedby"],
+		typeof f == "string" ? `${g}-helper-text` : void 0,
+		typeof p == "string" ? `${g}-feedback-text` : void 0
+	].filter(Boolean), N = j.length > 0 ? j.join(" ") : void 0, P = M.length > 0 ? M.join(" ") : void 0;
+	return /* @__PURE__ */ c("div", {
+		className: C(),
+		children: [/* @__PURE__ */ s(d, {
+			...S,
+			isInvalid: y,
+			className: "uy:contents",
+			"aria-labelledby": N,
+			"aria-describedby": P,
+			isDisabled: _,
+			isReadOnly: v,
+			children: /* @__PURE__ */ s(u, {
+				ref: h,
+				className: w(),
+				children: (e) => /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(n, {
+					...e,
+					className: "uy:my-50 uy:ml-0"
+				}), /* @__PURE__ */ c("span", {
+					id: `${g}-label`,
+					"data-dd-privacy": "allow",
+					className: "uy:inline-flex uy:items-baseline",
+					children: [
+						/* @__PURE__ */ s("span", {
+							className: T(),
+							children: i
+						}),
+						x === "required" && b && /* @__PURE__ */ c("span", {
+							className: E(),
+							children: ["*", /* @__PURE__ */ s("span", {
+								className: "uy:sr-only",
+								children: "required"
+							})]
+						}),
+						x === "optional" && !b && /* @__PURE__ */ s("span", {
+							className: D(),
+							children: "(optional)"
+						})
+					]
+				})] })
+			})
+		}), (f || p) && /* @__PURE__ */ c("div", {
+			className: O(),
+			"data-dd-privacy": "allow",
+			children: [typeof f == "string" ? /* @__PURE__ */ s(e, {
+				variant: "bodySmall",
+				color: "content.neutral.low",
+				id: `${g}-helper-text`,
+				className: k(),
+				children: f
+			}) : a(f) && r(f, {
+				"data-id": `${g}-helper-text`,
+				className: k()
+			}), y && (typeof p == "string" ? /* @__PURE__ */ s(e, {
+				variant: "bodySmallStrong",
+				color: "content.form.invalid",
+				id: `${g}-feedback-text`,
+				className: A(),
+				children: p
+			}) : a(p) && r(p, {
+				"data-id": `${g}-feedback-text`,
+				className: A()
+			}))]
+		})]
+	});
+});
+f.displayName = "Checkbox";
+//#endregion
+export { f as Checkbox };

package/dist/esm/core/components/checkbox/Checkbox.variants.js

@@ -0,0 +1,62 @@
+import { uyTv as e } from "@payfit/unity-themes";
+//#region src/core/components/checkbox/Checkbox.variants.ts
+var t = e({
+	slots: {
+		base: [
+			"uy:group uy:inline-flex uy:flex-col",
+			"uy:rounded-md uy:sm:rounded-25",
+			"uy:px-150 uy:sm:px-0 uy:py-125 uy:sm:py-px",
+			"uy:border uy:sm:border-none uy:border-solid uy:border-border-neutral-enabled",
+			"uy:has-data-[focus-visible=\"true\"]:outline-2 uy:has-data-[focus-visible=\"true\"]:outline-utility-focus-ring uy:has-data-[focus-visible=\"true\"]:outline-offset-2",
+			"uy:has-data-[disabled=true]:border-border-neutral-disabled",
+			"uy:has-data-[readonly=true]:border-border-neutral-disabled"
+		],
+		wrapper: [
+			"uy:group uy:sm:rounded-25 uy:leading-none uy:sm:leading-[1lh]",
+			"uy:inline-flex uy:items-start",
+			"uy:typography-body uy:text-content-form-enabled",
+			"uy:data-[disabled=true]:text-content-form-disabled uy:data-[disabled]:cursor-not-allowed",
+			"uy:data-[readonly=true]:cursor-not-allowed uy:data-[readonly=true]:text-content-form-read-only"
+		],
+		label: "uy:ml-75",
+		asterisk: "uy:text-content-danger uy:ml-25",
+		optionalTag: "uy:typography-body uy:leading-1 uy:ml-25",
+		descriptionsContainer: "uy:ml-300 uy:leading-1 uy:inline-flex uy:flex-col",
+		helperText: ["uy:block uy:typography-body-small uy:text-content-neutral-low uy:mt-50"],
+		feedbackText: "uy:typography-body-small-strong uy:text-content-form-invalid uy:mt-50"
+	},
+	variants: {
+		isDisabled: { true: { base: "uy:text-content-form-disabled!" } },
+		isInvalid: { true: {} },
+		isReadOnly: { true: { base: "uy:cursor-not-allowed" } }
+	},
+	defaultVariants: {
+		isDisabled: !1,
+		isInvalid: !1,
+		isReadOnly: !1
+	},
+	compoundVariants: [
+		{
+			isDisabled: !1,
+			isReadOnly: !1,
+			className: { wrapper: "uy:cursor-pointer" }
+		},
+		{
+			isDisabled: !0,
+			isReadOnly: !1,
+			className: { wrapper: "uy:cursor-not-allowed" }
+		},
+		{
+			isDisabled: !1,
+			isReadOnly: !0,
+			className: { wrapper: "uy:cursor-not-allowed" }
+		},
+		{
+			isDisabled: !0,
+			isReadOnly: !0,
+			className: { wrapper: "uy:cursor-not-allowed" }
+		}
+	]
+});
+//#endregion
+export { t as checkbox };

package/dist/esm/core/components/checkbox/CheckboxStandalone.js

@@ -0,0 +1,34 @@
+import { checkbox as e } from "./Checkbox.variants.js";
+import { CheckboxIndicator as t } from "./parts/CheckboxIndicator.js";
+import { forwardRef as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useId as o } from "react-aria/useId";
+import { CheckboxButton as s, CheckboxField as c } from "react-aria-components/Checkbox";
+//#region src/core/components/checkbox/CheckboxStandalone.tsx
+var l = n(({ children: n, ...l }, u) => {
+	let d = o(), { isDisabled: f, isReadOnly: p, isInvalid: m } = l, { base: h, wrapper: g } = e({
+		isDisabled: f,
+		isReadOnly: p,
+		isInvalid: m
+	}), _ = [l["aria-labelledby"], `${d}-label`].filter(Boolean), v = _.length > 0 ? _.join(" ") : void 0;
+	return /* @__PURE__ */ i("div", {
+		className: h(),
+		children: /* @__PURE__ */ i(c, {
+			...l,
+			className: "uy:contents",
+			"aria-labelledby": v,
+			children: /* @__PURE__ */ i(s, {
+				ref: u,
+				className: g(),
+				children: (e) => /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(t, { ...e }), /* @__PURE__ */ i("span", {
+					id: `${d}-label`,
+					className: "uy:sr-only",
+					children: n
+				})] })
+			})
+		})
+	});
+});
+l.displayName = "CheckboxStandalone";
+//#endregion
+export { l as CheckboxStandalone };