@a-type/ui 1.3.0 → 1.3.2

package/src/components/divider/Divider.tsx

@@ -1,26 +1,32 @@
-import { HTMLAttributes, forwardRef } from 'react';
-import { withClassName } from '../../hooks/withClassName.js';
-import classNames from 'clsx';
-
-const DividerBase = withClassName('div', 'w-full h-1px bg-black relative');
-
-export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
-	compensate?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-	padded?: boolean;
-}
-
-export const Divider = forwardRef<HTMLDivElement, DividerProps>(
-	function Divider({ compensate, padded, className, ...props }, ref) {
-		return (
-			<DividerBase
-				ref={ref}
-				style={{
-					left: compensate ? `calc(${compensate} * 0.25rem)` : undefined,
-					width: compensate ? `calc(100% - ${compensate} * 0.5rem)` : undefined,
-				}}
-				{...props}
-				className={classNames(padded && 'my-4', className)}
-			/>
-		);
-	},
-);
+import classNames from 'clsx';
+import { HTMLAttributes } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+
+const DividerBase = withClassName('div', 'w-full h-1px bg-black relative');
+
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+	compensate?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+	padded?: boolean;
+}
+
+export const Divider = function Divider({
+	ref,
+	compensate,
+	padded,
+	className,
+	...props
+}: DividerProps & {
+	ref?: React.Ref<HTMLDivElement>;
+}) {
+	return (
+		<DividerBase
+			ref={ref}
+			style={{
+				left: compensate ? `calc(${compensate} * 0.25rem)` : undefined,
+				width: compensate ? `calc(100% - ${compensate} * 0.5rem)` : undefined,
+			}}
+			{...props}
+			className={classNames(padded && 'my-4', className)}
+		/>
+	);
+};

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -1,123 +1,126 @@
-'use client';
-
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import classNames, { clsx } from 'clsx';
-import { forwardRef } from 'react';
-import { withClassName } from '../../hooks/withClassName.js';
-
-const StyledContent = withClassName(
-	DropdownMenuPrimitive.Content,
-	'min-w-220px bg-white z-menu shadow-lg rounded-xl border-default',
-	'layer-components:transform-origin-[var(--radix-dropdown-menu-transform-origin)]',
-	'layer-components:[&[data-state=open]]:animate-popover-in',
-	'layer-components:[&[data-state=closed]]:animate-popover-out',
-	'layer-components:(max-h-[var(--radix-dropdown-menu-content-available-height)])',
-	'important:motion-reduce:animate-none',
-	'will-change-transform',
-);
-const itemClassName = classNames(
-	'layer-components:(text-md leading-4 color-black rounded-sm flex items-center pr-4 pl-8 py-3 relative text-left select-none cursor-pointer)',
-	'layer-components:[&[data-disabled]]:(color-gray9 pointer-events-none)',
-	'layer-components:focus-visible:(bg-gray2 color-gray9)',
-	'layer-components:focus:outline-none',
-);
-const StyledItemBase = withClassName(DropdownMenuPrimitive.Item, itemClassName);
-export interface DropdownMenuItemProps
-	extends DropdownMenuPrimitive.DropdownMenuItemProps {
-	color?: 'default' | 'destructive';
-}
-const StyledItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
-	({ className, color, ...props }, forwardedRef) => {
-		return (
-			<StyledItemBase
-				{...props}
-				className={clsx(
-					color === 'destructive' &&
-						'layer-variants:(text-attention-dark hover:bg-attention-wash focus-visible:bg-attention-wash)',
-					className,
-				)}
-				ref={forwardedRef}
-			/>
-		);
-	},
-);
-const StyledCheckboxItem = withClassName(
-	DropdownMenuPrimitive.CheckboxItem,
-	itemClassName,
-);
-const StyledRadioItem = withClassName(
-	DropdownMenuPrimitive.RadioItem,
-	itemClassName,
-);
-
-const StyledLabel = withClassName(
-	DropdownMenuPrimitive.Label,
-	'pl-25px text-md leading-6 color-gray-9',
-);
-
-const StyledSeparator = withClassName(
-	DropdownMenuPrimitive.Separator,
-	'h-1px bg-gray5 m-5px',
-);
-
-const StyledItemIndicator = withClassName(
-	DropdownMenuPrimitive.ItemIndicator,
-	'absolute left-0 w-25px inline-flex items-center justify-center',
-);
-
-const StyledArrow = withClassName(
-	DropdownMenuPrimitive.Arrow,
-	'fill-white stroke-black stroke-1',
-);
-
-const StyledTrigger = withClassName(
-	DropdownMenuPrimitive.Trigger,
-	'select-none',
-);
-
-const StyledPortal = DropdownMenuPrimitive.Portal;
-
-// Exports
-export const DropdownMenuRoot = DropdownMenuPrimitive.Root;
-export const DropdownMenuTrigger = StyledTrigger;
-export const DropdownMenuItem = StyledItem;
-export const DropdownMenuCheckboxItem = StyledCheckboxItem;
-export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-export const DropdownMenuRadioItem = StyledRadioItem;
-export const DropdownMenuItemIndicator = StyledItemIndicator;
-export const DropdownMenuLabel = StyledLabel;
-export const DropdownMenuSeparator = StyledSeparator;
-export const DropdownMenuArrow = StyledArrow;
-
-export const DropdownMenuContent = ({
-	children,
-	forceMount,
-	...props
-}: DropdownMenuPrimitive.DropdownMenuContentProps & {
-	forceMount?: boolean;
-}) => {
-	return (
-		<StyledPortal forceMount={forceMount}>
-			<StyledContent {...props}>
-				<div className="overflow-hidden rounded-xl">{children}</div>
-				<StyledArrow />
-			</StyledContent>
-		</StyledPortal>
-	);
-};
-
-export const DropdownMenuItemRightSlot = withClassName('div', 'ml-auto');
-
-export const DropdownMenu = Object.assign(DropdownMenuRoot, {
-	Content: DropdownMenuContent,
-	Trigger: StyledTrigger,
-	Item: StyledItem,
-	CheckboxItem: StyledCheckboxItem,
-	RadioGroup: DropdownMenuPrimitive.RadioGroup,
-	RadioItem: StyledRadioItem,
-	ItemIndicator: StyledItemIndicator,
-	Label: StyledLabel,
-	Separator: StyledSeparator,
-	Arrow: StyledArrow,
-	ItemRightSlot: DropdownMenuItemRightSlot,
-});
+'use client';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import classNames, { clsx } from 'clsx';
+import { withClassName } from '../../hooks/withClassName.js';
+
+const StyledContent = withClassName(
+	DropdownMenuPrimitive.Content,
+	'min-w-220px bg-white z-menu shadow-lg rounded-xl border-default',
+	'layer-components:transform-origin-[var(--radix-dropdown-menu-transform-origin)]',
+	'layer-components:[&[data-state=open]]:animate-popover-in',
+	'layer-components:[&[data-state=closed]]:animate-popover-out',
+	'layer-components:(max-h-[var(--radix-dropdown-menu-content-available-height)])',
+	'important:motion-reduce:animate-none',
+	'will-change-transform',
+);
+const itemClassName = classNames(
+	'layer-components:(text-md leading-4 color-black rounded-sm flex items-center pr-4 pl-8 py-3 relative text-left select-none cursor-pointer)',
+	'layer-components:[&[data-disabled]]:(color-gray9 pointer-events-none)',
+	'layer-components:focus-visible:(bg-gray2 color-gray9)',
+	'layer-components:focus:outline-none',
+);
+const StyledItemBase = withClassName(DropdownMenuPrimitive.Item, itemClassName);
+export interface DropdownMenuItemProps
+	extends DropdownMenuPrimitive.DropdownMenuItemProps {
+	color?: 'default' | 'destructive';
+}
+const StyledItem = ({
+	ref: forwardedRef,
+	className,
+	color,
+	...props
+}: DropdownMenuItemProps & {
+	ref?: React.Ref<HTMLDivElement>;
+}) => {
+	return (
+		<StyledItemBase
+			{...props}
+			className={clsx(
+				color === 'destructive' &&
+					'layer-variants:(text-attention-dark hover:bg-attention-wash focus-visible:bg-attention-wash)',
+				className,
+			)}
+			ref={forwardedRef}
+		/>
+	);
+};
+const StyledCheckboxItem = withClassName(
+	DropdownMenuPrimitive.CheckboxItem,
+	itemClassName,
+);
+const StyledRadioItem = withClassName(
+	DropdownMenuPrimitive.RadioItem,
+	itemClassName,
+);
+
+const StyledLabel = withClassName(
+	DropdownMenuPrimitive.Label,
+	'pl-25px text-md leading-6 color-gray-9',
+);
+
+const StyledSeparator = withClassName(
+	DropdownMenuPrimitive.Separator,
+	'h-1px bg-gray5 m-5px',
+);
+
+const StyledItemIndicator = withClassName(
+	DropdownMenuPrimitive.ItemIndicator,
+	'absolute left-0 w-25px inline-flex items-center justify-center',
+);
+
+const StyledArrow = withClassName(
+	DropdownMenuPrimitive.Arrow,
+	'fill-white stroke-black stroke-1',
+);
+
+const StyledTrigger = withClassName(
+	DropdownMenuPrimitive.Trigger,
+	'select-none',
+);
+
+const StyledPortal = DropdownMenuPrimitive.Portal;
+
+// Exports
+export const DropdownMenuRoot = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = StyledTrigger;
+export const DropdownMenuItem = StyledItem;
+export const DropdownMenuCheckboxItem = StyledCheckboxItem;
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+export const DropdownMenuRadioItem = StyledRadioItem;
+export const DropdownMenuItemIndicator = StyledItemIndicator;
+export const DropdownMenuLabel = StyledLabel;
+export const DropdownMenuSeparator = StyledSeparator;
+export const DropdownMenuArrow = StyledArrow;
+
+export const DropdownMenuContent = ({
+	children,
+	forceMount,
+	...props
+}: DropdownMenuPrimitive.DropdownMenuContentProps & {
+	forceMount?: boolean;
+}) => {
+	return (
+		<StyledPortal forceMount={forceMount}>
+			<StyledContent {...props}>
+				<div className="overflow-hidden rounded-xl">{children}</div>
+				<StyledArrow />
+			</StyledContent>
+		</StyledPortal>
+	);
+};
+
+export const DropdownMenuItemRightSlot = withClassName('div', 'ml-auto');
+
+export const DropdownMenu = Object.assign(DropdownMenuRoot, {
+	Content: DropdownMenuContent,
+	Trigger: StyledTrigger,
+	Item: StyledItem,
+	CheckboxItem: StyledCheckboxItem,
+	RadioGroup: DropdownMenuPrimitive.RadioGroup,
+	RadioItem: StyledRadioItem,
+	ItemIndicator: StyledItemIndicator,
+	Label: StyledLabel,
+	Separator: StyledSeparator,
+	Arrow: StyledArrow,
+	ItemRightSlot: DropdownMenuItemRightSlot,
+});

package/src/components/forms/TextField.tsx

@@ -1,140 +1,137 @@
-'use client';
-
-import { useField, useFormikContext } from 'formik';
-import {
-	ComponentProps,
-	InputHTMLAttributes,
-	useEffect,
-	useRef,
-	Ref,
-	forwardRef,
-	KeyboardEvent,
-	useCallback,
-} from 'react';
-import useMergedRef from '../../hooks/useMergedRef.js';
-import { Input } from '../input/Input.js';
-import { TextArea, TextAreaProps } from '../textArea/TextArea.js';
-import { withClassName } from '../../hooks.js';
-import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.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>;
-} & ComponentProps<typeof Input>;
-
-const emptyRef = (() => {}) as any;
-
-export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
-	function TextField(
-		{
-			name,
-			label,
-			className,
-			autoFocusDelay,
-			autoFocus,
-			inputRef,
-			onChange,
-			onFocus,
-			onBlur,
-			id: providedId,
-			...rest
-		},
-		ref,
-	) {
-		const [props] = useField({
-			name,
-			onChange,
-			onFocus,
-			onBlur,
-		});
-		const innerInputRef = useRef<HTMLInputElement>(null);
-		const id = useIdOrGenerated(providedId);
-
-		useEffect(() => {
-			if (autoFocusDelay) {
-				setTimeout(() => {
-					if (innerInputRef.current) innerInputRef.current.focus();
-				}, autoFocusDelay);
-			}
-		}, [autoFocusDelay]);
-
-		return (
-			<FieldRoot className={className} ref={ref}>
-				{label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
-				<Input
-					{...props}
-					{...rest}
-					id={id}
-					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>;
-	submitOnEnter?: boolean;
-} & TextAreaProps;
-
-export function TextAreaField({
-	name,
-	label,
-	className,
-	inputRef,
-	onKeyDown,
-	submitOnEnter,
-	id: providedId,
-	...rest
-}: TextAreaFieldProps) {
-	const [props] = useField(name);
-	const { submitForm } = useFormikContext();
-	const onKeyDownInner = useCallback(
-		(e: KeyboardEvent<HTMLTextAreaElement>) => {
-			if (submitOnEnter && e.key === 'Enter' && !e.shiftKey) {
-				e.preventDefault();
-				submitForm();
-			}
-			onKeyDown?.(e);
-		},
-		[submitOnEnter, onKeyDown, submitForm],
-	);
-	const id = useIdOrGenerated(providedId);
-
-	return (
-		<FieldRoot className={className}>
-			{label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
-			<TextArea
-				ref={inputRef}
-				{...props}
-				{...rest}
-				id={id}
-				onKeyDown={onKeyDownInner}
-			/>
-		</FieldRoot>
-	);
-}
-
-export const FieldRoot = withClassName(
-	'div',
-	'flex flex-col items-stretch gap-1 self-stretch',
-);
-export const FieldLabel = withClassName(
-	'label',
-	'inline-flex flex-col gap-1 text-sm font-bold text-dark-blend mb-1',
-);
+'use client';
+
+import { useField, useFormikContext } from 'formik';
+import {
+	ComponentProps,
+	InputHTMLAttributes,
+	KeyboardEvent,
+	Ref,
+	useCallback,
+	useEffect,
+	useRef,
+} from 'react';
+import { withClassName } from '../../hooks.js';
+import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { Input } from '../input/Input.js';
+import { TextArea, TextAreaProps } from '../textArea/TextArea.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>;
+} & ComponentProps<typeof Input>;
+
+const emptyRef = (() => {}) as any;
+
+export const TextField = function TextField({
+	ref,
+	name,
+	label,
+	className,
+	autoFocusDelay,
+	autoFocus,
+	inputRef,
+	onChange,
+	onFocus,
+	onBlur,
+	id: providedId,
+	...rest
+}: TextFieldProps & {
+	ref?: React.Ref<HTMLDivElement>;
+}) {
+	const [props] = useField({
+		name,
+		onChange,
+		onFocus,
+		onBlur,
+	});
+	const innerInputRef = useRef<HTMLInputElement>(null);
+	const id = useIdOrGenerated(providedId);
+
+	useEffect(() => {
+		if (autoFocusDelay) {
+			setTimeout(() => {
+				if (innerInputRef.current) innerInputRef.current.focus();
+			}, autoFocusDelay);
+		}
+	}, [autoFocusDelay]);
+
+	return (
+		<FieldRoot className={className} ref={ref}>
+			{label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
+			<Input
+				{...props}
+				{...rest}
+				id={id}
+				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>;
+	submitOnEnter?: boolean;
+} & TextAreaProps;
+
+export function TextAreaField({
+	name,
+	label,
+	className,
+	inputRef,
+	onKeyDown,
+	submitOnEnter,
+	id: providedId,
+	...rest
+}: TextAreaFieldProps) {
+	const [props] = useField(name);
+	const { submitForm } = useFormikContext();
+	const onKeyDownInner = useCallback(
+		(e: KeyboardEvent<HTMLTextAreaElement>) => {
+			if (submitOnEnter && e.key === 'Enter' && !e.shiftKey) {
+				e.preventDefault();
+				submitForm();
+			}
+			onKeyDown?.(e);
+		},
+		[submitOnEnter, onKeyDown, submitForm],
+	);
+	const id = useIdOrGenerated(providedId);
+
+	return (
+		<FieldRoot className={className}>
+			{label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
+			<TextArea
+				ref={inputRef}
+				{...props}
+				{...rest}
+				id={id}
+				onKeyDown={onKeyDownInner}
+			/>
+		</FieldRoot>
+	);
+}
+
+export const FieldRoot = withClassName(
+	'div',
+	'flex flex-col items-stretch gap-1 self-stretch',
+);
+export const FieldLabel = withClassName(
+	'label',
+	'inline-flex flex-col gap-1 text-sm font-bold text-dark-blend mb-1',
+);

package/src/components/icon/Icon.tsx

@@ -1,28 +1,33 @@
-import { forwardRef, HTMLAttributes } from 'react';
-import classNames from 'clsx';
-import { IconName } from './generated/iconNames.js';
-
-export interface IconProps extends HTMLAttributes<SVGSVGElement> {
-	name: IconName;
-	size?: number;
-}
-
-export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
-	{ name, size = 15, className, ...rest },
-	ref,
-) {
-	return (
-		<svg
-			ref={ref}
-			className={classNames(
-				'flex-shrink-0 layer-components:fill-none',
-				className,
-			)}
-			width={size}
-			height={size}
-			{...rest}
-		>
-			<use xlinkHref={`#icon-${name}`} />
-		</svg>
-	);
-});
+import classNames from 'clsx';
+import { HTMLAttributes } from 'react';
+import { IconName } from './generated/iconNames.js';
+
+export interface IconProps extends HTMLAttributes<SVGSVGElement> {
+	name: IconName;
+	size?: number;
+}
+
+export const Icon = function Icon({
+	ref,
+	name,
+	size = 15,
+	className,
+	...rest
+}: IconProps & {
+	ref?: React.Ref<SVGSVGElement>;
+}) {
+	return (
+		<svg
+			ref={ref}
+			className={classNames(
+				'flex-shrink-0 layer-components:fill-none',
+				className,
+			)}
+			width={size}
+			height={size}
+			{...rest}
+		>
+			<use xlinkHref={`#icon-${name}`} />
+		</svg>
+	);
+};