🐛

.changeset/mean-taxis-tie.md

@@ -3,5 +3,4 @@
 ---
 
 - add support for custom tailwind prefix
-- add `extend` and `create` to `lib/utils.tsx`
 - minify build

apps/www/src/lib/utils.tsx

@@ -4,6 +4,7 @@ import {
   forwardRef,
   ForwardRefExoticComponent,
 } from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
@@ -13,7 +14,7 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
-export function extend<T extends { className?: string }>(
+export function withProps<T extends { className?: string }>(
   Component: ForwardRefExoticComponent<T>,
   defaultProps: T
 ) {
@@ -31,6 +32,36 @@ export function extend<T extends { className?: string }>(
   );
 }
 
+export function withVariants<
+  T extends { className?: string },
+  V extends ReturnType<typeof cva>,
+>(
+  Component: ForwardRefExoticComponent<T>,
+  variants: V,
+  onlyVariantsProps?: (keyof VariantProps<V>)[]
+) {
+  return forwardRef<ElementRef<typeof Component>, T & VariantProps<V>>(
+    function ExtendComponent(props, ref) {
+      const variantProps = {} as VariantProps<V>;
+
+      if (onlyVariantsProps) {
+        Object.keys(onlyVariantsProps).forEach((key) => {
+          variantProps[key] = props[key];
+          delete props[key];
+        });
+      }
+
+      return (
+        <Component
+          ref={ref}
+          {...props}
+          className={cn(variants(variantProps), props.className)}
+        />
+      );
+    }
+  );
+}
+
 export function create<T extends keyof HTMLElementTagNameMap>(tag: T) {
   return forwardRef<HTMLElementTagNameMap[T], JSX.IntrinsicElements[T]>(
     function CreateComponent(props, ref) {

packages/cli/src/commands/init.ts

@@ -268,7 +268,7 @@ export async function runInit(cwd: string, config: Config) {
 
   // Write utils file.
   await fs.writeFile(
-    `${config.resolvedPaths.utils}.tsx`,
+    `${config.resolvedPaths.utils}.ts`,
     templates.UTILS,
     'utf8'
   );

packages/cli/src/utils/templates.ts

@@ -1,41 +1,9 @@
-export const UTILS = `import {
-  createElement,
-  ElementRef,
-  forwardRef,
-  ForwardRefExoticComponent,
-} from 'react';
-import { type ClassValue, clsx } from 'clsx'
+export const UTILS = `import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
-
-export function extend<T extends { className?: string }>(
-  Component: ForwardRefExoticComponent<T>,
-  defaultProps: T
-) {
-  return forwardRef<ElementRef<typeof Component>, T>(
-    function ExtendComponent(props, ref) {
-      return (
-        <Component
-          ref={ref}
-          {...defaultProps}
-          {...props}
-          className={cn(defaultProps.className, props.className)}
-        />
-      );
-    }
-  );
-}
-
-export function create<T extends keyof HTMLElementTagNameMap>(tag: T) {
-  return forwardRef<HTMLElementTagNameMap[T], JSX.IntrinsicElements[T]>(
-    function CreateComponent(props, ref) {
-      return createElement(tag, { ...props, ref });
-    }
-  );
-}
 `;
 
 export const TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */

packages/cli/test/commands/init.test.ts

@@ -68,7 +68,7 @@ test('init config-full', async () => {
   );
   expect(mockWriteFile).toHaveBeenNthCalledWith(
     3,
-    expect.stringMatching(/src\/lib\/utils.tsx$/),
+    expect.stringMatching(/src\/lib\/utils.ts$/),
     expect.stringContaining(`import { type ClassValue, clsx } from 'clsx'`),
     'utf8'
   );
@@ -138,7 +138,7 @@ test('init config-partial', async () => {
   );
   expect(mockWriteFile).toHaveBeenNthCalledWith(
     3,
-    expect.stringMatching(/utils.tsx$/),
+    expect.stringMatching(/utils.ts$/),
     expect.stringContaining(`import { type ClassValue, clsx } from 'clsx'`),
     'utf8'
   );