@a-type/ui 1.2.2 → 1.3.0

package/src/components/input/Input.tsx

@@ -1,10 +1,16 @@
-import classNames from 'clsx';
-import { ComponentProps, FocusEvent, forwardRef, useCallback } from 'react';
 import { Slot } from '@radix-ui/react-slot';
+import classNames from 'clsx';
+import {
+	ChangeEvent,
+	ComponentProps,
+	FocusEvent,
+	forwardRef,
+	useCallback,
+} from 'react';
 import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
 
 export const inputClassName = classNames(
-	'layer-components:(px-5 py-[5px] text-md font-sans rounded-full bg-white select-auto min-w-60px color-black border-solid border-1 border-gray-7 shadow-sm-inset)',
+	'layer-components:(px-5 py-[5px] text-md font-sans rounded-20px bg-white select-auto min-w-60px color-black border-solid border-1 border-gray-5 shadow-sm-inset)',
 	'layer-components:focus:(outline-none bg-gray-1 ring-4	ring-white)',
 	'layer-components:focus-visible:(outline-none ring-gray-dark-blend)',
 	'layer-components:md:(min-w-120px)',
@@ -18,6 +24,7 @@ export interface InputProps extends ComponentProps<'input'> {
 	/** Shuffle between random placeholders */
 	placeholders?: string[];
 	placeholdersIntervalMs?: number;
+	onValueChange?: (value: string) => void;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
@@ -25,6 +32,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
 		className,
 		autoSelect,
 		onFocus,
+		onChange,
+		onValueChange,
 		variant: _,
 		asChild,
 		placeholders,
@@ -44,6 +53,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
 		[onFocus, autoSelect],
 	);
 
+	const handleChange = useCallback(
+		(ev: ChangeEvent<HTMLInputElement>) => {
+			onValueChange?.(ev.target.value);
+			onChange?.(ev);
+		},
+		[onChange, onValueChange],
+	);
+
 	const randomPlaceholder = useRotatingShuffledValue(
 		placeholders ?? [],
 		placeholdersIntervalMs,
@@ -55,6 +72,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
 		<Component
 			{...props}
 			onFocus={handleFocus}
+			onChange={handleChange}
 			className={classNames(inputClassName, className)}
 			ref={ref}
 			placeholder={placeholder ?? randomPlaceholder}

package/src/components/numberStepper/NumberStepper.tsx

@@ -67,7 +67,7 @@ export function NumberStepper({
 	return (
 		<div
 			className={classNames(
-				'layer-components:(flex items-center border-default rounded-full overflow-hidden w-min-content flex-shrink-0 bg-white shadow-sm)',
+				'layer-components:(flex items-center border-solid border-1 border-gray-5 rounded-full overflow-hidden w-min-content flex-shrink-0 bg-white shadow-sm)',
 				disabled &&
 					'layer-variants:(border-gray-dark-blend bg-transparent shadow-none)',
 				{

package/src/components/richEditor/RichEditor.stories.tsx

@@ -14,4 +14,8 @@ export default meta;
 
 type Story = StoryObj<typeof RichEditor>;
 
-export const Default: Story = {};
+export const Default: Story = {
+	render(args) {
+		return <RichEditor {...args} className="h-80vh" />;
+	},
+};

package/src/components/richEditor/RichEditor.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import classNames from 'clsx';
-import { forwardRef, lazy } from 'react';
+import { lazy } from 'react';
 
 const EditorContent = lazy(() => import('./EditorContent.js'));
 
@@ -11,16 +11,9 @@ export interface RichEditorProps {
 	readOnly?: boolean;
 }
 
-export const RichEditor = forwardRef<any, RichEditorProps>(function RichEditor(
-	{ className, ...rest },
-	ref,
-) {
-	if (typeof ref === 'string') {
-		throw new Error('String ref not supported!');
-	}
+export function RichEditor({ className, ...rest }: RichEditorProps) {
 	return (
 		<EditorContent
-			ref={ref as any}
 			className={classNames(
 				'layer-components:(w-full rounded-lg)',
 				!rest.readOnly &&
@@ -35,4 +28,4 @@ export const RichEditor = forwardRef<any, RichEditorProps>(function RichEditor(
 			{...rest}
 		/>
 	);
-});
+}

package/src/components/select/Select.tsx

@@ -257,27 +257,27 @@ const IsNativeContext = createContext(false);
 function withNoNativeRender<T extends ComponentType<any> | ElementType<any>>(
 	Component: T,
 ): FunctionComponent<ComponentPropsWithRef<T>> {
-	const WithNoNativeRender = forwardRef<any, any>((props, ref) => {
+	const WithNoNativeRender = (props: any) => {
 		const isNative = useContext(IsNativeContext);
 
 		if (isNative) return null;
 
-		return <Component ref={ref} {...props} />;
-	});
+		return <Component {...props} />;
+	};
 	return WithNoNativeRender as any;
 }
 
 function withPassthroughNativeRender<
 	T extends ComponentType<any> | ElementType<any>,
 >(Component: T): FunctionComponent<ComponentPropsWithRef<T>> {
-	const WithPassthroughNativeRender = forwardRef<any, any>((props, ref) => {
+	const WithPassthroughNativeRender = (props: any) => {
 		const isNative = useContext(IsNativeContext);
 
 		if (isNative) {
 			return <>{props.children}</>;
 		}
 
-		return <Component ref={ref} {...props} />;
-	});
+		return <Component {...props} />;
+	};
 	return WithPassthroughNativeRender as any;
 }

package/src/components/slider/Slider.tsx

@@ -1,6 +1,6 @@
+import * as SliderPrimitive from '@radix-ui/react-slider';
 import { forwardRef } from 'react';
 import { withClassName } from '../../hooks.js';
-import * as SliderPrimitive from '@radix-ui/react-slider';
 
 export const SliderRoot = withClassName(
 	SliderPrimitive.Root,
@@ -19,12 +19,12 @@ 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 ring-opacity-50 bg-accent-light)',
-	'layer-components:focus-visible:(shadow-lg ring-4 ring-accent ring-opacity-50 outline-none bg-accent-light)',
+	'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)',
-	'layer-variants:[&[data-color=primary]]:focus-visible:(bg-primary-light ring-primary)',
+	'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 {

package/src/components/textArea/TextArea.tsx

@@ -23,6 +23,7 @@ export interface TextAreaProps
 	padBottomPixels?: number;
 	placeholders?: string[];
 	placeholdersIntervalMs?: number;
+	onValueChange?: (value: string) => void;
 }
 
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
@@ -38,6 +39,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 			placeholder,
 			placeholders,
 			placeholdersIntervalMs = 5000,
+			onValueChange,
 			...rest
 		},
 		ref,
@@ -67,8 +69,11 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 				if (onChange) {
 					onChange(e);
 				}
+				if (onValueChange) {
+					onValueChange(e.target.value);
+				}
 			},
-			[onChange],
+			[onChange, onValueChange],
 		);
 
 		const handleFocus = useCallback(
@@ -94,7 +99,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 				className={classNames(
 					inputClassName,
 					'layer-components:([font-family:inherit] text-inherit overflow-hidden resize-none)',
-					'layer-variants:(rounded-20px)',
+					'layer-variants:(rounded-20px px-4 py-4)',
 					{
 						'layer-components:[resize:vertical]': !autoSize,
 						'layer-components:[resize:none]': autoSize,

package/src/hooks/useAnimationFrame.ts

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

package/src/hooks/withClassName.tsx

@@ -4,18 +4,15 @@ import {
 	ComponentType,
 	ElementType,
 	FunctionComponent,
-	forwardRef,
 } from 'react';
 
 export function withClassName<T extends ComponentType<any> | ElementType<any>>(
 	Component: T,
 	...cs: Parameters<typeof classNames>
 ): FunctionComponent<ComponentPropsWithRef<T>> {
-	const WithClassName = forwardRef<any, any>((props, ref) => {
+	const WithClassName = (props: any) => {
 		const { className, ...rest } = props;
-		return (
-			<Component ref={ref} {...rest} className={classNames(cs, className)} />
-		);
-	});
+		return <Component {...rest} className={classNames(cs, className)} />;
+	};
 	return WithClassName as any;
 }