@a-type/ui 1.1.18 → 1.1.20

package/dist/esm/hooks/useVirtualKeyboardBehavior.js

@@ -1,6 +1,6 @@
 // @unocss-include
 import { useEffect } from 'react';
-export function useVirtualKeyboardBehavior(behavior = 'overlay') {
+export function useVirtualKeyboardBehavior(behavior) {
     useEffect(() => {
         if ('virtualKeyboard' in navigator) {
             // @ts-ignore

package/dist/esm/hooks/useVirtualKeyboardBehavior.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVirtualKeyboardBehavior.js","sourceRoot":"","sources":["../../../src/hooks/useVirtualKeyboardBehavior.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,UAAU,0BAA0B,CACzC,WAAmC,SAAS;IAE5C,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,iBAAiB,IAAI,SAAS,EAAE;YACnC,aAAa;YACb,SAAS,CAAC,eAAe,CAAC,eAAe,GAAG,QAAQ,KAAK,SAAS,CAAC;SACnE;IACF,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAChB,CAAC"}
+{"version":3,"file":"useVirtualKeyboardBehavior.js","sourceRoot":"","sources":["../../../src/hooks/useVirtualKeyboardBehavior.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,UAAU,0BAA0B,CAAC,QAAgC;IAC1E,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,iBAAiB,IAAI,SAAS,EAAE;YACnC,aAAa;YACb,SAAS,CAAC,eAAe,CAAC,eAAe,GAAG,QAAQ,KAAK,SAAS,CAAC;SACnE;IACF,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAChB,CAAC"}

package/dist/esm/hooks/useVisualViewportOffset.d.ts

@@ -2,3 +2,4 @@
  * Applies bottom offset px as a CSS custom property to the document root.
  */
 export declare function useVisualViewportOffset(disable?: boolean): void;
+export declare function useIsKeyboardOpen(): boolean;

package/dist/esm/hooks/useVisualViewportOffset.js

@@ -1,27 +1,76 @@
 // @unocss-include
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { useStableCallback } from './useStableCallback.js';
+import { useConfig } from '../components/provider.js';
 /**
  * Applies bottom offset px as a CSS custom property to the document root.
  */
 export function useVisualViewportOffset(disable) {
+    useReactToViewportChanges((viewport) => {
+        document.documentElement.style.setProperty('--viewport-bottom-offset', `${window.innerHeight - viewport.height - viewport.offsetTop}px`);
+        document.documentElement.style.setProperty('--viewport-height', `${viewport.height}px`);
+        document.documentElement.style.setProperty('--viewport-width', `${viewport.width}px`);
+        document.documentElement.style.setProperty('--viewport-top-offset', `${viewport.offsetTop}px`);
+        document.documentElement.style.setProperty('--viewport-left-offset', `${viewport.offsetLeft}px`);
+        document.documentElement.style.setProperty('--keyboard-open', viewport.height < window.innerHeight ? '1' : '0');
+    }, disable);
+}
+export function useIsKeyboardOpen() {
+    const { virtualKeyboardBehavior } = useConfig();
+    const [isViewportConstrained, setIsViewportConstrained] = useState(false);
+    useReactToViewportChanges((viewport) => {
+        setIsViewportConstrained(viewport.height < window.innerHeight);
+    }, virtualKeyboardBehavior !== 'displace');
+    const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
+    useEffect(() => {
+        if (!('virtualKeyboard' in navigator)) {
+            // no support
+            console.warn(`virtual keyboard behavior set to 'overlay', but virtualKeyboard API is not supported in this browser.`);
+            return;
+        }
+        const virtualKeyboard = navigator.virtualKeyboard;
+        const update = () => {
+            setIsKeyboardOpen(virtualKeyboard.boundingRect.height > 0);
+        };
+        update();
+        virtualKeyboard.addEventListener('geometrychange', update);
+        return () => {
+            virtualKeyboard.removeEventListener('geometrychange', update);
+        };
+    }, []);
+    if (virtualKeyboardBehavior === 'displace') {
+        return isViewportConstrained;
+    }
+    return isKeyboardOpen;
+}
+function useReactToViewportChanges(cb, disable) {
+    const stableCb = useStableCallback(cb);
     useEffect(() => {
         if (disable)
             return;
-        const viewport = typeof window === 'undefined' ? undefined : window.visualViewport;
+        const viewport = window.visualViewport;
         if (!viewport) {
             return;
         }
         const update = () => {
-            document.documentElement.style.setProperty('--viewport-bottom-offset', `${window.innerHeight - viewport.height}px`);
-            document.documentElement.style.setProperty('--viewport-height', `${viewport.height}px`);
+            stableCb(viewport);
+        };
+        let prevTimeout;
+        const debouncedUpdate = () => {
+            if (prevTimeout) {
+                clearTimeout(prevTimeout);
+            }
+            prevTimeout = window.setTimeout(update, 50);
         };
         update();
         window.addEventListener('scroll', update, { passive: true });
         viewport.addEventListener('resize', update);
+        viewport.addEventListener('scroll', debouncedUpdate, { passive: true });
         return () => {
             viewport.removeEventListener('resize', update);
             window.removeEventListener('scroll', update);
+            viewport.removeEventListener('scroll', debouncedUpdate);
         };
-    }, [disable]);
+    }, [stableCb, disable]);
 }
 //# sourceMappingURL=useVisualViewportOffset.js.map

package/dist/esm/hooks/useVisualViewportOffset.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVisualViewportOffset.js","sourceRoot":"","sources":["../../../src/hooks/useVisualViewportOffset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5C;;GAEG;AACH,MAAM,UAAU,uBAAuB,CAAC,OAAiB;IACxD,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,OAAO;YAAE,OAAO;QAEpB,MAAM,QAAQ,GACb,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC;QAEnE,IAAI,CAAC,QAAQ,EAAE;YACd,OAAO;SACP;QAED,MAAM,MAAM,GAAG,GAAG,EAAE;YACnB,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACzC,0BAA0B,EAC1B,GAAG,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAC3C,CAAC;YACF,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACzC,mBAAmB,EACnB,GAAG,QAAQ,CAAC,MAAM,IAAI,CACtB,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,EAAE,CAAC;QAET,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC7D,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAE5C,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YAC/C,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC9C,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;AACf,CAAC"}
+{"version":3,"file":"useVisualViewportOffset.js","sourceRoot":"","sources":["../../../src/hooks/useVisualViewportOffset.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "1.1.18",
+  "version": "1.1.20",
   "type": "module",
   "files": [
     "/dist",

package/src/components/dialog/Dialog.stories.tsx

@@ -11,6 +11,8 @@ import { ParticleLayer } from '../particles.js';
 import { H1, P } from '../typography.js';
 import { Button } from '../button.js';
 import { useEffect, useState } from 'react';
+import { Provider } from '../provider.js';
+import { Input } from '../input.js';
 
 const meta = {
 	title: 'Dialog',
@@ -124,7 +126,7 @@ export const VirtualKeyboard: Story = {
 		}, [keyboard]);
 
 		return (
-			<ParticleLayer noPortal>
+			<Provider virtualKeyboardBehavior="overlay">
 				<Dialog>
 					<DialogTrigger asChild>
 						<Button>Open</Button>
@@ -132,18 +134,19 @@ export const VirtualKeyboard: Story = {
 					<DummyContent />
 					<DialogContent>
 						<DialogTitle>Hello world</DialogTitle>
+						<Input />
 						<DialogActions>
 							<DialogClose asChild>
 								<Button>Close</Button>
 							</DialogClose>
 							<Button onClick={() => setKeyboard((v) => !v)}>
-								Toggle fake virtual kb
+								Toggle fake kb
 							</Button>
 						</DialogActions>
 					</DialogContent>
 				</Dialog>
 				<div className="fixed bottom-0 h-[var(--mock-virtual-keyboard-height,0)] bg-black w-full transition-height left-0 right-0" />
-			</ParticleLayer>
+			</Provider>
 		);
 	},
 };

package/src/components/dialog/Dialog.tsx

@@ -19,6 +19,7 @@ import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons';
 import { selectTriggerClassName } from '../select.js';
 import { useDrag } from '@use-gesture/react';
 import { Button } from '../button.js';
+import { useConfig } from '../provider.js';
 
 const StyledOverlay = withClassName(
 	DialogPrimitive.Overlay,
@@ -35,10 +36,16 @@ const StyledContent = withClassName(
 	'layer-components:(left-50% top-50% translate-[-50%] w-90vw max-w-450px max-h-85vh p-6 pt-8 rounded-lg border-b-1 pt-6)',
 	'layer-components:(animate-dialog-in [&[data-state=closed]]:animate-dialog-out motion-reduce:animate-none)',
 );
-const sheetClassName = classNames(
-	'layer-variants:lt-sm:(translate-0 bottom-[calc(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px))+var(--gesture-y,0px))] left-0 right-0 top-auto h-min-content max-h-[calc(85vh-var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px)))] rounded-tl-xl rounded-tr-xl rounded-b-0 p-6 pt-8 w-full max-w-none pb-[calc(3rem+env(safe-area-inset-bottom,0px))] border-b-0)',
+const sheetClassNames = classNames(
+	'layer-variants:lt-sm:(translate-0 left-0 right-0 top-auto h-min-content rounded-tl-xl rounded-tr-xl rounded-b-0 p-6 pt-8 w-full max-w-none pb-[calc(3rem+env(safe-area-inset-bottom,0px))] border-b-0)',
 	'layer-variants:lt-sm:(animate-ease-in animate-fade-in-up [&[data-state=closed]]:animate-fade-out-down)',
 );
+const sheetClassNameWithOverlayKeyboard = classNames(
+	'layer-variants:lt-sm:(bottom-[calc(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px))+var(--gesture-y,0px))] max-h-[calc(95vh-var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px)))])',
+);
+const sheetClassNameWithDisplaceKeyboard = classNames(
+	'layer-variants:lt-sm:(bottom-[calc(var(--viewport-bottom-offset,0px)+var(--gesture-y,0px))] max-h-[calc(0.85*var(--viewport-height,100vh))])',
+);
 
 export const Content = forwardRef<
 	HTMLDivElement,
@@ -107,6 +114,8 @@ export const Content = forwardRef<
 
 	const finalRef = useMergedRef(ref, openRef, gestureRef);
 
+	const { virtualKeyboardBehavior } = useConfig();
+
 	return (
 		<DialogPrimitive.Portal>
 			<StyledOverlay />
@@ -120,7 +129,13 @@ export const Content = forwardRef<
 						'max-w-600px': width === 'md',
 						'max-w-300px': width === 'sm',
 					},
-					!disableSheet && sheetClassName,
+					!disableSheet && sheetClassNames,
+					!disableSheet &&
+						virtualKeyboardBehavior === 'overlay' &&
+						sheetClassNameWithOverlayKeyboard,
+					!disableSheet &&
+						virtualKeyboardBehavior === 'displace' &&
+						sheetClassNameWithDisplaceKeyboard,
 					outerClassName || className,
 				)}
 			>

package/src/components/input/Input.tsx

@@ -1,10 +1,11 @@
 import classNames from 'clsx';
 import {
 	ComponentProps,
-	ComponentPropsWithRef,
 	FocusEvent,
 	forwardRef,
 	useCallback,
+	useEffect,
+	useState,
 } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 
@@ -20,10 +21,23 @@ export interface InputProps extends ComponentProps<'input'> {
 	variant?: 'default' | 'primary';
 	autoSelect?: boolean;
 	asChild?: boolean;
+	/** Shuffle between random placeholders */
+	placeholders?: string[];
+	placeholdersIntervalMs?: number;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-	{ className, autoSelect, onFocus, variant: _, asChild, ...props },
+	{
+		className,
+		autoSelect,
+		onFocus,
+		variant: _,
+		asChild,
+		placeholders,
+		placeholder,
+		placeholdersIntervalMs = 5000,
+		...props
+	},
 	ref,
 ) {
 	const handleFocus = useCallback(
@@ -36,6 +50,24 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
 		[onFocus, autoSelect],
 	);
 
+	const [randomPlaceholder, setRandomPlaceholder] = useState<
+		string | undefined
+	>(
+		placeholders
+			? placeholders[Math.floor(Math.random() * placeholders.length)]
+			: undefined,
+	);
+	useEffect(() => {
+		if (placeholders) {
+			const interval = setInterval(() => {
+				setRandomPlaceholder(
+					placeholders[Math.floor(Math.random() * placeholders.length)],
+				);
+			}, placeholdersIntervalMs);
+			return () => clearInterval(interval);
+		}
+	}, [placeholders, placeholdersIntervalMs]);
+
 	const Component = asChild ? Slot : 'input';
 
 	return (
@@ -44,6 +76,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
 			onFocus={handleFocus}
 			className={classNames(inputClassName, className)}
 			ref={ref}
+			placeholder={placeholder ?? randomPlaceholder}
 		/>
 	);
 });

package/src/components/layouts/PageNav.tsx

@@ -3,13 +3,14 @@
 import classNames from 'clsx';
 import { HTMLAttributes, useRef } from 'react';
 import { useBoundsCssVars } from '../../hooks.js';
+import { HideWhileKeyboardOpen } from '../utility/HideWhileKeyboardOpen.js';
 
 export function PageNav({
 	className,
 	children,
 	...props
 }: HTMLAttributes<HTMLDivElement>) {
-	const bodyRef = useRef(document.body);
+	const bodyRef = useRef(document.documentElement);
 	const ref = useBoundsCssVars<HTMLDivElement>(undefined, bodyRef, {
 		left: '--nav-left',
 		top: '--nav-top',
@@ -17,8 +18,9 @@ export function PageNav({
 		height: '--nav-height',
 		ready: '--nav-ready',
 	});
+
 	return (
-		<div
+		<HideWhileKeyboardOpen
 			{...props}
 			className={classNames(
 				'layer-components:([grid-area:nav] relative z-nav pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))])',
@@ -28,6 +30,6 @@ export function PageNav({
 			ref={ref}
 		>
 			{children}
-		</div>
+		</HideWhileKeyboardOpen>
 	);
 }

package/src/components/layouts/PageNowPlaying.tsx

@@ -2,6 +2,7 @@
 
 import classNames from 'clsx';
 import { HTMLAttributes } from 'react';
+import { useConfig } from '../provider.js';
 
 export function PageNowPlaying({
 	className,
@@ -12,6 +13,8 @@ export function PageNowPlaying({
 	unstyled?: boolean;
 	keepAboveKeyboard?: boolean;
 }) {
+	const { virtualKeyboardBehavior } = useConfig();
+
 	return (
 		<div
 			{...props}
@@ -26,7 +29,11 @@ export function PageNowPlaying({
 					? 'layer-variants:p-2'
 					: 'layer-components:(bg-wash p-2px rounded-xl border-light shadow-md min-w-32px items-center justify-center m-2 w-auto)',
 				keepAboveKeyboard &&
+					virtualKeyboardBehavior === 'overlay' &&
 					'layer-variants:lt-sm:bottom-[max(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px),var(--nav-height,env(safe-area-inset-bottom,0px))))]',
+				keepAboveKeyboard &&
+					virtualKeyboardBehavior === 'displace' &&
+					'layer-variants:lt-sm:bottom-[max(var(--viewport-bottom-offset,0px),var(--nav-height,env(safe-area-inset-bottom,0px)))]',
 				className,
 			)}
 		/>

package/src/components/layouts/layouts.stories.tsx

@@ -14,6 +14,7 @@ import { Icon } from '../icon.js';
 import { PageNowPlaying } from './PageNowPlaying.js';
 import { useEffect, useState } from 'react';
 import { Button } from '../button.js';
+import { Input } from '../input.js';
 
 const meta = {
 	title: 'layouts',
@@ -99,8 +100,9 @@ export const WithVirtualKeyboard: Story = {
 					</div>
 					<PageNowPlaying keepAboveKeyboard>
 						<Button onClick={() => setKeyboard((v) => !v)}>
-							Toggle vkeyboard
+							Toggle fake kb
 						</Button>
+						<Input />
 					</PageNowPlaying>
 				</PageContent>
 				<PageNav>

package/src/components/masonry/masonry.tsx

@@ -1,4 +1,5 @@
 import { debounce } from '@a-type/utils';
+import clsx from 'clsx';
 import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
 
 interface Layout {
@@ -240,7 +241,11 @@ export function Masonry({
 	}, [layout, ref]);
 
 	return (
-		<div ref={ref} style={initialStyle} className={className}>
+		<div
+			ref={ref}
+			style={initialStyle}
+			className={clsx('layer-components:z-1', className)}
+		>
 			{children}
 		</div>
 	);

package/src/components/particles/ParticleLayer.stories.tsx

@@ -19,15 +19,13 @@ export const Default: Story = {
 	render() {
 		return (
 			<div className="w-full h-[100vh] relative flex flex-col items-center justify-center">
-				<ParticleLayer noPortal>
-					<DemoButton />
-				</ParticleLayer>
+				<ExplodeButton />
 			</div>
 		);
 	},
 };
 
-function DemoButton() {
+function ExplodeButton() {
 	const particles = useParticles();
 	if (!particles) throw new Error('Must be used inside ParticleLayer');
 	const burst = (ev: MouseEvent) => {

package/src/components/particles/particlesState.ts

@@ -1,5 +1,3 @@
-import { assert } from '@a-type/utils';
-
 export class Particles {
 	private canvas: HTMLCanvasElement | null = null;
 	private ctx: CanvasRenderingContext2D | null = null;
@@ -96,7 +94,7 @@ export class Particles {
 
 		this.ctx!.clearRect(0, 0, this.canvas!.width, this.canvas!.height);
 
-		if (this.particles.length === 0) {
+		if (this.particles.length === this.freeParticles.length) {
 			// skip drawing until we get particles again
 			this.lastDrawLatch = true;
 		} else {
@@ -121,6 +119,7 @@ export class Particles {
 	addParticles = (spawn: ParticleSpawn) => {
 		// wrap in RAF because initializers often use element dimensions
 		requestAnimationFrame(() => {
+			const wasLatch = this.lastDrawLatch;
 			this.lastDrawLatch = false;
 			if (this.freeParticles.length < spawn.count) {
 				this.extendPool(spawn.count - this.freeParticles.length);
@@ -141,6 +140,9 @@ export class Particles {
 					spawn.behavior,
 				);
 			}
+			if (wasLatch) {
+				this.resume();
+			}
 		});
 	};
 

package/src/components/provider/Provider.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { createContext, ReactNode, useContext } from 'react';
 import { ParticleLayer } from '../particles.js';
 import { IconSpritesheet } from '../icon.js';
 import { Toaster, ToastPosition } from 'react-hot-toast';
@@ -23,11 +23,13 @@ export function Provider({
 	disableParticles,
 	toastPosition = 'top-center',
 	toastContainerClassName,
-	disableViewportOffset = true,
-	virtualKeyboardBehavior = 'overlay',
+	disableViewportOffset,
+	virtualKeyboardBehavior = 'displace',
 }: ProviderProps) {
 	useVisualViewportOffset(disableViewportOffset);
-	useVirtualKeyboardBehavior(virtualKeyboardBehavior);
+	const supportedVirtualKeyboardBehavior =
+		'virtualKeyboard' in navigator ? virtualKeyboardBehavior : 'displace';
+	useVirtualKeyboardBehavior(supportedVirtualKeyboardBehavior);
 
 	const otherStuff = (
 		<>
@@ -41,18 +43,36 @@ export function Provider({
 
 	if (disableParticles)
 		return (
-			<TooltipProvider>
-				{children}
-				{otherStuff}
-			</TooltipProvider>
+			<ConfigContext.Provider
+				value={{ virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }}
+			>
+				<TooltipProvider>
+					{children}
+					{otherStuff}
+				</TooltipProvider>
+			</ConfigContext.Provider>
 		);
 
 	return (
-		<TooltipProvider>
-			<ParticleLayer>
-				{children}
-				{otherStuff}
-			</ParticleLayer>
-		</TooltipProvider>
+		<ConfigContext.Provider
+			value={{ virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }}
+		>
+			<TooltipProvider>
+				<ParticleLayer>
+					{children}
+					{otherStuff}
+				</ParticleLayer>
+			</TooltipProvider>
+		</ConfigContext.Provider>
 	);
 }
+
+export const ConfigContext = createContext<{
+	virtualKeyboardBehavior: 'overlay' | 'displace';
+}>({
+	virtualKeyboardBehavior: 'displace',
+});
+
+export function useConfig() {
+	return useContext(ConfigContext);
+}

package/src/components/utility/HideWhileKeyboardOpen.tsx

@@ -0,0 +1,26 @@
+import { Slot } from '@radix-ui/react-slot';
+import { useIsKeyboardOpen } from '../../hooks.js';
+import clsx from 'clsx';
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface HideWhileKeyboardOpenProps
+	extends HTMLAttributes<HTMLDivElement> {
+	asChild?: boolean;
+}
+
+export const HideWhileKeyboardOpen = forwardRef<
+	HTMLDivElement,
+	HideWhileKeyboardOpenProps
+>(function HideWhileKeyboardOpen({ asChild, className, ...rest }, ref) {
+	const isKeyboardOpen = useIsKeyboardOpen();
+
+	const Comp = asChild ? Slot : 'div';
+
+	return (
+		<Comp
+			ref={ref}
+			className={clsx(isKeyboardOpen && 'layer-responsive:hidden', className)}
+			{...rest}
+		/>
+	);
+});

package/src/hooks/useSize.ts

@@ -74,13 +74,17 @@ export function useBounds<E extends HTMLElement>(
 		top: number;
 		width: number;
 		height: number;
+		ref: RefObject<E>;
 	}) => void,
+	disconnectCallback: () => void = () => {},
 ) {
 	const ref = useRef<E>(null);
 	const cb = useStableCallback(callback);
+	const disconnectCb = useStableCallback(disconnectCallback);
 	useEffect(() => {
 		const target = ref.current;
 		if (!target) {
+			disconnectCb();
 			return () => {
 				//
 			};
@@ -89,7 +93,7 @@ export function useBounds<E extends HTMLElement>(
 			entries.forEach((entry) => {
 				const { left, top, width, height } =
 					entry.target.getBoundingClientRect();
-				cb({ left, top, width, height });
+				cb({ left, top, width, height, ref });
 			});
 		});
 		resizeObserver.observe(target);
@@ -97,7 +101,7 @@ export function useBounds<E extends HTMLElement>(
 			resizeObserver.unobserve(target);
 			resizeObserver.disconnect();
 		};
-	}, [ref, cb]);
+	}, [ref, cb, disconnectCb]);
 	return ref;
 }
 
@@ -118,11 +122,13 @@ export function useBoundsCssVars<E extends HTMLElement>(
 			top,
 			width,
 			height,
+			ref,
 		}: {
 			left: number;
 			top: number;
 			width: number;
 			height: number;
+			ref: RefObject<E>;
 		}) => {
 			const usedRef = applyToRef || ref;
 			usedRef.current?.style.setProperty(
@@ -159,6 +165,21 @@ export function useBoundsCssVars<E extends HTMLElement>(
 		propertyNames?.width,
 		propertyNames?.height,
 	]);
-	const ref = useBounds<E>(update);
+	const disconnect = () => {
+		if (applyToRef?.current) {
+			applyToRef.current.style.removeProperty(
+				propertyNames?.ready ?? '--ready',
+			);
+			applyToRef.current.style.removeProperty(propertyNames?.left ?? '--left');
+			applyToRef.current.style.removeProperty(propertyNames?.top ?? '--top');
+			applyToRef.current.style.removeProperty(
+				propertyNames?.width ?? '--width',
+			);
+			applyToRef.current.style.removeProperty(
+				propertyNames?.height ?? '--height',
+			);
+		}
+	};
+	const ref = useBounds<E>(update, disconnect);
 	return ref;
 }

package/src/hooks/useVirtualKeyboardBehavior.ts

@@ -1,8 +1,6 @@
 import { useEffect } from 'react';
 
-export function useVirtualKeyboardBehavior(
-	behavior: 'overlay' | 'displace' = 'overlay',
-) {
+export function useVirtualKeyboardBehavior(behavior: 'overlay' | 'displace') {
 	useEffect(() => {
 		if ('virtualKeyboard' in navigator) {
 			// @ts-ignore