clava 0.4.2 → 0.6.0

package/tests/refine.test.ts

@@ -71,7 +71,7 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("refine re-runs when setDefaultVariants changes variants", () => {
+    test("refine re-runs when computed defaultVariants change variants", () => {
       const component = getModeComponent(
         mode,
         cv({
@@ -79,11 +79,12 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          refine: ({ variants, setDefaultVariants, addClass }) => {
-            setDefaultVariants({ color: "red" });
-            if (variants.color === "red") {
-              setDefaultVariants({ size: "lg" });
-            }
+          defaultVariants: {
+            color: () => "red" as const,
+            size: (defaultValue, variants) =>
+              variants.color === "red" ? "lg" : defaultValue,
+          },
+          refine: ({ variants, addClass }) => {
             if (variants.size === "lg") {
               addClass("refine-lg");
             }
@@ -96,16 +97,18 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("refine converges with NaN setDefaultVariants", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    test("refine converges with NaN computed defaultVariants", () => {
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const component = getModeComponent(
         mode,
         cv({
           variants: {
             value: (value: number) => (Number.isNaN(value) ? "nan" : null),
           },
-          refine: ({ variants, setDefaultVariants, addClass }) => {
-            setDefaultVariants({ value: Number.NaN });
+          defaultVariants: {
+            value: () => Number.NaN,
+          },
+          refine: ({ variants, addClass }) => {
             if (Number.isNaN(variants.value)) {
               addClass("refine-nan");
             }
@@ -113,20 +116,16 @@ for (const config of Object.values(CONFIGS)) {
         }),
       );
 
-      try {
-        const props = component();
-        expect(getStyleClass(props)).toEqual({
-          class: cls("nan refine-nan"),
-        });
-        expect(component.getVariants()).toEqual({ value: Number.NaN });
-        expect(warn).not.toHaveBeenCalled();
-      } finally {
-        warn.mockRestore();
-      }
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: cls("nan refine-nan"),
+      });
+      expect(component.getVariants()).toEqual({ value: Number.NaN });
+      expect(warn).not.toHaveBeenCalled();
     });
 
-    test("refine converges with undefined setDefaultVariants", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    test("computed defaultVariants can clear inherited defaults", () => {
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const base = cv({
         variants: {
           invert: { true: "invert" },
@@ -135,32 +134,25 @@ for (const config of Object.values(CONFIGS)) {
           push: (value: number | undefined) =>
             value === undefined ? undefined : `push-${value}`,
         },
-        refine: ({ variants, setDefaultVariants }) => {
-          setDefaultVariants({
-            offset: !variants.invert,
-            push: variants.invert ? 20 : undefined,
-          });
+        defaultVariants: {
+          offset: (_, variants) => !variants.invert,
+          push: (_, variants) => (variants.invert ? 20 : undefined),
         },
       });
       const component = getModeComponent(mode, cv({ extend: [base] }));
 
-      try {
-        const props = component();
-        expect(getStyleClass(props)).toEqual({
-          class: cls("offset"),
-        });
-        expect(component.getVariants()).toEqual({
-          offset: true,
-          push: undefined,
-        });
-        expect(warn).not.toHaveBeenCalled();
-      } finally {
-        warn.mockRestore();
-      }
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: cls("offset"),
+      });
+      expect(component.getVariants()).toEqual({
+        offset: true,
+      });
+      expect(warn).not.toHaveBeenCalled();
     });
 
-    test("refine converges with undefined setDefaultVariants in nested extends", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    test("computed defaultVariants use inherited defaults as defaultValue", () => {
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const calls = {
         layer: 0,
         frame: 0,
@@ -177,13 +169,11 @@ for (const config of Object.values(CONFIGS)) {
         },
         defaultVariants: {
           layer: true,
-        },
-        refine: ({ variants, setDefaultVariants }) => {
-          calls.layer += 1;
-          setDefaultVariants({
-            offset: !variants.invert,
-            push: variants.invert ? 20 : undefined,
-          });
+          offset: (defaultValue, variants) => {
+            calls.layer += 1;
+            return variants.invert ? false : defaultValue;
+          },
+          push: (_, variants) => (variants.invert ? 20 : undefined),
         },
       });
       const frame = cv({
@@ -213,38 +203,23 @@ for (const config of Object.values(CONFIGS)) {
       });
       const component = getModeComponent(mode, cv({ extend: [control] }));
 
-      try {
-        const props = component();
-        expect(getStyleClass(props)).toEqual({
-          class: cls("layer offset frame control"),
-        });
-        expect(calls).toEqual({
-          layer: 2,
-          frame: 2,
-          control: 2,
-        });
-        calls.layer = 0;
-        calls.frame = 0;
-        calls.control = 0;
-        expect(component.getVariants()).toEqual({
-          layer: true,
-          offset: true,
-          push: undefined,
-          frame: true,
-          control: true,
-        });
-        expect(calls).toEqual({
-          layer: 2,
-          frame: 2,
-          control: 2,
-        });
-        expect(warn).not.toHaveBeenCalled();
-      } finally {
-        warn.mockRestore();
-      }
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: cls("layer offset frame control"),
+      });
+      expect(component.getVariants()).toEqual({
+        layer: true,
+        offset: true,
+        frame: true,
+        control: true,
+      });
+      expect(calls.layer).toBeGreaterThan(0);
+      expect(calls.frame).toBeGreaterThan(0);
+      expect(calls.control).toBeGreaterThan(0);
+      expect(warn).not.toHaveBeenCalled();
     });
 
-    test("refine with setDefaultVariants", () => {
+    test("computed defaultVariants", () => {
       const component = getModeComponent(
         mode,
         cv({
@@ -252,10 +227,9 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          refine: ({ variants, setDefaultVariants }) => {
-            if (variants.size === "lg") {
-              setDefaultVariants({ color: "red" });
-            }
+          defaultVariants: {
+            color: (defaultValue, variants) =>
+              variants.size === "lg" ? "red" : defaultValue,
           },
         }),
       );
@@ -263,7 +237,7 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
     });
 
-    test("refine setDefaultVariants does not override props", () => {
+    test("computed defaultVariants do not override props", () => {
       const component = getModeComponent(
         mode,
         cv({
@@ -271,8 +245,8 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          refine: ({ setDefaultVariants }) => {
-            setDefaultVariants({ color: "red" });
+          defaultVariants: {
+            color: () => "red" as const,
           },
         }),
       );
@@ -280,25 +254,7 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("lg blue") });
     });
 
-    test("refine setDefaultVariants overrides defaultVariants", () => {
-      const component = getModeComponent(
-        mode,
-        cv({
-          variants: {
-            size: { sm: "sm", lg: "lg" },
-            color: { red: "red", blue: "blue" },
-          },
-          defaultVariants: { size: "sm", color: "red" },
-          refine: ({ setDefaultVariants }) => {
-            setDefaultVariants({ color: "blue" });
-          },
-        }),
-      );
-      const props = component();
-      expect(getStyleClass(props)).toEqual({ class: cls("sm blue") });
-    });
-
-    test("refine setDefaultVariants overrides extended defaultVariants", () => {
+    test("computed defaultVariants override extended defaultVariants", () => {
       const base = cv({
         variants: { color: { red: "red", blue: "blue" } },
         defaultVariants: { color: "red" },
@@ -308,9 +264,9 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { size: { sm: "sm", lg: "lg" } },
-          defaultVariants: { size: "sm" },
-          refine: ({ setDefaultVariants }) => {
-            setDefaultVariants({ color: "blue" });
+          defaultVariants: {
+            size: "sm",
+            color: () => "blue" as const,
           },
         }),
       );
@@ -318,31 +274,11 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("blue sm") });
     });
 
-    test("refine setDefaultVariants overrides child defaultVariants", () => {
+    test("parent computed defaultVariants can override child defaultVariants", () => {
       const base = cv({
         variants: { size: { sm: "sm", lg: "lg" } },
-      });
-      const component = getModeComponent(
-        mode,
-        cv({
-          extend: [base],
-          variants: { color: { red: "red", blue: "blue" } },
-          defaultVariants: { size: "sm", color: "red" },
-          refine: ({ setDefaultVariants }) => {
-            setDefaultVariants({ size: "lg" });
-          },
-        }),
-      );
-      const props = component();
-      expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
-    });
-
-    test("refine setDefaultVariants from parent overrides child defaultVariants", () => {
-      const base = cv({
-        variants: { size: { sm: "sm", lg: "lg" } },
-        defaultVariants: { size: "sm" },
-        refine: ({ setDefaultVariants }) => {
-          setDefaultVariants({ size: "lg" });
+        defaultVariants: {
+          size: () => "lg" as const,
         },
       });
       const component = getModeComponent(
@@ -357,13 +293,12 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
     });
 
-    test("refine setDefaultVariants from parent overrides child defaultVariants based on props", () => {
+    test("parent computed defaultVariants can depend on child defaults", () => {
       const base = cv({
-        variants: { size: { sm: "sm", lg: "lg" }, enabled: "" },
-        defaultVariants: { size: "sm" },
-        refine: ({ variants, setDefaultVariants }) => {
-          if (!variants.enabled) return;
-          setDefaultVariants({ size: "lg" });
+        variants: { size: { sm: "sm", lg: "lg" }, large: "" },
+        defaultVariants: {
+          size: (defaultValue, variants) =>
+            variants.large ? "lg" : defaultValue,
         },
       });
       const component = getModeComponent(
@@ -371,97 +306,68 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { color: { red: "red", blue: "blue" } },
-          defaultVariants: { size: "sm", color: "red" },
+          defaultVariants: { size: "sm", color: "red", large: true },
         }),
       );
-      const props = component({ enabled: true });
+      const props = component();
       expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
     });
 
-    test("refine receives default variants from child", () => {
-      const base = cv({
-        variants: { size: { sm: "sm", lg: "lg" }, large: "" },
-        defaultVariants: { size: "sm" },
-        refine: ({ variants, setDefaultVariants }) => {
-          if (variants.large) {
-            setDefaultVariants({ size: "lg" });
-          }
+    test("computed defaultVariants preserve intermediate defaults", () => {
+      const parent = cv({
+        variants: { size: { sm: "sm", lg: "lg" } },
+        defaultVariants: {
+          size: (defaultValue, variants) =>
+            variants.size ? defaultValue : "lg",
         },
       });
-      const component = getModeComponent(
-        mode,
-        cv({
-          extend: [base],
-          variants: { color: { red: "red", blue: "blue" } },
-          defaultVariants: { size: "sm", color: "red", large: true },
-        }),
-      );
+      const child = cv({ extend: [parent], defaultVariants: { size: "sm" } });
+      const component = getModeComponent(mode, cv({ extend: [child] }));
       const props = component();
-      expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
+      expect(getStyleClass(props)).toEqual({ class: cls("sm") });
     });
 
-    test("refine receives default variants from grandchild", () => {
+    test("child computed defaultVariants override parent computed defaultVariants", () => {
       const base = cv({
-        variants: { size: { sm: "sm", lg: "lg" }, large: "" },
-        defaultVariants: { size: "sm" },
-        refine: ({ variants, setDefaultVariants }) => {
-          if (variants.large) {
-            setDefaultVariants({ size: "lg" });
-          }
+        variants: { size: { sm: "sm", lg: "lg" } },
+        defaultVariants: {
+          size: () => "lg" as const,
         },
       });
-      const base2 = cv({ extend: [base] });
       const component = getModeComponent(
         mode,
         cv({
-          extend: [base2],
+          extend: [base],
           variants: { color: { red: "red", blue: "blue" } },
-          defaultVariants: { size: "sm", color: "red", large: true },
+          defaultVariants: {
+            size: () => "sm" as const,
+            color: "red",
+          },
         }),
       );
       const props = component();
-      expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
-    });
-
-    test("refine receives default variants from intermediate component", () => {
-      const parent = cv({
-        variants: { size: { sm: "sm", lg: "lg" } },
-        refine: ({ variants, setDefaultVariants }) => {
-          if (!variants.size) {
-            setDefaultVariants({ size: "lg" });
-          }
-        },
-      });
-      const child = cv({ extend: [parent], defaultVariants: { size: "sm" } });
-      const component = getModeComponent(mode, cv({ extend: [child] }));
-      const props = component();
-      expect(getStyleClass(props)).toEqual({ class: cls("sm") });
+      expect(getStyleClass(props)).toEqual({ class: cls("sm red") });
     });
 
-    test("child refine setDefaultVariants overrides parent refine setDefaultVariants", () => {
+    test("child computed defaultVariants can preserve parent computed defaultVariants", () => {
       const base = cv({
         variants: { size: { sm: "sm", lg: "lg" } },
-        defaultVariants: { size: "sm" },
-        refine: ({ setDefaultVariants }) => {
-          setDefaultVariants({ size: "lg" });
+        defaultVariants: {
+          size: () => "lg" as const,
         },
       });
       const component = getModeComponent(
         mode,
         cv({
           extend: [base],
-          variants: { color: { red: "red", blue: "blue" } },
-          defaultVariants: { size: "sm", color: "red" },
-          refine: ({ setDefaultVariants }) => {
-            setDefaultVariants({ size: "sm" });
+          defaultVariants: {
+            size: (defaultValue) => defaultValue,
           },
         }),
       );
       const props = component();
-      // Order: parent defaultVariants (sm) -> child defaultVariants (sm)
-      //     -> parent refine.setDefaultVariants (lg)
-      //     -> child refine.setDefaultVariants (sm)
-      expect(getStyleClass(props)).toEqual({ class: cls("sm red") });
+      expect(getStyleClass(props)).toEqual({ class: cls("lg") });
+      expect(component.getVariants()).toEqual({ size: "lg" });
     });
 
     test("refine in extended component does not see foreign variant keys", () => {
@@ -484,6 +390,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { color: { red: "red", blue: "blue" } },
+          defaultVariants: { size: "sm" },
         }),
       );
       const props = component({ color: "red" });
@@ -492,18 +399,14 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("setDefaultVariants in extended component does not branch on foreign variant keys", () => {
-      // Same shape as the test above, but the base's `refine` reaches
-      // `setDefaultVariants` — covers the resolveDefaults pass (driving
-      // both class output and `getVariants`) rather than the render-time
-      // compute path.
+    test("computed defaultVariants in extended component do not branch on foreign variant keys", () => {
       const base = cv({
         variants: { size: { sm: "sm", lg: "lg" } },
-        defaultVariants: { size: "sm" },
-        refine: ({ variants, setDefaultVariants }) => {
-          if ("color" in (variants as Record<string, unknown>)) {
-            setDefaultVariants({ size: "lg" });
-          }
+        defaultVariants: {
+          size: (defaultValue, variants) =>
+            "color" in (variants as Record<string, unknown>)
+              ? "lg"
+              : defaultValue,
         },
       });
       const component = getModeComponent(
@@ -511,6 +414,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { color: { red: "red", blue: "blue" } },
+          defaultVariants: { size: "sm" },
         }),
       );
       const props = component({ color: "red" });
@@ -521,11 +425,11 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("child setDefaultVariants receives refined variants from parent", () => {
+    test("child computed defaultVariants receive refined variants from parent", () => {
       const base = cv({
         variants: { size: { sm: "sm", lg: "lg" }, small: "" },
-        refine: ({ setDefaultVariants }) => {
-          setDefaultVariants({ small: true });
+        refine: ({ setVariants }) => {
+          setVariants({ small: true });
         },
       });
       const component = getModeComponent(
@@ -533,11 +437,10 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { color: { red: "red", blue: "blue" } },
-          defaultVariants: { size: "lg", color: "red" },
-          refine: ({ variants, setDefaultVariants }) => {
-            if (variants.small) {
-              setDefaultVariants({ size: "sm" });
-            }
+          defaultVariants: {
+            size: (defaultValue, variants) =>
+              variants.small ? "sm" : defaultValue,
+            color: "red",
           },
         }),
       );
@@ -571,21 +474,21 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
     });
 
-    test("base refine setDefaultVariants works after its own setVariants re-run", () => {
+    test("computed defaultVariants work after a setVariants re-run", () => {
       const base = cv({
         variants: {
           size: { sm: "sm", lg: "lg" },
           active: "",
           mode: { on: "on" },
         },
-        defaultVariants: { size: "sm" },
-        refine: ({ variants, setVariants, setDefaultVariants }) => {
+        defaultVariants: {
+          size: (defaultValue, variants) =>
+            variants.mode === "on" ? "lg" : defaultValue,
+        },
+        refine: ({ variants, setVariants }) => {
           if (variants.active) {
             setVariants({ mode: "on" });
           }
-          if (variants.mode === "on") {
-            setDefaultVariants({ size: "lg" });
-          }
         },
       });
       const component = getModeComponent(mode, cv({ extend: [base] }));
@@ -635,11 +538,11 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(getProps())).toEqual({ class: cls("red") });
     });
 
-    test("child setVariants keeps overriding base setDefaultVariants across re-runs", () => {
+    test("child setVariants keeps overriding base computed defaultVariants across re-runs", () => {
       const base = cv({
         variants: { color: { red: "red", blue: "blue" } },
-        refine: ({ setDefaultVariants }) => {
-          setDefaultVariants({ color: "blue" });
+        defaultVariants: {
+          color: () => "blue" as const,
         },
       });
       const component = getModeComponent(
@@ -659,11 +562,11 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("red sm") });
     });
 
-    test("refine setVariants sticks across re-runs", () => {
+    test("refine setVariants sticks across computed default re-runs", () => {
       const base = cv({
         variants: { color: { red: "red", blue: "blue" } },
-        refine: ({ setDefaultVariants }) => {
-          setDefaultVariants({ color: "blue" });
+        defaultVariants: {
+          color: () => "blue" as const,
         },
       });
       const component = getModeComponent(
@@ -682,20 +585,21 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("red") });
     });
 
-    test("base refine setDefaultVariants can override child static defaults after a re-run", () => {
+    test("base computed defaultVariants can override child static defaults after a re-run", () => {
       const base = cv({
         variants: {
           size: { sm: "sm", lg: "lg" },
           active: "",
           mode: { on: "on" },
         },
-        refine: ({ variants, setVariants, setDefaultVariants }) => {
+        defaultVariants: {
+          size: (defaultValue, variants) =>
+            variants.mode === "on" ? "lg" : defaultValue,
+        },
+        refine: ({ variants, setVariants }) => {
           if (variants.active) {
             setVariants({ mode: "on" });
           }
-          if (variants.mode === "on") {
-            setDefaultVariants({ size: "lg" });
-          }
         },
       });
       const component = getModeComponent(
@@ -706,7 +610,32 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("lg on") });
     });
 
-    test("setVariants from earlier extends overrides setDefaultVariants from later extends", () => {
+    test("parent computed defaultVariants fall back to child defaults after a dependency changes", () => {
+      const layer = cv({
+        variants: {
+          a: { one: "one", two: "two" },
+          b: { true: "b-true", false: "b-false" },
+        },
+        defaultVariants: {
+          b: true,
+          a: (defaultValue, variants) => (variants.b ? "one" : defaultValue),
+        },
+        refine: ({ variants, setVariants }) => {
+          if (variants.b) {
+            setVariants({ b: false });
+          }
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({ extend: [layer], defaultVariants: { a: "two" } }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: cls("two b-false") });
+      expect(component.getVariants()).toEqual({ a: "two", b: false });
+    });
+
+    test("setVariants from earlier extends overrides computed defaultVariants from later extends", () => {
       const first = cv({
         variants: { color: { red: "first-red", blue: "first-blue" } },
         refine: ({ setVariants }) => {
@@ -715,8 +644,8 @@ for (const config of Object.values(CONFIGS)) {
       });
       const second = cv({
         variants: { color: { red: "second-red", blue: "second-blue" } },
-        refine: ({ setDefaultVariants }) => {
-          setDefaultVariants({ color: "blue" });
+        defaultVariants: {
+          color: () => "blue" as const,
         },
       });
       const component = getModeComponent(mode, cv({ extend: [first, second] }));
@@ -726,17 +655,17 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("setDefaultVariants from later extends overrides setDefaultVariants from earlier extends", () => {
+    test("computed defaultVariants from later extends apply to final output", () => {
       const first = cv({
         variants: { color: { red: "first-red", blue: "first-blue" } },
-        refine: ({ setDefaultVariants }) => {
-          setDefaultVariants({ color: "red" });
+        defaultVariants: {
+          color: () => "red" as const,
         },
       });
       const second = cv({
         variants: { color: { red: "second-red", blue: "second-blue" } },
-        refine: ({ setDefaultVariants }) => {
-          setDefaultVariants({ color: "blue" });
+        defaultVariants: {
+          color: () => "blue" as const,
         },
       });
       const component = getModeComponent(mode, cv({ extend: [first, second] }));
@@ -746,7 +675,7 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("setDefaultVariants does not override stable setVariants on later passes", () => {
+    test("computed defaultVariants do not override stable setVariants on later passes", () => {
       const base = cv({
         variants: { color: { red: "base-red", blue: "base-blue" } },
         refine: ({ setVariants }) => {
@@ -758,10 +687,9 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { color: { red: "child-red", blue: "child-blue" } },
-          refine: ({ variants, setDefaultVariants }) => {
-            if (variants.color === "red") {
-              setDefaultVariants({ color: "blue" });
-            }
+          defaultVariants: {
+            color: (defaultValue, variants) =>
+              variants.color === "red" ? "blue" : defaultValue,
           },
         }),
       );
@@ -771,7 +699,7 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("setDefaultVariants does not override setVariants from a previous pass", () => {
+    test("computed defaultVariants do not override setVariants from a previous pass", () => {
       const component = getModeComponent(
         mode,
         cv({
@@ -779,13 +707,14 @@ for (const config of Object.values(CONFIGS)) {
             color: { red: "red", blue: "blue" },
             done: "",
           },
-          refine: ({ variants, setVariants, setDefaultVariants }) => {
+          defaultVariants: {
+            color: (defaultValue, variants) =>
+              variants.done ? "blue" : defaultValue,
+          },
+          refine: ({ variants, setVariants }) => {
             if (!variants.done) {
               setVariants({ color: "red", done: true });
             }
-            if (variants.done) {
-              setDefaultVariants({ color: "blue" });
-            }
           },
         }),
       );
@@ -794,7 +723,7 @@ for (const config of Object.values(CONFIGS)) {
     });
 
     test("refine warns when variants keep changing", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const component = getModeComponent(
         mode,
         cv({
@@ -806,18 +735,14 @@ for (const config of Object.values(CONFIGS)) {
         }),
       );
 
-      try {
-        component();
-        expect(warn).toHaveBeenCalledWith(
-          expect.stringContaining("Maximum refine iterations exceeded"),
-        );
-      } finally {
-        warn.mockRestore();
-      }
+      component();
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining("Maximum refine iterations exceeded"),
+      );
     });
 
     test("refine warning is shared across extended components", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const base = cv({
         variants: { size: { sm: "sm", lg: "lg" } },
         defaultVariants: { size: "sm" },
@@ -827,32 +752,28 @@ for (const config of Object.values(CONFIGS)) {
       });
       const component = getModeComponent(mode, cv({ extend: [base] }));
 
-      try {
-        component();
-        expect(warn).toHaveBeenCalledTimes(1);
-        expect(warn).toHaveBeenCalledWith(
-          expect.stringContaining("Maximum refine iterations exceeded"),
-        );
-        expect(warn).toHaveBeenCalledWith(
-          expect.stringMatching(
-            /Variant\(s\) that did not stabilize: [^\n]*\bsize\b/,
-          ),
-        );
-        expect(warn).toHaveBeenCalledWith(
-          expect.stringMatching(
-            /Latest variant changes before warning: [^\n]*\bsize: "(sm|lg)" -> "(sm|lg)"/,
-          ),
-        );
-        expect(warn).toHaveBeenCalledWith(
-          expect.stringContaining("Component created at:"),
-        );
-      } finally {
-        warn.mockRestore();
-      }
+      component();
+      expect(warn).toHaveBeenCalledTimes(1);
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining("Maximum refine iterations exceeded"),
+      );
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringMatching(
+          /Variant\(s\) that did not stabilize: [^\n]*\bsize\b/,
+        ),
+      );
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringMatching(
+          /Latest variant changes before warning: [^\n]*\bsize: "(sm|lg)" -> "(sm|lg)"/,
+        ),
+      );
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining("Component created at:"),
+      );
     });
 
     test("getVariants warns when variants keep changing", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const component = getModeComponent(
         mode,
         cv({
@@ -864,31 +785,27 @@ for (const config of Object.values(CONFIGS)) {
         }),
       );
 
-      try {
-        component.getVariants();
-        expect(warn).toHaveBeenCalledWith(
-          expect.stringContaining("Maximum refine iterations exceeded"),
-        );
-        expect(warn).toHaveBeenCalledWith(
-          expect.stringMatching(
-            /Variant\(s\) that did not stabilize: [^\n]*\bsize\b/,
-          ),
-        );
-        expect(warn).toHaveBeenCalledWith(
-          expect.stringMatching(
-            /Latest variant changes before warning: [^\n]*\bsize: "(sm|lg)" -> "(sm|lg)"/,
-          ),
-        );
-        expect(warn).toHaveBeenCalledWith(
-          expect.stringContaining("Component created at:"),
-        );
-      } finally {
-        warn.mockRestore();
-      }
+      component.getVariants();
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining("Maximum refine iterations exceeded"),
+      );
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringMatching(
+          /Variant\(s\) that did not stabilize: [^\n]*\bsize\b/,
+        ),
+      );
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringMatching(
+          /Latest variant changes before warning: [^\n]*\bsize: "(sm|lg)" -> "(sm|lg)"/,
+        ),
+      );
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining("Component created at:"),
+      );
     });
 
     test("refine warning is omitted in production", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       vi.stubEnv("NODE_ENV", "production");
       const component = getModeComponent(
         mode,
@@ -906,12 +823,11 @@ for (const config of Object.values(CONFIGS)) {
         expect(warn).not.toHaveBeenCalled();
       } finally {
         vi.unstubAllEnvs();
-        warn.mockRestore();
       }
     });
 
     test("refine warning names the variant key that did not stabilize", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const component = getModeComponent(
         mode,
         cv({
@@ -926,25 +842,21 @@ for (const config of Object.values(CONFIGS)) {
         }),
       );
 
-      try {
-        component();
-        expect(warn).toHaveBeenCalledWith(
-          expect.stringMatching(
-            /Variant\(s\) that did not stabilize: [^\n]*\bsize\b/,
-          ),
-        );
-        expect(warn).toHaveBeenCalledWith(
-          expect.not.stringMatching(
-            /Variant\(s\) that did not stabilize: [^\n]*\bcolor\b/,
-          ),
-        );
-      } finally {
-        warn.mockRestore();
-      }
+      component();
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringMatching(
+          /Variant\(s\) that did not stabilize: [^\n]*\bsize\b/,
+        ),
+      );
+      expect(warn).toHaveBeenCalledWith(
+        expect.not.stringMatching(
+          /Variant\(s\) that did not stabilize: [^\n]*\bcolor\b/,
+        ),
+      );
     });
 
     test("refine warning reports keys that oscillate at different cadences", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       // `size` flips every iteration, `color` flips every other iteration, so
       // the final pair may agree on one of them — the warning must still name
       // both keys because each contributed to a transition.
@@ -970,30 +882,26 @@ for (const config of Object.values(CONFIGS)) {
         }),
       );
 
-      try {
-        component();
-        expect(warn).toHaveBeenCalledWith(
-          expect.stringMatching(
-            /Variant\(s\) that did not stabilize: [^\n]*\bsize\b/,
-          ),
-        );
-        expect(warn).toHaveBeenCalledWith(
-          expect.stringMatching(
-            /Variant\(s\) that did not stabilize: [^\n]*\bcolor\b/,
-          ),
-        );
-        expect(warn).toHaveBeenCalledWith(
-          expect.stringMatching(
-            /Latest variant changes before warning: [^\n]*\bsize\b[^\n]*\bcolor\b/,
-          ),
-        );
-      } finally {
-        warn.mockRestore();
-      }
+      component();
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringMatching(
+          /Variant\(s\) that did not stabilize: [^\n]*\bsize\b/,
+        ),
+      );
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringMatching(
+          /Variant\(s\) that did not stabilize: [^\n]*\bcolor\b/,
+        ),
+      );
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringMatching(
+          /Latest variant changes before warning: [^\n]*\bsize\b[^\n]*\bcolor\b/,
+        ),
+      );
     });
 
     test("refine warning includes the component creation stack", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const component = getModeComponent(
         mode,
         cv({
@@ -1005,20 +913,16 @@ for (const config of Object.values(CONFIGS)) {
         }),
       );
 
-      try {
-        component();
-        expect(warn).toHaveBeenCalledWith(
-          expect.stringContaining("Component created at:"),
-        );
-        expect(warn).toHaveBeenCalledWith(
-          expect.stringContaining("refine.test.ts"),
-        );
-        expect(warn).toHaveBeenCalledWith(
-          expect.not.stringContaining("node_modules"),
-        );
-      } finally {
-        warn.mockRestore();
-      }
+      component();
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining("Component created at:"),
+      );
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining("refine.test.ts"),
+      );
+      expect(warn).toHaveBeenCalledWith(
+        expect.not.stringContaining("node_modules"),
+      );
     });
 
     test("refine warning fallback stack skips internal creation frames", () => {
@@ -1030,7 +934,7 @@ for (const config of Object.values(CONFIGS)) {
       };
       const captureStackTrace = ErrorWithCaptureStackTrace.captureStackTrace;
       Reflect.deleteProperty(ErrorWithCaptureStackTrace, "captureStackTrace");
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const component = getModeComponent(
         mode,
         cv({
@@ -1057,17 +961,11 @@ for (const config of Object.values(CONFIGS)) {
         if (captureStackTrace) {
           ErrorWithCaptureStackTrace.captureStackTrace = captureStackTrace;
         }
-        warn.mockRestore();
       }
     });
 
     test("refine warning omits the creation stack when cv ran in production", () => {
-      let captured = "";
-      const warn = vi
-        .spyOn(console, "warn")
-        .mockImplementation((message: unknown) => {
-          captured = String(message);
-        });
+      using warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       vi.stubEnv("NODE_ENV", "production");
       const component = getModeComponent(
         mode,
@@ -1083,15 +981,15 @@ for (const config of Object.values(CONFIGS)) {
       try {
         vi.unstubAllEnvs();
         component();
-        expect(captured).toContain("Maximum refine iterations exceeded");
-        expect(captured).not.toContain("Component created at:");
+        const message = String(warn.mock.calls.at(-1)?.[0]);
+        expect(message).toContain("Maximum refine iterations exceeded");
+        expect(message).not.toContain("Component created at:");
       } finally {
         vi.unstubAllEnvs();
-        warn.mockRestore();
       }
     });
 
-    test("refine setDefaultVariants when explicitly passing undefined", () => {
+    test("computed defaultVariants run when explicitly passing undefined", () => {
       const component = getModeComponent(
         mode,
         cv({
@@ -1099,8 +997,8 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          refine: ({ setDefaultVariants }) => {
-            setDefaultVariants({ color: "red" });
+          defaultVariants: {
+            color: () => "red" as const,
           },
         }),
       );