@a-type/ui 0.6.7 → 0.6.9

package/src/components/forms/TextField.tsx

@@ -2,111 +2,111 @@
 
 import { useField } from 'formik';
 import {
-  ComponentProps,
-  InputHTMLAttributes,
-  useEffect,
-  useRef,
-  Ref,
-  forwardRef,
+	ComponentProps,
+	InputHTMLAttributes,
+	useEffect,
+	useRef,
+	Ref,
+	forwardRef,
 } from 'react';
 import useMergedRef from '../../hooks/useMergedRef.js';
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { Input } from '../input/Input.js';
 import { TextArea, TextAreaProps } from '../textArea/TextArea.js';
 import { withClassName } from '../../hooks.js';
 
 export type TextFieldProps = {
-  name: string;
-  label?: string;
-  required?: boolean;
-  type?: InputHTMLAttributes<HTMLInputElement>['type'];
-  className?: string;
-  placeholder?: string;
-  autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete'];
-  autoFocus?: InputHTMLAttributes<HTMLInputElement>['autoFocus'];
-  autoFocusDelay?: number;
-  inputRef?: Ref<HTMLInputElement>;
+	name: string;
+	label?: string;
+	required?: boolean;
+	type?: InputHTMLAttributes<HTMLInputElement>['type'];
+	className?: string;
+	placeholder?: string;
+	autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete'];
+	autoFocus?: InputHTMLAttributes<HTMLInputElement>['autoFocus'];
+	autoFocusDelay?: number;
+	inputRef?: Ref<HTMLInputElement>;
 } & ComponentProps<typeof Input>;
 
 const emptyRef = (() => {}) as any;
 
 export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
-  function TextField(
-    {
-      name,
-      label,
-      className,
-      autoFocusDelay,
-      autoFocus,
-      inputRef,
-      onChange,
-      onFocus,
-      onBlur,
-      ...rest
-    },
-    ref,
-  ) {
-    const [props] = useField({
-      name,
-      onChange,
-      onFocus,
-      onBlur,
-    });
-    const innerInputRef = useRef<HTMLInputElement>(null);
+	function TextField(
+		{
+			name,
+			label,
+			className,
+			autoFocusDelay,
+			autoFocus,
+			inputRef,
+			onChange,
+			onFocus,
+			onBlur,
+			...rest
+		},
+		ref,
+	) {
+		const [props] = useField({
+			name,
+			onChange,
+			onFocus,
+			onBlur,
+		});
+		const innerInputRef = useRef<HTMLInputElement>(null);
 
-    useEffect(() => {
-      if (autoFocusDelay) {
-        setTimeout(() => {
-          if (innerInputRef.current) innerInputRef.current.focus();
-        }, autoFocusDelay);
-      }
-    }, [autoFocusDelay]);
+		useEffect(() => {
+			if (autoFocusDelay) {
+				setTimeout(() => {
+					if (innerInputRef.current) innerInputRef.current.focus();
+				}, autoFocusDelay);
+			}
+		}, [autoFocusDelay]);
 
-    return (
-      <FieldRoot className={className} ref={ref}>
-        {label && <FieldLabel>{label}</FieldLabel>}
-        <Input
-          {...props}
-          {...rest}
-          autoFocus={autoFocus}
-          ref={useMergedRef(innerInputRef, inputRef || emptyRef)}
-        />
-      </FieldRoot>
-    );
-  },
+		return (
+			<FieldRoot className={className} ref={ref}>
+				{label && <FieldLabel>{label}</FieldLabel>}
+				<Input
+					{...props}
+					{...rest}
+					autoFocus={autoFocus}
+					ref={useMergedRef(innerInputRef, inputRef || emptyRef)}
+				/>
+			</FieldRoot>
+		);
+	},
 );
 
 export type TextAreaFieldProps = {
-  name: string;
-  label?: string;
-  required?: boolean;
-  rows?: number;
-  disabled?: boolean;
-  className?: string;
-  inputRef?: Ref<HTMLTextAreaElement>;
+	name: string;
+	label?: string;
+	required?: boolean;
+	rows?: number;
+	disabled?: boolean;
+	className?: string;
+	inputRef?: Ref<HTMLTextAreaElement>;
 } & TextAreaProps;
 
 export function TextAreaField({
-  name,
-  label,
-  className,
-  inputRef,
-  ...rest
+	name,
+	label,
+	className,
+	inputRef,
+	...rest
 }: TextAreaFieldProps) {
-  const [props] = useField(name);
-  return (
-    <FieldRoot className={className}>
-      {label && <FieldLabel>{label}</FieldLabel>}
-      <TextArea ref={inputRef} {...props} {...rest} />
-    </FieldRoot>
-  );
+	const [props] = useField(name);
+	return (
+		<FieldRoot className={className}>
+			{label && <FieldLabel>{label}</FieldLabel>}
+			<TextArea ref={inputRef} {...props} {...rest} />
+		</FieldRoot>
+	);
 }
 
 const FieldRoot = withClassName(
-  'div',
-  'flex flex-col items-stretch gap-1 self-stretch',
+	'div',
+	'flex flex-col items-stretch gap-1 self-stretch',
 );
 const FieldLabel = withClassName(
-  'label',
-  'inline-flex flex-col gap-1 text-sm font-bold text-dark-blend mb-1',
+	'label',
+	'inline-flex flex-col gap-1 text-sm font-bold text-dark-blend mb-1',
 );

package/src/components/icon/Icon.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, HTMLAttributes } from 'react';
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { IconName } from './generated/iconNames.js';
 
 export interface IconProps extends HTMLAttributes<SVGSVGElement> {

package/src/components/imageUploader/ImageUploader.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { useCallback, useId, useState } from 'react';
 import { Icon } from '../icon.js';
 import { Button } from '../button.js';

package/src/components/infiniteLoadTrigger/InfiniteLoadTrigger.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, forwardRef, useEffect, useRef } from 'react';
-import classNames from 'classnames';
+import classNames from 'clsx';
 import useMergedRef from '../../hooks/useMergedRef.js';
 import { useStableCallback } from '../../hooks.js';
 

package/src/components/input/Input.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { ComponentProps, ComponentPropsWithRef, forwardRef } from 'react';
 
 export const inputClassName = classNames(

package/src/components/layouts/PageContent.tsx

@@ -1,5 +1,5 @@
 'use client';
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { HTMLAttributes } from 'react';
 import { useBoundsCssVars } from '../../hooks/useSize.js';
 

package/src/components/layouts/PageFixedArea.tsx

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import classNames from 'classnames';
+import classNames from 'clsx';
 
 export function PageFixedArea({
 	className,

package/src/components/layouts/PageNav.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { HTMLAttributes } from 'react';
 
 export function PageNav({

package/src/components/layouts/PageNowPlaying.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { HTMLAttributes } from 'react';
 
 export function PageNowPlaying({

package/src/components/layouts/PageRoot.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { forwardRef, ReactNode } from 'react';
 
 export const PageRoot = forwardRef<

package/src/components/layouts/PageSection.tsx

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { withClassName } from '../../hooks/withClassName.js';
 
 export function PageSection({

package/src/components/navBar/NavBar.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { withClassName } from '../../hooks.js';
 import { ReactNode, forwardRef } from 'react';
 import { Slot } from '@radix-ui/react-slot';

package/src/components/note/Note.tsx

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import classNames from 'classnames';
+import classNames from 'clsx';
 
 export interface NoteProps extends HTMLAttributes<HTMLDivElement> {
 	children?: ReactNode;

package/src/components/numberStepper/NumberStepper.tsx

@@ -1,6 +1,6 @@
 import { fractionToText } from '@a-type/utils';
 import { MinusIcon, PlusIcon } from '@radix-ui/react-icons';
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { ReactNode } from 'react';
 import { Button } from '../button.js';
 

package/src/components/peek/Peek.tsx

@@ -1,74 +1,74 @@
 import { debounce } from '@a-type/utils';
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { ReactNode, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useSize } from '../../hooks/useSize.js';
 import { useToggle } from '../../hooks/useToggle.js';
 
 export interface PeekProps {
-  peekHeight?: number;
-  children: ReactNode;
-  className?: string;
+	peekHeight?: number;
+	children: ReactNode;
+	className?: string;
 }
 
 export function Peek({ peekHeight = 120, children, className }: PeekProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [isPeekable, setIsPeekable] = useState(false);
-  const contentRef = useSize<HTMLDivElement>(
-    useMemo(
-      () =>
-        debounce(({ height }) => {
-          setIsPeekable(height > peekHeight);
-          if (containerRef.current) {
-            containerRef.current.style.setProperty(
-              '--collapsible-height',
-              `${height}px`,
-            );
-          }
-        }, 300),
-      [],
-    ),
-  );
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [isPeekable, setIsPeekable] = useState(false);
+	const contentRef = useSize<HTMLDivElement>(
+		useMemo(
+			() =>
+				debounce(({ height }) => {
+					setIsPeekable(height > peekHeight);
+					if (containerRef.current) {
+						containerRef.current.style.setProperty(
+							'--collapsible-height',
+							`${height}px`,
+						);
+					}
+				}, 300),
+			[],
+		),
+	);
 
-  const [open, toggle] = useToggle(false);
+	const [open, toggle] = useToggle(false);
 
-  useEffect(() => {
-    if (containerRef.current) {
-      containerRef.current.style.setProperty(
-        '--peek-height',
-        `${peekHeight}px`,
-      );
-    }
-  }, [peekHeight]);
+	useEffect(() => {
+		if (containerRef.current) {
+			containerRef.current.style.setProperty(
+				'--peek-height',
+				`${peekHeight}px`,
+			);
+		}
+	}, [peekHeight]);
 
-  const id = useId();
+	const id = useId();
 
-  return (
-    <div
-      className={classNames(
-        'relative animate-ease-default animate-forwards overflow-hidden [&[data-state=closed]]:(animate-keyframes-peek-close animate-duration-300 max-h-[var(--peek-height,120px)]) [&[data-state=open]]:(animate-keyframes-peek-open animate-duration-600)',
-        className,
-      )}
-      ref={containerRef}
-      data-state={isPeekable ? (open ? 'open' : 'closed') : undefined}
-    >
-      <div ref={contentRef} id={id}>
-        {children}
-      </div>
-      {isPeekable && (
-        <button
-          data-state={open ? 'open' : 'closed'}
-          className={classNames(
-            'h-80px absolute bottom-0 z-1 bg-transparent border-none w-full cursor-pointer border-b border-solid border-white',
-            'focus-visible:(outline-none bg-gradient-to-b from-transparent to-primary-wash border-b border-solid border-primary',
-            'after:(content-["-_tap_to_expand_-"] p-3 color-gray9 text-xs flex flex-col justify-end items-center absolute inset-0 top-auto h-80px bg-gradient-to-b from-transparent to-white)',
-            'after:[&[data-state=open]]:content-["-_tap_to_collapse_-"]',
-          )}
-          onClick={toggle}
-          aria-label="Toggle show description"
-          aria-expanded={open}
-          aria-controls={id}
-        />
-      )}
-    </div>
-  );
+	return (
+		<div
+			className={classNames(
+				'relative animate-ease-default animate-forwards overflow-hidden [&[data-state=closed]]:(animate-keyframes-peek-close animate-duration-300 max-h-[var(--peek-height,120px)]) [&[data-state=open]]:(animate-keyframes-peek-open animate-duration-600)',
+				className,
+			)}
+			ref={containerRef}
+			data-state={isPeekable ? (open ? 'open' : 'closed') : undefined}
+		>
+			<div ref={contentRef} id={id}>
+				{children}
+			</div>
+			{isPeekable && (
+				<button
+					data-state={open ? 'open' : 'closed'}
+					className={classNames(
+						'h-80px absolute bottom-0 z-1 bg-transparent border-none w-full cursor-pointer border-b border-solid border-white',
+						'focus-visible:(outline-none bg-gradient-to-b from-transparent to-primary-wash border-b border-solid border-primary',
+						'after:(content-["-_tap_to_expand_-"] p-3 color-gray9 text-xs flex flex-col justify-end items-center absolute inset-0 top-auto h-80px bg-gradient-to-b from-transparent to-white)',
+						'after:[&[data-state=open]]:content-["-_tap_to_collapse_-"]',
+					)}
+					onClick={toggle}
+					aria-label="Toggle show description"
+					aria-expanded={open}
+					aria-controls={id}
+				/>
+			)}
+		</div>
+	);
 }

package/src/components/popover/Popover.tsx

@@ -4,7 +4,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { ComponentPropsWithoutRef, forwardRef } from 'react';
 
 import { withClassName } from '../../hooks/withClassName.js';
-import classNames from 'classnames';
+import classNames from 'clsx';
 
 const StyledContent = withClassName(
 	PopoverPrimitive.Content,

package/src/components/richEditor/RichEditor.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { forwardRef, lazy } from 'react';
 
 const EditorContent = lazy(() => import('./EditorContent.js'));

package/src/components/select/Select.tsx

@@ -16,7 +16,7 @@ import {
 	forwardRef,
 	useContext,
 } from 'react';
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { withClassName } from '../../hooks/withClassName.js';
 
 export const SelectItem = forwardRef<

package/src/components/skeletons/skeletons.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import classNames from 'classnames';
+import classNames from 'clsx';
 
 export const TextSkeleton = ({
 	maxLength,

package/src/components/spinner/Spinner.tsx

@@ -1,5 +1,5 @@
 import { HTMLAttributes, forwardRef } from 'react';
-import classNames from 'classnames';
+import classNames from 'clsx';
 
 const CIRCLE_SIZE = 44;
 

package/src/components/textArea/TextArea.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import classNames from 'classnames';
+import classNames from 'clsx';
 import useMergedRef from '../../hooks/useMergedRef.js';
 import {
 	ChangeEvent,

package/src/components/tooltip/Tooltip.tsx

@@ -2,7 +2,7 @@
 
 import React, { ComponentPropsWithoutRef } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import classNames from 'classnames';
+import classNames from 'clsx';
 
 function Content({
 	children,

package/src/hooks/index.ts

@@ -5,3 +5,5 @@ export * from './useToggle.js';
 export * from './useVisualViewportOffset.js';
 export * from './useOnUnmount.js';
 export * from './withClassName.js';
+export * from './useAnimationFrame.js';
+export * from './useLongPress.js';

package/src/hooks/useAnimationFrame.ts

@@ -0,0 +1,23 @@
+import { useStableCallback } from './useStableCallback.js';
+import { useEffect, useRef } from 'react';
+
+export function useAnimationFrame<Context>(
+	callback: (deltaTime: number, context: Context) => void,
+	initialContext?: Context,
+) {
+	const requestRef = useRef<number>();
+	const previousTimeRef = useRef<number>();
+	const contextRef = useRef<Context>(initialContext!);
+	const animate = useStableCallback((time: number) => {
+		if (previousTimeRef.current !== undefined) {
+			const deltaTime = time - previousTimeRef.current;
+			callback(deltaTime, contextRef.current);
+		}
+		previousTimeRef.current = time;
+		requestRef.current = requestAnimationFrame(animate);
+	});
+	useEffect(() => {
+		requestRef.current = requestAnimationFrame(animate);
+		return () => cancelAnimationFrame(requestRef.current!);
+	}, [animate]);
+}