@px-ui/core 3.0.0 → 3.1.0

package/dist/index.js

@@ -1,28 +1,28 @@
 import { n as __reExport, t as __export } from "./chunk-CYeTv9WL.js";
 import * as React$1 from "react";
-import React, { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
-import { Collapsible, Dialog } from "@base-ui-components/react";
+import React, { createContext, useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import { Collapsible, Dialog, Toast } from "@base-ui/react";
 import classnames from "classnames";
 import { extendTailwindMerge } from "tailwind-merge";
 import { cva } from "class-variance-authority";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Popover } from "@base-ui-components/react/popover";
-import { Combobox } from "@base-ui-components/react/combobox";
+import { Popover } from "@base-ui/react/popover";
+import { Combobox } from "@base-ui/react/combobox";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { Select } from "@base-ui-components/react/select";
-import { Menu } from "@base-ui-components/react/menu";
-import { Progress } from "@base-ui-components/react/progress";
-import { Radio } from "@base-ui-components/react/radio";
-import { RadioGroup } from "@base-ui-components/react/radio-group";
-import { Tabs } from "@base-ui-components/react/tabs";
-import { Tooltip } from "@base-ui-components/react/tooltip";
-import { CheckboxGroup } from "@base-ui-components/react/checkbox-group";
-import { Checkbox as Checkbox$1 } from "@base-ui-components/react/checkbox";
-import { useRender } from "@base-ui-components/react/use-render";
-import { mergeProps } from "@base-ui-components/react/merge-props";
+import { Select } from "@base-ui/react/select";
+import { Menu } from "@base-ui/react/menu";
+import { Progress } from "@base-ui/react/progress";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+import { Tabs } from "@base-ui/react/tabs";
+import { Tooltip } from "@base-ui/react/tooltip";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
-import { Avatar as Avatar$1 } from "@base-ui-components/react/avatar";
-import { Switch as Switch$1 } from "@base-ui-components/react/switch";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
 import { format } from "date-fns";
 
 export * from "class-variance-authority"
@@ -82,7 +82,7 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
 			default: "px-4 py-2 h-10 has-[>svg]:px-3 text-ppx-base",
 			sm: "gap-1.5 px-3 has-[>svg]:px-2.5 h-8 text-ppx-sm",
 			lg: "px-6 h-12 text-ppx-base font-sans-sb has-[>svg]:px-4",
-			"icon-sm": "h-8 size-8",
+			"icon-sm": "size-8",
 			icon: "size-10 px-2"
 		}
 	},
@@ -1203,7 +1203,7 @@ var segmented_control_exports = /* @__PURE__ */ __export({
 	Item: () => Item$4,
 	Root: () => Root$4
 });
-const segmentedControlItemVariants = cva("relative flex items-center justify-center px-4 py-2 text-sm font-medium transition-all duration-200 ease-in-out cursor-pointer rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-ppx-primary-5 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", {
+const segmentedControlItemVariants = cva("relative flex items-center justify-center px-4 py-2 text-sm font-medium transition-all duration-200 ease-in-out cursor-pointer rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-ppx-primary-5 focus-visible:ring-offset-2 data-disabled:cursor-not-allowed data-disabled:opacity-50", {
 	variants: {
 		variant: { default: "text-ppx-neutral-11 data-checked:bg-ppx-primary-5 data-checked:text-white data-checked:shadow-sm hover:text-ppx-neutral-12" },
 		size: {
@@ -1220,7 +1220,7 @@ const segmentedControlItemVariants = cva("relative flex items-center justify-cen
 function Root$4({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup, {
 		"data-slot": "segmented-control",
-		className: cn("p-1 inline-flex items-center rounded-full bg-ppx-neutral-3", className),
+		className: cn("bg-ppx-neutral-3 inline-flex items-center rounded-full p-1", className),
 		...props
 	});
 }
@@ -1374,7 +1374,7 @@ function Content({ className, align = "center", sideOffset = 8, side = "top", ch
 
 //#endregion
 //#region src/components/checkbox.tsx
-const checkboxVariants = cva("peer aria-invalid:border-ppx-red-5 aria-invalid:text-shadow-ppx-red-5 flex items-center justify-center rounded-sm border transition-colors duration-150 outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50", {
+const checkboxVariants = cva("peer aria-invalid:border-ppx-red-5 aria-invalid:text-shadow-ppx-red-5 flex items-center justify-center rounded-sm border transition-colors duration-150 outline-none focus-visible:ring-2 data-disabled:cursor-not-allowed data-disabled:opacity-50", {
 	variants: {
 		variant: { default: "bg-white data-checked:bg-ppx-primary-5 data-[indeterminate]:bg-ppx-primary-5 data-checked:text-white data-[indeterminate]:text-white  border-ppx-neutral-10 data-checked:border-ppx-primary-5 data-[indeterminate]:border-ppx-primary-5" },
 		size: {
@@ -1439,13 +1439,13 @@ var block_checkbox_group_exports = /* @__PURE__ */ __export({
 });
 function Group$2({ className, ...props }) {
 	return /* @__PURE__ */ jsx(CheckboxGroup, {
-		className: cn("gap-4 flex", className),
+		className: cn("flex gap-4", className),
 		...props
 	});
 }
 function Item$3({ className, invalid, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("label", {
-		className: cn("gap-2 p-5 flex min-h-[155px] justify-between rounded-ppx-s border-2 border-ppx-neutral-3 shadow-[0px_0px_12px_#0000001F] transition-colors duration-300 has-not-disabled:hover:border-ppx-neutral-6 has-disabled:cursor-not-allowed has-disabled:opacity-60 has-disabled:hover:border-ppx-neutral-3 has-aria-invalid:shadow-ppx-red-2 has-data-checked:border-ppx-primary-5!", className),
+		className: cn("rounded-ppx-s border-ppx-neutral-3 has-not-data-disabled:hover:border-ppx-neutral-6 has-data-disabled:cursor-not-allowed has-data-disabled:opacity-60 has-data-disabled:hover:border-ppx-neutral-3 has-aria-invalid:shadow-ppx-red-2 has-data-checked:border-ppx-primary-5! flex min-h-[155px] justify-between gap-2 border-2 p-5 shadow-[0px_0px_12px_#0000001F] transition-colors duration-300", className),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "flex-1",
 			children
@@ -1459,7 +1459,7 @@ function Item$3({ className, invalid, children, ...rest }) {
 }
 function Header$1(props) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("mb-5 gap-2 flex items-center", props.className),
+		className: cn("mb-5 flex items-center gap-2", props.className),
 		children: props.children
 	});
 }
@@ -1471,7 +1471,7 @@ function Title$1(props) {
 }
 function Description$1(props) {
 	return /* @__PURE__ */ jsx("p", {
-		className: cn("mb-5 text-ppx-sm text-ppx-muted-foreground", props.className),
+		className: cn("text-ppx-sm text-ppx-muted-foreground mb-5", props.className),
 		children: props.children
 	});
 }
@@ -1489,7 +1489,7 @@ function Group$1({ className, ...props }) {
 		...props
 	});
 }
-const radioVariants = cva("bg-white aria-invalid:border-ppx-red-5 aspect-square shrink-0 rounded-full border border-ppx-neutral-10 shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 ", {
+const radioVariants = cva("relative inline-flex bg-ppx-background aria-invalid:border-ppx-red-5 aspect-square shrink-0 rounded-full border border-ppx-neutral-10 shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] data-disabled:cursor-not-allowed data-disabled:opacity-50 items-center justify-center", {
 	variants: {
 		variant: { default: "data-checked:border-ppx-primary-5 text-ppx-primary-5" },
 		size: {
@@ -1525,7 +1525,7 @@ function Item$1({ className, variant, size, ...props }) {
 				strokeWidth: "2",
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
-				className: cn("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", size === "sm" && "size-2", size === void 0 && "size-3", size === "lg" && "size-3.5"),
+				className: cn("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", size === "sm" && "size-2", size === void 0 || size === "default" ? "size-3" : "", size === "lg" && "size-3.5"),
 				children: /* @__PURE__ */ jsx("circle", {
 					cx: "12",
 					cy: "12",
@@ -1554,7 +1554,7 @@ function Group({ className, ...props }) {
 }
 function Item$2({ className, invalid, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("label", {
-		className: cn("rounded-ppx-s border-ppx-neutral-3 has-not-disabled:hover:border-ppx-neutral-6 has-disabled:cursor-not-allowed has-disabled:opacity-60 has-disabled:hover:border-ppx-neutral-3 has-aria-invalid:shadow-ppx-red-2 has-data-checked:border-ppx-primary-5! flex min-h-[155px] justify-between gap-2 border-2 p-5 shadow-[0px_0px_12px_#0000001F] transition-colors duration-300", className),
+		className: cn("rounded-ppx-s border-ppx-neutral-3 has-not-data-disabled:hover:border-ppx-neutral-6 has-data-disabled:cursor-not-allowed has-data-disabled:opacity-60 has-data-disabled:hover:border-ppx-neutral-3 has-aria-invalid:shadow-ppx-red-2 has-data-checked:border-ppx-primary-5! flex min-h-[155px] justify-between gap-2 border-2 p-5 shadow-[0px_0px_12px_#0000001F] transition-colors duration-300", className),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "flex-1",
 			children
@@ -1776,12 +1776,291 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
 	});
 }
 
+//#endregion
+//#region src/icons/circle-alert-icon.tsx
+function CircleAlertIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		className: cn("size-4 shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "10"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: "12",
+				x2: "12",
+				y1: "8",
+				y2: "12"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: "12",
+				x2: "12.01",
+				y1: "16",
+				y2: "16"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/icons/circle-check-icon.tsx
+function CircleCheckIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		className: cn("size-4 shrink-0", props.className),
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "10"
+		}), /* @__PURE__ */ jsx("path", { d: "m9 12 2 2 4-4" })]
+	});
+}
+
+//#endregion
+//#region src/icons/info-icon.tsx
+function InfoIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		className: cn("size-4 shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "10"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+		]
+	});
+}
+
+//#endregion
+//#region src/icons/triangle-alert-icon.tsx
+function TriangleAlertIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		className: cn("size-4 shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+		]
+	});
+}
+
+//#endregion
+//#region src/icons/spinner-icon.tsx
+function SpinnerIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+	});
+}
+
+//#endregion
+//#region src/components/toast.tsx
+const toast = Toast.createToastManager();
+const anchoredToast = Toast.createToastManager();
+const TOAST_ICONS = {
+	error: CircleAlertIcon,
+	info: InfoIcon,
+	loading: SpinnerIcon,
+	success: CircleCheckIcon,
+	warning: TriangleAlertIcon
+};
+function ToastProvider({ children, position = "top-center", ...props }) {
+	return /* @__PURE__ */ jsxs(Toast.Provider, {
+		toastManager: toast,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Toasts, { position })]
+	});
+}
+function Toasts(props) {
+	const { position = "top-center" } = props;
+	const { toasts } = Toast.useToastManager();
+	const isTop = position.startsWith("top");
+	const hasLoadingToast = toasts.some((t) => t.type === "loading");
+	return /* @__PURE__ */ jsxs(Toast.Portal, {
+		"data-slot": "toast-portal",
+		children: [hasLoadingToast && /* @__PURE__ */ jsx("div", {
+			className: "bg-ppx-foreground/20 fixed inset-0 z-40 transition-opacity",
+			"data-slot": "toast-backdrop"
+		}), /* @__PURE__ */ jsx(Toast.Viewport, {
+			className: cn("max-w-90 fixed z-50 mx-auto flex w-[calc(100%-var(--toast-inset)*2)] [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]", "data-[position*=top]:top-(--toast-inset)", "data-[position*=bottom]:bottom-(--toast-inset)", "data-[position*=left]:left-(--toast-inset)", "data-[position*=right]:right-(--toast-inset)", "data-[position*=center]:left-1/2 data-[position*=center]:-translate-x-1/2"),
+			"data-position": position,
+			"data-slot": "toast-viewport",
+			children: toasts.map((toast$1) => {
+				const Icon = toast$1.type ? TOAST_ICONS[toast$1.type] : null;
+				return /* @__PURE__ */ jsx(Toast.Root, {
+					className: cn("h-(--toast-calc-height) bg-ppx-background text-ppx-foreground rounded-ppx-m absolute z-[calc(9999-var(--toast-index))] w-full select-none border bg-clip-padding shadow-lg [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-ppx-m)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)]", "data-[position*=right]:left-auto data-[position*=right]:right-0", "data-[position*=left]:left-0 data-[position*=left]:right-auto", "data-[position*=center]:left-0 data-[position*=center]:right-0", "data-[position*=top]:bottom-auto data-[position*=top]:top-0 data-[position*=top]:origin-top", "data-[position*=bottom]:bottom-0 data-[position*=bottom]:top-auto data-[position*=bottom]:origin-bottom", "after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full", "data-[position*=top]:after:top-full", "data-[position*=bottom]:after:bottom-full", "[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]", "data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]", "data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]", "data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-limited:opacity-0", "data-expanded:h-(--toast-height)", "data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]", "data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]", "data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:opacity-0", "data-[position*=top]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(-100%-var(--toast-inset)))]", "data-[position*=bottom]:data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]", toast$1.type === "success" && "bg-ppx-green-1", toast$1.type === "info" && "bg-ppx-primary-b-1", toast$1.type === "warning" && "bg-ppx-yellow-1", toast$1.type === "error" && "bg-ppx-red-1"),
+					"data-position": position,
+					swipeDirection: position.includes("center") ? [isTop ? "up" : "down"] : position.includes("left") ? ["left", isTop ? "up" : "down"] : ["right", isTop ? "up" : "down"],
+					toast: toast$1,
+					children: /* @__PURE__ */ jsxs(Toast.Content, {
+						className: "duration-250 data-behind:pointer-events-none data-behind:opacity-0 data-expanded:opacity-100 text-ppx-sm pointer-events-auto flex flex-col gap-2.5 overflow-hidden px-3.5 py-4 transition-opacity",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex gap-2",
+							children: [Icon && /* @__PURE__ */ jsx("div", {
+								className: "[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+								"data-slot": "toast-icon",
+								children: /* @__PURE__ */ jsx(Icon, { className: "in-data-[type=loading]:animate-spin in-data-[type=error]:text-ppx-red-5 in-data-[type=info]:text-ppx-primary-b-5 in-data-[type=success]:text-ppx-green-5 in-data-[type=warning]:text-ppx-yellow-5 in-data-[type=loading]:opacity-80" })
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-1.5",
+								children: [
+									/* @__PURE__ */ jsx(Toast.Title, {
+										className: "text-ppx-base font-medium leading-none",
+										"data-slot": "toast-title"
+									}),
+									/* @__PURE__ */ jsx(Toast.Description, {
+										className: "text-ppx-muted-foreground",
+										"data-slot": "toast-description"
+									}),
+									toast$1.type === "loading" ? null : /* @__PURE__ */ jsx(Toast.Close, {
+										className: buttonVariants({
+											size: "icon-sm",
+											variant: "ghost",
+											className: "absolute right-2 top-2 shrink-0"
+										}),
+										"aria-label": "Close",
+										children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+									})
+								]
+							})]
+						}), toast$1.actionProps && /* @__PURE__ */ jsx(Toast.Action, {
+							className: buttonVariants({ size: "sm" }),
+							"data-slot": "toast-action",
+							children: toast$1.actionProps.children
+						})]
+					})
+				}, toast$1.id);
+			})
+		})]
+	});
+}
+function AnchoredToastProvider({ children, ...props }) {
+	return /* @__PURE__ */ jsxs(Toast.Provider, {
+		toastManager: anchoredToast,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(AnchoredToasts, {})]
+	});
+}
+function AnchoredToasts() {
+	const { toasts } = Toast.useToastManager();
+	return /* @__PURE__ */ jsx(Toast.Portal, {
+		"data-slot": "toast-portal-anchored",
+		children: /* @__PURE__ */ jsx(Toast.Viewport, {
+			className: "outline-none",
+			"data-slot": "toast-viewport-anchored",
+			children: toasts.map((toast$1) => {
+				const Icon = toast$1.type ? TOAST_ICONS[toast$1.type] : null;
+				const tooltipStyle = toast$1.data?.tooltipStyle ?? false;
+				const positionerProps = toast$1.positionerProps;
+				if (!positionerProps?.anchor) return null;
+				return /* @__PURE__ */ jsx(Toast.Positioner, {
+					className: "z-50 max-w-[min(--spacing(64),var(--available-width))]",
+					"data-slot": "toast-positioner",
+					sideOffset: positionerProps.sideOffset ?? 4,
+					toast: toast$1,
+					children: /* @__PURE__ */ jsx(Toast.Root, {
+						className: cn("bg-ppx-background text-ppx-foreground data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 text-ppx-sm relative text-balance border bg-clip-padding transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)]", tooltipStyle ? "rounded-ppx-m shadow-md shadow-black/5 before:rounded-[calc(var(--radius-ppx-s)-1px)]" : "rounded-ppx-l shadow-lg before:rounded-[calc(var(--radius-ppx-m)-1px)]", toast$1.type === "success" && "bg-ppx-green-1", toast$1.type === "info" && "bg-ppx-primary-b-1", toast$1.type === "warning" && "bg-ppx-yellow-1", toast$1.type === "error" && "bg-ppx-red-1"),
+						"data-slot": "toast-popup",
+						toast: toast$1,
+						children: tooltipStyle ? /* @__PURE__ */ jsx(Toast.Content, {
+							className: "pointer-events-auto px-2 py-1",
+							children: /* @__PURE__ */ jsx(Toast.Title, { "data-slot": "toast-title" })
+						}) : /* @__PURE__ */ jsxs(Toast.Content, {
+							className: "text-ppx-sm pointer-events-auto relative flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex gap-2",
+								children: [Icon && /* @__PURE__ */ jsx("div", {
+									className: "[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+									"data-slot": "toast-icon",
+									children: /* @__PURE__ */ jsx(Icon, { className: "in-data-[type=loading]:animate-spin in-data-[type=error]:text-ppx-red-5 in-data-[type=info]:text-ppx-primary-b-5 in-data-[type=success]:text-ppx-green-5 in-data-[type=warning]:text-ppx-yellow-5 in-data-[type=loading]:opacity-80" })
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "flex flex-col gap-0.5",
+									children: [/* @__PURE__ */ jsx(Toast.Title, {
+										className: "text-ppx-base font-medium leading-none",
+										"data-slot": "toast-title"
+									}), /* @__PURE__ */ jsx(Toast.Description, {
+										className: "text-ppx-muted-foreground",
+										"data-slot": "toast-description"
+									})]
+								})]
+							}), toast$1.actionProps && /* @__PURE__ */ jsx(Toast.Action, {
+								className: buttonVariants({ size: "sm" }),
+								"data-slot": "toast-action",
+								children: toast$1.actionProps.children
+							})]
+						})
+					})
+				}, toast$1.id);
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/providers/px-ui-provider.tsx
+const PXUIContext = createContext(null);
+function PXUIProvider(props) {
+	return /* @__PURE__ */ jsx(PXUIContext.Provider, {
+		value: null,
+		children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(AnchoredToastProvider, { children: props.children }) })
+	});
+}
+
 //#endregion
 //#region src/components/label.tsx
 function Label({ className, ...props }) {
 	return /* @__PURE__ */ jsx("label", {
 		"data-slot": "label",
-		className: cn("gap-2 font-medium flex items-center text-ppx-sm leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		className: cn("text-ppx-sm peer-data-disabled:cursor-not-allowed peer-data-disabled:opacity-50 group-data-disabled:pointer-events-none group-data-disabled:opacity-50 flex select-none items-center gap-2 font-medium leading-none", className),
 		...props
 	});
 }
@@ -1966,9 +2245,9 @@ function AvatarGroup({ max = 4, avatars, className }) {
 				marginLeft: `-${parseInt(avatars[0].size ?? "100px") * .25}px`,
 				zIndex: 0
 			},
-			children: /* @__PURE__ */ jsxs(Root$10, {
+			children: /* @__PURE__ */ jsxs(Root$10, { children: [/* @__PURE__ */ jsx(Trigger$7, {
 				openOnHover: true,
-				children: [/* @__PURE__ */ jsx(Trigger$7, { children: /* @__PURE__ */ jsxs("div", {
+				children: /* @__PURE__ */ jsxs("div", {
 					className: cn("bg-ppx-neutral-3 text-ppx-neutral-18 hover:bg-ppx-neutral-4 flex cursor-pointer items-center justify-center font-medium transition-colors", avatars[0].variant === "rounded" ? "rounded-full" : "rounded-ppx-s"),
 					style: {
 						width: avatars[0].size ?? "100px",
@@ -1976,28 +2255,28 @@ function AvatarGroup({ max = 4, avatars, className }) {
 						fontSize: `${parseInt(avatars[0].size ?? "100px") * .3}px`
 					},
 					children: ["+", overflowAvatars.length]
-				}) }), /* @__PURE__ */ jsx(Content$5, {
-					className: "w-80",
-					positionerProps: {
-						align: "start",
-						side: "top"
-					},
-					children: /* @__PURE__ */ jsx("div", {
-						className: "max-h-64 space-y-2 overflow-y-auto",
-						children: overflowAvatars.map((avatar) => /* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-3 rounded-md p-2",
-							children: [/* @__PURE__ */ jsx(Avatar, {
-								...avatar,
-								size: "24px",
-								hideTooltip: true
-							}), /* @__PURE__ */ jsx("span", {
-								className: "text-ppx-neutral-18 text-sm font-medium",
-								children: avatar.name
-							})]
-						}, avatar.name))
-					})
-				})]
-			})
+				})
+			}), /* @__PURE__ */ jsx(Content$5, {
+				className: "w-80",
+				positionerProps: {
+					align: "start",
+					side: "top"
+				},
+				children: /* @__PURE__ */ jsx("div", {
+					className: "max-h-64 space-y-2 overflow-y-auto",
+					children: overflowAvatars.map((avatar) => /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-3 rounded-md p-2",
+						children: [/* @__PURE__ */ jsx(Avatar, {
+							...avatar,
+							size: "24px",
+							hideTooltip: true
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-ppx-neutral-18 text-sm font-medium",
+							children: avatar.name
+						})]
+					}, avatar.name))
+				})
+			})] })
 		})]
 	}) });
 }
@@ -2007,11 +2286,11 @@ function AvatarGroup({ max = 4, avatars, className }) {
 function Switch({ className, size, ...props }) {
 	return /* @__PURE__ */ jsx(Switch$1.Root, {
 		"data-slot": "switch",
-		className: cn("peer shadow-xs inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:ring-3 focus-visible:ring-ppx-neutral-17/30 disabled:cursor-not-allowed disabled:opacity-50 data-checked:bg-ppx-primary-5 data-unchecked:bg-ppx-neutral-4", size === "sm" && "h-4 w-8", size === void 0 && "h-5 w-10", size === "lg" && "h-6 w-12", className),
+		className: cn("shadow-xs focus-visible:ring-3 focus-visible:ring-ppx-neutral-17/30 data-checked:bg-ppx-primary-5 data-unchecked:bg-ppx-neutral-4 data-disabled:cursor-not-allowed data-disabled:opacity-50 peer inline-flex shrink-0 items-center rounded-full border border-transparent outline-none transition-all", size === "sm" && "h-4 w-8", size === void 0 || size === "default" ? "h-5 w-10" : "", size === "lg" && "h-6 w-12", className),
 		...props,
 		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
 			"data-slot": "switch-thumb",
-			className: cn("ease-in-out pointer-events-none block rounded-full bg-ppx-neutral-1 ring-0 transition-transform duration-300", size === "sm" && "size-3.5 data-checked:translate-x-[calc(100%+2px)]", size === void 0 && "size-4 data-checked:translate-x-[calc(100%+5px)] data-unchecked:translate-x-px", size === "lg" && "size-5 data-checked:translate-x-[calc(100%+5px)] data-unchecked:translate-x-px")
+			className: cn("bg-ppx-neutral-1 pointer-events-none block rounded-full ring-0 transition-transform duration-300 ease-in-out", size === "sm" && "data-checked:translate-x-[calc(100%+2px)] size-3.5", size === void 0 || size === "default" ? "data-checked:translate-x-[calc(100%+5px)] data-unchecked:translate-x-px size-4" : "", size === "lg" && "data-checked:translate-x-[calc(100%+5px)] data-unchecked:translate-x-px size-5")
 		})
 	});
 }
@@ -2126,23 +2405,6 @@ function RetryIcon(props) {
 	});
 }
 
-//#endregion
-//#region src/icons/spinner-icon.tsx
-function SpinnerIcon(props) {
-	return /* @__PURE__ */ jsx("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		...props,
-		className: cn("shrink-0", props.className),
-		children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
-	});
-}
-
 //#endregion
 //#region src/icons/upload-icon.tsx
 function UploadIcon(props) {
@@ -2896,6 +3158,23 @@ const FileUpload = {
 	ImageGridItem
 };
 
+//#endregion
+//#region src/hooks/use-mobile.ts
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+	const [isMobile, setIsMobile] = React$1.useState(void 0);
+	React$1.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return !!isMobile;
+}
+
 //#endregion
 //#region src/index.ts
 var src_exports = /* @__PURE__ */ __export({
@@ -2918,6 +3197,7 @@ var src_exports = /* @__PURE__ */ __export({
 	InputGroup: () => input_group_exports,
 	Label: () => Label,
 	Menu: () => menu_exports,
+	PXUIProvider: () => PXUIProvider,
 	Popover: () => popover_exports,
 	Progress: () => progress_exports,
 	RadioGroup: () => radio_group_exports,
@@ -2930,15 +3210,18 @@ var src_exports = /* @__PURE__ */ __export({
 	Textarea: () => Textarea,
 	Tooltip: () => tooltip_exports,
 	UploadIcon: () => UploadIcon,
+	anchoredToast: () => anchoredToast,
 	buttonVariants: () => buttonVariants,
 	cn: () => cn,
 	defineLoadOptions: () => defineLoadOptions,
 	formatBytes: () => formatBytes,
+	toast: () => toast,
 	useAsyncOptions: () => useAsyncOptions,
 	useFileUpload: () => useFileUpload,
-	useIntersectionObserver: () => useIntersectionObserver
+	useIntersectionObserver: () => useIntersectionObserver,
+	useIsMobile: () => useIsMobile
 });
 
 //#endregion
-export { Avatar, AvatarGroup, AvatarImpl, block_checkbox_group_exports as BlockCheckboxGroup, block_radio_group_exports as BlockRadioGroup, breadcrumbs_exports as Breadcrumbs, Button, Calendar, Checkbox, collapsible_exports as Collapsible, combobox_exports as Combobox, DatePicker, dialog_exports as Dialog, FileIcon, FileUpload, Input, input_group_exports as InputGroup, Label, menu_exports as Menu, popover_exports as Popover, progress_exports as Progress, radio_group_exports as RadioGroup, segmented_control_exports as SegmentedControl, select_exports as Select, Separator, Spinner, Switch, tabs_exports as Tabs, Textarea, tooltip_exports as Tooltip, UploadIcon, buttonVariants, cn, defineLoadOptions, formatBytes, useAsyncOptions, useFileUpload, useIntersectionObserver };
+export { Avatar, AvatarGroup, AvatarImpl, block_checkbox_group_exports as BlockCheckboxGroup, block_radio_group_exports as BlockRadioGroup, breadcrumbs_exports as Breadcrumbs, Button, Calendar, Checkbox, collapsible_exports as Collapsible, combobox_exports as Combobox, DatePicker, dialog_exports as Dialog, FileIcon, FileUpload, Input, input_group_exports as InputGroup, Label, menu_exports as Menu, PXUIProvider, popover_exports as Popover, progress_exports as Progress, radio_group_exports as RadioGroup, segmented_control_exports as SegmentedControl, select_exports as Select, Separator, Spinner, Switch, tabs_exports as Tabs, Textarea, tooltip_exports as Tooltip, UploadIcon, anchoredToast, buttonVariants, cn, defineLoadOptions, formatBytes, toast, useAsyncOptions, useFileUpload, useIntersectionObserver, useIsMobile };
 //# sourceMappingURL=index.js.map