@a-type/ui 3.0.22 → 3.0.23

package/dist/esm/systems/GroupScale.js

@@ -0,0 +1,20 @@
+// @unocss-include
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+export const GroupScaleContext = createContext(1);
+const GROUP_SCALE_NESTING_FACTOR = 0.75;
+export const GroupScaleLayer = ({ children }) => {
+    const current = useGroupScale();
+    return (_jsx(GroupScaleContext.Provider, { value: current * GROUP_SCALE_NESTING_FACTOR, children: children }));
+};
+export function useGroupScale() {
+    return useContext(GroupScaleContext);
+}
+export function useGroupScaleStyles(composeStyles) {
+    const scale = useGroupScale();
+    return Object.assign({ '--spacing-scale': scale, '--local-corner-scale': scale }, composeStyles);
+}
+export const GroupScaleReset = ({ children }) => {
+    return (_jsx(GroupScaleContext.Provider, { value: 1, children: children }));
+};
+//# sourceMappingURL=GroupScale.js.map

package/dist/esm/systems/GroupScale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupScale.js","sourceRoot":"","sources":["../../../src/systems/GroupScale.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAA4B,UAAU,EAAE,MAAM,OAAO,CAAC;AAE5E,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAS,CAAC,CAAC,CAAC;AAE1D,MAAM,0BAA0B,GAAG,IAAI,CAAC;AAExC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAA4B,EAAE,EAAE;IACzE,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC;IAChC,OAAO,CACN,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,GAAG,0BAA0B,YACrE,QAAQ,GACmB,CAC7B,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,UAAU,aAAa;IAC5B,OAAO,UAAU,CAAC,iBAAiB,CAAC,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,aAA6B;IAChE,MAAM,KAAK,GAAG,aAAa,EAAE,CAAC;IAC9B,uBACC,iBAAiB,EAAE,KAAK,EACxB,sBAAsB,EAAE,KAAK,IAC1B,aAAa,EACf;AACH,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;IACxE,OAAO,CACN,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,CAAC,YAClC,QAAQ,GACmB,CAC7B,CAAC;AACH,CAAC,CAAC"}

package/package.json

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

package/src/components/box/Box.tsx

@@ -1,5 +1,10 @@
 import clsx from 'clsx';
-import { createContext, Ref, useContext, useMemo } from 'react';
+import { Ref } from 'react';
+import {
+	GroupScaleLayer,
+	GroupScaleReset,
+	useGroupScaleStyles,
+} from '../../systems/GroupScale.js';
 import { PaletteName } from '../../uno/index.js';
 import { SlotDiv, SlotDivProps } from '../utility/SlotDiv.js';
 
@@ -84,16 +89,7 @@ export function Box({
 	ref,
 	...rest
 }: BoxProps) {
-	const { spacingScale } = useContext(BoxContext);
-
-	const style = useMemo(
-		() => ({
-			...userStyle,
-			'--spacing-scale': container === 'reset' ? 1 : spacingScale,
-			'--local-corner-scale': container === 'reset' ? 1 : `${spacingScale}`,
-		}),
-		[userStyle, spacingScale, container],
-	);
+	const style = useGroupScaleStyles(userStyle);
 
 	const items = itemsSolo ?? align?.split(' ')[0];
 	const justify = justifySolo ?? align?.split(' ')[1];
@@ -220,26 +216,11 @@ export function Box({
 	);
 
 	if (container || p) {
-		return (
-			<BoxContext.Provider
-				value={{
-					spacingScale:
-						container === 'reset'
-							? 1
-							: spacingScale * SPACING_SCALE_NESTING_FACTOR,
-				}}
-			>
-				{main}
-			</BoxContext.Provider>
-		);
+		if (container === 'reset') {
+			return <GroupScaleReset>{main}</GroupScaleReset>;
+		}
+		return <GroupScaleLayer>{main}</GroupScaleLayer>;
 	}
 
 	return main;
 }
-
-const SPACING_SCALE_NESTING_FACTOR = 0.75;
-export const BoxContext = createContext<{
-	spacingScale: number;
-}>({
-	spacingScale: 1,
-});

package/src/components/card/Card.tsx

@@ -1,7 +1,17 @@
 import { Slot } from '@radix-ui/react-slot';
 import classNames from 'clsx';
-import { HTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';
+import {
+	CSSProperties,
+	HTMLAttributes,
+	MouseEvent,
+	ReactNode,
+	Ref,
+} from 'react';
 import { withClassName, withProps } from '../../hooks.js';
+import {
+	GroupScaleLayer,
+	useGroupScaleStyles,
+} from '../../systems/GroupScale.js';
 import { Box } from '../box/Box.js';
 import { Masonry, MasonryProps } from '../masonry/masonry.js';
 import { SlotDiv } from '../utility/SlotDiv.js';
@@ -18,6 +28,8 @@ export function CardMain({
 	compact,
 	nonInteractive,
 	ref,
+	style,
+	children,
 	...rest
 }: {
 	asChild?: boolean;
@@ -29,47 +41,59 @@ export function CardMain({
 	nonInteractive?: boolean;
 	visuallyFocused?: boolean;
 	visuallyDisabled?: boolean;
+	style?: CSSProperties;
 	ref?: Ref<any>;
 }) {
 	const isInteractive = !nonInteractive && (!!asChild || !!rest.onClick);
 	const Comp = asChild ? Slot : isInteractive ? 'button' : 'div';
+
+	const scaleStyles = useGroupScaleStyles(style);
+
 	return (
-		<Comp
-			ref={ref}
-			className={classNames(
-				'layer-components:(flex flex-col items-start gap-1 transition pb-2 flex-1 min-h-40px bg-transparent border-none text-start text-inherit text-sm relative z-1 p-0 font-inherit outline-none rounded-t-lg)',
-				!!compact && 'layer-variants:(pb-0)',
-				isInteractive &&
-					classNames(
-						'layer-components:cursor-pointer',
-						'layer-components:hover:(bg-black/10 color-black)',
-						'layer-components:focus:outline-none',
-						'layer-components:focus-visible:(outline-none bg-black/10 ring-inset ring-4 ring-accent)',
-						'layer-components:[&[data-visually-focused=true]]:(bg-black/10 ring-inset ring-4 ring-accent)',
-						'layer-components:disabled:(cursor-default)',
-						'layer-components:[&[data-visually-disabled=true]]:(cursor-default)',
-					),
-				className,
-			)}
-			data-compact={compact}
-			data-visually-focused={rest.visuallyFocused}
-			data-visually-disabled={rest.visuallyDisabled}
-			data-interactive={isInteractive}
-			{...rest}
-		/>
+		<GroupScaleLayer>
+			<Comp
+				ref={ref}
+				className={classNames(
+					'layer-components:(flex flex-col items-start gap-1 transition pb-xs flex-1 min-h-40px bg-transparent)',
+					'layer-components:(border-none text-start text-inherit text-sm relative z-1 p-0 font-inherit outline-none rounded-t-md)',
+					!!compact && 'layer-variants:(pb-0)',
+					isInteractive &&
+						classNames(
+							'layer-components:cursor-pointer',
+							'layer-components:hover:(bg-black/10 color-black)',
+							'layer-components:focus:outline-none',
+							'layer-components:focus-visible:(outline-none bg-black/10 ring-inset ring-4 ring-accent)',
+							'layer-components:[&[data-visually-focused=true]]:(bg-black/10 ring-inset ring-4 ring-accent)',
+							'layer-components:disabled:(cursor-default)',
+							'layer-components:[&[data-visually-disabled=true]]:(cursor-default)',
+						),
+					className,
+				)}
+				data-compact={compact}
+				data-visually-focused={rest.visuallyFocused}
+				data-visually-disabled={rest.visuallyDisabled}
+				data-interactive={isInteractive}
+				style={scaleStyles}
+				{...rest}
+			>
+				{children}
+			</Comp>
+		</GroupScaleLayer>
 	);
 }
 
 export const CardTitle = withClassName(
 	'div',
-	'layer-components:(flex flex-col gap-1 mt-0 bg-white py-2 px-3 rounded-lg rounded-bl-none rounded-tr-none w-auto mr-auto border border-solid border-gray-dark/50 border-t-none border-l-none text-md max-h-80px overflow-hidden text-ellipsis max-w-full text-inherit font-semibold relative z-1 transition-colors)',
-	'layer-components:[[data-compact=true]_&]:(py-1 text-sm)',
+	'layer-components:(flex flex-col gap-1 my-xs mx-xs py-xs px-md w-auto max-h-80px max-w-full relative z-1)',
+	'layer-components:(bg-white rounded-md border border-solid border-gray-dark transition-colors)',
+	'layer-components:(text-md overflow-hidden text-ellipsis text-inherit font-semibold)',
+	'layer-components:[[data-compact=true]_&]:(py-xs text-sm)',
 );
 
 const CardContentRoot = withClassName(
 	'div',
-	'layer-components:(flex flex-col gap-1 px-2 py-1 bg-white/80 color-black rounded-md mx-2 my-0.5 border border-solid border-gray-dark/50 text-xs relative z-1)',
-	'layer-variants:[[data-compact=true]_&]:(py-0 px-1 my-0 text-xs)',
+	'layer-components:(flex flex-col gap-1 px-2 py-1 bg-white/80 color-black rounded-sm mx-2 my-0.5 border border-solid border-gray-dark/50 text-xs relative z-1)',
+	'layer-variants:[[data-compact=true]_&]:(py-0 px-sm my-0 text-xs)',
 	'layer-variants:[&[data-unstyled=true]]:(p-0 [background:unset] border-none)',
 );
 export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {

package/src/components/contextMenu/contextMenu.tsx

@@ -2,7 +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';
+import { GroupScaleReset } from '../../systems/GroupScale.js';
 
 export const ContextMenuRoot = ContextMenuPrimitive.Root;
 
@@ -16,7 +16,7 @@ export const ContextMenuContent = function Content({
 }) {
 	return (
 		<ContextMenuPrimitive.Portal>
-			<BoxContext.Provider value={{ spacingScale: 1 }}>
+			<GroupScaleReset>
 				<ContextMenuPrimitive.Content
 					className={classNames(
 						'layer-components:(min-w-120px bg-white rounded-md overflow-hidden border-gray-dark border shadow-md z-menu)',
@@ -35,7 +35,7 @@ export const ContextMenuContent = function Content({
 					alignOffset={-10}
 					{...props}
 				/>
-			</BoxContext.Provider>
+			</GroupScaleReset>
 		</ContextMenuPrimitive.Portal>
 	);
 };

package/src/components/dialog/Dialog.tsx

@@ -14,7 +14,7 @@ import {
 import { useMediaQuery } from '../../hooks/useMediaQuery.js';
 import useMergedRef from '../../hooks/useMergedRef.js';
 import { withClassName } from '../../hooks/withClassName.js';
-import { BoxContext } from '../box/Box.js';
+import { GroupScaleReset } from '../../systems/GroupScale.js';
 import { Button } from '../button/index.js';
 import { Icon } from '../icon/Icon.js';
 import { useParticles } from '../particles/index.js';
@@ -160,7 +160,7 @@ export const Content = function Content({
 	return (
 		<DialogPrimitive.Portal>
 			<StyledOverlay />
-			<BoxContext.Provider value={{ spacingScale: 1 }}>
+			<GroupScaleReset>
 				<StyledContent
 					data-dialog-content
 					{...bind(props)}
@@ -184,7 +184,7 @@ export const Content = function Content({
 					{!disableSheet && <DialogSwipeHandle />}
 					{children}
 				</StyledContent>
-			</BoxContext.Provider>
+			</GroupScaleReset>
 		</DialogPrimitive.Portal>
 	);
 };

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -3,8 +3,8 @@ 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 { GroupScaleReset } from '../../systems/GroupScale.js';
 import { PaletteName } from '../../uno/index.js';
-import { BoxContext } from '../box/Box.js';
 import { SlotDiv } from '../utility/SlotDiv.js';
 import { DropdownTriggerProvider } from './DropdownTriggerContext.js';
 
@@ -13,9 +13,9 @@ const StyledContent = withClassName(
 		props: DropdownMenuPrimitive.DropdownMenuContentProps,
 	) {
 		return (
-			<BoxContext.Provider value={{ spacingScale: 1 }}>
+			<GroupScaleReset>
 				<DropdownMenuPrimitive.Content {...props} />
-			</BoxContext.Provider>
+			</GroupScaleReset>
 		);
 	},
 	'layer-components:(min-w-220px bg-white z-menu shadow-lg rounded-md border border-gray-dark flex flex-col)',

package/src/components/layouts/PageNav.tsx

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

package/src/components/layouts/PageNowPlaying.tsx

@@ -2,7 +2,7 @@
 
 import classNames from 'clsx';
 import { HTMLAttributes } from 'react';
-import { BoxContext } from '../box/Box.js';
+import { GroupScaleReset } from '../../systems/GroupScale.js';
 import { useConfig } from '../provider/Provider.js';
 
 export function PageNowPlaying({
@@ -17,7 +17,7 @@ export function PageNowPlaying({
 	const { virtualKeyboardBehavior } = useConfig();
 
 	return (
-		<BoxContext.Provider value={{ spacingScale: 1 }}>
+		<GroupScaleReset>
 			<div
 				{...props}
 				className={classNames(
@@ -39,6 +39,6 @@ export function PageNowPlaying({
 					className,
 				)}
 			/>
-		</BoxContext.Provider>
+		</GroupScaleReset>
 	);
 }

package/src/components/popover/Popover.tsx

@@ -5,7 +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';
+import { GroupScaleReset } from '../../systems/GroupScale.js';
 
 const StyledContent = withClassName(
 	PopoverPrimitive.Content,
@@ -55,7 +55,7 @@ export const PopoverContent = function PopoverContent({
 }) {
 	return (
 		<PopoverPrimitive.Portal forceMount={forceMount}>
-			<BoxContext.Provider value={{ spacingScale: 1 }}>
+			<GroupScaleReset>
 				<StyledContent
 					{...props}
 					forceMount={forceMount}
@@ -73,7 +73,7 @@ export const PopoverContent = function PopoverContent({
 				>
 					{children}
 				</StyledContent>
-			</BoxContext.Provider>
+			</GroupScaleReset>
 		</PopoverPrimitive.Portal>
 	);
 };

package/src/components/select/Select.tsx

@@ -12,7 +12,7 @@ import {
 	useContext,
 } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
-import { BoxContext } from '../box/Box.js';
+import { GroupScaleReset } from '../../systems/GroupScale.js';
 import { Button, ButtonProps } from '../button/Button.js';
 import { getButtonClassName } from '../button/classes.js';
 import { Icon } from '../icon/index.js';
@@ -146,7 +146,7 @@ export const SelectContent = withPassthroughNativeRender(
 	({ ref: forwardedRef, children, inDialog, className, ...props }) => {
 		return (
 			<SelectPrimitive.Portal>
-				<BoxContext.Provider value={{ spacingScale: 1 }}>
+				<GroupScaleReset>
 					<SelectPrimitive.Content
 						className={classNames(
 							'layer-components:(overflow-hidden bg-white rounded-md border border-solid border border-black z-menu shadow-lg)',
@@ -171,7 +171,7 @@ export const SelectContent = withPassthroughNativeRender(
 							<Icon name="chevron" />
 						</SelectPrimitive.ScrollDownButton>
 					</SelectPrimitive.Content>
-				</BoxContext.Provider>
+				</GroupScaleReset>
 			</SelectPrimitive.Portal>
 		);
 	},

package/src/components/tooltip/Tooltip.tsx

@@ -1,8 +1,6 @@
-'use client';
-
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import classNames from 'clsx';
-import { BoxContext } from '../box/Box.js';
+import { GroupScaleReset } from '../../systems/GroupScale.js';
 
 export interface TooltipContentProps
 	extends TooltipPrimitive.TooltipContentProps {
@@ -17,7 +15,7 @@ function Content({
 }: TooltipPrimitive.TooltipContentProps) {
 	return (
 		<TooltipPrimitive.Portal>
-			<BoxContext.Provider value={{ spacingScale: 1 }}>
+			<GroupScaleReset>
 				<TooltipPrimitive.Content
 					className={classNames(
 						'layer-components:(relative rounded-sm py-2 px-3 text-sm leading-tight shadow-sm select-none hidden z-tooltip)',
@@ -39,7 +37,7 @@ function Content({
 					{children}
 					<TooltipPrimitive.Arrow className="layer-components:arrow" />
 				</TooltipPrimitive.Content>
-			</BoxContext.Provider>
+			</GroupScaleReset>
 		</TooltipPrimitive.Portal>
 	);
 }

package/src/systems/GroupScale.tsx

@@ -0,0 +1,35 @@
+import { createContext, CSSProperties, ReactNode, useContext } from 'react';
+
+export const GroupScaleContext = createContext<number>(1);
+
+const GROUP_SCALE_NESTING_FACTOR = 0.75;
+
+export const GroupScaleLayer = ({ children }: { children?: ReactNode }) => {
+	const current = useGroupScale();
+	return (
+		<GroupScaleContext.Provider value={current * GROUP_SCALE_NESTING_FACTOR}>
+			{children}
+		</GroupScaleContext.Provider>
+	);
+};
+
+export function useGroupScale() {
+	return useContext(GroupScaleContext);
+}
+
+export function useGroupScaleStyles(composeStyles?: CSSProperties) {
+	const scale = useGroupScale();
+	return {
+		'--spacing-scale': scale,
+		'--local-corner-scale': scale,
+		...composeStyles,
+	};
+}
+
+export const GroupScaleReset = ({ children }: { children: ReactNode }) => {
+	return (
+		<GroupScaleContext.Provider value={1}>
+			{children}
+		</GroupScaleContext.Provider>
+	);
+};