@a-type/ui 1.3.0 → 1.3.2

package/src/components/slider/Slider.tsx

@@ -1,55 +1,58 @@
-import * as SliderPrimitive from '@radix-ui/react-slider';
-import { forwardRef } from 'react';
-import { withClassName } from '../../hooks.js';
-
-export const SliderRoot = withClassName(
-	SliderPrimitive.Root,
-	'layer-components:(relative flex items-center select-none touch-none w-full h-30px translate-z-0)',
-);
-export const SliderTrack = withClassName(
-	SliderPrimitive.Track,
-	'layer-components:(bg-transparent relative grow rounded-full h-9px border border-1px border-solid border-black)',
-);
-export const SliderRange = withClassName(
-	SliderPrimitive.Range,
-	'layer-components:(absolute bg-accent rounded-full h-full)',
-	'layer-variants:[&[data-color=primary]]:bg-primary',
-);
-export const SliderThumb = withClassName(
-	SliderPrimitive.Thumb,
-	'layer-components:(block w-5 h-5 bg-white shadow-sm rounded-full ring-2 ring-black touch-none transition-all)',
-	'layer-components:hover:(shadow-md)',
-	'layer-components:active:(shadow-lg ring-4 ring-accent-dark ring-opacity-50 bg-accent-light)',
-	'layer-components:focus-visible:(shadow-lg ring-4 ring-accent-dark ring-opacity-50 outline-none bg-accent-light)',
-	'layer-components:focus:(outline-none)',
-	'layer-components:disabled:(opacity-50)',
-	'layer-variants:[&[data-color=primary]]:active:(bg-primary-light ring-primary-dark)',
-	'layer-variants:[&[data-color=primary]]:focus-visible:(bg-primary-light ring-primary-dark)',
-);
-
-export interface SliderProps extends SliderPrimitive.SliderProps {
-	label?: string;
-	color?: 'default' | 'primary';
-}
-
-export const Slider = Object.assign(
-	forwardRef<HTMLDivElement, SliderProps>(function Slider(
-		{ label, color, ...props },
-		ref,
-	) {
-		return (
-			<SliderRoot ref={ref} {...props}>
-				<SliderTrack>
-					<SliderRange data-color={color} />
-				</SliderTrack>
-				<SliderThumb aria-label={label} data-color={color} />
-			</SliderRoot>
-		);
-	}),
-	{
-		Root: SliderRoot,
-		Track: SliderTrack,
-		Range: SliderRange,
-		Thumb: SliderThumb,
-	},
-);
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { withClassName } from '../../hooks.js';
+
+export const SliderRoot = withClassName(
+	SliderPrimitive.Root,
+	'layer-components:(relative flex items-center select-none touch-none w-full h-30px translate-z-0)',
+);
+export const SliderTrack = withClassName(
+	SliderPrimitive.Track,
+	'layer-components:(bg-transparent relative grow rounded-full h-9px border border-1px border-solid border-black)',
+);
+export const SliderRange = withClassName(
+	SliderPrimitive.Range,
+	'layer-components:(absolute bg-accent rounded-full h-full)',
+	'layer-variants:[&[data-color=primary]]:bg-primary',
+);
+export const SliderThumb = withClassName(
+	SliderPrimitive.Thumb,
+	'layer-components:(block w-5 h-5 bg-white shadow-sm rounded-full ring-2 ring-black touch-none transition-all)',
+	'layer-components:hover:(shadow-md)',
+	'layer-components:active:(shadow-lg ring-4 ring-accent-dark ring-opacity-50 bg-accent-light)',
+	'layer-components:focus-visible:(shadow-lg ring-4 ring-accent-dark ring-opacity-50 outline-none bg-accent-light)',
+	'layer-components:focus:(outline-none)',
+	'layer-components:disabled:(opacity-50)',
+	'layer-variants:[&[data-color=primary]]:active:(bg-primary-light ring-primary-dark)',
+	'layer-variants:[&[data-color=primary]]:focus-visible:(bg-primary-light ring-primary-dark)',
+);
+
+export interface SliderProps extends SliderPrimitive.SliderProps {
+	label?: string;
+	color?: 'default' | 'primary';
+}
+
+export const Slider = Object.assign(
+	function Slider({
+		ref,
+		label,
+		color,
+		...props
+	}: SliderProps & {
+		ref?: React.Ref<HTMLDivElement>;
+	}) {
+		return (
+			<SliderRoot ref={ref} {...props}>
+				<SliderTrack>
+					<SliderRange data-color={color} />
+				</SliderTrack>
+				<SliderThumb aria-label={label} data-color={color} />
+			</SliderRoot>
+		);
+	},
+	{
+		Root: SliderRoot,
+		Track: SliderTrack,
+		Range: SliderRange,
+		Thumb: SliderThumb,
+	},
+);

package/src/components/spinner/Spinner.tsx

@@ -1,59 +1,66 @@
-import { HTMLAttributes, forwardRef } from 'react';
-import classNames from 'clsx';
-
-const CIRCLE_SIZE = 44;
-
-export interface SpinnerProps
-	extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-	size?: number;
-	thickness?: number;
-}
-
-export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
-	function Spinner(
-		{ size = 40, thickness = 7.2, className, style, ...props },
-		ref,
-	) {
-		return (
-			<div
-				ref={ref}
-				role="progressbar"
-				{...props}
-				className={classNames(
-					'inline-block animate-spin animate-ease-linear animate-iteration-infinite color-inherit animate-duration-1400 transform-origin-[50%_50%]',
-					className,
-				)}
-				style={{ width: size, height: size, ...style }}
-			>
-				<svg
-					className="block"
-					viewBox={`${CIRCLE_SIZE / 2} ${
-						CIRCLE_SIZE / 2
-					} ${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]"
-						cx={CIRCLE_SIZE}
-						cy={CIRCLE_SIZE}
-						r={(CIRCLE_SIZE - thickness) / 2}
-						fill="none"
-						strokeWidth={thickness}
-					/>
-				</svg>
-			</div>
-		);
-	},
-);
-
-export const FullScreenSpinner = forwardRef<HTMLDivElement, SpinnerProps>(
-	function FullScreenSpinner(props, ref) {
-		return (
-			<div
-				ref={ref}
-				className="flex flex-row gap-4 w-full flex-1 justify-center items-center self-stretch"
-			>
-				<Spinner {...props} />
-			</div>
-		);
-	},
-);
+import classNames from 'clsx';
+import { HTMLAttributes } from 'react';
+
+const CIRCLE_SIZE = 44;
+
+export interface SpinnerProps
+	extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+	size?: number;
+	thickness?: number;
+}
+
+export const Spinner = function Spinner({
+	ref,
+	size = 40,
+	thickness = 7.2,
+	className,
+	style,
+	...props
+}: SpinnerProps & {
+	ref?: React.Ref<HTMLDivElement>;
+}) {
+	return (
+		<div
+			ref={ref}
+			role="progressbar"
+			{...props}
+			className={classNames(
+				'inline-block animate-spin animate-ease-linear animate-iteration-infinite color-inherit animate-duration-1400 transform-origin-[50%_50%]',
+				className,
+			)}
+			style={{ width: size, height: size, ...style }}
+		>
+			<svg
+				className="block"
+				viewBox={`${CIRCLE_SIZE / 2} ${
+					CIRCLE_SIZE / 2
+				} ${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]"
+					cx={CIRCLE_SIZE}
+					cy={CIRCLE_SIZE}
+					r={(CIRCLE_SIZE - thickness) / 2}
+					fill="none"
+					strokeWidth={thickness}
+				/>
+			</svg>
+		</div>
+	);
+};
+
+export const FullScreenSpinner = function FullScreenSpinner({
+	ref,
+	...props
+}: SpinnerProps & {
+	ref?: React.Ref<HTMLDivElement>;
+}) {
+	return (
+		<div
+			ref={ref}
+			className="flex flex-row gap-4 w-full flex-1 justify-center items-center self-stretch"
+		>
+			<Spinner {...props} />
+		</div>
+	);
+};

package/src/components/switch/Switch.tsx

@@ -1,27 +1,31 @@
-import { withClassName } from '../../hooks/withClassName.js';
-import { Root, SwitchProps, Thumb } from '@radix-ui/react-switch';
-import { forwardRef } from 'react';
-
-const SwitchRoot = withClassName(
-	Root,
-	'unset w-42px h-25px bg-white rounded-full relative transition-color border-default flex-shrink-0 focus-visible:shadow-focus [&[data-state=checked]]:bg-accent',
-);
-
-const SwitchThumb = withClassName(
-	Thumb,
-	'block w-21px h-21px bg-white rounded-full border-default transition-transform will-change-transform [&[data-state=checked]]:translate-x-19px',
-);
-
-export const Switch = Object.assign(
-	forwardRef<HTMLButtonElement, SwitchProps>(function Switch(props, ref) {
-		return (
-			<SwitchRoot {...props} ref={ref}>
-				<SwitchThumb />
-			</SwitchRoot>
-		);
-	}),
-	{
-		Root: SwitchRoot,
-		Thumb: SwitchThumb,
-	},
-);
+import { Root, SwitchProps, Thumb } from '@radix-ui/react-switch';
+import { withClassName } from '../../hooks/withClassName.js';
+
+const SwitchRoot = withClassName(
+	Root,
+	'unset w-42px h-25px bg-white rounded-full relative transition-color border-default flex-shrink-0 focus-visible:shadow-focus [&[data-state=checked]]:bg-accent',
+);
+
+const SwitchThumb = withClassName(
+	Thumb,
+	'block w-21px h-21px bg-white rounded-full border-default transition-transform will-change-transform [&[data-state=checked]]:translate-x-19px',
+);
+
+export const Switch = Object.assign(
+	function Switch({
+		ref,
+		...props
+	}: SwitchProps & {
+		ref?: React.Ref<HTMLButtonElement>;
+	}) {
+		return (
+			<SwitchRoot {...props} ref={ref}>
+				<SwitchThumb />
+			</SwitchRoot>
+		);
+	},
+	{
+		Root: SwitchRoot,
+		Thumb: SwitchThumb,
+	},
+);

package/src/components/textArea/TextArea.tsx

@@ -1,117 +1,114 @@
-'use client';
-
-import classNames from 'clsx';
-import {
-	ChangeEvent,
-	forwardRef,
-	HTMLProps,
-	useCallback,
-	useLayoutEffect,
-	useRef,
-	useState,
-} from 'react';
-import useMergedRef from '../../hooks/useMergedRef.js';
-import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
-import { inputClassName } from '../input/index.js';
-
-export interface TextAreaProps
-	extends Omit<HTMLProps<HTMLTextAreaElement>, 'ref'> {
-	className?: string;
-	autoSize?: boolean;
-	autoSelect?: boolean;
-	// if auto-size, pad the height by this many px
-	padBottomPixels?: number;
-	placeholders?: string[];
-	placeholdersIntervalMs?: number;
-	onValueChange?: (value: string) => void;
-}
-
-export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-	function TextArea(
-		{
-			autoSize,
-			autoSelect,
-			onFocus,
-			className,
-			rows,
-			padBottomPixels = 0,
-			onChange,
-			placeholder,
-			placeholders,
-			placeholdersIntervalMs = 5000,
-			onValueChange,
-			...rest
-		},
-		ref,
-	) {
-		const innerRef = useRef<HTMLTextAreaElement>(null);
-		const finalRef = useMergedRef(innerRef, ref);
-
-		const [innerValue, setInnerValue] = useState('');
-		const finalValue = rest.value ?? innerValue;
-
-		// TODO: can layout effect be avoided? useEffect shows a flash of the wrong size
-		useLayoutEffect(() => {
-			if (!autoSize) return;
-			const element = innerRef.current;
-			if (element) {
-				if (element.value !== '' || padBottomPixels) {
-					element!.style.height = 'auto';
-					const baseHeight = element.scrollHeight;
-					element.style.height = baseHeight + padBottomPixels + 'px';
-				}
-			}
-		}, [autoSize, padBottomPixels, finalValue]);
-
-		const handleChange = useCallback(
-			(e: ChangeEvent<HTMLTextAreaElement>) => {
-				setInnerValue((e.target as HTMLTextAreaElement).value);
-				if (onChange) {
-					onChange(e);
-				}
-				if (onValueChange) {
-					onValueChange(e.target.value);
-				}
-			},
-			[onChange, onValueChange],
-		);
-
-		const handleFocus = useCallback(
-			(e: React.FocusEvent<HTMLTextAreaElement>) => {
-				if (autoSelect) {
-					e.target.select();
-				}
-				if (onFocus) {
-					onFocus(e);
-				}
-			},
-			[autoSelect, onFocus],
-		);
-
-		const randomPlaceholder = useRotatingShuffledValue(
-			placeholders ?? [],
-			placeholdersIntervalMs,
-		);
-
-		return (
-			<textarea
-				ref={finalRef}
-				className={classNames(
-					inputClassName,
-					'layer-components:([font-family:inherit] text-inherit overflow-hidden resize-none)',
-					'layer-variants:(rounded-20px px-4 py-4)',
-					{
-						'layer-components:[resize:vertical]': !autoSize,
-						'layer-components:[resize:none]': autoSize,
-					},
-					className,
-				)}
-				rows={autoSize ? 1 : rows}
-				onChange={handleChange}
-				onFocus={handleFocus}
-				placeholder={placeholder ?? randomPlaceholder}
-				{...rest}
-			/>
-		);
-	},
-);
+'use client';
+
+import classNames from 'clsx';
+import {
+	ChangeEvent,
+	HTMLProps,
+	useCallback,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from 'react';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
+import { inputClassName } from '../input/index.js';
+
+export interface TextAreaProps
+	extends Omit<HTMLProps<HTMLTextAreaElement>, 'ref'> {
+	className?: string;
+	autoSize?: boolean;
+	autoSelect?: boolean;
+	// if auto-size, pad the height by this many px
+	padBottomPixels?: number;
+	placeholders?: string[];
+	placeholdersIntervalMs?: number;
+	onValueChange?: (value: string) => void;
+}
+
+export const TextArea = function TextArea({
+	ref,
+	autoSize,
+	autoSelect,
+	onFocus,
+	className,
+	rows,
+	padBottomPixels = 0,
+	onChange,
+	placeholder,
+	placeholders,
+	placeholdersIntervalMs = 5000,
+	onValueChange,
+	...rest
+}: TextAreaProps & {
+	ref?: React.Ref<HTMLTextAreaElement>;
+}) {
+	const innerRef = useRef<HTMLTextAreaElement>(null);
+	const finalRef = useMergedRef(innerRef, ref);
+
+	const [innerValue, setInnerValue] = useState('');
+	const finalValue = rest.value ?? innerValue;
+
+	// TODO: can layout effect be avoided? useEffect shows a flash of the wrong size
+	useLayoutEffect(() => {
+		if (!autoSize) return;
+		const element = innerRef.current;
+		if (element) {
+			if (element.value !== '' || padBottomPixels) {
+				element!.style.height = 'auto';
+				const baseHeight = element.scrollHeight;
+				element.style.height = baseHeight + padBottomPixels + 'px';
+			}
+		}
+	}, [autoSize, padBottomPixels, finalValue]);
+
+	const handleChange = useCallback(
+		(e: ChangeEvent<HTMLTextAreaElement>) => {
+			setInnerValue((e.target as HTMLTextAreaElement).value);
+			if (onChange) {
+				onChange(e);
+			}
+			if (onValueChange) {
+				onValueChange(e.target.value);
+			}
+		},
+		[onChange, onValueChange],
+	);
+
+	const handleFocus = useCallback(
+		(e: React.FocusEvent<HTMLTextAreaElement>) => {
+			if (autoSelect) {
+				e.target.select();
+			}
+			if (onFocus) {
+				onFocus(e);
+			}
+		},
+		[autoSelect, onFocus],
+	);
+
+	const randomPlaceholder = useRotatingShuffledValue(
+		placeholders ?? [],
+		placeholdersIntervalMs,
+	);
+
+	return (
+		<textarea
+			ref={finalRef}
+			className={classNames(
+				inputClassName,
+				'layer-components:([font-family:inherit] text-inherit overflow-hidden resize-none)',
+				'layer-variants:(rounded-20px px-4 py-4)',
+				{
+					'layer-components:[resize:vertical]': !autoSize,
+					'layer-components:[resize:none]': autoSize,
+				},
+				className,
+			)}
+			rows={autoSize ? 1 : rows}
+			onChange={handleChange}
+			onFocus={handleFocus}
+			placeholder={placeholder ?? randomPlaceholder}
+			{...rest}
+		/>
+	);
+};