@a-type/ui 4.0.8 → 4.1.0-beta.2

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from '@base-ui/react/use-render';
 export * from './actions/index.js';
+export * from './autocomplete/Autocomplete.js';
 export * from './avatar/index.js';
 export * from './box/Box.js';
 export * from './button/index.js';
@@ -38,6 +39,7 @@ export * from './popover/index.js';
 export * from './progress/Progress.js';
 export * from './provider/Provider.js';
 export * from './pwaInstall/index.js';
+export * from './quickAction/QuickAction.js';
 export * from './relativeTime/index.js';
 export * from './richEditor/index.js';
 export * from './scrollArea/ScrollArea.js';

package/src/components/input/Input.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
+import { Icon } from '../icon/Icon.js';
 import { Input } from './Input.js';
 
 const meta = {
@@ -24,7 +25,19 @@ export const ButtonAndInput: Story = {
 	render: (args) => (
 		<Box gap items="center">
 			<Input placeholder="Type something..." {...args} />
-			<Button size={args.sizeVariant}>Submit</Button>
+			<Button>Submit</Button>
 		</Box>
 	),
 };
+
+export const WithAccessories: Story = {
+	render: (args) => (
+		<Input.Border>
+			<Icon name="search" />
+			<Input.Input placeholder="Search..." {...args} />
+			<Button emphasis="ghost">
+				<Icon name="arrowRight" />
+			</Button>
+		</Input.Border>
+	),
+};

package/src/components/input/Input.tsx

@@ -1,74 +1,107 @@
-import { Input as BaseUIInput } from '@base-ui/react/input';
-import classNames from 'clsx';
-import {
-	ChangeEvent,
-	ComponentPropsWithRef,
-	FocusEvent,
-	useCallback,
-} from 'react';
-import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
-
-export const inputClassName = classNames(
-	'layer-components:(px-5 py-1.25 text-md font-inherit rounded-lg bg-white select-auto min-w-60px color-black border-solid border-width-thin border-gray-dark shadow-sm shadow-inset transition-shadow)',
-	'layer-components:focus:(outline-none bg-lighten-3 ring-4	ring-white)',
-	'layer-components:focus-visible:(outline-none ring-accent ring-4)',
-	'layer-components:disabled:(bg-transparent border-gray placeholder-gray-dark shadow-none)',
-	'layer-components:md:(min-w-120px)',
-	'layer-variants:[&[data-size="small"]]:(px-md py-xs text-sm rounded-md min-w-40px)',
-);
-
-export interface InputProps extends ComponentPropsWithRef<'input'> {
-	autoSelect?: boolean;
-	/** Shuffle between random placeholders */
-	placeholders?: string[];
-	placeholdersIntervalMs?: number;
-	onValueChange?: (value: string) => void;
-	sizeVariant?: 'default' | 'small';
-}
-
-export const Input = function Input({
-	className,
-	autoSelect,
-	onFocus,
-	onChange,
-	onValueChange,
-	placeholders,
-	placeholder,
-	placeholdersIntervalMs = 5000,
-	sizeVariant,
-	...props
-}: InputProps) {
-	const handleFocus = useCallback(
-		(ev: FocusEvent<HTMLInputElement>) => {
-			if (autoSelect) {
-				ev.target.select();
-			}
-			onFocus?.(ev);
-		},
-		[onFocus, autoSelect],
-	);
-
-	const handleChange = useCallback(
-		(ev: ChangeEvent<HTMLInputElement>) => {
-			onValueChange?.(ev.target.value);
-			onChange?.(ev);
-		},
-		[onChange, onValueChange],
-	);
-
-	const randomPlaceholder = useRotatingShuffledValue(
-		placeholders ?? [],
-		placeholdersIntervalMs,
-	);
-
-	return (
-		<BaseUIInput
-			onFocus={handleFocus}
-			onChange={handleChange}
-			className={classNames(inputClassName, className)}
-			placeholder={placeholder ?? randomPlaceholder}
-			data-size={sizeVariant ?? 'default'}
-			{...props}
-		/>
-	);
-};
+import { Input as BaseInput } from '@base-ui/react/input';
+import clsx from 'clsx';
+import { ComponentPropsWithRef, FocusEvent, FocusEventHandler } from 'react';
+import { withClassName } from '../../hooks.js';
+import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
+import { inputInfo } from '../../systems/inputs.js';
+
+export const inputClassName = clsx(
+	'layer-components:(min-w-60px flex-1 select-auto border-none px-0 py-1.25 text-md font-inherit bg-transparent)',
+	'layer-components:md:(min-w-120px)',
+	'layer-components:placeholder:(color-gray-dark)',
+	'layer-components:focus:(outline-none)',
+	'layer-components:focus-visible:(outline-none)',
+	'layer-components:first:(rounded-l-inherit pl-md)',
+	'layer-components:last:(rounded-r-inherit pr-md)',
+);
+
+const inputBorderClassName = clsx(
+	'layer-components:(flex flex-row items-center gap-xs border-1 rounded-lg border-solid text-md shadow-sm shadow-inset transition-shadow color-black bg-white border-gray-dark)',
+	'layer-components:(w-max-content overflow-clip)',
+	'layer-components:[&:has(input:disabled)]:(shadow-none bg-transparent border-gray placeholder-gray-dark)',
+	'layer-components:[&:has(input:focus-visible)]:(outline-none ring ring-4 ring-accent)',
+	'layer-variants:[&:has(input:focus[data-focus-clicked])]:(outline-none ring ring-4 bg-lighten-3 ring-main-light)',
+	'layer-components:[&:has(input:hover)]:(border-black)',
+	'layer-components:[&>.icon]:(mx-sm)',
+);
+
+const InputBorder = withClassName('div', inputBorderClassName);
+
+const InnerInput = function InnerInput({
+	autoSelect,
+	onFocus,
+	onBlur,
+	className,
+	placeholders,
+	placeholder,
+	placeholdersIntervalMs = 5000,
+	onValueChange,
+
+	...props
+}: InputProps) {
+	const handleFocus: FocusEventHandler<HTMLInputElement> = (
+		ev: FocusEvent<HTMLInputElement>,
+	) => {
+		if (autoSelect) {
+			ev.target.select();
+		}
+		if (
+			inputInfo.lastPointerDown &&
+			Date.now() - inputInfo.lastPointerDown < 200
+		) {
+			ev.currentTarget.setAttribute('data-focus-clicked', 'true');
+		}
+		onFocus?.(ev);
+	};
+	const handleBlur: FocusEventHandler<HTMLInputElement> = (ev) => {
+		onBlur?.(ev);
+		ev.currentTarget.removeAttribute('data-focus-clicked');
+	};
+	const randomPlaceholder = useRotatingShuffledValue(
+		placeholders ?? [],
+		placeholdersIntervalMs,
+	);
+
+	return (
+		<BaseInput
+			placeholder={placeholder ?? randomPlaceholder}
+			onFocus={handleFocus}
+			onValueChange={onValueChange}
+			onBlur={handleBlur}
+			className={clsx(inputClassName, className)}
+			{...props}
+		/>
+	);
+};
+
+export interface InputProps extends ComponentPropsWithRef<'input'> {
+	autoSelect?: boolean;
+	/** Shuffle between random placeholders */
+	placeholders?: string[];
+	placeholdersIntervalMs?: number;
+	onValueChange?: (value: string) => void;
+	borderRef?: React.Ref<HTMLDivElement>;
+	startAccessory?: React.ReactNode;
+	endAccessory?: React.ReactNode;
+}
+
+const InputDefault = function InputDefault({
+	className,
+	borderRef,
+	startAccessory,
+	endAccessory,
+	...props
+}: InputProps) {
+	return (
+		<InputBorder ref={borderRef} className={className}>
+			{startAccessory}
+			<InnerInput {...props} />
+			{endAccessory}
+		</InputBorder>
+	);
+};
+
+export const Input = Object.assign(InputDefault, {
+	Border: InputBorder,
+	Input: InnerInput,
+});

package/src/components/layouts/PageContent.tsx

@@ -36,7 +36,7 @@ export function PageContent({
 			container="reset"
 			className={classNames(
 				'[grid-area:content]',
-				'layer-components:(max-w-full min-w-0 flex-1-0-auto mx-auto)',
+				'layer-components:flex-1-0-auto layer-components:(mx-auto max-w-full min-w-0)',
 				className,
 			)}
 			ref={finalRef}

package/src/components/layouts/PageFixedArea.tsx

@@ -9,7 +9,7 @@ export function PageFixedArea({
 		<div
 			{...props}
 			className={classNames(
-				'layer-components:(sticky top-0 z-nav bg-wash w-full items-stretch gap-2 flex flex-col)',
+				'layer-components:(sticky top-0 z-nav w-full flex flex-col items-stretch gap-2 bg-wash)',
 				className,
 			)}
 		/>

package/src/components/layouts/PageNav.tsx

@@ -26,9 +26,9 @@ export function PageNav({
 		<HideWhileKeyboardOpen
 			{...props}
 			className={classNames(
-				'layer-components:([grid-area:nav] sticky bottom-0 bg-inherit z-[var(--z-nav)] pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))])',
-				'layer-components:before:(content-[""] absolute inset-x-4 top-0 h-px bg-gray-dark/80)',
-				'layer-components:md:([grid-area:nav] sticky top-lg h-auto bottom-auto left-auto right-auto) layer-components:md:before:(hidden)',
+				'layer-components:([grid-area:nav] sticky bottom-0 z-[var(--z-nav)] pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))] bg-inherit)',
+				'layer-components:before:(absolute inset-x-4 top-0 h-px content-[""] bg-gray-dark/80)',
+				'layer-components:md:([grid-area:nav] sticky bottom-auto left-auto right-auto top-lg h-auto) layer-components:md:before:(hidden)',
 				className,
 			)}
 			ref={ref}

package/src/components/layouts/PageNowPlaying.tsx

@@ -7,11 +7,9 @@ import { useConfig } from '../provider/Provider.js';
 
 export function PageNowPlaying({
 	className,
-	unstyled,
 	keepAboveKeyboard,
 	...props
 }: HTMLAttributes<HTMLDivElement> & {
-	unstyled?: boolean;
 	keepAboveKeyboard?: boolean;
 }) {
 	const { virtualKeyboardBehavior } = useConfig();
@@ -21,15 +19,13 @@ export function PageNowPlaying({
 			<div
 				{...props}
 				className={classNames(
-					'layer-components:(fixed left-0 right-0 z-[var(--z-now-playing)] flex flex-col gap-2 items-end)',
+					'layer-components:(fixed left-0 right-0 z-[var(--z-now-playing)] flex flex-col items-end gap-2)',
 					// on mobile, this must be positioned above any nav bar that's present,
 					// or at minimum in the safe area
 					'layer-components:bottom-[var(--nav-height,env(safe-area-inset-bottom,0px))]',
 					'layer-components:transition-bottom',
-					'layer-components:md:(fixed bottom-3 left-[var(--content-left,20%)] transition-opacity top-auto items-end w-[var(--content-width,100%)] p-0 opacity-[var(--content-ready,0)])',
-					unstyled
-						? '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)',
+					'layer-components:md:(fixed bottom-3 left-[var(--content-left,20%)] top-auto w-[var(--content-width,100%)] items-end p-0 opacity-[var(--content-ready,0)] transition-opacity)',
+					'layer-variants:p-2',
 					keepAboveKeyboard &&
 						virtualKeyboardBehavior === 'overlay' &&
 						'layer-variants:lt-md:bottom-[max(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px),var(--nav-height,env(safe-area-inset-bottom,0px))))]',

package/src/components/layouts/PageRoot.tsx

@@ -7,9 +7,9 @@ export function PageRoot({ className, children, ...rest }: PageRootProps) {
 	return (
 		<div
 			className={clsx(
-				'layer-components:(flex-grow-1 flex-shrink-1 flex-basis-0 min-h-100dvh bg-wash)',
-				'layer-components:(grid grid-areas-[content]-[nav] grid-cols-[1fr] grid-rows-[1fr_auto] items-start justify-center)',
-				'md:layer-responsive:(grid-areas-[gutter1_nav_content_gutter2] grid-cols-[1fr_auto_20fr_1fr] min-h-auto h-auto bg-wash)',
+				'layer-components:(min-h-100dvh flex-shrink-1 flex-grow-1 flex-basis-0 bg-wash)',
+				'layer-components:(grid grid-cols-[1fr] grid-rows-[1fr_auto] grid-areas-[content]-[nav] items-start justify-center)',
+				'md:layer-responsive:(grid-cols-[1fr_auto_20fr_1fr] grid-areas-[gutter1_nav_content_gutter2] h-auto min-h-auto bg-wash)',
 				'lg:layer-responsive:(grid-cols-[1fr_auto_min(800px,70vw)_1fr])',
 				className,
 			)}

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

@@ -135,7 +135,7 @@ export const ManualWidth: Story = {
 
 export const WithoutNav: Story = {
 	render: () => (
-		<PageRoot className="w-full h-full">
+		<PageRoot className="h-full w-full">
 			<PageContent>
 				<div className="text-center">
 					<h1 className="text-3xl font-bold">Hello, World!</h1>
@@ -170,7 +170,7 @@ export const WithVirtualKeyboard: Story = {
 		}, [keyboard]);
 
 		return (
-			<PageRoot className="w-full h-full">
+			<PageRoot className="h-full w-full">
 				<PageContent>
 					<div className="text-center">
 						<h1 className="text-3xl font-bold">Hello, World!</h1>
@@ -200,7 +200,7 @@ export const WithVirtualKeyboard: Story = {
 						</NavBarItem>
 					</NavBarRoot>
 				</PageNav>
-				<div className="fixed bottom-0 h-[var(--mock-virtual-keyboard-height,0)] bg-black w-full transition-height left-0 right-0" />
+				<div className="fixed bottom-0 left-0 right-0 h-[var(--mock-virtual-keyboard-height,0)] w-full transition-height bg-black" />
 			</PageRoot>
 		);
 	},

package/src/components/lightbox/Lightbox.tsx

@@ -30,7 +30,7 @@ export const LightboxClose = (props: DialogCloseProps) => (
 				<Icon name="x" />
 			</Button>
 		}
-		className="absolute top-md right-md"
+		className="absolute right-md top-md"
 	/>
 );
 

package/src/components/marquee/marquee.stories.tsx

@@ -21,7 +21,7 @@ export const Default: Story = {
 				<Marquee.Item>
 					<img src="https://resources.biscuits.club/images/pashka.jpg" />
 				</Marquee.Item>
-				<Marquee.Item className="flex items-center justify-center bg-primary-wash color-primary-dark text-lg">
+				<Marquee.Item className="flex items-center justify-center text-lg color-primary-dark bg-primary-wash">
 					Hello, world
 				</Marquee.Item>
 				<Marquee.Item

package/src/components/marquee/marquee.tsx

@@ -26,12 +26,12 @@ export function Marquee({ className, children, timeout = 5000 }: MarqueeProps) {
 	return (
 		<div
 			className={clsx(
-				'layer-components:(relative overflow-hidden w-full h-full)',
+				'layer-components:(relative h-full w-full overflow-hidden)',
 				className,
 			)}
 		>
 			<div
-				className="layer-components:(absolute top-0 left-0 h-full w-full overflow-visible flex flex-row transition-transform duration-300)"
+				className="layer-components:(absolute left-0 top-0 h-full w-full flex flex-row overflow-visible transition-transform duration-300)"
 				style={{ transform: `translateX(${offset})` }}
 			>
 				{children}

package/src/components/navBar/NavBar.tsx

@@ -6,12 +6,12 @@ import { withClassName } from '../../hooks.js';
 import { Icon, IconProps } from '../icon/index.js';
 
 export const navBarItemClass = classNames(
-	'layer-components:(flex flex-col items-center justify-center whitespace-nowrap py-1 px-3 bg-transparent rounded-sm border-none cursor-pointer text-sm transition-colors h-full gap-6px relative color-black select-none)',
+	'layer-components:(relative h-full flex flex-col cursor-pointer select-none items-center justify-center gap-6px whitespace-nowrap rounded-sm border-none px-3 py-1 text-sm transition-colors color-black bg-transparent)',
 	'layer-components:active:bg-darken-2',
 	'layer-components:hover:(bg-main-light)',
 	'layer-components:focus-visible:(outline-none ring-2 ring-accent)',
-	'layer-components:[&[data-active=true]]:(bg-main-light/50 color-lighten-2 color-black)',
-	'layer-responsive:md:(flex-row-reverse h-auto justify-start gap-2 overflow-visible active:bg-darken-2)',
+	'layer-components:[&[data-active=true]]:(color-black color-lighten-2 bg-main-light/50)',
+	'layer-responsive:md:(h-auto flex-row-reverse justify-start gap-2 overflow-visible active:bg-darken-2)',
 );
 
 export interface NavBarItemProps extends UseRenderComponentProps<'button'> {

package/src/components/note/Note.tsx

@@ -16,27 +16,27 @@ export function Note({ className, color, children, ...rest }: NoteProps) {
 			<div className="layer-components:(flex flex-row)">
 				<div
 					className={clsx(
-						'layer-components:(flex-1 p-2 border border-solid border-main-dark bg-main-wash bg-darken-1 color-black relative text-sm italic) layer-variants:border-r-0',
+						'layer-components:(relative flex-1 border border-solid p-2 text-sm italic color-black bg-main-wash bg-darken-1 border-main-dark) layer-variants:border-r-0',
 						'layer-variants:[&_input,&_textarea]:shadow-none',
 					)}
 				>
 					{children}
 				</div>
 				<div
-					className="layer-components:(flex flex-col items-stretch justify-stretch flex-[0_0_20px])"
+					className="layer-components:(flex flex-[0_0_20px] flex-col items-stretch justify-stretch)"
 					aria-hidden
 				>
 					{/* folded corner */}
-					<div className="layer-components:(border-0 border-solid border-main-dark flex-[0_0_20px] w-[20px] h-[20px] relative) layer-variants:(border-b-1px border-l-1px)">
+					<div className="layer-components:(relative h-[20px] w-[20px] flex-[0_0_20px] border-0 border-solid border-main-dark) layer-variants:(border-b-1px border-l-1px)">
 						{/* top corner */}
 						<div
-							className={`layer-components:(border-solid box-content border-transparent border-r-main-wash border-r-darken-1 border-13px w-0 h-0 rotate--45 translate--7px transform-origin-br)`}
+							className={`layer-components:(box-content h-0 w-0 transform-origin-br translate--7px rotate--45 border-13px border-solid border-transparent border-r-main-wash border-r-darken-1)`}
 						/>
 						{/* diagonal line */}
-						<div className="layer-components:(absolute w-0.5px bg-main-dark h-27px rotate--45 left-9px top--3px transform-origin-cc)" />
+						<div className="layer-components:(absolute left-9px top--3px h-27px w-0.5px transform-origin-cc rotate--45 bg-main-dark)" />
 					</div>
 					{/* bottom right corner */}
-					<div className="layer-components:(bg-main-wash bg-darken-1 flex-1 border-0 border-solid border-main-dark) layer-variants:(border-r-1px border-b-1px)" />
+					<div className="layer-components:(flex-1 border-0 border-solid bg-main-wash bg-darken-1 border-main-dark) layer-variants:(border-b-1px border-r-1px)" />
 				</div>
 			</div>
 		</div>

package/src/components/numberStepper/NumberStepper.tsx

@@ -67,11 +67,11 @@ export function NumberStepper({
 	return (
 		<div
 			className={classNames(
-				'layer-components:(flex items-center border-solid border border-gray-dark rounded-lg overflow-hidden w-min-content flex-shrink-0 bg-white shadow-sm)',
+				'layer-components:(w-min-content flex flex-shrink-0 items-center overflow-hidden border rounded-lg border-solid shadow-sm bg-white border-gray-dark)',
 				disabled &&
-					'layer-variants:(border-gray-dark/80 bg-transparent shadow-none)',
+					'layer-variants:(shadow-none bg-transparent border-gray-dark/80)',
 				{
-					'layer-variants:(bg-accent-wash color-black)':
+					'layer-variants:(color-black bg-accent-wash)':
 						!!highlightChange && value !== 1,
 				},
 				className,

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

@@ -20,7 +20,7 @@ type Story = StoryObj<typeof ParticleLayer>;
 export const Default: Story = {
 	render() {
 		return (
-			<div className="w-full h-[100vh] relative flex flex-col items-center justify-center">
+			<div className="relative h-[100vh] w-full flex flex-col items-center justify-center">
 				<ExplodeButton />
 			</div>
 		);
@@ -54,7 +54,7 @@ export const HiddenTest: Story = {
 		return (
 			<>
 				<div
-					className="w-full relative flex flex-col items-center justify-center p-10"
+					className="relative w-full flex flex-col items-center justify-center p-10"
 					style={{ visibility: hide ? 'hidden' : 'visible' }}
 				>
 					<Icon name="placeholder" ref={targetRef} />

package/src/components/particles/ParticleLayer.tsx

@@ -27,7 +27,7 @@ export function ParticleLayer({
 	const canvas = (
 		<canvas
 			ref={particles.setCanvas}
-			className="fixed inset-0 w-full h-full z-[1000000] pointer-events-none"
+			className="pointer-events-none fixed inset-0 z-[1000000] h-full w-full"
 		/>
 	);
 

package/src/components/particles/particlesState.ts

@@ -108,13 +108,11 @@ export class Particles {
 	};
 
 	private renderParticles = (ctx: CanvasRenderingContext2D, delta: number) => {
-		let freed = 0;
 		for (let i = 0; i < this.particles.length; i++) {
 			const particle = this.particles[i];
 			if (particle.render(ctx, delta)) {
 				particle.dispose();
 				this.freeParticles.push(particle);
-				freed++;
 			}
 		}
 	};
@@ -300,7 +298,7 @@ export const createElementBorderInitializer = ({
 	// randomly spawn particles around the border of the element by 'unwrapping' the selected borders as
 	// a single theoretical line, picking a random point on the line, and then converting that point
 	// back to a point on the border.
-	return (index: number) => {
+	return (_index: number) => {
 		// check that element is not hidden
 		if (
 			element instanceof HTMLElement &&
@@ -472,7 +470,7 @@ export const createWindowBorderInitializer = ({
 	border?: BorderName;
 	lifespan?: number;
 }): ParticleInitializer => {
-	return (index: number) => {
+	return (_index: number) => {
 		const rect = document.body.getBoundingClientRect();
 		let x = 0;
 		let y = 0;

package/src/components/peek/Peek.tsx

@@ -58,7 +58,7 @@ export function Peek({ peekHeight = 120, children, className }: PeekProps) {
 		<div
 			className={classNames(
 				'relative',
-				'[&[data-state=closed]]:max-h-[var(--peek-height,120px)] overflow-hidden',
+				'overflow-hidden [&[data-state=closed]]:max-h-[var(--peek-height,120px)]',
 				hasInteracted.current &&
 					'animate-ease-default animate-forwards [&[data-state=closed]]:(animate-keyframes-peek-close animate-duration-300) [&[data-state=open]]:(animate-keyframes-peek-open animate-duration-600 animate-forwards)',
 				className,
@@ -79,10 +79,10 @@ export function Peek({ peekHeight = 120, children, className }: PeekProps) {
 				<button
 					data-state={open ? 'open' : 'closed'}
 					className={classNames(
-						'h-80px absolute bottom-0 z-1 bg-transparent border-none w-full cursor-pointer border-b border-b-solid border-white',
+						'absolute bottom-0 z-1 h-80px w-full cursor-pointer border-b border-none border-b-solid bg-transparent border-white',
 						'animate-fade-in',
-						'focus-visible:(outline-none bg-gradient-to-b from-transparent to-primary-wash border-b border-b-solid border-main',
-						'after:(content-["-_tap_to_expand_-"] p-3 color-gray-dark text-xs flex flex-col justify-end items-center absolute inset-0 top-auto h-80px bg-gradient-to-b from-transparent to-white)',
+						'focus-visible:(outline-none border-b border-b-solid from-transparent to-primary-wash bg-gradient-to-b border-main',
+						'after:(absolute inset-0 top-auto h-80px flex flex-col items-center justify-end from-transparent to-white bg-gradient-to-b p-3 text-xs content-["-_tap_to_expand_-"] color-gray-dark)',
 						'after:[&[data-state=open]]:content-["-_tap_to_collapse_-"]',
 					)}
 					onClick={toggle}