@povio/ui 4.0.3 → 5.0.0-rc.10

package/dist/AppCanvasPage-BIFYeEeS.d.ts

@@ -0,0 +1,80 @@
+//#region src/app-canvas/route-model.d.ts
+/** Structural TanStack Router contract; no router runtime is bundled with UI. */
+interface CanvasRoute {
+  id?: string;
+  path?: string;
+  fullPath?: string;
+  children?: readonly CanvasRoute[] | object;
+  options?: {
+    id?: string;
+    path?: string;
+    component?: unknown;
+    lazyFn?: unknown;
+  };
+}
+interface CanvasRouter {
+  routeTree: CanvasRoute;
+  routesById?: object;
+}
+interface CanvasRouteExample {
+  params?: Record<string, string>;
+  search?: Record<string, unknown>;
+  title?: string;
+}
+interface DiscoverCanvasPagesOptions {
+  examples?: Record<string, CanvasRouteExample>;
+  exclude?: string[];
+  excludePaths?: string[];
+}
+interface CanvasPage {
+  id: string;
+  title: string;
+  path: string;
+  href?: string;
+  parentId?: string;
+  missingParams: string[];
+  kind: "page" | "unresolved";
+}
+interface CanvasPosition {
+  x: number;
+  y: number;
+}
+interface CanvasPageLayout extends CanvasPage, CanvasPosition {
+  width: number;
+  height: number;
+}
+/** Catalog route destinations without executing loaders or needing every dynamic parameter. */
+declare function discoverCanvasPages(router: CanvasRouter, options?: DiscoverCanvasPagesOptions): CanvasPage[];
+/** Deterministic masonry placement. Full measured heights (including 20,000px pages) are never capped. */
+declare function layoutCanvasPages(pages: readonly CanvasPage[], width: number, heights: Record<string, number>, positions?: Record<string, CanvasPosition>): CanvasPageLayout[];
+//#endregion
+//#region src/app-canvas/AppCanvas.d.ts
+interface CanvasBreakpoint {
+  id: string;
+  label: string;
+  width: number;
+  height: number;
+}
+declare const defaultCanvasBreakpoints: CanvasBreakpoint[];
+interface AppCanvasProps {
+  router: CanvasRouter;
+  examples?: Record<string, CanvasRouteExample>;
+  exclude?: string[];
+  excludePaths?: string[];
+  breakpoints?: CanvasBreakpoint[];
+  storageKey?: string;
+  frameUrl?: (page: CanvasPage) => string;
+}
+/** Live route artboards. The camera transforms only the canvas, never the iframe viewport width. */
+declare function AppCanvas({ router, examples, exclude, excludePaths, breakpoints, storageKey, frameUrl }: AppCanvasProps): import("react").JSX.Element;
+//#endregion
+//#region src/app-canvas/AppCanvasPage.d.ts
+declare const APP_CANVAS_PATH = "/_canvas";
+interface AppCanvasPageProps extends AppCanvasProps {
+  /** Excluded from the catalog to prevent recursively rendering the canvas itself. */
+  canvasPath?: string;
+}
+/** Ready-made route page. Mount beneath the app's UIConfigurationProvider. */
+declare function AppCanvasPage({ canvasPath, excludePaths, ...props }: AppCanvasPageProps): import("react").JSX.Element | null;
+//#endregion
+export { AppCanvasProps as a, CanvasPage as c, CanvasRouter as d, discoverCanvasPages as f, AppCanvas as i, CanvasPosition as l, AppCanvasPage as n, CanvasBreakpoint as o, layoutCanvasPages as p, AppCanvasPageProps as r, defaultCanvasBreakpoints as s, APP_CANVAS_PATH as t, CanvasRouteExample as u };

package/dist/{Autocomplete-DE2lQi5o.d.ts → Autocomplete-C6RRxImn.d.ts}

@@ -1,5 +1,5 @@
 import { n as FieldValues } from "./form.binding-DVJ5F0JE.js";
-import { n as GroupedSelectControlProps, o as SelectBaseProps, r as GroupedSelectProps, t as DefaultInitialSelectItem } from "./SelectBase-DefgAEzh.js";
+import { n as GroupedSelectControlProps, o as SelectBaseProps, r as GroupedSelectProps, t as DefaultInitialSelectItem } from "./SelectBase-BkIhS9Dg.js";
 import { s as OmitDiscriminatedUnion } from "./common-UBFya8WY.js";
 import { ReactElement } from "react";
 import { Key } from "react-aria-components";

package/dist/{Badge-CjPpYa50.d.ts → Badge-CBNpj823.d.ts}

@@ -1,9 +1,9 @@
-import { t as PillButtonVariants } from "./pillButton.cva-BVsxGnqF.js";
-import { n as TypographyProps } from "./Typography-BWmZd20e.js";
-import { Ref } from "react";
+import { t as BadgeButtonVariants } from "./badgeButton.cva-B2bgCQP6.js";
+import { n as TypographyProps } from "./Typography-XljT9s02.js";
+import { FC, Ref, SVGProps } from "react";
 import { ButtonProps } from "react-aria-components";
 //#region src/components/text/Badge/Badge.d.ts
-interface BadgeProps extends PillButtonVariants {
+interface BadgeProps extends BadgeButtonVariants {
   className?: string;
   children: string;
   /** Preferred spelling. `dismissable` remains supported. */
@@ -11,8 +11,10 @@ interface BadgeProps extends PillButtonVariants {
   dismissable?: boolean;
   isDisabled?: boolean;
   disabled?: boolean;
+  /** Display the toggled appearance without making the badge interactive. */
+  isSelected?: boolean;
+  icon?: FC<SVGProps<SVGSVGElement>>;
   contentRef?: Ref<HTMLElement>;
-  textVariant?: TypographyProps["variant"];
   textSize?: TypographyProps["size"];
   /** Preferred callback name. */
   onRemove?: () => void;
@@ -23,6 +25,6 @@ interface BadgeProps extends PillButtonVariants {
   /** Compatibility callback for the historical button-like prop surface. */
   onPress?: ButtonProps["onPress"];
 }
-declare const Badge: ({ className, children, dismissible, dismissable, isDisabled, disabled, onRemove, onDismiss, dismissButtonProps, excludeFromTabOrder, onPress, contentRef, variant, textVariant: textVariantProp, textSize: textSizeProp, ...appearanceProps }: BadgeProps) => import("react").JSX.Element;
+declare const Badge: ({ className, children, dismissible, dismissable, isDisabled, disabled, isSelected, icon: Icon, onRemove, onDismiss, dismissButtonProps, excludeFromTabOrder, onPress, contentRef, variant, textSize: textSizeProp, ...appearanceProps }: BadgeProps) => import("react").JSX.Element;
 //#endregion
 export { BadgeProps as n, Badge as t };

package/dist/BadgeButton-Ccgt3oGO.d.ts

@@ -0,0 +1,15 @@
+import { t as BadgeButtonVariants } from "./badgeButton.cva-B2bgCQP6.js";
+import { t as ButtonContentVariantProps } from "./buttonContent.cva-DPIlROA9.js";
+import { FC, ReactNode, Ref, SVGProps } from "react";
+import { ButtonProps, ToggleButtonProps } from "react-aria-components";
+//#region src/components/buttons/BadgeButton/BadgeButton.d.ts
+interface BadgeButtonProps extends ButtonProps, Omit<ToggleButtonProps, keyof ButtonProps>, ButtonContentVariantProps, BadgeButtonVariants {
+  children: ReactNode;
+  dismissable?: boolean;
+  toggle?: boolean;
+  icon?: FC<SVGProps<SVGSVGElement>>;
+  contentRef?: Ref<HTMLElement>;
+}
+declare const BadgeButton: ({ children, dismissable, toggle, icon, iconPosition, contentRef, ...props }: BadgeButtonProps) => import("react").JSX.Element;
+//#endregion
+export { BadgeButtonProps as n, BadgeButton as t };

package/dist/{BottomSheet-CVTF1wQe.js → BottomSheet-BXLE3161.js}

@@ -1,13 +1,14 @@
-import { t as UIConfig } from "./uiConfig.context-RFvaQYzD.js";
+import { t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
 import { t as X } from "./x-B6vfz8Ps.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
-import { n as $f2ff30fde7b014be$export$3ddf2d174ce01153, t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "./Dialog-CXoVeIkU.js";
+import { t as IconSlot } from "./IconSlot-DSK7qNxc.js";
+import { n as $f2ff30fde7b014be$export$3ddf2d174ce01153, t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "./Dialog-CKLkS00H.js";
 import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "./Button-D6KlWSFL.js";
-import { n as $8b8d26808cb8cb53$export$8948f78d83984c69, t as $8b8d26808cb8cb53$export$2b77a92f1a5ad772 } from "./Modal-CoFt5PGP.js";
-import { t as Typography } from "./Typography-AcUd9df8.js";
+import { n as $8b8d26808cb8cb53$export$8948f78d83984c69, t as $8b8d26808cb8cb53$export$2b77a92f1a5ad772 } from "./Modal-w60dVQcb.js";
+import { t as Typography } from "./Typography-LU4z2pR1.js";
 import { a as $a8ea2faf2ebe4d2f$re_export$useResizeObserver, o as $a8ea2faf2ebe4d2f$re_export$useViewportSize } from "./import-BE0r63d8.js";
 import "./i18n-CX2EjhJI.js";
-import { n as useStateAndRef, t as DomUtils } from "./dom.utils-D3mELNBA.js";
+import { n as useStateAndRef, t as DomUtils } from "./dom.utils-D1AopHx9.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -28,13 +29,13 @@ const BottomSheetHeader = (t0) => {
 	let t3;
 	if ($[2] !== dragControls || $[3] !== hideThumb || $[4] !== isDismissable) {
 		t3 = isDismissable && !hideThumb && /* @__PURE__ */ jsx("div", {
-			className: "flex shrink-0 cursor-grab touch-none justify-center px-list-side-title pt-list-height-title-top pb-2-5",
+			className: "flex shrink-0 cursor-grab touch-none justify-center px-list-side-title pt-list-height-title-top pb-2.5",
 			onPointerDown: (e) => {
 				e.preventDefault();
 				dragControls?.start(e);
 			},
 			"aria-hidden": true,
-			children: /* @__PURE__ */ jsx("div", { className: "h-1 w-16 shrink-0 rounded-full bg-elevation-fill-default-3" })
+			children: /* @__PURE__ */ jsx("div", { className: "h-1 w-16 shrink-0 rounded-full bg-surface-default-popover" })
 		});
 		$[2] = dragControls;
 		$[3] = hideThumb;
@@ -46,15 +47,15 @@ const BottomSheetHeader = (t0) => {
 		t4 = !hideHeader && /* @__PURE__ */ jsxs("div", {
 			className: "flex justify-between px-list-side-title",
 			children: [/* @__PURE__ */ jsx(Typography, {
-				size: "label-2",
-				variant: "prominent-1",
+				size: "small",
+				className: "font-bold",
 				...headerTypography,
 				children: label
 			}), onClose && isDismissable && /* @__PURE__ */ jsx($7705c033048f6da7$export$353f5b6fc5456de1, {
 				onPress: onClose,
 				"aria-label": t(_temp),
-				className: "-m-2 shrink-0 p-2 text-interactive-text-secondary-idle focus-visible:outline-interactive-text-secondary-focus",
-				children: /* @__PURE__ */ jsx(X, { className: "size-6" })
+				className: "-m-2 shrink-0 p-2 text-surface-default-foreground focus-visible:outline-interactive-ring",
+				children: /* @__PURE__ */ jsx(IconSlot, { icon: X })
 			})]
 		});
 		$[6] = headerTypography;
@@ -257,7 +258,7 @@ const BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable =
 						className: clsx("shrink-0", height === "auto" && "grow")
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: clsx("pointer-events-auto relative flex min-h-0 flex-col items-stretch rounded-t-xl bg-elevation-fill-default-1", height === "full" && "flex-1"),
+						className: clsx("pointer-events-auto relative flex min-h-0 flex-col items-stretch rounded-t-xl bg-surface-default-card", height === "full" && "flex-1"),
 						children: [
 							/* @__PURE__ */ jsx("div", {
 								className: clsx("absolute bottom-full left-0 w-full outline-none", isDismissable ? "h-0" : "h-screen"),
@@ -281,7 +282,7 @@ const BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable =
 								className: "shrink-0",
 								style: { height: `${footerHeight + (isScrollable ? 0 : sheetMarginBottom)}px` }
 							}),
-							/* @__PURE__ */ jsx("div", { className: "absolute top-full h-screen w-full bg-elevation-fill-default-1" })
+							/* @__PURE__ */ jsx("div", { className: "absolute top-full h-screen w-full bg-surface-default-card" })
 						]
 					}),
 					footer && /* @__PURE__ */ jsx(motion.div, {
@@ -289,7 +290,7 @@ const BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable =
 						initial: { opacity: 0 },
 						exit: { opacity: 0 },
 						ref: setFooterElement,
-						className: clsx("pointer-events-auto absolute z-overlay-above w-full bg-elevation-fill-default-2", "top-[calc(100dvh-var(--bottom-sheet-keyboard-inset,0))] left-0 translate-y-[calc(-100%-var(--scroll-position,0))]"),
+						className: clsx("pointer-events-auto absolute z-overlay-above w-full bg-surface-default-background", "top-[calc(100dvh-var(--bottom-sheet-keyboard-inset,0))] left-0 translate-y-[calc(-100%-var(--scroll-position,0))]"),
 						children: footer
 					})
 				] })

package/dist/{BottomSheet-CT0zuola.d.ts → BottomSheet-DbQuzfAB.d.ts}

@@ -1,4 +1,4 @@
-import { t as TypographyVariantProps } from "./typography.cva-YaO6JLqU.js";
+import { t as TypographyVariantProps } from "./typography.cva-D1JOEYl-.js";
 import { ReactNode, RefObject } from "react";
 //#region src/components/overlays/BottomSheet/BottomSheet.d.ts
 type BottomSheetState = "closed" | "opening" | "opened" | "closing";

package/dist/{BottomSheet.lazy-7AwnB4vS.d.ts → BottomSheet.lazy-D9LCEo7s.d.ts}

@@ -1,4 +1,4 @@
-import { t as BottomSheetProps } from "./BottomSheet-CT0zuola.js";
+import { t as BottomSheetProps } from "./BottomSheet-DbQuzfAB.js";
 //#region src/components/overlays/BottomSheet/BottomSheet.lazy.d.ts
 declare const BottomSheet: ({ isOpen, onOpenChange, trigger, ...props }: BottomSheetProps) => import("react").JSX.Element;
 //#endregion

package/dist/{Breadcrumbs-D-3YEuem.d.ts → Breadcrumbs-CUV6CU8Q.d.ts}

@@ -1,4 +1,4 @@
-import { n as LinkNavigationProps } from "./Link-DS9-0Ijl.js";
+import { n as LinkNavigationProps } from "./Link-Ow9H7kNv.js";
 import { FC, SVGProps } from "react";
 import { Key } from "react-aria-components";
 //#region src/components/Breadcrumbs/Breadcrumbs.d.ts

package/dist/{Breadcrumbs-C-mZtdCc.js → Breadcrumbs-FF8hMfXd.js}

@@ -1,23 +1,25 @@
-import { t as DropdownMenuDesktop } from "./DropdownMenuDesktop-C9ttysuk.js";
+import { t as DropdownMenuDesktop } from "./DropdownMenuDesktop-Cl9gZVq0.js";
 import { t as ChevronRight } from "./chevron-right-3nKJR5Bb.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
+import { t as IconSlot } from "./IconSlot-DSK7qNxc.js";
 import { l as $7230ffa83bc0c2cf$export$fabf2dc03a41866e, n as $7230ffa83bc0c2cf$export$29f1550f4b0d4415, r as $7230ffa83bc0c2cf$export$4d86445c2cf5e3, s as $7230ffa83bc0c2cf$export$df3a06d6289f983e } from "./utils-Czcqspm7.js";
-import { p as $263ab7fc0f95ccdb$export$4feb769f8ddf26c5 } from "./Dialog-CXoVeIkU.js";
+import { m as $263ab7fc0f95ccdb$export$4feb769f8ddf26c5 } from "./Dialog-CKLkS00H.js";
 import { n as $984a1fc08f87e4f3$export$e2509388b49734e7, t as $984a1fc08f87e4f3$export$a6c7ac8248d6e38a } from "./Link-FupWOW1f.js";
 import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "./Button-D6KlWSFL.js";
-import { t as Tooltip } from "./Tooltip--PSxkQA3.js";
-import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
-import { t as Typography } from "./Typography-AcUd9df8.js";
+import { t as Tooltip } from "./Tooltip-CpG1nz7Y.js";
+import { a as breadcrumbsDefinition, i as breadcrumbSegmentDefinition, n as breadcrumbIconDefinition, r as breadcrumbItemDefinition, t as breadcrumbChevronDefinition } from "./breadcrumbs.cva-7zzdDhVR.js";
+import { t as Typography } from "./Typography-LU4z2pR1.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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-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.21.1+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) {
@@ -73,31 +75,6 @@ const $65dbe90f868fa5f4$export$dabcc1ec9dd9d1cc = /*#__PURE__*/ createLeafCompon
 	}, /*#__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);
@@ -145,12 +122,11 @@ const Breadcrumbs = (t0) => {
 		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
+			children: [item.icon && /* @__PURE__ */ jsx(IconSlot, {
+				icon: /* @__PURE__ */ jsx(item.icon, { "aria-label": item.label }),
+				className: breadcrumbIconCva({})
 			}), !iconOnly_0 && /* @__PURE__ */ jsx(Typography, {
-				variant: "default",
-				size: "label-3",
+				size: "small",
 				children: item.label
 			})]
 		});
@@ -172,8 +148,7 @@ const Breadcrumbs = (t0) => {
 						isEllipsis: true
 					}),
 					children: /* @__PURE__ */ jsx(Typography, {
-						variant: "default",
-						size: "label-3",
+						size: "small",
 						children: "..."
 					})
 				})
@@ -211,7 +186,10 @@ const Breadcrumbs = (t0) => {
 		} else t9 = $[18];
 		let t10;
 		if ($[19] !== t9) {
-			t10 = /* @__PURE__ */ jsx(ChevronRight, { className: t9 });
+			t10 = /* @__PURE__ */ jsx(IconSlot, {
+				icon: ChevronRight,
+				className: t9
+			});
 			$[19] = t9;
 			$[20] = t10;
 		} else t10 = $[20];
@@ -243,7 +221,10 @@ const Breadcrumbs = (t0) => {
 		} else t14 = $[29];
 		let t15;
 		if ($[30] !== t14) {
-			t15 = /* @__PURE__ */ jsx(ChevronRight, { className: t14 });
+			t15 = /* @__PURE__ */ jsx(IconSlot, {
+				icon: ChevronRight,
+				className: t14
+			});
 			$[30] = t14;
 			$[31] = t15;
 		} else t15 = $[31];
@@ -308,7 +289,10 @@ const Breadcrumbs = (t0) => {
 			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({}) })] });
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [renderBreadcrumbLink(item_1, isCurrent_0, iconOnly && item_1 === items[0]), !isCurrent_0 && /* @__PURE__ */ jsx(IconSlot, {
+					icon: ChevronRight,
+					className: breadcrumbChevronCva({})
+				})] });
 			}
 		});
 		$[46] = breadcrumbChevronCva;
@@ -348,4 +332,4 @@ 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 };
+export { Breadcrumbs as t };