@a-type/ui 1.3.1 → 1.3.2

package/src/components/camera/Camera.tsx

@@ -3,8 +3,8 @@ import classNames from 'clsx';
 import {
 	MouseEvent,
 	ReactNode,
+	Ref,
 	createContext,
-	forwardRef,
 	useContext,
 	useEffect,
 	useRef,
@@ -37,164 +37,164 @@ export interface CameraRootProps {
 	children?: ReactNode;
 	format?: 'image/png' | 'image/jpeg';
 	facingMode?: 'user' | 'environment';
+	ref?: Ref<HTMLDivElement>;
 }
 
-export const CameraRoot = forwardRef<HTMLDivElement, CameraRootProps>(
-	function Camera(
-		{
-			className,
-			onCapture,
-			children,
-			facingMode,
-			format = 'image/png',
-			...rest
-		},
-		ref,
-	) {
-		const videoRef = useRef<HTMLVideoElement>(null);
+export function CameraRoot({
+	className,
+	onCapture,
+	children,
+	facingMode,
+	format = 'image/png',
+	ref,
+	...rest
+}: CameraRootProps) {
+	const videoRef = useRef<HTMLVideoElement>(null);
 
-		const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
-		const [stream, setStream] = useState<MediaStream | undefined>();
+	const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
+	const [stream, setStream] = useState<MediaStream | undefined>();
 
-		useEffect(() => {
-			navigator.mediaDevices?.enumerateDevices().then((devices): void => {
-				setDevices(devices.filter((device) => device.kind === 'videoinput'));
-			});
-		}, [!!stream]);
+	useEffect(() => {
+		navigator.mediaDevices?.enumerateDevices().then((devices): void => {
+			setDevices(devices.filter((device) => device.kind === 'videoinput'));
+		});
+	}, [!!stream]);
 
-		const [selectedDeviceId, setSelectedDeviceId] = useState<
-			string | undefined
-		>();
+	const [selectedDeviceId, setSelectedDeviceId] = useState<
+		string | undefined
+	>();
 
-		const cleanupRef = useRef<() => void>(undefined);
-		useEffect(() => {
-			const init = () => {
-				cleanupRef.current?.();
-				navigator.mediaDevices
-					?.getUserMedia({
-						video: {
-							deviceId: selectedDeviceId,
-							facingMode,
-						},
-					})
-					.then((s) => {
-						setStream(s);
-						cleanupRef.current = () =>
-							s.getTracks().forEach((track) => track.stop());
-					});
-			};
+	const cleanupRef = useRef<() => void>(undefined);
+	useEffect(() => {
+		const init = () => {
+			cleanupRef.current?.();
+			navigator.mediaDevices
+				?.getUserMedia({
+					video: {
+						deviceId: selectedDeviceId,
+						facingMode,
+					},
+				})
+				.then((s) => {
+					setStream(s);
+					cleanupRef.current = () =>
+						s.getTracks().forEach((track) => track.stop());
+				});
+		};
+		init();
+
+		// reconnect if browser was backgrounded
+		const reconnect = () => {
+			if (stream?.active || document.visibilityState !== 'visible') {
+				return;
+			}
 			init();
+		};
+		document.addEventListener('visibilitychange', reconnect);
 
-			// reconnect if browser was backgrounded
-			const reconnect = () => {
-				if (stream?.active || document.visibilityState !== 'visible') {
-					return;
-				}
-				init();
-			};
-			document.addEventListener('visibilitychange', reconnect);
+		return () => {
+			document.removeEventListener('visibilitychange', reconnect);
+			cleanupRef.current?.();
+		};
+	}, [selectedDeviceId, facingMode]);
 
+	useEffect(() => {
+		const video = videoRef.current;
+		if (video && stream) {
+			video.srcObject = stream;
 			return () => {
-				document.removeEventListener('visibilitychange', reconnect);
-				cleanupRef.current?.();
+				video.srcObject = null;
 			};
-		}, [selectedDeviceId, facingMode]);
-
-		useEffect(() => {
-			const video = videoRef.current;
-			if (video && stream) {
-				video.srcObject = stream;
-				return () => {
-					video.srcObject = null;
-				};
-			}
-		}, [stream]);
+		}
+	}, [stream]);
 
-		const [capture, setCapture] = useState<ImageCapture>();
+	const [capture, setCapture] = useState<ImageCapture>();
 
-		useEffect(() => {
-			if (typeof window !== 'undefined' && 'ImageCapture' in window) {
-				const videoTrack = stream?.getVideoTracks()[0];
-				if (videoTrack) {
-					const capturer = new ImageCapture(videoTrack);
-					setCapture(capturer);
-					capturer.getPhotoCapabilities().then((capabilities) => {
-						console.log('ImageCapture capabilities:', capabilities);
-					});
-				}
+	useEffect(() => {
+		if (typeof window !== 'undefined' && 'ImageCapture' in window) {
+			const videoTrack = stream?.getVideoTracks()[0];
+			if (videoTrack) {
+				const capturer = new ImageCapture(videoTrack);
+				setCapture(capturer);
+				capturer.getPhotoCapabilities().then((capabilities) => {
+					console.log('ImageCapture capabilities:', capabilities);
+				});
 			}
-		}, [stream]);
+		}
+	}, [stream]);
 
-		const triggerCapture = () => {
-			if (capture) {
-				capture.takePhoto().then((blob) => {
-					const file = new File([blob], `image.${format.split('/')[1]}`, {
-						type: format,
-					});
-					onCapture?.(file);
+	const triggerCapture = () => {
+		if (capture) {
+			capture.takePhoto().then((blob) => {
+				const file = new File([blob], `image.${format.split('/')[1]}`, {
+					type: format,
 				});
-			} else {
-				// ImageCapture not supported, fallback to
-				// canvas capture
-				const video = videoRef.current;
-				if (video) {
-					const canvas = document.createElement('canvas');
-					canvas.width = video.videoWidth;
-					canvas.height = video.videoHeight;
-					canvas.getContext('2d')?.drawImage(video, 0, 0);
-					const data = canvas.toDataURL(format);
-					const file = dataURItoFile(data);
-					onCapture?.(file);
-				}
+				onCapture?.(file);
+			});
+		} else {
+			// ImageCapture not supported, fallback to
+			// canvas capture
+			const video = videoRef.current;
+			if (video) {
+				const canvas = document.createElement('canvas');
+				canvas.width = video.videoWidth;
+				canvas.height = video.videoHeight;
+				canvas.getContext('2d')?.drawImage(video, 0, 0);
+				const data = canvas.toDataURL(format);
+				const file = dataURItoFile(data);
+				onCapture?.(file);
 			}
-		};
+		}
+	};
 
-		const [fullscreen, setFullscreen] = useState(false);
+	const [fullscreen, setFullscreen] = useState(false);
 
-		return (
-			<CameraContext.Provider
-				value={{
-					devices,
-					triggerCapture,
-					selectedDeviceId,
-					selectDeviceId: setSelectedDeviceId,
-					setFullscreen,
-					fullscreen,
-				}}
+	return (
+		<CameraContext.Provider
+			value={{
+				devices,
+				triggerCapture,
+				selectedDeviceId,
+				selectDeviceId: setSelectedDeviceId,
+				setFullscreen,
+				fullscreen,
+			}}
+		>
+			<div
+				ref={ref}
+				className={classNames(
+					'layer-components:([font-family:inherit] text-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',
+					className,
+				)}
+				{...rest}
 			>
-				<div
-					ref={ref}
-					className={classNames(
-						'layer-components:([font-family:inherit] text-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',
-						className,
-					)}
-					{...rest}
-				>
-					<video
-						ref={videoRef}
-						className="w-full h-full object-cover"
-						autoPlay
-						muted
-						playsInline
-					></video>
-					{children}
-				</div>
-			</CameraContext.Provider>
-		);
-	},
-);
+				<video
+					ref={videoRef}
+					className="w-full h-full object-cover"
+					autoPlay
+					muted
+					playsInline
+				></video>
+				{children}
+			</div>
+		</CameraContext.Provider>
+	);
+}
 
 export interface CameraShutterButtonProps {
 	className?: string;
 	asChild?: boolean;
 	onClick?: (ev: MouseEvent<HTMLButtonElement>) => void;
+	ref?: Ref<HTMLButtonElement>;
 }
 
-export const CameraShutterButton = forwardRef<
-	HTMLButtonElement,
-	CameraShutterButtonProps
->(function CameraShutterButton({ asChild, onClick, ...rest }, ref) {
+export function CameraShutterButton({
+	asChild,
+	onClick,
+	ref,
+	...rest
+}: CameraShutterButtonProps) {
 	const Comp = asChild ? Slot : StyledShutterButton;
 	const { triggerCapture } = useContext(CameraContext);
 
@@ -209,7 +209,7 @@ export const CameraShutterButton = forwardRef<
 			{...rest}
 		/>
 	);
-});
+}
 
 const StyledShutterButton = withClassName(
 	'button',

package/src/components/card/Card.tsx

@@ -1,6 +1,6 @@
 import { Slot } from '@radix-ui/react-slot';
 import classNames from 'clsx';
-import { HTMLAttributes, MouseEvent, ReactNode, forwardRef } from 'react';
+import { HTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';
 import { withClassName } from '../../hooks.js';
 import { Masonry, MasonryProps } from '../masonry/masonry.js';
 import { SlotDiv } from '../utility/SlotDiv.js';
@@ -11,23 +11,25 @@ export const CardRoot = withClassName(
 	'layer-variants:[&[data-borderless=true]]:(border-none shadow-md)',
 );
 
-export const CardMain = forwardRef<
-	any,
-	{
-		asChild?: boolean;
-		className?: string;
-		onClick?: (ev: MouseEvent) => void;
-		children?: ReactNode;
-		compact?: boolean;
-		/** forces non-interactive version */
-		nonInteractive?: boolean;
-		visuallyFocused?: boolean;
-		visuallyDisabled?: boolean;
-	}
->(function CardMain(
-	{ asChild, className, compact, nonInteractive, ...rest },
+export function CardMain({
+	asChild,
+	className,
+	compact,
+	nonInteractive,
 	ref,
-) {
+	...rest
+}: {
+	asChild?: boolean;
+	className?: string;
+	onClick?: (ev: MouseEvent) => void;
+	children?: ReactNode;
+	compact?: boolean;
+	/** forces non-interactive version */
+	nonInteractive?: boolean;
+	visuallyFocused?: boolean;
+	visuallyDisabled?: boolean;
+	ref?: Ref<any>;
+}) {
 	const isInteractive = !nonInteractive && (!!asChild || !!rest.onClick);
 	const Comp = asChild ? Slot : isInteractive ? 'button' : 'div';
 	return (
@@ -51,7 +53,7 @@ export const CardMain = forwardRef<
 			{...rest}
 		/>
 	);
-});
+}
 
 export const CardTitle = withClassName(
 	'div',
@@ -67,12 +69,11 @@ const CardContentRoot = withClassName(
 );
 export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
 	unstyled?: boolean;
+	ref?: Ref<HTMLDivElement>;
+}
+export function CardContent({ unstyled, ref, ...rest }: CardContentProps) {
+	return <CardContentRoot ref={ref} data-unstyled={unstyled} {...rest} />;
 }
-export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
-	function CardContent({ unstyled, ...rest }, ref) {
-		return <CardContentRoot ref={ref} data-unstyled={unstyled} {...rest} />;
-	},
-);
 
 export const CardImage = withClassName(
 	SlotDiv,

package/src/components/checkbox/Checkbox.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { ComponentProps, forwardRef } from 'react';
 import { CheckIcon } from '@radix-ui/react-icons';
 import classNames from 'clsx';
+import { ComponentProps } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
 
 export const CheckboxRoot = withClassName(
@@ -36,15 +36,14 @@ export function CheckboxIndicator({
 }
 
 export const Checkbox = Object.assign(
-	forwardRef<HTMLButtonElement, ComponentProps<typeof CheckboxRoot>>(
-		function Checkbox(props, ref) {
-			return (
-				<CheckboxRoot ref={ref} {...props}>
-					<CheckboxIndicator />
-				</CheckboxRoot>
-			);
-		},
-	),
+	function Checkbox({ ref, ...props }: ComponentProps<typeof CheckboxRoot>) {
+		return (
+			<CheckboxRoot ref={ref} {...props}>
+				<CheckboxIndicator />
+			</CheckboxRoot>
+		);
+	},
+
 	{
 		Root: CheckboxRoot,
 		Indicator: CheckboxIndicator,

package/src/components/chip/Chip.tsx

@@ -1,16 +1,20 @@
 import { Slot } from '@radix-ui/react-slot';
 import classNames from 'clsx';
-import { HTMLAttributes, forwardRef } from 'react';
+import { HTMLAttributes, Ref } from 'react';
 
 export interface ChipProps extends HTMLAttributes<HTMLElement> {
 	color?: 'neutral' | 'primary' | 'accent';
 	asChild?: boolean;
+	ref?: Ref<any>;
 }
 
-export const Chip = forwardRef<any, ChipProps>(function Chip(
-	{ className, color = 'neutral', asChild, ...rest },
+export function Chip({
+	className,
+	color = 'neutral',
+	asChild,
 	ref,
-) {
+	...rest
+}: ChipProps) {
 	const Component = asChild ? Slot : 'div';
 	return (
 		<Component
@@ -26,4 +30,4 @@ export const Chip = forwardRef<any, ChipProps>(function Chip(
 			{...rest}
 		/>
 	);
-});
+}

package/src/components/collapsible/Collapsible.tsx

@@ -1,54 +1,56 @@
-'use client';
-
-import { forwardRef } from 'react';
-import { withClassName } from '../../hooks/withClassName.js';
-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-
-export const CollapsibleRoot = CollapsiblePrimitive.Root;
-const CollapsibleContentBase = withClassName(
-	CollapsiblePrimitive.Content,
-	'overflow-hidden',
-	'layer-components:[&[data-state=open]]:(animate-radix-collapsible-open-vertical animate-duration-300 animate-ease-springy) layer-components:[&[data-state=closed]]:(animate-radix-collapsible-close-vertical animate-duration-300 animate-ease-springy)',
-	'layer-variants:[&[data-horizontal][data-state=open]]:(animate-radix-collapsible-open-horizontal animate-duration-300 animate-ease-springy) layer-variants:[&[data-horizontal][data-state=closed]]:(animate-radix-collapsible-close-horizontal animate-duration-300 animate-ease-springy)',
-	'layer-variants:[&[data-both][data-state=open]]:(animate-radix-collapsible-open-both animate-duration-300 animate-ease-springy) layer-variants:[&[data-both][data-state=closed]]:(animate-radix-collapsible-close-both animate-duration-300 animate-ease-springy)',
-);
-// specifically removing className... it's causing problems?
-export const CollapsibleContent = forwardRef<
-	HTMLDivElement,
-	CollapsiblePrimitive.CollapsibleContentProps & {
-		horizontal?: boolean;
-		both?: boolean;
-	}
->(function CollapsibleContent({ horizontal, both, ...props }, ref) {
-	return (
-		<CollapsibleContentBase
-			data-horizontal={horizontal}
-			data-both={both}
-			{...props}
-			ref={ref}
-		/>
-	);
-});
-export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
-
-export const CollapsibleSimple = ({
-	horizontal,
-	both,
-	children,
-	...props
-}: CollapsiblePrimitive.CollapsibleProps & {
-	horizontal?: boolean;
-	both?: boolean;
-}) => (
-	<CollapsibleRoot {...props}>
-		<CollapsibleContent horizontal={horizontal} both={both}>
-			{children}
-		</CollapsibleContent>
-	</CollapsibleRoot>
-);
-
-export const Collapsible = Object.assign(CollapsibleRoot, {
-	Content: CollapsibleContent,
-	Trigger: CollapsibleTrigger,
-	Simple: CollapsibleSimple,
-});
+'use client';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import { Ref } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+
+export const CollapsibleRoot = CollapsiblePrimitive.Root;
+const CollapsibleContentBase = withClassName(
+	CollapsiblePrimitive.Content,
+	'overflow-hidden',
+	'layer-components:[&[data-state=open]]:(animate-radix-collapsible-open-vertical animate-duration-300 animate-ease-springy) layer-components:[&[data-state=closed]]:(animate-radix-collapsible-close-vertical animate-duration-300 animate-ease-springy)',
+	'layer-variants:[&[data-horizontal][data-state=open]]:(animate-radix-collapsible-open-horizontal animate-duration-300 animate-ease-springy) layer-variants:[&[data-horizontal][data-state=closed]]:(animate-radix-collapsible-close-horizontal animate-duration-300 animate-ease-springy)',
+	'layer-variants:[&[data-both][data-state=open]]:(animate-radix-collapsible-open-both animate-duration-300 animate-ease-springy) layer-variants:[&[data-both][data-state=closed]]:(animate-radix-collapsible-close-both animate-duration-300 animate-ease-springy)',
+);
+// specifically removing className... it's causing problems?
+export const CollapsibleContent = function CollapsibleContent({
+	ref,
+	horizontal,
+	both,
+	...props
+}: CollapsiblePrimitive.CollapsibleContentProps & {
+	horizontal?: boolean;
+	both?: boolean;
+	ref?: Ref<HTMLDivElement>;
+}) {
+	return (
+		<CollapsibleContentBase
+			data-horizontal={horizontal}
+			data-both={both}
+			{...props}
+			ref={ref}
+		/>
+	);
+};
+export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+
+export const CollapsibleSimple = ({
+	horizontal,
+	both,
+	children,
+	...props
+}: CollapsiblePrimitive.CollapsibleProps & {
+	horizontal?: boolean;
+	both?: boolean;
+}) => (
+	<CollapsibleRoot {...props}>
+		<CollapsibleContent horizontal={horizontal} both={both}>
+			{children}
+		</CollapsibleContent>
+	</CollapsibleRoot>
+);
+
+export const Collapsible = Object.assign(CollapsibleRoot, {
+	Content: CollapsibleContent,
+	Trigger: CollapsibleTrigger,
+	Simple: CollapsibleSimple,
+});