@povio/ui 3.4.0-rc.9 → 4.0.0-rc.2

package/dist/Breadcrumbs-UfRbfiqU.js

@@ -0,0 +1,351 @@
+import { t as DropdownMenuDesktop } from "./DropdownMenuDesktop-B0MKN0op.js";
+import { t as ChevronRight } from "./chevron-right-DXbvvsay.js";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { l as $7230ffa83bc0c2cf$export$fabf2dc03a41866e, n as $7230ffa83bc0c2cf$export$29f1550f4b0d4415, r as $7230ffa83bc0c2cf$export$4d86445c2cf5e3, s as $7230ffa83bc0c2cf$export$df3a06d6289f983e } from "./utils-D3gCeElo.js";
+import { p as $263ab7fc0f95ccdb$export$4feb769f8ddf26c5 } from "./Dialog-CLWfxiie.js";
+import { n as $984a1fc08f87e4f3$export$e2509388b49734e7, t as $984a1fc08f87e4f3$export$a6c7ac8248d6e38a } from "./Link-D7QEPw-L.js";
+import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "./Button-CRlZqaJq.js";
+import { t as Tooltip } from "./Tooltip-BNAubrgG.js";
+import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
+import { t as Typography } from "./Typography-AcUd9df8.js";
+import { t as LinkContext } from "./link.context-J7aQtMOr.js";
+import $ahdqC$react, { createContext, forwardRef, useContext, useLayoutEffect, useRef, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { mergeProps } from "react-aria/mergeProps";
+import { CollectionBuilder, createLeafComponent } from "react-aria/CollectionBuilder";
+import { filterDOMProps } from "react-aria/filterDOMProps";
+import { useBreadcrumbs } from "react-aria/useBreadcrumbs";
+import { Collection } from "react-aria/Collection";
+import { CollectionNode } from "react-aria/private/collections/BaseCollection";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region ../../node_modules/.bun/react-aria-components@1.20.0+67f6792bdf102c28/node_modules/react-aria-components/dist/private/Breadcrumbs.mjs
+const $65dbe90f868fa5f4$export$65596d3621b0a4a0 = /*#__PURE__*/ createContext(null);
+const $65dbe90f868fa5f4$export$2dc68d50d56fbbd = /*#__PURE__*/ forwardRef(function Breadcrumbs(props, ref) {
+	[props, ref] = $7230ffa83bc0c2cf$export$29f1550f4b0d4415(props, ref, $65dbe90f868fa5f4$export$65596d3621b0a4a0);
+	let { CollectionRoot } = useContext($263ab7fc0f95ccdb$export$4feb769f8ddf26c5);
+	let { navProps } = useBreadcrumbs(props);
+	let DOMProps = filterDOMProps(props, {
+		global: true,
+		labelable: true
+	});
+	return /*#__PURE__*/ $ahdqC$react.createElement(CollectionBuilder, { content: /*#__PURE__*/ $ahdqC$react.createElement(Collection, props) }, (collection) => /*#__PURE__*/ $ahdqC$react.createElement($7230ffa83bc0c2cf$export$df3a06d6289f983e.ol, {
+		render: props.render,
+		ref,
+		...mergeProps(DOMProps, navProps),
+		slot: props.slot || void 0,
+		style: props.style,
+		className: props.className ?? "react-aria-Breadcrumbs"
+	}, /*#__PURE__*/ $ahdqC$react.createElement($65dbe90f868fa5f4$export$65596d3621b0a4a0.Provider, { value: props }, /*#__PURE__*/ $ahdqC$react.createElement(CollectionRoot, { collection }))));
+});
+var $65dbe90f868fa5f4$var$BreadcrumbNode = class extends CollectionNode {
+	static {
+		this.type = "item";
+	}
+};
+const $65dbe90f868fa5f4$export$dabcc1ec9dd9d1cc = /*#__PURE__*/ createLeafComponent($65dbe90f868fa5f4$var$BreadcrumbNode, function Breadcrumb(props, ref, node) {
+	let isCurrent = node.nextKey == null;
+	let { isDisabled, onAction } = $7230ffa83bc0c2cf$export$fabf2dc03a41866e($65dbe90f868fa5f4$export$65596d3621b0a4a0);
+	let linkProps = {
+		"aria-current": isCurrent ? "page" : null,
+		isDisabled: isDisabled || isCurrent,
+		onPress: () => onAction?.(node.key)
+	};
+	let renderProps = $7230ffa83bc0c2cf$export$4d86445c2cf5e3({
+		...node.props,
+		children: node.rendered,
+		values: {
+			isDisabled: isDisabled || isCurrent,
+			isCurrent
+		},
+		defaultClassName: "react-aria-Breadcrumb"
+	});
+	let DOMProps = filterDOMProps(props, {
+		global: true,
+		labelable: true
+	});
+	delete DOMProps.id;
+	return /*#__PURE__*/ $ahdqC$react.createElement($7230ffa83bc0c2cf$export$df3a06d6289f983e.li, {
+		...DOMProps,
+		...renderProps,
+		ref,
+		"data-disabled": isDisabled || isCurrent || void 0,
+		"data-current": isCurrent || void 0
+	}, /*#__PURE__*/ $ahdqC$react.createElement($984a1fc08f87e4f3$export$e2509388b49734e7.Provider, { value: linkProps }, renderProps.children));
+});
+//#endregion
+//#region src/components/Breadcrumbs/breadcrumbs.cva.ts
+const breadcrumbsDefinition = UIOverrides.defineConfig({ base: ["flex items-center gap-breadcrumbs-gap-segment-to-segment"] });
+const breadcrumbSegmentDefinition = UIOverrides.defineConfig({ base: ["flex items-center gap-breadcrumbs-gap-segment-to-segment"] });
+const breadcrumbChevronDefinition = UIOverrides.defineConfig({ base: ["size-6 shrink-0 text-interactive-text-secondary-idle"] });
+const breadcrumbIconDefinition = UIOverrides.defineConfig({ base: ["size-4 shrink-0"] });
+const breadcrumbItemDefinition = UIOverrides.defineConfig({
+	base: ["inline-flex cursor-pointer items-center gap-breadcrumbs-gap-icon-to-text whitespace-nowrap font-inter font-medium text-label-3 no-underline"],
+	config: {
+		variants: {
+			isCurrent: {
+				true: "text-interactive-text-primary-idle",
+				false: "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover"
+			},
+			isEllipsis: {
+				true: "hover:text-interactive-text-primary-hover!",
+				false: ""
+			}
+		},
+		defaultVariants: {
+			isCurrent: false,
+			isEllipsis: false
+		}
+	}
+});
+//#endregion
+//#region src/components/Breadcrumbs/Breadcrumbs.tsx
+const Breadcrumbs = (t0) => {
+	const $ = c(58);
+	const { items, className, onAction, iconOnly: t1 } = t0;
+	const iconOnly = t1 === void 0 ? false : t1;
+	const breadcrumbsCva = UIOverrides.useCva("breadcrumbs.cva", breadcrumbsDefinition);
+	const breadcrumbItem = UIOverrides.useCva("breadcrumbs.itemCva", breadcrumbItemDefinition);
+	const breadcrumbSegmentCva = UIOverrides.useCva("breadcrumbs.segmentCva", breadcrumbSegmentDefinition);
+	const breadcrumbChevronCva = UIOverrides.useCva("breadcrumbs.chevronCva", breadcrumbChevronDefinition);
+	const breadcrumbIconCva = UIOverrides.useCva("breadcrumbs.iconCva", breadcrumbIconDefinition);
+	const containerRef = useRef(null);
+	const [isOverflowing, setIsOverflowing] = useState(items.length <= 2 ? false : null);
+	let t2;
+	if ($[0] !== items.length) {
+		t2 = () => {
+			if (items.length <= 2) {
+				setIsOverflowing(false);
+				return;
+			}
+			const container = containerRef.current;
+			if (!container) return;
+			const resizeObserver = new ResizeObserver(() => {
+				setIsOverflowing(container.scrollWidth > container.clientWidth);
+			});
+			resizeObserver.observe(container);
+			return () => resizeObserver.disconnect();
+		};
+		$[0] = items.length;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== items) {
+		t3 = [items];
+		$[2] = items;
+		$[3] = t3;
+	} else t3 = $[3];
+	useLayoutEffect(t2, t3);
+	const isReady = isOverflowing !== null;
+	const hiddenItems = items.length > 2 ? items.slice(1, -1) : [];
+	const firstItem = items[0];
+	const lastItem = items[items.length - 1];
+	const LinkComponent = LinkContext.useLinkContext()?.LinkComponent ?? $984a1fc08f87e4f3$export$a6c7ac8248d6e38a;
+	let t4;
+	if ($[4] !== LinkComponent || $[5] !== breadcrumbIconCva || $[6] !== breadcrumbItem) {
+		t4 = (item, isCurrent, iconOnly_0) => /* @__PURE__ */ jsxs(LinkComponent, {
+			...item.link,
+			className: breadcrumbItem({ isCurrent }),
+			children: [item.icon && /* @__PURE__ */ jsx(item.icon, {
+				className: breadcrumbIconCva({}),
+				"aria-label": item.label
+			}), !iconOnly_0 && /* @__PURE__ */ jsx(Typography, {
+				variant: "default",
+				size: "label-3",
+				children: item.label
+			})]
+		});
+		$[4] = LinkComponent;
+		$[5] = breadcrumbIconCva;
+		$[6] = breadcrumbItem;
+		$[7] = t4;
+	} else t4 = $[7];
+	const renderBreadcrumbLink = t4;
+	if (isOverflowing === true && items.length > 2) {
+		const menuItems = hiddenItems.map(_temp);
+		const renderEllipsis = () => /* @__PURE__ */ jsx(DropdownMenuDesktop, {
+			trigger: /* @__PURE__ */ jsx(Tooltip, {
+				text: hiddenItems.map(_temp2).join(", "),
+				children: /* @__PURE__ */ jsx($7705c033048f6da7$export$353f5b6fc5456de1, {
+					"aria-label": "Show hidden breadcrumbs",
+					className: breadcrumbItem({
+						isCurrent: false,
+						isEllipsis: true
+					}),
+					children: /* @__PURE__ */ jsx(Typography, {
+						variant: "default",
+						size: "label-3",
+						children: "..."
+					})
+				})
+			}),
+			items: menuItems,
+			onAction: onAction ? (key) => onAction(key) : void 0
+		});
+		let t5;
+		if ($[8] !== breadcrumbsCva || $[9] !== className) {
+			t5 = clsx(breadcrumbsCva({}), className);
+			$[8] = breadcrumbsCva;
+			$[9] = className;
+			$[10] = t5;
+		} else t5 = $[10];
+		const t6 = firstItem.id;
+		let t7;
+		if ($[11] !== breadcrumbSegmentCva) {
+			t7 = breadcrumbSegmentCva({});
+			$[11] = breadcrumbSegmentCva;
+			$[12] = t7;
+		} else t7 = $[12];
+		let t8;
+		if ($[13] !== firstItem || $[14] !== iconOnly || $[15] !== renderBreadcrumbLink) {
+			t8 = renderBreadcrumbLink(firstItem, false, iconOnly);
+			$[13] = firstItem;
+			$[14] = iconOnly;
+			$[15] = renderBreadcrumbLink;
+			$[16] = t8;
+		} else t8 = $[16];
+		let t9;
+		if ($[17] !== breadcrumbChevronCva) {
+			t9 = breadcrumbChevronCva({});
+			$[17] = breadcrumbChevronCva;
+			$[18] = t9;
+		} else t9 = $[18];
+		let t10;
+		if ($[19] !== t9) {
+			t10 = /* @__PURE__ */ jsx(ChevronRight, { className: t9 });
+			$[19] = t9;
+			$[20] = t10;
+		} else t10 = $[20];
+		let t11;
+		if ($[21] !== firstItem.id || $[22] !== t10 || $[23] !== t7 || $[24] !== t8) {
+			t11 = /* @__PURE__ */ jsxs($65dbe90f868fa5f4$export$dabcc1ec9dd9d1cc, {
+				id: t6,
+				className: t7,
+				children: [t8, t10]
+			});
+			$[21] = firstItem.id;
+			$[22] = t10;
+			$[23] = t7;
+			$[24] = t8;
+			$[25] = t11;
+		} else t11 = $[25];
+		let t12;
+		if ($[26] !== breadcrumbSegmentCva) {
+			t12 = breadcrumbSegmentCva({});
+			$[26] = breadcrumbSegmentCva;
+			$[27] = t12;
+		} else t12 = $[27];
+		const t13 = renderEllipsis();
+		let t14;
+		if ($[28] !== breadcrumbChevronCva) {
+			t14 = breadcrumbChevronCva({});
+			$[28] = breadcrumbChevronCva;
+			$[29] = t14;
+		} else t14 = $[29];
+		let t15;
+		if ($[30] !== t14) {
+			t15 = /* @__PURE__ */ jsx(ChevronRight, { className: t14 });
+			$[30] = t14;
+			$[31] = t15;
+		} else t15 = $[31];
+		const t16 = lastItem.id;
+		let t17;
+		if ($[32] !== breadcrumbSegmentCva) {
+			t17 = breadcrumbSegmentCva({});
+			$[32] = breadcrumbSegmentCva;
+			$[33] = t17;
+		} else t17 = $[33];
+		let t18;
+		if ($[34] !== lastItem || $[35] !== renderBreadcrumbLink) {
+			t18 = renderBreadcrumbLink(lastItem, true);
+			$[34] = lastItem;
+			$[35] = renderBreadcrumbLink;
+			$[36] = t18;
+		} else t18 = $[36];
+		let t19;
+		if ($[37] !== lastItem.id || $[38] !== t17 || $[39] !== t18) {
+			t19 = /* @__PURE__ */ jsx($65dbe90f868fa5f4$export$dabcc1ec9dd9d1cc, {
+				id: t16,
+				className: t17,
+				children: t18
+			});
+			$[37] = lastItem.id;
+			$[38] = t17;
+			$[39] = t18;
+			$[40] = t19;
+		} else t19 = $[40];
+		return /* @__PURE__ */ jsxs($65dbe90f868fa5f4$export$2dc68d50d56fbbd, {
+			onAction,
+			className: t5,
+			children: [
+				t11,
+				/* @__PURE__ */ jsxs($65dbe90f868fa5f4$export$dabcc1ec9dd9d1cc, {
+					id: "ellipsis",
+					className: t12,
+					children: [t13, t15]
+				}),
+				t19
+			]
+		});
+	}
+	let t5;
+	if ($[41] !== breadcrumbsCva || $[42] !== className) {
+		t5 = clsx(breadcrumbsCva({}), className);
+		$[41] = breadcrumbsCva;
+		$[42] = className;
+		$[43] = t5;
+	} else t5 = $[43];
+	const t6 = isReady ? "visible" : "hidden";
+	let t7;
+	if ($[44] !== t6) {
+		t7 = { visibility: t6 };
+		$[44] = t6;
+		$[45] = t7;
+	} else t7 = $[45];
+	let t8;
+	if ($[46] !== breadcrumbChevronCva || $[47] !== breadcrumbSegmentCva || $[48] !== iconOnly || $[49] !== items[0] || $[50] !== renderBreadcrumbLink) {
+		t8 = (item_1) => /* @__PURE__ */ jsx($65dbe90f868fa5f4$export$dabcc1ec9dd9d1cc, {
+			id: item_1.id,
+			className: breadcrumbSegmentCva({}),
+			children: (t9) => {
+				const { isCurrent: isCurrent_0 } = t9;
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [renderBreadcrumbLink(item_1, isCurrent_0, iconOnly && item_1 === items[0]), !isCurrent_0 && /* @__PURE__ */ jsx(ChevronRight, { className: breadcrumbChevronCva({}) })] });
+			}
+		});
+		$[46] = breadcrumbChevronCva;
+		$[47] = breadcrumbSegmentCva;
+		$[48] = iconOnly;
+		$[49] = items[0];
+		$[50] = renderBreadcrumbLink;
+		$[51] = t8;
+	} else t8 = $[51];
+	let t9;
+	if ($[52] !== items || $[53] !== onAction || $[54] !== t5 || $[55] !== t7 || $[56] !== t8) {
+		t9 = /* @__PURE__ */ jsx($65dbe90f868fa5f4$export$2dc68d50d56fbbd, {
+			ref: containerRef,
+			items,
+			onAction,
+			className: t5,
+			style: t7,
+			children: t8
+		});
+		$[52] = items;
+		$[53] = onAction;
+		$[54] = t5;
+		$[55] = t7;
+		$[56] = t8;
+		$[57] = t9;
+	} else t9 = $[57];
+	return t9;
+};
+function _temp(item_0) {
+	return {
+		id: item_0.id,
+		label: item_0.label,
+		link: item_0.link
+	};
+}
+function _temp2(i) {
+	return i.label;
+}
+//#endregion
+export { breadcrumbSegmentDefinition as a, breadcrumbItemDefinition as i, breadcrumbChevronDefinition as n, breadcrumbsDefinition as o, breadcrumbIconDefinition as r, Breadcrumbs as t };

package/dist/Button-CRlZqaJq.js

@@ -0,0 +1,89 @@
+import { n as $7230ffa83bc0c2cf$export$29f1550f4b0d4415, r as $7230ffa83bc0c2cf$export$4d86445c2cf5e3, s as $7230ffa83bc0c2cf$export$df3a06d6289f983e } from "./utils-D3gCeElo.js";
+import $ahdqC$react, { createContext, useEffect, useRef } from "react";
+import { mergeProps } from "react-aria/mergeProps";
+import { filterDOMProps } from "react-aria/filterDOMProps";
+import { useFocusRing } from "react-aria/useFocusRing";
+import { useHover } from "react-aria/useHover";
+import { createHideableComponent } from "react-aria/private/collections/Hidden";
+import "react-aria/useProgressBar";
+import "react-stately/private/utils/number";
+import { announce } from "react-aria/private/live-announcer/LiveAnnouncer";
+import { useButton } from "react-aria/useButton";
+import { useId as useId$1 } from "react-aria/useId";
+//#region ../../node_modules/.bun/react-aria-components@1.20.0+67f6792bdf102c28/node_modules/react-aria-components/dist/private/ProgressBar.mjs
+const $6c0095e7e99364f2$export$e9f3bf65a26ce129 = /*#__PURE__*/ createContext(null);
+//#endregion
+//#region ../../node_modules/.bun/react-aria-components@1.20.0+67f6792bdf102c28/node_modules/react-aria-components/dist/private/Button.mjs
+const $7705c033048f6da7$export$24d547caef80ccd1 = /*#__PURE__*/ createContext({});
+const $7705c033048f6da7$export$353f5b6fc5456de1 = /*#__PURE__*/ createHideableComponent(function Button(props, ref) {
+	[props, ref] = $7230ffa83bc0c2cf$export$29f1550f4b0d4415(props, ref, $7705c033048f6da7$export$24d547caef80ccd1);
+	let ctx = props;
+	let { isPending } = ctx;
+	let { buttonProps, isPressed } = useButton(props, ref);
+	buttonProps = $7705c033048f6da7$var$useDisableInteractions(buttonProps, isPending);
+	let { focusProps, isFocused, isFocusVisible } = useFocusRing(props);
+	let { hoverProps, isHovered } = useHover({
+		...props,
+		isDisabled: props.isDisabled || isPending
+	});
+	let renderValues = {
+		isHovered,
+		isPressed: (ctx.isPressed || isPressed) && !isPending,
+		isFocused,
+		isFocusVisible,
+		isDisabled: props.isDisabled || false,
+		isPending: isPending ?? false
+	};
+	let renderProps = $7230ffa83bc0c2cf$export$4d86445c2cf5e3({
+		...props,
+		values: renderValues,
+		defaultClassName: "react-aria-Button"
+	});
+	let buttonId = useId$1(buttonProps.id);
+	let progressId = useId$1();
+	let ariaLabelledby = buttonProps["aria-labelledby"];
+	if (isPending) {
+		if (ariaLabelledby) ariaLabelledby = `${ariaLabelledby} ${progressId}`;
+		else if (buttonProps["aria-label"]) ariaLabelledby = `${buttonId} ${progressId}`;
+	}
+	let wasPending = useRef(isPending);
+	useEffect(() => {
+		let message = { "aria-labelledby": ariaLabelledby || buttonId };
+		if (!wasPending.current && isFocused && isPending) announce(message, "assertive");
+		else if (wasPending.current && isFocused && !isPending) announce(message, "assertive");
+		wasPending.current = isPending;
+	}, [
+		isPending,
+		isFocused,
+		ariaLabelledby,
+		buttonId
+	]);
+	let DOMProps = filterDOMProps(props, { global: true });
+	delete DOMProps.onClick;
+	return /*#__PURE__*/ $ahdqC$react.createElement($7230ffa83bc0c2cf$export$df3a06d6289f983e.button, {
+		...mergeProps(DOMProps, renderProps, buttonProps, focusProps, hoverProps),
+		type: buttonProps.type === "submit" && isPending ? "button" : buttonProps.type,
+		id: buttonId,
+		ref,
+		"aria-labelledby": ariaLabelledby,
+		slot: props.slot || void 0,
+		"aria-disabled": isPending ? "true" : buttonProps["aria-disabled"],
+		"data-disabled": props.isDisabled || void 0,
+		"data-pressed": renderValues.isPressed || void 0,
+		"data-hovered": isHovered || void 0,
+		"data-focused": isFocused || void 0,
+		"data-pending": isPending || void 0,
+		"data-focus-visible": isFocusVisible || void 0
+	}, /*#__PURE__*/ $ahdqC$react.createElement($6c0095e7e99364f2$export$e9f3bf65a26ce129.Provider, { value: { id: progressId } }, renderProps.children));
+});
+const $7705c033048f6da7$var$PRESERVED_EVENT_PATTERN = /Focus|Blur|Hover|Pointer(Enter|Leave|Over|Out)|Mouse(Enter|Leave|Over|Out)/;
+function $7705c033048f6da7$var$useDisableInteractions(props, isPending) {
+	if (isPending) {
+		for (const key in props) if (key.startsWith("on") && !$7705c033048f6da7$var$PRESERVED_EVENT_PATTERN.test(key)) props[key] = void 0;
+		props.href = void 0;
+		props.target = void 0;
+	}
+	return props;
+}
+//#endregion
+export { $7705c033048f6da7$export$353f5b6fc5456de1 as n, $7705c033048f6da7$export$24d547caef80ccd1 as t };