@povio/ui 3.4.0-rc.15 → 3.4.0-rc.17

package/dist/components/inputs/shared/label.cva.js

@@ -1,7 +1,7 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { compoundMapper } from "../../../utils/compoundMapper.js";
 //#region src/components/inputs/shared/label.cva.ts
-var labelDefinition = UIOverrides.defineConfig({
+const labelDefinition = UIOverrides.defineConfig({
 	base: [""],
 	config: {
 		variants: { as: {
@@ -28,7 +28,7 @@ var labelDefinition = UIOverrides.defineConfig({
 		defaultVariants: { as: "default" }
 	}
 });
-var labelTypography = compoundMapper({
+const labelTypography = compoundMapper({
 	compoundVariants: [
 		{
 			as: "default",

package/dist/components/inputs/shared/tooltipWrapper.cva.d.ts

@@ -1,8 +1,11 @@
-import { UIOverrides } from '../../../config/uiOverrides.context';
-export declare const tooltipWrapperTriggerDefinition: {
-    base: string[];
-    config?: import("../../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+import { StyleMergeUtils } from "../../../utils/style-merge.util.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+//#region src/components/inputs/shared/tooltipWrapper.cva.d.ts
+declare const tooltipWrapperTriggerDefinition: {
+  base: string[];
+  config?: StyleMergeUtils.Config<Record<never, never>>;
 };
-export type TooltipWrapperTriggerConfig = NonNullable<typeof tooltipWrapperTriggerDefinition.config>;
-export interface TooltipWrapperTriggerVariantProps extends UIOverrides.VariantProps<TooltipWrapperTriggerConfig> {
-}
+type TooltipWrapperTriggerConfig = NonNullable<typeof tooltipWrapperTriggerDefinition.config>;
+interface TooltipWrapperTriggerVariantProps extends UIOverrides.VariantProps<TooltipWrapperTriggerConfig> {}
+//#endregion
+export { TooltipWrapperTriggerConfig, TooltipWrapperTriggerVariantProps, tooltipWrapperTriggerDefinition };

package/dist/components/inputs/shared/tooltipWrapper.cva.js

@@ -1,5 +1,5 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 //#region src/components/inputs/shared/tooltipWrapper.cva.ts
-var tooltipWrapperTriggerDefinition = UIOverrides.defineConfig({ base: ["inline-flex"] });
+const tooltipWrapperTriggerDefinition = UIOverrides.defineConfig({ base: ["inline-flex"] });
 //#endregion
 export { tooltipWrapperTriggerDefinition };

package/dist/components/inputs/shared/useFieldAccessibility.js

@@ -0,0 +1,19 @@
+import { useId } from "react";
+//#region src/components/inputs/shared/useFieldAccessibility.ts
+const joinIds = (...ids) => {
+	const uniqueIds = [...new Set(ids.flatMap((id) => id?.split(/\s+/u).filter(Boolean) ?? []))];
+	return uniqueIds.length > 0 ? uniqueIds.join(" ") : void 0;
+};
+const useFieldAccessibility = ({ describedBy, error, helperText }) => {
+	const generatedHelperTextId = useId();
+	const generatedErrorMessageId = useId();
+	const helperTextId = helperText ? `field-helper-${generatedHelperTextId}` : void 0;
+	const errorMessageId = error ? `field-error-${generatedErrorMessageId}` : void 0;
+	return {
+		describedBy: joinIds(describedBy, helperTextId, errorMessageId),
+		errorMessageId,
+		helperTextId
+	};
+};
+//#endregion
+export { useFieldAccessibility };

package/dist/components/inputs/shared/useStaticInputHandoff.js

@@ -1,89 +1,57 @@
 import { useLayoutEffect, useRef, useState } from "react";
-import { c } from "react/compiler-runtime";
 //#region src/components/inputs/shared/useStaticInputHandoff.ts
-var useStaticInputHandoff = (t0) => {
-	const $ = c(18);
-	const { inputRef, renderInput, setRenderInput, getFocusTarget, getPressTarget } = t0;
+const useStaticInputHandoff = ({ inputRef, renderInput, setRenderInput, getFocusTarget, getPressTarget }) => {
 	const [shouldFocus, setShouldFocus] = useState(false);
 	const pendingStaticChangeRef = useRef(null);
 	const pendingStaticFocusTargetRef = useRef(null);
 	const resolvedFocusTargetRef = useRef(null);
 	const shouldReplayStaticPressRef = useRef(false);
 	const hoverHandoffFrameRef = useRef(null);
-	let t1;
-	let t2;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = () => () => {
-			if (hoverHandoffFrameRef.current !== null) cancelAnimationFrame(hoverHandoffFrameRef.current);
+	useLayoutEffect(() => () => {
+		if (hoverHandoffFrameRef.current !== null) cancelAnimationFrame(hoverHandoffFrameRef.current);
+	}, []);
+	useLayoutEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		const focusRealInput = (replayPendingInteraction) => {
+			const input = inputRef.current;
+			const pendingValue = pendingStaticChangeRef.current;
+			let focusTarget = null;
+			if (!replayPendingInteraction && resolvedFocusTargetRef.current) focusTarget = resolvedFocusTargetRef.current;
+			else if (input) focusTarget = getFocusTarget?.(input, pendingStaticFocusTargetRef.current) ?? input;
+			if (replayPendingInteraction) resolvedFocusTargetRef.current = focusTarget;
+			if (replayPendingInteraction && focusTarget instanceof HTMLInputElement && pendingValue != null) {
+				(Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call(focusTarget, pendingValue);
+				focusTarget.dispatchEvent(new Event("input", { bubbles: true }));
+				pendingStaticChangeRef.current = null;
+			}
+			focusTarget?.focus();
+			if (!replayPendingInteraction) {
+				pendingStaticFocusTargetRef.current = null;
+				resolvedFocusTargetRef.current = null;
+			}
+			if (replayPendingInteraction && shouldReplayStaticPressRef.current) {
+				shouldReplayStaticPressRef.current = false;
+				(input ? getPressTarget?.(input) ?? focusTarget : focusTarget)?.click();
+			}
 		};
-		t2 = [];
-		$[0] = t1;
-		$[1] = t2;
-	} else {
-		t1 = $[0];
-		t2 = $[1];
-	}
-	useLayoutEffect(t1, t2);
-	let t3;
-	let t4;
-	if ($[2] !== getFocusTarget || $[3] !== getPressTarget || $[4] !== inputRef || $[5] !== renderInput || $[6] !== shouldFocus) {
-		t3 = () => {
-			if (!renderInput || !shouldFocus) return;
-			const focusRealInput = (replayPendingInteraction) => {
-				const input = inputRef.current;
-				const pendingValue = pendingStaticChangeRef.current;
-				let focusTarget = null;
-				if (!replayPendingInteraction && resolvedFocusTargetRef.current) focusTarget = resolvedFocusTargetRef.current;
-				else if (input) focusTarget = getFocusTarget?.(input, pendingStaticFocusTargetRef.current) ?? input;
-				if (replayPendingInteraction) resolvedFocusTargetRef.current = focusTarget;
-				if (replayPendingInteraction && focusTarget instanceof HTMLInputElement && pendingValue != null) {
-					(Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call(focusTarget, pendingValue);
-					focusTarget.dispatchEvent(new Event("input", { bubbles: true }));
-					pendingStaticChangeRef.current = null;
-				}
-				focusTarget?.focus();
-				if (!replayPendingInteraction) {
-					pendingStaticFocusTargetRef.current = null;
-					resolvedFocusTargetRef.current = null;
-				}
-				if (replayPendingInteraction && shouldReplayStaticPressRef.current) {
-					shouldReplayStaticPressRef.current = false;
-					(input ? getPressTarget?.(input) ?? focusTarget : focusTarget)?.click();
-				}
-			};
-			focusRealInput(true);
-			const frame = requestAnimationFrame(() => {
-				focusRealInput(false);
-				setShouldFocus(false);
-			});
-			return () => {
-				cancelAnimationFrame(frame);
-			};
+		focusRealInput(true);
+		const frame = requestAnimationFrame(() => {
+			focusRealInput(false);
+			setShouldFocus(false);
+		});
+		return () => {
+			cancelAnimationFrame(frame);
 		};
-		t4 = [
-			getFocusTarget,
-			getPressTarget,
-			inputRef,
-			renderInput,
-			shouldFocus
-		];
-		$[2] = getFocusTarget;
-		$[3] = getPressTarget;
-		$[4] = inputRef;
-		$[5] = renderInput;
-		$[6] = shouldFocus;
-		$[7] = t3;
-		$[8] = t4;
-	} else {
-		t3 = $[7];
-		t4 = $[8];
-	}
-	useLayoutEffect(t3, t4);
-	let t5;
-	let t6;
-	let t7;
-	if ($[9] !== setRenderInput) {
-		t5 = (focus, target) => {
+	}, [
+		getFocusTarget,
+		getPressTarget,
+		inputRef,
+		renderInput,
+		shouldFocus
+	]);
+	return {
+		shouldFocus,
+		renderRealInput: (focus, target) => {
 			pendingStaticFocusTargetRef.current = target ?? null;
 			setShouldFocus(focus);
 			if (focus) {
@@ -98,41 +66,18 @@ var useStaticInputHandoff = (t0) => {
 				hoverHandoffFrameRef.current = null;
 				setRenderInput(true);
 			});
-		};
-		t6 = (value) => {
+		},
+		replayStaticInputChange: (value) => {
 			pendingStaticChangeRef.current = value;
 			setShouldFocus(true);
 			setRenderInput(true);
-		};
-		t7 = () => {
+		},
+		replayStaticInputPress: () => {
 			shouldReplayStaticPressRef.current = true;
 			setShouldFocus(true);
 			setRenderInput(true);
-		};
-		$[9] = setRenderInput;
-		$[10] = t5;
-		$[11] = t6;
-		$[12] = t7;
-	} else {
-		t5 = $[10];
-		t6 = $[11];
-		t7 = $[12];
-	}
-	let t8;
-	if ($[13] !== shouldFocus || $[14] !== t5 || $[15] !== t6 || $[16] !== t7) {
-		t8 = {
-			shouldFocus,
-			renderRealInput: t5,
-			replayStaticInputChange: t6,
-			replayStaticInputPress: t7
-		};
-		$[13] = shouldFocus;
-		$[14] = t5;
-		$[15] = t6;
-		$[16] = t7;
-		$[17] = t8;
-	} else t8 = $[17];
-	return t8;
+		}
+	};
 };
 //#endregion
 export { useStaticInputHandoff };

package/dist/components/link.d.ts

@@ -0,0 +1,11 @@
+import { LinkVariantProps } from "./text/Link/link.cva.js";
+import { PropsWithChildren } from "react";
+import { LinkProps as LinkProps$1 } from "react-aria-components";
+//#region src/components/text/Link/Link.d.ts
+interface LinkNavigationProps extends LinkProps$1 {}
+interface LinkProps extends PropsWithChildren<LinkNavigationProps>, LinkVariantProps {
+  className?: string;
+}
+declare const Link: ({ variant, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Link, LinkNavigationProps, LinkProps };

package/dist/components/{text/Link/Link.js → link.js}

@@ -1,16 +1,16 @@
-import { UIOverrides } from "../../../config/uiOverrides.context.js";
-import { LinkContext } from "../../../config/link.context.js";
-import { linkDefinition } from "./link.cva.js";
-import { Link } from "react-aria-components";
+import { UIOverrides } from "../config/uiOverrides.context.js";
+import { LinkContext } from "../config/link.context.js";
+import { linkDefinition } from "./text/Link/link.cva.js";
 import { c } from "react/compiler-runtime";
+import { Link as Link$1 } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/text/Link/Link.tsx
-var Link$1 = (t0) => {
+const Link = (t0) => {
 	const $ = c(4);
 	const { variant, ...props } = t0;
 	const linkContext = LinkContext.useLinkContext();
 	const linkCva = UIOverrides.useCva("link.cva", linkDefinition);
-	const LinkComponent = linkContext?.LinkComponent ?? Link;
+	const LinkComponent = linkContext?.LinkComponent ?? Link$1;
 	if (!props.to && props.href) props.to = props.href;
 	const t1 = linkCva({
 		variant,
@@ -30,4 +30,4 @@ var Link$1 = (t0) => {
 	return t2;
 };
 //#endregion
-export { Link$1 as Link };
+export { Link };

package/dist/components/loader.d.ts

@@ -0,0 +1,7 @@
+import { LoaderVariantProps } from "./status/Loader/loader.cva.js";
+import { SVGProps } from "react";
+//#region src/components/status/Loader/Loader.d.ts
+interface LoaderProps extends LoaderVariantProps, SVGProps<SVGSVGElement> {}
+declare const Loader: ({ size, className, ...props }: Omit<LoaderProps, "color">) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Loader, LoaderProps };

package/dist/components/{status/Loader/Loader.js → loader.js}

@@ -1,8 +1,8 @@
-import { loader, loaderWrapper } from "./loader.cva.js";
+import { loader, loaderWrapper } from "./status/Loader/loader.cva.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/status/Loader/Loader.tsx
-var Loader = (t0) => {
+const Loader = (t0) => {
 	const $ = c(18);
 	let className;
 	let props;

package/dist/components/menu.d.ts

@@ -0,0 +1,23 @@
+import { BottomSheetProps } from "./bottom-sheet.js";
+import { MenuCvaVariantProps, MenuItemVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps } from "./Menu/menu.cva.js";
+import { ReactElement } from "react";
+import { Key, MenuItemProps } from "react-aria-components";
+import { Placement } from "react-aria";
+//#region src/components/Menu/Menu.d.ts
+interface MenuItem extends Omit<MenuItemProps, "aria-label" | "textValue" | "children">, MenuItemVariantProps, MenuCvaVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps {
+  label: string;
+  content?: string | ReactElement;
+  children?: MenuItem[];
+}
+type MenuBottomSheetProps = Partial<Omit<BottomSheetProps, "children" | "isOpen" | "onOpenChange" | "trigger">>;
+interface MenuProps {
+  trigger: ReactElement;
+  items: MenuItem[];
+  closeDelay?: number;
+  placement?: Placement;
+  onAction?: (key: Key, e: any) => void;
+  bottomSheetProps?: MenuBottomSheetProps;
+}
+declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Menu, MenuItem, MenuProps };

package/dist/components/{Menu/Menu.js → menu.js}

@@ -1,10 +1,10 @@
-import { MenuDesktop } from "./MenuDesktop.js";
-import { MenuMobile } from "./MenuMobile.js";
-import { useBreakpoint } from "../../hooks/useBreakpoint.js";
+import { MenuDesktop } from "./Menu/MenuDesktop.js";
+import { MenuMobile } from "./Menu/MenuMobile.js";
+import { useBreakpoint } from "../hooks/useBreakpoint.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Menu/Menu.tsx
-var Menu = (props) => {
+const Menu = (props) => {
 	const $ = c(4);
 	if (useBreakpoint("md")) {
 		let t0;

package/dist/components/modal.d.ts

@@ -0,0 +1,2 @@
+import { Modal, ModalProps } from "./overlays/Modal/Modal.js";
+export { Modal, type ModalProps };

package/dist/components/modal.js

@@ -0,0 +1,2 @@
+import { Modal } from "./overlays/Modal/Modal.js";
+export { Modal };

package/dist/components/navigation/Accordion/AccordionItem.js

@@ -1,11 +1,16 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
-import { Typography } from "../../text/Typography/Typography.js";
+import { Typography } from "../../typography.js";
 import { accordionChevronDefinition, accordionHeadingDefinition, accordionHeadingSubtitleDefinition, accordionHeadingTitleDefinition, accordionIconDefinition, accordionItemDefinition, accordionPanelContentDefinition, accordionPanelDefinition, accordionTriggerDefinition } from "./accordion.cva.js";
 import { ChevronDown } from "lucide-react";
+import { c } from "react/compiler-runtime";
 import { Button, Disclosure, DisclosurePanel, Heading } from "react-aria-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/navigation/Accordion/AccordionItem.tsx
-var AccordionItem = ({ id, disabled, heading, subheading, children, icon: Icon, variant = "filled", actionPosition = "right", isSingle }) => {
+const AccordionItem = (t0) => {
+	const $ = c(25);
+	const { id, disabled, heading, subheading, children, icon: Icon, variant: t1, actionPosition: t2, isSingle } = t0;
+	const variant = t1 === void 0 ? "filled" : t1;
+	const actionPosition = t2 === void 0 ? "right" : t2;
 	const itemCva = UIOverrides.useCva("accordion.itemCva", accordionItemDefinition);
 	const triggerCva = UIOverrides.useCva("accordion.triggerCva", accordionTriggerDefinition);
 	const headingCva = UIOverrides.useCva("accordion.headingCva", accordionHeadingDefinition);
@@ -15,49 +20,89 @@ var AccordionItem = ({ id, disabled, heading, subheading, children, icon: Icon,
 	const iconCva = UIOverrides.useCva("accordion.iconCva", accordionIconDefinition);
 	const panelCva = UIOverrides.useCva("accordion.panelCva", accordionPanelDefinition);
 	const panelContentCva = UIOverrides.useCva("accordion.panelContentCva", accordionPanelContentDefinition);
-	return /* @__PURE__ */ jsx(Disclosure, {
-		id,
-		className: itemCva({
+	let t3;
+	if ($[0] !== isSingle || $[1] !== itemCva || $[2] !== variant) {
+		t3 = itemCva({
 			variant,
 			singleItem: isSingle
-		}),
-		isDisabled: disabled,
-		children: ({ isExpanded }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, { children: /* @__PURE__ */ jsxs(Button, {
-			slot: "trigger",
-			className: triggerCva({
-				variant,
-				actionPosition,
-				disabled
-			}),
-			children: [/* @__PURE__ */ jsx("div", {
-				className: headingCva({}),
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "flex flex-1 items-center gap-accordion-gap-icon-to-text",
-					children: [
-						Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({}) }),
-						/* @__PURE__ */ jsx(Typography, {
-							size: "label-2",
-							variant: "default",
-							className: headingTitleCva({}),
-							children: heading
-						}),
-						subheading && /* @__PURE__ */ jsx(Typography, {
-							size: "label-3",
-							variant: "default",
-							className: headingSubtitleCva({}),
-							children: subheading
-						})
-					]
+		});
+		$[0] = isSingle;
+		$[1] = itemCva;
+		$[2] = variant;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== Icon || $[5] !== actionPosition || $[6] !== chevronCva || $[7] !== children || $[8] !== disabled || $[9] !== heading || $[10] !== headingCva || $[11] !== headingSubtitleCva || $[12] !== headingTitleCva || $[13] !== iconCva || $[14] !== panelContentCva || $[15] !== panelCva || $[16] !== subheading || $[17] !== triggerCva || $[18] !== variant) {
+		t4 = (t5) => {
+			const { isExpanded } = t5;
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, { children: /* @__PURE__ */ jsxs(Button, {
+				slot: "trigger",
+				className: triggerCva({
+					variant,
+					actionPosition,
+					disabled
+				}),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: headingCva({}),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-1 items-center gap-accordion-gap-icon-to-text",
+						children: [
+							Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({}) }),
+							/* @__PURE__ */ jsx(Typography, {
+								size: "label-2",
+								variant: "default",
+								className: headingTitleCva({}),
+								children: heading
+							}),
+							subheading && /* @__PURE__ */ jsx(Typography, {
+								size: "label-3",
+								variant: "default",
+								className: headingSubtitleCva({}),
+								children: subheading
+							})
+						]
+					})
+				}), /* @__PURE__ */ jsx(ChevronDown, { className: chevronCva({ isExpanded }) })]
+			}) }), /* @__PURE__ */ jsx(DisclosurePanel, {
+				className: panelCva({ isExpanded }),
+				children: /* @__PURE__ */ jsx("div", {
+					className: panelContentCva({}),
+					children
 				})
-			}), /* @__PURE__ */ jsx(ChevronDown, { className: chevronCva({ isExpanded }) })]
-		}) }), /* @__PURE__ */ jsx(DisclosurePanel, {
-			className: panelCva({ isExpanded }),
-			children: /* @__PURE__ */ jsx("div", {
-				className: panelContentCva({}),
-				children
-			})
-		})] })
-	});
+			})] });
+		};
+		$[4] = Icon;
+		$[5] = actionPosition;
+		$[6] = chevronCva;
+		$[7] = children;
+		$[8] = disabled;
+		$[9] = heading;
+		$[10] = headingCva;
+		$[11] = headingSubtitleCva;
+		$[12] = headingTitleCva;
+		$[13] = iconCva;
+		$[14] = panelContentCva;
+		$[15] = panelCva;
+		$[16] = subheading;
+		$[17] = triggerCva;
+		$[18] = variant;
+		$[19] = t4;
+	} else t4 = $[19];
+	let t5;
+	if ($[20] !== disabled || $[21] !== id || $[22] !== t3 || $[23] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Disclosure, {
+			id,
+			className: t3,
+			isDisabled: disabled,
+			children: t4
+		});
+		$[20] = disabled;
+		$[21] = id;
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = t5;
+	} else t5 = $[24];
+	return t5;
 };
 //#endregion
 export { AccordionItem };