@a-type/ui 4.0.7 → 4.0.9

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}

package/src/components/popover/Popover.tsx

@@ -49,7 +49,6 @@ export const PopoverContent = function PopoverContent({
 	ref,
 	children,
 	forceMount,
-	disableBlur,
 	className,
 	radius = 'default',
 	padding = 'default',
@@ -71,7 +70,6 @@ export const PopoverContent = function PopoverContent({
 		radius?: 'none' | 'default' | 'md';
 		padding?: 'none' | 'default';
 		forceMount?: boolean;
-		disableBlur?: boolean;
 		ref?: Ref<HTMLDivElement>;
 	}) {
 	return (

package/src/components/progress/Progress.tsx

@@ -48,6 +48,7 @@ const ProgressBase = function ProgressBase({
 			<ProgressTrack>
 				<ProgressIndicator />
 			</ProgressTrack>
+			{children}
 		</ProgressPrimitive.Root>
 	);
 };
@@ -64,13 +65,12 @@ const ProgressValue = withClassName(
 
 export const ProgressLabeled = function ProgressLabeled({
 	ref,
-	children,
 	label,
 	className,
 	color,
 	formatValue,
 	...props
-}: ProgressRootProps & {
+}: Omit<ProgressRootProps, 'children'> & {
 	ref?: React.Ref<HTMLDivElement>;
 	label: React.ReactNode;
 	color?: PaletteName;

package/src/components/pwaInstall/PwaInstall.tsx

@@ -28,11 +28,11 @@ import {
 } from './useIsInstallReady.js';
 import { useWebManifest } from './useWebManifest.js';
 
-export interface PwaInstall extends DialogRootProps {
+export interface PwaInstall extends Omit<DialogRootProps, 'children'> {
 	manifestPath?: string;
 }
 
-export function PwaInstall({ children, manifestPath, ...rest }: PwaInstall) {
+export function PwaInstall({ manifestPath, ...rest }: PwaInstall) {
 	const installed = useIsInstalled();
 	const manifest = useWebManifest(manifestPath);
 	const { open } = useSnapshot(pwaInstallerState);
@@ -55,7 +55,7 @@ export function PwaInstall({ children, manifestPath, ...rest }: PwaInstall) {
 			}}
 		>
 			<Dialog.Content className="flex flex-col gap-xs" id="pwa-install-dialog">
-				<Dialog.Title className="flex flex-row gap-md items-center">
+				<Dialog.Title className="flex flex-row items-center gap-md">
 					{primaryIcon && (
 						<img
 							src={primaryIcon.src}
@@ -65,7 +65,7 @@ export function PwaInstall({ children, manifestPath, ...rest }: PwaInstall) {
 								manifest?.name ??
 								'App Icon'
 							}
-							className="inline-block w-1em h-1em rounded"
+							className="inline-block h-1em w-1em rounded"
 						/>
 					)}
 					Install {manifest?.short_name ?? manifest?.name ?? 'App'}

package/src/components/richEditor/index.tsx

@@ -2,21 +2,21 @@ import clsx from 'clsx';
 
 export const tipTapClassName = clsx(
 	'layer-components:(w-full leading-relaxed)',
-	'layer-components:[&_.ProseMirror:focus]:(outline-none shadow-focus)',
+	'layer-components:[&_.ProseMirror:focus]:shadow-focus layer-components:[&_.ProseMirror:focus]:(outline-none)',
 	'layer-components:[&_h1,h2,h3,p]:mt-0',
-	'layer-components:[&_h1]:(text-2xl font-semibold mb-md)',
+	'layer-components:[&_h1]:(mb-md text-2xl font-semibold)',
 	'layer-components:[&_h1]:[&:not(:first-child)]:mt-xl',
-	'layer-components:[&_h2]:(text-lg font-bold color-gray-dark color-darken-3 mb-md)',
+	'layer-components:[&_h2]:(mb-md text-lg font-bold color-gray-dark color-darken-3)',
 	'layer-components:[&_h2]:[&:not(:first-child)]:mt-lg',
-	'layer-components:[&_h3]:(text-md font-500 color-gray-dark color-darken-2 mb-sm)',
+	'layer-components:[&_h3]:(mb-sm text-md font-500 color-gray-dark color-darken-2)',
 	'layer-components:[&_h3]:[&:not(:first-child)]:mt-md',
-	'layer-components:[&_h4]:(text-xs color-gray-dark color-darken-1 mb-sm uppercase)',
+	'layer-components:[&_h4]:(mb-sm text-xs uppercase color-gray-dark color-darken-1)',
 	'layer-components:[&_h4]:[&:not(:first-child)]:mt-md',
 	'layer-components:[&_p]:(mb-md mt-0)',
 	'layer-components:[&_a]:underline',
-	'layer-components:[&_blockquote]:(border-l-4 border-l-solid border-gray pl-4 mb-md mt-md ml-md)',
-	'layer-components:[&_ul]:(list-disc pl-6 mb-md mt-md)',
-	'layer-components:[&_ol]:(list-decimal pl-6 mb-md mt-md)',
+	'layer-components:[&_blockquote]:(mb-md ml-md mt-md border-l-4 border-l-solid pl-4 border-gray)',
+	'layer-components:[&_ul]:(mb-md mt-md list-disc pl-6)',
+	'layer-components:[&_ol]:(mb-md mt-md list-decimal pl-6)',
 	'layer-components:[&_li]:(mb-sm)',
 	'layer-components:[&_mark]:(bg-main-wash bg-darken-2)',
 	'layer-components:[&_strong]:(font-semibold)',
@@ -24,12 +24,12 @@ export const tipTapClassName = clsx(
 	'layer-components:[&_hr]:(my-lg border-gray)',
 	'layer-components:[&_a]:(underline)',
 	'layer-components:[&_a:hover]:(underline)',
-	'layer-components:[&_a:focus]:(outline-none shadow-focus)',
-	'layer-components:[&_a:focus-visible]:(outline-none ring-inset ring-4 ring-gray)',
-	'layer-components:[&_.ProseMirror]:(bg-white rounded-[20px] px-4 py-2 shadow-sm-inset border-gray-dark border-solid border-1)',
+	'layer-components:[&_a:focus]:shadow-focus layer-components:[&_a:focus]:(outline-none)',
+	'layer-components:[&_a:focus-visible]:(outline-none ring-4 ring-inset ring-gray)',
+	'layer-components:[&_.ProseMirror]:shadow-sm-inset layer-components:[&_.ProseMirror]:(border-1 rounded-[20px] border-solid px-4 py-2 bg-white border-gray-dark)',
 );
 
 export const tipTapReadonlyClassName = clsx(
-	'[&_.ProseMirror]:(bg-transparent border-none shadow-none)',
-	'[&_.ProseMirror:focus]:(outline-none shadow-none bg-transparent)',
+	'[&_.ProseMirror]:(border-none shadow-none bg-transparent)',
+	'[&_.ProseMirror:focus]:(shadow-none outline-none bg-transparent)',
 );

package/src/components/scrollArea/ScrollArea.stories.tsx

@@ -48,7 +48,7 @@ export const Default: Story = {
 export const ConstraintTest: Story = {
 	render({ direction }) {
 		return (
-			<ScrollArea direction={direction} className="w-300px h-300px">
+			<ScrollArea direction={direction} className="h-300px w-300px">
 				<ScrollArea.Content>
 					<Box gap>
 						<Input placeholder="Test input" />

package/src/components/select/Select.stories.tsx

@@ -39,7 +39,7 @@ export const Default: Story = {
 };
 
 export const LongListWithItemLabels: Story = {
-	render({ defaultValue, value, ...args }) {
+	render({ defaultValue: _, value: __, ...args }) {
 		return (
 			<Box full layout="center center" className="min-h-200px">
 				<Select

package/src/components/select/Select.tsx

@@ -105,11 +105,11 @@ export const SelectIcon = ({
 }) => {
 	return (
 		<BaseSelect.Icon
-			className={classNames('color-inherit ml-auto', className)}
+			className={classNames('ml-auto color-inherit', className)}
 			{...props}
 			ref={forwardedRef}
 		>
-			<Icon name="chevron" className="w-[12px] h-[12px] relative top-1px" />
+			<Icon name="chevron" className="relative top-1px h-[12px] w-[12px]" />
 		</BaseSelect.Icon>
 	);
 };
@@ -124,10 +124,10 @@ export const SelectArrow = ({ className, ...props }: SelectArrowProps) => (
 );
 
 const scrollArrowClass = clsx(
-	'layer-components:(w-full bg-white z-1 text-center cursor-default select-none rounded-sm h-1rem text-xs flex items-center justify-center)',
-	'layer-components:before:(content-empty absolute w-full h-full left-0)',
+	'layer-components:(z-1 h-1rem w-full flex cursor-default select-none items-center justify-center rounded-sm text-center text-xs bg-white)',
+	'layer-components:before:(absolute left-0 h-full w-full content-empty)',
 	'layer-components:data-[direction=up]:data-[side=none]:before:(-top-full)',
-	'layer-components:data-[direction=down]:(bottom-0 data-[side=none]:before:(-bottom-full))',
+	'layer-components:data-[direction=down]:(bottom-0 data-[side=none]:before:-bottom-full)',
 );
 
 const contentStyle = {
@@ -174,32 +174,32 @@ export const SelectContent = ({
 					sticky={sticky}
 					positionMethod={positionMethod}
 					className={classNames(
-						'layer-components:(z-1 outline-none select-none)',
+						'layer-components:(z-1 select-none outline-none)',
 						'layer-components:(transform-origin-[--transform-origin])',
 					)}
 				>
 					<SelectArrow
 						className={clsx(
-							'layer-components:(border-black transition transform)',
-							'layer-components:data-[closed]:(opacity-0 scale-0)',
-							'layer-components:data-[open]:(opacity-100 scale-100)',
+							'layer-components:(transform transition border-black)',
+							'layer-components:data-[closed]:(scale-0 opacity-0)',
+							'layer-components:data-[open]:(scale-100 opacity-100)',
 						)}
 					/>
 					<BaseSelect.Popup
 						className={classNames(
-							'layer-components:(overflow-hidden bg-white rounded-md border border-solid border border-black shadow-lg bg-clip-padding transition)',
+							'layer-components:(overflow-hidden border border rounded-md border-solid bg-clip-padding shadow-lg transition bg-white border-black)',
 							'layer-components:transform-origin-[var(--transform-origin)]',
-							'layer-components:data-[starting-style]:data-[side=bottom]:(opacity-0 translate-y-4px)',
-							'layer-components:data-[ending-style]:data-[side=bottom]:(opacity-0 translate-y-4px)',
-							'layer-components:data-[starting-style]:data-[side=top]:(opacity-0 translate-y--4px)',
-							'layer-components:data-[ending-style]:data-[side=top]:(opacity-0 translate-y-0)',
-							'layer-components:data-[starting-style]:data-[side=right]:(opacity-0 translate-x-4px)',
-							'layer-components:data-[ending-style]:data-[side=right]:(opacity-0 translate-x-0)',
-							'layer-components:data-[starting-style]:data-[side=left]:(opacity-0 translate-x--4px)',
-							'layer-components:data-[ending-style]:data-[side=left]:(opacity-0 translate-x-0)',
+							'layer-components:data-[starting-style]:data-[side=bottom]:(translate-y-4px opacity-0)',
+							'layer-components:data-[ending-style]:data-[side=bottom]:(translate-y-4px opacity-0)',
+							'layer-components:data-[starting-style]:data-[side=top]:(translate-y--4px opacity-0)',
+							'layer-components:data-[ending-style]:data-[side=top]:(translate-y-0 opacity-0)',
+							'layer-components:data-[starting-style]:data-[side=right]:(translate-x-4px opacity-0)',
+							'layer-components:data-[ending-style]:data-[side=right]:(translate-x-0 opacity-0)',
+							'layer-components:data-[starting-style]:data-[side=left]:(translate-x--4px opacity-0)',
+							'layer-components:data-[ending-style]:data-[side=left]:(translate-x-0 opacity-0)',
 							'important:motion-reduce:animate-none',
-							'layer-components:data-[side=none]:(translate-y-0px min-w-[calc(var(--anchor-width)+2rem)])',
-							'layer-components:(min-w-[var(--anchor-width)] max-h-[var(--available-height)])',
+							'layer-components:data-[side=none]:(min-w-[calc(var(--anchor-width)+2rem)] translate-y-0px)',
+							'layer-components:(max-h-[var(--available-height)] min-w-[var(--anchor-width)])',
 							className,
 						)}
 						style={contentStyle}

package/src/components/skeletons/skeletons.tsx

@@ -15,7 +15,7 @@ export const TextSkeleton = ({
 	return (
 		<span
 			className={classNames(
-				'inline-block shrink-0 w-full h-full rounded-md bg-gradient-to-r from-transparent via-fg to-transparent [background-size:400%_400%] max-w-full animate-skeleton animate-duration-1200 animate-ease-in-out animate-iteration-infinite animate-alternate opacity-30',
+				'[background-size:400%_400%] inline-block h-full max-w-full w-full shrink-0 animate-skeleton animate-duration-1200 animate-ease-in-out animate-alternate animate-iteration-infinite rounded-md from-transparent via-fg to-transparent bg-gradient-to-r opacity-30',
 				className,
 			)}
 			style={{

package/src/components/slider/Slider.stories.tsx

@@ -58,7 +58,7 @@ export const CustomStyles: Story = {
 					})}
 				>
 					<Slider.Indicator />
-					<Slider.Thumb className="w-24px h-24px">
+					<Slider.Thumb className="h-24px w-24px">
 						<div className="text-lg">
 							{['😭', '😔', '😐', '😊', '😃'][(value as number) + 2]}
 						</div>

package/src/components/slider/Slider.tsx

@@ -70,13 +70,12 @@ export const SliderUi = ({
 );
 
 export interface SliderProps extends SliderRootProps {
-	label?: string;
 	color?: PaletteName;
 	ref?: Ref<HTMLDivElement>;
 }
 
 export const Slider = Object.assign(
-	function Slider({ label, ...props }: SliderProps) {
+	function Slider(props: SliderProps) {
 		return (
 			<SliderRoot {...props}>
 				<SliderUi />

package/src/components/spinner/Spinner.tsx

@@ -25,7 +25,7 @@ export const Spinner = function Spinner({
 			role="progressbar"
 			{...props}
 			className={classNames(
-				'flex-shrink-0 inline-block animate-spin animate-ease-linear animate-iteration-infinite color-inherit animate-duration-1400 transform-origin-[50%_50%]',
+				'inline-block flex-shrink-0 transform-origin-[50%_50%] animate-spin animate-duration-1400 animate-ease-linear animate-iteration-infinite color-inherit',
 				className,
 			)}
 			style={{ width: size, height: size, ...style }}
@@ -37,7 +37,7 @@ export const Spinner = function Spinner({
 				} ${CIRCLE_SIZE} ${CIRCLE_SIZE}`}
 			>
 				<circle
-					className="stroke-current animate-spinner-stroke animate-ease-in-out animate-iteration-infinite animate-duration-1400 [stroke-dasharray:80_200] [stroke-dashoffset:0]"
+					className="[stroke-dasharray:80_200] [stroke-dashoffset:0] animate-spinner-stroke animate-duration-1400 animate-ease-in-out animate-iteration-infinite stroke-current"
 					cx={CIRCLE_SIZE}
 					cy={CIRCLE_SIZE}
 					r={(CIRCLE_SIZE - thickness) / 2}
@@ -58,7 +58,7 @@ export const FullScreenSpinner = function FullScreenSpinner({
 	return (
 		<div
 			ref={ref}
-			className="flex flex-row gap-4 w-full flex-1 justify-center items-center self-stretch"
+			className="w-full flex flex-1 flex-row items-center self-stretch justify-center gap-4"
 		>
 			<Spinner {...props} />
 		</div>

package/src/components/textArea/TextArea.tsx

@@ -88,7 +88,7 @@ export const TextArea = function TextArea({
 			ref={finalRef}
 			className={classNames(
 				inputClassName,
-				'layer-components:([font-family:inherit] color-inherit overflow-hidden resize-none)',
+				'layer-components:([font-family:inherit] resize-none overflow-hidden color-inherit)',
 				'layer-variants:(rounded-lg px-4 py-4)',
 				{
 					'layer-components:[resize:vertical]': !autoSize,

package/src/components/toasts/toasts.tsx

@@ -51,19 +51,19 @@ function ToastList() {
 			className={clsx(
 				// variable setup
 				'[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))]',
-				'[--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))]',
+				'[--height:var(--toast-frontmost-height,var(--toast-height))] [--shrink:calc(1-var(--scale))]',
 				'[--offset-y:calc(var(--toast-offset-y)+calc(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))]',
 				// basic positioning
-				'fixed left-0 top-xs left-auto z-[calc(100000-var(--toast-index))] mr-0 w-full origin-top',
+				'fixed left-0 left-auto top-xs z-[calc(100000-var(--toast-index))] mr-0 w-full origin-top',
 				'h-[--height]',
-				'flex flex-col gap-xs items-center',
+				'flex flex-col items-center gap-xs',
 				// other properties
 				'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]',
 				// ::after
-				'after:(absolute top-full left-0 h-[calc(var(--gap)+1px)] w-full content-empty)',
+				'after:(absolute left-0 top-full h-[calc(var(--gap)+1px)] w-full content-empty)',
 				// starting style
 				'data-[starting-style]:(-translate-y-150%)',
 				// limited
@@ -73,7 +73,7 @@ function ToastList() {
 				// ending styles
 				'data-[ending-style]:(opacity-0)',
 				// natural or close button
-				'[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:(-translate-y-150% scale-90 opacity-50)',
+				'[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:(scale-90 opacity-50 -translate-y-150%)',
 				// swiping down
 				'data-[ending-style]:data-[swipe-direction=down]:(translate-y-[calc(var(--toast-swipe-movement-y)+150%)])',
 				'data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:(translate-y-[calc(var(--toast-swipe-movement-y)+150%)])',
@@ -95,22 +95,22 @@ function ToastList() {
 				mode === 'dark' ? 'override-light' : 'override-dark',
 			)}
 		>
-			<Toast.Content className="[&[data-behind]:not([data-expanded])]:pointer-events-none flex flex-col gap-2px max-w-sm">
+			<Toast.Content className="max-w-sm flex flex-col gap-2px [&[data-behind]:not([data-expanded])]:pointer-events-none">
 				<div
 					className={clsx(
-						'layer-components:(bg-main-wash color-black rounded-md b-1 b-solid b-black shadow-md pl-md pr-sm py-sm relative)',
+						'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:(flex flex-row gap-sm)',
-						'[[data-behind]:not([data-expanded])_&]:(bg-darken-2 max-h-[--height])',
+						'[[data-behind]:not([data-expanded])_&]:(max-h-[--height] bg-darken-2)',
 					)}
 				>
 					<div
 						className={clsx(
-							'flex flex-row gap-xs items-center',
-							'[[data-behind]:not([data-expanded])_&]:(opacity-0) [[data-expanded]_&]:(opacity-100) transition-opacity [transition-duration:250ms]',
+							'flex flex-row items-center gap-xs',
+							'[transition-duration:250ms] transition-opacity [[data-behind]:not([data-expanded])_&]:(opacity-0) [[data-expanded]_&]:(opacity-100)',
 						)}
 					>
 						<div className="flex flex-col gap-xs">
-							<Toast.Title className="text-sm leading-tight font-bold m-0" />
+							<Toast.Title className="m-0 text-sm font-bold leading-tight" />
 							<div className="flex gap-sm">
 								{toast.data?.loading ? (
 									<Spinner size={15} className="relative top-2px" />
@@ -127,7 +127,7 @@ function ToastList() {
 										className="relative top-2px"
 									/>
 								) : null}
-								<Toast.Description className="text-sm m-0" />
+								<Toast.Description className="m-0 text-sm" />
 							</div>
 						</div>
 						<Toast.Close
@@ -142,7 +142,7 @@ function ToastList() {
 					</div>
 				</div>
 				{toast.data?.actions && (
-					<div className="flex gap-xxs items-center ml-auto [[data-behind]:not([data-expanded])_&]:(opacity-0) transition-opacity">
+					<div className="ml-auto flex items-center gap-xxs transition-opacity [[data-behind]:not([data-expanded])_&]:(opacity-0)">
 						{toast.data.actions.toReversed().map((action, index: number) => (
 							<Toast.Action
 								key={index}

package/src/components/tooltip/Tooltip.tsx

@@ -56,16 +56,16 @@ function Content({
 					<TooltipPrimitive.Popup
 						render={render}
 						className={classNames(
-							'layer-components:(relative rounded-sm py-xs px-sm text-sm leading-tight shadow-sm select-none flex transition)',
+							'layer-components:(relative flex select-none rounded-sm px-sm py-xs text-sm leading-tight shadow-sm transition)',
 							'layer-components:data-[instant]:transition-none',
-							'layer-components:data-[starting-style]:(opacity-0 scale-95)',
-							'layer-components:data-[ending-style]:(opacity-0 scale-95)',
+							'layer-components:data-[starting-style]:(scale-95 opacity-0)',
+							'layer-components:data-[ending-style]:(scale-95 opacity-0)',
 							'layer-components:transform-origin-[var(--transform-origin)]',
 							{
-								'layer-variants:(bg-black color-white)': color === 'contrast',
-								'layer-variants:(bg-white color-black border border-gray)':
+								'layer-variants:(color-white bg-black)': color === 'contrast',
+								'layer-variants:(border color-black bg-white border-gray)':
 									color === 'white' || color === 'neutral',
-								'layer-variants:(bg-attention-ink color-white)':
+								'layer-variants:(color-white bg-attention-ink)':
 									color === 'attention',
 							},
 							className,

package/src/components/viewport/Viewport.tsx

@@ -117,7 +117,7 @@ export function ViewportRoot({
 				>
 					<div
 						className={clsx(
-							'w-full h-full flex-1 relative touch-none contain-strict select-none overflow-hidden',
+							'contain-strict relative h-full w-full flex-1 touch-none select-none overflow-hidden',
 							'focus-visible:(ring ring-accent)',
 							className,
 						)}
@@ -155,8 +155,8 @@ export function ViewportControlContent({
 			className={clsx(
 				'layer-variants:(absolute)',
 				{
-					'layer-components:(top-sm left-sm)': position === 'top-left',
-					'layer-components:(top-sm right-sm)': position === 'top-right',
+					'layer-components:(left-sm top-sm)': position === 'top-left',
+					'layer-components:(right-sm top-sm)': position === 'top-right',
 					'layer-components:(bottom-sm left-sm)': position === 'bottom-left',
 					'layer-components:(bottom-sm right-sm)': position === 'bottom-right',
 				},

package/src/components/viewport/ViewportContent.tsx

@@ -90,7 +90,7 @@ export function ViewportContent({
 		<motion.div
 			{...rest}
 			className={clsx(
-				'layer-components:(absolute overflow-visible overscroll-none touch-none transform-origin-center select-none)',
+				'layer-components:(absolute transform-origin-center touch-none select-none overflow-visible overscroll-none)',
 				className,
 			)}
 			ref={finalRef}

package/src/components/viewport/useViewportGestures.ts

@@ -245,7 +245,7 @@ export function useKeyboardControls(viewport: ViewportState) {
 		animationFrame = requestAnimationFrame(loop);
 
 		return () => {
-			animationFrame && cancelAnimationFrame(animationFrame);
+			if (animationFrame) cancelAnimationFrame(animationFrame);
 		};
 	}, [viewport]);