utils.tsx•965 B
import { type ClassValue, clsx } from "clsx";
import { ForwardRefRenderFunction, PropsWithoutRef, forwardRef } from "react";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
// forward refs
export function fr<T = HTMLElement, P = React.HTMLAttributes<T>>(
component: ForwardRefRenderFunction<T, PropsWithoutRef<P>>,
) {
const wrapped = forwardRef(component);
wrapped.displayName = component.name;
return wrapped;
}
// styled element
export function se<
T = HTMLElement,
P extends React.HTMLAttributes<T> = React.HTMLAttributes<T>,
>(Tag: keyof React.ReactHTML, ...classNames: ClassValue[]) {
const component = fr<T, P>(({ className, ...props }, ref) => (
// @ts-expect-error Too complicated for TypeScript
<Tag ref={ref} className={cn(...classNames, className)} {...props} />
));
component.displayName = Tag[0].toUpperCase() + Tag.slice(1);
return component;
}