@a-type/ui 1.7.11 → 1.8.0

package/src/components/contextMenu/contextMenu.tsx

@@ -2,6 +2,7 @@ import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import classNames from 'clsx';
 import { ComponentPropsWithoutRef } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
+import { BoxContext } from '../box/Box.js';
 
 export const ContextMenuRoot = ContextMenuPrimitive.Root;
 
@@ -15,23 +16,25 @@ export const ContextMenuContent = function Content({
 }) {
 	return (
 		<ContextMenuPrimitive.Portal>
-			<ContextMenuPrimitive.Content
-				className={classNames(
-					'layer-components:(min-w-120px bg-white rounded-md border-default overflow-hidden p-1 shadow-md z-menu)',
-					'layer-components:transform-origin-[var(--radix-context-menu-transform-origin)]',
-					'layer-components:[&[data-state=open]]:animate-popover-in',
-					'layer-components:[&[data-state=closed]]:animate-popover-out',
-					'layer-components:(max-h-[var(--radix-context-menu-content-available-height)] overflow-y-auto)',
-					'important:motion-reduce:animate-none',
-					className,
-				)}
-				onClick={(ev) => {
-					ev.stopPropagation();
-					onClick?.(ev);
-				}}
-				ref={ref}
-				{...props}
-			/>
+			<BoxContext.Provider value={{ spacingScale: 1 }}>
+				<ContextMenuPrimitive.Content
+					className={classNames(
+						'layer-components:(min-w-120px bg-white rounded-md border-default overflow-hidden p-1 shadow-md z-menu)',
+						'layer-components:transform-origin-[var(--radix-context-menu-transform-origin)]',
+						'layer-components:[&[data-state=open]]:animate-popover-in',
+						'layer-components:[&[data-state=closed]]:animate-popover-out',
+						'layer-components:(max-h-[var(--radix-context-menu-content-available-height)] overflow-y-auto)',
+						'important:motion-reduce:animate-none',
+						className,
+					)}
+					onClick={(ev) => {
+						ev.stopPropagation();
+						onClick?.(ev);
+					}}
+					ref={ref}
+					{...props}
+				/>
+			</BoxContext.Provider>
 		</ContextMenuPrimitive.Portal>
 	);
 };

package/src/components/dialog/Dialog.tsx

@@ -15,6 +15,7 @@ import {
 } from 'react';
 import useMergedRef from '../../hooks/useMergedRef.js';
 import { withClassName } from '../../hooks/withClassName.js';
+import { BoxContext } from '../box/Box.js';
 import { Button } from '../button/index.js';
 import { useParticles } from '../particles/index.js';
 import { useConfig } from '../provider/Provider.js';
@@ -121,29 +122,31 @@ export const Content = function Content({
 	return (
 		<DialogPrimitive.Portal>
 			<StyledOverlay />
-			<StyledContent
-				data-dialog-content
-				ref={finalRef}
-				{...props}
-				className={classNames(
-					{
-						'md:max-w-800px': width === 'lg',
-						'max-w-600px': width === 'md',
-						'max-w-300px': width === 'sm',
-					},
-					!disableSheet && sheetClassNames,
-					!disableSheet &&
-						virtualKeyboardBehavior === 'overlay' &&
-						sheetClassNameWithOverlayKeyboard,
-					!disableSheet &&
-						virtualKeyboardBehavior === 'displace' &&
-						sheetClassNameWithDisplaceKeyboard,
-					outerClassName || className,
-				)}
-			>
-				{!disableSheet && <DialogSwipeHandle />}
-				{children}
-			</StyledContent>
+			<BoxContext.Provider value={{ spacingScale: 1 }}>
+				<StyledContent
+					data-dialog-content
+					ref={finalRef}
+					{...props}
+					className={classNames(
+						{
+							'md:max-w-800px': width === 'lg',
+							'max-w-600px': width === 'md',
+							'max-w-300px': width === 'sm',
+						},
+						!disableSheet && sheetClassNames,
+						!disableSheet &&
+							virtualKeyboardBehavior === 'overlay' &&
+							sheetClassNameWithOverlayKeyboard,
+						!disableSheet &&
+							virtualKeyboardBehavior === 'displace' &&
+							sheetClassNameWithDisplaceKeyboard,
+						outerClassName || className,
+					)}
+				>
+					{!disableSheet && <DialogSwipeHandle />}
+					{children}
+				</StyledContent>
+			</BoxContext.Provider>
 		</DialogPrimitive.Portal>
 	);
 };

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -3,9 +3,18 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import classNames, { clsx } from 'clsx';
 import { Ref } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
+import { BoxContext } from '../box/Box.js';
 
 const StyledContent = withClassName(
-	DropdownMenuPrimitive.Content,
+	function DropdownMenuContent(
+		props: DropdownMenuPrimitive.DropdownMenuContentProps,
+	) {
+		return (
+			<BoxContext.Provider value={{ spacingScale: 1 }}>
+				<DropdownMenuPrimitive.Content {...props} />
+			</BoxContext.Provider>
+		);
+	},
 	'min-w-220px bg-white z-menu shadow-lg rounded-lg border-default',
 	'layer-components:transform-origin-[var(--radix-dropdown-menu-transform-origin)]',
 	'layer-components:[&[data-state=open]]:animate-popover-in',

package/src/components/layouts/PageNav.tsx

@@ -3,6 +3,7 @@
 import classNames from 'clsx';
 import { HTMLAttributes, useRef } from 'react';
 import { useBoundsCssVars } from '../../hooks.js';
+import { BoxContext } from '../box/Box.js';
 import { HideWhileKeyboardOpen } from '../utility/HideWhileKeyboardOpen.js';
 
 export function PageNav({
@@ -30,7 +31,9 @@ export function PageNav({
 			)}
 			ref={ref}
 		>
-			{children}
+			<BoxContext.Provider value={{ spacingScale: 1 }}>
+				{children}
+			</BoxContext.Provider>
 		</HideWhileKeyboardOpen>
 	);
 }

package/src/components/layouts/PageNowPlaying.tsx

@@ -2,6 +2,7 @@
 
 import classNames from 'clsx';
 import { HTMLAttributes } from 'react';
+import { BoxContext } from '../box/Box.js';
 import { useConfig } from '../provider/Provider.js';
 
 export function PageNowPlaying({
@@ -16,26 +17,28 @@ export function PageNowPlaying({
 	const { virtualKeyboardBehavior } = useConfig();
 
 	return (
-		<div
-			{...props}
-			className={classNames(
-				'layer-components:(fixed left-0 right-0 z-now-playing flex flex-col gap-2 items-end)',
-				// 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:sm:(fixed bottom-3 left-[var(--content-left,20%)] transition-opacity top-auto items-end w-[var(--content-width,100%)] max-w-80vw 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)',
-				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,
-			)}
-		/>
+		<BoxContext.Provider value={{ spacingScale: 1 }}>
+			<div
+				{...props}
+				className={classNames(
+					'layer-components:(fixed left-0 right-0 z-now-playing flex flex-col gap-2 items-end)',
+					// 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:sm:(fixed bottom-3 left-[var(--content-left,20%)] transition-opacity top-auto items-end w-[var(--content-width,100%)] max-w-80vw 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)',
+					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,
+				)}
+			/>
+		</BoxContext.Provider>
 	);
 }

package/src/components/popover/Popover.tsx

@@ -5,6 +5,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import classNames from 'clsx';
 import { Ref } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
+import { BoxContext } from '../box/Box.js';
 
 const StyledContent = withClassName(
 	PopoverPrimitive.Content,
@@ -54,23 +55,25 @@ export const PopoverContent = function PopoverContent({
 }) {
 	return (
 		<PopoverPrimitive.Portal forceMount={forceMount}>
-			<StyledContent
-				{...props}
-				forceMount={forceMount}
-				ref={ref}
-				className={classNames(
-					{
-						'layer-variants:important:p-0': padding === 'none',
-						'layer-variants:p-5': padding === 'default',
-						'layer-variants:rounded-none': radius === 'none',
-						'layer-variants:rounded-lg': radius === 'default',
-						'layer-variants:rounded-md': radius === 'md',
-					},
-					className,
-				)}
-			>
-				{children}
-			</StyledContent>
+			<BoxContext.Provider value={{ spacingScale: 1 }}>
+				<StyledContent
+					{...props}
+					forceMount={forceMount}
+					ref={ref}
+					className={classNames(
+						{
+							'layer-variants:important:p-0': padding === 'none',
+							'layer-variants:p-5': padding === 'default',
+							'layer-variants:rounded-none': radius === 'none',
+							'layer-variants:rounded-lg': radius === 'default',
+							'layer-variants:rounded-md': radius === 'md',
+						},
+						className,
+					)}
+				>
+					{children}
+				</StyledContent>
+			</BoxContext.Provider>
 		</PopoverPrimitive.Portal>
 	);
 };

package/src/components/select/Select.tsx

@@ -17,6 +17,7 @@ import {
 	useContext,
 } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
+import { BoxContext } from '../box/Box.js';
 import { Button, ButtonProps, getButtonClassName } from '../button/index.js';
 import { Icon } from '../icon/index.js';
 
@@ -147,30 +148,32 @@ export const SelectContent = withPassthroughNativeRender(
 	({ ref: forwardedRef, children, inDialog, className, ...props }) => {
 		return (
 			<SelectPrimitive.Portal>
-				<SelectPrimitive.Content
-					className={classNames(
-						'layer-components:(overflow-hidden bg-white rounded-lg border border-solid border border-black z-menu shadow-lg)',
-						'layer-components:transform-origin-[var(--radix-select-content-transform-origin)]',
-						'layer-components:[&[data-state=open]]:animate-popover-in',
-						'layer-components:[&[data-state=closed]]:animate-popover-out',
-						'layer-components:(min-w-[var(--radix-select-trigger-width)] max-h-[var(--radix-select-content-available-height)])',
-						inDialog && 'z-[calc(var(--z-dialog)+1)]',
-						className,
-					)}
-					style={zIndex}
-					{...props}
-					ref={forwardedRef}
-				>
-					<SelectPrimitive.ScrollUpButton className="flex items-center justify-center h-25px bg-white color-primary-dark cursor-default">
-						<ChevronUpIcon />
-					</SelectPrimitive.ScrollUpButton>
-					<SelectPrimitive.Viewport className="p-1">
-						{children}
-					</SelectPrimitive.Viewport>
-					<SelectPrimitive.ScrollDownButton className="flex items-center justify-center h-25px bg-white color-primary-dark cursor-default">
-						<ChevronDownIcon />
-					</SelectPrimitive.ScrollDownButton>
-				</SelectPrimitive.Content>
+				<BoxContext.Provider value={{ spacingScale: 1 }}>
+					<SelectPrimitive.Content
+						className={classNames(
+							'layer-components:(overflow-hidden bg-white rounded-lg border border-solid border border-black z-menu shadow-lg)',
+							'layer-components:transform-origin-[var(--radix-select-content-transform-origin)]',
+							'layer-components:[&[data-state=open]]:animate-popover-in',
+							'layer-components:[&[data-state=closed]]:animate-popover-out',
+							'layer-components:(min-w-[var(--radix-select-trigger-width)] max-h-[var(--radix-select-content-available-height)])',
+							inDialog && 'z-[calc(var(--z-dialog)+1)]',
+							className,
+						)}
+						style={zIndex}
+						{...props}
+						ref={forwardedRef}
+					>
+						<SelectPrimitive.ScrollUpButton className="flex items-center justify-center h-25px bg-white color-primary-dark cursor-default">
+							<ChevronUpIcon />
+						</SelectPrimitive.ScrollUpButton>
+						<SelectPrimitive.Viewport className="p-1">
+							{children}
+						</SelectPrimitive.Viewport>
+						<SelectPrimitive.ScrollDownButton className="flex items-center justify-center h-25px bg-white color-primary-dark cursor-default">
+							<ChevronDownIcon />
+						</SelectPrimitive.ScrollDownButton>
+					</SelectPrimitive.Content>
+				</BoxContext.Provider>
 			</SelectPrimitive.Portal>
 		);
 	},

package/src/components/tooltip/Tooltip.tsx

@@ -2,6 +2,7 @@
 
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import classNames from 'clsx';
+import { BoxContext } from '../box/Box.js';
 
 function Content({
 	children,
@@ -10,20 +11,22 @@ function Content({
 }: TooltipPrimitive.TooltipContentProps) {
 	return (
 		<TooltipPrimitive.Portal>
-			<TooltipPrimitive.Content
-				className={classNames(
-					'layer-components:(relative rounded-sm py-2 px-3 bg-black text-white text-sm leading-tight shadow-sm select-none hidden z-tooltip sm:display-initial)',
-					'[&[data-state=delayed-open]]:display-initial',
-					'[&[data-state=instant-open]]:display-initial',
-					'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]',
-					'layer-components:[&[data-state=delayed-open]]:animate-popover-in',
-					className,
-				)}
-				{...props}
-			>
-				{children}
-				<TooltipPrimitive.Arrow className="fill-black" />
-			</TooltipPrimitive.Content>
+			<BoxContext.Provider value={{ spacingScale: 1 }}>
+				<TooltipPrimitive.Content
+					className={classNames(
+						'layer-components:(relative rounded-sm py-2 px-3 bg-black text-white text-sm leading-tight shadow-sm select-none hidden z-tooltip sm:display-initial)',
+						'[&[data-state=delayed-open]]:display-initial',
+						'[&[data-state=instant-open]]:display-initial',
+						'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]',
+						'layer-components:[&[data-state=delayed-open]]:animate-popover-in',
+						className,
+					)}
+					{...props}
+				>
+					{children}
+					<TooltipPrimitive.Arrow className="fill-black" />
+				</TooltipPrimitive.Content>
+			</BoxContext.Provider>
 		</TooltipPrimitive.Portal>
 	);
 }

package/src/uno.preset.ts

@@ -130,11 +130,11 @@ export default function presetAglio({
 			},
 			spacing: makeSpacing(spacingIncrement),
 			borderRadius: {
-				xs: `${0.25 * roundedness}rem`,
-				sm: `${0.5 * roundedness}rem`,
-				md: `${roundedness}rem`,
-				lg: `${roundedness * 1.25}rem`,
-				xl: `${roundedness * 1.5}rem`,
+				xs: `calc(${0.25 * roundedness}rem * var(--spacing-scale,1))`,
+				sm: `calc(${0.5 * roundedness}rem * var(--spacing-scale,1))`,
+				md: `calc(${roundedness}rem * var(--spacing-scale,1))`,
+				lg: `calc(${roundedness * 1.25}rem * var(--spacing-scale,1))`,
+				xl: `calc(${roundedness * 1.5}rem * var(--spacing-scale,1))`,
 				full: roundedness === 0 ? '0px' : '9999px',
 			},
 			lineWidth: {