refactor: a little micro-optimization

Author: Jackardios

src/index.ts

@@ -485,8 +485,12 @@ export function defineConfig(options?: VariantFactoryOptions) {
     C extends VariantsConfig<V>,
     V extends VariantsSchema = NonNullable<C['variants']>
   >(config: Exact<Simplify<C>, VariantsConfig<V>>): VariantsResolverFn<C, V> {
-    const { base, variants: configVariants, compoundVariants, defaultVariants } =
-      config;
+    const {
+      base,
+      variants: configVariants,
+      compoundVariants,
+      defaultVariants,
+    } = config;
 
     if (!configVariants) {
       return (props?: { className?: ClassNameValue }) =>
@@ -522,7 +526,7 @@ export function defineConfig(options?: VariantFactoryOptions) {
 
       for (const cv of compoundVariants ?? []) {
         const cvVariants = cv.variants;
-        const matches = Object.keys(cvVariants).every((name) => {
+        const matches = Object.keys(cvVariants).every(name => {
           const selected = getSelectedVariant(name);
           const cvSelector = cvVariants[name];
           return Array.isArray(cvSelector)
@@ -667,8 +671,9 @@ export function defineConfig(options?: VariantFactoryOptions) {
       const component = ((props: BaseProps) => {
         return createElement(elementType, resolveProps(props as any));
       }) as VariantComponentType<T, C, V>;
-      (component as { displayName?: string }).displayName =
-        `Variant(${getDisplayName()})`;
+      (
+        component as { displayName?: string }
+      ).displayName = `Variant(${getDisplayName()})`;
       return component;
     }
 
@@ -694,8 +699,9 @@ export function defineConfig(options?: VariantFactoryOptions) {
       return createElement(elementType, { ...resolvedProps, ref: mergedRef });
     }) as VariantComponentType<T, C, V>;
 
-    (component as { displayName?: string }).displayName =
-      `Variant(${getDisplayName()})`;
+    (
+      component as { displayName?: string }
+    ).displayName = `Variant(${getDisplayName()})`;
 
     return component;
   }

src/utils.ts

@@ -110,6 +110,10 @@ export function mergeProps<T extends HTMLAttributes<any>>(
   base: T,
   overrides: T
 ): T {
+  if (!overrides || Object.keys(overrides).length === 0) {
+    return base;
+  }
+
   const props = { ...base };
 
   for (const key in overrides) {
@@ -156,22 +160,44 @@ export function mergeProps<T extends HTMLAttributes<any>>(
   return props;
 }
 
+/**
+ * Creates a merged ref callback from multiple refs.
+ * Use this in event handlers or conditional branches where hooks cannot be used.
+ *
+ * @param refs - Array of refs to merge
+ * @returns A callback ref that sets all provided refs, or undefined if no valid refs
+ *
+ * @example
+ * const merged = mergeRefs(ref1, ref2);
+ * // Use in cloneElement or other non-hook contexts
+ */
+export function mergeRefs<T = any>(
+  ...refs: Array<Ref<T> | undefined | null>
+): Ref<T> | undefined {
+  const validRefs = refs.filter((ref): ref is Ref<T> => Boolean(ref));
+
+  if (validRefs.length === 0) return;
+  if (validRefs.length === 1) return validRefs[0];
+
+  return (value: T | null) => {
+    for (const ref of validRefs) {
+      setRef(ref, value);
+    }
+  };
+}
+
 /**
  * Merges React Refs into a single memoized function ref so you can pass it to
- * an element.
+ * an element. This is a hook version that memoizes the merged ref.
+ *
  * @example
  * const Component = forwardRef((props, ref) => {
  *   const internalRef = useRef();
  *   return <div {...props} ref={useMergeRefs(internalRef, ref)} />;
  * });
  */
-export function useMergeRefs(...refs: Array<Ref<any> | undefined>) {
-  return useMemo(() => {
-    if (!refs.some(Boolean)) return;
-    return (value: unknown) => {
-      for (const ref of refs) {
-        setRef(ref, value);
-      }
-    };
-  }, refs);
+export function useMergeRefs<T = any>(
+  ...refs: Array<Ref<T> | undefined | null>
+): Ref<T> | undefined {
+  return useMemo(() => mergeRefs(...refs), refs);
 }