@a-type/ui 4.0.7 → 4.0.9

package/dist/esm/uno/rules/color.js

@@ -26,13 +26,13 @@ export const colorRules = [
     ],
     [
         /^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]),
         }),
     ],
@@ -71,13 +71,13 @@ export const colorRules = [
     ],
     [
         /^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]),
         }),
     ],
@@ -106,7 +106,7 @@ export const colorRules = [
     ],
     [
         /^border-lighten-(\d+\.?\d*)$/,
-        (match, { theme }) => ({
+        (match) => ({
             '--v-border-altered': lighten('var(--v-border,currentColor)', match[1]),
         }),
         {
@@ -115,7 +115,7 @@ export const colorRules = [
     ],
     [
         /^border-darken-(\d+\.?\d*)$/,
-        (match, { theme }) => ({
+        (match) => ({
             '--v-border-altered': darken('var(--v-border,currentColor)', match[1]),
         }),
         {
@@ -145,13 +145,13 @@ export const colorRules = [
         ],
         [
             new RegExp(`^border-${dir}-lighten-(\\d+\\.?\\d*)$`),
-            (match, { theme }) => ({
+            (match) => ({
                 [`--v-border-${dir}-altered`]: lighten(`var(--v-border-${dir},currentColor)`, match[1]),
             }),
         ],
         [
             new RegExp(`^border-${dir}-darken-(\\d+\\.?\\d*)$`),
-            (match, { theme }) => ({
+            (match) => ({
                 [`--v-border-${dir}-altered`]: darken(`var(--v-border-${dir},currentColor)`, match[1]),
             }),
         ],
@@ -174,13 +174,13 @@ export const colorRules = [
     ],
     [
         /^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/dist/esm/uno/rules/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","sourceRoot":"","sources":["../../../../src/uno/rules/color.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"color.js","sourceRoot":"","sources":["../../../../src/uno/rules/color.ts"],"names":[],"mappings":"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"}

package/dist/esm/utilities.stories.js

@@ -11,7 +11,7 @@ const meta = {
 export default meta;
 export const AnchorPosition = {
     render(args) {
-        return (_jsxs("div", { className: "w-300px h-full overflow-auto anchor-container border", children: [_jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }), _jsx(Button, { color: "primary", className: "anchor-demo", children: "Button" }), _jsx(Box, { color: "primary", surface: true, p: true, className: "fixed anchor-to-demo left-[anchor(right)] top-[anchor(bottom)]", children: "Anchored to button" }), _jsx(Box, { color: "accent", surface: true, p: true, className: "anchor-to-container fixed right-[anchor(right)] bottom-[anchor(bottom)]", children: "Anchored to the outer box" }), _jsx(P, { children: "Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus" })] }));
+        return (_jsxs("div", { className: "h-full w-300px border anchor-container overflow-auto", children: [_jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }), _jsx(Button, { color: "primary", className: "anchor-demo", children: "Button" }), _jsx(Box, { color: "primary", surface: true, p: true, className: "fixed left-[anchor(right)] top-[anchor(bottom)] anchor-to-demo", children: "Anchored to button" }), _jsx(Box, { color: "accent", surface: true, p: true, className: "fixed bottom-[anchor(bottom)] right-[anchor(right)] anchor-to-container", children: "Anchored to the outer box" }), _jsx(P, { children: "Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus" })] }));
     },
 };
 //# sourceMappingURL=utilities.stories.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "4.0.7",
+  "version": "4.0.9",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
@@ -59,6 +59,7 @@
     "valtio": "^2.1.4"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.2",
     "@storybook/addon-essentials": "8.4.7",
     "@storybook/addon-interactions": "8.4.7",
     "@storybook/addon-links": "8.4.7",
@@ -75,6 +76,7 @@
     "@types/web-app-manifest": "^1.0.9",
     "@unocss/cli": "66.5.4",
     "@unocss/core": "66.5.4",
+    "@unocss/eslint-config": "^66.6.0",
     "@unocss/transformer-variant-group": "66.5.4",
     "@vitejs/plugin-react": "^5.1.0",
     "@vitest/browser-playwright": "^4.0.6",
@@ -82,16 +84,29 @@
     "bumpp": "^10.3.1",
     "change-case": "^4.1.2",
     "dotenv": "^16.3.1",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react": "^7.37.5",
     "fs-extra": "^11.1.1",
+    "globals": "^17.0.0",
+    "husky": "^9.1.7",
+    "jiti": "^2.6.1",
+    "lint-staged": "^16.2.7",
     "prettier": "^3.0.3",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "storybook": "8.4.7",
     "typescript": "^5.9.3",
+    "typescript-eslint": "^8.53.0",
     "unocss": "^66.5.4",
     "vitest": "^4.0.6",
     "vitest-browser-react": "^2.0.2"
   },
+  "lint-staged": {
+    "**/*.{ts,tsx}": [
+      "prettier --write --cache",
+      "eslint --fix --cache"
+    ]
+  },
   "scripts": {
     "build:transpile": "tsc && tsc -P tsconfig-cjs.json",
     "build:prefix": "node ./scripts/addUnoInclude.js",
@@ -104,6 +119,7 @@
     "up-radix": "pnpm update \"@radix-ui/*\" --latest",
     "bump": "bumpp",
     "test": "vitest",
-    "test:browser": "vitest --config=vitest.browser.config.ts"
+    "test:browser": "vitest --config=vitest.browser.config.ts",
+    "lint": "eslint **/*.{ts,tsx} --fix"
   }
 }

package/src/colors.stories.tsx

@@ -173,7 +173,7 @@ export const Inheritance: Story = {
 		return (
 			<Box color="primary" surface p="xl" className="theme" style={style}>
 				<Box
-					className="border-bg border-darken-5 color-bg color-darken-5"
+					className="color-bg color-darken-5 border-bg border-darken-5"
 					border
 					p="xl"
 				>
@@ -190,61 +190,61 @@ export const TweakOpacity: Story = {
 		return (
 			<Box color="accent" surface className="h-32" full="width" p gap>
 				<Box
-					className="bg-primary/100 h-full color-primary-dark/100 ring ring-primary-light/100 border border-black/100"
+					className="h-full border ring color-primary-dark/100 bg-primary/100 border-black/100 ring-primary-light/100"
 					grow
 				>
 					100
 				</Box>
 				<Box
-					className="bg-primary/90 h-full color-primary-dark/90 ring ring-primary-light/90 border border-black/90"
+					className="h-full border ring color-primary-dark/90 bg-primary/90 border-black/90 ring-primary-light/90"
 					grow
 				>
 					90
 				</Box>
 				<Box
-					className="bg-primary/80 h-full color-primary-dark/80 ring ring-primary-light/80 border border-black/80"
+					className="h-full border ring color-primary-dark/80 bg-primary/80 border-black/80 ring-primary-light/80"
 					grow
 				>
 					80
 				</Box>
 				<Box
-					className="bg-primary/70 h-full color-primary-dark/70 ring ring-primary-light/70 border border-black/70"
+					className="h-full border ring color-primary-dark/70 bg-primary/70 border-black/70 ring-primary-light/70"
 					grow
 				>
 					70
 				</Box>
 				<Box
-					className="bg-primary/60 h-full color-primary-dark/60 ring ring-primary-light/60 border border-black/60"
+					className="h-full border ring color-primary-dark/60 bg-primary/60 border-black/60 ring-primary-light/60"
 					grow
 				>
 					60
 				</Box>
 				<Box
-					className="bg-primary/50 h-full color-primary-dark/50 ring ring-primary-light/50 border border-black/50"
+					className="h-full border ring color-primary-dark/50 bg-primary/50 border-black/50 ring-primary-light/50"
 					grow
 				>
 					50
 				</Box>
 				<Box
-					className="bg-primary/40 h-full color-primary-dark/40 ring ring-primary-light/40 border border-black/40"
+					className="h-full border ring color-primary-dark/40 bg-primary/40 border-black/40 ring-primary-light/40"
 					grow
 				>
 					40
 				</Box>
 				<Box
-					className="bg-primary/30 h-full color-primary-dark/30 ring ring-primary-light/30 border border-black/30"
+					className="h-full border ring color-primary-dark/30 bg-primary/30 border-black/30 ring-primary-light/30"
 					grow
 				>
 					30
 				</Box>
 				<Box
-					className="bg-primary/20 h-full color-primary-dark/20 ring ring-primary-light/20 border border-black/20"
+					className="h-full border ring color-primary-dark/20 bg-primary/20 border-black/20 ring-primary-light/20"
 					grow
 				>
 					20
 				</Box>
 				<Box
-					className="bg-primary/10 h-full color-primary-dark/10 ring ring-primary-light/10 border border-black/10"
+					className="h-full border ring color-primary-dark/10 bg-primary/10 border-black/10 ring-primary-light/10"
 					grow
 				>
 					10

package/src/components/actions/ActionBar.tsx

@@ -20,7 +20,7 @@ export function ActionBar({
 		<Suspense fallback={null}>
 			<div
 				className={classNames(
-					'layer-components:(flex flex-row items-center justify-start w-full overflow-hidden relative h-[max-content] transition-[height] springy)',
+					'layer-components:springy layer-components:(relative h-[max-content] w-full flex flex-row items-center justify-start overflow-hidden transition-[height])',
 					'layer-components:[&:empty]:height-0',
 					className,
 				)}
@@ -28,11 +28,11 @@ export function ActionBar({
 			>
 				<ScrollArea
 					disableFades={disableShadow}
-					className="layer-components:(flex-grow w-full h-full)"
+					className="layer-components:(h-full w-full flex-grow)"
 				>
 					<ScrollArea.Content
 						className={classNames(
-							'layer-composed:(flex flex-row items-center justify-start relative h-full)',
+							'layer-composed:(relative h-full flex flex-row items-center justify-start)',
 							wrap && 'layer-variants:flex-wrap',
 						)}
 					>

package/src/components/actions/ActionButton.tsx

@@ -43,7 +43,7 @@ export function ActionButton({
 					size="small"
 					disableIconMode
 					className={classNames(
-						'layer-variants:(font-normal m-2 mx-1)',
+						'layer-variants:(m-2 mx-1 font-normal)',
 						className,
 					)}
 					{...rest}

package/src/components/avatar/Avatar.tsx

@@ -31,9 +31,9 @@ export function Avatar({
 		<BaseAvatar.Root
 			data-pop={popIn}
 			className={classNames(
-				'layer-components:(flex items-center justify-center rounded-lg border-default overflow-hidden w-24px aspect-1 select-none relative bg-white flex-shrink-0)',
+				'layer-components:(relative aspect-1 w-24px flex flex-shrink-0 select-none items-center justify-center overflow-hidden border-default rounded-lg bg-white)',
 				popIn &&
-					'layer-variants:(animate-pop-in-from-half animate-ease-springy animate-duration-200)',
+					'layer-variants:(animate-pop-in-from-half animate-duration-200 animate-ease-springy)',
 				empty && 'layer-components:(border-dashed bg-gray-light)',
 				className,
 			)}
@@ -42,7 +42,7 @@ export function Avatar({
 		>
 			{imageSrc && (
 				<BaseAvatar.Image
-					className="w-full h-full object-cover"
+					className="h-full w-full object-cover"
 					referrerPolicy="no-referrer"
 					src={imageSrc}
 					alt={`${name ?? 'user'}'s profile picture`}

package/src/components/box/Box.stories.tsx

@@ -134,7 +134,7 @@ function SurfaceContent({ name }: { name: string }) {
 export const Surfaces: Story = {
 	render(args) {
 		return (
-			<div className="grid gap-lg grid-cols-2 md:grid-cols-3 bg-wash" {...args}>
+			<div className="grid grid-cols-2 gap-lg bg-wash md:grid-cols-3" {...args}>
 				<Box {...args} surface="white" p="lg" col gap>
 					<SurfaceContent name="White" />
 				</Box>

package/src/components/box/Box.tsx

@@ -100,7 +100,7 @@ export function Box({
 			{...rest}
 			style={style}
 			className={clsx(
-				'layer-components:flex layer-components:relative',
+				'layer-components:relative layer-components:flex',
 				color && `palette-${color}`,
 				{
 					'layer-components:flex-row': hasDefault(direction, 'row') && !col,
@@ -187,9 +187,9 @@ export function Box({
 						(rounded === undefined && (surface || border)),
 					'layer-components:rounded-xl': rounded === 'xl',
 
-					'layer-components:(bg-white border-gray-dark color-black)':
+					'layer-components:(color-black bg-white border-gray-dark)':
 						surface === 'white',
-					'layer-components:(bg-main-wash border-main-dark color-main-ink)':
+					'layer-components:(color-main-ink bg-main-wash border-main-dark)':
 						surface === true,
 
 					'layer-components:(border border-solid)': border,
@@ -197,9 +197,9 @@ export function Box({
 					'layer-components:h-full': full === true || full === 'height',
 					'layer-components:overflow-hidden': overflow === 'hidden',
 					'layer-components:overflow-auto': overflow === 'auto',
-					'layer-components:(overflow-x-auto overflow-y-hidden)':
+					'layer-components:(overflow-y-hidden overflow-x-auto)':
 						overflow === 'auto-x',
-					'layer-components:(overflow-y-auto overflow-x-hidden)':
+					'layer-components:(overflow-x-hidden overflow-y-auto)':
 						overflow === 'auto-y',
 					'layer-components:flex-grow': grow,
 					'layer-components:@container': container === true,

package/src/components/button/Button.tsx

@@ -131,12 +131,12 @@ export function ButtonRoot({
 							animate={{ width: 'auto', marginLeft: 0 }}
 							exit={{ width: 0, marginLeft: '-0.5rem' }}
 							className={clsx(
-								'flex-shrink-0 inline-block overflow-hidden my-auto flex',
+								'my-auto inline-block flex flex-shrink-0 overflow-hidden',
 								'[[data-has-icon=true]_&]:hidden',
 							)}
 							data-default-loader
 						>
-							<Spinner size={15} className="inline-block w-1em h-1em" />
+							<Spinner size={15} className="inline-block h-1em w-1em" />
 						</motion.div>
 					)}
 				</AnimatePresence>
@@ -166,7 +166,7 @@ export const ButtonToggleIndicator = memo(function ToggleIndicator({
 		<Icon
 			aria-hidden
 			name="check"
-			className="transition-width w-0 ml--1"
+			className="ml--1 w-0 transition-width"
 			style={{
 				width: value ? '15px' : 0,
 			}}

package/src/components/button/ConfirmedButton.tsx

@@ -46,7 +46,7 @@ export function ConfirmedButton({
 		return (
 			<Button
 				{...rest}
-				onClick={(ev) => {
+				onClick={() => {
 					onConfirm();
 				}}
 			/>

package/src/components/button/classes.tsx

@@ -19,7 +19,7 @@ export function getButtonClassName({
 }) {
 	if (emphasis === 'unstyled') {
 		return clsx(
-			'layer-components:(p-0 m-0 border-none bg-transparent appearance-none)',
+			'layer-components:(m-0 appearance-none border-none p-0 bg-transparent)',
 			'layer-components:(cursor-pointer)',
 			'layer-components:focus:outline-off',
 		);
@@ -27,49 +27,49 @@ export function getButtonClassName({
 
 	return clsx(
 		color && `palette-${color}`,
-		'layer-components:(leading-none font-inherit font-bold select-none leading-1)',
-		'layer-components:(border-solid border-thin border-color)',
+		'layer-components:(select-none font-bold leading-1 leading-none font-inherit)',
+		'layer-components:(border-thin border-solid border-color)',
 		'layer-components:(cursor-pointer)',
-		'layer-components:(flex flex-row gap-sm items-center)',
+		'layer-components:(flex flex-row items-center gap-sm)',
 		'layer-components:(relative overflow-visible whitespace-nowrap)',
 		'layer-components:(transition-all duration-200)',
 		'layer-components:(shadow-sm ring-bg)',
 		'layer-components:(color-contrast)',
 
-		emphasis === 'ghost' && 'layer-variants:(shadow-none border-none)',
+		emphasis === 'ghost' && 'layer-variants:(border-none shadow-none)',
 		emphasis === 'contrast' && 'layer-variants:(border-bg hover:bg-gray-ink)',
 
 		{
 			'layer-components:bg-main': emphasis === 'primary',
-			'layer-components:(bg-main-light color-main-ink)': emphasis === 'light',
+			'layer-components:(color-main-ink bg-main-light)': emphasis === 'light',
 			'layer-components:bg-white layer-variants:focus-visible:bg-white':
 				emphasis === 'default',
-			'layer-components:(bg-transparent aria-pressed:bg-main-wash color-main-ink)':
+			'layer-components:(color-main-ink bg-transparent aria-pressed:bg-main-wash)':
 				emphasis === 'ghost',
 			'layer-components:(bg-black)': emphasis === 'contrast',
 		},
-		color === 'gray' && '[--l-saturation:0] hov',
+		color === 'gray' && 'hov [--l-saturation:0]',
 
 		{
-			'layer-components:(px-4 py-2 text-md rounded-lg)': size === 'default',
-			'layer-components:(px-4 py-0.25 min-h-touch text-sm rounded-md)':
+			'layer-components:(rounded-lg px-4 py-2 text-md)': size === 'default',
+			'layer-components:(min-h-touch rounded-md px-4 py-0.25 text-sm)':
 				size === 'small',
-			'layer-components:[&[data-has-icon=true][data-has-label=false]]:(p-2.35 text-sm rounded-lg)':
+			'layer-components:[&[data-has-icon=true][data-has-label=false]]:(rounded-lg p-2.35 text-sm)':
 				size === 'default' && !disableIconMode,
-			'layer-components:[&[data-has-icon=true][data-has-label=false]]:(p-2 text-xs rounded-lg -m-y-0.5)':
+			'layer-components:[&[data-has-icon=true][data-has-label=false]]:(rounded-lg p-2 text-xs -m-y-0.5)':
 				size === 'small' && !disableIconMode,
 		},
 
-		'layer-components:hover:(bg-main bg-lighten-2 ring-4)',
+		'layer-components:hover:(ring-4 bg-main bg-lighten-2)',
 
 		'layer-components:focus:outline-off',
-		'layer-components:focus-visible:(outline-off ring-accent ring-6)',
-		'layer-components:[&[data-focus=true]]:(ring-6 ring-accent outline-off)',
+		'layer-components:focus-visible:(outline-off ring-6 ring-accent)',
+		'layer-components:[&[data-focus=true]]:(outline-off ring-6 ring-accent)',
 
-		'layer-components:active:(bg-darken-1 ring-8)',
+		'layer-components:active:(ring-8 bg-darken-1)',
 
-		'layer-components:disabled:(opacity-50 cursor-default shadow-none ring-none)',
-		'layer-components:[&[data-disabled=true]]:(opacity-50 cursor-default shadow-none)',
+		'layer-components:disabled:(cursor-default opacity-50 shadow-none ring-none)',
+		'layer-components:[&[data-disabled=true]]:(cursor-default opacity-50 shadow-none)',
 
 		{
 			'layer-variants:[&[aria-pressed=false]]:[&:not(:hover)]:bg-transparent':

package/src/components/camera/Camera.stories.tsx

@@ -40,7 +40,7 @@ function CameraDemo({ facingMode }: { facingMode?: 'user' | 'environment' }) {
 			<Camera
 				facingMode={facingMode}
 				onCapture={setLatest}
-				className="w-64 h-64"
+				className="h-64 w-64"
 			/>
 			{latest && <img src={dataUri} className="w-full" />}
 		</div>

package/src/components/camera/Camera.tsx

@@ -2,7 +2,7 @@ import {
 	Button as BaseButton,
 	ButtonProps as BaseButtonProps,
 } from '@base-ui/react/button';
-import classNames from 'clsx';
+import classNames, { clsx } from 'clsx';
 import {
 	MouseEvent,
 	ReactNode,
@@ -167,15 +167,15 @@ export function CameraRoot({
 				ref={ref}
 				className={classNames(
 					'override-light',
-					'layer-components:([font-family:inherit] color-white bg-black rounded-lg overflow-hidden min-w-4 min-h-4 relative)',
-					fullscreen && 'fixed inset-0 w-full h-full z-1000 rounded-none',
+					'layer-components:([font-family:inherit] relative min-h-4 min-w-4 overflow-hidden rounded-lg color-white bg-black)',
+					fullscreen && 'fixed inset-0 z-1000 h-full w-full rounded-none',
 					className,
 				)}
 				{...rest}
 			>
 				<video
 					ref={videoRef}
-					className="w-full h-full object-cover"
+					className="h-full w-full object-cover"
 					autoPlay
 					muted
 					playsInline
@@ -221,9 +221,14 @@ const StyledShutterButton = withClassName(
 	'sm:w-8 sm:h-8',
 );
 
-export interface CameraDeviceSelectorProps {}
+export interface CameraDeviceSelectorProps {
+	className?: string;
+}
 
-export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
+export const CameraDeviceSelector = ({
+	className,
+	...props
+}: CameraDeviceSelectorProps) => {
 	const { devices, selectDeviceId, selectedDeviceId } =
 		useContext(CameraContext);
 	const swapCamera = () => {
@@ -245,8 +250,12 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
 		return (
 			<Button
 				emphasis="ghost"
-				className="absolute bottom-2 left-2 color-white"
+				className={clsx(
+					'layer-components:(absolute bottom-2 left-2 color-white)',
+					className,
+				)}
 				onClick={swapCamera}
+				{...props}
 			>
 				<Icon name="refresh" />
 			</Button>
@@ -257,12 +266,16 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
 		<Select
 			value={selectedDeviceId || 'default'}
 			onValueChange={selectDeviceId}
+			{...props}
 		>
 			<Select.Trigger
 				render={
 					<Button
 						emphasis="ghost"
-						className="absolute bottom-2 left-2 color-white"
+						className={clsx(
+							'layer-components:(absolute bottom-2 left-2 color-white)',
+							className,
+						)}
 					>
 						<Icon name="refresh" />
 					</Button>
@@ -285,7 +298,7 @@ export const CameraFullscreenButton = (props: ButtonProps) => {
 		<Button
 			{...props}
 			emphasis="ghost"
-			className="absolute top-2 right-2 color-white"
+			className="absolute right-2 top-2 color-white"
 			onClick={() => setFullscreen(!fullscreen)}
 		>
 			<Icon name={fullscreen ? 'x' : 'maximize'} />
@@ -312,15 +325,15 @@ export const Camera = Object.assign(CameraBase, {
 
 function dataURItoFile(dataURI: string) {
 	// convert base64/URLEncoded data component to raw binary data held in a string
-	var byteString;
+	let byteString;
 	if (dataURI.split(',')[0].indexOf('base64') >= 0)
 		byteString = atob(dataURI.split(',')[1]);
 	else byteString = unescape(dataURI.split(',')[1]);
 	// separate out the mime component
-	var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+	const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
 	// write the bytes of the string to a typed array
-	var ia = new Uint8Array(byteString.length);
-	for (var i = 0; i < byteString.length; i++) {
+	const ia = new Uint8Array(byteString.length);
+	for (let i = 0; i < byteString.length; i++) {
 		ia[i] = byteString.charCodeAt(i);
 	}
 	const fileExt = mimeString.split('/')[1];

package/src/components/card/Card.stories.tsx

@@ -169,10 +169,7 @@ export const AsChildNonInteractive: Story = {
 export const Grid: Story = {
 	render: () => {
 		const [sizes, setSizes] = useState(() =>
-			Array.from(
-				{ length: 40 },
-				(_, i) => 50 + Math.floor(Math.random() * 300),
-			),
+			Array.from({ length: 40 }, () => 50 + Math.floor(Math.random() * 300)),
 		);
 		const remove = (index: number) =>
 			setSizes((v) => v.filter((_, i) => i !== index));
@@ -199,10 +196,7 @@ export const Grid: Story = {
 export const GridCompact: Story = {
 	render: () => {
 		const [sizes, setSizes] = useState(() =>
-			Array.from(
-				{ length: 40 },
-				(_, i) => 50 + Math.floor(Math.random() * 300),
-			),
+			Array.from({ length: 40 }, () => 50 + Math.floor(Math.random() * 300)),
 		);
 		const remove = (index: number) =>
 			setSizes((v) => v.filter((_, i) => i !== index));

package/src/components/card/Card.tsx

@@ -58,16 +58,16 @@ export function CardMain({
 	const rootProps = {
 		...rest,
 		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)',
+			'layer-components:(min-h-40px flex flex-1 flex-col items-start gap-1 pb-xs transition bg-transparent)',
+			'layer-components:(relative z-1 rounded-t-md border-none p-0 text-start text-sm text-inherit font-inherit outline-none)',
 			!!compact && 'layer-variants:(pb-0)',
 			isInteractive &&
 				classNames(
 					'layer-components:cursor-pointer',
-					'layer-components:hover:(bg-black/10 color-black)',
+					'layer-components:hover:(color-black bg-black/10)',
 					'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]:(bg-black/10 ring-inset ring-4 ring-accent)',
+					'layer-components:focus-visible:(outline-none ring-4 ring-inset bg-black/10 ring-accent)',
+					'layer-components:data-[visually-focused]:(ring-4 ring-inset bg-black/10 ring-accent)',
 					'layer-components:disabled:(cursor-default)',
 					'layer-components:data-[visually-disabled]:(cursor-default)',
 				),