@a-type/ui 3.1.1 → 4.0.0-beta.1

package/src/hooks/useVisualViewportOffset.ts

@@ -132,24 +132,47 @@ function useReactToViewportChanges(
 		const update = () => {
 			stableCb(viewport);
 		};
-		let prevTimeout: number | undefined;
-		const debouncedUpdate = () => {
-			if (prevTimeout) {
-				clearTimeout(prevTimeout);
-			}
-			prevTimeout = window.setTimeout(update, 50);
-		};
 
+		const WAIT = 50;
+		let timeoutId: number | undefined;
+		let lastInvoke = 0;
+
+		// call immediately once
 		update();
+		lastInvoke = Date.now();
+
+		const throttledUpdate = () => {
+			const now = Date.now();
+			const remaining = WAIT - (now - lastInvoke);
+
+			if (remaining <= 0) {
+				if (timeoutId) {
+					clearTimeout(timeoutId);
+					timeoutId = undefined;
+				}
+				lastInvoke = now;
+				update();
+			} else if (!timeoutId) {
+				timeoutId = window.setTimeout(() => {
+					timeoutId = undefined;
+					lastInvoke = Date.now();
+					update();
+				}, remaining);
+			}
+		};
 
-		window.addEventListener('scroll', debouncedUpdate, { passive: true });
+		window.addEventListener('scroll', throttledUpdate, { passive: true });
 		viewport.addEventListener('resize', update);
-		viewport.addEventListener('scroll', debouncedUpdate, { passive: true });
+		viewport.addEventListener('scroll', throttledUpdate, { passive: true });
 
 		return () => {
-			window.removeEventListener('scroll', debouncedUpdate);
+			if (timeoutId) {
+				clearTimeout(timeoutId);
+				timeoutId = undefined;
+			}
+			window.removeEventListener('scroll', throttledUpdate);
 			viewport.removeEventListener('resize', update);
-			viewport.removeEventListener('scroll', debouncedUpdate);
+			viewport.removeEventListener('scroll', throttledUpdate);
 		};
 	}, [stableCb, disable]);
 }

package/src/hooks/withClassName.tsx

@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import {
 	ComponentPropsWithRef,
 	ComponentType,
@@ -8,11 +8,11 @@ import {
 
 export function withClassName<T extends ComponentType<any> | ElementType<any>>(
 	Component: T,
-	...cs: Parameters<typeof classNames>
+	...cs: Parameters<typeof clsx>
 ): FunctionComponent<ComponentPropsWithRef<T>> {
 	const WithClassName = (props: any) => {
 		const { className, ...rest } = props;
-		return <Component {...rest} className={classNames(cs, className)} />;
+		return <Component {...rest} className={clsx(cs, className)} />;
 	};
 	return WithClassName as any;
 }

package/src/themes.stories.tsx

@@ -96,7 +96,7 @@ function DemoUI({ className }: { className?: string }) {
 							<Checkbox defaultChecked />
 							<span>Checkbox</span>
 						</Box>
-						<ToggleGroup type="single" defaultValue="1">
+						<ToggleGroup defaultValue={['1']}>
 							<ToggleGroup.Item value="1">Toggle 1</ToggleGroup.Item>
 							<ToggleGroup.Item value="2">Toggle 2</ToggleGroup.Item>
 						</ToggleGroup>
@@ -177,10 +177,8 @@ function DemoUI({ className }: { className?: string }) {
 						<AvatarList.Item index={2} name="John Smith" />
 					</AvatarList>
 					<ContextMenu>
-						<ContextMenu.Trigger asChild>
-							<Tooltip content="Hello World">
-								<Button>Hover or right click</Button>
-							</Tooltip>
+						<ContextMenu.Trigger render={<Tooltip content="Hello World" />}>
+							<Button>Hover or right click</Button>
 						</ContextMenu.Trigger>
 						<ContextMenu.Content>
 							<ContextMenu.Item>Item 1</ContextMenu.Item>
@@ -189,8 +187,8 @@ function DemoUI({ className }: { className?: string }) {
 						</ContextMenu.Content>
 					</ContextMenu>
 					<DropdownMenu>
-						<DropdownMenu.Trigger asChild className="m-auto">
-							<Button>Dropdown</Button>
+						<DropdownMenu.Trigger render={<Button />} className="m-auto">
+							Dropdown
 						</DropdownMenu.Trigger>
 						<DropdownMenu.Content>
 							<DropdownMenu.Item>Item 1</DropdownMenu.Item>
@@ -209,7 +207,7 @@ function DemoUI({ className }: { className?: string }) {
 							</DropdownMenu.Item>
 						</DropdownMenu.Content>
 					</DropdownMenu>
-					<Select value="1">
+					<Select value="1" itemToStringLabel={(i) => `Item ${i}`}>
 						<Select.Trigger />
 						<Select.Content>
 							<Select.Item value="1">Item 1</Select.Item>
@@ -225,9 +223,7 @@ function DemoUI({ className }: { className?: string }) {
 						</Select.Content>
 					</Select>
 					<Dialog>
-						<Dialog.Trigger asChild>
-							<Button>Click</Button>
-						</Dialog.Trigger>
+						<Dialog.Trigger render={<Button />}>Click</Dialog.Trigger>
 						<Dialog.Content>
 							<Dialog.Title>Hello there</Dialog.Title>
 							<Dialog.Description>Im a dialog</Dialog.Description>
@@ -314,26 +310,20 @@ function DemoUI({ className }: { className?: string }) {
 					</NavBarItem>
 					<NavBarItem active>
 						<NavBarItemIconWrapper>
-							<NavBarItemIcon asChild>
-								<Icon name="book" />
-							</NavBarItemIcon>
+							<NavBarItemIcon name="book" />
 						</NavBarItemIconWrapper>
 						<NavBarItemText>Item 2</NavBarItemText>
 						<NavBarItemPip />
 					</NavBarItem>
 					<NavBarItem color="gray">
 						<NavBarItemIconWrapper>
-							<NavBarItemIcon asChild>
-								<Icon name="book" />
-							</NavBarItemIcon>
+							<NavBarItemIcon render={<Icon name="book" />} />
 						</NavBarItemIconWrapper>
 						<NavBarItemText>Neutral</NavBarItemText>
 					</NavBarItem>
 					<NavBarItem color="gray" active>
 						<NavBarItemIconWrapper>
-							<NavBarItemIcon asChild>
-								<Icon name="book" />
-							</NavBarItemIcon>
+							<NavBarItemIcon render={<Icon name="book" />} />
 						</NavBarItemIconWrapper>
 						<NavBarItemText>Neutral</NavBarItemText>
 						<NavBarItemPip />

package/src/uno/preflights/globals.ts

@@ -33,31 +33,35 @@ export const globalPreflight = (config: GlobalsPreflightConfig) =>
 	--arrow-size: 1rem;
 }
 
-html, body {
-	margin: 0;
-	padding: 0;
-	font-family: var(--font-default);
-	font-size: 16px;
-	min-height: 100%;
-	--webkit-font-smoothing: antialiased;
-}
+@layer preflightBase {
+	html, body {
+		margin: 0;
+		padding: 0;
+		font-family: var(--font-default);
+		font-size: 16px;
+		min-height: 100%;
+		--webkit-font-smoothing: antialiased;
+	}
 
-body {
-	overflow: overlay;
-}
+	body {
+		overflow: overlay;
+	}
 
-#main {
-	isolation: isolate;
-}
+	#main {
+		isolation: isolate;
+	}
 
-a {
-	color: inherit;
-	text-decoration: none;
-}
+	a {
+		color: inherit;
+		text-decoration: none;
+	}
 
-* {
-	box-sizing: border-box;
-	-webkit-tap-highlight-color: transparent;
+	* {
+		box-sizing: border-box;
+		-webkit-tap-highlight-color: transparent;
+		border-style: solid;
+		border-width: 0;
+	}
 }
 
 @property --v-shadow-y-mult {

package/src/uno/rules/util.ts

@@ -17,14 +17,24 @@ export const utilRules: Rule[] = [
 				'z-index': 0,
 			};
 			yield {
-				[ctx.symbols.selector]: (selector) => `span:has(${selector}):after`,
-				content: '""',
-				position: 'absolute',
-				top: '0',
-				left: '1.5px',
-				right: '1.5px',
-				height: '1px',
-				background: 'var(--v-bg-altered,var(--v-bg))',
+				[ctx.symbols.selector]: (selector) => `${selector}[data-side="top"]`,
+				transform: 'rotate(0deg)',
+				bottom: 'calc(-1 * var(--arrow-size) / 2 + 1px)',
+			};
+			yield {
+				[ctx.symbols.selector]: (selector) => `${selector}[data-side="right"]`,
+				transform: 'rotate(90deg)',
+				left: 'calc(-1 * var(--arrow-size) * 0.75)',
+			};
+			yield {
+				[ctx.symbols.selector]: (selector) => `${selector}[data-side="left"]`,
+				transform: 'rotate(-90deg)',
+				right: 'calc(-1 * var(--arrow-size) * 0.75)',
+			};
+			yield {
+				[ctx.symbols.selector]: (selector) => `${selector}[data-side="bottom"]`,
+				transform: 'rotate(180deg)',
+				top: 'calc(-1 * var(--arrow-size) / 2)',
 			};
 		},
 	],

package/src/uno/theme/animations.ts

@@ -10,12 +10,6 @@ export const animation: Theme['animation'] = {
 	keyframes: {
 		'progress-bar': `{0% { width: 0% } 100% { width: 100% }}`,
 		'pop-up': `{from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); }}`,
-		// TODO: move this out to app
-		'item-disappear': `{
-					0% {opacity:1;transform:translateY(0);height:var(--height);}
-					25% {opacity:1;transform:translateY(0);height:var(--height);}
-					100% {opacity:0;transform:translateY(30px);height:0;margin-top:0;}
-				}`,
 		'expand-scale-x': `{
 					from { transform: scaleX(0) }
 					to { transform: scaleX(1) }
@@ -34,40 +28,10 @@ export const animation: Theme['animation'] = {
 						opacity: 0;
 					}
 				}`,
-		'scan-line': `{
-					0% { top: 0% }
-					30% { top: 100% }
-					70% { top: 100% }
-					100% { top: 0% }
-				}`,
 		'pop-in-from-half': `{
 					0% { opacity: 0; transform: scale(0.5) }
 					100% { opacity: 1; transform: scale(1) }
 				}`,
-		'radix-collapsible-open-vertical': `{
-            from { height: 0 }
-            to { height: var(--radix-collapsible-content-height) }
-          }`,
-		'radix-collapsible-close-vertical': `{
-            from { height: var(--radix-collapsible-content-height) }
-            to { height: 0 }
-          }`,
-		'radix-collapsible-open-horizontal': `{
-            from { width: 0 }
-            to { width: var(--radix-collapsible-content-width) }
-          }`,
-		'radix-collapsible-close-horizontal': `{
-            from { width: var(--radix-collapsible-content-width) }
-            to { width: 0 }
-          }`,
-		'radix-collapsible-open-both': `{
-						from { width: 0; height: 0 }
-						to { width: var(--radix-collapsible-content-width); height: var(--radix-collapsible-content-height) }
-					}`,
-		'radix-collapsible-close-both': `{
-						from { width: var(--radix-collapsible-content-width); height: var(--radix-collapsible-content-height) }
-						to { width: 0; height: 0 }
-					}`,
 		'peek-close': `{
 						from { height: calc(var(--collapsible-height) + 80px); max-height: none; }
 						to { height: min(var(--peek-height, 120px), var(--collapsible-height)); max-height: var(--peek-height, 120px); }
@@ -125,22 +89,6 @@ export const animation: Theme['animation'] = {
 						0% { opacity: 1; transform: translate3d(0, 0, 0); }
 						100% { opacity: 0; transform: translate3d(100px, 0, 0); }
 					}`,
-		'popover-in': `{
-						0% { opacity: 0; transform: scale(0.95); }
-						100% { opacity: 1; transform: scale(1); }
-					}`,
-		'popover-out': `{
-						0% { opacity: 1; transform: scale(1); }
-						100% { opacity: 0; transform: scale(0.95); }
-					}`,
-		'dialog-in': `{
-						0% { opacity: 0; transform: translateY(20px) translate(-50%, -50%); }
-						100% { opacity: 1; transform: translateY(0) translate(-50%, -50%); }
-					}`,
-		'dialog-out': `{
-						0% { opacity: 1; transform: translateY(0) translate(-50%, -50%); }
-						100% { opacity: 0; transform: translateY(20px) translate(-50%, -50%); }
-					}`,
 		'checkbox-fade': `{
 						from { background-color: var(--v-bg-altered,var(--v-bg)); opacity: 1; }
 						to { background-color: transparent; opacity: 0.9; border-color: transparent; box-shadow: none; }
@@ -165,16 +113,6 @@ export const animation: Theme['animation'] = {
 		'fade-in-right-big': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
 		'fade-in': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
 		'fade-out': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-		'scan-line': 'linear',
-		'radix-collapsible-open-vertical': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-		'radix-collapsible-close-vertical': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-		'radix-collapsible-open-horizontal': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-		'radix-collapsible-close-horizontal': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-		'radix-collapsible-open-both': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-		'radix-collapsible-close-both': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-		'item-disappear': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-		'dialog-in': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-		'dialog-out': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
 		'checkbox-fade': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
 	},
 	durations: {
@@ -193,18 +131,6 @@ export const animation: Theme['animation'] = {
 		'fade-in-right-big': '300ms',
 		'fade-in': '200ms',
 		'fade-out': '200ms',
-		'scan-line': '1.5s',
-		'radix-collapsible-open-vertical': '200ms',
-		'radix-collapsible-close-vertical': '200ms',
-		'radix-collapsible-open-horizontal': '200ms',
-		'radix-collapsible-close-horizontal': '200ms',
-		'radix-collapsible-open-both': '200ms',
-		'radix-collapsible-close-both': '200ms',
-		'item-disappear': '300ms',
-		'popover-in': '100ms',
-		'popover-out': '100ms',
-		'dialog-in': '200ms',
-		'dialog-out': '200ms',
 		'checkbox-fade': '5000ms',
 		'pop-up': '200ms',
 	},