@povio/ui 4.0.3 → 5.0.0-rc.10

package/dist/{confirmation.context-fKfUTsLF.d.ts → confirmation.context-BOeEVczb.d.ts}

@@ -1,4 +1,4 @@
-import { n as AlertDialogProps } from "./AlertDialog-PjYM6lDo.js";
+import { n as AlertDialogProps } from "./AlertDialog-OWTbR4km.js";
 import { PropsWithChildren } from "react";
 //#region src/config/confirmation.context.d.ts
 declare namespace Confirmation {

package/dist/{date-picker-MXt02b7Z.d.ts → date-picker-BhIA01qs.d.ts}

@@ -1,4 +1,4 @@
-import { r as DatePickerProps } from "./DatePicker-CjmXaZ9T.js";
+import { r as DatePickerProps } from "./DatePicker-1LJ2LqST.js";
 import { t as ControlProps } from "./form.types-ZNGbcqJS.js";
 import { t as FireBlurOnChangeProps } from "./fieldAdapter-C4sDFC8f.js";
 import { FieldValues } from "react-hook-form";

package/dist/{date-range-picker-BjT0t21q.d.ts → date-range-picker-BsuZ2h_3.d.ts}

@@ -1,4 +1,4 @@
-import { r as DateRangePickerProps } from "./DateRangePicker-D1kjkFfS.js";
+import { r as DateRangePickerProps } from "./DateRangePicker-Dfptit_Z.js";
 import { t as ControlProps } from "./form.types-ZNGbcqJS.js";
 import { t as FireBlurOnChangeProps } from "./fieldAdapter-C4sDFC8f.js";
 import { FieldValues } from "react-hook-form";

package/dist/{date-time-picker-CMmIuZtT.d.ts → date-time-picker-Bi-qW6vO.d.ts}

@@ -1,4 +1,4 @@
-import { r as DateTimePickerProps } from "./DateTimePicker-CT_Pm3KB.js";
+import { r as DateTimePickerProps } from "./DateTimePicker-DpsfukpQ.js";
 import { t as ControlProps } from "./form.types-ZNGbcqJS.js";
 import { t as FireBlurOnChangeProps } from "./fieldAdapter-C4sDFC8f.js";
 import { FieldValues } from "react-hook-form";

package/dist/datePickerInput.cva-Cd7UUN61.js

@@ -0,0 +1,14 @@
+import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
+//#region src/components/inputs/DateTime/shared/datePickerInput.cva.ts
+const datePickerInputContentRowDefinition = UIOverrides.defineConfig({
+	base: ["flex items-center gap-input-gap-input-text-to-elements"],
+	config: {
+		variants: { size: {
+			small: "",
+			default: ""
+		} },
+		defaultVariants: { size: "default" }
+	}
+});
+//#endregion
+export { datePickerInputContentRowDefinition as t };

package/dist/{datePickerValue.utils-1z4mwZZs.js → datePickerValue.utils-QWR2q5Vv.js}

@@ -1,14 +1,14 @@
 import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
 import { t as ChevronUp } from "./chevron-up-D_Gqpb5M.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
-import { t as Typography } from "./Typography-AcUd9df8.js";
+import { t as Typography } from "./Typography-LU4z2pR1.js";
 import { InlineIconButton } from "./components/inline-icon-button.js";
-import { t as useBreakpoint } from "./useBreakpoint-3kpqzjoC.js";
-import { u as getPlaceholder } from "./staticDateTimeSegments-vP2f1woD.js";
+import { t as useBreakpoint } from "./useBreakpoint-DQoMN-BG.js";
+import { u as getPlaceholder } from "./staticDateTimeSegments-BWea3HAt.js";
 import { useEffect, useRef } from "react";
 import { c } from "react/compiler-runtime";
-import { Time } from "@internationalized/date";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Time } from "@internationalized/date";
 import { useDateSegment, useLocale, useTimeField } from "react-aria";
 import { useTimeFieldState } from "@react-stately/datepicker";
 //#region src/hooks/useLongPressRepeat.ts
@@ -148,9 +148,8 @@ const TimeSegmentInput = ({ segment, state, autoFocus }) => {
 			ref,
 			children: /* @__PURE__ */ jsx(Typography, {
 				as: "span",
-				variant: "prominent-1",
-				size: "label-2",
-				className: "text-text-default-2",
+				size: "small",
+				className: "text-surface-default-foreground font-bold",
 				children: segment.text
 			})
 		});
@@ -160,7 +159,7 @@ const TimeSegmentInput = ({ segment, state, autoFocus }) => {
 		children: /* @__PURE__ */ jsx("div", {
 			ref,
 			...isDesktop && segmentProps,
-			className: clsx("w-11 rounded-input-rounding-default bg-input-filled-idle py-input-height-extra-small text-center", "font-labels-default text-text-default-3", "border border-input-filled-idle border-solid", "hover:border-interactive-contained-primary-hover", "focus-within:border-interactive-contained-primary-idle focus-within:outline-none"),
+			className: clsx("w-11 rounded-input-rounding-default bg-surface-default-popover py-input-height-small text-center", "font-body font-bold text-surface-default-popover-foreground", "border border-border-default-input border-solid", "not-focus-within:hover:border-state-border-default-input/hover not-focus-within:hover:bg-state-surface-default-popover/hover not-focus-within:hover:text-state-surface-default-popover-foreground/hover", "focus-within:border-interactive-ring focus-within:bg-surface-default-background focus-within:text-surface-default-card-foreground focus-within:outline-none"),
 			children: getPlaceholder(segment) ?? segment.text
 		})
 	});
@@ -195,9 +194,8 @@ const TimeSegmentButton = ({ segment, state, type }) => {
 			className: "flex shrink-0",
 			children: /* @__PURE__ */ jsx(Typography, {
 				as: "span",
-				variant: "prominent-1",
-				size: "label-2",
-				className: "invisible text-text-default-2",
+				size: "small",
+				className: "invisible text-surface-default-foreground font-bold",
 				"aria-hidden": true,
 				children: segment.text
 			})

package/dist/{dialog.cva-5qNq9YfM.js → dialog.cva-COhDZaVl.js}

@@ -1,10 +1,10 @@
-import { n as cva, t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
+import { r as cva, t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
 //#region src/components/overlays/Dialog/dialog.cva.ts
 const dialogContentDefinition = UIOverrides.defineConfig({
 	base: [
 		"relative flex flex-col items-center gap-modal-gap-content px-modal-side-mobile py-modal-height-mobile md:px-modal-side-desktop md:py-modal-height-desktop",
 		"w-fit max-w-full [&>*]:max-w-full",
-		"border-elevation-outline-default-1 bg-elevation-fill-default-1 outline-none",
+		"border-border-default-subtle bg-surface-default-card text-surface-default-card-foreground outline-none",
 		"pointer-events-auto"
 	],
 	config: {
@@ -17,7 +17,7 @@ const dialogContentDefinition = UIOverrides.defineConfig({
 	}
 });
 const dialogOverlayDefinition = UIOverrides.defineConfig({
-	base: ["fixed inset-0 z-modal flex h-(--visual-viewport-height) w-screen overflow-y-auto bg-support-overlay"],
+	base: ["fixed inset-0 z-modal flex h-(--visual-viewport-height) w-screen overflow-y-auto bg-support-overlay", "transition-opacity duration-200 ease-out starting:opacity-0 entering:opacity-0 exiting:opacity-0 exiting:duration-150 motion-reduce:transition-none"],
 	config: {
 		variants: { aside: {
 			left: "p-0",
@@ -34,7 +34,7 @@ const dialogMainDefinition = UIOverrides.defineConfig({
 		variants: { aside: {
 			left: "entering:animate-drawer-enter-left exiting:animate-drawer-exit-left justify-start",
 			right: "entering:animate-drawer-enter-right exiting:animate-drawer-exit-right justify-end",
-			center: "justify-center"
+			center: ["justify-center", "transition-[opacity,scale] duration-200 ease-out starting:scale-96 starting:opacity-0 entering:scale-96 entering:opacity-0 exiting:scale-96 exiting:opacity-0 exiting:duration-150 motion-reduce:transition-none"]
 		} },
 		defaultVariants: { aside: "center" }
 	}

package/dist/{dist-C6GfeeEC.js → dist-CAdwxJbe.js}

@@ -1,260 +1,5 @@
-import { t as UIConfig } from "./uiConfig.context-RFvaQYzD.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
-import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
-import { t as Typography } from "./Typography-AcUd9df8.js";
-import { t as Spinner } from "./Spinner-owSXOEzg.js";
-import { t as compoundMapper } from "./compoundMapper-Di3SKZnS.js";
-import { t as Button } from "./Button-CcZBqoQp.js";
 import $ahdqC$react, { cloneElement, isValidElement, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/status/Toast/toast.cva.ts
-const toastContainerDefinition = UIOverrides.defineConfig({
-	base: ["m-toast-gap-margin-mobile w-auto gap-toast-gap-margin-mobile p-0 md:m-toast-gap-margin-desktop md:gap-toast-gap-margin-desktop"],
-	config: { variants: { position: {
-		"bottom-right": "right-0 bottom-0",
-		"bottom-left": "bottom-0 left-0",
-		"top-right": "top-0 right-0",
-		"top-left": "top-0 left-0",
-		"bottom-center": "bottom-0",
-		"top-center": "top-0"
-	} } }
-});
-const toastWrapper = clsx("m-0! min-h-0! w-auto! max-w-toast bg-transparent! p-0! shadow-none!");
-const toastDefinition = UIOverrides.defineConfig({
-	base: ["m-0 inline-flex w-auto flex-col items-center overflow-hidden rounded-toast-rounding-default shadow-4 md:flex-row"],
-	config: {
-		variants: {
-			variant: {
-				outlined: "border bg-elevation-fill-default-1 text-text-default-1",
-				contained: "text-text-inverted-1"
-			},
-			color: {
-				neutral: "",
-				success: "",
-				warning: "",
-				error: ""
-			},
-			position: {
-				"bottom-right": "",
-				"bottom-left": "",
-				"bottom-center": "",
-				"top-right": "",
-				"top-left": "",
-				"top-center": ""
-			}
-		},
-		compoundVariants: [
-			{
-				variant: "outlined",
-				color: "neutral",
-				className: "border-elevation-outline-default-1"
-			},
-			{
-				variant: "outlined",
-				color: "success",
-				className: "border-elevation-outline-success-1"
-			},
-			{
-				variant: "outlined",
-				color: "warning",
-				className: "border-elevation-outline-warning-1"
-			},
-			{
-				variant: "outlined",
-				color: "error",
-				className: "border-elevation-outline-error-1"
-			},
-			{
-				variant: "contained",
-				color: "neutral",
-				className: "bg-elevation-fill-inverted-1"
-			},
-			{
-				variant: "contained",
-				color: "success",
-				className: "bg-elevation-fill-success-1"
-			},
-			{
-				variant: "contained",
-				color: "warning",
-				className: "bg-elevation-fill-warning-1"
-			},
-			{
-				variant: "contained",
-				color: "error",
-				className: "bg-elevation-fill-error-1"
-			}
-		],
-		defaultVariants: {
-			variant: "outlined",
-			color: "neutral"
-		}
-	}
-});
-const buttonColorVariant = compoundMapper({
-	compoundVariants: [
-		{
-			variant: "outlined",
-			color: "neutral",
-			value: { color: "secondary" }
-		},
-		{
-			variant: "outlined",
-			color: "success",
-			value: { color: "success" }
-		},
-		{
-			variant: "outlined",
-			color: "warning",
-			value: { color: "warning" }
-		},
-		{
-			variant: "outlined",
-			color: "error",
-			value: { color: "error" }
-		},
-		{
-			variant: "contained",
-			color: "neutral",
-			value: {
-				color: "primary",
-				inverted: true
-			}
-		},
-		{
-			variant: "contained",
-			color: "success",
-			value: {
-				color: "success",
-				inverted: true
-			}
-		},
-		{
-			variant: "contained",
-			color: "warning",
-			value: {
-				color: "warning",
-				inverted: true
-			}
-		},
-		{
-			variant: "contained",
-			color: "error",
-			value: {
-				color: "error",
-				inverted: true
-			}
-		}
-	],
-	defaultVariants: {
-		variant: "outlined",
-		color: "neutral"
-	},
-	default: { color: "secondary" }
-});
-const statusIconDefinition = UIOverrides.defineConfig({
-	base: ["size-6 shrink-0"],
-	config: {
-		variants: {
-			variant: {
-				outlined: "",
-				contained: "text-text-inverted-1"
-			},
-			color: {
-				neutral: "",
-				success: "",
-				warning: "",
-				error: ""
-			}
-		},
-		compoundVariants: [
-			{
-				variant: "outlined",
-				color: "neutral",
-				className: "text-text-default-2"
-			},
-			{
-				variant: "outlined",
-				color: "success",
-				className: "text-text-success-1"
-			},
-			{
-				variant: "outlined",
-				color: "warning",
-				className: "text-text-warning-1"
-			},
-			{
-				variant: "outlined",
-				color: "error",
-				className: "text-text-error-1"
-			}
-		],
-		defaultVariants: {
-			variant: "outlined",
-			color: "neutral"
-		}
-	}
-});
-const statusSeparatorDefinition = UIOverrides.defineConfig({
-	base: ["h-px shrink-0 self-stretch md:h-auto md:w-px"],
-	config: {
-		variants: {
-			variant: {
-				outlined: "",
-				contained: "hidden"
-			},
-			color: {
-				neutral: "bg-elevation-outline-default-1",
-				success: "bg-elevation-outline-success-1",
-				warning: "bg-elevation-outline-warning-1",
-				error: "bg-elevation-outline-error-1"
-			}
-		},
-		defaultVariants: { color: "neutral" }
-	}
-});
-//#endregion
-//#region src/components/status/Toast/Toast.tsx
-const Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props }) => {
-	const uiConfig = UIConfig.useConfig();
-	const { variant = uiConfig.toast.variant, ...restProps } = props;
-	const toastCva = UIOverrides.useCva("toast.cva", toastDefinition);
-	const buttonColor = UIOverrides.useMapper("toast.buttonColor", buttonColorVariant);
-	const iconCva = UIOverrides.useCva("status.iconCva", statusIconDefinition);
-	const separatorCva = UIOverrides.useCva("status.separatorCva", statusSeparatorDefinition);
-	const variantProps = {
-		variant,
-		...restProps
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: toastCva(variantProps),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-start gap-toast-gap-icon-to-text px-toast-side-default py-toast-height-content",
-			children: [
-				isLoading && /* @__PURE__ */ jsx(Spinner, {
-					size: "default",
-					className: "shrink-0"
-				}),
-				!isLoading && Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva(variantProps) }),
-				/* @__PURE__ */ jsx(Typography, {
-					size: "label-2",
-					children: text
-				})
-			]
-		}), actions.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", { className: separatorCva(variantProps) }), /* @__PURE__ */ jsx("div", {
-			className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-toast-gap-action px-toast-side-default py-toast-height-actions-mobile md:w-auto md:justify-center md:py-toast-height-actions-desktop",
-			children: actions.map(({ text: buttonText, onPress }) => /* @__PURE__ */ jsx(Button, {
-				onPress,
-				...buttonColor(variantProps),
-				variant: "text",
-				size: "none",
-				width: "hug",
-				children: buttonText
-			}, buttonText))
-		})] })]
-	});
-};
-//#endregion
 //#region ../../node_modules/.bun/react-toastify@11.1.0+67f6792bdf102c28/node_modules/react-toastify/dist/index.mjs
 var L = (t) => typeof t == "number" && !isNaN(t);
 var N = (t) => typeof t == "string";
@@ -1737,4 +1482,4 @@ function xo(t) {
 	return Rt(Mt, t.nonce), $ahdqC$react.createElement(dt, { ...t });
 }
 //#endregion
-export { statusSeparatorDefinition as a, toastWrapper as c, statusIconDefinition as i, y as n, toastContainerDefinition as o, Toast as r, toastDefinition as s, xo as t };
+export { y as n, xo as t };

package/dist/{dom.utils-D3mELNBA.js → dom.utils-D1AopHx9.js}

@@ -1,4 +1,4 @@
-import { o as ObjectUtils } from "./uiConfig.context-RFvaQYzD.js";
+import { o as ObjectUtils } from "./uiConfig.context-BS3r_kTS.js";
 import { useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 //#region src/hooks/useStateAndRef.ts

package/dist/dropdownMenu.cva-DvEmX0bs.js

@@ -0,0 +1,34 @@
+import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
+//#region src/components/DropdownMenu/dropdownMenu.cva.ts
+const dropdownMenuDefinition = UIOverrides.defineConfig({
+	base: ["outline-none"],
+	config: {
+		variants: { isMobile: {
+			true: [],
+			false: []
+		} },
+		defaultVariants: { isMobile: false }
+	}
+});
+const menuItemDefinition = UIOverrides.defineConfig({
+	base: [
+		"flex cursor-pointer items-center justify-between gap-list-gap-icon-to-label px-list-side-item-left py-list-height-item has-submenu:pr-list-side-item-right",
+		"border-b border-b-border-default-subtle outline-none last:border-b-0",
+		"bg-surface-default-card text-surface-default-foreground",
+		"disabled:cursor-default disabled:text-state-surface-default-foreground/disabled",
+		"not-disabled:not-open:not-focus-visible:hover:bg-state-interactive-subtle-secondary-background/hover not-disabled:not-open:not-focus-visible:hover:text-state-surface-default-foreground/hover",
+		"open:cursor-default not-disabled:open:bg-interactive-primary-background not-disabled:open:text-interactive-primary-foreground",
+		"not-disabled:not-open:focus-visible:bg-state-interactive-subtle-secondary-background/focus not-disabled:not-open:focus-visible:text-state-surface-default-foreground/focus focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-interactive-ring"
+	],
+	config: {
+		variants: { isMobile: {
+			true: ["justify-start! w-full font-body font-bold"],
+			false: []
+		} },
+		defaultVariants: { isMobile: false }
+	}
+});
+const menuPopoverDefinition = UIOverrides.defineConfig({ base: ["pt-2 outline-none"] });
+const menuPopoverWrapperDefinition = UIOverrides.defineConfig({ base: ["overflow-hidden rounded-list-rounding-dropdown border border-border-default-subtle bg-surface-default-card shadow-5 outline-none"] });
+//#endregion
+export { menuPopoverWrapperDefinition as i, menuItemDefinition as n, menuPopoverDefinition as r, dropdownMenuDefinition as t };