@espressif/dashboard-ui-components 1.9.1 → 1.11.0

package/CHANGELOG.md

@@ -4,6 +4,185 @@ All notable changes to this project are documented here. The format is based on
 [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres
 to [Semantic Versioning](https://semver.org/).
 
+## [1.11.0] - 2026-10-14
+
+### Changed
+- **Build output is now one ESM file per source module**, so consumer
+  bundlers drop the components an app never imports. Previously the library
+  shipped as a few large shared chunks, and importing one component pulled in
+  nearly all of them: a consumer importing only `Dialog` bundled about 2.2 MB
+  of minified library code, now about 35 KB. Apps that use most of the
+  library see a smaller gain in total size, but its code now loads with the
+  routes that use it instead of up front: in the RainMaker dashboard the
+  first-load JS dropped by about 44 % (gzip).
+
+  **Upgrading:** no code changes. Import paths and the `exports` map are
+  unchanged; rebuild the app to get the smaller output. To benefit, use named
+  imports (`import { Dialog } from "…/components"`) in a production build with
+  a bundler that tree-shakes ESM (Vite, webpack 5, Next.js, Rollup, esbuild).
+  The internal `dist/chunk-*.js` files are gone; they were never part of the
+  supported API.
+- **`'use client'` directives are kept** on each module. The old build
+  stripped them, so Next.js App Router apps no longer need their own
+  `'use client'` wrapper around the library's client components.
+
+### Removed
+- **`Illustration`** — the unused `add-to-group`, `create-new-group`, `chip`,
+  `new-ota` and `secured-key` illustrations and their SVG assets. The
+  remaining types are `no-search-results` (the `NoDataCard` / `DataTable`
+  empty-state default), `rm-data-download` and `rm-dashboard-update`.
+  `IllustrationType`, `illustrationRegistry` and `illustrationsById` shrink
+  to match, and the `Illustration` chunk carries about 80 KB less SVG.
+  Passing a removed `type` is now a type error; at runtime it renders
+  nothing, as an unknown `type` always has. Released as a minor version
+  because no known consumer uses the removed types.
+- **`Illustration`** — the unused `add-to-group`, `create-new-group`, `chip`,
+  `new-ota` and `secured-key` illustrations and their SVG assets. The
+  remaining types are `no-search-results` (the `NoDataCard` / `DataTable`
+  empty-state default), `rm-data-download` and `rm-dashboard-update`.
+  `IllustrationType`, `illustrationRegistry` and `illustrationsById` shrink
+  to match, and the `Illustration` chunk carries about 80 KB less SVG.
+  Passing a removed `type` is now a type error; at runtime it renders
+  nothing, as an unknown `type` always has.
+
+### Fixed
+- **`EntryLayout`** — the default background image now shows in consumer
+  apps. The built library referenced it as a plain `"./assets/…webp"` string,
+  which consumer bundlers don't treat as an asset: the file was left out of
+  the app's build and the browser looked for it relative to the page URL. It
+  is now referenced with `new URL(…, import.meta.url)`, which Vite, webpack 5
+  and Next.js copy into the app's output. Apps that pass `backgroundImageUrl`
+  or `disableBackgroundImage` are unaffected. No API change.
+
+### Internal
+Nothing in this section affects the published package.
+
+- The library's JavaScript is built by Vite 8 in library mode with
+  `preserveModules` (`vite.lib.config.ts`); tsup now emits only the type
+  declarations and the Tailwind preset. `lottie-react` / `lottie-web` stay
+  bundled, under `dist/_vendor/`, to keep the Vite 8 interop fix from 1.1.3.
+- New `npm run size` bundle-size check (`scripts/check-bundle-size.mjs`),
+  run in CI after the build. It bundles typical consumer imports against
+  `dist/` and fails when one exceeds its gzip budget, so a change that
+  breaks tree-shaking can't land unnoticed.
+- `vite` and `esbuild` are now explicit dev dependencies.
+- Demo: the `DataTable` custom empty-state example uses `rm-data-download`
+  instead of the removed `chip` illustration.
+
+## [1.10.0] - 2026-10-11
+
+### Changed
+- **`TabsList`** — below 768px the list takes the full width, so tabs that
+  fit share the row evenly instead of sitting at its start. Tabs that don't
+  fit still scroll sideways as before. From 768px up the list stays as wide as
+  its tabs. `fullWidth={false}` keeps the old behaviour on small screens.
+- **`ListDetails`** — below 768px the items are now picked from a menu
+  button showing the selected title, between previous/next arrows, instead of
+  the sideways-scrolling strip. The menu lists every item with the `footer` at
+  its bottom, so footer actions such as "Load more" are reachable on phones
+  (the strip hid the footer); it stays open while the footer adds items.
+  `mobileNavigation="strip"` restores the strip. From 768px up the layout is
+  unchanged.
+- **`SearchBox`, `AdvancedSearchBox`** — the search text is 16px below 768px
+  (was 12px for `size="sm"`, 14px otherwise), matching `Input`. iOS Safari
+  zooms the page into a focused field with smaller text. From 768px up the
+  sizes are unchanged.
+- **`PageContainer`** — below the `md` breakpoint (768px), the header region
+  (back link, `heading`, `actions`) is no longer always pinned. It scrolls
+  away with the content, so phones get the full screen height for the page,
+  and slides back in, pinned at the top, when the user scrolls up by 24px
+  (see `revealHeadingOnScrollUp`). From 768px up it stays pinned as before.
+  `elevateHeading` adds its shadow only where the header is pinned.
+- **`PageContainer`, `ContentContainer`** — padding is `p-3` below 768px and
+  `p-6` from 768px up (was `p-6` everywhere), so phones keep more of their
+  width for content. A `className` padding override still wins.
+- **`PageContainer`** — the heading row wraps: `actions` that don't fit beside
+  the heading move onto their own line, end-aligned, instead of squeezing the
+  heading.
+- **`Sheet`** — left and right sheets are capped to the viewport width
+  (`max-w-full`); they stay 350px wide where that fits.
+- **`Toast`** — minimum and maximum widths are capped to the viewport width
+  minus 2rem, so a toast no longer runs off a 320–360px screen.
+- **`TransferList`** — below 768px the two lists stack, and the move buttons
+  sit in a row between them with their arrows pointing down and up.
+- **`DataTable`** — every row now has the named group `group/data-table-row`
+  (clickable rows keep their unnamed `group` too).
+
+### Added
+- **`TabsList`** — `fullWidth` (default `true`): stretch the list across the
+  row below 768px.
+- **`IconTextActionCard`, `Alert`** — `actionsPlacement="below"` puts the
+  `actions` on their own line below the text, end-aligned, at every width.
+  The default `"auto"` keeps them beside the text when they fit and wraps them
+  below otherwise. On a dismissible `Alert` the close button shares the
+  actions' line.
+- **`ListDetails`** — `mobileNavigation` (`"dropdown"` default, or
+  `"strip"`) and `labels` (`previousItem`, `nextItem`, `chooseItem`) for the
+  small-screen picker's accessible names.
+- **`PageContainer`** — `stickyHeadingOnMobile` keeps the header pinned below
+  768px too, restoring the previous behaviour for a page that needs it.
+- **`PageContainer`** — `revealHeadingOnScrollUp` (default `true`) slides the
+  header back in, pinned at the top, when the user scrolls up by 24px on a
+  phone, and slides it away again on the next scroll down. Moving keyboard
+  focus into the header also reveals it, and it stays while a menu or popover
+  inside it is open. Animation follows `prefers-reduced-motion`. Set it to
+  `false` to let the header scroll away for good. Ignored when
+  `stickyHeadingOnMobile` is set.
+- **`Button`** — `iconOnlyBelow="sm" | "md"` shows only the icons below that
+  viewport breakpoint. The label stays in the DOM as screen-reader text, so it
+  is still the button's accessible name. Without an `endIcon` the button turns
+  square (36px, 40px for `size="lg"`); with one (a menu chevron) only the
+  padding tightens.
+- **`FiltersBar`** — lays out a list page's `search`, `actions` and `filters`.
+  When the bar is narrower than 768px, search and actions share the first row
+  and the filters sit in a second row that scrolls sideways; from 768px up
+  everything shares one wrapping row. Without `filters` it is a single row.
+  `searchClassName` replaces the default search width.
+- **`CopiableText`** — `hideActionsOnTouch` hides the copy button (and any
+  `actions`) on touch screens. Use it in table rows that open a details page
+  offering the same copy action, so a tap on the text opens the row.
+- **`DataTableRowActions`** — wrap a row's action cell in it. The actions hide
+  until the row is hovered, but only on devices that can hover, so touch
+  screens always show them; keyboard focus and an open menu or dialog keep
+  them visible. Its clicks and key presses don't reach `onRowClick`, so Enter
+  on an action no longer also opens the row. `alwaysVisible` and
+  `alwaysVisibleBelow="md"` turn the hiding off everywhere or on narrow
+  viewports.
+
+### Fixed
+- **`ComposedChart`** — a series without `yAxisId` no longer crashes the chart
+  ("Invariant failed"); it is plotted against the left axis, the documented
+  default.
+- **`Dialog`, `FullscreenDialog`** — the close button stacks above the
+  dialog's content, so a sticky header inside the content (e.g. a wizard's
+  step band with `z-index`) can no longer cover it.
+- **`IconTextActionCard`** (`showActionsOnlyOnHover`), **`CopiableText`**,
+  **`KeyValueManager`** table — actions that appeared only on hover were
+  invisible on touch screens. They are now hidden only on devices that can
+  hover, and `IconTextActionCard` also shows them while focus is inside.
+- **`CopiableText`** — on touch screens the copy button now sits beside the
+  text, which truncates before it, instead of covering the end of the text.
+  On devices that can hover it still appears over the text on hover.
+- **`SectionCard`** — header `actions` that don't fit beside the title now
+  wrap onto their own line instead of squeezing the title down to one
+  character per line. The title block keeps at least 12rem (icon included)
+  before the actions wrap, and a wrapped actions line isn't padded twice.
+  Headers whose actions fit are laid out exactly as before.
+- **Charts** — the legend wraps onto more lines when it's wider than the
+  chart, instead of overflowing with its first and last items clipped. Give a
+  fixed-height chart room for the extra lines on narrow screens.
+- **`DateRangePicker`** — when the custom-range calendar fits beside the
+  preset menu on neither side (phones, narrow windows), or would run past the
+  bottom of the screen (phones in landscape), it now opens inside the menu in
+  place of the presets, one month wide, capped to the screen height and
+  scrollable, instead of off screen.
+  Tapping Custom again goes back to the presets. On touch screens a tap on
+  Custom now opens the calendar; hover-to-open is limited to a mouse, since
+  a tap's emulated hover opened it and the tap itself closed it again.
+- **`IconTextActionCard`, `SimpleClickableCard`** — `truncateTitle` and
+  `truncateDescription` now end the text in an ellipsis; the text was clipped
+  without one.
+
 ## [1.9.1] - 2026-10-09
 
 ### Added

package/dist/_vendor/@radix-ui/primitive/dist/index.js

@@ -0,0 +1,9 @@
+typeof window !== "undefined" && window.document && window.document.createElement;
+function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+	return function handleEvent(event) {
+		originalEventHandler?.(event);
+		if (checkForDefaultPrevented === false || !event.defaultPrevented) return ourEventHandler?.(event);
+	};
+}
+//#endregion
+export { composeEventHandlers };

package/dist/_vendor/@radix-ui/react-checkbox/dist/index.js

@@ -0,0 +1,185 @@
+"use client";
+import { useComposedRefs } from "../../react-compose-refs/dist/index.js";
+import { createContextScope } from "../../react-context/dist/index.js";
+import { composeEventHandlers } from "../../primitive/dist/index.js";
+import { useControllableState } from "../../react-use-controllable-state/dist/index.js";
+import { usePrevious } from "../../react-use-previous/dist/index.js";
+import { useSize } from "../../react-use-size/dist/index.js";
+import { Presence } from "../../react-presence/dist/index.js";
+import { Primitive } from "../../react-primitive/dist/index.js";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region node_modules/@radix-ui/react-checkbox/dist/index.mjs
+var CHECKBOX_NAME = "Checkbox";
+var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
+var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
+function CheckboxProvider(props) {
+	const { __scopeCheckbox, checked: checkedProp, children, defaultChecked, disabled, form, name, onCheckedChange, required, value = "on", internal_do_not_use_render } = props;
+	const [checked, setChecked] = useControllableState({
+		prop: checkedProp,
+		defaultProp: defaultChecked ?? false,
+		onChange: onCheckedChange,
+		caller: CHECKBOX_NAME
+	});
+	const [control, setControl] = React$1.useState(null);
+	const [bubbleInput, setBubbleInput] = React$1.useState(null);
+	const hasConsumerStoppedPropagationRef = React$1.useRef(false);
+	const isFormControl = control ? !!form || !!control.closest("form") : true;
+	const context = {
+		checked,
+		disabled,
+		setChecked,
+		control,
+		setControl,
+		name,
+		form,
+		value,
+		hasConsumerStoppedPropagationRef,
+		required,
+		defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,
+		isFormControl,
+		bubbleInput,
+		setBubbleInput
+	};
+	return /* @__PURE__ */ jsx(CheckboxProviderImpl, {
+		scope: __scopeCheckbox,
+		...context,
+		children: isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
+	});
+}
+var TRIGGER_NAME = "CheckboxTrigger";
+var CheckboxTrigger = React$1.forwardRef(({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef) => {
+	const { control, value, disabled, checked, required, setControl, setChecked, hasConsumerStoppedPropagationRef, isFormControl, bubbleInput } = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);
+	const composedRefs = useComposedRefs(forwardedRef, setControl);
+	const initialCheckedStateRef = React$1.useRef(checked);
+	React$1.useEffect(() => {
+		const form = control?.form;
+		if (form) {
+			const reset = () => setChecked(initialCheckedStateRef.current);
+			form.addEventListener("reset", reset);
+			return () => form.removeEventListener("reset", reset);
+		}
+	}, [control, setChecked]);
+	return /* @__PURE__ */ jsx(Primitive.button, {
+		type: "button",
+		role: "checkbox",
+		"aria-checked": isIndeterminate(checked) ? "mixed" : checked,
+		"aria-required": required,
+		"data-state": getState(checked),
+		"data-disabled": disabled ? "" : void 0,
+		disabled,
+		value,
+		...checkboxProps,
+		ref: composedRefs,
+		onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+			if (event.key === "Enter") event.preventDefault();
+		}),
+		onClick: composeEventHandlers(onClick, (event) => {
+			setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
+			if (bubbleInput && isFormControl) {
+				hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+				if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+			}
+		})
+	});
+});
+CheckboxTrigger.displayName = TRIGGER_NAME;
+var Checkbox = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeCheckbox, name, checked, defaultChecked, required, disabled, value, onCheckedChange, form, ...checkboxProps } = props;
+	return /* @__PURE__ */ jsx(CheckboxProvider, {
+		__scopeCheckbox,
+		checked,
+		defaultChecked,
+		disabled,
+		required,
+		onCheckedChange,
+		name,
+		form,
+		value,
+		internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CheckboxTrigger, {
+			...checkboxProps,
+			ref: forwardedRef,
+			__scopeCheckbox
+		}), isFormControl && /* @__PURE__ */ jsx(CheckboxBubbleInput, { __scopeCheckbox })] })
+	});
+});
+Checkbox.displayName = CHECKBOX_NAME;
+var INDICATOR_NAME = "CheckboxIndicator";
+var CheckboxIndicator = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
+	const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
+	return /* @__PURE__ */ jsx(Presence, {
+		present: forceMount || isIndeterminate(context.checked) || context.checked === true,
+		children: /* @__PURE__ */ jsx(Primitive.span, {
+			"data-state": getState(context.checked),
+			"data-disabled": context.disabled ? "" : void 0,
+			...indicatorProps,
+			ref: forwardedRef,
+			style: {
+				pointerEvents: "none",
+				...props.style
+			}
+		})
+	});
+});
+CheckboxIndicator.displayName = INDICATOR_NAME;
+var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
+var CheckboxBubbleInput = React$1.forwardRef(({ __scopeCheckbox, ...props }, forwardedRef) => {
+	const { control, hasConsumerStoppedPropagationRef, checked, defaultChecked, required, disabled, name, value, form, bubbleInput, setBubbleInput } = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);
+	const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);
+	const prevChecked = usePrevious(checked);
+	const controlSize = useSize(control);
+	React$1.useEffect(() => {
+		const input = bubbleInput;
+		if (!input) return;
+		const inputProto = window.HTMLInputElement.prototype;
+		const setChecked = Object.getOwnPropertyDescriptor(inputProto, "checked").set;
+		const bubbles = !hasConsumerStoppedPropagationRef.current;
+		if (prevChecked !== checked && setChecked) {
+			const event = new Event("click", { bubbles });
+			input.indeterminate = isIndeterminate(checked);
+			setChecked.call(input, isIndeterminate(checked) ? false : checked);
+			input.dispatchEvent(event);
+		}
+	}, [
+		bubbleInput,
+		prevChecked,
+		checked,
+		hasConsumerStoppedPropagationRef
+	]);
+	const defaultCheckedRef = React$1.useRef(isIndeterminate(checked) ? false : checked);
+	return /* @__PURE__ */ jsx(Primitive.input, {
+		type: "checkbox",
+		"aria-hidden": true,
+		defaultChecked: defaultChecked ?? defaultCheckedRef.current,
+		required,
+		disabled,
+		name,
+		value,
+		form,
+		...props,
+		tabIndex: -1,
+		ref: composedRefs,
+		style: {
+			...props.style,
+			...controlSize,
+			position: "absolute",
+			pointerEvents: "none",
+			opacity: 0,
+			margin: 0,
+			transform: "translateX(-100%)"
+		}
+	});
+});
+CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
+function isFunction(value) {
+	return typeof value === "function";
+}
+function isIndeterminate(checked) {
+	return checked === "indeterminate";
+}
+function getState(checked) {
+	return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+//#endregion
+export { Checkbox, Checkbox as Root, CheckboxIndicator, CheckboxIndicator as Indicator, CheckboxBubbleInput as unstable_BubbleInput, CheckboxBubbleInput as unstable_CheckboxBubbleInput, CheckboxProvider as unstable_CheckboxProvider, CheckboxProvider as unstable_Provider, CheckboxTrigger as unstable_CheckboxTrigger, CheckboxTrigger as unstable_Trigger };

package/dist/_vendor/@radix-ui/react-compose-refs/dist/index.js

@@ -0,0 +1,28 @@
+import * as React$1 from "react";
+//#region node_modules/@radix-ui/react-compose-refs/dist/index.mjs
+function setRef(ref, value) {
+	if (typeof ref === "function") return ref(value);
+	else if (ref !== null && ref !== void 0) ref.current = value;
+}
+function composeRefs(...refs) {
+	return (node) => {
+		let hasCleanup = false;
+		const cleanups = refs.map((ref) => {
+			const cleanup = setRef(ref, node);
+			if (!hasCleanup && typeof cleanup == "function") hasCleanup = true;
+			return cleanup;
+		});
+		if (hasCleanup) return () => {
+			for (let i = 0; i < cleanups.length; i++) {
+				const cleanup = cleanups[i];
+				if (typeof cleanup == "function") cleanup();
+				else setRef(refs[i], null);
+			}
+		};
+	};
+}
+function useComposedRefs(...refs) {
+	return React$1.useCallback(composeRefs(...refs), refs);
+}
+//#endregion
+export { composeRefs, useComposedRefs };

package/dist/_vendor/@radix-ui/react-context/dist/index.js

@@ -0,0 +1,68 @@
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region node_modules/@radix-ui/react-context/dist/index.mjs
+function createContextScope(scopeName, createContextScopeDeps = []) {
+	let defaultContexts = [];
+	function createContext3(rootComponentName, defaultContext) {
+		const BaseContext = React$1.createContext(defaultContext);
+		BaseContext.displayName = rootComponentName + "Context";
+		const index = defaultContexts.length;
+		defaultContexts = [...defaultContexts, defaultContext];
+		const Provider = (props) => {
+			const { scope, children, ...context } = props;
+			const Context = scope?.[scopeName]?.[index] || BaseContext;
+			const value = React$1.useMemo(() => context, Object.values(context));
+			return /* @__PURE__ */ jsx(Context.Provider, {
+				value,
+				children
+			});
+		};
+		Provider.displayName = rootComponentName + "Provider";
+		function useContext2(consumerName, scope) {
+			const Context = scope?.[scopeName]?.[index] || BaseContext;
+			const context = React$1.useContext(Context);
+			if (context) return context;
+			if (defaultContext !== void 0) return defaultContext;
+			throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+		}
+		return [Provider, useContext2];
+	}
+	const createScope = () => {
+		const scopeContexts = defaultContexts.map((defaultContext) => {
+			return React$1.createContext(defaultContext);
+		});
+		return function useScope(scope) {
+			const contexts = scope?.[scopeName] || scopeContexts;
+			return React$1.useMemo(() => ({ [`__scope${scopeName}`]: {
+				...scope,
+				[scopeName]: contexts
+			} }), [scope, contexts]);
+		};
+	};
+	createScope.scopeName = scopeName;
+	return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)];
+}
+function composeContextScopes(...scopes) {
+	const baseScope = scopes[0];
+	if (scopes.length === 1) return baseScope;
+	const createScope = () => {
+		const scopeHooks = scopes.map((createScope2) => ({
+			useScope: createScope2(),
+			scopeName: createScope2.scopeName
+		}));
+		return function useComposedScopes(overrideScopes) {
+			const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
+				const currentScope = useScope(overrideScopes)[`__scope${scopeName}`];
+				return {
+					...nextScopes2,
+					...currentScope
+				};
+			}, {});
+			return React$1.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+		};
+	};
+	createScope.scopeName = baseScope.scopeName;
+	return createScope;
+}
+//#endregion
+export { createContextScope };

package/dist/_vendor/@radix-ui/react-presence/dist/index.js

@@ -0,0 +1,127 @@
+"use client";
+import { useLayoutEffect as useLayoutEffect2 } from "../../react-use-layout-effect/dist/index.js";
+import * as React2 from "react";
+//#region node_modules/@radix-ui/react-presence/dist/index.mjs
+function useStateMachine(initialState, machine) {
+	return React2.useReducer((state, event) => {
+		return machine[state][event] ?? state;
+	}, initialState);
+}
+var Presence = (props) => {
+	const { present, children } = props;
+	const presence = usePresence(present);
+	const child = typeof children === "function" ? children({ present: presence.isPresent }) : React2.Children.only(children);
+	const ref = useStableComposedRefs(presence.ref, getElementRef(child));
+	return typeof children === "function" || presence.isPresent ? React2.cloneElement(child, { ref }) : null;
+};
+Presence.displayName = "Presence";
+function usePresence(present) {
+	const [node, setNode] = React2.useState();
+	const stylesRef = React2.useRef(null);
+	const prevPresentRef = React2.useRef(present);
+	const prevAnimationNameRef = React2.useRef("none");
+	const [state, send] = useStateMachine(present ? "mounted" : "unmounted", {
+		mounted: {
+			UNMOUNT: "unmounted",
+			ANIMATION_OUT: "unmountSuspended"
+		},
+		unmountSuspended: {
+			MOUNT: "mounted",
+			ANIMATION_END: "unmounted"
+		},
+		unmounted: { MOUNT: "mounted" }
+	});
+	React2.useEffect(() => {
+		const currentAnimationName = getAnimationName(stylesRef.current);
+		prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+	}, [state]);
+	useLayoutEffect2(() => {
+		const styles = stylesRef.current;
+		const wasPresent = prevPresentRef.current;
+		if (wasPresent !== present) {
+			const prevAnimationName = prevAnimationNameRef.current;
+			const currentAnimationName = getAnimationName(styles);
+			if (present) send("MOUNT");
+			else if (currentAnimationName === "none" || styles?.display === "none") send("UNMOUNT");
+			else if (wasPresent && prevAnimationName !== currentAnimationName) send("ANIMATION_OUT");
+			else send("UNMOUNT");
+			prevPresentRef.current = present;
+		}
+	}, [present, send]);
+	useLayoutEffect2(() => {
+		if (node) {
+			let timeoutId;
+			const ownerWindow = node.ownerDocument.defaultView ?? window;
+			const handleAnimationEnd = (event) => {
+				const isCurrentAnimation = getAnimationName(stylesRef.current).includes(CSS.escape(event.animationName));
+				if (event.target === node && isCurrentAnimation) {
+					send("ANIMATION_END");
+					if (!prevPresentRef.current) {
+						const currentFillMode = node.style.animationFillMode;
+						node.style.animationFillMode = "forwards";
+						timeoutId = ownerWindow.setTimeout(() => {
+							if (node.style.animationFillMode === "forwards") node.style.animationFillMode = currentFillMode;
+						});
+					}
+				}
+			};
+			const handleAnimationStart = (event) => {
+				if (event.target === node) prevAnimationNameRef.current = getAnimationName(stylesRef.current);
+			};
+			node.addEventListener("animationstart", handleAnimationStart);
+			node.addEventListener("animationcancel", handleAnimationEnd);
+			node.addEventListener("animationend", handleAnimationEnd);
+			return () => {
+				ownerWindow.clearTimeout(timeoutId);
+				node.removeEventListener("animationstart", handleAnimationStart);
+				node.removeEventListener("animationcancel", handleAnimationEnd);
+				node.removeEventListener("animationend", handleAnimationEnd);
+			};
+		} else send("ANIMATION_END");
+	}, [node, send]);
+	return {
+		isPresent: ["mounted", "unmountSuspended"].includes(state),
+		ref: React2.useCallback((node2) => {
+			stylesRef.current = node2 ? getComputedStyle(node2) : null;
+			setNode(node2);
+		}, [])
+	};
+}
+function setRef(ref, value) {
+	if (typeof ref === "function") return ref(value);
+	else if (ref !== null && ref !== void 0) ref.current = value;
+}
+function useStableComposedRefs(...refs) {
+	const refsRef = React2.useRef(refs);
+	refsRef.current = refs;
+	return React2.useCallback((node) => {
+		const currentRefs = refsRef.current;
+		let hasCleanup = false;
+		const cleanups = currentRefs.map((ref) => {
+			const cleanup = setRef(ref, node);
+			if (!hasCleanup && typeof cleanup === "function") hasCleanup = true;
+			return cleanup;
+		});
+		if (hasCleanup) return () => {
+			for (let i = 0; i < cleanups.length; i++) {
+				const cleanup = cleanups[i];
+				if (typeof cleanup === "function") cleanup();
+				else setRef(currentRefs[i], null);
+			}
+		};
+	}, []);
+}
+function getAnimationName(styles) {
+	return styles?.animationName || "none";
+}
+function getElementRef(element) {
+	let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+	let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+	if (mayWarn) return element.ref;
+	getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+	mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+	if (mayWarn) return element.props.ref;
+	return element.props.ref || element.ref;
+}
+//#endregion
+export { Presence };

package/dist/_vendor/@radix-ui/react-primitive/dist/index.js

@@ -0,0 +1,42 @@
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { createSlot } from "@radix-ui/react-slot";
+import "react-dom";
+//#region node_modules/@radix-ui/react-primitive/dist/index.mjs
+var Primitive = [
+	"a",
+	"button",
+	"div",
+	"form",
+	"h2",
+	"h3",
+	"img",
+	"input",
+	"label",
+	"li",
+	"nav",
+	"ol",
+	"p",
+	"select",
+	"span",
+	"svg",
+	"ul"
+].reduce((primitive, node) => {
+	const Slot = createSlot(`Primitive.${node}`);
+	const Node = React$1.forwardRef((props, forwardedRef) => {
+		const { asChild, ...primitiveProps } = props;
+		const Comp = asChild ? Slot : node;
+		if (typeof window !== "undefined") window[Symbol.for("radix-ui")] = true;
+		return /* @__PURE__ */ jsx(Comp, {
+			...primitiveProps,
+			ref: forwardedRef
+		});
+	});
+	Node.displayName = `Primitive.${node}`;
+	return {
+		...primitive,
+		[node]: Node
+	};
+}, {});
+//#endregion
+export { Primitive };