@a-type/ui 5.0.4 → 5.0.6

package/dist/esm/uno/preflights/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/uno/preflights/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAyB,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,cAAc,EAAyB,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,eAAe,EAA0B,MAAM,cAAc,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAwB,MAAM,WAAW,CAAC;AAOhE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,MAAuB,EAAoB,EAAE,CAAC;IACxE,cAAc;IACd,aAAa;IACb,eAAe,CAAC,MAAM,CAAC;IACvB,cAAc,CAAC,MAAM,CAAC;IACtB,aAAa,CAAC,MAAM,CAAC;IACrB,cAAc,CAAC,MAAM,CAAC;IACtB,mBAAmB;IACnB,aAAa,CAAC,MAAM,CAAC;CACrB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/uno/preflights/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAyB,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,cAAc,EAAyB,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,eAAe,EAA0B,MAAM,cAAc,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAwB,MAAM,WAAW,CAAC;AAOhE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,MAAuB,EAAoB,EAAE,CAAC;IACxE,cAAc;IACd,aAAa;IACb,eAAe,CAAC,MAAM,CAAC;IACvB,cAAc,CAAC,MAAM,CAAC;IACtB,aAAa,CAAC,MAAM,CAAC;IACrB,cAAc,CAAC,MAAM,CAAC;IACtB,mBAAmB;IACnB,aAAa,CAAC,MAAM,CAAC;IACrB,iBAAiB;CACjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "5.0.4",
+  "version": "5.0.6",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"

package/src/components/box/Box.stories.tsx

@@ -93,18 +93,16 @@ export const Default: Story = {
 export const NestedContainers: Story = {
 	render(args) {
 		return (
-			<Box {...args} container surface color="accent" direction="col">
-				<Box {...args} container surface color="primary">
-					<Box {...args} surface>
-						<Button>Button</Button>
-						<Button>Button</Button>
-					</Box>
-					<Box {...args} surface color="attention">
+			<Box {...args} p gap container surface color="accent" direction="col">
+				<Box {...args} p gap container surface items="center" color="primary">
+					<Button>Button</Button>
+					<Button>Button</Button>
+					<Box {...args} p gap surface color="attention">
 						<Button>Button</Button>
 						<Button>Button</Button>
 					</Box>
 				</Box>
-				<Box {...args} surface color="gray">
+				<Box {...args} p gap surface color="gray">
 					<Button>Button</Button>
 					<Button>Button</Button>
 				</Box>

package/src/components/box/Box.tsx

@@ -89,7 +89,10 @@ export function Box({
 	ref,
 	...rest
 }: BoxProps) {
-	const style = useGroupScaleStyles(userStyle);
+	const style = useGroupScaleStyles(
+		userStyle,
+		container === 'reset' ? 1 : undefined,
+	);
 
 	const items = itemsSolo ?? align?.split(' ')[0];
 	const justify = justifySolo ?? align?.split(' ')[1];

package/src/components/button/classes.tsx

@@ -36,7 +36,7 @@ export function getButtonClassName({
 		'layer-components:(shadow-sm ring-bg)',
 		'layer-components:color-contrast',
 
-		emphasis === 'ghost' && 'layer-variants:(border-none shadow-none)',
+		emphasis === 'ghost' && 'layer-variants:(border-transparent shadow-none)',
 		emphasis === 'contrast' &&
 			'layer-variants:border-bg layer-variants:hover:bg-gray-ink',
 

package/src/components/card/Card.stories.tsx

@@ -262,36 +262,54 @@ export const VisuallyFocused: Story = {
 export const CardsInBox: Story = {
 	render() {
 		return (
-			<Box container p gap>
-				<CardRoot>
-					<CardMain onClick={() => {}}>
-						<CardTitle>Card Title</CardTitle>
-						<CardContent>Other stuff</CardContent>
-					</CardMain>
-					<CardFooter>
-						<CardActions>
-							<Button size="small">Button</Button>
-							<Button emphasis="ghost">
-								<Icon name="placeholder" />
-							</Button>
-						</CardActions>
-					</CardFooter>
-				</CardRoot>
-				<CardRoot>
-					<CardMain onClick={() => {}}>
-						<CardTitle>Card Title</CardTitle>
-						<CardContent>Other stuff</CardContent>
-					</CardMain>
-					<CardFooter>
-						<CardActions>
-							<Button size="small">Button</Button>
-							<Button emphasis="ghost">
-								<Icon name="placeholder" />
-							</Button>
-						</CardActions>
-					</CardFooter>
-				</CardRoot>
-			</Box>
+			<div className="w-full flex flex-row gap-lg">
+				<div className="flex-1">
+					<CardRoot>
+						<CardMain onClick={() => {}}>
+							<CardTitle>Card Title</CardTitle>
+							<CardContent>Other stuff</CardContent>
+						</CardMain>
+						<CardFooter>
+							<CardActions>
+								<Button size="small">Button</Button>
+								<Button emphasis="ghost" size="small">
+									<Icon name="placeholder" />
+								</Button>
+							</CardActions>
+						</CardFooter>
+					</CardRoot>
+				</div>
+				<Box p gap col grow>
+					<CardRoot>
+						<CardMain onClick={() => {}}>
+							<CardTitle>Card Title</CardTitle>
+							<CardContent>Other stuff</CardContent>
+						</CardMain>
+						<CardFooter>
+							<CardActions>
+								<Button size="small">Button</Button>
+								<Button emphasis="ghost" size="small">
+									<Icon name="placeholder" />
+								</Button>
+							</CardActions>
+						</CardFooter>
+					</CardRoot>
+					<CardRoot>
+						<CardMain onClick={() => {}}>
+							<CardTitle>Card Title</CardTitle>
+							<CardContent>Other stuff</CardContent>
+						</CardMain>
+						<CardFooter>
+							<CardActions>
+								<Button size="small">Button</Button>
+								<Button emphasis="ghost" size="small">
+									<Icon name="placeholder" />
+								</Button>
+							</CardActions>
+						</CardFooter>
+					</CardRoot>
+				</Box>
+			</div>
 		);
 	},
 };

package/src/components/forms/TextField.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { useField, useFormikContext } from 'formik';
 import {
 	InputHTMLAttributes,
@@ -119,7 +120,7 @@ export function TextAreaField({
 				ref={inputRef as any}
 				{...props}
 				{...rest}
-				className={textAreaClassName}
+				className={clsx('layer-composed:w-full', textAreaClassName)}
 				id={id}
 				onKeyDown={onKeyDownInner}
 			/>

package/src/components/input/Input.tsx

@@ -20,7 +20,7 @@ export const inputClassName = clsx(
 );
 
 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-black)',
+	'layer-components:(min-w-60px 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-black)',
 	'layer-components:(w-max-content overflow-clip)',
 	'layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:(bg-transparent border-gray shadow-none placeholder-gray-dark)',
 	'layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:(outline-none ring ring-4 ring-accent)',

package/src/components/popover/Popover.stories.tsx

@@ -26,6 +26,7 @@ export const Default: Story = {
 					<Popover.Arrow />
 					<Popover.Title>Hello</Popover.Title>
 					<Popover.Description>This is a popover content.</Popover.Description>
+					<Popover.Close />
 				</Popover.Content>
 			</Popover>
 		);

package/src/components/popover/Popover.tsx

@@ -5,10 +5,12 @@ import {
 } from '@base-ui/react/popover';
 
 import { MenuArrowProps } from '@base-ui/react/menu';
-import classNames from 'clsx';
+import classNames, { clsx } from 'clsx';
 import { Ref } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
 import { GroupScaleReset } from '../../systems/GroupScale.js';
+import { Button, ButtonProps } from '../button/Button.js';
+import { Icon } from '../icon/Icon.js';
 import { popupClassName } from '../primitives/menus.js';
 import { ArrowSvg } from '../utility/ArrowSvg.js';
 
@@ -25,11 +27,29 @@ const StyledArrow = withClassName(
 	'layer-components:data-[open]:(scale-100 opacity-100)',
 );
 
-const StyledClose = withClassName(
-	PopoverPrimitive.Close,
-	'layer-components:hover:bg-lightBlend layer-components:focus:shadow-focus layer-components:([all:unset] [font-family:inherit] absolute right-5px top-5px h-25px w-25px inline-flex items-center justify-center rounded-lg color-gray-dark/80)',
+const StyledClose = ({
+	className,
+	inline,
+	...props
+}: ButtonProps & {
+	inline?: boolean;
+}) => (
+	<PopoverPrimitive.Close
+		render={
+			<Button
+				emphasis="ghost"
+				size="small"
+				className={clsx(
+					!inline && 'layer-composed:(absolute right-sm top-sm)',
+					className,
+				)}
+				{...props}
+			/>
+		}
+	>
+		<Icon name="x" />
+	</PopoverPrimitive.Close>
 );
-
 // Exports
 export const PopoverRoot = PopoverPrimitive.Root;
 export const PopoverTrigger = PopoverPrimitive.Trigger;

package/src/components/toasts/toasts.stories.tsx

@@ -19,6 +19,9 @@ export const Default: Story = {
 	render(args) {
 		return (
 			<Box col gap>
+				<Box full="width" justify="end">
+					<Button>Test</Button>
+				</Box>
 				<Button
 					onClick={() => {
 						toast(

package/src/components/toasts/toasts.tsx

@@ -30,7 +30,7 @@ export const DefaultToastProvider = ({
 export function Toaster() {
 	return (
 		<Toast.Portal>
-			<Toast.Viewport className="overflow-clip">
+			<Toast.Viewport className="pointer-events-none overflow-clip">
 				<ToastList />
 			</Toast.Viewport>
 		</Toast.Portal>
@@ -58,7 +58,7 @@ function ToastList() {
 				'h-[--height]',
 				'flex flex-col items-center gap-xs',
 				// other properties
-				'select-none',
+				'pointer-events-none select-none',
 				// animation and interaction
 				'translate-x-[--toast-swipe-movement-x] translate-y-[calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height)))] scale-[var(--scale)]',
 				'[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]',
@@ -95,10 +95,10 @@ function ToastList() {
 				mode === 'dark' ? 'override-light' : 'override-dark',
 			)}
 		>
-			<Toast.Content className="max-w-sm flex flex-col gap-2px [&[data-behind]:not([data-expanded])]:pointer-events-none">
+			<Toast.Content className="pointer-events-auto max-w-sm flex flex-col gap-2px [&[data-behind]:not([data-expanded])]:pointer-events-none">
 				<div
 					className={clsx(
-						'layer-components:(relative b-1 b-black rounded-md b-solid py-sm pl-md pr-sm shadow-md color-black bg-main-wash)',
+						'layer-components:(relative b-1 rounded-md b-solid py-sm pl-md pr-sm shadow-md color-black bg-main-wash b-black)',
 						'layer-components:(flex flex-row gap-sm)',
 						'[[data-behind]:not([data-expanded])_&]:(max-h-[--height] bg-darken-2)',
 					)}

package/src/hooks/useVisualViewportOffset.ts

@@ -40,6 +40,7 @@ export function useVisualViewportOffset(disable?: boolean) {
 export function useIsKeyboardOpen() {
 	const { virtualKeyboardBehavior } = useConfig();
 
+	// viewport heuristic
 	const [isViewportConstrained, setIsViewportConstrained] = useState(false);
 	useReactToViewportChanges((viewport) => {
 		// heuristic - 100px difference between visual viewport and window height
@@ -48,6 +49,7 @@ export function useIsKeyboardOpen() {
 		);
 	}, virtualKeyboardBehavior !== 'displace');
 
+	// simulated keyboard
 	const [simulateKeyboardOpen, setSimulateKeyboardOpen] = useState<
 		boolean | undefined
 	>(undefined);
@@ -69,6 +71,7 @@ export function useIsKeyboardOpen() {
 		};
 	}, []);
 
+	// virtual keyboard API
 	const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
 	useEffect(() => {
 		if (typeof navigator === 'undefined' || typeof window === 'undefined') {
@@ -176,3 +179,47 @@ function useReactToViewportChanges(
 		};
 	}, [stableCb, disable]);
 }
+
+export interface VirtualKeyboardFocusOptions {
+	focusElementTypes?: string[];
+}
+export function useVirtualKeyboardFocusBehavior({
+	focusElementTypes = ['input', 'textarea', 'select'],
+}: VirtualKeyboardFocusOptions = {}) {
+	const stableFocusElementTypes = focusElementTypes
+		.map((type) => type.toLowerCase())
+		.join(',');
+	useEffect(() => {
+		if (typeof navigator === 'undefined' || typeof window === 'undefined') {
+			return;
+		}
+
+		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 as any;
+
+		const matchElements = stableFocusElementTypes.split(',');
+
+		function update() {
+			// const open = virtualKeyboard.boundingRect.height > 0;
+			const activeElement = document.activeElement;
+			if (
+				activeElement &&
+				matchElements.includes(activeElement.tagName.toLowerCase())
+			) {
+				activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+			}
+		}
+
+		virtualKeyboard.addEventListener('geometrychange', update);
+		return () => {
+			virtualKeyboard.removeEventListener('geometrychange', update);
+		};
+	}, [stableFocusElementTypes]);
+}

package/src/keyboard.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Input, TextArea } from './components/index.js';
+import { useVirtualKeyboardBehavior } from './hooks/useVirtualKeyboardBehavior.js';
+
+const meta = {
+	title: 'Virtual Keyboard Test',
+	argTypes: {},
+	parameters: {
+		controls: { expanded: false },
+		layout: 'fullscreen',
+	},
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+	render(args) {
+		useVirtualKeyboardBehavior('overlay');
+		return (
+			<>
+				<div className="h-screen flex flex-col">
+					<div className="flex flex-grow flex-col items-center justify-center p-lg">
+						Focus the inputs below to see how the virtual keyboard behavior
+						works.
+					</div>
+					<Input className="w-full" />
+					<TextArea className="w-full" />
+				</div>
+			</>
+		);
+	},
+};

package/src/systems/GroupScale.tsx

@@ -18,8 +18,12 @@ export function useGroupScale() {
 	return useContext(GroupScaleContext);
 }
 
-export function useGroupScaleStyles(composeStyles?: CSSProperties) {
-	const scale = useGroupScale();
+export function useGroupScaleStyles(
+	composeStyles?: CSSProperties,
+	forceScale?: number,
+) {
+	const ctxScale = useGroupScale();
+	const scale = forceScale ?? ctxScale;
 	return {
 		[PROPS.LOCALS.SPACING_SCALE]: scale,
 		[PROPS.LOCALS.CORNER_SCALE]: scale,
@@ -34,3 +38,13 @@ export const GroupScaleReset = ({ children }: { children: ReactNode }) => {
 		</GroupScaleContext.Provider>
 	);
 };
+
+export function withGroupScaleReset<T>(Component: React.ComponentType<T>) {
+	return function WithGroupScaleReset(props: T) {
+		return (
+			<GroupScaleReset>
+				<Component {...(props as any)} />
+			</GroupScaleReset>
+		);
+	};
+}

package/src/uno/preflights/index.ts

@@ -3,6 +3,7 @@ import { basePreflight } from './base.js';
 import { colorPreflight, ColorPreflightOptions } from './colors.js';
 import { fontsPreflight, FontsPreflightOptions } from './fonts.js';
 import { globalPreflight, GlobalsPreflightConfig } from './globals.js';
+import { keyboardPreflight } from './keyboard.js';
 import { layerPreflight } from './layers.js';
 import { modePreflight } from './mode.js';
 import { propertiesPreflight } from './properties.js';
@@ -22,4 +23,5 @@ export const preflights = (config: PreflightConfig): Preflight<any>[] => [
 	fontsPreflight(config),
 	propertiesPreflight,
 	userPreflight(config),
+	keyboardPreflight,
 ];