@a-type/ui 4.0.7 → 4.0.9

package/src/hooks/useStorage.ts

@@ -79,14 +79,14 @@ function makeUseStorage(
 }
 
 const mockStorage: Storage = {
-	getItem: (key: string) => {
+	getItem: () => {
 		return null;
 	},
-	setItem: (key: string, value: string) => {},
-	removeItem: (key: string) => {},
+	setItem: () => {},
+	removeItem: () => {},
 	length: 0,
 	clear: () => {},
-	key: (index: number) => {
+	key: () => {
 		return null;
 	},
 };

package/src/hooks/useTitleBarColor.stories.tsx

@@ -19,7 +19,7 @@ export const Default: Story = {
 	render() {
 		return (
 			<Provider>
-				<Box col border surface className="overflow-hidden aspect-[9/16]">
+				<Box col border surface className="aspect-[9/16] overflow-hidden">
 					<MockTitleBar />
 					<Box p="md">
 						<p>

package/src/hooks/useTitleBarColor.ts

@@ -27,7 +27,7 @@ function changeThemeColor(color: string) {
 		const cssVar = color.slice(4, -1).trim();
 		color = getComputedStyle(root).getPropertyValue(cssVar);
 	}
-	var metaThemeColor = document.querySelector('meta[name=theme-color]');
+	let metaThemeColor = document.querySelector('meta[name=theme-color]');
 	if (!metaThemeColor) {
 		metaThemeColor = document.createElement('meta');
 		metaThemeColor.setAttribute('name', 'theme-color');

package/src/hooks/withProps.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const withProps = <T extends {}>(
+export const withProps = <T extends object>(
 	Component: React.ComponentType<T>,
 	extras: Partial<T>,
 ) => {
@@ -12,7 +12,7 @@ export const withProps = <T extends {}>(
 type OptionalKeys<T> = {
 	[K in keyof T]-?: undefined extends T[K] ? K : never;
 }[keyof T];
-export const withoutProps = <T extends {}, P extends OptionalKeys<T>>(
+export const withoutProps = <T extends object, P extends OptionalKeys<T>>(
 	Component: React.ComponentType<T>,
 	_remove: P[],
 ) => {

package/src/themes.stories.tsx

@@ -65,7 +65,7 @@ function DemoUI({ className }: { className?: string }) {
 	return (
 		<PageRoot className={clsx('flex-1', className)}>
 			<PageContent>
-				<div className={clsx('grid gap-2 grid-cols-2')}>
+				<div className={clsx('grid grid-cols-2 gap-2')}>
 					<Box gap wrap p>
 						<Button color="primary" emphasis="primary">
 							Primary

package/src/uno/logic/color.ts

@@ -281,18 +281,6 @@ function printComputationResult(result: ComputationResult): string {
 	return result.unit === '%' ? `${result.value}%` : `${result.value}`;
 }
 
-function resolveComputationResult(
-	result: ComputationResult,
-	outputRange: [number, number],
-): number {
-	if (result.unit === '%') {
-		const [min, max] = outputRange;
-		return min + (result.value / 100) * (max - min);
-	} else {
-		return result.value;
-	}
-}
-
 function evaluateLiteral(literal: string): ComputationResult {
 	if (literal.endsWith('%')) {
 		const asNumber = Number(literal.slice(0, -1));

package/src/uno/preflights/keyboard.ts

@@ -0,0 +1,12 @@
+import { preflight } from './_util.js';
+
+export const keyboardPreflight = preflight({
+	getCSS: () =>
+		// add space to bottom of body equal to virtual keyboard inset so that
+		// content is not hidden behind the keyboard
+		`
+	body {
+		margin-bottom: env(virtual-keyboard-inset-bottom, 0px);
+	}
+`,
+});

package/src/uno/rules/color.ts

@@ -27,13 +27,13 @@ export const colorRules: Rule[] = [
 	],
 	[
 		/^color-lighten-(\d+\.?\d*)$/,
-		(match, { theme }) => ({
+		(match) => ({
 			'--v-color-altered': lighten('var(--v-color,currentColor)', match[1]),
 		}),
 	],
 	[
 		/^color-darken-(\d+\.?\d*)$/,
-		(match, { theme }) => ({
+		(match) => ({
 			'--v-color-altered': darken('var(--v-color,currentColor)', match[1]),
 		}),
 	],
@@ -75,13 +75,13 @@ export const colorRules: Rule[] = [
 	],
 	[
 		/^bg-lighten-(\d+\.?\d*)$/,
-		(match, { theme }) => ({
+		(match) => ({
 			'--v-bg-altered': lighten('var(--v-bg,var(--mode-white))', match[1]),
 		}),
 	],
 	[
 		/^bg-darken-(\d+\.?\d*)$/,
-		(match, { theme }) => ({
+		(match) => ({
 			'--v-bg-altered': darken('var(--v-bg,var(--mode-white))', match[1]),
 		}),
 	],
@@ -110,7 +110,7 @@ export const colorRules: Rule[] = [
 	],
 	[
 		/^border-lighten-(\d+\.?\d*)$/,
-		(match, { theme }) => ({
+		(match) => ({
 			'--v-border-altered': lighten('var(--v-border,currentColor)', match[1]),
 		}),
 		{
@@ -119,7 +119,7 @@ export const colorRules: Rule[] = [
 	],
 	[
 		/^border-darken-(\d+\.?\d*)$/,
-		(match, { theme }) => ({
+		(match) => ({
 			'--v-border-altered': darken('var(--v-border,currentColor)', match[1]),
 		}),
 		{
@@ -151,7 +151,7 @@ export const colorRules: Rule[] = [
 				],
 				[
 					new RegExp(`^border-${dir}-lighten-(\\d+\\.?\\d*)$`),
-					(match, { theme }) => ({
+					(match) => ({
 						[`--v-border-${dir}-altered`]: lighten(
 							`var(--v-border-${dir},currentColor)`,
 							match[1],
@@ -160,7 +160,7 @@ export const colorRules: Rule[] = [
 				],
 				[
 					new RegExp(`^border-${dir}-darken-(\\d+\\.?\\d*)$`),
-					(match, { theme }) => ({
+					(match) => ({
 						[`--v-border-${dir}-altered`]: darken(
 							`var(--v-border-${dir},currentColor)`,
 							match[1],
@@ -187,13 +187,13 @@ export const colorRules: Rule[] = [
 	],
 	[
 		/^ring-lighten-(\d+\.?\d*)$/,
-		(match, { theme }) => ({
+		(match) => ({
 			'--v-ring-altered': lighten('var(--v-ring,currentColor)', match[1]),
 		}),
 	],
 	[
 		/^ring-darken-(\d+\.?\d*)$/,
-		(match, { theme }) => ({
+		(match) => ({
 			'--v-ring-altered': darken('var(--v-ring,currentColor)', match[1]),
 		}),
 	],

package/src/utilities.stories.tsx

@@ -16,7 +16,7 @@ type Story = StoryObj;
 export const AnchorPosition: Story = {
 	render(args) {
 		return (
-			<div className="w-300px h-full overflow-auto anchor-container border">
+			<div className="h-full w-300px border anchor-container overflow-auto">
 				<P>
 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
 					eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
@@ -33,7 +33,7 @@ export const AnchorPosition: Story = {
 					color="primary"
 					surface
 					p
-					className="fixed anchor-to-demo left-[anchor(right)] top-[anchor(bottom)]"
+					className="fixed left-[anchor(right)] top-[anchor(bottom)] anchor-to-demo"
 				>
 					Anchored to button
 				</Box>
@@ -41,7 +41,7 @@ export const AnchorPosition: Story = {
 					color="accent"
 					surface
 					p
-					className="anchor-to-container fixed right-[anchor(right)] bottom-[anchor(bottom)]"
+					className="fixed bottom-[anchor(bottom)] right-[anchor(right)] anchor-to-container"
 				>
 					Anchored to the outer box
 				</Box>